/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio */

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "asymmetric",
  "servicesLayout": "grid"
} /*EDITMODE-END*/;

// ── Icons (inline SVG, monoline) ──────────────────────────────
const Icon = {
  AI: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="6" width="16" height="13" rx="3" />
      <circle cx="9" cy="13" r="1.3" />
      <circle cx="15" cy="13" r="1.3" />
      <path d="M12 3v3M9 19v2M15 19v2" />
      <path d="M2 11v3M22 11v3" />
    </svg>,

  Edge: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="2.5" />
      <circle cx="5" cy="5" r="1.8" />
      <circle cx="19" cy="5" r="1.8" />
      <circle cx="5" cy="19" r="1.8" />
      <circle cx="19" cy="19" r="1.8" />
      <path d="M6.6 6.6l3.6 3.6M17.4 6.6l-3.6 3.6M6.6 17.4l3.6-3.6M17.4 17.4l-3.6-3.6" />
    </svg>,

  Transform: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 7h12l-2-2M20 17H8l2 2" />
      <path d="M4 7v4M20 17v-4" />
      <circle cx="4" cy="14" r="1.4" />
      <circle cx="20" cy="10" r="1.4" />
    </svg>,

  Marketing: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 11l14-6v14L3 13v-2z" />
      <path d="M7 13v4a2 2 0 002 2h1l-1-6" />
      <path d="M19 9c1.2 0 2 1.3 2 3s-.8 3-2 3" />
    </svg>,

  Analytics: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 20V10M10 20V4M16 20v-8M22 20H2" />
      <circle cx="10" cy="4" r="1.4" />
      <circle cx="16" cy="12" r="1.4" />
    </svg>,

  Arrow: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>,

  Check: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12l5 5L20 7" />
    </svg>,

  Plus: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <path d="M5 12h14M12 5v14" />
    </svg>,

  Sparkle: () =>
  <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2l1.6 6.4L20 10l-6.4 1.6L12 18l-1.6-6.4L4 10l6.4-1.6z" />
    </svg>

};

const SERVICES = [
{ key: 'ai', icon: 'AI', title: 'Adopción de IA',
  desc: 'Agentes inteligentes, chatbots, análisis predictivo y modelos de machine learning personalizados para transformar tus procesos de negocio.' },
{ key: 'edge', icon: 'Edge', title: 'Soluciones Edge AI',
  desc: 'Inteligencia artificial en el borde: inferencia en tiempo real, baja latencia y procesamiento on-premise para operaciones críticas.' },
{ key: 'transform', icon: 'Transform', title: 'Transformación Digital',
  desc: 'Modernización de procesos, sistemas y cultura organizacional a través de la tecnología para una ventaja competitiva sostenible.' },
{ key: 'marketing', icon: 'Marketing', title: 'Marketing Digital',
  desc: 'Estrategias basadas en datos, optimización de campañas y presencia digital que generan resultados medibles y escalables.' },
{ key: 'analytics', icon: 'Analytics', title: 'Analítica & BI',
  desc: 'Dashboards estratégicos, KPIs y visualización de datos que transforman la información en decisiones de negocio inteligentes.' }];


const PROCESS = [
{ num: '01', title: 'Descubrimiento',
  desc: 'Analizamos tu negocio, datos y procesos para identificar las oportunidades de mayor impacto.' },
{ num: '02', title: 'Estrategia',
  desc: 'Diseñamos una hoja de ruta clara con prioridades, tecnologías y métricas de éxito definidas.' },
{ num: '03', title: 'Implementación',
  desc: 'Construimos y desplegamos soluciones robustas, iterando con tu equipo para garantizar la adopción.' },
{ num: '04', title: 'Optimización',
  desc: 'Monitoreamos, ajustamos y escalamos las soluciones para maximizar su valor a largo plazo.' }];


