"use client";

import Image from "next/image";
import {
  CSSProperties,
  useEffect,
  useRef,
  useState,
} from "react";
import {
  ArrowRight,
  Check,
  Menu,
  MessageCircle,
  Sparkles,
  X,
} from "lucide-react";

import BeforeAfter from "./BeforeAfter";
import LarkLoader from "./LarkLoader";

const whatsappUrl = "https://wa.me/971555822480";

const highlights = [
  {
    eyebrow: "Residential cleaning",
    title: "A more considered clean for everyday living.",
    image: "/images/lark-v3/residential.jpg",
  },
  {
    eyebrow: "Commercial cleaning",
    title: "Professional spaces, prepared to perform.",
    image: "/images/lark-v3/commercial.jpg",
  },
  {
    eyebrow: "Deep cleaning",
    title: "Attention that goes beyond the surface.",
    image: "/images/lark-v3/deep-cleaning.jpg",
  },
  {
    eyebrow: "Glass and floor care",
    title: "Clarity and finish from every angle.",
    image: "/images/lark-v3/glass.jpg",
  },
];

const services = [
  {
    number: "01",
    title: "Residential cleaning",
    description:
      "Professional cleaning for apartments, villas and everyday living spaces.",
    image: "/images/lark-v3/residential.jpg",
  },
  {
    number: "02",
    title: "Commercial cleaning",
    description:
      "Reliable care for offices, shops and professionally managed properties.",
    image: "/images/lark-v3/commercial.jpg",
  },
  {
    number: "03",
    title: "Deep cleaning",
    description:
      "A detailed reset for kitchens, bathrooms and high-contact spaces.",
    image: "/images/lark-v3/deep-cleaning.jpg",
  },
  {
    number: "04",
    title: "Glass cleaning",
    description:
      "Careful removal of marks, residue and buildup from glass surfaces.",
    image: "/images/lark-v3/glass.jpg",
  },
  {
    number: "05",
    title: "Floor care",
    description:
      "Surface-aware cleaning for marble, stone, tile and other flooring.",
    image: "/images/lark-v3/floor-care.jpg",
  },
  {
    number: "06",
    title: "Move in / move out",
    description:
      "Thorough cleaning before occupancy, handover or a completely fresh start.",
    image: "/images/lark-v3/move-in-out.jpg",
  },
];

const futureServices = [
  {
    title: "Pest Control",
    image: "/images/lark-v3/soon/pest-control.jpg",
  },
  {
    title: "AC Maintenance",
    image: "/images/lark-v3/soon/ac-maintenance.jpg",
  },
  {
    title: "Care Giver",
    image: "/images/lark-v3/soon/caregiver.jpg",
  },
  {
    title: "Garden Care",
    image: "/images/lark-v3/soon/garden-care.jpg",
  },
  {
    title: "Tank Cleaning",
    image: "/images/lark-v3/soon/tank-cleaning.jpg",
  },
  {
    title: "Car Wash at Your Door",
    image: "/images/lark-v3/soon/car-wash.jpg",
  },
];

