/* Sections below hero — palette driven by CSS variables, switchable via Tweaks */

const PALETTES = {
  originalCream: {
    label: 'Original Cream',
    bg: '#f4ede4', panel: '#ebe0cc', panelDeep: '#e0d2b8',
    ink: '#2b1f17', ink2: '#5c4936', muted: '#8a7565',
    border: '#d6c5a8',
    accent: '#c87a52', accentDeep: '#a85a32',
    cream: '#faf5e9',
    dark: '#1a120c', darkPanel: '#241810',
    glowRgb: '200,122,82',
  },
  midnight: {
    label: 'Midnight Cinema',
    bg: '#eef0f2', panel: '#e3e7eb', panelDeep: '#d3d9df',
    ink: '#0f1620', ink2: '#3a4554', muted: '#7a8694',
    border: '#cdd4dc',
    accent: '#d98a5c', accentDeep: '#b86a3e',
    cream: '#f7f9fb',
    dark: '#0c1118', darkPanel: '#141b25',
    glowRgb: '217,138,92',
  },
  midnightWarm: {
    label: 'Midnight · Warm Pearl',
    bg: '#f3ede2', panel: '#ebe3d4', panelDeep: '#dcd1bd',
    ink: '#0f1620', ink2: '#3a4554', muted: '#8a7e6b',
    border: '#dcd2bf',
    accent: '#d98a5c', accentDeep: '#b86a3e',
    cream: '#faf5eb',
    dark: '#0c1118', darkPanel: '#141b25',
    glowRgb: '217,138,92',
  },
  midnightLinen: {
    label: 'Midnight · Cool Linen',
    bg: '#ece5d8', panel: '#e0d8c8', panelDeep: '#cec3b0',
    ink: '#0f1620', ink2: '#3a4554', muted: '#8a826f',
    border: '#d2c9b6',
    accent: '#d98a5c', accentDeep: '#b86a3e',
    cream: '#f5efe2',
    dark: '#0c1118', darkPanel: '#141b25',
    glowRgb: '217,138,92',
  },
  midnightSmoky: {
    label: 'Midnight · Smoky Sand',
    bg: '#e8e1d3', panel: '#dcd4c3', panelDeep: '#c8bfac',
    ink: '#0f1620', ink2: '#3a4554', muted: '#86806f',
    border: '#cec5b1',
    accent: '#d98a5c', accentDeep: '#b86a3e',
    cream: '#f1ebdd',
    dark: '#0c1118', darkPanel: '#141b25',
    glowRgb: '217,138,92',
  },
  olive: {
    label: 'Olive & Bone',
    bg: '#f1ede2', panel: '#e3decf', panelDeep: '#d2ccb8',
    ink: '#1f2a1c', ink2: '#4a5740', muted: '#8a8a72',
    border: '#cfc9b3',
    accent: '#c46b3f', accentDeep: '#9c4f28',
    cream: '#f7f4ea',
    dark: '#1c2419', darkPanel: '#252e21',
    glowRgb: '196,107,63',
  },
  plum: {
    label: 'Plum & Ivory',
    bg: '#f3eee8', panel: '#e9e0d6', panelDeep: '#dccfc1',
    ink: '#2a1c2c', ink2: '#4f3d52', muted: '#8a7a8a',
    border: '#dfd2c5',
    accent: '#b8895a', accentDeep: '#8e6035', /* brass */
    cream: '#faf6ee',
    dark: '#241828', darkPanel: '#2e2034',
    glowRgb: '184,137,90',
  },
  forest: {
    label: 'Forest & Sand',
    bg: '#ece5d4', panel: '#dfd5be', panelDeep: '#cec1a3',
    ink: '#1a2a23', ink2: '#3b4d44', muted: '#7e8c80',
    border: '#c9bfa6',
    accent: '#c8694a', accentDeep: '#984829',
    cream: '#f4eedd',
    dark: '#0f1d18', darkPanel: '#172921',
    glowRgb: '200,105,74',
  },
  slate: {
    label: 'Mahogany & Linen',
    bg: '#eae4dc', panel: '#ddd4c8', panelDeep: '#cabfaf',
    ink: '#1d1612', ink2: '#3a2f28', muted: '#857669',
    border: '#cfc3b3',
    accent: '#8b4a2b', accentDeep: '#6b3518', /* deep cognac/mahogany */
    cream: '#f5ede1',
    dark: '#1a1410', darkPanel: '#231b15',
    glowRgb: '139,74,43',
  },
};

window.OW_PALETTES = PALETTES;

const SERIF = '"Instrument Serif", serif';
const SANS = '"Inter", system-ui, sans-serif';

/* helpers — colors come from CSS vars, set on the section root via setPalette */
const V = {
  bg: 'var(--ow-bg)',
  panel: 'var(--ow-panel)',
  panelDeep: 'var(--ow-panelDeep)',
  ink: 'var(--ow-ink)',
  ink2: 'var(--ow-ink2)',
  muted: 'var(--ow-muted)',
  border: 'var(--ow-border)',
  accent: 'var(--ow-accent)',
  accentDeep: 'var(--ow-accentDeep)',
  cream: 'var(--ow-cream)',
  dark: 'var(--ow-dark)',
  darkPanel: 'var(--ow-darkPanel)',
  glow: 'rgba(var(--ow-glow-rgb), 0.22)',
};

