/* global React */
const { useEffect, useRef, useState } = React;

// ============ Icon library (minimalist, single-stroke) ============
const I = {
  arrow: (p={}) => (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" {...p}>
      <path d="M2 6h8M7 3l3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
    </svg>
  ),
  whatsapp: (p={}) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.2-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3 4.8 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.8L2 22l5.3-1.4c1.4.8 2.9 1.2 4.6 1.2h.1c5.5 0 10-4.5 10-10S17.5 2 12 2z" />
    </svg>
  ),
  wind: (p={}) => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" {...p}>
      <path d="M3 10h14a3 3 0 1 0-3-3M3 14h20M3 18h12a3 3 0 1 1-3 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
    </svg>
  ),
  aero: (p={}) => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" {...p}>
      <path d="M3 14c4-6 9-9 16-9-2 6-6 11-12 13M3 14c4 1 8 0 12-2M3 14l-1 4M9 21h7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
    </svg>
  ),
  fabric: (p={}) => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" {...p}>
      <path d="M5 5h18v18H5z M5 11h18 M5 17h18 M11 5v18 M17 5v18" stroke="currentColor" strokeWidth="1.4"/>
    </svg>
  ),
  stitch: (p={}) => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" {...p}>
      <path d="M3 14h2 m4 0h2 m4 0h2 m4 0h2 m4 0h2 M14 3v2 m0 4v2 m0 4v2 m0 4v2 m0 4v2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
    </svg>
  ),
  drop: (p={}) => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" {...p}>
      <path d="M14 3l6 8a7 7 0 1 1-12 0z M11 16a3 3 0 0 0 3 3" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="miter" strokeLinecap="square"/>
    </svg>
  ),
  road: (p={}) => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" {...p}>
      <path d="M9 3l-4 22 M19 3l4 22 M14 5v3 m0 5v3 m0 5v3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
    </svg>
  ),
  body: (p={}) => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" {...p}>
      <path d="M14 5a3 3 0 1 0 0-.001zM8 13c0-3 2.5-5 6-5s6 2 6 5l-1 4 m-10 0l-1-4 M11 17l-1 7 m8-7l1 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
    </svg>
  ),
  shield: (p={}) => (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" {...p}>
      <path d="M14 3l9 4v6c0 6-4 11-9 12-5-1-9-6-9-12V7l9-4z M10 14l3 3 5-6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" strokeLinejoin="miter"/>
    </svg>
  ),
  star: (p={}) => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" {...p}>
      <path d="M7 1l1.8 4 4.2.4-3.2 2.8 1 4.2L7 10l-3.8 2.4 1-4.2L1 5.4l4.2-.4L7 1z"/>
    </svg>
  ),
  ig: (p={}) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><rect x="3" y="3" width="18" height="18" rx="4" stroke="currentColor" strokeWidth="1.4"/><circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>),
  yt: (p={}) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><rect x="2" y="6" width="20" height="12" rx="3" stroke="currentColor" strokeWidth="1.4"/><path d="M10 9.5v5l4.5-2.5z" fill="currentColor"/></svg>),
  st: (p={}) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12L9 4l5 8M9 16l5 4 5-8" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="miter"/></svg>),
  tt: (p={}) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><path d="M14 4v10a4 4 0 1 1-4-4M14 4c0 2 2 4 4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>),
  ruler: (p={}) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><path d="M3 8l13-5 5 13L8 21z M8 8l1 3 M11 7l1 3 M14 6l1 3 M9 14l3-1 M10 17l3-1 M11 20l3-1" stroke="currentColor" strokeWidth="1.4"/></svg>),
  bike: (p={}) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><circle cx="6" cy="17" r="4" stroke="currentColor" strokeWidth="1.4"/><circle cx="18" cy="17" r="4" stroke="currentColor" strokeWidth="1.4"/><path d="M6 17l4-7h6l-3-4M14 10l4 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>),
  chat: (p={}) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><path d="M4 5h16v12H9l-5 4V5z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="miter"/></svg>),
};

