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

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

  const b2bProducts = [
    {
      name: "Solar Cables & Wires",
      type: "DC Cables",
      rating: "4mm² - 95mm²",
      warranty: "5 years",
      features: ["UV Resistant", "Weatherproof", "High Quality", "Bulk Pricing"],
      price: "₹50 - ₹500 per meter",
    },
    {
      name: "MC4 Connectors",
      type: "Panel Connectors",
      rating: "30A - 50A",
      warranty: "10 years",
      features: ["IP67 Rated", "Easy Installation", "Reliable", "Bulk Orders"],
      price: "₹100 - ₹500 per pair",
    },
    {
      name: "DC Disconnect Switches",
      type: "Safety Switches",
      rating: "32A - 250A",
      warranty: "5 years",
      features: ["Safety Rated", "Easy Operation", "Durable", "Professional Grade"],
      price: "₹2,000 - ₹25,000 per unit",
    },
    {
      name: "Fuses & Circuit Breakers",
      type: "Protection Devices",
      rating: "10A - 200A",
      warranty: "3 years",
      features: ["Overload Protection", "Short Circuit", "Reliable", "Standard Rated"],
      price: "₹500 - ₹5,000 per unit",
    }
  ];

  const b2cProducts = [
    {
      name: "Solar Cable Set",
      type: "DC Cable",
      rating: "4mm² - 6mm²",
      warranty: "3 years",
      features: ["Home Use", "Easy Install", "Weatherproof", "Affordable"],
      price: "₹500 - ₹2,000 per set",
    },
    {
      name: "MC4 Connector Kit",
      type: "Connectors",
      rating: "30A",
      warranty: "5 years",
      features: ["Complete Kit", "Easy Use", "Waterproof", "Warranty"],
      price: "₹300 - ₹1,500 per kit",
    },
    {
      name: "DC Switch",
      type: "Safety Switch",
      rating: "32A - 63A",
      warranty: "3 years",
      features: ["Safety First", "Easy Install", "Reliable", "Home Use"],
      price: "₹1,500 - ₹5,000 per unit",
    }
  ];

  const b2bBenefits = [
    "Bulk pricing for large orders",
    "Custom specifications available",
    "Technical consultation and support",
    "GST billing and documentation",
    "Quality assurance and testing",
    "Extended warranty options"
  ];

  const b2cBenefits = [
    "Easy EMI options available",
    "Free installation guide",
    "24/7 customer support",
    "Easy warranty claims",
    "Product recommendations",
    "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/accesories.png" alt="Accessories" 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">Accessories</h1>
              <p className="text-lg text-theme-secondary max-w-2xl mx-auto">
                Essential accessories and components for your solar and renewable energy systems. Quality connectors, switches, and protection devices.
              </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"><Wrench 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>Type: {product.type}</span></div>
                            <div className="flex items-center gap-2"><Wrench className="w-4 h-4 text-primary-500" /><span>Rating: {product.rating}</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"><Wrench 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.type}</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>
  );
}