const KEYFRAMES = `
@keyframes ow-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ow-glow-rgb), 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(var(--ow-glow-rgb), 0); }
}
@keyframes ow-pulse-soft {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes ow-shimmer {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%)  skewX(-18deg); }
}
@keyframes ow-stars-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.ow-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s, background .35s; position: relative; }
.ow-card-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; overflow: hidden; border-radius: inherit; transition: opacity .3s; z-index: 0; }
.ow-card-glow::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(var(--ow-glow-rgb), 0.20), transparent 55%);
}
.ow-card:hover .ow-card-glow { opacity: 1; }
.ow-card > *:not(.ow-card-glow) { position: relative; z-index: 1; }
.ow-card:hover { transform: translateY(-4px); }
.ow-step { position: relative; transition: background .35s; }
.ow-step .ow-step-bar { transform-origin: left center; transform: scaleX(0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ow-step:hover .ow-step-bar { transform: scaleX(1); }
.ow-step:hover .ow-step-num { color: var(--ow-accent); }
.ow-step .ow-step-num { transition: color .35s; }
.ow-cta-btn { position: relative; overflow: hidden; transition: transform .2s, box-shadow .25s; }
.ow-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,0.18); }
.ow-cta-btn .ow-cta-shine {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  pointer-events: none; transform: translateX(-120%) skewX(-18deg);
}
.ow-cta-btn:hover .ow-cta-shine { animation: ow-shimmer 0.9s ease-out; }
.ow-faq-row { transition: background .25s; }
.ow-faq-row:hover { background: rgba(var(--ow-glow-rgb), 0.05); }
.ow-occ:hover .ow-occ-arrow { transform: translateX(6px); opacity: 1; }
.ow-occ-arrow { transition: transform .3s, opacity .3s; opacity: 0; }
.ow-pulse-dot { animation: ow-pulse-dot 1.8s infinite; }
.ow-twinkle { animation: ow-stars-twinkle 2.4s ease-in-out infinite; }
.ow-pkg { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.ow-pkg:hover { transform: translateY(-6px); }
.ow-link { transition: color .2s; }
.ow-link:hover { color: var(--ow-accent); }
.ow-sections { transition: background .4s; }
`;

function applyPaletteVars(el, p) {
  if (!el || !p) return;
  el.style.setProperty('--ow-bg', p.bg);
  el.style.setProperty('--ow-panel', p.panel);
  el.style.setProperty('--ow-panelDeep', p.panelDeep);
  el.style.setProperty('--ow-ink', p.ink);
  el.style.setProperty('--ow-ink2', p.ink2);
  el.style.setProperty('--ow-muted', p.muted);
  el.style.setProperty('--ow-border', p.border);
  el.style.setProperty('--ow-accent', p.accent);
  el.style.setProperty('--ow-accentDeep', p.accentDeep);
  el.style.setProperty('--ow-cream', p.cream);
  el.style.setProperty('--ow-dark', p.dark);
  el.style.setProperty('--ow-darkPanel', p.darkPanel);
  el.style.setProperty('--ow-glow-rgb', p.glowRgb);
}

function useSpotlight() {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty('--mx', ((e.clientX - r.left) / r.width) * 100 + '%');
    el.style.setProperty('--my', ((e.clientY - r.top) / r.height) * 100 + '%');
  };
  return { ref, onMouseMove: onMove };
}

function PageSections() {
  const rootRef = React.useRef(null);
  const [paletteKey, setPaletteKey] = React.useState(window.OW_PALETTE_KEY || 'midnight');

  /* listen for palette change events from tweaks */
  React.useEffect(() => {
    const handler = (e) => {
      if (e?.detail?.key && PALETTES[e.detail.key]) setPaletteKey(e.detail.key);
    };
    window.addEventListener('ow-palette-change', handler);
    return () => window.removeEventListener('ow-palette-change', handler);
  }, []);

  React.useEffect(() => {
    applyPaletteVars(rootRef.current, PALETTES[paletteKey]);
    // Also apply to :root so siblings (Showcase) outside this tree see the same vars.
    applyPaletteVars(document.documentElement, PALETTES[paletteKey]);
    window.OW_PALETTE_KEY = paletteKey;
  }, [paletteKey]);

  return (
    <div ref={rootRef} className="ow-sections" style={{ background: V.bg, color: V.ink, fontFamily: SANS }}>
      <style>{KEYFRAMES}</style>
      {window.Showcase ? <window.Showcase /> : null}
      <Occasions />
      <PhotoMosaic />
      <QualityPromise />
      <Reviews />
      <Pricing />
      <HowItWorks />
      <WhatsIncluded />
      <FamilyMoment />
      <Privacy />
      <FAQ />
      <FinalCTA />
      <Footer />
    </div>
  );
}

