// Homepage — Final combined direction
// Stitches together the user's picks:
//   • Hero from A (simplified — no overlay card on the right)
//   • Rainbow divider from A
//   • Events ("What's on") and Artists sections from B
//   • Programs from C, rendered as an editorial table — but reworded so it
//     no longer implies a fixed catalog of four. Title is generic.
//   • News ticker → Council colophon → Footer from C
//
// One Coral pop CTA on the page: "Become a member" in the colophon.

const F = {
  paper: "#FBF7EE",
  stone: "#E8E2D3",
  navy: "#01234B",
  ink: "#1F1B2E",
  mute: "#6B6577",
  council: "#45217A",
  councilDeep: "#2B1450",
  pine: "#2F7A2E",
  pineDeep: "#1A461A",
  meadow: "#78BE4D",
  leaf: "#BFE0A5",
  eventsWhisper: "#EBF3DF",
  artists: "#01234B",
  artistsDeep: "#000E22",
  artistsLake: "#1F5A8C",
  artistsSky: "#6E94BC",
  news: "#1F1B2E",
  coral: "#FF7A5C",
  yellow: "#F3CF03",
};

function HomepageFinal() {
  return (
    <div className="roco-root" style={{
      background: F.paper, color: F.navy, fontFamily: "var(--font-body)",
      width: "100%", minHeight: "100%",
    }}>
      <FNav />
      <FHero />
      <RainbowDivider height={8} />
      <FWhatsOn />
      <FArtists />
      <FPrograms />
      <FNewsStrip />
      <FColophon />
      <FFooter />
    </div>
  );
}

// ─── Nav (from A) ────────────────────────────────────────────────
function FNav() {
  const items = [
    { label: "What's on", stream: "events", path: "#/events", active: true },
    { label: "Artists",   stream: "artists", path: "#/artists" },
    { label: "Programs",  stream: "council", path: "#/about" },
    { label: "News",      stream: "news",    path: "#/news" },
    { label: "Visit",     stream: "council", path: "#/about" },
  ];
  return (
    <header style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "24px 80px", borderBottom: `1px solid ${F.stone}`,
      background: F.paper,
    }}>
      <a href="#/"><Logo height={48} /></a>
      <nav style={{ display: "flex", gap: 4 }}>
        {items.map((n) => (
          <a key={n.label} href={n.path} style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "8px 14px", borderRadius: 999,
            fontWeight: 600, fontSize: 15, color: F.navy,
            background: n.active ? "rgba(69,33,122,0.08)" : "transparent",
          }}>
            <StreamDot stream={n.stream} />
            {n.label}
          </a>
        ))}
      </nav>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <a href="#/news" style={{ fontWeight: 600, fontSize: 15, color: F.navy }}>News</a>
        <a href="#/events" style={{
          padding: "10px 20px", borderRadius: 999,
          background: F.pine, color: F.paper,
          fontWeight: 700, fontSize: 14, display: "inline-flex", alignItems: "center", gap: 6,
        }}>See what's on</a>
      </div>
    </header>
  );
}

