// programs-index.jsx — RoCo Arts Council programs directory

const PI = {
  paper: "#FBF7EE",
  stone: "#E8E2D3",
  navy: "#01234B",
  ink: "#1F1B2E",
  mute: "#6B6577",
  council: "#45217A",
  councilDeep: "#2B1450",
  councilLight: "#B59FD4",
  councilWhisper: "#EFE7F8",
  pine: "#2F7A2E",
  meadow: "#78BE4D",
  yellow: "#F3CF03",
  coral: "#FF7A5C",
};

const PROGRAMS_MOCK = [
  {
    id: "barn-quilt-wall",
    years: "2014 — ongoing",
    title: "The Barn Quilt Wall",
    subtitle: "Painted barn-quilt panels you can see from the highway",
    status: "open-call",
    statusLabel: "Open call · 2027 panels",
    currentWork: "Six new panels. Proposals due Mar 14.",
    description: "Twelve large-scale painted quilt blocks on barns and grain elevators across Rooks County. Designed by neighbors, painted by volunteers, mounted with a borrowed lift. Six more going up in 2027.",
    stats: [{ n: "12", l: "panels up" }, { n: "7", l: "towns" }],
  },
  {
    id: "downtown-mural-project",
    years: "2019 — ongoing",
    title: "The Downtown Mural Project",
    subtitle: "Painted walls on Main Street and the alley behind it",
    status: "in-progress",
    statusLabel: "In progress",
    currentWork: "The Garrison Avenue mural · finishing this fall",
    description: "Eight murals on the buildings of downtown Stockton and Plainville — most of them painted with the building owner's permission and a folding ladder. We commission one new one a year.",
    stats: [{ n: "8", l: "murals up" }, { n: "2", l: "downtowns" }],
  },
  {
    id: "vending-machine-art-shop",
    years: "Opening Spring 2027",
    title: "The Vending Machine Art Shop",
    subtitle: "A converted cigarette machine, dispensing $5 art, in the Annex lobby",
    status: "coming-soon",
    statusLabel: "Opening Spring 2027",
    currentWork: "We'll tell you when it opens.",
    description: "A 1970s cigarette machine, restored to working order, dispensing tiny artworks by RoCo artists for $5 each. Pulled by hand. Twenty-two slots. Opening at the Annex in Spring 2027.",
    stats: [{ n: "22", l: "slots" }, { n: "$5", l: "per pull" }],
  },
  {
    id: "silhouette-project",
    years: "2008 — 2014",
    title: "The Silhouette Project",
    subtitle: "Every kindergartner's profile, cut from black paper, 2008 – 2014",
    status: "retired",
    statusLabel: "Retired · 2014",
    currentWork: null,
    description: "For six years, every kindergartner in Rooks County sat for a silhouette — a profile traced from a shadow on a sheet, cut from black paper, sent home with a frame. We made 412 of them. Then we stopped.",
    stats: [{ n: "412", l: "silhouettes cut" }, { n: "6", l: "school years" }],
  },
];

const STATUS_CONFIG = {
  "open-call":   { bg: PI.yellow,        color: PI.councilDeep, dot: PI.councilDeep, label: "Open call" },
  "in-progress": { bg: PI.pine,          color: "#FBF7EE",      dot: PI.meadow,      label: "In progress" },
  "coming-soon": { bg: PI.councilWhisper,color: PI.council,     dot: PI.councilLight,label: "Opening soon" },
  "retired":     { bg: PI.stone,         color: PI.mute,        dot: PI.mute,        label: "Retired" },
};

