/* eslint-disable */
const { Icon, Tool, WhinkLogo, Reveal } = window.Whink;
const { useState, useEffect, useRef } = React;

const WHATSAPP_URL = 'https://wa.me/5491125434996?text=' + encodeURIComponent('Hola! Quiero saber más sobre Whink.');

/* ============== NAVBAR ============== */
function Navbar({ onContact }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 24);
    onS();
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <>
      <nav className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
        <div className="nav-inner">
          <a href="#top" className="nav-brand" aria-label="Whink home">
            <WhinkLogo size={26} />
          </a>
          <div className="nav-links">
            <a href="#faq">FAQ</a>
            <a href="#precio">Precio</a>
            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-sm">Contacto</a>
          </div>
          <div className="nav-mobile">
            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-sm">Contacto</a>
            <button className="theme-toggle" aria-label="Open menu" onClick={() => setOpen(true)}>
              <Icon.Menu width="20" height="20" />
            </button>
          </div>
        </div>
      </nav>
      <div className={`nav-drawer ${open ? 'open' : ''}`} role="dialog" aria-hidden={!open}>
        <div className="nav-drawer-head">
          <WhinkLogo size={26} />
          <button className="theme-toggle" aria-label="Close menu" onClick={() => setOpen(false)}>
            <Icon.Close width="20" height="20" />
          </button>
        </div>
        <div className="nav-drawer-body">
          <a href="#agente" onClick={() => setOpen(false)}>Agente IA</a>
          <a href="#canales" onClick={() => setOpen(false)}>Canales</a>
          <a href="#proceso" onClick={() => setOpen(false)}>Proceso</a>
          <a href="#accion" onClick={() => setOpen(false)}>En acción</a>
          <a href="#precio" onClick={() => setOpen(false)}>Precio</a>
          <a href="#faq" onClick={() => setOpen(false)}>FAQ</a>
        </div>
        <div className="nav-drawer-foot">
          <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="btn btn-primary btn-lg" style={{ width: '100%' }} onClick={() => setOpen(false)}>Contacto</a>
        </div>
      </div>
      <style>{`
        .nav {
          position: fixed; top: 0; left: 0; right: 0;
          z-index: 1000;
          padding-top: env(safe-area-inset-top);
          background: rgba(10, 10, 10, 0.55);
          backdrop-filter: blur(18px) saturate(140%);
          -webkit-backdrop-filter: blur(18px) saturate(140%);
          border-bottom: 1px solid transparent;
          transition: background var(--t), border-color var(--t);
        }
        [data-theme="light"] .nav { background: rgba(255,255,255,0.6); }
        .nav.is-scrolled {
          background: rgba(10, 10, 10, 0.78);
          border-bottom-color: var(--border);
        }
        [data-theme="light"] .nav.is-scrolled { background: rgba(255,255,255,0.85); }
        .nav-inner {
          max-width: var(--maxw);
          margin: 0 auto;
          padding: 14px var(--pad);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          height: 64px;
          width: 100%;
          min-width: 0;
        }
        .nav-brand { display: inline-flex; align-items: center; flex-shrink: 0; min-width: 0; }
        .nav-links { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
        .nav-links > a:not(.btn) {
          font-size: 14px; color: var(--fg-dim);
          transition: color var(--t);
        }
        .nav-links > a:not(.btn):hover { color: var(--fg); }
        .theme-toggle {
          width: 38px; height: 38px;
          display: inline-flex; align-items: center; justify-content: center;
          border-radius: 999px;
          background: transparent;
          border: 1px solid var(--border);
          color: var(--fg);
          transition: border-color var(--t), background var(--t), color var(--t);
        }
        .theme-toggle:hover { border-color: var(--green); color: var(--green); }
        .nav-mobile { display: none; align-items: center; gap: 6px; flex-shrink: 0; }
        @media (max-width: 768px) {
          .nav-links { display: none; }
          .nav-mobile { display: inline-flex; }
          .nav-inner { padding: 10px 16px; height: 60px; gap: 8px; }
          .nav-mobile .btn-sm { height: 38px; padding: 0 14px; font-size: 13px; }
          .nav-mobile .theme-toggle { width: 38px; height: 38px; }
        }
        @media (max-width: 380px) {
          .nav-inner { padding: 10px 14px; gap: 6px; }
          .nav-mobile .btn-sm { padding: 0 12px; font-size: 12.5px; }
          .nav-mobile .theme-toggle { width: 36px; height: 36px; }
        }
        .nav-drawer {
          position: fixed; top: 0; left: 0; right: 0; bottom: 0;
          z-index: 1100;
          background: rgba(10,10,10,0.96);
          backdrop-filter: blur(20px);
          padding-top: env(safe-area-inset-top);
          padding-bottom: env(safe-area-inset-bottom);
          opacity: 0; pointer-events: none;
          transition: opacity 280ms ease;
          display: flex; flex-direction: column;
        }
        [data-theme="light"] .nav-drawer { background: rgba(255,255,255,0.96); }
        .nav-drawer.open { opacity: 1; pointer-events: auto; }
        .nav-drawer-head {
          display: flex; align-items: center; justify-content: space-between;
          padding: 16px 18px; border-bottom: 1px solid var(--border);
          height: 60px;
        }
        .nav-drawer-body {
          flex: 1;
          display: flex; flex-direction: column;
          gap: 6px;
          padding: 32px 24px;
          overflow-y: auto;
        }
        .nav-drawer-body a {
          font-size: 28px; font-weight: 400; letter-spacing: -0.02em;
          padding: 16px 0;
          border-bottom: 1px solid var(--border);
          color: var(--fg);
          transition: color var(--t);
        }
        .nav-drawer-body a:hover { color: var(--green); }
        .nav-drawer-foot { padding: 18px 24px 32px; }
      `}</style>
    </>
  );
}

