/* Journal + Shayari Library pages */
const { useState: useStateP3 } = React;

function JournalPage({ go }) {
  useReveal();
  const cats = ["All", "Poetry", "Reflections", "Community Story", "Event Recap", "Featured Creator"];
  const [cat, setCat] = useStateP3("All");
  const list = cat === "All" ? STORIES : STORIES.filter((s) => s.cat === cat);
  const feat = STORIES[0];
  return (
    <main>
      <PageHeader eyebrow="Stories & Journal" title="A quiet publication for a loud city." lede="Poetry, reflections, recaps and the people behind the mehfil — read like the magazine you'd actually keep." />

      {/* FEATURE */}
      <section className="section-sm">
        <div className="shell-wide">
          <article className="reveal" onClick={() => go("journal")} style={{ cursor: "pointer", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 0, border: "1px solid var(--line)", borderRadius: 5, overflow: "hidden", background: "var(--paper)" }}>
            <Ph pic={feat.pic} alt={feat.title} style={{ minHeight: 380 }} />
            <div style={{ padding: "clamp(28px,4vw,56px)", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <Eyebrow style={{ marginBottom: 18 }}>Featured · {feat.cat}</Eyebrow>
              <h2 className="h-md" style={{ marginBottom: 18 }}>{feat.title}</h2>
              <p className="body-lg" style={{ marginBottom: 26 }}>{feat.excerpt}</p>
              <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: "0.88rem" }}>
                <span style={{ fontWeight: 600 }}>{feat.author}</span><span className="muted">· {feat.read} read</span>
              </div>
            </div>
          </article>
        </div>
      </section>

      {/* FILTER + GRID */}
      <section className="section-sm">
        <div className="shell-wide">
          <div className="reveal" style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 48 }}>
            {cats.map((c) => (
              <button key={c} onClick={() => setCat(c)} className="tag" style={{ cursor: "pointer", borderColor: cat === c ? "var(--ink)" : "var(--line)", background: cat === c ? "var(--ink)" : "transparent", color: cat === c ? "var(--paper)" : "var(--ink-soft)" }}>{c}</button>
            ))}
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(300px,1fr))" }}>
            {list.map((s, i) => (
              <article key={s.title} className="reveal" data-d={(i % 3) + 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", marginBottom: 12 }}>{s.excerpt}</p>
                  <span style={{ fontSize: "0.82rem", fontWeight: 600 }}>{s.author}</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section bg-beige">
        <div className="shell-narrow center reveal">
          <Eyebrow style={{ justifyContent: "center", marginBottom: 18 }}>The SEM letter</Eyebrow>
          <h2 className="h-lg" style={{ marginBottom: 18 }}>One thoughtful email a month.</h2>
          <p className="lede" style={{ marginBottom: 32 }}>A poem, a story, and where to find us next. Nothing else.</p>
          <form onSubmit={(e) => e.preventDefault()} style={{ display: "flex", gap: 10, maxWidth: 460, margin: "0 auto", flexWrap: "wrap" }}>
            <input className="news-input" type="email" required placeholder="your@email.com" style={{ flex: 1, minWidth: 200, fontFamily: "var(--sans)", fontSize: "1rem", padding: "0.85em 1em", border: "1px solid var(--line)", borderRadius: 3, background: "var(--paper)" }} />
            <button className="btn btn-primary" type="submit">Subscribe</button>
          </form>
        </div>
      </section>
    </main>
  );
}

function LibraryPage({ go }) {
  useReveal();
  const cats = ["All", "Love", "Life", "Hope", "Philosophy", "Relationships", "Growth"];
  const [cat, setCat] = useStateP3("All");
  const [open, setOpen] = useStateP3(null);
  const list = cat === "All" ? SHAYARI : SHAYARI.filter((s) => s.cat === cat);
  const sel = open != null ? SHAYARI[open] : null;
  return (
    <main>
      <PageHeader eyebrow="Shayari Library" title="Verses worth keeping." lede="A growing archive of shayari — with transliteration and meaning, for the moments words fail you." />

      <section className="section-sm">
        <div className="shell">
          <div className="reveal" style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 48 }}>
            {cats.map((c) => (
              <button key={c} onClick={() => setCat(c)} className="tag" style={{ cursor: "pointer", borderColor: cat === c ? "var(--gold-deep)" : "var(--line)", background: cat === c ? "var(--gold-deep)" : "transparent", color: cat === c ? "var(--paper)" : "var(--ink-soft)" }}>{c}</button>
            ))}
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(300px,1fr))" }}>
            {list.map((s, i) => {
              const idx = SHAYARI.indexOf(s);
              return (
                <article key={i} className="reveal card" data-d={(i % 3) + 1} onClick={() => setOpen(idx)} style={{ cursor: "pointer", padding: "32px 30px 28px", display: "flex", flexDirection: "column", minHeight: 220 }}>
                  <Eyebrow style={{ marginBottom: 20 }}>{s.cat}</Eyebrow>
                  <p className="serif" style={{ fontSize: "1.5rem", lineHeight: 1.4, marginBottom: 16, flex: 1 }}>{s.roman}</p>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 16, borderTop: "1px solid var(--line-soft)" }}>
                    <span className="muted" style={{ fontSize: "0.84rem", fontStyle: "italic", fontFamily: "var(--serif)" }}>— {s.author}</span>
                    <span className="btn-text" style={{ border: "none", padding: 0, fontSize: "0.72rem" }}>Read <Icon.arrow /></span>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {sel && (
        <div className="modal-scrim" onClick={() => setOpen(null)}>
          <div className="modal" style={{ maxWidth: 560, background: "var(--ivory)" }} onClick={(e) => e.stopPropagation()}>
            <button className="modal-x" onClick={() => setOpen(null)}>✕</button>
            <div style={{ padding: "clamp(40px,6vw,64px) clamp(32px,5vw,56px)" }}>
              <Eyebrow style={{ marginBottom: 28 }}>{sel.cat}</Eyebrow>
              <p className="serif" style={{ fontSize: "clamp(1.8rem,4vw,2.6rem)", lineHeight: 1.4, marginBottom: 28 }}>{sel.roman}</p>
              <div style={{ height: 1, background: "var(--line)", margin: "28px 0" }}></div>
              <div className="flow">
                <div>
                  <Eyebrow ink style={{ marginBottom: 6, color: "var(--muted)" }}>Meaning</Eyebrow>
                  <p className="body-lg">{sel.mean}</p>
                </div>
                <div>
                  <Eyebrow ink style={{ marginBottom: 6, color: "var(--muted)" }}>Author</Eyebrow>
                  <p className="serif serif-it" style={{ fontSize: "1.3rem" }}>{sel.author}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <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: "18ch", marginInline: "auto", marginBottom: 26 }}>Have a verse the world should keep?</h2>
          <button className="btn btn-gold" onClick={() => go("perform")}>Submit your work <Icon.arrow className="arr" /></button>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { JournalPage, LibraryPage });