'use client';

import { FiArrowRight, FiCheckCircle } from 'react-icons/fi';

const CHIPS = ['Технический SEO', 'Core Web Vitals', 'Schema.org', 'AI-рекомендации'];

export function Hero() {
  return (
    <section className="relative overflow-hidden">
      <div aria-hidden className="hero-bg">
        <div className="hero-orb hero-orb-1" />
        <div className="hero-orb hero-orb-2" />
        <div className="hero-orb hero-orb-3" />
        <div className="hero-grid" />
      </div>

      <div className="relative mx-auto grid max-w-7xl gap-16 px-4 pb-24 pt-20 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8 lg:pt-28">
        <div>
          <span className="inline-flex items-center gap-2 rounded-full border border-brand-200/70 bg-white/70 px-4 py-1.5 text-xs font-semibold text-brand-600 shadow-sm shadow-shadow-500 backdrop-blur-sm">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-500" />
            </span>
            Новое поколение SEO-аудита
          </span>

          <h1 className="mt-6 text-4xl font-bold leading-[1.08] tracking-tight text-navy-900 sm:text-5xl lg:text-[3.4rem]">
            Полный SEO-аудит сайта{' '}
            <span className="bg-gradient-to-r from-brand-600 via-brand-500 to-cyan-500 bg-clip-text text-transparent">
              за пару минут
            </span>
          </h1>

          <p className="mt-6 max-w-xl text-lg leading-8 text-gray-600">
            SEO Auditor сканирует сайт, находит технические ошибки, оценивает
            качество оптимизации и даёт понятные AI-рекомендации — вместо
            десятка разрозненных инструментов.
          </p>

          <div className="mt-8 flex flex-col gap-4 sm:flex-row">
            <div className="flex flex-1 items-center gap-2 rounded-full border border-gray-100 bg-white p-1.5 shadow-lg shadow-shadow-500 ring-1 ring-black/[0.02] sm:max-w-md">
              <input
                type="text"
                placeholder="Введите адрес сайта"
                className="h-12 w-full rounded-full bg-transparent px-4 text-sm text-navy-700 outline-none placeholder:text-gray-400"
              />
              <button className="flex h-12 shrink-0 items-center gap-2 rounded-full bg-navy-900 px-6 text-sm font-semibold text-white transition-all hover:-translate-y-0.5 hover:bg-brand-600 hover:shadow-lg hover:shadow-brand-500/30">
                Проверить
                <FiArrowRight className="h-4 w-4" />
              </button>
            </div>
          </div>

          <p className="mt-3 text-xs text-gray-500">
            Бесплатная проверка · без банковской карты · результат за 2 минуты
          </p>

          <div className="mt-10 flex flex-wrap gap-x-6 gap-y-3">
            {CHIPS.map((chip) => (
              <div key={chip} className="flex items-center gap-2 text-sm text-gray-600">
                <FiCheckCircle className="h-4 w-4 text-brand-500" />
                {chip}
              </div>
            ))}
          </div>
        </div>

        <div className="relative">
          <div className="relative rounded-[28px] border border-gray-100 bg-white/90 p-6 shadow-2xl shadow-shadow-500 backdrop-blur-xl">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs font-medium uppercase tracking-wide text-gray-400">
                  mediaten.ru
                </p>
                <p className="text-sm font-semibold text-navy-900">
                  Отчёт аудита · сегодня
                </p>
              </div>
              <span className="rounded-full bg-green-50 px-3 py-1 text-xs font-semibold text-green-600">
                +12 за неделю
              </span>
            </div>

            <div className="mt-6 flex items-center gap-6">
              <div className="relative flex h-28 w-28 shrink-0 items-center justify-center rounded-full bg-[conic-gradient(var(--color-brand-500)_0%_87%,theme(colors.gray.100)_87%_100%)]">
                <div className="flex h-20 w-20 flex-col items-center justify-center rounded-full bg-white shadow-inner">
                  <span className="text-2xl font-bold text-navy-900">87</span>
                  <span className="text-[10px] text-gray-400">SEO Score</span>
                </div>
              </div>

              <div className="flex-1 space-y-3">
                {[
                  { label: 'Ошибки', value: 4, color: 'bg-red-500' },
                  { label: 'Предупреждения', value: 11, color: 'bg-yellow-400' },
                  { label: 'Пройдено проверок', value: 62, color: 'bg-green-500' },
                ].map((row) => (
                  <div key={row.label} className="flex items-center justify-between text-sm">
                    <span className="flex items-center gap-2 text-gray-600">
                      <span className={`h-2 w-2 rounded-full ${row.color}`} />
                      {row.label}
                    </span>
                    <span className="font-semibold text-navy-900">{row.value}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="mt-6 grid grid-cols-3 gap-3 border-t border-gray-100 pt-5">
              {[
                { label: 'Core Web Vitals', value: 'Хорошо' },
                { label: 'Индексация', value: '312 стр.' },
                { label: 'Schema.org', value: '18 типов' },
              ].map((item) => (
                <div key={item.label} className="rounded-2xl bg-lightPrimary p-3">
                  <p className="text-[11px] text-gray-500">{item.label}</p>
                  <p className="mt-1 text-sm font-semibold text-navy-900">
                    {item.value}
                  </p>
                </div>
              ))}
            </div>
          </div>

          <div className="absolute -bottom-6 -left-6 hidden rounded-2xl border border-gray-100 bg-white px-4 py-3 shadow-xl shadow-shadow-500 sm:block">
            <p className="text-xs text-gray-400">AI-рекомендация</p>
            <p className="max-w-[220px] text-sm font-medium text-navy-900">
              Добавьте alt-теги на 14 изображений — рост Score +3
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}