"use client"

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

export function AboutPage() {
  return (
    <div className="public-page">
      <Breadcrumbs
        className="mb-6"
        items={[{ label: "About Us", href: "/about-us" }]}
      />

      <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>

      <section className="mt-12">
        <PublicSurface className="text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
            Next Step
          </p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
            Want to talk through your location with us directly?
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
            If you want a more personal vending partner, tell us about your
            space and we&apos;ll help you decide whether placement, machine
            sales, or service support makes the most sense.
          </p>
          <div className="mt-6 flex flex-col justify-center gap-3 sm:flex-row">
            <Link
              href="/contact-us#contact-form"
              className="inline-flex min-h-11 items-center justify-center rounded-full bg-primary px-6 text-sm font-medium text-primary-foreground transition hover:bg-primary/90"
            >
              Talk to Our Team
            </Link>
            <Link
              href="/reviews"
              className="inline-flex min-h-11 items-center justify-center rounded-full border border-border bg-white px-6 text-sm font-medium text-foreground transition hover:border-primary/35 hover:text-primary"
            >
              Read Reviews
            </Link>
          </div>
        </PublicSurface>
      </section>
    </div>
  )
}