"use client"

import Link from "next/link"
import { MapPin, Phone, Wrench } from "lucide-react"
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="Need Something Else?"
          title="Need help with repairs, moving, manuals, or machine sales?"
          description="Tell us what you need and we&apos;ll route your request to the right person."
        />

        <div className="grid gap-6 lg:grid-cols-[1.05fr_0.95fr] lg:items-start">
          <PublicSurface className="p-6 md:p-8">
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
              Talk to Our Team
            </p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
              Share a few details and we&apos;ll help you take the next step.
            </h2>
            <p className="mt-3 text-base leading-relaxed text-muted-foreground">
              Whether you need repairs, moving help, manuals, or machine sales,
              we&apos;ll make sure your message gets to the right person.
            </p>

            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
              <Link
                href="/contact-us#contact-form"
                className="inline-flex min-h-11 items-center justify-center rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground transition hover:bg-primary/90"
              >
                Talk to Our Team
              </Link>
              <a
                href={businessConfig.publicCallUrl}
                className="inline-flex min-h-11 items-center justify-center rounded-full border border-border bg-white px-5 text-sm font-medium text-foreground transition hover:border-primary/40 hover:text-primary"
              >
                Call Instead
              </a>
            </div>
          </PublicSurface>

          <div className="space-y-5">
            <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 shrink-0">
                <Phone className="h-6 w-6" />
              </div>
              <div>
                <div className="font-semibold text-foreground">
                  Call or Text Us
                </div>
                <a
                  href={businessConfig.publicCallUrl}
                  className="mt-1 block text-muted-foreground transition hover:text-foreground"
                >
                  {businessConfig.publicCallNumber}
                </a>
                <p className="mt-1 text-xs text-muted-foreground">
                  Mon-Fri: 8:00 AM - 5:00 PM
                </p>
              </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 shrink-0">
                <Wrench className="h-6 w-6" />
              </div>
              <div>
                <div className="font-semibold text-foreground">
                  For Repairs or Moving
                </div>
                <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                  Include the machine model and a clear text description. You
                  can also text photos or videos to{" "}
                  <a
                    href={businessConfig.publicSmsUrl}
                    className="font-medium text-foreground underline decoration-primary/35 underline-offset-4 hover:decoration-primary"
                  >
                    {businessConfig.publicSmsNumber}
                  </a>
                  .
                </p>
              </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 shrink-0">
                <MapPin className="h-6 w-6" />
              </div>
              <div>
                <div className="font-semibold text-foreground">
                  Service Areas
                </div>
                <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                  Davis, Salt Lake, and Utah Counties, plus nearby locations
                  already listed on our service areas page.
                </p>
              </div>
            </PublicInset>
          </div>
        </div>
      </div>
    </section>
  )
}