/* Tidewell — app entry with hash router */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "region": "US",
  "palette": "aqua",
  "heroVariant": "split",
  "cardStyle": "grid"
}/*EDITMODE-END*/;

const PALETTE_SWATCHES = {
  "#3680b8": "aqua",
  "#3a6b48": "forest",
  "#a07248": "sand",
  "#1f2a3a": "ink"
};
const PALETTE_BY_NAME = {
  aqua: "#3680b8",
  forest: "#3a6b48",
  sand: "#a07248",
  ink: "#1f2a3a"
};

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const route = window.useRoute();

  // Persist region in localStorage so it survives reload across pages
  React.useEffect(() => {
    const saved = localStorage.getItem("tidewell-region");
    if (saved && saved !== t.region && (saved === "US" || saved === "CA")) {
      setTweak("region", saved);
    }
  }, []);
  React.useEffect(() => {
    localStorage.setItem("tidewell-region", t.region);
  }, [t.region]);

  function setRegion(r) { setTweak("region", r); }

  React.useEffect(() => {
    document.documentElement.setAttribute("data-palette", t.palette);
    document.documentElement.setAttribute("data-cardstyle", t.cardStyle);
  }, [t.palette, t.cardStyle]);

  function HomePage() {
    return (
      <>
        <window.Hero region={t.region} variant={t.heroVariant} />
        <window.Marquee region={t.region} />
        <window.ProductGrid region={t.region} cardStyle={t.cardStyle} />
        <window.Certs region={t.region} />
        <window.Planner region={t.region} />
        <window.ApplicationsStrip />
        <window.Resources />
      </>
    );
  }

  let page;
  switch (route.name) {
    case "catalog":
      page = <window.CatalogPage region={t.region} />;
      break;
    case "product":
      page = <window.ProductDetailPage slug={route.slug} region={t.region} />;
      break;
    case "applications":
      page = <window.ApplicationsPage />;
      break;
    case "about":
      page = <window.AboutPage region={t.region} />;
      break;
    case "contact":
      page = <window.ContactPage region={t.region} setRegion={setRegion} />;
      break;
    case "home":
    default:
      page = <HomePage />;
      break;
  }

  return (
    <div data-screen-label="Tidewell">
      <window.Topbar region={t.region} setRegion={setRegion} />
      <window.Header region={t.region} setRegion={setRegion} />
      {page}
      <window.Footer region={t.region} setRegion={setRegion} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="North America" />
        <window.TweakRadio
          label="Region"
          value={t.region}
          options={[
            { value: "US", label: "🇺🇸 US" },
            { value: "CA", label: "🇨🇦 CA" }
          ]}
          onChange={(v) => setTweak("region", v)}
        />

        <window.TweakSection label="Visual direction" />
        <window.TweakColor
          label="Accent"
          value={PALETTE_BY_NAME[t.palette] || "#3680b8"}
          options={Object.keys(PALETTE_SWATCHES)}
          onChange={(hex) => setTweak("palette", PALETTE_SWATCHES[hex] || "aqua")}
        />
        <window.TweakRadio
          label="Hero layout"
          value={t.heroVariant}
          options={[
            { value: "split", label: "Split" },
            { value: "imagefirst", label: "Image" },
            { value: "centered", label: "Centered" }
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <window.TweakRadio
          label="Product cards"
          value={t.cardStyle}
          options={[
            { value: "grid", label: "Grid" },
            { value: "soft", label: "Soft" }
          ]}
          onChange={(v) => setTweak("cardStyle", v)}
        />
      </window.TweaksPanel>
    </div>
  );
}

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