"use client"

import { ArrowRight, Package } from "lucide-react"
import Link from "next/link"
import { PublicInset, PublicSurface } from "@/components/public-surface"
import { RequestMachineForm } from "@/components/forms/request-machine-form"
import { businessConfig } from "@/lib/seo-config"

export function RequestMachineSection() {
  return (
    <section id="request-machine" className="bg-background py-16 md:py-24">
      <div className="container mx-auto px-4">
        <div className="grid gap-8 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:items-start">
          <PublicSurface className="p-6 md:p-8 lg:sticky lg:top-28">
            <div className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-primary">
              <Package className="h-4 w-4" />
              Free Placement
            </div>
            <h2 className="mt-4 text-3xl font-bold tracking-tight text-balance md:text-4xl">
              Tell us about your location and we'll recommend the right machine
              mix.
            </h2>
            <p className="mt-4 text-base leading-relaxed text-muted-foreground">
              This form is for business locations that want free vending
              placement. We&apos;ll look at foot traffic, machine preferences,
              and the best fit for your space before we schedule the next step.
            </p>

            <PublicInset className="mt-6 space-y-3 p-5 text-sm text-muted-foreground">
              <p className="font-medium text-foreground">What to expect</p>
              <ul className="space-y-2">
                <li>
                  We confirm the location type and approximate number of people
                  on site.
                </li>
                <li>
                  We review the best mix of snack, beverage, combo, or micro
                  market options.
                </li>
                <li>
                  We follow up within one business day to schedule the
                  consultation.
                </li>
              </ul>
            </PublicInset>

            <div className="mt-6 flex flex-wrap gap-3">
              <a
                href={businessConfig.publicCallUrl}
                className="inline-flex min-h-11 items-center justify-center rounded-full border border-border bg-white px-4 text-sm font-medium text-foreground transition hover:border-primary/40 hover:text-primary"
              >
                Call Instead
              </a>
              <Link
                href="/contact-us#contact-form"
                className="inline-flex min-h-11 items-center gap-2 rounded-full text-sm font-medium text-foreground transition hover:text-primary"
              >
                Need repairs or moving?
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
          </PublicSurface>

          <PublicSurface className="p-5 md:p-7">
            <RequestMachineForm
              onSubmit={(data) =>
                console.log("Machine request form submitted:", data)
              }
            />
          </PublicSurface>
        </div>
      </div>
    </section>
  )
}
