import { Link } from 'react-router-dom'
import { Battery, Zap, Truck, Sun } from 'lucide-react'
import SearchBar from '../components/SearchBar'
import CategoryCard from '../components/CategoryCard'
import { useState } from 'react'

export default function Home() {
  const [search, setSearch] = useState('')

  return (
    <div>
      {/* Hero */}
      <section className="max-w-5xl mx-auto px-6 pt-20 pb-16 text-center">
        <div className="inline-block px-4 py-1 rounded-full bg-sky-100 dark:bg-sky-950 text-sky-600 dark:text-sky-400 text-sm font-medium mb-4">
          2026 • Industrial Tech
        </div>
        <h1 className="text-6xl md:text-7xl font-semibold tracking-tighter leading-none mb-6">
          Промышленные<br />аккумуляторы<br />в одном месте
        </h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 max-w-md mx-auto mb-10">
          Сравнивайте, выбирайте и заказывайте LiFePO4, AGM, GEL и свинцово-кислотные батареи для любой отрасли.
        </p>

        <div className="max-w-md mx-auto">
          <SearchBar value={search} onChange={setSearch} />
        </div>
        <div className="mt-4">
          <Link to="/catalog" className="text-sm text-sky-500 hover:underline">Или перейдите сразу в каталог →</Link>
        </div>
      </section>

      {/* Categories */}
      <section className="max-w-6xl mx-auto px-6 pb-20">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <CategoryCard 
            title="Солнечные станции" 
            count={124} 
            icon={<Sun className="w-6 h-6" />} 
            to="/catalog?app=Solar" 
          />
          <CategoryCard 
            title="ИБП и резерв" 
            count={89} 
            icon={<Zap className="w-6 h-6" />} 
            to="/catalog?app=UPS" 
          />
          <CategoryCard 
            title="Тяговые (погрузчики)" 
            count={67} 
            icon={<Truck className="w-6 h-6" />} 
            to="/catalog?app=Forklift" 
          />
          <CategoryCard 
            title="Морские и RV" 
            count={41} 
            icon={<Battery className="w-6 h-6" />} 
            to="/catalog?app=Marine" 
          />
        </div>
      </section>

      {/* Stats */}
      <section className="border-t border-gray-200 dark:border-gray-800 py-12">
        <div className="max-w-6xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-y-8 text-center">
          <div>
            <div className="text-4xl font-semibold tabular-nums">480</div>
            <div className="text-sm text-gray-500 mt-1">моделей в каталоге</div>
          </div>
          <div>
            <div className="text-4xl font-semibold tabular-nums">38</div>
            <div className="text-sm text-gray-500 mt-1">поставщиков</div>
          </div>
          <div>
            <div className="text-4xl font-semibold tabular-nums">12 400</div>
            <div className="text-sm text-gray-500 mt-1">заказов в 2025</div>
          </div>
          <div>
            <div className="text-4xl font-semibold tabular-nums">4.8</div>
            <div className="text-sm text-gray-500 mt-1">средняя оценка</div>
          </div>
        </div>
      </section>
    </div>
  )
}