import { createFileRoute, Link } from "@tanstack/react-router";
import { ChevronRight, Star, ShieldCheck, Award, Users, Search, TrendingUp, Sparkles, Quote, Calendar, Flame } from "lucide-react";
import heroImg from "@/assets/hero.jpg";
import aboutImg from "@/assets/about.jpg";
import Autoplay from "embla-carousel-autoplay";
import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel";

// High-quality real-estate cinematic loop (Pexels CDN, royalty-free, ~3MB compressed)
const HERO_VIDEO = "https://videos.pexels.com/video-files/7578541/7578541-uhd_2560_1440_30fps.mp4";
import { CTAButton } from "@/components/CTAButton";
import { PropertyCard } from "@/components/PropertyCard";
import { PROPERTIES, LOCATIONS } from "@/lib/properties";
import { POSTS } from "@/lib/blog";
import { SITE } from "@/lib/site";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Pune Property Club — Buy Luxury Flats, Villas & Commercial Spaces in Baner" },
      { name: "description", content: "Discover handpicked luxury homes and premium commercial properties in Baner, Balewadi, Bavdhan & Hinjewadi. Trusted by 100+ Pune families." },
    ],
  }),
  component: Home,
});

function Home() {
  const featured = PROPERTIES.slice(0, 3);
  const blogPreview = POSTS.slice(0, 3);

  return (
    <div>
      {/* HERO */}
      <section className="relative -mt-20 min-h-[100svh] flex items-center overflow-hidden">
        <video
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          poster={heroImg}
          className="absolute inset-0 w-full h-full object-cover"
          aria-hidden="true"
        >
          <source src={HERO_VIDEO} type="video/mp4" />
        </video>
        {/* Subtle bottom-only gradient for text legibility — no full overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent pointer-events-none" />
        <div className="absolute top-24 right-5 z-20 hidden md:inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-rose-500/90 text-white text-[11px] font-semibold uppercase tracking-wider animate-pulse">
          <Flame size={12} /> Limited Units · Booking Open
        </div>

        <div className="container mx-auto px-5 relative z-10 pt-24 pb-20">
          <div className="max-w-3xl text-white">
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass border border-gold/40 text-gold text-xs uppercase tracking-widest mb-6 animate-fade-up">
              <Sparkles size={14} /> Pune's Most Trusted Real Estate Club
            </div>
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold leading-[1.05] animate-fade-up" style={{ animationDelay: "0.1s" }}>
              Find Your <span className="gradient-text-gold">Dream Address</span><br />in the Heart of Pune
            </h1>
            <p className="mt-6 text-lg md:text-xl text-white/85 max-w-2xl animate-fade-up" style={{ animationDelay: "0.2s" }}>
              Curated luxury apartments, villas and commercial spaces in Baner, Balewadi & Hinjewadi — backed by an advisory team that's helped 100+ families call Pune home.
            </p>
            <div className="mt-8 flex flex-wrap gap-3 animate-fade-up" style={{ animationDelay: "0.3s" }}>
              <CTAButton source="hero-site-visit" size="lg"><Calendar size={16} /> Book Site Visit</CTAButton>
              <CTAButton source="hero-best-deal" size="lg" variant="outline">Get Best Deal</CTAButton>
              <CTAButton source="hero-price-sheet" size="lg" variant="outline">Get Price Sheet</CTAButton>
              <Link to="/residential" className="inline-flex items-center gap-2 border-2 border-white/40 text-white font-semibold px-7 py-4 rounded-lg hover:bg-white hover:text-black transition">
                Browse Properties <ChevronRight size={18} />
              </Link>
            </div>
            <p className="mt-4 text-xs text-gold/90 uppercase tracking-widest animate-fade-up" style={{ animationDelay: "0.35s" }}>⚡ Limited units available · Pre-launch pricing ends soon</p>
            <div className="mt-12 grid grid-cols-3 gap-6 max-w-xl animate-fade-up" style={{ animationDelay: "0.4s" }}>
              {[
                { v: "100+", l: "Happy Families" },
                { v: "₹250 Cr+", l: "Properties Closed" },
                { v: "12+", l: "Years Experience" },
              ].map((s) => (
                <div key={s.l}>
                  <div className="text-2xl md:text-3xl font-bold gradient-text-gold">{s.v}</div>
                  <div className="text-xs text-white/70 uppercase tracking-wider mt-1">{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* TRUST BAR */}
      <section className="border-y border-gold/20 bg-card">
        <div className="container mx-auto px-5 py-6 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-sm">
          <span className="inline-flex items-center gap-2 text-muted-foreground"><ShieldCheck size={16} className="text-gold" /> RERA Verified Listings</span>
          <span className="inline-flex items-center gap-2 text-muted-foreground"><Star size={16} className="text-gold" /> 4.9 Google Rating</span>
          <span className="inline-flex items-center gap-2 text-muted-foreground"><Award size={16} className="text-gold" /> Pune's #1 Boutique Realtor</span>
          <span className="inline-flex items-center gap-2 text-muted-foreground"><Users size={16} className="text-gold" /> 100+ Trusted Clients</span>
        </div>
      </section>

      {/* SEARCH BAR REMOVED TO FIX OVERLAP */}

      {/* FEATURED PROPERTIES */}
      <Section eyebrow="Handpicked" title="Featured Properties" subtitle="A snapshot of the finest addresses currently on offer across Pune.">
        <Carousel
          opts={{ align: "start", loop: true }}
          plugins={[Autoplay({ delay: 1500, stopOnInteraction: false })]}
          className="w-full"
        >
          <CarouselContent className="-ml-6">
            {PROPERTIES.map((p) => (
              <CarouselItem key={p.id} className="pl-6 md:basis-1/2 lg:basis-1/3">
                <div className="h-full py-2">
                  <PropertyCard p={p} />
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
        <div className="text-center mt-10">
          <Link to="/residential" className="inline-flex items-center gap-2 text-gold font-semibold hover:underline">View all properties <ChevronRight size={16} /></Link>
        </div>
      </Section>

      {/* WHY CHOOSE US */}
      <section className="bg-card/50 py-20">
        <div className="container mx-auto px-5">
          <Eyebrow>Why Pune Property Club</Eyebrow>
          <h2 className="text-3xl md:text-5xl font-bold text-center max-w-3xl mx-auto mt-3">More than brokers — your <span className="gradient-text-gold">property partners</span></h2>
          <div className="grid gap-6 md:grid-cols-4 mt-12">
            {[
              { icon: ShieldCheck, t: "RERA-Verified Only", d: "Every listing is legally vetted before it ever reaches you." },
              { icon: Award, t: "Boutique Curation", d: "We don't push inventory — we curate addresses worth your name." },
              { icon: TrendingUp, t: "Investment-Grade Insights", d: "Yield, appreciation, and exit data on every property." },
              { icon: Users, t: "End-to-End Advisory", d: "From shortlisting to registration to home loans — handled." },
            ].map((f, i) => (
              <div key={i} className={`bg-card border border-border rounded-2xl p-6 hover-lift ${i % 2 === 0 ? "reveal-left" : "reveal-right"}`}>
                <div className="h-12 w-12 rounded-xl gradient-gold text-black flex items-center justify-center mb-4"><f.icon size={22} /></div>
                <h3 className="font-bold text-lg mb-2">{f.t}</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">{f.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED PROJECTS HIGHLIGHT */}
      <Section eyebrow="Marquee Project" title="Skyline Residency, Baner">
        <div className="grid gap-8 lg:grid-cols-2 items-center">
          <div className="relative rounded-3xl overflow-hidden aspect-[4/3]">
            <img src={PROPERTIES[0].image} alt="Skyline Residency" loading="lazy" className="absolute inset-0 w-full h-full object-cover hover:scale-105 transition duration-700" />
            <div className="absolute top-4 left-4 bg-gold text-black text-xs font-bold uppercase tracking-wider px-3 py-1.5 rounded">RERA Approved</div>
          </div>
          <div>
            <h3 className="text-3xl md:text-4xl font-bold leading-tight">A landmark of refined living in Pune's most coveted suburb.</h3>
            <p className="mt-4 text-muted-foreground leading-relaxed">28 floors of considered design, sky-deck infinity pool, private clubhouse, EV-ready basement, and concierge service. 3 & 4 BHK premium residences from ₹1.85 Cr.</p>
            <ul className="mt-6 grid grid-cols-2 gap-3 text-sm">
              {["Sky-deck pool", "Concierge", "Private clubhouse", "EV charging", "Smart-home", "Landscaped podium"].map((x) => (
                <li key={x} className="flex items-center gap-2"><span className="h-1.5 w-1.5 rounded-full bg-gold" /> {x}</li>
              ))}
            </ul>
            <div className="mt-8 flex flex-wrap gap-3">
              <CTAButton source="marquee-project">Get Floor Plans</CTAButton>
              <Link to="/residential" className="inline-flex items-center gap-2 px-5 py-3 rounded-lg border border-border font-semibold hover:border-gold transition">View all projects</Link>
            </div>
          </div>
        </div>
      </Section>

      {/* ABOUT PREVIEW */}
      <section className="bg-card/50 py-20">
        <div className="container mx-auto px-5 grid gap-10 lg:grid-cols-2 items-center">
          <div>
            <Eyebrow>About the Club</Eyebrow>
            <h2 className="text-3xl md:text-5xl font-bold mt-3 leading-tight">Built by Punekars, for <span className="gradient-text-gold">Pune's discerning</span> buyers.</h2>
            <p className="mt-5 text-muted-foreground leading-relaxed">Founded by Mr. Sankalp Sir & Mr. Saumitra Sir, Pune Property Club is a boutique real estate advisory based in Baner. Twelve years in, our reputation rests on one thing: we only recommend what we'd buy ourselves.</p>
            <div className="grid grid-cols-3 gap-4 mt-8">
              {[{ v: "12+", l: "Years" }, { v: "100+", l: "Families" }, { v: "₹250Cr+", l: "Closed" }].map((s) => (
                <div key={s.l} className="bg-card border border-border rounded-xl p-4 text-center">
                  <div className="text-xl font-bold gradient-text-gold">{s.v}</div>
                  <div className="text-[11px] uppercase tracking-wider text-muted-foreground mt-1">{s.l}</div>
                </div>
              ))}
            </div>
            <div className="mt-8"><Link to="/about" className="inline-flex items-center gap-2 text-gold font-semibold hover:underline">Read our full story <ChevronRight size={16} /></Link></div>
          </div>
          <div className="relative rounded-3xl overflow-hidden aspect-[5/4]">
            <img src={aboutImg} alt="Pune Property Club team" loading="lazy" className="absolute inset-0 w-full h-full object-cover" />
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <Section eyebrow="Client Stories" title="Loved by Pune families">
        <div className="grid gap-6 md:grid-cols-3">
          {[
            { name: "Priya & Rohan Kulkarni", role: "Bought 3BHK in Baner", text: "Sankalp Sir handled everything from site visits to bank paperwork. We moved in stress-free in 45 days." },
            { name: "Aditya Mehta", role: "NRI Investor, Singapore", text: "Saumitra Sir gave me brutally honest yield numbers — no fluff. Closed two units sight-unseen and have zero regrets." },
            { name: "Dr. Neha Joshi", role: "Bought Penthouse, Balewadi", text: "Boutique service, premium taste. They understood exactly what 'forever home' meant for our family." },
          ].map((t) => (
            <div key={t.name} className="bg-card border border-border rounded-2xl p-7 hover-lift relative reveal-zoom">
              <Quote className="absolute top-5 right-5 text-gold/20" size={48} />
              <div className="flex gap-1 text-gold mb-3">{Array.from({ length: 5 }).map((_, i) => <Star key={i} size={14} fill="currentColor" />)}</div>
              <p className="text-sm leading-relaxed text-foreground/90">"{t.text}"</p>
              <div className="mt-5 pt-5 border-t border-border">
                <div className="font-semibold text-sm">{t.name}</div>
                <div className="text-xs text-muted-foreground">{t.role}</div>
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* BLOG PREVIEW */}
      <section className="bg-card/50 py-20">
        <div className="container mx-auto px-5">
          <div className="flex flex-wrap items-end justify-between gap-4 mb-10">
            <div>
              <Eyebrow>From the Journal</Eyebrow>
              <h2 className="text-3xl md:text-5xl font-bold mt-3">Insights for smart buyers</h2>
            </div>
            <Link to="/blog" className="text-gold font-semibold hover:underline inline-flex items-center gap-1">All articles <ChevronRight size={16} /></Link>
          </div>
          <div className="grid gap-6 md:grid-cols-3">
            {blogPreview.map((b) => (
              <Link key={b.slug} to="/blog/$slug" params={{ slug: b.slug }} className="group bg-card border border-border rounded-2xl overflow-hidden hover-lift block">
                <div className="aspect-[16/10] overflow-hidden">
                  <img src={b.image} alt={b.title} loading="lazy" className="w-full h-full object-cover group-hover:scale-105 transition duration-700" />
                </div>
                <div className="p-6">
                  <div className="text-xs text-muted-foreground mb-2">{b.date} · {b.readTime}</div>
                  <h3 className="font-bold text-lg leading-snug group-hover:text-gold transition">{b.title}</h3>
                  <p className="text-sm text-muted-foreground mt-2 line-clamp-2">{b.excerpt}</p>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* STRONG CTA */}
      <section className="container mx-auto px-5 py-20">
        <div className="relative rounded-3xl overflow-hidden gradient-navy p-10 md:p-16 text-center text-white border border-gold/30">
          <div className="absolute -top-20 -right-20 h-64 w-64 rounded-full bg-gold/20 blur-3xl" />
          <div className="absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-gold/10 blur-3xl" />
          <div className="relative">
            <Sparkles className="text-gold mx-auto mb-4" size={32} />
            <h2 className="text-3xl md:text-5xl font-bold leading-tight max-w-3xl mx-auto">Ready to find <span className="gradient-text-gold">the one?</span></h2>
            <p className="mt-4 text-white/80 max-w-xl mx-auto">Book a 30-minute strategy call with our advisory team. No obligation, no pressure.</p>
            <div className="mt-8 flex flex-wrap gap-4 justify-center">
              <CTAButton source="bottom-cta" size="lg">Book My Free Call</CTAButton>
              <a href={`tel:${SITE.phone}`} className="inline-flex items-center gap-2 border-2 border-gold/50 text-gold font-semibold px-7 py-4 rounded-lg hover:bg-gold hover:text-black transition">
                Call {SITE.phoneDisplay}
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function Eyebrow({ children }: { children: React.ReactNode }) {
  return <div className="inline-flex items-center gap-2 text-xs uppercase tracking-widest text-gold font-semibold"><span className="h-px w-8 bg-gold" />{children}</div>;
}

function Section({ eyebrow, title, subtitle, children }: { eyebrow: string; title: string; subtitle?: string; children: React.ReactNode }) {
  return (
    <section className="container mx-auto px-5 py-20">
      <div className="text-center max-w-2xl mx-auto mb-12">
        <Eyebrow>{eyebrow}</Eyebrow>
        <h2 className="text-3xl md:text-5xl font-bold mt-3">{title}</h2>
        {subtitle && <p className="mt-4 text-muted-foreground">{subtitle}</p>}
      </div>
      {children}
    </section>
  );
}