// ============ Reveal hook ============
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach(e => { if (e.isIntersecting) { el.classList.add('in'); io.unobserve(el); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

// ============ NAV ============
function ThemeToggle() {
  const getInitial = () => {
    if (typeof document === 'undefined') return 'dark';
    const stored = localStorage.getItem('ciclopro-theme');
    if (stored === 'light' || stored === 'dark') return stored;
    return document.documentElement.getAttribute('data-theme') || 'dark';
  };
  const [theme, setTheme] = useState(getInitial);
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('ciclopro-theme', theme); } catch (e) {}
  }, [theme]);
  const isLight = theme === 'light';
  return (
    <button
      type="button"
      className="theme-toggle"
      onClick={() => setTheme(isLight ? 'dark' : 'light')}
      aria-label={isLight ? 'Activar modo oscuro' : 'Activar modo claro'}
      title={isLight ? 'Modo oscuro' : 'Modo claro'}
    >
      {isLight ? (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>
        </svg>
      ) : (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4"/>
          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
        </svg>
      )}
    </button>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="nav-logo">
        <span className="dot"></span>
        CICLO<span style={{opacity: 0.55}}>·</span>PRO
      </a>
      <div className="nav-links">
        <a href="#productos">Colección</a>
        <a href="#tecnologia">Tecnología</a>
        <a href="#asesoria">Asesoría</a>
        <a href="#stories">Stories</a>
      </div>
      <div className="nav-cta">
        <span className="nav-status">
          <span className="live-dot"></span>
          Asesor en línea
        </span>
        <ThemeToggle />
        <a href="#cta" className="btn btn-primary" style={{padding:'12px 18px', fontSize:11}}>
          WhatsApp
          <span className="arrow"><I.arrow /></span>
        </a>
      </div>
    </nav>
  );
}

