// ===== Shared components: Header, Footer, Product card, Tweaks =====
const { useState, useEffect, useRef, useMemo } = React;

// === Header ===
const Header = ({ route, navigate, cartCount }) => {
  const [menuOpen, setMenuOpen] = useState(false);
  const items = [
  { key: 'home', lbl: 'Inicio', icon: 'home' },
  { key: 'catalog', lbl: 'Catálogo', icon: 'grid' },
  { key: 'garage', lbl: 'Mi Garage', icon: 'car' },
  { key: 'services', lbl: 'Servicios', icon: 'wrench' },
  { key: 'quiz', lbl: 'Asesor', icon: 'chat' }];


  // Lock scroll when menu open — both html and body, with touch-action to prevent iOS rubber-band
  useEffect(() => {
    if (menuOpen) {
      const scrollY = window.scrollY;
      document.documentElement.classList.add('has-overlay');
      document.body.style.position = 'fixed';
      document.body.style.top = `-${scrollY}px`;
      document.body.style.width = '100%';
      document.body.dataset.scrollY = String(scrollY);
    } else {
      const y = parseInt(document.body.dataset.scrollY || '0', 10);
      document.documentElement.classList.remove('has-overlay');
      document.body.style.position = '';
      document.body.style.top = '';
      document.body.style.width = '';
      delete document.body.dataset.scrollY;
      if (y) window.scrollTo(0, y);
    }
    return () => {
      document.documentElement.classList.remove('has-overlay');
      document.body.style.position = '';
      document.body.style.top = '';
      document.body.style.width = '';
    };
  }, [menuOpen]);

  const go = (k) => {setMenuOpen(false);navigate(k);};

  return (
    <>
      <div className="utilbar">
        <div className="scroller">
          <span><span className="pulse"></span>Talleres abiertos · CDMX</span>
          <span className="hide-sm">Envío gratis &gt; $3,000 MXN</span>
          <span className="hide-sm">Instalación en 45 min</span>
        </div>
        <div className="scroller">
          <span>📞 55 8000 RUTA</span>
          <span className="hide-sm">ES / EN</span>
        </div>
      </div>
      <header className="header">
        <div className="header-inner" data-comment-anchor="d235d7eeb7-div-37-9">
          <button className="btn-icon menu-toggle" onClick={() => setMenuOpen(true)} aria-label="Abrir menú">
            <Icon name="menu" />
          </button>
          <div className="logo" onClick={() => go('home')}>
            <img src="assets/ruta-logo-full.png" alt="RUTA — Llantas + Servicio" className="logo-img" />
          </div>
          <nav className="nav">
            {items.map((it) =>
            <a key={it.key} className={'nav-item ' + (route === it.key ? 'active' : '')} onClick={() => navigate(it.key)}>{it.lbl}</a>
            )}
          </nav>
          <div className="header-actions">
            <button className="btn-icon hide-sm" title="Buscar"><Icon name="search" /></button>
            <button className="btn-icon hide-sm" title="Cuenta" onClick={() => navigate('account')} data-comment-anchor="036138b1ca-button-51-13"><Icon name="user" /></button>
            <button className="btn-icon" title="Carrito" onClick={() => navigate('cart')}>
              <Icon name="cart" />
              {cartCount > 0 && <span className="badge">{cartCount}</span>}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile drawer */}
      <div className={'drawer-overlay ' + (menuOpen ? 'on' : '')} onClick={() => setMenuOpen(false)}></div>
      <aside className={'drawer ' + (menuOpen ? 'on' : '')} aria-hidden={!menuOpen}>
        <div className="drawer-head">
          <img src="assets/ruta-logo-full.png" alt="RUTA" className="logo-img" style={{ height: 44 }} />
          <button className="btn-icon" onClick={() => setMenuOpen(false)} aria-label="Cerrar"><Icon name="close" /></button>
        </div>
        <nav className="drawer-nav">
          {items.map((it) =>
          <a key={it.key} className={'drawer-item ' + (route === it.key ? 'active' : '')} onClick={() => go(it.key)}>
              <Icon name={it.icon} size={20} />
              <span>{it.lbl}</span>
              <Icon name="arrow" size={14} />
            </a>
          )}
          <div className="drawer-sep"></div>
          <a className={'drawer-item ' + (route === 'account' ? 'active' : '')} onClick={() => go('account')}>
            <Icon name="user" size={20} /><span>Mi cuenta</span><Icon name="arrow" size={14} />
          </a>
          <a className={'drawer-item ' + (route === 'cart' ? 'active' : '')} onClick={() => go('cart')}>
            <Icon name="cart" size={20} /><span>Carrito</span>
            {cartCount > 0 && <span className="drawer-badge">{cartCount}</span>}
          </a>
        </nav>
        <div className="drawer-foot">
          <div className="eyebrow">— SOPORTE</div>
          <a href="tel:5580000000" className="drawer-phone">📞 55 8000 RUTA</a>
          <div className="drawer-foot-sub">Lun–Sab · 8:00–20:00</div>
        </div>
      </aside>
    </>);

};

