// ============================================================
// HOMEPAGE COMPONENTS · Repetive.ai
// Part 1: Topribbon, Hero, Intro
// ============================================================

function HmTopribbon({ activeLabel, homePrefix = '' }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const resolve = (href) => (href && href.startsWith('#')) ? (homePrefix + href) : href;
  return (
    <header className="topribbon">
      <div className="topribbon-inner">
        <a href="/" className="brand">
          <img src="assets/logo.png" alt="Repetive" />
        </a>
        <nav>
          {HM_NAV.map(item => {
            if (item.children) {
              const cls = ['nav-item', activeLabel === item.label ? 'active' : ''].filter(Boolean).join(' ');
              return (
                <div key={item.label} className={cls}>
                  <a className="nav-label" href="/">{item.label}</a>
                  <div className="nav-dropdown">
                    {item.children.map(c => (
                      <a key={c.label} href={resolve(c.href)}>{c.label}</a>
                    ))}
                  </div>
                </div>
              );
            }
            const cls = [
              activeLabel === item.label ? 'active' : '',
              item.accent ? 'nav-accent' : '',
            ].filter(Boolean).join(' ');
            return (
              <a key={item.label} href={resolve(item.href)} className={cls}>
                {item.label}
                {item.accent && <span className="nav-accent-arr" aria-hidden="true">→</span>}
              </a>
            );
          })}
        </nav>
        <div className="right">
          <a href={resolve('#contact')} className="pill-cta">Plan een gesprek</a>
          <button
            className="ribbon-burger"
            onClick={() => setMenuOpen(v => !v)}
            aria-label="Menu"
            aria-expanded={menuOpen}
          >
            <span className={menuOpen ? 'open' : ''}></span>
            <span className={menuOpen ? 'open' : ''}></span>
            <span className={menuOpen ? 'open' : ''}></span>
          </button>
        </div>
      </div>
      {menuOpen && (
        <div className="ribbon-drawer">
          {HM_NAV.map(item => {
            if (item.children) {
              return (
                <React.Fragment key={item.label}>
                  <div className="drawer-group-label">{item.label}</div>
                  {item.children.map(c => (
                    <a key={c.label} href={resolve(c.href)} onClick={() => setMenuOpen(false)} className="drawer-sub">
                      {c.label}
                    </a>
                  ))}
                </React.Fragment>
              );
            }
            return (
              <a key={item.label} href={resolve(item.href)} onClick={() => setMenuOpen(false)}>
                {item.label}
              </a>
            );
          })}
          <a href={resolve('#contact')} onClick={() => setMenuOpen(false)} className="drawer-cta">Plan een gesprek</a>
        </div>
      )}
    </header>
  );
}

function HmHero() {
  return (
    <section className="hm-hero" id="top">
      <div className="hm-hero-inner">
        <div className="hm-hero-left">
          <h1>
            Repeat less.
            <span className="line2"><span className="grad">Achieve more.</span></span>
          </h1>
          <p className="lede">
            Jouw mensen maken het verschil. <strong>AI agents doen de rest</strong>: het repetitieve werk dat niemand mist, maar dat elke week uren kost.
          </p>
          <div className="hm-hero-ctas">
            <a href="#werk" className="hm-hero-cta fancy">
              <span className="cta-label">Hoe werkt dit in jouw bedrijf?</span>
              <span className="cta-arr" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="20" height="20"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
              <span className="cta-shine" aria-hidden="true"></span>
            </a>
            <a href="Cases hub.html" className="hm-hero-ghost">
              Bekijk alle cases
            </a>
          </div>
          <div className="hm-hero-meta">
            <span className="m"><strong>10+ jaar</strong> ervaring in data &amp; AI, vertaald naar agents voor het MKB.</span>
          </div>
        </div>
        <div className="hm-hero-arrow" aria-hidden="true">
          <img src="assets/arrow_grad_v2.png" alt="" />
        </div>
      </div>
    </section>
  );
}

const ROLE_SPREAD_DATA = [
  { id: 'sales',      label: 'Sales',            color: '#FB993F', hired: 'deals te sluiten',           but: 'typt offertes over' },
  { id: 'service',    label: 'Customer Service', color: '#F83C72', hired: 'klanten écht te helpen',     but: 'beantwoordt standaard-vragen' },
  { id: 'admin',      label: 'Administration',   color: '#4D01B4', hired: 'het overzicht te bewaken',   but: 'maakt facturen kloppend' },
  { id: 'operations', label: 'Operations',       color: '#FFC031', hired: 'processen te verbeteren',    but: 'matcht orders in spreadsheets' },
];

function RoleSpread() {
  const rootRef = React.useRef(null);
  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const rows = Array.from(root.querySelectorAll('.role-line'));
    const io = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const idx = rows.indexOf(entry.target);
          setTimeout(() => entry.target.classList.add('in-view'), idx * 80);
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.35 });
    rows.forEach(r => io.observe(r));
    return () => io.disconnect();
  }, []);
  return (
    <div className="role-list" ref={rootRef}>
      {ROLE_SPREAD_DATA.map((r) => (
        <div key={r.id} className="role-line" style={{ '--role-color': r.color }}>
          <div className="role-line-name">
            <span className="role-line-bar" aria-hidden="true" />
            {r.label}
          </div>
          <p className="role-line-text">
            Aangenomen om <span className="role-line-hired">{r.hired}</span>,
            <br/>
            maar <span className="role-line-but">{r.but}</span>.
          </p>
        </div>
      ))}
    </div>
  );
}

function HmIntro() {
  return (
    <section className="hm-intro" id="missie">
      <div className="hm-intro-inner">
        <div className="hm-intro-left">
          <div className="eyebrow-big"><span className="bar"></span>Missie</div>
          <h2>
            <span className="grad">Presteren,</span> <br/>
            niet administreren.
          </h2>
          <p className="lede">
            Wij bouwen <strong>AI agents</strong> die het repetitieve werk overnemen. Zodat jouw team toekomt aan het werk dat groei oplevert én energie geeft.
          </p>
        </div>
        <div className="hm-intro-right">
          <RoleSpread />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HmTopribbon, HmHero, HmIntro });