// page-interior.jsx — Generic branded interior page shell
// Used by About, Contact, Visit, and any future standalone pages.
// Fetches eyebrow / title / intro / CTAs from the WP options endpoint
// for the given pageSlug; falls back to props until WP returns data.

const PI = {
  paper:        "#FBF7EE",
  stone:        "#E8E2D3",
  navy:         "#01234B",
  ink:          "#1F1B2E",
  mute:         "#6B6577",
  council:      "#45217A",
  councilDeep:  "#2B1450",
  pine:         "#2F7A2E",
  coral:        "#FF7A5C",
  yellow:       "#F3CF03",
  crimson:      "#C81344",
  sky:          "#4195D3",
};

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

// ─── Hero band ──────────────────────────────────────────────────────
function InteriorHero({ eyebrow, title, intro, ctas, stream }) {
  const streamColor = {
    council: PI.council,
    events:  PI.pine,
    artists: PI.navy,
    news:    PI.ink,
  }[stream] || PI.council;

  return (
    <section style={{
      background: PI.ink, color: PI.paper,
      padding: "80px 80px 88px", position: "relative", overflow: "hidden",
    }}>
      <HeroTexture />

      {/* Quilt triangle decoration — top right */}
      <div style={{ position: "absolute", top: 0, right: 0, zIndex: 1 }}>
        <svg width="200" height="200" viewBox="0 0 200 200">
          <polygon points="200,0 200,200 0,0" fill={streamColor} opacity="0.9" />
          <polygon points="200,100 200,200 100,200" fill={PI.yellow} opacity="0.85" />
        </svg>
      </div>

      <div style={{ position: "relative", zIndex: 2, maxWidth: 820 }}>
        {eyebrow && (
          <Eyebrow color={streamColor} style={{ marginBottom: 20, opacity: 0.9 }}>
            {eyebrow}
          </Eyebrow>
        )}
        <h1 style={{
          fontFamily: "var(--font-display)", fontWeight: 800,
          fontSize: 72, lineHeight: 1.0, letterSpacing: "-0.03em",
          color: PI.paper, margin: 0, marginBottom: intro ? 28 : (ctas ? 36 : 0),
          textWrap: "balance",
        }}>
          {title}
        </h1>
        {intro && (
          <p style={{
            fontSize: 19, lineHeight: 1.6,
            color: "rgba(251,247,238,0.82)",
            margin: 0, marginBottom: ctas ? 40 : 0,
            maxWidth: 640,
          }}>
            {intro}
          </p>
        )}
        {ctas && ctas.length > 0 && (
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            {ctas.map((cta, i) => (
              <a key={i} href={cta.href} style={{
                padding: "14px 26px", borderRadius: 999,
                fontWeight: 700, fontSize: 15,
                display: "inline-flex", alignItems: "center", gap: 8,
                textDecoration: "none",
                ...(cta.style === "ghost"
                  ? { border: "1.5px solid rgba(251,247,238,0.45)", color: PI.paper }
                  : { background: streamColor, color: PI.paper }
                ),
              }}>
                {cta.label} {cta.style !== "ghost" && <span>→</span>}
              </a>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────────────────
function InteriorFooter() {
  return (
    <footer style={{ background: "#000000", color: PI.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",  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: PI.yellow, marginBottom: 18 }}>
              {col.eye}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 14.5 }}>
              {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 &amp; Pawnee</span>
        <span>Built by neighbors</span>
      </div>
    </footer>
  );
}

// ─── Info strip ─────────────────────────────────────────────────────
// A reusable stat/fact row used on About and Visit pages.
function InteriorInfoStrip({ items }) {
  return (
    <div style={{
      background: "#F5F0E2", borderBottom: `1px solid ${PI.stone}`,
      padding: "24px 80px",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: 32 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            borderLeft: i === 0 ? "none" : `1px solid ${PI.stone}`,
            paddingLeft: i === 0 ? 0 : 24,
          }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: PI.mute, marginBottom: 6 }}>
              {it.label}
            </div>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 22, color: it.color || PI.navy, lineHeight: 1.15, letterSpacing: "-0.01em",
            }}>
              {it.value}
            </div>
            {it.sub && (
              <div style={{ fontSize: 12, color: PI.mute, marginTop: 2 }}>{it.sub}</div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── PageInterior — the shell ───────────────────────────────────────
// pageSlug   : WP options key to fetch (matches roco/v1/page?slug=X)
// stream     : "council" | "events" | "artists" | "news"
// defaults   : fallback content used until WP data loads
// children   : page-specific sections below the hero
function PageInterior({
  pageSlug,
  stream = "council",
  defaultEyebrow,
  defaultTitle,
  defaultIntro,
  defaultCtas,
  children,
}) {
  const [wp, setWp] = React.useState(null);

  React.useEffect(() => {
    if (!ROCO_WP.baseUrl || !pageSlug) return;
    fetch(`${ROCO_WP.baseUrl}/wp-json/roco/v1/page?slug=${pageSlug}`)
      .then(r => r.json())
      .then(data => { if (data && data.title) setWp(data); })
      .catch(() => {});
  }, [pageSlug]);

  const eyebrow = (wp && wp.eyebrow) || defaultEyebrow;
  const title   = (wp && wp.title)   || defaultTitle;
  const intro   = (wp && wp.intro)   || defaultIntro;

  return (
    <div className="roco-root" style={{
      background: PI.paper, color: PI.navy,
      fontFamily: "var(--font-body)", width: "100%", minHeight: "100%",
    }}>
      <InteriorNav activeStream={stream} />
      <RainbowDivider height={4} />
      <InteriorHero
        eyebrow={eyebrow}
        title={title}
        intro={intro}
        ctas={defaultCtas}
        stream={stream}
      />
      <main>
        {children}
      </main>
      <InteriorFooter />
    </div>
  );
}

// ─── About page ─────────────────────────────────────────────────────
function PageAbout() {
  return (
    <PageInterior
      pageSlug="about"
      stream="council"
      defaultEyebrow="The Council · About"
      defaultTitle="Volunteer-run, county-wide, mostly free."
      defaultIntro="RoCo Arts Council is a 501(c)(3) serving Rooks County, Kansas. We run a gallery on Main Street, coordinate twelve barn studios, and commission painted quilt blocks you can see from the highway."
      defaultCtas={[
        { label: "Become a member", href: "#/contact" },
        { label: "Annual report (PDF)", href: "#/news", style: "ghost" },
      ]}
    >
      <InteriorInfoStrip items={[
        { label: "Founded",          value: "1978",            color: PI.council },
        { label: "Member households",value: "341",             color: PI.council },
        { label: "RoCo artists",     value: "28",              color: PI.navy },
        { label: "Painted barn quilts", value: "12",           color: PI.pine },
        { label: "Annex hours",      value: "Thu – Sun",       sub: "11 am – 4 pm" },
        { label: "Admission",        value: "Always free",     color: PI.pine },
      ]} />

      {/* Story + Board */}
      <section style={{ padding: "96px 80px", background: PI.paper }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96 }}>

          {/* Story */}
          <div>
            <Eyebrow color={PI.council} style={{ marginBottom: 16 }}>Our story</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 44, lineHeight: 1.05, letterSpacing: "-0.02em",
              color: PI.navy, margin: 0, marginBottom: 24,
            }}>
              Where we've been.<br />What's next.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: PI.navy, marginBottom: 16 }}>
              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 still needs a quilt.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: PI.navy, marginBottom: 16 }}>
              The Annex opened in spring 2025 — a rotating gallery in the old hardware store on Main Street in Stockton. We're open Thursday through Sunday, admission always free.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: PI.mute, marginBottom: 32 }}>
              Funded by the NEA, the Kansas Creative Arts Industries Commission, and 341 individual neighbors.
            </p>
            <div style={{ display: "flex", gap: 14 }}>
              <a href="#/contact" style={{
                padding: "14px 24px", borderRadius: 999,
                background: PI.council, color: PI.paper,
                fontWeight: 700, fontSize: 14.5,
                display: "inline-flex", alignItems: "center", gap: 8,
              }}>Volunteer <span>→</span></a>
              <a href="#/contact" style={{
                padding: "14px 24px", borderRadius: 999,
                border: `1.5px solid ${PI.council}`, color: PI.council,
                fontWeight: 700, fontSize: 14.5,
              }}>Donate</a>
            </div>
          </div>

          {/* Board */}
          <div>
            <Eyebrow color={PI.council} style={{ marginBottom: 16 }}>The board · Stockton, KS</Eyebrow>
            <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "12px 24px", fontSize: 14.5, lineHeight: 1.5, marginBottom: 40 }}>
              {[
                ["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: PI.mute, paddingRight: 16, borderRight: `1px solid ${PI.stone}` }}>{role}</div>
                  <div style={{ color: PI.navy, fontWeight: 600 }}>{name}</div>
                </React.Fragment>
              ))}
            </div>

            {/* Visit info */}
            <div style={{
              background: "#F5F0E2", borderRadius: 8,
              padding: "28px 28px 24px",
              border: `1px solid ${PI.stone}`,
            }}>
              <Eyebrow color={PI.council} style={{ marginBottom: 12 }}>Visit the Annex</Eyebrow>
              <div style={{ fontSize: 15, lineHeight: 1.7, color: PI.navy }}>
                <div style={{ fontWeight: 700, marginBottom: 4 }}>119 N Main Street · Stockton, KS 67669</div>
                <div style={{ color: PI.mute, marginBottom: 4 }}>Thursday – Sunday · 11 am – 4 pm</div>
                <div style={{ color: PI.mute, marginBottom: 16 }}>Admission always free</div>
                <a href="mailto:hello@rocoarts.org" style={{ color: PI.council, fontWeight: 600, fontSize: 14 }}>
                  hello@rocoarts.org
                </a>
                <span style={{ margin: "0 12px", color: PI.stone }}>·</span>
                <a href="tel:+17855550184" style={{ color: PI.council, fontWeight: 600, fontSize: 14 }}>
                  (785) 555-0184
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </PageInterior>
  );
}

