// Valdebebas Life — Contacto (FormSubmit) y recomendaciones
const VB_EMAIL = "valdebebaslife@gmail.com";
const VB_IG = { handle: "@ValdebebasLife", url: "https://www.instagram.com/valdebebaslife/" };
const VB_JOIN_SERVICES = ["Hogar (manitas, fontanería, electricidad, limpieza, reformas, mudanzas…)", "Clases y formación (profes particulares, idiomas, música…)", "Cuidados (canguros, mayores, mascotas…)", "Salud y bienestar a domicilio (fisio, entrenador, masajes…)", "Gestiones y profesionales (gestoría, abogados, seguros, informática…)"];
const VB_JOIN_LOCALES = ["Restauración (restaurante, bar, cafetería, panadería…)", "Deporte (gimnasio, pilates, yoga…)", "Salud (farmacia, centro médico, dentista, veterinario…)", "Estética (clínica, peluquería, uñas, pestañas…)", "Tiendas (supermercado, bazar, comercio…)", "Educación (colegio, academia, escuela infantil…)", "Alojamiento (hotel, coliving…)"];
// Pega aquí los enlaces de invitación reales (chat.whatsapp.com/… o t.me/…)
const VB_GROUPS = [
  { app: "whatsapp", name: "Valdebebas · General", desc: "Avisos, dudas y el día a día del barrio.", url: "" },
  { app: "whatsapp", name: "Valdebebas · Compraventa", desc: "Compra, vende o regala entre vecinos.", url: "" },
  { app: "telegram", name: "Valdebebas · Familias", desc: "Colegios, planes con niños y canguros.", url: "" },
  { app: "telegram", name: "Valdebebas · Mascotas", desc: "Paseos, veterinarios y perros perdidos.", url: "" },
];
const APP_META = { whatsapp: { label: "WhatsApp", icon: "chat", cls: "wa" }, telegram: { label: "Telegram", icon: "send", cls: "tg" } };

function IgCard({ compact }) {
  return (
    <a className={"ig" + (compact ? " compact" : "")} href={VB_IG.url} target="_blank" rel="noopener">
      <span className="ig-ico"><Ic n="photo_camera" /></span>
      <span className="ig-t"><small>Síguenos en Instagram</small><b>{VB_IG.handle}</b>{!compact && <span>Novedades, planes y lo mejor del barrio cada semana.</span>}</span>
      <span className="btn white sm">Seguir<Ic n="arrow_outward" /></span>
    </a>
  );
}

function GroupRow({ g }) {
  const m = APP_META[g.app];
  const inner = <>
    <span className={"ico " + m.cls}><Ic n={m.icon} /></span>
    <span className="grp-t"><b>{g.name}</b><small>{m.label} · {g.desc}</small></span>
    {g.url ? <span className="btn sm ghost">Unirme<Ic n="arrow_outward" /></span> : <span className="pill sand">Enlace próximamente</span>}
  </>;
  return g.url ? <a className="grp" href={g.url} target="_blank" rel="noopener">{inner}</a> : <div className="grp">{inner}</div>;
}

function FollowBand({ go }) {
  return (
    <section className="sec" style={{ paddingTop: 0 }}>
      <div className="wrap"><IgCard /></div>
    </section>
  );
}