/* ─── HOW IT WORKS ─── */
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Wgrywasz zdjęcia', d: 'Skanowane, z telefonu, podniszczone — wszystko działa. Nie musisz nic przygotowywać z góry.' },
    { n: '02', t: 'My robimy całą robotę', d: 'Restaurujemy zdjęcia, animujemy je najnowszą technologią AI, dobieramy muzykę i montujemy film. Ty nie musisz nic.' },
    { n: '03', t: 'Film w skrzynce', d: 'Gotowy film Full HD przychodzi mailem. Pobierasz, pokazujesz bliskim, wzruszasz się razem.' },
  ];
  return (
    <section id="jak-to-dziala" style={{ padding: '110px 56px', background: V.cream }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 56, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <Kicker>Jak to działa</Kicker>
            <h2 style={H2}>Trzy kroki. <em style={{ color: V.accentDeep }}>My robimy całą robotę.</em></h2>
          </div>
          <p style={{ fontSize: 16, color: V.ink2, maxWidth: 340, lineHeight: 1.6 }}>
            Bez instalacji, bez logowania w 5 miejscach. Robisz tylko jedną rzecz — wybierasz zdjęcia.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: V.border, border: `1px solid ${V.border}`, borderRadius: 14, overflow: 'hidden' }}>
          {steps.map((s, i) => (
            <div key={s.n} className="ow-step" style={{ background: i === 1 ? V.bg : V.cream, padding: '52px 36px 56px', position: 'relative' }}>
              <div className="ow-step-num" style={{ fontFamily: SERIF, fontSize: 56, fontStyle: 'italic', color: V.muted, lineHeight: 1, marginBottom: 22, fontWeight: 400 }}>{s.n}</div>
              <h3 style={{ fontFamily: SERIF, fontSize: 30, fontWeight: 400, marginBottom: 18, letterSpacing: -0.3, color: V.ink, lineHeight: 1.15 }}>{s.t}</h3>
              <p style={{ fontSize: 15, color: V.ink2, lineHeight: 1.65 }}>{s.d}</p>
              <div className="ow-step-bar" style={{ position: 'absolute', left: 36, right: 36, bottom: 24, height: 2, background: V.accent, borderRadius: 2 }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── OCCASIONS ─── */
function Occasions() {
  const items = [
    { name: '80. urodziny mamy', sub: 'Okrągła rocznica' },
    { name: '50 lat ślubu rodziców', sub: 'Złote gody' },
    { name: 'Pod choinkę dla babci', sub: 'Boże Narodzenie' },
    { name: 'Upamiętnienie taty', sub: 'Z miłości' },
    { name: 'Podziękowanie dla rodziców', sub: 'Niespodzianka na ślubie' },
    { name: 'Dzień Matki', sub: 'Niezapomniany prezent' },
  ];
  return (
    <section style={{ padding: '110px 56px', background: V.bg }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ marginBottom: 48 }}>
          <Kicker>Na jaką okazję</Kicker>
          <h2 style={{ ...H2, maxWidth: 720 }}>Prezent, którego <em style={{ color: V.accentDeep }}>nie kupisz w sklepie</em></h2>
          <p style={{ fontSize: 17, color: V.ink2, maxWidth: 540, lineHeight: 1.6, marginTop: 16 }}>
            Bo kwiaty więdną, perfumy się kończą, a film z rodzinnymi zdjęciami zostaje na zawsze.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {items.map((o, i) => <OccasionCard key={i} o={o} i={i} />)}
        </div>
      </div>
    </section>
  );
}

function OccasionCard({ o, i }) {
  const { ref, onMouseMove } = useSpotlight();
  return (
    <div ref={ref} onMouseMove={onMouseMove} className="ow-card ow-occ" style={{
      background: i % 2 === 0 ? V.panel : V.cream,
      padding: '32px 28px', borderRadius: 16, minHeight: 170,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      border: `1px solid ${V.border}`,
    }}>
      <span className="ow-card-glow" />
      <div style={{ fontSize: 11, color: V.muted, fontWeight: 600, letterSpacing: 1.5, textTransform: 'uppercase' }}>{o.sub}</div>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ fontFamily: SERIF, fontSize: 26, fontWeight: 400, color: V.ink, lineHeight: 1.15 }}>{o.name}</div>
      </div>
    </div>
  );
}

/* ─── PRICING ─── */
function Pricing() {
  const pkgs = [
    {
      name: 'Wspomnienie',
      sub: '5 ożywionych zdjęć · film ~35 sek',
      price: 179,
      note: '1 runda poprawek w cenie',
      features: ['Animacja zdjęć AI','Restauracja zdjęć', 'Muzyka w cenie', 'Tablice z życzeniami', 'Full HD 1080p', '1 runda poprawek'],
    },
    {
      name: 'Rodzinny',
      sub: '12 ożywionych zdjęć · film ~1,5 min',
      price: 349,
      note: '2 rundy poprawek w cenie',
      features: ['Animacja zdjęć AI','Restauracja zdjęć', 'Muzyka w cenie', 'Tablice z życzeniami', 'Full HD 1080p', '2 rundy poprawek', ],
    },
    {
      name: 'Saga',
      sub: '20 ożywionych zdjęć · film ~2 min',
      price: 549,
      note: '2 rundy poprawek w cenie',
      hot: true,
      features: ['Animacja zdjęć AI','Restauracja zdjęć', 'Muzyka w cenie', 'Tablice z życzeniami', 'Full HD 1080p', '2 rundy poprawek', ],
    },
    {
      name: 'Kronika',
      sub: '30 ożywionych zdjęć · film ~2,5 min',
      price: 899,
      note: 'Lektor w cenie · 2 rundy poprawek',
      features: ['Animacja zdjęć AI','Restauracja zdjęć', 'Muzyka w cenie', 'Tablice z życzeniami', 'Full HD 1080p', '2 rundy poprawek', 'Lektor profesjonalny w cenie'],
    },
  ];
  return (
    <section id="pakiety" style={{ padding: '110px 56px', background: V.cream }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <Kicker centered>Cennik</Kicker>
          <h2 style={{ ...H2, textAlign: 'center' }}>Wybierz pakiet</h2>
          <p style={{ fontFamily: SERIF, fontStyle: 'italic', fontSize: 20, color: V.ink, maxWidth: 580, margin: '20px auto 8px', lineHeight: 1.65 }}>
            "To nie są automatyczne animacje. To filmy, które się ogląda ze łzami w oczach — bo w każde zdjęcie wkładamy tyle czasu, ile potrzeba."
          </p>
        </div>
        <Tripwire />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {pkgs.map((p, i) => <PackageCard key={i} p={p} />)}
        </div>
        <div className="ow-pkg" style={{
          marginTop: 14,
          background: 'transparent', border: `1.5px dashed ${V.border}`,
          padding: '28px 36px', borderRadius: 14,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 24, flexWrap: 'wrap',
        }}>
          <div>
            <div style={{ fontFamily: SERIF, fontSize: 26, fontWeight: 400, color: V.ink }}>Wesele lub 30+ zdjęć?</div>
            <p style={{ fontSize: 14, color: V.muted, lineHeight: 1.6, marginTop: 6, maxWidth: 520 }}>
              Duże kroniki rodzinne i reportaże ślubne — wycena indywidualna. Napisz do nas, odpiszemy w 24h.
            </p>
          </div>
          <button className="ow-cta-btn" style={{
            background: 'transparent', color: V.ink,
            border: `1.5px solid ${V.ink}`, padding: '14px 28px',
            borderRadius: 8, fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: SANS, whiteSpace: 'nowrap',
          }}>
            <span className="ow-cta-shine" />
            Napisz do nas →
          </button>
        </div>
      </div>
    </section>
  );
}

function Tripwire() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 24, background: V.dark, color: V.cream,
      padding: '28px 36px', borderRadius: 14, marginBottom: 16, flexWrap: 'wrap',
      position: 'relative', overflow: 'hidden',
      border: `1px solid ${V.darkPanel}`,
    }}>
      <span className="ow-pulse-dot" style={{
        position: 'absolute', top: 22, right: 24,
        width: 8, height: 8, borderRadius: '50%', background: V.accent,
      }} />
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 2, color: V.accent, marginBottom: 6 }}>WYPRÓBUJ ZA GROSZE</div>
        <div style={{ fontFamily: SERIF, fontSize: 26, fontWeight: 400 }}>Single — jedno ożywione zdjęcie</div>
        <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', marginTop: 4 }}>Klip 5 sekund · muzyka · dostawa automatyczna · wypróbuj zanim zdecydujesz</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
        <div style={{ fontFamily: SERIF, fontSize: 48, lineHeight: 1 }}>
          <sup style={{ fontSize: 18, verticalAlign: 'top', marginRight: 4 }}>zł</sup>39
        </div>
        <button className="ow-cta-btn" style={{
          background: V.cream, color: V.dark, border: 'none',
          padding: '14px 26px', borderRadius: 8, fontSize: 14, fontWeight: 700,
          cursor: 'pointer', fontFamily: SANS, whiteSpace: 'nowrap',
        }}>
          <span className="ow-cta-shine" />
          Zamów klip →
        </button>
      </div>
    </div>
  );
}

