// Valdebebas Life — Inicio, Servicios, Lo mejor
const svcCat = id => VB_SERVICE_CATS.find(c => c.id === id) || {};
const bestCat = id => VB_BEST_CATS.find(c => c.id === id) || {};

function useSearchIndex() {
  return useMemo(() => [
    ...VB_SERVICE_CATS.map(c => ({ kind: "scat", id: c.id, name: c.label, sub: c.label, catLabel: "servicio profesional", tip: "", zone: "", icon: c.icon })),
    ...VB_BEST_CATS.map(c => ({ kind: "bcat", id: c.id, name: c.title, sub: c.label, catLabel: "mejor local restaurante", tip: "", zone: "", icon: c.icon })),
    ...vbPros().map(p => ({ kind: "pro", id: p.id, name: p.name, sub: svcCat(p.cat).label, catLabel: svcCat(p.cat).label, tip: p.tip, zone: p.zone, icon: svcCat(p.cat).icon, ref: p })),
    ...vbPlaces().map(p => ({ kind: "place", id: p.id, name: p.name, sub: bestCat(p.cat).label, catLabel: bestCat(p.cat).title, tip: p.quote, zone: "", icon: bestCat(p.cat).icon, ref: p })),
    ...VB_CIRCLES.map(c => ({ kind: "circle", id: c.id, name: c.name, sub: "Círculo del barrio", catLabel: "circulo quedada plan grupo conocer gente vecinos " + c.subs.join(" "), tip: c.desc, zone: "", icon: c.icon })),
    ...VB_CIRCLES.flatMap(c => c.subs.map(s => ({ kind: "csub", id: c.id, name: s, sub: c.name, catLabel: "quedada plan grupo " + c.name, tip: "", zone: "", icon: c.icon }))),
    { kind: "moai", id: "moai", name: "Moai · tu grupo de confianza", sub: "Grupos de 5 a 8 vecinos", catLabel: "moai amigos amistad soledad compañia conocer gente grupo apoyo nuevo en el barrio", tip: "", zone: "", icon: "handshake" },
  ], [window.__dirV]);
}

