import {
  Brain,
  Mail,
  Users,
  Shield,
  BarChart3,
  Smartphone,
  Building2,
  Zap,
} from "lucide-react";

const features = [
  {
    icon: Brain,
    title: "AI-Powered Matching",
    description:
      "Our intelligent algorithm scores and ranks buyers based on asset type, location, price range, and cap rate — surfacing the best matches instantly.",
  },
  {
    icon: Mail,
    title: "Automated Outreach",
    description:
      "Generate professional deal emails and SMS teasers automatically. Track opens, clicks, and replies to gauge buyer interest in real time.",
  },
  {
    icon: Users,
    title: "Buyer Database",
    description:
      "Build and manage your buyer network with detailed acquisition criteria, engagement tracking, and intent scoring for every contact.",
  },
  {
    icon: Shield,
    title: "Digital NDA Signing",
    description:
      "Buyers sign confidentiality agreements digitally through the portal before accessing sensitive deal information. Fully tracked and timestamped.",
  },
  {
    icon: Building2,
    title: "Seller Lead Intake",
    description:
      "Capture every deal detail in structured forms — property specs, financials, documents. Upload OMs and photos with secure cloud storage.",
  },
  {
    icon: BarChart3,
    title: "Deal Analytics",
    description:
      "Track every deal from intake to close. Monitor match rates, outreach performance, response times, and pipeline velocity.",
  },
  {
    icon: Smartphone,
    title: "Buyer Portal",
    description:
      "Give buyers a branded portal to view deals, manage preferences, sign NDAs, and express interest — all in one place.",
  },
  {
    icon: Zap,
    title: "Instant Notifications",
    description:
      "Buyers get notified via email and SMS the moment a matching deal hits. First-mover advantage drives faster responses.",
  },
];

export function Features() {
  return (
    <section id="features" className="py-20 sm:py-28 bg-white relative">
      {/* Subtle dot pattern */}
      <div className="absolute inset-0 dot-pattern opacity-20 pointer-events-none" />

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Section header */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-navy-50 rounded-full px-4 py-1.5 mb-4">
            <span className="text-sm font-medium text-navy-600">Why CREdispo</span>
          </div>
          <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-navy-900 mb-4">
            Everything you need to
            <br />
            <span className="text-gold-500">close deals faster</span>
          </h2>
          <p className="text-base sm:text-lg text-navy-500 max-w-2xl mx-auto px-2 sm:px-0">
            From seller intake to buyer outreach, CREdispo automates the entire disposition 
            workflow so you can focus on what matters — building relationships and closing deals.
          </p>
        </div>

        {/* Features grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="group relative p-6 rounded-xl border border-navy-100 bg-white hover:border-gold-300 hover-lift transition-all duration-300"
            >
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-navy-50 group-hover:bg-gold-50 transition-colors mb-4">
                <feature.icon className="h-6 w-6 text-navy-700 group-hover:text-gold-600 transition-colors" />
              </div>
              <h3 className="text-lg font-semibold text-navy-900 mb-2">{feature.title}</h3>
              <p className="text-sm text-navy-500 leading-relaxed">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
