// programs-detail.jsx — Program detail page (all sections, conditionally shown)
// Every section is optional except Hero, Story, and Timeline.
// Sections render based on what data is present in the program object.

const PD = {
  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",
  news: "#1F1B2E",
};

// ─── Mock program data (Barn Quilt Wall) ──────────────────────────
const BARN_QUILT_WALL = {
  id: "barn-quilt-wall",
  years: "2014 — ongoing",
  category: "Council · Program",
  title: "The Barn Quilt Wall",
  subtitle: "Painted barn-quilt panels you can see from the highway",
  status: "open-call",
  statusLabel: "Open call · 2027 panels",
  statusDeadline: "Postmarked Mar 14, 2027",
  statusDetail: "$250 honorarium · open to Rooks County residents",
  stats: [
    { n: "12", l: "panels up" },
    { n: "7",  l: "towns" },
    { n: "8×8", l: "feet each" },
    { n: "2027", l: "next round" },
  ],
  story: {
    heading: "How the Quilt Wall began.",
    started: "Started 2014",
    paragraphs: [
      "The first panel went up in 2014 on Walt Henning's barn on K-18, east of Stockton. Walt had been woodturning for thirty years and figured he could figure out a quilt block. He was right. It took three Saturdays and a borrowed man-lift.",
      "The second panel followed in 2015. Then two more in 2016. By 2019 the Council had a waiting list of barn owners and a small budget from the Kansas Creative Arts Industries Commission. The panels got bigger — eight feet square — and a selection committee started meeting every March.",
      "Twelve panels are up across seven towns. Six more are planned for 2027. The open call closes March 14. Any Rooks County resident can propose a block.",
    ],
  },
  locations: [
    { n: "01", title: "Flying Geese", town: "Stockton", road: "K-18 east", designer: "Walt Henning", year: 2014 },
    { n: "02", title: "Log Cabin", town: "Plainville", road: "US-183 north", designer: "Maribel Cortez", year: 2015 },
    { n: "03", title: "Double Wedding Ring", town: "Palco", road: "K-9 west", designer: "Lillian Schaeffer", year: 2016 },
    { n: "04", title: "Bear Paw", town: "Damar", road: "County road N", designer: "Roselynne McGee", year: 2016 },
    { n: "05", title: "Ohio Star", town: "Webster", road: "K-9 east", designer: "Ginnie Halverson", year: 2018 },
    { n: "06", title: "Dresden Plate", town: "Stockton", road: "Main St.", designer: "Maribel Cortez", year: 2019 },
    { n: "07", title: "Pinwheel", town: "Logan", road: "K-9 east", designer: "Greta Lindstrom", year: 2021 },
    { n: "08", title: "Lone Star", town: "Woodston", road: "K-18 west", designer: "Glenna Halverson", year: 2021 },
    { n: "09", title: "Storm at Sea", town: "Zurich", road: "US-183 south", designer: "Pat Lindsey", year: 2022 },
    { n: "10", title: "Grandmother's Flower Garden", town: "Plainville", road: "US-183", designer: "Lillian Schaeffer", year: 2023 },
    { n: "11", title: "Nine Patch", town: "Palco", road: "K-9", designer: "Community panel", year: 2024 },
    { n: "12", title: "Rail Fence", town: "Stockton", road: "K-18 west", designer: "Maribel Cortez", year: 2025 },
  ],
  timeline: [
    { year: 2014, text: "First panel up on Walt Henning's barn, K-18 east of Stockton. Three Saturdays, one borrowed man-lift." },
    { year: 2015, text: "Second panel. The county road crew helped with the lift." },
    { year: 2016, text: "Two panels. First open call. Twenty-two proposals; four were installed." },
    { year: 2018, text: "KCAIC grant; first paid honorarium ($150). Selection committee formalized." },
    { year: 2019, text: "Waiting list opens. Six proposals received for three slots." },
    { year: 2021, text: "Two panels — Lone Star and Pinwheel — installed the same weekend.", highlight: true },
    { year: 2022, text: "Honorarium raised to $250. Storm at Sea becomes the most-photographed panel." },
    { year: 2023, text: "Tenth panel installed. County tourism board adds the Quilt Wall to the official driving map." },
    { year: 2024, text: "Community panel designed by the Palco Elementary after-school program." },
    { year: 2025, text: "Twelfth panel up. Six more planned for 2027. Open call now closed for 2026." },
    { year: 2027, text: "Six new panels. Proposals due March 14, 2027.", future: true },
  ],
  getInvolved: {
    intro: "Open to any Rooks County resident. $250 honorarium per selected design. Lunch always.",
    steps: [
      { title: "Sketch a block.", body: "Any traditional quilt block pattern, redrawn or adapted. A rough sketch is fine — no formal art training required." },
      { title: "Write two sentences.", body: "Why this block? Why your barn or building? That's the whole proposal." },
      { title: "Mail or drop it off by March 14.", body: "RoCo Arts Council, 119 N Main, Stockton KS 67669. Or email hello@rocoarts.org with photos." },
      { title: "If selected, we paint together.", body: "$250 honorarium, all materials provided, painting days in April and May. Lunch both days." },
    ],
  },
  sponsor: {
    intro: "Each panel costs roughly $800 to produce — materials, paint, hardware, and the man-lift rental. Sponsorships cover the gap between the grant and the real cost.",
    tiers: [
      { label: "Paint & brushes", amount: "$100", desc: "Covers materials for one painting day." },
      { label: "A panel", amount: "$500", desc: "Covers materials for one complete panel. Named in the program." },
      { label: "A panel + plaque", amount: "$800", desc: "Full panel cost. Named on the panel plaque and on this page." },
    ],
  },
  faq: [
    { q: "Do I have to own the barn?", a: "You need the property owner's permission in writing. We have a one-page form." },
    { q: "Does the design have to be a traditional quilt block?", a: "It should be recognizable as a quilt block — grid-based, geometric, repeatable. Original interpretations are welcome." },
    { q: "How long does painting take?", a: "Two full days, usually a Saturday and Sunday in April or May. The Council provides all materials and organizes volunteers." },
    { q: "Can I propose a block for a building I don't own?", a: "Yes, with written permission from the owner." },
  ],
  updates: [
    { date: "Feb 8, 2027", title: "2027 open call is live — six panels, proposals due March 14", id: "qw-2027" },
    { date: "Oct 4, 2026", title: "Rail Fence panel installed on K-18 west", id: "qw-rail-fence-2025" },
    { date: "Jun 2, 2026", title: "Barn Quilt Wall added to the official county tourism driving map", id: "qw-tourism-2026" },
  ],
  otherPrograms: ["downtown-mural-project", "vending-machine-art-shop"],
};

