Rocky_Mountain_Vending/components/who-we-serve-page.tsx

"use client"

import { ReactNode } from "react"
import { CheckCircle2 } from "lucide-react"
import { DropdownPageShell } from "@/components/dropdown-page-shell"
import { PublicInset } from "@/components/public-surface"
import { Button } from "@/components/ui/button"
import Link from "next/link"

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."
      }
      headerContent={
        <div className="flex flex-col items-center justify-center gap-3 sm:flex-row">
          <Button asChild size="lg" className="min-h-11 rounded-full px-6">
            <Link href="/contact-us#contact-form">Talk to Our Team</Link>
          </Button>
          <Button
            asChild
            size="lg"
            variant="outline"
            className="min-h-11 rounded-full px-6"
          >
            <Link href="/#request-machine">See If You Qualify</Link>
          </Button>
        </div>
      }
      contentIntro={
        <>
          <PublicInset className="h-full border-primary/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,251,245,0.94))] p-5 md:p-6">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
              How We Tailor Service
            </p>
            <h2 className="mt-3 text-2xl font-semibold tracking-tight text-balance text-foreground">
              We shape the setup around the pace of the location.
            </h2>
            <ul className="mt-4 space-y-3 text-sm leading-relaxed text-muted-foreground">
              <li>Machine type and product mix matched to how people actually use the space.</li>
              <li>Placement recommendations based on traffic flow, break patterns, and visibility.</li>
              <li>Service cadence adjusted so stocking and support stay consistent without adding staff work.</li>
            </ul>
          </PublicInset>
          <PublicInset className="h-full border-border/50 bg-white/80 p-5 md:p-6">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
              Good Fit Signals
            </p>
            <h2 className="mt-3 text-2xl font-semibold tracking-tight text-balance text-foreground">
              These are usually the reasons businesses reach out first.
            </h2>
            <ul className="mt-4 space-y-3 text-sm leading-relaxed text-muted-foreground">
              <li>Your team or visitors need easier access to drinks, snacks, or convenience items on site.</li>
              <li>You want a cleaner vending setup without daily oversight falling back on your staff.</li>
              <li>You need local follow-through when a machine needs restocking, repair, or payment support.</li>
            </ul>
          </PublicInset>
        </>
      }
      content={
        <div className="space-y-6 text-foreground">{content}</div>
      }
      contentClassName="prose-headings:mb-4 prose-headings:mt-10 prose-p:max-w-[68ch] prose-p:text-[1.02rem] prose-p:leading-8 prose-li:max-w-[68ch] prose-ul:space-y-2"
      sections={
        <section>
          <div className="mx-auto mb-8 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",
          },
        ],
        note: (
          <p className="text-sm leading-relaxed text-muted-foreground">
            We can help you sort out whether this should start as a placement request,
            a machine-sales conversation, or direct service support.
          </p>
        ),
      }}
    />
  )
}