/* Perform + Membership + Partnerships + Contact pages */
const { useState: useStateP4 } = React;

function ThankYou({ title, text, onReset, btn }) {
  return (
    <div className="reveal in" style={{ textAlign: "center", padding: "20px 0" }}>
      <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--gold)", color: "var(--paper)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 26px" }}>
        <Icon.check width="28" height="28" />
      </div>
      <h3 className="h-md" style={{ marginBottom: 14 }}>{title}</h3>
      <p className="body-lg" style={{ maxWidth: 420, margin: "0 auto 28px" }}>{text}</p>
      {onReset && <button className="btn btn-ghost" onClick={onReset}>{btn || "Submit another"}</button>}
    </div>
  );
}

function PerformPage() {
  useReveal();
  const [done, setDone] = useStateP4(false);
  return (
    <main>
      <PageHeader eyebrow="Perform at SEM" title="Bring your words to the room." lede="Whether you've performed a hundred times or never read aloud — we want to hear it. Tell us a little about you." />
      <section className="section-sm">
        <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "clamp(32px,6vw,80px)", alignItems: "start" }}>
          <div className="reveal sticky-top">
            <Eyebrow style={{ marginBottom: 18 }}>How it works</Eyebrow>
            {[["You apply", "A short form — no portfolio gymnastics required."], ["We listen", "Our curators read every submission, personally."], ["You're invited", "Selected voices join an upcoming volume's line-up."]].map(([t, d], i) => (
              <div key={t} style={{ display: "flex", gap: 18, padding: "18px 0", borderTop: i ? "1px solid var(--line)" : "none" }}>
                <span className="serif" style={{ fontSize: "1.6rem", color: "var(--gold-deep)", lineHeight: 1 }}>0{i + 1}</span>
                <div><h4 className="h-sm" style={{ fontSize: "1.2rem", marginBottom: 4 }}>{t}</h4><p className="muted" style={{ fontSize: "0.95rem" }}>{d}</p></div>
              </div>
            ))}
          </div>
          <div className="reveal card" data-d="1" style={{ padding: "clamp(28px,4vw,44px)" }}>
            {done ? (
              <ThankYou title="We've got your words." text="Thank you for trusting us with them. Our curators will read your submission and be in touch within a week." onReset={() => setDone(false)} btn="Submit another" />
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setDone(true); window.scrollTo({ top: window.scrollY }); }} style={{ display: "grid", gap: 20 }}>
                <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                  <div className="field"><label>Name</label><input required placeholder="Your name" /></div>
                  <div className="field"><label>Email</label><input type="email" required placeholder="you@email.com" /></div>
                </div>
                <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                  <div className="field"><label>Instagram</label><input placeholder="@handle" /></div>
                  <div className="field"><label>Category</label>
                    <select defaultValue=""><option value="" disabled>Choose one</option><option>Poetry / Nazm</option><option>Ghazal</option><option>Spoken word</option><option>Storytelling</option><option>Hindi kavita</option><option>Other</option></select>
                  </div>
                </div>
                <div className="field"><label>Sample work</label><textarea required placeholder="Paste a few lines, or a link to your work…"></textarea></div>
                <button className="btn btn-primary" type="submit" style={{ justifyContent: "center" }}>Submit application <Icon.arrow className="arr" /></button>
              </form>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}