function ContactForm({ initial }) {
  const [kind, setKind] = useState(initial || "aparecer");
  const [f, setF] = useState({ name: "", email: "", phone: "", business: "", cat: "", catOther: "", message: "", ok: false, _honey: "" });
  const [st, setSt] = useState("idle");
  const [err, setErr] = useState("");
  const set = k => e => setF({ ...f, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });
  const isBiz = kind === "aparecer";
  async function submit(e) {
    e.preventDefault(); setErr("");
    if (!f.name.trim() || !/\S+@\S+\.\S+/.test(f.email) || f.message.trim().length < 10) return setErr("Rellena nombre, un email válido y un mensaje.");
    if (isBiz && !f.business.trim()) return setErr("Indica el nombre de tu negocio o actividad.");
    if (isBiz && !f.cat) return setErr("Elige una categoría.");
    if (isBiz && f.cat === "Otro" && !f.catOther.trim()) return setErr("Especifica la categoría de tu negocio.");
    if (!f.ok) return setErr("Acepta la política de privacidad para enviar.");
    setSt("sending");
    const saved = isBiz ? await VBStore.solicitud({ tipo: VB_JOIN_LOCALES.includes(f.cat) ? "place" : "pro", nombre: f.business, categoria: f.cat === "Otro" ? "Otro: " + f.catOther : f.cat, contacto: [f.phone, f.email].filter(Boolean).join(" · "), nota: f.message, origen: "solicitud" }) : false;
    const data = { _subject: isBiz ? "Nuevo negocio/profesional: " + f.business : "Sugerencia de " + f.name, _template: "table", _captcha: "false", _honey: f._honey, Tipo: isBiz ? "Quiero aparecer en la web" : "Sugerencia / consulta", Nombre: f.name, Email: f.email, "Teléfono": f.phone, ...(isBiz ? { Negocio: f.business, "Categoría": f.cat === "Otro" ? "Otro: " + f.catOther : f.cat } : {}), Mensaje: f.message };
    try {
      const r = await fetch("https://formsubmit.co/ajax/" + VB_EMAIL, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify(data) });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || j.success === "false" || j.success === false) throw new Error(j.message || "error");
      setSt("sent");
    } catch (x) { if (saved) setSt("sent"); else { setSt("idle"); setErr("No se pudo enviar. Escríbenos directamente a " + VB_EMAIL); } }
  }
  if (st === "sent") return (
    <div className="panel sent"><span className="ico lg green"><Ic n="mark_email_read" /></span><h3>¡Mensaje enviado!</h3><p>Te responderemos a {f.email} lo antes posible.</p><button className="btn ghost" onClick={() => { setSt("idle"); setF({ ...f, message: "", business: "", cat: "" }); }}>Enviar otro mensaje</button></div>
  );
  return (
    <form className="panel" onSubmit={submit} id="contacto-form">
      <div className="tabs"><button type="button" className={isBiz ? "on" : ""} onClick={() => setKind("aparecer")}>Quiero aparecer</button><button type="button" className={!isBiz ? "on" : ""} onClick={() => setKind("sugerencia")}>Sugerencia o consulta</button></div>
      <p style={{ color: "var(--muted)", fontSize: 15 }}>{isBiz ? "¿Tienes un negocio o eres profesional en Valdebebas? Cuéntanos a qué te dedicas. Revisamos tu solicitud y te añadimos gratis; tu posición la deciden las recomendaciones de los vecinos." : "Ideas, errores, algo que falta o cualquier pregunta. Leemos todo."}</p>
      <div className="row2">
        <div className="fld"><label>Nombre</label><input className="inp" value={f.name} onChange={set("name")} /></div>
        <div className="fld"><label>Email</label><input className="inp" type="email" value={f.email} onChange={set("email")} /></div>
      </div>
      {isBiz && <div className="row2">
        <div className="fld"><label>Negocio o actividad</label><input className="inp" value={f.business} onChange={set("business")} placeholder="Ej.: Fontanería Martín" /></div>
        <div className="fld"><label>Categoría</label><select className="inp" value={f.cat} onChange={set("cat")}><option value="">Elige una</option><optgroup label="Servicios">{VB_JOIN_SERVICES.map(c => <option key={c}>{c}</option>)}</optgroup><optgroup label="Locales">{VB_JOIN_LOCALES.map(c => <option key={c}>{c}</option>)}</optgroup><option>Otro</option></select></div>
      </div>}
      {isBiz && f.cat === "Otro" && <div className="fld"><label>Especifica la categoría</label><input className="inp" value={f.catOther} onChange={set("catOther")} placeholder="Ej.: Floristería" /></div>}
      <div className="fld"><label>Teléfono (opcional)</label><input className="inp" value={f.phone} onChange={set("phone")} /></div>
      <div className="fld"><label>Mensaje</label><textarea className="inp" value={f.message} onChange={set("message")} placeholder={isBiz ? "Qué ofreces, zona, horario, web o Instagram…" : "Escribe tu mensaje"}></textarea></div>
      <input type="text" value={f._honey} onChange={set("_honey")} style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <label className="check"><input type="checkbox" checked={f.ok} onChange={set("ok")} />Acepto que Valdebebas Life use estos datos solo para responder a mi mensaje.</label>
      {err && <div className="err">{err}</div>}
      <button className="btn" type="submit" disabled={st === "sending"}><Ic n="send" />{st === "sending" ? "Enviando…" : "Enviar mensaje"}</button>
    </form>
  );
}

function Contact({ user, onRegister }) {
  return (
    <>
      <section className="phead lime"><div className="wrap">
        <div className="eyebrow"><Ic n="mail" />Contacto</div>
        <h1>Escríbenos</h1>
        <p>Para negocios y profesionales que quieran aparecer en la web, y para cualquier sugerencia. También en <a href={"mailto:" + VB_EMAIL}>{VB_EMAIL}</a></p>
        {!user && <div className="hint" style={{ marginTop: 18, maxWidth: 640, alignItems: "center", flexWrap: "wrap" }}><Ic n="info" /><span style={{ flex: 1, minWidth: 220 }}>¿Eres vecino y quieres publicar en el tablón o votar? Eso no va por aquí: crea tu cuenta.</span><button className="btn sm" onClick={onRegister}><Ic n="person_add" />Crear cuenta</button></div>}
      </div></section>
      <section className="sec" style={{ paddingTop: 32 }}><div className="wrap contact">
        <div style={{ display: "grid", gap: 20, alignContent: "start" }}>
          <IgCard />
          <a className="panel mail" href={"mailto:" + VB_EMAIL}><span className="ico sky"><Ic n="mail" /></span><span><small>Email de contacto</small><b>{VB_EMAIL}</b></span><Ic n="arrow_outward" /></a>
        </div>
        <ContactForm />
      </div></section>
    </>
  );
}

