import { ArrowUpRight } from "lucide-react";

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

export default function PropertyStory({ onOpenOfferModal }: PropertyStoryProps) {
  return (
    <section className="py-24 bg-background overflow-hidden">
      <div className="container">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16 items-center">
          <div className="lg:col-span-7 relative">
            <div className="absolute -left-5 top-8 bottom-8 w-px bg-primary/70 hidden sm:block" />
            <div className="sm:pl-8">
              <div className="aspect-[1.18/1] overflow-hidden rounded-sm bg-secondary border border-border">
                <img
                  src="/assets/distressed-broken-windows.webp"
                  alt="Older home with broken windows and visible exterior wear, representing a property sold as-is"
                  className="w-full h-full object-cover object-center grayscale-[12%] contrast-[0.95] transition-transform duration-700 hover:scale-[1.02]"
                />
              </div>
              <div className="flex items-start justify-between gap-5 pt-4 text-xs text-muted-foreground">
                <span className="editorial-badge">Properties we take as-is</span>
                <span className="max-w-[15rem] text-right leading-relaxed">Some houses need a little work. That should not keep you from moving on.</span>
              </div>
            </div>
          </div>

          <div className="lg:col-span-5 space-y-7">
            <div className="flex items-center gap-3">
              <span className="w-9 h-px bg-primary" />
              <span className="editorial-badge">A practical alternative</span>
            </div>
            <h2 className="font-serif text-3xl sm:text-5xl font-normal tracking-tight text-foreground leading-[1.08]">Sell the property as it stands.</h2>
            <p className="text-lg text-muted-foreground leading-relaxed">There is no need to spend months making a difficult property look market-ready. We review houses in their present condition, including vacant homes, rentals, inherited properties, and houses with deferred maintenance.</p>
            <div className="border-t border-b border-foreground/20 py-6 space-y-4">
              <p className="font-serif text-2xl leading-snug text-foreground">“Tell us what’s going on. We’ll help you see your options.”</p>
              <p className="text-xs uppercase tracking-[0.16em] font-semibold text-primary">The Home Buyers Nationwide promise</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>Talk through your property</span>
              <ArrowUpRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}
