Website-Generation-Request (1)/src/app/products/page.tsx

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Shield, Sun, Thermometer, Eye } from 'lucide-react'

const productCategories = [
  {
    id: 'carbon',
    name: 'Carbon Series',
    description: 'Professional-grade carbon films with superior heat rejection',
    color: 'bg-gray-800',
    products: [
      {
        id: 'carbon-15',
        name: 'Carbon 15',
        description: 'Premium carbon film with excellent clarity',
        vlt: '15%',
        uvr: '99%',
        irr: '92%',
        tser: '78%',
        features: ['Non-metallic', 'Fade resistant', 'Signal friendly']
      },
      {
        id: 'carbon-35',
        name: 'Carbon 35',
        description: 'Balanced performance for daily driving',
        vlt: '35%',
        uvr: '99%',
        irr: '85%',
        tser: '65%',
        features: ['Non-metallic', 'Fade resistant', 'Signal friendly']
      },
      {
        id: 'carbon-50',
        name: 'Carbon 50',
        description: 'Light tint with excellent heat rejection',
        vlt: '50%',
        uvr: '99%',
        irr: '75%',
        tser: '55%',
        features: ['Non-metallic', 'Fade resistant', 'Signal friendly']
      },
      {
        id: 'carbon-70',
        name: 'Carbon 70',
        description: 'Maximum clarity with UV protection',
        vlt: '70%',
        uvr: '99%',
        irr: '65%',
        tser: '45%',
        features: ['Non-metallic', 'Fade resistant', 'Signal friendly']
      }
    ]
  },
  {
    id: 'ceramic',
    name: 'Ceramic Series',
    description: 'Advanced ceramic technology for superior performance',
    color: 'bg-blue-900',
    products: [
      {
        id: 'ceramic-15',
        name: 'Ceramic 15',
        description: 'Top-tier ceramic film with maximum heat rejection',
        vlt: '15%',
        uvr: '99%',
        irr: '95%',
        tser: '85%',
        features: ['Ceramic particles', 'Superior heat rejection', 'Crystal clear']
      },
      {
        id: 'ceramic-35',
        name: 'Ceramic 35',
        description: 'Premium ceramic performance',
        vlt: '35%',
        uvr: '99%',
        irr: '90%',
        tser: '75%',
        features: ['Ceramic particles', 'Superior heat rejection', 'Crystal clear']
      },
      {
        id: 'ceramic-50',
        name: 'Ceramic 50',
        description: 'Excellent visibility with ceramic technology',
        vlt: '50%',
        uvr: '99%',
        irr: '82%',
        tser: '68%',
        features: ['Ceramic particles', 'Superior heat rejection', 'Crystal clear']
      },
      {
        id: 'ceramic-70',
        name: 'Ceramic 70',
        description: 'Maximum light transmission with ceramic benefits',
        vlt: '70%',
        uvr: '99%',
        irr: '75%',
        tser: '58%',
        features: ['Ceramic particles', 'Superior heat rejection', 'Crystal clear']
      }
    ]
  },
  {
    id: 'premium',
    name: 'Premium Series',
    description: 'High-end films for discerning customers',
    color: 'bg-purple-900',
    products: [
      {
        id: 'premium-20',
        name: 'Premium 20',
        description: 'Luxury film with exceptional performance',
        vlt: '20%',
        uvr: '99%',
        irr: '88%',
        tser: '72%',
        features: ['Premium quality', 'Long-lasting', 'Excellent optics']
      },
      {
        id: 'premium-35',
        name: 'Premium 35',
        description: 'Perfect balance of style and performance',
        vlt: '35%',
        uvr: '99%',
        irr: '82%',
        tser: '65%',
        features: ['Premium quality', 'Long-lasting', 'Excellent optics']
      },
      {
        id: 'premium-50',
        name: 'Premium 50',
        description: 'High-quality film with great visibility',
        vlt: '50%',
        uvr: '99%',
        irr: '75%',
        tser: '55%',
        features: ['Premium quality', 'Long-lasting', 'Excellent optics']
      }
    ]
  },
  {
    id: 'professional',
    name: 'Professional Series',
    description: 'Commercial-grade films for professional installations',
    color: 'bg-green-900',
    products: [
      {
        id: 'professional-15',
        name: 'Professional 15',
        description: 'Heavy-duty film for commercial applications',
        vlt: '15%',
        uvr: '99%',
        irr: '85%',
        tser: '70%',
        features: ['Commercial grade', 'Durable', 'Cost-effective']
      },
      {
        id: 'professional-35',
        name: 'Professional 35',
        description: 'Reliable performance for everyday use',
        vlt: '35%',
        uvr: '99%',
        irr: '78%',
        tser: '62%',
        features: ['Commercial grade', 'Durable', 'Cost-effective']
      },
      {
        id: 'professional-50',
        name: 'Professional 50',
        description: 'Professional quality with good visibility',
        vlt: '50%',
        uvr: '99%',
        irr: '70%',
        tser: '50%',
        features: ['Commercial grade', 'Durable', 'Cost-effective']
      },
      {
        id: 'professional-70',
        name: 'Professional 70',
        description: 'Light tint for commercial applications',
        vlt: '70%',
        uvr: '99%',
        irr: '60%',
        tser: '40%',
        features: ['Commercial grade', 'Durable', 'Cost-effective']
      }
    ]
  }
]

