/* Geishia — Landing v2 — App */
const { useEffect, useRef, useState } = React;

const Logo = ({ size = 32 }) => (
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: '#FAFAFA' }}>
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <g stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round">
        <circle cx="16" cy="16" r="4"/>
        <line x1="16" y1="12" x2="16" y2="4"/>
        <line x1="16" y1="20" x2="16" y2="28"/>
        <line x1="19.5" y1="14" x2="26" y2="10"/>
        <line x1="19.5" y1="18" x2="26" y2="22"/>
        <line x1="12.5" y1="14" x2="6" y2="10"/>
        <line x1="12.5" y1="18" x2="6" y2="22"/>
        <circle cx="16" cy="2.5" r="1.8" fill="currentColor"/>
        <circle cx="16" cy="29.5" r="1.8" fill="currentColor"/>
        <circle cx="27.5" cy="9.2" r="1.8" fill="currentColor"/>
        <circle cx="27.5" cy="22.8" r="1.8" fill="currentColor"/>
        <circle cx="4.5" cy="9.2" r="1.8" fill="currentColor"/>
        <circle cx="4.5" cy="22.8" r="1.8" fill="currentColor"/>
      </g>
    </svg>
    <window.Wordmark fontSize={17}/>
  </span>
);

/* ---------- Navbar (with mega-menu) ---------- */
const Navbar = () => {
  const ctx = window.useMegaMenuMM();
  return (
    <nav className="nav-fixed" ref={ctx.wrapRef}>
      <a href="#top" aria-label="Geishia"><Logo size={34}/></a>
      <div className="nav-pill liquid-glass">
        <a href="#top">Inicio</a>
        <window.MegaTrigger
          which="servicios"
          label="Servicios"
          items={window.SERVICIOS_MENU}
          basePath="./"
          ctx={ctx}
        />
        <a href="empresa/sobre-nosotros.html">Sobre nosotros</a>
        <a href="#diagnostico">Diagnóstico</a>
        <a href="#contacto">Contacto</a>
      </div>
      <a href="#contacto" className="btn-primary btn-sm">
        Agendar reunión <Icons.ArrowUpRight size={14}/>
      </a>
    </nav>
  );
};

