import Link from 'next/link'
import Image from 'next/image'
import { Breadcrumbs } from '@/components/breadcrumbs'
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Blog | Rocky Mountain Vending',
  description: 'Read our latest blog posts about vending machines, services, and industry insights from Rocky Mountain Vending.',
  alternates: {
    canonical: 'https://rockymountainvending.com/blog/',
  },
}

const blogPosts = [
  {
    title: 'How to Remove an Abandoned Vending Machine in Utah',
    description: 'A comprehensive guide for Utah businesses dealing with unwanted vending machines on their property.',
    slug: 'abandoned-vending-machines',
    date: 'March 20, 2025',
    image: '/images/abandoned-vending-machine-guide.jpg',
    imageAlt: 'Abandoned vending machine guide',
  },
  {
    title: 'Rocky Mountain Vending Reviews & Testimonials',
    description: 'Read customer reviews and testimonials about our vending machine services in Utah.',
    slug: 'reviews',
    date: 'March 20, 2025',
    image: '/images/customer-reviews.jpg',
    imageAlt: 'Customer reviews and testimonials',
  },
  {
    title: 'The Best Vending Machine Supplier in Salt Lake City, Utah',
    description: 'Why Rocky Mountain Vending is the top choice for vending machine services in Salt Lake City.',
    slug: 'best-vending-machine-supplier-in-salt-lake-city-utah',
    date: 'March 20, 2025',
    image: '/images/salt-lake-city-vending.jpg',
    imageAlt: 'Vending machine supplier in Salt Lake City',
  },
]

export default function BlogPage() {
  return (
    <>
      <Breadcrumbs
        items={[
          { label: 'Blog', href: '/blog' },
        ]}
      />
      <article className="container mx-auto px-4 py-8 md:py-12 max-w-5xl">
        <header className="mb-12 md:mb-16">
          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-balance mb-4">
            Blog
          </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" />
        </header>

        <div className="space-y-8">
          {blogPosts.map((post) => (
            <article key={post.slug} className="border-b border-border pb-8 last:border-b-0 last:pb-0">
              <div className="flex flex-col md:flex-row gap-6">
                <div className="md:w-1/3">
                  <Link href={`/blog/${post.slug}`}>
                    <div className="relative aspect-video w-full overflow-hidden rounded-lg bg-muted">
                      <Image
                        src={post.image}
                        alt={post.imageAlt}
                        fill
                        className="object-cover transition-transform hover:scale-105"
                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                      />
                    </div>
                  </Link>
                </div>
                <div className="md:w-2/3">
                  <h2 className="text-2xl md:text-3xl font-semibold mb-2 tracking-tight text-balance">
                    <Link href={`/blog/${post.slug}`} className="transition-colors hover:text-[var(--link-hover-color)]">
                      {post.title}
                    </Link>
                  </h2>
                  <p className="text-muted-foreground mb-4 leading-relaxed text-base md:text-lg">
                    {post.description}
                  </p>
                  <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
                    <time>{post.date}</time>
                  </div>
                  <div className="mt-4">
                    <Link
                      href={`/blog/${post.slug}`}
                      className="inline-flex items-center gap-2 text-[var(--link-hover-color)] hover:text-[var(--link-hover-color-dark)] font-medium transition-colors"
                    >
                      Read more
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path d="m5 12 7 7 7-7" />
                      </svg>
                    </Link>
                  </div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </article>
    </>
  )
}