'use client';

import Link from 'next/link';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/common/Button';
import { ThemeToggle } from '@/components/ui/common/ThemeToggle';
import { Building2, Beaker, Calendar, Shield, Clock, Users } from 'lucide-react';

export default function HomePage() {
  const { user } = useAuth();

  return (
    <div className="min-h-screen app-web-bg text-text-primary">

      {/* Header */}
      <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-4 flex justify-between items-center">
          <div className="text-2xl font-semibold text-text-primary">
            DyoLink
          </div>

          <div className="flex items-center gap-3">
            <ThemeToggle />
            {user ? (
              <Link href="/today">
                <Button variant="primary">Dashboard</Button>
              </Link>
            ) : (
              <>
                <Link href="/login">
                  <Button variant="outline">Login</Button>
                </Link>
                <Link href="/register">
                  <Button variant="primary">Start Trial</Button>
                </Link>
              </>
            )}
          </div>

        </div>
      </header>

      {/* Hero Section */}
      <main className="container mx-auto px-4 pt-32 pb-20">

        <div className="max-w-4xl mx-auto text-center">

          <h1 className="text-5xl md:text-6xl font-semibold mb-6 leading-tight">
            Connect Dental Clinics & Labs
            <span className="text-primary"> Seamlessly</span>
          </h1>

          <p className="text-lg text-text-secondary mb-8 max-w-2xl mx-auto">
            Streamline communication between dental professionals. Start with
            a 30-day free trial, no credit card required.
          </p>

          {!user && (
            <Link href="/register">
              <Button size="lg" variant="primary" className="px-8">
                Start Free Trial
              </Button>
            </Link>
          )}
        </div>

        {/* Features */}
        <div className="mt-20 grid md:grid-cols-3 gap-6">
          <FeatureCard
            icon={<Building2 className="h-6 w-6 icon-flat" />}
            title="For Clinics"
            description="Manage patients, appointments, and send cases to labs instantly."
          />
          <FeatureCard
            icon={<Beaker className="h-6 w-6 icon-flat" />}
            title="For Labs"
            description="Receive cases, track progress, and communicate with clinics."
          />
          <FeatureCard
            icon={<Users className="h-6 w-6 icon-flat" />}
            title="Team Management"
            description="Add up to 5 team members during trial. Scale as you grow."
          />
          <FeatureCard
            icon={<Calendar className="h-6 w-6 icon-flat" />}
            title="30-Day Trial"
            description="Full access to all features. No credit card required."
          />
          <FeatureCard
            icon={<Clock className="h-6 w-6 icon-flat" />}
            title="Real-time Updates"
            description="Get instant notifications on case status changes."
          />
          <FeatureCard
            icon={<Shield className="h-6 w-6 icon-flat" />}
            title="Secure & Compliant"
            description="HIPAA-compliant with enterprise-grade security."
          />
        </div>

      </main>

      {/* Footer */}
      <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>© 2026 DyoLink. All rights reserved.</div>

          <div className="flex gap-6 mt-4 md:mt-0">
            <Link href="/terms" className="hover:text-primary transition-colors">
              Terms & Conditions
            </Link>
            <Link href="/privacy" className="hover:text-primary transition-colors">
              Privacy Policy
            </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>
  );
}