// Granit landing page sections — responsive, links to PDP.

function GranitHero() {
  const T = GRANIT_TOKENS;
  const isMobile = useIsMobile();
  const P = MOCNOFON_PRODUCTS;

  const [heroIdx, setHeroIdx] = React.useState(0);
  const featured = P.phones[heroIdx];
  const [colorId, setColorId] = React.useState(featured.colors[0].id);
  const [storage, setStorage] = React.useState(featured.storage[1] || featured.storage[0]);
  React.useEffect(() => {
    setColorId(featured.colors[0].id);
    setStorage(featured.storage[1] || featured.storage[0]);
  }, [heroIdx]);
  const color = featured.colors.find(c => c.id === colorId) || featured.colors[0];

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'radial-gradient(ellipse 80% 60% at 30% 20%, #1c2128 0%, #0b0e12 60%)',
      color: T.fg,
      padding: isMobile ? '40px 20px 60px' : '88px 40px 120px',
      borderBottom: `1px solid ${T.line}`,
    }}>
      <TopoLines opacity={0.1} />

      {/* Altitude rail */}
      {!isMobile && (
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0, width: 44,
          borderRight: `1px solid ${T.line}`,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-around',
          fontFamily: T.mono, fontSize: 9, color: T.fgDim,
          padding: '60px 0', letterSpacing: 2,
        }}>
          {['2655 m', '2200 m', '1840 m', '1320 m', '0 m'].map(a => (
            <span key={a} style={{ writingMode: 'vertical-rl' }}>{a}</span>
          ))}
        </div>
      )}

      <div style={{
        position: 'relative',
        maxWidth: 1320, margin: '0 auto',
        marginLeft: isMobile ? 'auto' : 60,
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr',
        gap: isMobile ? 32 : 60,
        alignItems: 'center',
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontFamily: T.mono, fontSize: 11, letterSpacing: 2, color: T.accent,
            marginBottom: 28,
          }}>
            <span style={{ width: 28, height: 1, background: T.accent }} />
            FLAGOWY · MOCNOFON {featured.name}
          </div>
          <h1 style={{
            fontFamily: T.display,
            fontSize: isMobile ? 'clamp(56px, 14vw, 88px)' : 'clamp(88px, 9.5vw, 140px)',
            lineHeight: 0.86, margin: 0, letterSpacing: -2, fontWeight: 700,
            textTransform: 'uppercase',
          }}>
            Wykuty<br />
            <span style={{ fontStyle: 'italic', fontWeight: 400, color: '#bdb6a8' }}>z kamienia.</span><br />
            Stworzony<br />
            <span style={{ color: T.accent }}>do gór.</span>
          </h1>
          <p style={{
            fontFamily: T.body,
            fontSize: isMobile ? 15 : 17,
            lineHeight: 1.6, color: T.fgMuted,
            maxWidth: 460, marginTop: 32,
          }}>
            Pancerz magnezowy. Termowizja. Bateria, która przeżyje
            tygodniową wyprawę w&nbsp;Bieszczady. Telefon, który nie boi się
            tego, co przyniesie pogoda — bo sam jest pogodą.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
            <a href="granit-x1.html" style={{
              background: T.accent, color: '#0b0e12', textDecoration: 'none',
              padding: '16px 28px', fontFamily: T.mono, fontSize: 12,
              letterSpacing: 2, textTransform: 'uppercase', fontWeight: 700,
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>Konfiguruj · od {featured.price} zł →</a>
            <a href="#wytrzymalosc" style={{
              background: 'transparent', color: T.fg, border: `1px solid ${T.lineStrong}`,
              textDecoration: 'none',
              padding: '15px 26px', fontFamily: T.mono, fontSize: 12,
              letterSpacing: 2, textTransform: 'uppercase',
            }}>Specyfikacja ↓</a>
          </div>

          {/* Spec ticker */}
          <div style={{
            marginTop: 56,
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
            gap: 1, background: T.line, border: `1px solid ${T.line}`,
          }}>
            {featured.specs.slice(0, isMobile ? 4 : 6).map(([k, v]) => (
              <div key={k} style={{ background: T.bg, padding: '18px 20px' }}>
                <div style={{ fontFamily: T.mono, fontSize: 10, color: T.fgDim, letterSpacing: 1.5, textTransform: 'uppercase' }}>{k}</div>
                <div style={{ fontFamily: T.display, fontSize: 24, color: T.fg, marginTop: 4 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: device + picker */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32 }}>
          <div style={{ position: 'relative' }}>
            <div style={{
              position: 'absolute', inset: -50,
              background: 'radial-gradient(circle, rgba(255,255,255,0.04), transparent 70%)',
              borderRadius: '50%', pointerEvents: 'none',
            }} />
            <Device360 kind="phone" color={color.hex} accent={T.accent} size={isMobile ? 280 : 440} />
            <div style={{
              position: 'absolute', bottom: -10, left: '50%', transform: 'translateX(-50%)',
              fontFamily: T.mono, fontSize: 9, letterSpacing: 2, color: T.fgDim,
              textTransform: 'uppercase', whiteSpace: 'nowrap',
            }}>↔ Przeciągnij · 360°</div>
          </div>
          <VariantPicker
            colors={featured.colors} storage={featured.storage}
            dark accent={T.accent}
            color={colorId} store={storage}
            onColor={setColorId} onStorage={setStorage}
          />
          <div style={{ display: 'flex', gap: 6, marginTop: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
            {P.phones.map((p, i) => (
              <button key={p.id} onClick={() => setHeroIdx(i)} style={{
                padding: '6px 10px', background: i === heroIdx ? T.accent : 'transparent',
                color: i === heroIdx ? '#0b0e12' : T.fgFaint,
                border: `1px solid ${i === heroIdx ? T.accent : T.lineStrong}`,
                fontFamily: T.mono, fontSize: 10, letterSpacing: 1.5,
                cursor: 'pointer', textTransform: 'uppercase',
              }}>{p.name}</button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function GranitProducts() {
  const T = GRANIT_TOKENS;
  const isMobile = useIsMobile();
  const P = MOCNOFON_PRODUCTS;
  return (
    <section id="modele" style={{
      background: T.bg, color: T.fg,
      padding: isMobile ? '70px 20px' : '120px 40px',
      borderTop: `1px solid ${T.line}`,
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 56, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2, color: T.accent, marginBottom: 14 }}>
              <span style={{ display: 'inline-block', width: 28, height: 1, background: T.accent, verticalAlign: 'middle', marginRight: 12 }} />
              KOLEKCJA · 05 PRODUKTÓW
            </div>
            <h2 style={{ fontFamily: T.display, fontSize: isMobile ? 52 : 88, margin: 0, letterSpacing: -1.5, lineHeight: 0.9, textTransform: 'uppercase' }}>
              Modele.
            </h2>
          </div>
          {!isMobile && (
            <p style={{ fontFamily: T.body, color: T.fgMuted, maxWidth: 380, fontSize: 14, lineHeight: 1.6, margin: 0 }}>
              Trzy smartfony i&nbsp;dwa zegarki. Każdy testowany od&nbsp;−40°C
              do&nbsp;+70°C. Każdy zaprojektowany w&nbsp;Krakowie.
            </p>
          )}
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 1, background: T.line, border: `1px solid ${T.line}`,
        }}>
          {P.phones.map((p, i) => (
            <a key={p.id} href={p.id === 'granit-x1' ? 'granit-x1.html' : '#'} style={{
              background: T.bg, padding: 32, color: T.fg, textDecoration: 'none',
              display: 'flex', flexDirection: 'column', gap: 22, minHeight: 500,
              transition: 'background 0.2s',
              cursor: 'pointer',
            }} onMouseEnter={e => e.currentTarget.style.background = '#10141a'}
               onMouseLeave={e => e.currentTarget.style.background = T.bg}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 2, color: T.fgDim, textTransform: 'uppercase' }}>{String(i + 1).padStart(2, '0')} · {p.tier}</span>
                <span style={{ fontFamily: T.mono, fontSize: 11, color: T.accent }}>od {p.price} zł</span>
              </div>
              <div style={{ position: 'relative', height: 240, display: 'grid', placeItems: 'center' }}>
                <Device360 kind="phone" color={p.colors[0].hex} accent={T.accent} size={210} />
              </div>
              <h3 style={{ fontFamily: T.display, fontSize: 40, margin: 0, letterSpacing: -0.5, textTransform: 'uppercase' }}>{p.name}</h3>
              <p style={{ fontFamily: T.body, fontSize: 13, color: T.fgMuted, margin: 0, lineHeight: 1.55, flex: 1 }}>
                {p.tagline}
              </p>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: `1px solid ${T.line}`, paddingTop: 18 }}>
                <div style={{ display: 'flex', gap: 6 }}>
                  {p.colors.map(c => (
                    <span key={c.id} style={{ width: 12, height: 12, borderRadius: '50%', background: c.hex, border: `1px solid ${T.lineStrong}` }} />
                  ))}
                </div>
                <span style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2, color: T.accent, textTransform: 'uppercase' }}>
                  {p.id === 'granit-x1' ? 'Konfiguruj →' : 'Wkrótce →'}
                </span>
              </div>
            </a>
          ))}
        </div>

        {/* Watches */}
        <div id="zegarki" style={{ marginTop: 1, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 1, background: T.line, border: `1px solid ${T.line}`, borderTop: 'none' }}>
          {P.watches.map((w, i) => (
            <article key={w.id} style={{
              background: T.bg, padding: 32,
              display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 20, alignItems: 'center',
              minHeight: 220,
            }}>
              <div style={{ display: 'grid', placeItems: 'center' }}>
                <Device360 kind="watch" color={w.colors[0].hex} accent={T.accent} size={170} />
              </div>
              <div>
                <span style={{ fontFamily: T.mono, fontSize: 10, color: T.fgDim, letterSpacing: 2, textTransform: 'uppercase' }}>0{i + 4} · {w.tier}</span>
                <h3 style={{ fontFamily: T.display, fontSize: 32, margin: '6px 0 10px', letterSpacing: -0.5, textTransform: 'uppercase' }}>{w.name}</h3>
                <p style={{ fontFamily: T.body, fontSize: 12, color: T.fgMuted, margin: 0, lineHeight: 1.6 }}>{w.tagline}</p>
                <div style={{ fontFamily: T.mono, fontSize: 11, color: T.accent, marginTop: 18, letterSpacing: 2, textTransform: 'uppercase' }}>{w.price} zł →</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function GranitCapabilities() {
  const T = GRANIT_TOKENS;
  const isMobile = useIsMobile();
  const caps = [
    { k: 'IP69K',         v: 'Pełna ochrona przed pyłem i strugami wody pod ciśnieniem.', detail: '5 bar · 80°C · 30 sek.' },
    { k: '−40°C ÷ +70°C', v: 'Pracuje, kiedy palce już nie chcą.', detail: '24h w komorze klimatycznej' },
    { k: 'MIL-STD-810H',  v: '26 testów wojskowych — wstrząsy, wibracje, upadki.', detail: 'Atest US Army, 2024' },
    { k: '22 000 mAh',    v: 'Pięć dni bez gniazdka. Dziewięć w trybie awaryjnym.', detail: 'PD 100W · Reverse-charge' },
  ];
  return (
    <section id="wytrzymalosc" style={{
      position: 'relative', background: T.surface, color: T.fg,
      padding: isMobile ? '70px 20px' : '120px 40px',
      overflow: 'hidden', borderTop: `1px solid ${T.line}`,
    }}>
      <TopoLines opacity={0.06} />
      <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2, color: T.accent, marginBottom: 18 }}>
          <span style={{ display: 'inline-block', width: 28, height: 1, background: T.accent, verticalAlign: 'middle', marginRight: 12 }} />
          WYTRZYMAŁOŚĆ · CERTYFIKATY
        </div>
        <h2 style={{ fontFamily: T.display, fontSize: isMobile ? 44 : 76, margin: 0, letterSpacing: -1.2, lineHeight: 0.95, textTransform: 'uppercase', maxWidth: 1000 }}>
          Testowany tam, gdzie<br />kończy się <span style={{ fontStyle: 'italic', color: T.accent }}>asfalt.</span>
        </h2>
        <div style={{
          marginTop: 64,
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)',
          gap: 28,
        }}>
          {caps.map(c => (
            <div key={c.k} style={{ borderTop: `1px solid ${T.accent}`, paddingTop: 20 }}>
              <div style={{ fontFamily: T.display, fontSize: isMobile ? 36 : 52, letterSpacing: -0.5, color: T.fg, textTransform: 'uppercase' }}>{c.k}</div>
              <p style={{ fontFamily: T.body, fontSize: 13, color: T.fgMuted, marginTop: 14, lineHeight: 1.6 }}>{c.v}</p>
              <p style={{ fontFamily: T.mono, fontSize: 10, color: T.fgDim, letterSpacing: 1.5, marginTop: 12, textTransform: 'uppercase' }}>{c.detail}</p>
            </div>
          ))}
        </div>

        {/* Big drop-test visual */}
        <div style={{
          marginTop: 80,
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.3fr',
          gap: 40, alignItems: 'center',
          border: `1px solid ${T.line}`, padding: isMobile ? 24 : 36,
          background: 'rgba(0,0,0,0.25)',
        }}>
          <div style={{
            position: 'relative', height: 320, background: 'repeating-linear-gradient(180deg, transparent, transparent 31px, rgba(255,90,31,0.08) 31px, rgba(255,90,31,0.08) 32px)',
            display: 'grid', placeItems: 'center',
          }}>
            {/* Drop ruler */}
            <div style={{
              position: 'absolute', left: 8, top: 0, bottom: 0,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              fontFamily: T.mono, fontSize: 9, color: T.fgDim, letterSpacing: 1.5,
              padding: '12px 0',
            }}>
              <span>1.8 m</span><span>1.2 m</span><span>0.6 m</span><span>0 m</span>
            </div>
            <Device360 kind="phone" color="#16181b" accent={T.accent} size={180} />
            <div style={{
              position: 'absolute', right: 16, bottom: 16,
              fontFamily: T.mono, fontSize: 10, color: T.accent, letterSpacing: 1.5,
            }}>↓ TEST UPADKU · GRANIT</div>
          </div>
          <div>
            <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2, color: T.accent, textTransform: 'uppercase', marginBottom: 12 }}>
              METODA · 04
            </div>
            <h3 style={{ fontFamily: T.display, fontSize: isMobile ? 32 : 44, margin: 0, lineHeight: 1, letterSpacing: -0.5, textTransform: 'uppercase' }}>
              Upadek z&nbsp;1,8&nbsp;m.<br />Pięć razy. Na granit.
            </h3>
            <p style={{ fontFamily: T.body, fontSize: 15, color: T.fgMuted, marginTop: 20, lineHeight: 1.65 }}>
              Każdy egzemplarz, zanim trafi do&nbsp;pudełka, spada pięć razy
              z&nbsp;wysokości 1,8&nbsp;metra na płytę granitową. Test wykonujemy
              w&nbsp;tej samej hali, w&nbsp;której składamy telefony. Wyniki
              wpisujemy do&nbsp;karty seryjnej, którą znajdziesz pod&nbsp;baterią.
            </p>
            <div style={{
              marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
              background: T.line, border: `1px solid ${T.line}`,
            }}>
              {[
                ['5×',    'upadków'],
                ['1.8 m', 'wysokość'],
                ['100%',  'zaliczonych'],
              ].map(([v, k]) => (
                <div key={k} style={{ background: T.surface, padding: '14px 16px' }}>
                  <div style={{ fontFamily: T.display, fontSize: 26, color: T.fg }}>{v}</div>
                  <div style={{ fontFamily: T.mono, fontSize: 10, color: T.fgDim, letterSpacing: 1.5, textTransform: 'uppercase' }}>{k}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function GranitManifest() {
  const T = GRANIT_TOKENS;
  const isMobile = useIsMobile();
  return (
    <section id="manifest" style={{
      background: T.paper, color: T.ink,
      padding: isMobile ? '70px 20px' : '140px 40px',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '180px 1fr', gap: isMobile ? 28 : 60 }}>
        <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: '#6a665d' }}>
          Manifest<br /><span style={{ color: T.accent }}>§ 01</span>
        </div>
        <div>
          <p style={{ fontFamily: T.display, fontSize: isMobile ? 32 : 52, lineHeight: 1.05, letterSpacing: -0.8, margin: 0, textTransform: 'uppercase' }}>
            Nie robimy telefonów. <span style={{ color: '#a09a8d' }}>Robimy narzędzia, które przeżyją to, co Ty.</span>
          </p>
          <p style={{ fontFamily: T.body, fontSize: 16, lineHeight: 1.7, marginTop: 36, color: '#3a3832' }}>
            MOCNOFON założyli ludzie, którzy zbyt wiele razy stracili telefony
            w&nbsp;Tatrach, w&nbsp;deszczu, w&nbsp;błocie. Projektujemy w&nbsp;Krakowie. Testujemy
            w&nbsp;Tatrach, w&nbsp;Bieszczadach, w&nbsp;Karkonoszach. Składamy w&nbsp;fabryce,
            którą sami uruchomiliśmy w&nbsp;Mielcu. Każdy egzemplarz przechodzi
            test 24&nbsp;godzin w&nbsp;mrozie, 24&nbsp;godzin w&nbsp;komorze cieplnej i&nbsp;pięciu
            kontrolowanych upadków z&nbsp;1,8&nbsp;metra na granit.
          </p>
          <div style={{ marginTop: 40, display: 'flex', gap: 28, flexWrap: 'wrap', fontFamily: T.mono, fontSize: 11, letterSpacing: 1.5, color: '#6a665d', textTransform: 'uppercase' }}>
            <span>▲ Projekt · Kraków</span>
            <span>▲ Test · Tatry</span>
            <span>▲ Produkcja · Mielec</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function GranitPress() {
  const T = GRANIT_TOKENS;
  const isMobile = useIsMobile();
  const quotes = [
    { src: 'Magazyn Górski',     q: 'Najtwardszy polski telefon, jaki przeszedł przez naszą redakcję. Granit X1 spadł nam z grani Orlej Perci i działa.', a: '★★★★★' },
    { src: 'n-tech.pl',          q: 'Nie znam drugiego smartfona, który chodziłby siedem dni na baterii. To zmienia sposób, w jaki planuję wyjazdy.',        a: '9.4 / 10' },
    { src: 'Karpacka Wyprawa',   q: 'Termowizja FLIR, mapy offline, dwuczęstotliwościowy GPS. To nie telefon — to mała stacja meteorologiczna.',           a: 'Wybór redakcji' },
  ];
  return (
    <section style={{
      background: T.bg, color: T.fg,
      padding: isMobile ? '60px 20px' : '100px 40px',
      borderTop: `1px solid ${T.line}`,
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2, color: T.accent, marginBottom: 12, textTransform: 'uppercase' }}>
          <span style={{ display: 'inline-block', width: 28, height: 1, background: T.accent, verticalAlign: 'middle', marginRight: 12 }} />
          PRASA · O&nbsp;NAS
        </div>
        <h2 style={{ fontFamily: T.display, fontSize: isMobile ? 40 : 68, margin: 0, letterSpacing: -1, lineHeight: 0.95, textTransform: 'uppercase' }}>
          Co piszą<br />ci, którzy <span style={{ fontStyle: 'italic', color: T.accent }}>chodzą.</span>
        </h2>
        <div style={{
          marginTop: 48,
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 1, background: T.line, border: `1px solid ${T.line}`,
        }}>
          {quotes.map((q, i) => (
            <div key={i} style={{
              background: T.bg, padding: 32,
              display: 'flex', flexDirection: 'column', gap: 18, minHeight: 280,
            }}>
              <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2, color: T.accent, textTransform: 'uppercase' }}>{q.a}</div>
              <p style={{ fontFamily: T.display, fontSize: 22, lineHeight: 1.3, margin: 0, color: T.fg, letterSpacing: -0.3 }}>
                „{q.q}"
              </p>
              <div style={{ marginTop: 'auto', fontFamily: T.mono, fontSize: 10, color: T.fgDim, letterSpacing: 1.5, textTransform: 'uppercase', paddingTop: 18, borderTop: `1px solid ${T.line}` }}>
                — {q.src}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function GranitNewsletter() {
  const T = GRANIT_TOKENS;
  const isMobile = useIsMobile();
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  return (
    <section style={{
      background: T.accent, color: T.ink,
      padding: isMobile ? '60px 20px' : '90px 40px',
    }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: 40,
        alignItems: 'center',
      }}>
        <div>
          <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 14 }}>
            Newsletter · § 02
          </div>
          <h2 style={{ fontFamily: T.display, fontSize: isMobile ? 36 : 56, margin: 0, lineHeight: 0.95, letterSpacing: -1, textTransform: 'uppercase' }}>
            Wybierasz się<br />w&nbsp;góry?<br />
            <span style={{ WebkitTextStroke: `1.5px ${T.ink}`, WebkitTextFillColor: 'transparent' }}>Idziemy z&nbsp;Tobą.</span>
          </h2>
          <p style={{ fontFamily: T.body, fontSize: 15, lineHeight: 1.6, marginTop: 18, maxWidth: 460, color: '#1f2329' }}>
            Co miesiąc: raport pogody w&nbsp;Tatrach, prognoza warunków
            śniegowych w&nbsp;Bieszczadach, premiery sprzętu. Bez spamu.
          </p>
        </div>
        <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{
          display: 'flex', flexDirection: 'column', gap: 12,
        }}>
          {sent ? (
            <div style={{ fontFamily: T.display, fontSize: 28, letterSpacing: -0.5, textTransform: 'uppercase' }}>
              ▲ Zapisane. Pakuj plecak.
            </div>
          ) : (
            <React.Fragment>
              <input
                type="email" placeholder="twój.adres@email.pl" required
                value={email} onChange={e => setEmail(e.target.value)}
                style={{
                  background: 'transparent', border: `2px solid ${T.ink}`,
                  padding: '14px 18px', fontFamily: T.mono, fontSize: 14,
                  color: T.ink, outline: 'none', letterSpacing: 0.5,
                }}
              />
              <button type="submit" style={{
                background: T.ink, color: T.accent, border: 'none',
                padding: '16px 24px', fontFamily: T.mono, fontSize: 12,
                letterSpacing: 2, textTransform: 'uppercase', fontWeight: 700, cursor: 'pointer',
              }}>Zapisz mnie →</button>
              <div style={{ fontFamily: T.mono, fontSize: 10, color: '#5a4a32', letterSpacing: 1.5, textTransform: 'uppercase', marginTop: 4 }}>
                Akceptujesz politykę prywatności. Możesz wypisać się jednym kliknięciem.
              </div>
            </React.Fragment>
          )}
        </form>
      </div>
    </section>
  );
}

window.GranitHero = GranitHero;
window.GranitProducts = GranitProducts;
window.GranitCapabilities = GranitCapabilities;
window.GranitManifest = GranitManifest;
window.GranitPress = GranitPress;
window.GranitNewsletter = GranitNewsletter;