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

export const metadata: Metadata = generateSEOMetadata({
  title: "Utah Vending Blog | Rocky Mountain Vending",
  description:
    "Read Rocky Mountain Vending guides, reviews, and Utah-focused vending insights for businesses and property managers.",
  path: "/blog",
  keywords: [
    "Utah vending blog",
    "vending machine guides Utah",
    "Rocky Mountain Vending 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 max-w-5xl px-4 py-10 md:py-14">
        <PublicPageHeader
          align="center"
          eyebrow="Rocky Updates"
          title="Blog"
          description="Guides, reviews, and local Utah vending insights from the Rocky Mountain Vending team."
        />

        <div className="mt-10 space-y-6">
          {blogPosts.map((post) => (
            <PublicSurface key={post.slug} as="article" className="p-5 md:p-6">
              <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-[1.5rem] 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-primary"
                    >
                      {post.title}
                    </Link>
                  </h2>
                  <p className="text-muted-foreground mb-4 leading-relaxed text-base md:text-lg">
                    {post.description}
                  </p>
                  <PublicInset className="mb-4 inline-flex items-center gap-4 rounded-full px-4 py-2 text-sm text-muted-foreground shadow-none">
                    <time>{post.date}</time>
                  </PublicInset>
                  <div className="mt-4">
                    <Link
                      href={`/blog/${post.slug}`}
                      className="inline-flex min-h-11 items-center gap-2 rounded-full border border-border bg-background px-4 text-sm font-medium text-foreground transition hover:border-primary/40 hover:text-primary"
                    >
                      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 12h14" />
                        <path d="m12 5 7 7-7 7" />
                      </svg>
                    </Link>
                  </div>
                </div>
              </div>
            </PublicSurface>
          ))}
        </div>
      </article>
    </>
  )
}