/* =========================================================
   Redesign — middle sections (How It Works, Uncompromising Standards)
   All copy taken verbatim from travelingdonors.com.
   ========================================================= */

const TD_STEPS = [
  { n: "01", t: "Consultation",     b: "Discussing preferences and medical background.", img: "assets/step-consultation.jpg" },
  { n: "02", t: "Donor Matching",   b: "Personalized precision of matching elite donors with the criteria of potential parents.", img: "assets/step-matching.jpg" },
  { n: "03", t: "Planning",         b: "Customized program and support to meet everyone's needs.", img: "assets/step-planning.jpg" },
  { n: "04", t: "Coordination",     b: "Full management of travel, logistics and medical screening.", img: "assets/step-coordination.jpg" },
  { n: "05", t: "Support",          b: "Guidance and support throughout the entire journey.", img: "assets/step-support.jpg" },
];

function RJourney() {
  return (
    <section className="r-journey" id="journey">
      <div className="r-wrap">
        <header className="r-journey-head">
          <Reveal as="div">
            <span className="td-eyebrow">How it works</span>
            <h2 className="r-section-title">Five steps,<br />from first call to family.</h2>
          </Reveal>
          <Reveal as="p" className="r-section-body" style={{maxWidth:420}} delay={120}>
            No two journeys are identical — but they share the same five
            milestones, every one paced to you.
          </Reveal>
        </header>
        <div className="r-step-grid">
          {TD_STEPS.map((s, i) => (
            <Reveal as="div" key={s.n} delay={i * 100} y={40}>
              <Tilt max={6}>
                <article className="r-step-card">
                  <div className="r-step-photo">
                    <img src={s.img} alt={s.t} />
                    <span className="r-step-badge">{s.n}</span>
                  </div>
                  <h3 className="r-step-title">{s.t}</h3>
                  <p className="r-step-body">{s.b}</p>
                </article>
              </Tilt>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function RStandards() {
  return (
    <section className="r-standards" id="standards">
      <div className="r-wrap r-standards-inner">
        <Reveal as="div" className="r-standards-text" y={32}>
          <span className="td-eyebrow">Uncompromising standards</span>
          <h2 className="r-section-title">
            Every donor.<br />
            Every clinic.<br />
            <em>Without compromise.</em>
          </h2>
        </Reveal>
        <Reveal as="div" className="r-standards-body" delay={120} y={32}>
          <p className="r-section-body">
            All donors undergo comprehensive screening, including medical
            evaluation, genetic testing, psychological assessment, and
            infectious disease screening.
          </p>
          <p className="r-section-body">
            We work exclusively with trusted clinics and partners to ensure the
            highest standards of safety, ethics, and success.
          </p>
          <ul className="r-standards-grid">
            {[
              {i:"stethoscope",  t:"Medical evaluation",          d:"Full hormonal and physical workup"},
              {i:"dna",          t:"Genetic testing",             d:"Carrier-status panels for every donor"},
              {i:"heart-pulse",  t:"Psychological assessment",    d:"Independent clinical psychology"},
              {i:"shield-check", t:"Infectious disease screening",d:"To international clinical standards"},
            ].map((row, idx) => (
              <Reveal as="li" key={row.t} delay={200 + idx * 80}>
                <i data-lucide={row.i}></i>
                <div><strong>{row.t}</strong><span>{row.d}</span></div>
              </Reveal>
            ))}
          </ul>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { RJourney, RStandards });