"use client"

import { ReactNode } from "react"
import { CheckCircle2 } from "lucide-react"
import { DropdownPageShell } from "@/components/dropdown-page-shell"
import { PublicInset } from "@/components/public-surface"

interface WhoWeServePageProps {
  title: string
  content: ReactNode
  description?: string
}

const reasons = [
  {
    title: "Placement for Qualifying Locations",
    body: "If your location qualifies, we can place and service machines without pushing daily management onto your staff.",
  },
  {
    title: "Regular Maintenance",
    body: "We handle stocking, cleaning, and routine service so your team can stay focused on the work your location is there to do.",
  },
  {
    title: "Modern Technology",
    body: "Cashless payment options and dependable equipment built for everyday use.",
  },
  {
    title: "Healthy Options",
    body: "Product mixes can include traditional favorites, drinks, and healthier options.",
  },
  {
    title: "Local Service",
    body: "Local service with responsive follow-up when a machine needs attention.",
  },
  {
    title: "Machine Options That Match Your Location",
    body: "Machine types, product mixes, and service plans can be matched to your space, traffic, and audience.",
  },
]

export function WhoWeServePage({
  title,
  content,
  description,
}: WhoWeServePageProps) {
  return (
    <DropdownPageShell
      breadcrumbs={[
        { label: "Who We Serve" },
        { label: title },
      ]}
      eyebrow="Who We Serve"
      title={title}
      description={
        description ||
        "See how Rocky Mountain Vending adapts machine placement, product mix, and ongoing service to the way this kind of location actually runs."
      }
      content={
        <div className="text-foreground">{content}</div>
      }
      contentClassName="prose prose-lg max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-a:text-foreground prose-a:underline prose-a:decoration-primary/35 prose-a:underline-offset-4 hover:prose-a:decoration-primary prose-strong:text-foreground"
      sections={
        <section>
          <div className="mx-auto mb-6 max-w-3xl text-center">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
              Why Rocky
            </p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
              What locations usually value most after we install
            </h2>
            <p className="mt-3 text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
              We match the machine mix, product selection, and service cadence
              to the pace of the location instead of forcing a generic route.
            </p>
          </div>
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {reasons.map((reason) => (
              <PublicInset key={reason.title} className="h-full">
                <div className="flex items-start gap-4">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <CheckCircle2 className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-foreground">
                      {reason.title}
                    </h3>
                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                      {reason.body}
                    </p>
                  </div>
                </div>
              </PublicInset>
            ))}
          </div>
        </section>
      }
      cta={{
        eyebrow: "Next Step",
        title: "Tell us about your location",
        description:
          "Tell us about your breakroom, customer area, or team traffic and we’ll help you decide whether free placement, machine sales, or service support makes the most sense.",
        actions: [
          { label: "Talk to Our Team", href: "/contact-us#contact-form" },
          {
            label: "See If You Qualify",
            href: "/#request-machine",
            variant: "outline",
          },
        ],
      }}
    />
  )
}