/* Home + Events pages */
const { useState: useStateP1 } = React;

function HomePage({ go, onRegister }) {
  useReveal();
  const next = EVENTS[0];
  return (
    <main>
      {/* HERO */}
      <section style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0 }}>
          <video autoPlay muted loop playsInline poster="img/mehfil-diwan.jpg"
                 onCanPlay={(e) => { e.currentTarget.play().catch(() => {}); }}
                 ref={(el) => { if (el) { el.play().catch(() => {}); } }}
                 style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}>
            <source src="img/hero.mp4" type="video/mp4" />
          </video>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(21,16,11,0.46) 0%, rgba(21,16,11,0.24) 38%, rgba(21,16,11,0.78) 100%)" }}></div>
          <div className="jali" style={{ position: "absolute", inset: 0, opacity: 0.05 }}></div>
        </div>
        <div className="shell-wide" style={{ position: "relative", paddingBottom: "clamp(48px,8vh,96px)", paddingTop: 140, color: "var(--paper)", width: "100%" }}>
          <div className="eyebrow hero-fade" style={{ color: "var(--gold)", marginBottom: 26 }}>A cultural community · Gurugram · Delhi · NCR</div>
          <h1 className="display hero-fade" data-s="1" style={{ maxWidth: 14 + "ch", marginBottom: 30 }}>
            Where Words<br /><span style={{ fontStyle: "italic", fontWeight: 400 }}>Meet</span> People.
          </h1>
          <p className="hero-fade" data-s="2" style={{ fontSize: "clamp(1.1rem,1.6vw,1.4rem)", maxWidth: 540, color: "rgba(244,239,230,0.86)", lineHeight: 1.5, marginBottom: 40 }}>
            A community built around poetry, storytelling, culture and meaningful conversations — for everyone seeking something realer than another night out.
          </p>
          <div className="hero-fade" data-s="3" style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
            <button className="btn btn-light" onClick={() => onRegister(next)}>Attend next mehfil <Icon.arrow className="arr" /></button>
            <button className="btn btn-ghost" style={{ color: "var(--paper)", borderColor: "rgba(244,239,230,0.4)" }} onClick={() => go("membership")}>Join community</button>
          </div>
        </div>
        <div className="hero-fade" data-s="3" style={{ position: "absolute", right: "var(--gut)", bottom: "clamp(48px,8vh,96px)", textAlign: "right", color: "rgba(244,239,230,0.8)" }}>
          <div className="eyebrow" style={{ color: "var(--gold)", marginBottom: 8 }}>Next gathering</div>
          <div className="serif" style={{ fontSize: "1.4rem", lineHeight: 1.2 }}>{next.date} · {next.city}</div>
        </div>
      </section>

      {/* MARQUEE STRIP */}
      <div style={{ background: "var(--espresso)", color: "var(--paper)", overflow: "hidden", padding: "16px 0", whiteSpace: "nowrap" }}>
        <div className="marquee">
          {Array(2).fill(0).map((_, k) => (
            <span key={k} style={{ display: "inline-flex", gap: 40, paddingLeft: 40 }}>
              {["Poetry", "Open mics", "Storytelling", "Ghazal", "Conversation", "Salons", "Spoken word", "Belonging"].map((w, i) => (
                <span key={i} className="serif-it" style={{ fontFamily: "var(--serif)", fontSize: "1.3rem", color: i % 2 ? "var(--gold)" : "rgba(244,239,230,0.85)" }}>{w} ·</span>
              ))}
            </span>
          ))}
        </div>
      </div>

      {/* MANIFESTO */}
      <section className="section" style={{ position: "relative", overflow: "hidden" }}>
        <div className="jali" style={{ position: "absolute", inset: 0, opacity: 0.06 }}></div>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 70% at 50% 50%, var(--ivory) 38%, transparent 100%)" }}></div>
        <div className="shell-narrow center" style={{ position: "relative" }}>
          <div className="reveal" style={{ display: "flex", justifyContent: "center", marginBottom: 30 }}>
            <ArchTop w={300} style={{ opacity: 0.9 }} />
          </div>
          <p className="reveal eyebrow" style={{ justifyContent: "center", marginBottom: 28 }}>The SEM belief</p>
          <p className="reveal serif" style={{ fontSize: "clamp(2.2rem,5vw,4rem)", lineHeight: 1.16, fontWeight: 500, marginBottom: 28 }}>
            We are <span className="serif-it" style={{ color: "var(--gold-deep)" }}>not</span> an event company.
          </p>
          <p className="reveal lede" data-d="1" style={{ fontSize: "clamp(1.25rem,2.2vw,1.7rem)", lineHeight: 1.5, maxWidth: "40ch", margin: "0 auto" }}>
            We are a room that goes quiet when someone reads aloud — a community that gathers through poetry, stories, and the kind of conversation you can't have over a screen.
          </p>
          <div className="reveal" data-d="2" style={{ display: "flex", justifyContent: "center", margin: "36px 0 28px" }}>
            <Ornament width={260} />
          </div>
          <div className="reveal" data-d="2">
            <button className="btn-text" onClick={() => go("about")}>Our story <Icon.arrow /></button>
          </div>
        </div>
      </section>

      {/* NEXT EVENTS */}
      <section className="section bg-paper">
        <div className="shell-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20, marginBottom: 56 }}>
            <SectionHead eyebrow="Upcoming" title="The next few evenings" />
            <button className="reveal btn-text" onClick={() => go("events")}>All events <Icon.arrow /></button>
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))" }}>
            {EVENTS.slice(0, 3).map((ev, i) => <EventCard key={ev.id} ev={ev} onRegister={onRegister} d={i + 1} />)}
          </div>
        </div>
      </section>

      {/* POETS PREVIEW */}
      <section className="section">
        <div className="shell-wide">
          <SectionHead eyebrow="The voices" title="Poets who hold the room" lede="Performers and writers from across the NCR — classical ghazal to raw spoken word." max={680} />
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(220px,1fr))", marginTop: 56 }}>
            {POETS.slice(0, 4).map((p, i) => (
              <div key={p.id} className="reveal" data-d={i + 1} onClick={() => go("poets")} style={{ cursor: "pointer" }}>
                <Ph pic={p.pic} alt={p.name} ratio="3/4" className="poet-img" />
                <h3 className="h-sm" style={{ marginTop: 18 }}>{p.name}</h3>
                <div className="muted" style={{ fontSize: "0.86rem", marginTop: 4 }}>{p.craft}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIAL */}
      <section className="section bg-ink" style={{ position: "relative", overflow: "hidden" }}>
        <div className="jali-dark" style={{ position: "absolute", inset: 0, opacity: 0.06 }}></div>
        <div className="shell-narrow center" style={{ position: "relative" }}>
          <div className="reveal" style={{ color: "var(--gold)", display: "flex", justifyContent: "center", marginBottom: 24 }}><Icon.quote /></div>
          <p className="reveal serif" style={{ fontSize: "clamp(1.6rem,3.2vw,2.6rem)", lineHeight: 1.34, fontWeight: 400 }}>
            “{TESTIMONIALS[0].quote}”
          </p>
          <div className="reveal" data-d="1" style={{ marginTop: 32, color: "rgba(244,239,230,0.7)" }}>
            <strong style={{ color: "var(--paper)", fontWeight: 600 }}>{TESTIMONIALS[0].name}</strong> · {TESTIMONIALS[0].role}
          </div>
        </div>
      </section>

      {/* JOURNAL PREVIEW */}
      <section className="section bg-paper">
        <div className="shell-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20, marginBottom: 56 }}>
            <SectionHead eyebrow="Read" title="From the journal" />
            <button className="reveal btn-text" onClick={() => go("journal")}>All stories <Icon.arrow /></button>
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(300px,1fr))" }}>
            {STORIES.slice(0, 3).map((s, i) => (
              <article key={s.title} className="reveal" data-d={i + 1} onClick={() => go("journal")} style={{ cursor: "pointer" }}>
                <Ph pic={s.pic} alt={s.title} ratio="4/3" className="poet-img" />
                <div style={{ marginTop: 18 }}>
                  <Eyebrow>{s.cat} · {s.read}</Eyebrow>
                  <h3 className="h-sm" style={{ marginTop: 10, marginBottom: 8 }}>{s.title}</h3>
                  <p className="muted" style={{ fontSize: "0.95rem" }}>{s.excerpt}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CLOSING CTA */}
      <section className="section" style={{ position: "relative", overflow: "hidden" }}>
        <div className="jali" style={{ position: "absolute", inset: 0, opacity: 0.05 }}></div>
        <div className="shell center reveal" style={{ position: "relative" }}>
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 18 }}><Ornament width={220} /></div>
          <Eyebrow style={{ justifyContent: "center", marginBottom: 22 }}>Pull up a chair</Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(2.8rem,7vw,6rem)", marginBottom: 30 }}>Come sit with us.</h2>
          <p className="lede" style={{ maxWidth: 520, margin: "0 auto 40px" }}>The next mehfil has a seat with your name on it. Bring yourself; the words will come.</p>
          <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => onRegister(next)}>Attend next mehfil <Icon.arrow className="arr" /></button>
            <button className="btn btn-ghost" onClick={() => go("membership")}>See membership</button>
          </div>
        </div>
      </section>
    </main>
  );
}