// ─── Hero — simplified (no overlay card) ────────────────────────
function FHero() {
  return (
    <section style={{
      display: "grid", gridTemplateColumns: "1fr 1fr",
      minHeight: 640, background: F.paper,
    }}>
      <div style={{
        padding: "96px 64px 96px 80px", display: "flex",
        flexDirection: "column", justifyContent: "center", maxWidth: 720,
      }}>
        <Eyebrow color={F.council} style={{ marginBottom: 24 }}>
          The Council · Spring & summer 2026
        </Eyebrow>
        <h1 style={{
          fontFamily: "var(--font-display)", fontWeight: 800,
          fontSize: 72, lineHeight: 1.02, letterSpacing: "-0.02em",
          color: F.navy, margin: 0, marginBottom: 28, textWrap: "balance",
        }}>
          Made on the High Plains.{" "}
          <span style={{ color: F.council }}>Hung by your neighbors.</span>
        </h1>
        <p style={{
          fontSize: 19, lineHeight: 1.55, color: F.navy,
          maxWidth: 520, margin: 0, marginBottom: 40,
        }}>
          RoCo Arts Council is the volunteer-run arts council of Rooks County,
          Kansas — a gallery on Main Street, twelve barns, and a wall of painted
          quilt blocks you can see from the highway.
        </p>
        <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
          <a href="#/events" style={{
            padding: "16px 28px", borderRadius: 999,
            background: F.council, color: F.paper,
            fontWeight: 700, fontSize: 16, display: "inline-flex", alignItems: "center", gap: 8,
          }}>See what's on</a>
          <a href="#/about"><ArrowLink color={F.council}>Visit the Annex</ArrowLink></a>
        </div>
      </div>
      <div style={{ position: "relative", overflow: "hidden", background: F.paper, padding: "48px 80px 48px 0" }}>
        <div style={{ width: "100%", height: "100%", overflow: "hidden" }}>
          <QuiltGrid cols={5} rows={4} cellSize={120} seed={11}
            palette={["#45217A", "#F3CF03", "#C81344", "#78BE4D", "#4195D3", "#01234B", "#FBF7EE"]}
            emptyChance={0.06}
          />
        </div>
      </div>
    </section>
  );
}

// ─── What's on (from B — events) ────────────────────────────────
function FWhatsOn() {
  const events = [
    { day: "16", mo: "May", weekday: "Saturday", title: "Spring Open Studios",
      slug: "spring-open-studios",
      meta: "Twelve sites across Rooks County · 10 am – 5 pm",
      tag: "Free · drop in", img: F.leaf },
    { day: "07", mo: "Jun", weekday: "Sunday", title: "Quilt Wall Block Party",
      slug: "quilt-wall-block-party",
      meta: "The Annex · paint-along, chili after · 1 – 4 pm",
      tag: "Pay what you can", img: F.meadow },
    { day: "19", mo: "Jun", weekday: "Friday", title: "Plains Songbook",
      slug: "plains-songbook",
      meta: "Old Methodist Church · three songwriters · 7:30 pm",
      tag: "$12 · $6 students", img: F.pineDeep },
  ];
  return (
    <section style={{ padding: "112px 80px", background: F.paper }}>
      <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 56, gap: 48 }}>
        <div>
          <Eyebrow color={F.pine} style={{ marginBottom: 14 }}>Events & Learning</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 56, lineHeight: 1.02, letterSpacing: "-0.02em",
            color: F.navy, margin: 0,
          }}>
            Three things to come see this season.
          </h2>
        </div>
        <a href="#/events"><ArrowLink color={F.pine} style={{ fontSize: 15, paddingBottom: 6 }}>
          See the full calendar
        </ArrowLink></a>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
        {events.map((e, i) => (
          <article key={i} style={{
            background: "#FFFFFF", borderRadius: 8, overflow: "hidden",
            display: "flex", flexDirection: "column",
            boxShadow: "0 1px 2px rgba(31,27,46,0.05), 0 12px 32px rgba(31,27,46,0.05)",
          }}>
            <div style={{
              height: 180, background: e.img, position: "relative",
              display: "flex", alignItems: "flex-end", padding: 22,
            }}>
              <svg style={{ position: "absolute", top: 0, right: 0 }} width="64" height="64" viewBox="0 0 100 100">
                <polygon points="0,0 100,0 100,100" fill="rgba(255,255,255,0.55)" />
              </svg>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                color: F.pineDeep, lineHeight: 0.9, letterSpacing: "-0.03em",
              }}>
                <div style={{ fontSize: 64 }}>{e.day}</div>
                <div style={{ fontSize: 16, marginTop: 4, fontFamily: "var(--font-body)", fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase" }}>
                  {e.mo} · {e.weekday}
                </div>
              </div>
            </div>
            <div style={{ padding: "28px 28px 24px", flex: 1 }}>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                fontSize: 24, lineHeight: 1.15, color: F.navy, margin: 0, marginBottom: 10,
              }}>{e.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.5, color: F.mute, margin: 0, marginBottom: 18 }}>
                {e.meta}
              </p>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontWeight: 600, fontSize: 13.5, color: F.navy }}>{e.tag}</span>
                <a href={`#/events/${e.slug}`} style={{
                  display: "inline-flex", alignItems: "center", gap: 6,
                  padding: "8px 16px", borderRadius: 999,
                  background: F.pine, color: F.paper, fontSize: 13, fontWeight: 700,
                }}>Details <span>→</span></a>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ─── Artists — Inky blue full bleed (from B) ───────────────────