// === Footer ===
const Footer = ({ navigate }) =>
<footer className="footer">
    <div className="footer-inner">
      <div className="big">Estamos<br />en tu ruta.</div>
      <div className="footer-grid">
        <div className="footer-col">
          <h4>RUTA · CDMX</h4>
          <p style={{ color: 'var(--text-mute)', fontSize: 13, lineHeight: 1.6, margin: '0 0 12px' }}>
            La forma más moderna de comprar y montar llantas en México. Catálogo amplio, talleres certificados y agenda en línea.
          </p>
          <div style={{ display: 'flex', gap: 8 }}>
            <span className="chip chip-outline">CDMX</span>
            <span className="chip chip-outline">GDL</span>
            <span className="chip chip-outline">MTY</span>
          </div>
        </div>
        <div className="footer-col">
          <h4>Tienda</h4>
          <a onClick={() => navigate('catalog')}>Catálogo</a>
          <a onClick={() => navigate('garage')}>Mi Garage</a>
          <a onClick={() => navigate('quiz')}>Asesor de llanta</a>
          <a onClick={() => navigate('services')}>Servicios</a>
        </div>
        <div className="footer-col">
          <h4>Servicios</h4>
          <a>Instalación</a>
          <a>Alineación 3D</a>
          <a>Balanceo dinámico</a>
          <a>Reparación de ponchas</a>
        </div>
        <div className="footer-col">
          <h4>Soporte</h4>
          <a>Garantía RUTA</a>
          <a>Envíos y devoluciones</a>
          <a>Términos</a>
          <a>Aviso de privacidad</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 RUTA Llantas y Servicio · CDMX</span>
        <span>Hecho con ★ en México</span>
      </div>
    </div>
  </footer>;


// === Tire DNA mini display (for cards) ===
const DnaMini = ({ dna }) => {
  const keys = ['wet', 'dry', 'noise', 'life', 'fuel'];
  return (
    <div className="dna-mini" title="Tire DNA">
      {keys.map((k) =>
      <div key={k} className="bar"><div className="bar-fill" style={{ height: dna[k] + '%' }}></div></div>
      )}
    </div>);

};