export default function LarkApplePreview() {
  const heroRef = useRef<HTMLElement>(null);
  const [heroProgress, setHeroProgress] = useState(0);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    let frame = 0;

    const updateHero = () => {
      frame = 0;

      const hero = heroRef.current;
      if (!hero) return;

      const rect = hero.getBoundingClientRect();
      const distance = Math.max(
        1,
        hero.offsetHeight - window.innerHeight
      );

      const progress = Math.min(
        1,
        Math.max(0, -rect.top / distance)
      );

      setHeroProgress(progress);
    };

    const requestUpdate = () => {
      if (frame) return;
      frame = window.requestAnimationFrame(updateHero);
    };

    updateHero();

    window.addEventListener("scroll", requestUpdate, {
      passive: true,
    });
    window.addEventListener("resize", requestUpdate);

    return () => {
      window.removeEventListener("scroll", requestUpdate);
      window.removeEventListener("resize", requestUpdate);

      if (frame) {
        window.cancelAnimationFrame(frame);
      }
    };
  }, []);

  useEffect(() => {
    const items =
      document.querySelectorAll<HTMLElement>("[data-ap-reveal]");

    if (!("IntersectionObserver" in window)) {
      items.forEach((item) => item.classList.add("ap-visible"));
      return;
    }

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;

          entry.target.classList.add("ap-visible");
          observer.unobserve(entry.target);
        });
      },
      {
        threshold: 0.12,
        rootMargin: "0px 0px -50px",
      }
    );

    items.forEach((item) => observer.observe(item));

    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";

    return () => {
      document.body.style.overflow = "";
    };
  }, [menuOpen]);

  const heroStyle = {
    "--ap-progress": heroProgress,
  } as CSSProperties;

  return (
    <main className="ap-site">
      <LarkLoader />

      <header className="ap-header">
        <a href="#ap-home" className="ap-brand">
          <Image
            src="/images/lark-shine-wordmark.png"
            alt="Lark Shine"
            width={1036}
            height={314}
            priority
          />
        </a>

        <nav className="ap-navigation" aria-label="Primary">
          <a href="#ap-highlights">Highlights</a>
          <a href="#ap-design">Design</a>
          <a href="#ap-services">Services</a>
          <a href="#ap-results">Results</a>
        </nav>

        <a
          href={whatsappUrl}
          target="_blank"
          rel="noreferrer"
          className="ap-quote"
        >
          Get a quote
        </a>

        <button
          type="button"
          className="ap-menu"
          aria-label="Toggle menu"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((current) => !current)}
        >
          {menuOpen ? <X size={22} /> : <Menu size={22} />}
        </button>

        {menuOpen && (
          <nav className="ap-mobile-navigation">
            <a
              href="#ap-highlights"
              onClick={() => setMenuOpen(false)}
            >
              Highlights
            </a>
            <a
              href="#ap-design"
              onClick={() => setMenuOpen(false)}
            >
              Design
            </a>
            <a
              href="#ap-services"
              onClick={() => setMenuOpen(false)}
            >
              Services
            </a>
            <a
              href="#ap-results"
              onClick={() => setMenuOpen(false)}
            >
              Results
            </a>
            <a
              href={whatsappUrl}
              target="_blank"
              rel="noreferrer"
              className="ap-mobile-quote"
            >
              Get a quote
            </a>
          </nav>
        )}
      </header>

      <section
        id="ap-home"
        ref={heroRef}
        className="ap-hero-track"
        style={heroStyle}
      >
        <div className="ap-hero-sticky">
          <div className="ap-hero-background" />

          <div className="ap-hero-opening">
            <p>Lark Shine</p>

            <h1>
              A clear difference.
              <span>You can see.</span>
            </h1>

            <div className="ap-hero-opening-copy">
              Professional cleaning for homes, workplaces and
              properties across the UAE.
            </div>
          </div>

          <div className="ap-hero-media">
            <Image
              src="/images/lark-v3/hero.jpg"
              alt="Bright, professionally cleaned interior"
              fill
              priority
              sizes="100vw"
            />

            <div className="ap-hero-media-shade" />

            <div className="ap-hero-media-label">
              <Sparkles size={15} />
              Professional cleaning services
            </div>
          </div>

          <div className="ap-hero-conclusion">
            <p>Professional cleaning.</p>

            <h2>
              Visible in
              <span>every detail.</span>
            </h2>

            <a
              href={whatsappUrl}
              target="_blank"
              rel="noreferrer"
            >
              Request a service
              <ArrowRight size={17} />
            </a>
          </div>

          <div className="ap-hero-progress">
            <span>
              {String(
                Math.min(
                  3,
                  Math.floor(heroProgress * 3) + 1
                )
              ).padStart(2, "0")}
            </span>

            <div>
              <i
                style={{
                  transform: `scaleX(${Math.max(
                    0.04,
                    heroProgress
                  )})`,
                }}
              />
            </div>

            <small>03</small>
          </div>
        </div>
      </section>

      <section className="ap-introduction">
        <p data-ap-reveal>Cleaning, considered.</p>

        <h2 data-ap-reveal>
          A professional finish should not need an explanation.
          <span>You should be able to see it.</span>
        </h2>

        <div className="ap-introduction-copy" data-ap-reveal>
          <p>
            Lark Shine combines trained professionals, modern
            equipment and surface-aware methods to deliver cleaner,
            healthier and more considered spaces.
          </p>

          <a
            href={whatsappUrl}
            target="_blank"
            rel="noreferrer"
          >
            Talk to our team
            <ArrowRight size={17} />
          </a>
        </div>
      </section>

      <section id="ap-highlights" className="ap-highlights">
        <div className="ap-section-heading">
          <h2 data-ap-reveal>Get the highlights.</h2>

          <p data-ap-reveal>
            Swipe or scroll through the ways Lark Shine transforms
            different spaces.
          </p>
        </div>

        <div className="ap-highlight-scroller">
          {highlights.map((highlight, index) => (
            <article
              key={highlight.title}
              className="ap-highlight-card"
              data-ap-reveal
            >
              <Image
                src={highlight.image}
                alt={highlight.eyebrow}
                fill
                sizes="(max-width: 767px) 88vw, 72vw"
              />

              <div className="ap-highlight-shade" />

              <span className="ap-highlight-index">
                {String(index + 1).padStart(2, "0")}
              </span>

              <div className="ap-highlight-copy">
                <p>{highlight.eyebrow}</p>
                <h3>{highlight.title}</h3>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section id="ap-design" className="ap-design">
        <div className="ap-design-copy">
          <p data-ap-reveal>Detailed by design</p>

          <h2 data-ap-reveal>
            More thought.
            <span>In every step.</span>
          </h2>

          <div className="ap-design-description" data-ap-reveal>
            The best result comes from understanding the space before
            beginning the work.
          </div>
        </div>

        <div className="ap-design-story">
          <article className="ap-design-visual" data-ap-reveal>
            <Image
              src="/images/lark-v3/detail.jpg"
              alt="Detailed professional cleaning"
              fill
              sizes="(max-width: 900px) 100vw, 58vw"
            />

            <div className="ap-design-visual-shade" />

            <div>
              <span>01</span>
              <h3>Prepared for the surface.</h3>
              <p>
                Methods and products are selected according to the
                material and actual condition.
              </p>
            </div>
          </article>

          <div className="ap-design-points">
            <article data-ap-reveal>
              <Check size={19} />
              <div>
                <h3>Trained professionals</h3>
                <p>
                  Reliable teams working with care, consistency and
                  respect for your property.
                </p>
              </div>
            </article>

            <article data-ap-reveal>
              <Check size={19} />
              <div>
                <h3>Modern equipment</h3>
                <p>
                  Professional tools support a more efficient and
                  consistent finish.
                </p>
              </div>
            </article>

            <article data-ap-reveal>
              <Check size={19} />
              <div>
                <h3>Final inspection</h3>
                <p>
                  Important areas are reviewed before the service is
                  considered complete.
                </p>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section id="ap-services" className="ap-services">
        <div className="ap-services-heading">
          <p data-ap-reveal>Cleaning for every space</p>

          <h2 data-ap-reveal>
            One standard.
            <span>Six specialised services.</span>
          </h2>
        </div>

        <div className="ap-service-stories">
          {services.map((service) => (
            <article
              key={service.title}
              className="ap-service-story"
              data-ap-reveal
            >
              <div className="ap-service-image">
                <Image
                  src={service.image}
                  alt={service.title}
                  fill
                  sizes="(max-width: 900px) 100vw, 56vw"
                />
              </div>

              <div className="ap-service-content">
                <span>{service.number}</span>
                <h3>{service.title}</h3>
                <p>{service.description}</p>

                <a
                  href={whatsappUrl}
                  target="_blank"
                  rel="noreferrer"
                >
                  Request this service
                  <ArrowRight size={17} />
                </a>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section id="ap-results" className="ap-results">
        <div className="ap-results-heading">
          <p data-ap-reveal>Visible results</p>

          <h2 data-ap-reveal>
            Same space.
            <span>A clear transformation.</span>
          </h2>

          <p data-ap-reveal>
            Drag the slider to compare the same bathroom from the
            same camera position.
          </p>
        </div>

        <div className="ap-results-comparison" data-ap-reveal>
          <BeforeAfter />
        </div>
      </section>

      <section className="ap-future">
        <div className="ap-section-heading">
          <h2 data-ap-reveal>More is coming.</h2>

          <p data-ap-reveal>
            New property and lifestyle services are being prepared
            under the Lark Shine standard.
          </p>
        </div>

        <div className="ap-future-scroller">
          {futureServices.map((service, index) => (
            <article
              className="ap-future-card"
              key={service.title}
              data-ap-reveal
            >
              <Image
                src={service.image}
                alt={service.title}
                fill
                sizes="(max-width: 767px) 82vw, 34vw"
              />

              <div className="ap-future-shade" />

              <span>
                {String(index + 1).padStart(2, "0")}
              </span>

              <div>
                <p>Coming soon</p>
                <h3>{service.title}</h3>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="ap-contact">
        <Image
          src="/images/lark-v3/contact.jpg"
          alt="Bright professionally cleaned property"
          fill
          sizes="100vw"
        />

        <div className="ap-contact-shade" />

        <div className="ap-contact-copy" data-ap-reveal>
          <Image
            src="/images/lark-shine-icon.png"
            alt=""
            width={80}
            height={80}
          />

          <p>Lark Shine Building Cleaning Services LLC</p>

          <h2>
            Ready for a
            <span>cleaner space?</span>
          </h2>

          <a
            href={whatsappUrl}
            target="_blank"
            rel="noreferrer"
          >
            <MessageCircle size={19} />
            Chat on WhatsApp
          </a>
        </div>
      </section>

      <footer className="ap-footer">
        <Image
          src="/images/lark-shine-wordmark.png"
          alt="Lark Shine"
          width={1036}
          height={314}
        />

        <p>
          Professional cleaning services across the UAE.
        </p>

        <a href="#ap-home">Back to top ↑</a>
      </footer>
    </main>
  );
}