import { Link } from 'react-router-dom';
import { Video, Shield, Users, Palette, ArrowRight, Zap, Globe, FileText, Lock, Network, CalendarDays, Bell, KeyRound, BarChart2, Settings2 } from 'lucide-react';
import BrandLogo from '../components/BrandLogo';
import { useLanguage } from '../contexts/LanguageContext';
import { useBranding } from '../contexts/BrandingContext';

export default function Home() {
  const { t } = useLanguage();
  const { registrationMode, imprintUrl, privacyUrl } = useBranding();
  const isInviteOnly = registrationMode === 'invite';

  const features = [
    {
      icon: Video,
      title: t('home.featureVideoTitle'),
      desc: t('home.featureVideoDesc'),
    },
    {
      icon: Users,
      title: t('home.featureRoomsTitle'),
      desc: t('home.featureRoomsDesc'),
    },
    {
      icon: Zap,
      title: t('home.featureRecordingsTitle'),
      desc: t('home.featureRecordingsDesc'),
    },
    {
      icon: Network,
      title: t('home.featureFederationTitle'),
      desc: t('home.featureFederationDesc'),
    },
    {
      icon: CalendarDays,
      title: t('home.featureCalendarTitle'),
      desc: t('home.featureCalendarDesc'),
    },
    {
      icon: Bell,
      title: t('home.featureNotificationsTitle'),
      desc: t('home.featureNotificationsDesc'),
    },
    {
      icon: KeyRound,
      title: t('home.featureOAuthTitle'),
      desc: t('home.featureOAuthDesc'),
    },
    {
      icon: BarChart2,
      title: t('home.featureAnalyticsTitle'),
      desc: t('home.featureAnalyticsDesc'),
    },
    {
      icon: Palette,
      title: t('home.featureThemesTitle'),
      desc: t('home.featureThemesDesc'),
    },
  ];

  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">
          <BrandLogo size="md" />
          <div className="flex items-center gap-3">
            <Link to="/login" className="btn-ghost text-sm">
              {t('auth.login')}
            </Link>
            {!isInviteOnly && (
              <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.madeFor')}
          </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">
            {!isInviteOnly && (
              <Link to="/register" className="btn-primary text-base px-8 py-3">
                {t('home.getStarted')}
                <ArrowRight size={18} />
              </Link>
            )}
            <Link to="/login" className={`${isInviteOnly ? 'btn-primary' : '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>
        {(imprintUrl || privacyUrl) && (
          <div className="flex items-center justify-center gap-4 mt-3">
            {imprintUrl && (
              <a
                href={imprintUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1 text-xs text-th-text-s hover:text-th-accent transition-colors"
              >
                <FileText size={12} />
                {t('nav.imprint')}
              </a>
            )}
            {imprintUrl && privacyUrl && (
              <span className="text-th-border text-xs">·</span>
            )}
            {privacyUrl && (
              <a
                href={privacyUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1 text-xs text-th-text-s hover:text-th-accent transition-colors"
              >
                <Lock size={12} />
                {t('nav.privacy')}
              </a>
            )}
          </div>
        )}
      </footer>
    </div>
  );
}