/* global React, Button, Pill, Eyebrow, HL, Icon, IconCapsule, INK, GREEN, GREEN_DEEP, BRIGHT, YELLOW, OFF, PAPER */
const { useState, useEffect, useRef } = React;

const CHECKOUT = "https://cart.easy.tools/checkout/27576235/czytanie-bez-hamulcow";

// ====================== NAV ======================
function Nav() {
  return (
    <nav className="nav" style={{
      display: "flex", alignItems: "center", gap: 16,
      background: OFF, border: `2.5px solid ${INK}`, borderRadius: 18,
      padding: "10px 14px 10px 18px", boxShadow: `6px 6px 0 0 #0E1613`,
      marginTop: 24,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <img src="assets/logo/lerta-mark.svg" width="38" height="38" alt=""/>
        <span style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 24, letterSpacing: "-.02em" }}>Lerta</span>
      </div>
      <div className="nav-spacer" style={{ flex: 1 }}/>
      <Button variant="primary" size="sm" href={CHECKOUT} as="a" style={{ borderRadius: 999 }}>
        Kupuję za 97 zł <Icon name="arrowRight" size={16} stroke={2.5}/>
      </Button>
    </nav>
  );
}

// ====================== HERO ======================
function Hero() {
  return (
    <section className="hero" style={{
      background: GREEN, color: OFF,
      border: `2.5px solid ${INK}`, borderRadius: 24,
      boxShadow: `10px 10px 0 0 #0E1613`,
      padding: "56px 56px 48px",
      marginTop: 32,
      display: "grid",
      gridTemplateColumns: "1.35fr 1fr",
      gap: 48,
      alignItems: "center",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* faint diagonal pattern on hero */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, opacity: .08, pointerEvents: "none",
        backgroundImage: "repeating-linear-gradient(45deg, transparent 0 14px, #fff 14px 15px)",
      }}/>
      <div style={{ position: "relative" }}>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 20 }}>
          <Pill tone="yellow" style={{ boxShadow: `3px 3px 0 0 ${INK}` }}>Dla rodziców dzieci z&nbsp;klas 4–8</Pill>
          <Pill tone="paper" style={{ boxShadow: `3px 3px 0 0 ${INK}` }}>8&nbsp;tygodni · 10–15&nbsp;min dziennie</Pill>
        </div>
        <h1 className="hero-h1" style={{
          fontFamily: "'DM Sans',sans-serif", fontWeight: 900,
          fontSize: 76, lineHeight: .96, letterSpacing: "-.035em",
          margin: "0 0 22px",
          color: "#fff",
          textWrap: "balance",
        }}>
          Twoje dziecko czyta <HL>szybciej</HL><br/>
          i&nbsp;<em style={{ fontStyle: "italic", fontWeight: 900 }}>naprawdę</em> rozumie — w&nbsp;8&nbsp;tygodni.
        </h1>
        <p style={{
          fontFamily: "'Nunito',sans-serif", fontWeight: 500, fontSize: 19,
          lineHeight: 1.55, maxWidth: 540, margin: "0 0 32px",
          color: "#E8E7DE",
        }}>
          Program <strong style={{ color: "#fff" }}>Czytanie bez&nbsp;Hamulców</strong> — gotowy plan, wszystkie materiały
          i&nbsp;ty przeprowadzasz dziecko przez osiem tygodni treningu. Bez korepetytora,
          bez dojazdów, bez drogich kursów.
        </p>
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
          <Button variant="secondary" size="xl" href={CHECKOUT} as="a">
            Kupuję za 97&nbsp;zł <Icon name="arrowRight" size={20} stroke={2.5}/>
          </Button>
          <div style={{ display: "flex", alignItems: "center", gap: 10, color: "#D3D1C4", fontFamily: "'Nunito',sans-serif", fontSize: 14 }}>
            <span style={{ textDecoration: "line-through", opacity: .7 }}>147 zł</span>
            <span style={{ background: YELLOW, color: INK, border: `2px solid ${INK}`, borderRadius: 999, padding: "3px 10px", fontWeight: 800, fontFamily: "'DM Sans',sans-serif", fontSize: 12 }}>
              -34%
            </span>
          </div>
        </div>
        <div style={{ marginTop: 32, display: "flex", gap: 22, fontFamily: "'Nunito',sans-serif", fontSize: 14, color: "#D3D1C4", flexWrap: "wrap" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Icon name="shield" size={16} stroke={2} style={{ color: YELLOW }}/> Zwrot bez pytań w&nbsp;7&nbsp;dni
          </span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <Icon name="clock" size={16} stroke={2} style={{ color: YELLOW }}/> Dostęp natychmiast po zakupie
          </span>
        </div>
      </div>

      {/* Reading-speed visual */}
      <HeroVisual/>
    </section>
  );
}

