/* ART ADDA — Home */
function Home({ go, heroDir, openEdition }) {
  useReveal();
  const D = window.ARTADDA;
  const upcoming = D.events.find((e) => e.status === "upcoming") || D.events[0];
  const recent = D.events.filter((e) => e.status === "past").slice(0, 6);

  return (
    <div className="rise-in">
      {/* ---------- HERO ---------- */}
      <header className="hero wrap">
        {heroDir === "wordmark" && <HeroWordmark go={go} recent={recent} openEdition={openEdition} />}
        {heroDir === "editorial" && <HeroEditorial go={go} />}
        {heroDir === "index" && <HeroIndex go={go} recent={recent} openEdition={openEdition} />}
      </header>

      {/* ---------- FACTS STRIP ---------- */}
      <div className="wrap">
        <div className="facts">
          <div className="fact"><div className="fact__k">Where</div><div className="fact__v serif">{D.venue.name}, {D.venue.place}</div></div>
          <div className="fact"><div className="fact__k">When</div><div className="fact__v serif">{D.venue.cadence}</div></div>
          <div className="fact"><div className="fact__k">Shows held</div><div className="fact__v serif">10 editions</div></div>
          <div className="fact"><div className="fact__k">Artists shown</div><div className="fact__v serif">13 + 8 young artists</div></div>
        </div>
      </div>

      {/* ---------- UPCOMING ---------- */}
      <section className="wrap section">
        <div className="upcoming reveal">
          <div className="upcoming__date">
            <div className="upcoming__day serif">{upcoming.day}</div>
            <div className="upcoming__mo">{upcoming.month}</div>
            <div className="upcoming__yr">{upcoming.year}</div>
          </div>
          <div>
            <p className="eyebrow" style={{ color: "#9a978f", marginBottom: 12 }}>Next edition</p>
            <h3 className="serif">{upcoming.title}</h3>
            <p style={{ color: "#cfccc4", marginTop: 14, maxWidth: "46ch" }}>{upcoming.blurb}</p>
          </div>
          <button className="btn" onClick={() => go("submit")}>Submit your work <Arrow /></button>
        </div>
      </section>

      {/* ---------- VISION TEASER ---------- */}
      <section className="wrap section" style={{ paddingTop: 0 }}>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", gap: "clamp(28px,5vw,72px)", alignItems: "center" }}>
          <div className="reveal">
            <p className="eyebrow" style={{ marginBottom: 20 }}>The idea</p>
            <p className="vision-lead serif">A platform for artists to <em>showcase</em> their work — in the middle of a Sunday.</p>
          </div>
          <div className="reveal flow">
            <p className="lede">Adda draws a warm Sunday crowd at Good Earth Malhar — breakfast in the morning, snacks in the evening. Art Adda turns that everyday gathering into a gallery.</p>
            <p className="muted">Work leans against walls, hangs from rope and clothespins, perches on easels by the door. Artists stay to talk, share, and sell. No white cube — just art, coffee and conversation.</p>
            <button className="btn btn--ghost" onClick={() => go("vision")} style={{ marginTop: 8 }}>Read the vision <Arrow /></button>
          </div>
        </div>
      </section>

      <hr className="rule" />

      {/* ---------- RECENT SHOWS ---------- */}
      <section className="wrap section">
        <SectionHead index="01" kicker="The Archive" title="Recent editions">
          Ten Sundays, ten gatherings. A look back at the shows that built Art Adda.
        </SectionHead>
        <div style={{ marginTop: 40 }}>
          {recent.map((ev) => (
            <button key={ev.id} className="tl-row reveal" onClick={() => openEdition(ev.id)} style={{ width: "100%", textAlign: "left", background: "none", border: 0, borderTop: "1px solid var(--line-strong)", cursor: "pointer", color: "inherit" }}>
              <div className="tl-row__date">
                <div className="tl-row__day serif">{ev.day}</div>
                <div className="tl-row__mo">{ev.month}</div>
                <div className="tl-row__yr">{ev.year}</div>
              </div>
              <div className="tl-row__body">
                <div style={{ display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
                  <div className="tl-row__title serif">{ev.title}</div>
                  <Arrow />
                </div>
                <p className="muted" style={{ maxWidth: "60ch", margin: "4px 0 0" }}>{ev.blurb}</p>
                <div className="tl-row__artists">
                  {ev.artistIds.map((aid) => {
                    const a = D.artistById(aid);
                    return a ? <span key={aid} className="tag">{a.name}</span> : null;
                  })}
                  {ev.special && <span className="tag">Children's Day</span>}
                </div>
              </div>
            </button>
          ))}
          <div style={{ borderTop: "1px solid var(--line-strong)" }} />
        </div>
        <div style={{ marginTop: 40 }}>
          <button className="btn btn--ghost" onClick={() => go("editions")}>All editions <Arrow /></button>
        </div>
      </section>
    </div>
  );
}

/* ---- Direction A: edition image strip ---- */
function HeroWordmark({ go, recent, openEdition }) {
  const D = window.ARTADDA;
  // one shot per recent edition, varying the photo index for rhythm
  const shots = [
    { ev: recent[0], n: 1 },
    { ev: recent[1], n: 2 },
    { ev: recent[2], n: 1 },
    { ev: recent[3], n: 3 },
    { ev: recent[4], n: 1 },
  ].filter((s) => s.ev);
  return (
    <div className="heroA">
      <p className="eyebrow rise-in" style={{ marginBottom: 28 }}>Good Earth Malhar · Bengaluru · Every 2nd Sunday</p>
      <div className="heroA__strip rise-in">
        {shots.map((s) => (
          <button key={s.ev.id} className="heroA__shot" onClick={() => openEdition(s.ev.id)} title={s.ev.title}>
            <Ph label={`${s.ev.title} · photo`} src={D.img.event(s.ev.id, s.n)} />
            <span className="heroA__cap mono">{s.ev.title} — {s.ev.date}</span>
          </button>
        ))}
      </div>
      <div className="heroA__row" style={{ marginTop: 14 }}>
        <p className="lede heroA__meta">ART ADDA is a monthly art popup where Malhar's artists turn the neighbourhood café ADDA into a living gallery.</p>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <button className="btn" onClick={() => go("submit")}>Show your work <Arrow /></button>
          <button className="btn btn--ghost" onClick={() => go("gallery")}>See the gallery</button>
        </div>
      </div>
    </div>
  );
}

/* ---- Direction B: editorial split ---- */
function HeroEditorial({ go }) {
  return (
    <div className="heroB">
      <div className="rise-in">
        <p className="eyebrow" style={{ marginBottom: 26 }}>A Sunday Art Popup</p>
        <h1 className="heroB__big serif">Art, coffee &amp; <em>conversation</em> — every second Sunday.</h1>
        <p className="lede" style={{ marginTop: 26, maxWidth: "44ch" }}>Art Adda is a monthly showcase at Adda, Good Earth Malhar, where artists from the community display, talk about, and sell their work.</p>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 30 }}>
          <button className="btn" onClick={() => go("submit")}>Show your work <Arrow /></button>
          <button className="btn btn--ghost" onClick={() => go("artists")}>The artists</button>
        </div>
      </div>
      <div className="heroB__art rise-in">
        <Ph label="Hero · show wide-shot" src={window.ARTADDA.img.home(1)} />
        <Ph label="Artwork detail" src={window.ARTADDA.img.home(2)} />
        <Ph label="Artist + work" src={window.ARTADDA.img.home(3)} />
      </div>
    </div>
  );
}

/* ---- Direction C: index list ---- */
function HeroIndex({ go, recent, openEdition }) {
  return (
    <div className="heroC">
      <div className="rise-in" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20 }}>
        <h1 className="heroC__top serif">Art<br />Adda</h1>
        <div style={{ maxWidth: "34ch", textAlign: "right" }}>
          <p className="eyebrow" style={{ marginBottom: 12 }}>Index · 2025—26</p>
          <p className="muted">A monthly Sunday art popup at Adda, Good Earth Malhar. Select an edition.</p>
        </div>
      </div>
      <div style={{ marginTop: "clamp(30px,5vw,60px)" }}>
        {recent.slice(0, 5).map((ev, i) => (
          <div key={ev.id} className="idx-row reveal" onClick={() => openEdition(ev.id)} style={{ cursor: "pointer" }}>
            <span className="idx-row__n">{String(i + 1).padStart(2, "0")}</span>
            <span className="idx-row__t serif">{ev.title}</span>
            <span className="idx-row__m">{ev.date}</span>
          </div>
        ))}
        <div style={{ borderTop: "1px solid var(--line-strong)" }} />
      </div>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 36 }}>
        <button className="btn" onClick={() => go("submit")}>Show your work <Arrow /></button>
        <button className="btn btn--ghost" onClick={() => go("gallery")}>Full gallery</button>
      </div>
    </div>
  );
}

window.Home = Home;