// Valdebebas Life — Conoce vecinos, Podcast, FAQ (SEO/GEO), PWA install
const VB_TWC = { name: "Asociación Española TWC", nif: "G93978617" };
const VB_CIRCLES = [
  { id: "cultura", icon: "self_improvement", name: "Cultura, Aficiones y Bienestar", desc: "Lectura, intercambio de idiomas y talleres de autocuidado para sentirte mejor.", subs: ["Club de Lectura", "Intercambio de Idiomas", "Talleres de Autocuidado"] },
  { id: "deporte", icon: "sports_soccer", name: "Deporte y Actividad Física", desc: "Running, pádel, fútbol, yoga, ciclismo o entrenar al aire libre en el Parque Central.", subs: ["Running y Atletismo", "Pádel y Tenis", "Yoga y Pilates", "Ciclismo y Rutas"] },
  { id: "familia", icon: "child_care", name: "Familia, Crianza y Mascotas", desc: "Planes con niños, crianza, trueque de material infantil y paseos con mascotas.", subs: ["Papis y Mamis Valdebebas", "Planes y Ocio Infantil", "Mascotas y Paseos"] },
  { id: "ocio", icon: "wine_bar", name: "Gastronomía, Ocio y Quedadas", desc: "Tardeos, catas, cenas vecinales y nuevos rincones para el tiempo libre.", subs: ["Ruta de Cañas y Tapas", "Catas y Experiencias", "Juegos, Cine y Quedadas"] },
  { id: "networking", icon: "work", name: "Networking y Emprendimiento", desc: "Profesionales, autónomos y emprendedores del barrio que quieren conocerse, colaborar y crecer.", subs: ["Red Profesional", "Teletrabajo y Coworking", "Desayunos de Trabajo"] },
  { id: "barrio", icon: "handshake", name: "Barrio, Sostenibilidad y Voluntariado", desc: "Mejora urbana, ecología, economía circular y apoyo mutuo vecinal.", subs: ["Valdebebas Sostenible", "Iniciativas Solidarias", "Mejoras del Espacio Público"] },
];
const VB_FAQ = [
  ["¿Qué es Valdebebas Life?", "Valdebebas Life es la guía independiente de servicios y comunidad del barrio de Valdebebas (Hortaleza, Madrid). Reúne profesionales recomendados por vecinos, los mejores locales del barrio, un tablón vecinal y un espacio para conocer vecinos."],
  ["¿Cómo encuentro un fontanero, una limpiadora o un profesor particular en Valdebebas?", "En la sección Servicios. Los profesionales aparecen ordenados por el número de recomendaciones de vecinos de Valdebebas."],
  ["¿Necesito registrarme?", "No para consultar. La cuenta gratuita solo es necesaria para publicar en el tablón, proponer planes, recomendar y votar, y requiere confirmar que vives o trabajas en Valdebebas."],
  ["¿Quién está detrás de Valdebebas Life?", "Está impulsada por la Asociación Española TWC (NIF G93978617). No es un canal oficial de la Asociación de Vecinos de Valdebebas, la Junta de Compensación ni el Ayuntamiento de Madrid."],
  ["¿Cómo aparece mi negocio en Valdebebas Life?", "Escribe desde la sección Contacto o a valdebebaslife@gmail.com. Aparecer es gratuito: revisamos cada solicitud y, una vez dentro, el orden lo deciden las recomendaciones de los vecinos."],
];

async function vbSend(subject, fields) {
  const r = await fetch("https://formsubmit.co/ajax/" + VB_EMAIL, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: JSON.stringify({ _subject: subject, _template: "table", _captcha: "false", ...fields }) });
  const j = await r.json().catch(() => ({}));
  if (!r.ok || j.success === "false" || j.success === false) throw new Error("send");
}