function HeroVisual() {
  return (
    <div className="hero-visual" style={{ position: "relative", minHeight: 440 }}>
      {/* big speed card */}
      <div style={{
        background: OFF, border: `2.5px solid ${INK}`, borderRadius: 20,
        boxShadow: `8px 8px 0 0 ${INK}`,
        padding: "22px 24px", color: INK,
        transform: "rotate(-2deg)",
        position: "relative", zIndex: 2,
      }}>
        <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: BRIGHT }}>
          Tempo czytania
        </div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 6 }}>
          <span style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 64, letterSpacing: "-.04em", lineHeight: 1 }}>400</span>
          <span style={{ fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 16, color: "#3C3B34" }}>słów/min</span>
        </div>
        <div style={{ fontFamily: "'Nunito',sans-serif", fontSize: 13, color: "#6C6A5E", marginTop: 2 }}>
          optymalne tempo dla rozumienia
        </div>

        {/* Animated eye tracking line */}
        <div style={{ marginTop: 18, position: "relative", background: "#fff", border: `2px solid ${INK}`, borderRadius: 10, padding: "14px 14px 18px" }}>
          <div style={{ display: "flex", gap: 6, alignItems: "center", marginBottom: 8 }}>
            {[0,1,2,3,4,5].map(i => (
              <div key={i} style={{ height: 6, background: "#E8E7DE", borderRadius: 3, flex: i%2===0 ? 2 : 1 }}/>
            ))}
          </div>
          <div style={{ display: "flex", gap: 6, alignItems: "center", marginBottom: 8 }}>
            {[0,1,2,3,4].map(i => (
              <div key={i} style={{ height: 6, background: "#E8E7DE", borderRadius: 3, flex: i%2===1 ? 2 : 1 }}/>
            ))}
          </div>
          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
            {[0,1,2,3].map(i => (
              <div key={i} style={{ height: 6, background: "#E8E7DE", borderRadius: 3, flex: i%3===0 ? 3 : 1 }}/>
            ))}
          </div>
          {/* moving eye pointer */}
          <div className="eye-track" style={{
            position: "absolute", top: 8, left: 10,
            background: YELLOW, border: `2px solid ${INK}`, borderRadius: 999,
            padding: "3px 8px", fontFamily: "'DM Sans',sans-serif", fontWeight: 800, fontSize: 11,
            display: "inline-flex", gap: 4, alignItems: "center",
          }}>
            <Icon name="eye" size={12} stroke={2.5}/> TY
          </div>
        </div>
      </div>

      {/* small "teraz" callout */}
      <div style={{
        position: "absolute", top: -10, right: 10, zIndex: 3,
        background: YELLOW, border: `2.5px solid ${INK}`, borderRadius: 14,
        boxShadow: `4px 4px 0 0 ${INK}`,
        padding: "10px 14px",
        transform: "rotate(6deg)",
      }}>
        <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: INK }}>Teraz</div>
        <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 22, color: INK, letterSpacing: "-.03em", lineHeight: 1 }}>50–150</div>
        <div style={{ fontFamily: "'Nunito',sans-serif", fontSize: 11, color: INK, fontWeight: 700 }}>słów/min</div>
      </div>

      {/* big arrow */}
      <div style={{
        position: "absolute", bottom: 22, right: -6, zIndex: 1,
        background: BRIGHT, border: `2.5px solid ${INK}`, borderRadius: 14,
        boxShadow: `4px 4px 0 0 ${INK}`,
        padding: "10px 14px",
        transform: "rotate(-4deg)",
        display: "flex", alignItems: "center", gap: 8,
        color: "#fff",
        fontFamily: "'DM Sans',sans-serif", fontWeight: 800, fontSize: 13,
      }}>
        <span>×3 szybciej</span>
        <Icon name="arrowRight" size={18} stroke={2.5}/>
      </div>
    </div>
  );
}

