// Hero.jsx — Dutch hero with closing-the-gap diagram
function Hero({ onContact, onStack }) {
  return (
    <section className="hero container" id="top">
      <span className="eyebrow">Een Nederlands bedrijf · opgericht 2024</span>
      <h1>
        De kloof dichten tussen <span className="swap">e-commerce</span> en <span className="swap">AI<span className="dot" style={{background:'var(--orange-500)', width:'0.12em', height:'0.12em', marginLeft:'0.02em'}}></span></span>
      </h1>
      <p className="lead">
        We runnen een eigen webshop voor dierenbenodigdheden. We bouwen
        de AI die de klantenservice afhandelt. En we leveren die hele
        stack aan andere webshops. Voor degenen die liever bezig zijn
        met wat ze verkopen, niet met wat eronder draait.
      </p>
      <div className="cta-row">
        <button className="btn lg" onClick={onContact}>
          Neem contact op
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </button>
        <button className="btn lg secondary" onClick={onStack}>Bekijk de stack</button>
      </div>

      <div className="gapviz">
        <div className="col">
          <span className="label">E-commerce</span>
          <span className="word">winkels die verkopen</span>
          <span style={{ font: 'var(--t-body-sm)', color: 'var(--ink-600)' }}>Catalogus, betalingen, fulfilment, retouren.</span>
        </div>
        <div className="bridge">
          <span className="line"></span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          <span className="line"></span>
        </div>
        <div className="col" style={{ textAlign: 'right' }}>
          <span className="label">AI</span>
          <span className="word">agents die antwoorden</span>
          <span style={{ font: 'var(--t-body-sm)', color: 'var(--ink-600)' }}>Tickets, aanbevelingen, retour-triage, in het Nederlands.</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });