/* About + Community + Poets pages */
const { useState: useStateP2 } = React;

function AboutPage({ go }) {
  useReveal();
  return (
    <main>
      <PageHeader eyebrow="About SEM" title="A room that believes in being earnest." lede="Sham-e-Mehfil began with a simple, stubborn idea: that people are starving for somewhere to be sincere." />

      {/* WHY */}
      <section className="section-sm">
        <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(32px,6vw,90px)", alignItems: "center" }}>
          <Ph pic="img/night-garden.jpg" alt="An early SEM gathering, candlelit" ratio="4/5" className="reveal" />
          <div className="reveal" data-d="1">
            <Eyebrow style={{ marginBottom: 18 }}>Why SEM exists</Eyebrow>
            <h2 className="h-md" style={{ marginBottom: 22 }}>The city gave us everything except a place to feel something.</h2>
            <div className="flow body-lg">
              <p>Between work that never ends and feeds that never stop, an entire generation forgot how to sit in a room and simply listen. We built SEM for the version of you that wants more than small talk.</p>
              <p>No networking. No performance of success. Just poetry, stories, and people choosing presence over the scroll.</p>
            </div>
          </div>
        </div>
      </section>

      {/* MISSION / VISION */}
      <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" style={{ position: "relative" }}>
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(280px,1fr))", gap: 56 }}>
            <div className="reveal">
              <Eyebrow style={{ marginBottom: 18 }}>Our mission</Eyebrow>
              <p className="serif" style={{ fontSize: "clamp(1.5rem,2.6vw,2.1rem)", lineHeight: 1.35, fontWeight: 400 }}>To create the warmest room in the city — where words become the reason strangers become a community.</p>
            </div>
            <div className="reveal" data-d="1">
              <Eyebrow style={{ marginBottom: 18 }}>Our vision</Eyebrow>
              <p className="serif" style={{ fontSize: "clamp(1.5rem,2.6vw,2.1rem)", lineHeight: 1.35, fontWeight: 400 }}>A cultural movement where slowing down, reading aloud, and listening deeply are once again ordinary acts.</p>
            </div>
          </div>
        </div>
      </section>

      {/* JOURNEY */}
      <section className="section">
        <div className="shell">
          <SectionHead eyebrow="Our journey" title="Four years, one hush before the first poem." max={620} />
          <div style={{ marginTop: 64 }}>
            {JOURNEY.map((j, i) => (
              <div key={j.year} className="reveal" data-d={i % 4} style={{ display: "grid", gridTemplateColumns: "160px 1fr", gap: "clamp(20px,4vw,56px)", padding: "32px 0", borderTop: "1px solid var(--line)" }}>
                <div className="serif" style={{ fontSize: "clamp(2rem,3.5vw,3rem)", color: "var(--gold-deep)", lineHeight: 1 }}>{j.year}</div>
                <div>
                  <h3 className="h-sm" style={{ marginBottom: 10 }}>{j.title}</h3>
                  <p className="body-lg" style={{ maxWidth: "52ch" }}>{j.text}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* IMPACT STATS */}
      <section className="section bg-beige">
        <div className="shell">
          <SectionHead eyebrow="Community impact" title="What four years in rooms adds up to." max={560} />
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(160px,1fr))", marginTop: 56 }}>
            {STATS.map((s, i) => (
              <div key={s.l} className="reveal" data-d={i} style={{ borderLeft: "1px solid var(--line)", paddingLeft: 24 }}>
                <div className="serif" style={{ fontSize: "clamp(2.6rem,5vw,4rem)", lineHeight: 1, color: "var(--ink)" }}>{s.n}</div>
                <div className="muted" style={{ marginTop: 10, fontSize: "0.92rem" }}>{s.l}</div>
              </div>
            ))}
          </div>
          <div className="reveal" style={{ marginTop: 56 }}>
            <button className="btn btn-primary" onClick={() => go("community")}>Meet the community <Icon.arrow className="arr" /></button>
          </div>
        </div>
      </section>
    </main>
  );
}