// ====================== PROBLEM ======================
function ProblemSection() {
  return (
    <section className="sec" style={{ marginTop: 96 }}>
      <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }}>
        <div>
          <Eyebrow>Brzmi znajomo?</Eyebrow>
          <h2 style={{
            fontFamily: "'DM Sans',sans-serif", fontWeight: 800,
            fontSize: 56, lineHeight: 1, letterSpacing: "-.03em",
            margin: "14px 0 22px",
          }}>
            Większość dzieci czyta wolno — <HL>i dlatego nie&nbsp;chcą&nbsp;czytać.</HL>
          </h2>
          <p style={{ fontFamily: "'Nunito',sans-serif", fontSize: 19, lineHeight: 1.55, color: "#3C3B34", margin: "0 0 14px", maxWidth: 520 }}>
            Kiedy przebrnięcie przez stronę podręcznika zajmuje wieczność, a&nbsp;po&nbsp;wszystkim
            i&nbsp;tak nie wiadomo, o&nbsp;co chodziło — trudno się dziwić, że lektury lądują na&nbsp;dnie plecaka.
          </p>
          <p style={{ fontFamily: "'Nunito',sans-serif", fontSize: 19, lineHeight: 1.55, color: INK, margin: 0, maxWidth: 520, fontWeight: 700 }}>
            To nie jest kwestia <span style={{ textDecoration: "line-through", color: "#6C6A5E", fontWeight: 500 }}>lenistwa</span> ani
            {" "}<span style={{ textDecoration: "line-through", color: "#6C6A5E", fontWeight: 500 }}>braku zdolności</span>.<br/>
            Czytanie to <HL>umiejętność</HL>, którą można trenować.
          </p>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {[
            { k: "Przy wolnym czytaniu", v: "mózg się nudzi i ucieka myślami." },
            { k: "Przy właściwym tempie", v: "zostaje skupiony na tekście.", tone: "yellow" },
            { k: "Cel programu", v: "400 słów/min — tempo dla rozumienia.", tone: "green" },
          ].map((it, i) => (
            <div key={i} className="lift" style={{
              background: it.tone === "yellow" ? YELLOW : it.tone === "green" ? BRIGHT : PAPER,
              color: it.tone === "green" ? "#fff" : INK,
              border: `2.5px solid ${INK}`, borderRadius: 14,
              boxShadow: `6px 6px 0 0 ${INK}`,
              padding: "20px 22px",
              display: "flex", gap: 16, alignItems: "flex-start",
            }}>
              <span style={{
                flex: "none", width: 40, height: 40, borderRadius: 10,
                background: it.tone === "green" ? YELLOW : it.tone === "yellow" ? PAPER : YELLOW,
                color: INK,
                border: `2.5px solid ${INK}`,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 16,
              }}>{i+1}</span>
              <div>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 13, letterSpacing: ".1em", textTransform: "uppercase", opacity: .75, marginBottom: 4 }}>{it.k}</div>
                <div style={{ fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 18, lineHeight: 1.35 }}>{it.v}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ====================== SPEED COMPARISON ======================
function SpeedCompare() {
  const rows = [
    { who: "Przeciętny dorosły", v: 200, tone: PAPER, fg: INK },
    { who: "Licealista", v: 250, tone: PAPER, fg: INK },
    { who: "Student", v: 350, tone: PAPER, fg: INK },
    { who: "Twoje dziecko teraz", v: 100, range: "50–150", tone: "#FDECD0", fg: INK, highlight: true, label: "prawdopodobnie" },
    { who: "Po programie", v: 400, tone: BRIGHT, fg: "#fff", cta: true, label: "cel" },
  ];
  const MAX = 450;
  return (
    <section className="sec" style={{ marginTop: 96 }}>
      <div className="pad-lg" style={{
        background: YELLOW, border: `2.5px solid ${INK}`, borderRadius: 24,
        boxShadow: `10px 10px 0 0 #0E1613`,
        padding: "48px 48px",
      }}>
        <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 48, alignItems: "start" }}>
          <div>
            <Eyebrow color={INK}>Gdzie jest twoje dziecko</Eyebrow>
            <h2 style={{
              fontFamily: "'DM Sans',sans-serif", fontWeight: 800,
              fontSize: 48, lineHeight: 1, letterSpacing: "-.03em",
              margin: "12px 0 18px",
            }}>
              A&nbsp;gdzie <HL tone="green">może&nbsp;być</HL><br/>
              za 8&nbsp;tygodni.
            </h2>
            <p style={{ fontFamily: "'Nunito',sans-serif", fontSize: 17, lineHeight: 1.55, color: INK, margin: 0, maxWidth: 420 }}>
              Tempo czytania optymalne dla rozumienia tekstu to&nbsp;<strong>400 wyrazów na&nbsp;minutę</strong>.
              Większość dzieci w&nbsp;klasach 4–7 jest kilkukrotnie poniżej.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {rows.map((r, i) => (
              <div key={i} className="speed-row" style={{
                background: r.tone, color: r.fg,
                border: `2.5px solid ${INK}`, borderRadius: 12,
                boxShadow: r.cta ? `6px 6px 0 0 ${INK}` : `3px 3px 0 0 ${INK}`,
                padding: "14px 16px",
                display: "grid", gridTemplateColumns: "170px 1fr 90px", gap: 14, alignItems: "center",
                position: "relative",
              }}>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: r.highlight || r.cta ? 800 : 700, fontSize: 14, lineHeight: 1.2 }}>
                  {r.who}
                  {r.label && <div style={{ fontFamily: "'Nunito',sans-serif", fontWeight: 600, fontSize: 11, opacity: .75, marginTop: 2, textTransform: "uppercase", letterSpacing: ".08em" }}>{r.label}</div>}
                </div>
                <div style={{ height: 16, background: "rgba(0,0,0,.08)", borderRadius: 999, overflow: "hidden", border: `1.5px solid ${INK}` }}>
                  <div className="gauge-fill" style={{
                    "--w": `${Math.min(100, (r.v/MAX)*100)}%`,
                    height: "100%",
                    background: r.cta ? YELLOW : r.highlight ? "#D64545" : INK,
                    animationDelay: `${i*120}ms`,
                  }}/>
                </div>
                <div style={{ textAlign: "right", fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: r.cta ? 22 : 18, letterSpacing: "-.02em" }}>
                  {r.range || r.v}<span style={{ fontSize: 11, fontWeight: 700, opacity: .7, marginLeft: 2 }}> słów/min</span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 28, display: "flex", justifyContent: "center" }}>
          <div style={{
            background: INK, color: "#fff",
            border: `2.5px solid ${INK}`, borderRadius: 999,
            padding: "10px 20px",
            fontFamily: "'DM Sans',sans-serif", fontWeight: 800, fontSize: 14,
            display: "inline-flex", alignItems: "center", gap: 10,
          }}>
            <Icon name="sparkles" size={16} stroke={2.2} style={{ color: YELLOW }}/>
            Ale możemy to zmienić.
          </div>
        </div>
      </div>
    </section>
  );
}

