// Hero split — client (light) / merchant (dark) avec divider central

function Hero() {
  const { Icon } = window;
  return (
    <section style={{ position: 'relative', borderBottom: '1px solid var(--border)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 720 }}>

        {/* GAUCHE — CLIENT */}
        <div style={{ padding: '88px 56px 88px 8vw', background: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
          <div className="rise">
            <span className="chip"><span className="chip-dot" /> Pour les client·e·s</span>
          </div>
          <h1 className="h-display rise rise-1" style={{ marginTop: 24 }}>
            Achetez<br/>
            <span className="serif-italic" style={{ color: 'var(--accent)' }}>local,</span><br/>
            sans bouger.
          </h1>
          <p className="body-lg rise rise-2" style={{ marginTop: 24, maxWidth: 420 }}>
            La marketplace qui rassemble vos boulangers, fleuristes et artisans préférés. Une commande, plusieurs boutiques, un seul paiement.
          </p>
          <div className="rise rise-3" style={{ display: 'flex', gap: 10, marginTop: 32 }}>
            <a className="btn btn-lg btn-accent">Découvrir les boutiques <Icon.Arrow /></a>
            <a className="btn btn-lg btn-ghost"><Icon.Search /> Près de chez moi</a>
          </div>

          {/* Mock cards de boutiques flottantes */}
          <div className="rise rise-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 56, maxWidth: 540 }}>
            {[
              { name: 'Boulangerie Fabre', cat: 'Pains · Aix', rating: '4.9' },
              { name: 'Fleurs de Camille', cat: 'Fleurs · Marseille', rating: '4.8' },
              { name: 'Cave des Vignerons', cat: 'Vins · Avignon', rating: '5.0' },
            ].map((s, i) => (
              <div key={i} className="card" style={{ padding: 12, transform: `translateY(${i % 2 ? 16 : 0}px)`, boxShadow: 'var(--shadow-md)', overflow: 'hidden' }}>
                <div style={{ height: 80, borderRadius: 8, overflow: 'hidden' }}>
                  <window.Photo name={s.name} />
                </div>
                <div style={{ marginTop: 10, fontSize: 13, fontWeight: 600 }}>{s.name}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2, display: 'flex', justifyContent: 'space-between' }}>
                  <span>{s.cat}</span>
                  <span style={{ color: 'var(--accent)' }}>★ {s.rating}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* DROITE — MARCHAND */}
        <div style={{
          padding: '88px 8vw 88px 56px',
          background: 'var(--bg-dark)',
          color: 'var(--ink-on-dark)',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* glow */}
          <div style={{
            position: 'absolute', top: -120, right: -120, width: 400, height: 400,
            background: 'radial-gradient(circle, var(--accent-soft) 0%, transparent 70%)',
            opacity: 0.6, pointerEvents: 'none',
          }} />

          <div className="rise" style={{ position: 'relative' }}>
            <span className="chip chip-on-dark"><span className="chip-dot" /> Pour les commerçant·e·s</span>
          </div>
          <h1 className="h-display rise rise-1" style={{ marginTop: 24, color: 'var(--ink-on-dark)', position: 'relative' }}>
            Vendez<br/>
            <span className="serif-italic" style={{ color: 'var(--accent)' }}>plus,</span><br/>
            sans la tech.
          </h1>
          <p className="body-lg rise rise-2" style={{ marginTop: 24, maxWidth: 420, color: 'var(--ink-on-dark-2)', position: 'relative' }}>
            Ouvrez votre boutique en 12 minutes. Catalogue illimité, Stripe Connect intégré, <b style={{ color: 'var(--ink-on-dark)' }}>0% de commission</b> sur le plan Pro.
          </p>
          <div className="rise rise-3" style={{ display: 'flex', gap: 10, marginTop: 32, position: 'relative' }}>
            <a className="btn btn-lg btn-on-dark-primary">Ouvrir ma boutique <Icon.Arrow /></a>
            <a className="btn btn-lg btn-on-dark-ghost">Voir la démo</a>
          </div>

          {/* Mini dashboard preview */}
          <div className="rise rise-4 card card-on-dark" style={{
            marginTop: 56, padding: 20, maxWidth: 540, position: 'relative',
            boxShadow: 'var(--shadow-lg)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-on-dark-3)', letterSpacing: '0.1em' }}>BOULANGERIE FABRE · CA AVRIL</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, marginTop: 4, letterSpacing: '-0.03em' }}>3 420 €</div>
              </div>
              <span className="chip chip-on-dark" style={{ background: 'var(--accent-soft)', color: 'var(--accent)', borderColor: 'var(--accent-line)' }}>
                ↗ +18%
              </span>
            </div>

            {/* Bar chart */}
            <div style={{ height: 80, display: 'flex', alignItems: 'flex-end', gap: 5, padding: '0 2px', position: 'relative' }}>
              {[42, 58, 50, 72, 48, 90, 65].map((h, i) => (
                <div key={i} style={{
                  flex: 1, height: `${h}%`,
                  background: i === 5 ? 'var(--accent)' : 'rgba(255,255,255,0.18)',
                  borderRadius: 3,
                }} />
              ))}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-on-dark-3)', marginTop: 8 }}>
              {['L','M','M','J','V','S','D'].map((d, i) => <span key={i}>{d}</span>)}
            </div>

            {/* recent orders */}
            <div style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--border-on-dark)' }}>
              {[
                ['Marie L.', 'Pain au levain ×2', '4,80 €', 'attente'],
                ['Thomas R.', 'Croissants ×4', '12,40 €', 'expédiée'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0', fontSize: 12 }}>
                  <span><b>{r[0]}</b> <span style={{ color: 'var(--ink-on-dark-3)' }}>{r[1]}</span></span>
                  <span style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                    <b>{r[2]}</b>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 9, padding: '2px 7px',
                      borderRadius: 999, border: '1px solid var(--border-on-dark-strong)',
                      color: r[3] === 'expédiée' ? 'var(--accent)' : 'var(--ink-on-dark-2)',
                    }}>{r[3]}</span>
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Divider central */}
        <div style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 56, height: 56, borderRadius: '50%',
          background: 'var(--accent)', color: 'white',
          display: 'grid', placeItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
          boxShadow: '0 8px 24px -4px rgba(0,0,0,0.3), 0 0 0 6px var(--bg)',
          zIndex: 2,
        }}>
          ↔
        </div>
      </div>

      {/* Categories marquee */}
      <div style={{ borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', padding: '14px 0', overflow: 'hidden', background: 'var(--bg-sunken)' }}>
        <div className="marquee" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.05em' }}>
          {[...Array(2)].flatMap((_, k) => [
            'BOULANGERIE', 'FROMAGERIE', 'FLEURISTE', 'ÉPICERIE FINE', 'ARTISANAT', 'BOUCHERIE', 'POISSONNERIE', 'CAVE & VINS', 'COSMÉTIQUES BIO', 'POTERIE', 'BIJOUTERIE', 'MAROQUINERIE', 'TRAITEUR', 'HERBORISTERIE',
          ].map((c, i) => (
            <span key={`${k}-${i}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 56 }}>
              {c}<span style={{ color: 'var(--accent)' }}>✦</span>
            </span>
          )))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;