/* Homepage — Hero + 6 sections */

/* ---------------- WordsPullUp ---------------- */
const WordsPullUp = ({ text, className = "", showAsterisk = false, style, italicLast = false }) => {
  const ref = React.useRef(null);
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const id = setTimeout(() => setShow(true), 60);
    return () => clearTimeout(id);
  }, []);
  const words = text.split(" ");
  return (
    <span ref={ref} className={`inline-flex flex-wrap ${className}`} style={style}>
      {words.map((word, i) => {
        const isLast = i === words.length - 1;
        return (
          <span
            key={i}
            className="inline-block relative"
            style={{
              marginRight: isLast ? 0 : "0.18em",
              transform: show ? "translateY(0)" : "translateY(28px)",
              opacity: show ? 1 : 0,
              transition: `transform 900ms cubic-bezier(.16,1,.3,1) ${i * 80}ms, opacity 900ms cubic-bezier(.16,1,.3,1) ${i * 80}ms`,
              fontStyle: italicLast && isLast ? "italic" : undefined,
              fontWeight: italicLast && isLast ? 400 : undefined
            }}>
            
            {word}
            {showAsterisk && isLast &&
            <span className="absolute top-[0.3em] -right-[0.25em] text-[0.28em] not-italic font-normal opacity-80">*</span>
            }
          </span>);

      })}
    </span>);

};

