"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, Zap, Shield, TrendingUp, Power } from "lucide-react";

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

  const b2bProducts = [
    {
      name: "String Inverter",
      capacity: "5kW - 100kW",
      efficiency: "97% - 98%",
      warranty: "10 years",
      features: ["High Efficiency", "Grid Connected", "Remote Monitoring", "Scalable"],
      price: "₹45,000 - ₹8,00,000",
    },
    {
      name: "Central Inverter",
      capacity: "100kW - 1MW",
      efficiency: "98% - 99%",
      warranty: "10 years",
      features: ["Large Scale", "High Power", "Cost Effective", "Professional Grade"],
      price: "₹8,00,000 - ₹80,00,000",
    },
    {
      name: "Hybrid Inverter",
      capacity: "3kW - 50kW",
      efficiency: "96% - 97%",
      warranty: "10 years",
      features: ["Battery Compatible", "Grid + Solar", "Backup Power", "Smart Control"],
      price: "₹35,000 - ₹5,00,000",
    },
    {
      name: "Micro Inverter",
      capacity: "300W - 1500W",
      efficiency: "96% - 97%",
      warranty: "25 years",
      features: ["Panel Level", "Maximum Power", "Easy Installation", "Long Warranty"],
      price: "₹8,000 - ₹35,000 per unit",
    }
  ];

  const b2cProducts = [
    {
      name: "Home Solar Inverter",
      capacity: "1kW - 5kW",
      efficiency: "96% - 97%",
      warranty: "5 years",
      features: ["Home Use", "Easy Setup", "Warranty Support", "User Friendly"],
      price: "₹15,000 - ₹60,000",
    },
    {
      name: "Hybrid Home Inverter",
      capacity: "2kW - 10kW",
      efficiency: "96% - 97%",
      warranty: "5 years",
      features: ["Battery Backup", "Grid + Solar", "24/7 Power", "Smart App"],
      price: "₹25,000 - ₹1,20,000",
    },
    {
      name: "Off-Grid Inverter",
      capacity: "1kW - 3kW",
      efficiency: "95% - 96%",
      warranty: "3 years",
      features: ["Standalone", "Battery Required", "Rural Areas", "Affordable"],
      price: "₹12,000 - ₹40,000",
    }
  ];

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

  const b2cBenefits = [
    "Easy EMI options available",
    "Free site survey and consultation",
    "Installation support 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/inverter-png.png" alt="Inverters" 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">Inverters</h1>
              <p className="text-lg text-theme-secondary max-w-2xl mx-auto">
                Convert solar DC power to usable AC power. High-efficiency inverters for residential, commercial, and industrial applications.
              </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"><Power 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>Capacity: {product.capacity}</span></div>
                            <div className="flex items-center gap-2"><Power className="w-4 h-4 text-primary-500" /><span>Efficiency: {product.efficiency}</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"><Power 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.capacity}</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>
  );
}