import { Link } from 'react-router-dom';
import { Video, Users, FileVideo, Network, CalendarDays, BarChart2, ArrowRight, FileText, Lock } 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: FileVideo,
      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: BarChart2,
      title: t('home.featureAnalyticsTitle'),
      desc: t('home.featureAnalyticsDesc'),
    },
  ];

  return (
    <div className="min-h-screen bg-th-bg">
      <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" />

        <nav className="relative z-10 flex items-center justify-between px-6 md:px-12 py-4 border-b border-th-border">
          <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')}
              </Link>
            )}
          </div>
        </nav>

        {/* Hero */}
        <div className="relative z-10 max-w-3xl mx-auto px-6 pt-24 pb-20">
          <h1 className="text-3xl md:text-4xl font-bold text-th-text mb-4">
            {t('home.heroTitle')}
          </h1>
          <p className="text-lg text-th-text-s mb-8 leading-relaxed">
            {t('home.heroSubtitle')}
          </p>
          <div className="flex items-center gap-3">
            {!isInviteOnly && (
              <Link to="/register" className="btn-primary px-6 py-2.5">
                {t('home.getStarted')}
                <ArrowRight size={16} />
              </Link>
            )}
            <Link to="/login" className={`${isInviteOnly ? 'btn-primary' : 'btn-secondary'} px-6 py-2.5`}>
              {t('auth.login')}
            </Link>
          </div>
        </div>
      </div>

      {/* Features */}
      <div className="border-t border-th-border">
        <div className="max-w-5xl mx-auto px-6 py-16">
          <h2 className="text-xl font-semibold text-th-text mb-10">
            {t('home.features')}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {features.map(feature => (
              <div key={feature.title} className="card p-6 hover:shadow-th-lg transition-shadow">
                <div className="w-12 h-12 rounded-xl bg-th-accent/10 flex items-center justify-center mb-4">
                  <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>
      </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>
  );
}
