import { createFileRoute, Link } from "@tanstack/react-router";
import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";
import { ArrowRight, Zap, ShieldCheck, Truck, Award, Sparkles } from "lucide-react";
import { FadeIn } from "@/components/motion/FadeIn";
import { Reveal } from "@/components/motion/Reveal";
import { ScaleIn } from "@/components/motion/ScaleIn";
import { StaggerContainer } from "@/components/motion/StaggerContainer";
import { StaggerItem } from "@/components/motion/StaggerItem";
import { products } from "@/data/products";
import { SITE_URL } from "@/lib/site";

export const Route = createFileRoute("/_site/")({
  head: () => ({
    meta: [
      { title: "Komal Star — Premium Electrical Equipment Wholesaler in Rajasthan" },
      {
        name: "description",
        content:
          "Komal Star is Rajasthan's trusted wholesaler of PVC conduit pipes, junction boxes, MCB distribution boxes and concealed accessories. ISI-certified quality, bulk supply across India.",
      },
      { property: "og:title", content: "Komal Star — Electrical Equipment Wholesaler" },
      { property: "og:description", content: "Premium ISI-certified electrical goods, delivered across Rajasthan and India." },
      { property: "og:type", content: "website" },
      { property: "og:url", content: `${SITE_URL}/` },
    ],
    links: [{ rel: "canonical", href: `${SITE_URL}/` }],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Organization",
          name: "Komal Star Electricals",
          url: SITE_URL,
          logo: `${SITE_URL}/logo.png`,
          description: "Electrical equipment wholesaler in Rajasthan, India",
          address: { "@type": "PostalAddress", addressRegion: "Rajasthan", addressCountry: "IN" },
          areaServed: "IN",
          contactPoint: {
            "@type": "ContactPoint",
            telephone: "+91-77339-99890",
            contactType: "sales",
            email: "contact@komalstar.com",
            areaServed: "IN",
            availableLanguage: "English",
          },
          sameAs: [
            "https://wa.me/917733999890",
          ],
        }),
      },
    ],
  }),
  component: Home,
});

