import * as React from "react";
import { Reveal } from "@/src/components/Reveal";
import { EmailLink } from "@/src/components/EmailLink";
import { BitAura } from "@/src/components/bits/BitAura";
import { BitSeam } from "@/src/components/bits/BitSeam";
import type { Content } from "@/src/content/types";
import { BitHeadline } from "./BitHeadline";
import { ContactComposer } from "./ContactComposer";

/** ClosingCta: the contact section. One address and a message starter, no form to submit. */
export const ClosingCta: React.FC<{ contact: Content["contact"] }> = ({
  contact,
}) => (
  <section
    id="contact"
    data-chapter="contact"
    data-glow
    className="relative overflow-clip border-t border-slate-200 bg-slate-900 text-white"
  >
    <div
      className="pointer-events-none absolute inset-0 opacity-70"
      style={{
        backgroundImage: "radial-gradient(#1e293b 1px, transparent 1px)",
        backgroundSize: "20px 20px",
      }}
      aria-hidden="true"
    />
    <div className="bit-glow bit-glow-dots" aria-hidden="true" />
    <BitSeam />
    <div className="relative mx-auto grid w-full max-w-[1400px] grid-cols-1 gap-12 px-5 py-16 md:px-12 md:py-40 lg:grid-cols-12 lg:items-center lg:gap-12">
      <Reveal className="lg:col-span-6">
        <BitHeadline
          as="h2"
          invert
          lines={contact.headline}
          className="font-sans text-[19vw] font-black leading-[0.86] tracking-tighter md:text-[13vw] lg:text-[8.5vw] xl:text-[9.5rem]"
        />
        <p className="m-0 mt-10 max-w-xl font-sans text-xl leading-snug text-slate-300 md:text-3xl">
          {contact.lead}
        </p>
        <div className="mt-8">
          <EmailLink className="bit-mail font-sans text-3xl font-bold tracking-tight no-underline md:text-5xl" />
        </div>
      </Reveal>
      <Reveal delay={0.15} className="lg:col-span-6">
        <BitAura source="around" tone="dark">
          <ContactComposer />
        </BitAura>
      </Reveal>
    </div>
  </section>
);