// === Flipbook landing components ===
const { useState, useEffect, useRef } = React;

/* ---------- Animated flipbook hero ---------- */
const PAGES = [
  { tone: 'photo-fam',      caption: "Sunday mornings",      date: "MAY · 2025", img: "https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-travel',   caption: "Lisbon, day three",    date: "JUN · 2025", img: "https://images.unsplash.com/photo-1488646953014-85cb44e25828?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-pet',      caption: "Mochi turns two",      date: "APR · 2025", img: "https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-couple',   caption: "Our first place",      date: "MAR · 2025", img: "https://images.unsplash.com/photo-1469371670807-013ccf25f16a?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-birthday', caption: "She blew them all out", date: "FEB · 2025", img: "https://images.unsplash.com/photo-1530103862676-de8c9debad1d?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-beach',    caption: "Just keep going",      date: "JUL · 2025", img: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80" },
];

function HeroFlipbook() {
  const [flipping, setFlipping] = useState(-1);
  const [shown, setShown] = useState(0);

  useEffect(() => {
    let i = 0;
    const tick = () => {
      setFlipping(i);
      setTimeout(() => {
        i = (i + 1) % PAGES.length;
        setShown(i);
        setFlipping(-1);
      }, 1100);
    };
    const interval = setInterval(tick, 2600);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="flipbook-stage" aria-label="Animated flipbook preview">
      {/* Floating polaroids */}
      <div className="float-photo float-1"><div className="float-photo-inner photo-travel"><img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=400&q=80" alt="" loading="lazy" onError={(e)=>e.target.style.display='none'} style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'3px'}} /></div></div>
      <div className="float-photo float-2"><div className="float-photo-inner photo-couple"><img src="https://images.unsplash.com/photo-1518621736915-f3b1c41bfd00?auto=format&fit=crop&w=400&q=80" alt="" loading="lazy" onError={(e)=>e.target.style.display='none'} style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'3px'}} /></div></div>
      <div className="float-photo float-3"><div className="float-photo-inner photo-pet"><img src="https://images.unsplash.com/photo-1543466835-00a7907e9de1?auto=format&fit=crop&w=400&q=80" alt="" loading="lazy" onError={(e)=>e.target.style.display='none'} style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'3px'}} /></div></div>
      <div className="float-photo float-4"><div className="float-photo-inner photo-birthday"><img src="https://images.unsplash.com/photo-1464349095431-e9a21285b5f3?auto=format&fit=crop&w=400&q=80" alt="" loading="lazy" onError={(e)=>e.target.style.display='none'} style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'3px'}} /></div></div>

      {/* Hearts & particles */}
      <span className="heart" style={{top: '18%', left: '32%', animationDelay: '0s'}}>♥</span>
      <span className="heart" style={{top: '70%', right: '28%', animationDelay: '2s', color: 'var(--coral)'}}>♥</span>
      <span className="heart" style={{top: '40%', right: '20%', animationDelay: '4s', fontSize: '12px'}}>♥</span>
      <span className="heart" style={{top: '12%', left: '50%', animationDelay: '1s', fontSize: '12px', color: 'var(--coral)'}}>♥</span>

      <div className="flipbook">
        <div className="flipbook-spine"></div>
        <div className="flipbook-stack"></div>

        {/* Static page behind (next page to be revealed) */}
        <PageFace page={PAGES[(shown + 1) % PAGES.length]} num={(shown + 1) % PAGES.length + 1} />

        {/* Current page on top — flips when active */}
        <div
          className="page"
          style={{
            zIndex: 5,
            transform: flipping >= 0 ? 'rotateY(-178deg)' : 'rotateY(0deg)',
            transition: flipping >= 0 ? 'transform 1.1s cubic-bezier(0.55, 0.05, 0.3, 1)' : 'transform 0.05s',
          }}
        >
          <PageInner page={PAGES[shown]} num={shown + 1} />
        </div>
      </div>
    </div>
  );
}

function PageFace({ page, num }) {
  return (
    <div className="page" style={{zIndex: 1}}>
      <PageInner page={page} num={num} />
    </div>
  );
}

