import type { Metadata } from "next";
import Link from "next/link";
import { Icon } from "@/components/icons";
import { videos } from "@/data/site";

export const metadata: Metadata = {
  title: "Video Gallery",
  description:
    "Video gallery for Vision Aid Foundation programmes and field activities.",
};

export default function VideoGalleryPage() {
  return (
    <>
      <section className="page-hero">
        <div className="shell page-hero-inner">
          <div>
            <span className="eyebrow light">Video gallery</span>
            <h1>Programme films and field stories.</h1>
          </div>
          <p>
            Verified video content will appear here when available. No demo
            videos are shown.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <div className="gallery-toolbar">
            <Link className="text-link" href="/gallery">
              <Icon name="arrow" className="back-arrow" /> Back to gallery
            </Link>
            <Link className="text-link" href="/gallery/photos">
              Photo gallery <Icon name="arrow" />
            </Link>
          </div>

          {videos.length > 0 ? (
            <div className="video-grid">
              {videos.map((video) => (
                <a
                  className="video-card"
                  href={video.url}
                  key={video.url}
                  target="_blank"
                  rel="noreferrer"
                >
                  <span>{video.title}</span>
                  <strong>
                    Watch <Icon name="arrow" />
                  </strong>
                </a>
              ))}
            </div>
          ) : (
            <div className="empty-panel">
              <h2>No videos available yet</h2>
              <p>
                This page is ready for verified Vision Aid Foundation videos.
                When media is provided, it will appear here automatically.
              </p>
              <Link className="button button-dark" href="/gallery/photos">
                Browse photo gallery <Icon name="arrow" />
              </Link>
            </div>
          )}
        </div>
      </section>
    </>
  );
}