// ─── Shared sub-components ────────────────────────────────────────

function PDStatusStrip({ program }) {
  if (!program.status || program.status === "retired") return null;
  const isOpenCall  = program.status === "open-call";
  const isSignup    = program.status === "signup";
  const bg = isOpenCall ? PD.yellow : PD.council;
  const fg = isOpenCall ? PD.councilDeep : PD.paper;

  return (
    <section style={{ background: bg, color: fg, padding: "24px 80px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center" }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          background: fg, color: bg,
          padding: "5px 12px", borderRadius: 4,
          fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase",
        }}>
          <span style={{ width: 5, height: 5, borderRadius: 999, background: bg }} />
          {program.statusLabel}
        </div>
        <div>
          {program.statusDeadline && (
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 20, marginRight: 16 }}>
              {program.statusDeadline}
            </span>
          )}
          {program.statusDetail && (
            <span style={{ fontSize: 14, opacity: 0.8 }}>{program.statusDetail}</span>
          )}
        </div>
        {isSignup ? (
          <form style={{ display: "flex", gap: 8 }}>
            <input type="email" placeholder="your@email.com" style={{
              padding: "10px 14px", borderRadius: 6, border: "none",
              fontSize: 14, fontFamily: "inherit", width: 200,
            }} />
            <button type="submit" style={{
              padding: "10px 20px", borderRadius: 999, border: "none",
              background: PD.councilDeep, color: PD.yellow,
              fontWeight: 700, fontSize: 13.5, cursor: "pointer",
            }}>Notify me</button>
          </form>
        ) : (
          <a href={`#/news/${program.updates?.[0]?.id || ""}`} style={{
            padding: "10px 20px", borderRadius: 999,
            background: fg, color: bg,
            fontWeight: 700, fontSize: 13.5,
            display: "inline-flex", alignItems: "center", gap: 6,
          }}>Read the open call →</a>
        )}
      </div>
    </section>
  );
}

