/* =========================================================
   Redesign — bottom sections (Building Families, CTA, Footer)
   ========================================================= */

function RFamilies() {
  return (
    <section className="r-families">
      <div className="r-wrap r-families-inner">
        <Reveal as="div" className="r-families-media" y={48}>
          <div style={{overflow: "hidden", borderRadius: 22, height: 540, position: "relative", boxShadow: "var(--shadow-3)"}}>
            <Parallax speed={80}>
              <img src="assets/family-grass.jpg" alt="Family playing in grassy field"
                   style={{width:"100%", height:680, objectFit:"cover", display:"block", marginTop:-70}} />
            </Parallax>
          </div>
        </Reveal>
        <Reveal as="div" className="r-families-text" delay={140}>
          <span className="td-eyebrow">Our purpose</span>
          <h2 className="r-section-title">
            Building families,<br />
            <em>one journey at a time.</em>
          </h2>
          <p className="r-section-body">
            Traveling Donors International, based in South Africa, is dedicated
            to helping parents build their families through compassionate and
            tailored services.
          </p>
          <p className="r-section-body">
            Our global network connects hopeful parents with exceptional donors,
            ensuring a seamless and supportive experience every step of the
            way. With a commitment to personalized care and ethical practices,
            we strive to make dreams of parenthood a reality.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function RCtaBanner() {
  return (
    <section className="r-cta-banner" id="contact">
      <div className="r-wrap r-cta-banner-inner">
        <Reveal>
          <span className="td-eyebrow">Begin your journey with confidence</span>
          <h2>
            Wherever you are,<br />
            <em>we'll meet you there.</em>
          </h2>
        </Reveal>
        <Reveal as="div" className="r-cta-banner-actions" delay={150}>
          <Magnetic strength={6}>
            <a href={window.TD_WHATSAPP} target="_blank" rel="noopener" className="r-btn r-btn-primary" style={{padding:"18px 28px",fontSize:16}}>
              Book a Private Consultation →
            </a>
          </Magnetic>
          <a href="mailto:hello@travelingdonors.com" className="r-btn r-btn-outline-light">
            hello@travelingdonors.com
          </a>
          <p>Reach us on WhatsApp — we reply personally, in confidence.</p>
        </Reveal>
      </div>
    </section>
  );
}

function RFooter() {
  return (
    <footer className="r-footer">
      <div className="r-footer-inner">
        <div className="r-footer-brand">
          <img src="assets/logo.png" alt="Traveling Donors" />
          <p>Compassionate, fully-managed egg donation, sperm donation, and surrogacy programs — from South Africa to the world.</p>
        </div>
        <div className="r-footer-cols">
          <div>
            <h5>Programs</h5>
            <a href="#services">Egg Donation (Fresh)</a>
            <a href="#services">Frozen Egg Cycles</a>
            <a href="#services">Surrogacy</a>
            <a href="#services">Sperm Donation</a>
            <a href="#services">International Coordination</a>
          </div>
          <div>
            <h5>Agency</h5>
            <a href="#about">About</a>
            <a href="#about">Genevieve Uys</a>
            <a href="#network">International Programs</a>
            <a href="#standards">Standards</a>
          </div>
          <div>
            <h5>For parents</h5>
            <a href="#about">For Intending Parents</a>
            <a href="#services">Donor Collection</a>
            <a href="#services">Donor Egg Programs (USA)</a>
            <a href="#journey">How it works</a>
          </div>
          <div>
            <h5>Contact</h5>
            <a href={window.TD_WHATSAPP} target="_blank" rel="noopener">+27 78 718 4178 (WhatsApp)</a>
            <a href="mailto:hello@travelingdonors.com">hello@travelingdonors.com</a>
            <a href="#">Cape Town, South Africa</a>
          </div>
        </div>
      </div>
      <div className="r-footer-base">
        <span>© 2026 Traveling Donors International.</span>
        <span><a href="#">Privacy</a> · <a href="#">Terms</a></span>
      </div>
    </footer>
  );
}

Object.assign(window, { RFamilies, RCtaBanner, RFooter });