/* =============================================================
 * Programs pages: Be A Man, Nurturing Bonds, Mobile Kanaabe
 * Content per Fathers Arise Website Design Brief
 * ============================================================= */

const BEAMAN_FRAMEWORK = [
  { letter: "B", word: "Bold in Character", desc: "A real man does not hide from hard things. He faces them. Boldness is not aggression — it is the quiet courage to do what needs to be done even when no one is watching." },
  { letter: "E", word: "Emotionally Intelligent", desc: "A man who cannot name what he feels will be controlled by what he feels. Emotional intelligence is the superpower that separates a man who leads from a man who reacts." },
  { letter: "A", word: "Accountable to Others", desc: "No man was made to walk alone. A man who has no one to answer to is a man who is dangerous to himself and everyone around him." },
  { letter: "M", word: "Mentored and Mentoring", desc: "The greatest act of leadership is not what you build — it is who you raise. One mature man shapes younger men. Those men shape others. The cycle of absence is replaced by a cycle of presence." },
  { letter: "A", word: "Anchored in Faith", desc: "A man without a foundation will be shaken by every storm. We anchor young men in a living relationship with God that gives them identity, purpose, and direction." },
  { letter: "N", word: "Nurturing the Next Generation", desc: "The ultimate test of a man is not what he achieves — it is what he leaves behind. True greatness is a passionate love for God demonstrated in an unquenchable love for others." },
];

const BEAMAN_SESSIONS = [
  { n: "1", title: "Bold in Character — The Strength Decision", desc: "What makes a man is not how much strength he has but what he does with his strength." },
  { n: "2", title: "Emotionally Intelligent — The Man Behind the Mask", desc: "Tearing apart the lie that real men do not feel. Teaching emotional awareness as a leadership skill." },
  { n: "3", title: "Accountable to Others — The Band of Brothers", desc: "Establishing accountability partnerships. A friend tells you what you want to hear; a brother tells you what you need to hear." },
  { n: "4", title: "Mentored and Mentoring — The Transfer", desc: "No great man was self-made. Introducing the mentorship model and the challenge to both receive and give." },
  { n: "5", title: "Anchored in Faith — The Foundation", desc: "Challenging the false gods of popularity, money, and image. Presenting the invitation to build on something bigger." },
  { n: "6", title: "Nurturing the Next Generation — The Legacy", desc: "Writing a Legacy Letter to their future children. The culmination of the Be A Man identity journey." },
];

const BEYOND_CLASSROOM = [
  { title: "Retreats & Camps", img: "uploads/FATHERS ARISE-84.jpg", desc: "2–3 day intensive experiences that take young men out of their environment and into a space where transformation can happen. Advanced curriculum, outdoor challenges, personal storytelling circles, and closing declarations." },
  { title: "Prison Outreach", img: "uploads/FATHERS ARISE MEETING-79.jpg", desc: "The young men behind bars are not lost. They are waiting for someone to see them. Same B-E-A-M-A-N framework, adapted for men living with consequences of choices made without guidance." },
  { title: "Sports & Recreation", img: "uploads/Father's Arise Football tournament-event section.jpg", desc: "A football field is a classroom. Every sports event is structured with three elements: play, pause, and purpose." },
  { title: "Annual Gathering", img: "uploads/FATHERS ARISE MEETING-49 (1).jpg", desc: "Every chapter comes together once a year for The Gathering — keynote speakers, chapter awards, Legacy Letter readings, and the invitation to Christ." },
];

