/* Loops — "ADHD Knowledge Hub" — orientation page, not a conversion page.
   No repeated Get Early Access CTA, no testimonials, no objection handling.
   Each section hands off to its own most relevant link. Calm, evidence-led, UK English.
   Guide/topic destinations that don't exist yet are "#" placeholders (site convention). */

/* ---------------- Page nav ---------------- */

const KH_NAV_LINKS = [
  { label: "Find your guide", href: "#find" },
  { label: "By journey", href: "#journey" },
  { label: "Guides", href: "#guides" },
  { label: "Our approach", href: "#approach" },
  { label: "Blog", href: "/blog/" },
];

const KhNav = () => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && setOpen(false);
    document.body.style.overflow = "hidden";
    document.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = ""; document.removeEventListener("keydown", onKey); };
  }, [open]);

  return (
    <header className="sticky top-0 z-50">
      <div className={`nav-blur transition-colors duration-300 ${scrolled ? "border-b border-line/80" : "border-b border-transparent"}`}>
        <Container className="flex h-[64px] items-center justify-between gap-6">
          <a href="/" aria-label="Loops home" className="focus-ring inline-flex items-center rounded-pill">
            <img src="/assets/loops-logo-beta.png" alt="Loops" className="h-7 w-auto" width="100" height="28" />
          </a>
          <nav aria-label="Primary" className="hidden lg:flex items-center gap-1">
            {KH_NAV_LINKS.map((l) => (
              <a key={l.href} href={l.href}
                className="focus-ring rounded-pill px-3.5 py-2 text-[14px] font-medium text-ink-2 hover:text-ink transition-colors">
                {l.label}
              </a>
            ))}
          </nav>
          <div className="hidden lg:flex items-center gap-2">
            <Button variant="primary" size="sm" href="/#download">Get Early Access</Button>
          </div>
          <button
            type="button"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            className="focus-ring lg:hidden inline-flex h-11 w-11 items-center justify-center rounded-pill border border-line bg-white"
            onClick={() => setOpen((o) => !o)}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              {open
                ? <path d="M6 6l12 12M18 6L6 18" stroke="#1c132d" strokeWidth="2" strokeLinecap="round" />
                : <><path d="M4 8h16" stroke="#1c132d" strokeWidth="2" strokeLinecap="round" /><path d="M4 16h16" stroke="#1c132d" strokeWidth="2" strokeLinecap="round" /></>}
            </svg>
          </button>
        </Container>
      </div>

      <div className={`lg:hidden fixed inset-x-0 top-[64px] z-40 transition-all duration-200 ${open ? "opacity-100 visible" : "hidden opacity-0 invisible pointer-events-none"}`} aria-hidden={!open}>
        <div className="nav-blur border-b border-line">
          <Container className="py-6">
            <nav aria-label="Mobile" className="flex flex-col gap-1">
              {KH_NAV_LINKS.map((l) => (
                <a key={l.href} href={l.href} onClick={() => setOpen(false)}
                  className="focus-ring rounded-tile px-4 py-3.5 text-[16px] font-medium text-ink hover:bg-soft">
                  {l.label}
                </a>
              ))}
            </nav>
            <div className="mt-5 flex flex-col gap-2.5">
              <Button variant="primary" size="md" href="/#download" onClick={() => setOpen(false)}>Get Early Access</Button>
              <Button variant="secondary" size="md" href="/" onClick={() => setOpen(false)}>Back to home</Button>
            </div>
          </Container>
        </div>
      </div>
    </header>
  );
};

/* ---------------- Hero ---------------- */

const KH_HERO_BLOCKS = [
  {
    title: "Plain-English guides",
    body: "No jargon, no gatekeeping. Written to be understood.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/></svg>),
  },
  {
    title: "Evidence-based",
    body: "Every guide is grounded in research, not guesswork.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524z"/><path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0"/></svg>),
  },
  {
    title: "Practical, not just theory",
    body: "Real strategies you can use, not just explanations of why things are hard.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z"/></svg>),
  },
];

