import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Instagram } from "lucide-react";
import { motion } from "framer-motion";

export default function DeadOnSightTV() {
  return (
    <div className="bg-black text-white min-h-screen font-mono">
      {/* VHS STATIC HERO */}
      <div className="relative h-screen flex flex-col items-center justify-center text-center p-4">
        <motion.h1
          className="text-4xl md:text-6xl font-bold glitch"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1 }}
        >
          DEAD ON SIGHT TV
        </motion.h1>
        <p className="text-md md:text-xl mt-4 max-w-xl">
          DEAD OR ALIVE?
          Las Vegas-based media company: Film, Music, Art, Fashion, Culture.
        </p>
        <div className="mt-6 flex gap-4">
          <Button className="bg-red-600 hover:bg-red-800">PRESS TO LOCK IN </Button>
          <Button variant="outline" className="border-white hover:bg-red hover:text-black">
            ! SHOP DEAD!
          </Button>
        </div>
        <div className="absolute bottom-4 text-sm text-gray-400">
          Follow us @deadonsight.tv
        </div>
      </div>

      {/* SERVICES SECTION */}
      <section className="bg-zinc-900 py-12 px-6">
        <h2 className="text-3xl font-bold mb-6 text-red-500 text-center">SERVICES</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {[
      "Film/Music Video Production",      
      "Photography Services",
      "Graphic Design",
            "Recording Studio/ Mobile Services",
            "Artist Development",
      "Content Production",
            "Screen Printing ",
            "Brand Collabs",
      "JOIN TEAM !?",
          ].map((service, index) => (
            <Card key={index} className="bg-zinc-800 border-zinc-700 hover:scale-105 transition-transform">
              <CardContent className="p-4">
                <h3 className="text-xl font-semibold text-white">{service}</h3>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* CONTACT SECTION */}
      <section className="bg-black py-12 px-6 border-t border-zinc-700">
        <h2 className="text-2xl font-bold mb-6 text-red-500 text-center">Patch In</h2>
        <div className="max-w-md mx-auto">
          <form className="flex flex-col gap-4">
            <input type="text" placeholder="Name" className="bg-zinc-800 p-3 rounded text-white" />
            <input type="email" placeholder="Email" className="bg-zinc-800 p-3 rounded text-white" />
            <textarea placeholder="Message" rows="4" className="bg-zinc-800 p-3 rounded text-white"></textarea>
            <Button type="submit" className="bg-red-600 hover:bg-red-800">Send Transmission</Button>
          </form>
          <div className="mt-6 flex justify-center items-center gap-2 text-gray-400">
            <Instagram className="w-5 h-5" />
            <a href="https://instagram.com/deadonsight.tv" target="_blank" rel="noopener noreferrer">
              @deadonsight.tv
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}