'use client';

import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/shared/Button';
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
import { Building2, Beaker, Calendar, Shield, Clock, Users } from 'lucide-react';

export default function HomePage() {
  const t = useTranslations('landing');
  const tAuth = useTranslations('auth');
  const tCommon = useTranslations('common');
  const { user } = useAuth();

  return (
    <div className="min-h-[100dvh] app-web-bg text-text-primary">
      <header className="border-b border-border/70 bg-background-secondary/65 backdrop-blur-sm fixed top-0 w-full z-10">
        <div className="container mx-auto px-4 py-3 sm:py-4 flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
          <Link href="/" className="text-xl sm:text-2xl font-semibold text-text-primary shrink-0">
            {tCommon('appName')}
          </Link>

          <div className="flex items-center gap-1.5 sm:gap-3 ml-auto shrink-0">
            <TopBarControls />
            {user ? (
              <Link href="/today">
                <Button variant="primary" size="sm" className="sm:px-4 sm:py-2 sm:text-sm">
                  {tAuth('dashboard')}
                </Button>
              </Link>
            ) : (
              <>
                <Link href="/login" className="hidden sm:block">
                  <Button variant="outline" size="sm" className="whitespace-nowrap">
                    {tAuth('login')}
                  </Button>
                </Link>
                <Link href="/register">
                  <Button variant="primary" size="sm" className="whitespace-nowrap">
                    <span className="sm:hidden">{tAuth('startTrialShort')}</span>
                    <span className="hidden sm:inline">{tAuth('startTrial')}</span>
                  </Button>
                </Link>
              </>
            )}
          </div>
        </div>
      </header>

      <main className="container mx-auto px-4 pt-28 sm:pt-32 pb-16 sm:pb-20">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-semibold mb-4 sm:mb-6 leading-tight">
            {t('heroTitle')}
            <span className="text-primary"> {t('heroHighlight')}</span>
          </h1>

          <p className="text-base sm:text-lg text-text-secondary mb-6 sm:mb-8 max-w-2xl mx-auto">
            {t('heroSubtitle')}
          </p>

          {!user && (
            <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3">
              <Link href="/register" className="w-full sm:w-auto">
                <Button size="lg" variant="primary" fullWidth className="sm:w-auto sm:px-8">
                  {tAuth('startFreeTrial')}
                </Button>
              </Link>
              <Link href="/login" className="w-full sm:hidden">
                <Button variant="outline" size="lg" fullWidth>
                  {tAuth('login')}
                </Button>
              </Link>
            </div>
          )}
        </div>

        <div className="mt-12 sm:mt-20 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
          <FeatureCard
            icon={<Building2 className="h-6 w-6 icon-flat" />}
            title={t('featureClinicsTitle')}
            description={t('featureClinicsDescription')}
          />
          <FeatureCard
            icon={<Beaker className="h-6 w-6 icon-flat" />}
            title={t('featureLabsTitle')}
            description={t('featureLabsDescription')}
          />
          <FeatureCard
            icon={<Users className="h-6 w-6 icon-flat" />}
            title={t('featureTeamTitle')}
            description={t('featureTeamDescription')}
          />
          <FeatureCard
            icon={<Calendar className="h-6 w-6 icon-flat" />}
            title={t('featureTrialTitle')}
            description={t('featureTrialDescription')}
          />
          <FeatureCard
            icon={<Clock className="h-6 w-6 icon-flat" />}
            title={t('featureRealtimeTitle')}
            description={t('featureRealtimeDescription')}
          />
          <FeatureCard
            icon={<Shield className="h-6 w-6 icon-flat" />}
            title={t('featureSecurityTitle')}
            description={t('featureSecurityDescription')}
          />
        </div>
      </main>

      <footer className="border-t border-border/70 bg-background-secondary/80">
        <div className="container mx-auto px-4 py-8 flex flex-col md:flex-row justify-between items-center text-sm text-text-secondary">
          <div>{t('footerCopyright')}</div>

          <div className="flex gap-6 mt-4 md:mt-0">
            <Link href="/terms" className="hover:text-primary transition-colors">
              {t('termsAndConditions')}
            </Link>
            <Link href="/privacy" className="hover:text-primary transition-colors">
              {tAuth('privacyPolicy')}
            </Link>
          </div>
        </div>
      </footer>
    </div>
  );
}

function FeatureCard({
  icon,
  title,
  description,
}: {
  icon: React.ReactNode;
  title: string;
  description: string;
}) {
  return (
    <div className="surface-card p-5 transition-all hover:border-primary/70 hover:shadow-[0_0_20px_rgba(0,194,255,0.12)]">
      <div className="text-primary mb-4">{icon}</div>
      <h3 className="text-base font-medium text-text-primary mb-2">{title}</h3>
      <p className="text-sm text-text-secondary">{description}</p>
    </div>
  );
}