import Link from "next/link";
import { ArrowRight, BarChart3, Users, Zap, Shield } from "lucide-react";

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      {/* Navigation */}
      <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <span className="text-2xl font-bold text-primary-600">CRESync</span>
            </div>
            <div className="flex items-center gap-4">
              <Link
                href="/login"
                className="text-slate-600 hover:text-slate-900 font-medium"
              >
                Sign In
              </Link>
              <Link
                href="/signup"
                className="btn-primary inline-flex items-center gap-2"
              >
                Get Started
                <ArrowRight size={18} />
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4">
        <div className="max-w-7xl mx-auto text-center">
          <h1 className="text-5xl md:text-6xl font-bold text-slate-900 mb-6">
            The CRM Built for
            <span className="text-primary-600"> Commercial Real Estate</span>
          </h1>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto mb-10">
            Streamline your deals, automate follow-ups, and close more transactions
            with the all-in-one platform designed specifically for CRE professionals.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Link
              href="/signup"
              className="btn-primary inline-flex items-center justify-center gap-2 text-lg px-8 py-4"
            >
              Start Free Trial
              <ArrowRight size={20} />
            </Link>
            <Link
              href="/login"
              className="btn-secondary inline-flex items-center justify-center gap-2 text-lg px-8 py-4"
            >
              Sign In to Dashboard
            </Link>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 px-4">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-slate-900 mb-12">
            Everything You Need to Close More Deals
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <FeatureCard
              icon={<Users className="text-primary-600" size={32} />}
              title="Contact Management"
              description="Organize leads, clients, and prospects with smart tagging and segmentation."
            />
            <FeatureCard
              icon={<Zap className="text-primary-600" size={32} />}
              title="Automation"
              description="Set up automated follow-up sequences and never miss an opportunity."
            />
            <FeatureCard
              icon={<BarChart3 className="text-primary-600" size={32} />}
              title="Analytics"
              description="Track your pipeline, conversion rates, and team performance."
            />
            <FeatureCard
              icon={<Shield className="text-primary-600" size={32} />}
              title="Integrations"
              description="Connect with your existing tools and data sources seamlessly."
            />
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-4 border-t border-slate-200">
        <div className="max-w-7xl mx-auto text-center text-slate-500">
          <p>&copy; {new Date().getFullYear()} CRESync. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}

function FeatureCard({
  icon,
  title,
  description,
}: {
  icon: React.ReactNode;
  title: string;
  description: string;
}) {
  return (
    <div className="clay-card">
      <div className="mb-4">{icon}</div>
      <h3 className="text-lg font-bold text-slate-900 mb-2">{title}</h3>
      <p className="text-slate-600">{description}</p>
    </div>
  );
}