/* global React, ReactDOM */
const { useState, useEffect } = React;

const { Icon, useReveal, Navbar, Footer, useSiteTweaks, SiteTweaks } = window;

const SERVICES = [
  {
    n: "01",
    icon: "code",
    title: "Desarrollo a medida",
    desc: "Aplicaciones web, móviles y de escritorio diseñadas exactamente para tu operativa, sin compromisos con plantillas ni soluciones genéricas.",
    long: "Partimos de cómo trabaja realmente tu equipo, no de un catálogo de funciones cerrado. El resultado es una herramienta que encaja con tus procesos actuales — y que puede crecer contigo, en vez de obligarte a adaptar tu negocio al software.",
    items: ["Web apps & PWA", "Backends & APIs", "Apps móviles Android/iOS", "Integraciones ERP/CRM", "Paneles de administración a medida", "Automatización de procesos internos"],
    stack: ["Python", "TypeScript", "React / Next.js", "FastAPI", "PostgreSQL", "Kotlin"]
  },
  {
    n: "02",
    icon: "cpu",
    title: "Automatización con IA",
    desc: "Agentes y flujos inteligentes que clasifican, redactan, procesan documentos y conversan con tus clientes.",
    long: "Aplicamos modelos de lenguaje donde de verdad aportan valor: tareas repetitivas que hoy consumen horas de tu equipo. No vendemos IA por moda — la integramos con tus sistemas actuales para que el resultado sea directamente utilizable, con supervisión humana donde hace falta.",
    items: ["Agentes conversacionales", "Procesado de documentos", "Workflows con LLMs", "Análisis predictivo", "Clasificación y extracción de datos", "Integración con tus sistemas existentes"],
    stack: ["Claude · GPT · Llama", "Python", "FastAPI", "PostgreSQL"]
  },
  {
    n: "03",
    icon: "refresh",
    title: "Modernización de sistemas",
    desc: "Migramos software heredado a stacks modernos, mantenibles y conectados, sin parar tu negocio.",
    long: "Antes de tocar una línea de código, auditamos lo que ya tienes: qué funciona, qué es frágil y qué depende de una sola persona o de tecnología obsoleta. La migración se hace por fases, con el sistema antiguo siempre operativo hasta que el nuevo está validado.",
    items: ["Migración legacy", "Refactor & cloud", "Auditoría técnica", "Soporte continuo", "Documentación técnica", "Planes de migración por fases"],
    stack: ["Docker", "Azure / AWS", "PowerShell", "PostgreSQL"]
  }
];

const FAQ = [
  { q: "¿Trabajáis con presupuesto cerrado?", a: "Sí. Tras la fase de Descubrimiento te entregamos una propuesta con alcance, plazos y precio cerrado — sin sorpresas en la factura." },
  { q: "¿Puedo empezar con algo pequeño y crecer después?", a: "Sí, es habitual. Muchos proyectos arrancan como un MVP o una automatización puntual y se amplían según los resultados." },
  { q: "¿Trabajáis con empresas fuera de España?", a: "Sí, trabajamos en remoto para toda la Unión Europea." },
  { q: "¿Qué pasa si ya tengo un sistema antiguo en producción?", a: "Lo auditamos primero y migramos por fases, manteniendo tu sistema actual funcionando hasta que el nuevo esté validado." }
];

