/* Compound — app shell (Swiss/technical) */

const ACCENTS = {
  oxblood: { value: "#6B2A2A", label: "Oxblood" },
  ink:     { value: "#0A0A0A", label: "Ink (mono)" },
  sage:    { value: "#4A5B3F", label: "Sage" },
  ochre:   { value: "#8E6422", label: "Ochre" }
};

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "ship",
  "accent": "oxblood"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[tweaks.accent] || ACCENTS.oxblood;
    root.style.setProperty("--accent", a.value);
    root.style.setProperty("--accent-soft", a.value + "14");
  }, [tweaks.accent]);

  return (
    <>
      <ScrollProgress />
      <TopNav />

      <main>
        <Hero headline={tweaks.headline} />
        <Thesis />
        <WhatWeBuild />
        <SelectedWork />
        <Process />
        <Audiences />
        <Studio />
        <Faq />
        <Contact />
      </main>

      <FooterMarquee />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero headline">
          <TweakRadio
            label="Variant"
            value={tweaks.headline}
            onChange={(v) => setTweak("headline", v)}
            options={[
              { value: "ship", label: "Ship" },
              { value: "own",  label: "Own"  },
              { value: "run",  label: "Run"  }
            ]}
          />
          <div className="text-[12px] mt-3" style={{ color: "var(--muted)" }}>
            {HEADLINES[tweaks.headline]?.line1} <span style={{ color: "var(--accent)" }}>{HEADLINES[tweaks.headline]?.line2}</span>
          </div>
        </TweakSection>

        <TweakSection label="Accent">
          <TweakColor
            label="Color"
            value={(ACCENTS[tweaks.accent] || ACCENTS.oxblood).value}
            onChange={(hex) => {
              const found = Object.entries(ACCENTS).find(([, v]) => v.value.toLowerCase() === String(hex).toLowerCase());
              setTweak("accent", found ? found[0] : "oxblood");
            }}
            options={Object.values(ACCENTS).map((a) => a.value)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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