"use client";

import { useState } from "react";
import { ThemeProvider } from "../contexts/ThemeContext";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Image from "next/image";
import { motion } from "framer-motion";
import { Check, ArrowRight, Building2, Home, Wind, Shield, TrendingUp, Zap } from "lucide-react";

export default function WindEnergyPage() {
  const [activeTab, setActiveTab] = useState<"b2b" | "b2c">("b2b");

  const b2bProducts = [
    {
      name: "Small Wind Turbine",
      power: "1kW - 10kW",
      rotor: "2m - 7m",
      warranty: "10 years",
      features: ["Small Scale", "Easy Installation", "Low Maintenance", "Grid Connected"],
      price: "₹2,00,000 - ₹15,00,000",
    },
    {
      name: "Medium Wind Turbine",
      power: "10kW - 100kW",
      rotor: "7m - 20m",
      warranty: "15 years",
      features: ["Commercial Use", "High Efficiency", "Remote Monitoring", "Professional Grade"],
      price: "₹15,00,000 - ₹1,50,00,000",
    },
    {
      name: "Large Wind Turbine",
      power: "100kW - 1MW",
      rotor: "20m - 50m",
      warranty: "20 years",
      features: ["Industrial Scale", "Maximum Power", "Advanced Control", "Long Warranty"],
      price: "₹1,50,00,000 - ₹15,00,00,000",
    },
    {
      name: "Wind-Solar Hybrid System",
      power: "5kW - 500kW",
      rotor: "Custom",
      warranty: "10 years",
      features: ["Dual Energy", "24/7 Power", "Optimal Efficiency", "Custom Design"],
      price: "₹5,00,000 - ₹5,00,00,000",
    }
  ];

  const b2cProducts = [
    {
      name: "Home Wind Generator",
      power: "500W - 3kW",
      rotor: "1.5m - 3m",
      warranty: "5 years",
      features: ["Home Use", "Easy Setup", "Quiet Operation", "Warranty Support"],
      price: "₹1,00,000 - ₹5,00,000",
    },
    {
      name: "Portable Wind Generator",
      power: "200W - 1kW",
      rotor: "1m - 2m",
      warranty: "3 years",
      features: ["Portable", "Lightweight", "Easy Install", "Affordable"],
      price: "₹30,000 - ₹1,50,000",
    },
    {
      name: "Rooftop Wind System",
      power: "1kW - 5kW",
      rotor: "2m - 4m",
      warranty: "5 years",
      features: ["Rooftop Mount", "Space Efficient", "Grid Connected", "Smart Control"],
      price: "₹1,50,000 - ₹8,00,000",
    }
  ];

  const b2bBenefits = [
    "Bulk pricing for large orders",
    "Custom configurations available",
    "Site assessment and consultation",
    "Installation and commissioning support",
    "GST billing and documentation",
    "Extended warranty and maintenance"
  ];

  const b2cBenefits = [
    "Easy EMI options available",
    "Free site survey and consultation",
    "Professional installation included",
    "24/7 customer support",
    "Easy warranty claims",
    "Secure payment options"
  ];

  return (
    <ThemeProvider>
      <main className="min-h-screen" style={{ background: 'var(--background)', transition: 'background 0.3s ease' }}>
        <Navbar />
        <div className="pt-20 pb-16">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="text-center mb-12">
              <div className="flex justify-center mb-6">
                <Image src="/gallery/category/wind-energy.png" alt="Wind Energy" width={120} height={120} className="object-contain" />
              </div>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4 text-theme-primary">Wind Energy</h1>
              <p className="text-lg text-theme-secondary max-w-2xl mx-auto">
                Harness the power of wind with our comprehensive wind energy solutions. From small-scale turbines to large commercial installations.
              </p>
            </motion.div>

            <div className="flex justify-center mb-8">
              <div className="glass-card p-1 inline-flex gap-2">
                <button onClick={() => setActiveTab("b2b")} className={`px-6 py-3 rounded-lg font-medium transition-all flex items-center gap-2 ${activeTab === "b2b" ? "bg-primary-500 text-white" : "text-theme-secondary hover:text-theme-primary"}`}>
                  <Building2 className="w-5 h-5" /> B2B (Business)
                </button>
                <button onClick={() => setActiveTab("b2c")} className={`px-6 py-3 rounded-lg font-medium transition-all flex items-center gap-2 ${activeTab === "b2c" ? "bg-primary-500 text-white" : "text-theme-secondary hover:text-theme-primary"}`}>
                  <Home className="w-5 h-5" /> B2C (Retail)
                </button>
              </div>
            </div>

            {activeTab === "b2b" && (
              <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
                <div className="glass-card p-6 mb-8">
                  <h2 className="text-2xl font-bold text-theme-primary mb-4 flex items-center gap-2"><TrendingUp className="w-6 h-6 text-primary-500" />Why Choose B2B Platform?</h2>
                  <div className="grid md:grid-cols-2 gap-4">
                    {b2bBenefits.map((benefit, index) => (
                      <div key={index} className="flex items-start gap-3">
                        <Check className="w-5 h-5 text-primary-500 flex-shrink-0 mt-0.5" />
                        <span className="text-theme-secondary">{benefit}</span>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="grid md:grid-cols-2 gap-6 mb-8">
                  {b2bProducts.map((product, index) => (
                    <motion.div key={index} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: index * 0.1 }} className="glass-card p-6 rounded-lg hover:border-primary-500 transition-all">
                      <div className="flex items-start gap-4 mb-4">
                        <div className="w-20 h-20 rounded-lg bg-primary-500/10 flex items-center justify-center flex-shrink-0"><Wind className="w-10 h-10 text-primary-500" /></div>
                        <div className="flex-1">
                          <h3 className="text-xl font-bold text-theme-primary mb-2">{product.name}</h3>
                          <div className="space-y-1 text-sm text-theme-secondary">
                            <div className="flex items-center gap-2"><Zap className="w-4 h-4 text-primary-500" /><span>Power: {product.power}</span></div>
                            <div className="flex items-center gap-2"><Wind className="w-4 h-4 text-primary-500" /><span>Rotor: {product.rotor}</span></div>
                            <div className="flex items-center gap-2"><Shield className="w-4 h-4 text-primary-500" /><span>Warranty: {product.warranty}</span></div>
                          </div>
                        </div>
                      </div>
                      <div className="mb-4">
                        <p className="text-lg font-bold text-primary-500 mb-2">{product.price}</p>
                        <div className="space-y-1">
                          {product.features.map((feature, idx) => (
                            <div key={idx} className="flex items-center gap-2 text-sm text-theme-secondary">
                              <Check className="w-4 h-4 text-primary-500" /><span>{feature}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                      <a href="https://solarvala.msbsgov.com/" target="_blank" rel="noopener noreferrer" className="btn-primary w-full justify-center">
                        View on B2B Platform <ArrowRight className="w-4 h-4" />
                      </a>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            )}

            {activeTab === "b2c" && (
              <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
                <div className="glass-card p-6 mb-8">
                  <h2 className="text-2xl font-bold text-theme-primary mb-4 flex items-center gap-2"><Home className="w-6 h-6 text-primary-500" />Why Choose B2C Platform?</h2>
                  <div className="grid md:grid-cols-2 gap-4">
                    {b2cBenefits.map((benefit, index) => (
                      <div key={index} className="flex items-start gap-3">
                        <Check className="w-5 h-5 text-primary-500 flex-shrink-0 mt-0.5" />
                        <span className="text-theme-secondary">{benefit}</span>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                  {b2cProducts.map((product, index) => (
                    <motion.div key={index} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: index * 0.1 }} className="glass-card p-6 rounded-lg hover:border-primary-500 transition-all">
                      <div className="flex flex-col items-center mb-4">
                        <div className="w-24 h-24 rounded-lg bg-primary-500/10 flex items-center justify-center mb-4"><Wind className="w-12 h-12 text-primary-500" /></div>
                        <h3 className="text-xl font-bold text-theme-primary mb-2 text-center">{product.name}</h3>
                        <div className="space-y-1 text-sm text-theme-secondary text-center w-full">
                          <div className="flex items-center justify-center gap-2"><Zap className="w-4 h-4 text-primary-500" /><span>{product.power}</span></div>
                          <div className="flex items-center justify-center gap-2"><Shield className="w-4 h-4 text-primary-500" /><span>{product.warranty}</span></div>
                        </div>
                      </div>
                      <div className="mb-4">
                        <p className="text-lg font-bold text-primary-500 mb-2 text-center">{product.price}</p>
                        <div className="space-y-1">
                          {product.features.map((feature, idx) => (
                            <div key={idx} className="flex items-center gap-2 text-sm text-theme-secondary">
                              <Check className="w-4 h-4 text-primary-500" /><span>{feature}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                      <a href="http://solardeals.in/" target="_blank" rel="noopener noreferrer" className="btn-primary w-full justify-center">
                        Buy Now <ArrowRight className="w-4 h-4" />
                      </a>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            )}
          </div>
        </div>
        <Footer />
      </main>
    </ThemeProvider>
  );
}