function PodcastBlock() {
  const [f, setF] = useState({ name: "", email: "", interest: "Avisadme del lanzamiento", msg: "", 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 });
  async function submit(e) {
    e.preventDefault(); setErr("");
    if (!/\S+@\S+\.\S+/.test(f.email)) return setErr("Añade un email válido.");
    if (!f.ok) return setErr("Acepta la política de privacidad.");
    setSt("sending");
    try { await vbSend("Podcast Voces de Valdebebas: " + f.interest, { _honey: f._honey, Interés: f.interest, Nombre: f.name, Email: f.email, Mensaje: f.msg }); setSt("sent"); }
    catch (x) { setSt("idle"); setErr("No se pudo enviar. Escríbenos a " + VB_EMAIL); }
  }
  return (
    <section className="sec" id="podcast" aria-labelledby="podcast-h">
      <div className="wrap"><div className="pod">
        <div className="pod-t">
          <span className="pod-soon"><Ic n="schedule" />Próximamente</span>
          <div className="eyebrow" style={{ color: "var(--lime)" }}><Ic n="podcasts" />Podcast</div>
          <h2 id="podcast-h" className="pod-h">Voces de Valdebebas</h2>
          <p>Historias de vecinos, comercios y personas que hacen barrio. ¿Quieres enterarte del estreno o tienes algo que contar?</p>
        </div>
        {st === "sent" ? <div className="pod-f sent"><Ic n="mark_email_read" style={{ fontSize: 40, color: "var(--lime)" }} /><b>¡Apuntado!</b><span>Te escribiremos a {f.email}.</span></div> :
        <form className="pod-f" onSubmit={submit}>
          <div className="pod-seg" role="radiogroup" aria-label="Qué te interesa">{["Avisadme del lanzamiento", "Quiero participar"].map(o => <button type="button" key={o} role="radio" aria-checked={f.interest === o} className={f.interest === o ? "on" : ""} onClick={() => setF({ ...f, interest: o })}>{o}</button>)}</div>
          <div className="row2">
            <input className="inp" aria-label="Nombre" placeholder="Nombre (opcional)" value={f.name} onChange={set("name")} />
            <input className="inp" aria-label="Email" type="email" placeholder="Tu email" value={f.email} onChange={set("email")} />
          </div>
          {f.interest === "Quiero participar" && <textarea className="inp" aria-label="Tu historia" placeholder="Cuéntanos en dos líneas qué te gustaría contar" value={f.msg} onChange={set("msg")}></textarea>}
          <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 mi email solo para este podcast.</label>
          {err && <div className="err" style={{ color: "#FFD1C7" }}>{err}</div>}
          <button className="btn lime" type="submit" disabled={st === "sending"}><Ic n="notifications_active" />{st === "sending" ? "Enviando…" : "Apuntarme"}</button>
        </form>}
      </div></div>
    </section>
  );
}

function ProposalModal({ open, onClose, onSave }) {
  const [f, setF] = useState({ kind: "plan", title: "", body: "" });
  const [err, setErr] = useState("");
  useEffect(() => { if (open) { setF({ kind: "plan", title: "", body: "" }); setErr(""); } }, [open]);
  const set = k => e => setF({ ...f, [k]: e.target.value });
  const save = () => { if (f.title.trim().length < 6 || f.body.trim().length < 10) return setErr("Añade un título y una descripción un poco más completos."); onSave(f); };
  return (
    <Modal open={open} onClose={onClose} wide title="Proponer en Voz del Barrio" sub="Los vecinos votan las propuestas. Las más apoyadas se organizan entre todos."
      footer={<><button className="btn ghost" onClick={onClose}>Cancelar</button><button className="btn" onClick={save}><Ic n="campaign" />Publicar propuesta</button></>}>
      <div className="types">{[["plan", "celebration", "Un plan o actividad"], ["mejora", "construction", "Una mejora para el barrio"]].map(([id, ic, l]) => <button key={id} className={"type-opt" + (f.kind === id ? " on" : "")} onClick={() => setF({ ...f, kind: id })}><Ic n={ic} />{l}</button>)}</div>
      <div className="fld"><label>Título</label><input className="inp" value={f.title} onChange={set("title")} maxLength={90} placeholder={f.kind === "plan" ? "Ej.: Picnic vecinal en el Parque Felipe VI" : "Ej.: Más bancos con sombra en el bulevar"} /></div>
      <div className="fld"><label>Descripción</label><textarea className="inp" value={f.body} onChange={set("body")} placeholder="Qué propones, para quién y cómo lo harías."></textarea></div>
      {err && <div className="err">{err}</div>}
    </Modal>
  );
}

