// Shared components for Propuesta 1
const { useState, useEffect, useRef } = React;

// --- Icons ---
const Ic = {
  search: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="11" cy="11" r="7" /><path d="M20 20l-3-3" /></svg>,
  user: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" /></svg>,
  heart: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" style={{ width: "56px" }}><path d="M12 21s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 11c0 5.5-7 10-7 10z" /></svg>,
  cart: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" style={{ height: "61px", width: "50px" }}><path d="M5 7h14l-1.5 10.5a2 2 0 01-2 1.5h-7a2 2 0 01-2-1.5L5 7z" /><path d="M9 10V6a3 3 0 016 0v4" /></svg>,
  chevDown: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6" /></svg>,
  arrow: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ height: "45px" }}><path d="M5 12h14M13 6l6 6-6 6" /></svg>,
  shield: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z" /></svg>,
  truck: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="6" width="12" height="11" rx="1" /><path d="M14 9h5l3 4v4h-8" /><circle cx="7" cy="19" r="2" /><circle cx="17" cy="19" r="2" /></svg>,
  box: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 8l9-5 9 5v8l-9 5-9-5V8z" /><path d="M3 8l9 5 9-5" /><path d="M12 13v8" /></svg>,
  headset: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 14v-3a9 9 0 0118 0v3" /><rect x="2" y="14" width="5" height="6" rx="1" /><rect x="17" y="14" width="5" height="6" rx="1" /></svg>,
  star: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z" /></svg>,
  upload: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 16V4M7 9l5-5 5 5" /><path d="M5 16v3a2 2 0 002 2h10a2 2 0 002-2v-3" /></svg>,
  pin: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 22s-7-7-7-13a7 7 0 1114 0c0 6-7 13-7 13z" /><circle cx="12" cy="9" r="2.5" /></svg>,
  phone: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 4h4l2 5-3 2c1 3 3 5 6 6l2-3 5 2v4a2 2 0 01-2 2C10 22 2 14 2 6a2 2 0 012-2" /></svg>,
  mail: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 7 9-7" /></svg>,
  fb: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 22V12h3l1-4h-4V5.5c0-1 .3-1.5 1.7-1.5H17V0h-2.6C11 0 10 1.7 10 4.7V8H7v4h3v10z" /></svg>,
  ig: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" /></svg>,
  wa: <svg viewBox="0 0 24 24" fill="currentColor" style={{ height: "30px" }}><path d="M17.5 14c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1l-1 1.2c-.2.2-.4.2-.6.1-1.4-.7-2.4-1.6-3.4-3.3-.2-.3 0-.4.1-.6l.7-.8c.1-.2.2-.4.1-.6L9.6 7c-.2-.5-.4-.4-.6-.4h-.6c-.2 0-.5.1-.8.4-1 1-1.4 2-1.4 3.5 0 .9.4 2 .7 2.5 1.2 1.9 2.7 3.6 4.7 4.7.6.3 1.7.7 2.6.7 1.5 0 2.5-.4 3.5-1.4.3-.3.4-.6.4-.8v-.6c0-.2.1-.5-.4-.6zm-5.5 7C7 21 3 17 3 12S7 3 12 3s9 4 9 9-4 9-9 9zm0-20C5.9 1 1 5.9 1 12c0 2 .5 3.9 1.5 5.6L1 23l5.5-1.5C8.1 22.5 10 23 12 23c6.1 0 11-4.9 11-11S18.1 1 12 1z" /></svg>,
  filter: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 5h18M6 12h12M10 19h4" /></svg>,
  grid: <svg viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="8" height="8" rx="1" /><rect x="13" y="3" width="8" height="8" rx="1" /><rect x="3" y="13" width="8" height="8" rx="1" /><rect x="13" y="13" width="8" height="8" rx="1" /></svg>,
  list: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 6h16M4 12h16M4 18h16" /></svg>,
  trash: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 002 2h6a2 2 0 002-2l1-12M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3" /></svg>,
  check: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12l5 5L20 7" /></svg>,
  google: <svg viewBox="0 0 24 24"><path fill="#4285F4" d="M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.4c-.2 1.2-.9 2.3-2 3v2.5h3.2c1.9-1.7 3-4.3 3-7.4z" /><path fill="#34A853" d="M12 22c2.7 0 5-.9 6.6-2.4l-3.2-2.5c-.9.6-2 1-3.4 1-2.6 0-4.8-1.8-5.6-4.2H3.1v2.6C4.7 19.8 8.1 22 12 22z" /><path fill="#FBBC05" d="M6.4 13.9c-.2-.6-.3-1.2-.3-1.9s.1-1.3.3-1.9V7.5H3.1C2.4 8.9 2 10.4 2 12s.4 3.1 1.1 4.5l3.3-2.6z" /><path fill="#EA4335" d="M12 5.9c1.5 0 2.8.5 3.8 1.5l2.9-2.9C16.9 2.9 14.7 2 12 2 8.1 2 4.7 4.2 3.1 7.5l3.3 2.6c.8-2.4 3-4.2 5.6-4.2z" /></svg>
};

