/* ART ADDA — Vision */
function Vision({ go }) {
  useReveal();
  const D = window.ARTADDA;
  return (
    <div className="rise-in">
      <section className="wrap page-intro">
        <p className="eyebrow reveal" style={{ marginBottom: 22 }}>The Vision</p>
        <h1 className="serif reveal">Why Art<br />Adda exists</h1>
        <p className="lede reveal" style={{ maxWidth: "54ch", marginTop: 26 }}>
          To be the platform for artists to showcase works of art at the Malhar community — and to make
          encountering art an ordinary part of a Sunday.
        </p>
      </section>

      <section className="wrap section">
        <div className="grid reveal" style={{ gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,5vw,72px)", alignItems: "center" }}>
          <p className="pull serif">“Art shouldn't wait behind gallery glass. At Adda it meets you mid-Sunday — between the coffee, the conversation and the corner where you wait for your order.”</p>
          <Ph label="Adda interior · Sunday crowd" ratio="4/3" src={window.ARTADDA.img.venue("interior")} />
        </div>
      </section>

      <hr className="rule" />

      <section className="wrap section">
        <SectionHead index="01" kicker="Principles" title="What we believe">
          A few simple ideas hold every edition together.
        </SectionHead>
        <div className="vision-grid" style={{ marginTop: 48 }}>
          {[
            { n: "01", t: "Art in the everyday", d: "No white cube, no ticket. Art lives where people already are — between the billing counter and the coffee, in the nook where you wait for your order." },
            { n: "02", t: "Artists in the room", d: "Artists stay to interact. They receive feedback, tell the story behind a piece, and sell directly. The conversation is half the work." },
            { n: "03", t: "Community-grown", d: "From the first show of four friends in March 2025, Art Adda has grown month by month — each edition guided by what the last one taught us." },
          ].map((c) => (
            <div key={c.n} className="vision-card reveal flow">
              <span className="n">{c.n}</span>
              <h3 className="serif">{c.t}</h3>
              <p className="muted">{c.d}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="wrap section" style={{ paddingTop: 0 }}>
        <div className="reveal" style={{ background: "var(--ink)", color: "var(--paper)", padding: "clamp(36px,6vw,90px)" }}>
          <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,5vw,72px)", alignItems: "end" }}>
            <div>
              <p className="eyebrow" style={{ color: "#9a978f", marginBottom: 18 }}>The space</p>
              <h2 className="h-md serif">Three wooden shelves, a length of rope, a couple of easels by the door.</h2>
            </div>
            <div className="flow">
              <p style={{ color: "#cfccc4" }}>The main display sits to the right of the billing counter — shelves that hold art at a viewing angle, with larger pieces leaning against the wall. Rope and clothespins string work along the sides; small pieces hang like buntings from branches.</p>
              <p style={{ color: "#9a978f" }}>It's a space that asks nothing of you but a glance, and gives back a conversation.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="wrap section" style={{ paddingTop: 0 }}>
        <div className="facts" style={{ borderTop: "1px solid var(--line-strong)" }}>
          <div className="fact"><div className="fact__k">Venue</div><div className="fact__v serif">{D.venue.name}</div></div>
          <div className="fact"><div className="fact__k">Location</div><div className="fact__v serif">{D.venue.place}</div></div>
          <div className="fact"><div className="fact__k">Morning</div><div className="fact__v serif">{D.venue.morning}</div></div>
          <div className="fact"><div className="fact__k">Evening</div><div className="fact__v serif">{D.venue.evening}</div></div>
        </div>
      </section>

      <section className="wrap section" style={{ paddingTop: 0 }}>
        <div className="reveal center" style={{ maxWidth: "44ch", margin: "0 auto" }}>
          <p className="eyebrow" style={{ marginBottom: 20 }}>Want to be part of it?</p>
          <h2 className="h-lg serif" style={{ marginBottom: 28 }}>Bring your work to a Sunday.</h2>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn" onClick={() => go("submit")}>Submit your work <Arrow /></button>
            <button className="btn btn--ghost" onClick={() => go("guidelines")}>Read the guidelines</button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Vision = Vision;