/* Shared React components for LK Mejia website */

const WA_NUMBER = "573195640848";
const WA_BASE = "https://wa.me/" + WA_NUMBER;

function waLink(productName) {
  const msg = encodeURIComponent("Hola! Me interesa " + (productName ? "el " + productName : "sus productos") + ". ¿Me podrías dar más información?");
  return WA_BASE + "?text=" + msg;
}

/* ── ICONS (Lucide-style) ── */
const Icon = ({ name, size = 20, color = "currentColor", sw = 2 }) => {
  const icons = {
    search: <><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></>,
    book: <><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /></>,
    store: <><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" /><line x1="3" y1="6" x2="21" y2="6" /><path d="M16 10a4 4 0 01-8 0" /></>,
    cart: <><circle cx="9" cy="21" r="1" /><circle cx="20" cy="21" r="1" /><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" /></>,
    users: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></>,
    star: <><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></>,
    map: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></>,
    clock: <><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></>,
    check: <><polyline points="9 11 12 14 22 4" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" /></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></>,
    mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></>,
    phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></>,
    send: <><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></>,
    chevRight: <><polyline points="9 18 15 12 9 6" /></>,
    chevLeft: <><polyline points="15 18 9 12 15 6" /></>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></>,
    x: <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>,
    truck: <><rect x="1" y="3" width="15" height="13" /><polygon points="16 8 20 8 23 11 23 16 16 16 16 8" /><circle cx="5.5" cy="18.5" r="2.5" /><circle cx="18.5" cy="18.5" r="2.5" /></>,
    heart: <><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" /></>,
    globe: <><circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></>,
    award: <><circle cx="12" cy="8" r="7" /><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" /></>,
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></>,
    handshake: <><path d="M11 17a4 4 0 0 0 4-4V7" /><path d="M7 7l4 4" /><path d="M21 12l-4-4" /></>,
    lightbulb: <><path d="M9 18h6" /><path d="M10 22h4" /><path d="M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z" /></>,
    coffee: <><path d="M18 8h1a4 4 0 0 1 0 8h-1" /><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" /><line x1="6" y1="1" x2="6" y2="4" /><line x1="10" y1="1" x2="10" y2="4" /><line x1="14" y1="1" x2="14" y2="4" /></>,
    wheat: <><path d="M2 22 16 8" /><path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94z" /><path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94z" /><path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94z" /></>,
    palette: <><circle cx="13.5" cy="6.5" r=".5" /><circle cx="17.5" cy="10.5" r=".5" /><circle cx="8.5" cy="7.5" r=".5" /><circle cx="6.5" cy="12" r=".5" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></>,
    wrench: <><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /></>,
    box: <><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /><polyline points="3.27 6.96 12 12.01 20.73 6.96" /><line x1="12" y1="22.08" x2="12" y2="12" /></>
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      {icons[name] || null}
    </svg>);

};

