"use client";

import Image from "next/image";
import {
  ArrowRight,
  Building2,
  Check,
  ChevronDown,
  Home,
  MessageCircle,
  Phone,
  Shirt,
  Sparkles,
  Waves,
  Wind,
  type LucideIcon,
} from "lucide-react";
import {
  CSSProperties,
  useEffect,
  useRef,
  useState,
} from "react";

type Service = {
  label: string;
  eyebrow: string;
  title: string;
  description: string;
  detail: string;
  icon: LucideIcon;
};

const services: Service[] = [
  {
    label: "Office",
    eyebrow: "Professional workspaces",
    title: "Clean spaces help people do their best work.",
    description:
      "Careful cleaning for desks, shared surfaces, floors, glass and frequently used working areas.",
    detail: "Commercial cleaning",
    icon: Building2,
  },
  {
    label: "Residential",
    eyebrow: "Designed around your home",
    title: "Every room should feel looked after.",
    description:
      "Reliable cleaning for apartments, villas, kitchens, bathrooms, floors and living spaces.",
    detail: "Residential cleaning",
    icon: Home,
  },
  {
    label: "Deep clean",
    eyebrow: "Beyond everyday cleaning",
    title: "Attention where ordinary cleaning stops.",
    description:
      "Detailed treatment for corners, surfaces, fixtures and areas that require a more complete reset.",
    detail: "Deep cleaning",
    icon: Sparkles,
  },
  {
    label: "Glass",
    eyebrow: "Clarity from every angle",
    title: "A clearer finish changes the whole space.",
    description:
      "Professional cleaning for windows, interior glass and reflective surfaces.",
    detail: "Glass care",
    icon: Wind,
  },
  {
    label: "Carpet",
    eyebrow: "Deeper fabric care",
    title: "Clean beneath the visible surface.",
    description:
      "Focused carpet treatment designed to refresh the material and improve its appearance.",
    detail: "Carpet cleaning",
    icon: Waves,
  },
  {
    label: "Ironing",
    eyebrow: "Carefully finished",
    title: "Clean, crisp and ready to wear.",
    description:
      "Garment ironing handled with attention to fabric, shape and final presentation.",
    detail: "Ironing service",
    icon: Shirt,
  },
];

function clamp(value: number) {
  return Math.min(1, Math.max(0, value));
}

