/* ============== Hero Section with rotating offers ============== */

const OFFERS = [
  {
    focus: 'Экспертность',
    h1Pre: 'Получайте в',
    h1Big: '3 раза',
    h1Post: 'больше целевых заявок с Авито уже через 14 дней',
    h2: 'С помощью стратегий экс-сотрудника Авито и внедрения ИИ-продавцов 24/7',
    accent: 'expert',
  },
  {
    focus: 'Окупаемость',
    h1Pre: 'Снизьте стоимость лида на Авито до',
    h1Big: '50%',
    h1Post: 'за счёт системного управления трафиком',
    h2: 'Уникальные технологии обхода блокировок — с гарантией по договору',
    accent: 'roi',
  },
  {
    focus: 'Масштаб',
    h1Pre: 'Захватите до',
    h1Big: '50%',
    h1Post: 'поисковой выдачи в вашей нише на Авито под ключ',
    h2: 'От аналитики и дизайна до автоматизации масспостинга — без риска бана',
    accent: 'scale',
  },
];

function Hero() {
  const [idx, setIdx] = useState(0);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx(i => (i + 1) % OFFERS.length), 6000);
    return () => clearInterval(t);
  }, [paused]);

  return (
    <section id="top" className="hero" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="hero__grain" aria-hidden></div>

      <div className="wrap hero__wrap">
        {/* Top mini bar */}
        <div className="hero__top">
          <div className="chip"><span className="dot-red"></span> Агентство «Формула Клиентов»</div>
          <div className="hero__top-right">
            <span className="hero__tag">★ Партнёр Авито с 2020</span>
            <span className="hero__tag">Группа ИндигоМ</span>
          </div>
        </div>

        {/* Offer tabs */}
        <div className="hero__tabs">
          {OFFERS.map((o, i) => (
            <button key={i} className={`hero__tab ${i === idx ? 'active' : ''}`} onClick={() => setIdx(i)}>
              <span className="hero__tab-num">0{i+1}</span>
              <span className="hero__tab-label">{o.focus}</span>
              {i === idx && !paused && <span className="hero__tab-bar" key={`bar-${idx}`}></span>}
            </button>
          ))}
        </div>

        <div className="hero__content">
          <div className="hero__left">
            <h1 className="hero__h1-stack" style={{margin: 0}}>
              {OFFERS.map((o, i) => (
                <span className={`display hero__h1 ${i === idx ? 'is-active' : ''}`} key={i} aria-hidden={i !== idx}>
                  <span className="hero__h1-pre">{o.h1Pre}</span>{' '}
                  <span className="hero__h1-big">{o.h1Big}</span>{' '}
                  <span className="hero__h1-post">{o.h1Post}</span>
                </span>
              ))}
            </h1>
            <div className="hero__lead-stack">
              {OFFERS.map((o, i) => (
                <p className={`lead hero__lead ${i === idx ? 'is-active' : ''}`} key={i} aria-hidden={i !== idx}>{o.h2}</p>
              ))}
            </div>

            <div className="hero__metrics">
              <div className="hero__metric">
                <div className="hero__metric-num">3–5 дн.</div>
                <div className="hero__metric-cap">первые обращения</div>
              </div>
              <div className="hero__metric-divider"></div>
              <div className="hero__metric">
                <div className="hero__metric-num">×3</div>
                <div className="hero__metric-cap">заявок за 30 дней</div>
              </div>
              <div className="hero__metric-divider"></div>
              <div className="hero__metric">
                <div className="hero__metric-num">−50%</div>
                <div className="hero__metric-cap">стоимости лида</div>
              </div>
            </div>
          </div>

          <div className="hero__right">
            <div className="hero-form-card" id="hero-form">
              <div className="hero-form-card__pill">
                <Icon.Zap /> Бесплатно. Без обязательств.
              </div>
              <div className="hero-form-card__title">
                Получите расчёт окупаемости в вашей нише
              </div>
              <p className="hero-form-card__sub">
                Реальная таблица с цифрами конкурентов — за 24 часа
              </p>
              <LeadForm
                id="hero-lead"
                columns={1}
                small
                fields={[
                  { key: 'name', label: 'Имя', validate: 'name', placeholder: 'Иван', required: true },
                  { key: 'phone', label: 'Телефон', validate: 'phone', placeholder: '+7 (___) ___-__-__', required: true, type: 'tel' },
                  { key: 'niche', label: 'Ваша ниша', placeholder: 'Например, ремонт авто', required: true },
                ]}
                button="Получить расчёт"
              />
              <div className="hero-form-card__guarantee">
                <Icon.Shield /> Принцип искренности: если Авито не подходит — скажем прямо
              </div>
            </div>
          </div>
        </div>

        {/* Bottom: trust strip */}
        <div className="hero__trust">
          <div className="hero__trust-label">Клиенты основателя в Авито:</div>
          <div className="hero__trust-logos">
            {['Сбербанк', 'Ашан', 'Бургер Кинг', 'Fix Price', 'ВкусВилл'].map(l => (
              <span className="hero__trust-logo" key={l}>{l}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Hero styles ---- */
const heroStyles = document.createElement('style');
heroStyles.textContent = `
.hero {
  position: relative;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 85% 10%, rgba(255, 106, 0, 0.20), transparent 60%),
    radial-gradient(900px 500px at 15% 90%, rgba(255, 47, 0, 0.16), transparent 65%);
  z-index: -1;
}
.hero__grain {
  position: absolute; inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity: 0.05;
}
.hero__wrap {
  padding-top: 32px;
  padding-bottom: 80px;
}

/* Top mini bar */
.hero__top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 14px 0 28px;
}
.hero__top .chip { background: rgba(255,255,255,0.08); color: #fff; }
.hero__top-right { display: flex; gap: 18px; }
.hero__tag {
  font-size: 12px; color: rgba(255,255,255,0.55);
  font-weight: 600; letter-spacing: 0.03em;
}

/* Tabs */
.hero__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 36px;
  padding: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
}
.hero__tab {
  position: relative;
  background: transparent; border: none;
  padding: 14px 18px;
  color: rgba(255,255,255,0.55);
  text-align: left;
  border-radius: 12px;
  font-family: inherit;
  transition: background .2s ease, color .2s ease;
  overflow: hidden;
}
.hero__tab:hover { color: rgba(255,255,255,0.85); }
.hero__tab.active {
  background: rgba(255, 47, 0, 0.16);
  color: #fff;
}
.hero__tab-num {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--brand-orange);
  font-weight: 600; letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.hero__tab-label {
  display: block; font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
}
.hero__tab-bar {
  position: absolute; left: 0; bottom: 0; height: 3px;
  background: var(--brand-red);
  animation: tabFill 6s linear forwards;
}
@keyframes tabFill { from { width: 0 } to { width: 100% } }

/* Content */
.hero__content {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1000px) {
  .hero__content { grid-template-columns: 1fr; gap: 32px; }
}

/* Rotating offer stacks — all variants overlap in one grid cell so the
   block is always as tall as the longest offer (no layout shift / no jump). */
.hero__h1-stack { display: grid; }
.hero__h1-stack > .hero__h1 {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.hero__h1-stack > .hero__h1.is-active { opacity: 1; pointer-events: auto; }

.hero__lead-stack { display: grid; margin-top: 24px; max-width: 560px; }
.hero__lead-stack > .hero__lead {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .5s ease;
}
.hero__lead-stack > .hero__lead.is-active { opacity: 1; }

.hero__h1 {
  font-size: clamp(36px, 5.6vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.hero__h1-big {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-size: 1.1em;
  display: inline-block;
  padding: 0 4px;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(10px) }
  to { opacity: 1; transform: translateY(0) }
}
.hero__lead {
  font-size: 19px;
}

/* Metrics strip */
.hero__metrics {
  margin-top: 48px;
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  flex-wrap: wrap;
}
.hero__metric-num {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__metric-cap {
  font-size: 13px; color: rgba(255,255,255,0.6);
  margin-top: 2px; font-weight: 500;
}
.hero__metric-divider {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.16);
}

/* Right: hero form card */
.hero-form-card {
  background: #fff;
  color: var(--ink);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  position: relative;
}
.hero-form-card__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-red); color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.hero-form-card__title {
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.15;
}
.hero-form-card__sub {
  font-size: 14px; color: var(--ink-60); margin: 8px 0 22px;
}
.hero-form-card__guarantee {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-60);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  line-height: 1.35;
}
.hero-form-card__guarantee svg { color: var(--brand-red); flex-shrink: 0; }

/* Trust strip */
.hero__trust {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 32px;
  flex-wrap: wrap;
}
.hero__trust-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.hero__trust-logos {
  display: flex; gap: 36px; flex-wrap: wrap;
}
.hero__trust-logo {
  font-size: 17px; font-weight: 700;
  color: rgba(255,255,255,0.6);
  letter-spacing: -0.01em;
}

@media (max-width: 600px) {
  .hero__tabs { grid-template-columns: 1fr; }
  .hero__top { flex-direction: column; align-items: flex-start; }
}
`;
document.head.appendChild(heroStyles);

Object.assign(window, { Hero });