function PackageCard({ p }) {
  const { ref, onMouseMove } = useSpotlight();
  return (
    <div ref={ref} onMouseMove={onMouseMove} className="ow-card ow-pkg" style={{
      background: p.hot ? V.dark : V.bg,
      color: p.hot ? V.cream : V.ink,
      border: p.hot ? `1px solid ${V.darkPanel}` : `1px solid ${V.border}`,
      padding: '36px 26px', borderRadius: 14,
      position: 'relative',
      display: 'flex', flexDirection: 'column',
      boxShadow: p.hot ? '0 24px 50px rgba(0,0,0,0.28)' : 'none',
    }}>
      <span className="ow-card-glow" />
      {p.hot && (
        <div style={{
          position: 'absolute', top: -12, left: 22,
          background: V.accent, color: V.cream,
          padding: '5px 12px', fontSize: 11, fontWeight: 700,
          letterSpacing: 1.5, borderRadius: 999,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span className="ow-pulse-dot" style={{
            width: 6, height: 6, borderRadius: '50%', background: V.cream, display: 'inline-block',
          }} />
          NAJPOPULARNIEJSZY
        </div>
      )}
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 2, opacity: 0.55, marginBottom: 12 }}>PAKIET</div>
      <div style={{ fontFamily: SERIF, fontSize: 32, fontWeight: 400, marginBottom: 4 }}>{p.name}</div>
      <div style={{ fontSize: 13, opacity: 0.65, marginBottom: 24 }}>{p.sub}</div>
      <div style={{ height: 1, background: p.hot ? 'rgba(255,255,255,0.15)' : V.border, marginBottom: 20 }} />
      <div style={{ fontFamily: SERIF, fontSize: 52, fontWeight: 400, lineHeight: 1, marginBottom: 4 }}>
        <sup style={{ fontSize: 20, verticalAlign: 'top', marginRight: 4 }}>zł</sup>{p.price}
      </div>
      <div style={{ fontSize: 12, opacity: 0.55, marginBottom: 24 }}>{p.note}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {p.features.map((f, j) => (
          <li key={j} style={{ fontSize: 13.5, display: 'flex', gap: 8, lineHeight: 1.5 }}>
            <span style={{ color: p.hot ? V.accent : V.accentDeep, fontWeight: 700 }}>✓</span> {f}
          </li>
        ))}
      </ul>
      <button className="ow-cta-btn" onClick={() => window.OW_ORDER && window.OW_ORDER(p.name)} style={{
        background: p.hot ? V.accent : 'transparent',
        color: p.hot ? '#fff' : V.ink,
        border: p.hot ? 'none' : `1.5px solid ${V.ink}`,
        padding: '14px', borderRadius: 8,
        fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: SANS,
      }}>
        <span className="ow-cta-shine" />
        Zamów →
      </button>
    </div>
  );
}

