/* The Purple Chair — main app shell */

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "paper-ink-plum",
  "displayFont": "Cormorant Garamond",
  "sansFont": "Inter",
  "heroVariant": "anantara",
  "accentTone": "plum",
  "density": "editorial",
  "showPermissionFlags": true
}/*EDITMODE-END*/;

const PALETTES = {
  "paper-ink-plum": {
    label: "Paper · Ink · Plum",
    "--paper": "#FBFAF8",
    "--mist": "#F2F0EC",
    "--line": "#E6E2DB",
    "--ink": "#1B1A1C",
    "--noir": "#0F0E10",
    "--text": "#3A3A3D",
    "--muted": "#8A857E",
    "--plum": "#5A3A55",
  },
  "warm-aubergine": {
    label: "Warm · Aubergine",
    "--paper": "#F7F1E8",
    "--mist": "#EDE5D6",
    "--line": "#DCD2BE",
    "--ink": "#1F1820",
    "--noir": "#0F0B11",
    "--text": "#3A3035",
    "--muted": "#8A7E73",
    "--plum": "#6B2B5C",
  },
  "cool-noir": {
    label: "Cool · Noir",
    "--paper": "#F5F4F1",
    "--mist": "#E8E6E0",
    "--line": "#D4D2CC",
    "--ink": "#14141A",
    "--noir": "#08080C",
    "--text": "#2C2C32",
    "--muted": "#7D7C82",
    "--plum": "#3F3458",
  },
  "sand-clay": {
    label: "Sand · Clay (Desert)",
    "--paper": "#F5EFE2",
    "--mist": "#E9DFC9",
    "--line": "#D6C6A6",
    "--ink": "#2A1F18",
    "--noir": "#1A130E",
    "--text": "#3F3328",
    "--muted": "#8C7A60",
    "--plum": "#7A3A2A",
  },
};

const FONT_PAIRS = {
  "Cormorant Garamond": { display: "'Cormorant Garamond', serif", weights: "300;400;500" },
  "Playfair Display": { display: "'Playfair Display', serif", weights: "400;500" },
  "EB Garamond": { display: "'EB Garamond', serif", weights: "400;500" },
  "DM Serif Display": { display: "'DM Serif Display', serif", weights: "400" },
};
const SANS_PAIRS = {
  "Inter": { sans: "'Inter', sans-serif", weights: "300;400;500" },
  "Manrope": { sans: "'Manrope', sans-serif", weights: "300;400;500" },
  "DM Sans": { sans: "'DM Sans', sans-serif", weights: "300;400;500" },
};

