/* eslint-disable */
/* ============================================================
   app.jsx — Root React component for LiddellWorks
   ============================================================
   Renders the whole single-page portfolio:
     - 3-column header (title / intro / elsewhere-links)
     - Three "wheel carousel" section bands (apps / prints / writing)
     - Footer
     - Overlay drawer (opens when a centre card is clicked)

   This file used to host a full design-time tweaks panel that let
   you switch palettes, type pairings, hero layouts, etc.  In
   production the prototype is locked to the chosen defaults
   (Fog palette + Bricolage type + Green-soft accent + tinted
   section bands + 3-col header), so all of that switching code
   is gone.  Tokens are now defined statically in tokens.css.
   ============================================================ */

const { useEffect } = React;

/* ------------------------------------------------------------
   useReveal
   ------------------------------------------------------------
   Adds the `.in` class to anything tagged `.reveal` once it
   scrolls into view.  Pairs with the .reveal CSS in index.html
   to fade-and-rise each section band as the user scrolls.

   We only run this once on mount.  IntersectionObserver fires
   on every threshold crossing, so we keep the threshold low
   (8%) — the band is "revealed" almost as soon as any sliver of
   it appears.
*/
const useReveal = () => {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) e.target.classList.add('in');
      });
    }, { threshold: 0.08 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
};

/* ------------------------------------------------------------
   App — top-level component
   ------------------------------------------------------------
   Holds:
     - whether the overlay is open (and which item it shows)
     - kicks off scroll-reveal observation
   Everything else is plain markup driven by data.jsx.
*/
const App = () => {
  // Overlay state — `open` controls visibility, `item` and `kind`
  // describe what the overlay should render.  We keep them in
  // separate slots (rather than a single object) so closing the
  // overlay can still animate out with the previous content.
  const [overlayOpen, setOverlayOpen] = React.useState(false);
  const [overlayItem, setOverlayItem] = React.useState(null);
  const [overlayKind, setOverlayKind] = React.useState(null);

  useReveal();

  // Open / close helpers passed down to every card.
  const openOverlay = (item, kind) => {
    setOverlayItem(item);
    setOverlayKind(kind);
    setOverlayOpen(true);
  };
  const closeOverlay = () => setOverlayOpen(false);

  return (
    <>
      {/* ============ HEADER ============ */}
      <header className="site-header">
        <div className="h-title">
          <div className="h-name">
            <span className="accent-mark">◆</span>
            Tom Liddell <span className="dash">—</span> <em>staying curious</em>
          </div>
          <div className="h-subtitle">
            What I'm thinking about doing,<br />
            and doing about my thinking.
          </div>
        </div>

        <div className="h-intro">
          <p>
            Founder &amp; technology enthusiast in London. Recovering sinologist,
            Royal Marines, and banker. Now making apps, 3D-printed objects, and
            the occasional thought piece.
          </p>
        </div>

        <div className="h-links">
          <div className="h-link-label">Elsewhere</div>
          <a className="h-link" href="mailto:tom@liddell.works">
            <span>Email</span><span className="arrow">↗</span>
          </a>
          <a className="h-link" href="#">
            <span>GitHub</span><span className="arrow">↗</span>
          </a>
          <a className="h-link" href="#">
            <span>RSS · Newsletter</span><span className="arrow">↗</span>
          </a>
          <a className="h-link" href="#">
            <span>About</span><span className="arrow">↓</span>
          </a>
        </div>
      </header>

      {/* ============ MAIN — three section bands ============
           Each band uses its own background tint via the
           [data-kind] attribute (see index.html CSS).  The
           `.reveal` class fades each band in on scroll.
      */}
      <main>
        <section className="section-band reveal" data-kind="apps">
          <WheelCarousel
            num="01 — APPS"
            title="App design"
            sub="Quiet products for restless minds."
            items={APPS}
            renderCard={(item, active) => (
              <AppCard item={item} active={active} onOpen={openOverlay} />
            )}
          />
        </section>

        <section className="section-band reveal" data-kind="prints">
          <WheelCarousel
            num="02 — PRINTS"
            title="3D prints"
            sub="Functional objects, mostly."
            items={PRINTS}
            renderCard={(item, active) => (
              <PrintCard item={item} active={active} onOpen={openOverlay} />
            )}
          />
        </section>

        <section className="section-band reveal" data-kind="essays">
          <WheelCarousel
            num="03 — WRITING"
            title="Thought pieces"
            sub="On patience, scale, and small machines."
            items={ESSAYS}
            renderCard={(item, active) => (
              <EssayCard item={item} active={active} onOpen={openOverlay} />
            )}
          />
        </section>
      </main>

      {/* ============ FOOTER ============ */}
      <footer className="footer">
        <div><span className="accent-dot" />LiddellWorks · London · 2026</div>
        <div>v.2026.05 · Available Q3</div>
      </footer>

      {/* The overlay drawer is always mounted; visibility is
          driven by `overlayOpen`.  Keeping it mounted lets the
          close transition run cleanly. */}
      <Overlay
        open={overlayOpen}
        item={overlayItem}
        kind={overlayKind}
        onClose={closeOverlay}
      />
    </>
  );
};

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