import { Link } from "@tanstack/react-router";
import { ArrowRight, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { ContentPageData } from "@/lib/site-content";
import { getPageImage } from "@/lib/page-images";

export function ContentPageView({ page }: { page: ContentPageData }) {
  const image = getPageImage(page.slug);

  return (
    <>
      <section className="hero-surface border-b border-border">
        <div className="mx-auto max-w-6xl px-5 py-20 md:py-24">
          <p className="font-mono text-xs tracking-[0.2em] text-primary uppercase">{page.eyebrow}</p>
          <h1 className="mt-4 max-w-3xl text-4xl font-bold md:text-5xl">{page.title}</h1>
          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-muted-foreground">
            {page.intro}
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <Button asChild size="lg">
              <Link to={page.cta.to}>{page.cta.label}</Link>
            </Button>
            <Button asChild size="lg" variant="outline">
              <Link to="/">Explore Gatavase</Link>
            </Button>
          </div>
        </div>
      </section>

      {image ? (
        <section className="mx-auto max-w-6xl px-5 pt-12">
          <figure className="panel overflow-hidden">
            <img
              src={image.url}
              alt={image.alt}
              loading="lazy"
              className="h-56 w-full object-cover opacity-90 md:h-80"
            />
          </figure>
        </section>
      ) : null}

      <section className="mx-auto max-w-6xl px-5 py-16">
        <div className="grid gap-6 md:grid-cols-3">
          {page.highlights.map((h) => (
            <article key={h.title} className="panel p-7">
              <h2 className="font-display text-lg font-semibold">{h.title}</h2>
              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{h.body}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="border-y border-border bg-[color-mix(in_oklab,var(--surface)_45%,transparent)]">
        <div className="mx-auto grid max-w-6xl gap-10 px-5 py-16 md:grid-cols-[0.9fr_1.1fr]">
          <div>
            <h2 className="text-2xl font-bold md:text-3xl">What this includes</h2>
            <p className="mt-3 max-w-md text-sm leading-relaxed text-muted-foreground">
              Scope is agreed in writing before work starts, with milestones you can hold us to.
            </p>
          </div>
          <ul className="grid gap-3 sm:grid-cols-2">
            {page.bullets.map((b) => (
              <li key={b} className="flex items-start gap-3 text-sm">
                <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary/15 text-primary">
                  <Check className="size-3" />
                </span>
                <span className="text-muted-foreground">{b}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-5 py-20">
        <div className="panel flex flex-col items-start gap-6 p-10 md:flex-row md:items-center md:justify-between">
          <div>
            <h2 className="text-2xl font-bold">{page.cta.heading}</h2>
            <p className="mt-2 max-w-xl text-sm leading-relaxed text-muted-foreground">
              {page.cta.body}
            </p>
          </div>
          <Button asChild size="lg" className="shrink-0">
            <Link to={page.cta.to}>
              {page.cta.label}
              <ArrowRight className="size-4" />
            </Link>
          </Button>
        </div>
      </section>
    </>
  );
}
