import Link from 'next/link'
import { ArrowRight, Mail, Shield, Award, Clock, Truck } from 'lucide-react'
import { products, categoryLabels, type ProductCategory } from '@/lib/products'
import ProductCard from '@/components/ProductCard'

const CATEGORIES: ProductCategory[] = ['sterowniki', 'czujniki', 'maskownice', 'zestawy']

const STATS = [
  { value: '15+', label: 'lat doświadczenia' },
  { value: '24', label: 'produktów' },
  { value: '2 lata', label: 'gwarancji' },
  { value: '5★', label: 'ocena klientów' },
]

const FEATURES = [
  {
    icon: Shield,
    title: '2-letnia gwarancja',
    desc: 'Pełna gwarancja na każdy sterownik. Dodatkowo 30-dniowa gwarancja uruchomienia – nawet przy przypadkowym uszkodzeniu podczas montażu.',
  },
  {
    icon: Award,
    title: 'Polska produkcja',
    desc: 'Sterowniki projektowane i produkowane w Polsce. Odporne na przepięcia, trwałe – nie są to produkty rodem z Azji.',
  },
  {
    icon: Clock,
    title: '14 dni na zwrot',
    desc: 'Kup, podłącz, sprawdź! Jeżeli sterownik nie spełni Twoich oczekiwań, odeślij go w ciągu 14 dni.',
  },
  {
    icon: Truck,
    title: 'Szybka dostawa',
    desc: 'InPost lub Poczta Polska. Przedpłata 15 zł, za pobraniem 20 zł.',
  },
]

const FAQS = [
  {
    q: 'Jakie czujniki wybrać?',
    a: 'W większości przypadków sprawdzają się czujniki optyczne Sharp z regulowanym zasięgiem (20–150 cm). Są odporne na zakłócenia od światła dziennego i sztucznego. Do prostszych zastosowań wystarczą czujniki mini PIR.',
  },
  {
    q: 'Jakich przewodów użyć?',
    a: 'Do każdego źródła światła: przewody dwużyłowe 0,5 mm² (np. linka OMYP). Do czujników: skrętka komputerowa w ekranie (3- lub 4-żyłowa) jako rozwiązanie uniwersalne.',
  },
  {
    q: 'Ile stopni może obsłużyć sterownik?',
    a: 'Oferujemy modele na 3–6, 5–10, 6–16, 8–17, 10–18, 10–19 i 11–17 stopni. Dla schodów o standardowej liczbie stopni (11–17) polecamy serię LCD ST, FZ lub FN.',
  },
  {
    q: 'Czy można podłączyć więcej niż 2 czujniki?',
    a: 'Tak, wybrane modele obsługują połączenie czujników szeregowe i równoległe. Modele LCD posiadają też niezależny kanał do oświetlenia podestowego lub balustrady.',
  },
]

