"use client";

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

export default function B2CPage() {
  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/b2c.png"
                  alt="B2C"
                  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">
                B2C Platform
              </h1>
              <p className="text-lg text-theme-secondary max-w-2xl mx-auto">
                Business-to-Consumer marketplace for solar products.
                Shop for residential solar solutions with easy payment options and doorstep delivery.
              </p>
            </motion.div>

            {/* Benefits */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              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">
                <div 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">Easy EMI options available</span>
                </div>
                <div 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">Doorstep delivery and installation</span>
                </div>
                <div 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">24/7 customer support</span>
                </div>
                <div 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">Easy returns and warranty claims</span>
                </div>
                <div 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">Product recommendations based on your needs</span>
                </div>
                <div 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">Secure payment options</span>
                </div>
              </div>
            </motion.div>

            {/* CTA */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="text-center"
            >
              <a
                href="https://solarvala.in/"
                target="_blank"
                rel="noopener noreferrer"
                className="btn-primary inline-flex items-center gap-2 text-lg px-8 py-4"
              >
                Visit B2C Platform
                <ArrowRight className="w-5 h-5" />
              </a>
            </motion.div>
          </div>
        </div>
        <Footer />
      </main>
    </ThemeProvider>
  );
}