/* global React, Icon, BrandMark */
const { useState, useEffect, useRef } = React;

/* ============ NAV ============ */
function Nav({ onOpenMenu }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav-inner">
        <a href="#top" className="nav-logo">
          <span className="nl-mark"><BrandMark size={28}/></span>
          <span className="nl-text">But<em>IÁ</em></span>
        </a>
        <div className="nav-links">
          <a href="#servicios">Servicios</a>
          <a href="#casos">Casos</a>
          <a href="#rubros">Rubros</a>
          <a href="#proceso">Proceso</a>
          <a href="#contacto">Contacto</a>
        </div>
        <a href="#contacto" className="nav-cta">
          Hablemos <Icon.Arrow/>
        </a>
        <button className="nav-burger" onClick={onOpenMenu} aria-label="Menu">
          <Icon.Menu/>
        </button>
      </div>
    </nav>
  );
}

/* ============ HERO ============ */
function Hero() {
  const conversation = [
    { from: "user", text: "Hola, ¿tienen turno para mañana?" },
    { from: "bot",  text: "¡Hola! Sí, tenemos disponible mañana a las 10:00 y a las 15:30. ¿Cuál te queda mejor?" },
    { from: "user", text: "Las 10 está perfecto, gracias!" },
  ];
  const [shown, setShown] = useState(0);
  const [typing, setTyping] = useState(false);
  useEffect(() => {
    let t;
    if (shown < conversation.length) {
      const isBot = conversation[shown].from === "bot";
      if (isBot) {
        setTyping(true);
        t = setTimeout(() => { setTyping(false); setShown(s => s + 1); }, 1400);
      } else {
        t = setTimeout(() => setShown(s => s + 1), 1100);
      }
    } else {
      t = setTimeout(() => { setShown(0); }, 4500);
    }
    return () => clearTimeout(t);
  }, [shown]);

  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div className="hero-text">
          <div className="hero-badge">
            <span className="pulse"></span>
            Automatización con inteligencia artificial
          </div>
          <h1 className="h-display">
            Tu negocio se atiende solo. <em>Vos recuperás tu tiempo.</em>
          </h1>
          <p className="lead">
            Creamos agentes de IA que responden a clientes, generan pedidos y gestionan tareas repetitivas, las 24 horas del día.
          </p>
          <div className="hero-btns">
            <a href="#proceso" className="btn btn-primary">
              Ver cómo funciona <span className="btn-arrow"><Icon.Arrow/></span>
            </a>
            <a href="#casos" className="btn btn-ghost">Casos reales</a>
          </div>
          <div className="hero-stats-inline">
            <div className="hs-item">
              <div className="hs-num">+2 hs</div>
              <div className="hs-lbl">recuperadas por día en atención al cliente</div>
            </div>
            <div className="hs-item">
              <div className="hs-num">24/7</div>
              <div className="hs-lbl">respuestas automáticas sin intervención humana</div>
            </div>
            <div className="hs-item">
              <div className="hs-num">1 semana</div>
              <div className="hs-lbl">tiempo estimado de implementación</div>
            </div>
          </div>
        </div>

        <div className="demo-wrap">
          <div className="float-card one">
            <div className="fc-icon"><Icon.Calendar/></div>
            <div className="fc-meta">
              <span className="lbl">Turno confirmado</span>
              <span className="val">Mañana · 10:00</span>
            </div>
          </div>
          <div className="float-card two">
            <div className="fc-icon"><Icon.Whats/></div>
            <div className="fc-meta">
              <span className="lbl">Recordatorio enviado</span>
              <span className="val">WhatsApp · automático</span>
            </div>
          </div>

          <div className="demo-panel">
            <div className="demo-head">
              <div className="dots"><span></span><span></span><span></span></div>
              <span>agente.butia.ai · WhatsApp</span>
            </div>
            <div className="demo-body">
              {conversation.slice(0, shown).map((m, i) => (
                <div key={i} className={"bubble " + (m.from === "bot" ? "bot" : "user")}>
                  {m.from === "bot" && (
                    <div className="bot-row">
                      <span className="bot-avatar"><BrandMark size={11}/></span>
                      ButIÁ Agent
                    </div>
                  )}
                  {m.text}
                </div>
              ))}
              {typing && (
                <div className="bubble bot">
                  <div className="bot-row">
                    <span className="bot-avatar"><BrandMark size={11}/></span>
                    ButIÁ Agent
                  </div>
                  <div className="typing"><span></span><span></span><span></span></div>
                </div>
              )}
            </div>
            <div className="demo-tools">
              <span className="demo-tool"><span className="ind"></span>whatsapp</span>
              <span className="demo-tool"><span className="ind"></span>calendar</span>
              <span className="demo-tool"><span className="ind"></span>recordatorio</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ PROBLEMA ============ */
function Problema() {
  const items = [
    {
      ic: <Icon.Whats/>,
      t: "Responder mensajes repetidos",
      d: "“¿Tienen turno para mañana?”, “¿Cuánto cuesta?”, “¿Están abiertos?” — todo el día, todos los días.",
      stat: "≈ 90 min/día en un negocio promedio"
    },
    {
      ic: <Icon.Db/>,
      t: "Cargar pedidos manualmente",
      d: "Cada pedido que llega por WhatsApp hay que transcribirlo a mano en el sistema o en una planilla.",
      stat: "≈ 45 min/día en comercios con volumen medio"
    },
    {
      ic: <Icon.Calendar/>,
      t: "Recordatorios y seguimientos",
      d: "Avisar turnos, confirmar asistencia, enviar facturas o presupuestos — tareas que se hacen una por una.",
      stat: "≈ 30 min/día que se pueden eliminar por completo"
    },
  ];
  return (
    <section className="section-pad" id="problema">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">El problema</div>
            <h2 className="h-section">¿Cuánto tiempo perdés en esto?</h2>
            <p>Las tareas chicas se acumulan. Si sumás los minutos de cada día, son horas que no estás dedicando a lo que de verdad importa en tu negocio.</p>
          </div>
        </div>
        <div className="svc-grid">
          {items.map((it, i) => (
            <div className="svc-card" key={i}>
              <div className="ic">{it.ic}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
              <div className="problem-stat">{it.stat}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ RUBROS ============ */
function Rubros() {
  const items = [
    {
      tag: "Clínicas y salud",
      t: "El profesional atiende al paciente, no al teléfono.",
      d: "Agente que responde consultas frecuentes, agenda turnos y envía recordatorios automáticos por WhatsApp.",
      save: "2 a 3 horas diarias",
      kind: "de administración"
    },
    {
      tag: "Comercios",
      t: "Pedidos que se cargan solos.",
      d: "El agente recibe pedidos por WhatsApp, los registra automáticamente y responde preguntas de stock y precios sin que nadie mire el teléfono.",
      save: "1 a 2 horas diarias",
      kind: "en toma de pedidos"
    },
    {
      tag: "Servicios",
      t: "Plomería, electricidad, estética y más.",
      d: "Captura solicitudes, agenda visitas o citas, y envía presupuestos automáticos según las respuestas del cliente a un formulario conversacional.",
      save: "45 min a 1 h 30 min",
      kind: "por día"
    },
  ];
  return (
    <section className="section-pad" id="rubros">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">Rubros</div>
            <h2 className="h-section">¿En qué tipo de negocio aplicamos esto?</h2>
            <p>Trabajamos con negocios chicos y medianos que reciben muchos mensajes y quieren dejar de gastar el día en tareas repetidas.</p>
          </div>
        </div>
        <div className="rubros-grid">
          {items.map((it, i) => (
            <div className="rubro" key={i}>
              <span className="case-tag">{it.tag}</span>
              <h4>{it.t}</h4>
              <p>{it.d}</p>
              <div className="rubro-save">
                <span className="rs-label">Ahorro estimado</span>
                <span className="rs-value">{it.save}</span>
                <span className="rs-kind">{it.kind}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CASOS EN PRODUCCIÓN ============ */
function Casos() {
  const items = [
    {
      tag: "Sector automotriz",
      t: "Asesor virtual para concesionaria.",
      d: "Atiende consultas sobre vehículos disponibles, precios y opciones de financiación. Califica al interesado, coordina test drives y deja al vendedor solo con los leads que vale la pena llamar.",
      stat: { num: "24/7", lbl: "primer contacto resuelto" },
      stack: ["whatsapp", "catálogo", "agenda"],
      feature: true,
    },
    {
      tag: "Venta y distribución",
      t: "Tomador de pedidos a domicilio.",
      d: "Recibe pedidos por WhatsApp, calcula el total según cantidad y zona de entrega, confirma horario y registra todo en una planilla lista para el repartidor.",
      stat: { num: "~80%", lbl: "pedidos sin intervención" },
      stack: ["whatsapp", "sheets", "ruteo"],
    },
    {
      tag: "Atención ciudadana",
      t: "Mesa de entrada para organismo público.",
      d: "Responde consultas frecuentes, deriva trámites al área correspondiente y registra reclamos vecinales con datos estructurados, evitando que se pierdan en una bandeja de entrada.",
      stat: { num: "Piloto", lbl: "validación con usuarios reales" },
      stack: ["whatsapp", "tickets", "derivación"],
      status: "En fase de testeo",
    },
    {
      tag: "ONG / Tercer sector",
      t: "Banco de préstamo de artículos ortopédicos.",
      d: "Web institucional y sistema de stock para una organización social que presta sillas de ruedas, muletas, andadores y otros equipos. El equipo registra préstamos y devoluciones directamente en la web, y el inventario queda siempre al día sin planillas paralelas, con visualización en tiempo real.",
      stat: { num: "100%", lbl: "trazabilidad de cada préstamo" },
      stack: ["web", "inventario", "préstamos"],
      link: { href: "https://rotarylascano.org", label: "rotarylascano.org" },
    },
  ];
  return (
    <section className="section-pad" id="casos">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">En producción</div>
            <h2 className="h-section">Agentes que ya están funcionando.</h2>
            <p>Una muestra de proyectos en operación. Mantenemos en reserva los nombres de los clientes, pero el alcance es real.</p>
          </div>
        </div>
        <div className="cases-grid">
          {items.map((c, i) => (
            <div className={"case" + (c.feature ? " feature" : "")} key={i}>
              <span className="case-tag">{c.tag}</span>
              {c.status && <span className="case-status">{c.status}</span>}
              <h4>{c.t}</h4>
              <p>{c.d}</p>
              <div className="demo-tools" style={{marginTop: 0}}>
                {c.stack.map(s => (
                  <span className="demo-tool" key={s}><span className="ind"></span>{s}</span>
                ))}
              </div>
              <div className="case-stat">
                <span className="num">{c.stat.num}</span>
                <span className="lbl">{c.stat.lbl}</span>
                {c.link && (
                  <a className="case-link" href={c.link.href} target="_blank" rel="noopener">
                    {c.link.label} <Icon.Arrow/>
                  </a>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ SERVICIOS ============ */
function Services() {
  const items = [
    {
      n: "01",
      ic: <Icon.Bot/>,
      t: "Agente de atención al cliente",
      d: "Responde preguntas frecuentes, filtra consultas y escala solo lo que realmente necesita atención humana."
    },
    {
      n: "02",
      ic: <Icon.Workflow/>,
      t: "Flujos de automatización",
      d: "Conectamos WhatsApp, email, formularios y tu sistema de gestión para que todo fluya sin intervención manual."
    },
    {
      n: "03",
      ic: <Icon.Code/>,
      t: "Apps y webs con IA integrada",
      d: "Desarrollamos herramientas digitales a medida, desde paneles internos hasta sitios con asistentes inteligentes."
    },
  ];
  return (
    <section className="section-pad" id="servicios">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">Servicios</div>
            <h2 className="h-section">Qué construimos para vos.</h2>
            <p>Empezamos por lo que más duele y crecemos desde ahí. Sin paquetes infinitos: tres frentes claros que cubren la mayoría de las necesidades.</p>
          </div>
        </div>
        <div className="svc-grid">
          {items.map((c) => (
            <div className="svc-card" key={c.n}>
              <div className="svc-num">{c.n}</div>
              <div className="ic">{c.ic}</div>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ PROCESS ============ */
function Process() {
  const steps = [
    { n: "01", ic: <Icon.Search/>, t: "Diagnóstico", d: "Entendemos tu flujo actual y dónde se pierde el tiempo." },
    { n: "02", ic: <Icon.Pen/>, t: "Propuesta", d: "Te mostramos qué automatizar y cómo, con plazos claros." },
    { n: "03", ic: <Icon.Build/>, t: "Implementación", d: "Construimos en aproximadamente una semana, con visibilidad total." },
    { n: "04", ic: <Icon.Rocket/>, t: "Soporte", d: "Te acompañamos los primeros 30 días para ajustar y mejorar." },
  ];
  return (
    <section className="process section-pad" id="proceso">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow">Proceso</div>
            <h2 className="h-section">De idea a agente productivo en cuatro pasos.</h2>
            <p>Trabajamos cerca, de forma simple. Una conversación inicial alcanza para arrancar.</p>
          </div>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="step-icon">{s.ic}</div>
              <div className="step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CTA ============ */
function Cta() {
  return (
    <section className="section-pad" id="contacto">
      <div className="container">
        <div className="cta">
          <div className="cta-inner">
            <div className="eyebrow" style={{justifyContent:"center", display:"inline-flex"}}>Hablemos</div>
            <h2 className="h-display" style={{marginTop:18}}>
              ¿Cuántas horas estás perdiendo <span className="h-orange">esta semana?</span>
            </h2>
            <p>Una llamada de 20 minutos alcanza para saberlo. Sin compromiso.</p>
            <div className="cta-actions">
              <a href="https://wa.me/59898737372?text=Hola%20ButIÁ,%20me%20gustaría%20agendar%20una%20llamada" className="btn btn-primary">
                Agendar llamada gratuita <span className="btn-arrow"><Icon.Arrow/></span>
              </a>
              <a href="mailto:hola@butia.ai?subject=Hola%20ButIÁ" className="btn btn-ghost">
                <Icon.Mail/> hola@butia.ai
              </a>
            </div>
            <div className="cta-mail">
              o escribinos al <a href="https://wa.me/59898737372">+598 98 73 73 72</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="nav-logo">
              <span className="nl-mark"><BrandMark size={28}/></span>
              <span className="nl-text">But<em>IÁ</em></span>
            </div>
            <p>Agentes de IA y automatizaciones para que tu negocio funcione sin que tengas que estar en todo.</p>
          </div>
          <div className="footer-col">
            <h5>Navegación</h5>
            <ul>
              <li><a href="#servicios">Servicios</a></li>
              <li><a href="#casos">Casos</a></li>
              <li><a href="#rubros">Rubros</a></li>
              <li><a href="#proceso">Proceso</a></li>
              <li><a href="#contacto">Contacto</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contacto</h5>
            <ul>
              <li><a href="mailto:hola@butia.ai">hola@butia.ai</a></li>
              <li><a href="https://wa.me/59898737372">+598 98 73 73 72</a></li>
              <li>Montevideo, Uruguay</li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Redes</h5>
            <ul>
              <li><a href="https://www.linkedin.com/in/butia-inteligencia-artificial" target="_blank" rel="noopener" aria-label="LinkedIn"><span style={{display:"inline-flex",alignItems:"center",gap:8}}><Icon.Linkedin/> LinkedIn</span></a></li>
              <li><a href="https://www.instagram.com/butia.ia/" target="_blank" rel="noopener" aria-label="Instagram"><span style={{display:"inline-flex",alignItems:"center",gap:8}}><Icon.Instagram/> Instagram</span></a></li>
              <li><a href="https://www.facebook.com/profile.php?id=61577834455595" target="_blank" rel="noopener" aria-label="Facebook"><span style={{display:"inline-flex",alignItems:"center",gap:8}}><Icon.Facebook/> Facebook</span></a></li>
              <li><a href="https://wa.me/59898737372" target="_blank" rel="noopener"><span style={{display:"inline-flex",alignItems:"center",gap:8}}><Icon.Whats/> WhatsApp</span></a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <p>© 2026 ButIA · Montevideo, Uruguay</p>
          <p>butia.ai · hecho con agentes</p>
        </div>
      </div>
    </footer>
  );
}

/* ============ MOBILE MENU ============ */
function MobileMenu({ open, onClose }) {
  return (
    <div className={"mobile-menu" + (open ? " open" : "")}>
      <button className="close" onClick={onClose}><Icon.Close/></button>
      <a href="#servicios" onClick={onClose}>Servicios</a>
      <a href="#casos" onClick={onClose}>Casos</a>
      <a href="#rubros" onClick={onClose}>Rubros</a>
      <a href="#proceso" onClick={onClose}>Proceso</a>
      <a href="#contacto" onClick={onClose}>Contacto</a>
      <a href="https://wa.me/59898737372" className="btn btn-primary" style={{marginTop:24, alignSelf:"flex-start"}} onClick={onClose}>
        Hablemos
      </a>
    </div>
  );
}

/* ============ ROOT ============ */
function App() {
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) {
      els.forEach(e => e.classList.add("visible"));
      return;
    }
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add("visible"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12 });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav onOpenMenu={() => setMenuOpen(true)}/>
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)}/>
      <Hero/>
      <Problema/>
      <Rubros/>
      <Casos/>
      <Services/>
      <Process/>
      <Cta/>
      <Footer/>
    </>
  );
}

window.App = App;