/* Concierge — White-Glove */

const TIERS = [
  {
    name: "Essential",
    price: "€1,997",
    blurb: "The handoff layer. We pick you up, settle you in, and put a coordinator on call.",
    features: [
      "Airport pickup + arrival concierge",
      "Vetted apartment booking near your clinic",
      "English-language coordinator (business hours)",
      "Cycle paperwork pre-flight checklist",
      "Local SIM and transport setup",
    ],
  },
  {
    name: "Standard",
    price: "€2,497",
    blurb: "Everything in Essential, plus a translator in your pocket and a managed cycle calendar.",
    features: [
      "Everything in Essential",
      "On-call translator (Spanish, French, German)",
      "Managed cycle calendar with reminders",
      "Pharmacy + medication coordination",
      "Light tourism plan for off days",
    ],
    featured: true,
  },
  {
    name: "Premium",
    price: "€2,997",
    blurb: "Everything in Standard, plus partner travel and a clean handoff back to your US OB-GYN.",
    features: [
      "Everything in Standard",
      "Partner travel + accommodations coordination",
      "Post-cycle OB-GYN handoff (US, UK, EU)",
      "Records + embryo transport assistance",
      "Dedicated White-Glove project manager",
    ],
  },
];

const ConciergePage = () => {
  return (
    <PageShell className="bg-bone">
      {/* Hero */}
      <section className="px-6 md:px-10 pt-12 pb-20">
        <div className="max-w-[1200px] mx-auto grid grid-cols-12 gap-10 items-end">
          <div className="col-span-12 md:col-span-7">
            <Eyebrow>White-Glove concierge</Eyebrow>
            <h1 className="mt-4 font-serif text-[52px] md:text-[88px] leading-[0.9] tracking-displaytight">
              Stop being the <span className="italic text-teal">project manager</span> of your own IVF cycle.
            </h1>
            <p className="mt-6 text-[17px] text-inksoft leading-relaxed max-w-xl">
              We pick you up at the airport, line up your apartment near the clinic,
              put a translator in your pocket, and stay with you through aftercare.
              Optional. €1,997–€2,997.
            </p>
            <div className="mt-8 flex items-center gap-4">
              <Btn href="#/quiz" variant="teal">Match me first</Btn>
              <a href="#tiers" className="text-[14px] text-inksoft underline underline-offset-4 decoration-inksoft/20 hover:decoration-inksoft">See the tiers</a>
            </div>
          </div>
          <div className="col-span-12 md:col-span-5">
            <div className="relative aspect-[5/6] rounded-2xl overflow-hidden border border-sand">
              <img src="https://images.unsplash.com/photo-1518495973542-4542c06a5843?w=1400&q=80&auto=format&fit=crop" alt="" className="w-full h-full object-cover"/>
              <div className="absolute inset-0 bg-gradient-to-t from-ink/55 via-transparent to-transparent"/>
              <div className="absolute bottom-5 left-5 right-5 text-bone">
                <div className="font-serif italic text-[14px] text-bone/75">A real human, not a chatbot</div>
                <div className="font-serif text-[28px] tracking-displaytight">From wheels-down to OB-GYN handoff.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Tiers */}
      <section id="tiers" className="px-6 md:px-10 pb-24">
        <div className="max-w-[1200px] mx-auto">
          <div className="mb-10 grid grid-cols-12 gap-6 items-end">
            <h2 className="col-span-12 md:col-span-8 font-serif text-[40px] md:text-[56px] leading-[0.95] tracking-displaytight">
              Three tiers. <span className="italic text-teal">All optional.</span>
            </h2>
            <p className="col-span-12 md:col-span-4 text-[14.5px] text-inksoft leading-relaxed">
              Patients pay nothing for matching. White-Glove is a separate, optional
              service for patients who'd rather hand off the logistics.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
            {TIERS.map(t => (
              <article key={t.name} className={`rounded-2xl p-7 md:p-8 flex flex-col ${t.featured ? "bg-ink text-bone border border-ink" : "bg-cream border border-sand"}`}>
                <div className="flex items-center justify-between mb-5">
                  <span className={`text-[11px] uppercase tracking-[0.2em] ${t.featured ? "text-bone/55" : "text-inksoft/55"}`}>{t.name}</span>
                  {t.featured && <span className="rounded-full bg-coral text-ink px-2.5 py-0.5 text-[10.5px] uppercase tracking-[0.16em] font-medium">Most chosen</span>}
                </div>
                <div className={`font-serif text-[52px] leading-none tracking-displaytight ${t.featured ? "text-coral" : "text-ink"}`}>{t.price}</div>
                <p className={`mt-3 text-[14px] max-w-xs ${t.featured ? "text-bone/75" : "text-inksoft"}`}>{t.blurb}</p>
                <ul className="mt-6 space-y-2.5">
                  {t.features.map(f => (
                    <li key={f} className={`flex items-start gap-2.5 text-[14px] ${t.featured ? "text-bone/90" : "text-ink"}`}>
                      <span className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${t.featured ? "bg-coral/20 text-coral" : "bg-teal/10 text-teal"}`}>
                        <ICheck size={12} stroke={2.5}/>
                      </span>
                      {f}
                    </li>
                  ))}
                </ul>
                <div className="mt-auto pt-7">
                  <Btn href="#/quiz" variant={t.featured ? "coral" : "primary"}>Start with this tier</Btn>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* What's included visually — icons strip */}
      <section className="px-6 md:px-10 py-20 bg-cream border-y border-sand">
        <div className="max-w-[1200px] mx-auto">
          <Eyebrow>What's actually included</Eyebrow>
          <h2 className="mt-4 font-serif text-[40px] md:text-[52px] leading-[0.95] tracking-displaytight max-w-3xl">
            The boring logistics that <span className="italic text-teal">absolutely matter</span>.
          </h2>
          <div className="mt-12 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-5">
            {[
              { i: <IPlane size={22}/>, t: "Airport pickup",   s: "Driver waiting at arrivals." },
              { i: <IKey size={22}/>,   t: "Apartment",        s: "Vetted, near the clinic." },
              { i: <IChat size={22}/>,  t: "Translator",       s: "On-call during scans + transfer." },
              { i: <IClock size={22}/>, t: "Cycle calendar",   s: "We keep the schedule, you don't." },
              { i: <IHeart size={22}/>, t: "Aftercare",        s: "OB-GYN handoff back home." },
              { i: <IDoc size={22}/>,   t: "Records + embryos",s: "Transport, paperwork, customs." },
            ].map(x => (
              <div key={x.t} className="rounded-xl border border-sand bg-bone p-5">
                <div className="text-teal mb-3">{x.i}</div>
                <div className="font-medium text-[14.5px]">{x.t}</div>
                <div className="text-[12.5px] text-inksoft/70 mt-1 leading-snug">{x.s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Honest section: who this is / isn't for */}
      <section className="px-6 md:px-10 py-24">
        <div className="max-w-[1200px] mx-auto grid grid-cols-1 md:grid-cols-2 gap-5">
          <div className="rounded-2xl border border-sand p-8 bg-bone">
            <div className="text-[11.5px] uppercase tracking-[0.2em] text-teal mb-3">Who this is for</div>
            <ul className="space-y-3">
              {[
                "You're working full-time and can't be the cycle coordinator on top of it.",
                "You don't speak Spanish and don't want to learn medical Spanish in three weeks.",
                "Your partner is traveling with you and the logistics double.",
                "You want a clean handoff back to a US/UK/EU OB-GYN at the end.",
              ].map(t => (
                <li key={t} className="flex items-start gap-3 text-[14.5px] text-ink">
                  <span className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-teal/10 text-teal"><ICheck size={12} stroke={2.5}/></span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
          <div className="rounded-2xl border border-sand p-8 bg-cream">
            <div className="text-[11.5px] uppercase tracking-[0.2em] text-inksoft/65 mb-3">Who this isn't for</div>
            <ul className="space-y-3">
              {[
                "You enjoy planning trips and want to manage everything yourself.",
                "You already speak fluent Spanish and have a friend in the city.",
                "You're not yet matched — start with the free quiz first.",
                "Cost is your single largest concern. The base path is plenty.",
              ].map(t => (
                <li key={t} className="flex items-start gap-3 text-[14.5px] text-inksoft">
                  <span className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-sand text-inksoft/60"><IClose size={12} stroke={2}/></span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Patient story */}
      <section className="px-6 md:px-10 pb-24">
        <div className="max-w-[1100px] mx-auto rounded-2xl bg-tealdeep text-bone p-10 md:p-16">
          <div className="font-serif text-[64px] leading-none text-coral">"</div>
          <blockquote className="mt-2 font-serif text-[28px] md:text-[40px] leading-[1.15] tracking-display">
            The decision to go to Alicante has changed our lives forever and we couldn't be more ecstatic. The translator alone was worth the entire concierge fee.
          </blockquote>
          <div className="mt-8 flex items-center justify-between flex-wrap gap-3">
            <span className="text-[13px] text-bone/70">Patient, via Redia IVF · Standard concierge</span>
            <Btn href="#/quiz" variant="coral">Book a White-Glove consult</Btn>
          </div>
        </div>
      </section>
    </PageShell>
  );
};

Object.assign(window, { ConciergePage });