function FArtists() {
  const tiles = [
    { name: "Maribel Cortez", slug: "maribel-cortez",  craft: "Quilter · Stockton",       shade: F.artistsLake },
    { name: "Henry Plumb",    slug: "henry-plumb",      craft: "Letterpress · Plainville", shade: "#6E94BC" },
    { name: "Aïsha Diop",     slug: "aisha-diop",       craft: "Photographer · Palco",     shade: "#0E3E78" },
    { name: "Cal Westra",     slug: "cal-westra",       craft: "Woodworker · Webster",     shade: "#1F5A8C" },
    { name: "Sun Park",       slug: "sun-park",         craft: "Painter · Stockton",       shade: "#6E94BC" },
    { name: "Joe Beaumont",   slug: "joe-beaumont",     craft: "Printmaker · Plainville",  shade: "#0E3E78" },
  ];
  return (
    <section style={{
      background: F.artists, color: F.paper,
      padding: "112px 80px", position: "relative", overflow: "hidden",
    }}>
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1.4fr",
        gap: 80, alignItems: "start",
      }}>
        <div style={{ paddingTop: 16 }}>
          <Eyebrow color="#6E94BC" style={{ marginBottom: 18 }}>Artists</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 56, lineHeight: 1.02, letterSpacing: "-0.02em",
            color: F.paper, margin: 0, marginBottom: 24,
          }}>
            Twenty-eight makers,<br />all in one county.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.85, marginBottom: 36, maxWidth: 420 }}>
            Quilters and woodworkers, painters and printers. Most have day jobs.
            All have studios you can visit during Open Studios weekends.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="#/artists" style={{
              padding: "14px 24px", borderRadius: 999,
              background: F.paper, color: F.artistsDeep,
              fontWeight: 700, fontSize: 14.5,
              display: "inline-flex", alignItems: "center", gap: 8,
            }}>
              Browse all artists <span>→</span>
            </a>
            <a href="#/contact" style={{
              padding: "14px 24px", borderRadius: 999,
              border: "1.5px solid rgba(251,247,238,0.4)", color: F.paper,
              fontWeight: 700, fontSize: 14.5,
              display: "inline-flex", alignItems: "center", gap: 8,
            }}>
              Submit a profile
            </a>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {tiles.map((t, i) => (
            <a key={i} href={`#/artists/${t.slug}`} style={{
              background: t.shade, borderRadius: 8, overflow: "hidden",
              display: "flex", flexDirection: "column",
              aspectRatio: "4 / 5", textDecoration: "none",
            }}>
              <div style={{ flex: 1, position: "relative" }}>
                <div style={{
                  position: "absolute", inset: 0,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--font-display)", fontWeight: 800,
                  color: "rgba(251,247,238,0.5)", fontSize: 96, letterSpacing: "-0.05em",
                }}>
                  {t.name.split(" ").map(w => w[0]).join("")}
                </div>
                <svg style={{ position: "absolute", top: 0, right: 0 }} width="42" height="42" viewBox="0 0 100 100">
                  <polygon points="0,0 100,0 100,100" fill="rgba(251,247,238,0.18)" />
                </svg>
              </div>
              <div style={{ background: F.artistsDeep, padding: "14px 16px 16px" }}>
                <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 800,
                  fontSize: 17, color: F.paper, lineHeight: 1.1, marginBottom: 4,
                }}>{t.name}</div>
                <div style={{ fontSize: 12, opacity: 0.7 }}>{t.craft}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Programs (C-style table, REWORDED — generic) ──────────────
