// Three hero variants — different layouts/metaphors

// ============ VARIANT 1 · LOGISTYCZNY (map-first) ============
const HeroLogistics = () => (
  <section style={{ position: 'relative', borderBottom: '1px solid var(--line)', overflow: 'hidden' }}>
    <div className="wrap" style={{ padding: '64px 40px 40px', display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 64, alignItems: 'center' }}>
      {/* Left — copy */}
      <div>
        <Eyebrow>B2B · Polska · Zał. 1994</Eyebrow>
        <h1 style={{ fontSize: 64, marginTop: 24, letterSpacing: '-0.035em', fontWeight: 600, lineHeight: 1.02 }}>
          Klinkier u Ciebie<br />
          w <span style={{ color: 'var(--accent)' }}>48 godzinach</span>.<br />
          Bez wymówek.
        </h1>
        <p style={{ fontSize: 18, color: 'var(--ink-3)', marginTop: 32, maxWidth: '46ch', lineHeight: 1.55 }}>
          24-hektarowy magazyn pod Warszawą, własna flota 38 ciężarówek, jeden punkt kontaktu od zapytania do paletyzacji. Dla deweloperów, dystrybutorów i generalnych wykonawców.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
          <a className="btn btn--primary" href="#kontakt">Zamów wycenę <Arrow /></a>
          <a className="btn btn--ghost" href="#logistyka">Sprawdź dostępność transportu</a>
        </div>

        {/* Inline trust strip */}
        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--line)', paddingTop: 24 }}>
          <MiniStat value="24" unit="ha" label="MAGAZYN" />
          <MiniStat value="38" unit="szt." label="WŁASNA FLOTA" border />
          <MiniStat value="96" unit="%" label="DOSTAWY ≤ 48 H" border />
          <MiniStat value="187" unit="" label="AKTYWNE SKU" border />
        </div>
      </div>

      {/* Right — Poland map */}
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 2, display: 'flex', gap: 8 }}>
          <Pill>● 14 ciężarówek live</Pill>
          <Pill kind="green">● 312 palet dziś</Pill>
        </div>
        <PolandMap />
      </div>
    </div>
  </section>
);

const MiniStat = ({ value, unit, label, border }) => (
  <div style={{ padding: '4px 20px', borderLeft: border ? '1px solid var(--line)' : 'none' }}>
    <div style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1 }}>
      {value}<span style={{ fontSize: 14, color: 'var(--accent)', marginLeft: 2 }}>{unit}</span>
    </div>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-4)', marginTop: 8 }}>{label}</div>
  </div>
);

