import { Section } from "../ui/Section";
import { SectionHeading } from "../ui/SectionHeading";
import { ButtonLink } from "../ui/ButtonLink";
import { Reveal } from "../ui/Reveal";
import { Newsletter } from "../forms/Newsletter";
import { PostFeature } from "../devblog/PostFeature";
import type { DevblogPost } from "@/lib/devblog";

type Props = {
  /** The single most recent post, or null while the devblog is empty. */
  latest: DevblogPost | null;
};

/**
 * The last band before the footer, and the only conversion point on the page.
 *
 * It replaces the old "follow the journey" block, which framed a full section
 * — eyebrow, display title, lead, button — around a list that currently holds
 * one entry, and so read as an empty section. Here the latest post is a single
 * deliberate panel next to the newsletter form: it looks intentional with one
 * post, and stays correct once there are twenty.
 */
export function Dispatch({ latest }: Props) {
  return (
    <div className="relative isolate overflow-hidden border-t border-border">
      <div
        aria-hidden
        className="absolute inset-x-0 top-0 -z-10 h-[60%] bg-[radial-gradient(70%_100%_at_50%_0%,rgba(196,184,150,0.09),transparent_70%)]"
      />

      <Section>
        <Reveal>
          <SectionHeading
            eyebrow="DEVBLOG"
            title="BUILT IN THE OPEN"
            lead="Design decisions, milestones and the occasional mistake, written down as they happen."
            action={
              <ButtonLink href="/devblog" variant="outline">
                ALL POSTS
              </ButtonLink>
            }
          />
        </Reveal>

        <Reveal delay={0.1}>
          <div className="mt-12 grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
            {latest && <PostFeature post={latest} />}

            <div
              className={`flex flex-col justify-center rounded-2xl border border-border bg-surface p-8 lg:p-10 ${
                latest ? "" : "lg:col-span-2"
              }`}
            >
              <h3 className="font-display text-2xl tracking-wider sm:text-3xl">
                GET IT BY EMAIL
              </h3>
              <p className="mt-4 leading-relaxed text-foreground-muted">
                One mail per major update. No launch countdowns, no noise, just
                the build as it happens.
              </p>
              <div className="mt-8">
                <Newsletter variant="compact" />
              </div>
            </div>
          </div>
        </Reveal>
      </Section>
    </div>
  );
}