/* ── WHATSAPP ICON ── */
const WhatsAppIcon = ({ size = 26 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="#fff">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
  </svg>;


/* ── NAV BAR ── */
const NavBar = ({ currentPage, setPage, onSearch }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
  { id: 'home', label: 'Inicio' },
  { id: 'academia', label: 'Academia' },
  { id: 'tienda', label: 'Tienda' },
  { id: 'recetario', label: 'Recetas y Blog' },
  { id: 'contacto', label: 'Contacto' }];

  const navigate = (id) => {setPage(id);setMenuOpen(false);};

  return (
    <nav className="navbar">
      <div className="nav-inner">
        <div className="nav-logo" onClick={() => navigate('home')}>
          <img src="assets/logo-lk-1.jpeg" alt="LKA MEJIA" />
        </div>
        {/* Desktop links */}
        <div className="nav-links">
          {links.map((l) =>
          <span key={l.id} className={"nav-link" + (currentPage === l.id ? " active" : "")} onClick={() => navigate(l.id)}>{l.label}</span>
          )}
        </div>
        <div className="nav-spacer"></div>
        <div className="nav-search" onClick={onSearch}>
          <Icon name="search" size={14} />
          <span>Buscar…</span>
        </div>
        <button className="btn-nav btn-nav-green" onClick={() => navigate('academia')}>
          <Icon name="book" size={14} color="#fff" />Ver Talleres
        </button>
        <button className="btn-nav btn-nav-orange" onClick={() => navigate('tienda')}>
          <Icon name="store" size={14} color="#fff" />Tienda
        </button>
        {/* Mobile: search + hamburger */}
        <button className="mob-search-btn" onClick={onSearch} style={{ display: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: '8px' }}>
          <Icon name="search" size={22} color="var(--t2)" />
        </button>
        <button className="mob-menu-btn" onClick={() => setMenuOpen(!menuOpen)} style={{ display: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: '8px' }}>
          {menuOpen ?
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--t1)" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg> :
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--t1)" strokeWidth="2.5"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
          }
        </button>
      </div>
      {/* Mobile dropdown menu */}
      {menuOpen &&
      <div style={{ background: '#fff', borderTop: '1px solid var(--bd)', padding: '8px 0 20px' }}>
          {links.map((l) =>
        <div key={l.id} onClick={() => navigate(l.id)} style={{ padding: '16px 24px', fontSize: 20, fontFamily: 'var(--font-d)', fontWeight: currentPage === l.id ? 700 : 400, color: currentPage === l.id ? 'var(--or)' : 'var(--t1)', cursor: 'pointer', borderBottom: '1px solid var(--bg)' }}>
              {l.label}
            </div>
        )}
          <div style={{ padding: '16px 20px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <button className="btn btn-lg btn-green" style={{ width: '100%', justifyContent: 'center' }} onClick={() => navigate('academia')}>
              <Icon name="book" size={16} color="#fff" /> Ver Talleres
            </button>
            <button className="btn btn-lg btn-orange" style={{ width: '100%', justifyContent: 'center' }} onClick={() => navigate('tienda')}>
              <Icon name="store" size={16} color="#fff" /> Tienda
            </button>
          </div>
        </div>
      }
    </nav>);

};

/* ── SEARCH OVERLAY ── */
const SearchOverlay = ({ onClose, setPage }) => {
  const [query, setQuery] = React.useState('');
  const allItems = React.useMemo(() => {
    const items = [];
    (window.TALLERES_DATA || []).forEach((t) => items.push({ type: 'taller', name: t.nombre, cat: t.categoria, page: 'academia' }));
    (window.INSUMOS_DATA || []).forEach((i) => items.push({ type: 'insumo', name: i.nombre, cat: i.categoria, page: 'tienda' }));
    return items;
  }, []);
  const results = query.length > 1 ?
  allItems.filter((i) => i.name.toLowerCase().includes(query.toLowerCase()) || i.cat.toLowerCase().includes(query.toLowerCase())).slice(0, 10) :
  [];

  return (
    <div className="search-overlay" onClick={onClose}>
      <div className="search-modal slide-up" onClick={(e) => e.stopPropagation()}>
        <div style={{ position: 'relative' }}>
          <Icon name="search" size={18} color="var(--t3)" />
          <input className="search-input" style={{ paddingLeft: 44 }} placeholder="Buscar talleres, insumos..." value={query} onChange={(e) => setQuery(e.target.value)} autoFocus />
          <div style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }}>
            <Icon name="search" size={18} color="var(--t3)" />
          </div>
        </div>
        <div className="search-results">
          {results.map((r, i) =>
          <div key={i} className="search-result-item" onClick={() => {setPage(r.page);onClose();}}>
              <span style={{ fontSize: 11, fontFamily: 'var(--font-d)', fontWeight: 700, color: r.type === 'taller' ? 'var(--gr)' : 'var(--or)', textTransform: 'uppercase', letterSpacing: '0.05em', minWidth: 60 }}>
                {r.type === 'taller' ? '📚 Taller' : '🧁 Insumo'}
              </span>
              <div>
                <div style={{ fontFamily: 'var(--font-d)', fontWeight: 600, fontSize: 14, color: 'var(--t1)' }}>{r.name}</div>
                <div style={{ fontSize: 12, color: 'var(--t3)' }}>{r.cat}</div>
              </div>
            </div>
          )}
          {query.length > 1 && results.length === 0 &&
          <p style={{ textAlign: 'center', padding: 24, color: 'var(--t3)', fontSize: 14 }}>No se encontraron resultados para "{query}"</p>
          }
          {query.length <= 1 &&
          <p style={{ textAlign: 'center', padding: 24, color: 'var(--t3)', fontSize: 13 }}>Escribe para buscar talleres o insumos</p>
          }
        </div>
      </div>
    </div>);

};

/* ── TOP BAR ── */
const TopBar = ({ setPage }) =>
<div className="topbar">
    <span>🎓</span>
    ¡Nuevos talleres disponibles! Últimos cupos para 2026 —
    <span className="link" onClick={() => setPage('academia')}>Ver talleres →</span>
  </div>;