function MembershipPage({ go, onRegister }) {
  useReveal();
  return (
    <main>
      <PageHeader eyebrow="Membership" title="Belong, at your own pace." lede="From free community access to holding the room up as a Patron — three ways to make SEM yours." />
      <section className="section-sm">
        <div className="shell-wide">
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(290px,1fr))", alignItems: "stretch" }}>
            {PLANS.map((pl, i) => {
              const dark = pl.tone === "dark", feat = pl.tone === "feature";
              return (
                <div key={pl.id} className="reveal" data-d={i + 1} style={{
                  display: "flex", flexDirection: "column", padding: "clamp(30px,3vw,44px) clamp(26px,2.6vw,38px)",
                  borderRadius: 6, position: "relative",
                  background: dark ? "var(--espresso)" : "var(--paper)",
                  color: dark ? "var(--paper)" : "var(--ink)",
                  border: feat ? "1.5px solid var(--gold)" : "1px solid var(--line)",
                  transform: feat ? "scale(1.02)" : "none", boxShadow: feat ? "0 30px 60px -34px rgba(28,26,23,0.4)" : "none",
                }}>
                  {pl.badge && <span style={{ position: "absolute", top: -13, left: "clamp(26px,2.6vw,38px)", background: "var(--gold)", color: "var(--paper)", fontSize: "0.66rem", fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", padding: "6px 14px", borderRadius: 100 }}>{pl.badge}</span>}
                  <h3 className="h-sm" style={{ marginBottom: 4 }}>{pl.name}</h3>
                  <p style={{ color: dark ? "rgba(244,239,230,0.65)" : "var(--muted)", fontFamily: "var(--serif)", fontStyle: "italic", fontSize: "1.2rem", marginBottom: 24 }}>{pl.tagline}</p>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 28 }}>
                    <span className="serif" style={{ fontSize: "clamp(2.6rem,4vw,3.4rem)", lineHeight: 1 }}>{pl.price}</span>
                    <span style={{ color: dark ? "rgba(244,239,230,0.6)" : "var(--muted)", fontSize: "0.9rem" }}>/ {pl.per}</span>
                  </div>
                  <ul style={{ listStyle: "none", display: "grid", gap: 14, marginBottom: 32, flex: 1 }}>
                    {pl.feats.map((f) => (
                      <li key={f} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: "0.95rem", lineHeight: 1.45 }}>
                        <span style={{ color: "var(--gold)", marginTop: 2, flexShrink: 0 }}><Icon.check /></span>{f}
                      </li>
                    ))}
                  </ul>
                  <button
                    className={`btn ${dark ? "btn-gold" : feat ? "btn-primary" : "btn-ghost"}`}
                    style={{ justifyContent: "center" }}
                    onClick={() => pl.id === "free" ? go("community") : onRegister({ membership: pl.name, price: pl.price, per: pl.per })}>
                    {pl.id === "free" ? "Join free" : `Become ${pl.name.replace("SEM ", "a ")}`} <Icon.arrow className="arr" />
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      </section>
      <section className="section bg-beige">
        <div className="shell-narrow">
          <SectionHead eyebrow="Good to know" title="Questions, answered." align="center" />
          <div style={{ marginTop: 48 }}>
            {[["Can I cancel anytime?", "Yes — membership is month-to-month. Pause or cancel from your account whenever you like."],
              ["Is the community really free?", "Completely. The free tier gives you the circle, the journal and the library. Paid tiers are about seats and salons."],
              ["Do members get every event free?", "Circle and Patron members get reserved seats included; some special volumes may carry a small surcharge."]].map(([q, a], i) => (
              <details key={i} className="reveal" style={{ borderTop: "1px solid var(--line)", padding: "22px 0" }}>
                <summary style={{ cursor: "pointer", fontFamily: "var(--serif)", fontSize: "1.35rem", listStyle: "none", display: "flex", justifyContent: "space-between", gap: 16 }}>{q}<span style={{ color: "var(--gold-deep)" }}>+</span></summary>
                <p className="body-lg" style={{ marginTop: 14, maxWidth: "60ch" }}>{a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function PartnersPage({ go }) {
  useReveal();
  const demo = [["25–40", "Core age range"], ["68%", "Working professionals"], ["3,400+", "Engaged members"], ["NCR", "Gurugram · Delhi · Noida"]];
  const opps = [
    ["Volume partner", "Co-present a single volume — your brand woven into the evening, never bolted on."],
    ["Season patron", "Back a full season of mehfils and own a season-long association with the community."],
    ["Space & hospitality", "Host us. We bring the room to life; you become a destination for culture."],
    ["Bespoke salons", "A private SEM experience designed around your team, clients or launch."],
  ];
  return (
    <main>
      <PageHeader eyebrow="Partnerships & Sponsorships" title="Reach a room that's actually present." lede="SEM gathers an audience that puts away their phones. For the right brands, that attention is rare — and worth far more than impressions." />
      <section className="section-sm">
        <div className="shell-wide">
          <div className="grid reveal" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(150px,1fr))" }}>
            {demo.map(([n, l]) => (
              <div key={l} style={{ padding: "30px 28px", background: "var(--paper)", border: "1px solid var(--line-soft)", borderRadius: 4 }}>
                <div className="serif" style={{ fontSize: "clamp(2.2rem,4vw,3.2rem)", lineHeight: 1, marginBottom: 10 }}>{n}</div>
                <div className="muted" style={{ fontSize: "0.9rem" }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="shell">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(32px,6vw,80px)", alignItems: "center" }}>
            <div className="reveal">
              <Eyebrow style={{ marginBottom: 18 }}>What we value</Eyebrow>
              <h2 className="h-md" style={{ marginBottom: 20 }}>We partner the way we curate — carefully.</h2>
              <p className="body-lg">We say no often. The brands we work with share our belief in depth over noise, craft over clutter, and people over metrics. If that's you, the conversation will be easy.</p>
            </div>
            <Ph pic="img/beach-cinema.jpg" alt="A candlelit open-air gathering" ratio="4/3" className="reveal" data-d="1" />
          </div>
        </div>
      </section>
      <section className="section bg-paper">
        <div className="shell">
          <SectionHead eyebrow="Opportunities" title="Ways to work together" max={560} />
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(280px,1fr))", marginTop: 56 }}>
            {opps.map(([t, d], i) => (
              <div key={t} className="reveal card" data-d={(i % 2) + 1} style={{ padding: "32px 30px" }}>
                <h3 className="h-sm" style={{ marginBottom: 12 }}>{t}</h3>
                <p className="muted" style={{ fontSize: "0.98rem", lineHeight: 1.55 }}>{d}</p>
              </div>
            ))}
          </div>
        </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: "18ch", marginInline: "auto", marginBottom: 18 }}>Let's build something worth attending.</h2>
          <p className="muted" style={{ maxWidth: 460, margin: "0 auto 32px" }}>Tell us about your brand and we'll send the SEM partnership deck.</p>
          <button className="btn btn-gold" onClick={() => go("contact")}>Request the deck <Icon.arrow className="arr" /></button>
        </div>
      </section>
    </main>
  );
}

function ContactPage() {
  useReveal();
  const [done, setDone] = useStateP4(false);
  return (
    <main>
      <PageHeader eyebrow="Contact" title="Say hello." lede="A question, a collaboration, or just want to know when we're next in your city — write to us." />
      <section className="section-sm">
        <div className="shell" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "clamp(32px,6vw,80px)", alignItems: "start" }}>
          <div className="reveal flow">
            <div>
              <Eyebrow style={{ marginBottom: 10 }}>Email</Eyebrow>
              <a href="mailto:hello@shamemehfil.in" className="serif" style={{ fontSize: "1.5rem" }}>hello@shamemehfil.in</a>
            </div>
            <div>
              <Eyebrow style={{ marginBottom: 10 }}>Find us</Eyebrow>
              <p className="body-lg">Gurugram · New Delhi · Noida<br />Rooms change. The hush doesn't.</p>
            </div>
            <div>
              <Eyebrow style={{ marginBottom: 10 }}>Follow</Eyebrow>
              <div style={{ display: "flex", gap: 14 }}>
                {["Instagram", "Substack", "WhatsApp"].map((s) => <a key={s} className="btn-text" style={{ fontSize: "0.74rem" }}>{s}</a>)}
              </div>
            </div>
          </div>
          <div className="reveal card" data-d="1" style={{ padding: "clamp(28px,4vw,44px)" }}>
            {done ? (
              <ThankYou title="Message received." text="Thank you for writing in. We read everything ourselves and will reply soon." onReset={() => setDone(false)} btn="Send another" />
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setDone(true); }} style={{ display: "grid", gap: 20 }}>
                <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                  <div className="field"><label>Name</label><input required placeholder="Your name" /></div>
                  <div className="field"><label>Email</label><input type="email" required placeholder="you@email.com" /></div>
                </div>
                <div className="field"><label>Reason</label>
                  <select defaultValue=""><option value="" disabled>What's this about?</option><option>General hello</option><option>Partnership / sponsorship</option><option>Press</option><option>Performing</option><option>Membership help</option></select>
                </div>
                <div className="field"><label>Message</label><textarea required placeholder="Tell us a little…"></textarea></div>
                <button className="btn btn-primary" type="submit" style={{ justifyContent: "center" }}>Send message <Icon.arrow className="arr" /></button>
              </form>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { PerformPage, MembershipPage, PartnersPage, ContactPage, ThankYou });