import { useState } from "react";

export default function ConstructionLandingPage() {
  const [roofArea, setRoofArea] = useState(120);
  const [cleanArea, setCleanArea] = useState(300);
  const [demolitionArea, setDemolitionArea] = useState(80);

  const roofRate = 3200;
  const cleanRate = 8;
  const demolitionRate = 2500;

  const roofTotal = roofArea * roofRate;
  const cleanTotal = cleanArea * cleanRate;
  const demolitionTotal = demolitionArea * demolitionRate;

  const projects = [
    {
      title: "Монтаж крыши под ключ",
      description:
        "Полный монтаж кровли для частного дома: обрешётка, покрытие, аккуратная подгонка и чистая сдача объекта.",
      image:
        "https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=1200&q=80",
      price: "от 3 200 ₽/м²",
    },
    {
      title: "Расчистка участка",
      description:
        "Уборка травы, веток, строительного мусора и полная подготовка территории к дальнейшим работам.",
      image:
        "https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1200&q=80",
      price: "от 8 ₽/м²",
    },
    {
      title: "Снос старого дома",
      description:
        "Демонтаж старых строений, погрузка, вывоз мусора и полная очистка территории после работ.",
      image:
        "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1200&q=80",
      price: "от 2 500 ₽/м²",
    },
    {
      title: "Заливка фундамента",
      description:
        "Подготовка площадки, армирование, заливка и выравнивание фундамента под дом, баню или гараж.",
      image:
        "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1200&q=80",
      price: "по объёму работ",
    },
  ];

  return (
    <div className="min-h-screen bg-neutral-950 text-white">
      <section className="relative flex min-h-[88vh] items-center justify-center overflow-hidden border-b border-white/10">
        <video
          autoPlay
          loop
          muted
          playsInline
          className="absolute inset-0 h-full w-full object-cover opacity-35"
          poster="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1400&q=80"
        >
          <source
            src="https://cdn.coverr.co/videos/coverr-construction-roof-1594/1080p.mp4"
            type="video/mp4"
          />
          <source
            src="https://cdn.coverr.co/videos/coverr-roofing-work-5173/1080p.mp4"
            type="video/mp4"
          />
        </video>

        <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/55 to-neutral-950" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(245,158,11,0.2),transparent_25%),radial-gradient(circle_at_left,rgba(255,255,255,0.08),transparent_25%)]" />

        <div className="relative z-10 mx-auto max-w-7xl px-6 py-20 lg:px-8">
          <div className="max-w-4xl">
            <div className="inline-flex rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-2 text-sm text-amber-300 backdrop-blur">
              Крыши • Фундаменты • Снос • Уборка территории
            </div>

            <h1 className="mt-8 text-5xl font-black leading-[1.05] tracking-tight sm:text-6xl lg:text-7xl">
              Надёжная бригада для
              <span className="block text-amber-400">строительства и уборки под ключ</span>
            </h1>

            <p className="mt-6 max-w-2xl text-lg leading-8 text-neutral-200 sm:text-xl">
              Монтируем крыши, заливаем фундаменты, ставим заборы, расчищаем участки,
              сносим старые дома и вывозим мусор. Работаем быстро, аккуратно и без посредников.
            </p>

            <div className="mt-10 flex flex-col gap-4 sm:flex-row">
              <a
                href="#prices"
                className="rounded-2xl bg-amber-400 px-8 py-4 text-center font-semibold text-neutral-950 shadow-2xl shadow-amber-400/20 transition hover:-translate-y-0.5"
              >
                Рассчитать стоимость
              </a>
              <a
                href="#projects"
                className="rounded-2xl border border-white/15 bg-white/5 px-8 py-4 text-center font-semibold text-white backdrop-blur transition hover:bg-white/10"
              >
                Смотреть примеры работ
              </a>
            </div>

            <div className="mt-12 grid gap-4 sm:grid-cols-3">
              {[
                ["Ниже рынка", "честные цены без лишних накруток"],
                ["Без посредников", "напрямую общаетесь с исполнителями"],
                ["Выезд и расчёт", "посмотрим объект и быстро посчитаем"],
              ].map(([title, text]) => (
                <div
                  key={title}
                  className="rounded-2xl border border-white/10 bg-black/30 p-5 backdrop-blur-md"
                >
                  <div className="text-lg font-semibold">{title}</div>
                  <div className="mt-2 text-sm leading-6 text-neutral-300">{text}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section id="projects" className="mx-auto max-w-7xl px-6 py-24 lg:px-8">
        <div className="max-w-3xl">
          <div className="text-sm uppercase tracking-[0.25em] text-amber-400">Примеры работ</div>
          <h2 className="mt-4 text-4xl font-bold sm:text-5xl">Что мы делаем на объектах</h2>
          <p className="mt-4 text-lg leading-8 text-neutral-300">
            Реальные направления работ, с которыми к нам обращаются чаще всего: крыши, расчистка
            участков, демонтаж и фундаментные работы.
          </p>
        </div>

        <div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
          {projects.map((project) => (
            <div
              key={project.title}
              className="group overflow-hidden rounded-[1.75rem] border border-white/10 bg-white/[0.03] transition hover:-translate-y-1 hover:border-amber-400/40"
            >
              <div className="relative h-64 overflow-hidden">
                <img
                  src={project.image}
                  alt={project.title}
                  className="h-full w-full object-cover transition duration-500 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" />
                <div className="absolute bottom-4 left-4 rounded-full bg-black/60 px-3 py-1 text-sm text-amber-300 backdrop-blur">
                  {project.price}
                </div>
              </div>
              <div className="p-6">
                <h3 className="text-xl font-semibold">{project.title}</h3>
                <p className="mt-3 text-sm leading-7 text-neutral-300">{project.description}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section id="prices" className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
        <div className="mb-10 max-w-3xl">
          <div className="text-sm uppercase tracking-[0.25em] text-amber-400">Калькулятор</div>
          <h2 className="mt-4 text-4xl font-bold sm:text-5xl">Примерная стоимость работ</h2>
          <p className="mt-4 text-lg leading-8 text-neutral-300">
            Передвиньте ползунки, чтобы посчитать стоимость по площади в квадратных метрах.
            Калькулятор считает итоговую цену, а не сложность работ.
          </p>
        </div>

        <div className="grid gap-8 lg:grid-cols-3">
          <div className="rounded-[2rem] border border-white/10 bg-neutral-900 p-8 shadow-2xl">
            <div className="flex items-start justify-between gap-4">
              <div>
                <h3 className="text-2xl font-bold">Монтаж крыши</h3>
                <p className="mt-2 text-sm leading-6 text-neutral-400">
                  Укажите площадь крыши в м², чтобы получить примерную итоговую стоимость монтажа.
                </p>
              </div>
              <div className="rounded-full bg-amber-400/10 px-3 py-1 text-sm text-amber-300">
                {roofRate.toLocaleString("ru-RU")} ₽ / м²
              </div>
            </div>

            <input
              type="range"
              min="20"
              max="600"
              step="10"
              value={roofArea}
              onChange={(e) => setRoofArea(Number(e.target.value))}
              className="mt-8 w-full accent-amber-400"
            />

            <div className="mt-4 flex justify-between text-sm text-neutral-500">
              <span>20 м²</span>
              <span>{roofArea} м²</span>
              <span>600 м²</span>
            </div>

            <div className="mt-8 rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-center">
              <div className="text-sm uppercase tracking-[0.2em] text-neutral-400">Итоговая цена</div>
              <div className="mt-3 text-5xl font-black text-amber-400">
                {roofTotal.toLocaleString("ru-RU")} ₽
              </div>
              <div className="mt-3 text-sm text-neutral-400">
                {roofArea} м² × {roofRate.toLocaleString("ru-RU")} ₽
              </div>
            </div>
          </div>

          <div className="rounded-[2rem] border border-white/10 bg-neutral-900 p-8 shadow-2xl">
            <div className="flex items-start justify-between gap-4">
              <div>
                <h3 className="text-2xl font-bold">Уборка территории</h3>
                <p className="mt-2 text-sm leading-6 text-neutral-400">
                  Укажите площадь участка в м², чтобы получить примерную итоговую стоимость уборки.
                </p>
              </div>
              <div className="rounded-full bg-emerald-500/10 px-3 py-1 text-sm text-emerald-300">
                {cleanRate.toLocaleString("ru-RU")} ₽ / м²
              </div>
            </div>

            <input
              type="range"
              min="50"
              max="5000"
              step="50"
              value={cleanArea}
              onChange={(e) => setCleanArea(Number(e.target.value))}
              className="mt-8 w-full accent-emerald-400"
            />

            <div className="mt-4 flex justify-between text-sm text-neutral-500">
              <span>50 м²</span>
              <span>{cleanArea} м²</span>
              <span>5000 м²</span>
            </div>

            <div className="mt-8 rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-center">
              <div className="text-sm uppercase tracking-[0.2em] text-neutral-400">Итоговая цена</div>
              <div className="mt-3 text-5xl font-black text-emerald-400">
                {cleanTotal.toLocaleString("ru-RU")} ₽
              </div>
              <div className="mt-3 text-sm text-neutral-400">
                {cleanArea} м² × {cleanRate.toLocaleString("ru-RU")} ₽
              </div>
            </div>
          </div>

          <div className="rounded-[2rem] border border-white/10 bg-neutral-900 p-8 shadow-2xl">
            <div className="flex items-start justify-between gap-4">
              <div>
                <h3 className="text-2xl font-bold">Снос дома</h3>
                <p className="mt-2 text-sm leading-6 text-neutral-400">
                  Укажите площадь дома в м², чтобы получить примерную стоимость демонтажа.
                </p>
              </div>
              <div className="rounded-full bg-rose-500/10 px-3 py-1 text-sm text-rose-300">
                {demolitionRate.toLocaleString("ru-RU")} ₽ / м²
              </div>
            </div>

            <input
              type="range"
              min="20"
              max="400"
              step="10"
              value={demolitionArea}
              onChange={(e) => setDemolitionArea(Number(e.target.value))}
              className="mt-8 w-full accent-rose-400"
            />

            <div className="mt-4 flex justify-between text-sm text-neutral-500">
              <span>20 м²</span>
              <span>{demolitionArea} м²</span>
              <span>400 м²</span>
            </div>

            <div className="mt-8 rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-center">
              <div className="text-sm uppercase tracking-[0.2em] text-neutral-400">Итоговая цена</div>
              <div className="mt-3 text-5xl font-black text-rose-400">
                {demolitionTotal.toLocaleString("ru-RU")} ₽
              </div>
              <div className="mt-3 text-sm text-neutral-400">
                {demolitionArea} м² × {demolitionRate.toLocaleString("ru-RU")} ₽
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-24 lg:px-8">
        <div className="grid gap-6 lg:grid-cols-3">
          {[
            {
              title: "Работаем быстро",
              text: "Выезжаем на объект, оцениваем объём и сразу предлагаем понятную стоимость.",
            },
            {
              title: "После себя чисто",
              text: "Собираем мусор, грузим и вывозим всё, чтобы участок оставался аккуратным.",
            },
            {
              title: "Без выходных",
              text: "Берёмся за срочные задачи и подстраиваемся под удобное для клиента время.",
            },
          ].map((item) => (
            <div
              key={item.title}
              className="rounded-[1.75rem] border border-white/10 bg-white/[0.03] p-8"
            >
              <h3 className="text-2xl font-bold">{item.title}</h3>
              <p className="mt-4 leading-7 text-neutral-300">{item.text}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-3xl px-6 pb-24 lg:px-8">
        <div className="rounded-[2rem] border border-white/10 bg-gradient-to-br from-white/[0.05] to-white/[0.02] p-8 shadow-2xl sm:p-10">
          <h3 className="text-3xl font-bold">Оставить заявку</h3>
          <p className="mt-3 max-w-xl text-neutral-300">
            Напишите, что нужно сделать: монтаж крыши, уборка участка, фундамент, демонтаж или вывоз мусора.
          </p>

          <div className="mt-8 space-y-4">
            <input
              type="text"
              placeholder="Ваше имя"
              className="w-full rounded-2xl border border-white/10 bg-neutral-900 px-4 py-4 outline-none placeholder:text-neutral-500 focus:border-amber-400/50"
            />
            <input
              type="tel"
              placeholder="Телефон"
              className="w-full rounded-2xl border border-white/10 bg-neutral-900 px-4 py-4 outline-none placeholder:text-neutral-500 focus:border-amber-400/50"
            />
            <textarea
              placeholder="Коротко опишите задачу"
              rows={5}
              className="w-full rounded-2xl border border-white/10 bg-neutral-900 px-4 py-4 outline-none placeholder:text-neutral-500 focus:border-amber-400/50"
            />
            <button
              type="button"
              className="w-full rounded-2xl bg-amber-400 p-4 font-semibold text-neutral-950 transition hover:-translate-y-0.5"
            >
              Отправить заявку
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}