// Art page — Bhavya Parashar. Pottery gallery, centered editorial layout.
// Reuses portfolio-a.css tokens + floating nav; adds .art-* classes (art.css).
const HOME = 'index.html';

const pieces = [
  { src: 'images/art-bowls-green.jpg',           cs: 2, rs: 2, pos: '50% 50%', cap: 'Brushwork bowls' },
  { src: 'images/art-mug-raw.jpg',               cs: 1, rs: 2, pos: '52% 48%', cap: 'Mug, off the wheel' },
  { src: 'images/art-bowl-blueyellow.jpg',       cs: 1, rs: 2, pos: '50% 58%', cap: 'Blue & yellow bowl' },
  { src: 'images/art-collection-rug.jpg',        cs: 2, rs: 2, pos: '50% 50%', cap: 'A season of pieces' },
  { src: 'images/art-vase-textured.jpg',         cs: 1, rs: 2, pos: '50% 50%', cap: 'Coiled textured vase' },
  { src: 'images/art-dishes-scalloped-blue.jpg', cs: 1, rs: 2, pos: '50% 52%', cap: 'Scalloped blue dishes' },
  { src: 'images/art-bowl-goldspeckle.jpg',      cs: 2, rs: 2, pos: '50% 52%', cap: 'Speckled gold bowl' },
  { src: 'images/art-collection-grass.jpg',      cs: 2, rs: 2, pos: '50% 52%', cap: 'Glaze day, in the sun' },
  { src: 'images/art-divided-dish.jpg',          cs: 1, rs: 1, pos: '50% 50%', cap: 'Divided catch-all' },
  { src: 'images/art-scalloped-dish.jpg',        cs: 1, rs: 1, pos: '50% 58%', cap: 'Carved scalloped dish' },
  { src: 'images/art-shallow-bowl.jpg',          cs: 1, rs: 1, pos: '50% 45%', cap: 'Wide shallow bowl' },
  { src: 'images/art-vase-brown.jpg',            cs: 1, rs: 1, pos: '50% 42%', cap: 'Tapered vase' },
];

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

  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    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.94 && 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 art-root">
      {/* NAV */}
      <nav className={`pa-nav ${navHidden ? 'is-hidden' : ''} ${scrollY > 40 ? 'is-scrolled' : ''}`}>
        <div className="pa-nav-inner">
          <a className="pa-mark" href={HOME}>
            <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>
          <div className="pa-nav-links">
            <a href={`${HOME}#work`}>Work</a>
            <a href="about.html">About</a>
            <a href="#top" className="pa-nav-link-end">Art</a>
          </div>
        </div>
      </nav>

      {/* HERO / INTRO */}
      <section className="art-hero" id="top">
        <span className="art-eyebrow pa-mono" data-reveal="eb" data-on={revealed.has('eb')}>Art · Pottery</span>
        <h1 className="art-h1" data-reveal="h1" data-on={revealed.has('h1')} style={{ '--reveal-delay': '60ms' }}>
          Off-screen, <span className="art-h1-accent">in clay.</span>
        </h1>
        <div className="art-intro" data-reveal="intro" data-on={revealed.has('intro')} style={{ '--reveal-delay': '140ms' }}>
          <p>
            I started throwing pottery three years ago, a continuation of the sculpture I fell for in high school. Away from screens, clay teaches me patience and resilience; the wheel doesn't care how the week went.
          </p>
          <p>
            It also keeps my mind open. Shaping something physical (its color, pattern, texture, form, the way it sits in the hand) feeds straight back into how I design digital products: color theory, rhythm, ergonomics, and the feel of a thing well made.
          </p>
        </div>
      </section>

      {/* GALLERY */}
      <section className="art-board-wrap">
        <div className="art-board">
          {pieces.map((p, i) => (
            <figure
              key={i}
              className="art-tile"
              data-reveal={`tile-${i}`}
              data-on={revealed.has(`tile-${i}`)}
              style={{ '--reveal-delay': `${(i % 4) * 60}ms`, gridColumn: `span ${p.cs}`, gridRow: `span ${p.rs}` }}
            >
              <div className="art-shot">
                <img src={p.src} alt={p.cap} loading="lazy" style={{ objectPosition: p.pos }} />
              </div>
            </figure>
          ))}
        </div>
        <p className="art-foot-note" data-reveal="note" data-on={revealed.has('note')}>
          A working archive; more pieces find their way here as they come out of the kiln.
        </p>
      </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={`${HOME}#work`}>Work</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="#top">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.ArtPage = ArtPage;