const FAQS = [
{ q: '¿Cuánto dura un proyecto típico?',
  a: 'Depende del alcance. Un piloto de IA o un dashboard de BI suele tomar entre 6 y 10 semanas. Una transformación digital integral se diseña en fases trimestrales con entregables medibles cada 4–6 semanas.' },
{ q: '¿Trabajan con empresas pequeñas o solo con grandes corporaciones?',
  a: 'Trabajamos con empresas de todos los tamaños. Lo que importa es que exista un problema concreto a resolver con datos o tecnología, y un equipo dispuesto a colaborar con nosotros.' },
{ q: '¿Cómo garantizan el ROI de un proyecto de IA?',
  a: 'Antes de construir, definimos contigo las métricas de éxito y el caso de negocio. Empezamos por un piloto acotado, validamos impacto, y solo escalamos lo que demuestra valor.' },
{ q: '¿Qué pasa con la privacidad de mis datos?',
  a: 'La privacidad es la base. Nuestras soluciones Edge AI procesan datos sensibles localmente, y todas nuestras implementaciones siguen buenas prácticas de seguridad, encriptación y cumplimiento normativo.' },
{ q: '¿Ofrecen soporte después del despliegue?',
  a: 'Sí. Ofrecemos acuerdos de soporte y evolución continua: monitoreo, ajustes de modelos, mejoras iterativas y capacitación a tu equipo para que la solución siga generando valor.' }];


// ── Reveal-on-scroll hook ─────────────────────────────────────
function useReveal(deps = []) {
  useEffect(() => {
    const reveal = (el) => el.classList.add('is-visible');

    // 1) Show everything currently above the fold immediately on mount,
    //    so the page never renders as a blank canvas.
    const showInView = () => {
      const vh = window.innerHeight || 800;
      document.querySelectorAll('.reveal:not(.is-visible)').forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.92) reveal(el);
      });
    };
    showInView();

    // 2) IntersectionObserver for the rest as the user scrolls.
    let obs;
    if ('IntersectionObserver' in window) {
      obs = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            reveal(e.target);
            obs.unobserve(e.target);
          }
        });
      }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
      document.querySelectorAll('.reveal:not(.is-visible)').forEach((el) => obs.observe(el));
    }

    // 3) Belt-and-suspenders: if anything is still hidden after 1.2s
    //    (e.g. IO never fires in this environment), force-show it.
    const fallback = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.is-visible)').forEach(reveal);
    }, 1200);

    return () => {
      if (obs) obs.disconnect();
      clearTimeout(fallback);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
}

// ── Header ────────────────────────────────────────────────────
function Header() {
  return (
    <header className="header">
      <div className="container header-inner">
        <a href="#" className="brand" aria-label="Serendia">
          <img src="assets/logo.png" alt="" />
          <span className="wordmark">Serendia</span>
        </a>
        <nav className="nav">
          <a href="#servicios">Servicios</a>
          <a href="#proceso">Cómo trabajamos</a>
          <a href="#faq">Preguntas</a>
          <a href="#contacto">Contacto</a>
        </nav>
        <a href="#contacto" className="btn btn-primary">
          Hablemos <span className="arrow"><Icon.Arrow /></span>
        </a>
      </div>
    </header>);

}

// ── Hero ──────────────────────────────────────────────────────
function Hero({ variant }) {
  return (
    <section className="hero" data-variant={variant}>
      <div className="container hero-inner">
        <div className="hero-copy">
          <h1 className="reveal">
            El <em>descubrimiento</em> que tu negocio estaba buscando.
          </h1>
          <p className="lead reveal reveal-delay-1">
            Transformamos empresas a través de inteligencia artificial, analítica avanzada e
            innovación digital. Tu próximo gran hallazgo empieza aquí.
          </p>
        </div>
      </div>
    </section>);

}