function FPrograms() {
  // Bodies softened so we're not promising a fixed catalog.
  const rows = [
    { n: "01", label: "Council", color: F.council, title: "Exhibitions at the Annex",
      body: "Rotating shows in the old hardware store on Main.",
      times: "Thu – Sun · year-round" },
    { n: "02", label: "Council", color: F.council, title: "Traveling Art Gallery",
      body: "A rotating selection of RoCo work that visits libraries, schools, and community centers across the county.",
      times: "By the month" },
    { n: "03", label: "Council", color: F.council, title: "Art Supplies",
      body: "A shared closet at the Annex — donate what you have, take what you need.",
      times: "Open during gallery hours" },
    { n: "04", label: "Events",  color: F.pine, title: "County-wide Open Studios",
      body: "Barns and back rooms open to visitors a couple of weekends a year.",
      times: "Spring · fall" },
    { n: "05", label: "Events",  color: F.pine, title: "Classes",
      body: "Drop-in and series-based classes in printmaking, quilting, ceramics, and more.",
      times: "Most weeknights" },
    { n: "06", label: "Events",  color: F.pine, title: "Youth & schools",
      body: "Artist residencies in elementary schools and after-school workshops at the library.",
      times: "School year" },
    { n: "07", label: "News",    color: F.news, title: "The Quilt Wall",
      body: "Painted barn-quilt panels added each year, chosen from countywide proposals.",
      times: "Apply by Mar 14" },
  ];
  return (
    <section style={{ padding: "112px 80px 96px", background: F.paper }}>
      <div style={{
        display: "grid", gridTemplateColumns: "auto 1fr auto",
        gap: 64, marginBottom: 48, alignItems: "end",
      }}>
        <div>
          <Eyebrow color={F.council} style={{ marginBottom: 14 }}>The Council · Programs</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 60, lineHeight: 1.0, letterSpacing: "-0.025em",
            color: F.navy, margin: 0,
          }}>
            What we do.
          </h2>
        </div>
        <div />
        <div style={{ paddingBottom: 16, maxWidth: 320 }}>
          <p style={{ fontSize: 15, lineHeight: 1.55, color: F.mute, margin: 0, marginBottom: 10, textAlign: "right" }}>
            Year-round, county-wide, and mostly free.
          </p>
          <div style={{ textAlign: "right" }}>
            <a href="#/about"><ArrowLink color={F.council}>How we're funded</ArrowLink></a>
          </div>
        </div>
      </div>

      <div style={{ borderTop: `2px solid ${F.navy}`, borderBottom: `2px solid ${F.navy}` }}>
        {rows.map((r, i) => (
          <div key={r.n} style={{
            display: "grid",
            gridTemplateColumns: "220px 1.6fr 1.4fr 200px 140px",
            gap: 32, alignItems: "center",
            padding: "28px 0",
            borderTop: i === 0 ? "none" : `1px solid ${F.stone}`,
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <span style={{
                width: 12, height: 12, borderRadius: 999, background: r.color, flex: "0 0 auto",
              }} />
              <span style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                fontSize: 32, lineHeight: 0.95, color: r.color, letterSpacing: "-0.02em",
              }}>{r.label}</span>
            </div>
            <div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                fontSize: 28, lineHeight: 1.1, color: F.navy, margin: 0, letterSpacing: "-0.015em",
              }}>{r.title}</h3>
            </div>
            <p style={{ fontSize: 14.5, lineHeight: 1.55, color: F.mute, margin: 0 }}>{r.body}</p>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: F.navy, letterSpacing: "0.04em" }}>
              {r.times}
            </div>
            <div style={{ textAlign: "right" }}>
              <a href="#/news"><ArrowLink color={r.color}>Read</ArrowLink></a>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── News ticker (from C — black strip) ─────────────────────────