// --- Placeholder for product images ---
const PHOLDER = ({ label, ar = '1', accent, product }) =>
<div className="ph" style={{ aspectRatio: ar }}>
    {product ?
  <img src="assets/product-camera.svg" alt="" className="ph-img" /> :
  <span>{label}</span>}
    {accent}
  </div>;

// --- Product image (uses generic security camera artwork) ---
const ProductImage = ({ label }) =>
<div className="prod-img">
  <img src="assets/product-camera.svg" alt="" />
  {label && <span className="prod-img-tag">{label}</span>}
</div>;


// --- Site Header ---
const Header = ({ active, onNav }) =>
<header className="site-header">
    <div className="container">
      <div className="row1">
        <a className="logo" onClick={() => onNav('home')}>
          <img src="assets/logos/horizontal-darkgreen.png" alt="Don Juan Security" />
        </a>
        <div className="search">
          {Ic.search}
          <input placeholder="Buscar cámaras, motores, alarmas…" />
          <button className="cat-btn">Categorías {Ic.chevDown}</button>
        </div>
        <div className="actions">
          <button className="icon-btn" title="Lista de deseos">{Ic.heart}</button>
          <button className="icon-btn" title="Carrito" onClick={() => onNav('cart')}>
            {Ic.cart}<span className="badge">2</span>
          </button>
          <button className="auth-btn" onClick={() => onNav('auth')}>
            {Ic.user}<span>Ingresar</span>
          </button>
        </div>
      </div>
      <div className="row2">
        <nav className="nav-links">
          <a className={active === 'home' ? 'active' : ''} onClick={() => onNav('home')}>Inicio</a>
          <a className={active === 'shop' ? 'active' : ''} onClick={() => onNav('shop')}>Tienda {Ic.chevDown}</a>
          <a>CCTV {Ic.chevDown}</a>
          <a>Motores {Ic.chevDown}</a>
          <a>Alarmas</a>
          <a>Accesos</a>
          <a>Domótica</a>
          <a onClick={() => onNav('tech')}>Técnicos</a>
          <a>Contacto</a>
        </nav>
      </div>
    </div>
  </header>;


// --- Footer ---
const Footer = ({ onNav }) =>
<footer className="site-footer">
    <div className="container">
      <div className="footer-grid">
        <div className="brand-block">
          <div className="logo"><img src="assets/logos/horizontal-white.png" alt="Don Juan Security" /></div>
          <p>Distribuidor mayorista de sistemas de seguridad, automatización y domótica para hogares y negocios en Venezuela.</p>
          <div className="socials">
            <a>{Ic.fb}</a>
            <a>{Ic.ig}</a>
            <a>{Ic.wa}</a>
            <a>{Ic.mail}</a>
          </div>
        </div>
        <div className="middle-links">
          <ul>
            <li><a>Catálogo</a></li>
            <li><a onClick={() => onNav && onNav('tech')}>Directorio de técnicos</a></li>
            <li><a>Envíos y entregas</a></li>
            <li><a>Términos y condiciones</a></li>
          </ul>
        </div>
        <div className="contact">
          <h4>Contacto</h4>
          <div className="item">{Ic.pin}<span>Ciudad Bolívar<br />San Felipe · Venezuela</span></div>
          <div className="item">{Ic.phone}<span>+58 414 555 0119</span></div>
          <div className="item">{Ic.mail}<span>ventas@donjuansecurity.com</span></div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Don Juan Security · Todos los derechos reservados.</span>
        <span></span>
      </div>
    </div>
    <div className="dyna-strip">Desarrollado por <strong>Dynamobyte</strong></div>
  </footer>;


// --- WhatsApp floater ---
const WAFloat = () =>
<a className="wa-float" title="Chatea con nosotros">{Ic.wa}</a>;


window.Ic = Ic;
window.PHOLDER = PHOLDER;
window.ProductImage = ProductImage;
window.Header = Header;
window.Footer = Footer;
window.WAFloat = WAFloat;