const SpecificationItem = ({ icon: Icon, label, value }: { icon: any, label: string, value: string }) => (
  <div className="flex items-center gap-2">
    <Icon className="w-4 h-4 text-primary" />
    <span className="text-sm text-gray-400">{label}:</span>
    <span className="text-sm font-medium text-white">{value}</span>
  </div>
)

export default function ProductsPage() {
  return (
    <div className="min-h-screen bg-black">
      {/* Hero Section */}
      <section className="relative py-24 px-4">
        <div className="absolute inset-0 bg-gradient-to-b from-primary/10 to-transparent" />
        <div className="relative max-w-7xl mx-auto text-center">
          <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
            Heat Rejection Films
          </h1>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
            Discover our complete range of professional window films designed to provide superior heat rejection, 
            UV protection, and enhanced comfort for your vehicle.
          </p>
          <div className="flex flex-wrap justify-center gap-4 text-sm text-gray-400">
            <div className="flex items-center gap-2">
              <Shield className="w-4 h-4 text-primary" />
              <span>99% UV Protection</span>
            </div>
            <div className="flex items-center gap-2">
              <Sun className="w-4 h-4 text-primary" />
              <span>Superior Heat Rejection</span>
            </div>
            <div className="flex items-center gap-2">
              <Thermometer className="w-4 h-4 text-primary" />
              <span>Temperature Control</span>
            </div>
            <div className="flex items-center gap-2">
              <Eye className="w-4 h-4 text-primary" />
              <span>Optical Clarity</span>
            </div>
          </div>
        </div>
      </section>

      {/* Product Categories */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          {productCategories.map((category) => (
            <div key={category.id} className="mb-20">
              {/* Category Header */}
              <div className="text-center mb-12">
                <h2 className="text-4xl font-bold text-white mb-4">{category.name}</h2>
                <p className="text-lg text-gray-300 max-w-2xl mx-auto">{category.description}</p>
              </div>

              {/* Products Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
                {category.products.map((product) => (
                  <Card key={product.id} className="bg-gray-900 border-gray-800 hover:border-primary/50 transition-all duration-300 group">
                    <CardHeader className="pb-4">
                      <CardTitle className="text-white text-xl group-hover:text-primary transition-colors">
                        {product.name}
                      </CardTitle>
                      <CardDescription className="text-gray-400">
                        {product.description}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      {/* Specifications */}
                      <div className="space-y-3">
                        <SpecificationItem icon={Eye} label="VLT" value={product.vlt} />
                        <SpecificationItem icon={Shield} label="UVR" value={product.uvr} />
                        <SpecificationItem icon={Thermometer} label="IRR" value={product.irr} />
                        <SpecificationItem icon={Sun} label="TSER" value={product.tser} />
                      </div>

                      {/* Features */}
                      <div className="pt-4 border-t border-gray-800">
                        <div className="flex flex-wrap gap-2 mb-4">
                          {product.features.map((feature, index) => (
                            <Badge key={index} variant="outline" className="text-xs border-gray-700 text-gray-300">
                              {feature}
                            </Badge>
                          ))}
                        </div>
                        <Button 
                          variant="outline" 
                          className="w-full border-primary text-primary hover:bg-primary hover:text-white transition-colors"
                        >
                          Learn More
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Specifications Legend */}
      <section className="py-16 px-4 bg-gray-900">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl font-bold text-white mb-8">Understanding Specifications</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="p-6 bg-black rounded-lg border border-gray-800">
              <Eye className="w-8 h-8 text-primary mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-white mb-2">VLT</h3>
              <p className="text-sm text-gray-400">Visible Light Transmission - the percentage of visible light that passes through the film</p>
            </div>
            <div className="p-6 bg-black rounded-lg border border-gray-800">
              <Shield className="w-8 h-8 text-primary mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-white mb-2">UVR</h3>
              <p className="text-sm text-gray-400">UV Rejection - the percentage of harmful UV rays blocked by the film</p>
            </div>
            <div className="p-6 bg-black rounded-lg border border-gray-800">
              <Thermometer className="w-8 h-8 text-primary mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-white mb-2">IRR</h3>
              <p className="text-sm text-gray-400">Infrared Rejection - the percentage of infrared heat energy rejected</p>
            </div>
            <div className="p-6 bg-black rounded-lg border border-gray-800">
              <Sun className="w-8 h-8 text-primary mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-white mb-2">TSER</h3>
              <p className="text-sm text-gray-400">Total Solar Energy Rejection - overall percentage of solar energy blocked</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}