function PageInner({ page, num }) {
  return (
    <div className="page-inner">
      <div className={`page-photo ${page.tone}`}>
        <img src={page.img} alt="" loading="lazy"
             style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}}
             onError={(e) => { e.target.style.display = 'none'; }} />
        <div className="photo-shape" style={{opacity: 0.15}}></div>
      </div>
      <div className="page-caption">{page.caption}</div>
      <div className="page-date">{page.date}</div>
      <div className="page-num">{String(num).padStart(2,'0')} / {PAGES.length}</div>
    </div>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section className="hero">
      <div className="hero-bg"></div>
      <div className="hero-grain"></div>
      <div className="container hero-inner">
        <span className="hero-pill">
          <span className="hero-pill-dot">✦</span>
          Featured this week on r/apps & #1 on Product Hunt
        </span>
        <h1 className="hero-title">
          Turn your memories<br/>into <em>something real.</em>
        </h1>
        <p className="hero-sub">
          Create beautiful animated flipbooks from your videos and photos in seconds. Share them, print them, hold them in your hand.
        </p>
        <div className="hero-ctas">
          <a className="store-badge" href="https://apps.apple.com/us/app/flipbook-create-video-gift/id6758916313" target="_blank" rel="noopener" aria-label="Download on the App Store">
            <img src="assets/appstore-badge.svg" alt="Download on the App Store" />
          </a>
          <a className="store-badge store-badge-play" href="https://play.google.com/store/apps/details?id=com.zenbyte.flipbookmaker" target="_blank" rel="noopener" aria-label="Get it on Google Play">
            <img src="assets/google-play.svg" alt="Get it on Google Play" />
          </a>
          <a className="btn btn-ghost" href="#preview">
            <span className="btn-play-icon"></span>
            Watch Preview
          </a>
        </div>

        <HeroFlipbook />

        <div className="hero-stats">
          <div className="stat">
            <div className="stat-num">4.9</div>
            <div className="stat-label">App Store Rating</div>
          </div>
          <div className="stat">
            <div className="stat-num">280K+</div>
            <div className="stat-label">Flipbooks Made</div>
          </div>
          <div className="stat">
            <div className="stat-num">#1</div>
            <div className="stat-label">In Photo · This Week</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AppleGlyph() {
  return (
    <svg width="16" height="18" viewBox="0 0 16 18" fill="none">
      <path d="M13.04 9.27c-.03-2.7 2.2-4 2.3-4.07-1.26-1.84-3.22-2.1-3.92-2.13-1.67-.17-3.25.98-4.1.98-.84 0-2.15-.96-3.53-.93C2 3.15.4 4.13-.49 5.7c-1.78 3.06-.45 7.6 1.28 10.1.85 1.22 1.85 2.6 3.17 2.55 1.27-.05 1.75-.83 3.29-.83 1.53 0 1.97.83 3.32.8 1.37-.02 2.24-1.24 3.08-2.47.97-1.42 1.37-2.8 1.4-2.87-.03-.01-2.68-1.03-2.71-4.07z M10.6 1.6c.7-.85 1.17-2.04.84-3.2-1 .04-2.22.67-2.94 1.52-.65.76-1.22 1.97-1.07 3.1 1.11.09 2.25-.57 3.17-1.42z" transform="translate(0,1)" fill="currentColor"/>
    </svg>
  );
}

/* ---------- How It Works ---------- */
const STEPS = [
  { num: '01', title: 'Pick your moments', desc: 'Drop in a video or a handful of photos. The app finds your best frames automatically.', illo: 'illo-1', kind: 'stack' },
  { num: '02', title: 'Choose a style', desc: 'Twelve hand-tuned themes — from soft watercolor to vintage Polaroid to clean minimal.', illo: 'illo-2', kind: 'palette' },
  { num: '03', title: 'Preview it move', desc: 'Watch your flipbook come to life. Tweak the timing, captions, and cover.', illo: 'illo-3', kind: 'phone' },
  { num: '04', title: 'Share or print', desc: 'Export a GIF, an MP4, a PDF — or order a real printed flipbook to your door.', illo: 'illo-4', kind: 'share' },
];

