import type { Metadata } from 'next'
import { ContactForm } from '@/components/contact-form'
import { PageIntro, Shell } from '@/components/site'
import { djangoUrl, getSiteContent } from '@/lib/site-content'

export const metadata: Metadata = { title: 'Contact | RG Fish Farming' }

export default async function Contact() {
  const content = await getSiteContent()
  const page = content.pages.contact ?? {}
  const value = (key: string) => page[key]?.value ?? ''
  return <Shell settings={content.settings}>
    <PageIntro eyebrow="Contact" title="Contact RG Fish Farming" text="Fingerlings · Training · Partnerships" />
    <section className="bg-gradient-to-b from-[var(--paper)] to-[var(--mist)]">
      <div className="mx-auto grid max-w-7xl gap-12 px-5 py-20 lg:grid-cols-[.75fr_1.25fr] lg:px-8 lg:py-28">
        <div>
          <p className="eyebrow">Contact RG</p>
          <h2 className="mt-5 max-w-lg font-display text-5xl leading-none tracking-tight text-[var(--navy)] sm:text-6xl">{value('title')}</h2>
          <div className="mt-10 grid gap-4">
            {content.settings.email && <a href={`mailto:${content.settings.email}`} className="rounded-2xl border border-[var(--line)] bg-white p-5 transition duration-300 hover:-translate-y-1 hover:border-[var(--teal)] hover:shadow-lg"><span className="eyebrow">Email</span><span className="mt-2 block font-display text-xl text-[var(--navy)]">{content.settings.email}</span></a>}
            <div className="rounded-2xl border border-[var(--line)] bg-white p-5"><span className="eyebrow">Services</span><span className="mt-2 block font-display text-xl text-[var(--navy)]">{value('services')}</span></div>
            <div className="rounded-2xl border border-[var(--line)] bg-white p-5"><span className="eyebrow">Location</span><span className="mt-2 block font-display text-xl text-[var(--navy)]">{value('location') || content.settings.address}</span></div>
          </div>
        </div>
        <ContactForm action={content.settings.links.contactRequest || djangoUrl('/requests/contact/')} />
      </div>
    </section>
  </Shell>
}