function FNewsStrip() {
  return (
    <section style={{
      background: F.news, color: F.paper,
      padding: "32px 80px",
      display: "grid", gridTemplateColumns: "auto auto 1fr auto", gap: 32, alignItems: "center",
    }}>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 10,
        background: F.yellow, color: F.news, padding: "8px 16px",
        fontSize: 11, fontWeight: 700, letterSpacing: "0.18em",
        textTransform: "uppercase",
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: F.news }} />
        News · Open call
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, letterSpacing: "-0.01em" }}>
        2027 Quilt Wall grant round
      </div>
      <div style={{ fontSize: 14, opacity: 0.7 }}>
        Six painted panels. Countywide proposals welcome. Closes Mar 14, 2027.
      </div>
      <a href="#/news/2027-quilt-wall-grant-round" style={{
        padding: "10px 20px",
        background: F.yellow, color: F.news, fontWeight: 700, fontSize: 13.5,
        display: "inline-flex", alignItems: "center", gap: 6,
      }}>Read open call <span>→</span></a>
    </section>
  );
}

// ─── Inline newsletter signup (used in colophon) ─────────────────
function NewsletterInline() {
  const [email, setEmail] = React.useState('');
  const [state, setState] = React.useState('idle');
  const submit = async (e) => {
    e.preventDefault();
    if (!email || state === 'loading') return;
    setState('loading');
    try {
      await API.subscribeNewsletter(email);
      setState('done');
    } catch { setState('error'); }
  };
  if (state === 'done') return (
    <span style={{ color: F.pine, fontWeight: 600, fontSize: 14 }}>✓ You're on the list.</span>
  );
  return (
    <form onSubmit={submit} style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
      <input type="email" required placeholder="your@email.com" value={email}
        onChange={e => setEmail(e.target.value)}
        style={{
          padding: '10px 14px', borderRadius: 6, fontSize: 14, fontFamily: 'inherit',
          border: `1.5px solid ${F.stone}`, background: '#fff', color: F.ink, outline: 'none',
          width: 200,
        }} />
      <button type="submit" disabled={state === 'loading'} style={{
        padding: '10px 18px', borderRadius: 999, border: 'none',
        background: F.council, color: F.paper, fontWeight: 700, fontSize: 13.5, cursor: 'pointer',
        opacity: state === 'loading' ? 0.7 : 1,
      }}>{state === 'loading' ? 'Sending…' : 'Subscribe'}</button>
    </form>
  );
}

