/* Loops Blog — index / landing page.
   Data-driven: add new entries to BLOG_POSTS (newest first) and the page grows.
   The first entry renders as the featured "Latest" post; the rest fill the grid.
   UK English, no em dashes. */

const BI_LINK = "text-brand-deep font-semibold hover:underline";

const BLOG_POSTS = [
  {
    href: "/blog/easier-to-talk-to-chatgpt-than-a-therapist/",
    category: "AI and ADHD",
    title: "I find it easier to talk to ChatGPT than I ever found it to talk to a therapist.",
    dek: "A chatbot beat the professionals on openness. Why that is, why CBT never landed for me, and the half of the data that should worry all of us.",
    read: "7 min read",
  },
  {
    href: "/blog/doing-my-tax-return-with-adhd/",
    category: "Money and admin",
    title: "Doing my tax return with ADHD, and why I still haven't paid it.",
    dek: "It's July, the money is ready, and the payment still isn't sent, because I've forgotten my Government Gateway password again. Why the wall always lands at the very last step.",
    read: "7 min read",
  },
  {
    href: "/blog/getting-fit-means-not-stopping-not-starting/",
    category: "Get fit",
    title: "Getting fit with ADHD means not stopping, not starting.",
    dek: "Starting a fitness habit was never the hard part. Not stopping is. Why continuity breaks for ADHD brains, and how to make coming back easier than starting over.",
    read: "8 min read",
  },
  {
    href: "/blog/becoming-a-leader-means-running-the-system/",
    category: "Become a leader",
    title: "Becoming a leader with ADHD means running the system, not just doing the work.",
    dek: "You aren't failing at leadership. You're failing at the invisible machine it runs on. Why the maintenance work breaks ADHD leaders, and how to make it visible.",
    read: "9 min read",
  },
  {
    href: "/blog/building-a-side-project-means-finishing-not-starting/",
    category: "Build a side project",
    title: "Building a side project with ADHD means finishing, not starting.",
    dek: "You're not short of side projects. You're short of finished ones. Why finishing is a completely different job from starting, and how to design around it.",
    read: "8 min read",
  },
  {
    href: "/blog/starting-a-business-means-surviving-the-boring-middle/",
    category: "Starting a business",
    title: "Starting a business with ADHD means surviving the boring middle.",
    dek: "The start plays to every strength an ADHD brain has. The middle attacks every weakness. Why founding is easy and finishing is hard, and what actually helps.",
    read: "8 min read",
  },
  {
    href: "/blog/finding-a-new-job-means-building-a-search-you-can-restart/",
    category: "Finding a new job",
    title: "Finding a new job with ADHD means building a search you can restart.",
    dek: "A job search doesn't fail because you gave up. It fails because it stalled and never restarted. Why that hits ADHD brains hardest, and how to build a way back in.",
    read: "7 min read",
  },
  {
    href: "/blog/getting-a-promotion-means-building-a-record-of-your-work/",
    category: "Getting promoted",
    title: "Getting a promotion with ADHD means building a record of your work.",
    dek: "You don't get promoted for the work. You get promoted for the record of the work. Why that gap is widest for ADHD brains, and how to close it.",
    read: "6 min read",
  },
];

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

const BI_NAV_LINKS = [
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "For ADHD", href: "/adhd/#directory" },
];

