// ============================================================
// HOMEPAGE COMPONENTS · Part 3
// Strategy chat teaser, Team, Contact, Footer
// ============================================================

function HmStrategy() {
  return (
    <section className="hm-strategy">
      <div className="hm-strategy-inner">
        <div className="hm-strategy-left">
          <div className="eyebrow-big"><span className="bar"></span>AI Strategy Chat</div>
          <h2>Niet zeker waar te beginnen? Spar met onze strategie-agent.</h2>
          <p>
            Binnen 10 minuten heb je een eerste AI-strategie op papier, toegespitst op jouw bedrijf, processen en ambitie. Veilig, vertrouwelijk, gratis.
          </p>
          <a href="https://strategy.repetive.ai" className="hm-strategy-cta" target="_blank" rel="noopener">
            Start het gesprek
            <span className="arr">→</span>
          </a>
        </div>
        <div className="hm-chat-mockup">
          <div className="hm-chat-header">
            <span className="lbl">strategy.repetive.ai</span>
            <div className="dots"><span></span><span></span><span></span></div>
          </div>
          <div className="hm-chat-msg">
            <div className="av">R</div>
            <div className="bubble">Welkom! Laten we samen een AI strategie opstellen. Met wie heb ik het genoegen?</div>
          </div>
          <div className="hm-chat-msg user">
            <div className="av">JI</div>
            <div className="bubble">Jan, operations lead bij een groothandel in technische producten.</div>
          </div>
          <div className="hm-chat-msg">
            <div className="av">R</div>
            <div className="bubble">Top. Waar gaat bij jullie de meeste tijd naartoe die je liever anders zou besteden?</div>
          </div>
          <div className="hm-chat-input">
            <span className="ph">Typ je bericht…</span>
            <span className="send">↑</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function HmTeam() {
  return (
    <section className="hm-team" id="team">
      <div className="hm-team-inner">
        <div className="hm-team-head">
          <div className="eyebrow-big"><span className="bar"></span>Over ons</div>
          <h2>Gevormd door ervaring.<br/>Gedreven door <span className="grad">resultaat.</span></h2>
        </div>

        <div className="hm-team-intro">
          <p>
            Met meer dan tien jaar ervaring in <strong>data en AI</strong> weten we wat werkt bij MKB-bedrijven, en wat niet. Wij zijn geen consultants die een rapport achterlaten.
          </p>
          <p>
            Wij zijn <strong>partners die bouwen, live gaan en betrokken blijven</strong>. We zijn eerlijk over wat AI wel en niet kan. We stoppen niet als de agent draait. We gaan door tot het resultaat er staat.
          </p>
        </div>

        <div className="hm-team-grid">
          {HM_TEAM.map(m => {
            const firstSpace = m.name.search(/[\s\u00a0]/);
            const firstName = firstSpace >= 0 ? m.name.slice(0, firstSpace) : m.name;
            const lastName = firstSpace >= 0 ? m.name.slice(firstSpace + 1) : '';
            return (
              <div key={m.name} className="hm-member" style={{ '--m-color': m.color }}>
                <div className="portrait" style={{ background: m.color }}>
                  {m.photo
                    ? <img src={m.photo} alt={m.name.replace(/\u00a0/g, ' ')} />
                    : m.initials}
                </div>
                <div className="m-meta">
                  <div className="name">
                    {firstName}
                    {lastName && <><br />{lastName}</>}
                  </div>
                  <div className="role">{m.role}</div>
                  <div className="phone">{m.phone}</div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="hm-team-foot">
          <span className="hm-team-foot-copy">We zoeken collega's. Kom je ons versterken?</span>
          <a href="Jobs.html" className="hub-link">
            Bekijk de open vacatures
            <span>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// HmContact and HmFooter are now in home_shared.jsx (shared with ROI page).

const HM_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{}/*EDITMODE-END*/;

function HmApp() {
  useTweaks(HM_TWEAK_DEFAULTS);

  return (
    <React.Fragment>
      <HmTopribbon activeLabel="Missie" />
      <HmHero />
      <HmIntro />
      <HmClients />
      <HmHow />
      <HmIntegrations />
      <HmWorkSection />
      <HmTeam />
      <HmContact />
      <HmFooter />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<HmApp />);

// ============================================================
// Hash-scroll fix: when arriving from another page with #anchor,
// the React app renders async — browser scrolls before the target
// exists. Re-scroll AFTER mount + on hash change, with sticky-header
// offset taken into account.
// ============================================================
function scrollToHash() {
  const hash = window.location.hash;
  if (!hash || hash === '#') return;
  // Wait for DOM + layout, then offset for the sticky topribbon (~64px)
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      const el = document.getElementById(hash.slice(1));
      if (!el) return;
      const headerH = document.querySelector('.topribbon')?.offsetHeight || 64;
      const top = el.getBoundingClientRect().top + window.scrollY - headerH - 8;
      window.scrollTo({ top, behavior: 'auto' });
    });
  });
}
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', scrollToHash);
} else {
  scrollToHash();
}
window.addEventListener('hashchange', scrollToHash);