// === Flipbook sections: social, buzz, app preview, FAQ, footer ===

/* ---------- Social proof masonry ---------- */
const MASONRY = [
  { tone: 'photo-fam',      shape: 'tall',   tag: "Mother's Day",  img: "https://images.unsplash.com/photo-1542037104857-ffbb0b9155fb?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-travel',   shape: 'square', tag: "Lisbon · 2024", img: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-pet',      shape: 'wide',   tag: "Mochi's year",  img: "https://images.unsplash.com/photo-1583337130417-3346a1be7dee?auto=format&fit=crop&w=700&q=80" },
  { tone: 'photo-couple',   shape: 'tall',   tag: "Five years us", img: "https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-birthday', shape: 'square', tag: "Eva turns 4",   img: "https://images.unsplash.com/photo-1558636508-e0db3814bd1d?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-beach',    shape: 'xtall',  tag: "Summer 25",     img: "https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-fam',      shape: 'wide',   tag: "Sunday lunch",  img: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?auto=format&fit=crop&w=700&q=80" },
  { tone: 'photo-couple',   shape: 'square', tag: "Engaged ♥",     img: "https://images.unsplash.com/photo-1529290130-4ca3753253ae?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-travel',   shape: 'tall',   tag: "Tokyo nights",  img: "https://images.unsplash.com/photo-1542051841857-5f90071e7989?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-pet',      shape: 'square', tag: "First walk",    img: "https://images.unsplash.com/photo-1587300003388-59208cc962cb?auto=format&fit=crop&w=600&q=80" },
  { tone: 'photo-birthday', shape: 'wide',   tag: "Sweet sixteen", img: "https://images.unsplash.com/photo-1464349095431-e9a21285b5f3?auto=format&fit=crop&w=700&q=80" },
  { tone: 'photo-beach',    shape: 'tall',   tag: "Costa Rica",    img: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80" },
];

function Social() {
  return (
    <section id="social">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">From the community</span>
          <h2 className="section-title">What people are <em>making.</em></h2>
          <p className="section-sub">280,000 flipbooks created this month. Here's a tiny slice.</p>
        </div>
        <div className="masonry reveal">
          {MASONRY.map((m, i) => (
            <div className="masonry-item" key={i}>
              <div className={`masonry-photo ${m.shape} ${m.tone}`}>
                <img src={m.img} alt="" loading="lazy"
                     style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}
                     onError={(e)=>e.target.style.display='none'} />
                <div className="masonry-label">
                  <span className="masonry-label-tag">{m.tag}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Buzz cards (Reddit / Twitter style — original wording) ---------- */
const BUZZ = [
  {
    body: <>okay I did <em>not</em> expect a flipbook app to make me cry on a tuesday. but here we are.</>,
    glyph: '♥'
  },
  {
    body: <>found this in the App Store random scroll. made one of my dog growing up. I've watched it like <em>thirty times</em>.</>,
    glyph: '✨'
  },
  {
    body: <>made a flipbook of mom's birthday and printed it. <em>she keeps showing it to people</em>. ten dollars best spent this year.</>,
    glyph: '♥'
  },
  {
    body: <>this feels like a real product. clean UI, no ads, no weird subscription wall. <em>just makes a nice thing.</em></>,
    glyph: '✴'
  },
  {
    body: <>my partner asked what I was watching. I showed him my flipbook of our cat. he immediately made one of <em>his nephew</em>.</>,
    glyph: '♥'
  },
  {
    body: <>whoever designed this got every detail right. the paper texture, the page sound, the tiny shadow. <em>actual craft.</em></>,
    glyph: '✨'
  },
];

function Buzz() {
  return (
    <section className="buzz" id="buzz">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">The buzz</span>
          <h2 className="section-title">People won't <em>stop talking</em> about it.</h2>
        </div>
        <div className="buzz-grid">
          {BUZZ.map((b, i) => (
            <div className="buzz-card reveal" key={i} style={{transitionDelay: `${i * 60}ms`}}>
              <div className="buzz-quote-mark">“</div>
              <div className="buzz-body">{b.body}</div>
              <div className="buzz-glyph">{b.glyph}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- App preview phones ---------- */
function AppPreview() {
  return (
    <section id="preview" style={{background: 'linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%)'}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Inside the app</span>
          <h2 className="section-title">Designed to <em>disappear.</em></h2>
          <p className="section-sub">Every screen has one job. No tutorials, no popups, no clutter. Just you and your memories.</p>
        </div>
        <div className="app-preview-wrap reveal">
          <div className="phones">
            {/* Phone 1 — Home */}
            <div className="phone">
              <div className="phone-screen">
                <div className="screen-status"><span>9:41</span><span>● ●</span></div>
                <div className="screen-content">
                  <div className="screen-head">
                    <div className="screen-brand">Flipbook</div>
                    <div className="screen-avatar"></div>
                  </div>
                  <div className="screen-h">Good morning,<br/>Lila ✦</div>
                  <div className="screen-card">
                    <div className="screen-card-photo photo-fam"><div className="photo-shape"></div></div>
                    <div className="screen-card-title">Mother's Day</div>
                    <div className="screen-card-sub">26 pages · made yesterday</div>
                  </div>
                  <div className="screen-card">
                    <div className="screen-card-photo photo-pet" style={{height: '70px'}}><div className="photo-shape"></div></div>
                    <div className="screen-card-title">Mochi turns two</div>
                    <div className="screen-card-sub">14 pages · last week</div>
                  </div>
                </div>
                <div className="screen-tab-bar">
                  <span className="tab-dot on"></span>
                  <span className="tab-dot"></span>
                  <span className="tab-dot"></span>
                  <span className="tab-dot"></span>
                </div>
              </div>
            </div>

            {/* Phone 2 — Create flow (center, larger) */}
            <div className="phone">
              <div className="phone-screen">
                <div className="screen-status"><span>9:41</span><span>● ●</span></div>
                <div className="screen-content">
                  <div className="screen-head">
                    <div style={{fontFamily: 'var(--mono)', fontSize: '10px', letterSpacing: '0.1em', color: 'var(--muted)'}}>STEP 2 OF 4</div>
                    <div style={{fontSize: '11px', color: 'var(--coral)'}}>Next →</div>
                  </div>
                  <div className="screen-h">Pick a theme.</div>
                  <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', marginTop: '8px'}}>
                    <div style={{height: '88px', background: 'linear-gradient(160deg, #FFD4C2, #E89F8C)', borderRadius: '10px', position: 'relative', boxShadow: '0 0 0 2px var(--coral)'}}>
                      <span style={{position: 'absolute', bottom: '6px', left: '8px', color: '#fff', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '11px'}}>Warm</span>
                    </div>
                    <div style={{height: '88px', background: 'linear-gradient(160deg, #C7869A, #6B3A40)', borderRadius: '10px', position: 'relative'}}>
                      <span style={{position: 'absolute', bottom: '6px', left: '8px', color: '#fff', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '11px'}}>Noir</span>
                    </div>
                    <div style={{height: '88px', background: 'linear-gradient(160deg, #FFE0D2, #C8A088)', borderRadius: '10px', position: 'relative'}}>
                      <span style={{position: 'absolute', bottom: '6px', left: '8px', color: '#fff', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '11px'}}>Linen</span>
                    </div>
                    <div style={{height: '88px', background: 'linear-gradient(160deg, #B8D4E8, #6B7C8F)', borderRadius: '10px', position: 'relative'}}>
                      <span style={{position: 'absolute', bottom: '6px', left: '8px', color: '#fff', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '11px'}}>Coast</span>
                    </div>
                  </div>
                  <div style={{
                    marginTop: '14px', background: 'var(--ink)', color: 'var(--cream)',
                    borderRadius: '100px', padding: '10px', textAlign: 'center',
                    fontSize: '11px', fontWeight: 500
                  }}>Continue →</div>
                </div>
              </div>
            </div>

            {/* Phone 3 — Store */}
            <div className="phone">
              <div className="phone-screen">
                <div className="screen-status"><span>9:41</span><span>● ●</span></div>
                <div className="screen-content">
                  <div className="screen-head">
                    <div className="screen-brand" style={{fontSize: '16px'}}>Store</div>
                    <div style={{fontFamily: 'var(--mono)', fontSize: '10px', color: 'var(--muted)'}}>BAG · 1</div>
                  </div>
                  <div className="screen-h" style={{fontSize: '20px'}}>Printed flipbooks.</div>
                  <div style={{display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '6px'}}>
                    <div style={{display: 'flex', gap: '10px', padding: '10px', background: '#fff', borderRadius: '12px', border: '1px solid var(--line)'}}>
                      <div className="photo-couple" style={{width: '54px', height: '64px', borderRadius: '6px'}}><div className="photo-shape"></div></div>
                      <div style={{flex: 1}}>
                        <div style={{fontSize: '11px', fontWeight: 600}}>Pocket size</div>
                        <div style={{fontSize: '9.5px', color: 'var(--muted)'}}>3.5 × 4.5 in</div>
                        <div style={{fontSize: '11px', color: 'var(--coral)', fontWeight: 600, marginTop: '4px'}}>$14</div>
                      </div>
                    </div>
                    <div style={{display: 'flex', gap: '10px', padding: '10px', background: '#fff', borderRadius: '12px', border: '1px solid var(--line)'}}>
                      <div className="photo-fam" style={{width: '54px', height: '64px', borderRadius: '6px'}}><div className="photo-shape"></div></div>
                      <div style={{flex: 1}}>
                        <div style={{fontSize: '11px', fontWeight: 600}}>Classic</div>
                        <div style={{fontSize: '9.5px', color: 'var(--muted)'}}>5 × 7 in · hardcover</div>
                        <div style={{fontSize: '11px', color: 'var(--coral)', fontWeight: 600, marginTop: '4px'}}>$28</div>
                      </div>
                    </div>
                    <div style={{display: 'flex', gap: '10px', padding: '10px', background: '#fff', borderRadius: '12px', border: '1px solid var(--line)'}}>
                      <div className="photo-travel" style={{width: '54px', height: '64px', borderRadius: '6px'}}><div className="photo-shape"></div></div>
                      <div style={{flex: 1}}>
                        <div style={{fontSize: '11px', fontWeight: 600}}>Gift box</div>
                        <div style={{fontSize: '9.5px', color: 'var(--muted)'}}>3 books · wrapped</div>
                        <div style={{fontSize: '11px', color: 'var(--coral)', fontWeight: 600, marginTop: '4px'}}>$54</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style={{
            display: 'flex', justifyContent: 'center', gap: '24px', marginTop: '40px',
            fontFamily: 'var(--mono)', fontSize: '11px', letterSpacing: '0.12em',
            textTransform: 'uppercase', color: 'var(--muted)'
          }}>
            <span>Home</span><span>·</span><span>Create</span><span>·</span><span>Store</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
const FAQS = [
  { q: "Can I create a flipbook from a video?", a: "Yes — drop in any video up to 5 minutes. The app picks the strongest frames automatically, or you can scrub through and pick them by hand. iPhone, Android, and exported social videos all work." },
  { q: "Can I create from photos?", a: "Of course. Pick anywhere from 10 to 300 photos. Reorder by drag, add captions, and the app handles the rest." },
  { q: "Can I export as a GIF or MP4?", a: "Yep. One tap, three formats — GIF for messaging, MP4 for social, and PDF for printing. No watermark on any export." },
  { q: "Can I order a printed flipbook?", a: "We print real flipbooks on 300gsm uncoated paper. Pocket size from $14, classic hardcover from $28. Ships in 3–5 days worldwide." },
  { q: "Is there a free version?", a: "The first three flipbooks are free, fully featured. After that it's $4.99/month or $39/year, with no extra fees on exports. Printed books are sold separately." },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Questions, answered</span>
          <h2 className="section-title">Good to <em>know.</em></h2>
        </div>
        <div className="faq-wrap reveal">
          {FAQS.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>
  );
}

/* ---------- Final CTA + Footer ---------- */
function FinalCTA() {
  return (
    <section className="final-cta" id="download">
      <div className="container">
        <h2 className="reveal">Make one. <em>Right now.</em></h2>
        <p className="reveal">Your first three flipbooks are free. We promise the first one will surprise you.</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 style={{marginTop: '28px', fontFamily: 'var(--mono)', fontSize: '11px', letterSpacing: '0.12em', color: 'var(--rose-ink)', textTransform: 'uppercase'}}>
          Free · No ads · iOS 16+ · Android 12+
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <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="occasions/fathers-day.html">Father's Day</a></li>
              <li><a href="occasions/mothers-day.html">Mother's Day</a></li>
              <li><a href="occasions/christmas.html">Christmas</a></li>
              <li><a href="occasions/valentines-day.html">Valentine's Day</a></li>
              <li><a href="occasions/anniversary.html">Anniversary</a></li>
              <li><a href="occasions/birthday.html">Birthday</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#features">Features</a></li>
              <li><a href="#preview">Inside the app</a></li>
              <li><a href="#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>
  );
}

/* ---------- Upcoming Occasions ---------- */
function Occasions() {
  // Read OCCASIONS from window (loaded via occasions-data.js)
  const list = (typeof window !== 'undefined' && window.OCCASIONS) ? window.OCCASIONS : [];

  // Sort: upcoming dated first by daysAhead, then evergreen
  const dated = list.filter(o => o.daysAhead !== null).sort((a, b) => a.daysAhead - b.daysAhead);
  const evergreen = list.filter(o => o.daysAhead === null);
  const ordered = [...dated, ...evergreen];

  return (
    <section id="occasions" className="occasions-section">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Gift ideas</span>
          <h2 className="section-title">Made for <em>the days that matter.</em></h2>
          <p className="section-sub">Pre-built flipbook themes, printing timelines, and gift framing for every occasion. Pick yours.</p>
        </div>
        <div className="occasions-grid">
          {ordered.map((o, i) => (
            <a
              key={o.slug}
              href={`occasions/${o.slug}.html`}
              className="occasion-card reveal"
              data-occ={o.slug}
              style={{transitionDelay: `${i * 60}ms`}}
            >
              <div>
                <div className="occasion-card-head">
                  <span className="occasion-card-date">{o.name}</span>
                  {o.daysAhead !== null ? (
                    <span className="occasion-card-days">
                      {o.daysAhead < 1 ? 'Today' : o.daysAhead === 1 ? 'Tomorrow' : `In ${o.daysAhead} days`}
                    </span>
                  ) : (
                    <span className="occasion-card-days">Evergreen</span>
                  )}
                </div>
                <div className="occasion-card-name">{o.headline.split(o.headlineEm)[0]}<em>{o.headlineEm}</em>{o.headline.split(o.headlineEm)[1]}</div>
                <div className="occasion-card-tag">{o.sub.split('.')[0]}.</div>
              </div>
              <span className="occasion-card-cta">Make a gift</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Occasions });