// App — router + Tweaks integration

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "forest",
  "type": "cormorant",
  "headlineIndex": 0,
  "dark": true,
  "density": "comfortable",
  "motion": "on"
}/*EDITMODE-END*/;

const PALETTES = {
  forest: {
    name: "Forest · Bronze",
    bg: "#13140F", bg2: "#1B1D17", bg3: "#24281E",
    line: "#2F342A", line2: "#3A4034",
    moss: "#3A4034", sage: "#7A8569",
    bronze: "#B0825A", bronze2: "#C39A6B",
    bone: "#EDE8DC", bone2: "#C8C3B6", bone3: "#8C887C", bone4: "#5A5A50",
  },
  graphite: {
    name: "Graphite · Copper",
    bg: "#0A0C0E", bg2: "#161A1D", bg3: "#1F2428",
    line: "#252B30", line2: "#2B3138",
    moss: "#2B3138", sage: "#6E7682",
    bronze: "#C39A6B", bronze2: "#D7B486",
    bone: "#E5DCC9", bone2: "#BFB8A6", bone3: "#86827A", bone4: "#54534C",
  },
  charcoal: {
    name: "Charcoal · Bronze",
    bg: "#0E0F0D", bg2: "#1A1C1A", bg3: "#252722",
    line: "#26271F", line2: "#2A2D27",
    moss: "#2A2D27", sage: "#6F6F60",
    bronze: "#A8794A", bronze2: "#C39A6B",
    bone: "#E8E3D8", bone2: "#BFBAAA", bone3: "#83807A", bone4: "#54534B",
  },
  bone: {
    name: "Bone · Walnut (Light)",
    bg: "#F4F1EA", bg2: "#ECE7DA", bg3: "#E1DBCB",
    line: "#D6CFBD", line2: "#BFB69E",
    moss: "#3A4034", sage: "#6E7A5C",
    bronze: "#8B6234", bronze2: "#A37544",
    bone: "#1A1B16", bone2: "#3D3D34", bone3: "#6B6A5D", bone4: "#8E8D7F",
  },
};

const TYPES = {
  cormorant: { name: "Cormorant + Geist",   serif: '"Cormorant Garamond", serif',           sans: '"Geist", -apple-system, sans-serif' },
  bodoni:    { name: "Bodoni + DM Sans",    serif: '"Bodoni Moda", "Times New Roman", serif', sans: '"DM Sans", -apple-system, sans-serif' },
  dm:        { name: "DM Serif + Manrope",  serif: '"DM Serif Display", serif',             sans: '"Manrope", -apple-system, sans-serif' },
  tenor:     { name: "Tenor (architectural)", serif: '"Tenor Sans", "Cormorant Garamond", serif', sans: '"Tenor Sans", -apple-system, sans-serif' },
};

