// Case study: Amazon Luna GameNight
// Reuses portfolio-a.css for tokens, type, nav, and visual language.
// Adds case-study-specific layout via .cs-* classes (defined in case-study.css).
//
// Content note: prose comes from Bhavya's case-study text. Used verbatim.

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

  // Image-backed visual (matches homepage card aesthetic with grid overlay)
  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 — Amazon Luna GameNight">
      {/* 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">Amazon Luna GameNight</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>TV gaming</span></span></span>
              <span className="cs-h1-line cs-h1-accent"><span className="pa-mask"><span>without barriers</span></span></span>
            </h1>

            <p className="cs-hero-sub" data-reveal="hero-sub" data-on={revealed.has('hero-sub')}>A revamped cloud-gaming that offers a wide variety of top-tier games.

            </p>
          </div>

          <div className="cs-hero-art" data-reveal="hero-img" data-on={revealed.has('hero-img')}>
            <img
              src="images/luna-hero-family.png"
              alt="A family in a living room playing GameNight on TV, using phones as controllers."
              className="cs-hero-art-img" />
            
          </div>
        </div>

        <dl className="cs-hero-stats" data-reveal="hero-stats" data-on={revealed.has('hero-stats')}>
          <div><dt>Role</dt><dd>UX Designer · concept design, information architecture, TV UI, cross-device UX</dd></div>
          <div><dt>Platform</dt><dd>TV</dd></div>
          <div><dt>Timeline</dt><dd>2025</dd></div>
          <div><dt>Status</dt><dd>Launched</dd></div>
        </dl>
      </section>

      {/* PARAGRAPH 1 — What GameNight is */}
      <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>
            GameNight is a collection of local multiplayer games built for the living room, included with Prime at no extra cost. No controllers required: players scan a QR code on the TV and their phone becomes the controller. The service launched as the centerpiece of <a className="cs-inline-link" href="https://luna.amazon.com/home" target="_blank" rel="noopener noreferrer">Amazon Luna</a>'s major redesign, targeting the massive share of Prime households that includes someone who would play games if the barrier to entry weren't so high.
          </p>
        </div>
        <div className="cs-story-bleed" data-reveal="img1" data-on={revealed.has('img1')}>
          <img
            src="images/luna-home-screen.png"
            alt="Luna GameNight home screen on Fire TV."
            className="cs-bleed-img" />
          <figcaption className="cs-bleed-cap"><span className="pa-mono">Fig.</span>Luna Games: Home</figcaption>
          
        </div>
      </section>

      {/* PARAGRAPH 2 — My role (text only) */}
      <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>
            I was part of the design team responsible for shaping the GameNight experience, focused on the TV interface and the overall service concept. I developed user flows and personas to ground design decisions in the real diversity of our audience: experienced players and complete newcomers, families and friend groups, people playing together in the same room for the first time. That research-grounded foundation shaped everything from how game browsing was organized to how much text appeared on screen.
          </p>
        </div>
      </section>

      {/* PARAGRAPH 3 — TV UI */}
      <section className="cs-story" data-screen-label="04 TV UI">
        <div className="cs-story-bleed" data-reveal="img3" data-on={revealed.has('img3')}>
          <img
            src="images/luna-search-screen.png"
            alt="Luna GameNight search screen designed for the 10-foot viewing distance."
            className="cs-bleed-img" />
          <figcaption className="cs-bleed-cap"><span className="pa-mono">Fig.</span>Search</figcaption>
          
        </div>
        <div className="cs-story-text" data-reveal="p3" data-on={revealed.has('p3')}>
          <p>The 10-foot viewing distance demands bigger type, higher contrast, simpler navigation, and focus states that are immediately legible from a couch. I applied these principles rigorously while keeping the overall feel warm and inviting. I explored multiple concepts for key pages including Home, Game Night home, and Search. Focus was on ensuring that discovery and exploration resonated with a casual gamer.

          </p>
        </div>
      </section>

      {/* PARAGRAPH 4 — Concept exploration + insight */}
      <section className="cs-story cs-story-tinted" data-screen-label="05 Concept">
        <div className="cs-story-bleed" data-reveal="img4" data-on={revealed.has('img4')}>
          <img
            src="images/luna-collections.png"
            alt="Luna GameNight Collections screen on Fire TV, showing social-context categories like Quick Play, Clash & Compete, and Working Together."
            className="cs-bleed-img" />
          <figcaption className="cs-bleed-cap"><span className="pa-mono">Fig.</span>GN — Game Night</figcaption>
          
        </div>
      </section>

      {/* PARAGRAPH 5 — Press */}
      <section className="cs-story cs-story-dark" data-screen-label="06 Press">
        <div className="cs-story-text cs-story-text-wide" data-reveal="p5" data-on={revealed.has('p5')}>
          <p className="cs-story-p-light">
            The launch received significant press coverage. Engadget highlighted GameNight's controller-free approach as Amazon's move to reach casual players. Variety noted it as part of a strategy to bring approachable multiplayer gaming to Prime's 200M+ member base. Amazon's own GM described it as delivering on 'easy access' as a core product value.
          </p>
          <div className="cs-media">
            <span className="pa-mono cs-media-label">In media</span>
            <div className="cs-media-links">
              <a href="https://www.amazongamestudios.com/en-us/news/articles/new-amazon-luna" target="_blank" rel="noopener noreferrer">TechCrunch<span aria-hidden="true"> ↗</span></a>
              <a href="https://www.amazongamestudios.com/en-us/news/articles/new-amazon-luna" target="_blank" rel="noopener noreferrer">Amazon Games Studio<span aria-hidden="true"> ↗</span></a>
            </div>
          </div>
        </div>
      </section>

      {/* NEXT PROJECT */}
      <section className="cs-next" data-screen-label="07 Next project">
        <div className="cs-next-inner" data-reveal="next" data-on={revealed.has('next')}>
          <a href="fanquest.html" className="cs-next-card">
            <div className="cs-next-thumb" style={{ background: '#5B6B4A' }}>
              <img src="images/fq-hero.png" alt="Music Trivia Game — FanQuest campaign" 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">Music Trivia Game</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.CaseStudyLuna = CaseStudyLuna;