// Case study: FanQuest — gamified trivia campaign inside Amazon Music.
// Reuses portfolio-a.css + case-study.css for tokens, type, nav, and visual language.
// Adds .csfq-* classes (defined inline in the html) for FanQuest-specific
// compositions: hero video showcase, pair, themes bleed, bonus loop, journey row.

const CaseStudyFanquest = () => {
  const [scrollY, setScrollY] = React.useState(0);
  const [navHidden, setNavHidden] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [revealed, setRevealed] = React.useState(new Set());
  const lastY = React.useRef(0);
  const rootRef = React.useRef(null);

  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    // Robust reveal: bounding-box check on scroll + initial passes (no IntersectionObserver dependency)
    const checkReveal = () => {
      const h = root.clientHeight;
      const rootTop = root.getBoundingClientRect().top;
      const add = [];
      root.querySelectorAll('[data-reveal]').forEach((el) => {
        const r = el.getBoundingClientRect();
        const relTop = r.top - rootTop;
        if (relTop < h * 0.92 && r.bottom - rootTop > 0) add.push(el.dataset.reveal);
      });
      if (add.length) setRevealed((prev) => {
        const next = new Set(prev);
        let changed = false;
        add.forEach((k) => { if (!next.has(k)) { next.add(k); changed = true; } });
        return changed ? next : prev;
      });
    };
    const onScroll = () => {
      const y = root.scrollTop;
      setScrollY(y);
      setNavHidden(y > lastY.current && y > 120);
      lastY.current = y;
      checkReveal();
    };
    root.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', checkReveal);
    checkReveal();
    const t1 = setTimeout(checkReveal, 120);
    const t2 = setTimeout(checkReveal, 400);
    return () => {
      root.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', checkReveal);
      clearTimeout(t1); clearTimeout(t2);
    };
  }, []);

  return (
    <div ref={rootRef} className="pa-root cs-root" data-screen-label="Case Study — FanQuest">
      {/* FLOATING NAV — same as homepage */}
      <nav className={`pa-nav ${navHidden ? 'is-hidden' : ''} ${scrollY > 40 ? 'is-scrolled' : ''}`}>
        <div className="pa-nav-inner">
          <a className="pa-mark" href="index.html">
            <span className="pa-mark-avatar">
              <img className="pa-mark-photo" src="images/bhavya-portrait.jpg" alt="Bhavya Parashar" style={{ objectPosition: '48% 22%' }} />
            </span>
            <span className="pa-mark-name">Bhavya Parashar</span>
          </a>
          <div className="pa-nav-links">
            <a href="index.html#work">Work</a>
            <a href="about.html">About</a>
            <a href="arts.html" className="pa-nav-link-end">Art</a>
          </div>
          <button className="pa-hamburger" aria-label="Open menu" onClick={() => setMenuOpen(true)}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
      </nav>

      {/* MOBILE DRAWER */}
      <div className={`pa-drawer-backdrop ${menuOpen ? 'is-open' : ''}`} onClick={() => setMenuOpen(false)} />
      <div className={`pa-drawer ${menuOpen ? 'is-open' : ''}`} role="dialog" aria-modal="true">
        <div className="pa-drawer-header">
          <a className="pa-mark" href="index.html" onClick={() => setMenuOpen(false)}>
            <span className="pa-mark-avatar">
              <img className="pa-mark-photo" src="images/bhavya-portrait.jpg" alt="Bhavya Parashar" />
            </span>
            <span className="pa-mark-name">Bhavya Parashar</span>
          </a>
          <button className="pa-drawer-close" aria-label="Close menu" onClick={() => setMenuOpen(false)}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M5 5l10 10M15 5l-10 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </button>
        </div>
        <nav className="pa-drawer-nav">
          <a href="index.html" onClick={() => setMenuOpen(false)}>Home</a>
          <a href="index.html#work" onClick={() => setMenuOpen(false)}>Work</a>
          <a href="about.html" onClick={() => setMenuOpen(false)}>About</a>
          <a href="arts.html" onClick={() => setMenuOpen(false)}>Art</a>
        </nav>
      </div>

      {/* Persistent back chip */}
      <a href="index.html#work" className={`cs-back-chip ${scrollY > 80 ? 'is-shown' : ''}`}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M11 3L3 11M3 11H9M3 11V5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
        <span>All work</span>
      </a>

      {/* HERO */}
      <section className="pa-section cs-hero" data-screen-label="01 Hero">
        <div className="cs-hero-meta" data-reveal="hero-meta" data-on={revealed.has('hero-meta')}>
          <a href="index.html#work" className="cs-crumb">
            <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
              <path d="M11 3L3 11M3 11H9M3 11V5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
            </svg>
            <span>Selected work</span>
          </a>
          <span className="pa-mono cs-crumb-sep">/</span>
          <span className="pa-mono cs-crumb-current">FanQuest</span>
        </div>

        <div className="cs-hero-grid">
          <div className="cs-hero-text">
            <h1 className="cs-h1" data-reveal="h1" data-on={revealed.has('h1')}>
              <span className="cs-h1-line"><span className="pa-mask"><span>Play, win,</span></span></span>
              <span className="cs-h1-line cs-h1-accent"><span className="pa-mask"><span>discover, repeat</span></span></span>
            </h1>

            <p className="cs-hero-sub" data-reveal="hero-sub" data-on={revealed.has('hero-sub')}>
              A gamified trivia campaign inside Amazon Music: weekly genre themes, $2M+ in prizes, and a listening loop that fed itself.
            </p>
          </div>

          <div className="cs-hero-art csfq-hero-art" data-reveal="hero-img" data-on={revealed.has('hero-img')}>
            <img
              className="csfq-hero-photo"
              src="images/fq-hero.png"
              alt="A person holding a phone in a dark room, viewing a sponsored Amazon Music Instagram post for FanQuest — 'Play music trivia. Win epic prizes.'" />
          </div>
        </div>

        <dl className="cs-hero-stats" data-reveal="hero-stats" data-on={revealed.has('hero-stats')}>
          <div><dt>Role</dt><dd>UX Designer · end-to-end concept, visual, interaction, motion</dd></div>
          <div><dt>Platform</dt><dd>Mobile · iOS & Android</dd></div>
          <div><dt>Timeline</dt><dd>2025</dd></div>
          <div><dt>Status</dt><dd>Launched · hundreds of thousands of plays</dd></div>
        </dl>
      </section>

      {/* PARA 1 — what it is + prizes */}
      <section className="cs-story" data-screen-label="02 What it is">
        <div className="cs-story-text" data-reveal="p1" data-on={revealed.has('p1')}>
          <p>
            FanQuest was a gamified trivia campaign inside Amazon Music: music knowledge questions, weekly genre themes, and over $2M in prizes including concert tickets, Amazon Music subscriptions, and exclusive merch.
          </p>
        </div>

        <div className="csfq-figure" data-reveal="p1-art" data-on={revealed.has('p1-art')}>
        <div className="csfq-pile">
          <figure className="csfq-pile-card csfq-pile-back">
            <img
              src="images/fq-insta-post.jpeg"
              alt="Sponsored Instagram post by @amazonmusic — 'Play music trivia. Win epic prizes.' with a montage of prizes including a t-shirt, vinyl, concert tickets, earbuds, and gift cards, and a teal 'Play FanQuest' button." />
          </figure>

          <figure className="csfq-pile-card csfq-pile-front">
            <div className="csfq-phone-mock">
              <span className="csfq-phone-notch" aria-hidden="true"></span>
              <video
                src="images/fq-marketing.mp4"
                autoPlay
                loop
                muted
                playsInline
                preload="metadata"
                aria-label="FanQuest marketing video — Play music trivia. Win epic prizes. Animated promo running in-app." />
            </div>
          </figure>
        </div>
          <figcaption className="cs-bleed-cap csfq-figure-cap"><span className="pa-mono">Fig.</span>FanQuest marketing: Instagram ads</figcaption>
        </div>
      </section>

      {/* PARA 2 — the loop: weekly themes + listening unlock */}
      <section className="cs-story cs-story-tinted" data-screen-label="03 The loop">
        <div className="cs-story-text cs-story-text-wide" data-reveal="p2" data-on={revealed.has('p2')}>
          <p>
            Weekly genre themes meant the experience was always fresh. Country fans, hip-hop heads, and rock fans, each had a reason to return. A listening unlock mechanic deepened the loop further: stream a specific playlist, earn bonus trivia questions. Listening and playing fed each other naturally.
          </p>
        </div>

        <div className="cs-story-bleed" data-reveal="themes-art" data-on={revealed.has('themes-art')}>
          <div className="csfq-themes-wrap">
            <img
              className="csfq-themes-img"
              src="images/fq-themes.png"
              alt="Three FanQuest theme splash screens side-by-side — Yacht Rock Years in orange, Boom Bap Beats in cyan, and Country Heat in yellow — each with the theme name repeated as a tessellating background pattern." />
          </div>
          <figcaption className="cs-bleed-cap csfq-themes-cap"><span className="pa-mono">Fig.</span>Weekly Genre themes</figcaption>
        </div>

        <div className="csfq-bonus" data-reveal="bonus-art" data-on={revealed.has('bonus-art')}>
          <div className="csfq-bonus-text">
            <span className="pa-mono csfq-eyebrow">The listening unlock</span>
            <p className="csfq-bonus-p">
              Stream the playlist of the week. Unlock bonus trivia. The loop you finished feeding the loop you started.
            </p>
            <div className="csfq-bonus-steps">
              <span><span className="csfq-step-n">01</span> Listen to the unlock playlist</span>
              <span><span className="csfq-step-n">02</span> Bonus questions appear</span>
              <span><span className="csfq-step-n">03</span> More plays, more entries, more prizes</span>
            </div>
          </div>
          <figure className="csfq-bonus-phone">
            <div className="csfq-pair-screen">
              <video
                src="images/fq-bonus-question.mp4"
                autoPlay
                loop
                muted
                playsInline
                preload="metadata"
                aria-label="In-app bonus question journey — playlist unlock animation revealing a bonus trivia question after listening." />
            </div>
            <figcaption className="cs-bleed-cap"><span className="pa-mono">Fig.</span>Bonus question journey</figcaption>
          </figure>
        </div>
      </section>

      {/* PARA 3 — end-to-end design */}
      <section className="cs-story" data-screen-label="04 My role">
        <div className="cs-story-text" data-reveal="p3" data-on={revealed.has('p3')}>
          <p>
            I designed the experience end-to-end from question flow, answer interactions, feedback states, progression mechanics, campaign entry points, to end states. The visual language was bold, colorful, and kinetic, with animations that made every correct answer feel like a small celebration. Every decision pointed toward the same outcome: keep it fast, keep it frictionless, make finishing one round feel effortless and starting the next feel inevitable.
          </p>
        </div>

        <div className="csfq-figure" data-reveal="journey" data-on={revealed.has('journey')}>
        <div className="csfq-journey">
          <figure className="csfq-journey-phone">
            <div className="csfq-journey-screen csfq-journey-screen-video">
              <video
                src="images/fq-onboarding.mp4"
                autoPlay
                loop
                muted
                playsInline
                preload="metadata"
                aria-label="FanQuest onboarding carousel — animated intro explaining how to play, what you can win, and how to start." />
            </div>
          </figure>

          <figure className="csfq-journey-phone">
            <div className="csfq-journey-screen">
              <img
                src="images/fq-trivia-question.jpeg"
                alt="A FanQuest trivia question screen — Yacht Rock Years theme, asking 'Which American guitarist replaced Syd Barrett in Pink Floyd during U.S. tours?' with four answer chips (Frank Zappa, Eric Clapton, David Gilmour, Jeff Beck) on a black background." />
            </div>
          </figure>

          <figure className="csfq-journey-phone">
            <div className="csfq-journey-screen csfq-journey-screen-video">
              <video
                src="images/fq-sweepstake.mp4"
                autoPlay
                loop
                muted
                playsInline
                preload="metadata"
                aria-label="In-app sweepstake prize reveal animation — confetti and an animated prize wheel celebrating an entry win." />
            </div>
          </figure>

          <figure className="csfq-journey-phone">
            <div className="csfq-journey-screen">
              <img
                src="images/fq-prize-3months.jpeg"
                alt="A FanQuest win-state screen — 'Crank up the music: You won 3 months FREE of Amazon Music Unlimited!' with an animated gift box revealing the gift card." />
            </div>
          </figure>
        </div>
          <figcaption className="cs-bleed-cap"><span className="pa-mono">Fig.</span>Left—Right: Onboarding, Question, Sweepstake prize, Instant reward</figcaption>
        </div>
      </section>

      {/* OUTCOME (dark) */}
      <section className="cs-story cs-story-dark" data-screen-label="05 Outcome">
        <div className="cs-story-text cs-story-text-wide" data-reveal="p-outcome" data-on={revealed.has('p-outcome')}>
          <p className="cs-story-p-light">Thousands of music lovers joined the daily fun, testing their trivia skills to win prizes.  

          </p>
          <p className="cs-story-p-light">The campaign's performance proved that creating habits that were rewarded boosted engagement. It also helped the business acquire new customers whose perception of Amazon Music improved because of FanQuest.</p>
        </div>
      </section>

      {/* NEXT PROJECT — cycle back to Hidden Games */}
      <section className="cs-next" data-screen-label="06 Next project">
        <div className="cs-next-inner" data-reveal="next" data-on={revealed.has('next')}>
          <a href="hidden-games.html" className="cs-next-card">
            <div className="cs-next-thumb" style={{ background: '#7C5E3C' }}>
              <img src="images/hidden-games-hero.jpg" alt="Hidden Games — in-app artist games" className="cs-next-img" />
            </div>
            <div className="cs-next-copy">
              <span className="pa-mono cs-next-eyebrow">Next project</span>
              <h3 className="cs-next-h">Hidden Games · In-app artist games</h3>
              <span className="cs-next-cta">
                <span>View case study</span>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
              </span>
            </div>
          </a>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="pa-footer" id="contact">
        <div className="pa-footer-cols">
          <div>
            <span className="pa-mono pa-foot-h6">Sitemap</span>
            <ul>
              <li><a href="luna.html">Couch Gaming</a></li>
              <li><a href="fanquest.html">Music Trivia Game</a></li>
              <li><a href="hidden-games.html">Hidden Games</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="arts.html">Art</a></li>
            </ul>
          </div>
          <div>
            <span className="pa-mono pa-foot-h6">Contact me</span>
            <ul>
              <li><a href="mailto:bhavya.parashar96@gmail.com">Email ↗</a></li>
              <li><a href="https://www.linkedin.com/in/bparashar96/" target="_blank" rel="noopener noreferrer">LinkedIn ↗</a></li>
            </ul>
          </div>
        </div>
        <div className="pa-footer-base">
          <span className="pa-foot-wordmark">Made with Claude Code and Claude Design, with a dash of human brain power.</span>
          <span className="pa-mono">© 2026 · Bhavya Parashar</span>
        </div>
      </footer>
    </div>);

};

window.CaseStudyFanquest = CaseStudyFanquest;