/* ART ADDA — app shell, router, nav, footer, tweaks */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroDir": "wordmark",
  "accent": "#b4452e",
  "displayFont": "Bodoni Moda",
  "bodyFont": "Archivo"
}/*EDITMODE-END*/;

const NAV = [
  { id: "home", label: "Home" },
  { id: "vision", label: "Vision" },
  { id: "editions", label: "Editions" },
  { id: "gallery", label: "Gallery" },
  { id: "artists", label: "Artists" },
  { id: "guidelines", label: "Guidelines" },
  { id: "contact", label: "Contact" },
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useStateApp(() => (location.hash || "#home").replace("#", "") || "home");
  const [artistId, setArtistId] = useStateApp(null);
  const [eventId, setEventId] = useStateApp(null);
  const [menuOpen, setMenuOpen] = useStateApp(false);

  // apply tweaks to :root
  useEffectApp(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    // contrast text on accent
    r.style.setProperty("--accent-ink", "#f4f1ea");
    r.style.setProperty("--serif", `"${t.displayFont}", Georgia, serif`);
    r.style.setProperty("--sans", `"${t.bodyFont}", system-ui, sans-serif`);
  }, [t.accent, t.displayFont, t.bodyFont]);

  const go = (p) => {
    setArtistId(null);
    setEventId(null);
    setPage(p);
    setMenuOpen(false);
    location.hash = p;
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  };

  const openArtist = (id) => {
    setEventId(null);
    setArtistId(id);
    setPage("artists");
    location.hash = "artists";
    window.scrollTo({ top: 0 });
  };

  const openEdition = (id) => {
    setArtistId(null);
    setEventId(id);
    setPage("editions");
    location.hash = "editions";
    window.scrollTo({ top: 0 });
  };

  useEffectApp(() => { window.__openEdition = openEdition; }, []);

  useEffectApp(() => {
    const onHash = () => setPage((location.hash || "#home").replace("#", "") || "home");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  let view;
  if (page === "home") view = <Home go={go} heroDir={t.heroDir} openEdition={openEdition} />;
  else if (page === "vision") view = <Vision go={go} />;
  else if (page === "editions") view = <Editions go={go} eventId={eventId} setEventId={setEventId} openArtist={openArtist} />;
  else if (page === "gallery") view = <Gallery go={go} />;
  else if (page === "artists") view = <Artists go={go} artistId={artistId} setArtistId={setArtistId} />;
  else if (page === "submit") view = <Submit go={go} />;
  else if (page === "contact") view = <Contact go={go} />;
  else if (page === "guidelines") view = <Guidelines go={go} />;
  else view = <Home go={go} heroDir={t.heroDir} openEdition={openEdition} />;

  return (
    <React.Fragment>
      <Nav page={page} go={go} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
      <main>{view}</main>
      <Footer go={go} />
      <ArtAddaTweaks t={t} setTweak={setTweak} />
    </React.Fragment>
  );
}

function Nav({ page, go, menuOpen, setMenuOpen }) {
  return (
    <nav className="nav">
      <div className="nav__inner">
        <button className="brand" onClick={() => go("home")}>
          <img className="brand__logo" src="assets/logo-ink.png" alt="" />
          <span>Art Adda</span>
          <small>Est. 2025</small>
        </button>
        <div className="nav__links">
          {NAV.map((n) => (
            <button key={n.id} className={"nav__link" + (page === n.id ? " is-active" : "")} onClick={() => go(n.id)}>{n.label}</button>
          ))}
          <a className="btn nav__cta" style={{ padding: "11px 20px" }} onClick={() => go("submit")}>Submit</a>
        </div>
        <button className="nav__burger" onClick={() => setMenuOpen((m) => !m)} aria-label="Menu">
          <span /><span /><span />
        </button>
      </div>
      {menuOpen && (
        <div className="mobile-menu">
          {NAV.concat([{ id: "submit", label: "Submit your work" }]).map((n) => (
            <button key={n.id} onClick={() => go(n.id)}>{n.label}</button>
          ))}
        </div>
      )}
    </nav>
  );
}

function Footer({ go }) {
  const D = window.ARTADDA;
  return (
    <footer className="footer">
      <div className="wrap">
        <div style={{ paddingTop: "clamp(50px,8vw,110px)" }}>
          <img className="footer__logo" src="assets/logo-ink.png" alt="Art Adda" />
        </div>
        <div className="footer__grid">
          <div className="footer__col">
            <h4>The popup</h4>
            <p style={{ color: "#cfccc4", maxWidth: "34ch", lineHeight: 1.6 }}>
              A monthly Sunday art popup at {D.venue.name}, {D.venue.place}, {D.venue.city}. Showcasing the artists of the Malhar community since March 2025.
            </p>
          </div>
          <div className="footer__col">
            <h4>Explore</h4>
            {NAV.map((n) => <button key={n.id} onClick={() => go(n.id)}>{n.label}</button>)}
          </div>
          <div className="footer__col">
            <h4>Reach us</h4>
            <a href={`https://wa.me/91${D.contact.phone.replace(/\D/g, "").slice(-10)}`} target="_blank" rel="noreferrer">{D.contact.lead}</a>
            <a href={`https://instagram.com/${D.contact.instagram}`} target="_blank" rel="noreferrer">@{D.contact.instagram}</a>
            <button onClick={() => go("submit")}>Submit your work</button>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© {new Date().getFullYear()} Art Adda · {D.venue.place}</span>
          <span>{D.venue.cadence} · {D.venue.morning} &amp; {D.venue.evening}</span>
        </div>
      </div>
    </footer>
  );
}

/* ---- Tweaks panel ---- */
function ArtAddaTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Home hero direction" />
      <TweakRadio
        label="Layout"
        value={t.heroDir}
        options={["wordmark", "editorial", "index"]}
        onChange={(v) => setTweak("heroDir", v)}
      />
      <p className="faint mono" style={{ fontSize: 10.5, lineHeight: 1.5, letterSpacing: ".04em", margin: "2px 0 0" }}>
        Wordmark = giant type · Editorial = split + images · Index = gallery contents list
      </p>

      <TweakSection label="Accent" />
      <TweakColor
        label="Accent colour"
        value={t.accent}
        options={["#b4452e", "#131210", "#1f6f5c", "#2d4a7c", "#8a5a2b"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <p className="faint mono" style={{ fontSize: 10.5, letterSpacing: ".04em", margin: "2px 0 0" }}>
        Pick ink for a strict black-and-white gallery.
      </p>

      <TweakSection label="Typography" />
      <TweakSelect
        label="Display font"
        value={t.displayFont}
        options={["Bodoni Moda", "Playfair Display", "DM Serif Display", "Libre Caslon Display"]}
        onChange={(v) => setTweak("displayFont", v)}
      />
      <TweakSelect
        label="Body font"
        value={t.bodyFont}
        options={["Archivo", "Space Grotesk", "Work Sans", "IBM Plex Sans"]}
        onChange={(v) => setTweak("bodyFont", v)}
      />
    </TweaksPanel>
  );
}

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