function ProgramsNav() {
  const items = [
    { label: "What's on", stream: "events",  path: "#/events" },
    { label: "Artists",   stream: "artists", path: "#/artists" },
    { label: "Programs",  stream: "council", path: "#/programs", active: true },
    { 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 ${PI.stone}`,
      background: PI.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: PI.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: PI.navy }}>News</a>
        <a href="#/events" style={{
          padding: "10px 20px", borderRadius: 999,
          background: PI.pine, color: PI.paper,
          fontWeight: 700, fontSize: 14,
        }}>See what's on</a>
      </div>
    </header>
  );
}

function ProgramsFooter() {
  return (
    <footer style={{ background: "#000000", color: PI.paper, padding: "48px 80px 28px" }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontSize: 12.5, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.7,
      }}>
        <span>© 2026 RoCo Arts Council</span>
        <span>The Annex · 119 N Main · Stockton, KS</span>
        <span>hello@rocoarts.org</span>
      </div>
    </footer>
  );
}

function ProgramCard({ p, index }) {
  const imageRight = index % 2 === 0; // even = content left / image right, odd = image left / content right

  const contentCol = (
    <div style={{ padding: "48px 52px", display: "flex", flexDirection: "column", background: "#fff" }}>
      {/* Year + subtitle */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
        <span style={{
          padding: "3px 10px", borderRadius: 999,
          border: `1.5px solid ${PI.councilLight}`,
          fontSize: 11.5, fontWeight: 700, color: PI.council, whiteSpace: "nowrap",
        }}>{p.years}</span>
        <span style={{ fontSize: 12.5, color: PI.mute, lineHeight: 1.4 }}>{p.subtitle}</span>
      </div>

      {/* Title */}
      <h3 style={{
        fontFamily: "var(--font-display)", fontWeight: 800,
        fontSize: 36, lineHeight: 1.05, letterSpacing: "-0.02em",
        color: PI.navy, margin: "0 0 18px",
      }}>{p.title}</h3>

      {/* Description */}
      <p style={{ fontSize: 15, lineHeight: 1.65, color: PI.ink, margin: "0 0 auto", paddingBottom: 32 }}>
        {p.description}
      </p>

      {/* Stats + CTA */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 24, borderTop: `1px solid ${PI.stone}` }}>
        <div style={{ display: "flex", gap: 28 }}>
          {p.stats.map((s, i) => (
            <div key={i}>
              <span style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                fontSize: 26, color: PI.council, letterSpacing: "-0.02em",
              }}>{s.n}</span>
              <span style={{ fontSize: 12, color: PI.mute, marginLeft: 6 }}>{s.l}</span>
            </div>
          ))}
        </div>
        {p.status === "coming-soon" ? (
          <span style={{ fontSize: 14, color: PI.mute, fontWeight: 600 }}>Get notified</span>
        ) : (
          <a href={`#/programs/${p.id}`} style={{
            fontSize: 14, fontWeight: 700, color: PI.council,
            display: "inline-flex", alignItems: "center", gap: 5,
          }}>Read the program →</a>
        )}
      </div>
    </div>
  );

  const imageCol = (
    <div
      data-image-slot={p.title}
      style={{
        background: PI.councilWhisper,
        minHeight: 320,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}
    >
      <div style={{ textAlign: "center", color: PI.councilLight, fontSize: 13 }}>
        <div style={{ fontSize: 32, marginBottom: 8, opacity: 0.5 }}>⬚</div>
        <div style={{ fontSize: 13, opacity: 0.7 }}>{p.title}</div>
      </div>
    </div>
  );

  return (
    <article style={{
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
      borderBottom: `1px solid ${PI.stone}`,
    }}>
      {imageRight ? <>{contentCol}{imageCol}</> : <>{imageCol}{contentCol}</>}
    </article>
  );
}

