import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ShieldCheck, ArrowRight, Check, MapPin } from "lucide-react";
import { toast } from "sonner";

interface HeroProps {
  onOpenOfferModal: () => void;
  onNavigateSection?: (sectionId: string) => void;
}

export default function Hero({ onOpenOfferModal }: HeroProps) {
  const [address, setAddress] = useState("");
  const [phone, setPhone] = useState("");

  const handleQuickSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!address || !phone) {
      toast.error("Please provide both your property address and phone number.");
      return;
    }
    toast.success("Offer request initiated! A specialist will call you shortly.");
    onOpenOfferModal();
  };

  return (
    <section className="relative pt-32 pb-20 md:pt-40 md:pb-28 overflow-hidden bg-background">
      <div className="absolute inset-0 pointer-events-none opacity-[0.035] bg-[radial-gradient(#1E2A29_1px,transparent_1px)] [background-size:24px_24px]" />
      <div className="absolute -right-40 -top-32 w-[32rem] h-[32rem] rounded-full border border-primary/10 pointer-events-none" />
      <div className="absolute -right-24 -top-16 w-[22rem] h-[22rem] rounded-full border border-primary/10 pointer-events-none" />

      <div className="container relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-10 items-center">
          <div className="lg:col-span-7 space-y-8">
            <div className="flex items-center gap-3">
              <span className="w-9 h-px bg-primary" />
              <span className="editorial-badge">Family-Owned · Nationwide Direct Buyer</span>
            </div>

            <div className="space-y-5">
              <h1 className="font-serif text-4xl sm:text-6xl lg:text-[4.35rem] font-normal tracking-tight text-foreground leading-[1.04] max-w-3xl">
                Sell the house you have—<span className="italic font-serif font-light text-primary">not the one</span> a listing agent wishes you had.
              </h1>
              <p className="text-lg sm:text-xl text-muted-foreground font-normal max-w-2xl leading-relaxed">
                Home Buyers Nationwide provides direct, fair cash offers for properties in any condition across the United States. Skip repairs, agent commissions, and appraisal contingencies.
              </p>
            </div>

            <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 pt-2 max-w-2xl">
              {[
                { title: "$0 Repairs", desc: "Sell 100% as-is" },
                { title: "No Commissions", desc: "Keep more at closing" },
                { title: "Choose Closing", desc: "7 to 30+ days" },
              ].map((item, idx) => (
                <div key={idx} className="pt-4 border-t border-foreground/20 space-y-1">
                  <div className="flex items-center gap-1.5 text-primary font-semibold text-sm">
                    <Check className="w-4 h-4 stroke-[2.5]" />
                    <span>{item.title}</span>
                  </div>
                  <p className="text-xs text-muted-foreground">{item.desc}</p>
                </div>
              ))}
            </div>

            <div className="flex items-center gap-4 pt-2 border-t border-border/60 max-w-2xl">
              <div className="w-9 h-9 rounded-sm bg-primary/10 text-primary flex items-center justify-center font-serif font-semibold text-sm">20</div>
              <p className="text-xs text-muted-foreground leading-relaxed">
                A straightforward alternative to listing, built for homeowners who value speed, privacy, and a clear path to closing.
              </p>
            </div>
          </div>

          <div className="lg:col-span-5">
            <div className="paper-card rounded-2xl p-6 sm:p-8 relative shadow-xl border border-border/80 bg-card">
              <div className="absolute -top-3 right-6 bg-primary text-primary-foreground text-[11px] font-semibold tracking-widest uppercase px-3 py-1 rounded-full shadow-xs">
                Free · No Obligation
              </div>

              <div className="space-y-2 mb-6">
                <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em] text-primary font-semibold">
                  <span className="w-2 h-2 bg-primary rounded-full" />
                  Begin with the address
                </div>
                <h3 className="font-serif text-2xl font-semibold text-foreground tracking-tight">Get Your Cash Offer</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">Tell us a little about the property. We’ll do the rest.</p>
              </div>

              <form onSubmit={handleQuickSubmit} className="space-y-4">
                <div className="space-y-1.5">
                  <label className="text-xs font-semibold uppercase tracking-wider text-foreground">Property Address</label>
                  <div className="relative">
                    <MapPin className="absolute left-3.5 top-3.5 w-4 h-4 text-muted-foreground" />
                    <input
                      placeholder="Street address, city, state"
                      value={address}
                      onChange={(e) => setAddress(e.target.value)}
                      className="w-full rounded-md border border-border bg-background text-foreground h-12 pl-10 pr-3 text-sm outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                      required
                    />
                  </div>
                </div>

                <div className="space-y-1.5">
                  <label className="text-xs font-semibold uppercase tracking-wider text-foreground">Phone Number</label>
                  <input
                    placeholder="For offer delivery"
                    type="tel"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    className="w-full rounded-md border border-border bg-background text-foreground h-12 px-3 text-sm outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                    required
                  />
                </div>

                <Button type="submit" className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium py-4 h-13 rounded-md shadow-md transition-all active:scale-98 text-base flex items-center justify-center gap-2">
                  <span>Request Cash Offer</span>
                  <ArrowRight className="w-4 h-4" />
                </Button>

                <p className="text-[11px] text-muted-foreground text-center leading-normal pt-1">By requesting an offer, you agree to receive communications from Home Buyers Nationwide. Zero obligation to accept.</p>
              </form>

              <div className="mt-6 pt-5 border-t border-border flex items-center justify-between text-xs text-muted-foreground font-medium">
                <div className="flex items-center gap-1.5"><ShieldCheck className="w-4 h-4 text-emerald-600" /><span>Private & confidential</span></div>
                <span>Closing costs covered</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
