/* Cost Calculator — interactive */

const fmtUSD = (n) => "$" + Math.round(n).toLocaleString();

const CalcPage = () => {
  const [usQuote, setUsQuote] = React.useState(25000);
  const [age, setAge] = React.useState("35–37");
  const [donor, setDonor] = React.useState("Maybe");
  const [partner, setPartner] = React.useState("Just me");
  const [cycles, setCycles] = React.useState(1);
  const [tier, setTier] = React.useState("Essential");
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);

  const tierCost = { "None": 0, "Essential": 1997, "Standard": 2497, "Premium": 2997 };
  // Spain cycle base (USD-equiv) — narrowed by donor + age
  const baseCycle = donor === "Yes" ? 8800 : donor === "Maybe" ? 7600 : 6400;
  const ageBump = age === "41–43" ? 800 : age === "44+" ? 1400 : 0;
  const flights = partner === "Plus partner" ? 2200 : 1100;
  const lodging = partner === "Plus partner" ? 1900 : 1400;
  const ground = 350;
  const concierge = tierCost[tier];

  const spainPerCycle = baseCycle + ageBump;
  const spainTotal = spainPerCycle * cycles + flights + lodging + ground + concierge;
  const usTotal = usQuote * cycles;
  const savings = Math.max(0, usTotal - spainTotal);

  const breakdown = [
    { name: "Cycle + medication", val: spainPerCycle * cycles, fill: "#1F4E4D" },
    { name: "Flights",             val: flights, fill: "#2C5F5D" },
    { name: "Lodging (10–14 nights)", val: lodging, fill: "#3D7370" },
    { name: "Ground transport",    val: ground, fill: "#557D7B" },
    ...(concierge ? [{ name: `${tier} concierge`, val: concierge, fill: "#E8745C" }] : []),
  ];

  return (
    <PageShell className="bg-bone">
      <div className="px-6 md:px-10 pt-10 pb-24">
        <div className="max-w-[1200px] mx-auto">
          {/* Header */}
          <div className="grid grid-cols-12 gap-8 mb-12">
            <div className="col-span-12 md:col-span-7">
              <Eyebrow>Cost calculator</Eyebrow>
              <h1 className="mt-4 font-serif text-[52px] md:text-[80px] leading-[0.92] tracking-displaytight">
                Run <span className="italic text-teal">your</span> numbers.
              </h1>
              <p className="mt-5 text-[16.5px] text-inksoft max-w-xl leading-relaxed">
                Real ranges, not vague "save thousands" copy. Adjust the sliders;
                the math updates as you go.
              </p>
            </div>
            <div className="col-span-12 md:col-span-5 md:pt-12 flex md:justify-end items-end">
              <div className="text-[13px] text-inksoft/65 max-w-sm">
                Defaults reflect 2026 USD-equivalent pricing for one IVF cycle.
                Spanish clinic prices vary by city and protocol; your matched
                clinics give you binding quotes.
              </div>
            </div>
          </div>

          <div className="grid grid-cols-12 gap-6">
            {/* Inputs */}
            <div className="col-span-12 lg:col-span-7 rounded-2xl border border-sand bg-cream p-7 md:p-9">
              <h2 className="font-serif text-[28px] tracking-display mb-6">Your inputs</h2>

              {/* US quote */}
              <Field label="Your current US cycle quote" hint={fmtUSD(usQuote)}>
                <input type="range" min="12000" max="40000" step="500" value={usQuote} onChange={(e)=>setUsQuote(+e.target.value)} className="ci-range" />
                <div className="mt-2 flex justify-between text-[11.5px] text-inksoft/55 font-mono">
                  <span>$12,000</span><span>$40,000</span>
                </div>
              </Field>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 mt-6">
                <Pills label="Your age" options={["Under 35","35–37","38–40","41–43","44+"]} value={age} onChange={setAge}/>
                <Pills label="Donor program?" options={["No","Maybe","Yes"]} value={donor} onChange={setDonor}/>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 mt-6">
                <Pills label="Travel companion" options={["Just me","Plus partner"]} value={partner} onChange={setPartner}/>
                <div>
                  <div className="text-[12px] uppercase tracking-[0.18em] text-inksoft/55 mb-3">Cycles to budget for</div>
                  <div className="inline-flex rounded-full border border-sand bg-bone p-1">
                    {[1,2,3].map(n => (
                      <button key={n} onClick={()=>setCycles(n)} className={`px-4 py-1.5 rounded-full text-[14px] transition ${cycles===n?"bg-teal text-bone":"text-inksoft hover:text-ink"}`}>{n}</button>
                    ))}
                  </div>
                </div>
              </div>

              <div className="mt-6">
                <div className="text-[12px] uppercase tracking-[0.18em] text-inksoft/55 mb-3">Concierge tier</div>
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                  {[
                    { k: "None",      p: "—" },
                    { k: "Essential", p: "€1,997" },
                    { k: "Standard",  p: "€2,497" },
                    { k: "Premium",   p: "€2,997" },
                  ].map(t => (
                    <button key={t.k} onClick={()=>setTier(t.k)}
                      className={`text-left rounded-xl border p-3 transition ${tier===t.k?"border-teal bg-teal/5":"border-sand bg-bone hover:border-teal/40"}`}>
                      <div className="font-medium text-[14px]">{t.k}</div>
                      <div className="font-mono text-[12px] text-inksoft/65 mt-0.5">{t.p}</div>
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {/* Output */}
            <div className="col-span-12 lg:col-span-5 rounded-2xl bg-ink text-bone p-7 md:p-9">
              <div className="text-[11.5px] uppercase tracking-[0.2em] text-bone/55">Net savings, per plan</div>
              <div className="mt-2 font-serif text-[64px] md:text-[80px] leading-[0.95] tracking-displaytight text-coral">{fmtUSD(savings)}</div>
              <div className="mt-1 text-[13.5px] text-bone/65">over {cycles} cycle{cycles>1?"s":""}, after travel and concierge</div>

              <div className="mt-7 grid grid-cols-2 gap-3">
                <SummaryStat label="US path" value={fmtUSD(usTotal)} muted />
                <SummaryStat label="Spain path" value={fmtUSD(spainTotal)} accent />
              </div>

              <div className="mt-7">
                <div className="text-[11.5px] uppercase tracking-[0.18em] text-bone/55 mb-3">Spain breakdown</div>
                <div className="space-y-2.5">
                  {breakdown.map(b => (
                    <div key={b.name}>
                      <div className="flex items-center justify-between text-[12.5px] mb-1 text-bone/85">
                        <span>{b.name}</span>
                        <span className="font-mono">{fmtUSD(b.val)}</span>
                      </div>
                      <div className="h-1.5 rounded-full bg-bone/10">
                        <div className="h-full rounded-full" style={{ width: `${Math.min(100, (b.val / spainTotal) * 100)}%`, background: b.fill }} />
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="mt-8 flex gap-3">
                <Btn href="#/quiz" variant="coral">Match me to clinics</Btn>
              </div>
            </div>
          </div>

          {/* Email capture */}
          <div className="mt-8 rounded-2xl border border-sand bg-cream p-7 md:p-8 grid grid-cols-12 gap-6 items-center">
            <div className="col-span-12 md:col-span-7">
              <h3 className="font-serif text-[28px] md:text-[32px] tracking-display leading-[1.05]">
                Email me my personalized cost breakdown.
              </h3>
              <p className="mt-2 text-[14px] text-inksoft max-w-xl">
                A PDF with your numbers and a 6-page guide to Spanish IVF pricing.
                One email. No list-broking.
              </p>
            </div>
            <div className="col-span-12 md:col-span-5">
              {!sent ? (
                <form onSubmit={(e)=>{e.preventDefault(); if(email) setSent(true);}} className="flex items-center gap-2 bg-bone border border-sand rounded-full p-1.5 focus-within:border-teal/50">
                  <input type="email" required placeholder="you@email.com" value={email} onChange={(e)=>setEmail(e.target.value)} className="flex-1 bg-transparent px-4 py-2 text-[14.5px] outline-none"/>
                  <button className="rounded-full bg-teal text-bone px-5 py-2 text-[13.5px] font-medium hover:bg-tealdeep inline-flex items-center gap-1.5">
                    Send breakdown <IArrow size={14} stroke={2.2}/>
                  </button>
                </form>
              ) : (
                <div className="rounded-full bg-teal/10 border border-teal/30 text-teal px-5 py-3 text-[14px]">
                  Sent to <span className="font-medium">{email}</span>.
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </PageShell>
  );
};

const Field = ({ label, hint, children }) => (
  <div>
    <div className="flex items-center justify-between mb-3">
      <div className="text-[12px] uppercase tracking-[0.18em] text-inksoft/55">{label}</div>
      {hint && <div className="font-mono text-[13.5px] text-teal">{hint}</div>}
    </div>
    {children}
  </div>
);

const Pills = ({ label, options, value, onChange }) => (
  <div>
    <div className="text-[12px] uppercase tracking-[0.18em] text-inksoft/55 mb-3">{label}</div>
    <div className="flex flex-wrap gap-1.5">
      {options.map(o => (
        <button key={o} onClick={()=>onChange(o)}
          className={`rounded-full border px-3.5 py-1.5 text-[13px] transition ${value===o?"bg-teal border-teal text-bone":"border-sand bg-bone text-inksoft hover:border-teal/40"}`}>
          {o}
        </button>
      ))}
    </div>
  </div>
);

const SummaryStat = ({ label, value, accent, muted }) => (
  <div className={`rounded-xl p-4 ${accent ? "bg-coral/15 border border-coral/30" : "bg-bone/[0.06] border border-bone/10"}`}>
    <div className="text-[10.5px] uppercase tracking-[0.18em] text-bone/55">{label}</div>
    <div className={`font-mono text-[20px] md:text-[22px] mt-1 ${accent?"text-coral":"text-bone"}`}>{value}</div>
  </div>
);

Object.assign(window, { CalcPage });