// ============================================================
// HOMEPAGE COMPONENTS · Part 2
// Work, Clients, How we work (interactive timeline)
// ============================================================

function HmWorkSection() {
  return (
    <section className="hm-work" id="werk">
      <div className="hm-work-inner">
        <div className="hm-work-head">
          <div>
            <div className="eyebrow-big"><span className="bar"></span>Werk in actie</div>
            <h2>
              Onze agents werken<br/>
              24/7 voor <span className="grad">het MKB.</span>
            </h2>
          </div>
        </div>

        <div className="hm-work-grid">
          {HM_DOMAINS.map(card => {
            const live = card.stage === 'live';
            const Tag = live && card.href ? 'a' : 'div';
            return (
              <Tag
                key={card.id}
                className={'hm-work-card' + (live ? ' is-live' : ' is-soon')}
                href={live && card.href ? card.href : undefined}
              >
                <div className="wc-top">
                  <span className="wc-domain">{card.domain}</span>
                  <span className="hm-stage live"><span className="dot"></span>Live</span>
                </div>
                <h3 className="wc-title">{card.title}</h3>
                <p className="wc-one">{card.one}</p>
                <div className="wc-cta">
                  {live ? (
                    <React.Fragment>
                      Gebruik de demo-agent zelf
                      <span className="arr">→</span>
                    </React.Fragment>
                  ) : (
                    <span className="muted">Case-pagina komt eraan</span>
                  )}
                </div>
              </Tag>
            );
          })}
        </div>

        <div className="hm-work-foot">
          <a href="Cases hub.html" className="hub-link">
            Naar alle cases
            <span>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// HmIntegrations · own section between Aanpak and Werk in actie.
// Two-row marquee of all systems we've integrated with, text-only.
// ============================================================
function HmIntegrations() {
  const half = Math.ceil(HM_SYSTEMS.length / 2);
  const rowA = HM_SYSTEMS.slice(0, half);
  const rowB = HM_SYSTEMS.slice(half);
  const loopA = [...rowA, ...rowA];
  const loopB = [...rowB, ...rowB];

  return (
    <section className="hm-integ" id="integraties" aria-labelledby="integ-head">
      <div className="hm-integ-inner">
        <div className="hm-integ-head">
          <div className="eyebrow-big"><span className="bar"></span>Integraties</div>
          <h2 id="integ-head">
            Werkt in <span className="grad">jouw systemen.</span>
          </h2>
          <p>
            Staat jouw systeem er niet bij? Geen enkel probleem, <strong>we koppelen de agent gemakkelijk aan jouw sector-specifieke systemen.</strong>
          </p>
        </div>

        <div className="hm-integ-marquee" aria-hidden="true">
          <div className="hm-integ-row hm-integ-row-a">
            <div className="hm-integ-track">
              {loopA.map((s, i) => (
                <span className="hm-integ-pill" key={'a' + i}>{s}</span>
              ))}
            </div>
          </div>
          <div className="hm-integ-row hm-integ-row-b">
            <div className="hm-integ-track">
              {loopB.map((s, i) => (
                <span className="hm-integ-pill" key={'b' + i}>{s}</span>
              ))}
            </div>
          </div>
        </div>

        <div className="hm-integ-foot">
          <span className="hm-integ-count">Dit zijn de systemen tot dusver · deze lijst groeit elke week</span>
        </div>
      </div>
    </section>
  );
}

function HmClients() {
  // Duplicate list so the marquee loops seamlessly
  const items = [...HM_CLIENTS, ...HM_CLIENTS];
  return (
    <section className="hm-clients">
      <div className="hm-marquee">
        <div className="hm-marquee-track">
          {items.map((c, i) => (
            <React.Fragment key={i}>
              <div className="hm-client">
                {i === 0 && <span className="live-dot"></span>}
                {c.name}
              </div>
              <div className="hm-client-sep"></div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Interactive timeline: an agent-dot travels along the rail as you scroll ---
function HmHow() {
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0); // 0..1
  const targetRef = React.useRef(0);
  const displayedRef = React.useRef(0);
  const rafRef = React.useRef(null);

  React.useEffect(() => {
    function computeTarget() {
      const el = ref.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = rect.height + vh;
      const scrolled = vh - rect.top;
      const p = Math.max(0, Math.min(1, scrolled / total));
      const eased = Math.max(0, Math.min(1, (p - 0.15) / 0.40));
      targetRef.current = eased;
    }
    function loop() {
      // lerp displayed toward target for smooth, springy follow
      const d = displayedRef.current;
      const t = targetRef.current;
      const next = d + (t - d) * 0.2;
      displayedRef.current = next;
      if (Math.abs(next - t) > 0.0004) {
        setProgress(next);
      } else if (d !== t) {
        displayedRef.current = t;
        setProgress(t);
      }
      rafRef.current = requestAnimationFrame(loop);
    }
    computeTarget();
    displayedRef.current = targetRef.current;
    setProgress(targetRef.current);
    rafRef.current = requestAnimationFrame(loop);
    window.addEventListener('scroll', computeTarget, { passive: true });
    window.addEventListener('resize', computeTarget);
    return () => {
      cancelAnimationFrame(rafRef.current);
      window.removeEventListener('scroll', computeTarget);
      window.removeEventListener('resize', computeTarget);
    };
  }, []);

  const steps = HM_STEPS;
  const n = steps.length;
  // which step is currently "active" (the one the dot has passed)
  const activeIdx = Math.min(n - 1, Math.floor(progress * n + 0.0001));

  return (
    <section className="hm-how" id="aanpak" ref={ref}>
      <div className="hm-how-inner">
        <div className="hm-how-head">
          <div className="eyebrow-big"><span className="bar"></span>Aanpak</div>
          <h2>Van kennismaking tot <span className="grad">werkende agent</span> in zes weken.</h2>
          <p>Geen eindeloos traject. We starten met één concrete kans, bouwen hem uit, en zorgen dat je team ermee kan werken.</p>
          <a href="#contact" className="hm-how-cta">
            Plan een kennismaking
            <span className="arr">→</span>
          </a>
        </div>

        <div className="hm-timeline-wrap" style={{ '--p': progress }}>
          <div className="hm-timeline-rail">
            <div className="rail-bg"></div>
            <div className="rail-fill"></div>
            {steps.map((s, i) => {
              const at = i / (n - 1);
              const reached = progress >= at - 0.0001;
              return (
                <div
                  key={s.n}
                  className={'rail-node' + (reached ? ' reached' : '') + (i === activeIdx ? ' active' : '')}
                  style={{ '--at': at }}
                >
                  <div className="rail-node-inner">{s.n}</div>
                </div>
              );
            })}
            <div
              className="rail-agent"
              aria-hidden="true"
            >
              <div className="agent-ring"></div>
              <div className="agent-core">
                <img
                  src="assets/arrow_grad_v2.png"
                  alt=""
                  style={{
                    width: 26, height: 26, display: 'block',
                    transform: `rotate(${progress * 360}deg)`,
                    transition: 'transform 0.08s linear',
                  }}
                />
              </div>
            </div>
          </div>

          <div className="hm-steps">
            {steps.map((s, i) => (
              <div
                key={s.n}
                className={'hm-step' + (progress >= (i / (n-1)) - 0.0001 ? ' reached' : '') + (i === activeIdx ? ' active' : '')}
              >
                <div className="hm-step-week">{s.week}</div>
                <h4>{s.title}</h4>
                <p>{s.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HmWorkSection, HmIntegrations, HmClients, HmHow });