// Wasabil — site components (shared across pages)
// Usage: include after React + Babel, then render <App page="home" />

const { useState, useEffect, useRef } = React;

// -------- Mascot --------
// poses: default | clap | explain | zen | egg | genki | rest | baby | king | bttf | nimbus
const MASCOT_POSES = {
  default: "assets/mascot.png",
  clap: "assets/mascot-clap.png",
  explain: "assets/mascot-explain.png",
  zen: "assets/mascot-zen.png",
  egg: "assets/mascot-egg.png",
  genki: "assets/mascot-genki.png",
  rest: "assets/mascot-rest.png",
  baby: "assets/mascot-baby.png",
  king: "assets/mascot-king.png",
  bttf: "assets/mascot-bttf.png",
  nimbus: "assets/mascot-nimbus.png",
};
function Mascot({ size = 40, style = {}, pose = "default" }) {
  const src = MASCOT_POSES[pose] || MASCOT_POSES.default;
  return (
    <img
      src={src}
      alt=""
      width={size}
      height={size}
      style={{ display: "block", objectFit: "contain", ...style }}
    />
  );
}

// -------- Nav --------
function Nav({ current = "home" }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const bg = getComputedStyle(document.documentElement).getPropertyValue("--bg").trim();
  const isDark = (() => {
    if (bg.startsWith("#")) {
      const hex = bg.slice(1);
      const r = parseInt(hex.slice(0,2),16), g = parseInt(hex.slice(2,4),16), b = parseInt(hex.slice(4,6),16);
      return (r * 299 + g * 587 + b * 114) / 1000 < 128;
    }
    return true;
  })();
  const logoSrc = isDark ? "assets/logo-wasabil-dark.png" : "assets/logo-wasabil.png";
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    if (menuOpen) document.body.style.overflow = "hidden";
    else document.body.style.overflow = "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const links = [
    { id: "producto", label: "Producto", href: "producto.html" },
    { id: "pricing", label: "Precios", href: "pricing.html" },
    { id: "about", label: "Nosotros", href: "about.html" },
    { id: "blog", label: "Blog", href: "blog.html" },
  ];
  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <div className="nav-inner">
          <a className="logo" href="index.html" style={{ position: "relative" }}>
            <img src={logoSrc} alt="Wasabil" style={{ height: 28, width: "auto", display: "block" }}/>
          </a>
          <div className="nav-links">
            {links.map(l => (
              <a key={l.id} className={`nav-link ${current === l.id ? "active" : ""}`} href={l.href}>
                {l.label}
              </a>
            ))}
          </div>
          <div className="nav-cta">
            <a className="nav-link nav-desktop-only" href="https://app.wasabil.com/login">Iniciar sesión</a>
            <a className="btn btn-ghost btn-sm nav-desktop-only" href="agenda.html">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
              Agenda
            </a>
            <a className="btn btn-primary btn-sm" href="https://app.wasabil.com/register">
              Prueba gratis
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <button className="nav-burger" onClick={() => setMenuOpen(o => !o)} aria-label="Menú" aria-expanded={menuOpen}>
              {menuOpen
                ? <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M6 18L18 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
                : <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
              }
            </button>
          </div>
        </div>
      </nav>
      {menuOpen && (
        <div className="nav-mobile-menu" onClick={() => setMenuOpen(false)}>
          {links.map(l => (
            <a key={l.id} className={`nav-mobile-link ${current === l.id ? "active" : ""}`} href={l.href}>
              {l.label}
            </a>
          ))}
          <div className="nav-mobile-divider" />
          <a className="nav-mobile-link" href="https://app.wasabil.com/login">Iniciar sesión</a>
          <a className="nav-mobile-link" href="agenda.html">Agenda demo</a>
          <a className="btn btn-primary" href="https://app.wasabil.com/register" style={{ marginTop: 8, textAlign: "center", justifyContent: "center" }}>
            Prueba gratis →
          </a>
        </div>
      )}
    </>
  );
}

