/* Shared shell: header, footer, page transitions, hash router */

const NAV = [
  { label: "How it works",   href: "#/how-it-works" },
  { label: "Take the quiz",  href: "#/quiz" },
  { label: "Cost calculator", href: "#/calculator" },
  { label: "Concierge",      href: "#/concierge" },
  { label: "Blog",           href: "#/blog" },
];

const useHashRoute = () => {
  const [route, setRoute] = React.useState(() => window.location.hash || "#/");
  React.useEffect(() => {
    const onHash = () => {
      setRoute(window.location.hash || "#/");
      window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return route;
};

/* Header — desktop nav + mobile hamburger/drawer */
const Header = ({ overHero = false }) => {
  const [open, setOpen] = React.useState(false);

  // Close drawer on nav
  const close = () => setOpen(false);

  // Lock scroll when drawer open
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <header className="fixed top-0 inset-x-0 z-40 bg-bone/92 backdrop-blur-md border-b border-sand/60">
      <div className="max-w-[1400px] mx-auto px-6 md:px-10 h-16 flex items-center justify-between">

        {/* Logo */}
        <a href="#/" onClick={close} className="flex items-center gap-2 font-serif text-[22px] tracking-display text-ink">
          <span className="font-medium">Conceive</span>
          <span className="italic font-normal opacity-70">Iberia</span>
        </a>

        {/* Desktop nav */}
        <nav className="hidden md:flex items-center gap-7 text-[13.5px]">
          {NAV.map(n => (
            <a key={n.href} href={n.href} className="transition-colors text-inksoft hover:text-teal">
              {n.label}
            </a>
          ))}
        </nav>

        {/* Desktop CTA */}
        <a
          href="#/quiz"
          className="hidden md:inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-[13px] font-medium transition-all bg-ink text-bone hover:bg-teal"
        >
          Start matching <IArrow size={14} stroke={2} />
        </a>

        {/* Mobile hamburger */}
        <button
          className="md:hidden text-ink p-1 -mr-1"
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen(!open)}
        >
          {open ? <IClose size={22} /> : <IMenu size={22} />}
        </button>
      </div>

      {/* Mobile drawer */}
      {open && (
        <div className="md:hidden fixed inset-0 top-16 z-30 bg-bone flex flex-col">
          <nav className="flex flex-col px-6 py-8 gap-1 flex-1">
            {NAV.map(n => (
              <a
                key={n.href}
                href={n.href}
                onClick={close}
                className="font-serif text-[28px] tracking-display text-ink py-3 border-b border-sand hover:text-teal transition-colors"
              >
                {n.label}
              </a>
            ))}
          </nav>
          <div className="px-6 pb-10">
            <a
              href="#/quiz"
              onClick={close}
              className="flex items-center justify-center gap-2 w-full rounded-full py-4 text-[16px] font-medium bg-teal text-bone"
            >
              Start matching <IArrow size={16} stroke={2} />
            </a>
          </div>
        </div>
      )}
    </header>
  );
};

/* Footer */
const Footer = () => (
  <footer className="bg-tealdeep text-bone/85 mt-32">
    <div className="max-w-[1400px] mx-auto px-6 md:px-10 pt-16 md:pt-20 pb-10">
      <div className="grid grid-cols-12 gap-8">

        {/* Brand */}
        <div className="col-span-12 md:col-span-5">
          <div className="font-serif text-[36px] md:text-[44px] leading-[0.95] tracking-display text-bone">
            Conceive <span className="italic font-normal">Iberia</span>
          </div>
          <p className="mt-5 max-w-md text-[14px] md:text-[15px] leading-relaxed text-bone/70">
            The unbiased way to find your IVF clinic in Spain. Curated, vetted, and
            free for patients. We make the same commission from every clinic in our
            network — so the recommendation is actually a recommendation.
          </p>
          <div className="mt-7 flex items-center gap-3">
            <a href="#/quiz" className="inline-flex items-center gap-2 rounded-full bg-coral text-ink px-5 py-2.5 text-[14px] font-medium hover:bg-bone transition-colors">
              Start matching <IArrow size={14} stroke={2} />
            </a>
          </div>
        </div>

        {/* Patients links */}
        <div className="col-span-6 md:col-span-2">
          <div className="text-[11px] uppercase tracking-[0.18em] text-bone/50 mb-4">Patients</div>
          <ul className="space-y-2.5 text-[14px]">
            <li><a className="hover:text-bone transition-colors" href="#/">Home</a></li>
            <li><a className="hover:text-bone transition-colors" href="#/quiz">Take the quiz</a></li>
            <li><a className="hover:text-bone transition-colors" href="#/calculator">Cost calculator</a></li>
            <li><a className="hover:text-bone transition-colors" href="#/concierge">Concierge</a></li>
          </ul>
        </div>

        {/* Resources links */}
        <div className="col-span-6 md:col-span-2">
          <div className="text-[11px] uppercase tracking-[0.18em] text-bone/50 mb-4">Resources</div>
          <ul className="space-y-2.5 text-[14px]">
            <li><a className="hover:text-bone transition-colors" href="#/blog">Blog</a></li>
            <li><a className="hover:text-bone transition-colors" href="#/how-it-works">How it works</a></li>
            <li><a className="hover:text-bone transition-colors" href="#/">About</a></li>
            <li><a className="hover:text-bone transition-colors" href="#/">Contact</a></li>
          </ul>
        </div>

        {/* Transparency blurb */}
        <div className="col-span-12 md:col-span-3">
          <div className="text-[11px] uppercase tracking-[0.18em] text-bone/50 mb-4">How we make money</div>
          <p className="text-[13.5px] leading-relaxed text-bone/70">
            We charge clinics a flat, standard commission per matched patient — the same rate across every clinic. No clinic can pay to rank higher. Patients pay nothing.
          </p>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="mt-14 pt-6 border-t border-bone/10 flex flex-col md:flex-row md:items-center md:justify-between gap-3 text-[12px] text-bone/55">
        <div>© 2026 Conceive Iberia. Vetted clinics in Madrid, Barcelona, Valencia, Alicante &amp; Marbella.</div>
        <div className="flex flex-wrap gap-4 md:gap-5">
          <a href="#/" className="hover:text-bone">Privacy</a>
          <a href="#/" className="hover:text-bone">Terms</a>
          <a href="#/" className="hover:text-bone">Cookie preferences</a>
          <a href="#/" className="hover:text-bone">GDPR</a>
        </div>
      </div>
    </div>
  </footer>
);

/* Reusable: section eyebrow */
const Eyebrow = ({ children, dark }) => (
  <div className={`inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.22em] ${dark ? "text-bone/60" : "text-teal/80"}`}>
    <span className={`h-px w-6 ${dark ? "bg-bone/40" : "bg-teal/60"}`} />
    {children}
  </div>
);

/* Primary button */
const Btn = ({ href, children, variant = "primary", className = "", onClick, type }) => {
  const base = "inline-flex items-center gap-2 rounded-full text-[14.5px] font-medium transition-all";
  const styles = {
    primary:   "bg-ink text-bone pl-5 pr-1 py-1 hover:bg-teal",
    coral:     "bg-coral text-ink pl-5 pr-1 py-1 hover:brightness-105",
    teal:      "bg-teal text-bone pl-5 pr-1 py-1 hover:bg-tealdeep",
    bone:      "bg-bone text-ink pl-5 pr-1 py-1 hover:bg-white",
    ghost:     "text-ink underline underline-offset-4 decoration-1 hover:decoration-2 px-1 py-1",
    outline:   "border border-ink/15 text-ink px-5 py-2.5 hover:border-ink/40",
  };
  const trailing = !["ghost", "outline"].includes(variant);
  const arrowBg =
    variant === "coral" ? "bg-ink" :
    variant === "bone"  ? "bg-ink" :
    "bg-bone";
  const arrowFg =
    variant === "coral" ? "text-bone" :
    variant === "bone"  ? "text-bone" :
    "text-ink";
  const inner = (
    <>
      <span className="leading-[1.2]">{children}</span>
      {trailing && (
        <span className={`flex h-9 w-9 items-center justify-center rounded-full ${arrowBg} ${arrowFg} transition-transform`}>
          <IArrow size={14} stroke={2.2} />
        </span>
      )}
    </>
  );
  if (href) return <a href={href} onClick={onClick} className={`${base} ${styles[variant]} ${className}`}>{inner}</a>;
  return <button type={type} onClick={onClick} className={`${base} ${styles[variant]} ${className}`}>{inner}</button>;
};

/* Page wrapper for non-home pages — adds top padding under fixed header */
const PageShell = ({ children, className = "" }) => (
  <div className={`pt-24 ${className}`}>{children}</div>
);

Object.assign(window, { useHashRoute, Header, Footer, Eyebrow, Btn, PageShell, NAV });