/* ---------------- HERO NAV (sticky pill) ---------------- */
const HeroStickyNav = () => {
  const [stuck, setStuck] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const items = [
  { label: "How it works", href: "#/how-it-works" },
  { label: "Take the quiz", href: "#/quiz" },
  { label: "Cost calculator", href: "#/calculator" },
  { label: "Concierge", href: "#/concierge" }];

  return (
    <nav className="fixed left-1/2 top-0 z-50 -translate-x-1/2 w-auto max-w-[96vw]" style={{ width: "583.984px", padding: "0px" }}>
      <div
        className={`flex items-center gap-3 sm:gap-6 md:gap-9 rounded-b-2xl bg-ink/95 backdrop-blur px-4 py-2.5 md:rounded-b-[20px] md:px-7 transition-shadow whitespace-nowrap ${stuck ? "shadow-[0_8px_28px_rgba(31,29,26,0.25)]" : ""}`}>
        
        <a href="#/" className="font-serif text-[15px] md:text-[17px] tracking-display text-bone whitespace-nowrap">
          <span className="font-medium">Conceive</span>{" "}
          <span className="italic font-normal opacity-80">Iberia</span>
        </a>
        <span className="hidden md:block w-px h-4 bg-bone/25 shrink-0" />
        <div className="hidden md:flex items-center gap-7 whitespace-nowrap">
          {items.map((it) =>
          <a key={it.label} href={it.href} className="text-[12.5px] text-bone/75 hover:text-bone transition-colors whitespace-nowrap">
              {it.label}
            </a>
          )}
        </div>
      </div>
    </nav>);

};
const Hero = () => {
  // Background video — Pexels CDN, family/baby footage. Static image stays as a guaranteed fallback.
  const HERO_IMG = "https://images.unsplash.com/photo-1544126592-807ade215a0b?w=2400&q=80&auto=format&fit=crop";
  const [videoOk, setVideoOk] = React.useState(false);
  const [videoIdx, setVideoIdx] = React.useState(0);
  const VIDEO_SRCS = [
  "https://videos.pexels.com/video-files/3209828/3209828-uhd_2560_1440_25fps.mp4",
  "https://videos.pexels.com/video-files/4505448/4505448-uhd_2560_1440_25fps.mp4",
  "https://cdn.coverr.co/videos/coverr-mother-with-her-baby-7470/1080p.mp4"];

  const VIDEO_SRC = VIDEO_SRCS[videoIdx];

  const navItems = ["How it works", "Take the quiz", "Cost calculator", "Concierge"];

  return (
    <section className="h-[100svh] min-h-[640px] w-full p-0 bg-bone">
      <div className="relative h-full w-full overflow-hidden rounded-none bg-ink">

        {/* Background — still image always present; video layered on top if it loads */}
        <img
          src={HERO_IMG}
          alt=""
          className="absolute inset-0 h-full w-full object-cover"
          style={{ objectPosition: "center 30%" }} />
        
        <video
          key={VIDEO_SRC}
          autoPlay loop muted playsInline preload="auto"
          className="absolute inset-0 h-full w-full object-cover transition-opacity duration-700"
          style={{ opacity: videoOk ? 1 : 0, padding: "0px", margin: "0px" }}
          onCanPlay={() => setVideoOk(true)}
          onError={() => {
            setVideoOk(false);
            setVideoIdx((i) => i + 1 < VIDEO_SRCS.length ? i + 1 : i);
          }}
          src={VIDEO_SRC} />
        

        {/* Color wash to keep mood warm + on-brand */}
        <div className="pointer-events-none absolute inset-0" style={{
          background: "linear-gradient(180deg, rgba(23,59,58,0.55) 0%, rgba(23,59,58,0.15) 35%, rgba(31,29,26,0.55) 100%)"
        }} />
        <div className="pointer-events-none absolute inset-0 mix-blend-multiply" style={{
          background: "linear-gradient(180deg, rgba(31,78,77,0.25), rgba(232,116,92,0.10))"
        }} />
        {/* Noise overlay */}
        <div className="noise-overlay pointer-events-none absolute inset-0 opacity-[0.55] mix-blend-overlay" />

        {/* Top-right meta */}
        <div className="absolute right-5 top-5 md:right-8 md:top-8 z-20 hidden md:flex flex-col items-end gap-1 text-bone/70 text-[11px] uppercase tracking-[0.22em]">
          <div className="flex items-center gap-2">
            <span className="h-1.5 w-1.5 rounded-full bg-coral animate-pulse" />
            Now matching · Spring 2026
          </div>
          <div className="font-serif italic text-[13px] normal-case tracking-normal text-bone/60">
            Madrid · Barcelona · Valencia · Alicante · Marbella
          </div>
        </div>

        {/* Top-left tag */}
        <div className="absolute left-5 top-20 md:left-8 md:top-24 z-20 max-w-[260px]">
          <div className="text-bone/80 text-[11px] uppercase tracking-[0.22em] mb-2">Vetted IVF clinics in Spain</div>
          <p className="font-serif italic text-bone/85 text-[15px] leading-snug">
            For the woman with twelve clinic tabs open at midnight.
          </p>
        </div>

        {/* Hero content */}
        <div className="absolute bottom-0 left-0 right-0 px-4 pb-6 sm:px-7 md:px-10 md:pb-10">
          <div className="grid grid-cols-12 items-end gap-4 md:gap-8">

            {/* Display word */}
            <div className="col-span-12 lg:col-span-8">
              <h1
                className="font-serif font-normal leading-[0.86] tracking-displaytight text-[26vw] sm:text-[24vw] md:text-[22vw] lg:text-[20vw] xl:text-[18.5vw] 2xl:text-[17vw] text-bone"
                style={{ color: "#FBF9F5" }}>
                
                <WordsPullUp text="Conceive" showAsterisk />
              </h1>
            </div>

            {/* Right column copy */}
            <div className="col-span-12 lg:col-span-4 flex flex-col gap-5 pb-2 lg:pb-6">
              <p
                className="text-[14.5px] sm:text-[15px] md:text-[16px] text-bone/85 max-w-md"
                style={{ lineHeight: 1.45, animation: "fadeUp .9s .55s cubic-bezier(.16,1,.3,1) both" }}>
                
                Take our matching quiz. Get 2–3 vetted Spanish clinics that fit your medical
                profile. No aggregator emails. No pay-to-play. Just the right match — in five
                minutes, free.
              </p>

              <div className="flex flex-wrap items-center gap-3" style={{ animation: "fadeUp .9s .75s cubic-bezier(.16,1,.3,1) both" }}>
                <a
                  href="#/quiz"
                  className="group inline-flex items-center gap-2 self-start rounded-full bg-coral py-1 pl-5 pr-1 text-[14px] font-medium text-ink transition-all hover:gap-3">
                  
                  Start the matching quiz
                  <span className="flex h-9 w-9 items-center justify-center rounded-full bg-ink transition-transform group-hover:scale-110">
                    <IArrow size={14} stroke={2.2} className="text-bone" />
                  </span>
                </a>
                <a href="#how-it-works" className="text-bone/85 hover:text-bone underline underline-offset-4 decoration-bone/30 hover:decoration-bone text-[13.5px]">
                  How it works
                </a>
              </div>
            </div>
          </div>

          {/* Trust strip */}
          <div className="mt-6 md:mt-8 grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 border-t border-bone/15 pt-4">
            <TrustItem stat="€5K–€11K" label="One IVF cycle in Spain" />
            <TrustItem stat="$20K–$30K" label="The same cycle in the US" />
            <TrustItem stat="120,000+" label="Fertility procedures / yr in Spain" />
            <TrustItem stat="Standard" label="Commission across every clinic" coral />
          </div>
        </div>

        {/* Asterisk footnote (matches showAsterisk) */}
        <div className="absolute bottom-5 right-6 z-20 hidden md:block text-[11px] text-bone/55 uppercase tracking-[0.18em]">
          *Free · Unbiased · Vetted
        </div>
      </div>

      <style>{`
        @keyframes fadeUp { from { opacity: 0; transform: translateY(16px);} to { opacity: 1; transform: translateY(0);} }
      `}</style>
    </section>);

};

