// Shared nav, footer, tokens for WCC website (Design B - "Sunrise")
// Loaded globally via <script type="text/babel" src="shared.jsx">
// Content migrated from wembleychristiancentre.org.uk with the church's permission (Nov 2026).

const WCC = {
  blue: "#1A8CE8",
  blueDark: "#0E5FA6",
  blueSoft: "#EBF6FF",
  orange: "#F07D3A",
  dark: "#0D1B2A",
  muted: "#5A6A7E",
  bg: "#FAFBFF",
  font: "'Manrope', sans-serif",
};

// Church facts: one source of truth for every page
const WCC_INFO = {
  name: "Wembley Christian Centre",
  street: "2A Carlton Avenue East",
  corner: "corner with Forty Avenue",
  area: "Wembley Park",
  postcode: "HA9 8LX",
  tel: "020 8904 0050",
  telHref: "tel:+442089040050",
  mobile: "07791 700465",
  mobileHref: "tel:+447791700465",
  email: "info@wembleychristiancentre.org.uk",
  facebook: "https://www.facebook.com/wembleychristian.centre",
  youtube: "https://www.youtube.com/channel/UC6RxYnvF2jQV8FKdGalZqmw",
  maps: "https://www.google.com/maps/search/?api=1&query=Wembley+Christian+Centre+Carlton+Avenue+East+Wembley+HA9+8LX",
  elim: "https://www.elim.org.uk/",
};

const WCC_SOCIAL = [
  { k: "Facebook", v: "FB", href: WCC_INFO.facebook },
  { k: "YouTube", v: "YT", href: WCC_INFO.youtube },
];

// The church's weekly pattern (old site's calendar, updated with times the church confirmed in Nov 2026).
// `paused: true` keeps a ministry's details here but hides it from service times and events.
const WCC_WEEKLY = [
  { key: "sunday", weekday: 0, time: "11:00 AM", title: "Sunday Celebrations", tag: "Sunday", color: WCC.blue, href: "services.html", img: "img/sunday-hall.jpg", imgAlt: "The congregation gathered in the church hall",
    desc: "Our joyful celebration service: worship, inspired preaching, prayer and fellowship. All are welcome!" },
  { key: "earlyprayer", weekday: 2, time: "6:00 – 6:30 AM", title: "Early Morning Prayer", tag: "Prayer", color: WCC.orange, href: "services.html#early-morning-prayer", img: "img/prayer.jpg", imgAlt: "A person kneeling in prayer",
    desc: "Half an hour of prayer to start the day." },
  { key: "bethel", paused: true, weekday: 2, time: "11:30 AM – 2:00 PM", title: "Bethel Kaf", tag: "Community", color: WCC.blueDark, href: "services.html#bethel-kaf", img: "img/bethel-kaf-team.jpg", imgAlt: "The Bethel Kaf team around a table",
    desc: "Cares for lone mums, single mums and those in need of a friendly face." },
  { key: "mainly", paused: true, weekday: 3, time: "10:15 – 11:30 AM", title: "Mainly Music", tag: "Family", color: "#7C3AED", href: "services.html#mainly-music", img: "img/mainly-music-group.jpg", imgAlt: "Families at a Mainly Music session in the church hall",
    desc: "A fun music group for parents or care givers and their little ones. Term time only." },
  { key: "life", weekday: 4, time: "10:00 AM", title: "LIFE Group", tag: "LIFE Groups", color: WCC.dark, href: "life-groups.html", img: "img/gallery-a.jpg", imgAlt: "A LIFE group studying the Bible together",
    desc: "Fellowship, prayer, Bible study and a warm welcome for new members." },
  { key: "prayer", weekday: 5, time: "7:30 PM · on Zoom", title: "Prayer Meeting", tag: "Prayer", color: WCC.orange, href: "services.html#prayer-meeting", img: "img/prayer-revive.jpg", imgAlt: "Revive: Will you not revive us again, that your people may rejoice in you? Psalm 85:6",
    desc: "Weekly prayer meeting on Zoom. Email the church office for the link." },
];

