"use client";

import Image from "next/image";
import {
  ArrowRight,
  Building2,
  Check,
  Home,
  MessageCircle,
  Phone,
  ShieldCheck,
  Sparkles,
} from "lucide-react";

const services = [
  {
    number: "01",
    title: "Residential cleaning",
    text:
      "Professional cleaning for apartments, villas and homes, including kitchens, bathrooms, floors, bedrooms and living areas.",
    image: "/images/lark-editorial/home-cleaning.jpg",
  },
  {
    number: "02",
    title: "Commercial cleaning",
    text:
      "Reliable cleaning for offices, buildings, workspaces, shared areas and frequently used business environments.",
    image: "/images/lark-editorial/office-cleaning.jpg",
  },
  {
    number: "03",
    title: "Deep cleaning",
    text:
      "Detailed cleaning for fixtures, corners, surfaces, bathrooms and areas that need more than routine maintenance.",
    image: "/images/lark-editorial/bathroom-cleaning.jpg",
  },
  {
    number: "04",
    title: "Glass and window cleaning",
    text:
      "Professional cleaning for interior glass, windows and building façades with careful attention to the final finish.",
    image: "/images/lark-editorial/window-cleaning.jpg",
  },
];

const benefits = [
  "Residential and commercial cleaning",
  "Professional equipment and materials",
  "Careful attention to surfaces and finishes",
  "Clear booking and communication",
  "Flexible service arrangements",
  "Easy WhatsApp enquiry",
];

