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

export function StatsSection() {
  const stats = [
    { value: "6+", label: "Years of Experience" },
    { value: "3", label: "Counties Served" },
    { value: "20+", label: "Cities Served in Utah" },
    { value: "Full", label: "Service Support" },
  ]

  return (
    <PublicSection tone="muted">
      <PublicSurface className="p-4 sm:p-5 md:p-6">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
          {stats.map((stat) => (
            <PublicInset
              key={stat.label}
              className="border-0 bg-transparent px-3 py-4 text-center shadow-none"
            >
              <div className="text-4xl md:text-5xl font-bold text-primary mb-2">
                {stat.value}
              </div>
              <div className="text-sm md:text-base text-muted-foreground">
                {stat.label}
              </div>
            </PublicInset>
          ))}
        </div>
      </PublicSurface>
    </PublicSection>
  )
}