// ====================== CURRICULUM / SKILLS ======================
function SkillsSection() {
  const skills = [
    { icon: "eye", title: "Sprawne prowadzenie wzroku", body: "Bez zatrzymywania się na każdym słowie — ruch oczu po tekście staje się płynny." },
    { icon: "volumeOff", title: "Wyciszenie wewnętrznego głosu", body: "Ten, który spowalnia czytanie do prędkości mówienia — uczymy go wyłączać." },
    { icon: "puzzle", title: "Łączenie słów w całości", body: "Mózg przetwarza sens, a nie pojedyncze litery. Czytanie frazami, nie wyrazami." },
    { icon: "key", title: "Wyłapywanie tego, co ważne", body: "W każdym tekście są zdania-klucze. Uczymy, jak je rozpoznać i zatrzymać." },
    { icon: "map", title: "Porządkowanie treści", body: "Schematy i notatki, które sprawiają, że przeczytane rzeczy zostają w głowie." },
    { icon: "brain", title: "Koncentracja przez całą sesję", body: "Techniki utrzymania uwagi — żeby po 20 minutach dziecko nadal było w tekście." },
  ];
  return (
    <section id="program" className="sec" style={{ marginTop: 96 }}>
      <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "end", marginBottom: 36 }}>
        <div>
          <Eyebrow>Czego uczymy</Eyebrow>
          <h2 style={{
            fontFamily: "'DM Sans',sans-serif", fontWeight: 800,
            fontSize: 56, lineHeight: 1, letterSpacing: "-.03em",
            margin: "12px 0 0",
          }}>
            Sześć&nbsp;umiejętności.<br/>
            Same <HL>ćwiczenia</HL>, zero wykładów.
          </h2>
        </div>
        <p style={{ fontFamily: "'Nunito',sans-serif", fontSize: 18, lineHeight: 1.55, color: "#3C3B34", margin: 0 }}>
          Każdy tydzień to jedna umiejętność i&nbsp;konkretny zestaw ćwiczeń.
          Żadnej teorii czytania o&nbsp;czytaniu — dziecko po&nbsp;prostu robi.
        </p>
      </div>
      <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {skills.map((s, i) => (
          <div key={i} className="lift" style={{
            background: PAPER, border: `2.5px solid ${INK}`, borderRadius: 16,
            boxShadow: `6px 6px 0 0 ${INK}`, padding: 26,
            position: "relative",
          }}>
            <div style={{
              position: "absolute", top: -12, right: 16,
              background: INK, color: YELLOW,
              border: `2.5px solid ${INK}`, borderRadius: 999,
              padding: "4px 10px",
              fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 12, letterSpacing: ".02em",
            }}>0{i+1}</div>
            <IconCapsule name={s.icon} tone={i===3?"green":"yellow"} size={52}/>
            <h3 style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 800, fontSize: 20, lineHeight: 1.15, margin: "18px 0 8px" }}>{s.title}</h3>
            <p style={{ fontFamily: "'Nunito',sans-serif", fontSize: 15, lineHeight: 1.55, color: "#3C3B34", margin: 0 }}>{s.body}</p>
          </div>
        ))}
      </div>

      {/* Results strip */}
      <div className="result-strip" style={{
        marginTop: 28,
        background: GREEN, color: OFF,
        border: `2.5px solid ${INK}`, borderRadius: 20,
        boxShadow: `8px 8px 0 0 ${INK}`,
        padding: "24px 28px",
        display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 24, alignItems: "center",
      }}>
        <IconCapsule name="target" tone="yellow" size={56}/>
        <div>
          <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: YELLOW, marginBottom: 4 }}>Pierwsze efekty</div>
          <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 800, fontSize: 22, color: "#fff", lineHeight: 1.2 }}>
            Po <HL tone="yellow"><span style={{ color: INK }}>2 tygodniach</span></HL> widać zmianę. Po 8 masz wyniki testu końcowego —
            dokładnie, o ile wzrosło tempo i&nbsp;rozumienie.
          </div>
        </div>
        <Button variant="secondary" size="lg" href={CHECKOUT} as="a">
          Kupuję <Icon name="arrowRight" size={18} stroke={2.5}/>
        </Button>
      </div>
    </section>
  );
}

