// === Shared OccasionPage component (used by every /occasions/X.html page) ===
const { useState: useStateOP, useEffect: useEffectOP } = React;

function OccasionPage({ data }) {
  const css = {
    '--occ-bg': data.palette.bg,
    '--occ-accent': data.palette.accent,
    '--occ-accent-deep': data.palette.accentDeep,
    '--occ-ink': data.palette.heroInk,
    '--occ-pill-bg': data.palette.pillBg,
  };
  return (
    <div className="occ-root" style={css}>
      <OccHero data={data} />
      <OccReasons data={data} />
      <OccExamples data={data} />
      <OccTimeline data={data} />
      <OccQuote data={data} />
      <OccFaq data={data} />
      <OccCta data={data} />
      <OccFooter />
    </div>
  );
}

function OccHero({ data }) {
  return (
    <section className="occ-hero">
      <div className="occ-hero-bg"></div>
      <div className="hero-grain"></div>
      <div className="container occ-hero-inner">
        <a href="../index.html" className="occ-back">← All gifts</a>
        <span className="occ-pill">
          <span className="occ-pill-dot">✦</span>
          {data.eyebrowDate}
          {data.daysAhead !== null && data.daysAhead < 60 && (
            <span className="occ-pill-days"> · {data.daysAhead} days away</span>
          )}
        </span>
        <h1 className="occ-title">
          {data.headline.split(data.headlineEm)[0]}
          <em>{data.headlineEm}</em>
          {data.headline.split(data.headlineEm)[1]}
        </h1>
        <p className="occ-sub">{data.sub}</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" 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>
        </div>
        <OccHeroVisual data={data} />
      </div>
    </section>
  );
}

function OccHeroVisual({ data }) {
  // Animated stack of three "gift" flipbooks fanned out
  const [hover, setHover] = useStateOP(false);
  return (
    <div className="occ-hero-visual" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      {data.examples.slice(0, 3).map((ex, i) => (
        <div
          key={i}
          className="occ-gift-book"
          style={{
            transform: `translateX(${(i - 1) * (hover ? 130 : 60)}px) rotate(${(i - 1) * (hover ? 8 : 4)}deg) translateY(${hover ? -8 : 0}px)`,
            zIndex: 3 - Math.abs(i - 1),
          }}
        >
          <div className="occ-gift-book-cover">
            <img src={ex.img} alt="" loading="lazy" onError={(e)=>e.target.style.display='none'} />
            <div className="occ-gift-book-fold"></div>
            <div className="occ-gift-book-pages"></div>
            <div className="occ-gift-book-label">
              <div className="occ-gift-book-tag">{ex.tag}</div>
            </div>
          </div>
        </div>
      ))}
      <span className="heart" style={{top: '20%', left: '15%', color: 'var(--occ-accent)', animationDelay: '0s'}}>♥</span>
      <span className="heart" style={{top: '60%', right: '10%', color: 'var(--occ-accent-deep)', fontSize: '14px', animationDelay: '3s'}}>♥</span>
      <span className="heart" style={{top: '30%', right: '20%', color: 'var(--occ-accent)', fontSize: '12px', animationDelay: '5s'}}>✦</span>
    </div>
  );
}