export default function HomePage() {
  const featured = products.filter((p) => p.badge).slice(0, 4)
  const allPopular = products.filter((p) => p.category === 'zestawy').slice(0, 3)

  return (
    <>
      {/* ─── HERO ─────────────────────────────────────────────────────────── */}
      <section className="relative overflow-hidden bg-gradient-to-br from-brand-900 via-brand-800 to-brand-700">
        <div className="absolute inset-0 opacity-10">
          <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(circle at 20% 50%, white 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
        </div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 border border-white/20 rounded-full text-xs font-medium text-brand-200 mb-6">
              <span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
              Polska firma · 15 lat doświadczenia
            </div>
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-tight mb-6">
              Inteligentne<br />
              <span className="text-brand-300">sterowniki</span><br />
              oświetlenia schodów
            </h1>
            <p className="text-lg text-brand-100 leading-relaxed mb-8 max-w-xl">
              Sterowniki LED kaskadowe i jednokanałowe do oświetlenia schodów. Czujniki Sharp,
              maskownice stalowe i kompletne zestawy gotowe do montażu. Gwarancja 2 lata.
            </p>
            <div className="flex flex-wrap gap-3">
              <Link
                href="/produkty"
                className="inline-flex items-center gap-2 px-6 py-3 bg-white text-brand-700 font-semibold rounded-xl hover:bg-brand-50 transition-colors shadow-lg"
              >
                Zobacz produkty <ArrowRight className="w-4 h-4" />
              </Link>
              <Link
                href="/kontakt"
                className="inline-flex items-center gap-2 px-6 py-3 bg-brand-600/40 border border-white/20 text-white font-semibold rounded-xl hover:bg-brand-600/60 transition-colors"
              >
                <Mail className="w-4 h-4" /> Napisz do nas
              </Link>
            </div>
          </div>
        </div>
        <div className="border-t border-white/10">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 grid grid-cols-2 sm:grid-cols-4 gap-6">
            {STATS.map((s) => (
              <div key={s.label} className="text-center">
                <p className="text-2xl font-extrabold text-white">{s.value}</p>
                <p className="text-sm text-brand-300 mt-0.5">{s.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── KATEGORIE ────────────────────────────────────────────────────── */}
      <section className="py-16 bg-gray-50 dark:bg-gray-900 transition-colors">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-10">
            <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Nasza oferta</h2>
            <p className="text-gray-500 dark:text-gray-400 mt-2">Wszystko do profesjonalnego oświetlenia schodów</p>
          </div>
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
            {CATEGORIES.map((cat) => {
              const count = products.filter((p) => p.category === cat).length
              const colors: Record<string, string> = {
                sterowniki: 'from-brand-500 to-brand-700',
                czujniki: 'from-teal-500 to-teal-700',
                maskownice: 'from-purple-500 to-purple-700',
                zestawy: 'from-orange-500 to-orange-700',
              }
              return (
                <Link
                  key={cat}
                  href={`/produkty?kategoria=${cat}`}
                  className="group relative overflow-hidden rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:shadow-lg dark:hover:shadow-black/30 transition-all duration-200 p-6 flex flex-col"
                >
                  <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${colors[cat]} mb-4`} />
                  <h3 className="font-semibold text-gray-900 dark:text-white group-hover:text-brand-700 dark:group-hover:text-brand-400 transition-colors">
                    {categoryLabels[cat]}
                  </h3>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{count} produktów</p>
                  <ArrowRight className="w-4 h-4 text-gray-400 group-hover:text-brand-600 mt-auto self-end transition-all group-hover:translate-x-1" />
                </Link>
              )
            })}
          </div>
        </div>
      </section>

      {/* ─── POPULARNE ZESTAWY ────────────────────────────────────────────── */}
      <section className="py-16 bg-white dark:bg-gray-950 transition-colors">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between mb-10">
            <div>
              <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Popularne zestawy</h2>
              <p className="text-gray-500 dark:text-gray-400 mt-1">Kompletne rozwiązania gotowe do montażu</p>
            </div>
            <Link href="/produkty?kategoria=zestawy" className="hidden sm:inline-flex items-center gap-2 text-sm font-medium text-brand-600 dark:text-brand-400 hover:text-brand-700">
              Zobacz wszystkie <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {allPopular.map((p) => <ProductCard key={p.slug} product={p} />)}
          </div>
        </div>
      </section>

      {/* ─── WYRÓŻNIONE STEROWNIKI ────────────────────────────────────────── */}
      <section className="py-16 bg-gray-50 dark:bg-gray-900 transition-colors">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between mb-10">
            <div>
              <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Wyróżnione produkty</h2>
              <p className="text-gray-500 dark:text-gray-400 mt-1">Najczęściej wybierane przez naszych klientów</p>
            </div>
            <Link href="/produkty" className="hidden sm:inline-flex items-center gap-2 text-sm font-medium text-brand-600 dark:text-brand-400 hover:text-brand-700">
              Wszystkie produkty <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {featured.map((p) => <ProductCard key={p.slug} product={p} />)}
          </div>
        </div>
      </section>

      {/* ─── DLACZEGO MY ──────────────────────────────────────────────────── */}
      <section className="py-16 bg-white dark:bg-gray-950 transition-colors">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Dlaczego sterownikled.pl?</h2>
            <p className="text-gray-500 dark:text-gray-400 mt-2 max-w-xl mx-auto">
              Ponad 15 lat projektujemy i produkujemy sterowniki oświetlenia schodowego.
              Każdy produkt to polska myśl inżynierska.
            </p>
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {FEATURES.map((f) => (
              <div key={f.title} className="bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 p-6 hover:shadow-md dark:hover:shadow-black/20 transition-shadow">
                <div className="w-10 h-10 bg-brand-50 dark:bg-brand-950/50 rounded-xl flex items-center justify-center mb-4">
                  <f.icon className="w-5 h-5 text-brand-600 dark:text-brand-400" />
                </div>
                <h3 className="font-semibold text-gray-900 dark:text-white mb-2">{f.title}</h3>
                <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── CTA z kontaktem i FAQ ────────────────────────────────────────── */}
      <section className="py-16 bg-brand-900 dark:bg-brand-950">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl font-bold text-white mb-4">
                Nie wiesz, który sterownik wybrać?
              </h2>
              <p className="text-brand-200 leading-relaxed mb-6">
                Pomożemy dobrać odpowiedni model do Twoich schodów. Napisz do nas –
                doradzimy w wyborze sterownika, czujników i maskownic.
              </p>
              <Link
                href="/kontakt"
                className="inline-flex items-center gap-2 px-6 py-3 bg-white text-brand-700 font-semibold rounded-xl hover:bg-brand-50 transition-colors shadow-sm"
              >
                <Mail className="w-4 h-4" /> Napisz do nas
              </Link>
            </div>
            <div className="space-y-4">
              {FAQS.map((faq) => (
                <details key={faq.q} className="group bg-brand-800/50 dark:bg-brand-900/50 border border-brand-700 dark:border-brand-800 rounded-xl overflow-hidden">
                  <summary className="flex items-center justify-between px-5 py-4 cursor-pointer text-white font-medium text-sm list-none">
                    {faq.q}
                    <span className="ml-2 text-brand-400 group-open:rotate-180 transition-transform duration-200">▼</span>
                  </summary>
                  <div className="px-5 pb-4 text-brand-200 text-sm leading-relaxed">
                    {faq.a}
                  </div>
                </details>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  )
}