import { ClipboardList, Brain, Send, Handshake } from "lucide-react";

const steps = [
  {
    step: "01",
    icon: ClipboardList,
    title: "Add Your Deal",
    description:
      "Enter seller lead details — property type, location, price, cap rate, financials. Upload OMs and supporting documents.",
  },
  {
    step: "02",
    icon: Brain,
    title: "Instant Matching",
    description:
      "Our algorithm scans your buyer database and scores each buyer by how well their criteria match the deal. Top matches surface in seconds.",
  },
  {
    step: "03",
    icon: Send,
    title: "Automated Outreach",
    description:
      "Review matches and hit send. CREdispo generates personalized emails and SMS teasers, then tracks engagement automatically.",
  },
  {
    step: "04",
    icon: Handshake,
    title: "Close the Deal",
    description:
      "Interested buyers sign NDAs through the portal, access deal docs, and move to LOI. You manage everything from one dashboard.",
  },
];

export function HowItWorks() {
  return (
    <section id="how-it-works" className="py-20 sm:py-28 bg-navy-50 relative">
      <div className="absolute inset-0 dot-pattern opacity-15 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-white rounded-full px-4 py-1.5 mb-4 border border-navy-100">
            <span className="text-sm font-medium text-navy-600">Simple Process</span>
          </div>
          <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-navy-900 mb-4">
            From intake to close
            <br />
            <span className="text-gold-500">in four steps</span>
          </h2>
          <p className="text-base sm:text-lg text-navy-500 max-w-2xl mx-auto px-2 sm:px-0">
            CREdispo replaces your spreadsheets, manual emails, and guesswork with an 
            automated pipeline that never drops the ball.
          </p>
        </div>

        {/* Steps */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {steps.map((step, idx) => (
            <div key={step.title} className="relative">
              {/* Connector line (desktop) */}
              {idx < steps.length - 1 && (
                <div className="hidden lg:block absolute top-12 left-full w-full h-[2px] bg-gradient-to-r from-gold-300 to-navy-200 z-0" style={{ width: 'calc(100% - 3rem)', left: '3rem' }} />
              )}
              
              <div className="relative z-10 flex flex-col items-center text-center">
                {/* Step number */}
                <div className="text-xs font-bold text-gold-500 mb-3">{step.step}</div>
                
                {/* Icon */}
                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-white border-2 border-navy-100 shadow-sm mb-4">
                  <step.icon className="h-7 w-7 text-navy-700" />
                </div>
                
                {/* Content */}
                <h3 className="text-lg font-semibold text-navy-900 mb-2">{step.title}</h3>
                <p className="text-sm text-navy-500 leading-relaxed max-w-xs">{step.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
