/* S1 landing + S2 demo + S3 how-it-works + S4 proof — one scrolling page. */
const DSl = window.SparkleClassicDesignSystem_7a1470;

function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const top = el.getBoundingClientRect().top + window.scrollY - 52;
  window.scrollTo({ top, behavior: reduce ? 'auto' : 'smooth' });
}

/* ---- small trust chip ---- */
function TrustChip({ icon, children }) {
  const { Icon } = DSl;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, width: 98, textAlign: 'center' }}>
      <span style={{
        width: 42, height: 42, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'var(--cream)', color: 'var(--plum-ink)', boxShadow: 'var(--ofx-edges)', fontSize: 20,
      }}><Icon name={icon} /></span>
      <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--plum-ink)', lineHeight: 1.25 }}>{children}</span>
    </div>
  );
}

function LandingScreen({ onStart }) {
  const { Button, Card, Badge, Sparkle, Icon, Tag, Avatar } = DSl;
  const realRef = React.useRef(null);
  const pixelRef = React.useRef(null);

  // The pixel cat hops on load, every 5s, and on scroll-down / hover / click —
  // not a constant loop. MorphField tracks its live position so particles follow.
  React.useEffect(() => {
    const el = pixelRef.current;
    if (!el || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let last = 0;
    const hop = () => {
      const now = performance.now();
      if (now - last < 900) return;             // don't interrupt an in-flight hop
      last = now;
      el.classList.remove('spk-hop-go');
      void el.offsetWidth;                       // reflow to restart the one-shot animation
      el.classList.add('spk-hop-go');
    };
    const t0 = setTimeout(hop, 700);             // once shortly after load
    const iv = setInterval(hop, 5000);           // then every 5s
    let lastY = window.scrollY;
    const onScroll = () => {
      const y = window.scrollY;
      if (y > lastY + 2) {                        // only on downward scroll
        const r = el.getBoundingClientRect();
        if (r.bottom > 0 && r.top < window.innerHeight) hop();  // and only while in view
      }
      lastY = y;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    el.addEventListener('mouseenter', hop);
    el.addEventListener('click', hop);
    return () => {
      clearTimeout(t0); clearInterval(iv);
      window.removeEventListener('scroll', onScroll);
      el.removeEventListener('mouseenter', hop);
      el.removeEventListener('click', hop);
    };
  }, []);

  const steps = [
    { icon: 'image', n: '1', t: 'Upload', d: 'Send a clear photo and your pet\u2019s name.' },
    { icon: 'edit', n: '2', t: 'We pixel-ify', d: 'A real person turns your pet into a game sprite by hand. About 24 hours.' },
    { icon: 'gamepad', n: '3', t: 'Play and share', d: 'Get a private link. Play forever. Share with friends.' },
  ];

  const heroes = [
    { name: 'Buttercup', world: 'Meadow', photo: 'proof-1a', sprite: 'proof-1b', photoSrc: '/store/assets/proof/buttercup-real.png', spriteSrc: '/store/assets/proof/buttercup-pixel.png' },
    { name: 'BonBon', world: 'Backyard', photo: 'proof-2a', sprite: 'proof-2b', photoSrc: '/store/assets/proof/bonbon-real.png', spriteSrc: '/store/assets/proof/bonbon-pixel.png' },
    { name: 'Hosakoo', world: 'Riverbank', photo: 'proof-3a', sprite: 'proof-3b', photoSrc: '/store/assets/proof/hosakoo-real.png', spriteSrc: '/store/assets/proof/hosakoo-pixel.png' },
  ];

  const testimonials = [
    { q: 'I cried a little. It\u2019s actually a real game and it\u2019s actually my dog.', who: 'Sample \u2014 Dana R.', pet: 'for Pippin' },
    { q: 'Best gift I\u2019ve ever given. My sister still plays it.', who: 'Sample \u2014 Marcus T.', pet: 'for Olive' },
  ];

  return (
    <div>
      {/* ===================== S1 — HERO (real → pixel cat showcase) ===================== */}
      <section id="top" style={{ position: 'relative', padding: '22px 18px 12px', textAlign: 'center', overflow: 'hidden' }}>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Badge pixel style={{ marginBottom: 14 }}>CUSTOM-MADE PET GAME</Badge>
          <h1 className="spk-h1" style={{ fontSize: 30, lineHeight: 1.08, margin: '0 0 10px' }}>
            Turn your pet photo into a playable retro game. <Sparkle size={24} twinkle />
          </h1>
          <p className="spk-lead" style={{ maxWidth: 360, margin: '0 auto 4px' }}>
            Upload a photo to turn your pet into pixel art and get a custom game you can play and share.
          </p>

          {/* the transformation, with the sparkle particle field bursting behind it */}
          <Reveal>
            <div style={{ position: 'relative', maxWidth: 430, minHeight: 190, margin: '10px auto 6px' }}>
              <style>{`
                @keyframes spkHop {
                  0% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.3,.5,.4,1); }
                  14% { transform: translateY(5px) scale(1.09, 0.87); animation-timing-function: cubic-bezier(.2,.6,.35,1); }
                  44% { transform: translateY(-38px) scale(0.94, 1.09); animation-timing-function: ease-in; }
                  54% { transform: translateY(-38px) scale(0.97, 1.05); animation-timing-function: ease-in; }
                  78% { transform: translateY(0) scale(1.1, 0.84); animation-timing-function: cubic-bezier(.3,0,.5,1); }
                  90% { transform: translateY(-4px) scale(0.99, 1.02); }
                  100% { transform: translateY(0) scale(1, 1); }
                }
                .spk-hero-hop { transform-origin: bottom center; will-change: transform; cursor: pointer; }
                @media (prefers-reduced-motion: no-preference) {
                  .spk-hero-hop.spk-hop-go { animation: spkHop 0.85s 1; }
                }
              `}</style>
              <MorphField realRef={realRef} pixelRef={pixelRef} accent="#FF7EB6" />
              <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 4 }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                  <img ref={realRef} src="/store/assets/proof/real-cat.png" alt="A real white cat"
                    style={{ height: 154, maxWidth: '100%', objectFit: 'contain', filter: 'drop-shadow(0 8px 10px rgba(28,78,92,0.18))' }} />
                  <span style={{ fontFamily: 'var(--font-pixel)', fontSize: 9, color: 'var(--plum-accent)' }}>REAL LIFE</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', paddingBottom: 22 }}>
                  <PixelArrow unit={5} />
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                  <img ref={pixelRef} src="/store/assets/proof/pixel-cat.png" alt="The same cat as a pixel sprite" className="spk-pixelated spk-hero-hop"
                    style={{ height: 122, maxWidth: '100%', objectFit: 'contain', filter: 'drop-shadow(0 8px 10px rgba(28,78,92,0.18))' }} />
                  <span style={{ fontFamily: 'var(--font-pixel)', fontSize: 9, color: 'var(--plum-accent)' }}>IN GAME</span>
                </div>
              </div>
            </div>
          </Reveal>

          <Button variant="primary" size="lg" fullWidth onClick={onStart}
            rightIcon={<Icon name="arrow-right" />} style={{ maxWidth: 400, margin: '6px auto 0' }}>
            Make my pet a game · $29
          </Button>
          <p className="spk-muted" style={{ fontSize: 13, margin: '10px 0 14px' }}>
            Ready in about 24 hours. Money-back promise.
          </p>
          {/* See it in action — the demo, brought up into the hero */}
          <div style={{ marginTop: 20 }}>
            <p className="spk-eyebrow" style={{ textAlign: 'center', marginBottom: 6 }}>SEE IT IN ACTION</p>
            <h2 className="spk-h2" style={{ fontSize: 22, textAlign: 'center', margin: '0 0 14px' }}>The real game</h2>
            <Reveal><VideoSlot caption="This is the real game. Yours stars your pet." /></Reveal>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginTop: 16 }}>
              <TrustChip icon="lock">Secure payment</TrustChip>
              <TrustChip icon="clock">Ready in 24 hours</TrustChip>
              <TrustChip icon="heart">Made by a real person</TrustChip>
            </div>
          </div>
        </div>
      </section>

      {/* ===================== WHAT YOU GET ===================== */}
      <section style={{ padding: '22px 18px 30px' }}>
        <h2 className="spk-h2" style={{ fontSize: 22, textAlign: 'center', margin: '0 0 14px' }}>What you get</h2>
        <div style={{ display: 'grid', gap: 10, maxWidth: 380, margin: '0 auto' }}>
          {[
            'A custom pixel-art version of your pet',
            'A playable mini retro platformer starring them',
            'A game link you can share with your friends and family',
            'Delivered in 24 hours',
          ].map((item) => (
            <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--cream)', boxShadow: 'var(--ofx-edges)', padding: '11px 13px' }}>
              <span style={{ flex: '0 0 auto', width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--pink-soft)', color: 'var(--plum-ink)', boxShadow: 'var(--ofx-edges)' }}><Icon name="check" size={16} /></span>
              <span style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--plum-ink)', lineHeight: 1.3 }}>{item}</span>
            </div>
          ))}
        </div>
        <Button variant="primary" size="lg" fullWidth onClick={onStart}
          rightIcon={<Icon name="arrow-right" />} style={{ maxWidth: 380, margin: '16px auto 0' }}>
          Make mine · $29
        </Button>
      </section>

      {/* ===================== HOW IT WORKS (blue band, for variety) ===================== */}
      <section style={{ padding: '26px 18px', background: 'var(--cotton-blue)', boxShadow: '0 3px 0 0 var(--plum-ink), 0 -3px 0 0 var(--plum-ink)' }}>
        <p className="spk-eyebrow" style={{ textAlign: 'center', marginBottom: 4 }}>HOW IT WORKS</p>
        <h2 className="spk-h2" style={{ fontSize: 24, textAlign: 'center', margin: '0 0 6px' }}>Three small steps</h2>
        <p className="spk-muted" style={{ textAlign: 'center', margin: '0 auto 18px', maxWidth: 320, fontSize: 14 }}>
          Honest about the wait: a real person draws every sprite.
        </p>
        <div style={{ display: 'grid', gap: 12 }}>
          {steps.map((s, i) => (
            <Reveal key={s.t} delay={i * 80}>
              <Card surface="card" padding="md" shadow="block" style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <span style={{
                  flex: '0 0 auto', width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: 'var(--cream)', color: 'var(--plum-ink)', boxShadow: 'var(--ofx-edges)', fontSize: 22,
                }}><Icon name={s.icon} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ fontFamily: 'var(--font-pixel)', fontSize: 8, color: 'var(--plum-accent)', display: 'block', marginBottom: 4 }}>STEP {s.n}</span>
                  <strong className="spk-h4" style={{ fontSize: 18, display: 'block' }}>{s.t}</strong>
                  <p className="spk-muted" style={{ margin: '3px 0 0', fontSize: 14 }}>{s.d}</p>
                </div>
              </Card>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ===================== S4 — PROOF ===================== */}
      <section style={{ padding: '26px 18px 10px' }}>
        <p className="spk-eyebrow" style={{ textAlign: 'center', marginBottom: 4 }}>REAL HEROES</p>
        <h2 className="spk-h2" style={{ fontSize: 24, textAlign: 'center', margin: '0 0 18px' }}>From photo to playable</h2>
        <div style={{ display: 'grid', gap: 18 }}>
          {heroes.map((h, i) => (
            <Reveal key={h.name} delay={i * 70}>
              <Card surface="card" padding="md" shadow="block">
                <BeforeAfter photoId={h.photo} spriteId={h.sprite} photoSrc={h.photoSrc} spriteSrc={h.spriteSrc} name={h.name} world={h.world} />
              </Card>
            </Reveal>
          ))}
        </div>

        {/* testimonials */}
        <div style={{ display: 'grid', gap: 12, marginTop: 20 }}>
          {testimonials.map((t) => (
            <Card key={t.who} surface="cream" padding="md">
              <div style={{ display: 'flex', gap: 3, marginBottom: 6, color: 'var(--plum-ink)' }}>
                {[0,1,2,3,4].map((n) => <Sparkle key={n} size={14} />)}
              </div>
              <p style={{ margin: '0 0 10px', fontSize: 15, color: 'var(--plum-ink)', fontWeight: 600, lineHeight: 1.45 }}>
                &ldquo;{t.q}&rdquo;
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Avatar name={t.who.replace('Sample \u2014 ', '')} size="sm" />
                <div style={{ lineHeight: 1.2 }}>
                  <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--plum-ink)' }}>{t.who}</div>
                  <div className="spk-muted" style={{ fontSize: 12 }}>{t.pet}</div>
                </div>
              </div>
            </Card>
          ))}
          <p className="spk-muted" style={{ textAlign: 'center', fontSize: 12, margin: 0 }}>
            Sample reviews shown while we gather real ones.
          </p>
        </div>

        {/* gift angle */}
        <Card surface="pink" padding="lg" style={{ marginTop: 20, textAlign: 'center' }}>
          <Sparkle size={28} twinkle />
          <h3 className="spk-h3" style={{ fontSize: 20, margin: '6px 0 6px' }}>A one-of-a-kind gift</h3>
          <p style={{ margin: '0 auto 16px', maxWidth: 300, fontSize: 15, color: 'var(--plum-ink)' }}>
            For the pet lover who has everything. Their best friend, the star of their own retro game.
          </p>
          <Button variant="primary" size="lg" fullWidth onClick={onStart}
            rightIcon={<Icon name="arrow-right" />} style={{ maxWidth: 380, margin: '0 auto' }}>
            Make my pet a game · $29
          </Button>
        </Card>
      </section>

      <SiteFooter onStart={onStart} />
    </div>
  );
}

Object.assign(window, { LandingScreen, scrollToId });