// Monthly Friday prayer themes from the old (2018) prayer calendar; not yet reconfirmed, so shown on What's On only
const WCC_PRAYER_FOCUS = {
  1: { focus: "Prayer for Israel" },
  2: { focus: "Prayer & Worship (Open Heaven)" },
  3: { focus: "Prayer for Brent" },
  4: { focus: "Bring your prayer requests" },
  5: { focus: "Thanksgiving" },
};

const WCC_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const WCC_MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

// Upcoming dates generated from the weekly pattern, the same way the church's own calendar does it
const wccUpcoming = (days = 21) => {
  const out = [];
  const start = new Date();
  start.setHours(0, 0, 0, 0);
  for (let i = 0; i < days; i++) {
    const d = new Date(start);
    d.setDate(start.getDate() + i);
    WCC_WEEKLY.filter(e => !e.paused && e.weekday === d.getDay()).forEach(e => {
      out.push({ ...e, id: `${e.key}-${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`, date: `${d.getDate()} ${WCC_MONTHS[d.getMonth()]}`, day: WCC_DAYS[d.getDay()] });
    });
  }
  return out;
};
const wccNext = key => wccUpcoming(14).find(e => e.key === key);

const navLinks = [
  { label: "Home", href: "index.html" },
  { label: "About", href: "about.html" },
  { label: "What's On", href: "services.html" },
  { label: "Events", href: "events.html" },
  { label: "Sermons", href: "sermons.html" },
  { label: "Team", href: "team.html" },
  { label: "Life Groups", href: "life-groups.html" },
  { label: "Contact", href: "contact.html" },
];

// Real photo when `src` is given; striped placeholder otherwise
const Img = ({ label, h, style = {}, stripe = "#b8d4ec", src, alt, fit = "cover", pos = "center" }) => (
  src ? (
    <img src={src} alt={alt !== undefined ? alt : (label || "")} style={{
      width: "100%", height: h || "100%", objectFit: fit, objectPosition: pos,
      display: "block", background: "#e8f0f7",
      ...style
    }} />
  ) : (
    <div style={{
      width: "100%", height: h || "100%",
      background: `repeating-linear-gradient(135deg,${stripe} 0,${stripe} 1px,#e8f0f7 0,#e8f0f7 8px)`,
      display: "flex", alignItems: "center", justifyContent: "center",
      ...style
    }}>
      <span style={{ fontFamily: "monospace", fontSize: 11, color: "#5a7a95", background: "rgba(255,255,255,0.78)", padding: "4px 10px", borderRadius: 3 }}>{label}</span>
    </div>
  )
);

// Progressive disclosure for long church texts
const MoreText = ({ children, label = "Read more", lessLabel = "Show less", color = WCC.blue }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      {open && <div style={{ marginTop: 14 }}>{children}</div>}
      <button type="button" onClick={() => setOpen(!open)} aria-expanded={open} style={{
        marginTop: 12, background: "none", border: "none", padding: 0, color,
        fontFamily: WCC.font, fontWeight: 800, fontSize: 13, cursor: "pointer",
      }}>{open ? `${lessLabel} ↑` : `${label} →`}</button>
    </div>
  );
};

const Para = ({ children, style = {} }) => (
  <p style={{ fontSize: 15, color: WCC.muted, lineHeight: 1.8, marginBottom: 14, ...style }}>{children}</p>
);

