'use client';

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ExternalLink, Sparkles, Wind, Pill, Coffee, Star, Quote } from 'lucide-react';
import Image from 'next/image';
import { useTheme } from '@/lib/theme-context';
import { Badge } from '@/components/ui/badge';

const smokingAids = [
    {
        id: 'breathing-necklace',
        title: '528Hz Anxiety Relief Breathing Necklace',
        category: 'Mindfulness',
        rating: 4.6,
        description: 'A discreet mindfulness tool designed to help you manage cravings and anxiety through deep breathing exercises. The 528Hz frequency is associated with relaxation and healing.',
        benefit: 'Helps replace the physical hand-to-mouth habit while promoting calming deep breaths during stressful moments or cravings.',
        image: 'https://m.media-amazon.com/images/I/51VJ5HANaRL._AC_SY695_.jpg',
        url: 'https://amzn.to/3Z2BuCk',
        icon: Wind,
        color: 'text-sky-400',
        themeColor: 'sky',
        gradient: 'from-sky-500/20 to-indigo-500/20',
        borderColor: 'border-sky-500/30',
    },
    {
        id: 'nicotine-lozenge',
        title: 'Nicotine Polacrilex Lozenge (2mg)',
        category: 'NRT',
        rating: 4.5,
        description: 'Effective nicotine replacement therapy to help control withdrawal symptoms. These lozenges provide a controlled dose of nicotine to ease you off cigarettes.',
        benefit: 'Reduces physical withdrawal symptoms like irritability and intense cravings, making the transition to being smoke-free smoother.',
        image: 'https://m.media-amazon.com/images/I/61h+Z88Ev9S._AC_SX679_.jpg',
        url: 'https://amzn.to/4rfQl8s',
        icon: Pill,
        color: 'text-rose-400',
        themeColor: 'rose',
        gradient: 'from-rose-500/20 to-pink-500/20',
        borderColor: 'border-rose-500/30',
    },
    {
        id: 'recovery-complex',
        title: 'QuitK Recovery Complex',
        category: 'Supplement',
        rating: 4.4,
        description: 'A comprehensive supplement blend containing Magnesium, Ashwagandha, and GABA designed specifically to support your body during the detox process.',
        benefit: 'Supports mood stability and relaxation while your body clears out toxins, helping to minimize the mental strain of quitting.',
        image: 'https://m.media-amazon.com/images/I/51HWgmCW1-L._AC_SX679_.jpg',
        url: 'https://amzn.to/3NFU1Sx',
        icon: Sparkles,
        color: 'text-amber-400',
        themeColor: 'amber',
        gradient: 'from-amber-500/20 to-orange-500/20',
        borderColor: 'border-amber-500/30',
    },
    {
        id: 'mullein-tea',
        title: 'Tarbust Mullein Tea for Lung Detox',
        category: 'Herbal',
        rating: 4.7,
        description: 'Organic herbal tea formulated with Mullein leaf, traditionally used to support respiratory health and clear congestion.',
        benefit: 'Aids in clearing mucus and toxins from your lungs, supporting your body\'s natural healing process as you recover from smoking.',
        image: 'https://m.media-amazon.com/images/I/81NU8bv72uL._SX679_PIbundle-20,TopRight,0,0_SX679SY693SH20_.jpg',
        url: 'https://amzn.to/3LzNpEM',
        icon: Coffee,
        color: 'text-emerald-400',
        themeColor: 'emerald',
        gradient: 'from-emerald-500/20 to-teal-500/20',
        borderColor: 'border-emerald-500/30',
    },
];

