// hero.jsx — 3 variants, switched via Tweaks
// variants: 'split' | 'stat' | 'storefront'

function Hero({ variant = 'split' }) {
  if (variant === 'stat')       return <HeroStat />;
  if (variant === 'storefront') return <HeroStorefront />;
  return <HeroSplit />;
}

/* ──────────────────────────────────────────────────────────
   Variant 1 — SPLIT
   Left: bold headline + CTA + trust line
   Right: live mock of dashboard / order
   ────────────────────────────────────────────────────────── */
function HeroSplit() {
  return (
    <section id="hero" className="hero hero-split grain">
      <div className="container hero-split-grid">
        <div className="hero-split-left">
          <Eyebrow>Dla sklepów stacjonarnych bez sprzedaży online</Eyebrow>
          <h1 className="hero-h1 reveal reveal-1">
            Twój sklep <em>nie kończy się</em> na drzwiach.<br/>
            Otwórzmy mu <span className="hl">drugą zmianę</span>.
          </h1>
          <p className="hero-sub reveal reveal-2">
            Zbudujemy, wdrożymy i zautomatyzujemy sklep internetowy oparty na Twoim asortymencie stacjonarnym.
            Bez nowych etatów. Bez chaosu. Z gotową obsługą zamówień, wyceną i&nbsp;dosprzedażą.
          </p>
          <div className="hero-ctas reveal reveal-3">
            <a className="btn btn-primary btn-lg" href="#contact">
              Umów bezpłatną rozmowę <ArrowRight />
            </a>
            <a className="btn btn-ghost btn-lg" href="#calculator">
              Policz, ile tracisz miesięcznie
            </a>
          </div>
          <div className="hero-trust reveal reveal-4">
            <div className="hero-trust-avatars">
              {[1,2,3,4].map(i => <div key={i} className="av" style={{
                background: ['#C8FF00','#FF5C2E','#5BA3FF','#F5F5F2'][i-1]
              }}/>)}
            </div>
            <div>
              <strong>120+ właścicieli</strong> sklepów stacjonarnych już wystartowało.<br/>
              <span className="muted">Średnio +27% obrotu w 90 dni od startu.</span>
            </div>
          </div>
        </div>

        <div className="hero-split-right reveal reveal-3">
          <HeroDashboardMock />
        </div>
      </div>

      <style>{`
        .hero{ padding: 64px 0 100px; overflow: hidden; }
        .hero-split-grid{
          display:grid; grid-template-columns: 1.1fr 1fr;
          gap: 64px; align-items: center;
        }
        .hero-h1{
          font-size: clamp(40px, 5.8vw, 78px);
          margin-top: 18px;
          line-height: 1.02;
        }
        .hero-h1 em{
          font-style: normal;
          font-family: var(--font-display);
          background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
          -webkit-background-clip: text; background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .hero-h1 .hl{
          position: relative;
          color: var(--brand);
        }
        .hero-h1 .hl::after{
          content:''; position:absolute; left: -4px; right: -4px; bottom: 4px;
          height: 36%;
          background: var(--brand);
          opacity: .18;
          border-radius: 4px;
          z-index: -1;
        }
        .hero-sub{
          margin-top: 22px;
          font-size: clamp(16px, 1.35vw, 19px);
          color: var(--ink-2);
          max-width: 560px;
        }
        .hero-ctas{
          display:flex; gap: 12px; margin-top: 32px; flex-wrap: wrap;
        }
        .hero-trust{
          display:flex; gap: 14px; align-items:center;
          margin-top: 36px;
          font-size: 13.5px;
          color: var(--ink-2);
        }
        .hero-trust strong{ color: var(--ink); font-weight: 500; }
        .hero-trust-avatars{ display:flex; }
        .hero-trust-avatars .av{
          width: 32px; height: 32px; border-radius: 50%;
          border: 2px solid var(--bg);
          margin-right: -10px;
        }

        @media (max-width: 980px){
          .hero-split-grid{ grid-template-columns: 1fr; gap: 48px; }
          .hero-split-right{ order: 2; }
        }
      `}</style>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────
   Variant 2 — STAT-DRIVEN
   Massive "20–30%" number that animates
   ────────────────────────────────────────────────────────── */
function HeroStat() {
  const [ref, seen] = useInView(0.2);
  return (
    <section id="hero" className="hero hero-stat grain" ref={ref}>
      <div className="container">
        <div className="hero-stat-eyebrow">
          <Eyebrow>Gorilla — sklep internetowy dla sklepów stacjonarnych</Eyebrow>
        </div>

        <div className="hero-stat-display">
          <div className="hero-stat-prefix">tyle obrotu ucieka Twojemu sklepowi co miesiąc</div>
          <div className="hero-stat-num">
            <span className="from">{seen ? <CountUp to={20} duration={1100}/> : 0}</span>
            <span className="dash">–</span>
            <span className="to">{seen ? <CountUp to={30} duration={1400}/> : 0}</span>
            <span className="pct">%</span>
          </div>
          <div className="hero-stat-suffix">
            — przez niedoszacowane wyceny, niepełne zestawy i&nbsp;telefon, który nie odbiera o&nbsp;19:00.
          </div>
        </div>

        <div className="hero-stat-tail">
          <div className="hero-stat-claim">
            <h1 className="hero-h1">
              Zatrzymajmy <span className="hl">tę dziurę</span> bez nowych etatów.
            </h1>
            <p className="hero-sub">
              Gorilla zamienia Twój sklep stacjonarny w&nbsp;działający, zautomatyzowany sklep internetowy
              — od katalogu po obsługę zamówień.
            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary btn-lg" href="#contact">
                Umów bezpłatną rozmowę <ArrowRight />
              </a>
              <a className="btn btn-ghost btn-lg" href="#how">
                Zobacz jak to działa
              </a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hero-stat{ padding: 48px 0 96px; }
        .hero-stat-eyebrow{ margin-bottom: 36px; }
        .hero-stat-display{
          display:grid; grid-template-columns: 1fr; gap: 18px;
          padding: 28px 0 36px;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .hero-stat-prefix, .hero-stat-suffix{
          font-size: clamp(15px, 1.5vw, 20px);
          color: var(--ink-2);
          max-width: 720px;
        }
        .hero-stat-num{
          font-family: var(--font-display);
          font-size: clamp(96px, 22vw, 280px);
          line-height: 0.85;
          letter-spacing: -0.05em;
          font-weight: 600;
          display:flex; align-items: baseline; gap: 0.04em;
          color: var(--ink);
        }
        .hero-stat-num .dash{ color: var(--ink-3); }
        .hero-stat-num .pct{ color: var(--brand); }
        .hero-stat-tail{ margin-top: 56px; }
        .hero-stat-claim .hero-h1{
          font-size: clamp(36px, 5vw, 66px);
        }
        .hero-stat-claim .hero-h1 .hl{
          color: var(--accent);
        }
        .hero-stat-claim .hero-sub{
          margin-top: 18px;
          font-size: clamp(16px, 1.3vw, 19px);
          color: var(--ink-2);
          max-width: 640px;
        }
        .hero-stat-claim .hero-ctas{
          margin-top: 28px;
          display:flex; gap:12px; flex-wrap: wrap;
        }
      `}</style>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────
   Variant 3 — STOREFRONT
   Editorial: big italic statement + storefront → online card
   ────────────────────────────────────────────────────────── */
function HeroStorefront() {
  return (
    <section id="hero" className="hero hero-storefront">
      <div className="container">
        <div className="hero-sf-top">
          <Eyebrow>Gorilla ⌁ od stacjonarnego do online w 30 dni</Eyebrow>
        </div>

        <h1 className="hero-h1 hero-sf-h1">
          Od <span className="badge badge-off">poniedziałku do soboty</span><br/>
          do <span className="badge badge-on">24 / 7.</span>
        </h1>

        <div className="hero-sf-bottom">
          <p className="hero-sub">
            Twój sklep stacjonarny ma już to, co najtrudniejsze: ofertę, ceny i&nbsp;klientów.
            Dokładamy infrastrukturę, automatyzację i&nbsp;sprzedaż online — pod klucz.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary btn-lg" href="#contact">
              Umów bezpłatną rozmowę <ArrowRight />
            </a>
            <a className="btn btn-ghost btn-lg" href="#how">
              Jak to robimy
            </a>
          </div>
        </div>

        <div className="hero-sf-strip">
          <HeroStorefrontStrip/>
        </div>
      </div>

      <style>{`
        .hero-storefront{ padding: 56px 0 80px; }
        .hero-sf-top{ margin-bottom: 28px; }
        .hero-sf-h1{
          font-size: clamp(48px, 9vw, 132px);
          line-height: 0.98;
          letter-spacing: -0.035em;
          margin-bottom: 36px;
        }
        .hero-sf-h1 .badge{
          display:inline-block;
          padding: 0 .25em 0;
          border-radius: 14px;
          font-style: italic;
          font-family: 'Instrument Serif', serif;
          font-weight: 400;
          letter-spacing: -0.02em;
          line-height: 1;
        }
        .hero-sf-h1 .badge-off{ color: var(--ink-3); }
        .hero-sf-h1 .badge-on{
          background: var(--brand); color: var(--brand-ink);
          padding: 0 .3em;
        }
        .hero-sf-bottom{
          display:grid; grid-template-columns: 1.4fr 1fr;
          gap: 56px; align-items: end;
          padding-bottom: 56px;
          border-bottom: 1px solid var(--line);
        }
        .hero-sf-bottom .hero-sub{
          font-size: clamp(16px, 1.4vw, 20px); color: var(--ink-2); max-width: 580px;
        }
        .hero-sf-bottom .hero-ctas{
          display:flex; gap:12px; justify-content:flex-end; flex-wrap: wrap;
        }
        .hero-sf-strip{ margin-top: 40px; }

        @media (max-width: 820px){
          .hero-sf-bottom{ grid-template-columns: 1fr; gap: 28px; }
          .hero-sf-bottom .hero-ctas{ justify-content:flex-start; }
        }
      `}</style>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────
   Dashboard mock (used by HeroSplit)
   ────────────────────────────────────────────────────────── */
function HeroDashboardMock() {
  const [tab, setTab] = React.useState(0);
  return (
    <div className="hdm">
      <div className="hdm-window">
        <div className="hdm-chrome">
          <span className="dot r"/><span className="dot y"/><span className="dot g"/>
          <div className="hdm-url">panel.gorilla.shop</div>
          <div className="hdm-pulse"><span/></div>
        </div>
        <div className="hdm-body">
          <div className="hdm-sidebar">
            <div className="hdm-logo">
              <span className="hdm-logo-mark" aria-hidden="true">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <path d="M3 4h2.2l2.3 11.3a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.5L21 7H6.5" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
                  <circle cx="10" cy="20" r="1.4" fill="currentColor"/>
                  <circle cx="17.5" cy="20" r="1.4" fill="currentColor"/>
                </svg>
              </span>
              <span className="hdm-logo-text">Sklep online</span>
            </div>
            {['Zamówienia','Wyceny','Asortyment','Klienci','Raporty'].map((l,i)=>(
              <button key={l} className={`hdm-side ${tab===i?'is-active':''}`} onClick={()=>setTab(i)}>
                {l}
                {i===0 && <span className="hdm-pill">7</span>}
                {i===1 && <span className="hdm-pill brand">3</span>}
              </button>
            ))}
          </div>
          <div className="hdm-main">
            <div className="hdm-row hdm-row-head">
              <div>Nowe zamówienia</div>
              <div className="muted">Dziś · auto</div>
            </div>
            <Order time="14:32" name="Pan Tomek — remont łazienki" sum="4 280 zł" status="auto" />
            <Order time="13:08" name="Studio Wnętrz — zestaw farb"  sum="1 940 zł" status="auto" />
            <Order time="11:51" name="Pani Anna — płytki 60×60"     sum="6 720 zł" status="wycena" />
            <Order time="10:22" name="Firma Brzoza — narzędzia"      sum="2 110 zł" status="auto" />

            <div className="hdm-row hdm-row-head" style={{marginTop:18}}>
              <div>Dosprzedaż AI</div>
              <div className="brand">+1 480 zł dziś</div>
            </div>
            <div className="hdm-up">
              <div className="hdm-up-name">Klej do płytek (do zamówienia #218)</div>
              <div className="hdm-up-meta">+ 4 worki · brakuje w zestawie</div>
              <div className="hdm-up-add">+</div>
            </div>
          </div>
        </div>
      </div>
      <div className="hdm-glow"/>
      <div className="hdm-pill-float">
        <span className="pulse-dot"/>
        Zamówienie przyjęte automatycznie · 22:14
      </div>

      <style>{`
        .hdm{ position:relative; }
        .hdm-window{
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: 18px;
          overflow: hidden;
          box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.02) inset;
        }
        .hdm-chrome{
          display:flex; align-items:center; gap:8px;
          padding: 12px 14px;
          background: var(--bg-2);
          border-bottom: 1px solid var(--line);
        }
        .hdm-chrome .dot{ width:10px; height:10px; border-radius:50%; }
        .hdm-chrome .dot.r{ background:#FF5C5C; }
        .hdm-chrome .dot.y{ background:#FFBD2E; }
        .hdm-chrome .dot.g{ background:#28C840; }
        .hdm-url{
          flex:1; text-align:center;
          font-family: var(--font-mono);
          font-size: 11.5px; color: var(--ink-3);
        }
        .hdm-pulse span{
          width:8px; height:8px; border-radius:50%; background: var(--brand); display:block;
          animation: pulse-dot 1.6s infinite;
        }
        .hdm-body{
          display:grid; grid-template-columns: 152px 1fr;
          min-height: 360px;
        }
        .hdm-sidebar{
          background: var(--bg-2);
          border-right: 1px solid var(--line);
          padding: 14px 10px;
          display:flex; flex-direction:column; gap: 2px;
        }
        .hdm-logo{
          padding: 4px 8px 14px;
          display:flex; align-items:center; gap: 8px;
        }
        .hdm-logo-mark{
          width: 28px; height: 28px;
          background: var(--brand);
          color: var(--brand-ink);
          border-radius: 8px;
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .hdm-logo-text{
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 13px;
          letter-spacing: -0.01em;
          color: var(--ink);
          white-space: nowrap;
        }
        .hdm-side{
          text-align:left;
          background: transparent; border: 0;
          padding: 8px 10px;
          font-size: 12.5px; color: var(--ink-2);
          border-radius: 8px;
          display:flex; align-items:center; justify-content:space-between;
          transition: background .2s, color .2s;
        }
        .hdm-side:hover{ background: rgba(255,255,255,.04); color: var(--ink); }
        .hdm-side.is-active{ background: rgba(255,255,255,.06); color: var(--ink); }
        .hdm-pill{
          background: var(--surface-2); border:1px solid var(--line);
          padding: 1px 7px; border-radius: 999px;
          font-size: 10.5px;
        }
        .hdm-pill.brand{ background: var(--brand); color: var(--brand-ink); border-color: transparent; }
        .hdm-main{ padding: 14px 16px; }
        .hdm-row-head{
          display:flex; justify-content:space-between; align-items:center;
          font-size: 12.5px; color: var(--ink); font-weight: 500;
          padding: 4px 4px 10px;
        }
        .hdm-row-head .brand{ color: var(--brand); }
        .hdm-up{
          display:flex; align-items:center; gap:12px;
          padding: 10px 12px; margin-top:6px;
          background: rgba(200,255,0,0.05);
          border: 1px dashed rgba(200,255,0,0.4);
          border-radius: 10px;
        }
        .hdm-up-name{ font-size: 12.5px; flex: 1; }
        .hdm-up-meta{ font-size: 11.5px; color: var(--ink-3); }
        .hdm-up-add{
          width:24px; height:24px; border-radius:50%;
          background: var(--brand); color: var(--brand-ink);
          font-size: 14px; display:grid; place-items:center; font-weight: 600;
        }
        .hdm-glow{
          position:absolute; inset: -40px;
          background: radial-gradient(circle at 80% 0%, rgba(200,255,0,.18), transparent 50%),
                      radial-gradient(circle at 0% 100%, rgba(91,163,255,.10), transparent 50%);
          z-index: -1; pointer-events:none;
          filter: blur(40px);
        }
        .hdm-pill-float{
          position: absolute; bottom: -16px; left: -16px;
          background: var(--surface); border: 1px solid var(--line);
          padding: 10px 14px; border-radius: 999px;
          font-size: 12.5px; color: var(--ink);
          display:flex; align-items:center; gap:8px;
          box-shadow: 0 10px 30px rgba(0,0,0,.4);
        }
        .hdm-pill-float .pulse-dot{
          width:8px; height:8px; border-radius:50%; background:var(--brand);
          animation: pulse-dot 1.4s infinite;
        }
        @media (max-width: 540px){
          .hdm-body{ grid-template-columns: 110px 1fr; min-height: 320px; }
          .hdm-side{ font-size: 11.5px; }
          .hdm-pill-float{ left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: -22px; }
        }
      `}</style>
    </div>
  );
}

function Order({ time, name, sum, status }) {
  return (
    <div className="hdm-order">
      <div className="hdm-order-time">{time}</div>
      <div className="hdm-order-name">{name}</div>
      <div className="hdm-order-sum">{sum}</div>
      <div className={`hdm-order-status ${status}`}>
        {status === 'auto' ? '✓ Auto' : '· Wycena'}
      </div>
      <style>{`
        .hdm-order{
          display:grid; grid-template-columns: 44px 1fr auto auto;
          gap: 10px; align-items:center;
          padding: 9px 8px;
          border-radius: 8px;
          font-size: 12.5px;
          transition: background .2s;
        }
        .hdm-order:hover{ background: rgba(255,255,255,.03); }
        .hdm-order-time{ color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; }
        .hdm-order-name{ color: var(--ink); }
        .hdm-order-sum{ color: var(--ink); font-variant-numeric: tabular-nums; }
        .hdm-order-status{
          font-size: 11px; padding: 3px 8px; border-radius: 999px;
          background: var(--surface-2); color: var(--ink-2);
        }
        .hdm-order-status.auto{ background: rgba(200,255,0,.12); color: var(--brand); }
      `}</style>
    </div>
  );
}

/* Strip used by HeroStorefront — two columns side by side */
function HeroStorefrontStrip() {
  return (
    <div className="hsfs">
      <div className="hsfs-col before">
        <div className="hsfs-label">Dziś</div>
        <ul>
          <li>Telefon, który nie odbiera o 19:00</li>
          <li>Wyceny w Excelu i&nbsp;na karteczkach</li>
          <li>Niepełne zestawy → 3 dosprzedaże dziennie znikają</li>
          <li>Sobota 13:00 — drzwi zamknięte, klient odchodzi do konkurencji</li>
        </ul>
      </div>
      <div className="hsfs-col after">
        <div className="hsfs-label">Po wdrożeniu Gorilla</div>
        <ul>
          <li>Sklep online z&nbsp;Twoim asortymentem i&nbsp;cenami</li>
          <li>Automatyczne wyceny zestawów (płytki + klej + fuga)</li>
          <li>AI dosprzedaje brakujące pozycje przy każdym koszyku</li>
          <li>Zamówienie o&nbsp;22:14? Wpada do panelu i&nbsp;jest gotowe rano</li>
        </ul>
      </div>

      <style>{`
        .hsfs{
          display:grid; grid-template-columns: 1fr 1fr;
          gap: 0;
          border: 1px solid var(--line);
          border-radius: var(--radius-lg);
          overflow:hidden;
        }
        .hsfs-col{ padding: 24px 28px; }
        .hsfs-col.before{ border-right: 1px solid var(--line); background: var(--bg-2); }
        .hsfs-col.after{ background: var(--surface); }
        .hsfs-label{
          font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
          color: var(--ink-3); margin-bottom: 14px;
        }
        .hsfs-col.after .hsfs-label{ color: var(--brand); }
        .hsfs ul{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap:10px; }
        .hsfs li{ font-size: 14.5px; color: var(--ink-2); line-height: 1.4; padding-left: 22px; position: relative; }
        .hsfs-col.before li::before{
          content:'×'; position:absolute; left: 0; top: -2px;
          color: var(--accent); font-size: 18px; line-height: 1;
        }
        .hsfs-col.after li::before{
          content:'✓'; position:absolute; left: 0; top: 0;
          color: var(--brand); font-size: 14px; line-height: 1;
        }
        @media (max-width: 720px){
          .hsfs{ grid-template-columns: 1fr; }
          .hsfs-col.before{ border-right: 0; border-bottom: 1px solid var(--line); }
        }
      `}</style>
    </div>
  );
}

window.Hero = Hero;