// === DNA full radar ===
const DnaRadar = ({ dna, color = '#fdb827', size = 260 }) => {
  const stats = [
  { k: 'wet', lbl: 'Lluvia' },
  { k: 'dry', lbl: 'Seco' },
  { k: 'noise', lbl: 'Silencio' },
  { k: 'life', lbl: 'Duración' },
  { k: 'fuel', lbl: 'Ahorro' }];

  const cx = size / 2,cy = size / 2,r = size * 0.36;
  const angle = (i) => -Math.PI / 2 + i * 2 * Math.PI / stats.length;
  const point = (i, v) => {
    const a = angle(i);
    const rad = r * (v / 100);
    return [cx + Math.cos(a) * rad, cy + Math.sin(a) * rad];
  };
  const polyPoints = stats.map((s, i) => point(i, dna[s.k]).join(',')).join(' ');
  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} style={{ display: 'block' }}>
      {/* Concentric rings */}
      {[0.25, 0.5, 0.75, 1].map((scale, i) =>
      <polygon key={i}
      points={stats.map((_, idx) => {
        const a = angle(idx);
        return [cx + Math.cos(a) * r * scale, cy + Math.sin(a) * r * scale].join(',');
      }).join(' ')}
      fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
      )}
      {/* Axes */}
      {stats.map((_, i) => {
        const a = angle(i);
        return <line key={i} x1={cx} y1={cy} x2={cx + Math.cos(a) * r} y2={cy + Math.sin(a) * r} stroke="rgba(255,255,255,0.06)" />;
      })}
      {/* Data shape */}
      <polygon points={polyPoints} fill={color} fillOpacity="0.18" stroke={color} strokeWidth="2" />
      {/* Points */}
      {stats.map((s, i) => {
        const [x, y] = point(i, dna[s.k]);
        return <circle key={s.k} cx={x} cy={y} r="3.5" fill={color} />;
      })}
      {/* Labels */}
      {stats.map((s, i) => {
        const a = angle(i);
        const lx = cx + Math.cos(a) * (r + 18);
        const ly = cy + Math.sin(a) * (r + 18);
        return <text key={s.k} x={lx} y={ly} textAnchor="middle" dominantBaseline="middle" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="var(--text-mute)" style={{ textTransform: 'uppercase', letterSpacing: '0.12em' }}>{s.lbl}</text>;
      })}
    </svg>);

};

// === Product card ===
const ProductCard = ({ tire, navigate, onAdd, onFav, isFav }) =>
<div className="product" onClick={() => navigate('product', { id: tire.id })}>
    <div className="product-img">
      <div className="product-tags">
        {tire.tags.slice(0, 1).map((t) => <span key={t} className="chip chip-accent">{t}</span>)}
        {tire.stock === 'low' && <span className="chip chip-outline" style={{ color: 'var(--accent-hot)', borderColor: 'var(--accent-hot)' }}>Poco stock</span>}
      </div>
      <button className={'product-fav ' + (isFav ? 'on' : '')} onClick={(e) => {e.stopPropagation();onFav(tire.id);}}>
        <Icon name="heart" size={14} />
      </button>
      <TirePhoto tire={tire} size={260} />
      <span className="product-spec-overlay">{tire.sizes[0]}</span>
    </div>
    <div className="product-body">
      <div className="product-brand">{tire.brand} · {USE_LABELS[tire.use]}</div>
      <h3 className="product-name">{tire.name}</h3>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
        <DnaMini dna={tire.dna} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)' }}>
          <Icon name="star" size={11} /> {tire.rating} <span style={{ opacity: 0.5 }}>({tire.reviews})</span>
        </div>
      </div>
      <div className="product-meta">
        <div className="price">
          <span className="from">DESDE</span>
          <span className="currency">$</span>{tire.price.toLocaleString('es-MX')}
        </div>
        <button className="btn btn-primary" style={{ padding: '8px 12px', fontSize: 12 }} onClick={(e) => {e.stopPropagation();onAdd(tire);}}>
          <Icon name="plus" size={14} /> AGREGAR
        </button>
      </div>
    </div>
  </div>;


// === Standardized inputs ===
// All inputs share .field-v2 shell — floating label, optional leading icon, format helpers.
const Field = ({ label, icon, value, onChange, placeholder, type = 'text', inputMode, autoComplete, maxLength, pattern, hint, error, required, full = false, children }) => {
  const id = React.useId();
  return (
    <div className={'field-v2' + (full ? ' field-full' : '') + (error ? ' has-error' : '') + (icon ? ' has-icon' : '')}>
      <label htmlFor={id}>{label}{required && <span style={{ color: 'var(--accent)' }}> *</span>}</label>
      <div className="field-input">
        {icon && <span className="field-icon"><Icon name={icon} size={16} /></span>}
        {children ||
        <input
          id={id}
          type={type}
          inputMode={inputMode}
          autoComplete={autoComplete}
          maxLength={maxLength}
          pattern={pattern}
          value={value || ''}
          onChange={(e) => onChange && onChange(e.target.value)}
          placeholder={placeholder}
          required={required} />

        }
      </div>
      {(hint || error) && <span className={'field-hint' + (error ? ' field-hint-error' : '')}>{error || hint}</span>}
    </div>);

};