const KhHero = () => (
  <section id="top" aria-label="Hero" className="relative overflow-hidden">
    <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
    <Container className="pt-14 lg:pt-20 pb-16 lg:pb-24">
      <div className="mx-auto max-w-3xl text-center">
        <div className="mb-7 flex justify-center fade-in-up">
          <span className="gradient-ring inline-flex items-center bg-white px-4 py-2 shadow-soft">
            <span className="text-[13px] sm:text-[13.5px] font-semibold text-ink">The ADHD Knowledge Hub</span>
          </span>
        </div>

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.04] text-[34px] sm:text-[46px] lg:text-[54px] fade-in-up delay-1">
          ADHD is more than attention
        </h1>

        <p className="mx-auto mt-7 max-w-2xl text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty fade-in-up delay-2">
          It shapes memory, emotions, motivation, planning, relationships and daily life. This hub explains what's actually going on, in plain English, backed by evidence.
        </p>

        <div className="mt-9 flex flex-col items-center gap-3 fade-in-up delay-3">
          <Button variant="primary" size="lg" href="#find">
            Find the guide that matches your experience
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </Button>
          <a href="#journey" className="text-[14.5px] font-medium text-brand-deep hover:underline">Browse by ADHD journey</a>
        </div>
      </div>

      <div className="mx-auto mt-14 lg:mt-16 grid max-w-5xl gap-4 sm:gap-5 sm:grid-cols-3 fade-in-up delay-4">
        {KH_HERO_BLOCKS.map((b) => (
          <div key={b.title} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="flex h-11 w-11 items-center justify-center rounded-tile bg-brand-soft text-brand">
              {b.icon}
            </div>
            <h3 className="mt-5 text-[16.5px] font-semibold tracking-tight2 text-ink">{b.title}</h3>
            <p className="mt-2 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{b.body}</p>
          </div>
        ))}
      </div>

      <p className="mt-8 text-center text-[14px] text-ink-3 fade-in-up delay-4">Built for however far along your ADHD journey you are, whether you're just wondering or years into living with it.</p>
    </Container>
  </section>
);

/* ---------------- Find the guide (12 cards) ---------------- */

const KH_FIND = [
  { title: "I can't seem to start", body: "You know exactly what needs doing. Starting it is another matter entirely.", to: "Task initiation & getting started", href: "/adhd/task-initiation-and-getting-started-with-adhd/" },
  { title: "I forget things the moment they're out of sight", body: "If it's not right in front of you, it's easy to forget it exists at all.", to: "Working memory", href: "/adhd/working-memory-with-adhd/" },
  { title: "I only get moving when it's urgent", body: "Nothing much happens until the deadline is right on top of you.", to: "Motivation & reward", href: "/adhd/motivation-and-reward-with-adhd/" },
  { title: "My emotions feel bigger than everyone else's", body: "Feelings arrive fast, and they arrive big. Then they take a while to settle.", to: "Emotional dysregulation", href: "/adhd/emotional-dysregulation-with-adhd/" },
  { title: "One thing going wrong ruins the whole day", body: "A small setback, and suddenly the whole day feels like a write-off.", to: "All-or-nothing thinking", href: "/adhd/all-or-nothing-thinking-with-adhd/" },
  { title: "I look like I'm coping. I'm not.", body: "From the outside, everything seems fine. Underneath, you're running on empty.", to: "Masking & compensation", href: "/adhd/masking-and-compensation-with-adhd/" },
  { title: "I'm wondering if this is ADHD", body: "A lot of this sounds familiar. You're just not sure yet.", to: "Could this be ADHD?", href: "/adhd/could-this-be-adhd/" },
  { title: "I'm waiting for an assessment", body: "The wait is long, and no one really tells you what to do in the meantime.", to: "Waiting for assessment", href: "/adhd/waiting-for-adhd-assessment/" },
  { title: "I was just diagnosed", body: "You have the diagnosis. Now you're wondering where to actually begin.", to: "Newly diagnosed", href: "/adhd/newly-diagnosed-with-adhd/" },
  { title: "It's affecting my work", body: "Meetings, deadlines, inboxes. It adds up faster than anyone realises.", to: "ADHD at work", href: "/adhd/adhd-at-work/" },
  { title: "It's affecting my relationships", body: "It shows up in the people closest to you too, not just at your desk.", to: "ADHD & relationships", href: "/adhd/adhd-and-relationships/" },
  { title: "I'm burnt out", body: "You've been running on empty for a while now, and it's starting to show.", to: "Understanding burnout", href: "/adhd/understanding-adhd-burnout/" },
];

