// footer.jsx — CTA + footer

function CTA() {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } }, { threshold: 0.3 });
    io.observe(el); return () => io.disconnect();
  }, []);

  return (
    <section className="cta-section" id="contacto" ref={ref} data-screen-label="03 Contacto">
      <div className="shell">
        <div className={`reveal ${inView ? 'in' : ''}`}>
          <div className="label" style={{ display: 'inline-flex', alignItems: 'center', gap: 12, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-dim)', marginBottom: 28 }}>
            <span style={{ width: 24, height: 1, background: 'var(--accent)' }} /> Hablemos
          </div>
          <h2>¿Y si lo siguiente que <em>automatices</em> es lo que más te frena?</h2>
          <p className="desc">Contanos qué hacés y cómo lo hacés hoy. Si uno de nuestros sistemas te sirve, lo configuramos. Si no, lo construimos a medida.</p>
          <div style={{ display: 'inline-flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
            <a href="https://wa.me/541134423444" className="btn btn-primary"><Icon.Whatsapp /> Escribir por WhatsApp <Icon.Arrow /></a>
            <a href="mailto:contacto@taloslabsia.com" className="btn btn-ghost"><Icon.Mail /> contacto@taloslabsia.com</a>
          </div>
        </div>
      </div>
      <BigTypeSpotlight />
    </section>
  );
}

function Marquee() {
  const items = [
    'Software a medida',
    'PyMEs argentinas',
    'PWA · iOS · Android',
    'Cobranzas que se cobran',
    'Sin tutoriales eternos',
    'Inteligencia aplicada',
  ];
  const doubled = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {doubled.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="foot" data-screen-label="04 Footer">
      <div className="shell">
        <div className="foot-grid">
          <div>
            <div className="foot-brand">
              <img src="assets/Solo Logo Talos.png" alt="Talos" />
              <span>Talos Labs IA</span>
            </div>
            <p className="foot-tag">Inteligencia aplicada al software. Sistemas y páginas a medida para emprendedores que quieren operar como empresa.</p>
          </div>
          <div>
            <h4>Productos</h4>
            <ul>
              <li><a href="#productos">BilleterAI</a></li>
              <li><a href="#productos">Agente Ventas</a></li>
              <li><a href="#productos">Agente Central</a></li>
              <li><a href="#productos">Agente Comercio</a></li>
              <li><a href="#productos">Agente Resto</a></li>
            </ul>
          </div>
          <div>
            <h4>Contacto</h4>
            <ul>
              <li><a href="https://wa.me/541134423444"><Icon.Phone /> 11-3442-3444</a></li>
              <li><a href="mailto:contacto@taloslabsia.com"><Icon.Mail /> contacto@taloslabsia.com</a></li>
            </ul>
          </div>
          <div>
            <h4>Seguinos</h4>
            <ul>
              <li><a href="https://instagram.com/taloslabsia"><Icon.Instagram /> @taloslabsia</a></li>
              <li><a href="https://facebook.com/taloslabsia"><Icon.Facebook /> taloslabsia</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© {new Date().getFullYear()} Talos Labs IA. Hecho en Buenos Aires.</span>
          <span className="mark">Inteligencia aplicada.</span>
        </div>
      </div>
    </footer>
  );
}

function BigTypeSpotlight() {
  const ref = React.useRef(null);

  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const rect = el.getBoundingClientRect();
    el.style.setProperty('--sx', (e.clientX - rect.left) + 'px');
    el.style.setProperty('--sy', (e.clientY - rect.top) + 'px');
    el.style.setProperty('--so', '1');
  };

  const onLeave = () => {
    const el = ref.current; if (!el) return;
    el.style.setProperty('--so', '0');
  };

  return (
    <div
      className="bigtype"
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      aria-hidden="true"
    >
      TALOS
    </div>
  );
}

window.CTA = CTA;
window.Marquee = Marquee;
window.Footer = Footer;