import Link from 'next/link';
import CompatibilityChecker from '@/components/CompatibilityChecker';
import ProductCard from '@/components/ProductCard';
import { ArrowRight, ShieldCheck, Cpu, Flame, Zap, CheckCircle2 } from 'lucide-react';
import { Product } from '@/types';

// Mock/Initial sample dataset matching the database schema
const featuredProducts: Product[] = [
  {
    id: 1,
    name: 'Voltix Pro 48V 30Ah LiFePO4 Scooter Battery',
    slug: 'voltix-pro-48v-30ah-lifepo4',
    sku: 'BAT-48V-30AH-LFP',
    price: '22500.00',
    discount_price: '19999.00',
    final_price: '19999.00',
    stock: 25,
    voltage: '48V',
    capacity_ah: '30.00',
    nominal_energy_kwh: '1.44',
    chemistry: 'LFP',
    warranty_months: 36,
    category: 1,
    brand: 1,
    brand_name: 'Voltix Energy',
    images: []
  },
  {
    id: 2,
    name: 'NexCell Ultra 60V 42Ah Long-Range NMC Battery',
    slug: 'nexcell-ultra-60v-42ah-nmc',
    sku: 'BAT-60V-42AH-NMC',
    price: '34999.00',
    discount_price: '31499.00',
    final_price: '31499.00',
    stock: 14,
    voltage: '60V',
    capacity_ah: '42.00',
    nominal_energy_kwh: '2.52',
    chemistry: 'NMC',
    warranty_months: 24,
    category: 1,
    brand: 2,
    brand_name: 'NexCell Power',
    images: []
  },
  {
    id: 3,
    name: 'Voltix HeavyHaul 72V 100Ah Commercial E-Rickshaw Battery',
    slug: 'voltix-heavyhaul-72v-100ah',
    sku: 'BAT-72V-100AH-LFP',
    price: '78000.00',
    discount_price: '72999.00',
    final_price: '72999.00',
    stock: 8,
    voltage: '72V',
    capacity_ah: '100.00',
    nominal_energy_kwh: '7.20',
    chemistry: 'LFP',
    warranty_months: 36,
    category: 3,
    brand: 1,
    brand_name: 'Voltix Energy',
    images: []
  }
];

export default function HomePage() {
  return (
    <div>
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-slate-900 text-white pt-16 pb-20 sm:pt-24 sm:pb-28">
        <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#10b981_1px,transparent_1px)] [background-size:16px_16px]" />
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="max-w-2xl">
            <span className="inline-flex items-center space-x-2 bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-xs font-semibold px-3 py-1 rounded-full mb-6">
              <Zap className="w-3.5 h-3.5" />
              AIS-156 Certified EV Lithium Battery Technology
            </span>
            <h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight leading-tight">
              Power Your Ride with <span className="text-emerald-400">Next-Gen</span> EV Batteries
            </h1>
            <p className="mt-4 text-base sm:text-lg text-slate-300 leading-relaxed">
              Industrial LiFePO4 & NMC battery packs designed for India’s climate. High thermal stability, intelligent active balancing Smart BMS, and certified plug-and-play vehicle compatibility.
            </p>

            <div className="mt-8 flex flex-wrap gap-4">
              <Link
                href="/products"
                className="bg-emerald-500 hover:bg-emerald-600 text-white font-bold text-sm px-6 py-3 rounded-lg shadow-lg shadow-emerald-500/25 transition inline-flex items-center"
              >
                Explore All Batteries
                <ArrowRight className="w-4 h-4 ml-2" />
              </Link>
              <Link
                href="#checker"
                className="bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white font-semibold text-sm px-6 py-3 rounded-lg transition"
              >
                Compatibility Matcher
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Main Container */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Interactive Compatibility Engine Anchor */}
        <section id="checker">
          <CompatibilityChecker />
        </section>

        {/* Value Proposition Highlights */}
        <section className="my-16 grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="bg-white p-6 rounded-xl border border-slate-200">
            <div className="bg-emerald-50 w-12 h-12 rounded-lg flex items-center justify-center text-emerald-600 mb-4">
              <ShieldCheck className="w-6 h-6" />
            </div>
            <h3 className="font-bold text-slate-900 text-lg">Thermal Runaway Protection</h3>
            <p className="text-sm text-slate-600 mt-2">
              Advanced cell-level fire retardant materials tested up to 60°C operating conditions, compliant with Indian safety norms.
            </p>
          </div>

          <div className="bg-white p-6 rounded-xl border border-slate-200">
            <div className="bg-emerald-50 w-12 h-12 rounded-lg flex items-center justify-center text-emerald-600 mb-4">
              <Cpu className="w-6 h-6" />
            </div>
            <h3 className="font-bold text-slate-900 text-lg">Smart Bluetooth BMS</h3>
            <p className="text-sm text-slate-600 mt-2">
              Monitor individual cell voltages, temperature sensors, state of charge (SoC), and health directly from your mobile smartphone.
            </p>
          </div>

          <div className="bg-white p-6 rounded-xl border border-slate-200">
            <div className="bg-emerald-50 w-12 h-12 rounded-lg flex items-center justify-center text-emerald-600 mb-4">
              <CheckCircle2 className="w-6 h-6" />
            </div>
            <h3 className="font-bold text-slate-900 text-lg">2000+ Deep Cycles</h3>
            <p className="text-sm text-slate-600 mt-2">
              Grade-A prismatic and cylindrical cells delivering over 5 years of daily commercial and personal commuting usage.
            </p>
          </div>
        </section>

        {/* Featured Products */}
        <section className="my-16">
          <div className="flex flex-col sm:flex-row sm:items-end justify-between mb-8">
            <div>
              <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900">Featured EV Batteries</h2>
              <p className="text-sm text-slate-500 mt-1">Direct OEM replacements and high-capacity upgrades</p>
            </div>
            <Link href="/products" className="text-emerald-600 font-bold text-sm hover:underline mt-2 sm:mt-0 flex items-center">
              View all products <ArrowRight className="w-4 h-4 ml-1" />
            </Link>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {featuredProducts.map((p) => (
              <ProductCard key={p.id} product={p} />
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}