export default function LarkEditorialHome() {
  return (
    <main className="lark-editorial">
      <header className="le-header">
        <div className="le-header-inner">
          <a href="#home" className="le-logo">
            <Image
              src="/images/lark-shine-wordmark.png"
              alt="Lark Shine Building Cleaning Services LLC"
              width={1036}
              height={314}
              priority
            />
          </a>

          <nav>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#why-us">Why us</a>
            <a href="#contact">Contact</a>
          </nav>

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

      <section id="home" className="le-hero">
        <div className="le-hero-image">
          <Image
            src="/images/lark-editorial/window-cleaning.jpg"
            alt="Professional window cleaning"
            fill
            priority
            sizes="100vw"
          />
        </div>

        <div className="le-hero-shade" />

        <div className="le-hero-content">
          <p className="le-eyebrow">
            Lark Shine Building Cleaning Services LLC
          </p>

          <h1>
            Professional cleaning.
            <span>Clearly better spaces.</span>
          </h1>

          <p className="le-hero-copy">
            Cleaning services for homes, offices, buildings and
            commercial properties, delivered with care, professional
            equipment and attention to detail.
          </p>

          <div className="le-actions">
            <a
              href="https://wa.me/971555822480"
              target="_blank"
              rel="noreferrer"
              className="le-primary"
            >
              <MessageCircle size={18} />
              Request a quote
            </a>

            <a href="#services" className="le-secondary">
              Explore services
              <ArrowRight size={17} />
            </a>
          </div>
        </div>

        <div className="le-hero-bottom">
          <span>Residential</span>
          <span>Commercial</span>
          <span>Deep cleaning</span>
          <span>Glass care</span>
        </div>
      </section>

      <section id="about" className="le-about">
        <div className="le-shell le-about-grid">
          <div>
            <p className="le-section-label">About Lark Shine</p>

            <h2>
              A cleaning company built around
              <span>care, consistency and detail.</span>
            </h2>
          </div>

          <div className="le-about-copy">
            <p>
              Lark Shine Building Cleaning Services LLC provides
              professional cleaning support for residential and
              commercial properties.
            </p>

            <p>
              Our work covers everyday cleaning, detailed deep cleaning,
              floor care, glass cleaning, office cleaning and property
              preparation. We focus on choosing the appropriate method
              for each space rather than treating every surface the same.
            </p>

            <div className="le-about-types">
              <div>
                <Home size={24} />
                <strong>Residential</strong>
                <span>
                  Apartments, villas, kitchens, bathrooms and living
                  spaces.
                </span>
              </div>

              <div>
                <Building2 size={24} />
                <strong>Commercial</strong>
                <span>
                  Offices, buildings, workspaces and shared areas.
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="services" className="le-services">
        <div className="le-shell">
          <div className="le-services-heading">
            <p className="le-section-label">Our services</p>

            <h2>
              Complete cleaning support,
              <span>from everyday care to detailed work.</span>
            </h2>
          </div>

          <div className="le-service-list">
            {services.map((service) => (
              <article key={service.number} className="le-service">
                <div className="le-service-image">
                  <Image
                    src={service.image}
                    alt={service.title}
                    fill
                    sizes="(max-width: 767px) 100vw, 50vw"
                  />
                </div>

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

                  <a href="#contact">
                    Request this service
                    <ArrowRight size={18} />
                  </a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="le-feature">
        <div className="le-feature-image">
          <Image
            src="/images/lark-editorial/floor-cleaning.jpg"
            alt="Professional floor cleaning"
            fill
            sizes="100vw"
          />
        </div>

        <div className="le-feature-shade" />

        <div className="le-feature-copy">
          <p>Professional equipment</p>

          <h2>
            The right tools make
            <span>a visible difference.</span>
          </h2>

          <p>
            Professional equipment helps us work more thoroughly across
            floors, carpets, surfaces and difficult areas while using
            methods appropriate to the material.
          </p>
        </div>
      </section>

      <section id="why-us" className="le-why">
        <div className="le-shell le-why-grid">
          <div className="le-why-heading">
            <p className="le-section-label">Why choose Lark Shine</p>

            <h2>
              Professional service
              <span>without unnecessary complication.</span>
            </h2>

            <p>
              Clear communication, suitable cleaning methods and careful
              finishing from enquiry through completion.
            </p>
          </div>

          <div className="le-benefits">
            {benefits.map((benefit) => (
              <div key={benefit}>
                <i>
                  <Check size={16} />
                </i>
                <span>{benefit}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="le-housekeeping">
        <div className="le-housekeeping-image">
          <Image
            src="/images/lark-editorial/housekeeping.jpg"
            alt="Professional housekeeping service"
            fill
            sizes="100vw"
          />
        </div>

        <div className="le-housekeeping-content">
          <Sparkles size={29} />

          <p>Property preparation</p>

          <h2>
            Ready for residents,
            <span>guests or a fresh beginning.</span>
          </h2>

          <p>
            Detailed preparation for homes, apartments and properties
            before move-in, after move-out or ahead of important use.
          </p>
        </div>
      </section>

      <section id="contact" className="le-contact">
        <div className="le-contact-ring ring-one" />
        <div className="le-contact-ring ring-two" />

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

          <p>Request a cleaning service</p>

          <h2>
            Tell us what needs cleaning.
            <span>We’ll help with the next step.</span>
          </h2>

          <div className="le-contact-actions">
            <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 className="le-contact-trust">
            <ShieldCheck size={18} />
            Residential and commercial enquiries welcome
          </div>
        </div>
      </section>

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

          <p>
            Professional cleaning services for homes, offices,
            buildings and commercial properties.
          </p>

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

            <a href="tel:+971555822480">
              +971 55 582 2480
            </a>
          </div>
        </div>
      </footer>

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

        .le-shell {
          width: min(1220px, calc(100% - 48px));
          margin-inline: auto;
        }

        .le-header {
          position: fixed;
          z-index: 100;
          top: 0;
          right: 0;
          left: 0;
          background: rgba(255,255,255,.82);
          border-bottom: 1px solid rgba(0,0,0,.07);
          backdrop-filter: blur(22px) saturate(170%);
        }

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

        .le-logo {
          display: flex;
          width: 190px;
          height: 52px;
          align-items: center;
        }

        .le-logo img {
          width: 100%;
          height: auto;
          object-fit: contain;
        }

        .le-header nav {
          display: flex;
          gap: 31px;
        }

        .le-header nav a {
          color: #515154;
          font-size: 12px;
          font-weight: 520;
        }

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

        .le-hero {
          position: relative;
          min-height: 100svh;
          overflow: hidden;
          display: flex;
          align-items: flex-end;
          background: #101820;
        }

        .le-hero-image,
        .le-hero-image img,
        .le-hero-shade {
          position: absolute;
          inset: 0;
        }

        .le-hero-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .le-hero-shade {
          background:
            linear-gradient(
              90deg,
              rgba(4,14,23,.86),
              rgba(5,20,32,.54) 48%,
              rgba(4,14,23,.14)
            ),
            linear-gradient(
              180deg,
              rgba(0,0,0,.18),
              transparent 45%,
              rgba(0,0,0,.72)
            );
        }

        .le-hero-content {
          position: relative;
          z-index: 2;
          width: min(1220px, calc(100% - 48px));
          margin: 0 auto;
          padding: 150px 0 130px;
        }

        .le-eyebrow,
        .le-section-label {
          margin: 0 0 17px;
          color: #2997ff;
          font-size: 12px;
          font-weight: 650;
          letter-spacing: .05em;
        }

        .le-hero h1,
        .le-about h2,
        .le-services-heading h2,
        .le-feature-copy h2,
        .le-why h2,
        .le-housekeeping h2,
        .le-contact h2 {
          margin: 0;
          font-size: clamp(4rem, 8vw, 9rem);
          line-height: .9;
          letter-spacing: -.078em;
          font-weight: 610;
        }

        .le-hero h1 {
          max-width: 1050px;
          color: white;
        }

        .le-hero h1 span,
        .le-about h2 span,
        .le-services-heading h2 span,
        .le-feature-copy h2 span,
        .le-why h2 span,
        .le-housekeeping h2 span,
        .le-contact h2 span {
          display: block;
        }

        .le-hero h1 span {
          color: rgba(255,255,255,.46);
        }

        .le-hero-copy {
          max-width: 620px;
          margin: 27px 0 0;
          color: rgba(255,255,255,.72);
          font-size: 18px;
          line-height: 1.65;
        }

        .le-actions,
        .le-contact-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-top: 32px;
        }

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

        .le-primary,
        .le-contact-actions a:first-child {
          background: #0071e3;
          color: white;
        }

        .le-secondary {
          background: rgba(255,255,255,.14);
          color: white;
          border: 1px solid rgba(255,255,255,.28);
          backdrop-filter: blur(12px);
        }

        .le-hero-bottom {
          position: absolute;
          z-index: 3;
          right: 3vw;
          bottom: 28px;
          display: flex;
          gap: 26px;
          color: rgba(255,255,255,.54);
          font-size: 11px;
          font-weight: 550;
        }

        .le-about {
          padding: 170px 0;
        }

        .le-about-grid {
          display: grid;
          grid-template-columns: 1.05fr .95fr;
          gap: 9vw;
        }

        .le-about h2,
        .le-services-heading h2,
        .le-why h2,
        .le-contact h2 {
          color: #1d1d1f;
        }

        .le-about h2 span,
        .le-services-heading h2 span,
        .le-why h2 span,
        .le-contact h2 span {
          color: #a1a1a6;
        }

        .le-about-copy > p {
          margin: 0 0 22px;
          color: #5f5f64;
          font-size: 18px;
          line-height: 1.72;
        }

        .le-about-types {
          display: grid;
          margin-top: 42px;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }

        .le-about-types > div {
          display: grid;
          gap: 10px;
          border-top: 1px solid #d2d2d7;
          padding-top: 23px;
        }

        .le-about-types svg {
          color: #0071e3;
        }

        .le-about-types strong {
          font-size: 16px;
        }

        .le-about-types span {
          color: #737378;
          font-size: 13px;
          line-height: 1.55;
        }

        .le-services {
          padding: 165px 0;
          background: #f5f5f7;
        }

        .le-services-heading {
          max-width: 1050px;
          margin-bottom: 90px;
        }

        .le-service-list {
          display: grid;
          gap: 24px;
        }

        .le-service {
          display: grid;
          min-height: 580px;
          overflow: hidden;
          border-radius: 38px;
          background: white;
          grid-template-columns: 1.2fr .8fr;
        }

        .le-service:nth-child(even) {
          grid-template-columns: .8fr 1.2fr;
        }

        .le-service:nth-child(even) .le-service-image {
          order: 2;
        }

        .le-service-image {
          position: relative;
          min-height: 580px;
        }

        .le-service-image img {
          object-fit: cover;
        }

        .le-service-content {
          display: flex;
          padding: 55px;
          flex-direction: column;
          justify-content: flex-end;
        }

        .le-service-content > span {
          color: #a1a1a6;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: .14em;
        }

        .le-service-content h3 {
          margin: 20px 0 0;
          font-size: clamp(2.8rem, 4.8vw, 6rem);
          line-height: .94;
          letter-spacing: -.06em;
          font-weight: 600;
        }

        .le-service-content p {
          max-width: 470px;
          margin: 23px 0 0;
          color: #6e6e73;
          font-size: 16px;
          line-height: 1.68;
        }

        .le-service-content a {
          display: inline-flex;
          margin-top: 27px;
          align-items: center;
          gap: 9px;
          color: #0066cc;
          font-size: 14px;
          font-weight: 600;
        }

        .le-feature {
          position: relative;
          min-height: 100svh;
          overflow: hidden;
          display: flex;
          align-items: center;
        }

        .le-feature-image,
        .le-feature-image img,
        .le-feature-shade {
          position: absolute;
          inset: 0;
        }

        .le-feature-image img {
          object-fit: cover;
        }

        .le-feature-shade {
          background:
            linear-gradient(
              90deg,
              rgba(5,13,21,.85),
              rgba(5,13,21,.43) 55%,
              rgba(5,13,21,.08)
            );
        }

        .le-feature-copy {
          position: relative;
          z-index: 2;
          width: min(1220px, calc(100% - 48px));
          margin-inline: auto;
        }

        .le-feature-copy > p,
        .le-housekeeping-content > p {
          color: #2997ff;
          font-size: 12px;
          font-weight: 650;
        }

        .le-feature-copy h2,
        .le-housekeeping h2 {
          max-width: 850px;
          color: white;
        }

        .le-feature-copy h2 span,
        .le-housekeeping h2 span {
          color: rgba(255,255,255,.44);
        }

        .le-feature-copy > p:last-child {
          max-width: 600px;
          margin-top: 28px;
          color: rgba(255,255,255,.7);
          font-size: 18px;
          line-height: 1.7;
        }

        .le-why {
          padding: 170px 0;
        }

        .le-why-grid {
          display: grid;
          grid-template-columns: 1fr .72fr;
          gap: 9vw;
          align-items: end;
        }

        .le-why-heading > p:last-child {
          max-width: 600px;
          margin-top: 28px;
          color: #6e6e73;
          font-size: 17px;
          line-height: 1.68;
        }

        .le-benefits {
          border-top: 1px solid #d2d2d7;
        }

        .le-benefits > div {
          display: grid;
          min-height: 78px;
          border-bottom: 1px solid #d2d2d7;
          grid-template-columns: 38px 1fr;
          align-items: center;
          gap: 12px;
        }

        .le-benefits i {
          display: flex;
          width: 30px;
          height: 30px;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: #e9f4ff;
          color: #0071e3;
        }

        .le-benefits span {
          color: #424245;
          font-size: 15px;
          font-weight: 550;
        }

        .le-housekeeping {
          position: relative;
          min-height: 830px;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }

        .le-housekeeping-image,
        .le-housekeeping-image img {
          position: absolute;
          inset: 0;
        }

        .le-housekeeping-image img {
          object-fit: cover;
        }

        .le-housekeeping::after {
          content: "";
          position: absolute;
          inset: 0;
          background:
            linear-gradient(
              90deg,
              rgba(0,0,0,.08),
              rgba(0,0,0,.65)
            );
        }

        .le-housekeeping-content {
          position: relative;
          z-index: 2;
          width: min(630px, 46vw);
          margin-right: max(30px, 8vw);
          color: white;
        }

        .le-housekeeping-content svg {
          margin-bottom: 25px;
          color: #6bc5ff;
        }

        .le-housekeeping-content > p:last-child {
          max-width: 560px;
          margin-top: 26px;
          color: rgba(255,255,255,.7);
          font-size: 17px;
          line-height: 1.68;
        }

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

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

        .le-contact-ring.ring-one {
          width: min(760px, 76vw);
          aspect-ratio: 1;
        }

        .le-contact-ring.ring-two {
          width: min(500px, 52vw);
          aspect-ratio: 1;
          background:
            radial-gradient(
              circle,
              rgba(0,113,227,.12),
              transparent 66%
            );
        }

        .le-contact-content {
          position: relative;
          z-index: 2;
          width: min(1050px, calc(100% - 40px));
        }

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

        .le-contact-actions {
          justify-content: center;
        }

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

        .le-contact-trust {
          display: flex;
          margin-top: 28px;
          align-items: center;
          justify-content: center;
          gap: 8px;
          color: #737378;
          font-size: 12px;
        }

        .le-contact-trust svg {
          color: #0071e3;
        }

        .le-footer {
          padding: 75px 0 32px;
          background: #ececee;
        }

        .le-footer img {
          width: 190px;
          height: auto;
        }

        .le-footer p {
          max-width: 500px;
          margin-top: 23px;
          color: #737378;
          font-size: 13px;
          line-height: 1.65;
        }

        .le-footer .le-shell > div {
          display: flex;
          margin-top: 62px;
          padding-top: 21px;
          border-top: 1px solid #d2d2d7;
          justify-content: space-between;
          gap: 20px;
          color: #86868b;
          font-size: 11px;
        }

        .le-footer a {
          color: #515154;
        }

        @media (max-width: 767px) {
          .le-shell,
          .le-header-inner,
          .le-hero-content,
          .le-feature-copy {
            width: calc(100% - 36px);
          }

          .le-header-inner {
            height: 60px;
            grid-template-columns: 1fr auto;
          }

          .le-logo {
            width: 148px;
          }

          .le-header nav {
            display: none;
          }

          .le-book {
            padding: 8px 14px;
            font-size: 11px;
          }

          .le-hero {
            min-height: 880px;
          }

          .le-hero-shade {
            background:
              linear-gradient(
                180deg,
                rgba(3,12,20,.2),
                rgba(3,12,20,.72) 62%,
                rgba(3,12,20,.9)
              );
          }

          .le-hero-content {
            padding: 130px 0 115px;
          }

          .le-hero h1,
          .le-about h2,
          .le-services-heading h2,
          .le-feature-copy h2,
          .le-why h2,
          .le-housekeeping h2,
          .le-contact h2 {
            font-size: clamp(3.25rem, 14vw, 5.3rem);
          }

          .le-hero-copy {
            font-size: 16px;
          }

          .le-actions {
            flex-direction: column;
          }

          .le-actions a {
            width: 100%;
          }

          .le-hero-bottom {
            right: 18px;
            bottom: 24px;
            left: 18px;
            overflow: hidden;
            gap: 17px;
            white-space: nowrap;
          }

          .le-about,
          .le-services,
          .le-why {
            padding: 105px 0;
          }

          .le-about-grid,
          .le-why-grid {
            grid-template-columns: 1fr;
            gap: 55px;
          }

          .le-about-copy > p {
            font-size: 16px;
          }

          .le-about-types {
            grid-template-columns: 1fr;
          }

          .le-services-heading {
            margin-bottom: 55px;
          }

          .le-service,
          .le-service:nth-child(even) {
            display: flex;
            min-height: auto;
            flex-direction: column;
          }

          .le-service:nth-child(even) .le-service-image {
            order: 0;
          }

          .le-service-image {
            min-height: 440px;
          }

          .le-service-content {
            padding: 32px 25px 40px;
          }

          .le-service-content h3 {
            font-size: 3rem;
          }

          .le-feature {
            min-height: 820px;
            align-items: flex-end;
          }

          .le-feature-shade {
            background:
              linear-gradient(
                180deg,
                rgba(4,12,20,.1),
                rgba(4,12,20,.83)
              );
          }

          .le-feature-copy {
            padding-bottom: 75px;
          }

          .le-housekeeping {
            min-height: 830px;
            align-items: flex-end;
          }

          .le-housekeeping::after {
            background:
              linear-gradient(
                180deg,
                rgba(0,0,0,.06),
                rgba(0,0,0,.82)
              );
          }

          .le-housekeeping-content {
            width: auto;
            margin: 0 18px 70px;
          }

          .le-contact {
            min-height: 760px;
          }

          .le-contact-actions {
            flex-direction: column;
          }

          .le-contact-actions a {
            width: 100%;
          }

          .le-footer .le-shell > div {
            flex-direction: column;
          }
        }
      `}</style>
    </main>
  );
}