import { Phone, Mail, MapPin, Clock } from "lucide-react";
import { LeadForm } from "./lead-form";
import { SectionHeader } from "@/components/landing/section-header";
import { formatPhoneForTel } from "@/lib/utils";
import type { Service } from "@prisma/client";
import type { SiteSettings } from "@prisma/client";

interface ContactSectionProps {
  services: Service[];
  settings: SiteSettings;
}

export function ContactSection({ services, settings }: ContactSectionProps) {
  return (
    <section id="contact-form" className="section-loose">
      <div className="content-wrap">
        <SectionHeader
          eyebrow="Contact"
          title="Get your free quote"
          description="Tell us what you need — we typically respond within 30 minutes during business hours."
          align="center"
          className="mx-auto text-center"
        />

        <div className="grid lg:grid-cols-[0.9fr_1.1fr] gap-10 lg:gap-14 items-start max-w-[960px] mx-auto">
          <aside className="space-y-8 order-2 lg:order-1">
            <div>
              <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground mb-4">
                Prefer to talk now?
              </p>
              <a
                href={`tel:${formatPhoneForTel(settings.phone)}`}
                className="font-heading text-3xl text-foreground hover:text-accent transition-colors block"
                data-track="contact-phone"
              >
                {settings.phone}
              </a>
            </div>

            <ul className="space-y-5 text-sm">
              <li className="flex gap-3 text-muted-foreground">
                <Clock className="h-5 w-5 text-accent shrink-0 mt-0.5" />
                <span>Available 24/7 for emergency call-outs</span>
              </li>
              <li className="flex gap-3 text-muted-foreground">
                <Mail className="h-5 w-5 text-accent shrink-0 mt-0.5" />
                <a href={`mailto:${settings.email}`} className="hover:text-foreground transition-colors">
                  {settings.email}
                </a>
              </li>
              <li className="flex gap-3 text-muted-foreground">
                <MapPin className="h-5 w-5 text-accent shrink-0 mt-0.5" />
                <span>{settings.address}</span>
              </li>
            </ul>

            <a
              href={`tel:${formatPhoneForTel(settings.phone)}`}
              className="inline-flex items-center gap-2 text-sm font-medium text-accent hover:underline lg:hidden"
            >
              <Phone className="h-4 w-4" />
              Tap to call now
            </a>
          </aside>

          <div className="surface-elevated p-6 md:p-8 order-1 lg:order-2">
            <LeadForm services={services} />
          </div>
        </div>
      </div>
    </section>
  );
}