---

const services = [
  {
    number: "01",
    title: "Робот-мойка",
    description: "Бережный уход за кузовом с современными технологиями.",
    image:
      "https://images.unsplash.com/photo-1520340356584-f9917d1eea6f?auto=format&fit=crop&w=900&q=85",
  },
  {
    number: "02",
    title: "Мойка вручную",
    description: "Детальная очистка кузова и труднодоступных участков.",
    image:
      "https://images.unsplash.com/photo-1607860108855-64acf2078ed9?auto=format&fit=crop&w=900&q=85",
  },
  {
    number: "03",
    title: "Химчистка салона",
    description: "Чистота и свежесть внутри вашего автомобиля.",
    image:
      "https://images.unsplash.com/photo-1507136566006-cfc505b114fc?auto=format&fit=crop&w=900&q=85",
  },
  {
    number: "04",
    title: "Нанесение воска",
    description: "Уход за лакокрасочным покрытием и выразительный блеск.",
    image:
      "https://images.unsplash.com/photo-1632823471565-1ecdf5c6f4b4?auto=format&fit=crop&w=900&q=85",
  },
  {
    number: "05",
    title: "Полировка кузова",
    description: "Работа с внешним видом кузова и глубиной цвета.",
    image:
      "https://images.unsplash.com/photo-1613214150384-4f6d6e6a3e3b?auto=format&fit=crop&w=900&q=85",
  },
];

const gold = "#d5ad62";

