"use client"

import Image from "next/image"
import {
  PublicInset,
  PublicPageHeader,
  PublicSurface,
} from "@/components/public-surface"

export function AboutPage() {
  return (
    <div className="public-page max-w-6xl">
      <PublicPageHeader
        align="center"
        eyebrow="Family Owned"
        title="About Rocky Mountain Vending"
        description="We built Rocky Mountain Vending to serve Utah businesses with responsive service, better machine care, and a relationship that still feels personal."
        className="mb-10 md:mb-14"
      />

      <PublicSurface className="overflow-hidden p-5 md:p-7">
        <div className="grid gap-6 md:grid-cols-[0.95fr_1.05fr] md:gap-8">
          <div>
            <PublicInset className="overflow-hidden p-0">
              <Image
                src="https://rockymountainvending.com/wp-content/uploads/2022/06/Rebekahand-Matt-scaled.webp"
                alt="Matt and Rebekah"
                width={640}
                height={800}
                className="h-full w-full object-cover"
                priority
              />
            </PublicInset>
          </div>

          <div className="flex flex-col justify-center">
            <div className="space-y-4 text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
              <p>
                When my wife, Rebekah, and I met, we knew we wanted to start a
                business and raise our family here in the Salt Lake Valley. We
                met in Bellevue, Washington and moved straight to Salt Lake City
                after we got married to build Rocky Mountain Vending.
              </p>
              <p>
                Our focus is on healthy vending and dependable service, while
                still helping locations that want traditional snack and drink
                options too.
              </p>
              <p>
                Rocky Mountain Vending is a local family-run business founded in
                2019. We believe business should be built on trust, exceptional
                customer service, modern technology, and enjoying the work we
                do.
              </p>
            </div>

            <PublicInset className="mt-6">
              <p className="text-sm leading-6 text-muted-foreground">
                If you&apos;re looking for a more personal vending partner with
                modern tools and real follow-through, that&apos;s exactly what
                we set out to build.
              </p>
              <p className="mt-4 text-lg font-semibold text-foreground">
                ~Matt
              </p>
            </PublicInset>
          </div>
        </div>
      </PublicSurface>
    </div>
  )
}