/* =============================================================
 * Home page — Hero, Impact Bar, Problem (ripple+graph), Programs
 * grid, Forge goal bar, testimonial, events teaser, donate CTA
 * ============================================================= */

function HeroSection() {
  const [currentSlide, setCurrentSlide] = useState(0);
  // Phase 3.7: fetch editable content from Supabase, fall back to defaults
  const [cmsHero, setCmsHero] = useState(null);
  useEffect(() => {
    if (window.cms && typeof window.cms.getSiteContent === "function") {
      window.cms.getSiteContent("home").then((c) => setCmsHero((c && c.hero) || {}));
    } else {
      setCmsHero({});
    }
  }, []);

  const defaultSlides = [
  "uploads/hero section slide show7.jpg",
  "uploads/hero section slide show8.jpg",
  "uploads/hero section slide show.jpg",
  "uploads/hero section slide show2.jpg",
  "uploads/hero section slide show 2.jpg",
  "uploads/Fathers Arise-71_Beautify.jpg"];
  // If OS published a hero image, use it as a single slide; otherwise default slideshow
  const slides = cmsHero && cmsHero.image ? [cmsHero.image] : defaultSlides;

  const headlineText = cmsHero && cmsHero.headline ? cmsHero.headline : "Every Generation Needs\nFathers Who Stay.";
  const subheadText = cmsHero && cmsHero.subhead ? cmsHero.subhead : "We build the men the world is waiting for — from boyhood to fatherhood to legacy.";
  const ctaLabel = cmsHero && cmsHero.cta_label ? cmsHero.cta_label : "Join the Movement";
  const ctaLink = cmsHero && cmsHero.cta_link ? cmsHero.cta_link : "get-involved";
  const align = (cmsHero && cmsHero.align) || "left";
  const alignClass = align === "center" ? "text-center mx-auto" : align === "right" ? "text-right ml-auto" : "text-left";

  useEffect(() => {
    if (slides.length <= 1) return;
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 5000);
    return () => clearInterval(timer);
  }, [slides.length]);

  return (
    <section data-cms-section="hero" data-cms-page="home" className="relative overflow-hidden bg-navy text-white">
      {/* Slideshow background */}
      <div className="absolute inset-0">
        {slides.map((img, i) =>
        <div
          key={i}
          className="absolute inset-0 transition-opacity duration-1000"
          style={{ opacity: currentSlide === i ? 1 : 0 }}>

            <img src={img} alt="" className="w-full h-full object-cover" />
            <div className="absolute inset-0" style={{ background: "linear-gradient(135deg, rgba(13,17,71,0.78) 0%, rgba(13,17,71,0.55) 45%, rgba(13,17,71,0.85) 100%)" }} />
            <div className="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/60" />
          </div>
        )}
      </div>

      <div className="relative max-w-[1280px] mx-auto px-4 sm:px-6 min-h-[640px] md:min-h-[720px] flex items-center pt-16 pb-28">
        <div className={`max-w-4xl ${alignClass}`}>
          <div className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-gold/20 backdrop-blur-sm text-xs font-display font-bold uppercase tracking-[0.2em] text-gold border border-gold/30">
            Fathers Arise
          </div>
          <h1 className="mt-8 font-display font-black text-5xl sm:text-6xl md:text-7xl leading-[0.95] whitespace-pre-line">
            {headlineText.includes("\n") ? (
              <>
                {headlineText.split("\n")[0]}<br />
                <span className="text-gold">{headlineText.split("\n").slice(1).join("\n")}</span>
              </>
            ) : (
              <span className="text-gold">{headlineText}</span>
            )}
          </h1>
          <p className="mt-8 text-lg md:text-2xl text-white/95 max-w-3xl leading-relaxed font-display font-medium whitespace-pre-line">
            {subheadText}
          </p>
          <div className={`mt-10 flex flex-wrap gap-4 ${align === "center" ? "justify-center" : align === "right" ? "justify-end" : ""}`}>
            <Button to={ctaLink} variant="gold" size="lg">
              {ctaLabel}
            </Button>
            <Button to="be-a-man" variant="ghost" size="lg" className="border-2">
              Our Programs
            </Button>
          </div>
        </div>

        {/* Slide indicators */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-2">
          {slides.map((_, i) =>
          <button
            key={i}
            onClick={() => setCurrentSlide(i)}
            className={`h-1.5 rounded-full transition-all ${currentSlide === i ? "w-8 bg-gold" : "w-2 bg-white/40 hover:bg-white/60"}`}
            aria-label={`Slide ${i + 1}`} />

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

}

function MissionSection() {
  return (
    <section data-cms-section="mission" data-cms-page="home" className="bg-navy text-white py-24 md:py-32">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
        <div className="text-xs font-display font-bold uppercase tracking-[0.3em] text-gold">Our Mission</div>
        <p className="mt-6 font-display font-bold text-2xl md:text-4xl leading-[1.25] text-white">
          Fathers Arise exists to restore men to their God-given role as <span className="text-gold">present, responsible, and spiritually grounded fathers</span> who lead their families and communities with integrity.
        </p>
      </div>
    </section>
  );
}

function ImpactBar() {
  const [data, setData] = useState(null);
  useEffect(() => {window.cms.getImpactCounters().then(setData);}, []);
  const items = [
  { icon: "village", value: data?.schoolsReached ?? 42, suffix: "+", label: "Schools Reached" },
  { icon: "father", value: data?.youngMenTrained ?? 1240, suffix: "+", label: "Young Men Trained" },
  { icon: "forge", value: data?.fathersEngaged ?? 547, suffix: "+", label: "Fathers Engaged" },
  { icon: "globe", value: data?.activeForgeGroups ?? 82, suffix: "", label: "Forge Groups Active" }];


  return (
    <section className="relative bg-navy">
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6">
        <div className="bg-navy text-white">
          <div className="grid grid-cols-2 lg:grid-cols-4 divide-y lg:divide-y-0 lg:divide-x divide-white/10">
            {items.map((it, i) =>
            <div key={i} className="p-6 md:p-8 flex items-center gap-4 group">
                <span className="w-12 h-12 rounded-xl bg-white/8 ring-1 ring-white/15 flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-navy transition-colors">
                  <ImpactIcon name={it.icon} />
                </span>
                <div>
                  <div className="font-display font-black text-3xl md:text-4xl tabular-nums leading-none">
                    <CountUp to={it.value} suffix={it.suffix} />
                  </div>
                  <div className="mt-1.5 text-[11px] uppercase tracking-[0.18em] text-white/65 font-display font-semibold">{it.label}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function ImpactIcon({ name }) {
  const p = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "father":return <svg {...p}><circle cx="9" cy="6" r="3" /><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" /><circle cx="17" cy="9" r="2" /><path d="M14 21v-1a3 3 0 0 1 3-3h0a3 3 0 0 1 3 3v1" /></svg>;
    case "forge":return <svg {...p}><path d="M4 20h16M6 16l3-8 3 5 3-7 3 10" /><circle cx="9" cy="5" r="1.5" /></svg>;
    case "village":return <svg {...p}><path d="M3 21V11l5-4 5 4v10" /><path d="M13 21v-7l4-3 4 3v7" /><rect x="6" y="14" width="3" height="3" /></svg>;
    case "globe":return <svg {...p}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>;
    default:return null;
  }
}

/* ----- Problem section: crisis stats ----- */
function ProblemSection() {
  return (
    <section data-cms-section="problem" data-cms-page="home" id="problem" className="py-24 md:py-32 bg-paper">
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6">
        <div className="text-center">
          <h2 className="font-display font-black text-4xl md:text-5xl lg:text-6xl text-navy">
            The Crisis We Cannot Ignore
          </h2>
          <div className="mx-auto mt-3 w-24 h-1 bg-gold rounded-full" />
        </div>

        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6">
          <CrisisCard
            stat="64%"
            desc="of children in urban Kampala communities live without consistent fatherly presence. They are not orphans — their fathers are alive but absent." />
          
          <CrisisCard
            stat="7/10"
            desc="youth involved in substance abuse and street crime come from fatherless homes. The absence of a father creates a vacuum that the streets fill." />
          
          <CrisisCard
            stat="3x"
            desc="more likely for children without fathers to drop out of school, enter early marriage, or repeat cycles of abandonment in the next generation." />
          
        </div>

        <div className="mt-12 rounded-3xl bg-navy text-white p-8 md:p-12 text-center">
          <p className="font-display font-bold text-xl md:text-2xl lg:text-3xl leading-relaxed">
            "Most fatherhood programs try to fix broken men.<br />
            <span className="text-gold">We build a brotherhood that makes fathers want to stay.</span>"
          </p>
        </div>
      </div>
    </section>);

}

function CrisisCard({ stat, desc }) {
  return (
    <div className="rounded-2xl bg-white border border-navy/8 shadow-card p-8 text-center lift">
      <div className="font-display font-black text-5xl md:text-6xl text-navy leading-none">
        {stat}
      </div>
      <p className="mt-5 text-ink/70 leading-relaxed">
        {desc}
      </p>
    </div>);

}





/* ----- Programs grid ----- */
function ProgramsGrid() {
  const programs = [
  {
    slug: "be-a-man",
    title: "Be a Man",
    tag: "Foundations",
    tone: "warm",
    desc: "A 12-week curriculum that confronts the lies a Ugandan boy inherits and rebuilds him into a steady, present father.",
    bullets: ["Identity & calling", "Provision without absence", "Repair & forgiveness"],
    icon: "shield",
    image: "uploads/be a man card.webp"
  },
  {
    slug: "nurturing-bonds",
    title: "Nurturing Bonds",
    tag: "Father + Child",
    tone: "sky",
    desc: "Practical rhythms, language and play — taught in Forge groups — that rebuild connection between fathers and their children.",
    bullets: ["Bedtime liturgies", "Father-child days", "Listening labs"],
    icon: "heart",
    image: "uploads/TRG_Father_sBreakfast125.jpg"
  },
  {
    slug: "mobile-kanaabe",
    title: "Mobile Kanaabe",
    tag: "Outreach",
    tone: "navy",
    desc: "A travelling outreach — truck, tent, teaching team — bringing fatherhood teaching to villages without a Forge.",
    bullets: ["Three-day camps", "Free family clinics", "On-ramp to a Forge"],
    icon: "truck",
    image: "uploads/mobile kanabe card (2).png"
  }];


  return (
    <section id="programs" className="py-24 md:py-28 bg-paper">
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6">
        <div className="flex items-end justify-between flex-wrap gap-4">
          <SectionTitle eyebrow="The Programs" title="Three pillars. One restored father." />
          <Link to="programs" className="font-display font-bold uppercase text-sm tracking-wider text-navy hover:text-sky inline-flex items-center gap-2">
            Explore all programs
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </Link>
        </div>

        <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
          {programs.map((p) => <ProgramCard key={p.slug} {...p} />)}
        </div>
      </div>
    </section>);

}

function ProgramCard({ slug, title, tag, tone, desc, bullets, icon, image }) {
  return (
    <Link to={slug} className="group rounded-2xl bg-white border border-navy/8 shadow-card overflow-hidden lift block">
      <div className="relative">
        {image ?
        <img src={image} alt={title} className="w-full h-auto object-cover" style={{ aspectRatio: "16/10" }} /> :

        <Placeholder label={`${title} · program photo`} tone={tone} ratio="16/10" />
        }
        <div className="absolute top-4 left-4 inline-flex items-center gap-1.5 text-[10px] font-display font-bold uppercase tracking-widest bg-white/90 text-navy px-2.5 py-1 rounded-full">
          <span className="w-1.5 h-1.5 rounded-full bg-gold" /> {tag}
        </div>
        <div className="absolute -bottom-6 left-6 w-12 h-12 rounded-xl bg-gold text-navy flex items-center justify-center shadow-card">
          <ProgramIcon name={icon} />
        </div>
      </div>
      <div className="p-6 pt-9">
        <h3 className="font-display font-extrabold text-2xl text-navy">{title}</h3>
        <p className="mt-2 text-ink/70 leading-relaxed">{desc}</p>
        <ul className="mt-4 space-y-1.5">
          {bullets.map((b) =>
          <li key={b} className="flex items-center gap-2 text-sm text-ink/70">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="shrink-0 text-sky"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
              {b}
            </li>
          )}
        </ul>
        <div className="mt-5 inline-flex items-center gap-2 font-display font-bold uppercase text-sm tracking-wider text-navy group-hover:text-sky">
          Learn more
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="transition-transform group-hover:translate-x-0.5"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </div>
      </div>
    </Link>);

}

function ProgramIcon({ name }) {
  const p = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "shield":return <svg {...p}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z" /><path d="M9 12l2 2 4-4" /></svg>;
    case "heart":return <svg {...p}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" /></svg>;
    case "truck":return <svg {...p}><rect x="2" y="7" width="13" height="9" /><path d="M15 10h4l3 3v3h-7" /><circle cx="6" cy="18" r="2" /><circle cx="18" cy="18" r="2" /></svg>;
    default:return null;
  }
}

/* ----- Forge Goal Bar ----- */
function ForgeGoalBar() {
  const [goal, setGoal] = useState({ current: 82, target: 1000 });
  useEffect(() => {window.cms.getForgeGoal().then(setGoal);}, []);
  const [ref, inView] = useInView();
  const pct = Math.min(100, goal.current / goal.target * 100);

  return (
    <section ref={ref} className="relative py-20 md:py-24 bg-sky overflow-hidden">
      <div className="absolute inset-0 grid-bg opacity-25" />
      <div className="absolute -right-24 -top-24 w-[360px] h-[360px] rounded-full bg-white/10 blur-3xl" />
      <div className="relative max-w-[1280px] mx-auto px-4 sm:px-6 text-white">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 items-end">
          <div className="md:col-span-7">
            <div className="text-xs font-display font-bold uppercase tracking-[0.25em] text-gold">The Forge</div>
            <h2 className="mt-2 font-display font-black text-5xl md:text-7xl leading-[0.95]">
              <span className="tabular-nums">
                <CountUp to={goal.current} duration={1600} />
              </span>
              <span className="text-white/40"> / {goal.target.toLocaleString()}</span>
            </h2>
            <p className="mt-3 text-white/85 text-lg max-w-xl">
              Forge groups planted toward our goal of <strong>1,000 across Uganda</strong>. Every group is twelve men, weekly, for life.
            </p>
          </div>
          <div className="md:col-span-5 md:text-right">
            <div className="font-display font-black text-3xl tabular-nums">{pct.toFixed(1)}%</div>
            <div className="text-xs font-display uppercase tracking-widest text-white/70">of national goal reached</div>
          </div>
        </div>

        <div className="mt-10 relative">
          <div className="h-5 rounded-full bg-white/20 overflow-hidden ring-1 ring-white/30">
            <div
              className="h-full rounded-full bg-gradient-to-r from-gold to-[#FFE14D] relative"
              style={{ width: inView ? `${pct}%` : "0%", transition: "width 1.6s cubic-bezier(.2,.7,.2,1)" }}>
              
              <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.35)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.35)_50%,rgba(255,255,255,0.35)_75%,transparent_75%)] bg-[length:14px_14px] opacity-60" />
            </div>
          </div>
          {/* milestone ticks */}
          <div className="absolute top-full mt-2 left-0 right-0 flex justify-between text-[10px] font-display uppercase tracking-widest text-white/70">
            {[0, 250, 500, 750, 1000].map((m) =>
            <span key={m} className={m <= goal.current ? "text-gold" : ""}>{m}</span>
            )}
          </div>
          {/* current marker */}
          <div className="absolute -top-3 transition-all" style={{ left: inView ? `calc(${pct}% - 18px)` : "-18px", transition: "left 1.6s cubic-bezier(.2,.7,.2,1)" }}>
            <div className="w-10 h-10 rounded-full bg-white text-navy flex items-center justify-center font-display font-black text-xs shadow-lg ring-4 ring-gold">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.4 7.4H22l-6 4.4 2.3 7.2L12 16.7 5.7 21l2.3-7.2-6-4.4h7.6z" /></svg>
            </div>
          </div>
        </div>

        <div className="mt-16 flex flex-wrap gap-4">
          <Button to="forge" variant="gold" size="lg">Find a Forge near you</Button>
          <Button to="forge" variant="ghost" size="lg">Start a Forge group</Button>
        </div>
      </div>
    </section>);

}

/* ----- Testimonial ----- */
function TestimonialBlock() {
  const testimonials = [
  {
    quote: "The Forge gave me brothers who would not let me drift. My children have their father back, and my wife has her husband.",
    author: "Joseph K.",
    where: "Forge Busega, Kampala",
    img: "uploads/testimonial.jpg"
  },
  {
    quote: "I came thinking I was already a good father. I left understanding I had been a good provider — and a stranger.",
    author: "Patrick O.",
    where: "Forge Lira",
    img: "uploads/testimonial2.jpg"
  }];


  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % testimonials.length), 8000);
    return () => clearInterval(id);
  }, []);

  const t = testimonials[i];

  return (
    <section className="py-24 bg-paper">
      <div className="max-w-[1100px] mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 items-center">
          <div className="md:col-span-5">
            <img src={t.img} alt={t.author} className="rounded-2xl w-full h-auto object-cover shadow-card" style={{ aspectRatio: "4/5" }} />
          </div>
          <div className="md:col-span-7">
            <svg width="48" height="36" viewBox="0 0 48 36" fill="none" className="text-gold"><path d="M0 36V20C0 9 6 2 18 0v6c-6 2-9 6-9 12h9v18H0zm26 0V20C26 9 32 2 44 0v6c-6 2-9 6-9 12h9v18H26z" fill="currentColor" /></svg>
            <p className="mt-4 font-quote italic text-2xl md:text-3xl leading-snug text-navy">
              "{t.quote}"
            </p>
            <div className="mt-6 flex items-center justify-between">
              <div>
                <div className="font-display font-bold text-navy">{t.author}</div>
                <div className="text-sm text-ink/60">{t.where}</div>
              </div>
              <div className="flex gap-1.5">
                {testimonials.map((_, k) =>
                <button key={k} onClick={() => setI(k)} aria-label={`Testimonial ${k + 1}`}
                className={`h-1.5 rounded-full transition-all ${k === i ? "w-8 bg-navy" : "w-2 bg-navy/20 hover:bg-navy/40"}`} />
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ----- Events teaser ----- */
function EventsTeaser() {
  const [events, setEvents] = useState([]);
  useEffect(() => {window.cms.getEvents().then((e) => setEvents(e.slice(0, 3)));}, []);
  return (
    <section data-cms-section="events_teaser" data-cms-page="home" className="py-24 md:py-28">
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6">
        <div className="flex items-end justify-between flex-wrap gap-4">
          <SectionTitle eyebrow="What's Next" title="Upcoming gatherings" />
          <Link to="events" className="font-display font-bold uppercase text-sm tracking-wider text-navy hover:text-sky inline-flex items-center gap-2">
            All events
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </Link>
        </div>

        <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
          {events.map((e, idx) => <EventCard key={e.id} event={e} featured={idx === 0} />)}
        </div>
      </div>
    </section>);

}

function EventCard({ event, featured }) {
  const date = new Date(event.date);
  const month = date.toLocaleString("en", { month: "short" }).toUpperCase();
  const day = date.getDate();
  return (
    <div className={`rounded-2xl border shadow-card overflow-hidden lift ${featured ? "bg-navy text-white border-navy" : "bg-white border-navy/8"}`}>
      {event.image ?
      <img src={event.image} alt={event.title} className="w-full h-auto object-cover" style={{ aspectRatio: "16/9" }} /> :

      <Placeholder label={`event photo · ${event.type}`} tone={featured ? "dark" : "sky"} ratio="16/9" />
      }
      <div className="p-6">
        <div className="flex items-start gap-4">
          <div className={`shrink-0 w-16 rounded-xl text-center py-2 ${featured ? "bg-gold text-navy" : "bg-paper text-navy"}`}>
            <div className="font-display font-bold text-[10px] uppercase tracking-widest">{month}</div>
            <div className="font-display font-black text-2xl leading-none mt-0.5">{day}</div>
          </div>
          <div className="min-w-0">
            <div className={`text-[10px] font-display font-bold uppercase tracking-widest ${featured ? "text-gold" : "text-sky"}`}>{event.type}</div>
            <h3 className={`mt-1 font-display font-extrabold text-lg leading-snug ${featured ? "text-white" : "text-navy"}`}>{event.title}</h3>
            <div className={`mt-1 text-sm ${featured ? "text-white/70" : "text-ink/60"}`}>{event.location}</div>
          </div>
        </div>
        <div className="mt-5 flex justify-between items-center">
          <span className={`text-xs ${featured ? "text-white/60" : "text-ink/50"}`}>{event.summary.slice(0, 60)}…</span>
          <button className={`btn-gold rounded-full px-4 py-1.5 text-xs font-display font-bold uppercase`}>{event.cta}</button>
        </div>
      </div>
    </div>);

}

/* ----- Donate CTA ----- */
function DonateCTA() {
  return (
    <section className="py-24">
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6">
        <div className="relative rounded-3xl bg-gradient-to-br from-navy to-[#0F1454] text-white overflow-hidden">
          <div className="absolute inset-0 grid-bg opacity-20" />
          <div className="absolute -right-20 -top-20 w-[420px] h-[420px] rounded-full bg-sky/20 blur-3xl" />
          <div className="relative px-8 md:px-16 py-14 md:py-20 grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
            <div className="md:col-span-7">
              <div className="text-xs font-display font-bold uppercase tracking-[0.25em] text-gold">Restore A Father</div>
              <h2 className="mt-3 font-display font-black text-4xl md:text-5xl leading-[1.05]">
                <span className="text-gold">USh 30,000</span> puts one father in a Forge group for a month.
              </h2>
              <p className="mt-4 text-white/80 max-w-xl">
                Curriculum, transport, a meal, and the brotherhood that walks him through. Your monthly gift compounds — for him, for his children, for the village he leads tomorrow.
              </p>
            </div>
            <div className="md:col-span-5 flex md:justify-end gap-3 flex-wrap">
              <Button to="donate" variant="gold" size="lg">Donate now</Button>
              <Button to="get-involved" variant="ghost" size="lg">Other ways to give</Button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}



function TwoPillars() {
  return (
    <section className="py-24 md:py-28 bg-white">
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6">
        <SectionTitle eyebrow="Our Two Pillars" title="Two pathways. One movement." center />
        <div className="mt-14 grid grid-cols-1 md:grid-cols-2 gap-8">
          <Link to="be-a-man" className="group rounded-3xl overflow-hidden border-t-8 border-sky bg-paper shadow-card lift block">
            <img src="uploads/FA-09310.jpg" alt="Be A Man" className="w-full object-cover" style={{ aspectRatio: "16/10" }} />
            <div className="p-8 md:p-10">
              <div className="text-xs font-display font-bold uppercase tracking-[0.2em] text-sky">Pillar One</div>
              <h3 className="mt-2 font-display font-black text-3xl md:text-4xl text-navy">Be A Man <span className="text-sky">(B-E-A-M-A-N)</span></h3>
              <p className="mt-4 text-ink/75 leading-relaxed text-lg">Raising a generation of men who know who they are before the world tells them who to be. Through school clubs, outreaches, retreats, and mentorship.</p>
              <div className="mt-6 inline-flex items-center gap-2 font-display font-bold uppercase text-sm tracking-wider text-sky group-hover:text-navy">
                Discover Be A Man
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
            </div>
          </Link>
          <Link to="nurturing-bonds" className="group rounded-3xl overflow-hidden border-t-8 border-gold bg-paper shadow-card lift block">
            <img src="uploads/TRG_Father_sBreakfast125.jpg" alt="Nurturing Bonds" className="w-full object-cover" style={{ aspectRatio: "16/10" }} />
            <div className="p-8 md:p-10">
              <div className="text-xs font-display font-bold uppercase tracking-[0.2em] text-[#A07700]">Pillar Two</div>
              <h3 className="mt-2 font-display font-black text-3xl md:text-4xl text-navy">Nurturing Bonds</h3>
              <p className="mt-4 text-ink/75 leading-relaxed text-lg">Healing the wounds that fathers carry, so they stop passing them to their children. Through Forge groups, curricula, and crisis support.</p>
              <div className="mt-6 inline-flex items-center gap-2 font-display font-bold uppercase text-sm tracking-wider text-[#A07700] group-hover:text-navy">
                Discover Nurturing Bonds
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
            </div>
          </Link>
        </div>
      </div>
    </section>
  );
}

function FeaturedStory() {
  return (
    <section className="relative bg-ink text-white overflow-hidden">
      <div className="absolute inset-0">
        <img src="uploads/testimonial.jpg" alt="" className="w-full h-full object-cover opacity-50" />
        <div className="absolute inset-0 bg-gradient-to-r from-navy/95 via-navy/80 to-navy/40" />
      </div>
      <div className="relative max-w-[1280px] mx-auto px-4 sm:px-6 py-24 md:py-32">
        <div className="max-w-2xl">
          <div className="text-xs font-display font-bold uppercase tracking-[0.25em] text-gold">Stories of Transformation</div>
          <p className="mt-6 font-quote italic text-3xl md:text-5xl leading-[1.15] text-white">
            “The Forge gave me brothers who would not let me drift. My children have their father back, and my wife has her husband.”
          </p>
          <div className="mt-6 font-display font-bold text-gold uppercase tracking-widest text-sm">— Joseph K., Kampala</div>
          <div className="mt-10">
            <Button to="stories" variant="gold" size="lg">Read More Stories</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function MobileKanaabeCallout() {
  return (
    <section className="py-24 bg-[#E6F8EE]">
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10 items-center">
          <div className="md:col-span-6 rounded-3xl overflow-hidden shadow-card">
            <img src="uploads/mobile kanabe card (2).png" alt="Mobile Kanaabe" className="w-full object-cover" style={{ aspectRatio: "4/3" }} />
          </div>
          <div className="md:col-span-6">
            <div className="inline-flex items-center gap-2 text-xs font-display font-bold uppercase tracking-[0.25em] text-forest">
              <span className="w-8 h-px bg-forest" /> Economic Empowerment
            </div>
            <h2 className="mt-4 font-display font-black text-4xl md:text-5xl text-navy leading-[1.05]">Mobile Kanaabe</h2>
            <p className="mt-5 text-lg text-ink/75 leading-relaxed">
              Economic empowerment for young men who need more than words — they need work. We link character development with income-generating skills.
            </p>
            <div className="mt-8">
              <Link to="mobile-kanaabe" className="inline-flex items-center gap-2 btn-green rounded-full px-7 py-3.5 font-display font-bold uppercase tracking-wider text-sm">
                Learn More
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CycleEndsCTA() {
  return (
    <section className="bg-navy text-white py-24 md:py-32 relative overflow-hidden">
      <div className="absolute inset-0 grid-bg opacity-15" />
      <div className="absolute -right-32 -top-32 w-[460px] h-[460px] rounded-full bg-gold/10 blur-3xl" />
      <div className="relative max-w-4xl mx-auto px-4 sm:px-6 text-center">
        <h2 className="font-display font-black text-4xl md:text-6xl leading-[1.05]">
          The cycle of fatherlessness <span className="text-gold">ends with you.</span>
        </h2>
        <p className="mt-6 text-lg md:text-xl text-white/85 max-w-2xl mx-auto leading-relaxed">
          Whether you are a young man looking for direction, a father seeking to heal, or a partner wanting to invest — there is a place for you.
        </p>
        <div className="mt-10 flex flex-wrap gap-4 justify-center">
          <Button to="get-involved" variant="gold" size="lg">Register as a Father</Button>
          <Button to="get-involved" variant="ghost" size="lg" className="border-2">Partner With Us</Button>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <div data-screen-label="01 Home">
      <HeroSection />
      <MissionSection />
      <ImpactBar />
      <TwoPillars />
      <TestimonialBlock />
      <MobileKanaabeCallout />
      <CycleEndsCTA />
    </div>);

}

window.HomePage = HomePage;