// ====================== FOR WHOM ======================
function ForWhomSection() {
  return (
    <section className="sec" style={{ marginTop: 96, maxWidth: 960, marginLeft: "auto", marginRight: "auto" }}>
      <div style={{ textAlign: "center", marginBottom: 28 }}>
        <Eyebrow>Dla kogo</Eyebrow>
        <h2 style={{
          fontFamily: "'DM Sans',sans-serif", fontWeight: 800,
          fontSize: 48, lineHeight: 1.05, letterSpacing: "-.03em",
          margin: "12px 0 12px",
        }}>
          Program jest dla dzieci w&nbsp;klasach 4–7,<br/>które <HL>czytają już płynnie</HL>, ale…
        </h2>
      </div>
      <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
        {[
          "Czytają wolno i&nbsp;lekcje zajmują im zbyt dużo czasu.",
          "Czytają, ale niewiele zapamiętują z&nbsp;tego, co przeczytały.",
        ].map((t, i) => (
          <div key={i} className="lift" style={{
            background: PAPER, border: `2.5px solid ${INK}`, borderRadius: 16,
            boxShadow: `6px 6px 0 0 ${INK}`, padding: "24px 28px",
            display: "flex", gap: 16, alignItems: "center",
          }}>
            <span style={{
              flex: "none", width: 48, height: 48, borderRadius: 999,
              background: BRIGHT, color: "#fff",
              border: `2.5px solid ${INK}`,
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <Icon name="check" size={28} stroke={3}/>
            </span>
            <div style={{ fontFamily: "'Nunito',sans-serif", fontSize: 18, lineHeight: 1.4, fontWeight: 600 }}
                 dangerouslySetInnerHTML={{__html: t}}/>
          </div>
        ))}
      </div>
    </section>
  );
}

// ====================== WHAT YOU GET ======================
function WhatYouGet() {
  const items = [
    { icon: "video", title: "Lekcje wideo na każdy tydzień", body: "Krótkie, konkretne, z dokładnym opisem ćwiczeń. Nic zbędnego." },
    { icon: "pdf", title: "Gotowe materiały do druku", body: "Teksty ćwiczeniowe, arkusze, planer tygodniowy — wszystko w PDF." },
    { icon: "chart", title: "Testy diagnostyczne", body: "Na początku, w połowie i na końcu — żebyś widziała realny postęp." },
    { icon: "trophy", title: "System grywalizacji", body: "Dzieci ćwiczą chętniej, kiedy widzą, że biją własne rekordy." },
  ];
  return (
    <section className="sec" style={{ marginTop: 96 }}>
      <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start", marginBottom: 36 }}>
        <div>
          <Eyebrow>Co dostaniesz</Eyebrow>
          <h2 style={{
            fontFamily: "'DM Sans',sans-serif", fontWeight: 800,
            fontSize: 56, lineHeight: 1, letterSpacing: "-.03em",
            margin: "12px 0 0",
          }}>
            <HL>Minimum teorii.</HL><br/>Maksimum praktyki.
          </h2>
        </div>
        <p style={{ fontFamily: "'Nunito',sans-serif", fontSize: 18, lineHeight: 1.55, color: "#3C3B34", margin: 0 }}>
          Przez 8&nbsp;tygodni co tydzień dostajesz nową porcję wiedzy w&nbsp;pigułce
          i&nbsp;zestaw ćwiczeń do&nbsp;realizacji w&nbsp;tym tygodniu.
          Program jest przygotowany dla&nbsp;rodziców — <strong>ty prowadzisz, my dajemy wszystko gotowe.</strong>
        </p>
      </div>
      <div className="grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
        {items.map((it, i) => (
          <div key={i} className="lift" style={{
            background: i===1 ? YELLOW : PAPER,
            border: `2.5px solid ${INK}`, borderRadius: 16,
            boxShadow: `6px 6px 0 0 ${INK}`, padding: 24,
          }}>
            <IconCapsule name={it.icon} tone={i===1?"paper":"yellow"} size={56}/>
            <h3 style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 800, fontSize: 18, lineHeight: 1.2, margin: "20px 0 8px" }}>{it.title}</h3>
            <p style={{ fontFamily: "'Nunito',sans-serif", fontSize: 14, lineHeight: 1.55, color: "#3C3B34", margin: 0 }}>{it.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ====================== 8-WEEK RHYTHM ======================
function TimelineSection() {
  return (
    <section className="sec" style={{ marginTop: 96 }}>
      <div className="pad-lg" style={{
        background: PAPER, border: `2.5px solid ${INK}`, borderRadius: 24,
        boxShadow: `10px 10px 0 0 ${INK}`,
        padding: "48px 48px",
      }}>
        <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 56, alignItems: "center" }}>
          <div>
            <Eyebrow>Rytm programu</Eyebrow>
            <h2 style={{
              fontFamily: "'DM Sans',sans-serif", fontWeight: 800,
              fontSize: 52, lineHeight: 1, letterSpacing: "-.03em",
              margin: "12px 0 16px",
            }}>
              8&nbsp;tygodni. <HL>Trzy&nbsp;punkty&nbsp;kontrolne.</HL>
            </h2>
            <p style={{ fontFamily: "'Nunito',sans-serif", fontSize: 18, lineHeight: 1.55, color: "#3C3B34", margin: "0 0 14px", maxWidth: 460 }}>
              Każdy tydzień to 3–4 ćwiczenia o&nbsp;rosnącej trudności — przeplatamy wszystkie
              sześć umiejętności, nie uczymy ich po kolei.
            </p>
            <p style={{ fontFamily: "'Nunito',sans-serif", fontSize: 18, lineHeight: 1.55, color: "#3C3B34", margin: 0, maxWidth: 460 }}>
              Trzy testy diagnostyczne — na&nbsp;początku, w&nbsp;połowie i&nbsp;na&nbsp;końcu —
              pokazują dokładnie, <strong style={{ color: INK }}>o&nbsp;ile wzrosło tempo i&nbsp;rozumienie.</strong>
            </p>
          </div>

          {/* visual: horizontal 8-week strip with test markers */}
          <div>
            <div style={{ position: "relative", padding: "44px 0 64px" }}>
              {/* the line */}
              <div style={{
                position: "absolute", left: 0, right: 0, top: "50%", height: 14,
                background: OFF, border: `2.5px solid ${INK}`, borderRadius: 999,
                transform: "translateY(-50%)",
              }}/>
              {/* week markers */}
              <div className="week-strip" style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(8, 1fr)", height: 14, alignItems: "center" }}>
                {[1,2,3,4,5,6,7,8].map(n => {
                  const isTest = n === 1 || n === 4 || n === 8;
                  return (
                    <div key={n} style={{ position: "relative", display: "flex", justifyContent: "center" }}>
                      <div style={{
                        width: isTest ? 34 : 14, height: isTest ? 34 : 14,
                        background: isTest ? (n===8?BRIGHT:YELLOW) : INK,
                        border: `2.5px solid ${INK}`,
                        borderRadius: 999,
                        boxShadow: isTest ? `3px 3px 0 0 ${INK}` : "none",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 13,
                        color: n===8?"#fff":INK,
                      }}>
                        {isTest ? n : ""}
                      </div>
                      {/* week number below */}
                      <div style={{
                        position: "absolute", top: isTest ? 42 : 22, left: "50%", transform: "translateX(-50%)",
                        fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 11,
                        color: "#6C6A5E", letterSpacing: ".08em",
                      }}>T{n}</div>
                      {/* test labels above */}
                      {isTest && (
                        <div style={{
                          position: "absolute", bottom: 42, left: "50%", transform: "translateX(-50%)",
                          whiteSpace: "nowrap",
                          background: n===8?BRIGHT:YELLOW, color: n===8?"#fff":INK,
                          border: `2.5px solid ${INK}`, borderRadius: 999,
                          padding: "4px 10px",
                          fontFamily: "'DM Sans',sans-serif", fontWeight: 800, fontSize: 11,
                          boxShadow: `2px 2px 0 0 ${INK}`,
                        }}>
                          {n===1?"Start":n===4?"Półmetek":"Meta"}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>

            {/* result strip under the timeline */}
            <div className="result-band" style={{
              background: INK, color: OFF,
              border: `2.5px solid ${INK}`, borderRadius: 14,
              padding: "14px 18px",
              display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 18, alignItems: "center",
            }}>
              <div>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "#A6A497" }}>Start</div>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 22, color: "#fff", letterSpacing: "-.02em" }}>50–150 <span style={{ fontSize: 12, color: "#A6A497", fontWeight: 700 }}>słów/min</span></div>
              </div>
              <Icon name="arrowRight" size={22} stroke={2.5} style={{ color: YELLOW }}/>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: YELLOW }}>Meta</div>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 22, color: "#fff", letterSpacing: "-.02em" }}>~400 <span style={{ fontSize: 12, color: "#A6A497", fontWeight: 700 }}>słów/min</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ====================== PRICE / CTA ======================
function PriceSection() {
  return (
    <section id="kup" className="sec" style={{ marginTop: 96, paddingTop: 16 }}>
      <div className="pad-lg grid-2" style={{
        background: INK, color: OFF,
        border: `2.5px solid ${INK}`, borderRadius: 24,
        boxShadow: `10px 10px 0 0 #0E1613`,
        padding: "56px 56px",
        display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48, alignItems: "center",
        position: "relative",
      }}>
        {/* corner badge */}
        <div style={{
          position: "absolute", top: -16, left: 40,
          background: YELLOW, color: INK,
          border: `2.5px solid ${INK}`, borderRadius: 999,
          padding: "6px 14px",
          fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 13,
          boxShadow: `3px 3px 0 0 ${INK}`,
          zIndex: 2,
        }}>Oferta startowa</div>

        <div>
          <Eyebrow color={YELLOW}>Zacznij teraz</Eyebrow>
          <h2 style={{
            fontFamily: "'DM Sans',sans-serif", fontWeight: 900,
            fontSize: 56, lineHeight: .98, letterSpacing: "-.035em",
            margin: "14px 0 18px",
            color: "#fff",
          }}>
            8&nbsp;tygodni.<br/>
            Jedna płatność.<br/>
            <HL tone="green">Bez&nbsp;ryzyka.</HL>
          </h2>
          <p style={{ fontFamily: "'Nunito',sans-serif", fontSize: 18, lineHeight: 1.55, color: "#D3D1C4", margin: "0 0 24px", maxWidth: 460 }}>
            Płacisz raz — dostęp do wszystkich materiałów od&nbsp;razu. Żadnych abonamentów,
            żadnych dopłat za&nbsp;kolejne tygodnie.
          </p>
          <div style={{ display: "flex", gap: 20, alignItems: "center", fontFamily: "'Nunito',sans-serif", fontSize: 14, color: "#D3D1C4", flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <Icon name="shield" size={18} stroke={2} style={{ color: YELLOW }}/> Zwrot bez pytań w&nbsp;7&nbsp;dni
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <Icon name="lock" size={18} stroke={2} style={{ color: YELLOW }}/> Bezpieczna płatność
            </span>
          </div>
        </div>

        <div style={{
          background: OFF, color: INK,
          border: `2.5px solid ${INK}`, borderRadius: 20,
          boxShadow: `8px 8px 0 0 ${YELLOW}`,
          padding: 32,
          position: "relative",
        }}>
          <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 800, fontSize: 18, marginBottom: 16 }}>
            Czytanie bez&nbsp;Hamulców
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 10 }}>
            <span style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 72, letterSpacing: "-.04em", lineHeight: 1 }}>97 zł</span>
            <span style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 20, color: "#6C6A5E", textDecoration: "line-through" }}>147 zł</span>
          </div>
          <div style={{
            display: "inline-block",
            background: YELLOW, border: `2px solid ${INK}`, borderRadius: 999,
            padding: "4px 12px",
            fontFamily: "'DM Sans',sans-serif", fontWeight: 800, fontSize: 13,
            marginBottom: 22,
          }}>
            Oszczędzasz 50&nbsp;zł
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: "0 0 26px", display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              "Dostęp do wszystkich 8 tygodni od razu",
              "Lekcje wideo + PDFy do druku",
              "Testy diagnostyczne i system grywalizacji",
              "Bez limitu czasu — wracasz, kiedy chcesz",
            ].map((f, i) => (
              <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontFamily: "'Nunito',sans-serif", fontSize: 15, fontWeight: 600 }}>
                <span style={{
                  flex: "none", width: 24, height: 24, borderRadius: 7,
                  background: BRIGHT, border: `2px solid ${INK}`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "#fff", marginTop: 1,
                }}>
                  <Icon name="check" size={14} stroke={3.5}/>
                </span>
                {f}
              </li>
            ))}
          </ul>
          <Button variant="primary" size="xl" href={CHECKOUT} as="a" style={{ width: "100%" }}>
            Kupuję za&nbsp;97&nbsp;zł <Icon name="arrowRight" size={20} stroke={2.5}/>
          </Button>
          <div style={{ textAlign: "center", marginTop: 14, fontFamily: "'Nunito',sans-serif", fontSize: 12, color: "#6C6A5E" }}>
            🔒 Zwrot bez pytań w&nbsp;ciągu 7&nbsp;dni od rozpoczęcia programu
          </div>
        </div>
      </div>
    </section>
  );
}

