// PathwayStrip — overlapping "Choose your pathway" card.
// Lifts over the hero/next-section boundary like kidlink.net.au booking strip.

function PathwayStrip() {
  const { go } = useRoute();
  const paths = [
    { id: "parents",       label: "Parents/Caregivers" },
    { id: "clinicians",    label: "OTs/Clinicians" },
    { id: "educators",     label: "Educators" },
    { id: "organisations", label: "Organisations" },
  ];

  return (
    <div style={{ position: "relative", padding: "0 5%", zIndex: 3, display: "flex", justifyContent: "center" }}>
      <div
        className="kl-pathway-card"
        style={{
          display: "inline-grid",
          gap: 32,
          alignItems: "center",
          margin: "-68px auto -86px",
          padding: "24px 30px",
          border: "1px solid rgba(107,28,105,0.08)",
          borderRadius: 28,
          color: "var(--kl-ink)",
          background: "var(--kl-white)",
          boxShadow: "0 18px 48px rgba(107,28,105,0.10), 0 4px 12px rgba(107,28,105,0.05)",
        }}
      >
        <div>
          <h2 style={{ margin: 0, fontSize: "clamp(1.35rem, 2.2vw, 1.95rem)", lineHeight: 1.1, color: "var(--kl-plum)" }}>
            Start Here:
          </h2>
          <p style={{ margin: "6px 0 0", color: "var(--kl-muted)", fontSize: "0.95rem" }}>
            Pick the pathway that fits you.
          </p>
        </div>
        <div
          className="kl-pathway-pills"
          style={{
            display: "grid",
            gap: 5,
            padding: 4,
            borderRadius: 14,
            background: "var(--kl-surface)",
          }}
        >
          {paths.map((p) => (
            <a
              key={p.id}
              href="#"
              onClick={(e) => { e.preventDefault(); go(p.id); }}
              className="kl-pathway-pill"
            >
              {p.label}
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

window.PathwayStrip = PathwayStrip;