function Community({ user, requireAuth, flash, onRegister }) {
  const [twc0, setTwc] = useStored("vr3_twc", { circles: {}, moai: {}, props: [] });
  const twc = twcDefaults(twc0);
  const [circ, setCirc] = useState(() => { const c = window.__openCirc || null; window.__openCirc = null; return c; });
  useEffect(() => { const j = window.__jump; window.__jump = null; if (j) setTimeout(() => jump(j), 80); }, []);
  const openCirc = id => { setCirc(id); window.scrollTo({ top: 0 }); };
  const [prop, setProp] = useState(false);
  const me = user ? user.email : null;
  const myCircles = (me && twc.circles[me]) || [];
  const inMoai = me && twc.moai[me];
  const toggleCircle = c => requireAuth("Crea tu cuenta para unirte al círculo «" + c.name + "».", () => setTwc(t => {
    const e = window.__vrSess(); const cur = t.circles[e] || [];
    const has = cur.includes(c.id);
    if (!has) flash("Te has unido a " + c.name);
    const u = window.__vrUser && window.__vrUser();
    return { ...t, circles: { ...t.circles, [e]: has ? cur.filter(x => x !== c.id) : [...cur, c.id] }, names: { ...(t.names || {}), [e]: u ? u.name : "Vecino" } };
  }));
  const joinMoai = () => requireAuth("Crea tu cuenta para unirte a un moai.", () => { setTwc(t => ({ ...t, moai: { ...t.moai, [window.__vrSess()]: !t.moai[window.__vrSess()] } })); flash("¡Gracias! Te avisaremos cuando haya un moai con hueco"); });
  const openProp = () => requireAuth("Crea tu cuenta para proponer un plan o una mejora.", () => setProp(true));
  const saveProp = f => { setTwc(t => ({ ...t, props: [{ id: vbId(), ...f, title: f.title.trim(), body: f.body.trim(), author: user ? user.name : "", email: window.__vrSess(), ts: Date.now(), votes: [] }, ...t.props] })); setProp(false); flash("Propuesta publicada"); };
  const vote = p => requireAuth("Crea tu cuenta para votar propuestas.", () => setTwc(t => { const e = window.__vrSess(); return { ...t, props: t.props.map(x => x.id !== p.id ? x : { ...x, votes: x.votes.includes(e) ? x.votes.filter(v => v !== e) : [...x.votes, e] }) }; }));
  const props = [...twc.props].sort((a, b) => b.votes.length - a.votes.length || b.ts - a.ts);
  const jump = id => { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: "smooth" }); };
  const cObj = circ && VB_CIRCLES.find(x => x.id === circ);
  if (cObj) return <CircleDetail c={cObj} twc={twc} setTwc={setTwc} user={user} requireAuth={requireAuth} flash={flash} onBack={() => { setCirc(null); setTimeout(() => jump("circulos"), 50); }} />;
  return (
    <>
      <section className="phead lime"><div className="wrap">
        <div className="eyebrow"><Ic n="diversity_3" />Conoce vecinos</div>
        <h1>Conoce a tus vecinos de Valdebebas</h1>
        <p>Círculos para compartir aficiones y planes, Moais para tener un grupo de confianza estable, y Voz del Barrio para proponer mejoras.</p>
        <p style={{ fontSize: 14, marginTop: 6 }}>Un espacio impulsado por la Asociación Española TWC.</p>
        <div className="twc-nav">{[["circulos", "groups", "Círculos del barrio"], ["moais", "handshake", "Moais"], ["voz", "campaign", "Voz del Barrio"], ["podcast", "podcasts", "Podcast"]].map(([id, ic, l]) => <button key={id} onClick={() => jump(id)}><Ic n={ic} />{l}</button>)}</div>
        {!user && <div className="hint" style={{ marginTop: 18, maxWidth: 640, alignItems: "center", flexWrap: "wrap" }}><Ic n="info" /><span style={{ flex: 1, minWidth: 220 }}>Puedes mirar sin cuenta. Para unirte, proponer o votar, crea tu cuenta de vecino.</span><button className="btn sm" onClick={onRegister}><Ic n="person_add" />Crear cuenta</button></div>}
      </div></section>

      <section className="sec" aria-labelledby="cmp-h" style={{ paddingBottom: 0 }}><div className="wrap">
        <div className="sec-h"><div><h2 id="cmp-h">¿Círculo o Moai?</h2><p>Dos formas de conectar con tus vecinos, según lo que busques.</p></div></div>
        <div className="cmp">
          <button className="cmp-c green" onClick={() => jump("circulos")}>
            <span className="cmp-tag"><i></i>Círculos</span>
            <h3>Para compartir una afición o hacer un plan</h3>
            <ul><li><Ic n="groups" />Grupos temáticos y abiertos</li><li><Ic n="event" />Planes puntuales, sin compromiso</li><li><Ic n="login" />Entras y te sumas cuando quieras</li></ul>
            <span className="cmp-go">Ver círculos<Ic n="arrow_downward" /></span>
          </button>
          <button className="cmp-c sky" onClick={() => jump("moais")}>
            <span className="cmp-tag"><i></i>Moais</span>
            <h3>Para tener un grupo de confianza estable</h3>
            <ul><li><Ic n="diversity_1" />5 a 8 vecinos, siempre los mismos</li><li><Ic n="person_pin" />Con un anfitrión que coordina</li><li><Ic n="favorite" />Amistad y apoyo mutuo a largo plazo</li></ul>
            <span className="cmp-go">Ver moais<Ic n="arrow_downward" /></span>
          </button>
        </div>
      </div></section>

      <section className="sec" id="circulos" aria-labelledby="circ-h"><div className="wrap">
        <div className="sec-h"><div><h2 id="circ-h">Círculos del barrio</h2><p>Espacios temáticos y abiertos, organizados por subtemas. Entra en un círculo para ver sus quedadas, apuntarte o proponer la tuya, sin compromiso de asistencia.</p></div></div>
        <div className="circles">{VB_CIRCLES.map(c => { const on = myCircles.includes(c.id); const nM = circleMembers(twc, c.id).length; const nP = twc.plans.filter(p => p.circle === c.id && p.date >= todayStr()).length; return (
          <article key={c.id} className={"circle" + (on ? " on" : "")}>
            <span className="ico green"><Ic n={c.icon} /></span>
            <div><h3><button className="circle-ln" onClick={() => openCirc(c.id)}>{c.name}</button></h3><p>{c.desc}</p><div className="subs">{c.subs.map(s => <span key={s}>{s}</span>)}</div>
              <div className="cd-meta sm"><span><Ic n="group" />{nM}</span><span><Ic n="event" />{nP} {nP === 1 ? "quedada" : "quedadas"}</span></div></div>
            <div className="circle-a"><button className="btn sm" onClick={() => openCirc(c.id)}>Entrar<Ic n="arrow_forward" /></button><button className={"btn sm ghost"} onClick={() => toggleCircle(c)}><Ic n={on ? "check" : "add"} />{on ? "Miembro" : "Unirme"}</button></div>
          </article>); })}</div>
      </div></section>

      <section className="sec" id="moais" style={{ paddingTop: 0 }} aria-labelledby="moai-h"><div className="wrap"><div className="moai">
        <div>
          <div className="eyebrow sky"><Ic n="handshake" />Moais</div>
          <h2 id="moai-h">Un grupo pequeño de confianza</h2>
          <p>Grupos estables de 5 a 8 vecinos, coordinados por un anfitrión. No van de un tema concreto: el objetivo es crear un vínculo sincero y de apoyo mutuo a largo plazo. Un espacio seguro y recurrente para combatir la soledad y hacer amigos de verdad en el barrio.</p>
          <p style={{ fontSize: 14, color: "var(--muted)" }}>El nombre viene de Okinawa (Japón), donde los moais acompañan a sus miembros durante toda la vida. No es terapia: si necesitas ayuda profesional, te orientamos.</p>
        </div>
        <ol className="steps">
          <li><b>Un grupo fijo de 5 a 8 vecinos</b><span>Siempre los mismos, con un anfitrión que lo coordina.</span></li>
          <li><b>Os veis con regularidad</b><span>El mismo día cada semana o cada quince días, en persona.</span></li>
          <li><b>Lo que se habla, se queda en el moai</b><span>Las primeras sesiones, con preguntas para conoceros de verdad.</span></li>
        </ol>
        <button className={"btn " + (inMoai ? "ghost" : "sky")} onClick={joinMoai}><Ic n={inMoai ? "check" : "handshake"} />{inMoai ? "Ya estás en lista" : "Quiero unirme a un moai"}</button>
      </div></div></section>

      <section className="sec" id="voz" style={{ paddingTop: 0 }} aria-labelledby="voz-h"><div className="wrap">
        <div className="sec-h" style={{ alignItems: "end" }}><div><h2 id="voz-h">Voz del Barrio</h2><p>Propón un plan o una mejora para Valdebebas. Los vecinos votan y las propuestas más apoyadas se organizan.</p></div><button className="btn lime" onClick={openProp}><Ic n="add" />Proponer</button></div>
        <div className="posts">
          {!props.length && <div className="empty"><Ic n="campaign" style={{ fontSize: 40 }} /><b style={{ color: "var(--ink)" }}>Todavía no hay propuestas</b><button className="btn" onClick={openProp}><Ic n="add" />Haz la primera</button></div>}
          {props.map(p => { const on = me && p.votes.includes(me); return (
            <article key={p.id} className="prop">
              <button className={"vote" + (on ? " on" : "")} onClick={() => vote(p)} aria-label="Apoyar propuesta"><Ic n="arrow_upward" />{p.votes.length}</button>
              <div><div className="post-top"><span className={"pill " + (p.kind === "plan" ? "lime" : "sky")}>{p.kind === "plan" ? "Plan" : "Mejora"}</span></div><h3>{p.title}</h3><p>{p.body}</p><span className="post-meta"><span className="who">{p.author}</span><span><Ic n="schedule" />{ago(p.ts)}</span></span></div>
            </article>); })}
        </div>
        <p className="research"><Ic n="lock" />Si lo aceptas en el barómetro (es opcional), tu participación puede usarse de forma anónima y agregada para estudios sobre bienestar y la memoria de actividades de la Asociación. Nunca se publican datos personales.</p>
      </div></section>
      <PodcastBlock />
      <ProposalModal open={prop} onClose={() => setProp(false)} onSave={saveProp} />
    </>
  );
}

