/* ART ADDA — Guidelines for participating artists */
function Guidelines({ go }) {
  useReveal();
  const D = window.ARTADDA;
  return (
    <div className="rise-in">
      <section className="wrap page-intro">
        <p className="eyebrow reveal" style={{ marginBottom: 22 }}>For Participating Artists</p>
        <h1 className="serif reveal">The<br />guidelines</h1>
        <p className="lede reveal" style={{ maxWidth: "56ch", marginTop: 26 }}>
          Everything you need to set up a great Sunday — where work goes, how to protect it, pricing, timings, and the small kit that makes the day run smoothly.
        </p>
      </section>

      <section className="wrap section" style={{ paddingTop: "clamp(30px,4vw,50px)" }}>
        <div className="guide-grid">
          {D.guidelines.map((g) => (
            <div key={g.n} className="guide-card reveal">
              <span className="guide-card__n serif">{g.n}</span>
              <h3 className="serif">{g.title}</h3>
              <p className="guide-card__lede">{g.lede}</p>
              <ul>
                {g.points.map((p, i) => <li key={i}>{p}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* Bio structure callout */}
      <section className="wrap section" style={{ paddingTop: 0 }}>
        <div className="reveal" style={{ background: "var(--ink)", color: "var(--paper)", padding: "clamp(32px,5vw,72px)" }}>
          <div className="grid" style={{ gridTemplateColumns: "0.8fr 1.2fr", gap: "clamp(28px,5vw,64px)" }}>
            <div>
              <p className="eyebrow" style={{ color: "#9a978f", marginBottom: 16 }}>Before the show</p>
              <h2 className="h-md serif">What to send us for your write-up</h2>
              <p style={{ color: "#9a978f", marginTop: 16 }}>This is what goes onto your artist card and into the promos.</p>
            </div>
            <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 1, background: "#34322d", border: "1px solid #34322d" }}>
              {[
                { k: "Contact", v: "Full name, phone, Malhar community (optional)" },
                { k: "Portrait", v: "A picture of you, the artist" },
                { k: "Bio", v: "An A4-page bio in your own voice" },
                { k: "Works on display", v: "Image, title, date, medium & size for each piece" },
              ].map((x) => (
                <div key={x.k} style={{ background: "var(--ink)", padding: "22px 24px" }}>
                  <p className="mono" style={{ fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "#9a978f", margin: 0 }}>{x.k}</p>
                  <p className="serif" style={{ fontSize: 18, margin: "8px 0 0" }}>{x.v}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* A nod to the Adda crew */}
      <section className="wrap section" style={{ paddingTop: 0 }}>
        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,5vw,64px)", alignItems: "center" }}>
          <p className="pull serif">“The boys at Adda are wonderfully accommodating. A nominal thank-you of ₹1,000 is split among them at the end of the show — shared between the artists who display.”</p>
          <div className="flow muted">
            <p>Art Adda runs on goodwill. The space is shared, the help is generous, and a small gesture keeps the spirit of it alive.</p>
            <p className="faint">Please share the day's sales tally so we can guide the next set of artists and track Art Adda's impact.</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 8 }}>
              <button className="btn" onClick={() => go("submit")}>Apply to show <Arrow /></button>
              <button className="btn btn--ghost" onClick={() => go("contact")}>Ask a question</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Guidelines = Guidelines;