function Home() {
  const heroRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const y = useTransform(scrollYProgress, [0, 1], [0, 200]);
  const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);
  const scale = useTransform(scrollYProgress, [0, 1], [1, 0.9]);

  const stats = [
    { k: "25+", v: "Years of trust" },
    { k: "500+", v: "Retailers served" },
    { k: "50+", v: "Product SKUs" },
    { k: "ISI", v: "Certified quality" },
  ];

  const features = [
    { icon: ShieldCheck, title: "ISI Certified", desc: "Every product tested to Bureau of Indian Standards." },
    { icon: Truck, title: "Bulk Supply", desc: "Direct wholesale delivery across Rajasthan & India." },
    { icon: Award, title: "Premium Grade", desc: "Made from genuine TATA CRCA sheet & branded PVC." },
    { icon: Zap, title: "Trade Pricing", desc: "Best-in-market wholesale rates for contractors." },
  ];

  return (
    <div>
      {/* HERO */}
      <section ref={heroRef} className="relative overflow-hidden bg-mesh">
        <motion.div style={{ y, opacity, scale }} className="relative mx-auto max-w-7xl px-4 pt-16 pb-8 sm:px-6 sm:pt-20 sm:pb-10 md:pt-24 md:pb-14">
          <div className="grid items-center gap-10 md:grid-cols-2 md:gap-12">
            <div>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
                className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-white/60 px-4 py-1.5 text-xs font-medium text-primary backdrop-blur"
              >
                <Sparkles className="h-3.5 w-3.5" /> Rajasthan's trusted electrical wholesaler
              </motion.div>

              <h1 className="mt-6 font-display text-4xl font-bold leading-[1.05] tracking-tight sm:text-5xl md:text-7xl">
                <motion.span
                  initial={{ opacity: 0, y: 40 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
                  className="block"
                >
                  Powering
                </motion.span>
                <motion.span
                  initial={{ opacity: 0, y: 40 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.9, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
                  className="block text-gradient-sky"
                >
                  every wire,
                </motion.span>
                <motion.span
                  initial={{ opacity: 0, y: 40 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.9, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}
                  className="block"
                >
                  every home.
                </motion.span>
              </h1>

              <motion.p
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.8, delay: 0.4 }}
                className="mt-5 max-w-lg text-base leading-relaxed text-muted-foreground sm:mt-6 sm:text-lg"
              >
                Komal Star crafts ISI-certified PVC conduits, junction boxes and MCB
                distribution boxes for India's finest electrical installations.
              </motion.p>

              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.5 }}
                className="mt-7 flex flex-wrap gap-3 sm:mt-8"
              >
                <Link
                  to="/products"
                  className="group inline-flex items-center gap-2 rounded-full bg-primary px-5 py-3 text-sm font-semibold text-primary-foreground shadow-xl shadow-primary/30 transition-transform hover:scale-105 sm:px-6"
                >
                  Explore Products
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                </Link>
                <Link
                  to="/contact"
                  className="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-white/70 px-5 py-3 text-sm font-semibold text-primary backdrop-blur transition-colors hover:bg-white sm:px-6"
                >
                  Request a Quote
                </Link>
              </motion.div>
            </div>

            {/* Hero visual — floating cards */}
            <div className="relative mx-auto h-[320px] w-full max-w-sm sm:h-[400px] md:h-[460px] md:max-w-none">
              <FloatingCard
                delay={0}
                src={products[0].image}
                className="absolute right-0 top-0 h-40 w-40 rotate-3 sm:h-56 sm:w-56 md:h-64 md:w-64"
                label={products[0].category}
              />
              <FloatingCard
                delay={0.15}
                src={products[6].image}
                className="absolute left-0 top-20 h-36 w-36 -rotate-6 sm:top-24 sm:h-48 sm:w-48 md:h-56 md:w-56"
                label={products[6].category}
              />
              <FloatingCard
                delay={0.3}
                src={products[1].image}
                className="absolute bottom-0 right-6 h-36 w-36 rotate-6 sm:h-44 sm:w-44 md:h-52 md:w-52"
                label={products[1].category}
              />
              <motion.div
                animate={{ scale: [1, 1.2, 1], opacity: [0.4, 0.2, 0.4] }}
                transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
                className="absolute left-1/2 top-1/2 -z-10 h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/30 blur-3xl sm:h-80 sm:w-80"
              />
            </div>
          </div>
        </motion.div>
      </section>


      {/* MARQUEE */}
      <section className="border-y border-border/40 bg-white/60 py-6 backdrop-blur overflow-hidden">
        <motion.div
          animate={{ x: ["0%", "-50%"] }}
          transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
          className="flex gap-16 whitespace-nowrap"
        >
          {[...Array(2)].flatMap((_, i) =>
            ["ISI Certified", "TATA Sheet", "Made in India", "Wholesale Direct", "Premium Range", "Bulk Delivery", "Trade Pricing", "25+ Years"].map((t, j) => (
              <span key={`${i}-${j}`} className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
                ★ {t}
              </span>
            )),
          )}
        </motion.div>
      </section>

      {/* STATS */}
      <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-20 md:py-24">
        <StaggerContainer className="grid grid-cols-2 gap-6 md:grid-cols-4" stagger={0.1}>
          {stats.map((s) => (
            <StaggerItem key={s.k} className="glass-card rounded-3xl p-8 text-center">
              <div className="font-display text-4xl font-bold text-gradient-sky md:text-5xl">{s.k}</div>
              <div className="mt-2 text-sm text-muted-foreground">{s.v}</div>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* FEATURES */}
      <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-20 md:py-24">
        <FadeIn>
          <div className="mx-auto max-w-2xl text-center">
            <span className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">Why Komal Star</span>
            <h2 className="mt-3 font-display text-3xl font-bold sm:text-4xl md:text-5xl">
              Built for professionals who never compromise.
            </h2>
          </div>
        </FadeIn>
        <StaggerContainer className="mt-14 grid gap-6 md:grid-cols-2 lg:grid-cols-4" stagger={0.1}>
          {features.map((f) => (
            <StaggerItem key={f.title}>
              <motion.div
                whileHover={{ y: -6 }}
                className="glass-card h-full rounded-3xl p-8"
              >
                <div className="mb-5 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-sky-deep text-primary-foreground">
                  <f.icon className="h-5 w-5" />
                </div>
                <h3 className="font-display text-lg font-semibold">{f.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{f.desc}</p>
              </motion.div>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* FEATURED PRODUCTS */}
      <section className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-20 md:py-24">
        <div className="flex flex-wrap items-end justify-between gap-4">
          <Reveal>
            <div>
              <span className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">Product Range</span>
              <h2 className="mt-3 font-display text-3xl font-bold sm:text-4xl md:text-5xl">Signature catalog.</h2>
            </div>
          </Reveal>
          <Reveal direction="left">
            <Link to="/products" className="group inline-flex items-center gap-2 text-sm font-semibold text-primary">
              View all products <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Link>
          </Reveal>
        </div>

        <StaggerContainer className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3" stagger={0.08}>
          {products.slice(0, 6).map((p) => (
            <StaggerItem key={p.slug}>
              <motion.article
                whileHover={{ y: -8 }}
                transition={{ type: "spring", stiffness: 300, damping: 20 }}
                className="group relative overflow-hidden rounded-3xl border border-border/60 bg-white shadow-sm"
              >
                <div className="aspect-[4/3] overflow-hidden bg-sky-soft/40">
                  <motion.img
                    src={p.image}
                    alt={p.name}
                    loading="lazy"
                    className="h-full w-full object-cover"
                    whileHover={{ scale: 1.08 }}
                    transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
                  />
                </div>
                <div className="p-6">
                  <div className="text-xs font-semibold uppercase tracking-wider text-primary">{p.category}</div>
                  <h3 className="mt-2 font-display text-xl font-semibold">{p.name}</h3>
                  <p className="mt-1 text-sm text-muted-foreground">{p.tagline}</p>
                </div>
              </motion.article>
            </StaggerItem>
          ))}
        </StaggerContainer>
      </section>

      {/* CTA */}
      <section className="mx-auto max-w-7xl px-4 pb-14 sm:px-6 sm:pb-20 md:pb-24">
        <ScaleIn>
          <div className="relative overflow-hidden rounded-[2rem] bg-gradient-to-br from-primary via-sky-deep to-primary p-8 text-primary-foreground sm:p-12 md:p-16">
            <motion.div
              animate={{ rotate: 360 }}
              transition={{ duration: 60, repeat: Infinity, ease: "linear" }}
              className="absolute -right-32 -top-32 h-96 w-96 rounded-full bg-white/10 blur-3xl"
            />
            <div className="relative max-w-2xl">
              <h2 className="font-display text-3xl font-bold sm:text-4xl md:text-5xl">
                Ready to stock the best electricals in Rajasthan?
              </h2>
              <p className="mt-4 text-lg text-primary-foreground/80">
                Get personalized bulk pricing and same-day quotes from our team.
              </p>
              <Link
                to="/contact"
                className="mt-8 inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 text-sm font-semibold text-primary shadow-xl transition-transform hover:scale-105"
              >
                Talk to sales <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </ScaleIn>
      </section>
    </div>
  );
}

function FloatingCard({
  delay,
  src,
  className,
  label,
}: {
  delay: number;
  src: string;
  className?: string;
  label: string;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.9, delay: 0.3 + delay, ease: [0.22, 1, 0.36, 1] }}
      className={className}
    >
      <motion.div
        animate={{ y: [0, -12, 0] }}
        transition={{ duration: 4 + delay * 2, repeat: Infinity, ease: "easeInOut", delay }}
        className="glass-card h-full w-full overflow-hidden rounded-3xl"
      >
        <img src={src} alt={label} className="h-full w-full object-cover" />
      </motion.div>
    </motion.div>
  );
}