// ── Services ──────────────────────────────────────────────────
function Services({ layout }) {
  const [activeTab, setActiveTab] = useState(SERVICES[0].key);
  const active = SERVICES.find((s) => s.key === activeTab) || SERVICES[0];
  const ActiveIcon = Icon[active.icon];

  return (
    <section className="services" id="servicios" data-layout={layout}>
      <div className="container">
        <div className="section-head reveal">
          <p className="section-eyebrow">— Nuestros servicios</p>
          <h2>Soluciones integrales para tu transformación.</h2>
          <p>Desde la inteligencia artificial hasta la analítica de negocio: cinco prácticas que se combinan
            para impulsar tu empresa hacia el futuro digital.</p>
        </div>

        {layout === 'tabs' ?
        <>
          <div className="services-grid services-tabs-desktop">
            <div className="service-tabs">
              {SERVICES.map((s) => {
              const Ic = Icon[s.icon];
              return (
                <button key={s.key}
                className={`service-tab ${s.key === activeTab ? 'active' : ''}`}
                onClick={() => setActiveTab(s.key)}>
                    <span className="tab-icon"><Ic /></span>
                    {s.title}
                  </button>);

            })}
            </div>
            <div className="service-panel">
              <div className="panel-icon"><ActiveIcon /></div>
              <h3>{active.title}</h3>
              <p>{active.desc}</p>
              <a href="#contacto" className="btn btn-primary">
                Hablemos de esto <span className="arrow"><Icon.Arrow /></span>
              </a>
            </div>
          </div>
          <div className="services-tabs-mobile">
            {SERVICES.map((s, i) => {
              const Ic = Icon[s.icon];
              return (
                <div key={s.key} className={`service-card reveal reveal-delay-${Math.min(i + 1, 5)}`}>
                  <div className="service-icon"><Ic /></div>
                  <h3>{s.title}</h3>
                  <p>{s.desc}</p>
                  <a href="#contacto" className="service-link">
                    Descubrir más <span className="arrow"><Icon.Arrow /></span>
                  </a>
                </div>);
            })}
          </div>
        </> :

        <div className="services-grid">
            {SERVICES.map((s, i) => {
            const Ic = Icon[s.icon];
            return (
              <div key={s.key} className={`service-card reveal reveal-delay-${Math.min(i + 1, 5)}`}>
                  {layout === 'list' ?
                <>
                      <div className="service-icon"><Ic /></div>
                      <div>
                        <h3>{s.title}</h3>
                        <p>{s.desc}</p>
                        <a href="#contacto" className="service-link">
                          Descubrir más <span className="arrow"><Icon.Arrow /></span>
                        </a>
                      </div>
                    </> :

                <>
                      <div className="service-icon"><Ic /></div>
                      <h3>{s.title}</h3>
                      <p>{s.desc}</p>
                      <a href="#contacto" className="service-link">
                        Descubrir más <span className="arrow"><Icon.Arrow /></span>
                      </a>
                    </>
                }
                </div>);

          })}
          </div>
        }
      </div>
    </section>);

}