function RecommendModal({ open, onClose, user }) {
  const blank = { what: "", cat: "", catOther: "", contact: "", why: "", name: "", email: "", ok: false, _honey: "" };
  const [f, setF] = useState(blank);
  const [st, setSt] = useState("idle");
  const [err, setErr] = useState("");
  useEffect(() => { if (open) { setF({ ...blank, name: user ? user.name : "", email: user ? user.email : "" }); setSt("idle"); setErr(""); } }, [open]);
  const set = k => e => setF({ ...f, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });
  async function send() {
    setErr("");
    if (!f.what.trim() || !f.cat || f.why.trim().length < 10) return setErr("Indica a quién recomiendas, la categoría y por qué.");
    if (f.cat === "Otro" && !f.catOther.trim()) return setErr("Especifica la categoría.");
    if (!f.name.trim() || !/\S+@\S+\.\S+/.test(f.email)) return setErr("Añade tu nombre y un email válido.");
    if (!f.ok) return setErr("Acepta la política de privacidad para enviar.");
    setSt("sending");
    const saved = await VBStore.solicitud({ tipo: VB_JOIN_LOCALES.includes(f.cat) ? "place" : "pro", nombre: f.what, categoria: f.cat === "Otro" ? "Otro: " + f.catOther : f.cat, contacto: f.contact, nota: f.why, origen: "recomendacion" });
    try {
      const r = await fetch("https://formsubmit.co/ajax/" + VB_EMAIL, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify({ _subject: "Recomendación vecinal: " + f.what, _template: "table", _captcha: "false", _honey: f._honey, Tipo: "Recomendación de un vecino", Recomendado: f.what, "Categoría": f.cat === "Otro" ? "Otro: " + f.catOther : f.cat, Contacto: f.contact, "Por qué": f.why, "Vecino": f.name, "Email vecino": f.email }) });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || j.success === "false" || j.success === false) throw new Error();
      setSt("sent");
    } catch (x) { if (saved) setSt("sent"); else { setSt("idle"); setErr("No se pudo enviar. Escríbenos a " + VB_EMAIL); } }
  }
  if (st === "sent") return (
    <Modal open={open} onClose={onClose} title="¡Gracias por tu recomendación!" footer={<button className="btn" onClick={onClose}>Cerrar</button>}>
      <p>La revisamos y, si todo está en orden, la añadimos a la web. Después, cuantas más recomendaciones tenga, más arriba aparecerá.</p>
    </Modal>
  );
  return (
    <Modal open={open} onClose={onClose} wide title="Recomendar un profesional o local" sub="¿Conoces a alguien bueno que no está? Cuéntanoslo: lo revisamos y lo añadimos."
      footer={<><button className="btn ghost" onClick={onClose}>Cancelar</button><button className="btn" onClick={send} disabled={st === "sending"}><Ic n="send" />{st === "sending" ? "Enviando…" : "Enviar recomendación"}</button></>}>
      <div className="row2">
        <div className="fld"><label>¿A quién recomiendas?</label><input className="inp" value={f.what} onChange={set("what")} placeholder="Ej.: Juan, electricista" /></div>
        <div className="fld"><label>Categoría</label><select className="inp" value={f.cat} onChange={set("cat")}><option value="">Elige una</option><optgroup label="Servicios">{VB_JOIN_SERVICES.map(c => <option key={c}>{c}</option>)}</optgroup><optgroup label="Locales">{VB_JOIN_LOCALES.map(c => <option key={c}>{c}</option>)}</optgroup><option>Otro</option></select></div>
      </div>
      {f.cat === "Otro" && <div className="fld"><label>Especifica la categoría</label><input className="inp" value={f.catOther} onChange={set("catOther")} /></div>}
      <div className="fld"><label>Teléfono, Instagram o web (si lo sabes)</label><input className="inp" value={f.contact} onChange={set("contact")} /></div>
      <div className="fld"><label>¿Por qué lo recomiendas?</label><textarea className="inp" value={f.why} onChange={set("why")} placeholder="Qué te hizo, cómo fue el trato, precio…"></textarea></div>
      {!user && <div className="row2">
        <div className="fld"><label>Tu nombre</label><input className="inp" value={f.name} onChange={set("name")} /></div>
        <div className="fld"><label>Tu email</label><input className="inp" type="email" value={f.email} onChange={set("email")} /><small>No se publica. Solo por si necesitamos confirmar algo.</small></div>
      </div>}
      <input type="text" value={f._honey} onChange={set("_honey")} style={{ display: "none" }} tabIndex={-1} autoComplete="off" />
      <label className="check"><input type="checkbox" checked={f.ok} onChange={set("ok")} />Acepto que Valdebebas Life use estos datos solo para gestionar esta recomendación.</label>
      {err && <div className="err">{err}</div>}
    </Modal>
  );
}

Object.assign(window, { Contact, FollowBand, IgCard, RecommendModal, VB_EMAIL, VB_IG });