import { Button } from "@/components/ui/button";
import { Reveal } from "@/components/site/reveal";

export function FinalCta({
  title = "What story are you ready to remember?",
  lede = "Wedding? Birthday? Family? Travel? Business? Or something completely different? Let’s create it.",
}: {
  title?: string;
  lede?: string;
}) {
  return (
    <section className="relative overflow-hidden border-t border-line bg-ink py-28">
      <img
        src="/images/virginia-landscape.jpg"
        alt=""
        className="absolute inset-0 h-full w-full object-cover opacity-25"
      />
      <div className="absolute inset-0 bg-ink/70" />
      <Reveal className="relative mx-auto max-w-3xl px-6 text-center">
        <p className="mb-5 text-[0.7rem] uppercase tracking-[0.3em] text-gold">
          FerryLore
        </p>
        <h2 className="font-serif text-4xl sm:text-6xl">{title}</h2>
        <p className="mx-auto mt-6 max-w-xl text-muted">{lede}</p>
        <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <Button to="/book">Create My Story</Button>
          <Button to="/stories" variant="outline">
            View Our Stories
          </Button>
        </div>
        <p className="mt-10 font-serif text-xl italic text-ivory/80">
          Stories Worth Remembering.
        </p>
      </Reveal>
    </section>
  );
}