const TrustItem = ({ stat, label, coral }) =>
<div className="flex flex-col">
    <div className={`font-mono text-[14px] md:text-[15px] ${coral ? "text-coral" : "text-bone"}`}>{stat}</div>
    <div className="text-[11.5px] text-bone/65 uppercase tracking-[0.16em] leading-tight">{label}</div>
  </div>;


/* ---------------- THE MATH ---------------- */
const TheMath = () => {
  const usMin = 20000,usMax = 30000;
  const esMin = 5500,esMax = 12000; // approx USD-equivalent for Spain incl travel
  return (
    <section className="px-6 md:px-10 py-24 md:py-32 bg-bone">
      <div className="max-w-[1200px] mx-auto">
        <div className="grid grid-cols-12 gap-8 md:gap-12 items-end mb-12">
          <div className="col-span-12 md:col-span-7">
            <Eyebrow>The math, plainly</Eyebrow>
            <h2 className="mt-4 font-serif text-[44px] md:text-[64px] leading-[0.95] tracking-displaytight">
              One cycle in Spain costs<br />
              <span className="italic font-normal text-teal">less than half</span> what you'd pay at home.
            </h2>
          </div>
          <div className="col-span-12 md:col-span-5">
            <p className="text-[16px] md:text-[17px] text-inksoft leading-relaxed max-w-md">
              The hard part isn't the math. It's picking the right clinic without
              getting blasted by five aggregator emails.
            </p>
            <a href="#/calculator" className="mt-5 inline-flex items-center gap-2 text-teal text-[14.5px] font-medium underline underline-offset-4 decoration-teal/30 hover:decoration-teal">
              Try the cost calculator <IArrow size={15} stroke={2} />
            </a>
          </div>
        </div>

        {/* Cost stack visualization */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <CostCard
            label="In the United States"
            range={`$${usMin.toLocaleString()} – $${usMax.toLocaleString()}`}
            note="One IVF cycle. Add medication, monitoring, and likely a second cycle."
            tone="ink"
            bars={[
            { name: "Cycle + retrieval", val: 18000, fill: "#1F1D1A" },
            { name: "Medication", val: 5500, fill: "#3A3833" },
            { name: "Monitoring/labs", val: 3500, fill: "#5A554D" },
            { name: "Misc fees", val: 2500, fill: "#7A7468" }]
            }
            max={usMax} />
          
          <CostCard
            label="In Spain (with us)"
            range={`$${esMin.toLocaleString()} – $${esMax.toLocaleString()}*`}
            note="Cycle, medication, 10–14 days on the ground, and an optional concierge."
            tone="teal"
            highlight
            bars={[
            { name: "Cycle + medication", val: 7500, fill: "#1F4E4D" },
            { name: "Flights (round trip)", val: 1200, fill: "#2C5F5D" },
            { name: "Apartment 10–14 nights", val: 1400, fill: "#3D7370" },
            { name: "Concierge (optional)", val: 2200, fill: "#E8745C" }]
            }
            max={usMax} />
          
        </div>

        <div className="mt-8 flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-6 p-6 md:p-7 rounded-2xl bg-cream border border-sand">
          <div className="flex items-baseline gap-2">
            <span className="font-serif text-[44px] md:text-[56px] leading-none tracking-displaytight text-teal">$11,500–$24,000</span>
          </div>
          <div className="text-[14.5px] text-inksoft md:max-w-md leading-relaxed">
            <span className="font-medium text-ink">Net savings per cycle,</span> after flights, apartment, and a White-Glove
            concierge. Numbers are real, not rounded down.
          </div>
          <div className="md:ml-auto">
            <Btn href="#/calculator" variant="teal">Run your numbers</Btn>
          </div>
        </div>
        <p className="mt-3 text-[12px] text-inksoft/60">*USD-equivalent at current rates, including travel for one person, 10–14 nights' lodging, and Essential concierge.</p>
      </div>
    </section>);

};

const CostCard = ({ label, range, note, tone, bars, max, highlight }) => {
  const bg = tone === "teal" ? "bg-teal text-bone" : "bg-cream text-ink";
  const border = tone === "teal" ? "border-tealdeep" : "border-sand";
  return (
    <div className={`relative rounded-2xl border ${border} p-7 md:p-8 ${bg}`}>
      {highlight &&
      <div className="absolute -top-3 left-7 px-3 py-1 rounded-full bg-coral text-ink text-[11px] uppercase tracking-[0.18em] font-medium">
          Conceive Iberia
        </div>
      }
      <div className={`text-[12px] uppercase tracking-[0.2em] ${tone === "teal" ? "text-bone/60" : "text-inksoft/60"} mb-3`}>{label}</div>
      <div className="font-serif text-[40px] md:text-[48px] leading-[1] tracking-displaytight">{range}</div>
      <p className={`mt-3 text-[14px] max-w-sm ${tone === "teal" ? "text-bone/75" : "text-inksoft"}`}>{note}</p>
      <div className="mt-7 space-y-3">
        {bars.map((b) => {
          const total = bars.reduce((s, x) => s + x.val, 0);
          const w = Math.max(8, b.val / max * 100);
          return (
            <div key={b.name}>
              <div className={`flex items-center justify-between text-[12.5px] mb-1 ${tone === "teal" ? "text-bone/85" : "text-inksoft"}`}>
                <span>{b.name}</span>
                <span className="font-mono">${b.val.toLocaleString()}</span>
              </div>
              <div className={`h-1.5 rounded-full ${tone === "teal" ? "bg-bone/15" : "bg-sand"}`}>
                <div className="h-full rounded-full" style={{ width: `${w}%`, background: b.fill }} />
              </div>
            </div>);

        })}
      </div>
    </div>);

};

/* ---------------- WHY DIFFERENT (3-col comparison) ---------------- */
const WhyDifferent = () => {
  const rows = [
  {
    label: "Lead resold to multiple clinics?",
    ci: { type: "no", text: "Never." },
    agg: { type: "yes", text: "Yes — to 4–6 clinics." },
    diy: { type: "n/a", text: "Not applicable." }
  },
  {
    label: "Pay-to-play recommendation?",
    ci: { type: "no", text: "Standard commission across every clinic." },
    agg: { type: "yes", text: "Higher bidders rank higher." },
    diy: { type: "n/a", text: "You read everything yourself." }
  },
  {
    label: "Concierge support?",
    ci: { type: "yes", text: "Real human. Optional White-Glove." },
    agg: { type: "no", text: "Chatbot, then a sales rep." },
    diy: { type: "no", text: "You become the project manager." }
  },
  {
    label: "Time investment to a shortlist?",
    ci: { type: "yes", text: "5 minutes." },
    agg: { type: "yes", text: "10 minutes, 5 emails." },
    diy: { type: "no", text: "50+ hours." }
  },
  {
    label: "Vetted clinic criteria, published?",
    ci: { type: "yes", text: "Yes — all five, on the site." },
    agg: { type: "no", text: "No public criteria." },
    diy: { type: "n/a", text: "You build your own." }
  }];

  return (
    <section className="px-6 md:px-10 py-24 md:py-32 bg-cream border-y border-sand">
      <div className="max-w-[1200px] mx-auto">
        <div className="grid grid-cols-12 gap-8 mb-12">
          <div className="col-span-12 md:col-span-7">
            <Eyebrow>The unbiased one</Eyebrow>
            <h2 className="mt-4 font-serif text-[44px] md:text-[60px] leading-[0.95] tracking-displaytight">
              We make the same commission from{" "}
              <span className="italic text-teal">every clinic</span> in our network.
            </h2>
          </div>
          <div className="col-span-12 md:col-span-5">
            <p className="text-[16px] md:text-[17px] text-inksoft leading-relaxed max-w-md">
              So our recommendation is actually a recommendation. Not an auction.
              Here's how that plays out next to the alternatives.
            </p>
          </div>
        </div>

        <div className="rounded-2xl overflow-hidden border border-sand bg-bone">
          {/* Header row */}
          <div className="grid grid-cols-12 text-[12.5px] uppercase tracking-[0.16em] border-b border-sand">
            <div className="col-span-12 md:col-span-3 px-6 py-4 text-inksoft/55"></div>
            <div className="col-span-4 md:col-span-3 px-6 py-4 bg-teal text-bone font-medium">Conceive Iberia</div>
            <div className="col-span-4 md:col-span-3 px-6 py-4 text-inksoft/65">Aggregators</div>
            <div className="col-span-4 md:col-span-3 px-6 py-4 text-inksoft/65">DIY research</div>
          </div>

          {rows.map((r, i) =>
          <div key={r.label} className={`grid grid-cols-12 ${i !== rows.length - 1 ? "border-b border-sand" : ""}`}>
              <div className="col-span-12 md:col-span-3 px-6 py-5 text-[14px] text-inksoft font-medium">{r.label}</div>
              <CompCell tone="teal" {...r.ci} />
              <CompCell tone="muted" {...r.agg} />
              <CompCell tone="muted" {...r.diy} />
            </div>
          )}
        </div>
      </div>
    </section>);

};

const CompCell = ({ tone, type, text }) => {
  const isCi = tone === "teal";
  const dot =
  type === "yes" ? <span className={`flex h-5 w-5 items-center justify-center rounded-full ${isCi ? "bg-coral text-ink" : "bg-sage/20 text-sage"}`}><ICheck size={12} stroke={2.5} /></span> :
  type === "no" ? <span className={`flex h-5 w-5 items-center justify-center rounded-full ${isCi ? "bg-bone/15 text-bone" : "bg-sand text-inksoft/50"}`}><IClose size={12} stroke={2} /></span> :
  <span className={`flex h-5 w-5 items-center justify-center rounded-full ${isCi ? "bg-bone/15 text-bone" : "bg-sand text-inksoft/40"}`}><IDot size={4} /></span>;
  return (
    <div className={`col-span-4 md:col-span-3 px-6 py-5 flex items-start gap-2.5 ${isCi ? "bg-teal/5" : ""}`}>
      <div className="mt-0.5">{dot}</div>
      <div className={`text-[13.5px] leading-snug ${isCi ? "text-ink" : "text-inksoft/85"}`}>{text}</div>
    </div>);

};

/* ---------------- HOW IT WORKS ---------------- */
const HowItWorks = () => {
  const steps = [
  {
    n: "01",
    title: "Take the 5-minute quiz",
    body: "Twelve quiet questions. No medical degrees required. Skip what you don't know yet.",
    icon: <IDoc size={22} />
  },
  {
    n: "02",
    title: "Get matched to 2–3 vetted clinics",
    body: "Every clinic is screened on cycle volume, success-rate transparency, English-language operations, GDPR compliance, and donor pool diversity.",
    icon: <IRoute size={22} />
  },
  {
    n: "03",
    title: "Book a free consult — and add concierge if you want it",
    body: "Talk to the clinic directly. Or hand the airport, apartment, translator, and aftercare to our White-Glove team.",
    icon: <IKey size={22} />
  }];

  return (
    <section id="how-it-works" className="px-6 md:px-10 py-24 md:py-32 bg-bone">
      <div className="max-w-[1200px] mx-auto">
        <div className="flex items-end justify-between mb-12 flex-wrap gap-6">
          <div>
            <Eyebrow>The process</Eyebrow>
            <h2 className="mt-4 font-serif text-[44px] md:text-[60px] leading-[0.95] tracking-displaytight max-w-3xl">
              Three steps. <span className="italic text-teal">Five minutes.</span> Zero spam.
            </h2>
          </div>
          <Btn href="#/how-it-works" variant="outline">Read the full process</Btn>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {steps.map((s, i) =>
          <div key={s.n} className="relative rounded-2xl border border-sand bg-cream p-7 md:p-8 hover:border-teal/40 transition-colors">
              <div className="flex items-center justify-between mb-8">
                <span className="font-mono text-[12px] text-inksoft/50">{s.n}</span>
                <span className="text-teal">{s.icon}</span>
              </div>
              <h3 className="font-serif text-[26px] md:text-[28px] leading-[1.05] tracking-display">{s.title}</h3>
              <p className="mt-3 text-[14.5px] text-inksoft leading-relaxed">{s.body}</p>
              {i < steps.length - 1 &&
            <div className="hidden md:block absolute top-1/2 -right-3 -translate-y-1/2 w-6 h-px bg-sand" />
            }
            </div>
          )}
        </div>
      </div>
    </section>);

};

/* ---------------- PATIENT STORIES ---------------- */
const Stories = () => {
  const items = [
  {
    quote: "It is incredible how from absolute resignation, these doctors lifted my spirits. They got me pregnant and gave me my life back.",
    attr: "Patient, via Vida Fertility",
    meta: "Donor egg cycle · Alicante"
  },
  {
    quote: "I had to find a solution to my motherhood if I wanted to pursue my career and not settle for just any partner. I made the right choice.",
    attr: "Patient, via Vida Fertility",
    meta: "Single mother by choice · Madrid"
  },
  {
    quote: "The decision to go to Alicante has changed our lives forever and we couldn't be more ecstatic.",
    attr: "Patient, via Redia IVF",
    meta: "First Spanish cycle · Alicante"
  }];

  return (
    <section className="px-6 md:px-10 py-24 md:py-32 bg-tealdeep text-bone">
      <div className="max-w-[1200px] mx-auto">
        <div className="grid grid-cols-12 gap-8 mb-12">
          <div className="col-span-12 md:col-span-8">
            <Eyebrow dark>In their words</Eyebrow>
            <h2 className="mt-4 font-serif text-[44px] md:text-[60px] leading-[0.95] tracking-displaytight">
              Patients who already <span className="italic">made the trip</span>.
            </h2>
          </div>
          <div className="col-span-12 md:col-span-4 self-end">
            <p className="text-[15px] text-bone/70 max-w-md">
              No stock photos. No staged smiles. Quotes from real patients via the
              clinics in our network, used with permission.
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {items.map((s, i) =>
          <figure key={i} className="rounded-2xl bg-bone/[0.04] border border-bone/10 p-7 md:p-8 flex flex-col">
              <div className="font-serif text-[64px] leading-none text-coral">"</div>
              <blockquote className="mt-2 font-serif text-[22px] md:text-[24px] leading-[1.25] tracking-display text-bone">
                {s.quote}
              </blockquote>
              <figcaption className="mt-auto pt-8 flex items-center justify-between text-[12.5px]">
                <span className="text-bone/85">{s.attr}</span>
                <span className="text-bone/50 uppercase tracking-[0.14em] text-[10.5px]">{s.meta}</span>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

};

/* ---------------- NETWORK ---------------- */
// Coords positioned for an 800x560 viewBox to match the hand-drawn map below.
const Network = () => {
  // Pin coords mapped to the Spain path (viewBox 800x560).
  const CITIES = [
    { name: "Madrid",    count: 12, x: 365, y: 290, blurb: "12 vetted clinics. High volume, direct flights from JFK/ORD/LAX/MIA." },
    { name: "Barcelona", count:  8, x: 640, y: 222, blurb: "8 vetted clinics. Strong donor programs, English-fluent intake." },
    { name: "Valencia",  count:  5, x: 555, y: 350, blurb: "5 vetted clinics. Specialist hubs for prior-failed cycles." },
    { name: "Alicante",  count:  4, x: 525, y: 405, blurb: "4 vetted clinics. Patient-experience leaders, coastal recovery." },
    { name: "Marbella",  count:  3, x: 345, y: 488, blurb: "3 vetted clinics. Discreet, premium, English-first." },
  ];
  const [active, setActive] = React.useState("Madrid");
  const sel = CITIES.find(c => c.name === active) || CITIES[0];

  return (
    <section className="px-6 md:px-10 py-24 md:py-32 bg-bone">
      <div className="max-w-[1200px] mx-auto">
        <div className="grid grid-cols-12 gap-10 md:gap-16 items-center">
          <div className="col-span-12 md:col-span-5">
            <Eyebrow>The network</Eyebrow>
            <h2 className="mt-4 font-serif text-[40px] md:text-[52px] leading-[0.95] tracking-displaytight">
              <span className="italic text-teal">32</span> vetted clinics across five Spanish cities.
            </h2>
            <p className="mt-5 text-[16px] text-inksoft leading-relaxed max-w-md">
              Every clinic in our network is screened on five published criteria. Clinics
              that don't meet them don't get added — even when they offer to pay.
            </p>
            <ul className="mt-7 space-y-2.5">
              {[
              "Verified annual cycle volume",
              "Success-rate transparency by age band",
              "End-to-end English-language operations",
              "GDPR-compliant data handling",
              "Donor pool diversity (where applicable)"].
              map((c) =>
              <li key={c} className="flex items-center gap-3 text-[14.5px] text-ink">
                  <span className="flex h-5 w-5 items-center justify-center rounded-full bg-teal/10 text-teal">
                    <ICheck size={12} stroke={2.5} />
                  </span>
                  {c}
                </li>
              )}
            </ul>
            <div className="mt-8">
              <Btn href="#/" variant="primary">Browse the network</Btn>
            </div>
          </div>

          {/* Interactive Spain map */}
          <div className="col-span-12 md:col-span-7">
            <div className="relative aspect-[4/3] rounded-2xl bg-cream border border-sand overflow-hidden">
              <svg viewBox="0 0 800 560" className="absolute inset-0 w-full h-full">
                <defs>
                  <filter id="pinShadow" x="-50%" y="-50%" width="200%" height="200%">
                    <feDropShadow dx="0" dy="2" stdDeviation="2" floodOpacity="0.25"/>
                  </filter>
                </defs>                {/* Hand-drawn Spain silhouette */}
                <g fill="#FBF9F5" stroke="#1F1D1A" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                  <path d="
                    M 130 130
                    Q 160 118 195 122
                    Q 230 128 265 130
                    Q 305 130 340 132
                    Q 380 133 415 135
                    Q 450 138 485 138
                    Q 520 138 555 148
                    Q 590 158 620 168
                    Q 655 178 685 180
                    Q 705 180 720 182
                    Q 720 200 705 215
                    Q 685 220 670 215
                    Q 660 240 640 252
                    Q 620 262 605 262
                    Q 595 290 575 318
                    Q 555 345 545 365
                    Q 538 388 520 410
                    Q 498 432 470 450
                    Q 440 465 405 478
                    Q 372 488 340 495
                    Q 320 498 305 488
                    Q 285 480 268 472
                    Q 250 465 235 458
                    Q 218 450 215 432
                    Q 215 410 220 380
                    Q 225 345 230 310
                    Q 235 275 235 240
                    Q 235 220 232 208
                    Q 215 200 195 188
                    Q 175 175 158 165
                    Q 145 158 132 153
                    Q 118 148 105 148
                    Q 92 148 85 145
                    Q 88 138 95 134
                    Q 110 128 130 130 Z" />
                </g>

                {/* Sketchy second-pass for hand-drawn feel */}
                <g fill="none" stroke="#1F1D1A" strokeWidth="0.9" strokeLinecap="round" opacity="0.4">
                  <path d="M 130 134 Q 200 128 280 134 Q 380 138 480 142 Q 570 152 650 175" strokeDasharray="3 4"/>
                  <path d="M 605 268 Q 590 305 565 350 Q 545 395 510 430 Q 470 460 410 478" strokeDasharray="3 4"/>
                </g>

                {/* Shadow hatching — characteristic isometric hand-drawn style */}
                <g stroke="#1F1D1A" strokeWidth="1.4" strokeLinecap="round" opacity="0.85">
                  {/* South coast */}
                  {Array.from({ length: 18 }).map((_, i) => {
                    const t = i / 17;
                    const x = 240 + t * 200 + Math.sin(i * 0.7) * 3;
                    // South coast curve y ≈ 460 + sin curve
                    const y = 478 - Math.sin(t * Math.PI) * 30 + Math.sin(i * 0.5) * 3;
                    return <line key={`s${i}`} x1={x} y1={y + 4} x2={x - 2} y2={y + 16} />;
                  })}
                  {/* East coast — points outward (right) */}
                  {Array.from({ length: 18 }).map((_, i) => {
                    const t = i / 17;
                    // East coast from (605,262) → Valencia → Alicante → (470,450)
                    const x = 605 - t * 90 + Math.sin(i * 0.7) * 4;
                    const y = 262 + t * 188 + Math.sin(i * 0.5) * 3;
                    return <line key={`e${i}`} x1={x + 4} y1={y} x2={x + 14} y2={y - 3} />;
                  })}
                  {/* North coast top hatching (inverted shadow above) */}
                  {Array.from({ length: 14 }).map((_, i) => {
                    const x = 130 + i * 40;
                    return <line key={`n${i}`} x1={x} y1={130 + Math.sin(i*0.6)*2} x2={x - 4} y2={120 + Math.sin(i*0.6)*2} />;
                  })}
                </g>

                {/* Balearic Islands — hand drawn */}
                <g fill="#FBF9F5" stroke="#1F1D1A" strokeWidth="2" strokeLinejoin="round">
                  {/* Mallorca */}
                  <path d="M 712 310 C 706 302, 712 296, 725 296 C 740 296, 752 302, 754 312 C 755 322, 742 326, 728 324 C 716 322, 708 318, 712 310 Z"/>
                  {/* Menorca */}
                  <path d="M 768 295 C 765 290, 770 286, 778 286 C 786 286, 790 292, 786 297 C 780 300, 770 300, 768 295 Z"/>
                  {/* Ibiza */}
                  <path d="M 685 335 C 682 330, 687 326, 695 327 C 702 329, 704 335, 698 338 C 692 340, 686 339, 685 335 Z"/>
                </g>
                {/* island shadow hatch */}
                <g stroke="#1F1D1A" strokeWidth="1.1" strokeLinecap="round" opacity="0.85">
                  <line x1="725" y1="325" x2="723" y2="330"/>
                  <line x1="735" y1="326" x2="733" y2="331"/>
                  <line x1="745" y1="324" x2="743" y2="329"/>
                  <line x1="775" y1="299" x2="773" y2="303"/>
                  <line x1="694" y1="339" x2="692" y2="343"/>
                </g>

                {/* Pins (interactive) */}
                {CITIES.map((c) => {
                  const isActive = c.name === active;
                  return (
                    <g key={c.name} onClick={() => setActive(c.name)} style={{ cursor: "pointer" }}>
                      <circle cx={c.x} cy={c.y} r="22" fill="transparent" />
                      {isActive && (
                        <circle cx={c.x} cy={c.y} r="14" fill="#E8745C" opacity="0.25">
                          <animate attributeName="r" values="10;22;10" dur="2.4s" repeatCount="indefinite"/>
                          <animate attributeName="opacity" values="0.4;0;0.4" dur="2.4s" repeatCount="indefinite"/>
                        </circle>
                      )}
                      <circle cx={c.x} cy={c.y} r={isActive ? 8 : 6}
                        fill={isActive ? "#E8745C" : "#1F4E4D"}
                        stroke="#FBF9F5" strokeWidth="2.5"
                        filter="url(#pinShadow)"
                        style={{ transition: "all .25s" }}
                      />
                      <text x={c.x + 12} y={c.y - 8} fontSize="13" fontFamily="EB Garamond, Georgia, serif"
                        fill={isActive ? "#1F1D1A" : "#3A3833"}
                        fontWeight={isActive ? 600 : 400}
                        style={{ pointerEvents: "none" }}
                      >
                        {c.name}
                      </text>
                      <text x={c.x + 12} y={c.y + 8} fontSize="10" fontFamily="Geist Mono, monospace"
                        fill="#1F4E4D" opacity="0.75"
                        style={{ pointerEvents: "none" }}
                      >
                        {c.count} clinics
                      </text>
                    </g>
                  );
                })}
              </svg>

              {/* Top-left label */}
              <div className="absolute top-3 left-4 font-mono text-[10px] uppercase tracking-[0.2em] text-inksoft/60">
                <span className="font-serif italic text-[14px] text-inksoft/65 normal-case tracking-normal">España</span>
              </div>
            </div>

            {/* Tabs + selected detail — under the map, no occlusion */}
            <div className="mt-4 flex flex-wrap items-center gap-1.5">
              {CITIES.map(c => (
                <button key={c.name} onClick={() => setActive(c.name)}
                  className={`text-[12px] px-3 py-1.5 rounded-full border transition ${
                    active === c.name
                      ? "bg-ink text-bone border-ink"
                      : "bg-bone text-inksoft border-sand hover:border-teal/40"
                  }`}>
                  {c.name}
                  <span className={`ml-1.5 font-mono text-[10px] ${active === c.name ? "text-bone/60" : "text-teal/70"}`}>{c.count}</span>
                </button>
              ))}
            </div>
            <div className="mt-4 rounded-xl bg-bone border border-sand p-4 flex items-start gap-4">
              <div className="flex-1">
                <div className="flex items-center gap-3 mb-1">
                  <span className="font-serif text-[22px] text-ink tracking-display">{sel.name}</span>
                  <span className="font-mono text-[11px] text-teal">{sel.count} CLINICS</span>
                </div>
                <p className="text-[13.5px] text-inksoft leading-snug">{sel.blurb}</p>
              </div>
              <a href="#/" className="shrink-0 inline-flex items-center gap-1.5 text-[12.5px] text-teal font-medium underline underline-offset-4 decoration-teal/30 hover:decoration-teal whitespace-nowrap">
                See clinics <IArrow size={12} stroke={2.2}/>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

/* ---------------- FINAL CTA ---------------- */
const FinalCTA = () => {
  const [email, setEmail] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section className="px-6 md:px-10 py-24 md:py-32 bg-bone">
      <div className="max-w-[1200px] mx-auto">
        <div className="rounded-[28px] bg-ink text-bone overflow-hidden relative">
          <div className="grid grid-cols-12 gap-8 p-8 md:p-14 relative z-10">
            <div className="col-span-12 md:col-span-7">
              <Eyebrow dark>Take a breath</Eyebrow>
              <h2 className="mt-4 font-serif text-[44px] md:text-[68px] leading-[0.95] tracking-displaytight">
                Stop comparing twelve clinic websites at midnight.{" "}
                <span className="italic text-coral">Start with the match.</span>
              </h2>
            </div>
            <div className="col-span-12 md:col-span-5 md:pl-6 md:border-l md:border-bone/15">
              <p className="text-[15.5px] text-bone/75 leading-relaxed">
                Or grab the <span className="text-bone">free Spanish IVF Clinic Comparison Guide</span> — real data on the
                top 15 clinics. No spam. We're not a list-broker.
              </p>
              {!submitted ?
              <form
                onSubmit={(e) => {e.preventDefault();if (email) setSubmitted(true);}}
                className="mt-5 flex items-center gap-2 bg-bone/[0.06] border border-bone/15 rounded-full p-1.5 focus-within:border-coral/60 transition-colors">
                
                  <input
                  type="email" required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Your email"
                  className="flex-1 bg-transparent px-4 py-2 text-[14.5px] text-bone placeholder:text-bone/40 outline-none" />
                
                  <button type="submit" className="rounded-full bg-coral text-ink px-5 py-2 text-[13.5px] font-medium hover:brightness-105 inline-flex items-center gap-1.5">
                    Send guide <IArrow size={14} stroke={2.2} />
                  </button>
                </form> :

              <div className="mt-5 rounded-full bg-coral/10 border border-coral/40 p-3 px-5 text-[14px] text-coral">
                  On its way to <span className="font-medium">{email}</span>. Check your inbox in a minute.
                </div>
              }

              <div className="mt-8 flex flex-col gap-3">
                <a href="#/quiz" className="inline-flex items-center justify-between gap-3 rounded-2xl bg-coral text-ink px-6 py-5 hover:brightness-105 transition">
                  <span>
                    <div className="text-[11px] uppercase tracking-[0.2em] text-ink/60">Or, the matching quiz</div>
                    <div className="font-serif text-[24px] tracking-display mt-1">Start in 5 minutes →</div>
                  </span>
                </a>
              </div>
            </div>
          </div>

          {/* Subtle decorative serif background */}
          <div className="pointer-events-none absolute -bottom-32 -right-10 font-serif text-[280px] leading-none italic text-bone/[0.04] select-none">
            Iberia
          </div>
        </div>
      </div>
    </section>);

};

/* ---------------- HOME PAGE ---------------- */
const HomePage = () =>
<main className="bg-bone">
    <Hero />
    <TheMath />
    <WhyDifferent />
    <HowItWorks />
    <Stories />
    <Network />
    <FinalCTA />
  </main>;


Object.assign(window, { HomePage, Hero, HeroStickyNav });