const BiNav = () => {
  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">
            {BI_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">
              {BI_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="/adhd/knowledge-hub/" onClick={() => setOpen(false)}>ADHD Knowledge Hub</Button>
            </div>
          </Container>
        </div>
      </div>
    </header>
  );
};

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

const BiHero = () => (
  <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-8 lg:pb-10">
      <div className="max-w-3xl">
        <Kicker>Loops Blog</Kicker>
        <h1 className="mt-5 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[34px] sm:text-[46px] lg:text-[54px]">
          Notes on ADHD, work, and building things that last.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          Honest, research-backed writing on how ADHD brains actually work, and how to design around the parts that get hard. Written by the people building Loops.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Featured (latest) post ---------------- */

const BiFeatured = ({ post }) => (
  <Section id="latest" className="bg-base">
    <Container>
      <a href={post.href} className="group block focus-ring rounded-card">
        <article className="relative overflow-hidden rounded-card border border-line bg-white p-8 sm:p-10 lg:p-12 shadow-card transition-shadow duration-200 group-hover:shadow-lift">
          <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-0 soft-halo"></div>
          <div className="relative z-10 max-w-3xl">
            <div className="flex flex-wrap items-center gap-3">
              <span className="inline-flex items-center rounded-pill bg-brand px-3 py-1 text-[11px] font-bold uppercase tracking-[0.12em] text-white shadow-cta">Latest</span>
              <span className="inline-flex items-center rounded-pill bg-brand-soft px-3 py-1 text-[11.5px] font-semibold text-brand-deep">{post.category}</span>
              <span className="text-[13px] text-ink-3">{post.read}</span>
            </div>
            <h2 className="mt-6 text-balance text-ink font-semibold tracking-tight2 text-[26px] sm:text-[34px] lg:text-[40px] leading-[1.12] group-hover:text-brand-deep transition-colors">
              {post.title}
            </h2>
            <p className="mt-5 text-[16.5px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">{post.dek}</p>
            <div className="mt-7 flex items-center justify-between gap-4">
              <div className="flex items-center gap-3">
                <img src="/uploads/matt-humphreys.jpg" alt="Matt Humphreys" width="40" height="40" className="h-10 w-10 rounded-pill object-cover shadow-soft" />
                <div className="leading-tight">
                  <div className="text-[14px] font-semibold text-ink">Matt Humphreys</div>
                  <div className="text-[12.5px] text-ink-3">Loops</div>
                </div>
              </div>
              <span className="inline-flex items-center gap-1.5 text-[14px] font-semibold text-brand-deep">
                Read post
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="transition-transform duration-200 group-hover:translate-x-0.5"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </span>
            </div>
          </div>
        </article>
      </a>
    </Container>
  </Section>
);

/* ---------------- Post grid ---------------- */

const BiPostCard = ({ post }) => (
  <a href={post.href} className="group flex focus-ring rounded-card">
    <article className="flex h-full flex-col rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft transition-shadow duration-200 group-hover:shadow-lift">
      <div className="flex flex-wrap items-center gap-2.5">
        <span className="inline-flex items-center rounded-pill bg-brand-soft px-2.5 py-1 text-[11px] font-semibold text-brand-deep">{post.category}</span>
        <span className="text-[12.5px] text-ink-3">{post.read}</span>
      </div>
      <h3 className="mt-4 text-[19px] sm:text-[21px] font-semibold tracking-tight2 text-ink leading-snug group-hover:text-brand-deep transition-colors text-pretty">
        {post.title}
      </h3>
      <p className="mt-3 flex-1 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{post.dek}</p>
      <div className="mt-6 flex items-center justify-between gap-4 border-t border-line pt-5">
        <div className="flex items-center gap-2.5">
          <img src="/uploads/matt-humphreys.jpg" alt="Matt Humphreys" width="32" height="32" className="h-8 w-8 rounded-pill object-cover shadow-soft" />
          <span className="text-[13px] font-medium text-ink">Matt Humphreys</span>
        </div>
        <span className="inline-flex items-center gap-1.5 text-[13px] font-semibold text-brand-deep">
          Read
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="transition-transform duration-200 group-hover:translate-x-0.5"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </span>
      </div>
    </article>
  </a>
);

const BiPostGrid = ({ posts }) => {
  if (!posts.length) return null;
  return (
    <Section id="all-posts" className="bg-soft">
      <Container>
        <div className="max-w-prose">
          <Kicker>More posts</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[26px] sm:text-[32px] lg:text-[36px] leading-[1.12]">
            Everything else we've written.
          </h2>
        </div>
        <div className="mt-10 grid gap-4 sm:gap-5 md:grid-cols-2 lg:grid-cols-3 items-stretch">
          {posts.map((p) => <BiPostCard key={p.href} post={p} />)}
        </div>
      </Container>
    </Section>
  );
};

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

function BiApp() {
  const [featured, ...rest] = BLOG_POSTS;
  return (
    <main id="main">
      <BiNav />
      <BiHero />
      {featured ? <BiFeatured post={featured} /> : null}
      <BiPostGrid posts={rest} />
      <Footer />
    </main>
  );
}

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