// ─── Colophon — note from the Council + board + stats + pop CTA ──
function FColophon() {
  return (
    <section style={{ background: F.paper, padding: "112px 80px 96px" }}>
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr",
        gap: 80,
        paddingBottom: 56,
        borderBottom: `1px solid ${F.stone}`,
      }}>
        <div>
          <Eyebrow color={F.coral} style={{ marginBottom: 18 }}>A note from the Council</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 56, lineHeight: 1.02, letterSpacing: "-0.025em",
            color: F.navy, margin: 0, marginBottom: 32,
          }}>
            Where we've been.<br />What's next.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: F.navy, margin: 0, marginBottom: 18 }}>
            We've spent the last eighteen months knocking on doors, reopening
            the books, and signing a lease on the old hardware store. Eighty-two
            volunteers. Twelve barns. One wall that needs a quilt.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: F.navy, margin: 0, marginBottom: 24 }}>
            We are not too proud to ask you to help. An hour, an idea, or twenty
            dollars — we can use all three.
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            {/* THE one Coral pop on the page */}
            <a href="#/contact" style={{
              padding: "16px 26px", borderRadius: 999,
              background: F.coral, color: F.councilDeep, fontWeight: 700, fontSize: 15.5,
              display: "inline-flex", alignItems: "center", gap: 8,
            }}>Become a member <span>→</span></a>
            <a href="#/contact" style={{
              padding: "15px 24px", borderRadius: 999,
              border: `1.5px solid ${F.council}`, color: F.council, fontWeight: 700, fontSize: 15,
            }}>Volunteer</a>
            <NewsletterInline />
          </div>
        </div>

        <div>
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "10px 20px", fontSize: 14, lineHeight: 1.4 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: F.mute, gridColumn: "1 / 3", marginBottom: 8 }}>The board · Stockton, KS</div>
            {[
              ["Chair", "Mariella Ortega"],
              ["Vice-chair", "Sam Whitfield"],
              ["Treasurer", "Linda Cho"],
              ["Secretary", "Jordan Estrada"],
              ["Member at large", "Pat Lindsey"],
              ["Member at large", "Devin Wuori"],
            ].map(([role, name]) => (
              <React.Fragment key={role + name}>
                <div style={{ color: F.mute, paddingRight: 16, borderRight: `1px solid ${F.stone}` }}>{role}</div>
                <div style={{ color: F.navy, fontWeight: 600 }}>{name}</div>
              </React.Fragment>
            ))}
            <div style={{ gridColumn: "1 / 3", marginTop: 18, fontSize: 13.5, color: F.mute, lineHeight: 1.5 }}>
              Funded by the NEA, the Kansas Creative Arts Industries Commission,
              and 341 individual neighbors. <a style={{ color: F.council, fontWeight: 600 }}>Annual report (PDF)</a>.
            </div>
          </div>

          <div style={{
            marginTop: 40, padding: "24px 0",
            borderTop: `1px solid ${F.stone}`, borderBottom: `1px solid ${F.stone}`,
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16,
          }}>
            {[
              { n: "28", l: "RoCo artists", c: F.artists },
              { n: "47", l: "Events this season", c: F.pine },
              { n: "12", l: "Painted barn quilts", c: F.coral },
              { n: "341", l: "Member households", c: F.council },
            ].map((s, i) => (
              <div key={i} style={{ borderLeft: i === 0 ? "none" : `1px solid ${F.stone}`, paddingLeft: i === 0 ? 0 : 16 }}>
                <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 800,
                  fontSize: 44, lineHeight: 0.9, color: s.c, letterSpacing: "-0.03em",
                }}>{s.n}</div>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: F.mute, marginTop: 8 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Footer (same across all directions) ────────────────────────
function FFooter() {
  return (
    <footer style={{ background: "#000000", color: F.paper, padding: "64px 80px 32px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 56, marginBottom: 56 }}>
        <div>
          <a href="#/"><Logo height={56} /></a>
          <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.75, maxWidth: 280, marginTop: 24 }}>
            A 501(c)(3) volunteer-run arts council serving Rooks County, Kansas, since 1978.
          </p>
        </div>
        {[
          { eye: "Explore", links: [
            { label: "What's on", href: "#/events" },
            { label: "Artists", href: "#/artists" },
            { label: "Programs", href: "#/about" },
            { label: "News & Stories", href: "#/news" },
          ]},
          { eye: "Get involved", links: [
            { label: "Volunteer", href: "#/contact" },
            { label: "Become a member", href: "#/contact" },
            { label: "Donate", href: "#/contact" },
            { label: "Newsletter", href: "#/news" },
          ]},
          { eye: "Contact & Visit", links: [
            { label: "hello@rocoarts.org", href: "mailto:hello@rocoarts.org" },
            { label: "(785) 555-0184", href: "tel:+17855550184" },
            { label: "119 N Main · Stockton, KS", href: "#/about" },
            { label: "Thu – Sun · 11 am – 4 pm", href: "#/about" },
          ]},
        ].map((col, i) => (
          <div key={i}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: F.yellow, marginBottom: 18 }}>
              {col.eye}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 14.5, lineHeight: 1.45 }}>
              {col.links.map((l, j) => (
                <a key={j} href={l.href} style={{ opacity: 0.9, color: "inherit" }}>{l.label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: "1px solid rgba(251,247,238,0.2)", paddingTop: 24, display: "flex", justifyContent: "space-between", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.7 }}>
        <span>© 2026 RoCo Arts Council</span>
        <span>Accessibility</span>
        <span>Land of the Kaw & Pawnee</span>
        <span>Built by neighbors</span>
      </div>
    </footer>
  );
}

window.HomepageFinal = HomepageFinal;
