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

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

  const b2bProducts = [
    {
      name: "Monocrystalline Solar Panel",
      power: "400W - 600W",
      efficiency: "20% - 22%",
      warranty: "25 years",
      features: ["High Efficiency", "Space Efficient", "Durable", "Low Degradation"],
      price: "₹18,000 - ₹35,000 per panel",
      image: "/gallery/category/solar-panel-png.png"
    },
    {
      name: "Polycrystalline Solar Panel",
      power: "300W - 500W",
      efficiency: "17% - 19%",
      warranty: "25 years",
      features: ["Cost Effective", "Good Performance", "Reliable", "Wide Availability"],
      price: "₹12,000 - ₹22,000 per panel",
      image: "/gallery/category/solar-panel-png.png"
    },
    {
      name: "Bifacial Solar Panel",
      power: "450W - 650W",
      efficiency: "21% - 23%",
      warranty: "30 years",
      features: ["Dual Sided", "Higher Output", "Advanced Technology", "Long Lasting"],
      price: "₹25,000 - ₹45,000 per panel",
      image: "/gallery/category/solar-panel-png.png"
    },
    {
      name: "Thin Film Solar Panel",
      power: "100W - 300W",
      efficiency: "12% - 15%",
      warranty: "20 years",
      features: ["Flexible", "Lightweight", "Low Light Performance", "Easy Installation"],
      price: "₹8,000 - ₹18,000 per panel",
      image: "/gallery/category/solar-panel-png.png"
    }
  ];

  const b2cProducts = [
    {
      name: "Residential Solar Panel",
      power: "330W - 450W",
      efficiency: "19% - 21%",
      warranty: "25 years",
      features: ["Home Installation", "Easy Setup", "Warranty Support", "Maintenance Free"],
      price: "₹15,000 - ₹28,000 per panel",
      image: "/gallery/category/solar-panel-png.png"
    },
    {
      name: "Portable Solar Panel",
      power: "50W - 200W",
      efficiency: "18% - 20%",
      warranty: "5 years",
      features: ["Portable", "Foldable Design", "USB Output", "Lightweight"],
      price: "₹3,000 - ₹12,000 per panel",
      image: "/gallery/category/solar-panel-png.png"
    },
    {
      name: "Rooftop Solar Kit",
      power: "1kW - 5kW",
      efficiency: "19% - 21%",
      warranty: "25 years",
      features: ["Complete Kit", "Installation Included", "Inverter Included", "Warranty"],
      price: "₹50,000 - ₹2,50,000 per kit",
      image: "/gallery/category/solar-panel-png.png"
    }
  ];

  const b2bBenefits = [
    "Bulk pricing for large orders",
    "Custom configurations available",
    "Technical consultation and support",
    "GST billing and documentation",
    "Project installation 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">
            {/* Header */}
            <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/solar-panel-png.png"
                  alt="Solar Panels"
                  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">
                Solar Panels
              </h1>
              <p className="text-lg text-theme-secondary max-w-2xl mx-auto">
                High-quality solar panels for residential, commercial, and industrial applications. 
                Harness the power of the sun with our premium solar panel solutions.
              </p>
            </motion.div>

            {/* Tabs */}
            <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>

            {/* B2B Content */}
            {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">
                          <Sun 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">
                              <Sun 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>
            )}

            {/* B2C Content */}
            {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">
                          <Sun 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>
  );
}