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

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

const PROCESS = [
  {
    n: "01", title: "Descubrimiento",
    desc: "Reunión inicial. Entendemos tu proceso, identificamos oportunidades y delimitamos el alcance.",
    give: "Un resumen del problema y de dónde vemos margen de mejora.",
    need: "Que nos cuentes cómo trabajáis hoy y qué te gustaría cambiar."
  },
  {
    n: "02", title: "Propuesta",
    desc: "Documento técnico, plazos y presupuesto cerrado. Sin sorpresas.",
    give: "Alcance detallado, calendario y precio cerrado por escrito.",
    need: "Tu visto bueno, o los ajustes que quieras hacer al alcance."
  },
  {
    n: "03", title: "Construcción",
    desc: "Sprints quincenales con demos. Tú validas, nosotros iteramos.",
    give: "Una demo funcional cada dos semanas con el avance real, no una maqueta.",
    need: "Feedback rápido después de cada demo para no desviarnos."
  },
  {
    n: "04", title: "Despliegue",
    desc: "Puesta en producción, formación a tu equipo y soporte continuo.",
    give: "El sistema en producción, formación a tu equipo y un canal de soporte abierto.",
    need: "Coordinar contigo la fecha de puesta en marcha."
  }
];

const FAQ = [
  { q: "¿Cuánto dura un proyecto típico?", a: "Depende del alcance. Hay automatizaciones puntuales que se entregan en pocas semanas, y proyectos más completos que llevan varios meses. El calendario exacto queda cerrado en la fase de Propuesta." },
  { q: "¿Qué pasa si cambian los requisitos a mitad de proyecto?", a: "Lo hablamos en la siguiente demo y ajustamos alcance y plazos con transparencia — preferimos avisarte pronto a entregarte algo que ya no encaja." },
  { q: "¿Dais soporte después de la entrega?", a: "Sí, la fase de Despliegue incluye formación a tu equipo y soporte continuo." },
  { q: "¿Tengo que estar disponible durante todo el proyecto?", a: "No a diario, pero sí en las demos quincenales — es el momento en el que validas el avance y evitamos desviarnos del objetivo." }
];

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 ProcessPage = () => {
  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="process" 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>De la primera reunión a producción en semanas, no meses.</h2>
                <p className="lead" style={{marginTop: 14}}>Un método sencillo, transparente y con entregas frecuentes. Cuatro fases, con lo que recibes y lo que necesitamos de ti en cada una.</p>
              </div>
            </div>

            <div className="process">
              {PROCESS.map(p => (
                <div key={p.n} className="process__step reveal">
                  <span className="num">{p.n}</span>
                  <b>Fase {p.n}</b>
                  <h3>{p.title}</h3>
                  <p>{p.desc}</p>
                  <div style={{marginTop: 16, paddingTop: 14, borderTop: "1px dashed var(--line)", display: "grid", gap: 8}}>
                    <div style={{fontSize: 13, color: "var(--ink-2)"}}><b style={{color: "var(--accent)"}}>Recibes: </b>{p.give}</div>
                    <div style={{fontSize: 13, color: "var(--ink-2)"}}><b style={{color: "var(--accent)"}}>Necesitamos: </b>{p.need}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{marginTop: 56}}>
              <div className="section-head reveal">
                <div><span className="eyebrow">Preguntas frecuentes</span><h2>Sobre cómo trabajamos.</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}}>¿Empezamos por la fase de Descubrimiento?</b>
                <p style={{margin: "4px 0 0", fontSize: 13.5, color: "var(--muted)"}}>Una llamada inicial gratuita, 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="process" contactInfo={contactInfo} onScroll={onScroll}/>
      <SiteTweaks t={t} setTweak={setTweak}/>
    </>
  );
};

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