/* =========================================================
   Redesign — top sections (Header, Hero, Stat ribbon, About)
   Copy from travelingdonors.com — preserved verbatim where possible.
   ========================================================= */

const TD_NAV = [
  { label: "For Intending Parents", href: "#about" },
  { label: "International Programs", href: "#network" },
  { label: "Donor Collection",       href: "#services" },
  { label: "Egg Donation",           href: "#services" },
  { label: "Surrogacy",              href: "#services" },
];

const TD_WHATSAPP = "https://wa.me/27787184178?text=Hello%2C%20I%20would%20like%20to%20learn%20more%20about%20your%20programs.";

function RHeader({ onCta }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [onDark, setOnDark]     = React.useState(true);
  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      // header sits over the animated hero (200vh) — stay dark across it
      setOnDark(window.scrollY < window.innerHeight * 1.7);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"r-header" + (scrolled ? " is-scrolled" : "") + (onDark ? " is-on-dark" : "")}>
      <div className="r-header-inner">
        <a href="#top" className="r-brand">
          <img src="assets/logo.png" alt="" />
          <span className="r-brand-text">
            <span className="r-brand-name">Traveling Donors</span>
            <span className="r-brand-sub">International Egg Donation Agency</span>
          </span>
        </a>
        <nav className="r-nav">
          {TD_NAV.map((n) => (
            <a key={n.label} href={n.href}>{n.label}</a>
          ))}
        </nav>
        <div className="r-header-cta">
          <a href={TD_WHATSAPP} target="_blank" rel="noopener" className="r-phone">+27 78 718 4178</a>
          <a href={TD_WHATSAPP} target="_blank" rel="noopener" className="r-btn r-btn-primary" style={{padding:"12px 22px",fontSize:14}}>
            Book a Private Consultation
          </a>
        </div>
      </div>
    </header>
  );
}

function RHero({ onCta }) {
  return (
    <section className="r-hero" id="top">
      <div className="r-wrap r-hero-inner">
        <div className="r-hero-text">
          <span className="td-eyebrow r-hero-eyebrow">International Egg Donation Agency</span>
          <h1 className="r-hero-title">
            A Global<br />
            Standard in<br />
            <em>Fertility Care.</em>
          </h1>
          <p className="r-hero-lede">
            With over 15 years of experience, Traveling Donors provides fully
            managed egg donation, sperm donation, and surrogacy programs across
            the world's leading fertility destinations — with access to
            FDA-approved donor egg programs in the United States.
          </p>
          <div className="r-hero-cta">
            <a href={TD_WHATSAPP} target="_blank" rel="noopener" className="r-btn r-btn-primary">
              Book a Private Consultation <span aria-hidden="true">→</span>
            </a>
            <a href="#services" className="r-btn r-btn-ghost">
              Explore Our Donor Collection →
            </a>
          </div>
          <div className="r-hero-meta">
            <div className="r-hero-meta-cell"><span className="r-hero-meta-num">15+</span><span className="r-hero-meta-lbl">Years of experience</span></div>
            <div className="r-hero-meta-cell"><span className="r-hero-meta-num">6</span><span className="r-hero-meta-lbl">Continents served</span></div>
            <div className="r-hero-meta-cell"><span className="r-hero-meta-num">FDA</span><span className="r-hero-meta-lbl">USA donor egg access</span></div>
          </div>
        </div>
        <div className="r-hero-figure">
          <div className="r-hero-figure-bg"></div>
          <img className="r-hero-mark" src="assets/logo.png" alt="Traveling Donors mark" />
          <img className="r-hero-photo" src="assets/family-grass.jpg" alt="Family playing in grassy field" />
          <div className="r-hero-figure-stamp">
            <small>Founded by Genevieve Uys</small>
            <strong>Care you can feel.<br />Experience you can trust.</strong>
          </div>
        </div>
      </div>
    </section>
  );
}