function FAQ() {
  return (
    <section className="sec" aria-labelledby="faq-h"><div className="wrap faq">
      <div className="sec-h"><div><h2 id="faq-h">Preguntas frecuentes</h2><p>Lo esencial sobre Valdebebas Life.</p></div></div>
      <div className="faq-l">{VB_FAQ.map(([q, a], i) => <details key={i}><summary>{q}<Ic n="expand_more" /></summary><p>{a}</p></details>)}</div>
    </div></section>
  );
}

function InstallBanner() {
  const [hidden, setHidden] = useStored("vr3_install_hidden", false);
  const [help, setHelp] = useState(false);
  const [evt, setEvt] = useState(null);
  const standalone = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone;
  const ios = /iphone|ipad|ipod/i.test(navigator.userAgent);
  useEffect(() => { const h = e => { e.preventDefault(); setEvt(e); }; window.addEventListener("beforeinstallprompt", h); return () => window.removeEventListener("beforeinstallprompt", h); }, []);
  if (hidden || standalone) return null;
  const install = async () => { if (evt) { evt.prompt(); await evt.userChoice.catch(() => {}); setEvt(null); setHidden(true); } else setHelp(true); };
  return (
    <>
      <div className="install" role="region" aria-label="Instalar app">
        <span className="install-ic"><Ic n="add_to_home_screen" /></span>
        <span className="install-t"><b>Valdebebas Life en 1 clic</b><small>Añádela a tu pantalla de inicio como una app.</small></span>
        <button className="btn sm lime" onClick={install}>{evt ? "Instalar" : "Cómo"}</button>
        <button className="install-x" onClick={() => setHidden(true)} aria-label="Cerrar aviso"><Ic n="close" /></button>
      </div>
      <Modal open={help} onClose={() => setHelp(false)} title="Añadir a la pantalla de inicio" sub="Así tendrás Valdebebas Life como una app, sin descargar nada."
        footer={<button className="btn" onClick={() => { setHelp(false); setHidden(true); }}>Entendido</button>}>
        <div className={"howto" + (ios ? " first" : "")}><h4><Ic n="phone_iphone" />iPhone · Safari</h4><ol><li>Pulsa el botón <b>Compartir</b> <Ic n="ios_share" /> en la barra inferior.</li><li>Elige <b>Añadir a pantalla de inicio</b>.</li><li>Pulsa <b>Añadir</b>.</li></ol></div>
        <div className="howto"><h4><Ic n="android" />Android · Chrome</h4><ol><li>Pulsa el menú <b>⋮</b> arriba a la derecha.</li><li>Elige <b>Instalar aplicación</b> o <b>Añadir a pantalla de inicio</b>.</li><li>Confirma con <b>Instalar</b>.</li></ol></div>
      </Modal>
    </>
  );
}