// Format helpers
const formatCard = (v) => (v || '').replace(/\D/g, '').slice(0, 19).replace(/(.{4})/g, '$1 ').trim();
const formatExpiry = (v) => {
  const raw = (v || '').replace(/\D/g, '').slice(0, 4);
  if (raw.length < 3) return raw;
  return raw.slice(0, 2) + '/' + raw.slice(2);
};
const formatPhoneMx = (v) => {
  const raw = (v || '').replace(/\D/g, '').slice(0, 10);
  if (raw.length <= 2) return raw;
  if (raw.length <= 6) return raw.slice(0, 2) + ' ' + raw.slice(2);
  return raw.slice(0, 2) + ' ' + raw.slice(2, 6) + ' ' + raw.slice(6);
};
const cardBrand = (v) => {
  const raw = (v || '').replace(/\D/g, '');
  if (/^4/.test(raw)) return 'VISA';
  if (/^(5[1-5]|2[2-7])/.test(raw)) return 'MASTERCARD';
  if (/^3[47]/.test(raw)) return 'AMEX';
  return '';
};

// Specialized inputs
const FieldCard = ({ value, onChange, ...rest }) => {
  const brand = cardBrand(value);
  return (
    <Field
      label="Número de tarjeta" icon="card"
      type="text" inputMode="numeric" autoComplete="cc-number"
      placeholder="4242 4242 4242 4242"
      value={value}
      onChange={(v) => onChange(formatCard(v))}
      maxLength={23}
      hint="Aceptamos Visa, MasterCard, AMEX"
      full {...rest}>
      <input
        type="text" inputMode="numeric" autoComplete="cc-number"
        placeholder="4242 4242 4242 4242"
        value={value || ''}
        onChange={(e) => onChange(formatCard(e.target.value))}
        maxLength={23} />
      
      {brand && <span className="field-suffix">{brand}</span>}
    </Field>);

};

const FieldExpiry = ({ value, onChange }) =>
<Field
  label="Vencimiento" icon="calendar"
  type="text" inputMode="numeric" autoComplete="cc-exp"
  placeholder="MM/AA" maxLength={5}
  value={value}
  onChange={(v) => onChange(formatExpiry(v))} />;



const FieldCvv = ({ value, onChange }) =>
<Field
  label="CVV" icon="lock"
  type="text" inputMode="numeric" autoComplete="cc-csc"
  placeholder="123" maxLength={4}
  value={(value || '').replace(/\D/g, '').slice(0, 4)}
  onChange={onChange}
  hint="3 dígitos al reverso" />;



const FieldPhone = ({ value, onChange, label = 'WhatsApp', required }) =>
<Field
  label={label} icon="phone"
  type="tel" inputMode="tel" autoComplete="tel-national"
  placeholder="55 1234 5678" maxLength={13}
  value={value}
  onChange={(v) => onChange(formatPhoneMx(v))}
  required={required} />;



const FieldEmail = ({ value, onChange, required }) =>
<Field
  label="Correo" icon="mail"
  type="email" inputMode="email" autoComplete="email"
  placeholder="tu@correo.com"
  value={value}
  onChange={onChange}
  required={required} />;



const FieldNumeric = ({ label, value, onChange, placeholder, maxLength, hint, icon, full }) =>
<Field
  label={label} icon={icon}
  type="text" inputMode="numeric"
  placeholder={placeholder} maxLength={maxLength}
  value={value}
  onChange={(v) => onChange((v || '').replace(/\D/g, ''))}
  hint={hint}
  full={full} />;



Object.assign(window, { Header, Footer, DnaMini, DnaRadar, ProductCard, Field, FieldCard, FieldExpiry, FieldCvv, FieldPhone, FieldEmail, FieldNumeric });