const WCCNav = ({ active = "Home", variant = "light" }) => {
  const isOverlay = variant === "overlay";
  const [open, setOpen] = React.useState(false);
  const baseColor = isOverlay ? "rgba(255,255,255,0.85)" : WCC.muted;
  const accentColor = isOverlay ? "#fff" : WCC.dark;

  return (
    <nav style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: "20px 48px",
      background: isOverlay ? "transparent" : "#fff",
      borderBottom: isOverlay ? "none" : "1px solid #EEF2F8",
      position: isOverlay ? "absolute" : "relative",
      top: 0, left: 0, right: 0, zIndex: 20,
    }}>
      <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
        <div style={{ width: 38, height: 38, borderRadius: 10, background: `linear-gradient(135deg, ${WCC.blue}, #64B8FF)`, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <span style={{ color: "#fff", fontWeight: 900, fontSize: 16 }}>W</span>
        </div>
        <span style={{ fontSize: 16, fontWeight: 800, color: accentColor, letterSpacing: "-0.3px" }}>Wembley Christian Centre</span>
      </a>
      <div style={{ display: "flex", gap: 26, fontSize: 14, fontWeight: 600 }}>
        {navLinks.map(l => (
          <a key={l.label} href={l.href} style={{
            color: l.label === active ? (isOverlay ? "#fff" : WCC.blue) : baseColor,
            textDecoration: "none",
            position: "relative",
            paddingBottom: 2,
            borderBottom: l.label === active ? `2px solid ${isOverlay ? "#fff" : WCC.blue}` : "2px solid transparent",
          }}>{l.label}</a>
        ))}
      </div>
      <a href="services.html" style={{
        background: isOverlay ? "#fff" : WCC.blue,
        color: isOverlay ? WCC.blue : "#fff",
        border: "none", borderRadius: 10,
        padding: "11px 24px",
        fontFamily: WCC.font, fontWeight: 700, fontSize: 14,
        textDecoration: "none",
        display: "inline-block",
      }}>Plan a Visit ↗</a>
    </nav>
  );
};

const WCCFooter = () => (
  <footer style={{ background: WCC.dark, color: "#fff", padding: "60px 48px 30px", fontFamily: WCC.font }}>
    <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 48, marginBottom: 48 }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
          <div style={{ width: 38, height: 38, borderRadius: 10, background: `linear-gradient(135deg, ${WCC.blue}, #64B8FF)`, display: "flex", alignItems: "center", justifyContent: "center" }}>
            <span style={{ color: "#fff", fontWeight: 900, fontSize: 16 }}>W</span>
          </div>
          <div style={{ fontSize: 18, fontWeight: 800 }}>Wembley Christian Centre</div>
        </div>
        <p style={{ fontSize: 14, color: "rgba(255,255,255,0.55)", lineHeight: 1.7, maxWidth: 360, marginBottom: 20 }}>
          Reach Out · Restore · Release. An Elim Pentecostal church in Wembley Park, with a vision for Wembley and the world for Christ.
        </p>
        <div style={{ display: "flex", gap: 10 }}>
          {WCC_SOCIAL.map(s => (
            <a key={s.k} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={`Wembley Christian Centre on ${s.k}`} style={{ width: 36, height: 36, borderRadius: 8, background: "rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, color: "#fff", textDecoration: "none" }}>{s.v}</a>
          ))}
        </div>
      </div>
      <div>
        <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: "0.1em", textTransform: "uppercase", color: WCC.blue, marginBottom: 16 }}>Explore</div>
        {navLinks.slice(1, 5).map(l => (
          <a key={l.label} href={l.href} style={{ display: "block", fontSize: 14, color: "rgba(255,255,255,0.7)", marginBottom: 10, textDecoration: "none" }}>{l.label}</a>
        ))}
      </div>
      <div>
        <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: "0.1em", textTransform: "uppercase", color: WCC.blue, marginBottom: 16 }}>Connect</div>
        {navLinks.slice(5).map(l => (
          <a key={l.label} href={l.href} style={{ display: "block", fontSize: 14, color: "rgba(255,255,255,0.7)", marginBottom: 10, textDecoration: "none" }}>{l.label}</a>
        ))}
      </div>
      <div>
        <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: "0.1em", textTransform: "uppercase", color: WCC.blue, marginBottom: 16 }}>Visit</div>
        <div style={{ fontSize: 14, color: "rgba(255,255,255,0.7)", lineHeight: 1.7 }}>
          {WCC_INFO.street}<br/>
          {WCC_INFO.area}, {WCC_INFO.postcode}<br/>
          Sundays · 11:00 AM<br/>
          <a href={WCC_INFO.telHref} style={{ color: "inherit", textDecoration: "none" }}>{WCC_INFO.tel}</a><br/>
          <a href={`mailto:${WCC_INFO.email}`} style={{ color: "inherit", textDecoration: "none", wordBreak: "break-all" }}>{WCC_INFO.email}</a>
        </div>
      </div>
    </div>
    <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <div style={{ fontSize: 12, color: "rgba(255,255,255,0.35)" }}>© 2026 Wembley Christian Centre · An Elim Pentecostal Church</div>
      <div style={{ fontSize: 12, color: "rgba(255,255,255,0.35)" }}>Reach Out · Restore · Release</div>
    </div>
  </footer>
);

