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

// ============ Constantes de marca ============
const WA_PHONE = '573041170678';
const WA_BASE_MSG = 'Hola Lebike, quiero asesoría';
const WA_URL = `https://wa.me/${WA_PHONE}?text=${encodeURIComponent(WA_BASE_MSG)}`;
const WA_URL_UNIFORM = `https://wa.me/${WA_PHONE}?text=${encodeURIComponent('Hola Lebike, quiero asesoría para mi uniforme')}`;

// ============ 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" aria-hidden="true" {...p}>
      <path fillRule="evenodd" clipRule="evenodd" d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
    </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="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <rect x="2.5" y="2.5" width="19" height="19" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
    </svg>
  ),
  fb: (p={}) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.99 3.657 9.128 8.438 9.878v-6.988h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.772-1.63 1.563V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.99 22 12z"/>
    </svg>
  ),
  tt: (p={}) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M19.589 6.686a4.793 4.793 0 0 1-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 0 1-5.201 1.743 2.896 2.896 0 0 1 2.318-5.221 2.876 2.876 0 0 1 .87.135V8.83a6.327 6.327 0 0 0-1.025-.077A6.336 6.336 0 0 0 5 15.083 6.336 6.336 0 0 0 15.81 19.59V8.687a8.179 8.179 0 0 0 4.773 1.526V6.79a4.83 4.83 0 0 1-.994-.104z"/>
    </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('lebike-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('lebike-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({ activeCategory }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const navItems = [
    { key: 'jerseys',   label: 'Jerseys',   href: '../jerseys/' },
    { key: 'licras',    label: 'Licras',    href: '../licras/' },
    { key: 'enterizos', label: 'Enterizos', href: '../enterizos/' },
  ];
  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="nav-zone nav-zone-left">
          <a href="../jerseys/" className="nav-logo brand-logo" aria-label="Lebike · Inicio">
            <img src="../images/logo-fondooscuro.png" alt="Lebike" className="logo-dark" />
            <img src="../images/logo-fondoclaro.png" alt="Lebike" className="logo-light" />
          </a>
        </div>

        <div className="nav-zone nav-zone-center">
          <div className="nav-links">
            {navItems.map(it => (
              <a
                key={it.key}
                href={it.href}
                className={activeCategory === it.key ? 'active' : ''}
                aria-current={activeCategory === it.key ? 'page' : undefined}
              >
                {it.label}
              </a>
            ))}
            <span className="nav-sep" aria-hidden="true"></span>
            <a href="#asesoria">Asesoría</a>
          </div>
        </div>

        <div className="nav-zone nav-zone-right">
          <ThemeToggle />
          <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-primary nav-wa">
            <I.whatsapp />
            <span className="label">WhatsApp</span>
            <span className="arrow"><I.arrow /></span>
          </a>
          <button
            type="button"
            className={`nav-burger ${menuOpen ? 'open' : ''}`}
            aria-label={menuOpen ? 'Cerrar menú' : 'Abrir menú'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(v => !v)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>

      <div className={`nav-mobile ${menuOpen ? 'open' : ''}`} onClick={() => setMenuOpen(false)}>
        <div className="nav-mobile-panel" onClick={(e) => e.stopPropagation()}>
          <span className="serial-label nav-mobile-label">Colección</span>
          {navItems.map(it => (
            <a
              key={it.key}
              href={it.href}
              className={activeCategory === it.key ? 'active' : ''}
              aria-current={activeCategory === it.key ? 'page' : undefined}
            >
              <span>{it.label}</span>
              <span className="arrow"><I.arrow /></span>
            </a>
          ))}
          <span className="serial-label nav-mobile-label">Soporte</span>
          <a href="#asesoria" onClick={() => setMenuOpen(false)}>
            <span>Asesoría</span>
            <span className="arrow"><I.arrow /></span>
          </a>
          <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-primary nav-mobile-cta" onClick={() => setMenuOpen(false)}>
            <I.whatsapp />
            Hablar por WhatsApp
            <span className="arrow"><I.arrow /></span>
          </a>
        </div>
      </div>
    </>
  );
}

// ============ HERO ============
function Hero({ heroImg, categoryLabel, seoH1, eyebrow, headline, sub, specs }) {
  const defaultHeadline = (<>Diseñado<br/>para romper<br/>tus <em>límites</em>.</>);
  const defaultSub = 'Uniformes de ciclismo premium creados para máxima comodidad, aerodinámica y rendimiento en cada kilómetro.';
  const defaultSpecs = [
    { num: '8 años', lab: 'En el mercado' },
    { num: 'Ibagué', lab: 'Hecho en Colombia' },
    { num: '5–8 días', lab: 'Envío a toda Colombia' },
  ];
  const heroSpecs = specs && specs.length ? specs : defaultSpecs;
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <div className="hero-img" style={{backgroundImage: `url(${heroImg})`}}>
        {categoryLabel && (
          <span className="hero-img-label" aria-hidden="true">{categoryLabel}</span>
        )}
      </div>
      <div className="hero-grain"></div>

      <div className="hero-top">
        <div className="meta">
          <span className="serial-label">{eyebrow || '8 años · Hecho en Ibagué, Tolima · Envíos a toda Colombia'}</span>
          <span className="serial-label" style={{color:'var(--fg)', opacity:0.7}}>Rendimiento que se siente, estilo que se nota</span>
        </div>
        <div className="meta" style={{textAlign:'right', alignItems:'flex-end'}}>
          <span className="serial-label">Asesoría 1:1 por WhatsApp</span>
          <span className="serial-label" style={{color:'var(--fg)', opacity:0.7}}>Envío 5–8 días hábiles</span>
        </div>
      </div>

      <div className="hero-content">
        {seoH1 && <h1 className="sr-only">{seoH1}</h1>}
        <p className="display hero-headline" role="doc-subtitle">
          {headline || defaultHeadline}
        </p>

        <div className="hero-bottom-grid">
          <div style={{display:'flex', flexDirection:'column', gap:24, maxWidth: 540}}>
            <p className="hero-sub">
              {sub || defaultSub}
            </p>
            <div className="hero-actions">
              <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-primary">
                <I.whatsapp />
                Recibir asesoría personalizada
                <span className="arrow"><I.arrow /></span>
              </a>
              <span className="hero-microcopy">
                <span style={{color:'var(--accent)', letterSpacing:'0.15em', fontSize:13}}>★★★★★</span>
                <span>8 años · Reseñas verificadas en Facebook</span>
              </span>
            </div>
          </div>

          <div></div>

          <div className="hero-specs">
            {heroSpecs.map((s, i) => (
              <div key={i} className="hero-spec">
                <div className="num">{s.num}</div>
                <div className="lab">{s.lab}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ MARQUEE ============
function Marquee() {
  const items = [
    '8 años en el mercado','Hecho en Ibagué, Tolima','Envíos a toda Colombia',
    'Asesoría 1:1 por WhatsApp','Diseños personalizados','Cambios hasta 15 días',
    'Garantía 30 días','Atención humana','Pelotón Lebike',
  ];
  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 ============
// 4 cards orientadas a las objeciones reales del comprador.
// La ficha técnica detallada vive en la sección de producto.
function Benefits() {
  const ref = useReveal();
  const benefits = [
    {
      icon: I.shield,
      title: '¿Aguantará rutas largas?',
      desc: 'Badana 3D de gel de densidad media pensada para rutas largas, costuras planas y banda de silicona que mantiene la prenda en su lugar kilómetro tras kilómetro.',
    },
    {
      icon: I.fabric,
      title: '¿Calidad como las marcas grandes?',
      desc: 'Lycra italiana con compresión gradual en licras y tejido aerodinámico tipo Pro en enterizos. Telas con transporte de humedad y secado rápido, hechas en Colombia.',
    },
    {
      icon: I.bike,
      title: '¿Llegará bien y a tiempo?',
      desc: 'Envíos a toda Colombia en 5–8 días hábiles. Pago por transferencia, Nequi, Daviplata o contraentrega — tú decides cómo.',
    },
    {
      icon: I.chat,
      title: '¿Y si no me queda?',
      desc: 'Asesoría 1:1 por WhatsApp con Luis para acertar la talla. Cambios sin problema hasta 15 días y garantía de 30 días por calidad.',
    },
  ];
  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">Por qué Lebike</span>
            <span className="section-kicker">Hecho para ciclistas reales</span>
          </div>
          <div className="right">
            <h2 className="display section-title">Lo que importa<br/>cuando compras<br/><em style={{color:'var(--accent-text)', fontStyle:'normal'}}>en línea.</em></h2>
            <p className="body-md" style={{maxWidth: 560}}>
              Las dudas que todo ciclista tiene antes de pedir su uniforme — resueltas. Sin letra pequeña ni promesas vacías.
            </p>
          </div>
        </div>

        <div className="benefits-grid benefits-grid-4">
          {benefits.map((b, i) => (
            <div key={i} className="benefit">
              <div className="benefit-top">
                <span className="benefit-num">{String(i+1).padStart(2,'0')} / 04</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, secondaryCTAUrl, price }) {
  const [activeIdx, setActiveIdx] = useState(0);
  const touchStartX = useRef(null);

  const imageCount = images.length;
  const imgIdx = Math.min(activeIdx, imageCount - 1);

  const goNext = () => setActiveIdx(() => (imgIdx + 1) % imageCount);
  const goPrev = () => setActiveIdx(() => (imgIdx - 1 + imageCount) % imageCount);

  const onTouchStart = (e) => { touchStartX.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touchStartX.current === null) return;
    const dx = e.changedTouches[0].clientX - touchStartX.current;
    if (Math.abs(dx) > 40) {
      if (dx < 0) goNext();
      else goPrev();
    }
    touchStartX.current = null;
  };

  const ImgPanel = ({ alignRight }) => (
    <div className="product-img" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
      <div
        className="bg"
        style={{
          backgroundImage: `url(${images[imgIdx] || images[0]})`,
          transition: 'background-image 0.35s ease',
        }}
      ></div>
      <div className={`corner${alignRight ? ' right' : ''}`}>
        <span className="badge"><span className="dot"></span> {badge}</span>
      </div>

      {imageCount > 1 && (
        <>
          <button
            type="button"
            className="p-arrow p-prev"
            onClick={goPrev}
            aria-label="Imagen anterior"
          >
            <svg width="14" height="14" viewBox="0 0 12 12" fill="none"><path d="M10 6H2M5 9 2 6l3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/></svg>
          </button>
          <button
            type="button"
            className="p-arrow p-next"
            onClick={goNext}
            aria-label="Imagen siguiente"
          >
            <svg width="14" height="14" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 3l3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/></svg>
          </button>

          <div className="p-dots" role="tablist" aria-label="Galería de producto">
            {images.map((_, i) => (
              <button
                key={i}
                type="button"
                className={`p-dot ${imgIdx === i ? 'active' : ''}`}
                onClick={() => setActiveIdx(i)}
                aria-label={`Imagen ${i + 1} de ${imageCount}`}
                aria-selected={imgIdx === i}
              />
            ))}
          </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 || colorways[0].name}</span>
      </div>
    </div>
  );

  return (
    <div className={`product ${reverse ? 'reverse' : ''}`}>
      {!reverse && <ImgPanel />}
      <div className="product-content">
        <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${s.wide ? ' product-spec--wide' : ''}`}>
              <span className="lab">{s.l}</span>
              <span className="val">{s.v}</span>
            </div>
          ))}
        </div>

        <div className="product-price">
          <span className="from">Desde</span>
          <span className="num">{price}</span>
        </div>

        <div className="product-actions">
          <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-primary"><I.whatsapp /> {primaryCTA} <span className="arrow"><I.arrow /></span></a>
          <a href={secondaryCTAUrl || WA_URL} target="_blank" rel="noopener" className="btn btn-ghost">{secondaryCTA} <span className="arrow"><I.arrow /></span></a>
        </div>
      </div>
      {reverse && <ImgPanel alignRight />}
    </div>
  );
}

function Products({ sectionNum, kicker, title, subtitle, 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">{sectionNum || 'Colección'}</span>
            <span className="section-kicker">{kicker || 'Lebike · Hecho en Colombia'}</span>
          </div>
          <div className="right">
            <h2 className="display section-title">{title}</h2>
            <p className="body-md" style={{maxWidth: 560}}>{subtitle}</p>
          </div>
        </div>
      </div>

      <div className="container">
        {products.map((p, i) => (
          <Product key={p.pid} {...p} reverse={i % 2 === 1} />
        ))}
      </div>
    </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">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-text)', 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">Luis Castellanos · Lebike</span>
                <span className="status"><span className="live-dot" style={{width:6,height:6}}></span> Lun a sáb · respuesta rápida</span>
              </div>
              <div style={{marginLeft:'auto', color:'var(--accent-text)'}}><I.whatsapp /></div>
            </div>
            <div className="chat-msg us">
              Hola Lebike, mido 1.75 y peso 72kg. ¿Qué talla de licra me recomiendan?
              <span className="time">9:42 AM</span>
            </div>
            <div className="chat-msg them">
              ¡Hola! 👋 Talla M te queda perfecta. Tenemos 15 colores disponibles — ¿quieres negro clásico o algo más llamativo como verde olivo o vinotinto?
              <span className="time">9:43 AM</span>
            </div>
            <div className="chat-msg us">
              Negro y verde olivo. ¿Cómo pago?
              <span className="time">9:43 AM</span>
            </div>
            <div className="chat-msg them">
              Transferencia, Nequi, Daviplata o contraentrega. Te llega en 5–8 días hábiles a toda Colombia. ¿Te paso los datos?
              <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:'Escríbenos por WhatsApp', d:'Cuéntanos tu medida, disciplina y qué buscas. Te enviamos el catálogo.', icon: I.chat },
                { n:'02', t:'Recibe recomendación personalizada', d:'Talla, color y combinación ideal según tu cuerpo y tu ruta.', icon: I.ruler },
                { n:'03', t:'Pago y envío a toda Colombia', d:'Transferencia, Nequi, Daviplata o contraentrega. Llega en 5–8 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={WA_URL} target="_blank" rel="noopener" className="btn btn-primary">
                <I.whatsapp /> Iniciar conversación <span className="arrow"><I.arrow /></span>
              </a>
              <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-ghost">Guía de tallas <span className="arrow"><I.arrow /></span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ SOCIAL PROOF ============
function SocialProof() {
  const ref = useReveal();
  const carouselRef = useRef(null);
  const stars = (n=5) => Array.from({length:n}).map((_,i) => <I.star key={i}/>);
  const scrollByCard = (dir) => {
    const el = carouselRef.current;
    if (!el) return;
    const card = el.firstElementChild;
    const step = card ? (card.offsetWidth + 24) : el.clientWidth * 0.8;
    el.scrollBy({ left: dir * step, behavior: 'smooth' });
  };
  return (
    <section className="section" id="stories" data-screen-label="SocialProof" style={{borderTop: '1px solid var(--hairline)'}}>
      <div className="container">
        <div className="section-head reveal" ref={ref}>
          <div className="left">
            <span className="section-num">Comunidad</span>
            <span className="section-kicker">Pelotón Lebike</span>
          </div>
          <div className="right">
            <h2 className="display section-title">Ciclistas reales.<br/>Kilómetros <em style={{color:'var(--accent-text)', fontStyle:'normal'}}>reales.</em></h2>
          </div>
        </div>

        <div className="proof-stats">
          <div className="proof-stat"><div className="num">8<span className="accent"> años</span></div><div className="lab">En el mercado · Ibagué, Tolima</div></div>
          <div className="proof-stat"><div className="num">100<span className="accent">%</span></div><div className="lab">Diseñado en Colombia</div></div>
          <div className="proof-stat"><div className="num">5–8<span className="accent"> días</span></div><div className="lab">Envío a toda Colombia</div></div>
          <div className="proof-stat"><div className="num">30<span className="accent"> días</span></div><div className="lab">Garantía por calidad</div></div>
        </div>

        <div className="testimonials-wrap">
          <button
            type="button"
            className="t-arrow t-prev"
            aria-label="Testimonio anterior"
            onClick={() => scrollByCard(-1)}
          ><svg width="14" height="14" viewBox="0 0 12 12" fill="none"><path d="M10 6H2M5 9 2 6l3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/></svg></button>
          <button
            type="button"
            className="t-arrow t-next"
            aria-label="Siguiente testimonio"
            onClick={() => scrollByCard(1)}
          ><svg width="14" height="14" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 3l3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/></svg></button>

        <div className="testimonials" ref={carouselRef}>
          {[
            {
              q: 'Recibí mi badana para la rodada de la travesía Bogotá–Villavicencio. Excelente, muy buena calidad. En serio que son los número uno, muchas gracias.',
              n: 'Sandra Pijaran', r: 'Reseña en Facebook · 12 abr 2026', a: 'SP',
            },
            {
              q: 'Adquirí una y es de muy buena calidad. Yo vivo en Cali y estuve en Decathlon, son más costosas y nada que ver. Por eso me decidí por las de ustedes. Muy buena badana y muy cómoda.',
              n: 'Orlando Cardona', r: 'Reseña en Facebook · 29 abr 2026', a: 'OC',
            },
            {
              q: 'Hoy recibí por primera vez mi pedido. Completamente de acuerdo con su slogan: "Te acompañaré en todas tus rodadas". Desde ahora fan #1 de Lebike. Excelente calidad de badanas, muy buen asesoramiento, seriedad y cumplimiento.',
              n: 'Angela Londoño', r: 'Reseña en Facebook · 11 abr 2026', a: 'AL',
            },
            {
              q: 'Últimamente uso solo badanas Lebike porque me ofrecen recorridos cómodos. Las de 9 horas son súper cómodas y de buena calidad. Los invito a usarlas, son muy cumplidos con las entregas. Súper recomendados.',
              n: 'Mazamorro Jerico', r: 'Reseña en Facebook · 21 abr 2026', a: 'MJ',
            },
            {
              q: 'Excelente producto, muy cumplidos con la entrega. Excelente calidad en la tela y el diseño espectacular. La atención y asesoría 100/100. Muchas gracias.',
              n: 'Luz Picon Castro', r: 'Reseña en Facebook · 17 abr 2026', a: 'LP',
            },
            {
              q: 'Las recomiendo por su calidad y desempeño. Cumple con las especificaciones.',
              n: 'Lorena Martínez', r: 'Reseña en Facebook · 10 abr 2026', a: 'LM',
            },
            {
              q: 'Compré una larga, muy buena calidad. Excelente para clima caliente.',
              n: 'José Beltrán', r: 'Reseña en Facebook · 26 mar 2026', a: 'JB',
            },
            {
              q: 'Me acaba de llegar el pedido y de verdad que son todo lo que dicen. Las telas excelentes, muy suaves, no acaloran para nada. Excelente calidad. 👍',
              n: 'Manuel Alonso Algecira', r: 'Reseña en Facebook · 7 may 2026', a: 'MA',
            },
          ].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>

        <div className="logo-cloud">
          <span className="lab">Síguenos</span>
          <div className="logos">
            <a className="fake-logo" href="https://www.instagram.com/lebikecyclingclothes" target="_blank" rel="noopener"><I.ig /> Instagram @lebikecyclingclothes</a>
            <a className="fake-logo" href="https://www.facebook.com/Lebikecyclingdesign/" target="_blank" rel="noopener"><I.fb /> Facebook Lebike Cycling Design</a>
            <a className="fake-logo" href="https://www.tiktok.com/@lebikecycling" target="_blank" rel="noopener"><I.tt /> TikTok @lebikecycling</a>
            <span className="fake-logo">◇ 8 años en el mercado</span>
            <span className="fake-logo">⏣ Hecho en Ibagué, Tolima</span>
          </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})`}}>
        <span className="final-cta-bg-label" aria-hidden="true">Próxima ruta</span>
      </div>
      <div className="final-cta-content">
        <div>
          <div className="serial-label" style={{marginBottom: 28}}>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={WA_URL_UNIFORM} 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>
              Atención por WhatsApp lun a sáb · respuesta rápida.
            </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 para tu cuerpo y tu ruta.', icon: I.chat },
            { t: 'Envío a toda Colombia', d: '5–8 días hábiles. Pago: transferencia, Nequi, Daviplata o contraentrega.', icon: I.bike },
            { t: 'Cambios y garantía', d: 'Cambios hasta 15 días · Garantía de 30 días por defecto de fabricación.', 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 brand-logo">
              <img src="../images/logo-fondooscuro.png" alt="Lebike" className="logo-dark" />
              <img src="../images/logo-fondoclaro.png" alt="Lebike" className="logo-light" />
            </div>
            <p className="footer-brand-tagline">
              Ropa de ciclismo diseñada en Ibagué, Tolima. 8 años acompañando a ciclistas con telas de calidad, diseños personalizados y atención cercana.
            </p>
            <p className="footer-brand-tagline" style={{marginTop: 12, fontStyle: 'italic'}}>
              Rendimiento que se siente, estilo que se nota.
            </p>
          </div>
          <div className="footer-col">
            <h4>Colección</h4>
            <ul>
              <li><a href="../jerseys/">Jerseys</a></li>
              <li><a href="../licras/">Licras</a></li>
              <li><a href="../enterizos/">Enterizos</a></li>
              <li><a href={WA_URL} target="_blank" rel="noopener">Personalización</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Acompañamiento</h4>
            <ul>
              <li><a href={WA_URL} target="_blank" rel="noopener">Asesoría por WhatsApp</a></li>
              <li><a href={WA_URL} target="_blank" rel="noopener">Guía de tallas</a></li>
              <li><a href="#cambios-garantia">Cambios y garantía</a></li>
              <li><a href="#cambios-garantia">Cuidado del producto</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Pago y envío</h4>
            <ul>
              <li>Transferencia</li>
              <li>Nequi · Daviplata</li>
              <li>Contraentrega</li>
              <li>Envíos a toda Colombia · 5–8 días</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span className="footer-copy">© {new Date().getFullYear()} Lebike · Hecho en Ibagué, Tolima</span>
          <div className="footer-socials">
            <a href="https://www.instagram.com/lebikecyclingclothes" target="_blank" rel="noopener" aria-label="Instagram"><I.ig/></a>
            <a href="https://www.facebook.com/Lebikecyclingdesign/" target="_blank" rel="noopener" aria-label="Facebook"><I.fb/></a>
            <a href="https://www.tiktok.com/@lebikecycling" target="_blank" rel="noopener" aria-label="TikTok"><I.tt/></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ============ WhatsApp Float (desktop) ============
function WhatsAppFloat() {
  return (
    <a href={WA_URL} 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>
  );
}

// ============ Sticky CTA bar (mobile) ============
// Barra fija inferior solo visible en mobile/tablet. CTA único, alta conversión.
function StickyMobileCTA() {
  return (
    <div className="sticky-cta" role="region" aria-label="Acciones rápidas">
      <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-primary sticky-cta-btn">
        <I.whatsapp />
        Pedir por WhatsApp
        <span className="arrow"><I.arrow /></span>
      </a>
    </div>
  );
}

// ============ PERSONALIZACIÓN (solo enterizos) ============
function Personalizacion() {
  const ref = useReveal();
  return (
    <section className="section" id="personalizacion" data-screen-label="Personalizacion" 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">Personalización</span>
            <span className="section-kicker">Tu equipo, tu identidad</span>
          </div>
          <div className="right">
            <h2 className="display section-title">Diseñado<br/>para tu <em style={{color:'var(--accent-text)', fontStyle:'normal'}}>equipo.</em></h2>
            <p className="body-md" style={{maxWidth: 560}}>
              Personalizamos enterizos para clubes, equipos y academias. Tu logo, tu nombre, tu RH — listos para la línea de salida.
            </p>
          </div>
        </div>

        <div className="benefits-grid">
          {[
            { icon: I.shield, title: 'Logos de equipos y patrocinadores', desc: 'Sublimación de logos de clubes, academias y marcas patrocinantes en alta resolución.' },
            { icon: I.body,   title: 'Nombres y números', desc: 'Nombre del ciclista en el panel trasero o lateral. Tipografía a medida.' },
            { icon: I.drop,   title: 'Tipo de sangre (RH)', desc: 'RH visible en zona estratégica — un detalle que puede salvar vidas en ruta.' },
          ].map((b, i) => (
            <div key={i} className="benefit">
              <div className="benefit-top">
                <span className="benefit-num">{String(i+1).padStart(2,'0')} / 03</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 style={{marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap'}}>
          <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-primary">
            <I.whatsapp /> Cotizar para mi equipo <span className="arrow"><I.arrow /></span>
          </a>
          <a href={WA_URL} target="_blank" rel="noopener" className="btn btn-ghost">
            Ver ejemplos <span className="arrow"><I.arrow /></span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ============ CAMBIOS Y GARANTÍA ============
function CambiosGarantia() {
  const ref = useReveal();
  const cards = [
    {
      icon: I.chat,
      tag: 'Cambios',
      plazo: '15 días',
      items: [
        'Producto sin uso, sin lavado, con etiquetas originales',
        'Cambio por talla, color, referencia o bono saldo',
        'Costos de envío asumidos por el cliente, salvo defecto',
        'Productos en promoción no aplican (salvo garantía)',
      ],
    },
    {
      icon: I.shield,
      tag: 'Garantía',
      plazo: '30 días',
      items: [
        'Cubre defectos de costuras, cierres, estampados y telas',
        'No cubre mal uso, desgaste natural ni lavado inadecuado',
        'Solicita por WhatsApp con fotos y número de pedido',
        'Respuesta en 3–5 días hábiles',
      ],
    },
    {
      icon: I.drop,
      tag: 'Cuidado',
      plazo: 'Para que dure',
      items: [
        'Lavar a mano o en ciclo suave',
        'No usar blanqueador',
        'No retorcer · secar a la sombra',
        'No planchar estampados',
      ],
    },
  ];
  return (
    <section className="section" id="cambios-garantia" data-screen-label="CambiosGarantia" style={{borderTop: '1px solid var(--hairline)'}}>
      <div className="container">
        <div className="section-head reveal" ref={ref}>
          <div className="left">
            <span className="section-num">Cambios y Garantía</span>
            <span className="section-kicker">Tu compra, respaldada</span>
          </div>
          <div className="right">
            <h2 className="display section-title">Te acompañamos<br/>antes y <em style={{color:'var(--accent-text)', fontStyle:'normal'}}>después.</em></h2>
            <p className="body-md" style={{maxWidth: 560}}>
              Si algo no calza o falla por fabricación, lo resolvemos. Estos son los plazos y condiciones que aplican a todos los pedidos Lebike.
            </p>
          </div>
        </div>

        <div className="benefits-grid">
          {cards.map((c, i) => (
            <div key={i} className="benefit">
              <div className="benefit-top">
                <span className="benefit-num">{c.tag}</span>
                <span className="benefit-icon"><c.icon /></span>
              </div>
              <div className="benefit-body">
                <h3 className="benefit-title">{c.plazo}</h3>
                <ul className="benefit-list">
                  {c.items.map((it, j) => (
                    <li key={j}>{it}</li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        <p className="body-sm" style={{marginTop: 28, color: 'var(--fg-muted)'}}>
          Para gestionar un cambio o garantía, escríbenos por WhatsApp con tu nombre completo, número de pedido y fotos de la novedad.
        </p>
      </div>
    </section>
  );
}

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