/* =============================================================
 * Shared components: Navbar, Footer, Buttons, Placeholders, Hooks
 * ============================================================= */

const { useState, useEffect, useRef, useCallback, useMemo } = React;

/* ---------- Routing (hash based, lightweight) ---------- */
function useHashRoute() {
  const [route, setRoute] = useState(() => window.location.hash.replace(/^#\/?/, "") || "home");
  useEffect(() => {
    const onHash = () => {
      const r = window.location.hash.replace(/^#\/?/, "") || "home";
      setRoute(r);
      window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return [route, (r) => {window.location.hash = "/" + r;}];
}

function Link({ to, children, className = "", onClick, ...rest }) {
  const handleClick = (e) => {
    e.preventDefault();
    if (onClick) onClick(e);
    window.location.hash = "/" + to;
  };
  return (
    <a href={"#/" + to} onClick={handleClick} className={className} {...rest}>
      {children}
    </a>
  );
}

/* ---------- IntersectionObserver hook for in-view animations ---------- */
function useInView(options = { threshold: 0.25, rootMargin: "0px 0px -10% 0px" }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {setInView(true);io.disconnect();}
    }, options);
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, inView];
}

/* ---------- Animated counter ---------- */
function CountUp({ to = 0, duration = 1400, suffix = "", className = "" }) {
  const [ref, inView] = useInView();
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!inView) return;
    const start = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(eased * to));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [inView, to, duration]);
  return <span ref={ref} className={className}>{val.toLocaleString()}{suffix}</span>;
}

/* ---------- Logo ---------- */
function Logo({ className = "h-10 w-auto" }) {
  const src = typeof window !== "undefined" && window.__resources && window.__resources.logo || "assets/logo.png";
  return <img src={src} alt="Fathers Arise" className={className} />;
}

/* ---------- Buttons ---------- */
function Button({ as = "button", variant = "navy", size = "md", className = "", children, to, ...rest }) {
  const sizes = {
    sm: "px-4 py-2 text-sm",
    md: "px-6 py-3 text-[15px]",
    lg: "px-8 py-4 text-base"
  };
  const variants = {
    gold: "btn-gold",
    sky: "btn-sky",
    navy: "btn-navy",
    ghost: "bg-white/10 text-white border border-white/30 hover:bg-white/20",
    outline: "bg-white text-navy border border-navy/15 hover:border-navy/40"
  };
  const cls = `inline-flex items-center justify-center gap-2 font-display font-bold rounded-full transition-all uppercase tracking-wide ${sizes[size]} ${variants[variant]} ${className}`;
  if (to) return <Link to={to} className={cls} {...rest}>{children}</Link>;
  const Tag = as;
  return <Tag className={cls} {...rest}>{children}</Tag>;
}

/* ---------- Placeholder image (striped, with caption) ---------- */
function Placeholder({ label = "image", className = "", tone = "navy", ratio = "16/9" }) {
  const tones = {
    navy: "ph-stripes",
    warm: "ph-stripes-warm",
    sky: "ph-stripes-sky",
    dark: "ph-stripes-dark text-white/80"
  };
  return (
    <div
      className={`relative ${tones[tone]} flex items-center justify-center overflow-hidden ${className}`}
      style={{ aspectRatio: ratio }}
      role="img"
      aria-label={label}>
      
      <div className="text-[10px] font-mono uppercase tracking-[0.2em] text-navy/55 px-3 py-1.5 rounded-full bg-white/70 backdrop-blur-sm">
        {label}
      </div>
    </div>);

}

