import React from "react";
import { Phone, MessageCircle, ClipboardCheck, Camera, Wrench, Building2, CheckCircle2, AlertTriangle, ArrowRight } from "lucide-react";

const colors = {
  bg: "#F6F4EF",
  text: "#1E2427",
  muted: "#6B7073",
  accent: "#1F4E5F",
  gold: "#B59A6A",
  line: "#E1DDD4",
};

const services = [
  {
    title: "Аварийные выезды",
    text: "Протечки, засоры, течь под мойкой, проблемы с бачком и срочные неисправности.",
    icon: AlertTriangle,
  },
  {
    title: "Плановые осмотры",
    text: "Проверяем мокрые зоны, сифоны, смесители, подводки, сливы, краны и слабые места.",
    icon: ClipboardCheck,
  },
  {
    title: "Мелкий ремонт",
    text: "Замена сифонов, подводки, смесителей, прокладок, арматуры бачка, устранение течей.",
    icon: Wrench,
  },
  {
    title: "Фотоотчёты и акты",
    text: "Фиксируем состояние до и после работ. Удобно для собственника, управляющего и бухгалтера.",
    icon: Camera,
  },
];

const audiences = [
  ["Кафе и рестораны", "Мойки, сливы, сифоны, санузлы, протечки и срочные заявки в рабочее время.", "Риск: простой кухни и зала."],
  ["Офисы", "Санузлы, раковины, запахи, протечки, комфорт сотрудников и клиентов.", "Риск: жалобы и постоянный поиск мастера."],
  ["Салоны красоты", "Мойки, раковины, подводки, смесители, сливы, вода в рабочем процессе.", "Риск: сорванные записи и недовольные клиенты."],
  ["Магазины и ПВЗ", "Санузлы, подсобки, мокрые зоны, протечки и мелкий ремонт.", "Риск: управляющему нужен один подрядчик."],
  ["Апарт-отели", "Санузлы, душевые, раковины, жалобы гостей, срочные выезды.", "Риск: отзывы, переселения и возвраты."],
  ["Локальные сети", "Несколько точек одного владельца: кофейни, салоны, магазины, апартаменты.", "Риск: нужен единый подрядчик по всем адресам."],
];

const plans = [
  {
    name: "Старт",
    price: "14 900 ₽",
    subtitle: "маленький офис, салон, кофейня, ПВЗ",
    features: ["1 плановый осмотр в месяц", "до 5 мокрых зон", "фотоотчёт", "до 30 минут мелких работ", "скидка 5% на допработы"],
    highlight: false,
  },
  {
    name: "База",
    price: "24 900 ₽",
    subtitle: "кафе, магазин, офис с потоком клиентов",
    features: ["1 плановый осмотр в месяц", "до 10 мокрых зон", "до 60 минут мелких работ", "приоритетная обработка заявок", "скидка 10% на допработы"],
    highlight: true,
  },
  {
    name: "Оптима",
    price: "39 900 ₽",
    subtitle: "ресторан, апарт-отель, салон с высокой нагрузкой",
    features: ["2 плановых осмотра в месяц", "до 15 мокрых зон", "до 120 минут мелких работ", "расширенный фотоотчёт", "скидка 15% на допработы"],
    highlight: false,
  },
  {
    name: "Сеть",
    price: "от 69 900 ₽",
    subtitle: "3–5 объектов одного владельца",
    features: ["осмотр каждой точки", "единый журнал заявок", "единый контакт", "приоритетная маршрутизация", "отчёт по всем объектам"],
    highlight: false,
  },
];

