// anim-scenes.jsx — 6 scen narracji + AnimRoot
//
// Timing (sekundy):
//   0.0 – 3.0   Scene 1 — Word chaos / ból
//   3.0 – 6.5   Scene 2 — Szacownia: adres + click
//   6.5 – 9.5   Scene 3 — ULDK cascade
//   9.5 – 12.5  Scene 4 — Blokoteka drag + zmienne
//   12.5 – 15.5 Scene 5 — RCN auto-fill
//   15.5 – 19.0 Scene 6 — Eksport + counter flip + CTA

const DUR = 27;

// ═══════════════════════════════════════════════ Scene 1 — Word chaos

function ChaosCounter({ baseSec = 18934 /* 05:15:34 */ }) {
  // Stage clock so it keeps ticking smoothly
  const t = useTime();
  const total = baseSec + Math.floor(t * 1.4); // tick faster than realtime
  const h = Math.floor(total / 3600);
  const m = Math.floor((total % 3600) / 60);
  const s = total % 60;
  const fmt = (n) => String(n).padStart(2, '0');
  return (
    <span style={{ fontFamily: A.mono, letterSpacing: '0.04em' }}>
      {fmt(h)}:{fmt(m)}:{fmt(s)}
    </span>
  );
}

function Scene1Word() {
  const { localTime } = useSprite();
  // intro tilt — settles by 0.6s
  const tilt = interpolate([0, 0.7], [-1.4, -0.6], Easing.easeOutCubic)(localTime);
  // overlay text appears at 2.5s, fades cut at 3.6s
  const overlayU = clamp((localTime - 2.5) / 0.6, 0, 1);
  const fadeOut = clamp((localTime - 4.7) / 0.3, 0, 1);

  return (
    <>
      {/* Desktop bg (worn paper / cream) */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 30% 30%, #ecead9 0%, #d8d4c0 60%, #c4bea7 100%)`,
        opacity: 1 - fadeOut * 0.4,
      }} />

      {/* Geoportal browser peeking behind */}
      <div style={{
        position: 'absolute', left: 1080, top: 60, width: 760, height: 540,
        background: A.surface, border: `1px solid ${A.border}`, borderRadius: 8,
        boxShadow: '0 12px 36px rgba(15,23,42,.18)',
        transform: 'rotate(2deg)', overflow: 'hidden',
        opacity: 0.92,
      }}>
        <div style={{ height: 30, background: '#0d59a8', display: 'flex', alignItems: 'center', padding: '0 12px', color: '#fff', fontSize: 12, fontFamily: A.sans }}>
          <span style={{ fontWeight: 600 }}>Geoportal Krajowy</span>
          <span style={{ marginLeft: 'auto', opacity: 0.7, fontFamily: A.mono, fontSize: 10 }}>geoportal.gov.pl</span>
        </div>
        <div style={{ height: 'calc(100% - 30px)', background:
          `linear-gradient(135deg, #a8b29f 0%, #c1ccba 30%, #cfd5cd 60%, #b9c2b3 100%)`,
          position: 'relative',
        }}>
          {/* fake map tiles */}
          <svg viewBox="0 0 760 510" width="100%" height="100%" preserveAspectRatio="none">
            <pattern id="hp" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(28)">
              <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(60,80,50,.18)" strokeWidth="1.2" />
            </pattern>
            <rect width="100%" height="100%" fill="url(#hp)" />
            <path d="M0,180 Q200,160 400,200 T760,220" stroke="rgba(80,70,60,.6)" fill="none" strokeWidth="3" strokeDasharray="8 4" />
            <rect x="220" y="180" width="180" height="120" fill="none" stroke="#dc2626" strokeWidth="2.4" strokeDasharray="4 3" />
            <text x="310" y="350" fontSize="14" fontFamily="monospace" fill="rgba(0,0,0,.55)">127/3</text>
          </svg>
          {/* loading toast */}
          <div style={{ position: 'absolute', top: 14, right: 14, background: A.surface, border: `1px solid ${A.border}`, padding: '6px 10px', borderRadius: 4, fontFamily: A.mono, fontSize: 11, color: A.ink2, letterSpacing: '0.02em' }}>
            Wczytywanie warstwy WMS…
          </div>
        </div>
      </div>

      {/* Excel window peeking */}
      <div style={{
        position: 'absolute', left: 1200, top: 540, width: 680, height: 460,
        background: A.surface, border: `1px solid ${A.border}`, borderRadius: 8,
        boxShadow: '0 14px 40px rgba(15,23,42,.22)', overflow: 'hidden',
        transform: 'rotate(-1.2deg)',
      }}>
        <div style={{ height: 30, background: '#107c41', display: 'flex', alignItems: 'center', padding: '0 12px', color: '#fff', fontSize: 12 }}>
          <span style={{ fontWeight: 600 }}>RCN_korekty_v8.xlsx</span>
          <span style={{ marginLeft: 'auto', opacity: 0.7, fontSize: 11 }}>Excel</span>
        </div>
        <div style={{ padding: '8px 12px', fontFamily: A.mono, fontSize: 11, color: A.ink2, letterSpacing: '0.02em' }}>
          {/* fake spreadsheet grid */}
          <div style={{ display: 'grid', gridTemplateColumns: '40px repeat(7, 1fr)', gap: 1, background: A.border }}>
            {['', 'A', 'B', 'C', 'D', 'E', 'F', 'G'].map((h, i) => (
              <div key={i} style={{ background: '#e9efe5', padding: '4px 6px', fontWeight: 600, color: A.ink3, fontSize: 10 }}>{h}</div>
            ))}
            {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((r) => (
              <React.Fragment key={r}>
                <div style={{ background: '#e9efe5', padding: '3px 6px', fontWeight: 600, color: A.ink3, fontSize: 10 }}>{r}</div>
                {[...Array(7)].map((_, c) => {
                  const isErr = r === 5 && c === 4;
                  const isHl = r === 3 && c === 2;
                  return (
                    <div key={c} style={{
                      background: isErr ? '#fef2f2' : (isHl ? A.warnSoft : A.surface),
                      padding: '3px 6px', fontSize: 10.5,
                      color: isErr ? A.bad : A.ink,
                    }}>
                      {r === 1 ? ['Adres', 'm²', 'Cena', 'PLN/m²', 'Stan', 'Lok.', 'Korekta'][c]
                       : r === 5 && c === 4 ? '#REF!'
                       : c === 0 ? ['Wiosenna', 'Polna', 'Łąkowa', 'Górna', '', 'Wsch.', 'Mały', 'Duży'][r - 2]
                       : c < 5 ? ['281', '294', '254', '301', '', '272', '280', '285'][r - 2]
                       : '—'}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      {/* Word window — hero */}
      <div style={{
        position: 'absolute', left: 100, top: 100, width: 1100, height: 880,
        background: A.surface,
        border: `1px solid ${A.border}`, borderRadius: 10,
        boxShadow: '0 30px 80px rgba(15,23,42,.28), 0 4px 16px rgba(15,23,42,.10)',
        transform: `rotate(${tilt}deg)`,
        overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* title bar */}
        <div style={{ height: 36, background: '#185abd', display: 'flex', alignItems: 'center', padding: '0 14px', color: '#fff', fontFamily: A.sans, fontSize: 13 }}>
          <span style={{ fontWeight: 600 }}>📄 Operat_Klonowa_v8_FINAL_FINAL_pop.docx</span>
          <span style={{ marginLeft: 14, opacity: 0.7, fontSize: 11 }}>— Tryb zgodności — Microsoft Word</span>
          <span style={{ marginLeft: 'auto', display: 'flex', gap: 8, opacity: 0.85, fontSize: 13 }}>
            <span>—</span><span>□</span><span>×</span>
          </span>
        </div>
        {/* ribbon */}
        <div style={{ height: 56, background: '#f3f2f1', borderBottom: `1px solid ${A.border}`, padding: '8px 16px', display: 'flex', gap: 18, alignItems: 'center', fontFamily: A.sans, fontSize: 11, color: A.ink3 }}>
          {['Plik', 'Strona główna', 'Wstawianie', 'Projektowanie', 'Układ', 'Odwołania'].map((tab, i) => (
            <span key={i} style={{
              padding: '6px 10px',
              color: i === 1 ? A.ink : A.ink2,
              borderBottom: i === 1 ? `2px solid #185abd` : 'none',
              fontWeight: i === 1 ? 600 : 400,
            }}>{tab}</span>
          ))}
        </div>
        {/* page */}
        <div style={{ flex: 1, background: '#e6e4df', padding: '20px 60px', overflow: 'hidden' }}>
          <div style={{ width: 820, margin: '0 auto', background: A.paper, padding: '52px 70px', boxShadow: '0 2px 12px rgba(0,0,0,0.12)', minHeight: '100%', fontFamily: A.serif, fontSize: 13.5, lineHeight: 1.7, color: A.ink }}>
            <h2 style={{ fontFamily: A.serif, fontSize: 22, margin: '0 0 4px', fontWeight: 500 }}>OPERAT SZACUNKOWY</h2>
            <div style={{ fontFamily: A.serif, fontStyle: 'italic', fontSize: 14, color: A.ink3, marginBottom: 30 }}>§3. Opis działki i otoczenia</div>

            <p style={{ margin: '0 0 14px' }}>
              Przedmiotowa nieruchomość gruntowa stanowi działkę ewidencyjną o numerze{' '}
              <Sprite start={0.4} end={3.0} keepMounted>
                <span style={{ background: A.warnSoft, padding: '0 3px', boxShadow: 'inset 0 -2px 0 rgba(217,119,6,.35)' }}>[wpisz nr]</span>
              </Sprite>, położoną w obrębie [wpisz nazwę], gmina [wpisz], powiat [wpisz],
              województwo [wpisz]. Powierzchnia gruntu wynosi <span style={{ background: A.warnSoft, padding: '0 3px' }}>____ m²</span>.
            </p>
            <p style={{ margin: '0 0 14px' }}>
              Otoczenie nieruchomości stanowi zabudowa mieszkaniowa{' '}
              <span style={{ textDecoration: 'line-through', color: A.bad, opacity: 0.8 }}>wielorodzinna</span>{' '}
              <span style={{ background: A.okSoft, color: A.ok, padding: '0 3px' }}>jednorodzinna</span> o niskiej intensywności…
            </p>
            <p style={{ margin: '0 0 14px', opacity: 0.85 }}>
              Działka posiada regularny kształt zbliżony do prostokąta, teren płaski,
              bez widocznych obciążeń. <span style={{ background: '#dbeafe', padding: '0 3px' }}>(skopiowano z 2026-0138)</span>
            </p>
            <p style={{ margin: '0 0 14px' }}>
              Nieruchomość położona w strefie zabudowy mieszkaniowej zgodnie z obowiązującym
              miejscowym planem zagospodarowania przestrzennego (uchwała nr <span style={{ background: A.warnSoft, padding: '0 3px' }}>XLII/356/2019</span>
              {' '}Rady Miejskiej w [wpisz] z dnia [wpisz]).
            </p>

            {/* comment bubble in margin */}
            <div style={{ position: 'absolute', left: 'calc(50% + 320px)', top: 320, width: 200, padding: 10, background: '#fffaee', border: '1px solid #f1c66c', borderRadius: 4, fontFamily: A.sans, fontSize: 11, color: A.ink2, lineHeight: 1.4 }}>
              <div style={{ fontWeight: 600, marginBottom: 2 }}>A. Komentarz</div>
              Skopiować z poprzedniego operatu? Sprawdź TERYT.
            </div>
          </div>
        </div>

        {/* status bar */}
        <div style={{ height: 26, background: '#185abd', display: 'flex', alignItems: 'center', padding: '0 14px', color: '#fff', fontFamily: A.mono, fontSize: 10.5, letterSpacing: '0.04em' }}>
          <span>Strona 7 z 42</span>
          <span style={{ marginLeft: 16 }}>Wyrazy: 12 458</span>
          <span style={{ marginLeft: 'auto', opacity: 0.85 }}>Zapisano: nigdy</span>
        </div>
      </div>

      {/* Timer card — top right */}
      <div style={{
        position: 'absolute', right: 60, top: 60,
        background: A.surface, border: `1px solid ${A.border}`,
        borderRadius: 8, padding: '14px 22px',
        boxShadow: '0 8px 24px rgba(15,23,42,.12)',
        transform: 'rotate(1.5deg)',
      }}>
        <div style={{ fontFamily: A.mono, fontSize: 11, color: A.ink3, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 6 }}>Sesja Worda</div>
        <div style={{ fontFamily: A.serif, fontSize: 42, fontWeight: 400, color: A.bad, lineHeight: 1 }}>
          <ChaosCounter />
        </div>
        <div style={{ fontFamily: A.mono, fontSize: 11.5, color: A.ink2, letterSpacing: '0.04em', marginTop: 6, fontWeight: 700 }}>1 operat · 42 strony · 3 wersje</div>
      </div>

      {/* Overlay: "Znowu te same 40 stron?" */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `rgba(15, 23, 42, ${overlayU * 0.55})`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        pointerEvents: 'none',
      }}>
        <div style={{
          opacity: overlayU * (1 - fadeOut),
          transform: `translateY(${(1 - overlayU) * 14}px) scale(${0.96 + overlayU * 0.04})`,
          textAlign: 'center',
        }}>
          <div style={{ fontFamily: A.serif, fontSize: 96, fontWeight: 400, color: '#fff', letterSpacing: '-0.025em', lineHeight: 1.0 }}>
            Znowu te same<br/><i style={{ color: '#fde68a' }}>40 stron?</i>
          </div>
          <div style={{ marginTop: 22, fontFamily: A.mono, fontSize: 14, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            · jest lepszy sposób ·
          </div>
        </div>
      </div>
    </>
  );
}

// ═══════════════════════════════════════════════ Scene 2 & 3 — Wizard + ULDK

function Scene2Wizard() {
  const { localTime } = useSprite();
  // Timeline (powolniejsze):
  //   0.8  zaczyna pisać — 26 znaków / 14 cps = ~1.9s pisania
  //   3.5  klik
  //   3.6 – 5.2  spinner
  //   5.2  success state pojawia się
  //   5.6+ kaskada pól (stagger 0.22, 7 pól = ~1.6s)
  const typing = localTime >= 0.8;
  const clicked = localTime >= 3.5;
  const spinning = localTime >= 3.6 && localTime < 5.2;
  const successPhase = localTime >= 5.2;
  const successU = clamp((localTime - 5.2) / 0.5, 0, 1);

  const fields = [
    ['Nr działki', '127/3'],
    ['Powierzchnia', '3 247 m²'],
    ['Obręb', '0024 · Stara Wieś'],
    ['Gmina', 'Brzeg Dolny'],
    ['Powiat', 'wołowski'],
    ['Województwo', 'dolnośląskie'],
    ['TERYT', '022002_5.0024.127/3'],
  ];

  // entry fade for whole scene
  const entryU = clamp(localTime / 0.5, 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, background: A.bg, opacity: entryU }}>
      <AppTopbar
        breadcrumbs={['Operaty', 'Nowy operat']}
        right={<>
          <Pill tone="ok">AI · 12 / 50</Pill>
          <div style={{ width: 30, height: 30, borderRadius: '50%', background: A.surface2, border: `1px solid ${A.border}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: A.serif, fontSize: 14, fontStyle: 'italic' }}>jk</div>
        </>}
      />
      <div style={{ display: 'flex', height: 'calc(100% - 56px)' }}>
        <AppSidebar active="operaty" />

        {/* Wizard step rail */}
        <div style={{ width: 320, borderRight: `1px solid ${A.border}`, background: A.surface, padding: '34px 28px' }}>
          <Caps style={{ marginBottom: 20 }}>Kreator · Krok 01 / 03</Caps>
          {[
            ['01', 'Adres nieruchomości', 'ULDK · auto-fill', true],
            ['02', 'Typ wyceny', 'Podejście porównawcze', false],
            ['03', 'Klient', 'Bank / osoba', false],
          ].map(([n, t, sub, active], i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 14, padding: '14px 0', borderTop: `1px solid ${A.border}` }}>
              <div style={{ width: 32, height: 32, borderRadius: '50%', border: `1px solid ${active ? A.ink : A.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: A.mono, fontSize: 12, color: active ? A.ink : A.ink4, letterSpacing: '0.04em' }}>{n}</div>
              <div>
                <div style={{ fontSize: 14, color: active ? A.ink : A.ink3, fontWeight: active ? 500 : 400 }}>{t}</div>
                <div style={{ fontSize: 11.5, color: A.ink3, fontFamily: A.mono, letterSpacing: '0.04em', marginTop: 3 }}>{sub}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Wizard body */}
        <div style={{ flex: 1, padding: '40px 64px', overflow: 'hidden', position: 'relative' }}>
          <Caps style={{ marginBottom: 14 }}>§ Krok 01 — Adres</Caps>
          <h1 style={{ fontFamily: A.serif, fontWeight: 400, fontSize: 60, letterSpacing: '-0.025em', lineHeight: 1.04, margin: '0 0 14px', color: A.ink }}>
            Skąd wycena?
          </h1>
          <p style={{ fontSize: 16, color: A.ink2, margin: '0 0 36px', maxWidth: 620 }}>
            Wpisz adres nieruchomości. Pobierzemy z ULDK GUGiK numer działki,
            powierzchnię i jednostki administracyjne.
          </p>

          {/* Address field + button */}
          <div style={{ marginBottom: 30 }}>
            <Caps style={{ marginBottom: 10 }}>Adres nieruchomości</Caps>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 220px', gap: 10, maxWidth: 1100 }}>
              <div style={{
                height: 56, border: `1.5px solid ${typing ? A.ink : A.border}`,
                background: A.surface, borderRadius: 6, padding: '0 18px',
                display: 'flex', alignItems: 'center', fontSize: 18, color: A.ink,
                fontFamily: A.sans,
              }}>
                {typing ? (
                  <TypingText text="ul. Klonowa 14, Stara Wieś" start={0.8} cps={14} />
                ) : (
                  <span style={{ color: A.ink4 }}>Wpisz adres lub identyfikator TERYT…</span>
                )}
              </div>
              <button style={{
                height: 56, padding: '0 22px', borderRadius: 6,
                background: spinning || successPhase ? A.ink : (clicked ? '#1e293b' : A.ink),
                color: '#fff', border: 'none',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                fontSize: 15, fontWeight: 500, fontFamily: A.sans,
                transform: localTime > 3.4 && localTime < 3.6 ? 'scale(0.97)' : 'scale(1)',
                transition: 'transform 0.1s',
              }}>
                {spinning ? (
                  <>
                    <Spinner size={16} color="#fff" />
                    <span>Pobieram…</span>
                  </>
                ) : successPhase ? (
                  <>
                    <Check size={16} color="#fff" stroke={2.5} />
                    <span>Pobrane</span>
                  </>
                ) : (
                  <>
                    <span style={{ fontSize: 13 }}>↓</span>
                    <span>Pobierz dane</span>
                  </>
                )}
              </button>
            </div>
          </div>

          {/* Success card with cascade */}
          {successPhase && (
            <div style={{
              maxWidth: 1100,
              border: `1px solid ${A.border}`, borderRadius: 8, background: A.surface,
              overflow: 'hidden',
              opacity: successU,
              transform: `translateY(${(1 - successU) * 16}px)`,
            }}>
              <div style={{
                padding: '14px 22px',
                background: A.okSoft,
                borderBottom: `1px solid ${A.border}`,
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <div style={{ width: 24, height: 24, borderRadius: '50%', background: A.ok, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Check size={14} color="#fff" stroke={2.5} />
                </div>
                <div style={{ fontSize: 15, color: A.ink, fontWeight: 500 }}>
                  Dane działki pobrane automatycznie
                </div>
                <div style={{ marginLeft: 'auto', fontFamily: A.mono, fontSize: 12, color: A.ink3, letterSpacing: '0.04em' }}>
                  ULDK GUGiK · 240 ms
                </div>
              </div>
              <div style={{ padding: '8px 22px' }}>
                <Sprite start={5.3} end={DUR} keepMounted>
                  <Cascade start={0} stagger={0.22} dur={0.42}>
                    {fields.map((f, i) => (
                      <div key={i} style={{
                        display: 'grid', gridTemplateColumns: '260px 1fr',
                        alignItems: 'center', padding: '14px 0',
                        borderTop: i ? `1px solid ${A.border}` : 'none',
                      }}>
                        <span style={{ fontSize: 14, color: A.ink3 }}>{f[0]}</span>
                        <span style={{ fontFamily: A.mono, fontSize: 16, color: A.ink, letterSpacing: '0.02em' }}>
                          {f[1]}
                        </span>
                      </div>
                    ))}
                  </Cascade>
                </Sprite>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════ Scene 4 — Kompozytor + Blokoteka drag

function Scene4Kompozytor() {
  const { localTime } = useSprite();
  // Timeline (powolniejsze — to jest hero-moment ze zmiennymi):
  //   0.9  ghost lifts off
  //   1.0 – 2.4  drag motion (1.4s) → drop in editor
  //   2.5  drop indicator znika, blok dropped
  //   2.8  akapit pojawia się z {{vars}}
  //   3.4 / 3.9 / 4.4 / 4.9 — zmienne podmieniają się (0.5s odstępy)

  const entryU = clamp(localTime / 0.5, 0, 1);
  const dragU = clamp((localTime - 0.9) / 1.5, 0, 1);
  const dragEased = Easing.easeInOutCubic(dragU);
  const dropped = localTime >= 2.5;
  const paragraphU = clamp((localTime - 2.8) / 0.5, 0, 1);

  // ghost block path: from right panel (~x=1620, y=440) to editor (~x=820, y=560)
  const ghostX = 1620 + (820 - 1620) * dragEased;
  const ghostY = 440 + (560 - 440) * dragEased;
  const ghostRot = -2 + dragEased * 3;
  const ghostScale = dragU > 0 && dragU < 1 ? 1.04 : 1;
  const showGhost = localTime >= 0.85 && localTime < 2.55;

  // blok in panel: "lifts" off when picked
  const blokOpacity = localTime >= 0.85 && localTime < 2.55 ? 0.35 : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, background: A.bg, opacity: entryU }}>
      <AppTopbar
        breadcrumbs={['Operaty', '2026-0142', 'Kompozytor']}
        right={<>
          <Pill tone="ok">Autosave · 09:14</Pill>
        </>}
      />
      <div style={{ display: 'flex', height: 'calc(100% - 56px)' }}>
        <AppSidebar active="operaty" />

        {/* Structure col */}
        <div style={{ width: 270, borderRight: `1px solid ${A.border}`, background: A.surface, padding: '18px 16px', overflow: 'hidden' }}>
          <Caps style={{ marginBottom: 4 }}>Struktura</Caps>
          <div style={{ fontFamily: A.serif, fontSize: 17, marginBottom: 14, color: A.ink }}>
            2026-0142 <span style={{ fontStyle: 'italic', color: A.ink3 }}>· Stara Wieś</span>
          </div>
          {[
            ['—', 'Strona tytułowa'],
            ['—', 'Spis treści'],
            ['§1', 'Cel wyceny'],
            ['§2', 'Opis rynku'],
            ['§3', 'Opis działki', true],
            ['§4', 'RCN — transakcje'],
            ['§5', 'Załącznik mapowy'],
            ['§6', 'Analiza wag'],
            ['§7', 'Wartość rynkowa'],
            ['§8', 'Klauzule'],
          ].map(([n, t, active], i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '34px 1fr', alignItems: 'center', gap: 6,
              padding: '8px 8px', borderRadius: 4, fontSize: 13.5,
              background: active ? A.surface2 : 'transparent',
              color: active ? A.ink : A.ink2,
              fontWeight: active ? 500 : 400,
            }}>
              <span style={{ fontFamily: A.mono, fontSize: 10.5, color: active ? A.ink : A.ink4, letterSpacing: '0.04em' }}>{n}</span>
              <span>{t}</span>
            </div>
          ))}
        </div>

        {/* Editor */}
        <div style={{ flex: 1, padding: '18px 30px', overflow: 'hidden', position: 'relative', background: A.bg, display: 'flex', flexDirection: 'column' }}>
          {/* Section header */}
          <div style={{ marginBottom: 12 }}>
            <div style={{ fontFamily: A.serif, fontSize: 18, fontWeight: 500, color: A.ink, letterSpacing: '-0.01em' }}>Opis działki i otoczenia</div>
            <div style={{ display: 'flex', gap: 10, marginTop: 4, fontFamily: A.mono, fontSize: 10, color: A.ink4 }}>
              <span style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>Sekcja tekstowa</span>
              <span>Niezapisane zmiany</span>
            </div>
          </div>

          {/* RTE editor frame */}
          <div style={{ flex: 1, border: `1px solid ${A.border}`, borderRadius: 6, background: A.surface, display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>
            {/* Toolbar */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 3, padding: '6px 10px', borderBottom: `1px solid ${A.border}`, background: A.surface2 }}>
              {['↶', '↷'].map((g, i) => <span key={i} style={{ height: 28, minWidth: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 3, fontSize: 13, color: A.ink2 }}>{g}</span>)}
              <span style={{ width: 1, height: 18, background: A.border, margin: '0 3px' }} />
              <span style={{ height: 28, minWidth: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 3, background: A.ink, color: '#fff' }}><b style={{ fontSize: 13 }}>B</b></span>
              <span style={{ height: 28, minWidth: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 3, color: A.ink2 }}><i style={{ fontFamily: A.serif, fontSize: 13 }}>I</i></span>
              <span style={{ height: 28, minWidth: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 3, color: A.ink2, textDecoration: 'underline' }}>U</span>
              <span style={{ height: 28, minWidth: 28, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 3, color: A.ink2, textDecoration: 'line-through' }}>S</span>
              <span style={{ width: 1, height: 18, background: A.border, margin: '0 3px' }} />
              <span style={{ height: 28, padding: '0 10px', display: 'inline-flex', alignItems: 'center', gap: 10, borderRadius: 3, border: `1px solid ${A.border}`, background: A.surface, color: A.ink2, fontSize: 12.5 }}>Akapit ▾</span>
              <span style={{ height: 28, padding: '0 10px', display: 'inline-flex', alignItems: 'center', gap: 8, borderRadius: 3, border: `1px solid ${A.border}`, background: A.surface, color: A.ink2, fontSize: 12.5 }}>15 px ▾</span>
              <span style={{ width: 1, height: 18, background: A.border, margin: '0 3px' }} />
              {['A', '•≡', '1.≡', '🔗', '⊞'].map((g, i) => <span key={i} style={{ height: 28, minWidth: 28, padding: '0 6px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', borderRadius: 3, fontSize: 13, color: A.ink2 }}>{g}</span>)}
            </div>

            {/* Content (RTE body — sans) */}
            <div style={{ flex: 1, padding: '22px 28px', fontFamily: A.sans, fontSize: 15, lineHeight: 1.75, color: A.ink, overflow: 'hidden', position: 'relative' }}>
              <p style={{ margin: '0 0 14px' }}>
                Przedmiotowa nieruchomość gruntowa położona w obrębie 0024 Stara Wieś. Klient banku zlecił sporządzenie wyceny do celów zabezpieczenia kredytu hipotecznego.
              </p>
              {dropped && (
                <p style={{ margin: '0 0 14px', opacity: paragraphU, transform: `translateY(${(1 - paragraphU) * 12}px)` }}>
                  Działka ewidencyjna o numerze{' '}
                  <Variable before="{{nr_działki}}" after="127/3" swapAt={3.4} />, położona w obrębie{' '}
                  <Variable before="{{obręb}}" after="0024 Stara Wieś" swapAt={3.9} />, gmina{' '}
                  <Variable before="{{gmina}}" after="Brzeg Dolny" swapAt={4.4} />. Powierzchnia gruntu wynosi{' '}
                  <Variable before="{{m²}}" after="3 247 m²" swapAt={4.9} />.
                </p>
              )}

              {/* Drop indicator */}
              {localTime >= 1.9 && localTime < 2.55 && (
                <div style={{
                  position: 'absolute', left: 24, top: 96, right: 36,
                  height: 60, border: `2px dashed ${A.ink}`, borderRadius: 6,
                  background: 'rgba(15,23,42,0.04)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: A.mono, fontSize: 12, color: A.ink2, letterSpacing: '0.06em', textTransform: 'uppercase',
                }}>
                  Upuść blok tutaj
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Blokoteka col */}
        <div style={{ width: 320, borderLeft: `1px solid ${A.border}`, background: A.surface, padding: '18px 16px', overflow: 'hidden' }}>
          <Caps style={{ marginBottom: 10 }}>Blokoteka · 86</Caps>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, height: 34, padding: '0 12px', border: `1px solid ${A.border}`, borderRadius: 4, fontSize: 12.5, color: A.ink3, marginBottom: 14 }}>
            🔍 <span>Szukaj…</span>
          </div>

          <Caps style={{ marginBottom: 8, paddingLeft: 4 }}>Lokalizacja</Caps>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <BlokCard
              title="Opis działki — wieś, MN"
              desc="Działka o regularnym kształcie, w otoczeniu zabudowy MN…"
              tags={['{{nr_działki}}', '{{m²}}', '{{gmina}}']}
              highlight={localTime >= 0.5 && localTime < 1.0}
              opacity={blokOpacity}
            />            <BlokCard
              title="Dojazd — droga gminna"
              desc="Dojazd drogą gminną o nawierzchni asfaltowej…"
              tags={['{{gmina}}']}
            />
            <BlokCard
              title="Otoczenie — strefa wiejska"
              desc="Zabudowa rozproszona, niska intensywność…"
              tags={['{{wojew.}}']}
            />
          </div>
        </div>
      </div>

      {/* Drag ghost — sits above everything */}
      {showGhost && (
        <div style={{
          position: 'absolute',
          left: ghostX, top: ghostY,
          width: 280,
          transform: `translate(-50%, -50%) rotate(${ghostRot}deg) scale(${ghostScale})`,
          opacity: 0.95,
          pointerEvents: 'none',
          zIndex: 100,
          filter: 'drop-shadow(0 16px 30px rgba(15,23,42,0.25))',
        }}>
          <BlokCard
            title="Opis działki — wieś, MN"
            desc="Działka o regularnym kształcie, w otoczeniu zabudowy MN…"
            tags={['{{nr_działki}}', '{{m²}}', '{{gmina}}']}
            highlight
          />
        </div>
      )}
    </div>
  );
}

function BlokCard({ title, desc, tags = [], highlight, opacity = 1 }) {
  return (
    <div style={{
      padding: '11px 13px',
      border: `1px solid ${highlight ? A.ink : A.border}`,
      borderRadius: 5, background: A.surface,
      boxShadow: highlight ? `0 0 0 1px ${A.ink}` : 'none',
      opacity,
      transition: 'opacity 0.2s, border-color 0.2s',
    }}>
      <div style={{ fontSize: 13, color: A.ink, fontWeight: 500, marginBottom: 4 }}>{title}</div>
      <div style={{ fontSize: 11.5, color: A.ink3, lineHeight: 1.45, marginBottom: 7 }}>{desc}</div>
      <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
        {tags.map((t, i) => (
          <span key={i} style={{ fontFamily: A.mono, fontSize: 10, color: A.warn, padding: '1px 5px', background: A.warnSoft, border: `1px solid rgba(217,119,6,.25)`, borderRadius: 2 }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════ Scene 5 — RCN auto-fill

function Scene5RCN() {
  const { localTime } = useSprite();
  const entryU = clamp(localTime / 0.6, 0, 1);

  const ATTRS = ['Lokaliz.', 'Stan', 'Dojazd', 'Otoczen.', 'Kształt'];
  const tx = [
    { addr: 'Klonowa 14, Stara Wieś',       dz: '127/3', area: 3247, cena: 516300, ppm: 159, c: [0, 0, 0, 0, 0],     adj: 159 },
    { addr: 'Wiosenna 7, Stara Wieś',       dz: '78/2',  area: 2940, cena: 512000, ppm: 174, c: [-3, -2, 0, -2, -1], adj: 160 },
    { addr: 'Polna 14, Pogalewo Wielkie',   dz: '142/1', area: 3102, cena: 498500, ppm: 161, c: [-1, 0, -1, 0, 0],   adj: 158 },
    { addr: 'Słoneczna 3, Stara Wieś',      dz: '23/4',  area: 2825, cena: 460000, ppm: 163, c: [0, -1, 0, 0, 0],    adj: 161 },
    { addr: 'Spokojna 22, Pogalewo Wielkie', dz: '88/12', area: 2750, cena: 485000, ppm: 176, c: [-5, -3, 0, -2, -1], adj: 157 },
    { addr: 'Brzozowa 8, Stara Wieś',       dz: '56/3',  area: 2680, cena: 438000, ppm: 163, c: [-1, -1, 0, 0, -1],  adj: 160 },
  ];
  const KPIS = [
    { k: 'Cena średnia / m²', v: '166', u: 'PLN', n: 'średnia z 6 transakcji' },
    { k: 'Suma korekt', v: '−4.2', u: '%', n: 'średnia korekta cech' },
    { k: 'Cena skoryg. / m²', v: '159', u: 'PLN', n: 'po korektach cech' },
    { k: 'Wartość rynkowa', v: '516 300', u: 'PLN', n: '3 247 m² × 159', big: true },
  ];
  const corr = (v, foot) => {
    const num = foot ? parseFloat(String(v).replace('−', '-')) : v;
    const isZero = foot ? (v === '—' || num === 0) : v === 0;
    const color = isZero ? A.ink4 : num > 0 ? A.ok : A.bad;
    const disp = foot ? v : (v === 0 ? '—' : v > 0 ? `+${v}` : String(v));
    const bg = foot ? 'transparent' : (v > 0 ? 'rgba(21,128,61,0.08)' : v < 0 ? 'rgba(153,27,27,0.08)' : 'transparent');
    return <span style={{ fontFamily: A.mono, fontSize: 11.5, color, padding: foot ? 0 : '2px 6px', borderRadius: 3, background: bg }}>{disp}</span>;
  };
  const cols = '26px 1.5fr 78px 56px 64px 48px 48px 48px 48px 48px 64px';

  return (
    <div style={{ position: 'absolute', inset: 0, background: `rgba(15,23,42,${entryU * 0.5})` }}>
      <div style={{
        position: 'absolute', left: 90, top: 54, right: 90, bottom: 54,
        background: A.surface, border: `1px solid ${A.border}`, borderRadius: 10,
        boxShadow: '0 30px 80px rgba(15,23,42,.3)', overflow: 'hidden',
        opacity: entryU, transform: `translateY(${(1 - entryU) * 24}px)`,
        display: 'flex', flexDirection: 'column',
      }}>
        {/* header */}
        <div style={{ height: 62, borderBottom: `1px solid ${A.border}`, padding: '0 28px', display: 'flex', alignItems: 'center', flexShrink: 0 }}>
          <div>
            <Caps>RCN · korygowanie ceny średniej</Caps>
            <div style={{ fontFamily: A.serif, fontSize: 21, letterSpacing: '-0.01em', marginTop: 2 }}>Tabela RCN — transakcje porównawcze</div>
          </div>
          <div style={{ marginLeft: 'auto' }}>
            <Pill tone="ok">
              <Sprite start={0} end={DUR} keepMounted>Znaleziono <CountUp from={0} to={6} start={0.6} end={1.4} /> transakcji</Sprite>
            </Pill>
          </div>
        </div>

        <div style={{ flex: 1, overflow: 'hidden', padding: '20px 28px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Results bar */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', border: `1px solid ${A.ink}`, borderRadius: 5, background: A.surface, overflow: 'hidden', flexShrink: 0 }}>
            {KPIS.map((s, i) => (
              <div key={i} style={{ padding: '16px 18px', borderLeft: i ? `1px solid ${A.border}` : 'none', background: s.big ? A.ink : A.surface, color: s.big ? A.surface : A.ink }}>
                <Caps style={{ marginBottom: 8, color: s.big ? 'rgba(203,213,225,0.85)' : A.ink3 }}>{s.k}</Caps>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                  <span style={{ fontFamily: A.serif, fontSize: 28, letterSpacing: '-0.02em', lineHeight: 1 }}>{s.v}</span>
                  <span style={{ fontFamily: A.mono, fontSize: 12, color: s.big ? 'rgba(203,213,225,0.85)' : A.ink3 }}>{s.u}</span>
                </div>
                <div style={{ marginTop: 8, fontSize: 11, color: s.big ? 'rgba(203,213,225,0.85)' : A.ink4, fontFamily: A.mono, letterSpacing: '0.03em' }}>{s.n}</div>
              </div>
            ))}
          </div>

          {/* Tabs */}
          <div style={{ display: 'flex', gap: 2, borderBottom: `1px solid ${A.border}`, flexShrink: 0 }}>
            {[['Transakcje', '6'], ['Korekty'], ['Metoda i parametry'], ['Narracja']].map(([l, b], i) => (
              <div key={i} style={{ padding: '8px 14px', fontSize: 13, fontWeight: i === 0 ? 600 : 400, color: i === 0 ? A.ink : A.ink3, borderBottom: i === 0 ? `2px solid ${A.ink}` : '2px solid transparent', marginBottom: -1 }}>
                {l}{b && <span style={{ marginLeft: 6, fontFamily: A.mono, fontSize: 11, color: A.ink4 }}>{b}</span>}
              </div>
            ))}
          </div>

          {/* Table */}
          <div style={{ flex: 1, border: `1px solid ${A.border}`, borderRadius: 5, background: A.surface, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'grid', gridTemplateColumns: cols, padding: '10px 14px', background: A.surface2, borderBottom: `1px solid ${A.border}`, fontFamily: A.mono, fontSize: 9.5, color: A.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', alignItems: 'center' }}>
              <span>#</span><span>Adres / nr</span><span style={{ textAlign: 'right' }}>Cena</span><span style={{ textAlign: 'right' }}>m²</span><span style={{ textAlign: 'right' }}>Cena/m²</span>
              {ATTRS.map((a, i) => <span key={i} style={{ textAlign: 'center' }}>{a}</span>)}<span style={{ textAlign: 'right' }}>Skoryg.</span>
            </div>
            <Sprite start={1.4} end={DUR} keepMounted>
              <Cascade start={0} stagger={0.22} dur={0.4}>
                {tx.map((r, idx) => (
                  <div key={idx} style={{ display: 'grid', gridTemplateColumns: cols, padding: '9px 14px', borderBottom: `1px solid ${A.border}`, alignItems: 'center', fontSize: 12 }}>
                    <span style={{ width: 20, height: 20, borderRadius: '50%', border: `1px solid ${A.ink}`, color: A.ink, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: A.mono, fontSize: 10 }}>{idx + 1}</span>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, color: A.ink, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>ul. {r.addr}</div>
                      <div style={{ fontFamily: A.mono, fontSize: 10, color: A.ink3 }}>dz. {r.dz}</div>
                    </div>
                    <span style={{ fontFamily: A.mono, color: A.ink2, textAlign: 'right' }}>{r.cena.toLocaleString('pl-PL')}</span>
                    <span style={{ fontFamily: A.mono, color: A.ink3, textAlign: 'right' }}>{r.area.toLocaleString('pl-PL')}</span>
                    <span style={{ fontFamily: A.mono, textAlign: 'right', fontWeight: 500 }}>{r.ppm}</span>
                    {r.c.map((v, i) => <span key={i} style={{ textAlign: 'center' }}>{corr(v)}</span>)}
                    <span style={{ fontFamily: A.mono, textAlign: 'right', fontWeight: 600 }}>{r.adj}</span>
                  </div>
                ))}
              </Cascade>
            </Sprite>
            {/* result row */}
            <Sprite start={3.1} end={DUR} keepMounted>
              <div style={{ display: 'grid', gridTemplateColumns: cols, padding: '11px 14px', borderTop: `2px solid ${A.ink}`, background: A.surface2, alignItems: 'center', fontFamily: A.mono, fontSize: 11.5 }}>
                <span></span>
                <span style={{ fontSize: 9.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: A.ink3 }}>Średnia / wynik</span>
                <span style={{ textAlign: 'right', color: A.ink3 }}>484 967</span>
                <span style={{ textAlign: 'right', color: A.ink3 }}>2 924</span>
                <span style={{ textAlign: 'right', fontWeight: 500 }}>166</span>
                {['−1.7', '−1.2', '−0.2', '−0.7', '−0.5'].map((v, i) => <span key={i} style={{ textAlign: 'center' }}>{corr(v, true)}</span>)}
                <span style={{ textAlign: 'right', fontWeight: 600, color: A.ink }}>159</span>
              </div>
            </Sprite>
          </div>
        </div>
      </div>
    </div>
  );
}

function MarkerPin({ num, startAt, x, y }) {
  const { localTime } = useSprite();
  const u = clamp((localTime - startAt) / 0.4, 0, 1);
  const eased = Easing.easeOutBack(u);
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      transform: `translate(-50%, -100%) scale(${eased})`,
      opacity: clamp(u * 2, 0, 1),
      pointerEvents: 'none',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: '50%',
        background: A.ink, color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: A.mono, fontSize: 13, fontWeight: 600,
        border: '2.5px solid #fff',
        boxShadow: '0 4px 10px rgba(15,23,42,.35)',
      }}>{num}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════ Scene 6 — Export + CTA

function Scene6Export() {
  const { localTime } = useSprite();
  const entryU = clamp(localTime / 0.5, 0, 1);

  // Pages cascade in from left (slower stagger)
  const pages = [
    { skew: -4, dx: -100, dy: 30 },
    { skew: -2, dx: -50,  dy: 15 },
    { skew: 0,  dx: 0,    dy: 0 },
    { skew: 2,  dx: 50,   dy: -15 },
    { skew: 4,  dx: 100,  dy: -30 },
  ];

  // CTA pulse
  const ctaPulse = 1 + Math.sin(localTime * 3.5) * 0.018;
  const ctaU = clamp((localTime - 3.6) / 0.6, 0, 1);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse at 50% 60%, ${A.cream} 0%, #e6e2d5 100%)`,
      opacity: entryU,
      overflow: 'hidden',
    }}>
      {/* Stack of A4 pages — slides in from left */}
      <div style={{
        position: 'absolute', left: '50%', top: 100,
        transform: 'translateX(-50%)',
        width: 1200, height: 540,
      }}>
        {pages.map((p, i) => {
          const u = clamp((localTime - 0.2 - i * 0.16) / 0.55, 0, 1);
          const eased = Easing.easeOutBack(u);
          return (
            <div key={i} style={{
              position: 'absolute',
              left: `calc(50% + ${p.dx}px)`,
              top: 60 + p.dy,
              width: 360, height: 480,
              background: A.surface,
              border: `1px solid ${A.border}`,
              boxShadow: '0 20px 50px rgba(15,23,42,.18), 0 4px 10px rgba(15,23,42,.08)',
              transform: `translateX(-50%) rotate(${p.skew * eased}deg) scale(${0.7 + eased * 0.3})`,
              opacity: clamp(u * 1.5, 0, 1),
              padding: '32px 28px',
              zIndex: i === 2 ? 10 : 5,
            }}>
              {/* mini page content */}
              <div style={{ fontFamily: A.mono, fontSize: 8, color: A.ink4, letterSpacing: '0.08em', marginBottom: 16 }}>2026-0142 · KLONOWA 14</div>
              <div style={{ fontFamily: A.serif, fontSize: 14, color: A.ink, marginBottom: 12 }}>{i === 0 ? 'Strona tytułowa' : i === 4 ? 'Klauzule' : `§${i} ${['', 'Cel', 'Opis działki', 'RCN', ''][i]}`}</div>
              {[...Array(i === 0 ? 4 : 18)].map((_, j) => (
                <div key={j} style={{
                  height: 4,
                  background: j < 3 ? A.ink3 : A.ink4,
                  marginBottom: j === 2 && i === 0 ? 20 : 6,
                  width: `${75 + (j * 7) % 25}%`,
                  opacity: 0.6,
                }} />
              ))}
              <div style={{ position: 'absolute', bottom: 14, left: 28, right: 28, display: 'flex', justifyContent: 'space-between', fontFamily: A.mono, fontSize: 8, color: A.ink4 }}>
                <span>J. Kowalski</span>
                <span>{i * 8 + 1} / 38</span>
              </div>
            </div>
          );
        })}

        {/* DOCX badge — appears centered on top of stack */}
        {localTime >= 1.4 && (
          <div style={{
            position: 'absolute', left: '50%', top: 230,
            transform: `translate(-50%, 0) scale(${Easing.easeOutBack(clamp((localTime - 1.4) / 0.6, 0, 1))})`,
            background: A.ok, color: '#fff',
            padding: '14px 22px', borderRadius: 999,
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontFamily: A.sans, fontSize: 18, fontWeight: 500,
            boxShadow: '0 12px 30px rgba(21,128,61,.4)',
            zIndex: 20,
          }}>
            <Check size={20} color="#fff" stroke={2.5} />
            DOCX · 38 stron · gotowe
          </div>
        )}
      </div>

      {/* Before / after comparison — qualitative */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 660,
        display: 'flex', justifyContent: 'center', alignItems: 'stretch', gap: 60,
        opacity: clamp((localTime - 1.4) / 0.5, 0, 1),
      }}>
        <div style={{ textAlign: 'center', maxWidth: 360 }}>
          <Caps style={{ marginBottom: 10, color: A.bad }}>Przed · w Wordzie</Caps>
          <div style={{
            fontFamily: A.serif, fontSize: 46, color: A.bad,
            letterSpacing: '-0.015em', lineHeight: 1.05,
            fontStyle: 'italic', fontWeight: 400,
          }}>
            Cały tydzień
          </div>
        </div>

        <div style={{ alignSelf: 'center', fontFamily: A.mono, fontSize: 24, color: A.ink3, letterSpacing: '0.06em' }}>→</div>

        <div style={{ textAlign: 'center', maxWidth: 360 }}>
          <Caps style={{ marginBottom: 10, color: A.ok }}>W Szacowni</Caps>
          <div style={{
            fontFamily: A.serif, fontSize: 46, color: A.ok,
            letterSpacing: '-0.015em', lineHeight: 1.05,
            fontStyle: 'italic', fontWeight: 400,
          }}>
            Jedno popołudnie
          </div>
        </div>
      </div>

      {/* CTA */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 870,
        textAlign: 'center',
        opacity: ctaU,
        transform: `translateY(${(1 - ctaU) * 16}px)`,
      }}>
        <div style={{ fontFamily: A.serif, fontSize: 56, fontWeight: 400, letterSpacing: '-0.025em', color: A.ink, marginBottom: 22, lineHeight: 1 }}>
          Operat jak z <i>klocków.</i>
        </div>
        <button onClick={() => { window.location.href = 'Strona główna.html'; }} style={{
          padding: '20px 38px', height: 'auto',
          background: A.ink, color: '#fff', border: 'none', borderRadius: 8,
          fontFamily: A.sans, fontSize: 18, fontWeight: 500,
          letterSpacing: '-0.005em',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          transform: `scale(${ctaPulse})`,
          boxShadow: '0 14px 40px rgba(15,23,42,.32), 0 4px 10px rgba(15,23,42,.18)',
          cursor: 'pointer',
          pointerEvents: 'auto',
        }}>
          <span>Załóż darmowe — 1 operat gratis</span>
          <span style={{ fontSize: 18, lineHeight: 1 }}>→</span>
        </button>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════ Whip cut transition

function WhipCut({ at, dur = 0.18 }) {
  const time = useTime();
  const u = clamp((time - at) / dur, 0, 1);
  // bell curve: peak at u=0.5
  const bell = Math.sin(u * Math.PI);
  if (u <= 0 || u >= 1) return null;
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: '#fff',
      opacity: bell * 0.85,
      zIndex: 1000,
      mixBlendMode: 'screen',
    }} />
  );
}

// ═══════════════════════════════════════════════ Cursor path (global)

const cursorPath = [
  // Scene 1: chaos (0–4s)
  { t: 0.0, x: 720, y: 460, hide: true },
  { t: 0.35, x: 720, y: 460 },
  { t: 0.9, x: 1280, y: 360 },
  { t: 1.5, x: 540, y: 600 },
  { t: 2.0, x: 1100, y: 280 },
  { t: 2.5, x: 820, y: 720 },
  { t: 3.0, x: 1400, y: 480 },
  { t: 3.6, x: 1400, y: 480, hide: true },

  // Scene 2: wizard (5–13s)
  // cursor appears in address field
  { t: 5.5, x: 800, y: 480, hide: true },
  { t: 5.7, x: 800, y: 480 },
  // typing 5.8 – 7.7, cursor sits in field
  { t: 7.9, x: 800, y: 480 },
  { t: 8.4, x: 1480, y: 480 },        // arrive at button
  { t: 8.5, x: 1480, y: 480, click: true },
  // cursor stays for spinner; ULDK cascade plays 10.3 – 12.5
  { t: 10.0, x: 1480, y: 480 },
  { t: 10.8, x: 900, y: 720 },
  { t: 12.0, x: 700, y: 880 },
  { t: 12.8, x: 700, y: 880, hide: true },

  // Scene 4: kompozytor (13–17.5s)
  { t: 13.2, x: 1680, y: 460, hide: true },
  { t: 13.5, x: 1680, y: 460 },
  { t: 13.6, x: 1680, y: 460, click: true },
  // drag motion 13.9 – 15.4
  { t: 13.9, x: 1680, y: 460 },
  { t: 15.4, x: 820, y: 580 },
  { t: 15.5, x: 820, y: 580, click: true },
  { t: 17.0, x: 820, y: 580 },
  { t: 17.4, x: 820, y: 580, hide: true },

  // Scene 5: RCN (17.5–21.5s) — cursor mostly hidden, viewer looks at data
  { t: 18.0, x: 200, y: 200, hide: true },
  { t: 20.5, x: 480, y: 880, hide: true },

  // Scene 6: CTA (21.5–27s)
  { t: 24.5, x: 960, y: 920, hide: true },
  { t: 24.9, x: 960, y: 920 },          // appear at CTA
  { t: 25.4, x: 960, y: 920, click: true },
  { t: 27.0, x: 960, y: 920 },
];

// ═══════════════════════════════════════════════ AnimRoot

function AnimRoot() {
  const time = useTime();
  // expose timestamp as data-screen-label for commenting
  React.useEffect(() => {
    const root = document.querySelector('[data-anim-root]');
    if (root) {
      const sec = Math.floor(time);
      root.setAttribute('data-screen-label', `t=${sec}s`);
    }
  }, [Math.floor(time)]);

  return (
    <div data-anim-root style={{ position: 'absolute', inset: 0 }}>
      {/* Scenes — each Sprite gates its scene window */}
      <Sprite start={0}    end={5.05}>  <Scene1Word /> </Sprite>
      <Sprite start={5.0}  end={13.05}> <Scene2Wizard /> </Sprite>
      <Sprite start={13.0} end={17.55}> <Scene4Kompozytor /> </Sprite>
      <Sprite start={17.5} end={21.55}> <Scene5RCN /> </Sprite>
      <Sprite start={21.5} end={DUR}>   <Scene6Export /> </Sprite>

      {/* Whip cuts at scene boundaries */}
      <WhipCut at={4.92} />
      <WhipCut at={12.92} />
      <WhipCut at={17.42} />
      <WhipCut at={21.42} />

      {/* Global cursor */}
      <Cursor path={cursorPath} />
    </div>
  );
}

Object.assign(window, { DUR, AnimRoot });