import { createFileRoute } from "@tanstack/react-router";
import { InquiryForm } from "@/components/inquiry-form";
import { founder, patreonUrl, taglines } from "@/lib/content";

export const Route = createFileRoute("/contact")({ component: Contact });

function Contact() {
  return (
    <article>
      <section className="relative flex min-h-[70dvh] items-end overflow-hidden">
        <img
          src="/images/hero-la.jpg"
          alt=""
          className="kenburns absolute inset-0 h-full w-full object-cover"
        />
        <div className="hero-scrim absolute inset-0" />
        <div className="relative z-10 max-w-2xl px-6 pb-20 pt-32 sm:px-12 lg:px-20">
          <p className="font-display text-kicker uppercase tracking-wide">Contact</p>
          <h1 className="mt-2 font-display text-hero font-semibold uppercase leading-tight">
            Hold a Saturday. Send the letter.
          </h1>
          <p className="mt-5 text-body text-fg/90">{taglines.federal}</p>
        </div>
      </section>
      <section id="overview" className="bg-bg px-6 py-20 sm:px-12 lg:px-20">
        <div className="grid gap-16 lg:grid-cols-[1fr_1.2fr]">
          <div>
            <p className="font-display text-xs uppercase tracking-wide text-muted">
              {founder.name} · Los Angeles
            </p>
            {founder.lines.map((line) => (
              <p key={line} className="mt-4 max-w-sm text-sm leading-body text-muted">
                {line}
              </p>
            ))}
            <a
              href={patreonUrl}
              className="mt-8 inline-flex min-h-11 items-center border-2 border-fg px-8 py-3 font-display text-[13px] font-semibold uppercase tracking-btn hover:bg-fg hover:text-bg"
            >
              Donate
            </a>
          </div>
          <InquiryForm />
        </div>
      </section>
    </article>
  );
}