/* ============ INTERNATIONAL PAGE ============ */

function IconGlobe() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <circle cx="12" cy="12" r="9" />
    <path d="M3 12 H 21" />
    <path d="M12 3 C 8 7, 8 17, 12 21 C 16 17, 16 7, 12 3 Z" />
  </svg>;
}
function IconTranslate() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M4 6 H 12" />
    <path d="M8 4 V 6" />
    <path d="M5 14 C 7 10, 9 10, 11 14" />
    <path d="M6 12 H 10" />
    <path d="M13 19 L 17 11 L 21 19" />
    <path d="M14.5 16 H 19.5" />
  </svg>;
}
function IconClock() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <circle cx="12" cy="12" r="9" />
    <path d="M12 7 V 12 L 16 14" />
  </svg>;
}
function IconPassport() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <rect x="5" y="3" width="14" height="18" rx="1.5" />
    <circle cx="12" cy="10" r="3" />
    <path d="M8 16 H 16" />
    <path d="M9 18.5 H 15" />
  </svg>;
}
function IconGavel() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M14 3 L 21 10 L 19 12 L 12 5 Z" />
    <path d="M13 6 L 5 14 L 3 16 L 8 21 L 10 19 L 18 11" />
    <path d="M3 21 H 14" />
  </svg>;
}
function IconChat() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M4 5 H 20 V 17 H 13 L 9 21 V 17 H 4 Z" />
    <path d="M8 10 H 16 M8 13 H 13" />
  </svg>;
}
function IconPlane() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M3 14 L 9 12 L 12 4 L 14 4 L 13 12 L 19 11 L 21 13 L 14 16 L 12 22 L 10 22 L 11 17 L 4 18 Z" />
  </svg>;
}
function IconLockSm() {
  return <svg className="feature-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <rect x="5" y="11" width="14" height="10" rx="1.5" />
    <path d="M8 11 V 7 a4 4 0 0 1 8 0 V 11" />
  </svg>;
}

/* ---------- Visuals ---------- */