export default function AppleServiceExperience() {
  const storyRef = useRef<HTMLElement>(null);

  const [progress, setProgress] = useState(0);
  const [mobileMenu, setMobileMenu] = useState(false);

  const activeIndex = Math.min(
    services.length - 1,
    Math.floor(progress * services.length),
  );

  const activeService = services[activeIndex];
  const ActiveIcon = activeService.icon;

  const localProgress =
    progress * services.length - activeIndex;

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

    const update = () => {
      cancelAnimationFrame(frame);

      frame = requestAnimationFrame(() => {
        const section = storyRef.current;

        if (!section) return;

        const rect = section.getBoundingClientRect();

        const scrollable = Math.max(
          section.offsetHeight - window.innerHeight,
          1,
        );

        setProgress(clamp(-rect.top / scrollable));
      });
    };

    update();

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

    window.addEventListener("resize", update);

    return () => {
      cancelAnimationFrame(frame);
      window.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, []);

  const goToService = (index: number) => {
    const section = storyRef.current;

    if (!section) return;

    const scrollable =
      section.offsetHeight - window.innerHeight;

    window.scrollTo({
      top:
        section.offsetTop +
        scrollable *
          ((index + 0.18) / services.length),
      behavior: "smooth",
    });

    setMobileMenu(false);
  };

  const visualStyle: CSSProperties = {
    transform: `
      translate3d(
        ${Math.sin(localProgress * Math.PI) * 2.5}%,
        ${Math.cos(localProgress * Math.PI) * 1.5}%,
        0
      )
      rotateX(${4 - localProgress * 8}deg)
      rotateY(${-8 + localProgress * 16}deg)
      scale(${1 + Math.sin(localProgress * Math.PI) * 0.035})
    `,
  };

  return (
    <main className="ls-site">
      <header className="ls-header">
        <div className="ls-header-inner">
          <a
            href="#home"
            className="ls-wordmark"
            aria-label="Lark Shine home"
          >
            <Image
              src="/images/lark-shine-wordmark.png"
              alt="Lark Shine Building Cleaning Services LLC"
              width={1036}
              height={314}
              priority
            />
          </a>

          <nav className="ls-nav">
            <a href="#home">Overview</a>
            <a href="#services">Services</a>
            <a href="#standards">Why us</a>
            <a href="#contact">Contact</a>
          </nav>

          <a
            href="https://wa.me/971555822480"
            target="_blank"
            rel="noreferrer"
            className="ls-book"
          >
            Book now
          </a>

          <button
            type="button"
            className="ls-mobile-menu"
            aria-label="Open services"
            aria-expanded={mobileMenu}
            onClick={() =>
              setMobileMenu((current) => !current)
            }
          >
            <span />
            <span />
          </button>
        </div>
      </header>

      <section
        ref={storyRef}
        id="home"
        className="ls-story"
      >
        <div className="ls-sticky">
          <div
            className="ls-ambient ambient-one"
            aria-hidden="true"
          />
          <div
            className="ls-ambient ambient-two"
            aria-hidden="true"
          />
          <div
            className="ls-grid"
            aria-hidden="true"
          />

          <div className="ls-main-title">
            <p>Lark Shine Cleaning Services</p>

            <h1>
              Cleaning.
              <span>Designed around you.</span>
            </h1>
          </div>

          <aside
            className={`ls-service-rail ${
              mobileMenu ? "open" : ""
            }`}
          >
            <small>Explore services</small>

            <div>
              {services.map((service, index) => (
                <button
                  type="button"
                  key={service.label}
                  className={
                    index === activeIndex
                      ? "active"
                      : ""
                  }
                  onClick={() => goToService(index)}
                >
                  <i>
                    <b />
                  </i>

                  <span>{service.label}</span>
                </button>
              ))}
            </div>
          </aside>

          <div className="ls-copy">
            <div
              key={activeService.label}
              className="ls-copy-enter"
            >
              <span className="ls-number">
                {String(activeIndex + 1).padStart(
                  2,
                  "0",
                )}
              </span>

              <p>{activeService.eyebrow}</p>

              <h2>{activeService.title}</h2>

              <div className="ls-description">
                {activeService.description}
              </div>

              <a href="#contact">
                Request this service
                <ArrowRight size={17} />
              </a>
            </div>
          </div>

          <div
            className="ls-product-stage"
            style={visualStyle}
          >
            <div className="ls-product-shadow" />

            <div className="ls-product-shell">
              <div className="ls-product-topbar">
                <span>
                  Lark Shine
                </span>

                <i />
              </div>

              <div className="ls-lens">
                <div className="ls-lens-ring ring-one" />
                <div className="ls-lens-ring ring-two" />
                <div className="ls-lens-ring ring-three" />

                <div className="ls-liquid">
                  <div className="ls-liquid-highlight" />
                  <div className="ls-liquid-wave wave-one" />
                  <div className="ls-liquid-wave wave-two" />
                </div>

                <div className="ls-service-icon">
                  <ActiveIcon
                    key={activeService.label}
                    size={88}
                    strokeWidth={1.05}
                  />
                </div>
              </div>

              <div className="ls-brand-plate">
                <Image
                  src="/images/lark-shine-primary.png"
                  alt="Lark Shine"
                  width={858}
                  height={567}
                />
              </div>

              <div className="ls-product-info">
                <Image
                  src="/images/lark-shine-icon.png"
                  alt=""
                  width={120}
                  height={120}
                />

                <div>
                  <small>
                    Professional care
                  </small>
                  <strong>
                    {activeService.detail}
                  </strong>
                </div>

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

              <div className="ls-reflection" />
            </div>

            <div className="ls-floating-chip chip-one">
              <Sparkles size={16} />
              Detail focused
            </div>

            <div className="ls-floating-chip chip-two">
              <Check size={15} />
              Professional care
            </div>
          </div>

          <div className="ls-progress">
            <span>
              {String(activeIndex + 1).padStart(
                2,
                "0",
              )}
            </span>

            <i>
              <b
                style={{
                  transform: `scaleX(${progress})`,
                }}
              />
            </i>

            <span>
              {String(services.length).padStart(
                2,
                "0",
              )}
            </span>
          </div>

          <div
            className="ls-scroll"
            style={{
              opacity: progress < 0.025 ? 1 : 0,
            }}
          >
            <ChevronDown size={17} />
            Scroll to explore
          </div>
        </div>
      </section>

      <section
        id="services"
        className="ls-services"
      >
        <div className="ls-section-heading">
          <p>Everything your space needs</p>

          <h2>
            One team.
            <span>Complete cleaning care.</span>
          </h2>
        </div>

        <div className="ls-service-grid">
          {services.slice(0, 4).map((service, index) => {
            const Icon = service.icon;

            return (
              <article
                key={service.label}
                className={
                  index === 0
                    ? "ls-service-card featured"
                    : "ls-service-card"
                }
              >
                <span className="ls-card-index">
                  {String(index + 1).padStart(
                    2,
                    "0",
                  )}
                </span>

                <div className="ls-card-visual">
                  <div />
                  <Icon
                    size={index === 0 ? 100 : 66}
                    strokeWidth={1}
                  />
                </div>

                <div className="ls-card-copy">
                  <p>{service.eyebrow}</p>
                  <h3>{service.title}</h3>
                  <span>{service.description}</span>
                </div>

                <a href="#contact">
                  <ArrowRight size={20} />
                </a>
              </article>
            );
          })}
        </div>
      </section>

      <section
        id="standards"
        className="ls-standards"
      >
        <div className="ls-standard-visual">
          <div className="ls-standard-circle">
            <div />
            <div />

            <Image
              src="/images/lark-shine-primary.png"
              alt="Lark Shine"
              width={858}
              height={567}
            />
          </div>
        </div>

        <div className="ls-standard-copy">
          <p>Why Lark Shine</p>

          <h2>
            Professional care.
            <span>Without the complication.</span>
          </h2>

          <div className="ls-checks">
            {[
              "Professional cleaning equipment",
              "Managed and trained teams",
              "Residential and commercial services",
              "Clear booking and communication",
            ].map((item) => (
              <div key={item}>
                <i>
                  <Check size={16} />
                </i>

                <span>{item}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section
        id="contact"
        className="ls-contact"
      >
        <div className="ls-contact-ring ring-large" />
        <div className="ls-contact-ring ring-medium" />
        <div className="ls-contact-ring ring-small" />

        <div className="ls-contact-content">
          <Image
            src="/images/lark-shine-icon.png"
            alt="Lark Shine"
            width={120}
            height={120}
          />

          <p>Book a cleaning service</p>

          <h2>
            A cleaner space
            <span>starts here.</span>
          </h2>

          <div>
            <a
              href="https://wa.me/971555822480"
              target="_blank"
              rel="noreferrer"
            >
              <MessageCircle size={19} />
              WhatsApp
            </a>

            <a href="tel:+971555822480">
              <Phone size={18} />
              +971 55 582 2480
            </a>
          </div>
        </div>
      </section>

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

        <span>
          © {new Date().getFullYear()} Lark Shine
          Building Cleaning Services LLC
        </span>
      </footer>

      <style jsx global>{`
        .ls-site {
          overflow: clip;
          background: #f5f5f7;
          color: #1d1d1f;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            "SF Pro Display",
            "SF Pro Text",
            "Helvetica Neue",
            Arial,
            sans-serif;
          -webkit-font-smoothing: antialiased;
        }

        .ls-header {
          position: fixed;
          z-index: 300;
          top: 0;
          right: 0;
          left: 0;
          border-bottom: 1px solid
            rgba(0, 0, 0, 0.06);
          background: rgba(255, 255, 255, 0.76);
          backdrop-filter:
            saturate(180%) blur(24px);
          -webkit-backdrop-filter:
            saturate(180%) blur(24px);
        }

        .ls-header-inner {
          display: grid;
          width: min(1180px, calc(100% - 48px));
          height: 66px;
          margin-inline: auto;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
        }

        .ls-wordmark {
          display: flex;
          width: 190px;
          height: 50px;
          align-items: center;
        }

        .ls-wordmark img {
          width: 100%;
          height: auto;
          object-fit: contain;
        }

        .ls-nav {
          display: flex;
          gap: 32px;
        }

        .ls-nav a {
          color: rgba(29, 29, 31, 0.68);
          font-size: 12px;
          font-weight: 500;
          transition: color 180ms ease;
        }

        .ls-nav a:hover {
          color: #0066cc;
        }

        .ls-book {
          justify-self: end;
          border-radius: 999px;
          background: #0071e3;
          padding: 9px 17px;
          color: white;
          font-size: 12px;
          font-weight: 600;
        }

        .ls-mobile-menu {
          display: none;
        }

        .ls-story {
          position: relative;
          height: 620vh;
          background: #f5f5f7;
        }

        .ls-sticky {
          position: sticky;
          top: 0;
          height: 100svh;
          overflow: hidden;
          background:
            radial-gradient(
              circle at 70% 48%,
              rgba(75, 170, 255, 0.2),
              transparent 28%
            ),
            radial-gradient(
              circle at 23% 78%,
              rgba(120, 208, 255, 0.15),
              transparent 30%
            ),
            linear-gradient(
              180deg,
              #ffffff 0%,
              #f5f7fa 58%,
              #e9eef4 100%
            );
          perspective: 1600px;
        }

        .ls-ambient {
          position: absolute;
          border-radius: 50%;
          filter: blur(1px);
          pointer-events: none;
        }

        .ambient-one {
          top: 20%;
          right: 5%;
          width: 48vw;
          height: 48vw;
          border: 1px solid
            rgba(0, 113, 227, 0.08);
        }

        .ambient-two {
          right: 15%;
          bottom: -28%;
          width: 58vw;
          height: 58vw;
          background:
            radial-gradient(
              circle,
              rgba(0, 113, 227, 0.08),
              transparent 65%
            );
        }

        .ls-grid {
          position: absolute;
          inset: 0;
          opacity: 0.025;
          background-image:
            linear-gradient(
              rgba(0, 0, 0, 0.8) 1px,
              transparent 1px
            ),
            linear-gradient(
              90deg,
              rgba(0, 0, 0, 0.8) 1px,
              transparent 1px
            );
          background-size: 64px 64px;
          mask-image:
            linear-gradient(
              to bottom,
              transparent,
              black 25%,
              black 80%,
              transparent
            );
        }

        .ls-main-title {
          position: absolute;
          z-index: 15;
          top: clamp(100px, 13vh, 145px);
          right: 5vw;
          left: 5vw;
          text-align: center;
        }

        .ls-main-title p {
          margin-bottom: 12px;
          color: #0066cc;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 0.04em;
        }

        .ls-main-title h1 {
          margin: 0;
          color: #1d1d1f;
          font-size: clamp(
            4rem,
            7.4vw,
            8.6rem
          );
          font-weight: 600;
          letter-spacing: -0.078em;
          line-height: 0.88;
        }

        .ls-main-title h1 span {
          display: block;
          color: #a1a1a6;
        }

        .ls-service-rail {
          position: absolute;
          z-index: 40;
          top: 51%;
          left: max(30px, 4vw);
          width: 180px;
          transform: translateY(-25%);
        }

        .ls-service-rail > small {
          display: block;
          margin-bottom: 16px;
          color: #86868b;
          font-size: 10px;
          font-weight: 600;
          letter-spacing: 0.13em;
          text-transform: uppercase;
        }

        .ls-service-rail > div {
          display: grid;
          gap: 6px;
        }

        .ls-service-rail button {
          display: grid;
          min-height: 37px;
          padding: 0;
          border: 0;
          background: transparent;
          grid-template-columns: 20px 1fr;
          align-items: center;
          gap: 9px;
          color: #98989d;
          cursor: pointer;
          text-align: left;
          transition: color 180ms ease;
        }

        .ls-service-rail button i {
          display: flex;
          width: 14px;
          height: 14px;
          align-items: center;
          justify-content: center;
          border: 1px solid
            rgba(0, 113, 227, 0.24);
          border-radius: 50%;
        }

        .ls-service-rail button i b {
          width: 4px;
          height: 4px;
          border-radius: 50%;
        }

        .ls-service-rail button span {
          font-size: 11px;
          font-weight: 560;
        }

        .ls-service-rail button.active {
          color: #1d1d1f;
        }

        .ls-service-rail button.active i {
          border-color: #0071e3;
          background: rgba(0, 113, 227, 0.08);
        }

        .ls-service-rail button.active i b {
          background: #0071e3;
          box-shadow: 0 0 10px
            rgba(0, 113, 227, 0.5);
        }

        .ls-copy {
          position: absolute;
          z-index: 35;
          top: 53%;
          left: max(235px, 19vw);
          width: min(355px, 28vw);
          transform: translateY(-20%);
        }

        .ls-copy-enter {
          animation: ls-copy-in 500ms
            cubic-bezier(0.2, 0.75, 0.2, 1);
        }

        @keyframes ls-copy-in {
          from {
            opacity: 0;
            filter: blur(7px);
            transform: translateY(18px);
          }

          to {
            opacity: 1;
            filter: blur(0);
            transform: translateY(0);
          }
        }

        .ls-number {
          display: block;
          margin-bottom: 19px;
          color: #b0b0b5;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.13em;
        }

        .ls-copy p {
          margin: 0 0 11px;
          color: #0071e3;
          font-size: 12px;
          font-weight: 600;
        }

        .ls-copy h2 {
          margin: 0;
          color: #1d1d1f;
          font-size: clamp(
            2.25rem,
            3.4vw,
            4.45rem
          );
          font-weight: 600;
          letter-spacing: -0.058em;
          line-height: 0.97;
        }

        .ls-description {
          margin-top: 20px;
          color: #6e6e73;
          font-size: 14px;
          line-height: 1.66;
        }

        .ls-copy a {
          display: inline-flex;
          margin-top: 23px;
          align-items: center;
          gap: 8px;
          color: #0066cc;
          font-size: 13px;
          font-weight: 600;
        }

        .ls-product-stage {
          position: absolute;
          z-index: 25;
          top: 29%;
          right: 4vw;
          width: min(43vw, 650px);
          height: min(61vh, 640px);
          transform-style: preserve-3d;
          transition: transform 85ms linear;
          will-change: transform;
        }

        .ls-product-shadow {
          position: absolute;
          right: 3%;
          bottom: -6%;
          left: 3%;
          height: 22%;
          border-radius: 50%;
          background: rgba(30, 71, 112, 0.2);
          filter: blur(42px);
          transform: rotateX(76deg);
        }

        .ls-product-shell {
          position: absolute;
          inset: 0;
          overflow: hidden;
          border: 1px solid
            rgba(255, 255, 255, 0.9);
          border-radius: clamp(
            34px,
            4vw,
            66px
          );
          background:
            radial-gradient(
              circle at 74% 23%,
              rgba(255, 255, 255, 0.95),
              transparent 24%
            ),
            linear-gradient(
              145deg,
              rgba(255, 255, 255, 0.98),
              rgba(230, 239, 249, 0.86)
            );
          box-shadow:
            inset 0 1px 0 white,
            inset 0 -1px 0
              rgba(98, 132, 164, 0.12),
            0 60px 120px
              rgba(46, 84, 124, 0.17),
            0 10px 35px
              rgba(0, 113, 227, 0.1);
        }

        .ls-product-topbar {
          position: absolute;
          z-index: 5;
          top: 24px;
          right: 27px;
          left: 27px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .ls-product-topbar span {
          color: #86868b;
          font-size: 10px;
          font-weight: 600;
          letter-spacing: 0.11em;
          text-transform: uppercase;
        }

        .ls-product-topbar i {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #34c759;
          box-shadow: 0 0 10px
            rgba(52, 199, 89, 0.4);
        }

        .ls-lens {
          position: absolute;
          top: 13%;
          left: 50%;
          width: min(72%, 430px);
          aspect-ratio: 1;
          border-radius: 50%;
          transform: translateX(-50%);
        }

        .ls-lens-ring {
          position: absolute;
          border-radius: 50%;
        }

        .ring-one {
          inset: 0;
          border: 1px solid
            rgba(0, 113, 227, 0.13);
        }

        .ring-two {
          inset: 9%;
          border: 1px solid
            rgba(0, 113, 227, 0.16);
        }

        .ring-three {
          inset: 18%;
          border: 1px solid
            rgba(255, 255, 255, 0.86);
          background:
            linear-gradient(
              145deg,
              #ffffff,
              #d9e8f8
            );
          box-shadow:
            inset 0 2px 5px
              rgba(255, 255, 255, 0.9),
            0 25px 60px
              rgba(25, 87, 148, 0.16);
        }

        .ls-liquid {
          position: absolute;
          inset: 25%;
          overflow: hidden;
          border: 8px solid
            rgba(255, 255, 255, 0.76);
          border-radius: 50%;
          background:
            radial-gradient(
              circle at 34% 25%,
              #bfe8ff,
              #63bfff 35%,
              #0071e3 77%,
              #0054ad
            );
          box-shadow:
            inset -18px -22px 35px
              rgba(0, 42, 105, 0.21),
            inset 16px 18px 28px
              rgba(255, 255, 255, 0.33),
            0 18px 45px
              rgba(0, 113, 227, 0.28);
        }

        .ls-liquid-highlight {
          position: absolute;
          top: 13%;
          left: 20%;
          width: 38%;
          height: 22%;
          border-radius: 50%;
          background:
            rgba(255, 255, 255, 0.43);
          filter: blur(12px);
          transform: rotate(-28deg);
        }

        .ls-liquid-wave {
          position: absolute;
          right: -20%;
          left: -20%;
          border-radius: 47%;
          background:
            rgba(255, 255, 255, 0.15);
        }

        .wave-one {
          bottom: -18%;
          height: 54%;
          animation:
            ls-wave 8s linear infinite;
        }

        .wave-two {
          bottom: -28%;
          height: 58%;
          opacity: 0.55;
          animation:
            ls-wave 11s linear infinite reverse;
        }

        @keyframes ls-wave {
          to {
            transform: rotate(360deg);
          }
        }

        .ls-service-icon {
          position: absolute;
          z-index: 4;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          filter:
            drop-shadow(
              0 7px 15px
              rgba(0, 49, 113, 0.25)
            );
        }

        .ls-service-icon svg {
          animation: ls-icon-in 500ms ease;
        }

        @keyframes ls-icon-in {
          from {
            opacity: 0;
            transform:
              scale(0.78)
              rotate(-8deg);
          }

          to {
            opacity: 1;
            transform:
              scale(1)
              rotate(0);
          }
        }

        .ls-brand-plate {
          position: absolute;
          right: 29%;
          bottom: 19%;
          left: 29%;
          display: flex;
          height: 80px;
          align-items: center;
          justify-content: center;
          border: 1px solid
            rgba(255, 255, 255, 0.86);
          border-radius: 22px;
          background: rgba(255, 255, 255, 0.65);
          box-shadow:
            0 18px 38px
              rgba(49, 83, 119, 0.12);
          backdrop-filter: blur(16px);
        }

        .ls-brand-plate img {
          width: 72%;
          height: 64%;
          object-fit: contain;
        }

        .ls-product-info {
          position: absolute;
          z-index: 7;
          right: 25px;
          bottom: 23px;
          left: 25px;
          display: grid;
          grid-template-columns: 42px 1fr auto;
          align-items: center;
          gap: 12px;
        }

        .ls-product-info img {
          width: 42px;
          height: 42px;
          border-radius: 12px;
          object-fit: contain;
          background: white;
          padding: 5px;
          box-shadow:
            0 6px 18px
              rgba(31, 79, 128, 0.14);
        }

        .ls-product-info div {
          display: grid;
          gap: 2px;
        }

        .ls-product-info small {
          color: #86868b;
          font-size: 9px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
        }

        .ls-product-info strong {
          color: #1d1d1f;
          font-size: 14px;
          font-weight: 600;
        }

        .ls-product-info > span {
          color: #a1a1a6;
          font-size: 11px;
          font-weight: 600;
        }

        .ls-reflection {
          position: absolute;
          z-index: 10;
          top: -25%;
          left: -35%;
          width: 45%;
          height: 160%;
          background:
            linear-gradient(
              90deg,
              transparent,
              rgba(255, 255, 255, 0.44),
              transparent
            );
          pointer-events: none;
          transform: rotate(18deg);
        }

        .ls-floating-chip {
          position: absolute;
          z-index: 15;
          display: flex;
          min-height: 38px;
          align-items: center;
          gap: 8px;
          border: 1px solid white;
          border-radius: 999px;
          background:
            rgba(255, 255, 255, 0.75);
          padding: 0 15px;
          color: #424245;
          box-shadow:
            0 15px 40px
              rgba(27, 74, 119, 0.13);
          font-size: 11px;
          font-weight: 600;
          backdrop-filter: blur(18px);
        }

        .ls-floating-chip svg {
          color: #0071e3;
        }

        .chip-one {
          top: 18%;
          left: -9%;
        }

        .chip-two {
          right: -7%;
          bottom: 24%;
        }

        .ls-progress {
          position: absolute;
          z-index: 50;
          right: 4vw;
          bottom: 27px;
          left: 4vw;
          display: flex;
          align-items: center;
          gap: 11px;
          color: #a1a1a6;
          font-size: 9px;
          font-weight: 700;
        }

        .ls-progress i {
          width: 120px;
          height: 2px;
          overflow: hidden;
          border-radius: 20px;
          background:
            rgba(29, 29, 31, 0.1);
        }

        .ls-progress i b {
          display: block;
          width: 100%;
          height: 100%;
          background: #0071e3;
          transform-origin: left;
        }

        .ls-scroll {
          position: absolute;
          z-index: 50;
          bottom: 27px;
          left: 50%;
          display: flex;
          align-items: center;
          gap: 7px;
          color: #86868b;
          font-size: 10px;
          font-weight: 600;
          transition: opacity 300ms ease;
          transform: translateX(-50%);
        }

        .ls-services {
          padding: 170px max(22px, 5vw);
          background: #ffffff;
        }

        .ls-section-heading {
          max-width: 1100px;
          margin: 0 auto 85px;
          text-align: center;
        }

        .ls-section-heading > p,
        .ls-standard-copy > p,
        .ls-contact-content > p {
          margin-bottom: 16px;
          color: #0066cc;
          font-size: 12px;
          font-weight: 600;
        }

        .ls-section-heading h2,
        .ls-standard-copy h2,
        .ls-contact-content h2 {
          margin: 0;
          color: #1d1d1f;
          font-size: clamp(
            3.8rem,
            7.3vw,
            8.3rem
          );
          font-weight: 600;
          letter-spacing: -0.077em;
          line-height: 0.9;
        }

        .ls-section-heading h2 span,
        .ls-standard-copy h2 span,
        .ls-contact-content h2 span {
          display: block;
          color: #a1a1a6;
        }

        .ls-service-grid {
          display: grid;
          max-width: 1320px;
          margin-inline: auto;
          grid-template-columns: 1fr 1fr;
          gap: 22px;
        }

        .ls-service-card {
          position: relative;
          min-height: 520px;
          overflow: hidden;
          border-radius: 38px;
          background:
            linear-gradient(
              145deg,
              #f8fafc,
              #e6edf5
            );
          padding: 38px;
          box-shadow:
            inset 0 1px 0 white;
        }

        .ls-service-card.featured {
          min-height: 700px;
          grid-column: 1 / -1;
        }

        .ls-card-index {
          color: #a1a1a6;
          font-size: 10px;
          font-weight: 700;
        }

        .ls-card-visual {
          position: absolute;
          top: 8%;
          right: 7%;
          display: flex;
          width: 48%;
          aspect-ratio: 1;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: white;
        }

        .ls-card-visual > div {
          position: absolute;
          inset: 0;
          border: 1px solid
            rgba(0, 113, 227, 0.12);
          border-radius: 50%;
          background:
            radial-gradient(
              circle at 35% 30%,
              #bce5ff,
              #52adf4 35%,
              #0071e3 70%,
              #0055ac
            );
          box-shadow:
            inset 15px 20px 35px
              rgba(255, 255, 255, 0.2),
            0 35px 80px
              rgba(0, 113, 227, 0.2);
        }

        .ls-card-visual svg {
          position: relative;
          z-index: 2;
        }

        .ls-card-copy {
          position: absolute;
          right: 38px;
          bottom: 38px;
          left: 38px;
          max-width: 630px;
        }

        .ls-card-copy p {
          color: #0066cc;
          font-size: 12px;
          font-weight: 600;
        }

        .ls-card-copy h3 {
          margin: 10px 0 0;
          color: #1d1d1f;
          font-size: clamp(
            2.3rem,
            4vw,
            5.1rem
          );
          font-weight: 600;
          letter-spacing: -0.058em;
          line-height: 0.96;
        }

        .ls-card-copy > span {
          display: block;
          max-width: 500px;
          margin-top: 17px;
          color: #6e6e73;
          font-size: 14px;
          line-height: 1.65;
        }

        .ls-service-card > a {
          position: absolute;
          right: 28px;
          bottom: 28px;
          display: flex;
          width: 44px;
          height: 44px;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: #1d1d1f;
          color: white;
        }

        .ls-standards {
          display: grid;
          min-height: 900px;
          padding: 120px max(28px, 8vw);
          background: #000000;
          grid-template-columns:
            minmax(360px, 0.75fr)
            minmax(0, 1.25fr);
          align-items: center;
          gap: 8vw;
        }

        .ls-standard-circle {
          position: relative;
          display: flex;
          aspect-ratio: 1;
          align-items: center;
          justify-content: center;
          border: 1px solid
            rgba(255, 255, 255, 0.12);
          border-radius: 50%;
          background:
            radial-gradient(
              circle,
              rgba(0, 113, 227, 0.3),
              transparent 62%
            );
        }

        .ls-standard-circle > div {
          position: absolute;
          border: 1px solid
            rgba(255, 255, 255, 0.1);
          border-radius: 50%;
        }

        .ls-standard-circle > div:first-child {
          inset: 11%;
        }

        .ls-standard-circle > div:nth-child(2) {
          inset: 23%;
        }

        .ls-standard-circle img {
          position: relative;
          z-index: 2;
          width: 62%;
          height: auto;
          filter: brightness(0) invert(1);
        }

        .ls-standard-copy h2 {
          color: white;
          font-size: clamp(
            3.6rem,
            6.4vw,
            7.7rem
          );
        }

        .ls-standard-copy h2 span {
          color:
            rgba(255, 255, 255, 0.32);
        }

        .ls-checks {
          display: grid;
          margin-top: 48px;
          border-top: 1px solid
            rgba(255, 255, 255, 0.13);
        }

        .ls-checks > div {
          display: grid;
          min-height: 72px;
          border-bottom: 1px solid
            rgba(255, 255, 255, 0.13);
          grid-template-columns: 35px 1fr;
          align-items: center;
          gap: 12px;
        }

        .ls-checks i {
          display: flex;
          width: 27px;
          height: 27px;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background:
            rgba(0, 113, 227, 0.22);
          color: #63b7ff;
        }

        .ls-checks span {
          color:
            rgba(255, 255, 255, 0.7);
          font-size: 14px;
          font-weight: 550;
        }

        .ls-contact {
          position: relative;
          display: flex;
          min-height: 850px;
          overflow: hidden;
          align-items: center;
          justify-content: center;
          background: #f5f5f7;
          text-align: center;
        }

        .ls-contact-ring {
          position: absolute;
          border: 1px solid
            rgba(0, 113, 227, 0.1);
          border-radius: 50%;
        }

        .ring-large {
          width: min(760px, 78vw);
          height: min(760px, 78vw);
        }

        .ring-medium {
          width: min(540px, 56vw);
          height: min(540px, 56vw);
        }

        .ring-small {
          width: min(340px, 38vw);
          height: min(340px, 38vw);
          background:
            radial-gradient(
              circle,
              rgba(0, 113, 227, 0.12),
              transparent 68%
            );
        }

        .ls-contact-content {
          position: relative;
          z-index: 2;
          width: min(
            1000px,
            calc(100% - 36px)
          );
        }

        .ls-contact-content > img {
          width: 70px;
          height: 70px;
          margin: 0 auto 25px;
          object-fit: contain;
        }

        .ls-contact-content > div {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 12px;
          margin-top: 36px;
        }

        .ls-contact-content a {
          display: inline-flex;
          min-height: 49px;
          align-items: center;
          justify-content: center;
          gap: 9px;
          border-radius: 999px;
          padding: 0 23px;
          font-size: 14px;
          font-weight: 600;
        }

        .ls-contact-content a:first-child {
          background: #0071e3;
          color: white;
        }

        .ls-contact-content a:last-child {
          border: 1px solid
            rgba(0, 113, 227, 0.25);
          color: #0066cc;
        }

        .ls-footer {
          display: flex;
          padding: 55px max(24px, 6vw);
          background: #e8e8ed;
          align-items: center;
          justify-content: space-between;
          gap: 30px;
          color: #86868b;
          font-size: 11px;
        }

        .ls-footer img {
          width: 180px;
          height: auto;
        }

        @media (max-width: 1000px) {
          .ls-copy {
            left: 24vw;
            width: 29vw;
          }

          .ls-product-stage {
            right: -1vw;
            width: 48vw;
          }
        }

        @media (max-width: 767px) {
          .ls-header-inner {
            width: calc(100% - 30px);
            height: 60px;
            grid-template-columns:
              1fr auto auto;
            gap: 10px;
          }

          .ls-wordmark {
            width: 145px;
            height: 44px;
          }

          .ls-nav {
            display: none;
          }

          .ls-book {
            padding: 8px 13px;
            font-size: 11px;
          }

          .ls-mobile-menu {
            display: grid;
            width: 32px;
            height: 32px;
            border: 1px solid
              rgba(29, 29, 31, 0.12);
            border-radius: 50%;
            background: white;
            padding: 8px;
            align-content: center;
            gap: 4px;
          }

          .ls-mobile-menu span {
            width: 100%;
            height: 1px;
            background: #1d1d1f;
          }

          .ls-story {
            height: 500vh;
          }

          .ls-main-title {
            top: 93px;
            right: 18px;
            left: 18px;
            text-align: left;
          }

          .ls-main-title p {
            font-size: 10px;
          }

          .ls-main-title h1 {
            max-width: 350px;
            font-size: clamp(
              3.3rem,
              14vw,
              5.2rem
            );
          }

          .ls-copy {
            top: 29%;
            right: 18px;
            left: 18px;
            width: auto;
            transform: none;
          }

          .ls-number {
            display: none;
          }

          .ls-copy h2 {
            max-width: 340px;
            font-size: clamp(
              2.2rem,
              9vw,
              3.35rem
            );
          }

          .ls-description {
            max-width: 310px;
            margin-top: 13px;
            font-size: 13px;
          }

          .ls-copy a {
            margin-top: 14px;
          }

          .ls-product-stage {
            top: auto;
            right: 8%;
            bottom: 73px;
            width: 84%;
            height: 42vh;
          }

          .ls-floating-chip {
            display: none;
          }

          .ls-brand-plate {
            right: 25%;
            bottom: 19%;
            left: 25%;
            height: 60px;
          }

          .ls-product-info {
            right: 17px;
            bottom: 15px;
            left: 17px;
          }

          .ls-product-info img {
            width: 35px;
            height: 35px;
          }

          .ls-service-rail {
            z-index: 100;
            top: auto;
            right: 14px;
            bottom: 65px;
            left: 14px;
            width: auto;
            padding: 13px;
            border: 1px solid
              rgba(0, 0, 0, 0.08);
            border-radius: 19px;
            background:
              rgba(255, 255, 255, 0.92);
            box-shadow:
              0 20px 60px
              rgba(41, 76, 111, 0.18);
            opacity: 0;
            pointer-events: none;
            transform:
              translateY(10px)
              scale(0.98);
            transition:
              opacity 180ms ease,
              transform 180ms ease;
            backdrop-filter: blur(22px);
          }

          .ls-service-rail.open {
            opacity: 1;
            pointer-events: auto;
            transform:
              translateY(0)
              scale(1);
          }

          .ls-service-rail > div {
            grid-template-columns:
              repeat(2, 1fr);
          }

          .ls-progress {
            right: 17px;
            bottom: 20px;
            left: 17px;
          }

          .ls-scroll {
            display: none;
          }

          .ls-services {
            padding: 105px 18px;
          }

          .ls-section-heading {
            margin-bottom: 50px;
            text-align: left;
          }

          .ls-section-heading h2,
          .ls-standard-copy h2,
          .ls-contact-content h2 {
            font-size: clamp(
              3.05rem,
              13.2vw,
              5rem
            );
          }

          .ls-service-grid {
            grid-template-columns: 1fr;
          }

          .ls-service-card,
          .ls-service-card.featured {
            min-height: 570px;
            grid-column: auto;
            border-radius: 29px;
            padding: 25px;
          }

          .ls-card-visual {
            top: 11%;
            right: 9%;
            width: 69%;
          }

          .ls-card-copy {
            right: 25px;
            bottom: 28px;
            left: 25px;
          }

          .ls-card-copy h3 {
            font-size: 2.45rem;
          }

          .ls-service-card > a {
            right: 20px;
            bottom: 20px;
          }

          .ls-standards {
            display: flex;
            min-height: auto;
            padding: 100px 20px;
            flex-direction: column;
            gap: 70px;
          }

          .ls-standard-circle {
            width: min(88vw, 450px);
          }

          .ls-contact {
            min-height: 720px;
            padding-inline: 18px;
          }

          .ls-contact-content > div {
            flex-direction: column;
          }

          .ls-contact-content a {
            width: 100%;
          }

          .ls-footer {
            align-items: flex-start;
            flex-direction: column;
          }

          .ls-footer img {
            width: 155px;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .ls-story {
            height: 100svh;
          }

          .ls-product-stage {
            transform: none !important;
          }

          .ls-liquid-wave {
            animation: none;
          }
        }
      `}</style>
    </main>
  );
}