function BeAManPage() {
  const [open, setOpen] = useState(0);
  // Phase 3.7: editable site content
  const [cms, setCms] = useState({});
  useEffect(() => {
    if (window.cms && typeof window.cms.getSiteContent === "function") {
      window.cms.getSiteContent("beaman").then(setCms);
    }
  }, []);
  const hero = cms.hero || {};
  const heroImage = hero.image || "uploads/FA-09310.jpg";
  const heroTitle = hero.headline || "Be A Man";
  const heroSub = hero.subhead || "Raising a generation of men who know who they are before the world tells them who to be.";
  const heroAlign = hero.align || "left";
  const heroAlignClass = heroAlign === "center" ? "text-center" : heroAlign === "right" ? "text-right" : "text-left";

  return (
    <div data-screen-label="03 Be A Man">
      {/* Hero — Sky Blue overlay */}
      <section data-cms-section="hero" data-cms-page="beaman" className="relative bg-navy text-white overflow-hidden">
        <div className="absolute inset-0">
          <img src={heroImage} alt="" className="w-full h-full object-cover" />
          <div className="absolute inset-0" style={{ background: "linear-gradient(135deg, rgba(46,150,212,0.85) 0%, rgba(13,17,71,0.75) 100%)" }} />
        </div>
        <div className={`relative max-w-[1280px] mx-auto px-4 sm:px-6 py-28 md:py-36 ${heroAlignClass}`}>
          <div className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-white/15 backdrop-blur text-xs font-display font-bold uppercase tracking-[0.25em] text-white border border-white/30">Pillar One</div>
          <h1 className="mt-6 font-display font-black text-5xl sm:text-6xl md:text-7xl leading-[0.95]">{heroTitle}</h1>
          <p className="mt-6 max-w-3xl text-xl md:text-2xl text-white/95 font-display font-medium leading-snug">{heroSub}</p>
        </div>
      </section>

      {/* What Be A Man Is */}
      <section className="py-20 bg-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6">
          <p className="text-xl md:text-2xl text-ink/85 leading-relaxed font-display font-medium">
            Be A Man is more than a program. It is an <span className="text-sky font-bold">identity declaration</span>. It is the moment when a young man stops letting the world define him and starts defining himself. We go where the young men are — into schools, universities, prisons, and communities where boys are becoming men with no one to show them how. And we say six words that change everything.
          </p>
        </div>
      </section>

      {/* B-E-A-M-A-N Framework */}
      <section className="py-24 bg-paper">
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
          <SectionTitle eyebrow="The Framework" title="B-E-A-M-A-N" center />
          <p className="mt-4 text-center max-w-2xl mx-auto text-ink/70">Six words. Six commitments. One man.</p>
          <div className="mt-14 space-y-4">
            {BEAMAN_FRAMEWORK.map((v, i) => (
              <article key={i} className="grid grid-cols-1 md:grid-cols-12 gap-6 items-center rounded-3xl bg-white border-l-8 border-sky shadow-card p-8 md:p-10">
                <div className="md:col-span-2">
                  <div className="w-24 h-24 rounded-2xl bg-sky text-white flex items-center justify-center font-display font-black text-6xl">{v.letter}</div>
                </div>
                <div className="md:col-span-10">
                  <h3 className="font-display font-black text-2xl md:text-3xl text-navy">{v.word}</h3>
                  <p className="mt-3 text-ink/75 text-lg leading-relaxed">{v.desc}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-24 bg-white">
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
          <SectionTitle eyebrow="The Process" title="How It Works" center />
          <ol className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-6">
            {[
              { n: "01", title: "We Enter the School", desc: "We partner with secondary schools and universities, presenting the Be A Man vision to administration and students." },
              { n: "02", title: "We Launch a Chapter", desc: "Interested students register, Chapter Captains are selected, and a weekly or bi-weekly meeting rhythm begins using our 6-session B-E-A-M-A-N curriculum." },
              { n: "03", title: "We Build Men", desc: "Through sessions, retreats, sports, mentoring, and accountability, young men develop character, identity, and purpose." },
            ].map((s) => (
              <li key={s.n} className="relative rounded-3xl bg-navy text-white p-8 overflow-hidden">
                <div className="absolute inset-0 grid-bg opacity-10" />
                <div className="relative">
                  <div className="font-display font-black text-6xl text-sky leading-none">{s.n}</div>
                  <h3 className="mt-4 font-display font-black text-2xl">{s.title}</h3>
                  <p className="mt-3 text-white/80 leading-relaxed">{s.desc}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* 6-Session Curriculum */}
      <section className="py-24 bg-paper">
        <div className="max-w-3xl mx-auto px-4 sm:px-6">
          <SectionTitle eyebrow="The Curriculum" title="The 6-Session Journey" center />
          <div className="mt-12 space-y-3">
            {BEAMAN_SESSIONS.map((s, i) => (
              <div key={i} className="rounded-2xl bg-white border border-navy/10 overflow-hidden">
                <button onClick={() => setOpen(open === i ? -1 : i)} className="w-full flex items-center gap-5 p-6 text-left hover:bg-paper/50">
                  <div className="w-12 h-12 rounded-full bg-sky text-white flex items-center justify-center font-display font-black text-lg shrink-0">{s.n}</div>
                  <div className="flex-1 font-display font-bold text-navy text-lg">{s.title}</div>
                  <svg className={`w-5 h-5 text-navy transition-transform ${open === i ? "rotate-180" : ""}`} viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" /></svg>
                </button>
                {open === i && <div className="px-6 pb-6 pl-23 text-ink/75 leading-relaxed" style={{ paddingLeft: "92px" }}>{s.desc}</div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Beyond the Classroom */}
      <section className="py-24 bg-white">
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
          <SectionTitle eyebrow="Beyond the Classroom" title="Where transformation deepens" center />
          <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
            {BEYOND_CLASSROOM.map((b, i) => (
              <article key={i} className="rounded-3xl overflow-hidden bg-paper shadow-card lift">
                <img src={b.img} alt={b.title} className="w-full object-cover" style={{ aspectRatio: "16/10" }} />
                <div className="p-8">
                  <h3 className="font-display font-black text-2xl text-navy">{b.title}</h3>
                  <p className="mt-3 text-ink/75 leading-relaxed">{b.desc}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Block */}
      <section className="py-24 bg-navy text-white relative overflow-hidden">
        <div className="absolute inset-0 grid-bg opacity-15" />
        <div className="relative max-w-3xl mx-auto px-4 sm:px-6 text-center">
          <h2 className="font-display font-black text-4xl md:text-6xl leading-tight">Bring Be A Man to <span className="text-sky">Your School</span></h2>
          <p className="mt-6 text-lg text-white/85 leading-relaxed">If you are a headteacher, chaplain, or school administrator who wants to bring positive masculinity into your institution, we want to hear from you.</p>
          <div className="mt-10">
            <Button to="contact" variant="gold" size="lg">Contact Us to Start a Chapter</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===== Nurturing Bonds ===== */
const SEVEN_PROGRAMS = [
  { title: "Fathers Foundations Program", audience: "For fathers who grew up without fathers.", desc: "The entry point. Addresses the root of fatherlessness itself — healing the absent father wound and reframing identity." },
  { title: "Emotional Presence & Connection Lab", audience: "For busy, working fathers.", desc: "Training fathers to be emotionally present, not just financially present. Micro-moment design, active listening, presence audits." },
  { title: "Work-Life-Faith Balance Program", audience: "For professionals and pastors.", desc: "Shifting from being busy to being intentional. Boundary-setting, family-first rhythms, redefining success beyond provision." },
  { title: "Faith-at-Home Discipleship", audience: "For Christian fathers.", desc: "Equipping fathers as spiritual leaders at home — modelling faith in the kitchen, at the table, in the car." },
  { title: "Mentorship & Role Model Network", audience: "For young and at-risk fathers.", desc: "One mature father mentors two to three younger fathers. Replacing absence with access. Transfer of values across generations." },
  { title: "Crisis & Complex Fathering Support", audience: "For fathers in difficult realities.", desc: "Divorce, special needs, blended families, incarceration. Your situation may be complicated, but your fatherhood is not disqualified." },
  { title: "Legacy & Community Impact", audience: "For senior fathers and leaders.", desc: "Legacy planning, community fatherhood forums, advocacy campaigns. Fathers influencing beyond their homes." },
];

function NurturingBondsPage() {
  // Phase 3.7: editable site content
  const [cms, setCms] = useState({});
  useEffect(() => {
    if (window.cms && typeof window.cms.getSiteContent === "function") {
      window.cms.getSiteContent("nurturing").then(setCms);
    }
  }, []);
  const hero = cms.hero || {};
  const heroImage = hero.image || "uploads/TRG_Father_sBreakfast125.jpg";
  const heroTitle = hero.headline || "Nurturing Bonds";
  const heroAlign = hero.align || "left";
  const heroAlignClass = heroAlign === "center" ? "text-center" : heroAlign === "right" ? "text-right" : "text-left";

  return (
    <div data-screen-label="04 Nurturing Bonds">
      {/* Hero — Gold overlay */}
      <section data-cms-section="hero" data-cms-page="nurturing" className="relative bg-navy text-white overflow-hidden">
        <div className="absolute inset-0">
          <img src={heroImage} alt="" className="w-full h-full object-cover" />
          <div className="absolute inset-0" style={{ background: "linear-gradient(135deg, rgba(232,184,48,0.82) 0%, rgba(13,17,71,0.85) 100%)" }} />
        </div>
        <div className={`relative max-w-[1280px] mx-auto px-4 sm:px-6 py-28 md:py-36 ${heroAlignClass}`}>
          <div className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-white/15 backdrop-blur text-xs font-display font-bold uppercase tracking-[0.25em] text-white border border-white/30">Pillar Two</div>
          <h1 className="mt-6 font-display font-black text-5xl sm:text-6xl md:text-7xl leading-[0.95]">{heroTitle}</h1>
          <p className="mt-6 max-w-3xl text-xl md:text-2xl text-white/95 font-display font-medium leading-snug">Healing the wounds that fathers carry, so they stop passing them to their children.</p>
        </div>
      </section>

      {/* What it is */}
      <section className="py-20 bg-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 space-y-6">
          <p className="text-lg text-ink/85 leading-relaxed">Nurturing Bonds meets the man after the wound has already done its work. These are men who are already fathers — some present, some absent, some trying and failing, some drowning in silence and shame.</p>
          <p className="text-lg text-ink/85 leading-relaxed">We do not shame these men. We walk beside them and say: <span className="font-bold text-navy">You are not your past. You can become the father your children need — but you cannot do it alone.</span></p>
          <div className="mt-8 border-l-4 border-gold pl-6 py-2">
            <p className="font-display font-bold text-2xl text-navy leading-snug italic">A man cannot give what he does not have. Nurturing Bonds gives him what he never received.</p>
          </div>
        </div>
      </section>

      {/* The Forge */}
      <section className="py-24 bg-navy text-white relative overflow-hidden">
        <div className="absolute inset-0 grid-bg opacity-10" />
        <div className="relative max-w-[1200px] mx-auto px-4 sm:px-6 grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7">
            <div className="text-xs font-display font-bold uppercase tracking-[0.3em] text-gold">The Signature Model</div>
            <h2 className="mt-4 font-display font-black text-5xl md:text-6xl leading-[1.05]">The <span className="text-gold">Forge</span></h2>
            <p className="mt-6 text-lg text-white/85 leading-relaxed">A Forge is a small group of <span className="text-gold font-bold">8–15 fathers</span> who meet consistently over a 12-week cycle. The name is intentional: a forge is where raw metal is heated, hammered, and shaped into something strong and useful.</p>
            <p className="mt-4 font-display font-bold text-2xl text-gold">He comes in raw. He comes out refined.</p>
            <div className="mt-8 grid grid-cols-2 gap-3">
              {["12 sessions", "Trained leader", "Structured curriculum", "Storytelling circles", "Accountability checks", "Personal challenges", "Confidentiality covenant", "Legacy declarations"].map((it) => (
                <div key={it} className="flex items-center gap-2 text-sm text-white/85"><span className="w-1.5 h-1.5 rounded-full bg-gold" /> {it}</div>
              ))}
            </div>
          </div>
          <div className="lg:col-span-5">
            <img src="uploads/Forge 1-104.jpg" alt="Forge meeting" className="w-full rounded-3xl border-4 border-gold/30 shadow-2xl object-cover" style={{ aspectRatio: "4/5" }} />
          </div>
        </div>
      </section>

      {/* 7 Flagship Programs */}
      <section className="py-24 bg-paper">
        <div className="max-w-[1280px] mx-auto px-4 sm:px-6">
          <SectionTitle eyebrow="The 7 Flagship Programs" title="A pathway for every father" center />
          <div className="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {SEVEN_PROGRAMS.map((p, i) => (
              <article key={i} className="rounded-3xl bg-white p-8 border-t-8 border-gold shadow-card lift">
                <div className="font-display font-black text-5xl text-gold tabular-nums">{String(i + 1).padStart(2, "0")}</div>
                <h3 className="mt-4 font-display font-black text-xl text-navy leading-tight">{p.title}</h3>
                <div className="mt-2 text-xs font-display font-bold uppercase tracking-wider text-[#A07700]">{p.audience}</div>
                <p className="mt-3 text-ink/75 leading-relaxed">{p.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Register CTA */}
      <section className="py-24 bg-gold text-navy relative overflow-hidden">
        <div className="absolute inset-0 grid-bg opacity-10" />
        <div className="relative max-w-3xl mx-auto px-4 sm:px-6 text-center">
          <div className="text-xs font-display font-bold uppercase tracking-[0.3em] text-navy/70">Register as a Father</div>
          <h2 className="mt-4 font-display font-black text-4xl md:text-6xl leading-tight">Join the Forge</h2>
          <p className="mt-6 text-lg leading-relaxed">Whether you are a first-time father or a grandfather — there is a seat for you at the Forge. Register and we will connect you with a group near you.</p>
          <div className="mt-10 flex flex-wrap gap-3 justify-center">
            <Button to="get-involved" variant="navy" size="lg">Register Now</Button>
            <a href="https://wa.me/256700669586" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 rounded-full px-7 py-3.5 border-2 border-navy text-navy font-display font-bold uppercase tracking-wider text-sm hover:bg-navy hover:text-white transition-colors">
              Or WhatsApp Us Directly
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===== Mobile Kanaabe ===== */
function MobileKanaabePage() {
  // Phase 3.7: editable site content
  const [cms, setCms] = useState({});
  useEffect(() => {
    if (window.cms && typeof window.cms.getSiteContent === "function") {
      window.cms.getSiteContent("mobile").then(setCms);
    }
  }, []);
  const hero = cms.hero || {};
  const heroImage = hero.image || "uploads/mobile kanabe card (2).png";
  const heroTitle = hero.headline || "Mobile Kanaabe";
  const heroSub = hero.subhead || "Economic empowerment for young men who need more than words — they need work.";
  const heroAlign = hero.align || "left";
  const heroAlignClass = heroAlign === "center" ? "text-center" : heroAlign === "right" ? "text-right" : "text-left";

  return (
    <div data-screen-label="05 Mobile Kanaabe">
      <section data-cms-section="hero" data-cms-page="mobile" className="relative bg-navy text-white overflow-hidden">
        <div className="absolute inset-0">
          <img src={heroImage} alt="" className="w-full h-full object-cover" />
          <div className="absolute inset-0" style={{ background: "linear-gradient(135deg, rgba(46,204,113,0.78) 0%, rgba(13,17,71,0.85) 100%)" }} />
        </div>
        <div className={`relative max-w-[1280px] mx-auto px-4 sm:px-6 py-28 md:py-36 ${heroAlignClass}`}>
          <div className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-white/15 backdrop-blur text-xs font-display font-bold uppercase tracking-[0.25em] text-white border border-white/30">Economic Empowerment</div>
          <h1 className="mt-6 font-display font-black text-5xl sm:text-6xl md:text-7xl leading-[0.95]">{heroTitle}</h1>
          <p className="mt-6 max-w-3xl text-xl md:text-2xl text-white/95 font-display font-medium leading-snug">{heroSub}</p>
        </div>
      </section>

      <section className="py-20 bg-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6">
          <div className="text-xs font-display font-bold uppercase tracking-[0.25em] text-forest">The Problem</div>
          <p className="mt-6 text-xl md:text-2xl text-ink/85 leading-relaxed font-display font-medium">
            A man who cannot provide is a man who often disappears. We break that cycle by linking character development with economic capacity. Mobile Kanaabe gives young men practical income-generating skills — starting with car wash services, skills training, and micro-enterprise.
          </p>
        </div>
      </section>

      <section className="py-24 bg-[#E6F8EE]">
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
          <SectionTitle eyebrow="What We Do" title="Skills. Work. Dignity." center />
          <div className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-6">
            {[
              { title: "Car Wash Enterprise", desc: "Car wash services managed and operated by trained young men." },
              { title: "Skills Training", desc: "Practical skills workshops linked to the B-E-A-M-A-N framework." },
              { title: "Micro-Enterprise Support", desc: "Guidance on starting and managing small businesses." },
            ].map((c, i) => (
              <article key={i} className="rounded-3xl bg-white p-8 border-t-8 border-forest shadow-card lift">
                <div className="font-display font-black text-5xl text-forest tabular-nums">{String(i + 1).padStart(2, "0")}</div>
                <h3 className="mt-4 font-display font-black text-2xl text-navy leading-tight">{c.title}</h3>
                <p className="mt-3 text-ink/75 leading-relaxed">{c.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="py-24 bg-navy text-white relative overflow-hidden">
        <div className="absolute inset-0 grid-bg opacity-15" />
        <div className="relative max-w-3xl mx-auto px-4 sm:px-6 text-center">
          <h2 className="font-display font-black text-4xl md:text-6xl leading-tight">Support Mobile Kanaabe or <span className="text-forest">Hire Our Team</span></h2>
          <div className="mt-10">
            <Button to="contact" variant="gold" size="lg">Contact Us</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.BeAManPage = BeAManPage;
window.NurturingBondsPage = NurturingBondsPage;
window.MobileKanaabePage = MobileKanaabePage;
