import { createFileRoute, Link } from "@tanstack/react-router";
import { useState, useCallback } from "react";
import { Award, Heart, Target, Users, ChevronRight } from "lucide-react";
import aboutImg from "@/assets/about.jpg";
import founderSankalp from "@/assets/founder-sankalp.jpg";
import founderSaumitra from "@/assets/founder-saumitra.jpg";
import { CTAButton } from "@/components/CTAButton";
import { SITE } from "@/lib/site";

const FOUNDER_FALLBACK = "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&q=80&auto=format&fit=crop";

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About Pune Property Club — Boutique Real Estate Advisory in Baner" },
      { name: "description", content: "Founded by Sankalp & Saumitra, Pune Property Club is a boutique real estate advisory helping families buy luxury homes in Pune for over a decade." },
    ],
  }),
  component: About,
});

function FounderCard({ name, role, bio, img }: { name: string; role: string; bio: string; img: string }) {
  const [src, setSrc] = useState(img);
  const handleError = useCallback(() => setSrc(FOUNDER_FALLBACK), []);

  return (
    <div className="bg-card border border-border rounded-2xl p-8 text-center hover-lift reveal">
      <div className="h-32 w-32 rounded-full overflow-hidden mx-auto mb-4 ring-4 ring-gold/30 shadow-luxury bg-muted">
        <img src={src} alt={name} loading="lazy" width={256} height={256} onError={handleError} className="w-full h-full object-cover" />
      </div>
      <h3 className="font-bold text-xl">{name}</h3>
      <div className="text-gold text-sm font-semibold mt-1">{role}</div>
      <p className="text-sm text-muted-foreground mt-4 leading-relaxed">{bio}</p>
    </div>
  );
}

function About() {
  return (
    <div>
      <PageHeader title="About Pune Property Club" subtitle="A boutique real estate club rooted in Baner, trusted across Pune." />

      <section className="container mx-auto px-5 py-20 grid gap-12 lg:grid-cols-2 items-center">
        <div className="relative aspect-[5/4] rounded-3xl overflow-hidden">
          <img src={aboutImg} alt="Pune Property Club team in office" loading="lazy" className="absolute inset-0 w-full h-full object-cover" />
        </div>
        <div>
          <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" />Our Story</div>
          <h2 className="text-3xl md:text-4xl font-bold mt-3 leading-tight">Twelve years of helping Pune call <span className="gradient-text-gold">a place home.</span></h2>
          <p className="mt-5 text-muted-foreground leading-relaxed">Pune Property Club was founded by {SITE.owners.join(" & ")} on a simple belief: real estate advisory should feel like a trusted friend, not a transaction. We started in 2013 with a single client and a promise — only recommend what we'd buy ourselves.</p>
          <p className="mt-4 text-muted-foreground leading-relaxed">Today we're a boutique team of seven, headquartered near Baner Hill, advising families, NRIs, and investors on premium residential and commercial property across Pune. We close fewer deals than the big chains. That's the point.</p>
        </div>
      </section>

      <section className="bg-card/50 py-20">
        <div className="container mx-auto px-5">
          <h2 className="text-3xl md:text-4xl font-bold text-center">What we stand for</h2>
          <div className="grid gap-6 md:grid-cols-4 mt-12">
            {[
              { icon: Heart, t: "Honesty First", d: "We'll tell you when not to buy. Often." },
              { icon: Award, t: "Curated, Not Listed", d: "Every property is personally vetted before it reaches you." },
              { icon: Target, t: "Long-Term Thinking", d: "We optimise for your next 10 years, not our next commission." },
              { icon: Users, t: "Boutique by Design", d: "We cap our client load so service never dilutes." },
            ].map((v, i) => (
              <div key={i} className="bg-card border border-border rounded-2xl p-6 hover-lift">
                <div className="h-12 w-12 rounded-xl gradient-gold text-black flex items-center justify-center mb-4"><v.icon size={22} /></div>
                <h3 className="font-bold text-lg mb-2">{v.t}</h3>
                <p className="text-sm text-muted-foreground">{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="container mx-auto px-5 py-20">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Meet the founders</h2>
        <div className="grid gap-8 md:grid-cols-2 max-w-4xl mx-auto">
          <FounderCard name="Mr. Sankalp Sir" role="Co-Founder & Principal Advisor" bio="12+ years in Pune real estate, specialising in premium residential transactions across Baner and Balewadi." img={founderSankalp} />
          <FounderCard name="Mr. Saumitra Sir" role="Co-Founder & Investment Strategy" bio="Leads commercial advisory and NRI investment desk. ICAI background with deep underwriting expertise." img={founderSaumitra} />
        </div>
        <div className="text-center mt-12">
          <CTAButton source="about-cta" size="lg">Talk to a Founder</CTAButton>
        </div>
      </section>
    </div>
  );
}

export function PageHeader({ title, subtitle }: { title: string; subtitle?: string }) {
  return (
    <section className="gradient-navy text-white py-16 md:py-24 -mt-20 pt-32 md:pt-40">
      <div className="container mx-auto px-5">
        <div className="text-xs text-white/60 mb-3 inline-flex items-center gap-2">
          <Link to="/" className="hover:text-gold">Home</Link><ChevronRight size={12} /><span className="text-gold">{title}</span>
        </div>
        <h1 className="text-4xl md:text-6xl font-bold leading-tight">{title}</h1>
        {subtitle && <p className="mt-4 text-white/80 text-lg max-w-2xl">{subtitle}</p>}
      </div>
    </section>
  );
}