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

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

  const b2bProducts = [
    {
      name: "Industrial Solar System",
      capacity: "100kW - 10MW",
      efficiency: "High Efficiency",
      warranty: "25 years",
      features: ["Large Scale", "Custom Design", "Professional Installation", "ROI Optimization"],
      price: "₹50,00,000 - ₹50,00,00,000",
    },
    {
      name: "Commercial Rooftop System",
      capacity: "10kW - 500kW",
      efficiency: "High Efficiency",
      warranty: "25 years",
      features: ["Rooftop Installation", "Net Metering", "Maintenance Support", "Monitoring System"],
      price: "₹5,00,000 - ₹2,50,00,000",
    },
    {
      name: "Solar Farm Project",
      capacity: "1MW - 100MW",
      efficiency: "Maximum Efficiency",
      warranty: "25 years",
      features: ["Ground Mounted", "Land Development", "Grid Integration", "EPC Services"],
      price: "₹5,00,00,000 - ₹500,00,00,000",
    },
    {
      name: "Hybrid Energy System",
      capacity: "50kW - 5MW",
      efficiency: "Optimal Efficiency",
      warranty: "20 years",
      features: ["Solar + Wind", "Battery Storage", "Smart Grid", "24/7 Power"],
      price: "₹25,00,000 - ₹25,00,00,000",
    }
  ];

  const b2cProducts = [
    {
      name: "Small Business Solar",
      capacity: "5kW - 25kW",
      efficiency: "High Efficiency",
      warranty: "25 years",
      features: ["Small Business", "Quick ROI", "Easy Installation", "Warranty Support"],
      price: "₹2,50,000 - ₹12,50,000",
    },
    {
      name: "Shop Solar System",
      capacity: "3kW - 10kW",
      efficiency: "Good Efficiency",
      warranty: "25 years",
      features: ["Shop Use", "Affordable", "Easy Setup", "Maintenance Free"],
      price: "₹1,50,000 - ₹5,00,000",
    },
    {
      name: "Office Solar System",
      capacity: "10kW - 50kW",
      efficiency: "High Efficiency",
      warranty: "25 years",
      features: ["Office Use", "Professional Setup", "Monitoring", "Support"],
      price: "₹5,00,000 - ₹25,00,000",
    }
  ];

  const b2bBenefits = [
    "Bulk pricing for large projects",
    "Custom design and engineering",
    "Complete EPC services",
    "Financing and funding support",
    "Project management and execution",
    "Extended warranty and maintenance"
  ];

  const b2cBenefits = [
    "Easy EMI options available",
    "Free site survey and design",
    "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/commercial-solar.png" alt="Commercial" 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">Commercial Solutions</h1>
              <p className="text-lg text-theme-secondary max-w-2xl mx-auto">
                Large-scale renewable energy solutions for businesses and industries. Reduce energy costs and carbon footprint with our commercial systems.
              </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"><Building 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"><Building 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"><Building 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>
  );
}