function CommunityPage({ go, onRegister }) {
  useReveal();
  return (
    <main>
      <PageHeader eyebrow="Community" title="More than events. A community." lede="What keeps people coming back isn't the poetry. It's who they meet across the candlelight." />

      {/* PHOTO MOSAIC */}
      <section className="section-sm">
        <div className="shell-wide">
          <div className="grid reveal" style={{ gridTemplateColumns: "repeat(4, 1fr)", gridAutoRows: "200px", gap: 14 }}>
            <Ph pic="img/arabian-tent.jpg" alt="A draped, candlelit mehfil tent" style={{ gridColumn: "span 2", gridRow: "span 2" }} />
            <Ph pic="img/screening-crowd.jpg" alt="The gathering, listening" />
            <Ph pic="img/book-chai.jpg" alt="A book and chai by lamplight" />
            <Ph pic="img/mehfil-diwan.jpg" alt="A candlelit diwan" />
            <Ph pic="img/night-garden.jpg" alt="Friends gathered at night" />
            <Ph pic="img/boho-garden.jpg" alt="Lantern-lit garden gathering" style={{ gridColumn: "span 2" }} />
            <Ph pic="img/backyard.jpg" alt="The hush, by candlelight" />
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="section bg-paper">
        <div className="shell">
          <SectionHead eyebrow="In their words" title="Why they keep coming back" max={560} />
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(290px,1fr))", marginTop: 56 }}>
            {TESTIMONIALS.map((t, i) => (
              <blockquote key={t.name} className="reveal card" data-d={i + 1} style={{ padding: "34px 30px" }}>
                <div style={{ color: "var(--gold)", marginBottom: 16 }}><Icon.quote width="30" height="30" /></div>
                <p className="serif" style={{ fontSize: "1.3rem", lineHeight: 1.42, marginBottom: 22 }}>“{t.quote}”</p>
                <footer style={{ fontSize: "0.9rem" }}><strong>{t.name}</strong><br /><span className="muted">{t.role}</span></footer>
              </blockquote>
            ))}
          </div>
        </div>
      </section>

      {/* MEMBER HIGHLIGHT */}
      <section className="section">
        <div className="shell" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "clamp(32px,6vw,80px)", alignItems: "center" }}>
          <div className="reveal">
            <Eyebrow style={{ marginBottom: 18 }}>Member highlight</Eyebrow>
            <h2 className="h-md" style={{ marginBottom: 20 }}>“I joined to listen. I stayed because they listened to me.”</h2>
            <p className="body-lg" style={{ marginBottom: 24 }}>Mehak came to her first volume alone, certain she'd leave at the interval. Three months later she read her own work for the first time — to a room that held its breath.</p>
            <button className="btn btn-text" onClick={() => go("journal")}>Read her story <Icon.arrow /></button>
          </div>
          <Ph pic="img/book-chai.jpg" alt="Member portrait — Mehak" ratio="1/1" className="reveal" data-d="1" />
        </div>
      </section>

      <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 center reveal" style={{ position: "relative" }}>
          <h2 className="h-lg" style={{ maxWidth: "16ch", marginInline: "auto", marginBottom: 28 }}>The community is free to join. The room fills fast.</h2>
          <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-gold" onClick={() => go("membership")}>Join community <Icon.arrow className="arr" /></button>
            <button className="btn btn-ghost" style={{ color: "var(--paper)", borderColor: "rgba(244,239,230,0.4)" }} onClick={() => go("events")}>See events</button>
          </div>
        </div>
      </section>
    </main>
  );
}

function PoetsPage({ go }) {
  useReveal();
  const [active, setActive] = useStateP2(null);
  const p = active != null ? POETS[active] : null;
  return (
    <main>
      <PageHeader eyebrow="Featured poets" title="The voices of the mehfil." lede="A collective of writers and performers from across the NCR. Tap a name to read their work." />
      <section className="section-sm">
        <div className="shell-wide">
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(300px,1fr))" }}>
            {POETS.map((poet, i) => (
              <article key={poet.id} className="reveal card" data-d={(i % 3) + 1} onClick={() => setActive(i)} style={{ cursor: "pointer", overflow: "hidden" }}>
                <Ph pic={poet.pic} alt={poet.name} ratio="4/5" />
                <div style={{ padding: "24px 26px 28px" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
                    <h3 className="h-sm">{poet.name}</h3>
                    <span className="muted" style={{ fontSize: "0.8rem" }}>{poet.vols} vols</span>
                  </div>
                  <Eyebrow style={{ marginBottom: 16 }}>{poet.craft} · {poet.city}</Eyebrow>
                  <p className="serif serif-it" style={{ fontSize: "1.25rem", lineHeight: 1.4, color: "var(--ink-soft)" }}>“{poet.line}”</p>
                </div>
              </article>
            ))}
          </div>
          <div className="reveal" style={{ marginTop: 64, padding: "48px 0", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
            <div>
              <h3 className="h-md" style={{ marginBottom: 8 }}>Think you belong on this stage?</h3>
              <p className="muted">We curate every line-up, and we're always listening for new voices.</p>
            </div>
            <button className="btn btn-primary" onClick={() => go("perform")}>Perform at SEM <Icon.arrow className="arr" /></button>
          </div>
        </div>
      </section>

      {p && (
        <div className="modal-scrim" onClick={() => setActive(null)}>
          <div className="modal" style={{ maxWidth: 620 }} onClick={(e) => e.stopPropagation()}>
            <button className="modal-x" onClick={() => setActive(null)}>✕</button>
            <Ph pic={p.pic} alt={p.name} ratio="16/10" />
            <div style={{ padding: "34px 38px 40px" }}>
              <Eyebrow style={{ marginBottom: 14 }}>{p.craft} · {p.city}</Eyebrow>
              <h2 className="h-md" style={{ marginBottom: 18 }}>{p.name}</h2>
              <p className="body-lg" style={{ marginBottom: 24 }}>{p.bio}</p>
              <div style={{ padding: "24px 26px", background: "var(--beige)", borderRadius: 4, marginBottom: 26 }}>
                <Eyebrow style={{ marginBottom: 10 }}>Sample work</Eyebrow>
                <p className="serif serif-it" style={{ fontSize: "1.5rem", lineHeight: 1.4 }}>“{p.line}”</p>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 20, justifyContent: "space-between", flexWrap: "wrap" }}>
                <a className="btn-text" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon.ig /> {p.ig}</a>
                <span className="muted" style={{ fontSize: "0.86rem" }}>Performed {p.vols} volumes</span>
              </div>
            </div>
          </div>
        </div>
      )}
    </main>
  );
}

Object.assign(window, { AboutPage, CommunityPage, PoetsPage });