const KhFind = () => (
  <Section id="find" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Start here</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Find the guide that matches your experience
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need the clinical terms to start. Just recognise yourself in one of these, and we'll take it from there.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {KH_FIND.map((c) => {
          const linked = c.href && c.href !== "#";
          const Tag = linked ? "a" : "div";
          return (
          <Tag key={c.title} {...(linked ? { href: c.href } : {})} className={`${linked ? "group card-hover " : ""}flex flex-col rounded-card border border-line bg-white p-6 shadow-soft`}>
            <h3 className="text-[16.5px] font-semibold tracking-tight2 text-ink leading-snug text-balance">{c.title}</h3>
            <p className="mt-2 flex-1 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{c.body}</p>
            <span className="mt-4 inline-flex items-center gap-1.5 text-[13.5px] font-semibold text-brand-deep">
              {c.to}
              {linked ? <svg className="transition-transform duration-200 group-hover:translate-x-0.5" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg> : null}
            </span>
          </Tag>
          );
        })}
      </div>

      <p className="mt-10 text-center text-[15px] text-ink-2">
        Don't see yourself here yet? <a href="#journey" className="font-semibold text-brand-deep hover:underline">Browse by ADHD journey instead.</a>
      </p>
    </Container>
  </Section>
);

/* ---------------- Browse by journey (5 stages) ---------------- */

const KH_JOURNEY = [
  {
    title: "Recognising ADHD",
    body: "For the questions that come before any diagnosis. Why does all of this feel so familiar?",
    topics: ["Adult symptoms", "Inattentive ADHD", "Working memory", "Masking", "Executive function", "Myths and misconceptions"],
    link: "Explore Recognising ADHD",
    href: "/adhd/recognising-adhd/",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>),
  },
  {
    title: "Assessment, Diagnosis & Getting Help",
    body: "Getting assessed can be slow and confusing. Here's what actually happens, and how to make the wait a little easier.",
    topics: ["ADHD assessments", "NHS pathways", "Right to Choose", "Private diagnosis", "Waiting lists", "Preparing for appointments", "After diagnosis"],
    link: "Explore Assessment & Diagnosis",
    href: "/adhd/assessment-diagnosis-and-getting-help/",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0"/><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/></svg>),
  },
  {
    title: "Treatment & Self-Management",
    body: "Practical ways to manage ADHD day to day, whether or not medication is part of the picture.",
    topics: ["Medication", "Therapy", "Coaching", "Executive function strategies", "Time blindness", "Task initiation", "Organisation", "Routines", "Body doubling", "Sleep", "Tools & planners"],
    link: "Explore Treatment & Self-Management",
    href: "/adhd/treatment-and-self-management/",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z"/></svg>),
  },
  {
    title: "Living With ADHD",
    body: "The everyday reality of an ADHD brain, and how to work with it instead of against it.",
    topics: ["Emotional dysregulation", "Motivation & reward", "All-or-nothing thinking", "Working memory", "Executive function", "Masking", "Rejection sensitive dysphoria", "Burnout", "Relationships", "Parenting", "Self-esteem", "Finances", "Friendships"],
    link: "Explore Living With ADHD",
    href: "/adhd/living-with-adhd/",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/></svg>),
  },
  {
    title: "Complex ADHD & Life Contexts",
    body: "ADHD rarely shows up on its own. This is where the bigger picture lives.",
    topics: ["ADHD in women", "Hormones", "Menopause", "Anxiety", "Depression", "Autism (AuDHD)", "Trauma", "Work adjustments", "University support", "Driving & DVLA", "Older adults"],
    link: "Explore Complex ADHD & Life Contexts",
    href: "/adhd/complex-adhd-and-life-contexts/",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.5.5 0 0 0-.115.118l-.012.025L6.5 4.5v.003l.003.01q.005.015.036.053a.9.9 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.9.9 0 0 0 .271-.194.2.2 0 0 0 .039-.063v-.009l-.012-.025a.5.5 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.921.219.5.346 1.16.346 1.834s-.127 1.334-.346 1.834c-.207.474-.586.921-1.154.921-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 15H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.5.5 0 0 0 .115-.118l.012-.025.001-.006v-.003a.2.2 0 0 0-.039-.064.9.9 0 0 0-.27-.193C8.91 12.1 8.49 12 8 12s-.912.1-1.19.24a.9.9 0 0 0-.271.194.2.2 0 0 0-.039.063v.01l.012.024c.025.05.055.098.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.921C.127 9.079 0 8.419 0 7.745s.127-1.334.346-1.834C.553 5.437.932 4.99 1.5 4.99c.415 0 .733.246.943.52.255.333.48.48.675.48h.238z"/></svg>),
  },
];