function PDStory({ story }) {
  if (!story) return null;
  return (
    <section style={{ padding: "88px 80px", background: PD.paper }}>
      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 80 }}>
        <div>
          <Eyebrow color={PD.council} style={{ marginBottom: 12 }}>The story</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 40, lineHeight: 1.05, letterSpacing: "-0.02em",
            color: PD.navy, margin: "0 0 16px",
          }}>{story.heading}</h2>
          {story.started && (
            <div style={{ fontSize: 12.5, fontWeight: 700, color: PD.mute, letterSpacing: "0.08em" }}>
              {story.started}
            </div>
          )}
        </div>
        <div>
          {story.paragraphs.map((p, i) => (
            <p key={i} style={{
              fontSize: i === 0 ? 19 : 16,
              fontWeight: i === 0 ? 500 : 400,
              lineHeight: 1.65, color: PD.ink,
              margin: 0, marginBottom: 20,
            }}>{p}</p>
          ))}
        </div>
      </div>
    </section>
  );
}

function PDLocations({ locations }) {
  if (!locations || !locations.length) return null;
  return (
    <section style={{ padding: "80px 80px", background: PD.ink, color: PD.paper }}>
      <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 80 }}>
        <div>
          <Eyebrow color={PD.councilLight} style={{ marginBottom: 16 }}>Where they are</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 40, lineHeight: 1.05, letterSpacing: "-0.02em",
            color: PD.paper, margin: "0 0 20px",
          }}>A driving map of the Quilt Wall.</h2>
          <div style={{
            background: "rgba(251,247,238,0.06)", borderRadius: 8,
            padding: "24px", marginBottom: 24,
            border: "1px solid rgba(251,247,238,0.12)",
          }}>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase",
              color: PD.councilLight, marginBottom: 8,
            }}>ROOKS COUNTY · {locations.length} SITES</div>
            <div style={{ fontSize: 12.5, opacity: 0.6, lineHeight: 1.5 }}>
              Drawn from memory · not to scale · K-9, K-18, and the county road north from Damar.
            </div>
          </div>
          <a href="#" style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            fontSize: 13.5, fontWeight: 700, color: PD.yellow,
          }}>Print a driving sheet (PDF) →</a>
        </div>
        <div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
            {locations.map((loc, i) => (
              <div key={loc.n} style={{
                padding: "20px 0",
                borderTop: `1px solid rgba(251,247,238,0.1)`,
                borderRight: i % 2 === 0 ? `1px solid rgba(251,247,238,0.1)` : "none",
                paddingRight: i % 2 === 0 ? 32 : 0,
                paddingLeft: i % 2 === 1 ? 32 : 0,
              }}>
                <div style={{ display: "flex", gap: 12, alignItems: "start" }}>
                  <span style={{
                    fontFamily: "var(--font-display)", fontWeight: 800,
                    fontSize: 13, color: PD.councilLight, opacity: 0.6, flexShrink: 0, paddingTop: 2,
                  }}>{loc.n}</span>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 14.5, color: PD.paper, marginBottom: 3 }}>
                      {loc.title}
                    </div>
                    <div style={{ fontSize: 12.5, opacity: 0.6 }}>
                      {loc.town} · {loc.road}
                    </div>
                    <div style={{ fontSize: 12, opacity: 0.5, marginTop: 2 }}>
                      {loc.designer} · {loc.year}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PDTimeline({ timeline }) {
  if (!timeline || !timeline.length) return null;
  return (
    <section style={{ padding: "80px 80px", background: PD.paper }}>
      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 80 }}>
        <div>
          <Eyebrow color={PD.council} style={{ marginBottom: 16 }}>The timeline</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 40, lineHeight: 1.05, letterSpacing: "-0.02em",
            color: PD.navy, margin: 0,
          }}>Year by year.</h2>
        </div>
        <div style={{ borderTop: `2px solid ${PD.navy}` }}>
          {timeline.map((entry, i) => (
            <div key={i} style={{
              display: "grid", gridTemplateColumns: "80px 1fr",
              gap: 24, padding: "20px 0",
              borderBottom: `1px solid ${PD.stone}`,
            }}>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                fontSize: 22, color: entry.future ? PD.council : PD.mute,
                letterSpacing: "-0.02em",
                fontStyle: entry.future ? "italic" : "normal",
              }}>{entry.year}</div>
              <div style={{
                fontSize: 15, lineHeight: 1.6, color: entry.future ? PD.council : PD.ink,
                fontStyle: entry.future ? "italic" : "normal",
                fontWeight: entry.highlight ? 600 : 400,
              }}>{entry.text}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PDGetInvolved({ getInvolved, programId }) {
  if (!getInvolved) return null;
  return (
    <section style={{ padding: "80px 80px", background: PD.councilWhisper }}>
      <Eyebrow color={PD.council} style={{ marginBottom: 16 }}>Get involved</Eyebrow>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
        <div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 48, lineHeight: 1.0, letterSpacing: "-0.02em",
            color: PD.navy, margin: "0 0 20px",
          }}>How to take part.</h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: PD.ink, margin: "0 0 32px" }}>
            {getInvolved.intro}
          </p>
          <a href="#/contact" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "14px 24px", borderRadius: 999,
            background: PD.council, color: PD.paper, fontWeight: 700, fontSize: 15,
          }}>Download the form →</a>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          {getInvolved.steps.map((step, i) => (
            <div key={i} style={{ display: "flex", gap: 20 }}>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                fontSize: 28, color: PD.councilLight,
                lineHeight: 1, flexShrink: 0, letterSpacing: "-0.02em",
              }}>0{i + 1}</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 16, color: PD.navy, marginBottom: 6 }}>
                  {step.title}
                </div>
                <div style={{ fontSize: 14.5, lineHeight: 1.55, color: PD.mute }}>
                  {step.body}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PDSponsor({ sponsor }) {
  if (!sponsor) return null;
  return (
    <section style={{ padding: "80px 80px", background: PD.paper, borderTop: `1px solid ${PD.stone}` }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
        <div>
          <Eyebrow color={PD.coral} style={{ marginBottom: 16 }}>Sponsor a piece</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 48, lineHeight: 1.0, letterSpacing: "-0.02em",
            color: PD.navy, margin: "0 0 20px",
          }}>Put your name on the wall.</h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: PD.ink, margin: "0 0 32px" }}>
            {sponsor.intro}
          </p>
          <a href="#/contact" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "14px 24px", borderRadius: 999,
            background: PD.coral, color: PD.councilDeep, fontWeight: 700, fontSize: 15,
          }}>Get in touch →</a>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
          {sponsor.tiers.map((tier, i) => (
            <div key={i} style={{
              padding: "24px 0",
              borderTop: `1px solid ${PD.stone}`,
              display: "grid", gridTemplateColumns: "80px 1fr auto",
              gap: 20, alignItems: "center",
            }}>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                fontSize: 28, color: PD.coral, letterSpacing: "-0.02em",
              }}>{tier.amount}</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 15, color: PD.navy, marginBottom: 4 }}>{tier.label}</div>
                <div style={{ fontSize: 13.5, color: PD.mute }}>{tier.desc}</div>
              </div>
              <a href="#/contact" style={{
                fontSize: 13, fontWeight: 700, color: PD.council,
                display: "inline-flex", alignItems: "center", gap: 4,
              }}>Give →</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PDUpdates({ updates }) {
  if (!updates || !updates.length) return null;
  return (
    <section style={{ padding: "80px 80px", background: PD.ink, color: PD.paper }}>
      <Eyebrow color={PD.councilLight} style={{ marginBottom: 16 }}>What's happening</Eyebrow>
      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 80, alignItems: "start" }}>
        <h2 style={{
          fontFamily: "var(--font-display)", fontWeight: 800,
          fontSize: 40, lineHeight: 1.05, letterSpacing: "-0.02em",
          color: PD.paper, margin: 0,
        }}>Updates from this program.</h2>
        <div style={{ borderTop: `1px solid rgba(251,247,238,0.15)` }}>
          {updates.map((u, i) => (
            <a key={i} href={`#/news/${u.id}`} style={{
              display: "grid", gridTemplateColumns: "120px 1fr",
              gap: 24, padding: "20px 0",
              borderBottom: `1px solid rgba(251,247,238,0.1)`,
              textDecoration: "none", color: "inherit",
            }}>
              <div style={{ fontSize: 12.5, color: PD.councilLight, paddingTop: 2 }}>{u.date}</div>
              <div style={{ fontSize: 15, fontWeight: 600, color: PD.paper, lineHeight: 1.4 }}>{u.title}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function PDFAQ({ faq }) {
  if (!faq || !faq.length) return null;
  return (
    <section style={{ padding: "80px 80px", background: PD.paper }}>
      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 80 }}>
        <div>
          <Eyebrow color={PD.council} style={{ marginBottom: 16 }}>Questions we get</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 40, lineHeight: 1.05, letterSpacing: "-0.02em",
            color: PD.navy, margin: "0 0 20px",
          }}>Answers, briefly.</h2>
          <p style={{ fontSize: 14, lineHeight: 1.6, color: PD.mute, margin: 0 }}>
            More questions? Email <a href="mailto:hello@rocoarts.org" style={{ color: PD.council, fontWeight: 600 }}>hello@rocoarts.org</a> — we answer everyone.
          </p>
        </div>
        <div style={{ borderTop: `2px solid ${PD.navy}` }}>
          {faq.map((item, i) => (
            <div key={i} style={{
              padding: "24px 0",
              borderBottom: `1px solid ${PD.stone}`,
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40,
            }}>
              <div style={{ fontWeight: 700, fontSize: 16, color: PD.navy, lineHeight: 1.4 }}>{item.q}</div>
              <div style={{ fontSize: 15, lineHeight: 1.6, color: PD.ink }}>{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PDOtherPrograms({ currentId }) {
  const others = PROGRAMS_MOCK.filter(p => p.id !== currentId).slice(0, 3);
  if (!others.length) return null;
  return (
    <section style={{ padding: "80px 80px 96px", background: PD.stone }}>
      <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 40 }}>
        <div>
          <Eyebrow color={PD.council} style={{ marginBottom: 12 }}>Other programs</Eyebrow>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 40, lineHeight: 1.0, letterSpacing: "-0.02em",
            color: PD.navy, margin: 0,
          }}>All programs</h2>
        </div>
        <a href="#/programs" style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          fontSize: 14, fontWeight: 700, color: PD.council,
        }}>See the full list →</a>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {others.map(p => (
          <a key={p.id} href={`#/programs/${p.id}`} style={{
            background: PD.paper, borderRadius: 8, padding: "28px",
            textDecoration: "none", display: "flex", flexDirection: "column",
            boxShadow: "0 1px 2px rgba(31,27,46,0.06)",
          }}>
            <div style={{ fontSize: 12, color: PD.mute, fontWeight: 700, marginBottom: 10 }}>{p.years}</div>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 22, lineHeight: 1.1, letterSpacing: "-0.015em",
              color: PD.navy, marginBottom: 10,
            }}>{p.title}</div>
            <div style={{ fontSize: 13.5, color: PD.mute, lineHeight: 1.5, flex: 1 }}>{p.subtitle}</div>
            <div style={{ marginTop: 20, fontSize: 13, fontWeight: 700, color: PD.council }}>Read the program →</div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ─── Main detail page ─────────────────────────────────────────────
function ProgramDetail({ id }) {
  const [program, setProgram] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    if (ROCO_WP.useMockData) {
      // Use mock data — find by ID or fall back to barn quilt wall
      const mock = id === "barn-quilt-wall" ? BARN_QUILT_WALL
        : PROGRAMS_MOCK.find(p => p.id === id)
          ? { ...PROGRAMS_MOCK.find(p => p.id === id), story: null, locations: null, timeline: null, getInvolved: null, sponsor: null, faq: null, updates: null }
          : BARN_QUILT_WALL;
      setProgram(mock);
      setLoading(false);
    } else {
      API.program(id)
        .then(data => { setProgram(data[0] || null); setLoading(false); })
        .catch(() => setLoading(false));
    }
  }, [id]);

  if (loading) return (
    <div style={{ minHeight: "60vh", display: "flex", alignItems: "center", justifyContent: "center", background: PD.paper }}>
      <div style={{ color: PD.mute, fontSize: 15 }}>Loading…</div>
    </div>
  );

  if (!program) return (
    <div style={{ minHeight: "60vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", background: PD.paper }}>
      <div style={{ color: PD.mute, fontSize: 15 }}>Program not found.</div>
      <a href="#/programs" style={{ marginTop: 16, color: PD.council, fontWeight: 700 }}>← All programs</a>
    </div>
  );

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

      {/* Breadcrumb + Hero */}
      <section style={{ background: "#000000", color: PD.paper, padding: "72px 80px 64px", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative" }}>
          <div style={{ fontSize: 12.5, opacity: 0.5, marginBottom: 32, letterSpacing: "0.06em" }}>
            <a href="#/" style={{ color: "inherit" }}>The Council</a>
            {" › "}
            <a href="#/programs" style={{ color: "inherit" }}>Programs</a>
            {" › "}
            <span>{program.title}</span>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "end" }}>
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: PD.councilLight, letterSpacing: "0.08em", marginBottom: 12 }}>
                {program.years} · {program.category || "Council · Program"}
              </div>
              <h1 style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                fontSize: 64, lineHeight: 1.0, letterSpacing: "-0.025em",
                color: PD.paper, margin: "0 0 16px",
              }}>{program.title}</h1>
              <p style={{ fontSize: 19, lineHeight: 1.5, opacity: 0.8, margin: 0, maxWidth: 520 }}>
                {program.subtitle}
              </p>
            </div>

            {program.stats && (
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, paddingBottom: 8 }}>
                {program.stats.map((s, i) => (
                  <div key={i} style={{ borderLeft: `2px solid rgba(251,247,238,0.15)`, paddingLeft: 20 }}>
                    <div style={{
                      fontFamily: "var(--font-display)", fontWeight: 800,
                      fontSize: 44, lineHeight: 0.9, color: PD.yellow, letterSpacing: "-0.03em",
                    }}>{s.n}</div>
                    <div style={{ fontSize: 13, opacity: 0.6, marginTop: 8, fontWeight: 600 }}>{s.l}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Activity strip */}
      <PDStatusStrip program={program} />

      {/* Story */}
      <PDStory story={program.story} />

      {/* Locations / map */}
      <PDLocations locations={program.locations} />

      {/* Timeline */}
      <PDTimeline timeline={program.timeline} />

      {/* Get involved */}
      <PDGetInvolved getInvolved={program.getInvolved} programId={program.id} />

      {/* Sponsor */}
      <PDSponsor sponsor={program.sponsor} />

      {/* Updates */}
      <PDUpdates updates={program.updates} />

      {/* FAQ */}
      <PDFAQ faq={program.faq} />

      {/* Other programs */}
      <PDOtherPrograms currentId={program.id} />

      <ProgramsFooter />
    </div>
  );
}

window.ProgramDetail = ProgramDetail;