const prices = [
  ["Диагностика / выезд", "от 2 000 ₽"],
  ["Срочный выезд", "от 4 500 ₽"],
  ["Устранение простой течи", "от 2 500 ₽"],
  ["Прочистка простого засора", "от 2 500 ₽"],
  ["Прочистка тросом", "от 4 000 ₽"],
  ["Замена смесителя", "от 2 500 ₽"],
  ["Замена сифона", "от 1 800 ₽"],
  ["Замена гибкой подводки", "от 1 500 ₽"],
  ["Ремонт бачка унитаза", "от 2 500 ₽"],
  ["Установка унитаза", "от 4 500 ₽"],
  ["Монтаж точки водоснабжения", "от 3 500 ₽"],
  ["Ночь / выходной", "+50–100%"],
];

const faqs = [
  [
    "У нас уже есть мастер от УК. Зачем вы?",
    "УК обслуживает здание в целом. Мы обслуживаем вашу точку: мойки, сифоны, смесители, подводки, санузлы, засоры, мелкие протечки и профилактику внутри объекта.",
  ],
  [
    "Можно просто вызвать мастера с Авито. Зачем переплачивать?",
    "Можно. Но для бизнеса важна не только цена, а предсказуемость: единый контакт, фотоотчёт, акт, история объекта, гарантия и приоритет.",
  ],
  [
    "Абонентка означает, что все работы бесплатны?",
    "Нет. В абонентку входят осмотры, диагностика, мелкие работы в пределах лимита, фотоотчёт и приоритет. Материалы, замены и сложные работы оплачиваются отдельно.",
  ],
  [
    "Работаете ночью?",
    "Ночные и выходные выезды возможны по отдельному тарифу или в рамках индивидуального SLA-пакета.",
  ],
];

function Button({ children, variant = "primary" }) {
  const base = "inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-semibold transition-all";
  if (variant === "outline") {
    return <button className={`${base} border border-[#1F4E5F] text-[#1F4E5F] hover:bg-[#1F4E5F] hover:text-white`}>{children}</button>;
  }
  return <button className={`${base} bg-[#1F4E5F] text-white shadow-sm hover:translate-y-[-1px] hover:shadow-md`}>{children}</button>;
}

function SectionTitle({ eyebrow, title, text }) {
  return (
    <div className="mx-auto mb-10 max-w-3xl text-center">
      {eyebrow && <div className="mb-3 text-xs font-bold uppercase tracking-[0.22em] text-[#B59A6A]">{eyebrow}</div>}
      <h2 className="text-3xl font-bold tracking-tight text-[#1E2427] md:text-4xl">{title}</h2>
      {text && <p className="mt-4 text-base leading-7 text-[#6B7073]">{text}</p>}
    </div>
  );
}

