"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="Repairs, moving, manuals, and sales questions all funnel through one clean contact path."
          description="Instead of repeating the full intake form on every page, we keep the detailed service request on the dedicated contact page and use this section as the quick handoff."
        />

        <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">Best Next Step</p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
              Use the dedicated contact page for service details.
            </h2>
            <p className="mt-3 text-base leading-relaxed text-muted-foreground">
              That page keeps the full Rocky intake for repairs, moving, manuals, machine sales, and anything that
              needs more context. It stays off the rest of the site so these pages can stay lighter and more consistent.
            </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"
              >
                Open Contact Form
              </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 the surrounding Rocky Mountain Vending service footprint already listed on the site.</p>
              </div>
            </PublicInset>
          </div>
        </div>
      </div>
    </section>
  )
}