function RAbout() {
  return (
    <section className="r-about" id="about">
      <div className="r-wrap r-about-inner">
        <Reveal as="div" className="r-about-media" y={48}>
          <div style={{overflow: "hidden", borderRadius: 22, height: 560, position: "relative"}}>
            <Parallax speed={70}>
              <img src="assets/founder-portrait.jpg" alt="Genevieve Uys, Founder"
                   style={{width:"100%", height:680, objectFit:"cover", display:"block", marginTop:-60}} />
            </Parallax>
          </div>
          <div className="r-about-stamp r-float-stamp">
            <small>Founder</small>
            <strong>Genevieve Uys</strong>
            <span>15+ years in international fertility</span>
          </div>
        </Reveal>
        <Reveal as="div" className="r-about-text" delay={140} y={36}>
          <span className="td-eyebrow">About Traveling Donors</span>
          <h2 className="r-section-title">
            Experience you can&nbsp;trust.<br />
            <em>Care you can feel.</em>
          </h2>
          <p className="r-section-lede">
            Founded by Genevieve Uys, Traveling Donors brings over 15 years of
            international fertility expertise.
          </p>
          <p className="r-section-body">
            Our team is uniquely composed of former egg donors who have worked
            alongside Genevieve for over a decade — offering insight, empathy,
            and guidance that only lived experience can provide.
          </p>
          <p className="r-section-body" style={{fontFamily:"var(--font-display)",fontStyle:"italic",fontSize:24,lineHeight:1.4,color:"var(--td-teal-700)",marginTop:14}}>
            "We don't just coordinate fertility journeys — we understand them."
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function RNetwork() {
  const regions = ["South Africa", "Europe", "Asia", "Latin America", "United States", "Australia"];
  const bgRef = React.useRef(null);
  const t = useElementScroll(bgRef);
  return (
    <section className="r-network" id="network" ref={bgRef}>
      <div
        className="r-network-bg r-spin-slow"
        style={{ backgroundImage: "url('assets/globe.jpg')", transform: `scale(${1 + t * 0.15}) rotate(${t * 12}deg)` }}
      ></div>
      <div className="r-wrap r-network-inner">
        <Reveal as="span" className="td-eyebrow" style={{color:"var(--td-sand-200)"}}>International Programs</Reveal>
        <Reveal as="h2" className="r-network-title" delay={100}>A truly international<br /><em>fertility network.</em></Reveal>
        <Reveal as="p" className="r-network-body" delay={200}>
          We coordinate fertility programs across South Africa, Europe, Asia,
          Latin America, the United States, Australia, and others —
          providing global access without compromise.
        </Reveal>
        <Reveal as="ul" className="r-network-regions" delay={300}>
          {regions.map((r, i) => <li key={r} style={{transitionDelay: `${i * 60}ms`}}>{r}</li>)}
        </Reveal>
      </div>
    </section>
  );
}

const TD_SVCS = [
  {
    num: "Service 01",
    title: "Egg Donation (Fresh)",
    body: "Fully personalized donor cycles designed for optimal success.",
    img: "assets/block-fresh-egg.png",
    href: "#contact",
  },
  {
    num: "Service 02",
    title: "Frozen Egg Cycles",
    body: "Flexible, efficient treatment options using pre-screened in vitro donor eggs.",
    img: "assets/block-frozen-egg.png",
    href: "#contact",
  },
  {
    num: "Service 03",
    title: "Surrogacy",
    body: "Professionally managed journey with trusted global partners.",
    img: "assets/block-surrogacy.png",
    href: "#contact",
  },
  {
    num: "Service 04",
    title: "Sperm Donation",
    body: "Access to high-quality, thoroughly screened donors worldwide.",
    img: "assets/pomegranate.jpg",
    href: "#contact",
  },
  {
    num: "Service 05",
    title: "International Coordination",
    body: "Complete management of your fertility journey across borders.",
    img: "assets/globe.jpg",
    href: "#contact",
  },
];

function RServices() {
  return (
    <section className="r-svc r-wrap" id="services">
      <Reveal as="header" className="r-svc-head">
        <span className="td-eyebrow">Our programs</span>
        <h2 className="r-section-title" style={{margin:0}}>
          Five programs.<br /><em>One continuous hand to hold.</em>
        </h2>
        <p className="r-section-lede" style={{maxWidth:620}}>
          Every journey is bespoke. Tell us where you are; we'll meet you there.
        </p>
      </Reveal>
      <div className="r-svc-cards">
        {TD_SVCS.map((s, i) => (
          <Reveal as="div" key={s.title} delay={i * 90} y={36}>
            <Tilt max={5}>
              <article className="r-svc-card">
                <div className="r-svc-card-media"><img src={s.img} alt="" /></div>
                <div className="r-svc-card-body">
                  <span className="r-svc-num">{s.num}</span>
                  <h3 className="r-svc-card-title">{s.title}</h3>
                  <p>{s.body}</p>
                  <a href={s.href} className="r-svc-link">Learn more <span aria-hidden="true">→</span></a>
                </div>
              </article>
            </Tilt>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { RHeader, RHero, RAbout, RNetwork, RServices, TD_WHATSAPP });