'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { motion, AnimatePresence } from 'framer-motion';
import { Icon, WhatsappGlyph } from './icons';
import { Button } from './ui/button';
import { site } from '@/lib/site';
import { waGeneralInquiry } from '@/lib/whatsapp';

export interface HeroSlide {
    id: number;
    title: string;
    href: string;
    image: string;
    badge?: string;
    sku?: string;
}

interface Props { slides: HeroSlide[]; }

const FALLBACK: HeroSlide[] = [
    { id: 0, title: 'Diesel Generator Sets', href: '/category/generators', image: '', badge: 'Featured' },
];

export function Hero({ slides }: Props) {
    const items = slides.length ? slides : FALLBACK;
    const [idx, setIdx] = useState(0);

    useEffect(() => {
        if (items.length < 2) return;
        const t = setInterval(() => setIdx((i) => (i + 1) % items.length), 5500);
        return () => clearInterval(t);
    }, [items.length]);

    const current = items[idx];

    return (
        <section className="relative bg-mesh-orange bg-noise overflow-hidden">
            {/* Backdrop product image — blurred + faded */}
            <div className="absolute inset-0 z-0 opacity-25">
                <AnimatePresence mode="wait">
                    {current.image && (
                        <motion.div
                            key={current.id}
                            initial={{ opacity: 0, scale: 1.05 }}
                            animate={{ opacity: 1, scale: 1 }}
                            exit={{ opacity: 0, scale: 1 }}
                            transition={{ duration: 1.2 }}
                            className="absolute inset-0"
                            style={{
                                backgroundImage: `url(${current.image})`,
                                backgroundSize: 'cover',
                                backgroundPosition: 'center',
                                filter: 'blur(28px) saturate(140%)',
                            }}
                        />
                    )}
                </AnimatePresence>
            </div>
            <div className="absolute inset-0 z-0 bg-gradient-to-r from-ink-950/95 via-ink-950/85 to-ink-950/40" />

            <div className="relative z-10 container-jt pt-12 pb-16 sm:pt-16 sm:pb-20 lg:pt-24 lg:pb-28 xl:pt-28 xl:pb-32 grid lg:grid-cols-[1.15fr_1fr] gap-10 lg:gap-12 xl:gap-16 items-center min-h-[calc(100svh-72px)] lg:min-h-[calc(100vh-72px-36px)]">
                {/* Copy column */}
                <motion.div
                    initial="hidden"
                    animate="show"
                    variants={{
                        hidden: { opacity: 0, y: 24 },
                        show: { opacity: 1, y: 0, transition: { staggerChildren: 0.08, delayChildren: 0.05 } },
                    }}
                >
                    <motion.span
                        variants={{ hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0 } }}
                        className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-orange-600/10 border border-orange-600/30 text-orange-400 font-mono text-xs tracking-widest uppercase mb-6"
                    >
                        <span className="w-1.5 h-1.5 rounded-full bg-orange-500 shadow-[0_0_8px_var(--color-orange-500)]" />
                        Industrial Equipment · Uganda
                    </motion.span>
                    <motion.h1
                        variants={{ hidden: { opacity: 0, y: 16 }, show: { opacity: 1, y: 0 } }}
                        className="font-display text-white text-[clamp(2.75rem,6vw,5.25rem)] leading-[0.95] tracking-tight mb-5"
                    >
                        Uganda&rsquo;s Trusted<br />
                        <span className="text-orange-500">Hardware &amp; Tech</span><br />
                        Supplier
                    </motion.h1>
                    <motion.p
                        variants={{ hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0 } }}
                        className="text-steel-300 text-lg max-w-xl mb-8"
                    >
                        Generators, water pumps, agricultural machinery and power tools — sized,
                        delivered and serviced for sites, farms and workshops across the country.
                    </motion.p>

                    {/* Search bar */}
                    <motion.form
                        variants={{ hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0 } }}
                        action="/search"
                        className="flex w-full max-w-xl glass rounded-lg overflow-hidden mb-7 focus-within:border-orange-600/50"
                    >
                        <div className="pl-4 flex items-center text-steel-400">
                            <Icon.Search className="w-5 h-5" />
                        </div>
                        <input
                            type="search"
                            name="q"
                            placeholder="Search generators, brand, kVA, model…"
                            className="flex-1 bg-transparent px-3 h-12 text-white placeholder:text-steel-500 outline-none"
                        />
                        <button type="submit" className="bg-orange-600 hover:bg-orange-700 text-white font-semibold px-5 text-sm uppercase tracking-wide">
                            Search
                        </button>
                    </motion.form>

                    {/* CTAs */}
                    <motion.div
                        variants={{ hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0 } }}
                        className="flex flex-wrap gap-3 mb-10"
                    >
                        <Button asChild size="lg" variant="primary">
                            <Link href="/quote">
                                <Icon.FileText className="w-4 h-4" /> Request Quotation
                            </Link>
                        </Button>
                        <Button asChild size="lg" variant="whatsapp">
                            <a href={waGeneralInquiry()} target="_blank" rel="noopener">
                                <WhatsappGlyph className="w-4 h-4" /> WhatsApp Inquiry
                            </a>
                        </Button>
                        <Button asChild size="lg" variant="ghost">
                            <Link href="/products">Browse Categories</Link>
                        </Button>
                    </motion.div>

                    {/* Trust strip */}
                    <motion.div
                        variants={{ hidden: { opacity: 0, y: 12 }, show: { opacity: 1, y: 0 } }}
                        className="flex flex-wrap gap-x-7 gap-y-3 pt-7 border-t border-white/10 text-sm text-steel-300"
                    >
                        <span className="inline-flex items-center gap-2"><Icon.Check className="w-4 h-4 text-orange-500" /> <strong className="text-white font-semibold">Genuine</strong> brands &amp; parts</span>
                        <span className="inline-flex items-center gap-2"><Icon.Truck className="w-4 h-4 text-orange-500" /> <strong className="text-white font-semibold">Country-wide</strong> delivery</span>
                        <span className="inline-flex items-center gap-2"><Icon.Shield className="w-4 h-4 text-orange-500" /> <strong className="text-white font-semibold">Warranty</strong> on every unit</span>
                    </motion.div>
                </motion.div>

                {/* Featured product card / slider */}
                <motion.div
                    initial={{ opacity: 0, y: 30 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.7, delay: 0.25, ease: [0.22, 1, 0.36, 1] }}
                    className="hidden lg:block"
                >
                    <div className="relative glass rounded-2xl p-6">
                        <div className="absolute -top-3 right-6 px-3 py-1.5 rounded-md bg-orange-600 text-white font-mono text-xs uppercase tracking-widest">
                            {current.badge ?? 'Featured'}
                        </div>
                        <AnimatePresence mode="wait">
                            <motion.div
                                key={current.id}
                                initial={{ opacity: 0, scale: 0.96 }}
                                animate={{ opacity: 1, scale: 1 }}
                                exit={{ opacity: 0, scale: 0.96 }}
                                transition={{ duration: 0.4 }}
                                className="aspect-square bg-white rounded-xl overflow-hidden mb-5 relative"
                            >
                                {current.image ? (
                                    <Image
                                        src={current.image}
                                        alt={current.title}
                                        fill
                                        sizes="(max-width: 1024px) 100vw, 480px"
                                        className="object-contain p-4"
                                        priority
                                    />
                                ) : (
                                    <div className="w-full h-full flex items-center justify-center text-steel-300">
                                        <Icon.Cog className="w-24 h-24" />
                                    </div>
                                )}
                            </motion.div>
                        </AnimatePresence>
                        <div className="flex items-center justify-between gap-3">
                            <div className="min-w-0">
                                <h3 className="font-display text-xl text-white truncate uppercase">{current.title}</h3>
                                {current.sku && <p className="font-mono text-xs text-steel-400 mt-0.5">SKU: {current.sku}</p>}
                            </div>
                            <Button asChild size="sm" variant="primary">
                                <Link href={current.href}>
                                    View <Icon.ArrowRight className="w-3.5 h-3.5" />
                                </Link>
                            </Button>
                        </div>
                        {/* Slide dots */}
                        {items.length > 1 && (
                            <div className="flex gap-1.5 mt-5 justify-center">
                                {items.map((_, i) => (
                                    <button
                                        key={i}
                                        onClick={() => setIdx(i)}
                                        aria-label={`Slide ${i + 1}`}
                                        className={`h-1.5 rounded-full transition-all ${i === idx ? 'w-8 bg-orange-500' : 'w-1.5 bg-white/20'}`}
                                    />
                                ))}
                            </div>
                        )}
                    </div>
                </motion.div>
            </div>
        </section>
    );
}