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

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

const STEPS = [
  { n: "01", title: "Nos escribes", desc: "Rellenas el formulario o nos escribes directamente por email." },
  { n: "02", title: "Respondemos en <24h", desc: "Te contestamos en menos de 24 horas hábiles, siempre una persona, nunca un bot." },
  { n: "03", title: "Llamada gratuita", desc: "Si tu proyecto encaja, agendamos una llamada inicial sin coste ni compromiso." },
  { n: "04", title: "Propuesta cerrada", desc: "Si seguimos adelante, recibes una propuesta con alcance, plazos y precio cerrado en unos 5 días." }
];

const FAQ = [
  { q: "¿La primera llamada tiene coste?", a: "No, es gratuita y sin compromiso." },
  { q: "¿Puedo escribir aunque no tenga claro el alcance?", a: "Sí, es lo habitual. Lo definimos juntos en la fase de Descubrimiento." },
  { q: "¿Trabajáis con empresas fuera de España?", a: "Sí, trabajamos en remoto para toda la Unión Europea." },
  { q: "¿A qué email puedo escribir directamente?", a: "Al que aparece más abajo, en los datos de contacto — llega igual que si usas el formulario." }
];

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 ContactForm = ({ contactInfo }) => {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", company: "", message: "", topic: "Desarrollo a medida" });
  const submit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch("api/contact.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form)
      });
      const data = await res.json();
      if (data.ok) setSent(true);
    } catch {}
  };

  const email = contactInfo.contact_email || "hola@masoft.es";
  const phone = contactInfo.contact_phone || "+34 600 123 456";
  const location = contactInfo.contact_location || "Tenerife · España";

  return (
    <div className="contact reveal">
      <div className="contact__info">
        <p style={{fontSize: 16, color: "var(--ink-2)", maxWidth: 380}}>
          Una llamada inicial gratuita, sin compromiso. Si tu proyecto encaja, te enviamos propuesta cerrada en 5 días.
        </p>
        <ul>
          <li><Icon name="mail" size={20}/><div><b>{email}</b><span>Respuesta &lt; 24h</span></div></li>
          <li><Icon name="phone" size={20}/><div><b>{phone}</b><span>L-V · 9:00 – 18:00</span></div></li>
          <li><Icon name="pin" size={20}/><div><b>{location}</b><span>Trabajamos remoto en toda la UE</span></div></li>
        </ul>
      </div>
      <div className="contact__form">
        {!sent ? (
          <form onSubmit={submit}>
            <div className="form-row">
              <div className="field"><label>Nombre</label><input value={form.name} onChange={e=>setForm({...form, name:e.target.value})} required/></div>
              <div className="field"><label>Email</label><input type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} required/></div>
            </div>
            <div className="form-row">
              <div className="field"><label>Empresa</label><input value={form.company} onChange={e=>setForm({...form, company:e.target.value})}/></div>
              <div className="field">
                <label>Tema</label>
                <select value={form.topic} onChange={e=>setForm({...form, topic:e.target.value})}>
                  <option>Desarrollo a medida</option>
                  <option>Automatización con IA</option>
                  <option>Modernización de sistemas</option>
                  <option>Consultoría / otros</option>
                </select>
              </div>
            </div>
            <div className="field"><label>Cuéntanos brevemente</label><textarea value={form.message} onChange={e=>setForm({...form, message:e.target.value})} required/></div>
            <button type="submit" className="btn btn--accent" style={{width: "100%", justifyContent: "center"}}>Enviar mensaje <Icon name="arrow-right" size={16}/></button>
          </form>
        ) : (
          <div style={{textAlign: "center", padding: "40px 20px"}}>
            <div style={{width: 64, height: 64, borderRadius: 16, background: "var(--accent-soft)", color: "var(--accent)", display: "grid", placeItems: "center", margin: "0 auto 18px"}}>
              <Icon name="check" size={32} stroke={2.5}/>
            </div>
            <h3>Mensaje recibido</h3>
            <p style={{color: "var(--muted)"}}>Te contestamos en menos de 24 horas hábiles.</p>
          </div>
        )}
      </div>
    </div>
  );
};

const ContactPage = () => {
  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="contact" 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>Cuéntanos qué necesitas. Respondemos en menos de 24 h.</h2>
              </div>
            </div>

            <div className="reveal" style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 14, marginBottom: 40}}>
              {STEPS.map(s => (
                <div key={s.n} style={{background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, padding: "18px 16px"}}>
                  <span style={{fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)"}}>{s.n}</span>
                  <b style={{display: "block", fontSize: 14.5, margin: "6px 0 4px"}}>{s.title}</b>
                  <p style={{margin: 0, fontSize: 12.5, color: "var(--muted)"}}>{s.desc}</p>
                </div>
              ))}
            </div>

            <ContactForm contactInfo={contactInfo}/>

            <div style={{marginTop: 56}}>
              <div className="section-head reveal">
                <div><span className="eyebrow">Preguntas frecuentes</span><h2>Antes de escribirnos.</h2></div>
              </div>
              {FAQ.map(f => <FaqItem key={f.q} {...f}/>)}
            </div>
          </div>
        </section>
      </main>
      <Footer page="contact" contactInfo={contactInfo} onScroll={onScroll}/>
      <SiteTweaks t={t} setTweak={setTweak}/>
    </>
  );
};

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