import { CONTACT_PHONE } from '@/content/form';
import { site } from '@/content/site';
import { LEAD_SECTION_ID } from '@/lib/leadPrefill';
import { LeadForm } from '../LeadForm';

export function LeadSection() {
  const { lead, delivery } = site;
  return (
    <section id={LEAD_SECTION_ID} aria-labelledby="lead-title" className="page-x section-y scroll-mt-4">
      <div className="container-page grid gap-10 lg:grid-cols-12 lg:gap-6">
        <div className="lg:col-span-5">
          <h2 id="lead-title" className="text-headline font-extrabold">
            {lead.title}
          </h2>
          <p className="mt-4 max-w-[36ch] text-lead">{lead.subtitle}</p>
          <p className="mt-8">
            {lead.call}{' '}
            <a href={CONTACT_PHONE.href} className="mono inline-flex min-h-11 items-center text-[18px] font-semibold whitespace-nowrap lg:text-[22px]">
              {CONTACT_PHONE.display}
            </a>
          </p>
          <dl className="mt-4 hidden max-w-[320px] lg:block">
            {delivery.pickup.hours.map((row) => (
              <div key={row.days} className="flex items-baseline justify-between gap-4 border-t border-ink py-2">
                <dt className="tag text-muted">{row.days}</dt>
                <dd className="mono text-ui font-medium">{row.time}</dd>
              </div>
            ))}
          </dl>
        </div>
        <div className="lg:col-span-7">
          <LeadForm />
        </div>
      </div>
    </section>
  );
}