// SNIGDHA — main composition
const { useEffect, useMemo, useRef, useState } = React;

function App() {
  const data = window.SNIGDHA_DATA;
  const [open, setOpen] = useState(null); // active artwork
  const [accent, setAccent] = useState("#a8825a");
  const [loaded, setLoaded] = useState(false);
  const [scrollPct, setScrollPct] = useState(0);

  // ambient accent — shifts with hovered tile
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", accent);
  }, [accent]);

  // loading reveal
  useEffect(() => {
    const id = setTimeout(() => setLoaded(true), 1200);
    return () => clearTimeout(id);
  }, []);

  // scroll progress
  useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setScrollPct(max > 0 ? window.scrollY / max : 0);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const accentTo = (hex) => setAccent(hex);

  const featured = useMemo(() => data.artworks.filter(a => a.featured), [data]);

  return (
    <div className="root">
      <Cursor />

      <Loader visible={!loaded} />

      <Nav scrollPct={scrollPct} />

      {/* HERO */}
      <section id="hero" className="hero">
        <InkField accent={accent} />
        <div className="hero-vignette" />
        <div className="hero-grid">
          <div className="hero-eyebrow">
            <span>Studio · {data.artworks.length} works in catalogue</span>
            <span>Estd. 2010 · Delhi</span>
          </div>

          <h1 className="hero-mark" aria-label="SNIGDHA">
            {"SNIGDHA".split("").map((ch, i) => (
              <span key={i} className="ch" style={{ "--i": i }}>{ch}</span>
            ))}
          </h1>

          <div className="hero-foot">
            <p className="hero-tag"><em>Art beyond the canvas.</em><br/>Surfaces become emotion.</p>
            <div className="hero-actions">
              <Magnetic>
                <a href="#works" className="btn btn-primary" data-cursor="Enter">Enter the studio<span className="arr">↘</span></a>
              </Magnetic>
              <Magnetic>
                <a href="#commission" className="btn btn-ghost" data-cursor="Commission">Commission a piece</a>
              </Magnetic>
            </div>
          </div>
        </div>

        <div className="hero-scroll">
          <span>scroll · 01 of 07</span>
          <div className="hero-scroll-line" />
        </div>
      </section>

      {/* MANIFESTO */}
      <section id="manifesto" className="manifesto">
        <Reveal as="p" className="man-eyebrow">Manifesto · 02</Reveal>
        <Reveal as="h2" className="man-text" delay={120}>
          I do not paint pictures. <em>I build the rooms</em> in which a feeling
          can put down its weight — on linen, on lacquer, on the back of a
          jacket, on a wall the morning sun will find again at <em>eleven minutes past four</em>.
        </Reveal>
        <Reveal className="man-foot" delay={240}>
          <div><span className="lbl">Works delivered</span><span className="val">132</span></div>
          <div><span className="lbl">Continents</span><span className="val">04</span></div>
          <div><span className="lbl">Hours / piece, avg.</span><span className="val">128</span></div>
          <div><span className="lbl">Surfaces accepted</span><span className="val">∞</span></div>
        </Reveal>
      </section>

      {/* WORKS */}
      <section id="works" className="works">
        <header className="section-head">
          <div>
            <span className="sh-num">III.</span>
            <span className="sh-eyebrow">Works · selected 2024 — 2025</span>
          </div>
          <h2 className="sh-title">An <em>editorial</em> of recent surfaces.</h2>
          <p className="sh-body">
            Each piece is an original. Click any tile for the full sheet —
            medium, dimensions, hours, and a configurable price.
          </p>
        </header>
        <Gallery artworks={data.artworks} onOpen={setOpen} accentTo={accentTo} />
      </section>

      {/* COMMISSION */}
      <section id="commission" className="commission-sec">
        <CommissionBuilder surfaces={data.surfaces} />
      </section>

      {/* PROCESS */}
      <section id="process" className="process">
        <header className="section-head">
          <span className="sh-eyebrow">Process · 05</span>
          <h2 className="sh-title">From <em>listening</em> to delivery, in seven movements.</h2>
        </header>
        <ol className="process-list">
          {data.process.map((p, i) => (
            <Reveal as="li" key={p.n} className="proc-row" delay={i * 60}>
              <span className="proc-n">{p.n}</span>
              <span className="proc-l">{p.label}</span>
              <span className="proc-b">{p.body}</span>
              <span className="proc-line" />
            </Reveal>
          ))}
        </ol>
      </section>

      {/* AR PREVIEW */}
      <section id="ar" className="ar">
        <div className="ar-grid">
          <div className="ar-copy">
            <span className="sh-eyebrow">Spatial · 06</span>
            <h2 className="sh-title">See it on <em>your wall</em><br/>before it leaves the studio.</h2>
            <p className="sh-body">
              Open any work on a phone and tap <em>View in your space</em>. The
              piece scales to true size, locks to the wall, and lets you walk
              around it. iOS Quick Look · Android Scene Viewer.
            </p>
            <Magnetic>
              <a href="#works" className="btn btn-primary" data-cursor="AR">View a sample in AR <span className="arr">↗</span></a>
            </Magnetic>
            <ul className="ar-feat">
              <li>
                <div className="arf-body">
                  <h4>True 1:1 scaling</h4>
                  <p>The artwork loads at its real-world size, so a 48-inch canvas reads exactly that on your wall — no guesswork, no surprises on delivery day.</p>
                </div>
              </li>
              <li>
                <div className="arf-body">
                  <h4>Frame on the fly</h4>
                  <p>Cycle through walnut, oak, brass and museum-grade options live in the room. The frame that wins is almost never the one you'd pick on a swatch card.</p>
                </div>
              </li>
              <li>
                <div className="arf-body">
                  <h4>Lit by your room</h4>
                  <p>The preview reads your ambient light and time of day, then re-shades the piece accordingly — south-facing morning, north-facing dusk, candlelight at dinner.</p>
                </div>
              </li>
              <li>
                <div className="arf-body">
                  <h4>Walk around it</h4>
                  <p>Lock the placement and step back, sideways, closer in. The piece holds its position on the wall while you decide whether the sofa needs to move.</p>
                </div>
              </li>
            </ul>
          </div>

          <div className="ar-stage">
            <ArRoom accent={accent} piece={featured[0]} />
          </div>
        </div>
      </section>

      {/* ABOUT */}
      <section id="about" className="about">
        <Reveal as="div" className="about-grid">
          <p className="about-eyebrow">About · 07</p>
          <h2 className="about-name">Snigdha.</h2>
          <p className="about-body">
            I was trained as a painter and dis-trained by everything else —
            jackets that asked to be painted, a console with a crack that
            wanted to be filled with gold, a wall in a friend's apartment that
            wouldn't stop staring at me. I work where the surface tells me to.
          </p>
          <p className="about-body">
            The studio is small, deliberate, and slow. I take on twelve to
            twenty pieces a year. If we work together, we work together for a
            long time — most clients return for a second wall.
          </p>
          <ul className="about-press">
            <li><span>2025</span> Solo · Aravali House, Jaipur</li>
            <li><span>2024</span> Group · Object &amp; Surface, Lisbon</li>
            <li><span>2024</span> Print · The Plinth Quarterly, Issue 14</li>
            <li><span>2023</span> Mural · Hotel Bocage, Pondicherry</li>
          </ul>
        </Reveal>
      </section>

      {/* FOOTER / CTA */}
      <footer className="foot">
        <div className="foot-mark">
          <span>SNIGDHA</span>
          <span className="foot-mark-sub">studio · 2025</span>
        </div>
        <div className="foot-cta">
          <p>Have a wall, a jacket, a room with a problem?</p>
          <Magnetic>
            <a href="#commission" className="btn btn-primary" data-cursor="Commission">Begin a commission ↗</a>
          </Magnetic>
        </div>
        <div className="foot-cols">
          <div>
            <h4>Studio</h4>
            <a href="#about">About</a>
            <a href="#process">Process</a>
            <a href="#commission">Commission</a>
          </div>
          <div>
            <h4>Catalogue</h4>
            <a href="#works">Works 2024-25</a>
            <a href="#works">Available</a>
            <a href="#works">Editions</a>
          </div>
          <div>
            <h4>Contact</h4>
            <a href="#">studio@snigdha.art</a>
            <a href="#">+91 22 — — — —</a>
            <a href="#">@snigdha.studio</a>
          </div>
          <div>
            <h4>Letters</h4>
            <p className="foot-news">A short note every other month — new works, a sketch, a paragraph from the studio.</p>
            <form className="foot-form" onSubmit={(e)=>e.preventDefault()}>
              <input type="email" placeholder="your email" />
              <button type="submit" data-cursor="Send">↗</button>
            </form>
          </div>
        </div>
        <div className="foot-base">
          <span>© Snigdha Studio MMXXV</span>
          <span>Original site — no templates were harmed.</span>
          <span>Built in the studio.</span>
        </div>
      </footer>

      {open && <ArtworkDetail piece={open} onClose={() => setOpen(null)} accentTo={accentTo} />}
    </div>
  );
}

