import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { Phone, MapPin, Instagram, Facebook, MessageCircle, Menu, X, Sparkles, Scissors, Hand, Crown, Heart, User, Check, Star } from "lucide-react";
import hero from "@/assets/hero.jpg";
import laser from "@/assets/laser.jpg";
import bridal from "@/assets/bridal.jpg";
import hair from "@/assets/hair.jpg";
import nails from "@/assets/nails.jpg";
import interior from "@/assets/interior.jpg";
import skin from "@/assets/skin.jpg";
import men from "@/assets/men.jpg";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "My Salounge — Ultra Luxury Salon in Ahmedabad | Hair, Skin, Laser & Bridal" },
      { name: "description", content: "Ahmedabad's most luxurious salon on Sindhubhavan Road. Premium hair, skin, laser hair removal, bridal makeup, nails & men's grooming. Book your appointment today." },
      { property: "og:title", content: "My Salounge — Where Luxury Meets Beauty" },
      { property: "og:description", content: "Ultra-luxury salon experience in Ahmedabad." },
      { property: "og:image", content: hero },
    ],
  }),
  component: Home,
});

const PHONE = "+91 74500 74745";
const PHONE_RAW = "+917450074745";
const WHATSAPP = "https://wa.me/917450074745";
const MAPS = "https://www.google.com/maps/search/?api=1&query=B-104+Times+Square+Grand+Sindhubhavan+Road+Ahmedabad";

