"use client"

import { Phone, MapPin } from "lucide-react"
import { ContactForm } from "@/components/forms/contact-form"
import { PublicInset, PublicPageHeader, PublicSurface } from "@/components/public-surface"
import { businessConfig } from "@/lib/seo-config"

export function ContactSection() {

  return (
    <section id="contact" className="py-20 md:py-28 bg-muted/30">
      <div className="container mx-auto px-4">
        <PublicPageHeader
          className="mb-10 max-w-3xl"
          eyebrow="Detailed Questions"
          title="Need something more specific? We can sort that out here."
          description="If you already handled the quick placement request, use this longer form for service details, sales questions, or anything that needs more context."
        />

        <div className="grid gap-12 lg:grid-cols-2 items-start">
          <PublicSurface className="space-y-6">
            <div className="space-y-6">
              <PublicInset className="flex items-start gap-4 p-5">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary flex-shrink-0">
                  <Phone className="h-6 w-6" />
                </div>
                <div>
                  <div className="font-semibold mb-1 text-foreground">Call or Text Us</div>
                  <a href={businessConfig.publicCallUrl} className="text-muted-foreground hover:text-foreground transition-colors">
                    {businessConfig.publicCallNumber}
                  </a>
                  <p className="text-xs text-muted-foreground mt-1">Mon-Fri: 8:00 AM - 5:00 PM</p>
                  <a href={businessConfig.publicSmsUrl} className="text-xs hover:underline mt-2 block">
                    Or send a text message
                  </a>
                </div>
              </PublicInset>

              <PublicInset className="flex items-start gap-4 p-5">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary flex-shrink-0">
                  <MapPin className="h-6 w-6" />
                </div>
                <div>
                  <div className="font-semibold mb-1 text-foreground">Service Areas</div>
                  <p className="text-muted-foreground">Davis, Salt Lake & Utah Counties</p>
                  <p className="text-xs text-muted-foreground mt-1">Serving 20+ cities across Utah</p>
                </div>
              </PublicInset>
            </div>
          </PublicSurface>

          <PublicSurface className="p-5 md:p-7">
            <div className="mb-4">
              <h3 className="text-xl font-semibold mb-2">Contact Form</h3>
              <p className="text-sm text-muted-foreground">
                Tell us more about your needs and we'll get back to you within 24 hours.
              </p>
            </div>
            <div className="min-h-[738px]">
              <ContactForm onSubmit={(data) => console.log('Contact form submitted:', data)} />
            </div>
          </PublicSurface>
        </div>
      </div>
    </section>
  )
}