"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Breadcrumbs } from "@/components/breadcrumbs"
import {
  PublicInset,
  PublicPageHeader,
  PublicSurface,
} from "@/components/public-surface"

const videos = [
  {
    id: "dgE8nyaxdJI",
    title: "Seaga HY900 Overview",
    category: "all",
  },
  {
    id: "HcVuro9drHo",
    title: "Troubleshooting Vertical Drop",
    category: "troubleshooting-vertical-drop",
  },
  {
    id: "-FGJVfZSMAg",
    title: "Loading Cans",
    category: "loading-cans",
  },
  {
    id: "-AzbNKq9nHg",
    title: "Loading Bottles",
    category: "loading-bottles",
  },
  {
    id: "LeKX2zJzFMY",
    title: "Changing Can to Bottle",
    category: "changing-can-to-bottle",
  },
]

const filterCategories = [
  { value: "", label: "All" },
  {
    value: "troubleshooting-vertical-drop",
    label: "Troubleshooting Vertical Drop",
  },
  { value: "loading-cans", label: "Loading Cans" },
  { value: "loading-bottles", label: "Loading Bottles" },
  { value: "changing-can-to-bottle", label: "Changing Can to Bottle" },
]

export default function SeagaHY900SupportPage() {
  const [selectedCategory, setSelectedCategory] = useState<string>("")

  const filteredVideos = videos.filter(
    (video) =>
      selectedCategory === "" ||
      selectedCategory === "all" ||
      video.category === selectedCategory
  )

  return (
    <div className="public-page">
      <Breadcrumbs
        className="mb-6"
        items={[
          { label: "Blog", href: "/blog" },
          { label: "Seaga HY 900 Support", href: "/seaga-hy900-support" },
        ]}
      />

      <PublicPageHeader
        align="center"
        eyebrow="Support Guides"
        title="Seaga HY 900 Support"
        description="Watch the essential setup and troubleshooting videos for the Seaga HY 900 and jump straight to the owner’s manual when you need the reference file."
      />

      <section className="mt-10">
        <PublicSurface className="text-center">
          <p className="mx-auto max-w-2xl text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
          Please watch the videos to learn more about your HY 900
          </p>
          <div className="mt-6">
            <Button asChild className="min-h-11 rounded-full px-6">
              <Link href="/manuals/Seaga/seaga-hy900-owners-manual.pdf">
                Owner&apos;s Manual
              </Link>
            </Button>
          </div>
        </PublicSurface>
      </section>

      <section className="mt-12">
        <PublicSurface className="overflow-hidden p-4 md:p-5">
          <div className="aspect-video w-full overflow-hidden rounded-[1.5rem] border border-border/60 bg-background">
          <iframe
            className="h-full w-full"
            src={`https://www.youtube.com/embed/${videos[0].id}`}
            title={videos[0].title}
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
          </div>
        </PublicSurface>
      </section>

      <section className="mt-12">
        <div className="mx-auto mb-6 max-w-3xl text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary/80">
            Video Tutorials
          </p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
            Filter support videos by the task you&apos;re working on
          </h2>
        </div>

        <PublicInset className="mb-6 flex flex-wrap justify-center gap-3 rounded-[1.5rem]">
          {filterCategories.map((category) => (
            <Button
              key={category.value}
              onClick={() => setSelectedCategory(category.value)}
              variant={
                selectedCategory === category.value ? "default" : "outline"
              }
              size="sm"
              className="min-h-11 rounded-full"
            >
              {category.label}
            </Button>
          ))}
        </PublicInset>

        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          {filteredVideos.map((video) => (
            <PublicSurface
              key={video.id}
              className="overflow-hidden p-4 transition-all hover:-translate-y-0.5 hover:shadow-[0_26px_65px_rgba(0,0,0,0.12)]"
            >
              <div className="relative aspect-video overflow-hidden rounded-[1.5rem] border border-border/60 bg-background">
                <iframe
                  className="h-full w-full"
                  src={`https://www.youtube.com/embed/${video.id}`}
                  title={video.title}
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              </div>
              <div className="px-1 pb-1 pt-4">
                <h3 className="text-lg font-semibold tracking-tight text-foreground">
                  {video.title}
                </h3>
              </div>
            </PublicSurface>
          ))}
        </div>
      </section>
    </div>
  )
}