export default function Home() {
  return (
    <main className="min-h-screen overflow-hidden bg-[#090909] text-white">
      <header className="relative z-10 border-b border-white/10">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-5 md:px-10">
          <a href="#" className="text-2xl font-black tracking-[0.18em]">
            IQ<span style={{ color: gold }}>.</span>
            <span className="ml-2 text-xs font-medium tracking-[0.25em] text-white/60">
              ДЕТЕЙЛИНГ
            </span>
          </a>

          <nav className="hidden items-center gap-7 text-sm text-white/70 lg:flex">
            <a href="#home" className="transition hover:text-[#d5ad62]">Главная</a>
            <a href="#services" className="transition hover:text-[#d5ad62]">Услуги</a>
            <a href="#about" className="transition hover:text-[#d5ad62]">О нас</a>
            <a href="#gallery" className="transition hover:text-[#d5ad62]">Галерея</a>
            <a href="#contacts" className="transition hover:text-[#d5ad62]">Контакты</a>
          </nav>

          <a
            href="#booking"
            className="border border-[#d5ad62]/70 px-4 py-3 text-xs font-bold uppercase tracking-wider text-[#e7c681] transition hover:bg-[#d5ad62] hover:text-black"
          >
            Записаться ↗
          </a>
        </div>
      </header>

      <section
        id="home"
        className="relative flex min-h-[660px] items-center"
      >
        <div className="absolute inset-0">
          <img
            src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=2000&q=90"
            alt="Автомобиль в тёмном пространстве"
            className="h-full w-full object-cover object-center opacity-45"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-[#090909] via-[#090909]/70 to-[#090909]/20" />
          <div className="absolute inset-0 bg-gradient-to-t from-[#090909] via-transparent to-[#090909]/40" />
        </div>

        <div className="relative mx-auto w-full max-w-7xl px-5 py-24 md:px-10">
          <p className="mb-6 flex items-center gap-3 text-xs font-bold uppercase tracking-[0.35em] text-[#d5ad62]">
            <span className="h-px w-10 bg-[#d5ad62]" />
            Уход за автомобилем
          </p>

          <h1 className="max-w-4xl text-5xl font-black leading-[1.05] tracking-tight md:text-7xl lg:text-8xl">
            ДЕТЕЙЛИНГ
            <br />
            <span className="text-[#d5ad62]">НА ВЫСШЕМ</span>
            <br />
            УРОВНЕ
          </h1>

          <p className="mt-7 max-w-lg text-base leading-7 text-white/70 md:text-lg">
            Профессиональный уход за автомобилем. Внимание к деталям,
            аккуратность в работе и уважение к вашему автомобилю.
          </p>

          <div className="mt-9 flex flex-wrap gap-4">
            <a
              href="#services"
              className="bg-[#d5ad62] px-7 py-4 text-sm font-bold text-black transition hover:bg-[#e8c985]"
            >
              Смотреть услуги ↗
            </a>
            <a
              href="#booking"
              className="border border-white/30 px-7 py-4 text-sm font-bold transition hover:border-[#d5ad62] hover:text-[#d5ad62]"
            >
              Записаться
            </a>
          </div>

          <div className="mt-16 flex items-center gap-4 text-xs uppercase tracking-[0.2em] text-white/50">
            <span className="h-px w-12 bg-[#d5ad62]" />
            Детали создают впечатление
          </div>
        </div>
      </section>

      <section id="services" className="mx-auto max-w-7xl px-5 py-24 md:px-10">
        <div className="mb-12 flex flex-col justify-between gap-5 md:flex-row md:items-end">
          <div>
            <p className="mb-4 text-xs font-bold uppercase tracking-[0.3em] text-[#d5ad62]">
              Что мы предлагаем
            </p>
            <h2 className="text-4xl font-bold md:text-5xl">Наши услуги</h2>
          </div>
          <p className="max-w-md text-sm leading-6 text-white/55">
            Подберите подходящий уход — от регулярной мойки до тщательной
            работы с внешним видом и салоном автомобиля.
          </p>
        </div>

        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {services.map((service) => (
            <article
              key={service.number}
              className="group overflow-hidden border border-white/10 bg-[#111111] transition duration-300 hover:-translate-y-1 hover:border-[#d5ad62]/60"
            >
              <div className="relative h-60 overflow-hidden">
                <img
                  src={service.image}
                  alt={service.title}
                  className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
                />
                <span className="absolute left-4 top-4 bg-black/70 px-3 py-2 text-xs text-[#d5ad62]">
                  {service.number}
                </span>
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold">{service.title}</h3>
                <p className="mt-3 min-h-12 text-sm leading-6 text-white/55">
                  {service.description}
                </p>
                <a
                  href="#booking"
                  className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-[#d5ad62]"
                >
                  Узнать подробнее <span>↗</span>
                </a>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section id="about" className="border-y border-white/10 bg-[#101010]">
        <div className="mx-auto grid max-w-7xl gap-12 px-5 py-24 md:grid-cols-2 md:items-center md:px-10">
          <div>
            <p className="mb-4 text-xs font-bold uppercase tracking-[0.3em] text-[#d5ad62]">
              IQ Детейлинг
            </p>
            <h2 className="text-4xl font-bold leading-tight md:text-5xl">
              Ваш автомобиль.
              <br />
              Наше внимание.
            </h2>
            <p className="mt-6 max-w-lg leading-7 text-white/60">
              Мы создаём пространство, где уход за автомобилем — это
              внимание к каждой поверхности, каждому элементу и каждой детали.
            </p>
          </div>
          <div className="border border-[#d5ad62]/30 p-8 md:p-12">
            <span className="text-5xl text-[#d5ad62]">“</span>
            <p className="mt-3 text-2xl font-medium leading-relaxed">
              Идеальный результат начинается с внимания к мелочам.
            </p>
            <div className="mt-7 h-px w-16 bg-[#d5ad62]" />
            <p className="mt-4 text-xs uppercase tracking-[0.25em] text-white/40">
              Философия ухода
            </p>
          </div>
        </div>
      </section>

      <section id="gallery" className="mx-auto max-w-7xl px-5 py-24 md:px-10">
        <p className="mb-4 text-xs font-bold uppercase tracking-[0.3em] text-[#d5ad62]">
          Эстетика в деталях
        </p>
        <h2 className="mb-10 text-4xl font-bold md:text-5xl">Галерея</h2>
        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
          <div className="col-span-2 overflow-hidden">
            <img
              src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1200&q=85"
              alt="Автомобиль"
              className="h-64 w-full object-cover transition duration-500 hover:scale-105 md:h-80"
            />
          </div>
          <div className="overflow-hidden">
            <img
              src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=700&q=85"
              alt="Детали автомобиля"
              className="h-64 w-full object-cover transition duration-500 hover:scale-105 md:h-80"
            />
          </div>
          <div className="overflow-hidden">
            <img
              src="https://images.unsplash.com/photo-1507136566006-cfc505b114fc?auto=format&fit=crop&w=700&q=85"
              alt="Интерьер автомобиля"
              className="h-64 w-full object-cover transition duration-500 hover:scale-105 md:h-80"
            />
          </div>
        </div>
      </section>

      <section id="booking" className="bg-[#d5ad62] px-5 py-20 text-black md:px-10">
        <div className="mx-auto flex max-w-7xl flex-col justify-between gap-8 md:flex-row md:items-center">
          <div>
            <p className="mb-3 text-xs font-bold uppercase tracking-[0.3em]">
              Время обновить автомобиль
            </p>
            <h2 className="text-4xl font-black md:text-5xl">
              Запишитесь на уход
            </h2>
            <p className="mt-4 max-w-xl text-sm leading-6 text-black/70">
              Свяжитесь с нами, чтобы уточнить услуги и согласовать удобное время.
            </p>
          </div>
          <a
            href="#contacts"
            className="inline-flex shrink-0 items-center justify-center border border-black bg-black px-8 py-4 text-sm font-bold text-white transition hover:bg-transparent hover:text-black"
          >
            Связаться с нами ↗
          </a>
        </div>
      </section>

      <footer id="contacts" className="bg-[#090909]">
        <div className="mx-auto flex max-w-7xl flex-col gap-8 px-5 py-12 md:flex-row md:items-center md:justify-between md:px-10">
          <a href="#home" className="text-xl font-black tracking-[0.15em]">
            IQ<span className="text-[#d5ad62]">.</span> ДЕТЕЙЛИНГ
          </a>
          <p className="text-sm text-white/45">
            Профессиональный уход за автомобилем
          </p>
          <a href="#home" className="text-sm text-[#d5ad62]">
            Наверх ↑
          </a>
        </div>
        <div className="border-t border-white/10 px-5 py-5 text-center text-xs text-white/35">
          © {new Date().getFullYear()} IQ Детейлинг
        </div>
      </footer>
    </main>
  );
}