const ServiceBlock = ({ s }) => (
  <article className="reveal" style={{background: "var(--surface)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg, 16px)", padding: "32px 36px", marginBottom: 22}}>
    <div style={{display: "flex", alignItems: "center", gap: 14, marginBottom: 10}}>
      <div className="svc-card__icon" style={{margin: 0, flexShrink: 0}}><Icon name={s.icon} size={22} stroke={1.6}/></div>
      <span style={{fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)"}}>{s.n} / Servicio</span>
    </div>
    <h3 style={{margin: "0 0 10px"}}>{s.title}</h3>
    <p style={{fontSize: 15, color: "var(--ink-2)", maxWidth: 720}}>{s.desc}</p>
    <p style={{fontSize: 14, color: "var(--muted)", maxWidth: 720, marginTop: 10}}>{s.long}</p>
    <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 8, marginTop: 20}}>
      {s.items.map(i => (
        <div key={i} style={{display: "flex", alignItems: "center", gap: 8, fontSize: 13.5, color: "var(--ink-2)"}}>
          <Icon name="check" size={14}/> {i}
        </div>
      ))}
    </div>
    <div style={{display: "flex", gap: 8, flexWrap: "wrap", marginTop: 18, paddingTop: 18, borderTop: "1px dashed var(--line)"}}>
      {s.stack.map(t => <span key={t} className="dl-tag" style={{fontFamily: "var(--mono)"}}>{t}</span>)}
    </div>
  </article>
);

const FaqItem = ({ q, a }) => (
  <details className="reveal" style={{background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, padding: "16px 20px", marginBottom: 10}}>
    <summary style={{cursor: "pointer", fontWeight: 600, fontSize: 15}}>{q}</summary>
    <p style={{margin: "10px 0 0", color: "var(--muted)", fontSize: 14}}>{a}</p>
  </details>
);

const ServicesPage = () => {
  const [t, setTweak] = useSiteTweaks();
  const [contactInfo, setContactInfo] = useState({});
  useReveal(1);

  useEffect(() => {
    fetch("api/settings.php?action=get_public")
      .then(r => r.json())
      .then(d => { if (d.ok && d.settings) setContactInfo(d.settings); })
      .catch(() => {});
  }, []);

  const onScroll = (id) => {
    if (id === "top") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    window.location.href = `index.html#${id}`;
  };

  return (
    <>
      <Navbar page="services" theme={t.theme} onToggleTheme={() => setTweak("theme", t.theme === "dark" ? "light" : "dark")} onScroll={onScroll}/>
      <main id="top">
        <section className="section" style={{paddingTop: 56}}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <h2>Tres áreas, un único objetivo.</h2>
                <p className="lead" style={{marginTop: 14}}>Tres líneas de trabajo y un único objetivo: que tu empresa funcione mejor con software hecho a su medida. Aquí tienes el detalle de cada una — qué incluye, cómo trabajamos y con qué tecnología.</p>
              </div>
            </div>

            {SERVICES.map(s => <ServiceBlock key={s.n} s={s}/>)}

            <div className="tech-marquee reveal" style={{marginTop: 12}}>
              <span><b>Stack completo:</b></span>
              <span>Python</span><span>·</span>
              <span>TypeScript</span><span>·</span>
              <span>React / Next.js</span><span>·</span>
              <span>FastAPI</span><span>·</span>
              <span>PostgreSQL</span><span>·</span>
              <span>Docker</span><span>·</span>
              <span>Kotlin</span><span>·</span>
              <span>PowerShell</span><span>·</span>
              <span>Azure / AWS</span><span>·</span>
              <span>Claude · GPT · Llama</span>
            </div>

            <div style={{marginTop: 56}}>
              <div className="section-head reveal">
                <div><span className="eyebrow">Preguntas frecuentes</span><h2>Lo que más nos preguntan.</h2></div>
              </div>
              {FAQ.map(f => <FaqItem key={f.q} {...f}/>)}
            </div>

            <div className="reveal" style={{marginTop: 40, padding: "28px 32px", background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 16, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap"}}>
              <div>
                <b style={{fontSize: 16}}>¿Cuál de estas áreas encaja con lo que necesitas?</b>
                <p style={{margin: "4px 0 0", fontSize: 13.5, color: "var(--muted)"}}>Cuéntanos tu caso, una llamada inicial es gratuita y sin compromiso.</p>
              </div>
              <a className="btn btn--accent" href="contacto.html">Hablemos <Icon name="arrow-right" size={15}/></a>
            </div>
          </div>
        </section>
      </main>
      <Footer page="services" contactInfo={contactInfo} onScroll={onScroll}/>
      <SiteTweaks t={t} setTweak={setTweak}/>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ServicesPage/>);