export default function UKSantServiceLanding() {
  return (
    <main className="min-h-screen bg-[#F6F4EF] text-[#1E2427]">
      {/* Header */}
      <header className="sticky top-0 z-40 border-b border-[#E1DDD4]/80 bg-[#F6F4EF]/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 md:px-8">
          
            <div className="text-lg font-extrabold tracking-tight">УК СантСервис</div>
            <div className="text-xs uppercase tracking-[0.18em] text-[#6B7073]">обслуживание объектов</div>
          </div>
          <nav className="hidden gap-7 text-sm font-medium text-[#455054] lg:flex">
            <a href="#services" className="hover:text-[#1F4E5F]">Услуги</a>
            <a href="#plans" className="hover:text-[#1F4E5F]">Абонентка</a>
            <a href="#audience" className="hover:text-[#1F4E5F]">Для кого</a>
            <a href="#prices" className="hover:text-[#1F4E5F]">Цены</a>
            <a href="#faq" className="hover:text-[#1F4E5F]">FAQ</a>
            <a href="#contacts" className="hover:text-[#1F4E5F]">Контакты</a>
          </nav>
          Оставить заявку</Button>
        </div>
      </header>

      {/* Hero */}
      <section className="relative overflow-hidden">
        <div className="absolute right-[-180px] top-[-220px] h-[520px] w-[520px] rounded-full bg-[#1F4E5F]/10" />
        <div className="absolute bottom-[-260px] left-[-180px] h-[520px] w-[520px] rounded-full bg-[#B59A6A]/15" />
        <div className="mx-auto grid max-w-7xl gap-12 px-5 py-20 md:px-8 lg:grid-cols-[1.05fr_0.95fr] lg:py-28">
          <div className="relative z-10">
            <div className="mb-5 inline-flex items-center rounded-full border border-[#E1DDD4] bg-white/70 px-4 py-2 text-sm text-[#6B7073]">
              Для кафе, офисов, салонов, магазинов и апарт-отелей
            </div>
            <h1 className="max-w-3xl text-4xl font-extrabold leading-[1.05] tracking-tight md:text-6xl">
              Сантехническое обслуживание объектов в Хабаровске
            </h1>
            <p className="mt-6 max-w-2xl text-lg leading-8 text-[#6B7073] md:text-xl">
              Плановые осмотры, аварийные выезды, мелкий ремонт и абонентское обслуживание для кафе, офисов, магазинов, салонов и апарт-отелей.
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              Рассчитать обслуживание</Button>
              <Button variant="outline">Вызвать мастера</Button>
            </div>
            <div className="mt-8 grid max-w-2xl gap-3 text-sm text-[#455054] sm:grid-cols-2">
              {["Коммерческие объекты", "Фотоотчёты", "Акты", "Абонентка"].map((item) => (
                <div key={item} className="flex items-center rounded-2xl border border-[#E1DDD4] bg-white/70 px-4 py-3">
                  <CheckCircle2 className="mr-2 h-4 w-4 text-[#1F4E5F]" /> {item}
                </div>
              ))}
            </div>
          </div>

          <div className="relative z-10 flex items-center justify-center">
            <div className="w-full max-w-md rounded-[2rem] border border-[#E1DDD4] bg-white p-6 shadow-xl shadow-black/5">
              <div className="mb-6 flex items-center justify-between">
                
                  <div className="text-sm font-semibold text-[#6B7073]">Заявка объекта</div>
                  <div className="text-2xl font-bold">Кафе / офис / салон</div>
                </div>
                <div className="rounded-2xl bg-[#1F4E5F] p-3 text-white">
                  <Building2 className="h-7 w-7" />
                </div>
              </div>
              <div className="space-y-4">
                {[
                  ["01", "Приняли заявку", "адрес, фото, срочность"],
                  ["02", "Назначили мастера", "окно выезда и материалы"],
                  ["03", "Сделали работу", "фото до/после"],
                  ["04", "Передали отчёт", "акт и рекомендации"],
                ].map(([num, title, text]) => (
                  <div key={num} className="flex gap-4 rounded-2xl bg-[#F6F4EF] p-4">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#B59A6A]/20 text-sm font-bold text-[#1F4E5F]">{num}</div>
                    
                      <div className="font-bold">{title}</div>
                      <div className="text-sm text-[#6B7073]">{text}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="mt-6 rounded-2xl border border-[#E1DDD4] p-4 text-sm text-[#6B7073]">
                <span className="font-bold text-[#1E2427]">Планово проверяем. Срочно реагируем. Отчитываемся по факту.</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* УК block */}
      <section className="px-5 py-16 md:px-8">
        <div className="mx-auto max-w-7xl rounded-[2rem] bg-[#1F4E5F] p-8 text-white md:p-12">
          <div className="grid gap-10 lg:grid-cols-[0.9fr_1.1fr]">
            
              <div className="mb-3 text-xs font-bold uppercase tracking-[0.22em] text-[#D4C29A]">Формат работы</div>
              <h2 className="text-3xl font-bold md:text-4xl">Когда мастер УК занят, а объекту нужно работать</h2>
              <p className="mt-5 leading-8 text-white/75">
                У здания может быть управляющая компания и свой мастер. Это нормально. Но мастер здания обычно отвечает за общие инженерные системы и заявки по всему зданию.
              </p>
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              {[
                ["Не вместо УК", "Мы не вмешиваемся в общедомовые системы без согласования."],
                ["Для вашей точки", "Работаем с тем, что влияет на смену, клиентов и выручку."],
                ["С отчётностью", "Фото до/после, акт, рекомендации и история заявок."],
                ["По регламенту", "Заявка, диагностика, согласование цены, работа и отчёт."],
              ].map(([title, text]) => (
                <div key={title} className="rounded-3xl bg-white/10 p-5 ring-1 ring-white/10">
                  <div className="mb-2 font-bold">{title}</div>
                  <div className="text-sm leading-6 text-white/75">{text}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Audience */}
      <section id="audience" className="px-5 py-16 md:px-8">
        <SectionTitle eyebrow="Для кого" title="Обслуживаем коммерческие объекты" text="Подходим объектам, где вода, санузлы и мокрые зоны влияют на работу, клиентов и репутацию." />
        <div className="mx-auto grid max-w-7xl gap-5 md:grid-cols-2 lg:grid-cols-3">
          {audiences.map(([title, text, risk]) => (
            <article key={title} className="rounded-3xl border border-[#E1DDD4] bg-white p-6 shadow-sm shadow-black/5">
              <Building2 className="mb-4 h-7 w-7 text-[#1F4E5F]" />
              <h3 className="text-xl font-bold">{title}</h3>
              <p className="mt-3 text-sm leading-6 text-[#6B7073]">{text}</p>
              <p className="mt-4 rounded-2xl bg-[#F6F4EF] px-4 py-3 text-sm font-semibold text-[#1F4E5F]">{risk}</p>
            </article>
          ))}
        </div>
      </section>

      {/* Services */}
      <section id="services" className="px-5 py-16 md:px-8">
        <SectionTitle eyebrow="Услуги" title="Закрываем сантехнические задачи объекта" text="От плановой проверки до срочного выезда. Все работы фиксируем, согласуем и закрываем с отчётом." />
        <div className="mx-auto grid max-w-7xl gap-5 md:grid-cols-2 lg:grid-cols-4">
          {services.map(({ title, text, icon: Icon }) => (
            <div key={title} className="rounded-3xl border border-[#E1DDD4] bg-white p-6">
              <div className="mb-5 inline-flex rounded-2xl bg-[#1F4E5F]/10 p-3 text-[#1F4E5F]">
                <Icon className="h-6 w-6" />
              </div>
              <h3 className="text-xl font-bold">{title}</h3>
              <p className="mt-3 text-sm leading-6 text-[#6B7073]">{text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Plans */}
      <section id="plans" className="px-5 py-16 md:px-8">
        <SectionTitle eyebrow="Абонентка" title="Абонентское обслуживание без лишних обещаний" text="Абонентка — это не бесплатный ремонт всего объекта. Это регулярный контроль, плановые осмотры, приоритетные заявки, мелкие работы в пределах лимита и скидка на допработы." />
        <div className="mx-auto grid max-w-7xl gap-5 lg:grid-cols-4">
          {plans.map((plan) => (
            <article key={plan.name} className={`relative rounded-[2rem] border p-6 ${plan.highlight ? "border-[#1F4E5F] bg-[#1F4E5F] text-white shadow-xl shadow-[#1F4E5F]/15" : "border-[#E1DDD4] bg-white"}`}>
              {plan.highlight && <div className="absolute right-5 top-5 rounded-full bg-white/15 px-3 py-1 text-xs font-bold">популярный</div>}
              <h3 className="text-2xl font-bold">{plan.name}</h3>
              <div className={`mt-2 text-sm ${plan.highlight ? "text-white/70" : "text-[#6B7073]"}`}>{plan.subtitle}</div>
              <div className="mt-6 text-3xl font-extrabold">{plan.price}</div>
              <div className={`text-sm ${plan.highlight ? "text-white/70" : "text-[#6B7073]"}`}>/ месяц</div>
              <ul className="mt-6 space-y-3">
                {plan.features.map((f) => (
                  <li key={f} className="flex gap-2 text-sm leading-6">
                    <CheckCircle2 className={`mt-0.5 h-4 w-4 shrink-0 ${plan.highlight ? "text-[#D4C29A]" : "text-[#1F4E5F]"}`} />
                    {f}</span>
                  </li>
                ))}
              </ul>
              <button className={`mt-6 w-full rounded-full px-5 py-3 text-sm font-bold ${plan.highlight ? "bg-white text-[#1F4E5F]" : "bg-[#1F4E5F] text-white"}`}>Выбрать тариф</button>
            </article>
          ))}
        </div>
        <p className="mx-auto mt-5 max-w-5xl text-center text-sm text-[#6B7073]">
          Цены указаны без НДС. Материалы, сложные работы, аварийные ночные выезды и работы сверх лимитов оплачиваются отдельно.
        </p>
      </section>

      {/* Include / paid */}
      <section className="px-5 py-16 md:px-8">
        <SectionTitle title="Абонентка — это контроль и приоритет, а не безлимитный ремонт" />
        <div className="mx-auto grid max-w-5xl overflow-hidden rounded-[2rem] border border-[#E1DDD4] bg-white md:grid-cols-2">
          <div className="p-7">
            <h3 className="mb-5 text-2xl font-bold text-[#1F4E5F]">Входит в абонентку</h3>
            {[
              "Плановый осмотр",
              "Фотоотчёт",
              "Проверка мокрых зон",
              "Мелкая регулировка",
              "Подтяжка соединений",
              "Рекомендации",
              "Журнал объекта",
              "Приоритет заявок",
              "Скидка на работы",
            ].map((x) => (
              <div key={x} className="flex items-center border-b border-[#E1DDD4] py-3 text-sm last:border-0">
                <CheckCircle2 className="mr-3 h-4 w-4 text-[#1F4E5F]" /> {x}
              </div>
            ))}
          </div>
          <div className="border-t border-[#E1DDD4] bg-[#F6F4EF] p-7 md:border-l md:border-t-0">
            <h3 className="mb-5 text-2xl font-bold text-[#B59A6A]">Оплачивается отдельно</h3>
            {[
              "Материалы",
              "Замена смесителя",
              "Замена сифона",
              "Замена подводки",
              "Сложные засоры",
              "Работы тросом",
              "Ночные выезды",
              "Работы с УК / стояками",
              "Работы сверх лимита",
            ].map((x) => (
              <div key={x} className="flex items-center border-b border-[#E1DDD4] py-3 text-sm last:border-0">
                <ArrowRight className="mr-3 h-4 w-4 text-[#B59A6A]" /> {x}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="px-5 py-16 md:px-8">
        <SectionTitle eyebrow="Процесс" title="Понятный путь от заявки до отчёта" />
        <div className="mx-auto grid max-w-7xl gap-5 md:grid-cols-5">
          {[
            ["1", "Принимаем заявку", "Адрес, проблема, срочность, фото."],
            ["2", "Оцениваем", "Авария, плановая работа или зона УК."],
            ["3", "Согласуем", "Стоимость, материалы и сроки."],
            ["4", "Выполняем", "Фото до/после и аккуратная работа."],
            ["5", "Отчитываемся", "Акт, рекомендации, журнал объекта."],
          ].map(([num, title, text]) => (
            <div key={num} className="rounded-3xl border border-[#E1DDD4] bg-white p-5">
              <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-full bg-[#1F4E5F] text-lg font-bold text-white">{num}</div>
              <h3 className="font-bold">{title}</h3>
              <p className="mt-3 text-sm leading-6 text-[#6B7073]">{text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Prices */}
      <section id="prices" className="px-5 py-16 md:px-8">
        <SectionTitle eyebrow="Прайс" title="Примеры цен на разовые и дополнительные работы" text="Точная стоимость зависит от доступа, сложности, материалов и срочности. До начала работ согласуем цену." />
        <div className="mx-auto max-w-4xl overflow-hidden rounded-[2rem] border border-[#E1DDD4] bg-white">
          {prices.map(([work, price], idx) => (
            <div key={work} className={`grid grid-cols-[1fr_auto] gap-4 px-6 py-4 text-sm ${idx !== prices.length - 1 ? "border-b border-[#E1DDD4]" : ""}`}>
              {work}</span>
              <span className="font-bold text-[#1F4E5F]">{price}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Comparison */}
      <section className="px-5 py-16 md:px-8">
        <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-2">
          <div className="rounded-[2rem] border border-[#E1DDD4] bg-white p-8">
            <h2 className="text-3xl font-bold">Мы не самый дешёвый мастер. Мы сервис для бизнеса</h2>
            <p className="mt-4 leading-7 text-[#6B7073]">Авито подходит, когда нужна разовая бытовая работа. Для коммерческого объекта важнее предсказуемость: единый контакт, фотоотчёт, акт, история объекта и приоритет.</p>
            <div className="mt-6 grid gap-3 sm:grid-cols-2">
              {[
                ["Частный мастер", "Один человек, нет истории объекта, как договоритесь."],
                ["УК СантСервис", "Сервисная модель, журнал обслуживания, акт и фотоотчёт."],
              ].map(([title, text]) => (
                <div key={title} className="rounded-2xl bg-[#F6F4EF] p-5">
                  <div className="font-bold">{title}</div>
                  <div className="mt-2 text-sm leading-6 text-[#6B7073]">{text}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="rounded-[2rem] border border-[#E1DDD4] bg-[#1F4E5F] p-8 text-white">
            <h2 className="text-3xl font-bold">УК обслуживает здание. Мы обслуживаем вашу точку</h2>
            <p className="mt-4 leading-7 text-white/75">Мы не заменяем управляющую компанию и не вмешиваемся в общедомовые системы без согласования. Наша зона — сантехнические задачи внутри вашего объекта.</p>
            <div className="mt-6 rounded-3xl bg-white/10 p-6 text-lg font-semibold leading-8">
              Если проблема относится к зданию — фиксируем и помогаем передать в УК.<br />Если проблема внутри вашей зоны — закрываем быстро и по регламенту.
            </div>
          </div>
        </div>
      </section>

      {/* Initial inspection */}
      <section className="px-5 py-16 md:px-8">
        <div className="mx-auto max-w-7xl rounded-[2rem] border border-[#E1DDD4] bg-white p-8 md:p-12">
          <div className="grid items-center gap-8 lg:grid-cols-[1fr_auto]">
            
              <div className="mb-3 text-xs font-bold uppercase tracking-[0.22em] text-[#B59A6A]">Первый шаг</div>
              <h2 className="text-3xl font-bold md:text-4xl">Начните с проверки мокрых зон</h2>
              <p className="mt-4 max-w-3xl leading-7 text-[#6B7073]">Перед абоненткой можно провести первичный осмотр объекта: проверить мокрые зоны, найти слабые места, сделать фотоотчёт и дать рекомендации.</p>
              <p className="mt-4 text-sm text-[#6B7073]">Если после осмотра подключаете абонентское обслуживание, стоимость осмотра засчитываем в первый месяц.</p>
            </div>
            <div className="rounded-3xl bg-[#F6F4EF] p-7 text-center">
              <div className="text-sm text-[#6B7073]">Стоимость осмотра</div>
              <div className="mt-2 text-4xl font-extrabold text-[#1F4E5F]">от 5 000 ₽</div>
              <button className="mt-5 rounded-full bg-[#1F4E5F] px-6 py-3 text-sm font-bold text-white">Заказать осмотр</button>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="px-5 py-16 md:px-8">
        <SectionTitle eyebrow="FAQ" title="Частые вопросы" />
        <div className="mx-auto max-w-4xl space-y-4">
          {faqs.map(([q, a]) => (
            <div key={q} className="rounded-3xl border border-[#E1DDD4] bg-white p-6">
              <h3 className="font-bold">{q}</h3>
              <p className="mt-3 leading-7 text-[#6B7073]">{a}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Lead form */}
      <section className="px-5 py-16 md:px-8">
        <div className="mx-auto grid max-w-7xl overflow-hidden rounded-[2rem] bg-[#1F4E5F] lg:grid-cols-[0.95fr_1.05fr]">
          <div className="p-8 text-white md:p-12">
            <h2 className="text-3xl font-bold md:text-4xl">Оставьте заявку на осмотр или обслуживание</h2>
            <p className="mt-4 leading-7 text-white/75">Опишите объект и задачу. Мы свяжемся, уточним детали и предложим формат: разовый выезд, осмотр или абонентское обслуживание.</p>
            <div className="mt-8 space-y-4">
              <div className="flex items-center text-white/80"><Phone className="mr-3 h-5 w-5 text-[#D4C29A]" /> +7 ___ ___-__-__</div>
              <div className="flex items-center text-white/80"><MessageCircle className="mr-3 h-5 w-5 text-[#D4C29A]" /> WhatsApp / Telegram</div>
              <div className="flex items-center text-white/80"><Building2 className="mr-3 h-5 w-5 text-[#D4C29A]" /> Коммерческие объекты Хабаровска</div>
            </div>
          </div>
          <div className="bg-white p-8 md:p-12">
            <div className="grid gap-4 sm:grid-cols-2">
              {["Имя", "Телефон", "Название объекта", "Адрес или район"].map((label) => (
                <label key={label} className="block">
                  <span className="text-xs font-bold uppercase tracking-[0.14em] text-[#6B7073]">{label}</span>
                  <div className="mt-2 rounded-2xl border border-[#E1DDD4] bg-[#F6F4EF] px-4 py-3 text-sm text-[#6B7073]">Введите данные</div>
                </label>
              ))}
              <label className="block sm:col-span-2">
                <span className="text-xs font-bold uppercase tracking-[0.14em] text-[#6B7073]">Что нужно</span>
                <div className="mt-2 rounded-2xl border border-[#E1DDD4] bg-[#F6F4EF] px-4 py-3 text-sm text-[#6B7073]">Осмотр / абонентка / срочный выезд / допработы</div>
              </label>
              <label className="block sm:col-span-2">
                <span className="text-xs font-bold uppercase tracking-[0.14em] text-[#6B7073]">Комментарий</span>
                <div className="mt-2 h-28 rounded-2xl border border-[#E1DDD4] bg-[#F6F4EF] px-4 py-3 text-sm text-[#6B7073]">Кратко опишите задачу</div>
              </label>
            </div>
            <button className="mt-5 w-full rounded-full bg-[#1F4E5F] px-6 py-4 text-sm font-bold text-white">Отправить заявку</button>
            <p className="mt-4 text-xs leading-5 text-[#6B7073]">Нажимая кнопку, вы соглашаетесь с обработкой персональных данных.</p>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer id="contacts" className="border-t border-[#E1DDD4] px-5 py-10 md:px-8">
        <div className="mx-auto flex max-w-7xl flex-col gap-6 md:flex-row md:items-center md:justify-between">
          
            <div className="text-2xl font-extrabold">УК СантСервис</div>
            <p className="mt-2 text-sm text-[#6B7073]">Сантехническое обслуживание коммерческих объектов в Хабаровске.</p>
          </div>
          <div className="flex flex-col gap-3 text-sm text-[#6B7073] md:items-end">
            Телефон: +7 ___ ___-__-__</div>
            Почта: info@__________</div>
            Работаем по Хабаровску по заявкам и договору</div>
          </div>
        </div>
      </footer>
    </main>
  );
}