function Nav() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links: Array<[string, string]> = [
    ["Services", "#services"],
    ["Laser", "#laser"],
    ["Bridal", "#bridal"],
    ["Gallery", "#gallery"],
    ["About", "#about"],
    ["Visit", "#location"],
  ];
  return (
    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-500 ${scrolled ? "bg-background/85 backdrop-blur-md border-b border-border" : "bg-transparent"}`}>
      <div className="max-w-7xl mx-auto px-5 md:px-10 h-16 md:h-20 flex items-center justify-between">
        <a href="#top" className="flex items-baseline gap-2">
          <span className="font-display text-2xl md:text-3xl gold-text tracking-wide">My Salounge</span>
        </a>
        <nav className="hidden lg:flex items-center gap-9">
          {links.map(([l, h]) => (
            <a key={h} href={h} className="text-xs uppercase tracking-[0.2em] text-foreground/80 hover:text-gold transition-colors">{l}</a>
          ))}
        </nav>
        <div className="hidden lg:flex items-center gap-3">
          <a href={`tel:${PHONE_RAW}`} className="text-xs uppercase tracking-[0.2em] text-gold">{PHONE}</a>
          <a href={WHATSAPP} className="px-5 py-2.5 bg-gold text-primary-foreground text-xs uppercase tracking-[0.2em] hover:bg-gold-soft transition-colors">Book Now</a>
        </div>
        <button className="lg:hidden text-foreground" onClick={() => setOpen(!open)} aria-label="Menu">
          {open ? <X size={22} /> : <Menu size={22} />}
        </button>
      </div>
      {open && (
        <div className="lg:hidden bg-background/98 backdrop-blur-md border-t border-border">
          <div className="px-6 py-8 flex flex-col gap-6">
            {links.map(([l, h]) => (
              <a key={h} href={h} onClick={() => setOpen(false)} className="text-sm uppercase tracking-[0.2em] text-foreground/90">{l}</a>
            ))}
            <div className="hairline" />
            <a href={`tel:${PHONE_RAW}`} className="text-sm uppercase tracking-[0.2em] text-gold">{PHONE}</a>
            <a href={WHATSAPP} className="px-5 py-3 bg-gold text-primary-foreground text-xs uppercase tracking-[0.2em] text-center">Book Appointment</a>
          </div>
        </div>
      )}
    </header>
  );
}

function Eyebrow({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex items-center justify-center gap-3 text-[10px] md:text-xs uppercase tracking-[0.35em] text-gold mb-6">
      <span className="w-8 h-px bg-gold/60" />
      {children}
      <span className="w-8 h-px bg-gold/60" />
    </div>
  );
}

function Hero() {
  return (
    <section id="top" className="relative min-h-[100svh] flex items-center justify-center overflow-hidden">
      <img src={hero} alt="My Salounge ultra luxury interior" width={1600} height={1800} className="absolute inset-0 w-full h-full object-cover" />
      <div className="absolute inset-0 bg-gradient-to-b from-background/70 via-background/50 to-background" />
      <div className="absolute inset-0 bg-background/30" />
      <div className="relative z-10 text-center px-6 max-w-4xl mx-auto pt-20">
        <Eyebrow>Established in Ahmedabad</Eyebrow>
        <h1 className="font-display text-5xl sm:text-6xl md:text-8xl leading-[1.05] text-foreground">
          Ahmedabad's <span className="italic gold-text">Ultra Luxury</span><br/>Salon Experience
        </h1>
        <p className="mt-8 text-sm md:text-base text-muted-foreground max-w-xl mx-auto leading-relaxed">
          Premium Hair, Beauty, Skin, Laser, Nail & Grooming Services — crafted under one extraordinary roof.
        </p>
        <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center items-center">
          <a href={WHATSAPP} className="px-8 py-4 bg-gold text-primary-foreground text-xs uppercase tracking-[0.25em] hover:bg-gold-soft transition-all w-full sm:w-auto">Book Appointment</a>
          <a href={`tel:${PHONE_RAW}`} className="px-8 py-4 border border-gold/60 text-gold text-xs uppercase tracking-[0.25em] hover:bg-gold/10 transition-all w-full sm:w-auto inline-flex items-center justify-center gap-2"><Phone size={14}/> Call Now</a>
        </div>
        <p className="mt-8 text-xs tracking-[0.3em] uppercase text-foreground/70">{PHONE}</p>
      </div>
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-[10px] uppercase tracking-[0.4em] text-gold/70 animate-pulse">Scroll</div>
    </section>
  );
}

function Laser() {
  const benefits = [
    "Long-Term Hair Reduction", "Suitable for Men & Women", "Safe & Professional Treatment",
    "Faster Than Traditional Methods", "Personalized Consultation", "Comfortable Experience",
  ];
  const areas = ["Full Body", "Face", "Underarms", "Arms", "Legs", "Bikini Area", "Back & Chest"];
  return (
    <section id="laser" className="relative py-24 md:py-36 px-6 md:px-10 overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-background via-charcoal/30 to-background" />
      <div className="relative max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
        <div className="relative order-2 lg:order-1">
          <div className="absolute -inset-4 border border-gold/30" />
          <img src={laser} alt="Advanced laser hair removal" loading="lazy" width={1024} height={1280} className="relative w-full h-[500px] md:h-[640px] object-cover" />
        </div>
        <div className="order-1 lg:order-2">
          <Eyebrow>Signature Treatment</Eyebrow>
          <h2 className="font-display text-4xl md:text-6xl leading-tight">
            Ahmedabad's Trusted <span className="italic gold-text">Destination</span> for Laser Hair Removal
          </h2>
          <p className="mt-6 text-base text-foreground/80 italic font-display">
            Say goodbye to unwanted hair. Experience smooth, confident skin.
          </p>
          <p className="mt-6 text-sm leading-relaxed text-muted-foreground">
            Using advanced technology and personalized consultation, we help clients achieve long-lasting hair reduction safely, comfortably, and effectively.
          </p>
          <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-3">
            {benefits.map((b) => (
              <div key={b} className="flex items-center gap-3 text-sm">
                <span className="w-6 h-6 rounded-full gold-border flex items-center justify-center shrink-0"><Check size={12} className="text-gold"/></span>
                <span className="text-foreground/85">{b}</span>
              </div>
            ))}
          </div>
          <div className="mt-10">
            <p className="text-xs uppercase tracking-[0.3em] text-gold mb-4">Treatment Areas</p>
            <div className="flex flex-wrap gap-2">
              {areas.map((a) => (
                <span key={a} className="px-4 py-2 text-xs uppercase tracking-wider border border-gold/40 text-foreground/80">{a}</span>
              ))}
            </div>
          </div>
          <a href={WHATSAPP} className="mt-10 inline-block px-8 py-4 bg-gold text-primary-foreground text-xs uppercase tracking-[0.25em] hover:bg-gold-soft transition-all">Book Free Consultation</a>
        </div>
      </div>
    </section>
  );
}

function About() {
  const highlights = ["Luxury Interiors", "Expert Professionals", "Advanced Laser Technology", "Premium Products", "Personalized Consultation", "Exceptional Experience"];
  return (
    <section id="about" className="py-24 md:py-36 px-6 md:px-10">
      <div className="max-w-5xl mx-auto text-center">
        <Eyebrow>About My Salounge</Eyebrow>
        <h2 className="font-display text-4xl md:text-6xl leading-tight">
          A New Standard of <span className="italic gold-text">Luxury Beauty</span>
        </h2>
        <p className="mt-8 text-base md:text-lg text-muted-foreground leading-relaxed max-w-3xl mx-auto">
          My Salounge has been created to redefine salon experiences in Ahmedabad. Combining luxury interiors, highly trained professionals, premium products, advanced laser technology, and personalized service — we deliver a beauty experience that goes beyond expectations.
        </p>
        <div className="hairline my-12 max-w-xs mx-auto" />
        <div className="grid grid-cols-2 md:grid-cols-3 gap-px bg-border">
          {highlights.map((h) => (
            <div key={h} className="bg-background py-8 px-4">
              <Sparkles size={18} className="text-gold mx-auto mb-3" />
              <p className="text-xs md:text-sm uppercase tracking-[0.2em] text-foreground/85">{h}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const SERVICE_GROUPS = [
  { icon: Scissors, title: "Hair", img: hair, items: ["Hair Cut & Styling", "Hair Spa", "Hair Coloring", "Hair Smoothening", "Keratin Treatment", "Hair Rebonding"] },
  { icon: Sparkles, title: "Beauty", img: skin, items: ["Facials", "Cleanups", "Skin Treatments", "Waxing", "Threading"] },
  { icon: Star, title: "Advanced Aesthetics", img: laser, items: ["Laser Hair Removal", "Skin Rejuvenation", "Pigmentation Treatments", "Advanced Skin Care"] },
  { icon: Crown, title: "Bridal", img: bridal, items: ["Bridal Makeup", "Engagement Makeup", "Reception Makeup", "Pre-Bridal Packages"] },
  { icon: Hand, title: "Nails", img: nails, items: ["Nail Extensions", "Nail Art", "Nail Care"] },
  { icon: User, title: "Men's Grooming", img: men, items: ["Haircuts", "Beard Grooming", "Premium Grooming Packages"] },
];

function Services() {
  return (
    <section id="services" className="py-24 md:py-36 px-6 md:px-10 bg-charcoal/20">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <Eyebrow>Our Services</Eyebrow>
          <h2 className="font-display text-4xl md:text-6xl">Crafted for the <span className="italic gold-text">Discerning</span></h2>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-border">
          {SERVICE_GROUPS.map(({ icon: Icon, title, img, items }) => (
            <div key={title} className="group relative bg-background overflow-hidden">
              <div className="relative h-64 overflow-hidden">
                <img src={img} alt={title} loading="lazy" className="w-full h-full object-cover opacity-60 group-hover:opacity-90 group-hover:scale-105 transition-all duration-700" />
                <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
                <div className="absolute bottom-4 left-6 flex items-center gap-3">
                  <Icon size={18} className="text-gold" />
                  <h3 className="font-display text-2xl text-foreground">{title}</h3>
                </div>
              </div>
              <ul className="p-6 space-y-2">
                {items.map((i) => (
                  <li key={i} className="text-sm text-foreground/75 flex items-center gap-3">
                    <span className="w-1 h-1 bg-gold rounded-full" />{i}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Bridal() {
  const items = ["Bridal Makeup", "Engagement Makeup", "Reception Makeup", "Family Packages", "Party Makeup", "Hair Styling", "Pre-Bridal Treatments"];
  return (
    <section id="bridal" className="relative py-24 md:py-36 px-6 md:px-10 overflow-hidden">
      <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
        <div>
          <Eyebrow>Your Special Day</Eyebrow>
          <h2 className="font-display text-4xl md:text-6xl leading-tight">
            Your Perfect Look For <span className="italic gold-text">Every Celebration</span>
          </h2>
          <p className="mt-6 text-sm md:text-base leading-relaxed text-muted-foreground">
            Located conveniently near premium event venues, My Salounge is the preferred destination for brides, bridesmaids, engagement celebrations, receptions, parties, and family functions.
          </p>
          <ul className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3">
            {items.map((i) => (
              <li key={i} className="flex items-center gap-3 text-sm border-b border-border/60 pb-3">
                <Heart size={14} className="text-gold" /><span className="text-foreground/85">{i}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className="relative">
          <div className="absolute -inset-4 border border-gold/30" />
          <img src={bridal} alt="Bridal makeup" loading="lazy" width={1024} height={1280} className="relative w-full h-[500px] md:h-[700px] object-cover" />
        </div>
      </div>
    </section>
  );
}

function WhyUs() {
  const points = ["Ultra Luxury Ambience", "Experienced Stylists", "Advanced Laser Technology", "International Quality Products", "Personalized Service", "Highest Hygiene Standards", "One Stop Beauty Destination"];
  return (
    <section className="relative py-24 md:py-36 px-6 md:px-10 overflow-hidden">
      <img src={interior} alt="" loading="lazy" className="absolute inset-0 w-full h-full object-cover opacity-15" />
      <div className="absolute inset-0 bg-gradient-to-b from-background via-background/90 to-background" />
      <div className="relative max-w-5xl mx-auto text-center">
        <Eyebrow>Why Choose Us</Eyebrow>
        <h2 className="font-display text-4xl md:text-6xl">The <span className="italic gold-text">My Salounge</span> Difference</h2>
        <div className="mt-14 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {points.map((p, i) => (
            <div key={p} className="border border-gold/20 bg-background/40 backdrop-blur-sm p-6 flex items-start gap-4 text-left">
              <span className="font-display text-2xl gold-text shrink-0">{String(i + 1).padStart(2, "0")}</span>
              <p className="text-sm text-foreground/85 leading-relaxed pt-1">{p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  const imgs = [hero, bridal, hair, laser, nails, interior, skin, men];
  return (
    <section id="gallery" className="py-24 md:py-36 px-6 md:px-10">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16">
          <Eyebrow>Gallery</Eyebrow>
          <h2 className="font-display text-4xl md:text-6xl">Moments of <span className="italic gold-text">Luxury</span></h2>
        </div>
        <div className="columns-2 md:columns-3 lg:columns-4 gap-3 space-y-3">
          {imgs.map((src, i) => (
            <div key={i} className={`break-inside-avoid overflow-hidden mb-3 ${i % 3 === 0 ? "aspect-[3/4]" : i % 3 === 1 ? "aspect-square" : "aspect-[4/5]"}`}>
              <img src={src} alt="" loading="lazy" className="w-full h-full object-cover hover:scale-105 transition-transform duration-700" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { name: "Anaya S.", role: "Bride", text: "The team at My Salounge made my wedding day flawless. The bridal makeup was beyond perfect — I felt like royalty." },
    { name: "Priya M.", role: "Laser Client", text: "Best laser hair removal experience in Ahmedabad. Professional, comfortable, and visible results from the very first session." },
    { name: "Rohan D.", role: "Regular Client", text: "The grooming experience is unmatched. Truly a luxury escape every time I visit." },
    { name: "Meera K.", role: "Skincare Client", text: "My skin has transformed. The personalized consultation and premium products make all the difference." },
  ];
  return (
    <section className="py-24 md:py-36 px-6 md:px-10 bg-charcoal/20">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-16">
          <Eyebrow>Testimonials</Eyebrow>
          <h2 className="font-display text-4xl md:text-6xl">Words From Our <span className="italic gold-text">Clientele</span></h2>
        </div>
        <div className="grid md:grid-cols-2 gap-6">
          {items.map((t) => (
            <figure key={t.name} className="border border-gold/20 p-8 md:p-10 bg-background/60">
              <div className="flex gap-1 mb-4">
                {[...Array(5)].map((_, i) => <Star key={i} size={12} className="fill-gold text-gold" />)}
              </div>
              <blockquote className="font-display text-xl md:text-2xl leading-relaxed text-foreground/90 italic">"{t.text}"</blockquote>
              <figcaption className="mt-6 pt-6 border-t border-border/60">
                <p className="text-sm uppercase tracking-[0.2em] text-gold">{t.name}</p>
                <p className="text-xs text-muted-foreground mt-1">{t.role}</p>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function Location() {
  return (
    <section id="location" className="py-24 md:py-36 px-6 md:px-10">
      <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
        <div>
          <Eyebrow>Visit Us</Eyebrow>
          <h2 className="font-display text-4xl md:text-6xl leading-tight">Step Into <span className="italic gold-text">Our World</span></h2>
          <div className="mt-10 space-y-6">
            <div className="flex gap-4">
              <MapPin className="text-gold shrink-0 mt-1" size={20} />
              <div>
                <p className="text-xs uppercase tracking-[0.25em] text-gold mb-2">Address</p>
                <p className="text-base text-foreground/90 leading-relaxed">B-104 Times Square Grand,<br/>Sindhubhavan Road,<br/>Ahmedabad, Gujarat, India</p>
              </div>
            </div>
            <div className="flex gap-4">
              <Phone className="text-gold shrink-0 mt-1" size={20} />
              <div>
                <p className="text-xs uppercase tracking-[0.25em] text-gold mb-2">Phone</p>
                <a href={`tel:${PHONE_RAW}`} className="text-base text-foreground/90 hover:text-gold">{PHONE}</a>
              </div>
            </div>
          </div>
          <div className="mt-10 flex flex-col sm:flex-row gap-3">
            <a href={MAPS} target="_blank" rel="noreferrer" className="px-7 py-3.5 bg-gold text-primary-foreground text-xs uppercase tracking-[0.25em] text-center">Get Directions</a>
            <a href={WHATSAPP} className="px-7 py-3.5 border border-gold/60 text-gold text-xs uppercase tracking-[0.25em] text-center">WhatsApp Us</a>
          </div>
        </div>
        <div className="relative h-[400px] md:h-[500px] border border-gold/30">
          <iframe
            title="My Salounge Location"
            src="https://www.google.com/maps?q=Times+Square+Grand+Sindhubhavan+Road+Ahmedabad&output=embed"
            className="w-full h-full grayscale contrast-125"
            loading="lazy"
          />
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="relative py-24 md:py-36 px-6 md:px-10 overflow-hidden">
      <img src={hero} alt="" loading="lazy" className="absolute inset-0 w-full h-full object-cover opacity-30" />
      <div className="absolute inset-0 bg-background/70" />
      <div className="relative max-w-3xl mx-auto text-center">
        <Eyebrow>The Experience Awaits</Eyebrow>
        <h2 className="font-display text-4xl md:text-7xl leading-[1.05]">
          Ready To Experience <span className="italic gold-text">Luxury?</span>
        </h2>
        <p className="mt-6 text-base text-muted-foreground">Book your appointment today and discover a salon experience unlike any other.</p>
        <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
          <a href={WHATSAPP} className="px-8 py-4 bg-gold text-primary-foreground text-xs uppercase tracking-[0.25em]">Book Appointment</a>
          <a href={`tel:${PHONE_RAW}`} className="px-8 py-4 border border-gold/60 text-gold text-xs uppercase tracking-[0.25em] inline-flex items-center justify-center gap-2"><Phone size={14}/> Call Now</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const socials: Array<[typeof Instagram, string]> = [
    [Instagram, "https://instagram.com"],
    [Facebook, "https://facebook.com"],
    [MessageCircle, WHATSAPP],
  ];
  return (
    <footer className="border-t border-border bg-background pt-16 pb-28 md:pb-16 px-6 md:px-10">
      <div className="max-w-7xl mx-auto grid md:grid-cols-3 gap-10">
        <div>
          <h3 className="font-display text-3xl gold-text">My Salounge</h3>
          <p className="mt-2 text-xs uppercase tracking-[0.3em] text-foreground/70">Where Luxury Meets Beauty</p>
        </div>
        <div>
          <p className="text-xs uppercase tracking-[0.25em] text-gold mb-3">Visit</p>
          <p className="text-sm text-foreground/80 leading-relaxed">B-104 Times Square Grand,<br/>Sindhubhavan Road, Ahmedabad</p>
          <a href={`tel:${PHONE_RAW}`} className="block mt-3 text-sm text-foreground/80 hover:text-gold">{PHONE}</a>
        </div>
        <div>
          <p className="text-xs uppercase tracking-[0.25em] text-gold mb-3">Follow</p>
          <div className="flex gap-3">
            {socials.map(([Icon, href], i) => (
              <a key={i} href={href} target="_blank" rel="noreferrer" className="w-10 h-10 border border-gold/40 flex items-center justify-center text-gold hover:bg-gold hover:text-primary-foreground transition-colors">
                <Icon size={16} />
              </a>
            ))}
          </div>
        </div>
      </div>
      <div className="hairline mt-12 max-w-7xl mx-auto" />
      <p className="text-center text-xs text-muted-foreground mt-6 tracking-wider">© {new Date().getFullYear()} My Salounge. All rights reserved.</p>
    </footer>
  );
}

function FloatingActions() {
  return (
    <>
      <a href={WHATSAPP} target="_blank" rel="noreferrer" aria-label="WhatsApp" className="fixed bottom-5 right-5 z-40 w-14 h-14 bg-gold text-primary-foreground rounded-full flex items-center justify-center shadow-2xl hover:scale-110 transition-transform">
        <MessageCircle size={24} />
      </a>
      <a href={`tel:${PHONE_RAW}`} aria-label="Call" className="md:hidden fixed bottom-5 left-5 z-40 w-14 h-14 bg-background border border-gold text-gold rounded-full flex items-center justify-center shadow-2xl">
        <Phone size={22} />
      </a>
    </>
  );
}

function Home() {
  return (
    <div className="bg-background text-foreground overflow-x-hidden">
      <Nav />
      <main>
        <Hero />
        <Laser />
        <About />
        <Services />
        <Bridal />
        <WhyUs />
        <Gallery />
        <Testimonials />
        <Location />
        <FinalCTA />
      </main>
      <Footer />
      <FloatingActions />
    </div>
  );
}