const VB_SEO = {
  home: ["Valdebebas Life · Guía de servicios y comunidad de Valdebebas (Madrid)", "Profesionales recomendados por vecinos, los mejores locales, tablón vecinal y comunidad en Valdebebas, Hortaleza, Madrid."],
  servicios: ["Servicios de confianza en Valdebebas · Manitas, limpieza, profesores | Valdebebas Life", "Fontaneros, electricistas, limpieza, clases particulares y más profesionales recomendados por vecinos de Valdebebas, Madrid."],
  mejor: ["Locales de Valdebebas · Los mejores restaurantes, cafeterías y tiendas | Valdebebas Life", "Rankings votados por vecinos: el mejor restaurante, café, gimnasio y locales de Valdebebas, Madrid."],
  tablon: ["Tablón vecinal de Valdebebas · Empleo, ayuda y compraventa | Valdebebas Life", "Ofertas de empleo, ayuda entre vecinos, compraventa y objetos perdidos en Valdebebas, Madrid."],
  comunidad: ["Conoce vecinos en Valdebebas · Círculos, Moais y Voz del Barrio | Valdebebas Life", "Conoce a tus vecinos de Valdebebas: círculos del barrio por afinidad, moais de apoyo mutuo y propuestas vecinales."],
  contacto: ["Contacto · Aparece en Valdebebas Life", "¿Tienes un negocio o eres profesional en Valdebebas? Aparece gratis en la guía del barrio. Sugerencias: valdebebaslife@gmail.com."],
};
function useSeo(page) {
  useEffect(() => {
    const [t, d] = VB_SEO[page] || VB_SEO.home;
    document.title = t;
    const m = document.querySelector('meta[name="description"]'); if (m) m.setAttribute("content", d);
  }, [page]);
}

Object.assign(window, { VB_CIRCLES, Community, PodcastBlock, FAQ, InstallBanner, useSeo, VB_TWC });