function OccReasons({ data }) {
  return (
    <section className="occ-reasons">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow" style={{color: 'var(--occ-accent)'}}>Why a flipbook</span>
          <h2 className="section-title">Three reasons it <em style={{color: 'var(--occ-accent)'}}>works.</em></h2>
        </div>
        <div className="occ-reasons-grid">
          {data.reasons.map((r, i) => (
            <div className="occ-reason-card reveal" key={i} style={{transitionDelay: `${i * 80}ms`}}>
              <div className="occ-reason-num" style={{color: 'var(--occ-accent)'}}>0{i + 1}</div>
              <div className="occ-reason-title">{r.title}</div>
              <div className="occ-reason-body">{r.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OccExamples({ data }) {
  return (
    <section className="occ-examples">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow" style={{color: 'var(--occ-accent)'}}>What they look like</span>
          <h2 className="section-title">Other people's <em style={{color: 'var(--occ-accent)'}}>{data.name}</em> flipbooks.</h2>
          <p className="section-sub">Real ones, made and printed in the last few months.</p>
        </div>
        <div className="occ-examples-grid">
          {data.examples.map((ex, i) => (
            <div className="occ-example-card reveal" key={i} style={{transitionDelay: `${i * 60}ms`}}>
              <div className="occ-example-photo">
                <img src={ex.img} alt={ex.caption} loading="lazy" onError={(e)=>e.target.style.display='none'} />
                <div className="occ-example-page-edge"></div>
              </div>
              <div className="occ-example-meta">
                <div className="occ-example-tag" style={{color: 'var(--occ-accent-deep)'}}>{ex.tag}</div>
                <div className="occ-example-caption">{ex.caption}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OccTimeline({ data }) {
  return (
    <section className="occ-timeline">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow" style={{color: 'var(--occ-accent)'}}>If you want it on time</span>
          <h2 className="section-title">From now <em style={{color: 'var(--occ-accent)'}}>to the day.</em></h2>
        </div>
        <div className="occ-timeline-wrap reveal">
          <div className="occ-timeline-line" style={{background: 'var(--occ-accent)'}}></div>
          {data.timeline.map((t, i) => (
            <div className="occ-timeline-row" key={i} style={{transitionDelay: `${i * 80}ms`}}>
              <div className="occ-timeline-dot" style={{background: 'var(--occ-accent)'}}></div>
              <div className="occ-timeline-date">{t.date}</div>
              <div className="occ-timeline-label">{t.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OccQuote({ data }) {
  return (
    <section className="occ-quote" style={{background: 'var(--occ-bg)'}}>
      <div className="container">
        <div className="occ-quote-wrap reveal">
          <div className="occ-quote-mark" style={{color: 'rgba(255,255,255,0.4)'}}>"</div>
          <blockquote className="occ-quote-body">{data.quote.body}</blockquote>
          <div className="occ-quote-attr">— {data.quote.attribution}</div>
        </div>
      </div>
    </section>
  );
}

function OccFaq({ data }) {
  const [open, setOpen] = useStateOP(0);
  return (
    <section className="occ-faq">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow" style={{color: 'var(--occ-accent)'}}>Questions about {data.name.toLowerCase()}</span>
          <h2 className="section-title">Things people <em style={{color: 'var(--occ-accent)'}}>ask us.</em></h2>
        </div>
        <div className="faq-wrap reveal">
          {data.faq.map((f, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                {f.q}
                <span className="faq-toggle"></span>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OccCta({ data }) {
  return (
    <section className="occ-cta" style={{background: 'var(--occ-bg)'}}>
      <div className="container">
        <h2 className="reveal" style={{color: 'var(--occ-ink)'}}>
          Make one for <em style={{color: 'var(--occ-accent-deep)'}}>{data.name.toLowerCase()}</em>. <br />Right now.
        </h2>
        <p className="reveal" style={{color: 'var(--occ-ink)', opacity: 0.85}}>
          Your first three flipbooks are free. The first one takes about five minutes.
        </p>
        <div className="hero-ctas reveal" style={{marginBottom: 0}}>
          <a className="store-badge store-badge-lg" 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-lg" 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>
        </div>
      </div>
    </section>
  );
}

function OccFooter() {
  return (
    <footer style={{borderTop: '1px solid var(--line)'}}>
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">Flipbook</div>
            <p className="footer-tag">A small app that turns the photos on your phone into something you'll want to keep.</p>
          </div>
          <div className="footer-col">
            <h4>Gifts for</h4>
            <ul>
              <li><a href="fathers-day.html">Father's Day</a></li>
              <li><a href="mothers-day.html">Mother's Day</a></li>
              <li><a href="christmas.html">Christmas</a></li>
              <li><a href="valentines-day.html">Valentine's Day</a></li>
              <li><a href="anniversary.html">Anniversary</a></li>
              <li><a href="birthday.html">Birthday</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <ul>
              <li><a href="../index.html#how">How it works</a></li>
              <li><a href="../index.html#features">Features</a></li>
              <li><a href="../index.html#preview">Inside the app</a></li>
              <li><a href="../index.html#download">Download</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <ul>
              <li><a href="mailto:hello@zenbyte.app">Support</a></li>
              <li><a href="https://www.zenbyte.app/privacy/flipbook-maker" target="_blank" rel="noopener">Privacy</a></li>
              <li><a href="https://www.zenbyte.app/terms/flipbook-maker" target="_blank" rel="noopener">Terms</a></li>
              <li><a href="https://www.reddit.com/r/AppGiveaway/comments/1tf20lt/ios4499_lifetime_free_flipbook_maker_videos_to/" target="_blank" rel="noopener">Reddit</a></li>
              <li><a href="https://www.youtube.com/@FlipBookMakerApp" target="_blank" rel="noopener">YouTube</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 ZENBYTE APP AGENCY · ALL RIGHTS RESERVED</span>
          <span>v 2.4.1</span>
        </div>
      </div>
    </footer>
  );
}

// === Sticky nav for occasion pages ===
function OccNav({ data }) {
  useEffectOP(() => {
    const onScroll = () => {
      const nav = document.getElementById('occ-nav');
      if (!nav) return;
      if (window.scrollY > 24) nav.classList.add('scrolled');
      else nav.classList.remove('scrolled');
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className="nav" id="occ-nav">
      <div className="container nav-inner">
        <a href="../index.html" className="brand">
          <span className="brand-mark"></span>
          Flipbook
        </a>
        <div className="nav-links">
          <a href="../index.html#how">How it works</a>
          <a href="../index.html#features">Features</a>
          <a href="../index.html#occasions">Gifts</a>
          <a href="https://apps.apple.com/us/app/flipbook-create-video-gift/id6758916313" target="_blank" rel="noopener" className="nav-cta">Download</a>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { OccasionPage, OccNav });