/* ─── QUALITY PROMISE ─── */
function QualityPromise() {
  return (
    <section style={{ padding: '110px 56px', background: V.dark, color: V.cream, position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{
        position: 'absolute', top: '50%', left: '50%', width: 600, height: 600, borderRadius: '50%',
        transform: 'translate(-50%,-50%)',
        background: 'radial-gradient(circle, rgba(var(--ow-glow-rgb), 0.12), transparent 65%)',
        animation: 'ow-pulse-soft 8s ease-in-out infinite',
      }} />
      <div style={{ maxWidth: 1180, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <Kicker light>Nasza obietnica</Kicker>
            <h2 style={{ fontFamily: SERIF, fontSize: 'clamp(36px, 4vw, 56px)', fontWeight: 400, lineHeight: 1.05, letterSpacing: -1, color: V.cream, marginBottom: 28 }}>
              Każde zdjęcie traktujemy<br />
              <em style={{ color: V.accent }}>jak własne wspomnienie.</em>
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, marginBottom: 20, maxWidth: 460 }}>
              Jeśli animacja nie wygląda tak jak powinna — generujemy jeszcze raz. I jeszcze raz. Dopóki nie będziemy z niej dumni.
            </p>
            <p style={{ fontFamily: SERIF, fontStyle: 'italic', fontSize: 22, color: V.cream, lineHeight: 1.5, maxWidth: 440, borderLeft: `3px solid ${V.accent}`, paddingLeft: 24 }}>
              "To nie są automatyczne animacje. To filmy, które się ogląda ze łzami w oczach."
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {[
              { n: '100%', label: 'zadowolonych klientów', d: 'Nie wysyłamy filmu dopóki sami nie jesteśmy z niego dumni.' },
              { n: '★ Najwyższa', label: 'jakość animacji', d: 'Prawdziwa animacja twarzy — usta się poruszają, oczy mrugają, ekspresja żyje. Nie wygładzanie zdjęcia.' },
              { n: 'Szybko', label: 'czas realizacji', d: 'Od wgrania zdjęć do gotowego filmu. Termin podajemy przy potwierdzeniu zamówienia.' },
            ].map((s, i) => (
              <div key={i} style={{
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
                borderRadius: 12, padding: '24px 28px',
              }}>
                <div style={{ fontFamily: SERIF, fontSize: 26, fontWeight: 400, color: V.accent, lineHeight: 1, marginBottom: 8 }}>{s.n}</div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.5, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', marginBottom: 8 }}>{s.label}</div>
                <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── ADD-ONS removed (no narration / lektor) ─── */
function AddOns() { return null; }

/* ─── REVIEWS ─── */
function Reviews() {
  const reviews = [
    { stars: 5, text: 'Rodzice płakali przez cały seans. Puściłam film na projektorze w Wigilię – to był najważniejszy moment wieczoru.', name: 'Asia', sub: 'Film na Wigilię · Pakiet Saga' },
    { stars: 5, text: 'Babcia oglądała film trzy razy z rzędu. Za każdym razem powtarzała: zobacz, jacy byliśmy młodzi.', name: 'Kamila', sub: 'Prezent dla babci · 90. urodziny' },
    { stars: 5, text: 'Bałem się, że wyjdzie sztucznie. Jakość mnie zaskoczyła – to nie wygląda jak komputerowa przeróbka.', name: 'Tomasz', sub: 'Pakiet Rodzinny · Rocznica ślubu' },
  ];
  return (
    <section id="opinie" style={{ padding: '110px 56px', background: V.bg }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <Kicker>Opinie</Kicker>
            <h2 style={H2}>Co mówią <em style={{ color: V.accentDeep }}>klienci</em></h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ fontFamily: SERIF, fontSize: 56, color: V.ink, lineHeight: 1 }}>4.9<span style={{ fontSize: 24, color: V.muted }}>/5</span></div>
            <div>
              <div className="ow-twinkle" style={{ color: V.accent, fontSize: 18, letterSpacing: 2 }}>★★★★★</div>
              <div style={{ fontSize: 13, color: V.muted, marginTop: 4 }}>100% zadowolonych klientów</div>
            </div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {reviews.map((r, i) => <ReviewCard key={i} r={r} />)}
        </div>
      </div>
    </section>
  );
}

function ReviewCard({ r }) {
  const { ref, onMouseMove } = useSpotlight();
  return (
    <div ref={ref} onMouseMove={onMouseMove} className="ow-card" style={{
      background: V.cream, padding: '32px 30px', borderRadius: 14, border: `1px solid ${V.border}`,
    }}>
      <span className="ow-card-glow" />
      <div style={{ color: V.accent, fontSize: 16, letterSpacing: 2, marginBottom: 18 }}>{'★'.repeat(r.stars)}</div>
      <p style={{ fontFamily: SERIF, fontSize: 19, fontStyle: 'italic', color: V.ink, lineHeight: 1.5, marginBottom: 28 }}>"{r.text}"</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: 42, height: 42, borderRadius: '50%',
          background: V.panel, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: SERIF, fontSize: 20, color: V.accentDeep,
        }}>{r.name[0]}</div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: V.ink }}>{r.name}</div>
          <div style={{ fontSize: 12, color: V.muted }}>{r.sub}</div>
        </div>
      </div>
    </div>
  );
}

/* ─── PHOTO MOSAIC — 3-step transformation ─── */
function PhotoMosaic() {
  const IMG_ORIG = 'assets/wedding_aged.png';
  const IMG_RESTORED = 'assets/wedding_clean.jpg';
  const steps = [
    {
      num: '01',
      label: 'Stare zdjęcie',
      desc: 'Takie, jakie masz — podniszczone, wyblakłe, ze skrzynki po butach lub albumu babci.',
      badge: 'Oryginał',
      badgeBg: V.muted,
      content: (
        <div style={{ position: 'relative', width: '100%', aspectRatio: '3/4', overflow: 'hidden', borderRadius: 10 }}>
          <img src={IMG_ORIG} alt="Stare zdjęcie" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          {/* scratch overlay */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'repeating-linear-gradient(92deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 6px), repeating-linear-gradient(178deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 8px)',
            borderRadius: 10,
          }} />
        </div>
      ),
    },
    {
      num: '02',
      label: 'Po restauracji',
      desc: 'Usuwamy rysy, plamy i ślady czasu. Przywracamy kolory i ostrość.',
      badge: 'Restauracja',
      badgeBg: V.accentDeep,
      content: (
        <div style={{ position: 'relative', width: '100%', aspectRatio: '3/4', overflow: 'hidden', borderRadius: 10 }}>
          <img src={IMG_RESTORED} alt="Zdjęcie po restauracji" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'contrast(1.08) brightness(1.05)', display: 'block' }} />
        </div>
      ),
    },
    {
      num: '03',
      label: 'Animacja',
      desc: 'Ślub dziadków. Uścisk nieżyjącego taty. Pierwsza jazda na rowerze. To się nie powtórzy — ale można to zobaczyć jeszcze raz.',
      badge: 'Film gotowy',
      badgeBg: V.accent,
      content: (
        <div style={{ position: 'relative', width: '100%', aspectRatio: '3/4', overflow: 'hidden', borderRadius: 10, background: '#000', cursor: 'pointer' }}
          onClick={(e) => {
            const el = e.currentTarget;
            if (el.querySelector('iframe')) return;
            const iframe = document.createElement('iframe');
            iframe.src = 'https://www.youtube.com/embed/9n7i3_Zajm4?autoplay=1&rel=0';
            iframe.allow = 'autoplay; encrypted-media; fullscreen';
            iframe.allowFullscreen = true;
            iframe.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:none;';
            el.appendChild(iframe);
          }}
        >
          <img src="https://img.youtube.com/vi/9n7i3_Zajm4/maxresdefault.jpg" alt="Animacja" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          <div style={{
            position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{
              width: 64, height: 64, borderRadius: '50%',
              background: 'rgba(255,255,255,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 22, paddingLeft: 5, boxShadow: '0 6px 20px rgba(0,0,0,0.35)',
            }}>▶</div>
          </div>
        </div>
      ),
    },
  ];

  return (
    <section style={{ padding: '110px 56px', background: V.cream }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, maxWidth: 680 }}>
          <Kicker>Jak to wygląda</Kicker>
          <h2 style={H2}>Od pudełka ze zdjęciami — <em style={{ color: V.accentDeep }}>do gotowego filmu.</em></h2>
          <p style={{ fontSize: 17, color: V.ink2, lineHeight: 1.6, marginTop: 18 }}>
            Wgrywasz to, co masz. Resztą zajmujemy się my.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr auto 1fr', gap: 0, alignItems: 'center' }}>
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <div style={{
                background: V.bg, border: `1px solid ${V.border}`,
                borderRadius: 16, padding: '28px 24px',
                display: 'flex', flexDirection: 'column', gap: 16,
                boxShadow: '0 4px 20px rgba(0,0,0,0.06)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ fontFamily: SERIF, fontSize: 36, fontWeight: 400, color: V.muted, lineHeight: 1, fontStyle: 'italic' }}>{s.num}</div>
                  <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', background: s.badgeBg, color: '#fff', padding: '4px 10px', borderRadius: 999 }}>{s.badge}</div>
                </div>
                {s.content}
                <div>
                  <div style={{ fontFamily: SERIF, fontSize: 20, fontWeight: 400, color: V.ink, marginBottom: 6 }}>{s.label}</div>
                  <p style={{ fontSize: 13, color: V.ink2, lineHeight: 1.6, margin: 0 }}>{s.desc}</p>
                </div>
              </div>
              {i < 2 && (
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '0 20px', gap: 6 }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: '50%',
                    background: V.accent, color: V.cream,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 18, boxShadow: `0 6px 16px rgba(${V_GLOW},0.35)`,
                  }}>→</div>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

/* CSS var helper for inline use */
const V_GLOW = '200,122,82'; /* fallback; the actual --ow-glow-rgb is the source of truth */

/* ─── FAMILY MOMENT — emocjonalna scena: rodzina ogląda film na TV ─── */
function FamilyMoment() {
  return (
    <section style={{ padding: '110px 56px', background: V.bg }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64, alignItems: 'center' }}>
          {/* Composite: main photo + floating vintage cards */}
          <div style={{ position: 'relative', aspectRatio: '4/3' }}>
            {/* main photo — dominant, right side */}
            <div style={{
              position: 'absolute', top: 0, right: 0, bottom: 0, left: '18%',
              borderRadius: 18, overflow: 'hidden',
              boxShadow: '0 24px 60px rgba(0,0,0,0.18)',
            }}>
              <img src="assets/family_watching.png" alt="Rodzina ogląda film razem" style={{
                width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              }} />
            </div>
            {/* floating card 1: dzieci — top left */}
            <div style={{
              position: 'absolute', top: '4%', left: 0,
              width: '28%', aspectRatio: '1/1',
              borderRadius: 12, overflow: 'hidden',
              boxShadow: '0 10px 28px rgba(0,0,0,0.25)',
              transform: 'rotate(-5deg)',
              zIndex: 2,
            }}>
              <img src="assets/vintage_kids.png" alt="Stare zdjęcie dzieci" style={{
                width: '100%', height: '100%', objectFit: 'cover',
              }} />
            </div>
            {/* floating card 2: rodzina — bottom left */}
            <div style={{
              position: 'absolute', bottom: '6%', left: '4%',
              width: '26%', aspectRatio: '4/3',
              borderRadius: 12, overflow: 'hidden',
              boxShadow: '0 10px 28px rgba(0,0,0,0.25)',
              transform: 'rotate(4deg)',
              zIndex: 2,
            }}>
              <img src="assets/vintage_family.png" alt="Stare zdjęcie rodzinne" style={{
                width: '100%', height: '100%', objectFit: 'cover',
              }} />
            </div>
          </div>

          <div>
            <Kicker>Moment</Kicker>
            <h2 style={{ ...H2, marginBottom: 24 }}>
              Wszyscy w jednym pokoju.<br />
              <em style={{ color: V.accentDeep }}>Nikt nie patrzy w telefon.</em>
            </h2>
            <p style={{ fontSize: 18, color: V.ink2, lineHeight: 1.65, maxWidth: 460 }}>
              Zobaczyć rodziców, gdy byli młodzi. Siebie jako dziecko. Całą drogę, którą przeszliście razem. To coś więcej niż animacja zdjęć — to historia życia opowiedziana obrazem.
            </p>
            <p style={{ fontFamily: SERIF, fontStyle: 'italic', fontSize: 22, color: V.ink, lineHeight: 1.5, marginTop: 28, maxWidth: 460 }}>
              "Ten film wyraża więcej niż tysiąc słów. Niepowtarzalna pamiątka."
            </p>
            <div style={{ fontSize: 13, color: V.muted, marginTop: 8 }}>— Marta, klientka</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── WHATS INCLUDED — co dostajesz w cenie każdego filmu ─── */
function WhatsIncluded() {
  const items = [
    {
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <path d="M6 22 L6 10 Q6 8 8 8 L20 8 Q22 8 22 10 L22 22 Q22 24 20 24 L8 24 Q6 24 6 22 Z" stroke="currentColor" strokeWidth="1.4"/>
          <circle cx="14" cy="16" r="3.2" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M22 14 L26 11 L26 21 L22 18" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
        </svg>
      ),
      title: 'Restauracja zdjęć',
      desc: 'Usuwamy zarysowania, plamy, ślady wieku. Przywracamy kolory i ostrość — Twoje zdjęcia wyglądają jak nowe.',
    },
    {
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <path d="M11 20 L11 8 L22 6 L22 18" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
          <ellipse cx="9" cy="20.5" rx="3" ry="2.2" stroke="currentColor" strokeWidth="1.4"/>
          <ellipse cx="20" cy="18.5" rx="3" ry="2.2" stroke="currentColor" strokeWidth="1.4"/>
        </svg>
      ),
      title: 'Muzyka',
      desc: 'Dobieramy delikatny podkład pasujący do nastroju filmu — fortepian, smyczki, instrumental. Muzyka licencjonowana.',
    },
    {
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <rect x="5" y="7" width="22" height="16" rx="2" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M10 13 L22 13 M10 17 L18 17" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
          <path d="M5 11 L27 11" stroke="currentColor" strokeWidth="1.4"/>
        </svg>
      ),
      title: 'Tablice z życzeniami',
      desc: 'Tablica początkowa ("Dla Babci na 90 urodziny") i końcowa ("Z miłością — wnuki") z Twoim tekstem. Pisemne dedykacje, które domykają film.',
    },
    {
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <circle cx="16" cy="16" r="11" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M16 9 L16 16 L21 18.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ),
      title: 'Animacja AI',
      desc: 'Pocałunek dziadków na ich ślubie. Pierwsze chwycenie dziecka na ręce. Uścisk taty po latach. Ożywiamy te momenty, których nie ma na żadnym filmie.',
    },
    {
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <rect x="6" y="9" width="20" height="14" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M14 13 L19 16 L14 19 Z" fill="currentColor"/>
        </svg>
      ),
      title: 'Full HD 1080p',
      desc: 'Plik mp4 w pełnej rozdzielczości — wyświetlisz na telefonie, telewizorze, projektorze. Bez znaków wodnych.',
    },
    {
      icon: (
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
          <path d="M6 11 L26 11 L24 23 L8 23 Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
          <path d="M6 11 L16 18 L26 11" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
        </svg>
      ),
      title: 'Szybka realizacja',
      desc: 'Gotowy film przychodzi mailem. Pobierasz, pokazujesz bliskim, wzruszasz się razem.',
    },
  ];

  return (
    <section style={{ padding: '110px 56px', background: V.panel }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 56, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <Kicker>Co zawiera</Kicker>
            <h2 style={{ ...H2, maxWidth: 720 }}>Każdy film zawiera <em style={{ color: V.accentDeep }}>wszystko, czego potrzebujesz.</em></h2>
          </div>
          <p style={{ fontSize: 16, color: V.ink2, maxWidth: 360, lineHeight: 1.6 }}>
            Bez dopłat, bez ukrytych pakietów — restauracja, muzyka i tablice są w cenie każdego pakietu.
          </p>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
          background: V.border, border: `1px solid ${V.border}`, borderRadius: 14, overflow: 'hidden',
        }}>
          {items.map((it, i) => (
            <div key={i} className="ow-card" style={{
              background: V.cream, padding: '38px 32px',
              display: 'flex', flexDirection: 'column', gap: 14,
              minHeight: 220,
            }}>
              <span className="ow-card-glow" />
              <div style={{ color: V.accentDeep }}>{it.icon}</div>
              <div style={{ fontFamily: SERIF, fontSize: 24, fontWeight: 400, color: V.ink, letterSpacing: -0.2 }}>{it.title}</div>
              <p style={{ fontSize: 14, color: V.ink2, lineHeight: 1.6, margin: 0 }}>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── PRIVACY / RODO ─── */
function Privacy() {
  return (
    <section style={{ padding: '90px 56px', background: V.dark, color: V.cream, position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{
        position: 'absolute', top: -120, right: -120, width: 420, height: 420, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(var(--ow-glow-rgb), 0.18), transparent 70%)',
        animation: 'ow-pulse-soft 6s ease-in-out infinite',
      }} />
      <div style={{ maxWidth: 1180, margin: '0 auto', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 3, color: V.accent, marginBottom: 14, textTransform: 'uppercase' }}>Prywatność · RODO</div>
            <h2 style={{ fontFamily: SERIF, fontSize: 48, fontWeight: 400, lineHeight: 1.05, letterSpacing: -0.8, color: V.cream }}>
              Wasze zdjęcia są <em style={{ color: V.accent }}>bezpieczne.</em>
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
            {[
              { t: 'Tylko na czas realizacji', d: 'Zdjęcia trzymamy w chmurze tylko do momentu wysłania filmu. Potem są usuwane.' },
              { t: 'Nie trenujemy AI', d: 'Twoje zdjęcia nie trafiają do żadnych zbiorów treningowych. Nigdy.' },
              { t: 'Szyfrowane przesyłanie', d: 'Upload przez HTTPS, panel chroniony hasłem, tylko Ty masz dostęp.' },
              { t: 'Zgodnie z RODO', d: 'Polski podmiot. Dane w UE. Pełne prawo do usunięcia w każdej chwili.' },
            ].map((p, i) => (
              <div key={i}>
                <div style={{ fontFamily: SERIF, fontSize: 20, fontWeight: 400, color: V.cream, marginBottom: 8 }}>{p.t}</div>
                <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', lineHeight: 1.6 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── FAQ ─── */
function FAQ() {
  const items = [
    { q: 'Czy stare, zniszczone zdjęcia się nadają?', a: 'Tak. W cenie każdego pakietu jest cyfrowa renowacja — naprawiamy pęknięcia, zarysowania, wyblakłe kolory. Im więcej zdjęć i im lepiej zachowane, tym piękniejszy efekt.' },
    { q: 'Ile czasu trwa realizacja?', a: 'Termin ustalamy indywidualnie przy potwierdzeniu zamówienia. Zalecamy rezerwację z wyprzedzeniem, szczególnie przed ważnymi uroczystościami. Jeśli potrzebujesz szybciej — napisz w uwagach, postaramy się.' },
    { q: 'W jakim formacie otrzymam film?', a: 'Film dostajesz w formacie MP4, jakość Full HD (1080p). Odtwarza się na każdym telefonie, komputerze i telewizorze.' },
    { q: 'Jak wygląda płatność?', a: 'Płatność dzielimy na dwa etapy. Przy rezerwacji terminu wpłacasz 50% wartości. Pozostałe 50% dopłacasz, gdy wysyłasz zdjęcia.' },
    { q: 'Czy to dobry prezent dla babci lub rodziców?', a: 'Tak — to nasz najczęstszy przypadek. Klienci puszczają film w Wigilię, na rocznicach, urodzinach. Babcie oglądają po kilka razy, rodzice płaczą ze wzruszenia.' },
    { q: 'Czy mogę wybrać muzykę?', a: 'Muzykę dobieramy my — selekcjonujemy z licencjonowanych podkładów pasujących do nastroju zdjęć. Klient nie podaje własnej muzyki ze względu na prawa autorskie.' },
    { q: 'Co jeśli film mi się nie spodoba?', a: 'W każdym pakiecie masz rundy poprawek w cenie — Wspomnienie: 1 runda, Rodzinny i Saga: 2 rundy. Napisz co chcesz zmienić, poprawiamy.' },
    { q: 'Gdzie trafiają moje zdjęcia?', a: 'Tylko do nas, tylko na czas realizacji. Nie udostępniamy ich nikomu, nie używamy do trenowania AI, nie przechowujemy po dostarczeniu filmu.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: '110px 56px', background: V.cream }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Kicker centered>Pytania</Kicker>
          <h2 style={{ ...H2, textAlign: 'center' }}>Zanim zamówisz</h2>
        </div>
        <div style={{ borderTop: `1px solid ${V.border}` }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="ow-faq-row" style={{ borderBottom: `1px solid ${V.border}`, padding: '0 12px' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', textAlign: 'left', background: 'none', border: 'none',
                  cursor: 'pointer', padding: '24px 0',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
                  fontSize: 18, fontWeight: 500, color: V.ink, fontFamily: SANS,
                }}>
                  <span>{it.q}</span>
                  <span style={{
                    fontSize: 22, color: V.accent, transition: 'transform .3s ease',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    display: 'inline-block',
                  }}>+</span>
                </button>
                <div style={{
                  display: 'grid',
                  gridTemplateRows: isOpen ? '1fr' : '0fr',
                  transition: 'grid-template-rows .35s ease',
                }}>
                  <div style={{ overflow: 'hidden' }}>
                    <div style={{ fontSize: 15, color: V.ink2, lineHeight: 1.7, paddingBottom: 24, maxWidth: 680 }}>
                      {it.a}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─── FINAL CTA ─── */
function FinalCTA() {
  return (
    <section style={{ padding: '110px 56px', background: V.dark, color: V.cream, textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{
        position: 'absolute', left: '50%', top: '50%', width: 760, height: 760, borderRadius: '50%',
        transform: 'translate(-50%, -50%)',
        background: 'radial-gradient(circle, rgba(var(--ow-glow-rgb), 0.15), transparent 60%)',
        animation: 'ow-pulse-soft 7s ease-in-out infinite',
      }} />
      <div style={{ maxWidth: 720, margin: '0 auto', position: 'relative' }}>
        <Kicker centered light>Gotowy?</Kicker>
        <h2 style={{ fontFamily: SERIF, fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 400, lineHeight: 1.05, letterSpacing: -1, color: V.cream, marginBottom: 20 }}>
          Zatrzymaj ich twarz.<br /><em style={{ color: V.accent }}>Zanim zdjęcia zbladną.</em>
        </h2>
        <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.65)', maxWidth: 520, margin: '0 auto 40px', lineHeight: 1.6 }}>
          Film ze starych zdjęć — prezent, który wzrusza do łez. Od 179 zł.
        </p>
        <button className="ow-cta-btn" onClick={() => window.OW_ORDER && window.OW_ORDER()} style={{
          background: V.cream, color: V.dark, border: 'none',
          padding: '20px 48px', borderRadius: 8, fontSize: 16, fontWeight: 700, cursor: 'pointer', fontFamily: SANS,
        }}>
          <span className="ow-cta-shine" />
          Zamów film teraz →
        </button>
      </div>
    </section>
  );
}

/* ─── FOOTER ─── */
function Footer() {
  return (
    <footer style={{ padding: '48px 56px', background: V.bg, borderTop: `1px solid ${V.border}`, fontFamily: SANS }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
        <div style={{ fontFamily: SERIF, fontSize: 22, fontWeight: 400, color: V.ink, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="ow-pulse-dot" style={{ width: 10, height: 10, borderRadius: '50%', background: V.accent }} />
          Ożywione Wspomnienia
        </div>
        <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', justifyContent: 'center', fontSize: 14 }}>
          {['Jak to działa', 'Pakiety', 'Opinie', 'FAQ', 'hello@ozywspomnienia.pl'].map(l => (
            <span key={l} className="ow-link" style={{ color: V.muted, cursor: 'pointer' }}>{l}</span>
          ))}
        </div>
        <div style={{ fontSize: 12, color: V.muted }}>
          © 2026 Ożywione Wspomnienia · <span className="ow-link" style={{ color: V.ink2 }}>Polityka Prywatności</span>
        </div>
      </div>
    </footer>
  );
}

/* ─── helpers ─── */
const H2 = {
  fontFamily: SERIF,
  fontSize: 'clamp(38px, 4.5vw, 60px)',
  fontWeight: 400,
  lineHeight: 1.05,
  letterSpacing: -1,
  color: V.ink,
  margin: 0,
};

function Kicker({ children, centered, light }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 700, letterSpacing: 3,
      color: light ? V.accent : V.accentDeep,
      textTransform: 'uppercase',
      marginBottom: 18,
      textAlign: centered ? 'center' : 'left',
    }}>{children}</div>
  );
}

window.PageSections = PageSections;