/* Loopette — tweaks */

const { useState: useStateT } = React;

function App() {
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "accent": "teal",
    "heroVariant": "default",
    "showAnnotations": true
  }/*EDITMODE-END*/);

  // Apply accent override
  React.useEffect(() => {
    const root = document.documentElement;
    const map = {
      teal:   { primary: '#4FC8B8', deep: '#2a8c80' },
      orange: { primary: '#E8693A', deep: '#b04822' },
      yellow: { primary: '#E8C341', deep: '#b89421' },
      clay:   { primary: '#c9452c', deep: '#9e2f1b' },
    };
    const c = map[t.accent] || map.teal;
    root.style.setProperty('--lp-accent', c.primary);
    root.style.setProperty('--lp-accent-deep', c.deep);
  }, [t.accent]);

  return (
    <div className="lp-page">
      <Nav />
      <Ticker />
      <Hero />
      <Ticker />
      <SignatureMove />
      <Sound />
      <Workflow />
      <FooterCTA />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakRadio
            value={t.accent}
            onChange={(v) => setTweak('accent', v)}
            options={[
              { value: 'teal', label: 'Teal' },
              { value: 'orange', label: 'Orange' },
              { value: 'yellow', label: 'Yellow' },
              { value: 'clay', label: 'Clay' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            value={t.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[
              { value: 'default', label: 'Default' },
              { value: 'centered', label: 'Centered' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Annotations">
          <TweakToggle
            value={t.showAnnotations}
            onChange={(v) => setTweak('showAnnotations', v)}
            label="Show callouts"
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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