function EventsPage({ go, onRegister }) {
  useReveal();
  const [city, setCity] = useStateP1("All");
  const cities = ["All", "Gurugram", "Delhi"];
  const list = city === "All" ? EVENTS : EVENTS.filter((e) => e.city === city);
  return (
    <main>
      <PageHeader eyebrow="Upcoming events" title="Find your next evening" lede="Small rooms, curated themes, sixty strangers who won't be strangers by the end. Reserve a seat before they're gone." />
      <section className="section-sm">
        <div className="shell-wide">
          <div className="reveal" style={{ display: "flex", gap: 10, marginBottom: 48, flexWrap: "wrap" }}>
            {cities.map((c) => (
              <button key={c} onClick={() => setCity(c)} className="tag" style={{ cursor: "pointer", borderColor: city === c ? "var(--ink)" : "var(--line)", background: city === c ? "var(--ink)" : "transparent", color: city === c ? "var(--paper)" : "var(--ink-soft)" }}>{c}</button>
            ))}
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(330px,1fr))" }}>
            {list.map((ev, i) => <EventCard key={ev.id} ev={ev} onRegister={onRegister} d={(i % 3) + 1} />)}
          </div>
        </div>
      </section>
      <section className="section bg-beige">
        <div className="shell center reveal">
          <Eyebrow style={{ justifyContent: "center", marginBottom: 20 }}>Can't find a date?</Eyebrow>
          <h2 className="h-lg" style={{ marginBottom: 24, maxWidth: "16ch", marginInline: "auto" }}>Members hear first, and always have a seat.</h2>
          <button className="btn btn-primary" onClick={() => go("membership")}>Explore membership <Icon.arrow className="arr" /></button>
        </div>
      </section>
    </main>
  );
}

/* Shared interior page header */
function PageHeader({ eyebrow, title, lede, tone }) {
  return (
    <section style={{ paddingTop: 150, paddingBottom: "clamp(40px,6vw,72px)" }}>
      <div className="shell">
        <div className="reveal">
          <Eyebrow style={{ marginBottom: 22 }}>{eyebrow}</Eyebrow>
          <h1 className="h-xl" style={{ maxWidth: "16ch", marginBottom: lede ? 28 : 0 }}>{title}</h1>
          {lede && <p className="lede" style={{ maxWidth: 600 }}>{lede}</p>}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage, EventsPage, PageHeader });