/* ── FOOTER ── */
const Footer = ({ setPage }) =>
<footer className="site-footer">
    <div className="footer-inner">
      <div className="footer-grid">
        <div>
          <img src="assets/logo-lk-1.jpeg" alt="LKA MEJIA" style={{ height: 36, marginBottom: 8 }} />
          <p className="footer-brand-desc">La única escuela de repostería en Bogotá donde participas activamente en cada técnica. Insumos de calidad con asesoría técnica real.</p>
          <div className="footer-social">
            <a href="https://www.instagram.com/lkmejia" target="_blank" rel="noopener noreferrer" className="social-icon" style={{ background: 'rgba(246,153,46,0.15)' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#F6992E" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="5" /><circle cx="17.5" cy="6.5" r="1.5" fill="#F6992E" stroke="none" /></svg>
            </a>
            <a href="https://www.tiktok.com/@lkamejia" target="_blank" rel="noopener noreferrer" className="social-icon" style={{ background: 'rgba(246,153,46,0.15)' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="#F6992E"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.11v-3.5a6.37 6.37 0 00-.79-.05A6.34 6.34 0 003.15 15.7a6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.34-6.34V9.05a8.29 8.29 0 004.76 1.49V7.09a4.83 4.83 0 01-1-.4z" /></svg>
            </a>
            <a href="https://www.youtube.com/@lkamejia" target="_blank" rel="noopener noreferrer" className="social-icon" style={{ background: 'rgba(246,153,46,0.15)' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#F6992E" strokeWidth="2"><path d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33A2.78 2.78 0 003.4 19.1c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.25 29 29 0 00-.46-5.33z" /><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" fill="#F6992E" stroke="none" /></svg>
            </a>
          </div>
        </div>
        <div className="footer-col">
          <h5>Academia</h5>
          <a onClick={() => setPage('academia')}>Talleres presenciales</a>
          <a onClick={() => setPage('academia')}>Panadería</a>
          <a onClick={() => setPage('academia')}>Pastelería</a>
          <a onClick={() => setPage('academia')}>Diplomados</a>
        </div>
        <div className="footer-col">
          <h5>Tienda</h5>
          <a onClick={() => setPage('tienda')}>Chocolatería</a>
          <a onClick={() => setPage('tienda')}>Harinas y Mezclas</a>
          <a onClick={() => setPage('tienda')}>Herramientas</a>
          <a onClick={() => setPage('tienda')}>Decoración</a>
        </div>
        <div className="footer-col">
          <h5>Contacto</h5>
          <div className="fi-row"><span className="fi-icon"><Icon name="map" size={14} color="var(--or)" /></span>Carrera 57C #128-27, Bogotá</div>
          <div className="fi-row"><span className="fi-icon"><Icon name="clock" size={14} color="var(--or)" /></span>Lun-Vie: 9:30am – 6pm<br />Sáb: 9:30am – 4pm</div>
          <div className="fi-row"><span className="fi-icon"><Icon name="mail" size={14} color="var(--or)" /></span>Gerencia@lkmejia.com</div>
          <a href={WA_BASE + "?text=" + encodeURIComponent("Hola! Me interesa saber más sobre LK Mejia.")} target="_blank" rel="noopener noreferrer" className="btn btn-sm btn-green" style={{ marginTop: 8, display: 'inline-flex' }}>
            <WhatsAppIcon size={16} /> WhatsApp
          </a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 LKA Mejia SAS. Todos los derechos reservados.</span>
        <span style={{ color: 'rgba(255,255,255,0.5)', fontStyle: 'italic' }}>"Aprende y emprende con LK" — Llevando la repostería colombiana a otro nivel.</span>
      </div>
    </div>
  </footer>;


/* ── WHATSAPP FAB ── */
const WhatsAppFab = ({ productName }) =>
<a className="wa-fab" href={waLink(productName)} target="_blank" rel="noopener noreferrer">
    <WhatsAppIcon />
  </a>;


/* ── MARCAS LOGOS ── */
const MarcasLogos = () => {
  const logos = window.MARCAS_LOGOS || [];
  return (
    <div style={{ textAlign: 'center' }}>
      <p style={{ fontFamily: 'var(--font-d)', fontWeight: 600, fontSize: 13, color: 'var(--t3)', marginBottom: 20, letterSpacing: '0.05em', textTransform: 'uppercase' }}>Marcas que comercializamos</p>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap', alignItems: 'center' }}>
        {logos.map((m, i) =>
        <div key={i} style={{ padding: '12px 24px', background: '#fff', borderRadius: 'var(--r)', border: '1px solid var(--bd)', display: 'flex', alignItems: 'center', justifyContent: 'center', height: 76, minWidth: 130 }}>
            <img src={m.logo} alt={m.nombre} style={{ maxHeight: 52, maxWidth: 120, objectFit: 'contain' }} />
          </div>
        )}
      </div>
    </div>);

};

/* ── IMAGE WITH PLACEHOLDER FALLBACK ── */
const Img = ({ src, alt, style, className }) => {
  const [err, setErr] = React.useState(false);
  if (!src || err) {
    return (
      <div className={"img-placeholder " + (className || "")} style={style}>
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--or)" strokeWidth="1"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" /></svg>
        <span>{alt || "Imagen"}</span>
      </div>);

  }
  return <img src={src} alt={alt} style={style} className={className} onError={() => setErr(true)} />;
};

/* ── FORMAT PRICE ── */
function formatPrice(n) {
  return "$" + n.toLocaleString('es-CO');
}

/* ── STATS BAR ── */
const StatsBar = () =>
<div className="stats-bar">
    <div className="stats-inner">
      <div className="stat-item"><div className="num">+4.000</div><div className="lbl">Estudiantes formados</div></div>
      <div className="stat-item"><div className="num">4.6★</div><div className="lbl">Calificación promedio</div></div>
      <div className="stat-item"><div className="num">+500</div><div className="lbl">Talleres realizados</div></div>
      <div className="stat-item"><div className="num">Máx. 6</div><div className="lbl">Personas por taller</div></div>
    </div>
  </div>;


Object.assign(window, {
  Icon, WhatsAppIcon, NavBar, SearchOverlay, TopBar, Footer, WhatsAppFab, Img,
  formatPrice, StatsBar, MarcasLogos, waLink, WA_NUMBER, WA_BASE
});