import { Link } from 'react-router-dom';
import { Video, Shield, Users, Palette, ArrowRight, Zap, Globe } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';

export default function Home() {
  const { t } = useLanguage();

  const features = [
    {
      icon: Video,
      title: t('home.featureVideoTitle'),
      desc: t('home.featureVideoDesc'),
    },
    {
      icon: Users,
      title: t('home.featureRoomsTitle'),
      desc: t('home.featureRoomsDesc'),
    },
    {
      icon: Shield,
      title: t('home.featureUsersTitle'),
      desc: t('home.featureUsersDesc'),
    },
    {
      icon: Palette,
      title: t('home.featureThemesTitle'),
      desc: t('home.featureThemesDesc'),
    },
    {
      icon: Zap,
      title: t('home.featureRecordingsTitle'),
      desc: t('home.featureRecordingsDesc'),
    },
    {
      icon: Globe,
      title: t('home.featureOpenSourceTitle'),
      desc: t('home.featureOpenSourceDesc'),
    },
  ];

  return (
    <div className="min-h-screen bg-th-bg">
      {/* Hero Section */}
      <div className="relative overflow-hidden">
        {/* Background gradient */}
        <div className="absolute inset-0 gradient-bg opacity-5" />
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] gradient-bg opacity-10 blur-3xl rounded-full" />

        {/* Navbar */}
        <nav className="relative z-10 flex items-center justify-between px-6 md:px-12 py-4">
          <div className="flex items-center gap-2.5">
            <div className="w-9 h-9 gradient-bg rounded-lg flex items-center justify-center">
              <Video size={20} className="text-white" />
            </div>
            <span className="text-xl font-bold gradient-text">Redlight</span>
          </div>
          <div className="flex items-center gap-3">
            <Link to="/login" className="btn-ghost text-sm">
              {t('auth.login')}
            </Link>
            <Link to="/register" className="btn-primary text-sm">
              {t('auth.register')}
              <ArrowRight size={16} />
            </Link>
          </div>
        </nav>

        {/* Hero content */}
        <div className="relative z-10 max-w-4xl mx-auto text-center px-6 pt-20 pb-32">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-th-accent/10 text-th-accent text-sm font-medium mb-6">
            <Zap size={14} />
            {t('home.poweredBy')}
          </div>

          <h1 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-th-text mb-6 leading-tight tracking-tight">
            {t('home.heroTitle')}{' '}
            <span className="gradient-text">{t('home.heroTitleHighlight')}</span>
          </h1>

          <p className="text-lg md:text-xl text-th-text-s max-w-2xl mx-auto mb-10 leading-relaxed">
            {t('home.heroSubtitle')}
          </p>

          <div className="flex items-center gap-4 justify-center">
            <Link to="/register" className="btn-primary text-base px-8 py-3">
              {t('home.getStarted')}
              <ArrowRight size={18} />
            </Link>
            <Link to="/login" className="btn-secondary text-base px-8 py-3">
              {t('auth.login')}
            </Link>
          </div>

          {/* Stats */}
          <div className="flex items-center justify-center gap-8 md:gap-16 mt-16">
            {[
              { value: '15+', label: t('home.statThemes') },
              { value: '∞', label: t('home.statRooms') },
              { value: '100%', label: t('home.statOpenSource') },
            ].map(stat => (
              <div key={stat.label} className="text-center">
                <div className="text-2xl md:text-3xl font-bold gradient-text">{stat.value}</div>
                <div className="text-sm text-th-text-s mt-1">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Features Section */}
      <div className="max-w-6xl mx-auto px-6 py-20">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-th-text mb-4">
            {t('home.features')}
          </h2>
          <p className="text-lg text-th-text-s max-w-2xl mx-auto">
            {t('home.featuresSubtitle')}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, idx) => (
            <div key={idx} className="card p-6 hover:shadow-th-lg transition-all duration-300 group">
              <div className="w-12 h-12 rounded-xl gradient-bg/10 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
                   style={{ background: `linear-gradient(135deg, var(--gradient-start), var(--gradient-end))`, opacity: 0.15 }}>
                <feature.icon size={24} className="text-th-accent" style={{ opacity: 1 }} />
              </div>
              <div className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 -mt-16 relative">
                <feature.icon size={24} className="text-th-accent" />
              </div>
              <h3 className="text-base font-semibold text-th-text mb-2">{feature.title}</h3>
              <p className="text-sm text-th-text-s leading-relaxed">{feature.desc}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Footer */}
      <footer className="border-t border-th-border py-8 text-center">
        <p className="text-sm text-th-text-s">
          {t('home.footer', { year: new Date().getFullYear() })}
        </p>
      </footer>
    </div>
  );
}