"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Shield, Thermometer, Sun, Eye, Star, CheckCircle, ArrowRight } from "lucide-react";
import Link from "next/link";
import Image from "next/image";

export default function HomePage() {
  const filmSeries = [
    {
      name: "Ceramic Series",
      description: "Premium ceramic technology for maximum heat rejection",
      href: "/products/ceramic",
      features: ["99% UV Protection", "92% Heat Rejection", "Crystal Clear"],
      color: "bg-black"
    },
    {
      name: "Carbon Series",
      description: "Advanced carbon films with superior performance",
      href: "/products/carbon",
      features: ["Signal Friendly", "Fade Resistant", "Non-Metallic"],
      color: "bg-gray-600"
    },
    {
      name: "Premium Series",
      description: "Professional grade films for discerning customers",
      href: "/products/premium",
      features: ["Architectural Grade", "Enhanced Durability", "Premium Quality"],
      color: ""
    },
    {
      name: "Professional Series",
      description: "Commercial grade solutions for reliable protection",
      href: "/products/professional",
      features: ["Cost-Effective", "Reliable Performance", "Commercial Grade"],
      color: ""
    }
  ];

  const benefits = [
    {
      icon: Shield,
      title: "99% UV Protection",
      description: "Block harmful UV rays that cause interior fading and skin damage"
    },
    {
      icon: Thermometer,
      title: "Superior Heat Rejection",
      description: "Reduce interior temperature by up to 8°C for maximum comfort"
    },
    {
      icon: Sun,
      title: "Glare Reduction",
      description: "Minimize glare for safer driving and enhanced visibility"
    },
    {
      icon: Eye,
      title: "Crystal Clear Optics",
      description: "Maintain excellent visibility with minimal color distortion"
    }
  ];

  return (
    <div className="min-h-screen bg-black text-white">
      {/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0">
          <Image
            src="https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/project-uploads/1395b515-fd53-4dfd-99d8-cf03acd4131a/generated_images/professional-automotive-window-tinting-i-77ddd3f9-20250711065602.jpg"
            alt="Professional automotive window tinting installation"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-black/60" />
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center">
            <Badge className="mb-6 bg-red-600 text-white px-6 py-2 text-lg">
              Professional Heat Rejection Films
            </Badge>

            <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
              Superior Heat Rejection
              <span className="block text-red-600">
                Window Films
              </span>
            </h1>

            <p className="text-xl md:text-2xl text-gray-300 max-w-4xl mx-auto mb-10 leading-relaxed">
              Transform your vehicle's comfort and efficiency with our premium heat rejection window films.
              Professional installation, lifetime warranty, and unmatched performance guaranteed.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                asChild
                size="lg"
                className="bg-red-600 hover:bg-red-700 text-white px-8 py-4 text-lg transition-colors duration-300"
              >
                <Link href="/contact">Get Free Quote</Link>
              </Button>

              <Button
                asChild
                variant="outline"
                size="lg"
                className="border-white text-white hover:bg-white hover:text-black px-8 py-4 text-lg transition-colors duration-300"
              >
                <Link href="/products">View Products</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-20 bg-gray-900/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-6">
              Why Choose Our <span className="text-red-600">Heat Rejection Films</span>?
            </h2>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto">
              Experience the difference that professional-grade heat rejection technology makes for your vehicle.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {benefits.map((benefit, index) => (
              <Card
                key={index}
                className="bg-black border-gray-800 text-center hover:border-red-600 transition-colors duration-300 h-full"
              >
                <CardContent className="p-6">
                  <div className="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <benefit.icon className="w-8 h-8 text-white" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-3">{benefit.title}</h3>
                  <p className="text-gray-400">{benefit.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Product Series Section */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-6">
              Our <span className="text-red-600">Film Series</span>
            </h2>
            <p className="text-xl text-gray-300 max-w-3xl mx-auto">
              Choose from our comprehensive range of heat rejection films designed for every need and budget.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {filmSeries.map((series, index) => (
              <Card
                key={index}
                className="bg-gray-900 border-gray-800 hover:border-red-600 transition-colors duration-300 group h-full"
              >
                <CardHeader>
                  <div
                    className={`w-full h-32 rounded-lg mb-4 flex items-center justify-center overflow-hidden ${series.color}`}
                    style={{ backgroundColor: index === 2 ? '#006039' : index === 3 ? '#27276B' : undefined }}
                  >
                    <span className="text-white font-bold text-2xl">
                      {series.name.split(' ')[0]}
                    </span>
                  </div>
                  <CardTitle className="text-white group-hover:text-red-600 transition-colors">
                    {series.name}
                  </CardTitle>
                  <CardDescription className="text-gray-400">
                    {series.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2 mb-6">
                    {series.features.map((feature, featureIndex) => (
                      <li
                        key={featureIndex}
                        className="flex items-center text-sm text-gray-300"
                      >
                        <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                        {feature}
                      </li>
                    ))}
                  </ul>
                  <Button
                    asChild
                    variant="outline"
                    className="w-full border-red-600 text-red-600 hover:bg-red-600 hover:text-white transition-colors duration-300"
                  >
                    <Link href={series.href}>
                      Learn More <ArrowRight className="w-4 h-4 ml-2" />
                    </Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Performance Stats */}
      <section className="py-20 bg-gradient-to-r from-red-900 to-red-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-4xl font-bold mb-12 text-white">
              Proven Performance Results
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              {[
                { value: "99%", label: "UV Protection" },
                { value: "92%", label: "Heat Rejection" },
                { value: "50%", label: "Glare Reduction" },
                { value: "8°C", label: "Temperature Reduction" }
              ].map((stat, index) => (
                <div key={index} className="text-center">
                  <div className="text-5xl font-bold text-white mb-2">
                    {stat.value}
                  </div>
                  <div className="text-red-100">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <section className="py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl font-bold mb-6">
            Ready to Experience the <span className="text-red-600">Difference</span>?
          </h2>

          <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
            Join thousands of satisfied customers who have transformed their vehicles with our premium heat rejection films.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              asChild
              size="lg"
              className="bg-red-600 hover:bg-red-700 text-white px-8 py-4 text-lg transition-colors duration-300"
            >
              <Link href="/contact">Get Your Free Quote</Link>
            </Button>

            <Button
              asChild
              variant="outline"
              size="lg"
              className="border-white text-white hover:bg-white hover:text-black px-8 py-4 text-lg transition-colors duration-300"
            >
              <Link href="/about">Learn More About Us</Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}