/* ============== HERO ============== */
function Hero() {
  return (
    <section id="top" className="hero">
      <div className="glow" style={{ width: 460, height: 460, top: -220, right: -140, opacity: 0.4 }} />
      <div className="glow" style={{ width: 320, height: 320, top: 60, left: -180, opacity: 0.22 }} />
      <div className="container hero-inner">
        <Reveal as="h1" delay={100} className="h-display hero-title">
          <span className="grad-text">Inteligencia</span> <span className="grad-text">Artificial</span>
          <br />
          <span>aplicada a la operación de tu negocio</span>
        </Reveal>
        <Reveal delay={380} as="p" className="lead hero-sub">
          <span className="hs-line">Diseñamos e implementamos agentes de IA</span>{' '}
          <span className="hs-line">conectados a tus herramientas, canales</span>{' '}
          <span className="hs-line">y flujos de trabajo reales.</span>
        </Reveal>
        <Reveal delay={620} className="hero-ctas">
          <a href="#contacto" className="btn btn-outline btn-lg mobile-fill">Hablemos</a>
          <a href="#agente" className="btn btn-ghost btn-lg">Agentes IA <Icon.Arrow width="16" height="16" /></a>
        </Reveal>
        <Reveal delay={820} className="hero-partner">
          <Tool.Meta width="18" height="18" />
          <span>Meta Business Partner</span>
        </Reveal>
      </div>
      <style>{`
        .hero {
          position: relative;
          min-height: 100vh;
          padding: calc(120px + env(safe-area-inset-top)) var(--pad) 80px;
          display: flex;
          align-items: center;
          overflow: hidden;
        }
        .hero-inner {
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 28px;
        }
        .hero-title {
          max-width: 16ch;
          margin: 0 auto;
          text-wrap: balance;
          font-kerning: normal;
          font-feature-settings: "kern" 1;
          letter-spacing: -0.028em;
        }
        .hero-sub {
          margin: 0 auto;
          text-align: center;
          max-width: 56ch;
          text-wrap: balance;
        }
        .hero-sub .hs-line { display: inline; }
        @media (max-width: 768px) {
          .hero-sub .hs-line { display: block; }
        }
        .hero-partner {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-top: 8px;
          padding: 8px 16px;
          border-radius: 999px;
          border: 1px solid var(--border);
          background: rgba(255,255,255,0.03);
          color: var(--fg-dim);
          font-size: 13px;
          letter-spacing: -0.005em;
        }
        [data-theme="light"] .hero-partner { background: rgba(0,0,0,0.03); }
        .hero-partner svg, .hero-partner img { width: 18px; height: 18px; }
        .hero-ctas {
          display: inline-flex;
          gap: 12px;
          flex-wrap: wrap;
          justify-content: center;
          margin-top: 8px;
        }
        .hero-ctas .btn { flex: 0 0 auto; }
        @media (max-width: 768px) {
          .hero { min-height: 92vh; padding: calc(100px + env(safe-area-inset-top)) 18px 60px; }
          .hero-ctas { gap: 10px; }
          .hero-ctas .btn-lg { height: 52px; padding: 0 24px; font-size: 14.5px; }
        }
        @media (max-width: 380px) {
          .hero-ctas { gap: 8px; }
          .hero-ctas .btn-lg { padding: 0 20px; font-size: 14px; }
        }
      `}</style>
    </section>
  );
}

