// variant-kinetic.jsx — Direction B · Kinetic Studio
// More marquee, more movement, larger case carousel, light intermission.
// Same DNA (Onest, graphite + blue), but a different rhythm.

const { useState: vbState, useEffect: vbEffect, useRef: vbRef } = React;

function VariantKinetic({ heroTitle }) {
  const rootRef = vbRef(null);
  const m = useIsMobile();
  const HERO = heroTitle || 'не агентство — команда';

  const navItems = [
  { icon: 'Home', label: 'Главная', active: true, onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }) },
  { icon: 'Search', label: 'Услуги', onClick: () => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' }) },
  { icon: 'Plus', label: 'Заявка', variant: 'add', onClick: () => document.getElementById('dm')?.scrollIntoView({ behavior: 'smooth' }) },
  { icon: 'Reels', label: 'Кейсы', onClick: () => document.getElementById('cases')?.scrollIntoView({ behavior: 'smooth' }) },
  { icon: 'User', label: 'Клиенты', onClick: () => document.getElementById('clients')?.scrollIntoView({ behavior: 'smooth' }) }];


  return (
    <div
      ref={rootRef}
      className="akmal"
      data-cursor="on"
      style={{ position: 'relative', width: '100%', color: 'var(--fg)', overflow: 'hidden' }}>
      
      {!m && <CustomCursor rootRef={rootRef} />}

      {/* ===== Floating dock nav (fixed; .akmal has overflow:hidden) === */}
      <div style={{
        position: 'fixed',
        top: m ? 'auto' : 20,
        bottom: m ? 14 : 'auto',
        left: 0, right: 0,
        zIndex: 80,
        display: 'flex',
        justifyContent: 'center',
        padding: '0 12px',
        pointerEvents: 'none'
      }}>
        <div style={{ pointerEvents: 'auto' }}>
          <InstagramDock items={navItems} />
        </div>
      </div>

      {/* ===== Top corner wordmark + status (fixed) ================ */}
      <div style={{
        position: 'fixed',
        top: m ? 'calc(env(safe-area-inset-top, 0px) + 48px)' : 36, left: m ? 16 : 56,
        display: 'flex', alignItems: 'center', gap: 10,
        zIndex: 81
      }}>
        <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 12px var(--accent)' }} />
        <span style={{ fontWeight: 600, fontSize: m ? 14 : 16 }}>khaydarov.smm</span>
        {!m && <span style={{ marginLeft: 6, fontSize: 12, fontFamily: 'JetBrains Mono, monospace', color: 'var(--muted)' }}>est. 2022</span>}
      </div>
      {!m &&
      <div style={{
        position: 'fixed',
        top: 28, right: 56,
        zIndex: 81
      }}>
        <Pill label="Заявка" initials="А" onClick={() => document.getElementById('dm')?.scrollIntoView({ behavior: 'smooth' })} />
      </div>
      }

      {/* ===== Hero ==================================================== */}
      <section id="top" style={{
        position: 'relative',
        minHeight: '100vh',
        padding: m ? '120px 18px 72px' : '160px 56px 80px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-end',
        overflow: 'hidden',
        marginTop: m ? 0 : -100
      }}>
        {/* Vignette ONLY (smoke is global) */}
        <div style={{
          position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
          background:
          'radial-gradient(120% 70% at 50% 100%, rgba(12,14,18,0) 0%, rgba(12,14,18,0.55) 60%, rgba(12,14,18,0.9) 100%),' +
          'linear-gradient(180deg, rgba(12,14,18,0.4) 0%, rgba(12,14,18,0) 30%, rgba(12,14,18,0) 70%, rgba(12,14,18,0.75) 100%)'
        }} />

        {/* Top metadata strip (over shader) */}
        <div style={{
          position: 'absolute', top: m ? 'calc(env(safe-area-inset-top, 0px) + 14px)' : 100, left: m ? 18 : 56, right: m ? 18 : 56, zIndex: 2,
          display: 'flex', gap: m ? 12 : 24, alignItems: 'center',
          fontFamily: 'JetBrains Mono, monospace', fontSize: m ? 11 : 13, color: 'rgba(244,241,236,0.78)',
          letterSpacing: '0.08em', textTransform: 'uppercase'
        }}>
          <span>portfolio · v2026</span>
          <span style={{ flex: 1, height: 1, background: 'rgba(244,241,236,0.12)' }} />
          <span style={{ color: 'var(--accent)' }}>● live</span>
        </div>

        {/* Hero content (left-bottom anchored) */}
        <div style={{ position: 'relative', zIndex: 3, maxWidth: 1320 }}>
          <div data-comment-anchor="hero-wordmark">
            <div className="eyebrow" style={{ marginBottom: 32, color: 'var(--accent)' }}>
              digital · marketing · продакшн
            </div>
            <h1 style={{
              fontWeight: 800, letterSpacing: '-0.055em',
              fontSize: m ? 'clamp(40px, 13vw, 64px)' : 'clamp(72px, 11vw, 196px)',
              lineHeight: 0.86,

              textShadow: '0 8px 40px rgba(0,0,0,0.5)'
            }}>
              <span style={{ color: 'rgb(255, 255, 255)' }}>{HERO}</span>
            </h1>
            <div style={{
              marginTop: m ? 28 : 40, maxWidth: m ? '100%' : 540,
              fontSize: m ? 16 : 20, lineHeight: 1.45,
              color: 'rgba(244,241,236,0.85)'
            }}>
              Строим маркетинг, в котором контент, реклама и продукт работают как единая система роста. С реальной ответственностью за выручку.
            </div>
            <div style={{ display: 'flex', gap: 16, marginTop: 44, flexWrap: 'wrap' }}>
              <Pill label="Оставить заявку" initials="А" onClick={() => document.getElementById('dm')?.scrollIntoView({ behavior: 'smooth' })} />
              <Pill label="Смотреть кейсы" initials="→" variant="ghost" onClick={() => document.getElementById('cases')?.scrollIntoView({ behavior: 'smooth' })} />
            </div>
          </div>

          {/* Bottom-right scroll indicator */}
          {!m &&
          <div style={{
            position: 'absolute',
            right: 0, bottom: -20,
            display: 'flex', alignItems: 'center', gap: 12,
            fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
            color: 'rgba(244,241,236,0.7)',
            letterSpacing: '0.08em'
          }}>
            <span>scroll to explore</span>
            <span style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 36, height: 36, borderRadius: '50%',
              border: '1px solid rgba(244,241,236,0.25)'
            }}>↓</span>
          </div>
          }
        </div>
      </section>

      {/* ===== Marquee statement ======================================= */}
      <section style={{ padding: '20px 0', background: 'rgba(12,14,18,0.4)', position: 'relative', zIndex: 1 }}>
        <Marquee
          duration={50}
          fontSize={m ? 46 : 100}
          items={[
          <span style={{ display: 'flex', alignItems: 'center', gap: 32 }}><span>SMM</span></span>,
          <span style={{ color: 'var(--muted)' }}>контент</span>,
          <span>продакшн</span>,
          <span style={{ color: 'var(--muted)' }}>таргет</span>,
          <span style={{ color: 'var(--accent)' }}>визуал</span>,
          <span style={{ color: 'var(--muted)' }}>упаковка</span>,
          <span>продажи</span>]
          } />
        
      </section>

      {/* ===== About / manifesto ====================================== */}
      <section id="about" style={{ padding: m ? '90px 18px 80px' : '160px 56px 140px', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : 'minmax(0, 1fr) minmax(0, 1.4fr)', gap: m ? 44 : 80, alignItems: 'start' }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 24 }}>/01 — Манифест</div>
            <h2 className="display grad-text" style={{ fontSize: m ? 'clamp(30px, 8.5vw, 44px)' : 'clamp(48px, 5vw, 120px)', overflowWrap: 'break-word', maxWidth: '100%' }}>
              результативный<br />
              <span style={{ fontStyle: 'italic', fontWeight: 700 }}>маркетинг</span>
            </h2>
            <div style={{ marginTop: 40, position: 'relative', width: '100%', maxWidth: 420, aspectRatio: '4 / 3', borderRadius: 18, overflow: 'hidden', border: '1px solid var(--line)' }}>
              <img src="assets/me/photo.jpeg" alt="Акмаль Хайдаров" draggable="false" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(12,14,18,0.7) 100%)', pointerEvents: 'none' }} />
              <div style={{ position: 'absolute', bottom: 18, left: 20 }}>
                <div style={{ fontSize: 18, fontWeight: 600, color: '#fff' }}>Акмаль Хайдаров</div>
                <div style={{ fontSize: 13, color: 'rgba(244,241,236,0.7)' }}>маркетолог · менеджер проектов</div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              <p style={{ fontSize: m ? 21 : 28, lineHeight: 1.3, letterSpacing: '-0.015em', color: 'var(--fg)' }}>Меня зовут Акмаль. Буду говорить просто. Многие специалисты не заморачиваются над своей работой. Я в свою очередь, создал сайт для того, чтобы клиентам было удобно просмотреть все обо мне и о моих проектах. Со мной также — команда из четырех специалистов: видеограф, дизайнер, копирайтер и таргетолог.

              </p>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: 620 }}>Мы не работаем «по шаблону».