const KhJourney = () => (
  <Section id="journey" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The bigger picture</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Browse by ADHD journey
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Everyone arrives at a different point. Find where you are, and start there. You can always come back for the rest later.
        </p>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        {KH_JOURNEY.map((s) => (
          <div key={s.title} className="flex flex-col gap-4 rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft lg:flex-row lg:items-start lg:gap-7">
            <span className="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-tile bg-soft border border-line text-brand">{s.icon}</span>
            <div className="flex-1">
              <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">{s.title}</h3>
              <p className="mt-2 text-[15.5px] leading-[1.6] text-ink-2 text-pretty max-w-prose">{s.body}</p>
              <div className="mt-4 flex flex-wrap gap-2">
                {s.topics.map((t) => (
                  <span key={t} className="rounded-pill bg-soft border border-line px-2.5 py-1 text-[12.5px] font-medium text-ink-2">{t}</span>
                ))}
              </div>
              {s.href ? (
                <a href={s.href} className="focus-ring mt-5 inline-flex items-center gap-1.5 rounded-pill text-[14px] font-semibold text-brand-deep hover:underline">
                  {s.link}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </a>
              ) : (
                <span className="mt-5 inline-flex items-center gap-1.5 text-[14px] font-semibold text-brand-deep">
                  {s.link}
                </span>
              )}
            </div>
          </div>
        ))}
      </div>
    </Container>
  </Section>
);

/* ---------------- Featured guides (6) ---------------- */

const KH_GUIDES = [
  { title: "Time Blindness", summary: "Why deadlines feel sudden even when you saw them coming, and how to make time visible instead of relying on an internal clock.", time: "7 min", depth: "Deeper dive", tags: ["Executive function", "Living with ADHD"], href: "/adhd/time-blindness-with-adhd/", icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z"/><path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5"/></svg>) },
  { title: "Hyperfocus", summary: "The real cost and benefit of deep, absorbed focus, and how to get the benefit without the crash that follows.", time: "8 min", depth: "Deeper dive", tags: ["Focus", "Living with ADHD"], href: "/adhd/hyperfocus-with-adhd/", icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8"/><path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/></svg>) },
  { title: "Rejection Sensitive Dysphoria", summary: "Why criticism and rejection can land so hard, what the evidence actually says, and what tends to help.", time: "8 min", depth: "Deeper dive", tags: ["Emotions", "Living with ADHD"], href: "/adhd/rejection-sensitive-dysphoria-with-adhd/", icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/></svg>) },
  { title: "The Shame Spiral", summary: "Why every restart feels heavier than the last attempt, and how to make coming back lighter.", time: "7 min", depth: "Deeper dive", tags: ["Emotions", "Foundations"], href: "/adhd/shame-spiral-with-adhd/", icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/><path fillRule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/></svg>) },
  { title: "Body Doubling", summary: "Why another person's presence makes starting easier, and how to get it without arranging a favour each time.", time: "6 min", depth: "Quick read", tags: ["Task initiation"], href: "/adhd/body-doubling-with-adhd/", icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/><path fillRule="evenodd" d="M5.216 14A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1z"/><path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/></svg>) },
  { title: "Find Help Now", summary: "If things feel like too much, you're not alone. Crisis lines and specialist support you can reach today, whatever you're facing.", time: "3 min", depth: "Support", tags: ["Wellbeing", "Support"], href: "/support/find-help/", icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="m8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8m0 1a6.97 6.97 0 0 1 4.192 1.39l-2.473 2.473a3.5 3.5 0 0 0-3.438 0L3.808 2.39A6.97 6.97 0 0 1 8 1M2.39 3.808l2.473 2.473a3.5 3.5 0 0 0 0 3.438L2.39 12.192A6.97 6.97 0 0 1 1 8c0-1.563.512-3.007 1.39-4.192M8 15a6.97 6.97 0 0 1-4.192-1.39l2.473-2.473a3.5 3.5 0 0 0 3.438 0l2.473 2.473A6.97 6.97 0 0 1 8 15m5.61-2.808-2.473-2.473a3.5 3.5 0 0 0 0-3.438l2.473-2.473A6.97 6.97 0 0 1 15 8a6.97 6.97 0 0 1-1.39 4.192M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5"/></svg>) },
];

