import {
  PublicInset,
  PublicPageHeader,
  PublicSection,
  PublicSurface,
} from "@/components/public-surface"

const steps = [
  {
    number: "01",
    title: "Tell Us About Your Location",
    description:
      "Answer a few questions about your location, what you're looking for, and general information so we can see if we're a good fit.",
    timing: "Day 1 - Virtual",
  },
  {
    number: "02",
    title: "Site Visit & Planning",
    description:
      "We schedule a site visit to walk through our plan to get you the right machine or machines for your space.",
    timing: "Day 2-3 - In Person",
  },
  {
    number: "03",
    title: "Free Installation",
    description:
      "Get your machine or machines installed in about a week or less. We just need to get you on the schedule! Completely FREE.",
    timing: "Day 4-7 - Your Location",
  },
]

export function HowItWorksSection() {
  return (
    <PublicSection id="how-it-works">
      <PublicPageHeader
        align="center"
        className="mb-12 md:mb-16"
        title="How It Works"
        description={
          "Getting the best vending machine supplier in Utah shouldn't be a difficult process. Your free machine could be delivered in as little as 7 days depending on our schedule."
        }
      />

      <PublicSurface className="relative p-6 md:p-8">
        <div className="relative">
          <div className="absolute left-[16.666%] right-[16.666%] top-16 hidden h-px bg-border/80 lg:block" />

          <div className="grid gap-5 md:grid-cols-3 md:gap-6">
            {steps.map((step, index) => (
              <PublicInset key={index} className="relative h-full p-5 md:p-6">
                <div className="mb-5">
                  <div className="inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary text-lg font-bold text-primary-foreground shadow-sm md:h-16 md:w-16 md:text-2xl">
                    {step.number}
                  </div>
                </div>
                <div className="mb-2 text-xs font-medium uppercase tracking-[0.18em] text-primary">
                  {step.timing}
                </div>
                <h3 className="text-xl font-semibold mb-3">{step.title}</h3>
                <p className="text-sm leading-relaxed text-muted-foreground">
                  {step.description}
                </p>
              </PublicInset>
            ))}
          </div>
        </div>

        <div className="mt-8 text-center">
          <p className="text-sm text-muted-foreground">
            Our process is as easy as 3 steps. We mentioned{" "}
            <span className="font-semibold text-foreground">FREE</span>, right?
          </p>
        </div>
      </PublicSurface>
    </PublicSection>
  )
}