// ============ HERO ============
function Hero({ heroImg }) {
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <div className="hero-img" style={{backgroundImage: `url(${heroImg})`}}></div>
      <div className="hero-grain"></div>

      <div className="hero-top">
        <div className="meta">
          <span className="serial-label">N°/01 — Edición Pro · Temporada 2026</span>
          <span className="serial-label" style={{color:'var(--fg)', opacity:0.7}}>Diseñado en Medellín · Probado en las Palmas</span>
        </div>
        <div className="meta" style={{textAlign:'right', alignItems:'flex-end'}}>
          <span className="serial-label">Lat 4°36′N · Long 74°04′W</span>
          <span className="serial-label" style={{color:'var(--fg)', opacity:0.7}}>2,640 m · 12 °C · viento NE</span>
        </div>
      </div>

      <div className="hero-content">
        <h1 className="display hero-headline">
          Diseñado<br/>para romper<br/>tus <em>límites</em>.
        </h1>

        <div className="hero-bottom-grid">
          <div style={{display:'flex', flexDirection:'column', gap:24, maxWidth: 540}}>
            <p className="hero-sub">
              Uniformes de ciclismo premium creados para máxima
              comodidad, aerodinámica y rendimiento en cada kilómetro.
            </p>
            <div className="hero-actions">
              <a href="#cta" className="btn btn-primary">
                <I.whatsapp />
                Recibir asesoría personalizada
                <span className="arrow"><I.arrow /></span>
              </a>
              <span className="hero-microcopy">
                <span style={{display:'inline-block', width:6, height:6, background:'var(--accent)', borderRadius:'50%'}}></span>
                Te ayudamos a elegir la talla perfecta por WhatsApp.
              </span>
            </div>
          </div>

          <div></div>

          <div className="hero-specs">
            <div className="hero-spec"><div className="num">+ 2,400</div><div className="lab">Ciclistas equipados</div></div>
            <div className="hero-spec"><div className="num">4.9 ★</div><div className="lab">Reseñas verificadas</div></div>
            <div className="hero-spec"><div className="num">{'< 5 min'}</div><div className="lab">Respuesta WhatsApp</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ MARQUEE ============
function Marquee() {
  const items = [
    'Tela Italiana 4-Way Stretch','Compresión Pro 240 GSM','Costuras Flatlock Selladas',
    'Badana Elastic Interface®','Protección UV 50+','Refrigeración Active Mesh',
    'Aerodinámica Probada en Túnel','Acabado Hidrofóbico','Cosido en Colombia',
  ];
  const all = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((t, i) => (
          <div key={i} className="marquee-item">
            <span>{t}</span>
            <span className="dot"></span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ BENEFITS ============
function Benefits() {
  const ref = useReveal();
  const benefits = [
    { icon: I.wind, title: 'Tecnología transpirable', desc: 'Mesh Active 3D que extrae humedad y mantiene la piel seca en climas tropicales.' },
    { icon: I.aero, title: 'Ajuste aerodinámico', desc: 'Patronaje pre-curvado que reduce arrastre y elimina pliegues en posición de carrera.' },
    { icon: I.fabric, title: 'Tela premium 240 GSM', desc: 'Hilatura italiana de alta densidad. Recuperación elástica superior tras cientos de lavados.' },
    { icon: I.stitch, title: 'Costuras flatlock', desc: 'Selladas, planas y reforzadas en zonas de fricción. Cero rozaduras en rutas de 6+ horas.' },
    { icon: I.drop, title: 'Secado rápido', desc: 'Tratamiento hidrofóbico que evapora sudor 3× más rápido que algodón técnico estándar.' },
    { icon: I.road, title: 'Comodidad extrema', desc: 'Construcción ergonómica para ciclistas que entrenan 200+ km semanales sin cansancio textil.' },
    { icon: I.body, title: 'Diseño ergonómico', desc: 'Cortes anatómicos por género. Manga raglán que sigue el movimiento natural del hombro.' },
    { icon: I.shield, title: 'Badana de alta densidad', desc: 'Multipanel italiana con espumas progresivas. Protección perineal certificada CE.' },
  ];
  return (
    <section className="section" id="tecnologia" data-screen-label="Benefits">
      <div className="container">
        <div className="section-head reveal" ref={ref}>
          <div className="left">
            <span className="section-num">/02 — Tecnología</span>
            <span className="section-kicker">Performance Engineering</span>
          </div>
          <div className="right">
            <h2 className="display section-title">Construido<br/>milímetro a<br/><em style={{color:'var(--accent)', fontStyle:'normal'}}>milímetro.</em></h2>
            <p className="body-md" style={{maxWidth: 560}}>
              Cada panel de tela, cada costura y cada refuerzo está pensado para una sola cosa: que dejes de pensar en lo que llevas puesto y empieces a pensar en cuánto más puedes durar.
            </p>
          </div>
        </div>

        <div className="benefits-grid">
          {benefits.map((b, i) => (
            <div key={i} className="benefit">
              <div className="benefit-top">
                <span className="benefit-num">{String(i+1).padStart(2,'0')} / 08</span>
                <span className="benefit-icon"><b.icon /></span>
              </div>
              <div className="benefit-body">
                <h3 className="benefit-title">{b.title}</h3>
                <p className="benefit-desc">{b.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ PRODUCTS ============
function Product({ pid, name, tagline, features, specs, images, colorways, badge, reverse, primaryCTA, secondaryCTA, price }) {
  const [activeIdx, setActiveIdx] = useState(0);

  const ImgPanel = ({ alignRight }) => (
    <div className="product-img">
      <div
        className="bg"
        style={{
          backgroundImage: `url(${images[activeIdx]})`,
          transition: 'background-image 0.35s ease',
        }}
      ></div>
      <div className={`corner${alignRight ? ' right' : ''}`}>
        <span className="badge"><span className="dot"></span> {badge}</span>
      </div>
      <div className="floor">
        <div className="colorways">
          <span className="serial-label" style={{marginRight: 6}}>Colorways</span>
          {colorways.map((c, i) => (
            <span
              key={i}
              className="swatch"
              onClick={() => setActiveIdx(i)}
              style={{
                background: c.hex,
                cursor: 'pointer',
                outline: activeIdx === i ? '2px solid var(--accent)' : '2px solid transparent',
                outlineOffset: 3,
                transition: 'outline 0.2s',
              }}
              title={c.name}
            ></span>
          ))}
        </div>
        <span className="serial-label">Ref. {pid} · {colorways[activeIdx].name}</span>
      </div>
    </div>
  );

  return (
    <div className={`product ${reverse ? 'reverse' : ''}`}>
      {!reverse && <ImgPanel />}
      <div className="product-content">
        <div className="product-meta">
          <span className="pid">P/{pid}</span>
          <span className="sep"></span>
          <span className="serial-label">Edición Pro · 2026</span>
        </div>
        <h3 className="display product-name">{name}</h3>
        <p className="product-tagline">{tagline}</p>

        <div className="product-specs">
          {specs.map((s, i) => (
            <div key={i} className="product-spec">
              <span className="lab">{s.l}</span>
              <span className="val">{s.v}</span>
            </div>
          ))}
        </div>

        <div className="product-features">
          {features.map((f, i) => <span key={i} className="product-feature">{f}</span>)}
        </div>

        <div className="product-price">
          <span className="from">Desde</span>
          <span className="num">{price}</span>
          <span className="from" style={{marginLeft:8}}>· consulta cuotas</span>
        </div>

        <div className="product-actions">
          <a href="#cta" className="btn btn-primary"><I.whatsapp /> {primaryCTA} <span className="arrow"><I.arrow /></span></a>
          <a href="#cta" className="btn btn-ghost">{secondaryCTA} <span className="arrow"><I.arrow /></span></a>
        </div>
      </div>
      {reverse && <ImgPanel alignRight />}
    </div>
  );
}

function Products() {
  const ref = useReveal();
  return (
    <section className="section" id="productos" data-screen-label="Products" style={{paddingTop: 0}}>
      <div className="container">
        <div className="section-head reveal" ref={ref}>
          <div className="left">
            <span className="section-num">/03 — Colección</span>
            <span className="section-kicker">Edición Pro 2026</span>
          </div>
          <div className="right">
            <h2 className="display section-title">Dos piezas.<br/>Cero <em style={{color:'var(--accent)', fontStyle:'normal'}}>compromisos.</em></h2>
            <p className="body-md" style={{maxWidth: 560}}>
              Producción limitada. Cada uniforme se confecciona bajo pedido para garantizar ajuste, color y desempeño consistentes en cada unidad que sale del taller.
            </p>
          </div>
        </div>
      </div>

      <Product
        pid="01"
        name={<>Pro Jersey<br/>Aero/Lite</>}
        tagline="El jersey más rápido que hemos construido. Patrón pre-curvado, mangas comprimidas y tejido italiano que se mueve contigo."
        badge="Best Seller"
        features={[
          'Mangas comprimidas con borde láser',
          'Tres bolsillos traseros + bolsillo seguro impermeable',
          'Cremallera YKK® camlock con anti-abertura',
          'Banda inferior siliconada antideslizante',
        ]}
        specs={[
          { l: 'Peso', v: '142 g' },
          { l: 'Tela', v: '240 GSM IT' },
          { l: 'Tallas', v: 'XS — 3XL' },
          { l: 'Genero', v: 'Hombre / Mujer' },
        ]}
        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="Hablar por WhatsApp"
        secondaryCTA="Ver ficha técnica"
        price="$ 89.000"
      />

      <Product
        pid="02"
        reverse
        name={<>Endurance<br/>Bib Short</>}
        tagline="Pantaloneta con tirantes para rutas largas. Badana italiana multidensidad y compresión gradual de muslos para músculos frescos al kilómetro 100."
        badge="Long Distance"
        features={[
          'Badana Elastic Interface® Pro 4 horas+',
          'Compresión gradual zonificada en muslos',
          'Tirantes mesh ultra-livianos sin presión',
          'Perneras láser con grippers de silicona',
        ]}
        specs={[
          { l: 'Densidad', v: '180 kg/m³' },
          { l: 'Paneles', v: '8 anatómicos' },
          { l: 'Tallas', v: 'XS — 3XL' },
          { l: 'Genero', v: 'Hombre / Mujer' },
        ]}
        images={[
          'images/pantaloneta-azul.webp',
          'images/pantaloneta-gris.webp',
          'images/pantaloneta-negra.webp',
        ]}
        colorways={[
          { name: 'Azul',  hex: '#1B3A6B' },
          { name: 'Gris',  hex: '#8A8A8A' },
          { name: 'Negro', hex: '#0f0f0f' },
        ]}
        primaryCTA="Elegir mi talla"
        secondaryCTA="Ver badana"
        price="$ 109.000"
      />
    </section>
  );
}

// ============ ASESORÍA ============
function Asesoria() {
  const ref = useReveal();
  return (
    <section className="section" id="asesoria" data-screen-label="Asesoria" style={{background: 'var(--bg-1)', borderTop: '1px solid var(--hairline)'}}>
      <div className="container">
        <div className="section-head reveal" ref={ref}>
          <div className="left">
            <span className="section-num">/04 — Asesoría</span>
            <span className="section-kicker">Atención humana 1:1</span>
          </div>
          <div className="right">
            <h2 className="display section-title">No solo vendemos uniformes.<br/><em style={{color:'var(--accent)', fontStyle:'normal'}}>Te ayudamos</em> a encontrar el tuyo.</h2>
          </div>
        </div>

        <div className="asesoria">
          <div className="chat-mock">
            <div className="chat-head">
              <div className="chat-avatar">CP</div>
              <div className="info">
                <span className="name">Andrés · Ciclo Pro</span>
                <span className="status"><span className="live-dot" style={{width:6,height:6}}></span> En línea — responde en {'< 5 min'}</span>
              </div>
              <div style={{marginLeft:'auto', color:'var(--accent)'}}><I.whatsapp /></div>
            </div>
            <div className="chat-msg us">
              Hola, me interesa el Pro Jersey. Mido 1.78 m y peso 72 kg, ¿qué talla me recomiendas?
              <span className="time">9:42 AM</span>
            </div>
            <div className="chat-msg them">
              ¡Hola! 👋 Con esa medida y un fit aero ajustado te calza perfecto talla M. ¿Lo usas más en ruta o entrenamiento intervalado?
              <span className="time">9:43 AM</span>
            </div>
            <div className="chat-msg us">
              Ruta de 80–120 km los domingos.
              <span className="time">9:43 AM</span>
            </div>
            <div className="chat-msg them">
              Perfecto. Te recomiendo el combo Aero/Lite + Endurance Bib. Te paso ficha técnica y opciones de color en un momento.
              <span className="time">9:44 AM</span>
            </div>
            <div className="chat-typing"><span></span><span></span><span></span></div>
          </div>

          <div>
            <p className="body-lg" style={{marginBottom: 24}}>
              Cada ciclista tiene un cuerpo, un terreno y una meta diferentes. Por eso no usamos calculadoras de talla automáticas: hablamos contigo, entendemos tu ruta y te recomendamos el uniforme que de verdad va a funcionar.
            </p>

            <div className="steps">
              {[
                { n:'01', t:'Cuéntanos tu medida y disciplina', d:'Estatura, peso, tipo de ruta, kilometraje semanal.', icon: I.chat },
                { n:'02', t:'Recibe recomendación personalizada', d:'Talla exacta, fit (race / endurance) y combinación ideal.', icon: I.ruler },
                { n:'03', t:'Confirmas y producimos para ti', d:'Pago seguro y envío a toda Colombia en 3–5 días hábiles.', icon: I.bike },
              ].map(s => (
                <div key={s.n} className="step">
                  <div className="step-num">{s.n}</div>
                  <div>
                    <div className="step-title">{s.t}</div>
                    <div className="step-desc">{s.d}</div>
                  </div>
                  <div className="step-icon"><s.icon /></div>
                </div>
              ))}
            </div>

            <div style={{marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap'}}>
              <a href="#cta" className="btn btn-primary">
                <I.whatsapp /> Iniciar conversación <span className="arrow"><I.arrow /></span>
              </a>
              <a href="#cta" className="btn btn-ghost">Guía de tallas <span className="arrow"><I.arrow /></span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ EMOTIONAL ============
function Emotional({ img }) {
  return (
    <section className="emotional" data-screen-label="Emotional">
      <div className="emotional-bg" style={{backgroundImage: `url(${img})`}}></div>
      <div className="emotional-content">
        <div className="serial-label" style={{marginBottom: 28, color: 'var(--fg-dim)'}}>/05 — Manifesto</div>
        <h2 className="display emotional-quote">
          No se trata de<br/>llegar más lejos.<br/>Se trata de <em>quién<br/>te conviertes</em><br/>en el camino.
        </h2>
        <span className="emotional-attr">Ciclo Pro · Manifiesto 2026</span>
      </div>
    </section>
  );
}

// ============ SOCIAL PROOF ============
function SocialProof() {
  const ref = useReveal();
  const stars = (n=5) => Array.from({length:n}).map((_,i) => <I.star key={i}/>);
  return (
    <section className="section" id="stories" data-screen-label="SocialProof">
      <div className="container">
        <div className="section-head reveal" ref={ref}>
          <div className="left">
            <span className="section-num">/06 — Comunidad</span>
            <span className="section-kicker">Pelotón Ciclo Pro</span>
          </div>
          <div className="right">
            <h2 className="display section-title">Ciclistas reales.<br/>Kilómetros <em style={{color:'var(--accent)', fontStyle:'normal'}}>reales.</em></h2>
          </div>
        </div>

        <div className="proof-stats">
          <div className="proof-stat"><div className="num">2,400<span className="accent">+</span></div><div className="lab">Ciclistas equipados</div></div>
          <div className="proof-stat"><div className="num">4.9<span className="accent">/5</span></div><div className="lab">Reseñas verificadas</div></div>
          <div className="proof-stat"><div className="num">17<span className="accent">k</span></div><div className="lab">Km de prueba en ruta</div></div>
          <div className="proof-stat"><div className="num">98<span className="accent">%</span></div><div className="lab">Recompra al año</div></div>
        </div>

        <div className="testimonials">
          {[
            { q: 'El jersey Aero/Lite es lo más cómodo que he probado. La asesoría por WhatsApp acertó la talla a la primera y los acabados son nivel europeo.', n: 'Daniela R.', r: 'Cat. Élite — Bogotá', a: 'DR' },
            { q: 'Llevo 4,000 km con la pantaloneta Endurance y la badana sigue intacta. Acompañamiento humano de principio a fin, eso ya casi nadie lo hace.', n: 'Mateo G.', r: 'Triatleta — Medellín', a: 'MG' },
            { q: 'Probé Rapha y MAAP. Ciclo Pro está al mismo nivel y con servicio personalizado. La diferencia se nota en rutas largas a Sopó.', n: 'Sebastián V.', r: 'Gran Fondo — Cali', a: 'SV' },
          ].map((t, i) => (
            <div key={i} className="testimonial">
              <div className="stars">{stars()}</div>
              <p className="testimonial-quote">"{t.q}"</p>
              <div className="testimonial-author">
                <div className="testimonial-avatar">{t.a}</div>
                <div className="info">
                  <span className="name">{t.n}</span>
                  <span className="role">{t.r}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="logo-cloud">
          <span className="lab">Equipos y eventos que nos ruedan</span>
          <div className="logos">
            <span className="fake-logo">◆ Andes Cycling Team</span>
            <span className="fake-logo">▲ Gran Fondo Sopó</span>
            <span className="fake-logo">● Pelotón Suba</span>
            <span className="fake-logo">◇ Bogotá Cyclery</span>
            <span className="fake-logo">⏣ Vuelta Cundinamarca</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ URGENCY ============
function Urgency() {
  return (
    <section className="urgency" data-screen-label="Urgency">
      <div className="container">
        <div className="urgency-row">
          <span className="urgency-label">
            <span className="live-dot" style={{width:8, height:8}}></span>
            Edición limitada · Drop 02
          </span>
          <span className="urgency-text">
            Producción 2026 · 320 unidades en circulación · alta demanda esta temporada.
          </span>
          <div className="urgency-bar">
            <div className="top">
              <span>Inventario asignado</span>
              <span>78% reservado</span>
            </div>
            <div className="track"><div className="fill"></div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ FINAL CTA ============
function FinalCTA({ img }) {
  return (
    <section className="final-cta" id="cta" data-screen-label="FinalCTA">
      <div className="final-cta-bg" style={{backgroundImage: `url(${img})`}}></div>
      <div className="final-cta-content">
        <div>
          <div className="serial-label" style={{marginBottom: 28}}>/07 — Próxima ruta</div>
          <h2 className="display final-cta-headline">
            Tu próxima<br/>mejor ruta<br/>comienza <em>aquí.</em>
          </h2>
          <p className="final-cta-sub">
            Asesoría personalizada para encontrar el uniforme perfecto para ti.
            Hablamos por WhatsApp y te acompañamos hasta el primer kilómetro.
          </p>
          <div className="final-cta-actions">
            <a href="https://wa.me/573001234567?text=Hola%20Ciclo%20Pro%2C%20quiero%20asesor%C3%ADa%20para%20mi%20uniforme" target="_blank" rel="noopener" className="btn btn-primary" style={{padding:'22px 32px', fontSize:13}}>
              <I.whatsapp /> Comprar por WhatsApp <span className="arrow"><I.arrow /></span>
            </a>
            <span className="hero-microcopy">
              <span style={{display:'inline-block', width:6, height:6, background:'var(--accent)', borderRadius:'50%'}}></span>
              Respuesta rápida y atención personalizada — lun a sáb · 8 a.m. — 8 p.m.
            </span>
          </div>
        </div>
        <div className="final-cta-side">
          <div className="serial-label" style={{color:'var(--fg)', opacity:0.7}}>Tu experiencia incluye</div>
          {[
            { t: 'Asesoría 1:1 por WhatsApp', d: 'Talla, color y combinación ideal.', icon: I.chat },
            { t: 'Envío seguro a toda Colombia', d: '3–5 días hábiles. Cambio de talla sin costo.', icon: I.bike },
            { t: 'Garantía de costuras 12 meses', d: 'Si algo falla, lo reparamos o reemplazamos.', icon: I.shield },
          ].map((it, i) => (
            <div key={i} className="item">
              <span className="icon"><it.icon /></span>
              <div className="info">
                <span className="t">{it.t}</span>
                <span className="d">{it.d}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <div className="footer-brand-logo">CICLO<span className="dot">·</span>PRO</div>
            <p className="footer-brand-tagline">
              Uniformes de ciclismo de alto rendimiento, diseñados en Colombia y probados en los Andes. Producción limitada, asesoría humana, ajuste perfecto.
            </p>
          </div>
          <div className="footer-col">
            <h4>Colección</h4>
            <ul>
              <li><a href="#productos">Pro Jersey Aero/Lite</a></li>
              <li><a href="#productos">Endurance Bib Short</a></li>
              <li><a href="#productos">Lookbook 2026</a></li>
              <li><a href="#productos">Próximos drops</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Acompañamiento</h4>
            <ul>
              <li><a href="#asesoria">Asesoría WhatsApp</a></li>
              <li><a href="#asesoria">Guía de tallas</a></li>
              <li><a href="#asesoria">Cambios y devoluciones</a></li>
              <li><a href="#asesoria">Envíos Colombia</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Estudio</h4>
            <ul>
              <li><a href="#stories">Manifiesto</a></li>
              <li><a href="#stories">Pelotón Ciclo Pro</a></li>
              <li><a href="#stories">Eventos y rodadas</a></li>
              <li><a href="#stories">Prensa</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span className="footer-copy">© 2026 Ciclo Pro · Diseñado en Medellín</span>
          <div className="footer-socials">
            <a href="#" aria-label="Instagram"><I.ig/></a>
            <a href="#" aria-label="YouTube"><I.yt/></a>
            <a href="#" aria-label="Strava"><I.st/></a>
            <a href="#" aria-label="TikTok"><I.tt/></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ============ WhatsApp Float ============
function WhatsAppFloat() {
  return (
    <a href="https://wa.me/573001234567?text=Hola%20Ciclo%20Pro%2C%20quiero%20asesor%C3%ADa" target="_blank" rel="noopener" className="wa-float" aria-label="WhatsApp">
      <span className="pulse"></span>
      <span className="icon-wrap"><I.whatsapp /></span>
      <span className="text">Asesoría WhatsApp</span>
    </a>
  );
}

Object.assign(window, {
  Nav, Hero, Marquee, Benefits, Products, Asesoria,
  Emotional, SocialProof, Urgency, FinalCTA, Footer, WhatsAppFloat, I
});