Шутка)
Ни для кого не новость, что все работают по шаблону. Мы не исключение. Но мы эти шаблоны дорабатываем и адаптируем под каждого клиента. Мы заходим в проект, разбираем продукт, аудиторию и точки роста — и собираем маркетинг под конкретную задачу. SMM, продакшн, реклама и упаковка.</p>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: 620 }}>
                В работе одновременно — 3–4 проекта. Не больше. Иначе невозможно отвечать за результат.
              </p>
              <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: m ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: m ? 20 : 32, borderTop: '1px solid var(--line)', paddingTop: 32 }}>
                {[{ v: '$3.2M+', k: 'выручки клиентам' },
                { v: '50+', k: 'проектов' },
                { v: '5', k: 'специалистов' },
                { v: '5 лет', k: 'в digital' }].
                map((s) =>
                <div key={s.k}>
                    <div style={{ fontSize: m ? 32 : 40, fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1 }}>{s.v}</div>
                    <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 8, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.k}</div>
                  </div>
                )}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ===== Services · radial orbital timeline ===================== */}
      <section id="services" style={{
        padding: m ? '80px 14px 60px' : '140px 56px 100px',
        background:
        'radial-gradient(1200px 600px at 50% 30%, rgba(91,139,255,0.08), transparent 60%)',
        position: 'relative', zIndex: 1
      }}>
        <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'flex-end', gap: m ? 18 : 0, marginBottom: m ? 24 : 40 }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 20 }}>/02 — Услуги</div>
            <h2 className="display grad-text" style={{ fontSize: m ? 50 : 168 }}>что<br /><span>мы делаем</span></h2>
          </Reveal>
          <div style={{ maxWidth: m ? '100%' : 320, color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.55 }}>
            Семь направлений вращаются вокруг одного — вашей выручки. В проекте обычно работают 4–5 из них, состав собирается под задачу.
          </div>
        </div>

        {m ? <RadialOrbitalServices services={SERVICES} compact /> : <RadialOrbitalServices services={SERVICES} />}
      </section>

      {/* ===== Cases — large drag carousel ============================== */}
      <section id="cases" style={{ padding: m ? '90px 0 60px' : '160px 0 80px', position: 'relative', zIndex: 1 }}>
        <div style={{ padding: m ? '0 18px' : '0 56px', display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'flex-end', gap: m ? 16 : 0, marginBottom: m ? 28 : 56 }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 20 }}>/03 — Кейсы</div>
            <h2 className="display grad-text" style={{ fontSize: m ? 50 : 168 }}>работы<br /><span>2024 - 26</span></h2>
          </Reveal>
          <div style={{ display: 'flex', flexDirection: m ? 'row' : 'column', gap: 12, alignItems: m ? 'center' : 'flex-end' }}>
            {!m && <div style={{ display: 'flex', gap: 8 }}>
              <button data-cursor-hover style={{ width: 56, height: 56, borderRadius: '50%', border: '1px solid var(--line-2)', color: 'var(--fg)' }}>←</button>
              <button data-cursor-hover style={{ width: 56, height: 56, borderRadius: '50%', border: '1px solid var(--line-2)', color: 'var(--fg)' }}>→</button>
            </div>}
            <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: 'var(--fg-2)', letterSpacing: '0.06em' }}>{String(CASES.length).padStart(2, '0')} проектов · {m ? 'swipe →' : 'drag'}</span>
          </div>
        </div>

        <DragCarousel gap={m ? 16 : 32} paddingInline={m ? 18 : 56}>
          {CASES.map((c, i) => <CaseCardKinetic key={c.id} c={c} i={i} m={m} />)}
        </DragCarousel>
      </section>

      {/* ===== Niches strip ============================================ */}
      <section style={{ padding: m ? '50px 18px 60px' : '80px 56px 100px', position: 'relative', zIndex: 1 }}>
        <div className="eyebrow" style={{ marginBottom: m ? 22 : 32 }}>· · · работаем с нишами</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: m ? 8 : 12 }}>
          {NICHES.map((n) =>
          <span key={n} style={{
            padding: m ? '10px 18px' : '14px 24px',
            borderRadius: 999,
            border: '1px solid var(--line-2)',
            fontSize: m ? 15 : 18, fontWeight: 500
          }}>{n}</span>
          )}
        </div>
      </section>

      {/* ===== Personal portfolio (PDF download) ====================== */}
      <section id="portfolio" data-screen-label="Личное портфолио" style={{ padding: m ? '40px 18px 70px' : '60px 56px 120px', position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: m ? '1fr' : '1.15fr 0.85fr',
          gap: m ? 36 : 72,
          alignItems: 'center',
          border: '1px solid var(--line)',
          borderRadius: m ? 22 : 28,
          background: 'linear-gradient(160deg, rgba(91,139,255,0.07) 0%, rgba(12,14,18,0) 55%)',
          padding: m ? '34px 22px 40px' : '64px 64px',
          overflow: 'hidden'
        }}>
          {/* Text + button */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 22 }}>· · · презентация</div>
            <h2 className="display grad-text" style={{ fontSize: m ? 'clamp(34px, 9vw, 48px)' : 96, lineHeight: 0.9, marginBottom: m ? 18 : 26 }}>
              личное<br />портфолио
            </h2>
            <p style={{ maxWidth: 460, fontSize: m ? 15 : 17, lineHeight: 1.55, color: 'var(--fg-2)', marginBottom: m ? 26 : 34 }}>Полная презентация в PDF: кейсы, результаты в цифрах, подход к работе. Удобно открыть, переслать или распечатать.

            </p>
            <a
              href="assets/portfolio/khaydarov-portfolio.pdf"
              download="Акмаль Хайдаров — портфолио.pdf"
              data-cursor-hover
              data-cursor-label="PDF"
              onClick={() => { try { if (window.va) window.va('event', { name: 'pdf_download' }); if (window.ym && window.__YM_ID) window.ym(window.__YM_ID, 'reachGoal', 'pdf'); } catch (e) {} }}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 16,
                padding: m ? '7px 24px 7px 7px' : '8px 30px 8px 8px',
                borderRadius: 999,
                background: 'var(--accent)',
                color: '#0c0e12',
                fontWeight: 600, fontSize: m ? 16 : 18,
                letterSpacing: '-0.01em',
                textDecoration: 'none',
                boxShadow: '0 12px 40px rgba(91,139,255,0.35)'
              }}>
              <span style={{
                width: m ? 42 : 50, height: m ? 42 : 50, borderRadius: '50%',
                background: '#0c0e12', color: 'var(--accent)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
              }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M12 3v12" />
                  <path d="M7 11l5 5 5-5" />
                  <path d="M5 21h14" />
                </svg>
              </span>
              Скачать PDF
            </a>
            <div style={{ marginTop: 18, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--muted)', letterSpacing: '0.06em' }}>
              PDF · ~9.5 МБ · 2026
            </div>
          </div>

          {/* Document cover visual */}
          <div style={{ display: 'flex', justifyContent: m ? 'center' : 'flex-end' }}>
            <div style={{
              position: 'relative',
              width: m ? 200 : 270,
              aspectRatio: '3 / 4',
              borderRadius: 16,
              background: 'linear-gradient(165deg, #11151c 0%, #0a0c10 100%)',
              border: '1px solid var(--line-2)',
              boxShadow: '0 30px 70px rgba(0,0,0,0.5)',
              transform: m ? 'none' : 'rotate(3deg)',
              padding: m ? '26px 22px' : '34px 28px',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--accent)', boxShadow: '0 0 10px var(--accent)' }} />
                <span style={{ fontSize: 13, fontWeight: 600 }}>khaydarov.smm</span>
              </div>
              <div>
                <div className="grad-text" style={{ fontSize: m ? 30 : 40, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 0.92 }}>
                  port<br />folio
                </div>
                <div style={{ marginTop: 14, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--muted)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                  digital · smm · 2026
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== Clients (dark) ========================================== */}
      <section id="clients" style={{
        padding: m ? '80px 0' : '120px 0',
        position: 'relative', zIndex: 1
      }}>
        <div style={{ padding: m ? '0 18px' : '0 56px', display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'flex-end', gap: m ? 16 : 0, marginBottom: m ? 36 : 80 }}>
          <h2 className="grad-text" style={{ fontSize: m ? 50 : 168, fontWeight: 700, letterSpacing: '-0.05em', lineHeight: 0.86 }}>
            мне<br /><span>доверяют</span>
          </h2>
          <p style={{ maxWidth: m ? '100%' : 320, fontSize: 15, lineHeight: 1.55, color: 'var(--fg-2)' }}>
            Бренды и предприниматели, которые выбирают долгие отношения, а не разовые подряды.
          </p>
        </div>

        <div>
          <div className="marquee" style={{ padding: m ? '28px 0' : '44px 0' }}>
            <div style={{
              display: 'flex', gap: m ? 14 : 28, width: 'max-content', flexShrink: 0,
              animation: 'akmal-marq-half 32s linear infinite'
            }}>
              {[...CLIENT_LOGOS, ...CLIENT_LOGOS].map((logo, i) =>
              <div key={i} style={{
                flexShrink: 0,
                width: m ? 152 : 240, height: m ? 88 : 130,
                borderRadius: m ? 14 : 18,
                background: '#f4f1ec',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: m ? '0 20px' : '0 32px',
                boxShadow: '0 8px 28px rgba(0,0,0,0.28)'
              }}>
                  <img src={logo.src} alt={logo.name} draggable="false" style={{
                  maxHeight: m ? 38 : 56, maxWidth: m ? 100 : 158, width: 'auto', height: 'auto', objectFit: 'contain'
                }} />
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ===== Process ================================================== */}
      <section id="process" style={{ padding: m ? '80px 16px 110px' : '140px 56px 200px', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', justifyContent: 'space-between', alignItems: m ? 'flex-start' : 'flex-end', gap: m ? 16 : 0, marginBottom: m ? 36 : 80 }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 20 }}>/04 — Процесс</div>
            <h2 className="display grad-text" style={{ fontSize: m ? 50 : 168 }}>четыре<br /><span>этапа</span></h2>
          </Reveal>
          <p style={{ maxWidth: m ? '100%' : 360, fontSize: 16, lineHeight: 1.55, color: 'var(--fg-2)', textAlign: m ? 'left' : 'right' }}>
            От первого созвона до отчёта по выручке. Каждый этап — с конкретным результатом и точкой принятия решения.
          </p>
        </div>
        <ProcessWave />
      </section>

      {/* ===== Big CTA + DM form (final) =============================== */}
      <section id="cta" style={{
        padding: m ? '70px 18px 24px' : '120px 56px 40px',
        background:
        'radial-gradient(900px 600px at 50% 0%, rgba(91,139,255,0.16), transparent 70%)',
        position: 'relative', zIndex: 1
      }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 24 }}>
            <div className="eyebrow" style={{ marginBottom: 24, color: 'var(--accent)' }}>/05 — Оставить заявку</div>
          </div>
          <div style={{
            fontWeight: 800,
            letterSpacing: '-0.07em',
            lineHeight: 0.84,
            fontSize: m ? 'clamp(58px, 18vw, 104px)' : 280,
            textAlign: 'center',
            background: 'linear-gradient(180deg, var(--fg) 0%, var(--fg) 60%, var(--accent) 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text'
          }}>
            давайте<br />работать
          </div>
        </Reveal>

        <Reveal delay={120}>
          <p style={{
            textAlign: 'center',
            maxWidth: 560,
            margin: m ? '28px auto 0' : '40px auto 0',
            fontSize: m ? 16 : 19,
            lineHeight: 1.5,
            color: 'var(--fg-2)'
          }}>Заполните заявку прямо в директе — шесть вопросов, без брифа на 40 пунктов.

          </p>
        </Reveal>
      </section>

      {/* ===== Phone scroll · Instagram DM (the form) ================= */}
      <section id="dm" style={{ position: 'relative', zIndex: 1 }}>
        <PhoneScrollSection />
      </section>

      <Footer />
    </div>);

}

/* ----- Service tile (kinetic) -------------------------------------------- */
function ServiceTile({ s }) {
  const [hover, setHover] = vbState(false);
  return (
    <div
      data-cursor-hover
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: 36,
        minHeight: 320,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        background: hover ? 'rgba(91,139,255,0.06)' : 'var(--bg)',
        transition: 'background .3s',
        cursor: 'pointer'
      }}>
      
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <span style={{ fontSize: 13, fontFamily: 'JetBrains Mono, monospace', color: 'var(--muted)', letterSpacing: '0.04em' }}>{s.num}</span>
        <span style={{ color: hover ? 'var(--accent)' : 'var(--muted)', transition: 'color .3s, transform .3s', transform: hover ? 'translate(4px,-4px)' : 'none' }}>↗</span>
      </div>
      <div>
        <h3 style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1.05, marginBottom: 14, color: hover ? 'var(--accent)' : 'var(--fg)', transition: 'color .3s' }}>{s.title}</h3>
        <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55 }}>{s.desc}</p>
      </div>
    </div>);

}

