// Case study: Hidden Games — In-App Artist Games (Sleigh, Ritmo)
// Structure mirrors Luna case study; adds two sub-sections (one per game).
// Reuses portfolio-a.css + case-study.css for tokens, type, nav, and visual language.
// Adds .csh-* classes for the sub-section headers (defined inline in the html).

const CaseStudyHiddenGames = () => {
  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);
    };
  }, []);

  // Placeholder visual — colored tile with grid overlay + caption.
  // Used until real game screenshots/captures are added.
  const Visual = ({ src, alt = '', tone = '#3D5A6C', caption, aspect = '16 / 10' }) =>
  <div className="cs-ph" style={{ background: tone, aspectRatio: aspect }}>
      {src && <img src={src} alt={alt} className="cs-ph-img" />}
      <div className="cs-ph-grid" data-overlay={src ? 'soft' : 'normal'}>
        {Array.from({ length: 96 }).map((_, j) => <span key={j} />)}
      </div>
      {caption &&
    <div className="cs-ph-cap"><span className="pa-mono">{caption}</span></div>
    }
    </div>;

  return (
    <div ref={rootRef} className="pa-root cs-root" data-screen-label="Case Study — Hidden Games">
      {/* 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">In-App Artist Games</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>Hidden games,</span></span></span>
              <span className="cs-h1-line cs-h1-accent"><span className="pa-mask"><span>igniting fandom</span></span></span>
            </h1>

            <p className="cs-hero-sub" data-reveal="hero-sub" data-on={revealed.has('hero-sub')}>
              Small, deliberate surprises tucked into Amazon Music: easter-egg games built around an artist, found by fans already deep in the catalog.
            </p>
          </div>

          <div className="cs-hero-art" data-reveal="hero-img" data-on={revealed.has('hero-img')}>
            <Visual src="images/hidden-games-hero.jpg" alt="Two phones showing Hidden Games — Sleigh, a snowy Christmas runner with Mariah on a reindeer sleigh, and Ritmo, a J Balvin endless runner through a sunlit city." tone="#B5253A" caption="Sleigh · Ritmo — In-app artist games" aspect="5 / 4" />
          </div>
        </div>

        <dl className="cs-hero-stats" data-reveal="hero-stats" data-on={revealed.has('hero-stats')}>
          <div><dt>Role</dt><dd>UX Designer · visual, interaction, motion, asset creation using AI</dd></div>
          <div><dt>Platform</dt><dd>Mobile · iOS & Android</dd></div>
          <div><dt>Timeline</dt><dd>2024 to 2025</dd></div>
          <div><dt>Status</dt><dd>Both launched</dd></div>
        </dl>
      </section>

      {/* PARAGRAPH 1 — The premise */}
      <section className="cs-story" data-screen-label="02 The premise">
        <div className="cs-story-text" data-reveal="p1" data-on={revealed.has('p1')}>
          <p>
            Fan moments happen in everyday life as we listen to music by our favorite artists, but they also happen in special, unexpected moments. A game hidden inside a music app, triggered when you're already deep in an artist's catalog, lands differently than anything you went looking for. That was the premise behind Amazon Music's in-app artist games, the first of its kind. Players discovered each game via a button on the Now Playing screen.
          </p>
        </div>
      </section>

      {/* PARAGRAPH 2 — Role + collaboration */}
      <section className="cs-story cs-story-tinted" data-screen-label="03 My role">
        <div className="cs-story-text cs-story-text-wide" data-reveal="p2" data-on={revealed.has('p2')}>
          <p>
            The games were designed on a short timeline, making the implementation a highly collaborative process between product, marketing, and engineering. I wore the hat of a game designer: concepting, designing the interaction and motion, and generating assets using Adobe Firefly, Adobe Photoshop, and Figma. The short runway meant being creative with AI: generating asset styles that matched each artist's world without weeks of illustration cycles.
          </p>
        </div>
      </section>

      {/* SUB-SECTION — SLEIGH */}
      <section className="cs-story csh-game" data-screen-label="04 Sleigh">
        <div className="csh-game-head" data-reveal="sleigh-head" data-on={revealed.has('sleigh-head')}>
          <span className="pa-mono csh-game-eyebrow">Game 01 · Dec 2024 & Dec 2025</span>
          <h2 className="csh-game-h">Sleigh, for the Queen of Christmas</h2>
        </div>
        <div className="csh-phones" data-reveal="sleigh-img" data-on={revealed.has('sleigh-img')}>
          <div className="csh-phone">
            <img src="images/sleigh-gameplay.webp" alt="Sleigh gameplay on iPhone — Mariah on a reindeer-pulled sleigh dodging icicles while All I Want For Christmas Is You plays." />
            <span className="csh-phone-cap">Gameplay · in-app</span>
          </div>
          <div className="csh-phone">
            <img src="images/sleigh-highscore.png" alt="Sleigh share screen on iPhone — It's sleigh time! High score 1004, Beat my high score! Play now." />
            <span className="csh-phone-cap">Share screen · high score</span>
          </div>
        </div>
        <div className="cs-story-text" data-reveal="sleigh-p" data-on={revealed.has('sleigh-p')}>
          <p>
            Sleigh was a festive arcade game for the Queen of Christmas, Mariah Carey, inspired by Flappy Bird. Mariah rode a reindeer-pulled sleigh, dodging holiday obstacles while her music played on. Towards the end, fans discovered Mariah's Christmas merch. The response was strong enough that we ran it twice — December 2024 and again December 2025.
          </p>
        </div>
      </section>

      {/* SUB-SECTION — RITMO */}
      <section className="cs-story cs-story-tinted csh-game" data-screen-label="05 Ritmo">
        <div className="csh-game-head" data-reveal="ritmo-head" data-on={revealed.has('ritmo-head')}>
          <span className="pa-mono csh-game-eyebrow">Game 02 · Nov 2025</span>
          <h2 className="csh-game-h">Ritmo, a celebration of culture</h2>
        </div>
        <div className="csh-phones" data-reveal="ritmo-img" data-on={revealed.has('ritmo-img')}>
          <div className="csh-phone csh-screen">
            <video
              src="images/ritmo-gameplay.mp4"
              autoPlay
              loop
              muted
              playsInline
              aria-label="Ritmo gameplay — an endless runner featuring an animated J Balvin character running past Medellín-inspired environments." />
            <span className="csh-phone-cap">Gameplay · endless runner</span>
          </div>
          <div className="csh-phone csh-screen">
            <img src="images/ritmo-splash.png" alt="Ritmo splash screen — animated J Balvin character above the RITMO logo with the byline J × Balvin." />
            <span className="csh-phone-cap">Splash · J × Balvin</span>
          </div>
        </div>
        <div className="cs-story-text" data-reveal="ritmo-p" data-on={revealed.has('ritmo-p')}>
          <p>
            Ritmo came next, a more expansive build around J Balvin. A full endless runner celebrating Latin culture, with environments inspired by Medellín, J Balvin's hometown. The visual language drew from his bold aesthetic: saturated color, graphic forms, kinetic energy. J Balvin became the first Latin artist to headline an in-app Amazon Music game, and described the project as "a celebration of our culture." Fan response matched that energy.
          </p>
        </div>
      </section>

      {/* OUTCOME — artist + fan response */}
      <section className="cs-story cs-story-dark" data-screen-label="06 Response">
        <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">
            Both games were received so well by the artists that they themselves posted the games on their official social media accounts. Fan response was immediate and warm: the joy of stumbling onto an easter-egg game, inside an app you were already in, drove listening hours, merch engagement, and social sharing without a single push notification.
          </p>
        </div>
      </section>

      {/* MARKETING & FAN RESPONSE — real receipts */}
      <section className="csh-fans" data-screen-label="07 Marketing & fan responses">
        <div className="csh-fans-head" data-reveal="fans-head" data-on={revealed.has('fans-head')}>
          <span className="pa-mono csh-fans-eyebrow">Out in the wild</span>
          <h2 className="csh-fans-h">Marketing &amp; fan responses.</h2>
          <p className="csh-fans-sub">The games went up on billboards in Miami and Times Square, landed on Mariah Carey's official channels, and lit up fan posts in the wild.</p>
        </div>

        <div className="csh-fans-grid" data-reveal="fans-grid" data-on={revealed.has('fans-grid')}>
          {/* Card 1 — Ritmo Miami billboard */}
          <div className="csh-fan-card csh-fan-span-tall">
            <div className="csh-fan-shot">
              <img src="images/ritmo-billboard-miami.jpeg" alt="Ritmo billboard in Brickell, Miami — featuring J Balvin character above the RITMO logo, Amazon Music branding, and a QR code." />
            </div>
            <div className="csh-fan-meta">
              <span className="csh-fan-badge csh-fan-badge-marketing">Billboard</span>
              <span className="csh-fan-handle">Miami · Brickell</span>
            </div>
          </div>

          {/* Card 2 — Ritmo Times Square billboard */}
          <div className="csh-fan-card csh-fan-span-tall">
            <div className="csh-fan-shot">
              <img src="images/ritmo-billboard-times-square.jpeg" alt="Ritmo wraparound billboard in Times Square, NYC — Exclusive game, RITMO, Amazon Music, with a Listen & play QR code." />
            </div>
            <div className="csh-fan-meta">
              <span className="csh-fan-badge csh-fan-badge-marketing">Billboard</span>
              <span className="csh-fan-handle">Times Square · NYC</span>
            </div>
          </div>

          {/* Card 3 — Sleigh Mariah Carey IG post via Amazon Music */}
          <div className="csh-fan-card csh-fan-span-tall">
            <div className="csh-fan-shot">
              <video
                src="images/sleigh-ig-amazonmusic.mp4"
                autoPlay
                loop
                muted
                playsInline
                preload="metadata"
                aria-label="Instagram post by Amazon Music featuring Mariah Carey's Sleigh game." />
            </div>
            <div className="csh-fan-meta">
              <span className="csh-fan-badge csh-fan-badge-instagram">Instagram</span>
              <span className="csh-fan-handle">@amazonmusic × Mariah Carey</span>
            </div>
          </div>

          {/* Card 4 — Sleigh Facebook fan post */}
          <div className="csh-fan-card csh-fan-span-tall">
            <div className="csh-fan-shot">
              <img src="images/sleigh-fb-fan-post.png" alt="Facebook post about Mariah Carey's Sleigh game by Man Quarantino — 'It's sleigh time!' artwork with caption celebrating the Queen of Christmas's new holiday game." />
            </div>
            <div className="csh-fan-meta">
              <span className="csh-fan-badge csh-fan-badge-facebook">Facebook</span>
              <span className="csh-fan-handle">@ManQuarantino · fan post</span>
            </div>
          </div>
        </div>
      </section>

      {/* NEXT PROJECT */}
      <section className="cs-next" data-screen-label="08 Next project">
        <div className="cs-next-inner" data-reveal="next" data-on={revealed.has('next')}>
          <a href="luna.html" className="cs-next-card">
            <div className="cs-next-thumb" style={{ background: '#3D5A6C' }}>
              <div className="cs-ph-grid">
                {Array.from({ length: 96 }).map((_, j) => <span key={j} />)}
              </div>
            </div>
            <div className="cs-next-copy">
              <span className="pa-mono cs-next-eyebrow">Next project</span>
              <h3 className="cs-next-h">Couch Gaming · Amazon Luna</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 — copied from homepage */}
      <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.CaseStudyHiddenGames = CaseStudyHiddenGames;