import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowUpRight, Droplets, Wind, Factory, Sparkles, Gauge, ShieldCheck } from "lucide-react";
import { useState, useCallback, useEffect } from "react";
import useEmblaCarousel from "embla-carousel-react";
import Autoplay from "embla-carousel-autoplay";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Promist — High-Pressure Misting for Cooling & Humidity" },
      { name: "description", content: "Turnkey misting systems for outdoor cooling, humidification, dust suppression and special effects. Manufactured in the UAE since 1979." },
      { property: "og:title", content: "Promist — Humidity and Control" },
      { property: "og:description", content: "Misting systems for cooling, humidification and dust suppression." },
    ],
  }),
  component: Home,
});

const IMG = {
  nozzle: "/wp-uploads/2020/04/banner-sanitz.jpg",
  humid: "/wp-uploads/2016/03/humidification-misting.jpg",
  commercial: "/wp-uploads/2016/03/commercial-misting.jpg",
  industrial: "/wp-uploads/2016/03/industrial-misting.jpg",
  project1: "/wp-uploads/2017/04/banner4.jpg",
  project2: "/wp-uploads/2017/04/banner2.jpg",
  project3: "/wp-uploads/2017/04/banner3.jpg",
  banner: "/wp-uploads/2017/04/new-banner.jpg",
};

const SLIDES = [
  {
    img: "/wp-uploads/2017/04/nozzle-banner1.jpg",
    title: "Misting Solutions",
    subtitle: "Turnkey high-pressure misting for outdoor cooling, humidification, dust suppression and special effects — engineered in the UAE since 1979.",
    cta: "Discover solutions",
    ctaTo: "/misting-technology",
  },
  {
    img: "/slide-residential.jpg",
    title: "Residential Outdoor Cooling",
    subtitle: "Reclaim your outdoor spaces with high-pressure misting — even when temperatures push past 45°C.",
    cta: "Explore applications",
    ctaTo: "/applications",
  },
  {
    img: "/slide-humidity.jpg",
    title: "Humidity & Control",
    subtitle: "The most efficient way to keep the right humidity levels for industrial and commercial environments.",
    cta: "Request a quote",
    ctaTo: "/enquiry",
  },
];

const APP_CARDS = [
  { img: IMG.humid, title: "Humidification", desc: "Commercial and industrial environments where controlled humidity or temperature drive profitability.", icon: Droplets, href: "/applications/humidification" },
  { img: IMG.commercial, title: "Commercial Outdoor Cooling", desc: "Reclaim patio dining and outdoor bars once temperatures push past 45°C.", icon: Wind, href: "/applications/commercial-outdoor-cooling" },
  { img: IMG.industrial, title: "Industrial Cooling", desc: "A safer, more productive floor — cooling employees, equipment and processes.", icon: Factory, href: "/applications/industrial-outdoor-cooling" },
];

