/* global React, LeadForm, LF_Icon, LF_ICONS */
const Icon = window.LF_Icon;
const I = window.LF_ICONS;

function ClassicHeader() {
  return (
    <header className="bg-white border-b border-slate-100 sticky top-0 z-30 backdrop-blur-md bg-white/95">
      <div className="max-w-[1200px] mx-auto px-6 lg:px-10 h-[72px] flex items-center justify-between">
        <div className="flex items-center gap-2">
          <img src="assets/favicon.svg" alt="StroyHub Logo" className="w-8 h-8 md:w-10 md:h-10" />
          <span className="text-lg md:text-xl font-bold text-[#11274e]">StroyMaster</span>
        </div>
        <div className="hidden sm:flex items-center gap-5">
          <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-50 border border-emerald-100">
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
              <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
            </span>
            <span className="text-[12.5px] font-semibold text-emerald-700">Принимаем заявки сейчас</span>
          </div>
          <a href="tel:+77001234567" className="flex items-center gap-2 font-bold text-[#11274e] hover:text-[#1a3669]">
            <Icon d={I.phone} size={18} />
            <span className="text-[15px] tabular-nums">+7 (701) 941-51-65</span>
          </a>
        </div>
      </div>
    </header>
  );
}

function GuaranteePill() {
  return (
    <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-[#11274e]/[0.06] border border-[#11274e]/10">
      <Icon d={I.clock} size={15} className="text-[#11274e]" />
      <span className="text-[12.5px] font-semibold text-[#11274e] tracking-tight">Гарантия: перезвоним за 15 минут</span>
    </div>
  );
}

function ClassicHero() {
  return (
    <section className="relative overflow-hidden h-full">
      {/* subtle background tooling sketch */}
      <div className="absolute inset-0 pointer-events-none opacity-[0.04]" aria-hidden>
        <svg width="100%" height="100%">
          <defs>
            <pattern id="grid-cls" width="32" height="32" patternUnits="userSpaceOnUse">
              <path d="M32 0H0V32" fill="none" stroke="#11274e" strokeWidth="1" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid-cls)" />
        </svg>
      </div>

      <div className="relative max-w-[1200px] mx-auto px-6 lg:px-10 h-full grid lg:grid-cols-[1.05fr_1fr] gap-10 lg:gap-14 items-center py-8 lg:py-0">
        <div>
          <GuaranteePill />
          <h1 className="mt-5 font-black text-[#11274e] text-[40px] sm:text-[48px] lg:text-[56px] leading-[1.02] tracking-[-0.02em]" style={{ textWrap: 'balance' }}>
            Сантехник и электрик
            <br />
            <span className="relative inline-block">
              <span className="relative z-10">приедут сегодня</span>
              <span className="absolute left-0 right-0 bottom-1 h-3 bg-[#fdbe11]/60 -z-0" />
            </span>
            <br />
            <span className="text-slate-500 font-bold">— по Астане.</span>
          </h1>

          <ul className="mt-6 space-y-3 max-w-[480px]">
            {[
              ['Фиксированная цена', 'Озвучиваем до выезда — на месте не дорожает'],
              ['Проверенные мастера со стажем', 'Только опытные специалисты с подтверждёнными квалификациями'],
              ['Аварийный выезд', 'Устраняем срочные поломки без ожидания — работаем 24/7'],
            ].map(([t, s]) => (
              <li key={t} className="flex items-start gap-3">
                <span className="mt-0.5 w-6 h-6 rounded-full bg-[#fdbe11] flex items-center justify-center flex-shrink-0">
                  <Icon d={I.check} size={14} stroke="#11274e" />
                </span>
                <div>
                  <div className="font-semibold text-[#11274e] text-[15px]">{t}</div>
                  <div className="text-[13.5px] text-slate-500 leading-snug">{s}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>

        {/* Form */}
        <div className="relative">
          <div className="absolute -top-3 -right-3 w-24 h-24 rounded-full bg-[#fdbe11]/20 blur-2xl pointer-events-none" aria-hidden />
          <LeadForm
            title="Заявка на сантехника или электрика"
            subtitle="Опишите задачу — пришлём цену и согласуем выезд"
            accent="yellow"
          />
        </div>
      </div>
    </section>
  );
}

function ClassicStats() {
  const items = [
    ['8 лет', 'на рынке Астаны'],
    ['1 240+', 'выполненных заявок в 2025'],
    ['47', 'аттестованных мастеров'],
    ['12 мес', 'гарантия на каждую работу'],
  ];
  return (
    <section className="bg-[#11274e]">
      <div className="max-w-[1200px] mx-auto px-6 lg:px-10 py-12">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-10">
          {items.map(([n, l]) => (
            <div key={n} className="text-center lg:text-left">
              <div className="text-[#fdbe11] font-black text-[36px] lg:text-[44px] leading-none tracking-tight tabular-nums">{n}</div>
              <div className="text-white/60 text-[13.5px] mt-2 leading-snug">{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClassicServices() {
  const services = [
    {
      kind: 'Сантехника',
      icon: I.drop,
      color: '#0EA5E9',
      items: [
        ['Установка смесителей и моек', 'от 6 000 ₸'],
        ['Замена унитаза', 'от 12 000 ₸'],
        ['Подключение стиральной/посудомоечной', 'от 10 000 ₸'],
        ['Замена стояка / разводка труб', 'от 25 000 ₸'],
        ['Устранение засора', 'от 8 000 ₸'],
        ['Аварийный выезд', 'от 15 000 ₸'],
      ],
    },
    {
      kind: 'Электрика',
      icon: I.bolt,
      color: '#fdbe11',
      items: [
        ['Установка розеток и выключателей', 'от 2 500 ₸'],
        ['Замена автомата в щитке', 'от 4 000 ₸'],
        ['Монтаж люстры / светильника', 'от 5 000 ₸'],
        ['Прокладка кабеля под штробу', 'от 1 200 ₸/м'],
        ['Сборка щитка под ключ', 'от 35 000 ₸'],
        ['Поиск и устранение КЗ', 'от 10 000 ₸'],
      ],
    },
  ];
  return (
    <section className="bg-[#fafaf7] py-20">
      <div className="max-w-[1200px] mx-auto px-6 lg:px-10">
        <div className="max-w-[640px] mb-12">
          <div className="text-[12.5px] font-semibold uppercase tracking-[0.16em] text-[#fdbe11] mb-3">Что мы делаем</div>
          <h2 className="font-black text-[#11274e] text-[34px] lg:text-[42px] leading-[1.05] tracking-tight">
            Две сферы. Один номер. Один договор.
          </h2>
          <p className="mt-4 text-[16px] text-slate-600 leading-relaxed">
            Сантехника и электрика — самые «срочные» задачи в доме. Поэтому мы держим
            обе бригады в одной точке и быстро отправляем мастера в любой район Астаны.
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-6">
          {services.map((s) => (
            <div key={s.kind} className="bg-white rounded-2xl border border-slate-200/80 p-7 hover:shadow-[0_30px_60px_-30px_rgba(17,39,78,0.3)] transition">
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: s.color + '20', color: s.color }}>
                  <Icon d={s.icon} size={24} stroke={s.color} />
                </div>
                <h3 className="font-bold text-[24px] text-[#11274e] tracking-tight">{s.kind}</h3>
              </div>
              <ul className="divide-y divide-slate-100">
                {s.items.map(([n, p]) => (
                  <li key={n} className="flex items-center justify-between py-3">
                    <span className="text-[14.5px] text-slate-700">{n}</span>
                    <span className="font-bold text-[#11274e] text-[14px] tabular-nums whitespace-nowrap ml-4">{p}</span>
                  </li>
                ))}
              </ul>
              <div className="mt-5 text-[12.5px] text-slate-400">
                Окончательная цена — после диагностики на месте. Без скрытых платежей.
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClassicSteps() {
  const steps = [
    ['Заявка', 'Заполняете форму или звоните — это занимает 1 минуту'],
    ['Звонок за 15 минут', 'Менеджер уточняет детали и согласовывает время'],
    ['Выезд и смета', 'Мастер приезжает, диагностирует, озвучивает фикс-цену'],
    ['Работа и гарантия', 'Делаем, сдаём, выдаём чек и гарантийный талон'],
  ];
  return (
    <section className="bg-white py-20">
      <div className="max-w-[1200px] mx-auto px-6 lg:px-10">
        <div className="flex items-end justify-between flex-wrap gap-6 mb-12">
          <div className="max-w-[640px]">
            <div className="text-[12.5px] font-semibold uppercase tracking-[0.16em] text-[#fdbe11] mb-3">Как мы работаем</div>
            <h2 className="font-black text-[#11274e] text-[34px] lg:text-[42px] leading-[1.05] tracking-tight">
              От заявки до подписи акта — в среднем 1 день
            </h2>
          </div>
          <GuaranteePill />
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {steps.map(([t, s], i) => (
            <div key={t} className="relative bg-[#fafaf7] rounded-2xl p-6 border border-slate-200/60">
              <div className="text-[60px] font-black text-[#fdbe11]/30 leading-none tabular-nums">
                0{i + 1}
              </div>
              <h3 className="mt-3 font-bold text-[#11274e] text-[19px]">{t}</h3>
              <p className="mt-2 text-[13.5px] text-slate-600 leading-relaxed">{s}</p>
              {i < steps.length - 1 && (
                <div className="hidden lg:block absolute top-1/2 -right-3 w-6 h-px bg-slate-300" />
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClassicReviews() {
  const reviews = [
    {
      name: 'Айгерим К.',
      role: 'ЖК Sandi Qala',
      text: 'Поменяли всю проводку в трёшке. Уложились в смету, мусор увезли, всё аккуратно. Из плюсов — менеджер реально перезвонил в обещанный час.',
      rating: 5,
    },
    {
      name: 'Данияр Ш.',
      role: 'Левый берег',
      text: 'Вызывал в субботу вечером — потёк смеситель. Через 40 минут мастер был у двери. 8 000 ₸ как и сказали по телефону.',
      rating: 5,
    },
    {
      name: 'Елена П.',
      role: 'Жк Greenline',
      text: 'Заказывала установку люстры и доп. розетки в детскую. Чисто, никакой пыли, договор на руки. Отдельно — спасибо за бахилы.',
      rating: 5,
    },
  ];
  return (
    <section className="bg-[#fafaf7] py-20">
      <div className="max-w-[1200px] mx-auto px-6 lg:px-10">
        <div className="max-w-[640px] mb-10">
          <div className="text-[12.5px] font-semibold uppercase tracking-[0.16em] text-[#fdbe11] mb-3">Отзывы клиентов</div>
          <h2 className="font-black text-[#11274e] text-[34px] lg:text-[42px] leading-[1.05] tracking-tight">
            312 отзывов в 2gis, средняя оценка 4.9
          </h2>
        </div>
        <div className="grid md:grid-cols-3 gap-5">
          {reviews.map((r) => (
            <figure key={r.name} className="bg-white rounded-2xl p-6 border border-slate-200/80">
              <div className="flex gap-0.5 mb-3">
                {Array.from({ length: r.rating }).map((_, i) => (
                  <Icon key={i} d={I.star} size={15} stroke="#fdbe11" className="fill-[#fdbe11]" />
                ))}
              </div>
              <blockquote className="text-[14.5px] text-slate-700 leading-relaxed">
                «{r.text}»
              </blockquote>
              <figcaption className="mt-4 pt-4 border-t border-slate-100 flex items-center gap-3">
                <div className="w-9 h-9 rounded-full bg-[#11274e] text-[#fdbe11] flex items-center justify-center font-bold text-[14px]">
                  {r.name[0]}
                </div>
                <div>
                  <div className="font-bold text-[#11274e] text-[13.5px]">{r.name}</div>
                  <div className="text-[12px] text-slate-400">{r.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClassicFAQ() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    ['Сколько стоит выезд мастера?', 'Выезд по Астане — бесплатно, если согласуетесь на работы. Если только диагностика — 3 000 ₸, при заказе работ сумма вычитается из счёта.'],
    ['Работаете в выходные и ночью?', 'Да. Аварийная служба — круглосуточно. Заявки 24/7, ночной тариф +30% от прайса.'],
    ['Что с гарантией?', 'На все работы — 12 месяцев. На замену оборудования — гарантия производителя. Гарантийные случаи закрываем за 24 часа.'],
    ['Какие районы Астаны охватываете?', 'Весь город — Есиль, Алматинский, Сарыарка, Байконыр. В пригород выезжаем при заказе от 20 000 ₸.'],
    ['Можно безналично и в рассрочку?', 'Да. Картой, переводом, наличными. Для крупных работ (от 100 000 ₸) — рассрочка 0% на 3 месяца через Kaspi.'],
  ];
  return (
    <section className="bg-white py-20">
      <div className="max-w-[820px] mx-auto px-6 lg:px-10">
        <div className="text-center mb-12">
          <div className="text-[12.5px] font-semibold uppercase tracking-[0.16em] text-[#fdbe11] mb-3">Частые вопросы</div>
          <h2 className="font-black text-[#11274e] text-[34px] lg:text-[42px] leading-[1.05] tracking-tight">
            Коротко — о деньгах, гарантии и сроках
          </h2>
        </div>
        <div className="divide-y divide-slate-200">
          {faqs.map(([q, a], i) => {
            const active = open === i;
            return (
              <button
                key={q}
                type="button"
                onClick={() => setOpen(active ? -1 : i)}
                className="w-full text-left py-5 group"
              >
                <div className="flex items-start gap-4">
                  <div className={`mt-0.5 w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 transition ${active ? 'bg-[#fdbe11] text-[#11274e] rotate-45' : 'bg-slate-100 text-slate-500'}`}>
                    <span className="text-[18px] font-black leading-none">+</span>
                  </div>
                  <div className="flex-1">
                    <div className="font-bold text-[#11274e] text-[16.5px] leading-snug">{q}</div>
                    <div className={`overflow-hidden transition-all ${active ? 'max-h-40 mt-2 opacity-100' : 'max-h-0 opacity-0'}`}>
                      <p className="text-[14.5px] text-slate-600 leading-relaxed pr-6">{a}</p>
                    </div>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ClassicFinalCTA() {
  return (
    <section className="bg-[#11274e] py-20 relative overflow-hidden">
      <div className="absolute -top-20 -right-20 w-80 h-80 rounded-full bg-[#fdbe11]/10 blur-3xl pointer-events-none" aria-hidden />
      <div className="absolute -bottom-32 -left-20 w-96 h-96 rounded-full bg-[#fdbe11]/5 blur-3xl pointer-events-none" aria-hidden />
      <div className="relative max-w-[1200px] mx-auto px-6 lg:px-10 grid lg:grid-cols-[1fr_1fr] gap-12 items-center">
        <div>
          <h2 className="font-black text-white text-[36px] lg:text-[48px] leading-[1.05] tracking-tight" style={{ textWrap: 'balance' }}>
            Оставьте заявку — пока другие думают, мастер уже едет.
          </h2>
          <p className="mt-5 text-[16px] text-white/60 leading-relaxed max-w-[480px]">
            Менеджер перезвонит в течение 15 минут, согласует время выезда и сразу сориентирует
            по стоимости.
          </p>
          <div className="mt-8 flex items-center gap-4">
            <div className="w-12 h-12 rounded-xl bg-[#fdbe11]/15 flex items-center justify-center">
              <Icon d={I.phone} size={20} stroke="#fdbe11" />
            </div>
            <div>
              <div className="text-[12px] uppercase tracking-[0.16em] text-white/40">Или позвоните</div>
              <a href="tel:+77001234567" className="text-[#fdbe11] font-bold text-[22px] tabular-nums hover:underline">+7 (700) 123-45-67</a>
            </div>
          </div>
        </div>
        <div>
          <LeadForm
            dark
            accent="yellow"
            title="Получите расчёт"
            subtitle="Без обязательств. Без спама."
          />
        </div>
      </div>
    </section>
  );
}

function ClassicFooter() {
  return (
    <footer className="bg-[#0a1830] text-white/50 py-8">
      <div className="max-w-[1200px] mx-auto px-6 lg:px-10 flex flex-wrap items-center justify-between gap-4 text-[12.5px]">
        <div>© StroyMaster, 2026. ТОО «StroyMaster KZ», БИН 220140012345</div>
        <div className="flex gap-5">
          <a href="#" onClick={(e) => e.preventDefault()} className="hover:text-white">Договор оферты</a>
          <a href="#" onClick={(e) => e.preventDefault()} className="hover:text-white">Политика ПДн</a>
        </div>
      </div>
    </footer>
  );
}

function ClassicLanding() {
  return (
    <div className="antialiased text-slate-900 lg:h-screen lg:overflow-hidden flex flex-col" style={{ fontFamily: '"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif' }}>
      <ClassicHeader />
      <div className="flex-1 lg:overflow-hidden bg-[#fafaf7]">
        <ClassicHero />
      </div>
      <ClassicFooter />
    </div>
  );
}

window.ClassicLanding = ClassicLanding;