/* ============== INTEGRATIONS CAROUSEL ============== */
function Integrations() {
  const tools = [
    ['Instagram', Tool.Instagram], ['WhatsApp', Tool.WhatsApp], ['Email', Tool.Gmail],
    ['Drive', Tool.Drive], ['Excel', Tool.Excel], ['Sitio Web', Tool.Web],
    ['Webhooks', Tool.Webhook], ['Mailchimp', Tool.Mailchimp], ['Google Calendar', Tool.GCal],
    ['MercadoLibre', Tool.ML], ['Shopify', Tool.Shopify], ['Claude', Tool.Claude],
    ['ChatGPT', Tool.ChatGPT],
  ];
  const TrackItem = ({ name, IconC }) => (
    <div className="tool-item">
      <span className="tool-icon"><IconC /></span>
      <span className="tool-name">{name}</span>
    </div>
  );
  return (
    <section className="integrations">
      <div className="container">
        <Reveal as="h3" className="integrations-title">
          Conecta Whink con las herramientas que tu equipo ya usa
        </Reveal>
      </div>
      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          {[...tools, ...tools].map(([n, I], i) => (
            <TrackItem key={`a${i}`} name={n} IconC={I} />
          ))}
        </div>
      </div>
      <style>{`
        .integrations {
          padding: 72px 0 88px;
          position: relative;
          background: var(--bg);
          z-index: 2;
          display: flex;
          flex-direction: column;
          justify-content: center;
          overflow-x: clip;
        }
        .integrations-title {
          font-size: clamp(15px, 1.5vw, 18px);
          color: var(--fg-dim);
          font-weight: 500;
          text-align: center;
          margin: 0 auto 48px;
          padding: 0 var(--pad);
          letter-spacing: -0.005em;
          max-width: 90%;
          white-space: normal;
        }
        @media (min-width: 900px) {
          .integrations-title { white-space: nowrap; max-width: none; }
        }
        .tool-item {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 12px;
          padding: 0 30px;
          color: var(--fg);
          opacity: 0.75;
          transition: opacity var(--t);
          flex-shrink: 0;
          min-width: 110px;
        }
        .tool-item:hover { opacity: 1; }
        .tool-icon {
          width: 36px;
          height: 36px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: var(--fg);
        }
        .tool-icon svg,
        .tool-icon img {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: contain;
        }
        .tool-name {
          font-size: 14px;
          font-weight: 500;
          letter-spacing: -0.01em;
          white-space: nowrap;
          text-align: center;
          color: var(--fg-dim);
        }
        @media (max-width: 768px) {
          .integrations { padding: 56px 0 64px; }
          .tool-item { padding: 0 22px; gap: 10px; min-width: 92px; }
          .tool-icon { width: 28px; height: 28px; }
          .tool-icon svg, .tool-icon img { width: 28px; height: 28px; }
          .tool-name { font-size: 13px; }
          .marquee-track { animation-duration: 36s; }
        }
      `}</style>
    </section>
  );
}

window.WhinkParts = Object.assign(window.WhinkParts || {}, { Navbar, Hero, Integrations });