import { useEffect } from "react";
import { Play } from "lucide-react";

export default function PinkuDroneHome() {
  useEffect(() => {
    document.body.classList.add("bg-black");
  }, []);

  const videos = [
    {
      id: "VIDEO_ID_1",
      title: "Tesla Model Y Juniper – Winter Storm Test",
      thumb: "https://img.youtube.com/vi/VIDEO_ID_1/hqdefault.jpg",
    },
    {
      id: "VIDEO_ID_2",
      title: "Best Gadgets I Use Daily in 2026",
      thumb: "https://img.youtube.com/vi/VIDEO_ID_2/hqdefault.jpg",
    },
    {
      id: "VIDEO_ID_3",
      title: "Model 3 Highland vs Juniper – Honest Review",
      thumb: "https://img.youtube.com/vi/VIDEO_ID_3/hqdefault.jpg",
    },
  ];

  return (
    <div className="min-h-screen text-neutral-100 font-sans">
      {/* NAVBAR */}
      <header className="sticky top-0 z-50 bg-black/80 backdrop-blur border-b border-neutral-800">
        <div className="max-w-7xl mx-auto flex items-center justify-between px-6 py-4">
          <div className="flex items-center gap-3">
            <img
              src="/pinkudrone-logo.svg"
              alt="PinkuDrone"
              className="h-7"
            />
            <span className="font-semibold tracking-wide">PinkuDrone</span>
          </div>
          <nav className="hidden md:flex gap-8 text-sm text-neutral-300">
            <a className="hover:text-white" href="#">Videos</a>
            <a className="hover:text-white" href="#">Gadgets</a>
            <a className="hover:text-white" href="#">Cars</a>
            <a className="hover:text-white" href="#">Travel</a>
            <a className="hover:text-white" href="#">About</a>
          </nav>
        </div>
      </header>

      {/* HERO FEATURE VIDEO */}
      <section className="max-w-7xl mx-auto px-6 pt-10">
        <div className="relative rounded-2xl overflow-hidden bg-neutral-900 shadow-2xl">
          <img
            src={videos[0].thumb}
            alt={videos[0].title}
            className="w-full aspect-video object-cover opacity-80"
          />
          <div className="absolute inset-0 flex flex-col justify-end p-8 bg-gradient-to-t from-black/80 to-transparent">
            <h1 className="text-2xl md:text-4xl font-bold mb-3">
              {videos[0].title}
            </h1>
            <a
              href={`https://youtube.com/watch?v=${videos[0].id}`}
              className="inline-flex items-center gap-2 w-fit bg-orange-500 hover:bg-orange-600 text-black font-semibold px-5 py-2 rounded-full"
            >
              <Play size={18} /> Watch Now
            </a>
          </div>
        </div>
      </section>

      {/* VIDEO GRID (MKBHD-STYLE CARDS) */}
      <section className="max-w-7xl mx-auto px-6 py-16">
        <h2 className="text-xl font-semibold mb-8 tracking-wide">
          Latest Videos
        </h2>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {videos.map((v) => (
            <a
              key={v.id}
              href={`https://youtube.com/watch?v=${v.id}`}
              className="group"
            >
              <div className="relative rounded-xl overflow-hidden bg-neutral-900">
                <img
                  src={v.thumb}
                  alt={v.title}
                  className="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition" />
              </div>
              <h3 className="mt-3 text-sm font-medium text-neutral-200 group-hover:text-white">
                {v.title}
              </h3>
            </a>
          ))}
        </div>
      </section>

      {/* FOOTER */}
      <footer className="border-t border-neutral-800 py-10 text-center text-sm text-neutral-500">
        © {new Date().getFullYear()} PinkuDrone · Tech, Gadgets & Cars
      </footer>
    </div>
  );
}