'use client'

import Image from 'next/image'
import { Card, CardContent } from "@/components/ui/card"

export function AboutPage() {
  return (
    <div className="container mx-auto px-4 py-8 md:py-12 max-w-6xl">
      {/* Header */}
      <header className="text-center mb-12 md:mb-16">
        <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">About Us</h1>
        <div className="w-24 h-1 bg-gradient-to-r from-[var(--link-hover-color)] to-[var(--link-hover-color-dark)] mx-auto rounded-full"></div>
      </header>

      {/* Main Content - Image and Text */}
      <div className="grid gap-8 md:grid-cols-3 mb-12">
        {/* Left Column - Image */}
        <div className="md:col-span-1">
          <Card className="border-border/50 hover:border-secondary/50 transition-colors shadow-lg overflow-hidden">
            <CardContent className="p-0">
              <Image
                src="https://rockymountainvending.com/wp-content/uploads/2022/06/Rebekahand-Matt-scaled.webp"
                alt="Matt and Rebekah"
                width={240}
                height={300}
                className="w-full h-auto object-cover"
                priority
              />
            </CardContent>
          </Card>
        </div>

        {/* Right Column - Text Content */}
        <div className="md:col-span-2">
          <Card className="border-border/50 hover:border-secondary/50 transition-colors shadow-lg h-full">
            <CardContent className="p-6 md:p-8">
              <div className="prose prose-lg max-w-none">
                <p className="text-muted-foreground leading-relaxed mb-4">
                  When my wife, Rebekah, and I met we knew that we wanted to start a business and raise our family here in the Salt Lake Valley. We met in Bellevue Washington and as soon we got married moved straight to Salt Lake City to start Rocky Mountain Vending. Our focus is on Healthy Vending and providing the best service. Of course we can also provide traditional vending options as well.
                </p>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  Rocky Mountain Vending is 100% a local family run business founded in 2019. If you are looking for the old-fashioned business relationship with all the perks of the 21st century.
                </p>
                <p className="text-muted-foreground leading-relaxed mb-4">
                  We strongly believe that business should be founded on trust, exceptional customer service, employing the latest technology, and of course having fun while we work.
                </p>
                <p className="text-foreground font-semibold text-lg mt-6">
                  ~Matt
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

