/* 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 = {
  'Salmón':     { c: '#E8735A', 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": "Salmón",
  "heroVariant": "Cyclist · Andes"
}/*EDITMODE-END*/;

// ============ Categorías de landing ============
// Datos basados en lebike-brief.md. Campos pendientes del cliente
// se marcan con <span className="is-pending">[…]</span> para que sean
// visibles en la UI hasta que se complete la información real.
const Pending = ({ children }) => (
  <span className="is-pending">{children || '[POR DEFINIR]'}</span>
);

const HERO_HEADLINE = (
  <>Rendimiento<br/>que <em>se siente.</em><br/>Estilo que se nota.</>
);
const BRAND_EYEBROW = '8 años · Hecho en Ibagué, Tolima · Envíos a toda Colombia';

const WA_PHONE_NUM = '573041170678';
const waCatalogUrl = (cat) =>
  `https://wa.me/${WA_PHONE_NUM}?text=${encodeURIComponent(`Hola Lebike, quiero ver el catálogo de ${cat}`)}`;

const CATEGORIES = {
  jerseys: {
    label: 'Jerseys',
    seoH1: 'Jerseys de ciclismo Lebike: poliéster transpirable y protección UV — hechos en Ibagué, Tolima',
    eyebrow: BRAND_EYEBROW,
    heroImg: '../images/HERO-JERSEYS-1.webp',
    heroHeadline: HERO_HEADLINE,
    heroSub: 'Jersey Pro Lebike en poliéster transpirable con protección UV. Disponible en manga corta y manga larga, con tres bolsillos traseros, reflectivos y corte ajustado y anatómico. Personalizable con logo, nombre, RH o patrocinadores.',
    heroSpecs: [
      { num: 'Manga corta · larga', lab: 'Corte ajustado y anatómico' },
      { num: 'Poliéster · UV', lab: 'Transpirable · protección UV' },
      { num: '30 días', lab: 'Garantía por calidad' },
    ],
    productsSectionNum: 'Jerseys',
    productsKicker: 'Lebike · Hecho en Colombia',
    productsTitle: (<>Para los días<br/>de <em style={{color:'var(--accent-text)', fontStyle:'normal'}}>velocidad.</em></>),
    productsSubtitle: 'Poliéster transpirable con protección UV, tres bolsillos traseros, reflectivos y corte ajustado y anatómico. Manga corta o larga, en variedad de colores y diseños personalizados.',
    products: [
      {
        pid: '01',
        name: 'Jersey Pro Lebike',
        tagline: 'Poliéster transpirable con protección UV. Tres bolsillos traseros, detalles reflectivos y corte ajustado y anatómico. Disponible en manga corta y manga larga, con variedad de colores y diseños personalizados.',
        badge: 'Manga corta · Manga larga',
        features: [
          'Poliéster transpirable con protección UV',
          'Tres bolsillos traseros',
          'Detalles reflectivos para visibilidad en ruta',
          'Corte ajustado y anatómico',
          'Personalizable: logo, nombre, RH, patrocinadores',
        ],
        specs: [
          { l: 'Material', v: 'Poliéster transpirable · protección UV' },
          { l: 'Versiones', v: 'Manga corta · Manga larga' },
          { l: 'Tallas',   v: 'XS — XXL' },
          { l: 'Cierre',   v: <Pending>[POR DEFINIR]</Pending> },
          { l: 'Personalizable', v: 'Sí — logo, nombre, RH, patrocinadores, mezcla de diseños', wide: true },
        ],
        images: [
          '../images/jersey-negro.avif',
          '../images/jersey-salmon.avif',
          '../images/jersey-vinotinto.avif',
        ],
        colorways: [
          { name: 'Negro',     hex: '#0f0f0f' },
          { name: 'Salmón',    hex: '#E8735A' },
          { name: 'Vinotinto', hex: '#6B1B2A' },
        ],
        primaryCTA: 'Pedir por WhatsApp',
        secondaryCTA: 'Ver catálogo completo',
        secondaryCTAUrl: waCatalogUrl('jerseys'),
        price: (<><Pending>[POR DEFINIR]</Pending> <span style={{fontSize:'0.5em', opacity:0.7, fontWeight:300, marginLeft:8}}>manga corta · manga larga</span></>),
      },
    ],
  },

  licras: {
    label: 'Licras',
    seoH1: 'Licras de ciclismo Lebike: Lycra italiana con badana 3D de gel — disponibles en 15 colores',
    eyebrow: BRAND_EYEBROW,
    heroImg: '../images/HERO-LICRAS.webp',
    heroHeadline: HERO_HEADLINE,
    heroSub: 'Licra Pro corta de tirantes en Lycra italiana con compresión gradual y secado rápido. Badana 3D de gel de densidad media para rutas largas, costuras planas y banda de silicona. Disponible en 15 colores.',
    heroSpecs: [
      { num: 'Desde $120.000', lab: 'Licra Pro · corta de tirantes' },
      { num: 'Badana 3D gel', lab: 'Densidad media · rutas largas' },
      { num: '15 colores', lab: 'Tallas XS — XXL' },
    ],
    productsSectionNum: 'Licras',
    productsKicker: 'Lebike · Hecho en Colombia',
    productsTitle: (<>Rutas largas.<br/>Cero <em style={{color:'var(--accent-text)', fontStyle:'normal'}}>fricción.</em></>),
    productsSubtitle: 'Lycra italiana con compresión gradual y secado rápido. Badana 3D de gel de densidad media para rutas largas, costuras planas y banda de silicona. Quince colores y tallas XS a XXL.',
    products: [
      {
        pid: '02',
        name: 'Licra Pro corta de tirantes',
        tagline: 'Lycra italiana con compresión gradual y secado rápido. Badana 3D de gel de densidad media para rutas largas, costuras planas y banda de silicona. Disponible en 15 colores y tallas XS a XXL.',
        badge: 'Badana 3D · rutas largas',
        features: [
          'Lycra italiana con compresión gradual',
          'Secado rápido',
          'Badana 3D de gel · densidad media · rutas largas',
          'Costuras planas',
          'Banda de silicona antideslizante',
          '15 colores disponibles',
        ],
        specs: [
          { l: 'Tipo',     v: 'Licra Pro · corta de tirantes' },
          { l: 'Material', v: 'Lycra italiana · compresión gradual · secado rápido' },
          { l: 'Badana',   v: '3D gel · densidad media · rutas largas' },
          { l: 'Tallas',   v: 'XS — XXL' },
        ],
        images: [
          '../images/PROD-LICRA-1-4.5.jpeg',
          '../images/pantaloneta-negra.webp',
          '../images/pantaloneta-azul.webp',
          '../images/pantaloneta-gris.webp',
        ],
        colorways: [
          { name: 'Negro',         hex: '#0f0f0f' },
          { name: 'Azul oscuro',   hex: '#1B3A6B' },
          { name: 'Azul rey',      hex: '#1E3FAB' },
          { name: 'Azul petróleo', hex: '#1F4E5F' },
          { name: 'Gris',          hex: '#8A8A8A' },
          { name: 'Verde olivo',   hex: '#6B7A3A' },
          { name: 'Morado',        hex: '#5E2D7A' },
          { name: 'Terracota',     hex: '#B5533C' },
          { name: 'Lila',          hex: '#B998D6' },
          { name: 'Salvia',        hex: '#A9BBA4' },
          { name: 'Blanco',        hex: '#F4F3ED' },
          { name: 'Vinotinto',     hex: '#6B1B2A' },
          { name: 'Palo de rosa',  hex: '#D8A7A0' },
          { name: 'Pistacho',      hex: '#B8D08D' },
          { name: 'Beige',         hex: '#D9C7A7' },
        ],
        primaryCTA: 'Pedir por WhatsApp',
        secondaryCTA: 'Ver catálogo completo',
        secondaryCTAUrl: waCatalogUrl('licras'),
        price: (<>$ 120.000</>),
      },
    ],
  },

  enterizos: {
    label: 'Enterizos',
    seoH1: 'Enterizos de ciclismo Lebike: Lycra Pro aerodinámica con cierre YKK — personalizables para equipos',
    eyebrow: BRAND_EYEBROW,
    heroImg: '../images/HERO-ENTERIZOS-1.webp',
    heroHeadline: HERO_HEADLINE,
    heroSub: 'Enterizo para ciclismo en una sola pieza: Lycra tipo Pro de tejido aerodinámico con transporte de humedad y secado rápido. Cierre frontal YKK, corte racing, bolsillos traseros y silueta anatómica. Más de 100 referencias y personalización con logo, nombre y RH.',
    heroSpecs: [
      { num: '$160.000 — $220.000', lab: 'Según referencia y diseño' },
      { num: 'Cierre YKK · Racing', lab: 'Tejido aerodinámico · silueta anatómica' },
      { num: 'Personalizable', lab: 'Logo · nombre · RH' },
    ],
    productsSectionNum: 'Enterizos',
    productsKicker: 'Lebike · Hecho en Colombia',
    productsTitle: (<>Una pieza.<br/>Máximo <em style={{color:'var(--accent-text)', fontStyle:'normal'}}>rendimiento.</em></>),
    productsSubtitle: 'Lycra tipo Pro con tejido aerodinámico, transporte de humedad y secado rápido. Cierre frontal YKK, corte racing, bolsillos traseros y silueta anatómica. Para ruta, competencia, triatlón y montaña — personalizable con tu equipo.',
    products: [
      {
        pid: '03',
        name: 'Enterizo para ciclismo',
        tagline: 'Lycra tipo Pro con tejido aerodinámico, transporte de humedad y secado rápido. Cierre frontal YKK, corte racing, tres bolsillos traseros y silueta anatómica. Más de 100 referencias en colores y diseños — personalizable con logos, nombres y RH.',
        badge: 'Cierre YKK · Corte racing',
        features: [
          'Lycra tipo Pro · tejido aerodinámico',
          'Transporte de humedad y secado rápido',
          'Cierre frontal YKK',
          'Corte racing y silueta anatómica',
          'Bolsillos traseros',
          'Personalizable con logo, nombre y RH',
        ],
        specs: [
          { l: 'Material',  v: 'Lycra tipo Pro · tejido aerodinámico · secado rápido' },
          { l: 'Cierre',    v: 'Frontal YKK' },
          { l: 'Disciplinas', v: 'Ruta · competencia · triatlón · montaña' },
          { l: 'Tallas y colores', v: 'XS — XXL · +100 referencias' },
          { l: 'Personalizable', v: 'Sí — logo, nombre, RH', wide: true },
        ],
        images: [
          '../images/jersey-negro.avif',
          '../images/jersey-salmon.avif',
          '../images/jersey-vinotinto.avif',
        ],
        colorways: [
          { name: 'Negro',     hex: '#0f0f0f' },
          { name: 'Salmón',    hex: '#E8735A' },
          { name: 'Vinotinto', hex: '#6B1B2A' },
        ],
        primaryCTA: 'Pedir por WhatsApp',
        secondaryCTA: 'Ver catálogo completo',
        secondaryCTAUrl: waCatalogUrl('enterizos'),
        price: (<>$ 160.000 <span style={{fontSize:'0.5em', opacity:0.7, fontWeight:300, marginLeft:8}}>— $ 220.000 según referencia</span></>),
      },
    ],
  },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = ACCENT_OPTIONS[t.accent] || ACCENT_OPTIONS['Salmón'];

  const categoryKey = (typeof window !== 'undefined' && window.LANDING_CATEGORY) || 'jerseys';
  const category = CATEGORIES[categoryKey] || CATEGORIES.jerseys;

  // Si la categoría trae imagen propia, la usamos. Si no, cae al selector demo.
  const heroImg = category.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]);

  useEffect(() => {
    const baseTitle = 'Lebike';
    document.title = `${baseTitle} · ${category.label} de ciclismo de alto rendimiento`;
  }, [category.label]);

  const finalImg = '../images/SECTION-PROXIMA-RUTA.webp';

  return (
    <>
      <Nav activeCategory={categoryKey} />
      <Hero
        heroImg={heroImg}
        categoryLabel={category.label}
        seoH1={category.seoH1}
        eyebrow={category.eyebrow}
        headline={category.heroHeadline}
        sub={category.heroSub}
        specs={category.heroSpecs}
      />
      <Marquee />
      <Benefits />
      <Products
        sectionNum={category.productsSectionNum}
        kicker={category.productsKicker}
        title={category.productsTitle}
        subtitle={category.productsSubtitle}
        products={category.products}
      />
      {(categoryKey === 'enterizos' || categoryKey === 'jerseys') && <Personalizacion />}
      <SocialProof />
      <Asesoria />
      <CambiosGarantia />
      <FinalCTA img={finalImg} />
      <Footer />
      <WhatsAppFloat />
      <StickyMobileCTA />

      <TweaksPanel title={`Tweaks · Lebike · ${category.label}`}>
        <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) || 'Salmón';
              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 />);