import { Link } from 'react-router-dom';

export default function Home() {
  return (
    <div className="min-h-[calc(100vh-80px)] flex flex-col items-center justify-center text-center -mt-8 relative overflow-hidden" style={{ fontFamily: 'Inter, sans-serif' }}>
      
      {/* Background Orbs */}
      <div className="absolute top-1/4 -left-32 w-96 h-96 bg-[#8083ff]/20 rounded-full blur-[100px]"></div>
      <div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-[#4edea3]/10 rounded-full blur-[100px]"></div>

      <div className="relative z-10 max-w-4xl px-4">
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-slate-300 mb-8 mx-auto">
          <span className="w-2 h-2 rounded-full bg-[#4edea3] animate-pulse"></span>
          <span className="text-[#475569] text-[14px] font-semibold tracking-wide uppercase">The Future of Digital Agreements</span>
        </div>

        <h1 className="text-[48px] md:text-[72px] font-bold text-[#0f172a] mb-6 leading-tight tracking-tight" style={{ fontFamily: 'Outfit, sans-serif' }}>
          Secure, beautiful <br/> <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#c0c1ff] to-[#4edea3]">document signing.</span>
        </h1>
        
        <p className="text-[18px] md:text-[24px] text-[#475569] mb-12 max-w-2xl mx-auto leading-relaxed">
          Signwell offers enterprise-grade security wrapped in a stunning, frictionless experience for both you and your clients.
        </p>
        
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
          <Link 
            to="/login" 
            className="w-full sm:w-auto bg-[#c0c1ff] text-[#1000a9] px-8 py-4 rounded-lg font-bold text-[16px] transition-all active:scale-95 primary-glow no-underline flex items-center justify-center gap-2"
          >
            Access Workspace
            <span className="material-symbols-outlined">arrow_forward</span>
          </Link>
          <a 
            href="#" 
            className="w-full sm:w-auto bg-black/50 hover:bg-white text-[#0f172a] border border-slate-300 px-8 py-4 rounded-lg font-bold text-[16px] transition-all no-underline flex items-center justify-center gap-2"
          >
            View Demo
            <span className="material-symbols-outlined">play_circle</span>
          </a>
        </div>
      </div>

      {/* Feature Grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto mt-24 px-4 relative z-10">
        <div className="glass-card p-6 rounded-xl text-left">
          <span className="material-symbols-outlined text-[#c0c1ff] text-[32px] mb-4">security</span>
          <h3 className="text-[#0f172a] text-[20px] font-bold mb-2" style={{ fontFamily: 'Outfit, sans-serif' }}>Bank-Grade Security</h3>
          <p className="text-[#475569] text-[14px]">All documents are encrypted at rest and in transit using state-of-the-art cryptographic standards.</p>
        </div>
        <div className="glass-card p-6 rounded-xl text-left">
          <span className="material-symbols-outlined text-[#4edea3] text-[32px] mb-4">speed</span>
          <h3 className="text-[#0f172a] text-[20px] font-bold mb-2" style={{ fontFamily: 'Outfit, sans-serif' }}>Frictionless Workflows</h3>
          <p className="text-[#475569] text-[14px]">Pre-sign, post-sign, or standard workflows. Customize exactly how your documents get executed.</p>
        </div>
        <div className="glass-card p-6 rounded-xl text-left">
          <span className="material-symbols-outlined text-[#ffb4ab] text-[32px] mb-4">devices</span>
          <h3 className="text-[#0f172a] text-[20px] font-bold mb-2" style={{ fontFamily: 'Outfit, sans-serif' }}>Mobile Optimized</h3>
          <p className="text-[#475569] text-[14px]">Signers can securely execute agreements from any device, anywhere in the world, with zero downloads.</p>
        </div>
      </div>

    </div>
  );
}