/* ---------- Hero ---------- */
const Hero = () => {
  const glowRef = useRef(null);
  useEffect(() => {
    function onScroll() {
      const y = window.scrollY;
      if (glowRef.current) {
        const fade = Math.max(0.4, 1 - y / 600);
        glowRef.current.style.transform = `translate(-50%, calc(-50% + ${y * 0.3}px))`;
        glowRef.current.style.opacity = fade;
      }
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="top" className="hero" data-screen-label="01 Hero">
      <ParticleNetwork/>
      <div ref={glowRef} className="hero-glow"/>
      <div className="hero-overlay"/>
      <div className="hero-fade"/>
      <div className="hero-content">
        <FadeUp delay={0}>
          <span className="hero-eyebrow-plain">
            Automatización con IA para Empresas
          </span>
        </FadeUp>

        <BlurText as="h1" className="h1-display hero-h1" stagger={110}>
          {"Operaciones que "}<span className="aurora-word">piensan</span>{" solas"}
        </BlurText>

        <FadeUp delay={800} className="hero-sub">
          <p className="body-lead">
            Transformamos procesos manuales y repetitivos en sistemas que funcionan solos. No vendemos IA: vendemos horas recuperadas.
          </p>
        </FadeUp>

        <FadeUp delay={1100}>
          <div className="hero-ctas">
            <a href="#contacto" className="btn-primary btn-warm-shimmer">
              Hacer diagnóstico gratis <Icons.ArrowRight size={15}/>
            </a>
            <a href="#servicios-extra" className="btn-glass">
              Ver cómo trabajamos <Icons.ArrowRight size={15}/>
            </a>
          </div>
        </FadeUp>

        <FadeUp delay={1300}>
          <div className="hero-stats-mono">
            <span>+40 procesos automatizados</span>
            <span className="sep">·</span>
            <span>8hs promedio ahorradas/semana</span>
            <span className="sep">·</span>
            <span>100% Empresas</span>
          </div>
        </FadeUp>
      </div>
    </section>
  );
};

/* ---------- Problema (3 dolor cards) ---------- */
const Problema = () => {
  const dolores = [
    { I: Icons.Clock,         t: 'Horas en tareas repetitivas', d: 'Copiar datos entre sistemas, responder consultas frecuentes, armar reportes manuales. Todo suma horas que no vuelven.' },
    { I: Icons.AlertTriangle, t: 'Errores que cuestan caro',    d: 'Un número mal pasado en AFIP, una factura olvidada, un cliente sin respuesta. Los procesos manuales fallan donde menos conviene.' },
    { I: Icons.TrendingDown,  t: 'No escalás sin contratar',    d: 'Cada cliente nuevo significa más carga operativa. Crecer se vuelve un problema, no una oportunidad.' },
  ];

  return (
    <section className="section" data-screen-label="02 Problema">
      <div className="section-glow violet" data-parallax="0.2"
           style={{ top: '0%', left: '-200px' }}/>
      <div className="container">
        <div className="section-header">
          <FadeUp><span className="eyebrow-mono eyebrow-violet">El problema</span></FadeUp>
          <FadeUp delay={80}>
            <h2 className="h2-display">
              Tu equipo hace tareas que una máquina puede hacer mejor.
            </h2>
          </FadeUp>
          <FadeUp delay={160}>
            <p className="body-lead">
              Antes de hablar de soluciones, miremos honestamente qué está pasando hoy en tu operación.
            </p>
          </FadeUp>
        </div>
        <div className="grid-3">
          {dolores.map((it, i) => {
            const I = it.I;
            return (
              <FadeUp key={i} delay={i * 100}>
                <article className="dolor-card liquid-glass">
                  <div className="dolor-icon-wrap">
                    <I size={24}/>
                  </div>
                  <h4 className="dolor-title">{it.t}</h4>
                  <p className="dolor-body">{it.d}</p>
                </article>
              </FadeUp>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* ---------- Enfoque ---------- */
const Enfoque = () => {
  const items = [
    { I: Icons.Workflow,    t: 'En tu infraestructura',       d: 'El workflow corre en tus servidores con tus credenciales. Si mañana nos vamos, sigue funcionando.' },
    { I: Icons.Cpu,         t: 'Claude como cabeza',               d: 'Cada decisión la toma un modelo, no un if/else frágil. Se adapta cuando el input cambia.' },
    { I: Icons.TrendingUp,  t: '2–3 semanas al primer resultado',  d: 'No 6 meses. Diagnóstico la primera semana, primer workflow productivo a la tercera.' },
    { I: Icons.ShieldCheck, t: 'Cualquier app con API se conecta',  d: 'Lo que ya usás se enchufa. Y lo que aparezca el mes que viene también.' },
  ];
  return (
    <section className="section" data-screen-label="03 Enfoque">
      <div className="container">
        <div className="section-header">
          <FadeUp><span className="eyebrow-mono eyebrow-violet">Cómo lo resolvemos</span></FadeUp>
          <FadeUp delay={80}><h2 className="h2-display">Estudio técnico, no agencia.</h2></FadeUp>
          <FadeUp delay={160}><p className="body-lead">Vendemos resultados operativos, no licencias.</p></FadeUp>
        </div>
        <div className="grid-4">
          {items.map((it, i) => {
            const I = it.I;
            return (
              <FadeUp key={i} delay={i * 80}>
                <article className="diff-card liquid-glass">
                  <div className="diff-icon-pill liquid-glass-strong"><I size={20}/></div>
                  <h4 className="diff-title">{it.t}</h4>
                  <p className="diff-body">{it.d}</p>
                </article>
              </FadeUp>
            );
          })}
        </div>
      </div>
    </section>
  );
};

/* ---------- Contact (form) ---------- */
const Contact = () => {
  const [status, setStatus] = useState('idle'); // 'idle' | 'sending' | 'success' | 'error'

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');

    const form = e.target;
    const data = new FormData(form);

    try {
      const response = await fetch('https://formspree.io/f/xaqvvypq', {
        method: 'POST',
        body: data,
        headers: { 'Accept': 'application/json' },
      });

      if (response.ok) {
        setStatus('success');
        form.reset();
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };

  return (
    <section id="contacto" className="section section-contact" data-screen-label="12 Contacto">
      <div className="section-glow violet" data-parallax="0.15"
           style={{ top: '0%', left: '50%', transform: 'translateX(-50%)' }}/>
      <div className="container">
        <div className="contact-grid">
          <div className="contact-left">
            <FadeUp><span className="eyebrow-mono eyebrow-violet">Hablemos</span></FadeUp>
            <FadeUp delay={80}>
              <h2 className="h2-display">Contanos qué proceso te está comiendo el tiempo.</h2>
            </FadeUp>
            <FadeUp delay={160}>
              <p className="body-lead">
                30 minutos, sin compromiso. Te decimos qué procesos se pueden automatizar primero, cuánto te ahorrás, y cuánto sale.
              </p>
            </FadeUp>
            <FadeUp delay={240}>
              <ul className="contact-guarantees">
                <li><Icons.Check size={18}/> Respuesta en menos de 24hs</li>
                <li><Icons.Check size={18}/> Diagnóstico inicial sin costo ni compromiso</li>
                <li><Icons.Check size={18}/> Confidencialidad total sobre tus procesos</li>
              </ul>
            </FadeUp>
          </div>
          <div className="contact-right">
            <FadeUp delay={120}>
              <form className="contact-form liquid-glass" onSubmit={handleSubmit}>
                {/* Honeypot anti-spam */}
                <input
                  type="text"
                  name="_gotcha"
                  style={{ display: 'none' }}
                  tabIndex="-1"
                  autoComplete="off"
                />
                <input
                  type="hidden"
                  name="_subject"
                  value="Nuevo lead — Geishia"
                />

                <div className="form-row">
                  <label className="form-field">
                    <span className="form-label">Nombre</span>
                    <input type="text" name="name" required placeholder="Tu nombre"
                           disabled={status === 'sending'}/>
                  </label>
                </div>
                <div className="form-row">
                  <label className="form-field">
                    <span className="form-label">Email empresarial</span>
                    <input type="email" name="email" required placeholder="vos@tuempresa.com.ar"
                           disabled={status === 'sending'}/>
                  </label>
                </div>
                <div className="form-row">
                  <label className="form-field">
                    <span className="form-label">Empresa</span>
                    <input type="text" name="company" required placeholder="Nombre de tu Empresa"
                           disabled={status === 'sending'}/>
                  </label>
                </div>
                <div className="form-row">
                  <label className="form-field">
                    <span className="form-label">Tamaño del equipo</span>
                    <select name="team" required defaultValue="" disabled={status === 'sending'}>
                      <option value="" disabled>Seleccionar...</option>
                      <option>1-5 personas</option>
                      <option>6-20 personas</option>
                      <option>21-50 personas</option>
                      <option>+50 personas</option>
                    </select>
                  </label>
                </div>
                <div className="form-row">
                  <label className="form-field">
                    <span className="form-label">¿Qué proceso te gustaría automatizar?</span>
                    <textarea name="process" rows={4} required
                              disabled={status === 'sending'}
                              placeholder="Ej: perdemos 3hs diarias respondiendo las mismas consultas de clientes por email..."/>
                  </label>
                </div>

                <button
                  type="submit"
                  className="btn-primary btn-warm-shimmer btn-full"
                  disabled={status === 'sending' || status === 'success'}
                >
                  {status === 'sending' && <>Enviando…</>}
                  {status === 'success' && <>Enviado ✓</>}
                  {(status === 'idle' || status === 'error') && (
                    <>Agendar reunión <Icons.ArrowRight size={15}/></>
                  )}
                </button>

                {status === 'success' && (
                  <div className="form-feedback form-success">
                    <Icons.Check size={18}/>
                    <div>
                      <strong>Mensaje recibido.</strong>
                      <span>Te respondemos en menos de 24hs hábiles a tu email.</span>
                    </div>
                  </div>
                )}
                {status === 'error' && (
                  <div className="form-feedback form-error">
                    <Icons.AlertTriangle size={18}/>
                    <div>
                      <strong>Algo salió mal.</strong>
                      <span>Probá de nuevo en un momento o escribinos directo a contacto@geishia.com</span>
                    </div>
                  </div>
                )}
              </form>
            </FadeUp>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Footer ---------- */
const Footer = ({ prefix = './' }) => {

  const currentYear = new Date().getFullYear();

  return (
    <footer className="footer-section">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand-block">
            <a href={prefix + 'index.html'} className="footer-brand-logo">
              <Logo size={32}/>
            </a>
            <p className="footer-tagline">
              Operaciones que piensan solas — automatización con IA para Empresas.
            </p>
            <div className="footer-socials">
              <span className="footer-socials-label">Pronto en:</span>
              <div className="footer-socials-icons">
                <span className="footer-social-placeholder" title="LinkedIn (próximamente)" aria-label="LinkedIn próximamente">
                  <Icons.Linkedin size={16}/>
                </span>
                <span className="footer-social-placeholder" title="Twitter/X (próximamente)" aria-label="Twitter próximamente">
                  <Icons.Twitter size={16}/>
                </span>
                <span className="footer-social-placeholder" title="GitHub (próximamente)" aria-label="GitHub próximamente">
                  <Icons.Github size={16}/>
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="footer-columns">
          <div className="footer-col">
            <h4 className="footer-col-title">Soluciones</h4>
            <ul className="footer-col-list">
              <li><a href={prefix + 'soluciones/facturacion.html'}>Facturación y cobranzas</a></li>
              <li><a href={prefix + 'soluciones/pedidos.html'}>Operaciones de ecommerce</a></li>
              <li><a href={prefix + 'soluciones/clientes.html'}>Atención al cliente</a></li>
              <li><a href={prefix + 'soluciones/reportes.html'}>Reportes y dashboards</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4 className="footer-col-title">Servicios</h4>
            <ul className="footer-col-list">
              <li><a href={prefix + 'servicios/pagina-web.html'}>Página Web a medida</a></li>
              <li><a href={prefix + 'servicios/inteligencia-artificial.html'}>Inteligencia Artificial</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4 className="footer-col-title">Empresa</h4>
            <ul className="footer-col-list">
              <li><a href={prefix + 'empresa/sobre-nosotros.html'}>Sobre nosotros</a></li>
              <li><a href={prefix + 'index.html#confiaron'}>Casos</a></li>
              <li><a href={prefix + 'index.html#diagnostico'}>Diagnóstico gratis</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4 className="footer-col-title">Contacto</h4>
            <ul className="footer-col-list">
              <li>
                <a
                  href="https://wa.me/5491131924144"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="footer-contact-link"
                >
                  <Icons.MessageCircle size={14}/>
                  WhatsApp +54 9 11 3192-4144
                </a>
              </li>
              <li><a href="mailto:contacto@geishia.com">contacto@geishia.com</a></li>
              <li><a href={prefix + 'index.html#contacto'}>Formulario de contacto</a></li>
              <li className="footer-meta-item">Buenos Aires, Argentina</li>
              <li className="footer-meta-item">Lun a Vie 9:00 — 19:00 (ART)</li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div className="footer-copyright">
            © {currentYear} Geishia. Todos los derechos reservados.
          </div>
          <div className="footer-legal-links">
            <a href={prefix + 'legal/privacidad.html'}>Política de Privacidad</a>
            <span className="footer-sep">·</span>
            <a href={prefix + 'legal/terminos.html'}>Términos y Condiciones</a>
          </div>
          
        </div>
      </div>
    </footer>
  );
};

/* ---------- Global parallax ---------- */
function useGlobalParallax() {
  useEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) return;
    const items = document.querySelectorAll('[data-parallax]');
    let ticking = false;
    function onScroll() {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const y = window.scrollY;
        items.forEach(el => {
          const speed = parseFloat(el.dataset.parallax) || 0.3;
          const base = el.dataset.parallaxBase || '';
          el.style.transform = `${base} translate3d(0, ${y * speed}px, 0)`;
        });
        ticking = false;
      });
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
}

/* ---------- WhatsApp Floating Button ---------- */
const WhatsAppFloat = () => (
  <a
    href="https://wa.me/5491131924144"
    target="_blank"
    rel="noopener noreferrer"
    className="whatsapp-float"
    aria-label="Chatear por WhatsApp"
    title="Chatear por WhatsApp"
  >
    <Icons.WhatsApp size={26}/>
  </a>
);

/* ---------- App ---------- */
const App = () => {
  useGlobalParallax();
  return (
    <>
      <Navbar/>
      <Hero/>
      <Problema/>
      <Servicios/>
      <Diagnostico/>
      <Diferenciadores/>
      <Confiaron/>
      <Contact/>
      <Footer/>
      <WhatsAppFloat/>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);