// ─── Contact page ────────────────────────────────────────────────────
function PageContact() {
  return (
    <PageInterior
      pageSlug="contact"
      stream="council"
      defaultEyebrow="The Council · Contact"
      defaultTitle="We'd love to hear from you."
      defaultIntro="Questions, commissions, volunteering, press, or just want to say hi — use the form below or reach us directly."
      defaultCtas={null}
    >
      <section style={{ padding: "80px 80px 96px", background: PI.paper }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "start" }}>

          {/* Contact info */}
          <div>
            <Eyebrow color={PI.council} style={{ marginBottom: 16 }}>Get in touch</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 40, lineHeight: 1.05, letterSpacing: "-0.02em",
              color: PI.navy, margin: 0, marginBottom: 32,
            }}>
              The Annex, Main Street,<br />Stockton KS.
            </h2>

            {[
              { label: "General",       value: "hello@rocoarts.org",    href: "mailto:hello@rocoarts.org" },
              { label: "Phone",         value: "(785) 555-0184",        href: "tel:+17855550184" },
              { label: "Gallery hours", value: "Thu – Sun · 11 am – 4 pm", href: null },
              { label: "Address",       value: "119 N Main · Stockton, KS 67669", href: null },
            ].map(({ label, value, href }) => (
              <div key={label} style={{
                display: "grid", gridTemplateColumns: "140px 1fr",
                padding: "16px 0", borderBottom: `1px solid ${PI.stone}`,
                fontSize: 14.5, alignItems: "center",
              }}>
                <span style={{ color: PI.mute, fontWeight: 600, fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase" }}>{label}</span>
                {href
                  ? <a href={href} style={{ color: PI.council, fontWeight: 600 }}>{value}</a>
                  : <span style={{ color: PI.navy }}>{value}</span>
                }
              </div>
            ))}

            <div style={{ marginTop: 36 }}>
              <Eyebrow color={PI.mute} style={{ marginBottom: 14 }}>What we can help with</Eyebrow>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                {[
                  "General questions about RoCo",
                  "Volunteering & joining the council",
                  "Artist profile submissions",
                  "Commission inquiries",
                  "Annex rental",
                  "Press & media",
                  "Quilt Wall proposals",
                ].map(item => (
                  <li key={item} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14.5, color: PI.navy }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: PI.council, flexShrink: 0 }} />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Form placeholder — replace with GF shortcode embed or GF iframe */}
          <div style={{
            background: "#F5F0E2",
            border: `1px solid ${PI.stone}`,
            borderRadius: 8,
            padding: "40px 36px",
          }}>
            <Eyebrow color={PI.council} style={{ marginBottom: 16 }}>Send a message</Eyebrow>
            <div id="roco-contact-form-mount">
              {/* Gravity Forms embed goes here.
                  In functions.php, register a REST endpoint that
                  returns rendered GF form HTML, or use the GF JS embed. */}
              <p style={{ color: PI.mute, fontSize: 14.5, lineHeight: 1.6 }}>
                Form loading&hellip; if this persists, email us directly at{" "}
                <a href="mailto:hello@rocoarts.org" style={{ color: PI.council, fontWeight: 600 }}>
                  hello@rocoarts.org
                </a>.
              </p>
            </div>
          </div>

        </div>
      </section>
    </PageInterior>
  );
}

window.PageAbout   = PageAbout;
window.PageContact = PageContact;
window.PageInterior = PageInterior;
window.InteriorNav = InteriorNav;
window.InteriorFooter = InteriorFooter;
window.InteriorInfoStrip = InteriorInfoStrip;