/* global React, ReactDOM */
const { useState } = React;

const ACCENT_OPTIONS = {
  lime: "#D7FF3D",
  electric: "#54F0FF",
  flame: "#FF6B35",
  violet: "#B794F6",
};

const HEADLINES = {
  social: {
    label: "Make gym progress social.",
    parts: [
      { text: "Make gym\nprogress " },
      { text: "social.", accent: true },
    ],
  },
  community: {
    label: "The gym community built around progress.",
    parts: [
      { text: "The gym community\nbuilt around " },
      { text: "progress.", accent: true },
    ],
  },
  solo: {
    label: "Stop training alone, even when you go solo.",
    parts: [
      { text: "Stop training alone,\neven when you " },
      { text: "go solo.", accent: true },
    ],
  },
  layer: {
    label: "The community layer for your fitness journey.",
    parts: [
      { text: "The community layer\nfor your " },
      { text: "fitness journey.", accent: true },
    ],
  },
};

// process headlines so newlines become <br>
function processHeadline(h) {
  const flat = [];
  h.parts.forEach((p) => {
    const segments = p.text.split("\n");
    segments.forEach((s, i) => {
      if (i > 0) flat.push({ br: true });
      if (s) flat.push({ text: s, accent: p.accent });
    });
  });
  return {
    parts: flat.map((p) =>
      p.br
        ? { text: <br />, accent: false }
        : { text: p.text, accent: !!p.accent }
    ),
  };
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "lime",
  "headline": "social"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = ACCENT_OPTIONS[tweaks.accent] || ACCENT_OPTIONS.lime;
  const headline = processHeadline(HEADLINES[tweaks.headline] || HEADLINES.social);

  return (
    <div className="min-h-screen text-white" style={{ background: "#0A0A0A" }}>
      <Navbar accent={accent} />
      <main>
        <Hero accent={accent} headline={headline} />
        <ProblemSection accent={accent} />
        <SolutionSection accent={accent} />
        <SocialLoopsSection accent={accent} />
        <FeaturesSection accent={accent} />
        <AISection accent={accent} />
        <HowItWorksSection accent={accent} />
        <WhoSection accent={accent} />
        <WaitlistSection accent={accent} />
      </main>
      <Footer accent={accent} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent color">
          <TweakColor
            label="Accent"
            value={ACCENT_OPTIONS[tweaks.accent]}
            options={[
              ACCENT_OPTIONS.lime,
              ACCENT_OPTIONS.electric,
              ACCENT_OPTIONS.flame,
              ACCENT_OPTIONS.violet,
            ]}
            onChange={(hex) => {
              const key = Object.keys(ACCENT_OPTIONS).find((k) => ACCENT_OPTIONS[k] === hex);
              if (key) setTweak("accent", key);
            }}
          />
        </TweakSection>
        <TweakSection label="Hero headline">
          <TweakSelect
            label="Variant"
            value={tweaks.headline}
            options={Object.keys(HEADLINES).map((k) => ({
              value: k,
              label: HEADLINES[k].label,
            }))}
            onChange={(v) => setTweak("headline", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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