/* ---------- Top utility bar ---------- */
function UtilityBar() {
  const [lang, setLang] = useLang();

  // Apply selected language to Google Translate (with retry until the widget is ready)
  const applyGoogleLang = (target) => {
    let tries = 0;
    const attempt = () => {
      const ok = typeof window.faSetGoogleLang === "function" && window.faSetGoogleLang(target);
      if (!ok && tries++ < 30) setTimeout(attempt, 250);
    };
    attempt();
  };

  const choose = (next) => {
    setLang(next);                  // updates locally-translated strings (navbar etc.)
    applyGoogleLang(next);          // triggers Google Translate for the rest of the page
  };

  // On first mount, restore the saved language in the Google Translate widget too
  useEffect(() => {
    applyGoogleLang(lang);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="bg-navy text-white text-xs">
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6 h-9 flex items-center justify-between">
        <div className="hidden sm:flex items-center gap-5 opacity-90">
          {/* Contact info removed */}
        </div>
        <div className="flex items-center gap-4 ml-auto">
          <a href="#/donate" className="hidden md:inline-flex items-center gap-1.5 hover:text-gold">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><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" stroke="currentColor" strokeWidth="2" /></svg>
            {t('restore.cta', lang)}
          </a>
          <span className="hidden md:block w-px h-4 bg-white/20" />
          <div className="flex items-center gap-2 font-display font-semibold notranslate" translate="no">
            <button onClick={() => choose('en')} className={`px-1.5 py-0.5 rounded ${lang === 'en' ? 'bg-gold text-navy' : 'hover:bg-white/10'}`}>EN</button>
            <span className="opacity-50">|</span>
            <button onClick={() => choose('lg')} className={`px-1.5 py-0.5 rounded ${lang === 'lg' ? 'bg-gold text-navy' : 'hover:bg-white/10'}`}>LG</button>
            <span className="opacity-50">|</span>
            <button onClick={() => choose('sw')} className={`px-1.5 py-0.5 rounded ${lang === 'sw' ? 'bg-gold text-navy' : 'hover:bg-white/10'}`}>SW</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Navbar ---------- */
function Navbar({ route }) {
  const [lang] = useLang();
  const [open, setOpen] = useState(false);
  const [progOpen, setProgOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navItems = [
  { label: t('nav.about', lang), to: "about" },
  { label: "Be A Man", to: "be-a-man" },
  { label: "Nurturing Bonds", to: "nurturing-bonds" },
  { label: "Mobile Kanaabe", to: "mobile-kanaabe" },
  { label: "Champion Virtues", to: "champion-virtues" },
  { label: t('nav.stories', lang), to: "stories" },
  { label: t('nav.getInvolved', lang), to: "get-involved" },
  { label: t('nav.contact', lang), to: "contact" }];
  
  const programsMenu = [
    { title: t('programs.beAMan', lang), desc: t('programs.beAMan.desc', lang), to: "be-a-man" },
    { title: t('programs.nurturingBonds', lang), desc: t('programs.nurturingBonds.desc', lang), to: "nurturing-bonds" },
    { title: t('programs.mobileKanaabe', lang), desc: t('programs.mobileKanaabe.desc', lang), to: "mobile-kanaabe" }
  ];


  const isActive = (to) => route === to || to === "programs" && ["be-a-man", "nurturing-bonds", "mobile-kanaabe"].includes(route);

  return (
    <>
      <UtilityBar />
      <header className={`sticky top-0 z-40 transition-all ${scrolled ? "bg-white/90 backdrop-blur-md shadow-sm" : "bg-white"}`}>
        <div className="max-w-[1280px] mx-auto px-4 sm:px-6 h-20 flex items-center justify-between">
          <Link to="home" className="flex items-center gap-3">
            <Logo className="h-11 w-auto" />
          </Link>

          <nav className="hidden lg:flex items-center gap-4 xl:gap-5">
            {navItems.map((it) =>
            <div key={it.to} className="relative" onMouseEnter={() => it.hasMenu && setProgOpen(true)} onMouseLeave={() => it.hasMenu && setProgOpen(false)}>
                <Link
                to={it.to}
                className={`nav-link font-display font-semibold text-[11px] xl:text-[12px] uppercase tracking-[0.08em] text-ink/80 hover:text-navy whitespace-nowrap ${isActive(it.to) ? "is-active text-navy" : ""}`}>
                
                  {it.label}
                  {it.hasMenu && <svg className="inline ml-1 -mt-0.5" width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M3 4.5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>}
                </Link>
                {it.hasMenu && progOpen &&
              <div className="absolute left-1/2 -translate-x-1/2 top-full pt-3 w-[320px]">
                    <div className="bg-white rounded-2xl shadow-cardHover border border-navy/5 p-2 overflow-hidden">
                      {[
                  { to: "be-a-man", title: "Be a Man", desc: "Foundational teaching for fathers" },
                  { to: "nurturing-bonds", title: "Nurturing Bonds", desc: "Father-child connection program" },
                  { to: "mobile-kanaabe", title: "Mobile Kanaabe", desc: "Travelling fatherhood outreach" },
                  { to: "forge", title: "The Forge ↗", desc: "Find or start a Forge group" }].
                  map((m) =>
                  <Link key={m.to} to={m.to} onClick={() => setProgOpen(false)} className="flex items-start gap-3 p-3 rounded-xl hover:bg-paper transition-colors">
                          <span className="mt-1 w-2.5 h-2.5 rounded-full bg-gold ring-4 ring-gold/20" />
                          <span>
                            <span className="block font-display font-bold text-navy">{m.title}</span>
                            <span className="block text-xs text-ink/60">{m.desc}</span>
                          </span>
                        </Link>
                  )}
                    </div>
                  </div>
              }
              </div>
            )}
          </nav>

          <div className="hidden md:flex items-center gap-3">
            <Button to="donate" variant="gold" size="sm">{t('nav.donate', lang)}</Button>
          </div>

          <button onClick={() => setOpen(!open)} className="lg:hidden p-2 -mr-2 text-navy" aria-label="Open menu">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              {open ?
              <path d="M6 6l12 12M6 18L18 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /> :
              <path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />}
            </svg>
          </button>
        </div>

        {open &&
        <div className="lg:hidden border-t border-navy/10 bg-white">
            <div className="px-4 py-4 space-y-1">
              {navItems.map((it) =>
            <Link key={it.to} to={it.to} onClick={() => setOpen(false)}
            className={`block px-3 py-3 rounded-lg font-display font-semibold ${isActive(it.to) ? "bg-paper text-navy" : "text-ink/80"}`}>
                  {it.label}
                </Link>
            )}
              <Link to="donate" onClick={() => setOpen(false)} className="block mt-2 text-center btn-gold rounded-full px-6 py-3 font-display font-bold uppercase">Donate</Link>
            </div>
          </div>
        }
      </header>
    </>);

}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="relative bg-navy text-white mt-24">
      <div className="max-w-[1280px] mx-auto px-4 sm:px-6 py-16">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
          <div className="md:col-span-4">
            <div className="bg-white inline-block rounded-xl p-3">
              <Logo className="h-12 w-auto" />
            </div>
            <p className="mt-5 font-display font-bold text-gold uppercase tracking-widest text-sm">
              Restoring fatherhood. Building nations.
            </p>
            <p className="mt-4 text-white/75 max-w-sm leading-relaxed">
              An initiative of The Remnant Generation. We build the men the world is waiting for — from boyhood to fatherhood to legacy.
            </p>
            <div className="mt-6 flex items-center gap-3">
              {[
                { k: "facebook", href: "#" },
                { k: "instagram", href: "https://www.instagram.com/fathersariseofficial/?__pwa=1#" },
                { k: "youtube", href: "https://www.youtube.com/@FathersArse" },
                { k: "x", href: "#" },
                { k: "whatsapp", href: "https://wa.me/256700669586" }
              ].map((s) =>
              <a key={s.k} href={s.href} target={s.href.startsWith("http") ? "_blank" : undefined} rel={s.href.startsWith("http") ? "noopener noreferrer" : undefined} aria-label={s.k} className="w-9 h-9 rounded-full bg-white/10 hover:bg-gold hover:text-navy text-white flex items-center justify-center transition-colors">
                  <SocialIcon name={s.k} />
                </a>
              )}
            </div>
          </div>

          <div className="md:col-span-2">
            <h4 className="font-display font-bold uppercase text-sm tracking-widest text-gold">About</h4>
            <ul className="mt-4 space-y-2 text-white/80">
              <li><Link to="about" className="hover:text-gold">Our Story</Link></li>
              <li><Link to="about" className="hover:text-gold">Leadership</Link></li>
              <li><Link to="about" className="hover:text-gold">Reports</Link></li>
              <li><Link to="about" className="hover:text-gold">Privacy</Link></li>
            </ul>
          </div>

          <div className="md:col-span-2">
            <h4 className="font-display font-bold uppercase text-sm tracking-widest text-gold">Programs</h4>
            <ul className="mt-4 space-y-2 text-white/80">
              <li><Link to="be-a-man" className="hover:text-gold">Be a Man</Link></li>
              <li><Link to="nurturing-bonds" className="hover:text-gold">Nurturing Bonds</Link></li>
              <li><Link to="mobile-kanaabe" className="hover:text-gold">Mobile Kanaabe</Link></li>
              <li><Link to="forge" className="hover:text-gold">The Forge</Link></li>
            </ul>
          </div>

          <div className="md:col-span-2">
            <h4 className="font-display font-bold uppercase text-sm tracking-widest text-gold">Get Involved</h4>
            <ul className="mt-4 space-y-2 text-white/80">
              <li><Link to="donate" className="hover:text-gold">Donate</Link></li>
              <li><Link to="get-involved" className="hover:text-gold">Volunteer</Link></li>
              <li><Link to="get-involved" className="hover:text-gold">Partner</Link></li>
              <li><Link to="get-involved" className="hover:text-gold">Churches</Link></li>
            </ul>
          </div>

          <div className="md:col-span-2">
            <h4 className="font-display font-bold uppercase text-sm tracking-widest text-gold">Stay In Touch</h4>
            <p className="mt-4 text-sm text-white/70">Monthly field notes from the Forge. No spam.</p>
            <form className="mt-3 flex" onSubmit={(e) => {e.preventDefault();alert("Subscribed (mock).");}}>
              <input type="email" required placeholder="Your email"
              className="flex-1 min-w-0 px-3 py-2 text-sm rounded-l-full bg-white/10 border border-white/20 placeholder-white/50 focus:outline-none focus:border-gold" />
              <button className="btn-gold px-4 rounded-r-full text-xs font-display font-bold uppercase">Subscribe</button>
            </form>
          </div>
        </div>

        <div className="mt-12 pt-6 border-t border-white/10 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
          <div className="text-xs text-white/55">© 2026 Fathers Arise. A registered Ugandan NGO. All rights reserved.</div>
          <div className="flex items-center gap-6 text-xs">
            <a href="#" className="text-white/55 hover:text-gold">Code of Conduct</a>
            <a href="#" className="text-white/55 hover:text-gold">Safeguarding</a>
            <Link to="team-login" className="inline-flex items-center gap-1.5 text-white/40 hover:text-gold">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><rect x="4" y="10" width="16" height="10" rx="2" stroke="currentColor" strokeWidth="2" /><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" strokeWidth="2" /></svg>
              Team Login
            </Link>
          </div>
        </div>
      </div>
    </footer>);

}

function SocialIcon({ name }) {
  const props = { width: 16, height: 16, viewBox: "0 0 24 24", fill: "currentColor" };
  switch (name) {
    case "facebook":return <svg {...props}><path d="M13 22v-8h2.7l.4-3H13V9.2c0-.9.3-1.5 1.6-1.5H16V5.1A22 22 0 0 0 14.1 5C12 5 10.6 6.2 10.6 8.5V11H8v3h2.6v8H13z" /></svg>;
    case "instagram":return <svg {...props}><path d="M12 2.2c2.7 0 3 0 4 .1 1 0 1.6.2 2 .4.5.2.9.5 1.3.9.4.4.7.8.9 1.3.2.4.3 1 .4 2 .1 1 .1 1.3.1 4s0 3-.1 4c0 1-.2 1.6-.4 2-.2.5-.5.9-.9 1.3-.4.4-.8.7-1.3.9-.4.2-1 .3-2 .4-1 .1-1.3.1-4 .1s-3 0-4-.1c-1 0-1.6-.2-2-.4a3.6 3.6 0 0 1-1.3-.9 3.6 3.6 0 0 1-.9-1.3c-.2-.4-.3-1-.4-2-.1-1-.1-1.3-.1-4s0-3 .1-4c0-1 .2-1.6.4-2 .2-.5.5-.9.9-1.3.4-.4.8-.7 1.3-.9.4-.2 1-.3 2-.4 1-.1 1.3-.1 4-.1zm0 4.6a5.2 5.2 0 1 0 0 10.4 5.2 5.2 0 0 0 0-10.4zm0 8.6a3.4 3.4 0 1 1 0-6.8 3.4 3.4 0 0 1 0 6.8zm5.4-8.8a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z" /></svg>;
    case "youtube":return <svg {...props}><path d="M21.6 7.2a2.5 2.5 0 0 0-1.7-1.7C18.3 5 12 5 12 5s-6.3 0-7.9.5A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.7 1.7C5.7 19 12 19 12 19s6.3 0 7.9-.5a2.5 2.5 0 0 0 1.7-1.7c.4-1.5.4-4.8.4-4.8s0-3.3-.4-4.8zM10 15V9l5.2 3-5.2 3z" /></svg>;
    case "x":return <svg {...props}><path d="M17.5 3h2.8l-6.1 7L21.5 21h-5.6l-4.4-5.7L6.4 21H3.6l6.5-7.5L3 3h5.7l4 5.4L17.5 3zm-1 16h1.6L7.6 4.9H5.9L16.5 19z" /></svg>;
    case "whatsapp":return <svg {...props}><path d="M20.5 3.5A10 10 0 0 0 3.7 17l-1.2 4.4 4.5-1.2a10 10 0 0 0 13.5-13.5zM12 19.7a7.7 7.7 0 0 1-3.9-1l-.3-.2-2.7.7.7-2.6-.2-.3a7.7 7.7 0 1 1 6.4 3.4zm4.4-5.8c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1-.2.2-.6.8-.8 1-.1.1-.3.2-.5 0a6.3 6.3 0 0 1-3.1-2.7c-.2-.4.2-.4.6-1.2.1-.1 0-.3 0-.4l-.7-1.7c-.2-.5-.4-.4-.5-.4h-.5c-.1 0-.4 0-.6.3-.2.2-.8.8-.8 2 0 1.2.8 2.3 1 2.4.1.2 1.7 2.6 4.1 3.6 1.5.6 2.1.7 2.9.6.4-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1-.1-.1-.3-.2-.5-.3z" /></svg>;
    default:return null;
  }
}

/* ---------- Floating WhatsApp ---------- */
function WhatsAppFloat() {
  return (
    <a href="https://wa.me/256700669586" target="_blank" rel="noopener"
    className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full bg-[#25D366] text-white flex items-center justify-center wa-pulse shadow-lg hover:scale-105 transition-transform"
    aria-label="Chat on WhatsApp">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5A10 10 0 0 0 3.7 17l-1.2 4.4 4.5-1.2a10 10 0 0 0 13.5-13.5zM12 19.7a7.7 7.7 0 0 1-3.9-1l-.3-.2-2.7.7.7-2.6-.2-.3a7.7 7.7 0 1 1 6.4 3.4zm4.4-5.8c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1-.2.2-.6.8-.8 1-.1.1-.3.2-.5 0a6.3 6.3 0 0 1-3.1-2.7c-.2-.4.2-.4.6-1.2.1-.1 0-.3 0-.4l-.7-1.7c-.2-.5-.4-.4-.5-.4h-.5c-.1 0-.4 0-.6.3-.2.2-.8.8-.8 2 0 1.2.8 2.3 1 2.4.1.2 1.7 2.6 4.1 3.6 1.5.6 2.1.7 2.9.6.4-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1-.1-.1-.3-.2-.5-.3z" /></svg>
    </a>);

}

/* ---------- Section title ---------- */
function SectionTitle({ eyebrow, title, lede, light = false, center = false, className = "" }) {
  return (
    <div className={`${center ? "text-center mx-auto" : ""} max-w-3xl ${className}`}>
      {eyebrow &&
      <div className={`flex items-center gap-2 text-xs font-display font-bold uppercase tracking-[0.2em] ${light ? "text-gold" : "text-sky"} ${center ? "justify-center" : ""}`}>
          <span className="inline-block w-8 h-px bg-current" /> {eyebrow}
        </div>
      }
      <h2 className={`mt-3 font-display font-extrabold text-3xl md:text-5xl leading-[1.05] ${light ? "text-white" : "text-navy"}`}>
        {title}
      </h2>
      {lede && <p className={`mt-4 text-lg leading-relaxed ${light ? "text-white/80" : "text-ink/70"}`}>{lede}</p>}
    </div>);

}

/* ---------- Page hero (sub-page header) ---------- */
function PageHero({ eyebrow, title, lede, breadcrumb, bgImage }) {
  return (
    <section className="relative bg-navy text-white overflow-hidden">
      {bgImage ? (
        <>
          <div className="absolute inset-0">
            <img src={bgImage} alt="" className="w-full h-full object-cover" />
            <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/30 to-black/60" />
          </div>
        </>
      ) : (
        <>
          <div className="absolute inset-0 grid-bg opacity-15" />
          <div className="absolute -right-24 -top-24 w-[420px] h-[420px] rounded-full bg-sky/20 blur-3xl" />
          <div className="absolute -left-32 bottom-0 w-[360px] h-[360px] rounded-full bg-gold/10 blur-3xl" />
        </>
      )}
      <div className="relative max-w-[1280px] mx-auto px-4 sm:px-6 pt-16 pb-20 md:pt-24 md:pb-28">
        {breadcrumb &&
        <div className="text-xs font-display font-semibold uppercase tracking-widest text-white/60 mb-6">
            {breadcrumb.map((b, i) =>
          <React.Fragment key={i}>
                {i > 0 && <span className="mx-2 text-gold">/</span>}
                {b.to ? <Link to={b.to} className="hover:text-gold">{b.label}</Link> : <span className="text-gold">{b.label}</span>}
              </React.Fragment>
          )}
          </div>
        }
        {eyebrow &&
        <div className="flex items-center gap-2 text-xs font-display font-bold uppercase tracking-[0.2em] text-gold">
            <span className="inline-block w-8 h-px bg-current" /> {eyebrow}
          </div>
        }
        <h1 className="mt-3 font-display font-extrabold text-4xl md:text-6xl leading-[1.02] max-w-4xl">{title}</h1>
        {lede && <p className="mt-5 text-lg md:text-xl text-white/80 max-w-3xl leading-relaxed">{lede}</p>}
      </div>
    </section>);

}

/* ---------- Field components for forms ---------- */
function Field({ label, children, hint, error, id }) {
  return (
    <label className="block" htmlFor={id}>
      <span className="block text-xs font-display font-semibold uppercase tracking-wider text-navy mb-1.5">{label}</span>
      {children}
      {hint && <span className="block mt-1 text-xs text-ink/55">{hint}</span>}
      {error && <span className="block mt-1 text-xs text-red-600">{error}</span>}
    </label>);

}

function Input(props) {
  return (
    <input
      {...props}
      className={`w-full px-4 py-3 rounded-xl bg-white border border-navy/15 focus:border-sky focus:ring-2 focus:ring-sky/20 outline-none transition text-ink placeholder:text-ink/40 ${props.className || ""}`} />);


}

function Textarea(props) {
  return (
    <textarea
      {...props}
      className={`w-full px-4 py-3 rounded-xl bg-white border border-navy/15 focus:border-sky focus:ring-2 focus:ring-sky/20 outline-none transition text-ink placeholder:text-ink/40 ${props.className || ""}`} />);


}

function Select(props) {
  return (
    <select
      {...props}
      className={`w-full px-4 py-3 rounded-xl bg-white border border-navy/15 focus:border-sky focus:ring-2 focus:ring-sky/20 outline-none transition text-ink ${props.className || ""}`} />);


}

/* Expose components globally for other Babel files */
Object.assign(window, {
  useHashRoute, Link, useInView, CountUp, Logo, Button, Placeholder,
  Navbar, Footer, WhatsAppFloat, SectionTitle, PageHero,
  Field, Input, Textarea, Select, SocialIcon
});