// -------- Footer --------
function Footer() {
  return (
    <footer className="footer">
      <div className="container-wide">
        <div className="footer-grid">
          <div>
            <img src="assets/logo-wasabil-dark.png" alt="Wasabil" style={{ height: 36, width: "auto", display: "block" }}/>
            <p style={{ marginTop: 16, maxWidth: 280, fontSize: 14, lineHeight: 1.6, color: "color-mix(in oklab, var(--bg) 70%, transparent)" }}>
              Effortless finances for growing businesses. Invoicing that just works.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 20 }}>
              <span className="caption" style={{ color: "color-mix(in oklab, var(--bg) 50%, transparent)" }}>Respaldado por</span>
              <span style={{ fontSize: 13 }}>Platanus Ventures · Start-Up Chile</span>
            </div>
          </div>
          <div>
            <h4>Producto</h4>
            <ul>
              <li><a href="producto.html#facturacion">Facturación electrónica</a></li>
              <li><a href="producto.html#ecommerce">eCommerce</a></li>
              <li><a href="producto.html#gastos">Gastos en el extranjero</a></li>
              <li><a href="producto.html#mcp">MCP & API</a></li>
              <li><a href="pricing.html">Precios</a></li>
            </ul>
          </div>
          <div>
            <h4>Compañía</h4>
            <ul>
              <li><a href="about.html">Nosotros</a></li>
              <li><a href="blog.html">Blog</a></li>
            </ul>
          </div>
          <div>
            <h4>Recursos</h4>
            <ul>
              <li><a href="pricing.html#calculadora">Calculadora</a></li>
              <li><a href="https://app.wasabil.com/mcp-setup">MCP</a></li>
              <li><a href="https://docs.google.com/document/d/1ve4_x6VnRJMOAoHa6FEVkuKgA2_V9bUzPuxAea20mQQ/edit?tab=t.0">API reference</a></li>
            </ul>
          </div>
          <div>
            <h4>Contacto</h4>
            <ul>
              <li><a href="https://api.whatsapp.com/send/?phone=15557901156&text=Hola&type=phone_number&app_absent=0">WhatsApp Business</a></li>
              <li><a href="mailto:hola@wasabil.com">hola@wasabil.com</a></li>
              <li><a href="agenda.html">Agenda demo</a></li>
              <li><a href="https://www.linkedin.com/company/wasabil/">LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Wasabil SpA · Santiago, Chile</span>
          <span>
            <a href="/politicas-de-privacidad/" style={{ marginRight: 20 }}>Privacidad &amp; Seguridad</a>
            <a href="/terminos-y-condiciones/">Términos</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

// -------- Logo cloud --------
function LogoCloud() {
  const brands = [
    { name: "Platanus Ventures", src: "assets/logos/platanus-ventures.webp", h: 26 },
    { name: "Endeavor", src: "assets/logos/endeavor.png", h: 22 },
    { name: "Start-Up Chile", src: "assets/logos/startup-chile.png", h: 22 },
    { name: "SII", src: "assets/logos/sii.png", h: 32 },
  ];
  const bg = getComputedStyle(document.documentElement).getPropertyValue("--bg").trim();
  const isDark = (() => {
    if (bg.startsWith("#")) {
      const hex = bg.slice(1);
      const r = parseInt(hex.slice(0,2),16), g = parseInt(hex.slice(2,4),16), b = parseInt(hex.slice(4,6),16);
      return (r * 299 + g * 587 + b * 114) / 1000 < 128;
    }
    return true;
  })();
  const logoStyle = isDark
    ? { filter: "brightness(0) invert(1)", opacity: 0.7 }
    : { opacity: 0.85 };
  return (
    <div style={{ padding: "56px 0", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "center", gap: 48, flexWrap: "wrap", justifyContent: "space-between" }}>
          <span className="caption" style={{ flexShrink: 0 }}>Respaldados por</span>
          <div style={{ display: "flex", gap: 56, alignItems: "center", flexWrap: "wrap" }}>
            {brands.map(b => (
              <img key={b.name} src={b.src} alt={b.name} title={b.name} style={{ height: b.h, width: "auto", display: "block", ...logoStyle }} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Mascot, Nav, Footer, LogoCloud });