const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#A5DDE6",
  "showMarquee": true
}/*EDITMODE-END*/;

// YouTube video IDs from links you sent
const BRANDS = [
  { name: 'Hover Air',         tag: 'Drone',          id: 'brL30CB98Ts' },
  { name: 'Bull Bar',          tag: 'Fitness',        id: 'WsTOebOKZzo' },
  { name: 'Insta360',          tag: 'Camera',         id: 'lwWWPnRubVU' },
  { name: 'MTL Balance Boards', tag: 'Training gear', id: 'leVCLBxptF8' },
];

const REVIEWS = [
  { title: 'The Bull Bar just changed the way you work out', channel: 'Bull Bar review · YouTube', id: '5ojdLFH0hDA' },
  { title: 'Hover Air — honest review', channel: 'Hover Air review · YouTube', id: 'th70AmI7aEo' },
];

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

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-2', t.accent);
  }, [t.accent]);

  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <Credentials />
      {t.showMarquee && <Marquee />}
      <BrandWork brands={BRANDS} />
      <Services />
      <Statistics />
      <Reviews reviews={REVIEWS} />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakColor
            label="Color"
            value={t.accent}
            options={['#A5DDE6', '#E6C9A5', '#A5E6B8', '#E6A5C9', '#FFFFFF']}
            onChange={(v) => setTweak('accent', v)}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakToggle
            label="Brand marquee"
            value={t.showMarquee}
            onChange={(v) => setTweak('showMarquee', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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