function Loader({ visible }) {
  return (
    <div className={`loader ${visible ? "" : "is-gone"}`}>
      <div className="loader-mark">
        <span>S</span><span>N</span><span>I</span><span>G</span><span>D</span><span>H</span><span>A</span>
      </div>
      <div className="loader-bar"><div className="loader-fill" /></div>
      <div className="loader-meta">composing surfaces · loading studio</div>
    </div>
  );
}

function Nav({ scrollPct }) {
  return (
    <nav className="nav">
      <a href="#hero" className="nav-mark" data-cursor="Top">SNIGDHA</a>
      <ul className="nav-links">
        <li><a href="#works" data-cursor="">Works</a></li>
        <li><a href="#commission" data-cursor="">Commission</a></li>
        <li><a href="#process" data-cursor="">Process</a></li>
        <li><a href="#about" data-cursor="">About</a></li>
      </ul>
      <a href="#commission" className="nav-cta" data-cursor="Begin">
        <span className="nav-cta-dot" />Available · book a call
      </a>
      <div className="nav-prog" style={{ transform: `scaleX(${scrollPct})` }} />
    </nav>
  );
}

// Faux AR room — wall, mounted artwork in perspective, ambient floor
function ArRoom({ accent, piece }) {
  const [pos, setPos] = useState({ x: 50, y: 42, scale: 1 });
  if (!piece) return null;

  return (
    <div className="ar-room">
      <div className="ar-room-floor" />
      <div className="ar-room-wall">
        <div className="ar-light" style={{ background: `radial-gradient(80% 60% at 50% 30%, ${accent}33, transparent 70%)` }} />
        <div
          className="ar-art"
          style={{
            left: pos.x + "%",
            top: pos.y + "%",
            transform: `translate(-50%, -50%) scale(${pos.scale})`,
          }}
        >
          <div className="ar-art-frame">
            <ArtSurface piece={piece} density={1.0} />
          </div>
          <div className="ar-art-shadow" />
        </div>
        <div className="ar-overlays">
          <div className="ar-corner ar-c-tl" /><div className="ar-corner ar-c-tr" />
          <div className="ar-corner ar-c-bl" /><div className="ar-corner ar-c-br" />
          <div className="ar-readout">
            <div><span>SCALE</span><b>1 : 1</b></div>
            <div><span>WALL</span><b>locked</b></div>
            <div><span>LIGHT</span><b>auto</b></div>
          </div>
        </div>
      </div>

      <div className="ar-controls">
        <div className="arc">
          <span>X</span>
          <input type="range" min="20" max="80" value={pos.x} onChange={(e)=>setPos(p=>({...p, x: +e.target.value}))} style={{ accentColor: accent }} />
        </div>
        <div className="arc">
          <span>Y</span>
          <input type="range" min="25" max="60" value={pos.y} onChange={(e)=>setPos(p=>({...p, y: +e.target.value}))} style={{ accentColor: accent }} />
        </div>
        <div className="arc">
          <span>SIZE</span>
          <input type="range" min="60" max="160" value={pos.scale*100} onChange={(e)=>setPos(p=>({...p, scale: +e.target.value/100}))} style={{ accentColor: accent }} />
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);