function HowItWorks() {
  return (
    <section id="how">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">How it works</span>
          <h2 className="section-title">Four steps. <em>About a minute.</em></h2>
          <p className="section-sub">From a folder of photos to something you'll actually keep — without learning any software.</p>
        </div>
        <div className="steps">
          {STEPS.map((s, i) => (
            <div className="step-card reveal" key={i} style={{transitionDelay: `${i * 80}ms`}}>
              <div className={`step-illo ${s.illo}`}>
                <span className="step-num">STEP {s.num}</span>
                {s.kind === 'stack' && <div className="illo-stack"><i/><i/><i/></div>}
                {s.kind === 'palette' && <div className="illo-palette"><span/><span/><span/><span/><span/></div>}
                {s.kind === 'phone' && <div className="illo-phone"><div className="illo-phone-screen"/></div>}
                {s.kind === 'share' && <div className="illo-share"><i>↑</i><i>♥</i><i>✦</i><i>✉</i></div>}
              </div>
              <div className="step-title">{s.title}</div>
              <div className="step-desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Features ---------- */
function Features() {
  return (
    <section id="features" style={{background: 'linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%)'}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Built into every flipbook</span>
          <h2 className="section-title">Small details, <em>big feelings.</em></h2>
        </div>
        <div className="features">
          <div className="feature big reveal">
            <span className="feature-tag" style={{color: 'var(--rose-ink)'}}>Themes · 12 styles</span>
            <h3 className="feature-title">Twelve themes that all feel hand-made.</h3>
            <p className="feature-desc" style={{color: 'var(--rose-ink)'}}>
              Watercolor, polaroid, paper-cutout, vintage book, dreamy gradient. Each one designed with a real illustrator — not an AI.
            </p>
            <div className="feature-visual">
              <div className="theme-chips">
                <div className="theme-chip">Warm</div>
                <div className="theme-chip">Noir</div>
                <div className="theme-chip">Linen</div>
                <div className="theme-chip">Coast</div>
                <div className="theme-chip">Peach</div>
              </div>
            </div>
          </div>

          <div className="feature reveal">
            <span className="feature-tag">Paper feel</span>
            <h3 className="feature-title">Real paper texture.</h3>
            <p className="feature-desc">Subtle grain, soft page bend, ink-on-paper edges. Looks like a thing you'd find in a drawer.</p>
            <div className="feature-visual">
              <div style={{
                width: '100%', height: '120px',
                background: "linear-gradient(135deg, #FFF8F3 0%, #FFE0D2 100%)",
                backgroundImage: "repeating-linear-gradient(45deg, rgba(232,159,140,0.08) 0 2px, transparent 2px 6px)",
                borderRadius: '12px',
                border: '1px solid var(--line)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '24px', color: 'var(--rose-ink)'
              }}>
                ~ paper ~
              </div>
            </div>
          </div>

          <div className="feature reveal">
            <span className="feature-tag">Export</span>
            <h3 className="feature-title">GIF, MP4, PDF.</h3>
            <p className="feature-desc">One tap, three formats. Send to Instagram, Messages, or save to camera roll.</p>
            <div className="feature-visual">
              <div className="export-formats">
                <span className="fmt-pill active">.GIF</span>
                <span className="fmt-pill">.MP4</span>
                <span className="fmt-pill">.PDF</span>
              </div>
            </div>
          </div>

          <div className="feature reveal">
            <span className="feature-tag">Print-on-demand</span>
            <h3 className="feature-title">Hold it in your hand.</h3>
            <p className="feature-desc">Order a real flipbook printed on 300gsm paper, shipped in a few days. From $14.</p>
            <div className="feature-visual">
              <div className="print-vis">
                <div className="print-doc"></div>
              </div>
            </div>
          </div>

          <div className="feature reveal">
            <span className="feature-tag">Dark mode</span>
            <h3 className="feature-title">Always elegant.</h3>
            <p className="feature-desc">A genuine dark theme tuned for late-night memory-scrolling.</p>
            <div className="feature-visual">
              <div className="dark-mini"></div>
            </div>
          </div>

          <div className="feature reveal">
            <span className="feature-tag">Share</span>
            <h3 className="feature-title">Share anywhere.</h3>
            <p className="feature-desc">iMessage, WhatsApp, Instagram, AirDrop. Or get a private link.</p>
            <div className="feature-visual">
              <div className="share-platforms">
                <span className="platform-pill">iMessage</span>
                <span className="platform-pill">Instagram</span>
                <span className="platform-pill">AirDrop</span>
                <span className="platform-pill">Link</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, HowItWorks, Features, HeroFlipbook, AppleGlyph });