/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect,
   Nav, Footer, Hero, Spaces, Services, Work, Approach, About, Contact, Eighty4 */

/* Business identity — edit these to match your real details.
   These also carry the info Apple's review looks for: a clear entity,
   a reachable contact, and the domain the site lives on. */
const BIZ = {
  entity: "Valteria LLC",
  email: "dev@valteria.io",
  domain: "valteria.io",
  location: "Los Angeles · works all time zones",
  locationShort: "Los Angeles",
  since: "2016",
  hours: "Replies within 2 business days",
  links: [
    { n: "Rubber Ducky", h: "https://www.userubberducky.com" },
    { n: "Open Payouts", h: "https://www.openpayouts.com" },
  ],
};

const ACCENTS = {
  copper: {
    accent: "var(--copper-400)", deep: "var(--copper-600)",
    shadow: "var(--shadow-copper)", onAccent: "var(--aubergine-900)",
  },
  violet: {
    accent: "var(--violet-400)", deep: "var(--violet-700)",
    shadow: "var(--shadow-violet)", onAccent: "var(--aubergine-900)",
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "copper",
  "headline": "ship"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

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

  React.useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.copper;
    const root = document.documentElement;
    root.style.setProperty("--site-accent", a.accent);
    root.style.setProperty("--site-accent-deep", a.deep);
    root.style.setProperty("--site-accent-shadow", a.shadow);
    root.style.setProperty("--text-on-accent", a.onAccent);
  }, [t.accent]);

  return (
    <div>
      <Nav />
      <Hero headline={t.headline} biz={BIZ} />
      <Spaces />
      <Services />
      <Eighty4 />
      <Work />
      <Approach />
      <About biz={BIZ} />
      <Contact biz={BIZ} />
      <Footer biz={BIZ} />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio label="Mode" value={t.theme} options={["light", "dark"]} onChange={(v) => setTweak("theme", v)} />
        <TweakRadio label="Accent" value={t.accent} options={["copper", "violet"]} onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Hero" />
        <TweakSelect label="Headline" value={t.headline}
          options={[
            { value: "ship", label: "…that actually ship" },
            { value: "weight", label: "Software with weight" },
            { value: "useful", label: "Busy vs. useful" },
          ]}
          onChange={(v) => setTweak("headline", v)} />
      </TweaksPanel>
    </div>
  );
}

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