import type { Metadata } from "next"
import { VideoCard } from "@/components/video-card"
import { videos } from "@/lib/data"

export const metadata: Metadata = {
  title: "Video Tutorials",
  description:
    "Watch step-by-step video guides for setting up and using your Higgy's Android Box. Tutorials for beginners and advanced users.",
}

export default function VideosPage() {
  return (
    <div className="min-h-screen py-12 px-4">
      <div className="container mx-auto max-w-6xl">
        <div className="text-center mb-12">
          <h1 className="text-3xl lg:text-4xl font-bold mb-4">
            Video Tutorials
          </h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Learn how to get the most out of your Android box with our
            step-by-step video guides
          </p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {videos.map((video) => (
            <VideoCard key={video.id} {...video} />
          ))}
        </div>
      </div>
    </div>
  )
}