function HeroSlider() {
  const [emblaRef, emblaApi] = useEmblaCarousel(
    { loop: true, duration: 40 },
    [Autoplay({ delay: 5000, stopOnInteraction: true })],
  );
  const [selectedIndex, setSelectedIndex] = useState(0);

  const scrollTo = useCallback(
    (index: number) => emblaApi && emblaApi.scrollTo(index),
    [emblaApi],
  );

  const onSelect = useCallback(() => {
    if (!emblaApi) return;
    setSelectedIndex(emblaApi.selectedScrollSnap());
  }, [emblaApi]);

  useEffect(() => {
    if (!emblaApi) return;
    onSelect();
    emblaApi.on("select", onSelect);
    return () => {
      emblaApi.off("select", onSelect);
    };
  }, [emblaApi, onSelect]);

  return (
    <section className="relative overflow-hidden">
      <div ref={emblaRef} className="overflow-hidden">
        <div className="flex">
          {SLIDES.map((slide, i) => (
            <div
              key={i}
              className="relative min-w-0 shrink-0 grow-0 basis-full"
            >
              <div className="relative h-[75vh] min-h-[500px] max-h-[800px]">
                <img
                  src={slide.img}
                  alt={slide.title}
                  className="absolute inset-0 w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-black/30" />
                <div className="absolute inset-0 flex items-center">
                  <div className="container-page">
                    <div className="max-w-2xl">
                      <div className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.25em] text-white/80 font-semibold mb-4">
                        <span className="block w-8 h-0.5 bg-brand-red" /> Since 1979
                      </div>
                      <h1 className="font-display text-5xl md:text-7xl lg:text-8xl font-black leading-[0.95] text-white">
                        {slide.title}
                      </h1>
                      <p className="mt-6 text-lg md:text-xl text-white/80 max-w-xl">
                        {slide.subtitle}
                      </p>
                      <div className="mt-8 flex flex-wrap gap-3">
                        <Link
                          to={slide.ctaTo as any}
                          className="inline-flex items-center gap-2 bg-brand-red text-white px-7 py-3.5 rounded-md text-sm font-semibold hover:opacity-90 transition-opacity"
                        >
                          {slide.cta} <ArrowUpRight className="h-4 w-4" />
                        </Link>
                        <Link
                          to="/contact"
                          className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm text-white border border-white/30 px-7 py-3.5 rounded-md text-sm font-semibold hover:bg-white/20 transition-colors"
                        >
                          Contact us
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Dots */}
      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2.5">
        {SLIDES.map((_, i) => (
          <button
            key={i}
            onClick={() => scrollTo(i)}
            className={`rounded-full transition-all duration-300 ${
              i === selectedIndex
                ? "w-8 h-2.5 bg-brand-red"
                : "w-2.5 h-2.5 bg-white/50 hover:bg-white/80"
            }`}
            aria-label={`Go to slide ${i + 1}`}
          />
        ))}
      </div>

      {/* Arrows */}
      <button
        onClick={() => emblaApi?.scrollPrev()}
        className="hidden sm:flex absolute left-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 items-center justify-center text-white hover:bg-white/20 transition-colors"
        aria-label="Previous slide"
      >
        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <button
        onClick={() => emblaApi?.scrollNext()}
        className="hidden sm:flex absolute right-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 items-center justify-center text-white hover:bg-white/20 transition-colors"
        aria-label="Next slide"
      >
        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </section>
  );
}

function Home() {
  return (
    <>
      {/* HERO SLIDER */}
      <HeroSlider />

      {/* HIGH-PRESSURE MISTING SOLUTIONS FEATURE */}
      <section className="bg-muted/40 py-24 border-y">
        <div className="container-page grid lg:grid-cols-2 gap-14 items-center">
          <div>
            <span className="rule-blue" />
            <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">High-Pressure Misting Solutions</h2>
            <p className="mt-4 text-muted-foreground max-w-lg">
              From residential patios to industrial facilities, our high-pressure misting systems cool the air, control humidity, suppress dust and elevate spaces — designed, built and installed in the UAE since 1979.
            </p>
            <ul className="mt-8 grid sm:grid-cols-2 gap-x-8 gap-y-4 text-sm">
              {[
                "Outdoor cooling up to 45°C and beyond",
                "Industrial & commercial humidification",
                "Dust suppression & air filtration",
                "Special effects for events & landscapes",
                "Custom system design & installation",
                "12-month warranty from installation",
              ].map((f) => (
                <li key={f} className="flex gap-3 border-b border-dashed pb-3">
                  <span className="text-brand-red font-black">/</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <Link to="/misting-technology" className="mt-8 inline-flex items-center gap-2 bg-brand-blue text-white px-6 py-3 rounded-md text-sm font-semibold hover:opacity-90">
              Discover solutions <ArrowUpRight className="h-4 w-4" />
            </Link>
          </div>
          <div>
            <img src="/wp-uploads/2017/04/commercial.jpg" alt="Misting Solutions" className="w-full max-h-[560px] object-contain" />
          </div>
        </div>
      </section>

      {/* APPLICATIONS */}
      <section className="py-24">
        <div className="container-page">
          <div className="flex flex-wrap items-end justify-between gap-6 mb-14">
            <div>
              <span className="rule-red" />
              <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">Applications</h2>
              <p className="mt-4 max-w-2xl text-muted-foreground">
                A cost-effective solution for outdoor cooling and humidification across industrial, commercial,
                residential, warehouses, greenhouses, gardens, patios, parks and amusement areas.
              </p>
            </div>
            <Link to="/applications" className="text-sm font-semibold text-brand-blue inline-flex items-center gap-1">
              All applications <ArrowUpRight className="h-4 w-4" />
            </Link>
          </div>

          <div className="grid md:grid-cols-3 divide-y md:divide-y-0 md:divide-x border-y">
            {APP_CARDS.map((a) => (
              <article key={a.title} className="p-8 group">
                <div className="aspect-[4/3] overflow-hidden">
                  <img src={a.img} alt={a.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
                </div>
                <div className="mt-6 flex items-center gap-3">
                  <a.icon className="h-5 w-5 text-brand-red" />
                  <h3 className="font-display text-xl font-bold">{a.title}</h3>
                </div>
                <p className="mt-3 text-sm text-muted-foreground">{a.desc}</p>
                <Link to={a.href} className="mt-5 inline-flex items-center gap-1 text-sm font-semibold text-brand-red">
                  Details <ArrowUpRight className="h-4 w-4" />
                </Link>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* 5 REASONS */}
      <section className="py-24">
        <div className="container-page">
          <div className="max-w-2xl">
            <span className="rule-red" />
            <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">
              Five great reasons <span className="text-brand-blue">to choose us</span>
            </h2>
          </div>
          <ol className="mt-14 grid md:grid-cols-5 gap-0 border-t">
            {[
              "Best product quality",
              "100% customer satisfaction",
              "Comprehensive range of services",
              "Always available for you",
              "Services guarantee",
            ].map((r, i) => (
              <li key={r} className="border-b md:border-b-0 md:border-r last:md:border-r-0 p-8">
                <div className="font-display text-5xl font-black text-brand-red/20">
                  0{i + 1}
                </div>
                <div className="mt-4 font-display text-lg font-bold leading-snug">{r}</div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* FULL SERVICES */}
      <section className="bg-foreground text-background py-24">
        <div className="container-page">
          <div className="grid lg:grid-cols-12 gap-10 items-start">
            <div className="lg:col-span-4">
              <span className="rule-blue" />
              <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">
                Promist is a<br />full-service<br />
                <span className="text-brand-red italic">misting technology</span>
              </h2>
              <p className="mt-6 text-background/70 max-w-sm">
                By forcing water through specially designed nozzles at high pressure, we create an ultra-fine
                mist — the science behind every one of our systems.
              </p>
            </div>
            <div className="lg:col-span-8 grid sm:grid-cols-2 gap-x-10 gap-y-10">
              {[
                { i: Droplets, t: "Humidification", d: "The most efficient way to keep the right humidity levels for food, materials and processes." },
                { i: Sparkles, t: "Special effects", d: "Elevate landscapes, pools, events, expos, amusement parks and sports events." },
                { i: Gauge, t: "Cooling principle", d: "Billions of tiny droplets evaporate into vapor — the phase change cools the surrounding air." },
                { i: ShieldCheck, t: "Dust suppression", d: "Extremely effective solutions for airborne dust suppression and air filtration." },
              ].map((s) => (
                <div key={s.t} className="border-t border-background/20 pt-6">
                  <s.i className="h-6 w-6 text-brand-red" />
                  <h3 className="mt-4 font-display text-2xl font-bold">{s.t}</h3>
                  <p className="mt-2 text-background/70 text-sm">{s.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PROJECTS */}
      <section className="py-24">
        <div className="container-page">
          <div className="flex flex-wrap items-end justify-between gap-6 mb-12">
            <div>
              <span className="rule-red" />
              <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">Recent projects</h2>
            </div>
            <Link to="/projects" className="text-sm font-semibold text-brand-blue inline-flex items-center gap-1">
              View more <ArrowUpRight className="h-4 w-4" />
            </Link>
          </div>
          <div className="grid md:grid-cols-3 gap-1">
            {[IMG.project1, IMG.project2, IMG.project3].map((src, i) => (
              <a key={src} href={src} className="group relative overflow-hidden aspect-[4/5]">
                <img src={src} alt={`Project ${i + 1}`} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                <div className="absolute inset-0 bg-gradient-to-t from-brand-red/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                <div className="absolute bottom-0 left-0 p-6 text-white translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all">
                  <div className="text-xs uppercase tracking-widest">Case study</div>
                  <div className="font-display text-2xl font-bold">Project 0{i + 1}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* CONTACT BAND */}
      <section className="relative overflow-hidden">
        <img src={IMG.banner} alt="" className="absolute inset-0 w-full h-full object-cover" />
        <div className="absolute inset-0 bg-brand-blue-dark/80" />
        <div className="container-page relative py-20 grid md:grid-cols-2 gap-8 items-center text-white">
          <div>
            <span className="rule-red" />
            <h2 className="mt-4 font-display text-4xl md:text-5xl font-black">
              Questions? <br />Call now: <span className="text-white/90">+971 4 251 5596</span>
            </h2>
          </div>
          <div className="flex md:justify-end">
            <Link to="/enquiry" className="inline-flex items-center gap-2 bg-brand-red text-white px-8 py-4 rounded-md text-sm font-semibold hover:opacity-90">
              Request a quote <ArrowUpRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}