function HeroSearch({ goServ, goBest, openPro, goCirc }) {
  const idx = useSearchIndex();
  const [q, setQ] = useState("");
  const [open, setOpen] = useState(false);
  const ref = useRef();
  useEffect(() => {
    const h = e => ref.current && !ref.current.contains(e.target) && setOpen(false);
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, []);
  const res = q.trim().length > 1 ? vrSearch(q, idx).map(r => r.b) : [];
  const cats = res.filter(r => r.kind === "scat" || r.kind === "bcat").slice(0, 3);
  const pros = res.filter(r => r.kind === "pro").slice(0, 4);
  const places = res.filter(r => r.kind === "place").slice(0, 4);
  const comm = res.filter(r => r.kind === "circle" || r.kind === "csub" || r.kind === "moai").slice(0, 3);
  const pick = r => {
    setOpen(false);
    if (r.kind === "scat") goServ(r.id);
    else if (r.kind === "bcat") goBest(r.id);
    else if (r.kind === "pro") openPro(r.ref);
    else if (r.kind === "circle" || r.kind === "csub") goCirc(r.id);
    else if (r.kind === "moai") goCirc(null, "moais");
    else goBest(r.ref.cat);
  };
  const Row = ({ r, tone }) => (
    <button className="search-row" onClick={() => pick(r)}>
      <span className={"ico " + tone}><Ic n={r.icon} /></span>
      <span><b>{r.name}</b><small>{r.kind === "scat" ? "Ver todos los profesionales" : r.kind === "bcat" ? "Ver ranking de vecinos" : r.kind === "csub" ? "Quedadas en " + r.sub : r.sub}</small></span>
      {r.kind === "pro" && <span className="count">{r.ref.recs} recomiendan</span>}
      {r.kind === "place" && <span className="count">{r.ref.votes} votos</span>}
    </button>
  );
  const quick = [["fontanero", "plumbing"], ["profe de mates", "school"], ["limpieza", "cleaning_services"], ["mejor café", "local_cafe"], ["running", "directions_run", 1], ["pádel", "sports_tennis", 1], ["conocer gente", "diversity_3", 1]];
  return (
    <div className="search" ref={ref}>
      <form className="search-box" onSubmit={e => { e.preventDefault(); if (res[0]) pick(res[0]); }}>
        <Ic n="search" />
        <input value={q} onChange={e => { setQ(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} placeholder="Fontanero, clases de inglés, mejor brunch…" aria-label="Buscar en Valdebebas" />
        <button className="btn lime" type="submit"><Ic n="arrow_forward" /><span>Buscar</span></button>
      </form>
      {open && q.trim().length > 1 && (
        <div className="search-drop">
          {!res.length && <div className="search-empty">No encontramos «{q}». Prueba con otra palabra o <b>pide ayuda en el tablón</b>.</div>}
          {cats.length > 0 && <><div className="search-grp">Categorías</div>{cats.map(r => <Row key={r.kind + r.id} r={r} tone={r.kind === "bcat" ? "sky" : "green"} />)}</>}
          {pros.length > 0 && <><div className="search-grp">Servicios y profesionales</div>{pros.map(r => <Row key={r.id} r={r} tone="green" />)}</>}
          {places.length > 0 && <><div className="search-grp">Lo mejor del barrio</div>{places.map(r => <Row key={r.id} r={r} tone="sky" />)}</>}
          {comm.length > 0 && <><div className="search-grp">Conoce vecinos</div>{comm.map(r => <Row key={r.kind + r.name} r={r} tone="lime" />)}</>}
        </div>
      )}
      <div className="chips" style={{ marginTop: 16 }}>
        {quick.map(([t, i, c]) => <button key={t} className={"chip" + (c ? " chip-c" : "")} onClick={() => { setQ(t); setOpen(true); }}><Ic n={i} />{t}</button>)}
      </div>
    </div>
  );
}

function Home({ go, goServ, goBest, openPro, posts, openPost, openLegal, onPublish, user, onRegister }) {
  const goCirc = (id, anchor) => { window.__openCirc = id || null; window.__jump = anchor || null; go("comunidad"); };
  const [twcH] = useStored("vr3_twc", { plans: [] });
  const upcoming = id => (twcH.plans || []).filter(x => x.circle === id && x.date >= todayStr()).length;
  const typeOf = id => VB_POST_TYPES.find(t => t.id === id);
  return (
    <>
      <section className="hero">
        <div className="hero-blobs"><i></i><i></i><i></i></div>
        <div className="wrap"><div className="hero-in">
          <span className="hero-kicker"><Ic n="verified" fill />Recomendaciones reales de vecinos</span>
          <h1>Todo lo que buscas en <span className="hl">Valdebebas</span>, en un solo sitio.</h1>
          <p className="hero-lead">Encuentra profesionales de confianza y los mejores sitios del barrio, pide o ofrece ayuda y, sobre todo, conoce a tus vecinos en círculos y quedadas.</p>
          <HeroSearch goServ={goServ} goBest={goBest} openPro={openPro} goCirc={goCirc} />
        </div></div>
      </section>

      <div className="wrap">
        <div className="doors">
          <div className="door">
            <div className="door-h"><span className="ico lg green"><Ic n="handyman" /></span><div><div className="eyebrow">Servicios</div><h2>Profesionales de confianza</h2><p>Manitas, profes, limpieza, canguros… los que tus vecinos ya han probado.</p></div></div>
            <div className="tiles">{VB_SERVICE_CATS.slice(0, 9).map(c => <button key={c.id} className="tile" onClick={() => goServ(c.id)}><Ic n={c.icon} />{c.label}</button>)}</div>
            <div className="door-f"><small>{vbPros().length ? vbPros().length + " profesionales · " : ""}{VB_SERVICE_CATS.length} categorías</small><button className="btn" onClick={() => goServ("all")}>Ver todos los servicios<Ic n="arrow_forward" /></button></div>
          </div>
          <div className="door best">
            <div className="door-h"><span className="ico lg sky"><Ic n="star" fill /></span><div><div className="eyebrow sky">Locales</div><h2>Lo mejor del barrio</h2><p>El mejor restaurante, café, brunch o pizza de Valdebebas. Lo votan los vecinos.</p></div></div>
            <div className="tiles">{VB_BEST_CATS.map(c => <button key={c.id} className="tile" onClick={() => goBest(c.id)}><Ic n={c.icon} />{c.label}</button>)}<button className="tile" onClick={() => goBest(null)}><Ic n="leaderboard" />Todos los rankings</button></div>
            <div className="door-f"><small>Un voto por vecino y categoría</small><button className="btn sky" onClick={() => goBest(null)}>Ver rankings<Ic n="arrow_forward" /></button></div>
          </div>
        </div>
      </div>

      <section className="sec" aria-labelledby="hv-h" style={{ paddingBottom: 0 }}>
        <div className="wrap"><div className="hv">
          <div className="hv-t">
            <div className="eyebrow"><Ic n="diversity_3" />Conoce vecinos</div>
            <h2 id="hv-h">Más que una guía: haz amigos en el barrio</h2>
            <p>Únete a un <b>círculo</b> para compartir aficiones y apuntarte a quedadas sin compromiso, o entra en un <b>moai</b>: un grupo fijo de 5 a 8 vecinos para crear amistad de verdad.</p>
            <div className="hv-cta"><button className="btn" onClick={() => goCirc(null, "circulos")}><Ic n="groups" />Ver círculos</button><button className="btn ghost" onClick={() => goCirc(null, "moais")}><Ic n="handshake" />Qué es un moai</button></div>
          </div>
          <div className="hv-grid">
            {VB_CIRCLES.map(c => { const n = upcoming(c.id); return <button key={c.id} className="hv-c" onClick={() => goCirc(c.id)}><Ic n={c.icon} /><b>{c.name}</b><small>{n ? n + (n === 1 ? " quedada próxima" : " quedadas próximas") : c.subs.slice(0, 2).join(" · ")}</small></button>; })}
            <button className="hv-c moai" onClick={() => goCirc(null, "moais")}><Ic n="handshake" /><b>Moai · tu grupo de confianza</b><small>5 a 8 vecinos, siempre los mismos</small></button>
          </div>
        </div></div>
      </section>

      <section className="sec" style={{ paddingBottom: 0 }}>
        <div className="wrap">
          <div className="sec-h"><div><h2>¿Qué quieres hacer?</h2><p>Mirar es libre. Elige tu caso:</p></div></div>
          <div className="who">
            <div className="who-c">
              <span className="ico lg green"><Ic n="person_add" /></span>
              <div><div className="eyebrow">Soy vecino</div><h3>Crea tu cuenta gratis</h3><p>Para unirte a círculos y quedadas, publicar en el tablón, recomendar profesionales y votar lo mejor del barrio.</p></div>
              {user ? <span className="badge" style={{ alignSelf: "start" }}><Ic n="verified" fill />Ya tienes cuenta, {user.name.split(" ")[0]}</span> : <button className="btn" onClick={onRegister}><Ic n="person_add" />Crear cuenta</button>}
            </div>
            <div className="who-c biz">
              <span className="ico lg sky"><Ic n="storefront" /></span>
              <div><div className="eyebrow sky">Tengo un negocio o soy profesional</div><h3>Aparece en la web</h3><p>Cuéntanos qué haces. Revisamos tu solicitud y te añadimos gratis, sin necesidad de cuenta.</p></div>
              <button className="btn sky" onClick={() => go("contacto")}><Ic n="mail" />Contactar</button>
            </div>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap feed">
          <div className="panel">
            <div className="panel-h"><h3><Ic n="forum" style={{ color: "var(--green)" }} />Tablón vecinal</h3><button className="btn sm lime" onClick={onPublish}><Ic n="add" />Publicar</button></div>
            <div>{!posts.length && <p style={{ color: "var(--muted)", padding: "12px 0" }}>Todavía no hay anuncios. ¡Estrena el tablón!</p>}{posts.slice(0, 4).map(p => { const t = typeOf(p.type); return (
              <button key={p.id} className="post mini" onClick={() => openPost(p)}>
                <span className={"ico " + t.tone}><Ic n={t.icon} /></span>
                <span><span className="post-top"><span className={"pill " + t.tone}>{t.short}</span><small style={{ color: "var(--muted)" }}>{ago(p.ts)}</small></span><h3>{p.title}</h3></span>
              </button>); })}</div>
            <button className="btn ghost" onClick={() => go("tablon")}>Ir al tablón<Ic n="arrow_forward" /></button>
          </div>
        </div>
      </section>

      <PodcastBlock />
      <FollowBand go={go} />
      <section className="sec" style={{ paddingTop: 0 }}>
        <div className="wrap trust">
          <div className="trust-i"><span className="ico green"><Ic n="how_to_reg" /></span><div><b>Solo vecinos</b><p>Recomiendan y votan vecinos registrados de Valdebebas.</p></div></div>
          <div className="trust-i"><span className="ico sky"><Ic n="eco" /></span><div><b>Recomendaciones orgánicas</b><p>El orden lo deciden los vecinos con sus recomendaciones y votos.</p></div></div>
          <div className="trust-i"><span className="ico lime"><Ic n="shield" /></span><div><b>Moderado</b><p>Normas claras y anuncios que caducan solos.</p></div></div>
        </div>
      </section>
      <FAQ />
    </>
  );
}

function ProCard({ p, isRec, onRec, onContact }) {
  const c = svcCat(p.cat);
  return (
    <article className="pro">
      <div className="pro-h"><span className="ico green"><Ic n={c.icon} /></span><div><h3>{p.name}</h3><small>{c.label}</small></div></div>
      <p className="pro-q">{p.tip}</p>
      <div className="recs"><Ic n="thumb_up" fill />{p.recs + (isRec ? 1 : 0)} vecinos lo recomiendan</div>
      <div className="pro-meta"><span><Ic n="location_on" />{p.zone}</span></div>
      <div className="pro-f">
        <button className="btn sm" onClick={() => onContact(p)}><Ic n="call" />Contactar</button>
        <button className={"btn sm ghost rec-btn" + (isRec ? " on" : "")} onClick={() => onRec(p)}><Ic n="thumb_up" fill={isRec} />{isRec ? "Recomendado" : "Lo recomiendo"}</button>
      </div>
    </article>
  );
}

function Services({ cat, setCat, recs, onRec, onContact, onPublish, onJoin, onRecommend, go }) {
  const [q, setQ] = useState("");
  let list = vbPros().filter(p => cat === "all" || p.cat === cat);
  if (q.trim().length > 1) {
    const hits = vrSearch(q, list.map(p => ({ ...p, sub: svcCat(p.cat).label, catLabel: svcCat(p.cat).label, ref: p })));
    list = hits.map(h => h.b.ref);
  } else list = [...list].sort((a, b) => b.recs - a.recs);
  const c = svcCat(cat);
  return (
    <>
      <section className="phead lime"><div className="wrap">
        <div className="phead-row">
          <div><div className="eyebrow"><Ic n="handyman" />Servicios</div><h1>{cat === "all" ? "Profesionales que recomienda el barrio" : c.label}</h1><p>Ordenados por número de recomendaciones de vecinos. Contacta directamente, sin intermediarios.</p></div>
          <div className="inline-search"><Ic n="search" /><input value={q} onChange={e => setQ(e.target.value)} placeholder="Buscar servicio o nombre" /></div>
        </div>
        <div className="fbar">
          <button className={"fchip" + (cat === "all" ? " on" : "")} onClick={() => setCat("all")}><Ic n="apps" />Todos</button>
          {VB_SERVICE_CATS.map(x => <button key={x.id} className={"fchip" + (cat === x.id ? " on" : "")} onClick={() => setCat(x.id)}><Ic n={x.icon} />{x.label}</button>)}
        </div>
      </div></section>
      <section className="sec" style={{ paddingTop: 32 }}><div className="wrap">
        {list.length ? <div className="grid">{list.map(p => <ProCard key={p.id} p={p} isRec={recs.includes(p.id)} onRec={onRec} onContact={onContact} />)}</div>
          : <div className="empty"><Ic n="search_off" style={{ fontSize: 40 }} /><b style={{ color: "var(--ink)" }}>Aún no hay recomendaciones aquí</b><p>Pregunta en el tablón y los vecinos te dirán a quién llamar.</p><button className="btn" onClick={onPublish}><Ic n="add" />Pedir recomendación</button></div>}
        <div className="add-band">
          <div className="add-h"><h3>¿Falta alguien?</h3><p>Aparecer es gratis. Revisamos cada propuesta antes de añadirla y, una vez dentro, el orden lo deciden las recomendaciones de los vecinos.</p></div>
          <div className="add-opts">
            <div className="add-o"><span className="ico green"><Ic n="thumb_up" /></span><div><b>Soy vecino y conozco a alguien bueno</b><small>Cuéntanos a quién recomiendas.</small></div><button className="btn lime sm" onClick={onRecommend}>Recomendar</button></div>
            <div className="add-o"><span className="ico sky"><Ic n="storefront" /></span><div><b>Soy profesional o tengo un negocio</b><small>Envíanos tu solicitud.</small></div><button className="btn sky sm" onClick={onJoin}>Quiero aparecer</button></div>
          </div>
        </div>
              <p className="research" style={{ marginTop: 24 }}><Ic n="info" />Valdebebas Life es una plataforma informativa de recomendación vecinal. La Asociación Española TWC no actúa como intermediaria ni asume ninguna responsabilidad sobre la contratación, calidad, ejecución, tarifas o resultados de los servicios prestados por los profesionales y comercios incluidos en el directorio.</p>
      </div></section>
    </>
  );
}

function RankCard({ c, votes, myVote, onVote, highlight, onRecommend }) {
  const items = vbPlaces().filter(p => p.cat === c.id).map(p => ({ ...p, v: p.votes + (myVote === p.id ? 1 : 0) })).sort((a, b) => b.v - a.v);
  const total = items.reduce((s, p) => s + p.v, 0);
  const [top, ...rest] = items;
  const pct = p => total ? Math.round((p.v / total) * 100) : 0;
  const VoteBtn = ({ p }) => <button className={"vote" + (myVote === p.id ? " on" : "")} onClick={() => onVote(c.id, p.id)} aria-label={"Votar " + p.name}><Ic n="favorite" fill={myVote === p.id} />{p.v}</button>;
  if (!top) return (
    <article className="rank" id={"rank-" + c.id} style={highlight ? { boxShadow: "0 0 0 3px var(--sky)" } : null}>
      <div className="rank-h"><span className="ico sky"><Ic n={c.icon} /></span><div><h3>{c.title}</h3><small>Sin candidatos todavía</small></div></div>
      <div className="rank-top" style={{ marginBottom: 20 }}><p style={{ color: "var(--muted)" }}>Pronto abriremos la votación. ¿Tienes un favorito?</p><button className="btn sm sky" style={{ justifySelf: "start" }} onClick={onRecommend}><Ic n="thumb_up" />Recomendar un local</button></div>
    </article>
  );
  return (
    <article className="rank" id={"rank-" + c.id} style={highlight ? { boxShadow: "0 0 0 3px var(--sky)" } : null}>
      <div className="rank-h"><span className="ico sky"><Ic n={c.icon} /></span><div><h3>{c.title}</h3><small>{total} votos de vecinos</small></div></div>
      <div className="rank-top">
        <span className="pos">1</span>
        <b>{top.name}</b><p>“{top.quote}”</p>
        <div className="vote-row"><div style={{ flex: 1 }}><div className="bar"><i style={{ width: pct(top) + "%" }}></i></div></div><VoteBtn p={top} /></div>
      </div>
      <div className="rank-list">{rest.map((p, i) => (
        <div className="rrow" key={p.id}><span className="n">{i + 2}</span><div><b>{p.name}</b><div className="bar"><i style={{ width: pct(p) + "%" }}></i></div></div><VoteBtn p={p} /></div>
      ))}</div>
      <div className="rank-f">{myVote ? "Ya has votado en esta categoría. Puedes cambiar tu voto." : "Toca el corazón para votar. Un voto por categoría."}</div>
    </article>
  );
}

function Best({ focus, setFocus, votes, onVote, onRecommend, go }) {
  useEffect(() => {
    if (!focus) return;
    const el = document.getElementById("rank-" + focus);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 110, behavior: "smooth" });
  }, [focus]);
  return (
    <>
      <section className="phead sky"><div className="wrap">
        <div className="eyebrow sky"><Ic n="storefront" />Locales del barrio</div>
        <h1>Los mejores locales de Valdebebas</h1>
        <p>Rankings votados por vecinos registrados. Un voto por categoría; puedes cambiarlo cuando quieras.</p>
        <div className="fbar">
          <button className={"fchip sky" + (!focus ? " on" : "")} onClick={() => { setFocus(null); window.scrollTo({ top: 0, behavior: "smooth" }); }}><Ic n="leaderboard" />Todos</button>
          {VB_BEST_CATS.map(c => <button key={c.id} className={"fchip sky" + (focus === c.id ? " on" : "")} onClick={() => setFocus(c.id)}><Ic n={c.icon} />{c.label}</button>)}
        </div>
      </div></section>
      <section className="sec" style={{ paddingTop: 32 }}><div className="wrap rank-grid">
        {VB_BEST_CATS.map(c => <RankCard key={c.id} c={c} myVote={votes[c.id]} onVote={onVote} highlight={focus === c.id} onRecommend={onRecommend} />)}
      </div></section>
    </>
  );
}

function ContactModal({ pro, onClose }) {
  if (!pro) return null;
  const c = svcCat(pro.cat);
  const tel = pro.phone.replace(/\s/g, "");
  return (
    <Modal open onClose={onClose} title={pro.name} sub={c.label + " · " + pro.zone}
      footer={<><a className="btn ghost" href={"tel:+34" + tel}><Ic n="call" />Llamar</a><a className="btn" href={"https://wa.me/34" + tel} target="_blank" rel="noopener"><Ic n="chat" />WhatsApp</a></>}>
      <p className="pro-q">{pro.tip}</p>
      <div className="detail-grid"><span><Ic n="thumb_up" />{pro.recs} recomendaciones</span><span><Ic n="call" />{pro.phone}</span></div>
      <div className="hint"><Ic n="lightbulb" /><span>Di que vienes de Valdebebas Life. Y si te va bien, vuelve y recomiéndalo: así ayudas a otros vecinos.</span></div>
    </Modal>
  );
}

Object.assign(window, { Home, Services, Best, ContactModal, svcCat, bestCat });