/* ----- Case card (kinetic — real imagery, equal height) ----------------- */
function CaseCardKinetic({ c, i, m }) {
  const [hover, setHover] = vbState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        width: m ? 'min(84vw, 330px)' : 560,
        height: m ? 540 : 640,
        background: 'var(--card)',
        borderRadius: 22,
        overflow: 'hidden',
        border: `1px solid ${hover ? 'rgba(91,139,255,0.4)' : 'var(--line)'}`,
        display: 'flex',
        flexDirection: 'column',
        transition: 'border-color .3s'
      }} data-cursor-hover data-cursor-label="CASE">
      {/* Image */}
      <div style={{ position: 'relative', height: m ? 220 : 300, flexShrink: 0, overflow: 'hidden', background: '#11151b' }}>
        {c.img ?
        <img src={c.img} alt={c.client} draggable="false" style={{
          width: '100%', height: '100%', objectFit: 'cover',
          transform: hover ? 'scale(1.05)' : 'scale(1)',
          transition: 'transform .6s cubic-bezier(.2,.7,.2,1)'
        }} /> :
        <div style={{
          width: '100%', height: '100%',
          background: `linear-gradient(135deg, ${c.accent}22, #11151b)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
            <span style={{ fontSize: 64, fontWeight: 800, letterSpacing: '-0.04em', color: c.accent, opacity: 0.55 }}>{c.client[0]}</span>
          </div>}
        {/* gradient scrim */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.65) 100%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', top: 20, left: 20, right: 20, display: 'flex', justifyContent: 'space-between', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: '#fff', letterSpacing: '0.06em' }}>
          <span>{c.code} · {c.year}</span>
          <span>{c.niche}</span>
        </div>
        <div style={{ position: 'absolute', bottom: 18, left: 22, fontSize: 28, fontWeight: 700, letterSpacing: '-0.025em', color: '#fff', textShadow: '0 2px 8px rgba(0,0,0,0.5)' }}>{c.client}</div>
      </div>

      {/* Content */}
      <div style={{ padding: '26px 30px 28px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div className="eyebrow" style={{ marginBottom: 12, fontSize: 10 }}>что делали</div>
        <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.55, marginBottom: 'auto' }}>{c.services}</p>

        {/* Result strip — pinned to bottom for alignment */}
        <div style={{ marginTop: 22, paddingTop: 20, borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 16 }}>
          {c.metrics ?
          <div style={{ display: 'flex', gap: 28 }}>
              {c.metrics.map((m) =>
            <div key={m.label}>
                  <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.03em', color: c.accent, lineHeight: 1 }}>{m.value}</div>
                  <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{m.label}</div>
                </div>
            )}
            </div> :
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <span style={{ flexShrink: 0, width: 7, height: 7, borderRadius: '50%', background: c.accent, marginTop: 7 }} />
              <span style={{ fontSize: 14, color: 'var(--fg)', lineHeight: 1.45, fontWeight: 500 }}>{c.result}</span>
            </div>}
        </div>
      </div>
    </article>);

}

window.VariantKinetic = VariantKinetic;