// Reusable section heading
const SectionHead = ({ kicker, title, subtitle, align = "left" }) => (
  <div style={{ textAlign: align, marginBottom: 40 }}>
    {kicker && (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 8, background: WCC.blueSoft, borderRadius: 40, padding: "5px 14px", marginBottom: 18 }}>
        <div style={{ width: 6, height: 6, borderRadius: "50%", background: WCC.blue }} />
        <span style={{ fontSize: 12, fontWeight: 700, color: WCC.blue, letterSpacing: "0.08em", textTransform: "uppercase" }}>{kicker}</span>
      </div>
    )}
    <h2 style={{ fontSize: "clamp(32px, 4vw, 52px)", fontWeight: 800, lineHeight: 1.1, letterSpacing: "-1px", color: WCC.dark, marginBottom: subtitle ? 16 : 0 }}>{title}</h2>
    {subtitle && <p style={{ fontSize: 17, color: WCC.muted, lineHeight: 1.7, maxWidth: 600, margin: align === "center" ? "0 auto" : 0 }}>{subtitle}</p>}
  </div>
);

// Curved section divider
const CurveDivider = ({ fill = WCC.bg, flip = false }) => (
  <div style={{ position: "absolute", bottom: flip ? "auto" : -2, top: flip ? -2 : "auto", left: 0, right: 0, transform: flip ? "rotate(180deg)" : "none" }}>
    <svg viewBox="0 0 1280 60" preserveAspectRatio="none" aria-hidden="true" style={{ width: "100%", height: 60, display: "block" }}>
      <path d="M0,60 C320,0 960,0 1280,60 L1280,60 L0,60Z" fill={fill} />
    </svg>
  </div>
);

const PageHero = ({ kicker, title, subtitle, photoLabel = "page hero photo", photo, photoAlt = "", photoPos = "center" }) => (
  <section style={{ position: "relative", height: 440, overflow: "hidden" }}>
    <Img label={photoLabel} src={photo} alt={photoAlt} pos={photoPos} style={{ position: "absolute", inset: 0, height: "100%" }} stripe="#a8c8e6" />
    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(120deg, rgba(26,140,232,0.85) 0%, rgba(26,140,232,0.4) 60%, rgba(0,0,0,0.2) 100%)" }} />
    <WCCNav active={kicker} variant="overlay" />
    <div style={{ position: "absolute", inset: 0, paddingTop: 96, display: "flex", flexDirection: "column", justifyContent: "center", padding: "96px 48px 40px" }}>
      <div style={{ background: "rgba(255,255,255,0.2)", backdropFilter: "blur(8px)", borderRadius: 40, padding: "6px 18px", width: "fit-content", marginBottom: 22, border: "1px solid rgba(255,255,255,0.3)" }}>
        <span style={{ fontSize: 12, fontWeight: 700, color: "#fff", letterSpacing: "0.1em", textTransform: "uppercase" }}>✦ {kicker}</span>
      </div>
      <h1 style={{ fontSize: "clamp(40px, 5.5vw, 68px)", fontWeight: 900, color: "#fff", lineHeight: 1.05, letterSpacing: "-1.5px", marginBottom: 16, maxWidth: 720 }}>{title}</h1>
      {subtitle && <p style={{ fontSize: 18, color: "rgba(255,255,255,0.85)", lineHeight: 1.6, maxWidth: 560 }}>{subtitle}</p>}
    </div>
    <CurveDivider />
  </section>
);

Object.assign(window, { WCC, WCC_INFO, WCC_SOCIAL, WCC_WEEKLY, WCC_PRAYER_FOCUS, WCC_DAYS, WCC_MONTHS, wccUpcoming, wccNext, WCCNav, WCCFooter, SectionHead, CurveDivider, PageHero, Img, MoreText, Para, navLinks });