export function SmokingAidsContent() {
    const { theme } = useTheme();

    return (
        <div className="min-h-screen pb-24 pt-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto space-y-16 overflow-hidden">
            {/* Hero Section */}
            <div className="relative text-center space-y-6 max-w-4xl mx-auto animate-in fade-in slide-in-from-bottom-8 duration-1000">
                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-purple-500/10 dark:bg-purple-500/5 rounded-full blur-[120px] -z-10 animate-pulse-subtle" />

                <h1 className="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight">
                    Tools for Your <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-orange-400 animate-gradient-x">Freedom</span>
                </h1>
                <p className="text-lg sm:text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto font-medium">
                    Transform your journey with tools designed to support your physical recovery and mental resilience. You don&apos;t have to do this alone.
                </p>
            </div>

            {/* Grid Section */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10">
                {smokingAids.map((item, index) => {
                    const cardBackground = theme === 'light'
                        ? `linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 100%)`
                        : `linear-gradient(135deg, rgba(16, 16, 32, 0.7) 0%, rgba(24, 24, 48, 0.6) 100%)`;

                    return (
                        <div
                            key={item.id}
                            className="group animate-in fade-in slide-in-from-bottom-12 fill-mode-both"
                            style={{ animationDelay: `${index * 150}ms` }}
                        >
                            <Card
                                className="h-full flex flex-col overflow-hidden border-border/40 transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.2)] dark:hover:shadow-[0_20px_50px_rgba(0,0,0,0.4)] hover:-translate-y-2 backdrop-blur-xl relative group"
                                style={{
                                    background: cardBackground,
                                    borderColor: `rgba(var(--${item.themeColor}-500), 0.3)`
                                }}
                            >
                                {/* Specific card glow on hover */}
                                <div className={`absolute top-0 right-0 w-64 h-64 opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none blur-[80px] -translate-y-1/2 translate-x-1/2`}
                                    style={{ backgroundColor: `rgba(var(--${item.themeColor}-500), 0.1)` }} />

                                <div className="flex flex-col sm:flex-row h-full relative z-10">
                                    {/* Image Section - Now with seamless blending */}
                                    <div className="relative w-full sm:w-2/5 h-72 sm:h-auto overflow-hidden flex items-center justify-center shrink-0">
                                        {/* Atmospheric background glow - larger and softer */}
                                        <div className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-20 group-hover:opacity-40 transition-all duration-700 blur-[60px] transform scale-150`} />

                                        {/* Vertical fader to blend image area into content area */}
                                        <div className="absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-transparent to-transparent group-hover:from-white/5 transition-colors duration-500 hidden sm:block" />

                                        <div className="relative w-48 h-48 sm:w-56 sm:h-56 transition-all duration-1000 group-hover:scale-105 flex items-center justify-center">
                                            {/* High-fidelity glass orb effect */}
                                            <div className="absolute inset-0 bg-white/10 dark:bg-white/[0.03] backdrop-blur-[30px] rounded-full border border-white/20 dark:border-white/10 shadow-[0_0_50px_rgba(0,0,0,0.3)]" />

                                            {/* Inner glow/shimmer */}
                                            <div className="absolute inset-2 rounded-full bg-gradient-to-tr from-white/10 to-transparent opacity-50" />

                                            <div className="relative w-[75%] h-[75%] z-20">
                                                <Image
                                                    src={item.image}
                                                    alt={item.title}
                                                    fill
                                                    className="object-contain filter drop-shadow-[0_15px_15px_rgba(0,0,0,0.4)] brightness-110"
                                                    style={{
                                                        maskImage: 'radial-gradient(circle at center, black 60%, transparent 100%)',
                                                        WebkitMaskImage: 'radial-gradient(circle at center, black 60%, transparent 100%)'
                                                    }}
                                                    sizes="(max-width: 640px) 100vw, 300px"
                                                />
                                            </div>
                                        </div>
                                        <div className="absolute top-4 left-4">
                                            <Badge className="bg-white/10 dark:bg-black/20 backdrop-blur-xl text-foreground border-white/20 px-3 py-1.5 text-xs font-bold uppercase tracking-widest shadow-lg">
                                                {item.category}
                                            </Badge>
                                        </div>
                                    </div>

                                    {/* Content Section */}
                                    <div className="flex flex-col flex-grow p-6 sm:p-8">
                                        <div className="flex items-start justify-between gap-4 mb-4">
                                            <div className="flex-1">
                                                <h3 className="text-xl sm:text-2xl font-bold tracking-tight group-hover:text-primary transition-colors duration-300">
                                                    {item.title}
                                                </h3>
                                                <div className="flex items-center gap-1.5 mt-3">
                                                    {[...Array(5)].map((_, i) => (
                                                        <Star
                                                            key={i}
                                                            className={`w-4 h-4 ${i < Math.floor(item.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-muted-foreground/30'}`}
                                                        />
                                                    ))}
                                                    <span className="text-xs font-bold text-muted-foreground/70 ml-2 tracking-wide tracking-widest">{item.rating}</span>
                                                </div>
                                            </div>
                                            <div className={`p-3 rounded-2xl bg-white/5 border border-white/10 ${item.color} shadow-lg shrink-0 group-hover:scale-110 transition-transform duration-500`}>
                                                <item.icon className="w-5 h-5 sm:w-6 sm:h-6" />
                                            </div>
                                        </div>

                                        <p className="text-muted-foreground/80 text-sm leading-relaxed mb-8 line-clamp-3 font-medium">
                                            {item.description}
                                        </p>

                                        <div className={`mt-auto p-5 rounded-2xl bg-gradient-to-br ${item.gradient} border ${item.borderColor} mb-8 relative overflow-hidden group/benefit`}>
                                            <div className="absolute inset-0 bg-white/5 opacity-0 group-hover/benefit:opacity-100 transition-opacity duration-500" />
                                            <div className="flex gap-4 relative z-10">
                                                <Quote className={`w-5 h-5 ${item.color} shrink-0 opacity-80`} />
                                                <p className="text-[13px] font-semibold leading-relaxed opacity-90 italic">
                                                    {item.benefit}
                                                </p>
                                            </div>
                                        </div>

                                        <Button
                                            asChild
                                            className={`w-full text-white font-bold shadow-[0_10px_20px_rgba(0,0,0,0.2)] hover:shadow-[0_15px_30px_rgba(0,0,0,0.3)] transition-all duration-500 hover:ring-2 hover:ring-${item.themeColor}-500/50 hover:ring-offset-4 hover:ring-offset-background bg-gradient-to-r from-primary to-primary/80 rounded-2xl h-14 group-hover:scale-[1.02] active:scale-95`}
                                        >
                                            <a href={item.url} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-3">
                                                View Details
                                                <ExternalLink className="w-5 h-5 opacity-70 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
                                            </a>
                                        </Button>
                                    </div>
                                </div>
                            </Card>
                        </div>
                    );
                })}
            </div>

            {/* Trust/Disclaimer Section */}
            <div className="border-t border-border/40 py-12 text-center space-y-4">
                <p className="text-sm text-muted-foreground max-w-2xl mx-auto px-4">
                    <span className="block font-medium mb-1 text-foreground/80">Transparency Note</span>
                    As an Amazon Associate, we earn from qualifying purchases. This helps support the development of QuitTraq at no extra cost to you.
                    Always consult with a healthcare professional before starting any new supplement or nicotine replacement therapy.
                </p>
            </div>
        </div>
    );
}