function GlobeViz() {
  const [rot, setRot] = React.useState(0);
  React.useEffect(() => {
    let raf;
    let last = performance.now();
    const tick = (t) => {
      const dt = (t - last) / 1000;
      last = t;
      setRot((r) => (r + dt * 18) % 360); // 18°/s → full revolution ~20s
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const R = 165;
  const cx = 200,cy = 200;
  const dots = [];
  for (let lat = -75; lat <= 75; lat += 12) {
    const rLat = R * Math.cos(lat * Math.PI / 180);
    const yLat = cy - R * Math.sin(lat * Math.PI / 180);
    const n = Math.max(10, Math.round(rLat / 2.4));
    for (let i = 0; i < n; i++) {
      const lonBase = i / n * 360 - 180;
      const lon = lonBase + rot;
      const x = cx + rLat * Math.sin(lon * Math.PI / 180);
      const front = Math.cos(lon * Math.PI / 180);
      if (front < -0.05) continue;
      const o = Math.max(0.06, 0.35 + front * 0.55);
      dots.push(<circle key={`${lat}-${i}`} cx={x} cy={yLat} r="1.1" fill="#FFFFFF" opacity={o} />);
    }
  }

  const pins = [
  { lat: 40, lon: -74, label: "NYC" },
  { lat: 37, lon: -122, label: "SF" },
  { lat: 51, lon: 0, label: "LON" },
  { lat: 48, lon: 2, label: "PAR" },
  { lat: 35, lon: 139, label: "TYO" },
  { lat: -33, lon: 151, label: "SYD" },
  { lat: 1, lon: 103, label: "SGP" },
  { lat: 19, lon: 72, label: "BOM" },
  { lat: -23, lon: -46, label: "SAO" },
  { lat: 25, lon: 55, label: "DXB" },
  { lat: 52, lon: 13, label: "BER" },
  { lat: 59, lon: 18, label: "STO" }];


  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet" style={{ position: "absolute", inset: 16, width: "calc(100% - 32px)", height: "calc(100% - 32px)" }}>
      <circle cx={cx} cy={cy} r={R} fill="none" stroke="#FFFFFF" strokeOpacity="0.08" />
      {dots}
      {pins.map((p, i) => {
        const lon = p.lon + rot;
        const x = cx + R * Math.cos(p.lat * Math.PI / 180) * Math.sin(lon * Math.PI / 180);
        const y = cy - R * Math.sin(p.lat * Math.PI / 180);
        const front = Math.cos(lon * Math.PI / 180);
        if (front < -0.1) return null;
        const o = Math.max(0.4, 0.55 + front * 0.45);
        return (
          <g key={i} opacity={o}>
            <circle cx={x} cy={y} r="4" fill="#4ADE80" />
            <circle cx={x} cy={y} r="4" fill="none" stroke="#4ADE80" strokeOpacity="0.45">
              <animate attributeName="r" from="4" to="12" dur="2.4s" repeatCount="indefinite" />
              <animate attributeName="stroke-opacity" from="0.55" to="0" dur="2.4s" repeatCount="indefinite" />
            </circle>
          </g>);

      })}
    </svg>);

}

function TimezoneViz() {
  // horizontal strip of 24 hour blocks, with multi-city alignment
  const cities = [
  { city: "San Francisco", tz: -8 },
  { city: "New York", tz: -5 },
  { city: "London", tz: 0 },
  { city: "Berlin", tz: 1 },
  { city: "Singapore", tz: 8 },
  { city: "Sydney", tz: 10 }];

  return (
    <div className="tz-wrap">
      {cities.map((c) =>
      <div className="tz-row" key={c.city}>
          <div className="tz-city">{c.city}</div>
          <div className="tz-track">
            {Array.from({ length: 24 }).map((_, h) => {
            const local = (h + c.tz + 24) % 24;
            const inWindow = local >= 9 && local < 18;
            return (
              <div
                key={h}
                className={`tz-block ${inWindow ? "ok" : ""} ${local >= 22 || local < 6 ? "night" : ""}`} />);


          })}
          </div>
        </div>
      )}
      <div className="tz-legend">
        <span><i style={{ background: "#4ADE80" }} />Local working hours</span>
        <span><i style={{ background: "#2A2A2A" }} />Coordinator on call 24h</span>
      </div>
    </div>);

}

function ComplianceViz() {
  const jurisdictions = [
  { c: "🇺🇸", name: "United States", body: "FDA · CDC", status: "Compliant" },
  { c: "🇬🇧", name: "United Kingdom", body: "HFEA", status: "Compliant" },
  { c: "🇪🇺", name: "European Union", body: "EU Tissue Directive", status: "Compliant" },
  { c: "🇨🇦", name: "Canada", body: "AHRA", status: "Compliant" },
  { c: "🇦🇺", name: "Australia", body: "NHMRC", status: "Compliant" },
  { c: "🇯🇵", name: "Japan", body: "MHLW", status: "Compliant" },
  { c: "🇸🇬", name: "Singapore", body: "MOH", status: "Compliant" },
  { c: "🇮🇱", name: "Israel", body: "MOH", status: "Compliant" }];

  return (
    <div className="compliance-list">
      {jurisdictions.map((j, i) =>
      <div className="compliance-row" key={i}>
          <div className="compliance-flag">{j.c}</div>
          <div className="compliance-name">
            <div className="country">{j.name}</div>
            <div className="body">{j.body}</div>
          </div>
          <span className="yn yn-yes">{j.status}</span>
        </div>
      )}
    </div>);

}

/* ---------- Page ---------- */
function International() {
  return (
    <div data-screen-label="06 International">
      <section className="sci-hero">
        <div className="eyebrow">Worldwide</div>
        <h1>Best genes around the <em>world</em>.</h1>
        <p>We serve women and donors in 32 countries. Cross-jurisdiction compliance
 and travel concierge for in-person introductions — all included.</p>

        <div className="intl-stats" style={{display: "none"}}>
          <div><div className="num">32</div><div className="lbl">Countries served</div></div>
          <div><div className="num">14</div><div className="lbl">Languages supported</div></div>
          <div><div className="num">24/7</div><div className="lbl">Coordinator coverage</div></div>
          <div><div className="num">48h</div><div className="lbl">Avg. response time</div></div>
        </div>
      </section>

      <div className="sci-divider" />

      <section className="sci-row">
        <div>
          <div className="sci-num">
            <span className="badge">01</span>
            <span>Global donor pool</span>
            <span className="sep">·</span>
            <span className="cat">32 countries</span>
          </div>
          <h2 className="sci-headline">The best men, on <em>every continent</em>.</h2>
          <p className="sci-body">
            Donors live in 32 countries — from London to Tokyo, Singapore to São Paulo. Match by region, ancestry, language, or travel comfort. No artificial geographic gates.
          </p>
          <div className="feature-grid">
            <div className="feature-card">
              <IconGlobe />
              <div className="feature-title">Match anywhere</div>
              <p className="feature-text">Search donors across 32 countries with no regional surcharge.</p>
            </div>
            <div className="feature-card">
              <IconChat />
              <div className="feature-title">Verified introductions</div>
              <p className="feature-text">All meetings happen on D1's encrypted platform with a coordinator present.</p>
            </div>
            <div className="feature-card">
              <IconLockSm />
              <div className="feature-title">Encrypted records</div>
              <p className="feature-text">Donor reports stored end-to-end encrypted, AES-256, jurisdiction of your choice.</p>
            </div>
          </div>
        </div>
        <div className="sci-visual">
          <GlobeViz />
        </div>
      </section>

      <div className="sci-divider" />

      <section className="sci-row">
        <div>
          <div className="sci-num">
            <span className="badge">03</span>
            <span>Legal &amp; document handling</span>
            <span className="sep">·</span>
            <span className="cat">8 jurisdictions</span>
          </div>
          <h2 className="sci-headline">Legal frameworks, <em>handled</em>.</h2>
          <p className="sci-body">
            Cross-border conception is a paperwork problem. We work with vetted reproductive-law firms in eight jurisdictions to align donor agreements, parental rights, and disclosure rules to the country where you'll raise your child.
          </p>
          <div className="feature-grid">
            <div className="feature-card">
              <IconGavel />
              <div className="feature-title">Jurisdiction matching</div>
              <p className="feature-text">Donor contract aligned to your home country — not just the donor's.</p>
            </div>
            <div className="feature-card">
              <IconPassport />
              <div className="feature-title">Document concierge</div>
              <p className="feature-text">Apostille, notarization, translation, and certified delivery handled end-to-end.</p>
            </div>
            <div className="feature-card">
              <IconLockSm />
              <div className="feature-title">Open-ID compliance</div>
              <p className="feature-text">Aligned to UK HFEA, EU directives, and US state-level disclosure rules.</p>
            </div>
          </div>
        </div>
        <div className="sci-visual">
          <ComplianceViz />
        </div>
      </section>

      <div className="sci-divider" />

      <section className="sci-row reverse" style={{display: "none"}}>
        <div>
          <div className="sci-num">
            <span className="badge">04</span>
            <span>Travel concierge</span>
            <span className="sep">·</span>
            <span className="cat">For in-person introductions</span>
          </div>
          <h2 className="sci-headline">When you want to meet, we <em>fly you</em>.</h2>
          <p className="sci-body">
            Some women want to meet their donor in person before deciding. D1's Travel team books flights, hotels, ground transport, and a neutral meeting space in a city of mutual choice — included in the Lifetime package, optional add-on otherwise.
          </p>
          <div className="feature-grid">
            <div className="feature-card">
              <IconPlane />
              <div className="feature-title">Booked end-to-end</div>
              <p className="feature-text">Flights, hotels, ground, and curated meeting venues. You pack, we handle the rest.</p>
            </div>
            <div className="feature-card">
              <IconPassport />
              <div className="feature-title">Visa support</div>
              <p className="feature-text">Invitation letters and documentation provided for visa-required corridors.</p>
            </div>
            <div className="feature-card">
              <IconChat />
              <div className="feature-title">Coordinator present</div>
              <p className="feature-text">A D1 coordinator joins to facilitate, translate, and protect privacy.</p>
            </div>
          </div>
        </div>
        <div className="sci-visual" style={{ padding: 0, overflow: "hidden" }}>
          <div className="travel-card">
            <div className="travel-row"><span className="k">Route</span><span className="v">SFO → ZRH</span></div>
            <div className="travel-row"><span className="k">Travelers</span><span className="v">2 adults</span></div>
            <div className="travel-row"><span className="k">Hotel</span><span className="v">Storchen, Zurich</span></div>
            <div className="travel-row"><span className="k">Meeting venue</span><span className="v">Private salon, Old Town</span></div>
            <div className="travel-row"><span className="k">Coordinator</span><span className="v">Annika · DE / EN / FR</span></div>
            <div className="travel-row"><span className="k">Total</span><span className="v mono-bold">Included · Lifetime tier</span></div>
            <div className="travel-stamp">CONFIRMED · 14 days out</div>
          </div>
        </div>
      </section>
    </div>);
}

window.International = International;