function App() {
  const [tweak, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useStateApp("home");
  const [locale, setLocale] = useStateApp("EN");
  const [enquireOpen, setEnquireOpen] = useStateApp(false);

  // Apply palette
  useEffectApp(() => {
    const p = PALETTES[tweak.palette] || PALETTES["paper-ink-plum"];
    Object.entries(p).forEach(([k, v]) => {
      if (k.startsWith("--")) document.documentElement.style.setProperty(k, v);
    });
  }, [tweak.palette]);

  // Apply fonts
  useEffectApp(() => {
    const d = FONT_PAIRS[tweak.displayFont] || FONT_PAIRS["Cormorant Garamond"];
    const s = SANS_PAIRS[tweak.sansFont] || SANS_PAIRS["Inter"];
    document.documentElement.style.setProperty("--font-display", d.display);
    document.documentElement.style.setProperty("--font-sans", s.sans);
  }, [tweak.displayFont, tweak.sansFont]);

  // Scroll-to-top on page change
  useEffectApp(() => {
    const sc = document.querySelector(".tpc-scroll");
    if (sc) sc.scrollTo({ top: 0, behavior: "instant" });
  }, [page]);

  const go = (next) => {
    setPage(next);
  };

  // route → component
  let view;
  if (page === "home") {
    view = <Home go={go} openEnquire={() => setEnquireOpen(true)} projects={window.PROJECTS} heroVariant={tweak.heroVariant}/>;
  } else if (page === "portfolio") {
    view = <Portfolio go={go} projects={window.PROJECTS} openEnquire={() => setEnquireOpen(true)}/>;
  } else if (page.startsWith("project:")) {
    const id = page.split(":")[1];
    view = <CaseStudy projectId={id} go={go} projects={window.PROJECTS} openEnquire={() => setEnquireOpen(true)}/>;
  } else if (page === "weddings") {
    view = <Hub slug="weddings" title="Weddings." eyebrow="Discipline I" blurb="Intimate ceremonies, multi-day celebrations and destinations — held in-house from first conversation to breakdown."
      projects={window.PROJECTS} go={go} openEnquire={() => setEnquireOpen(true)} heroImg="media/wedding-anantara-qasr-al-sarab.webp"/>;
  } else if (page === "events") {
    view = <Hub slug="events" title="Events & Social." eyebrow="Discipline II" blurb="Milestone celebrations, private dinners and styled gatherings."
      projects={window.PROJECTS} go={go} openEnquire={() => setEnquireOpen(true)} heroImg="media/event-farm-event.webp"/>;
  } else if (page === "brand-events") {
    view = <Hub slug="brand-events" title="Brand Events." eyebrow="Discipline III · Brand Events by The Purple Chair" blurb="Elevated brand experiences, activations and production for luxury Maisons and global brands."
      projects={window.PROJECTS} go={go} openEnquire={() => setEnquireOpen(true)} heroImg="media/event-bulgari-ramadan-majlis-dubai.webp"/>;
  } else if (page === "services") {
    view = <Services go={go} openEnquire={() => setEnquireOpen(true)}/>;
  } else if (page === "about") {
    view = <About go={go} openEnquire={() => setEnquireOpen(true)}/>;
  } else if (page === "press") {
    view = <Press go={go} openEnquire={() => setEnquireOpen(true)}/>;
  } else if (page === "contact") {
    view = <Contact go={go} openEnquire={() => setEnquireOpen(true)}/>;
  }

  return (
    <div className="tpc-scroll" style={{
      height: "100vh", overflow: "auto", background: "var(--paper)",
      direction: locale === "AR" ? "rtl" : "ltr",
    }}>
      <Nav page={page} go={go} locale={locale} setLocale={setLocale} openEnquire={() => setEnquireOpen(true)}/>
      {view}
      <EnquireModal open={enquireOpen} onClose={() => setEnquireOpen(false)}/>

      {/* TWEAKS */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakSelect label="Color system" value={tweak.palette} onChange={(v) => setTweak("palette", v)}
            options={Object.entries(PALETTES).map(([v, p]) => ({ value: v, label: p.label }))}/>
        </TweakSection>
        <TweakSection label="Typography">
          <TweakSelect label="Display serif" value={tweak.displayFont} onChange={(v) => setTweak("displayFont", v)}
            options={Object.keys(FONT_PAIRS).map(v => ({ value: v, label: v }))}/>
          <TweakSelect label="Sans serif" value={tweak.sansFont} onChange={(v) => setTweak("sansFont", v)}
            options={Object.keys(SANS_PAIRS).map(v => ({ value: v, label: v }))}/>
        </TweakSection>
        <TweakSection label="Home hero">
          <TweakSelect label="Hero image" value={tweak.heroVariant} onChange={(v) => setTweak("heroVariant", v)} options={[
            { value: "anantara", label: "Anantara — desert" },
            { value: "desert-palm", label: "Desert Palm — botanical" },
            { value: "sintra", label: "Sintra — destination" },
            { value: "armani", label: "Armani — sangeet" },
            { value: "ritz", label: "Ritz DIFC — ballroom" },
            { value: "rove", label: "Rove Home — modern" },
          ]}/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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