// Main app — hash router, tweaks integration, root mount.

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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "rose",
  "type": "cormorant",
  "heroTreatment": "full",
  "ornaments": "restrained",
  "mode": "light",
  "locale": "EN"
}/*EDITMODE-END*/;

function parseRoute() {
  const hash = (window.location.hash || "#/").replace(/^#/, "");
  // expected forms: /, /real-weddings, /real-weddings/slug, /services, /destinations, /about, /enquire
  if (hash === "/" || hash === "") return { name: "home" };
  const parts = hash.split("/").filter(Boolean);
  if (parts[0] === "real-weddings") {
    if (parts[1]) return { name: "wedding", slug: parts[1] };
    return { name: "real-weddings" };
  }
  if (parts[0] === "services") return { name: "services" };
  if (parts[0] === "destinations") return { name: "destinations" };
  if (parts[0] === "about") return { name: "about" };
  if (parts[0] === "enquire") return { name: "enquire" };
  return { name: "home" };
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useStateApp(parseRoute());

  useEffectApp(() => {
    const onHash = () => {
      setRoute(parseRoute());
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // apply data attrs to html root
  useEffectApp(() => {
    const html = document.documentElement;
    html.setAttribute("data-mode", t.mode);
    html.setAttribute("data-palette", t.palette);
    html.setAttribute("data-type", t.type);
    html.setAttribute("data-ornaments", t.ornaments);
    html.setAttribute("lang", t.locale.toLowerCase());
    html.setAttribute("dir", t.locale === "AR" ? "rtl" : "ltr");
  }, [t.mode, t.palette, t.type, t.ornaments, t.locale]);

  const setLocale = (l) => setTweak("locale", l);

  // Map active nav id from route
  const navId =
    route.name === "home"
      ? "home"
      : route.name === "wedding"
      ? "real-weddings"
      : route.name;

  return (
    <div data-screen-label={`Events by Saniya — ${navId}`}>
      <Navbar route={navId} locale={t.locale} setLocale={setLocale} />

      {route.name === "home" && <Home tweaks={t} />}
      {route.name === "real-weddings" && <RealWeddings />}
      {route.name === "wedding" && <WeddingStory slug={route.slug} />}
      {route.name === "services" && <Services />}
      {route.name === "destinations" && <DestinationsPage />}
      {route.name === "about" && <About />}
      {route.name === "enquire" && <Enquire />}

      <Footer />
      <WhatsAppFab />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio
          label="Tone"
          value={t.palette}
          options={["rose", "champagne", "ivory"]}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakToggle
          label="Dark luxe mode"
          value={t.mode === "dark"}
          onChange={(v) => setTweak("mode", v ? "dark" : "light")}
        />

        <TweakSection label="Type pairing" />
        <TweakSelect
          label="Display + Body"
          value={t.type}
          options={[
            { value: "cormorant", label: "Cormorant + Inter" },
            { value: "playfair", label: "Playfair + Mulish" },
            { value: "italiana", label: "Italiana + Inter" },
          ]}
          onChange={(v) => setTweak("type", v)}
        />

        <TweakSection label="Hero" />
        <TweakRadio
          label="Treatment"
          value={t.heroTreatment}
          options={["full", "split", "mosaic"]}
          onChange={(v) => setTweak("heroTreatment", v)}
        />

        <TweakSection label="Ornament" />
        <TweakRadio
          label="Density"
          value={t.ornaments}
          options={["none", "restrained", "ornate"]}
          onChange={(v) => setTweak("ornaments", v)}
        />

        <TweakSection label="Locale" />
        <TweakRadio
          label="Direction"
          value={t.locale}
          options={["EN", "AR", "HI"]}
          onChange={(v) => setTweak("locale", v)}
        />
      </TweaksPanel>
    </div>
  );
}

// Inject form input styles (depend on CSS vars)
const inputStyle = document.createElement("style");
inputStyle.textContent = `
  .input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 12px 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text);
    transition: border-color .25s;
    border-radius: 0;
  }
  .input:focus { outline: none; border-bottom-color: var(--primary); }
  .input::placeholder { color: var(--muted); opacity: 0.6; }
  textarea.input { border: 1px solid var(--hairline); padding: 14px; resize: vertical; min-height: 120px; }
  textarea.input:focus { border-color: var(--primary); }
  select.input { padding: 12px 0; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }

  .service-tile:hover { background: var(--surface) !important; }
  .dest-tile h4, .wedding-card h3 { transition: color .25s; }
  .dest-tile:hover h4, .wedding-card:hover h3 { color: var(--primary); }
`;
document.head.appendChild(inputStyle);

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