// ============ VARIANT 2 · EDITORIAL (typography statement) ============
const HeroEditorial = () => (
  <section style={{ background: '#0a0a0c', color: '#f3efe8', borderBottom: '1px solid #1a1a1c', overflow: 'hidden' }}>
    <div className="wrap" style={{ padding: '88px 40px 0', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 64, alignItems: 'start' }}>
      <div>
        <Eyebrow>Manifest dostawcy · 2026</Eyebrow>
        <h1 style={{
          fontSize: 'clamp(72px, 11vw, 156px)',
          marginTop: 24,
          letterSpacing: '-0.045em',
          fontWeight: 600,
          lineHeight: 0.92,
        }}>
          MASZ <span style={{ color: '#ff5b71' }}>termin.</span><br />
          MY mamy<br />
          klinkier <span style={{ fontStyle: 'italic', fontWeight: 400 }}>na stanie.</span>
        </h1>
      </div>
      <div style={{ paddingTop: 60 }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: '#ff5b71', textTransform: 'uppercase' }}>
          Co tu masz
        </div>
        <ol style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', display: 'grid', gap: 12, fontSize: 13, color: '#b8b3a8' }}>
          <li style={{ display: 'flex', gap: 12 }}><span className="mono" style={{ color: '#6a655e' }}>01</span> 24 ha klinkieru pod Warszawą</li>
          <li style={{ display: 'flex', gap: 12 }}><span className="mono" style={{ color: '#6a655e' }}>02</span> Własna flota — 38 ciężarówek</li>
          <li style={{ display: 'flex', gap: 12 }}><span className="mono" style={{ color: '#6a655e' }}>03</span> Konfigurator z wyceną w 60 s</li>
          <li style={{ display: 'flex', gap: 12 }}><span className="mono" style={{ color: '#6a655e' }}>04</span> Jeden handlowiec, do końca</li>
        </ol>
        <div style={{ display: 'flex', gap: 12, marginTop: 32, flexDirection: 'column' }}>
          <a className="btn btn--inverse" href="#kontakt">Zamów wycenę <Arrow /></a>
          <a className="btn btn--ghost" href="#konfigurator" style={{ color: '#f3efe8', borderColor: '#2a2a2c' }}>Otwórz konfigurator</a>
        </div>
      </div>
    </div>

    {/* Bottom band — running ticker stats */}
    <div style={{ marginTop: 64, borderTop: '1px solid #1a1a1c', borderBottom: '1px solid #1a1a1c', padding: '20px 0', background: '#0e0e10' }}>
      <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 12, color: '#8a8682', letterSpacing: '0.06em' }}>
        <span>● MAGAZYN BŁONIE · 24 HA · {new Date().toLocaleDateString('pl-PL')}</span>
        <span style={{ color: '#f3efe8' }}>78 % ZAJĘTOŚCI</span>
        <span style={{ color: '#f3efe8' }}>14 CIĘŻARÓWEK W TRASIE</span>
        <span style={{ color: '#f3efe8' }}>3 240 KM DZIŚ</span>
        <span style={{ color: '#ff5b71' }}>2 ALERTY ROZWIĄZANE</span>
      </div>
    </div>

    {/* Big placeholder strip — production line */}
    <div className="wrap" style={{ padding: '40px 40px 88px' }}>
      <Placeholder
        height={360}
        label="// hero zdjęcie — hala produkcyjna, ciężarówki przy rampach, klinkier na paletach"
        tag="1920 × 1080 · do dostarczenia"
        dark
      />
    </div>
  </section>
);

// ============ VARIANT 3 · SPLIT + CONFIGURATOR (product-first) ============
const HeroConfigurator = () => (
  <section style={{ borderBottom: '1px solid var(--line)' }}>
    <div className="wrap" style={{ padding: '64px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
      {/* Left — copy + CTAs */}
      <div>
        <Eyebrow>Konfigurator · wycena w 60 s</Eyebrow>
        <h1 style={{ fontSize: 72, marginTop: 24, letterSpacing: '-0.035em', fontWeight: 600, lineHeight: 1 }}>
          Skonfiguruj klinkier.<br />
          <span style={{ color: 'var(--accent)' }}>Zobacz cenę.</span><br />
          Zarezerwuj transport.
        </h1>
        <p style={{ fontSize: 17, color: 'var(--ink-3)', marginTop: 24, maxWidth: '42ch', lineHeight: 1.55 }}>
          Cztery rodziny produktów, sześć kolorów, palety od 1 do 24. Każde wybranie aktualizuje wycenę, zajętość ciężarówki i ETA dostawy. Dla wartości &gt; 80 000 zł — bezpośredni kontakt z opiekunem.
        </p>

        <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
          <a className="btn btn--primary" href="#kontakt">Zamów wycenę <Arrow /></a>
          <a className="btn btn--ghost" href="#proces">Jak współpracujemy</a>
        </div>

        {/* Trust ribbon */}
        <div style={{ marginTop: 56 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 16 }}>
            Zaufali nam · wybrani partnerzy B2B
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {['Budimex', 'Strabag', 'Erbud', 'Polbruk', 'Atlas', 'Skanska', 'Eiffage', 'PORR'].map(p => (
              <div key={p} style={{
                padding: '10px 8px', textAlign: 'center', border: '1px solid var(--line)', borderRadius: 4,
                fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em',
              }}>{p.toUpperCase()}</div>
            ))}
          </div>
        </div>
      </div>

      {/* Right — compact configurator */}
      <div>
        <Configurator compact />
      </div>
    </div>
  </section>
);

window.HeroLogistics = HeroLogistics;
window.HeroEditorial = HeroEditorial;
window.HeroConfigurator = HeroConfigurator;