/* App router + how-it-works skeleton */

const HowItWorksFull = () => (
  <PageShell className="bg-bone">
    <section className="px-6 md:px-10 pt-12 pb-20">
      <div className="max-w-[1100px] mx-auto">
        <Eyebrow>How it works</Eyebrow>
        <h1 className="mt-4 font-serif text-[52px] md:text-[80px] leading-[0.92] tracking-displaytight">
          The whole process. <span className="italic text-teal">Plainly.</span>
        </h1>
        <p className="mt-5 text-[16.5px] text-inksoft max-w-2xl leading-relaxed">
          From the moment you take the quiz to the moment your matched clinic
          confirms your protocol — what happens, in what order, and what we
          handle for you.
        </p>
      </div>
    </section>

    <section className="px-6 md:px-10 pb-24">
      <div className="max-w-[1100px] mx-auto space-y-3">
        {[
          { n:"01", t:"Take the matching quiz", b:"Twelve quiet questions. About 5 minutes. Skip anything you don't know yet." },
          { n:"02", t:"Get your shortlist by email", b:"Two or three vetted clinics, with a written rationale for each match. Usually within 30 minutes." },
          { n:"03", t:"Book free consultations", b:"You can talk directly to any matched clinic. No phone trees, no upsell. We'll prep questions if you want." },
          { n:"04", t:"Pick your clinic", b:"Or talk it through with a real advisor. Free 20-minute call, optional." },
          { n:"05", t:"(Optional) Add White-Glove concierge", b:"€1,997–€2,997. Airport, apartment, translator, and aftercare. Handed off to a dedicated coordinator." },
          { n:"06", t:"Travel and treatment", b:"10–14 days on the ground for most cycles. Your coordinator manages the calendar so you don't have to." },
          { n:"07", t:"Aftercare and handoff", b:"Records and embryo transport. Clean handoff back to your OB-GYN at home." },
        ].map(s => (
          <div key={s.n} className="grid grid-cols-12 gap-4 p-6 md:p-7 rounded-2xl border border-sand hover:border-teal/40 transition-colors bg-cream">
            <div className="col-span-2 md:col-span-1 font-mono text-[13px] text-teal">{s.n}</div>
            <div className="col-span-10 md:col-span-4 font-serif text-[22px] md:text-[26px] tracking-display leading-tight">{s.t}</div>
            <div className="col-span-12 md:col-span-7 text-[14.5px] text-inksoft leading-relaxed">{s.b}</div>
          </div>
        ))}
      </div>

      <div className="max-w-[1100px] mx-auto mt-10 flex items-center justify-between flex-wrap gap-4 p-6 md:p-7 rounded-2xl bg-ink text-bone">
        <div className="font-serif text-[24px] md:text-[28px] tracking-display">
          The whole thing starts with five quiet minutes.
        </div>
        <Btn href="#/quiz" variant="coral">Take the quiz</Btn>
      </div>
    </section>
  </PageShell>
);

const App = () => {
  const route = useHashRoute();
  const path = route.replace(/^#/, "");

  const isHome = path === "/" || path === "" || path === "/home";

  let page;
  if (isHome) page = <HomePage/>;
  else if (path.startsWith("/quiz"))       page = <QuizPage/>;
  else if (path.startsWith("/calculator")) page = <CalcPage/>;
  else if (path.startsWith("/concierge"))  page = <ConciergePage/>;
  else if (path.startsWith("/how-it-works")) page = <HowItWorksFull/>;
  else if (path.match(/^\/blog\/(.+)/))      page = <ArticlePage slug={path.match(/^\/blog\/(.+)/)[1]} />;
  else if (path.startsWith("/blog"))         page = <BlogPage/>;
  else page = <HomePage/>;

  return (
    <>
      <Header/>
      {page}
      <Footer/>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);