// ====================== FOOTER ======================
function Footer() {
  return (
    <footer className="footer-grid" style={{
      marginTop: 72, marginBottom: 32,
      background: OFF, border: `2.5px solid ${INK}`, borderRadius: 18,
      boxShadow: `6px 6px 0 0 ${INK}`,
      padding: "28px 32px",
      display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "center",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <img src="assets/logo/lerta-mark.svg" width="40" height="40" alt=""/>
        <div>
          <div style={{ fontFamily: "'DM Sans',sans-serif", fontWeight: 900, fontSize: 20 }}>Lerta</div>
          <div style={{ fontFamily: "'Nunito',sans-serif", fontSize: 13, color: "#6C6A5E" }}>
            © 2026 Lerta · Paulina Starzyńska-Wilbik
          </div>
        </div>
      </div>
      <div style={{ display: "flex", gap: 20, fontFamily: "'DM Sans',sans-serif", fontWeight: 700, fontSize: 14 }}>
        <a href="https://lerta.pl/polityka-prywatnosci/" style={{ color: INK, textDecoration: "none" }}>Polityka prywatności</a>
        <a href="mailto:paulina@lerta.pl" style={{ color: INK, textDecoration: "none" }}>Kontakt</a>
      </div>
    </footer>
  );
}

// ====================== APP ======================
function App() {
  return (
    <div className="page" style={{ maxWidth: 1200, margin: "0 auto", padding: "0 24px" }}>
      <Nav/>
      <Hero/>
      <ProblemSection/>
      <SpeedCompare/>
      <SkillsSection/>
      <ForWhomSection/>
      <WhatYouGet/>
      <TimelineSection/>
      <PriceSection/>
      <Footer/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