// ── Process ───────────────────────────────────────────────────
function Process() {
  return (
    <section className="process" id="proceso">
      <div className="container">
        <div className="section-head reveal">
          <p className="section-eyebrow">— Cómo trabajamos</p>
          <h2>Un proceso probado, de la incertidumbre a los resultados.</h2>
          <p>Cuatro etapas claras que convierten ideas y datos en soluciones que generan valor real.</p>
        </div>
        <div className="process-grid">
          {PROCESS.map((p, i) =>
          <div key={p.num} className={`process-step reveal reveal-delay-${i + 1}`}>
              <div className="step-num">{p.num}</div>
              <h3>{p.title}</h3>
              <p>{p.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── FAQ ───────────────────────────────────────────────────────
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="faq-wrap">
          <div className="reveal">
            <p className="section-eyebrow">— Preguntas frecuentes</p>
            <h2>Lo que suelen preguntarnos antes de empezar.</h2>
            <p style={{ marginTop: 16, fontSize: 16 }}>
              ¿Te queda alguna otra duda? <a href="#contacto" style={{ color: 'var(--color-serendia-blue-deep)', fontWeight: 500 }}>Escríbenos directamente</a>.
            </p>
          </div>
          <div className="faq-list">
            {FAQS.map((f, i) =>
            <div key={i} className="reveal">
              <div className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{f.q}</span>
                  <span className="faq-icon"><Icon.Plus /></span>
                </button>
                <div className="faq-a"><div className="faq-a-inner">{f.a}</div></div>
              </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ── CTA + form ────────────────────────────────────────────────
function CTA() {
  const [email, setEmail] = useState('');
  const [msg, setMsg] = useState('');
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSent(true);
    setTimeout(() => {setEmail('');setMsg('');setSent(false);}, 4500);
  };
  return (
    <section className="cta" id="contacto">
      <div className="container">
        <div className="cta-card reveal">
          <div className="cta-copy">
            <p className="section-eyebrow">— Hablemos</p>
            <h2>Tu próximo gran descubrimiento empieza con una conversación.</h2>
            <p>Cuéntanos tu desafío en una línea o dos. Te respondemos en menos de 24 horas con los próximos pasos.</p>
          </div>
          {sent ?
          <div className="form-success" role="status">
              <span style={{ display: 'inline-flex', width: 22, height: 22, borderRadius: 999, background: '#34c759', color: 'white', alignItems: 'center', justifyContent: 'center' }}><Icon.Check /></span>
              ¡Gracias! Recibimos tu mensaje. Te respondemos en menos de 24h.
            </div> :

          <form className="cta-form" onSubmit={submit}>
              <div className="field">
                <label htmlFor="email">Correo electrónico</label>
                <input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="tu@empresa.com" />
              </div>
              <div className="field">
                <label htmlFor="msg">Cuéntanos brevemente</label>
                <textarea id="msg" rows="3" value={msg} onChange={(e) => setMsg(e.target.value)} placeholder="¿Qué te gustaría resolver o explorar?"></textarea>
              </div>
              <button type="submit" className="btn btn-primary submit">
                Enviar mensaje <span className="arrow"><Icon.Arrow /></span>
              </button>
            </form>
          }
        </div>
      </div>
    </section>);

}

// ── Footer ────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <div className="footer-brand">
            <div className="brand">
              <img src="assets/logo.png" alt="" style={{ height: 28 }} />
              <span className="wordmark">Serendia</span>
            </div>
            <p>Donde la tecnología encuentra el descubrimiento. Consultora especializada en IA, analítica y transformación digital.</p>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <h4>Servicios</h4>
              <ul>
                <li><a href="#servicios">Adopción de IA</a></li>
                <li><a href="#servicios">Edge AI</a></li>
                <li><a href="#servicios">Transformación digital</a></li>
                <li><a href="#servicios">Marketing</a></li>
                <li><a href="#servicios">Analítica & BI</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h4>Empresa</h4>
              <ul>
                <li><a href="#proceso">Cómo trabajamos</a></li>
                <li><a href="#faq">Preguntas</a></li>
                <li><a href="#contacto">Contacto</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h4>Contacto</h4>
              <ul>
                <li><a href="mailto:hola@serendia.tech">hola@serendia.tech</a></li>
                <li><a href="#">Mendoza, Argentina</a></li>
                 <li>
                     <a 
                       href="https://www.linkedin.com/company/serendia-tech/" 
                       target="_blank" 
                       rel="noopener noreferrer"
                        >
                         LinkedIn
                         </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Serendia. Todos los derechos reservados.</span>
          <span>Donde la tecnología encuentra el descubrimiento.</span>
        </div>
      </div>
    </footer>);

}

// ── App ───────────────────────────────────────────────────────
function App() {
  useReveal([]);

  return (
    <>
      <Header />
      <Hero variant="asymmetric" />
      <Services layout="tabs" />
      <Process />
      <FAQ />
      <CTA />
      <Footer />
    </>);

}

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