function ProgramsIndex() {
  const [programs, setPrograms] = React.useState(PROGRAMS_MOCK);

  React.useEffect(() => {
    if (!ROCO_WP.useMockData) {
      API.programs().then(data => { if (data && data.length) setPrograms(data); }).catch(() => {});
    }
  }, []);

  const openCall = programs.find(p => p.status === "open-call");

  return (
    <div className="roco-root" style={{ background: PI.paper, color: PI.navy, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <ProgramsNav />

      {/* Hero */}
      <section style={{ background: "#000000", color: PI.paper, padding: "80px 80px 72px", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 80, alignItems: "center" }}>
          {/* Left: headline + body + CTAs */}
          <div>
            <Eyebrow color={PI.councilLight} style={{ marginBottom: 20 }}>The Council · Programs</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 80, lineHeight: 0.95, letterSpacing: "-0.03em",
              color: PI.paper, margin: "0 0 28px",
            }}>
              Long, slow,<br />
              <span style={{ color: PI.yellow }}>county-wide.</span>
            </h1>
            <p style={{ fontSize: 17, lineHeight: 1.65, opacity: 0.8, margin: "0 0 32px", maxWidth: 480 }}>
              Programs are the bigger things — the ones that aren't done after one Saturday.
              They take years, they outlast volunteers, and they're the reason the Council exists.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              {openCall && (
                <a href={`#/programs/${openCall.id}`} style={{
                  padding: "14px 24px", borderRadius: 999,
                  background: PI.yellow, color: PI.councilDeep,
                  fontWeight: 700, fontSize: 14.5, display: "inline-flex", alignItems: "center", gap: 8,
                }}>Sponsor a 2027 barn-quilt panel →</a>
              )}
              <a href="#/about" style={{
                padding: "13px 22px", borderRadius: 999,
                border: "1.5px solid rgba(251,247,238,0.35)", color: PI.paper,
                fontWeight: 700, fontSize: 14.5,
              }}>How we're funded</a>
            </div>
          </div>

          {/* Right: big stat */}
          <div style={{
            border: "1px solid rgba(251,247,238,0.12)",
            padding: "40px 48px",
            background: "rgba(251,247,238,0.04)",
          }}>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 140, lineHeight: 1, letterSpacing: "-0.04em",
              color: PI.yellow, marginBottom: 12,
            }}>{programs.length}</div>
            <div style={{
              fontSize: 12, fontWeight: 700, letterSpacing: "0.2em",
              textTransform: "uppercase", color: PI.paper, opacity: 0.9, marginBottom: 12,
            }}>Programs on the page</div>
            <div style={{ fontSize: 14, lineHeight: 1.6, opacity: 0.6 }}>
              Some running, some on the kitchen table, some retired into the archive.
            </div>
          </div>
        </div>
      </section>

      {/* Open call strip */}
      {openCall && (
        <section style={{
          background: PI.yellow, color: PI.councilDeep,
          padding: "18px 80px",
          display: "grid", gridTemplateColumns: "auto auto 1fr auto",
          gap: 28, alignItems: "center",
        }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            background: PI.councilDeep, color: PI.yellow,
            padding: "5px 12px", borderRadius: 3,
            fontSize: 10.5, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase",
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 999, background: PI.yellow }} />
            Open call · live now
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 20, letterSpacing: "-0.01em" }}>
            {openCall.title}
          </div>
          <div style={{ fontSize: 14, opacity: 0.75 }}>
            Postmarked Mar 14, 2027 · $250 honorarium · open to Rooks County residents
          </div>
          <a href={`#/programs/${openCall.id}`} style={{
            padding: "10px 20px", borderRadius: 999,
            background: PI.councilDeep, color: PI.yellow,
            fontWeight: 700, fontSize: 13, display: "inline-flex", alignItems: "center", gap: 6,
          }}>Read the open call →</a>
        </section>
      )}

      {/* List header */}
      <section style={{ padding: "64px 80px 32px", background: PI.paper }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end", marginBottom: 40 }}>
          <div>
            <Eyebrow color={PI.council} style={{ marginBottom: 14 }}>The list</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 56, lineHeight: 1.0, letterSpacing: "-0.025em",
              color: PI.navy, margin: 0,
            }}>Every program, listed.</h2>
          </div>
          <p style={{ fontSize: 14.5, lineHeight: 1.65, color: PI.mute, margin: 0, maxWidth: 400 }}>
            Sorted by what's most active first. Each card shows when it's running and what's happening right now.
          </p>
        </div>
      </section>

      {/* Program cards */}
      <section style={{ padding: "0 80px 80px", background: PI.paper }}>
        <div style={{ border: `1px solid ${PI.stone}` }}>
          {programs.map((p, i) => <ProgramCard key={p.id} p={p} index={i} />)}
        </div>
      </section>

      {/* How it works */}
      <section style={{ padding: "80px 80px 96px", background: PI.councilWhisper }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "start" }}>
          <div>
            <Eyebrow color={PI.council} style={{ marginBottom: 16 }}>How it works</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 48, lineHeight: 1.0, letterSpacing: "-0.02em",
              color: PI.navy, margin: "0 0 20px",
            }}>What makes a program a program.</h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.65, color: PI.ink, margin: "0 0 16px" }}>
              A program is bigger than a class and longer-lived than a season. It outlasts volunteers,
              gets a name people repeat, and turns into a thing the county does.
            </p>
            <p style={{ fontSize: 14.5, lineHeight: 1.65, color: PI.mute, margin: 0 }}>
              Anyone can propose one. Most don't make it past the kitchen table.
              The ones that do, get put on this page.
            </p>
          </div>
          <div>
            {[
              { n: "01", title: "A name and a sketch.", body: "Two sentences and a paper bag drawing. Email it or drop it at the Annex." },
              { n: "02", title: "A small first try.", body: "We give it one Saturday. If nobody comes, we know." },
              { n: "03", title: "A second year.", body: "If a program makes it to year two it gets a budget line and a page on this site." },
              { n: "04", title: "A retirement, eventually.", body: "Most programs end well before they end badly. The archive is where they live after." },
            ].map((step, i) => (
              <div key={step.n} style={{
                display: "flex", gap: 20, alignItems: "start",
                padding: "24px 0",
                borderTop: i === 0 ? "none" : `1px solid rgba(69,33,122,0.15)`,
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 999,
                  background: PI.councilDeep, color: PI.paper,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "var(--font-display)", fontWeight: 800,
                  fontSize: 13, flexShrink: 0,
                }}>{step.n}</div>
                <div style={{ paddingTop: 6 }}>
                  <div style={{ fontWeight: 700, fontSize: 16, color: PI.navy, marginBottom: 6 }}>
                    {step.title}
                  </div>
                  <div style={{ fontSize: 14.5, lineHeight: 1.55, color: PI.mute }}>
                    {step.body}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ProgramsFooter />
    </div>
  );
}

window.ProgramsIndex = ProgramsIndex;
window.ProgramsNav = ProgramsNav;
window.ProgramsFooter = ProgramsFooter;