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