/* ============================================================
   COMMUNITY — client social hub: AI chat, events, rewards, feed
   ============================================================ */
function PonyAI() {
  const t = useT(); const { lang } = useLang();
  const greeting = t("Hey! I'm Pony AI 💗 Ask me anything — events, tables, dress code, bottle service, hours…", "¡Hola! Soy Pony AI 💗 Pregúntame lo que sea — eventos, mesas, código de vestimenta, botellas, horarios…");
  const [msgs, setMsgs] = useState([{ role: "ai", text: greeting }]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const boxRef = useRef(null);
  useEffect(() => { if (boxRef.current) boxRef.current.scrollTop = boxRef.current.scrollHeight; }, [msgs, loading]);

  const SYS = "You are Pony AI, the friendly concierge for Pink Pony Club — a high-end gentlemen's club & nightclub in Doral, Miami (7971 NW 33rd St). Hours: Monday–Friday 12PM–5AM and Saturday–Sunday 8PM–5AM. Free lunch Monday–Friday (you only pay your entry). Dancers pay $0 house fee. We show every World Cup match live on 20+ 4K screens. Strictly 21+ with valid photo ID. Weekly nights: Mon Industry Mondays (DJ Karino, $150++ bottles), Tue Cariñosa Tuesdays (DJ Stylez, $150++ bottles), Wed Saint & Sinners (DJ Vega, $150++ bottles), Thu Seductive Thursdays (DJ Karino, $200++ bottles), Fri Desacato Fridays (DJ Vega + live timbal), Sat Pink Make Me Do It (DJ Stylez + live timbal, our biggest night), Sun Fuera de Órbita (DJ Karino, $200++ bottles). Table pricing: regular $150++ (Mon–Wed) / $200++ (Thu–Sun); VIP & stage tables $500++. We offer bottle service, a hookah lounge, a chef-driven kitchen, signature cocktails, sports watch parties (soccer, UFC, NBA on 20+ 4K screens), live performances, a membership waitlist (no public pricing yet), private events and full venue rental. Phone/WhatsApp +1 (786) 503-2909. Reply concisely (2-4 sentences), confident and party-forward, in the SAME language as the user. To book, point them to the Reserve page or WhatsApp.";

  const send = async (q) => {
    q = (q || input).trim(); if (!q || loading) return;
    setMsgs((m) => [...m, { role: "user", text: q }]); setInput(""); setLoading(true);
    try {
      const reply = await window.claude.complete({ messages: [{ role: "user", content: SYS + "\n\nUser question: " + q }] });
      setMsgs((m) => [...m, { role: "ai", text: reply || "…" }]);
    } catch (e) {
      setMsgs((m) => [...m, { role: "ai", text: t("I'm having trouble right now — message our team on WhatsApp +1 (786) 503-2909.", "Tengo problemas ahora — escríbenos por WhatsApp +1 (786) 503-2909.") }]);
    }
    setLoading(false);
  };
  const chips = [t("What's on this weekend?", "¿Qué hay este finde?"), t("How much is a VIP table?", "¿Cuánto cuesta una mesa VIP?"), t("What's the dress code?", "¿Cuál es el dress code?")];

  return (
    <div className="rounded-3xl border border-white/12 bg-card overflow-hidden">
      <div className="flex items-center gap-3 px-5 py-4 border-b border-white/10 bg-gradient-to-r from-coral/15 to-transparent">
        <div className="w-10 h-10 rounded-full bg-coral/20 border border-coral flex items-center justify-center"><Icon name="sparkles" className="w-5 h-5 text-coral" /></div>
        <div><div className="font-black uppercase tracking-wide text-sm">Pony AI</div><div className="text-[11px] text-white/45 flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-green-400 pulse-dot"></span>{t("Online now", "En línea")}</div></div>
      </div>
      <div ref={boxRef} className="h-72 overflow-y-auto p-5 space-y-3">
        {msgs.map((m, i) => (
          <div key={i} className={"flex " + (m.role === "user" ? "justify-end" : "justify-start")}>
            <div className={"max-w-[82%] px-4 py-2.5 rounded-2xl text-sm leading-relaxed " + (m.role === "user" ? "bg-coral text-white rounded-br-sm" : "bg-white/8 text-white/85 rounded-bl-sm")}>{m.text}</div>
          </div>
        ))}
        {loading && <div className="flex justify-start"><div className="bg-white/8 px-4 py-3 rounded-2xl rounded-bl-sm flex gap-1"><span className="w-1.5 h-1.5 rounded-full bg-white/50 pulse-dot"></span><span className="w-1.5 h-1.5 rounded-full bg-white/50 pulse-dot" style={{ animationDelay: ".2s" }}></span><span className="w-1.5 h-1.5 rounded-full bg-white/50 pulse-dot" style={{ animationDelay: ".4s" }}></span></div></div>}
      </div>
      <div className="px-5 pb-3 flex flex-wrap gap-2">{chips.map((c, i) => <button key={i} onClick={() => send(c)} className="text-[11px] px-3 py-1.5 rounded-full border border-white/15 text-white/65 hover:border-coral hover:text-white transition-colors">{c}</button>)}</div>
      <form onSubmit={(e) => { e.preventDefault(); send(); }} className="flex items-center gap-2 p-3 border-t border-white/10">
        <input value={input} onChange={(e) => setInput(e.target.value)} placeholder={t("Ask Pony AI…", "Pregúntale a Pony AI…")} className="flex-1 bg-ink border border-white/12 rounded-full px-4 py-3 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35" />
        <button type="submit" disabled={loading} className="w-11 h-11 rounded-full bg-coral hover:bg-coral-deep text-white flex items-center justify-center shrink-0 disabled:opacity-50"><Icon name="arrow-up" className="w-5 h-5" /></button>
      </form>
    </div>
  );
}

function CommunityPage({ go }) {
  const t = useT(); const { lang } = useLang();
  const { SOCIAL_POSTS, PROMOS, SPECIAL_EVENTS, PERFORMANCES } = window.PP;
  const [claimed, setClaimed] = useState({});
  const [likes, setLikes] = useState({});
  useReveal();
  const upcoming = [...SPECIAL_EVENTS.slice(0, 3), ...PERFORMANCES.slice(0, 2)];

  return (
    <div className="pt-28 md:pt-32 pb-24">
      <div className="container">
        <div className="reveal max-w-2xl mb-10">
          <Eyebrow num="">{t("The Community", "La Comunidad")}</Eyebrow>
          <h1 className="text-5xl md:text-7xl font-black uppercase leading-[0.9] mt-4 mb-4">{t(<>The <span className="serif-it font-normal text-coral">Pony Club</span></>, <>El <span className="serif-it font-normal text-coral">Pony Club</span></>)}</h1>
          <p className="text-white/60 text-lg">{t("Your feed, your rewards, your concierge. Everything Pink Pony, in one place.", "Tu feed, tus recompensas, tu concierge. Todo Pink Pony, en un solo lugar.")}</p>
        </div>

        <div className="grid lg:grid-cols-12 gap-8 items-start">
          {/* main column */}
          <div className="lg:col-span-8 space-y-12">
            {/* AI chat */}
            <div className="reveal"><PonyAI /></div>

            {/* upcoming events */}
            <div className="reveal">
              <div className="flex items-center justify-between mb-5"><h2 className="text-2xl font-black uppercase">{t("Upcoming", "Próximos")}</h2><button onClick={() => go("events")} className="text-coral text-[12px] font-bold uppercase tracking-wider hover:text-coral-deep">{t("See all", "Ver todo")} →</button></div>
              <div className="flex gap-4 overflow-x-auto pb-3 -mx-1 px-1">
                {upcoming.map((e, i) => (
                  <div key={i} className="shrink-0 w-60 rounded-2xl overflow-hidden border border-white/10 bg-card">
                    <div className="relative h-32"><Photo src={window.PP.SRC(e.img, 500, 300)} alt={e.name} className="absolute inset-0 w-full h-full" imgClass="object-cover" style={{ filter: "brightness(.75)" }} /><div className="absolute inset-0 bg-gradient-to-t from-card to-transparent"></div></div>
                    <div className="p-4"><div className="label text-coral text-[10px] mb-1">{L(e.date, lang)}</div><div className="font-bold text-sm leading-tight mb-3">{e.name}</div><button onClick={() => go("reserve")} className="text-[11px] font-bold uppercase tracking-wider text-white/70 hover:text-white flex items-center gap-1">{t("RSVP", "RSVP")}<Icon name="arrow-right" className="w-3 h-3" /></button></div>
                  </div>
                ))}
              </div>
            </div>

            {/* social feed */}
            <div className="reveal">
              <div className="flex items-center justify-between mb-5"><h2 className="text-2xl font-black uppercase">{t("From the 'gram", "Del 'gram")}</h2><a href="#" onClick={(e) => e.preventDefault()} className="text-coral text-[12px] font-bold uppercase tracking-wider flex items-center gap-1.5"><Icon name="camera" className="w-4 h-4" />@clubpinkpony</a></div>
              <div className="grid sm:grid-cols-2 gap-4">
                {SOCIAL_POSTS.map((p, i) => {
                  const liked = likes[i]; const n = p.likes + (liked ? 1 : 0);
                  return (
                    <div key={i} className="rounded-2xl overflow-hidden border border-white/10 bg-card">
                      <div className="relative h-56"><Photo src={window.PP.SRC(p.img, 700, 500)} alt="post" className="absolute inset-0 w-full h-full" imgClass="object-cover" /></div>
                      <div className="p-4">
                        <div className="flex items-center gap-4 mb-2">
                          <button onClick={() => setLikes((l) => ({ ...l, [i]: !l[i] }))} className={"flex items-center gap-1.5 text-sm " + (liked ? "text-coral" : "text-white/60 hover:text-white")}><Icon name="heart" className="w-5 h-5" />{n.toLocaleString()}</button>
                          <span className="flex items-center gap-1.5 text-white/60 text-sm"><Icon name="message-circle" className="w-5 h-5" /></span>
                          <span className="ml-auto text-white/35 text-xs">{L(p.when, lang)}</span>
                        </div>
                        <p className="text-white/75 text-sm">{L(p.cap, lang)}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* rewards rail */}
          <div className="lg:col-span-4 reveal" data-d="1">
            <div className="lg:sticky lg:top-28">
              <div className="flex items-center gap-2 mb-5"><Icon name="gift" className="w-5 h-5 text-coral" /><h2 className="text-2xl font-black uppercase">{t("Rewards & Gifts", "Premios y Regalos")}</h2></div>
              <div className="space-y-3">
                {PROMOS.map((p) => {
                  const done = claimed[p.id];
                  return (
                    <div key={p.id} className="rounded-2xl border border-white/12 bg-card p-4">
                      <div className="flex items-start gap-3 mb-3">
                        <div className="w-10 h-10 rounded-xl bg-coral/12 border border-coral/30 flex items-center justify-center shrink-0"><Icon name={p.icon} className="w-5 h-5 text-coral" /></div>
                        <div className="flex-1 min-w-0"><div className="font-bold text-sm leading-tight">{L(p.title, lang)}</div><div className="text-white/50 text-xs mt-0.5">{L(p.sub, lang)}</div></div>
                      </div>
                      <div className="flex items-center justify-between gap-2">
                        <span className="text-[10px] text-white/40 uppercase tracking-wider">{L(p.expires, lang)}</span>
                        {done ? (
                          <span className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider text-green-400"><Icon name="check" className="w-3.5 h-3.5" />{t("Claimed", "Reclamado")}</span>
                        ) : (
                          <button onClick={() => setClaimed((c) => ({ ...c, [p.id]: true }))} className="px-4 py-2 rounded-full bg-coral hover:bg-coral-deep text-white text-[11px] font-bold uppercase tracking-wider transition-colors">{t("Claim", "Reclamar")}</button>
                        )}
                      </div>
                      {done && <div className="mt-3 text-center py-2 rounded-lg border border-dashed border-coral/40 bg-coral/5 font-mono text-coral text-sm tracking-widest">{p.code}</div>}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CommunityPage });