import { ArrowRight, PhoneCall, ClipboardCheck, Handshake } from "lucide-react";

interface HowItWorksProps {
  onOpenOfferModal: () => void;
}

export default function HowItWorks({ onOpenOfferModal }: HowItWorksProps) {
  const steps = [
    { num: "01", title: "Tell us about your property", desc: "Share your property address and basic contact information. Our team reviews market data and property details promptly.", icon: PhoneCall },
    { num: "02", title: "Quick walkthrough or review", desc: "We review the house in its present condition. No repairs, painting, or deep cleaning are ever required.", icon: ClipboardCheck },
    { num: "03", title: "Review and choose your date", desc: "Receive a fair, no-obligation cash offer. If you accept, select the closing date that best fits your calendar.", icon: Handshake },
  ];

  return (
    <section id="how-it-works" className="py-24 bg-background">
      <div className="container space-y-16">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
          <div className="max-w-2xl space-y-4">
            <div className="flex items-center gap-3"><span className="w-9 h-px bg-primary" /><span className="editorial-badge">Three simple steps · 02</span></div>
            <h2 className="font-serif text-3xl sm:text-5xl font-normal tracking-tight text-foreground">How the cash sale process works.</h2>
            <p className="text-lg text-muted-foreground leading-relaxed">We designed the process to eliminate waiting, repairs, and lender contingencies so you can move forward with a clear next step.</p>
          </div>
          <button onClick={onOpenOfferModal} className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary/80 transition-colors group cursor-pointer"><span>Start your offer request</span><ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" /></button>
        </div>

        <div className="relative grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-6">
          <div className="hidden md:block absolute left-[12%] right-[12%] top-[3.5rem] h-px bg-border" />
          {steps.map((step, idx) => {
            const IconComponent = step.icon;
            return (
              <div key={idx} className="relative z-10 flex flex-col gap-6 group">
                <div className="flex items-center gap-4">
                  <div className="w-14 h-14 rounded-sm bg-background border border-primary/50 flex items-center justify-center text-primary shadow-sm group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"><IconComponent className="w-6 h-6" /></div>
                  <span className="font-serif text-4xl font-light text-muted-foreground/40 group-hover:text-primary/50 transition-colors">{step.num}</span>
                </div>
                <div className="border-t border-foreground/20 pt-5 pr-5 space-y-3">
                  <h3 className="font-serif text-xl font-semibold text-foreground">{step.title}</h3>
                  <p className="text-sm text-muted-foreground leading-relaxed">{step.desc}</p>
                </div>
                <div className="text-[11px] font-semibold uppercase tracking-wider text-primary">No obligation</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