const KhGuides = () => (
  <Section id="guides" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Our core guides</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Start with our most-read guides
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the guides people come back to most. Written to be read once and returned to whenever you need them.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {KH_GUIDES.map((g) => (
          <a key={g.title} href={g.href} className="group focus-ring flex flex-col rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft transition-shadow hover:shadow-lift">
            <div className="flex h-11 w-11 items-center justify-center rounded-tile bg-brand-soft text-brand">{g.icon}</div>
            <h3 className="mt-5 text-[18px] font-semibold tracking-tight2 text-ink leading-snug group-hover:text-brand-deep transition-colors">{g.title}</h3>
            <p className="mt-2 flex-1 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{g.summary}</p>
            <div className="mt-4 flex items-center gap-2 text-[12.5px] text-ink-3">
              <span className="font-semibold text-ink-2 tnum">{g.time}</span>
              <span aria-hidden="true">·</span>
              <span>{g.depth}</span>
            </div>
            <div className="mt-3 flex flex-wrap gap-2">
              {g.tags.map((t) => (
                <span key={t} className="rounded-pill bg-soft border border-line px-2.5 py-0.5 text-[11.5px] font-medium text-ink-2">{t}</span>
              ))}
            </div>
            <span className="mt-5 inline-flex items-center gap-1.5 text-[14px] font-semibold text-brand-deep">
              Explore {g.title}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </span>
          </a>
        ))}
      </div>

      <p className="mt-10 text-center text-[15px] text-ink-2">
        <a href="#" className="font-semibold text-brand-deep hover:underline">See every guide in the full library.</a>
      </p>
    </Container>
  </Section>
);

/* ---------------- How we approach ADHD ---------------- */

const KH_APPROACH = [
  "ADHD looks different in every person who has it. Some experiences overlap. Some won't apply to you at all, and that's fine.",
  "We don't treat ADHD traits as flaws to fix. They're differences in how your brain works, not character failures.",
  "Understanding yourself comes before trying to change yourself. Strategies matter, but they come second.",
  "Every guide here is grounded in evidence, checked for accuracy, and written by people who take getting it right seriously.",
];

const KhApproach = () => (
  <Section id="approach" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Our approach</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          How we approach ADHD
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          {KH_APPROACH.map((p, i) => <p key={i}>{p}</p>)}
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Closing ---------------- */

const KhClosing = () => (
  <Section id="closing" className="bg-soft">
    <Container>
      <div className="relative overflow-hidden rounded-card border border-line bg-white p-8 sm:p-12 lg:p-16 shadow-card text-center">
        <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-0 soft-halo"></div>
        <div className="relative z-10 mx-auto max-w-2xl">
          <div className="flex justify-center"><Kicker>When you're ready for more</Kicker></div>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight3 text-[30px] sm:text-[40px] lg:text-[48px] leading-[1.1]">
            Still haven't found what you're looking for?
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Download the app and chat with our ADHD coach. Get personalised guidance, ask questions, and find the support that's right for you.
          </p>
          <div className="mt-8 flex flex-col items-center gap-3">
            <Button variant="primary" size="lg" href="/#download">
              Get Early Access
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </Button>
            <span className="text-[13.5px] text-ink-3">7-day free trial. No complicated setup.</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- App ---------------- */

function KhApp() {
  return (
    <main id="main">
      <KhNav />
      <KhHero />
      <KhFind />
      <KhJourney />
      <KhGuides />
      <KhApproach />
      <KhClosing />
      <Footer />
    </main>
  );
}

const khRoot = ReactDOM.createRoot(document.getElementById("root"));
khRoot.render(<KhApp />);