// Wasabil Startup — shared shell (Nav, Footer, Mascot, Reveal, icons)
const { useState, useEffect, useRef } = React;

// -------- Mascot --------
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", className = "" }) {
  const src = MASCOT_POSES[pose] || MASCOT_POSES.default;
  return (
    <img src={src} alt="" width={size} height={size} className={className}
      style={{ display: "block", objectFit: "contain", ...style }} />
  );
}

// -------- Reveal --------
function Reveal({ children, delay = 0, as: Tag = "div", className = "", style = {} }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setInView(true); obs.disconnect(); } },
      { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  const dClass = delay ? ` d${delay}` : "";
  return (
    <Tag ref={ref} className={`reveal${dClass} ${inView ? "in" : ""} ${className}`} style={style}>
      {children}
    </Tag>
  );
}

// -------- Icons --------
function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function ArrowUpRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M7 17L17 7M9 7h8v8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function ArrowLeft({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M19 12H5M11 18l-6-6 6-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function Calendar({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <rect x="3" y="5" width="18" height="16" rx="3" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  );
}
function Check({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function Sparkle({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    </svg>
  );
}

// -------- Themed icons for each vertical --------
function IconCart({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M3 4h2l2.4 11.2a2 2 0 002 1.6h8.2a2 2 0 002-1.5L21 8H6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="9" cy="20" r="1.2" fill="currentColor"/>
      <circle cx="17" cy="20" r="1.2" fill="currentColor"/>
    </svg>
  );
}
function IconDoc({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9l-6-6z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <path d="M14 3v6h6M8 13h8M8 17h5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  );
}
function IconGlobe({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M3 12h18M12 3c2.5 3 4 6 4 9s-1.5 6-4 9c-2.5-3-4-6-4-9s1.5-6 4-9z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  );
}
function IconBank({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M3 10L12 4l9 6M5 10v9M19 10v9M9 10v9M15 10v9M3 20h18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function IconSpark({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M12 3l2.2 5.8L20 11l-5.8 2.2L12 19l-2.2-5.8L4 11l5.8-2.2L12 3z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  );
}
function IconTag({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M20 12l-8 8-9-9V3h8l9 9z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <circle cx="7.5" cy="7.5" r="1.2" fill="currentColor"/>
    </svg>
  );
}
function IconBolt({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
    </svg>
  );
}
function IconStart({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: "inline-block", flexShrink: 0 }}>
      <circle cx="12" cy="12" r="9.5" stroke="currentColor" strokeWidth="1.4"/>
      <path d="M10 8.5L15.5 12L10 15.5V8.5Z" fill="currentColor"/>
    </svg>
  );
}

// -------- Nav --------
function Nav({ current = "home" }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  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">
          <img src="assets/logo-wasabil-dark.png" alt="Wasabil" style={{ height: 22, width: "auto", display: "block", mixBlendMode: "screen", filter: "brightness(1.15)" }}/>
        </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" href="#" style={{ fontSize: 12.5 }}>Iniciar sesión</a>
          <a className="btn btn-primary btn-sm" href="pricing.html">
            Prueba gratis <span className="arrow"><ArrowRight size={12}/></span>
          </a>
        </div>
      </div>
    </nav>
  );
}

// -------- Backers marquee --------
function BackersMarquee() {
  const brands = [
    { name: "Platanus Ventures", src: "assets/logos/platanus-ventures.webp", h: 22 },
    { name: "Endeavor", src: "assets/logos/endeavor.png", h: 20 },
    { name: "Start-Up Chile", src: "assets/logos/startup-chile.png", h: 20 },
    { name: "SII", src: "assets/logos/sii.png", h: 26 },
  ];
  const row = [...brands, ...brands, ...brands];
  return (
    <div style={{ padding: "48px 0", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "center", gap: 40, marginBottom: 24 }}>
          <span className="caption">Respaldados por</span>
          <div style={{ flex: 1, height: 1, background: "var(--hairline)" }}/>
        </div>
        <div className="marquee">
          <div className="marquee-track">
            {row.map((b, i) => (
              <img key={i} src={b.src} alt={b.name} style={{ height: b.h, width: "auto", opacity: 0.95, filter: "grayscale(1) invert(1)" }}/>
            ))}
          </div>
          <div className="marquee-track" aria-hidden="true">
            {row.map((b, i) => (
              <img key={`b${i}`} src={b.src} alt="" style={{ height: b.h, width: "auto", opacity: 0.95, filter: "grayscale(1) invert(1)" }}/>
            ))}
          </div>
        </div>
      </div>
    </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: 26, width: "auto", display: "block", mixBlendMode: "screen", filter: "brightness(1.2)" }}/>
            <p style={{ marginTop: 20, maxWidth: 280, fontSize: 13.5, lineHeight: 1.6, color: "var(--muted)" }}>
              Finanzas sin fricción para negocios que crecen. Facturación que simplemente funciona.
            </p>
            <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 10 }}>
              <span className="caption">Respaldado por</span>
              <span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>Platanus · 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>
              <li><a href="#">Prensa</a></li>
              <li><a href="#">Clientes</a></li>
            </ul>
          </div>
          <div>
            <h4>Recursos</h4>
            <ul>
              <li><a href="pricing.html#calculadora">Calculadora</a></li>
              <li><a href="#">API reference</a></li>
            </ul>
          </div>
          <div>
            <h4>Contacto</h4>
            <ul>
              <li><a href="#">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="#">LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Wasabil SpA · Santiago, Chile</span>
          <span>
            <a href="#" style={{ marginRight: 22 }}>Privacidad</a>
            <a href="#" style={{ marginRight: 22 }}>Términos</a>
            <a href="#">Seguridad</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Mascot, Nav, Footer, BackersMarquee, Reveal,
  ArrowRight, ArrowUpRight, ArrowLeft, Calendar, Check, Sparkle,
  IconCart, IconDoc, IconGlobe, IconBank, IconSpark, IconTag, IconBolt, IconStart,
});