import { createFileRoute, Link } from "@tanstack/react-router";
import { useState, useEffect } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { motion } from "framer-motion";
import SiteHeader from "@/components/SiteHeader";
import PageTransition from "@/components/PageTransition";
import { useLanguage } from "@/i18n/LanguageContext";
import aboutLibrary from "@/assets/about-library.jpg";
import { useManagedExpertise, localizeExpertise } from "@/hooks/useManagedExpertise";
import { useManagedTeam, localizeTeamMember } from "@/hooks/useManagedTeam";
import { useManagedArticles, localizeArticle } from "@/hooks/useManagedArticles";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Güler Legal Group — International Legal & Business Advisory" },
      { name: "description", content: "Boutique legal and business advisory with a cross-border focus between Switzerland and Turkey." },
      { property: "og:title", content: "Güler Legal Group" },
      { property: "og:description", content: "International legal and business advisory between Switzerland and Turkey." },
    ],
  }),
  component: HomePage,
});

function HomePage() {
  return (
    <PageTransition>
      <div className="min-h-screen">
        <SiteHeader variant="light" />
        <HeroSection />
        <ExpertisePreview />
        <AboutPreview />
        <TeamPreview />
        <PublicationsPreview />
        <ContactBanner />
      </div>
    </PageTransition>
  );
}

function HeroSection() {
  const { tr } = useLanguage();
  const slides = [
    { type: "video", src: "/videos/hero-basel.mp4", locationKey: "home.hero.slide1.location", descKey: "home.hero.slide1.desc" },
    { type: "video", src: "/videos/hero-bern.mp4", locationKey: "home.hero.slide2.location", descKey: "home.hero.slide2.desc" },
    { type: "video", src: "/videos/hero-istanbul.mp4", locationKey: "home.hero.slide3.location", descKey: "home.hero.slide3.desc" },
    { type: "video", src: "/videos/hero-ankara.mp4", locationKey: "home.hero.slide4.location", descKey: "home.hero.slide4.desc" },
    { type: "video", src: "/videos/hero-zurich.mp4", locationKey: "home.hero.slide5.location", descKey: "home.hero.slide5.desc" },
  ];

  const [current, setCurrent] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => setCurrent((p) => (p + 1) % slides.length), 9000);
    return () => clearInterval(timer);
  }, [slides.length]);

  const prev = () => setCurrent((c) => (c - 1 + slides.length) % slides.length);
  const next = () => setCurrent((c) => (c + 1) % slides.length);
  const titleLines = tr("home.hero.title").split("\n");

  return (
    <section className="relative h-screen w-full overflow-hidden">
      {slides.map((slide, i) => (
        <div key={i} className="absolute inset-0 transition-opacity duration-1000" style={{ opacity: i === current ? 1 : 0 }}>
          <video src={slide.src} autoPlay muted loop playsInline className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-gradient-to-b from-foreground/35 via-foreground/20 to-foreground/60" />
        </div>
      ))}


      <motion.div className="absolute bottom-44 md:bottom-48 left-6 md:left-10 z-10 max-w-4xl" initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.3 }}>
        <h1 className="hero-title">{titleLines.map((line, i) => <span key={i}>{line}{i < titleLines.length - 1 && <br />}</span>)}</h1>
      </motion.div>

      <motion.p className="absolute bottom-28 md:bottom-32 left-6 md:left-10 z-10 font-body text-sm md:text-base font-light tracking-[0.08em] text-white/85" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.6 }}>{tr("home.hero.subtitle")}</motion.p>

      <motion.div className="absolute bottom-0 left-0 right-0 z-10" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.8 }}>
        <div className="mx-6 md:mx-10 border-t border-white/30" />
        <div className="flex items-center justify-between px-6 md:px-10 py-5 md:py-6 gap-6">
          <div className="flex items-center gap-3">
            <div className="w-2 h-2 rounded-full bg-white/60" />
            <span className="text-xs tracking-[0.15em] font-body font-light text-white/80">{tr(slides[current].locationKey)}</span>
          </div>
          <p className="hidden md:block max-w-xl text-sm font-body font-light leading-relaxed text-white/75">{tr(slides[current].descKey)}</p>
          <div className="flex items-center gap-4">
            <Link to="/contact" className="btn-contact-light hidden sm:inline-block">{tr("home.hero.contact")}</Link>
            <div className="flex gap-2">
              <button onClick={prev} className="w-10 h-10 rounded-full border border-white/30 flex items-center justify-center transition-colors hover:bg-white/10" aria-label="Previous"><ChevronLeft className="w-4 h-4 text-white/80" /></button>
              <button onClick={next} className="w-10 h-10 rounded-full border border-white/30 flex items-center justify-center transition-colors hover:bg-white/10" aria-label="Next"><ChevronRight className="w-4 h-4 text-white/80" /></button>
            </div>
          </div>
        </div>
      </motion.div>

      <div className="absolute bottom-20 left-6 md:left-10 z-10 flex gap-2">
        {slides.map((_, i) => <button key={i} onClick={() => setCurrent(i)} className={`h-0.5 transition-all duration-500 ${i === current ? "w-8 bg-white/80" : "w-4 bg-white/30"}`} aria-label={`Slide ${i + 1}`} />)}
      </div>
    </section>
  );
}

