/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSelect */
const { useState, useEffect } = React;

const HERO_OPTIONS = {
  'Cyclist · Andes':   'https://images.unsplash.com/photo-1517649763962-0c623066013b?w=2000&auto=format&fit=crop&q=80',
  'Peloton · Speed':   'https://images.unsplash.com/photo-1471506480208-91b3a4cc78be?w=2000&auto=format&fit=crop&q=80',
  'Solo Rider':        'https://images.unsplash.com/photo-1541625602330-2277a4c46182?w=2000&auto=format&fit=crop&q=80',
};

const ACCENT_OPTIONS = {
  'Lime':       { c: '#d4ff00', on: '#0a0a0a' },
  'Blood Red':  { c: '#ff2d2d', on: '#f4f3ed' },
  'Ice White':  { c: '#f4f3ed', on: '#0a0a0a' },
  'Volt Green': { c: '#00ff88', on: '#0a0a0a' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Lime",
  "heroVariant": "Cyclist · Andes"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = ACCENT_OPTIONS[t.accent] || ACCENT_OPTIONS['Lime'];
  const heroImg = HERO_OPTIONS[t.heroVariant] || HERO_OPTIONS['Cyclist · Andes'];

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

  const emotionalImg = 'https://images.unsplash.com/photo-1485965120184-e220f721d03e?w=2000&auto=format&fit=crop&q=80';
  const finalImg     = 'https://images.unsplash.com/photo-1517649763962-0c623066013b?w=2000&auto=format&fit=crop&q=80';

  return (
    <>
      <Nav />
      <Hero heroImg={heroImg} />
      <Marquee />
      <Benefits />
      <Products />
      <Asesoria />
      <Emotional img={emotionalImg} />
      <SocialProof />
      <Urgency />
      <FinalCTA img={finalImg} />
      <Footer />
      <WhatsAppFloat />

      <TweaksPanel title="Tweaks · Ciclo Pro">
        <TweakSection title="Color de acento">
          <TweakColor
            value={accent.c}
            options={Object.values(ACCENT_OPTIONS).map(o => o.c)}
            onChange={(v) => {
              const name = Object.keys(ACCENT_OPTIONS).find(k => ACCENT_OPTIONS[k].c === v) || 'Lime';
              setTweak('accent', name);
            }}
          />
        </TweakSection>
        <TweakSection title="Hero" subtitle="Imagen cinematográfica del hero">
          <TweakSelect
            value={t.heroVariant}
            options={Object.keys(HERO_OPTIONS)}
            onChange={(v) => setTweak('heroVariant', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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