import { OutlineLink } from "@/components/outline-button";
import { journey, patreonUrl } from "@/lib/content";

export function ChapterNext({ current }: { current: string }) {
  const i = journey.findIndex((step) => step.href === current);
  const here = i >= 0 ? journey[i] : null;
  const next = i >= 0 && i < journey.length - 1 ? journey[i + 1] : null;
  const first = journey[0];

  if (!next) {
    return (
      <section className="flex flex-col items-start gap-6 bg-bg px-6 py-20 sm:px-12 lg:px-20">
        <p className="font-display text-sm uppercase tracking-wide text-muted">
          {here ? `${here.n}  ·  ${here.label}` : "End of path"}
        </p>
        <h2 className="max-w-3xl font-display text-hero font-semibold uppercase leading-tight">
          Inquire. One pilot. Not five frontiers.
        </h2>
        <div className="flex flex-wrap gap-3">
          <OutlineLink to="/contact">Inquire</OutlineLink>
          <OutlineLink to={patreonUrl}>Donate</OutlineLink>
          <OutlineLink to={first.href}>Return to scale</OutlineLink>
        </div>
      </section>
    );
  }

  return (
    <section className="flex flex-col items-start gap-6 bg-bg px-6 py-20 sm:px-12 lg:px-20">
      <p className="font-display text-sm uppercase tracking-wide text-muted">
        Next  ·  {next.n}  ·  {next.label}
      </p>
      <h2 className="max-w-3xl font-display text-hero font-semibold uppercase leading-tight">
        {next.lede}
      </h2>
      <div className="flex flex-wrap gap-3">
        <OutlineLink to={next.href}>
          {next.n}  {next.label}
        </OutlineLink>
        <OutlineLink to="/contact">Inquire</OutlineLink>
      </div>
    </section>
  );
}