function ExpertisePreview() {
  const { tr, lang } = useLanguage();
  const { areas } = useManagedExpertise();
  const featured = areas.slice(0, 8).map((area) => localizeExpertise(area, lang));
  return (
    <section className="py-20 md:py-28 px-6 md:px-10 bg-background">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4">
          {featured.map((area, i) => (
            <motion.div key={area.slug} initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.2 }} transition={{ duration: 0.6, delay: (i % 4) * 0.08 }}>
              <Link to="/expertise/$slug" params={{ slug: area.slug }} className="expertise-card group aspect-[4/3] block">
                <img src={area.image} alt={area.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" />
                <div className="expertise-card-overlay">
                  <span className="expertise-card-label">{tr("home.expertise.discover")}</span>
                  <span className="expertise-card-title">{area.title}</span>
                </div>
              </Link>
            </motion.div>
          ))}
        </div>
        <div className="text-center mt-12"><Link to="/expertise" className="btn-contact">{tr("home.expertise.viewAll")}</Link></div>
      </div>
    </section>
  );
}

function AboutPreview() {
  const { tr } = useLanguage();
  return (
    <section className="bg-background">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-20 md:py-28">
        <div className="mb-4 border-t border-border" />
        <h2 className="section-title text-foreground mb-14">{tr("home.about.title")}</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-16 items-center">
          <motion.div className="relative overflow-hidden aspect-[3/2]" initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.7 }}>
            <img src={aboutLibrary} alt="Güler Legal Group" className="w-full h-full object-cover" loading="lazy" />
          </motion.div>
          <motion.div initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.7, delay: 0.15 }}>
            <h3 className="font-heading text-2xl md:text-3xl font-normal text-foreground mb-6 leading-snug">{tr("home.about.subtitle")}</h3>
            <div className="space-y-4 font-body text-sm font-light leading-relaxed text-muted-foreground"><p>{tr("home.about.p1")}</p><p>{tr("home.about.p2")}</p></div>
            <div className="grid grid-cols-3 gap-6 mt-10 pt-8 border-t border-border">
              <div><span className="font-heading text-xl md:text-2xl font-normal text-foreground">Structured</span><p className="font-body text-xs text-muted-foreground mt-1">{tr("home.about.years")}</p></div>
              <div><span className="font-heading text-xl md:text-2xl font-normal text-foreground">Selective</span><p className="font-body text-xs text-muted-foreground mt-1">{tr("home.about.areas")}</p></div>
              <div><span className="font-heading text-xl md:text-2xl font-normal text-foreground">International</span><p className="font-body text-xs text-muted-foreground mt-1">{tr("home.about.offices")}</p></div>
            </div>
            <div className="mt-8"><Link to="/about" className="btn-contact">{tr("home.about.learnMore")}</Link></div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

function TeamPreview() {
  const { tr, lang } = useLanguage();
  const { members } = useManagedTeam();
  const featured = members.slice(0, 4).map((member) => localizeTeamMember(member, lang));
  return (
    <section className="py-20 md:py-28 px-6 md:px-10 bg-secondary">
      <div className="max-w-7xl mx-auto">
        <div className="mb-4 border-t border-border" />
        <h2 className="section-title text-foreground mb-14">{tr("home.team.title")}</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
          {featured.map((member) => (
            <Link key={member.slug} to="/team/$slug" params={{ slug: member.slug }} className="team-card group">
              <div className="aspect-[3/4] overflow-hidden mb-4 bg-muted"><img src={member.image} alt={member.name} className="w-full h-full object-cover" loading="lazy" /></div>
              <h3 className="font-heading text-base font-medium text-foreground">{member.name}</h3>
              <p className="font-body text-xs text-muted-foreground mt-0.5">{member.role}</p>
              <p className="font-body text-xs text-muted-foreground">{member.office}</p>
            </Link>
          ))}
        </div>
        <div className="text-center mt-12"><Link to="/team" className="btn-contact">{tr("home.team.viewAll")}</Link></div>
      </div>
    </section>
  );
}

function PublicationsPreview() {
  const { tr, lang } = useLanguage();
  const { publishedArticles } = useManagedArticles();
  const articles = publishedArticles.slice(0, 3).map((article) => localizeArticle(article, lang));
  return (
    <section className="py-20 md:py-28 px-6 md:px-10 bg-background">
      <div className="max-w-7xl mx-auto">
        <div className="mb-4 border-t border-border" />
        <h2 className="section-title text-foreground mb-14">{tr("home.news.title")}</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10">
          {articles.map((article, i) => (
            <motion.article key={article.id} className="group cursor-pointer" initial={{ opacity: 0, y: 25 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: i * 0.1 }}>
              <Link to="/news/$slug" params={{ slug: article.slug }} className="block">
                <div className="aspect-[16/10] overflow-hidden mb-4"><img src={article.image} alt={article.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" /></div>
                <div className="flex items-center gap-3 mb-2"><span className="font-body text-[10px] tracking-[0.1em] uppercase text-accent font-medium">{article.category}</span><span className="font-body text-[10px] text-muted-foreground">{new Date(article.date).toLocaleDateString()}</span></div>
                <h3 className="font-heading text-base font-medium text-foreground leading-snug group-hover:text-accent transition-colors">{article.title}</h3>
              </Link>
            </motion.article>
          ))}
        </div>
        <div className="text-center mt-12"><Link to="/news" className="btn-contact">{tr("home.news.viewAll")}</Link></div>
      </div>
    </section>
  );
}

function ContactBanner() {
  const { tr } = useLanguage();
  return (
    <section className="py-20 md:py-24 px-6 md:px-10 bg-secondary border-t border-border">
      <div className="max-w-4xl mx-auto text-center">
        <h2 className="font-heading text-3xl md:text-5xl font-normal text-foreground mb-4">{tr("home.contact.title")}</h2>
        <p className="font-body text-sm md:text-base font-light leading-relaxed text-muted-foreground max-w-2xl mx-auto mb-8">{tr("home.contact.desc")}</p>
        <Link to="/contact" className="btn-contact">{tr("home.contact.btn")}</Link>
      </div>
    </section>
  );
}