// app.jsx — Apps On Rails assembly + tweaks.

const PALETTES = {
  taqueria: {
    label: "Warm Taqueria",
    cream: "#F2E8D5",
    creamDeep: "#E8D9BC",
    ink: "#241712",
    ink10: "rgba(36,23,18,0.10)",
    terracotta: "#C44536",
    mustard: "#D9A441",
    teal: "#1F5C5C",
  },
  cantina: {
    label: "Cobalt Cantina",
    cream: "#F4ECD8",
    creamDeep: "#EADFC4",
    ink: "#1A1410",
    ink10: "rgba(26,20,16,0.10)",
    terracotta: "#B23A2E",
    mustard: "#E5B23A",
    teal: "#1E3F8E",
  },
  sunset: {
    label: "Mercado Sunset",
    cream: "#F6E9D7",
    creamDeep: "#EFD9BD",
    ink: "#2A1818",
    ink10: "rgba(42,24,24,0.10)",
    terracotta: "#D9523D",
    mustard: "#E89A3C",
    teal: "#7A2E4D",
  },
};

const FONTS = {
  anton: { label: "Anton (condensed)", value: "'Anton', sans-serif" },
  slab: { label: "Alfa Slab One", value: "'Alfa Slab One', serif" },
  bowlby: { label: "Bowlby One SC", value: "'Bowlby One SC', sans-serif" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "taqueria",
  "displayFont": "anton",
  "layout": "centered",
  "ornament": "restrained"
}/*EDITMODE-END*/;

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const p = PALETTES[t.palette] || PALETTES.taqueria;
  const f = FONTS[t.displayFont] || FONTS.anton;

  const cssVars = {
    "--aor-cream": p.cream,
    "--aor-cream-deep": p.creamDeep,
    "--aor-ink": p.ink,
    "--aor-ink-10": p.ink10,
    "--aor-terracotta": p.terracotta,
    "--aor-mustard": p.mustard,
    "--aor-teal": p.teal,
    "--aor-display-font": f.value,
    "--aor-script-font": "'Caveat Brush', cursive",
    "--aor-serif": "'DM Serif Display', Georgia, serif",
    "--aor-body": "'Manrope', system-ui, sans-serif",
  };

  return (
    <div className={"aor-root aor-layout-" + t.layout + " aor-orn-" + t.ornament} style={cssVars}>
      <Nav />
      <Hero asymmetric={t.layout === "asym"} />
      <Specialties />
      <Divider />
      <Proof />
      <Contact />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio
          label="Color way"
          value={t.palette}
          options={["taqueria", "cantina", "sunset"]}
          labels={["Taqueria", "Cantina", "Sunset"]}
          onChange={(v) => setTweak("palette", v)}
        />
        <div className="aor-twk-swatches">
          {Object.entries(PALETTES).map(([k, pp]) => (
            <button
              key={k}
              onClick={() => setTweak("palette", k)}
              className={"aor-twk-swatch" + (t.palette === k ? " on" : "")}
              title={pp.label}
            >
              <span style={{ background: pp.terracotta }} />
              <span style={{ background: pp.mustard }} />
              <span style={{ background: pp.teal }} />
              <span style={{ background: pp.cream }} />
            </button>
          ))}
        </div>

        <TweakSection label="Lettering" />
        <TweakSelect
          label="Display font"
          value={t.displayFont}
          options={["anton", "slab", "bowlby"]}
          labels={["Anton (condensed)", "Alfa Slab One", "Bowlby One SC"]}
          onChange={(v) => setTweak("displayFont", v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Hero alignment"
          value={t.layout}
          options={["centered", "asym"]}
          labels={["Centered", "Left"]}
          onChange={(v) => setTweak("layout", v)}
        />

        <TweakSection label="Ornament" />
        <TweakRadio
          label="Density"
          value={t.ornament}
          options={["minimal", "restrained", "rich"]}
          labels={["Minimal", "Restrained", "Rich"]}
          onChange={(v) => setTweak("ornament", v)}
        />
      </TweaksPanel>
    </div>
  );
};

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