import { Button } from '@/components/ui/button';
import { ArrowRight, Mail, Lock, Clock } from 'lucide-react';

export function HeroSection() {
  return (
    <div className="text-center py-12 space-y-8">
      <div className="space-y-4">
        <h1 className="text-4xl md:text-6xl font-bold bg-gradient-to-r from-slate-900 via-blue-600 to-indigo-600 dark:from-slate-100 dark:via-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
          Send Files Securely
          <span className="block">Via Email</span>
        </h1>
        <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed">
          Share files of any size with password protection and 48-hour expiration. 
          Recipients get secure download links via email - just like WeTransfer.
        </p>
      </div>

      <div className="flex flex-wrap justify-center gap-4">
        <Button size="lg" className="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white px-8 py-3 rounded-full shadow-lg hover:shadow-xl transition-all">
          Send Your First Transfer
          <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
        <Button variant="outline" size="lg" className="px-8 py-3 rounded-full">
          Learn More
        </Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto pt-12">
        <div className="flex flex-col items-center space-y-3">
          <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-full flex items-center justify-center">
            <Mail className="w-6 h-6 text-white" />
          </div>
          <h3 className="font-semibold text-slate-900 dark:text-slate-100">Email Delivery</h3>
          <p className="text-sm text-slate-600 dark:text-slate-400 text-center">
            Recipients receive secure download links directly in their inbox
          </p>
        </div>
        
        <div className="flex flex-col items-center space-y-3">
          <div className="w-12 h-12 bg-gradient-to-br from-amber-400 to-orange-600 rounded-full flex items-center justify-center">
            <Lock className="w-6 h-6 text-white" />
          </div>
          <h3 className="font-semibold text-slate-900 dark:text-slate-100">Password Protected</h3>
          <p className="text-sm text-slate-600 dark:text-slate-400 text-center">
            Every transfer is secured with a unique password for safe access
          </p>
        </div>
        
        <div className="flex flex-col items-center space-y-3">
          <div className="w-12 h-12 bg-gradient-to-br from-red-400 to-pink-600 rounded-full flex items-center justify-center">
            <Clock className="w-6 h-6 text-white" />
          </div>
          <h3 className="font-semibold text-slate-900 dark:text-slate-100">48-Hour Expiry</h3>
          <p className="text-sm text-slate-600 dark:text-slate-400 text-center">
            Transfers automatically expire after 48 hours for security
          </p>
        </div>
      </div>
    </div>
  );
}