/* nav.jsx — Navegación superior + Footer (todas las pestañas activas) */

const SiteNav = ({ route, setRoute, cartCount, onCartOpen }) => {
  const [mOpen, setMOpen] = React.useState(false);

  const goTop = (target) => { setRoute(target); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const onLink = (e, target) => { e.preventDefault(); setMOpen(false); goTop(target); };

  // Historia/Visítanos: si no estás en la landing, ir a landing y luego bajar
  const goSection = (e, id) => {
    e.preventDefault();
    setMOpen(false);
    const scroll = () => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth' }); };
    if (document.getElementById(id)) scroll();
    else { setRoute('landing'); setTimeout(scroll, 160); }
  };

  const reservaHref = window.waLink(window.SC('meta.reservationMsg', 'Hola, quisiera reservar una mesa en Alexandra Castro Pastelería. ¿Disponibilidad?'));
  const reservarLabel = window.SC('nav.reservarLabel', 'Reservar');

  const navLinks = window.SC('nav.links', []);
  const links = (
    <>
      {(Array.isArray(navLinks) ? navLinks : []).map((l, i) => {
        if (l.kind === 'section') {
          return <a key={i} href="#" className="site-nav__link" onClick={(e) => goSection(e, l.value)}>{l.label}</a>;
        }
        return <a key={i} href="#" className={'site-nav__link' + (route === l.value ? ' is-active' : '')} onClick={(e) => onLink(e, l.value)}>{l.label}</a>;
      })}
    </>
  );

  return (
    <nav className="site-nav">
      <div className="container site-nav__inner">
        <div className="site-nav__left">{links}</div>

        <button className="site-nav__mobile-toggle" aria-label="Menú"
          aria-expanded={mOpen} onClick={() => setMOpen((v) => !v)}>
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="1">
            {mOpen ? (
              <><line x1="5" y1="5" x2="17" y2="17" /><line x1="17" y1="5" x2="5" y2="17" /></>
            ) : (
              <><line x1="3" y1="7" x2="19" y2="7" /><line x1="3" y1="11" x2="19" y2="11" /><line x1="3" y1="15" x2="19" y2="15" /></>
            )}
          </svg>
        </button>

        <a href="#" className="site-nav__logo" onClick={(e) => onLink(e, 'landing')}>
          <Logo size={42} />
        </a>

        <div className="site-nav__right">
          <a href={reservaHref} target="_blank" rel="noopener noreferrer" className="site-nav__link">{reservarLabel}</a>
          <button className="site-nav__cart" onClick={onCartOpen} aria-label="Carrito">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="0.9">
              <path d="M3 5 H15 L13.5 13 H4.5 Z" />
              <path d="M6 5 V3.5 C6 2 7 1.5 9 1.5 C11 1.5 12 2 12 3.5 V5" />
            </svg>
            {cartCount > 0 && <span className="site-nav__cart-count">({cartCount})</span>}
          </button>
        </div>
      </div>

      {/* Menú móvil desplegable (el toggle ya no está muerto) */}
      {mOpen && (
        <div className="site-nav__mobile-menu" style={{
          display: 'flex', flexDirection: 'column', gap: 4,
          padding: '12px 24px 20px', background: 'var(--cream)',
          borderTop: '1px solid rgba(197,160,77,0.3)',
        }}>
          {links}
          <a href={reservaHref} target="_blank" rel="noopener noreferrer" className="site-nav__link" onClick={() => setMOpen(false)}>{reservarLabel}</a>
          <a href="/login.html" className="site-nav__link" style={{ opacity: 0.7 }} onClick={() => setMOpen(false)}>Administración</a>
        </div>
      )}
    </nav>
  );
};

const SiteFooter = ({ setRoute }) => {
  const goTop = (target) => { setRoute(target); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  const onLink = (e, target) => { e.preventDefault(); goTop(target); };
  const goHistoria = (e) => {
    e.preventDefault();
    const scroll = () => { const el = document.getElementById('historia'); if (el) el.scrollIntoView({ behavior: 'smooth' }); };
    if (document.getElementById('historia')) scroll();
    else { setRoute('landing'); setTimeout(scroll, 160); }
  };
  const ext = { target: '_blank', rel: 'noopener noreferrer' };

  // URL externa segura: sólo http(s). Cualquier otra cosa (javascript:,
  // data:, etc. introducida vía CMS) → '#'. Defensa ante XSS aunque el
  // contenido lo escribe la admin.
  const safeUrl = (u) => (typeof u === 'string' && /^https?:\/\//i.test(u.trim())) ? u.trim() : '#';
  const safeMail = (u) => (typeof u === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(u.trim())) ? ('mailto:' + u.trim()) : '#';

  // Render de un link de columna según su "kind".
  const renderColLink = (l, i) => {
    if (l.kind === 'route') return <li key={i}><a href="#" onClick={(e) => onLink(e, l.value)}>{l.label}</a></li>;
    if (l.kind === 'historia') return <li key={i}><a href="#" onClick={goHistoria}>{l.label}</a></li>;
    if (l.kind === 'wa') return <li key={i}><a href={window.waLink(l.value)} {...ext}>{l.label}</a></li>;
    if (l.kind === 'mailto') return <li key={i}><a href={safeMail(l.value)} {...ext}>{l.label}</a></li>;
    if (l.kind === 'ext') return <li key={i}><a href={safeUrl(l.value)} {...ext}>{l.label}</a></li>;
    return <li key={i}>{l.label}</li>;
  };

  const colP = window.SC('footer.colPasteleria', {});
  const colV = window.SC('footer.colVisitanos', {});
  const colC = window.SC('footer.colCifras', {});
  const pLinks = (colP && Array.isArray(colP.links)) ? colP.links : [];
  const vLines = (colV && Array.isArray(colV.lines)) ? colV.lines : [];
  const cItems = (colC && Array.isArray(colC.items)) ? colC.items : [];

  return (
    <footer className="site-footer">
      <div className="container">
        <div className="site-footer__top">
          <div className="site-footer__brand">
            <Logo size={56} dark={true} sub={false} />
            <p>{window.SC('footer.brandText', 'Nuestra pasión es crear momentos dulces que perduren en tu memoria. Cada ingrediente es seleccionado con el corazón.')}</p>
          </div>
          <div>
            <h4>{(colP && colP.title) || 'Pastelería'}</h4>
            <ul>
              {pLinks.map(renderColLink)}
            </ul>
          </div>
          <div>
            <h4>{(colV && colV.title) || 'Visítanos'}</h4>
            <ul>
              {vLines.map((line, i) => <li key={i}>{line}</li>)}
              <li><a href={window.waLink((colV && colV.whatsappMsg) || 'Hola, quisiera hacer una consulta.')} {...ext}>{(colV && colV.whatsappLabel) || 'WhatsApp: +57 315 323 2280'}</a></li>
            </ul>
          </div>
          <div>
            <h4>{(colC && colC.title) || 'La casa en cifras'}</h4>
            <ul>
              {cItems.map((item, i) => <li key={i}>{item}</li>)}
              <li><a href={window.waLink((colC && colC.ctaMsg) || 'Hola, quisiera más información de Alexandra Castro Pastelería.')} {...ext}>{(colC && colC.ctaLabel) || 'Escríbenos por WhatsApp'}</a></li>
            </ul>
          </div>
        </div>
        <div className="site-footer__bottom">
          <div>{window.SC('footer.bottomLeft', '© Alexandra Castro Pastelería Boutique · MMXVIII')}</div>
          <div>
            {window.SC('footer.bottomRight', 'Hecho con mantequilla en Barranquilla')}
            <a href="/login.html"
               style={{ marginLeft: 18, fontSize: 11, letterSpacing: '0.08em',
                        textTransform: 'uppercase', color: 'var(--cream)',
                        textDecoration: 'none', border: '1px solid rgba(255,255,255,0.4)',
                        padding: '6px 14px', borderRadius: 2, whiteSpace: 'nowrap' }}
               title="Acceso administración">⚙ Administración</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.SiteNav = SiteNav;
window.SiteFooter = SiteFooter;