/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, TweakColor, useTweaks,
   Hero, TickerBand, TheRead, Hubs, StackCollapse, AudienceTabs, Proof, Twelve, Trust, CtaBlock,
   LiveGlobe, SignalOrbit */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c4623d",
  "audience": "marcus",
  "heroVariant": 0
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  "#c4623d": "terracotta",
  "#3d6b3d": "forest",
  "#b8860b": "ochre",
  "#8b3a3a": "crimson",
};

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

  useEffect(() => {
    const name = ACCENT_MAP[t.accent] || "terracotta";
    document.body.setAttribute("data-accent", name);
  }, [t.accent]);

  return (
    <React.Fragment>
      <Hero
        variant={t.heroVariant}
        setVariant={(i) => setTweak("heroVariant", i)}
      />
      <TickerBand />
      <LiveGlobe />
      <TheRead />
      <Hubs />
      <StackCollapse />
      <AudienceTabs
        audience={t.audience}
        setAudience={(a) => setTweak("audience", a)}
      />
      <SignalOrbit />
      <Twelve />
      <Proof />
      <Trust />
      <CtaBlock />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <TweakColor
            label="Editorial hue"
            value={t.accent}
            options={["#c4623d", "#3d6b3d", "#b8860b", "#8b3a3a"]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>

        <TweakSection label="Audience focus">
          <TweakRadio
            label="Lead with"
            value={t.audience}
            options={[
              { value: "sarah",  label: "Sarah" },
              { value: "marcus", label: "Marcus" },
              { value: "priya",  label: "Priya" },
            ]}
            onChange={(v) => setTweak("audience", v)}
          />
        </TweakSection>

        <TweakSection label="Hero copy">
          <TweakRadio
            label="Variant"
            value={String(t.heroVariant)}
            options={[
              { value: "0", label: "01" },
              { value: "1", label: "02" },
              { value: "2", label: "03" },
              { value: "3", label: "04" },
              { value: "4", label: "05" },
            ]}
            onChange={(v) => setTweak("heroVariant", parseInt(v, 10))}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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