function applyPalette(p) {
  const r = document.documentElement;
  r.style.setProperty("--bg", p.bg);
  r.style.setProperty("--bg-2", p.bg2);
  r.style.setProperty("--bg-3", p.bg3);
  r.style.setProperty("--line", p.line);
  r.style.setProperty("--line-2", p.line2);
  r.style.setProperty("--moss", p.moss);
  r.style.setProperty("--sage", p.sage);
  r.style.setProperty("--bronze", p.bronze);
  r.style.setProperty("--bronze-2", p.bronze2);
  r.style.setProperty("--bone", p.bone);
  r.style.setProperty("--bone-2", p.bone2);
  r.style.setProperty("--bone-3", p.bone3);
  r.style.setProperty("--bone-4", p.bone4);
}
function applyType(t) {
  const r = document.documentElement;
  r.style.setProperty("--serif", t.serif);
  r.style.setProperty("--sans", t.sans);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState("home");
  const [projectId, setProjectId] = React.useState(PROJECTS[0].id);

  // Expose navigation globally for child components
  React.useEffect(() => {
    window.__route = (r) => {
      setRoute(r);
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.__openProject = (id) => {
      setProjectId(id);
      setRoute("detail");
      window.scrollTo({ top: 0, behavior: "instant" });
    };
  }, []);

  // Apply tweaks
  React.useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES.forest;
    applyPalette(p);
    document.body.dataset.theme = t.palette === "bone" ? "light" : "dark";
  }, [t.palette]);

  React.useEffect(() => {
    const ty = TYPES[t.type] || TYPES.cormorant;
    applyType(ty);
  }, [t.type]);

  React.useEffect(() => {
    document.body.dataset.density = t.density;
  }, [t.density]);

  React.useEffect(() => {
    document.body.dataset.motion = t.motion;
  }, [t.motion]);

  // Cycle headline arrow
  const cycleHeadline = () => {
    setTweak("headlineIndex", (t.headlineIndex + 1) % HERO_HEADLINES.length);
  };

  let view;
  switch (route) {
    case "home":     view = <HomePage      headlineIndex={t.headlineIndex} />; break;
    case "projects": view = <ProjectsPage />; break;
    case "detail":   view = <ProjectDetail projectId={projectId} />; break;
    case "about":    view = <AboutPage />; break;
    case "services": view = <ServicesPage />; break;
    case "map":      view = <MapPage />; break;
    case "mobile":   view = <MobilePage />; break;
    case "system":   view = <SystemPage />; break;
    default:         view = <HomePage      headlineIndex={t.headlineIndex} />;
  }

  return (
    <>
      <Nav route={route} setRoute={(r) => window.__route(r)} />
      <SideMark>GENTECH · CHATTANOOGA · TN</SideMark>

      {/* Page route */}
      <main key={route + (route === "detail" ? projectId : "")} className="route-anim">{view}</main>

      <Footer setRoute={(r) => window.__route(r)} />

      {/* Tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Aesthetic" />
        <TweakSelect
          label="Palette" value={t.palette}
          options={[
            { value: "forest", label: PALETTES.forest.name },
            { value: "graphite", label: PALETTES.graphite.name },
            { value: "charcoal", label: PALETTES.charcoal.name },
            { value: "bone", label: PALETTES.bone.name },
          ]}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakSelect
          label="Typography" value={t.type}
          options={[
            { value: "cormorant", label: TYPES.cormorant.name },
            { value: "bodoni",    label: TYPES.bodoni.name },
            { value: "dm",        label: TYPES.dm.name },
            { value: "tenor",     label: TYPES.tenor.name },
          ]}
          onChange={(v) => setTweak("type", v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density" value={t.density}
          options={[
            { value: "compact", label: "Compact" },
            { value: "comfortable", label: "Editorial" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakRadio
          label="Motion" value={t.motion}
          options={[
            { value: "off", label: "Off" },
            { value: "on", label: "On" },
          ]}
          onChange={(v) => setTweak("motion", v)}
        />

        <TweakSection label="Hero" />
        <TweakSelect
          label="Headline" value={String(t.headlineIndex)}
          options={HERO_HEADLINES.map((h, i) => ({ value: String(i), label: `${h.line1} ${h.line2}` }))}
          onChange={(v) => setTweak("headlineIndex", parseInt(v, 10))}
        />
        <TweakButton label="Cycle headline" onClick={cycleHeadline}>Next →</TweakButton>

        <TweakSection label="Navigation" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4 }}>
          {[
            ["home", "Home"], ["projects", "Projects"], ["detail", "Detail"],
            ["about", "About"], ["services", "Capabilities"], ["map", "Regions"],
            ["mobile", "Mobile"], ["system", "UI System"],
          ].map(([k, l]) => (
            <button key={k}
              onClick={() => window.__route(k)}
              style={{
                padding: "8px 10px", fontSize: 10.5, letterSpacing: ".08em",
                background: route === k ? "#29261b" : "transparent",
                color: route === k ? "#faf9f7" : "rgba(41,38,27,.75)",
                border: "1px solid rgba(41,38,27,.18)", cursor: "pointer",
                textAlign: "left", fontFamily: "inherit", borderRadius: 4,
              }}>{l}</button>
          ))}
        </div>
      </TweaksPanel>
    </>
  );
}

// Page transition — use a class that fades in once mounted, guaranteed end-state.
const pageAnimStyle = document.createElement("style");
pageAnimStyle.textContent = `
  .route-anim { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.6,.2,1); }
  .route-anim.starting { opacity: 0; transform: translateY(8px); }
  [data-motion="off"] .route-anim { transition: none; }
  select option { background: #1B1D17; color: #EDE8DC; }
`;
document.head.appendChild(pageAnimStyle);

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