// homepage-mobile.jsx — RU-first, chessboard rhythm, motion-rich.

const M_btnLight = {
  width: '100%', minHeight: 58, background: T.ink, color: T.white, border: 'none',
  fontFamily: 'inherit', fontSize: 15, fontWeight: 500, letterSpacing: '0.02em',
  padding: '0 24px', cursor: 'pointer',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
  transition: 'transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease',
};
const M_btnGhost = {
  width: '100%', minHeight: 58, background: 'transparent', color: T.ink, border: `1px solid ${T.ink}`,
  fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
  padding: '0 24px', cursor: 'pointer',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
};
const M_btnDark = {
  width: '100%', minHeight: 58, background: T.white, color: T.ink, border: 'none',
  fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
  padding: '0 24px', cursor: 'pointer',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
};
const M_btnDarkGhost = {
  width: '100%', minHeight: 58, background: 'transparent', color: T.white, border: `1px solid rgba(255,255,255,0.36)`,
  fontFamily: 'inherit', fontSize: 15, fontWeight: 500,
  padding: '0 24px', cursor: 'pointer',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
};

// Logo (mobile)
function MWordmark({ light = false }) {
  const c = light ? T.white : T.ink;
  return (
    <a href="#/" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }} aria-label="De Vries & Partners — homepage">
      <BrandMark size={22} color={T.ink} accent={T.gold} light={light} />
      <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.14em', color: c, textTransform: 'uppercase' }}>
        DE VRIES<span style={{ color: T.gold }}> · </span>PARTNERS
      </span>
    </a>
  );
}

function MUtil() {
  const { lang, setLang, t } = useLang();
  return (
    <div style={{ background: T.ink, color: 'rgba(255,255,255,0.78)', padding: '8px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 10, ...TX.mono, letterSpacing: '0.12em' }}>
      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.util.city}</span>
      <LangSwitch lang={lang} setLang={setLang} dark />
    </div>
  );
}

function LangSwitch({ lang, setLang, dark = false }) {
  const base = { ...TX.mono, fontSize: 10, letterSpacing: '0.12em', cursor: 'pointer', padding: '4px 8px', border: 'none', background: 'transparent', fontFamily: 'inherit' };
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 0, border: `1px solid ${dark ? 'rgba(255,255,255,0.3)' : T.hair2}`, padding: 1 }}>
      {['ru', 'en'].map((L) => (
        <button key={L} onClick={() => setLang(L)} style={{
          ...base,
          background: lang === L ? (dark ? T.gold : T.ink) : 'transparent',
          color: lang === L ? (dark ? T.ink : T.white) : (dark ? 'rgba(255,255,255,0.85)' : T.ink),
        }}>
          {L.toUpperCase()}
        </button>
      ))}
    </span>
  );
}

function MNav({ open, setOpen }) {
  const { t } = useLang();
  return (
    <>
      <div style={{
        position: 'sticky', top: 0, zIndex: 50, background: T.white,
        borderBottom: `1px solid ${T.hair}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px',
      }}>
        <MWordmark />
        <button onClick={() => setOpen(!open)} aria-label="menu" style={{
          width: 44, height: 44, border: `1px solid ${T.ink}`, background: T.white, cursor: 'pointer',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 5,
        }}>
          <span style={{ width: 16, height: 1.5, background: T.ink }} />
          <span style={{ width: 16, height: 1.5, background: T.ink }} />
        </button>
      </div>
      {open && <MNavSheet onClose={() => setOpen(false)} />}
    </>
  );
}

function MNavSheet({ onClose }) {
  const { t, lang, setLang } = useLang();
  const practiceRoutes = [
    '/services/crypto-recovery',
    '/services/forex-disputes',
    '/services/investment-fraud',
    '/services/broker-withdrawal-disputes',
    '/services/b2b-disputes',
    '/services',
    '/services/chargeback',
    '/services',
  ];
  const insightRoutes = [
    '/specialists/how-recovery-works',
    '/specialists/evidence',
    '/specialists',
    '/specialists/broker-scam-signs',
    '/services/chargeback',
    '/faq',
    '/specialists',
  ];
  const items = [
    { label: t.nav[0], to: '/' },
    { label: t.nav[1], to: '/services', kids: t.practicesDrop, kidRoutes: practiceRoutes },
    { label: t.nav[2], to: '/crypto' },
    { label: t.nav[3], to: '/forex' },
    { label: t.nav[4], to: '/business' },
    { label: t.nav[5], to: '/about' },
    // "Команда" — direct link to the team page, no dropdown.
    // The old insightsDrop sub-list (chargeback / how-recovery-works /
    // FAQ-style links) was misleading on a header item that should
    // surface the team. The educational materials still live on
    // /specialists itself, below the team grid.
    { label: t.nav[6], to: '/specialists' },
    { label: t.nav[7], to: '/contact' },
  ];
  const [openSec, setOpenSec] = React.useState(t.nav[1]);
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 60, background: 'rgba(11,15,20,0.6)', animation: 'fadeIn .25s ease' }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        position: 'absolute', top: 0, right: 0, bottom: 0, width: '94%', maxWidth: 400,
        background: T.white, padding: '20px 22px 90px', overflowY: 'auto',
        boxShadow: '-30px 0 80px rgba(11,15,20,0.32)',
        animation: 'slideIn .3s cubic-bezier(.2,.7,.2,1)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22 }}>
          <LangSwitch lang={lang} setLang={setLang} />
          <button onClick={onClose} style={{
            width: 42, height: 42, border: `1px solid ${T.ink}`, background: T.white, cursor: 'pointer', fontSize: 16,
          }}>✕</button>
        </div>
        {items.map((it) => (
          <div key={it.label} style={{ borderBottom: `1px solid ${T.hair}`, padding: '14px 0' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
              <a href={'#' + it.to} onClick={() => !it.kids && onClose && onClose()} style={{
                flex: 1, padding: '4px 0', cursor: 'pointer', fontSize: 19, fontWeight: 500, color: T.ink, textAlign: 'left',
                fontFamily: 'inherit', letterSpacing: '-0.015em', textDecoration: 'none',
              }}>{it.label}</a>
              {it.kids && (
                <button onClick={() => setOpenSec(openSec === it.label ? '' : it.label)} aria-label="toggle" style={{
                  width: 36, height: 36, background: 'transparent', border: 'none', cursor: 'pointer',
                  color: T.gold, ...TX.mono, fontSize: 16, fontFamily: 'inherit',
                }}>{openSec === it.label ? '−' : '+'}</button>
              )}
            </div>
            {it.kids && openSec === it.label && (
              <div style={{ marginTop: 12, display: 'grid', gap: 2 }}>
                {it.kids.map((k, i) => (
                  <a key={k} href={'#' + (it.kidRoutes ? it.kidRoutes[i] : '/services')} onClick={() => onClose && onClose()} style={{
                    color: T.ink2, fontSize: 14, textDecoration: 'none', padding: '12px 14px',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    background: T.paper, borderLeft: `2px solid ${T.gold}`,
                  }}>
                    <span><span style={{ ...TX.mono, fontSize: 9, color: T.mute, marginRight: 10 }}>{String(i + 1).padStart(2, '0')}</span>{k}</span>
                    <span style={{ color: T.mute }}>→</span>
                  </a>
                ))}
              </div>
            )}
          </div>
        ))}
        <div style={{ marginTop: 26 }}>
          <a href="#/contact" onClick={() => onClose && onClose()} style={{ ...M_btnLight, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between' }}>{t.ctaPrimary} <span>→</span></a>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HERO — white section with animated diamonds
// ─────────────────────────────────────────────────────────────
function MHero() {
  const { t } = useLang();
  return (
    <section style={{ position: 'relative', padding: '40px 18px 56px', background: T.white, overflow: 'hidden' }}>
      <Diamond size={140} top="40px" right="-50px" color={T.gold} opacity={0.16} dur={20} />
      <Diamond size={70} top="180px" right="40px" color={T.gold} opacity={0.5} fill dur={14} delay={1} />
      <Diamond size={50} top="120px" left="-10px" color={T.steel} opacity={0.25} dur={18} delay={2} />

      <Reveal>
        <Kicker color={T.gold}>{t.eyebrowHero}</Kicker>
      </Reveal>
      <Reveal delay={120}>
        <h1 style={{
          ...TX.display, fontSize: 'clamp(36px, 9.5vw, 48px)', lineHeight: 1.05,
          margin: '22px 0 20px', color: T.ink, textWrap: 'balance', maxWidth: 420,
        }}>
          {t.h1}
        </h1>
      </Reveal>
      <Reveal delay={220}>
        <p style={{ fontSize: 16, color: T.body, lineHeight: 1.6, margin: '0 0 32px', maxWidth: 380 }}>
          {t.heroLead}
        </p>
      </Reveal>
      <Reveal delay={300}>
        <div style={{ display: 'grid', gap: 10, marginBottom: 36 }}>
          <a href="#/contact" style={{ ...M_btnLight, textDecoration: 'none' }}>{t.ctaPrimary} <span>→</span></a>
          <a href="#/specialists/how-recovery-works" style={{ ...M_btnGhost, textDecoration: 'none' }}>{t.ctaSecondary} <span style={{ color: T.gold }}>→</span></a>
        </div>
      </Reveal>

      <Reveal delay={400}>
        <ArchMark aspect="4/3" />
      </Reveal>

      <Reveal delay={500}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          borderTop: `1px solid ${T.ink}`, borderBottom: `1px solid ${T.hair}`, marginTop: 36,
        }}>
          {t.metrics.map(([n, l, sub], i) => (
            <div key={l} style={{
              padding: '20px 12px 18px',
              borderRight: i % 2 === 0 ? `1px solid ${T.hair}` : 'none',
              borderBottom: i < 2 ? `1px solid ${T.hair}` : 'none',
            }}>
              <div style={{ fontSize: 26, fontWeight: 600, color: T.ink, letterSpacing: '-0.025em', marginBottom: 6 }}>
                <Counter value={n} />
              </div>
              <div style={{ ...TX.mono, fontSize: 9, color: T.ink, marginBottom: 3 }}>{l}</div>
              <div style={{ fontSize: 11, color: T.mute }}>{sub}</div>
            </div>
          ))}
        </div>
        <div style={{ ...TX.mono, fontSize: 9, padding: '12px 0 0', display: 'flex', justifyContent: 'space-between', color: T.mute }}>
          <span>{t.metricsCaption[0]}</span>
        </div>
      </Reveal>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Strip — paper, marquee
// ─────────────────────────────────────────────────────────────
function MStrip() {
  const { t } = useLang();
  const row = [...t.stripItems, ...t.stripItems];
  return (
    <section style={{ background: T.paper, borderTop: `1px solid ${T.hair}`, borderBottom: `1px solid ${T.hair}`, padding: '24px 0' }}>
      <div style={{ padding: '0 18px 14px' }}>
        <div style={{ ...TX.mono, fontSize: 9, color: T.mute }}>{t.stripLabel}</div>
      </div>
      <div style={{
        overflow: 'hidden',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
        maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
      }}>
        <div style={{
          display: 'flex', gap: 36, whiteSpace: 'nowrap',
          animation: 'marquee 50s linear infinite',
          willChange: 'transform',
          width: 'max-content',
        }}>
          {row.map((it, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }} aria-hidden={i >= row.length / 2}>
              <span aria-hidden style={{ width: 7, height: 7, background: T.gold, transform: 'rotate(45deg)' }} />
              <span style={{ fontSize: 15, color: T.ink2, fontWeight: 500, letterSpacing: '-0.005em' }}>{it}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Section header — mobile
function SH({ s, dark = false }) {
  return (
    <div style={{ marginBottom: 26 }}>
      <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 8 }}>§ {s.num} · {s.kicker}</div>
      <Reveal>
        <h2 style={{
          ...TX.display, fontSize: 36, margin: '0 0 12px', color: dark ? T.white : T.ink, textWrap: 'balance',
        }}>{s.title}</h2>
      </Reveal>
      <Reveal delay={120}>
        <p style={{ fontSize: 15, color: dark ? 'rgba(255,255,255,0.7)' : T.body, margin: 0, lineHeight: 1.55 }}>
          {s.intro}
        </p>
      </Reveal>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PRACTICES — black section (chessboard rhythm)
// ─────────────────────────────────────────────────────────────
function MPractices() {
  const { t } = useLang();
  return (
    <section style={{ padding: '80px 18px 0', background: T.ink, color: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={200} top="-60px" right="-80px" color={T.gold} opacity={0.15} dur={24} />
      <Diamond size={80} bottom="20%" left="-30px" color={T.steel} opacity={0.4} fill dur={16} delay={1} />

      <SH s={t.sec.practices} dark />
      <div style={{ borderTop: `1px solid rgba(255,255,255,0.4)`, marginTop: 30 }}>
        {t.practices.map(([n, ti, d], i) => {
          const routes = [
            '/services/crypto-recovery', '/services/forex-disputes', '/services/investment-fraud',
            '/services/broker-withdrawal-disputes', '/services/b2b-disputes', '/services',
            '/services/chargeback', '/services',
          ];
          return (
          <Reveal key={n} delay={i * 60}>
            <a href={'#' + routes[i]} style={{
              display: 'grid', gridTemplateColumns: '50px 1fr 24px', alignItems: 'start', gap: 14,
              padding: '22px 0', borderBottom: `1px solid rgba(255,255,255,0.14)`, color: T.white, textDecoration: 'none',
            }}>
              <div style={{ ...TX.mono, fontSize: 11, color: T.gold, paddingTop: 4 }}>{n}</div>
              <div>
                <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 4 }}>{ti}</div>
                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.65)', lineHeight: 1.6 }}>{d}</div>
              </div>
              <div style={{ color: T.gold, fontSize: 18, paddingTop: 2, textAlign: 'right' }}>→</div>
            </a>
          </Reveal>
          );
        })}
      </div>
      <div style={{ height: 50 }} />
    </section>
  );
}

// Diagonal divider piece
function MSlash({ from, to, h = 56 }) {
  return (
    <div aria-hidden style={{ position: 'relative', height: h, background: from }}>
      <div style={{
        position: 'absolute', inset: 0, background: to,
        clipPath: 'polygon(0 100%, 100% 0, 100% 100%, 0 100%)',
      }} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// METHOD — paper, with floating diamonds
// ─────────────────────────────────────────────────────────────
function MMethod() {
  const { t } = useLang();
  return (
    <section style={{ padding: '80px 18px', background: T.paper, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={140} top="60px" right="-40px" color={T.gold} opacity={0.18} dur={20} />
      <Diamond size={80} bottom="18%" left="-20px" color={T.steel} opacity={0.18} fill dur={16} delay={1.5} />
      <SH s={t.sec.method} />
      <div style={{ position: 'relative', marginTop: 16 }}>
        <div aria-hidden style={{ position: 'absolute', left: 24, top: 28, bottom: 28, width: 1, background: T.gold, opacity: 0.55 }} />
        {t.method.map(([n, ti, d], i) => (
          <Reveal key={n} delay={i * 80}>
            <div style={{
              display: 'grid', gridTemplateColumns: '50px 1fr', gap: 16, padding: '18px 0',
              borderBottom: i < t.method.length - 1 ? `1px solid ${T.hair2}` : 'none',
            }}>
              <div style={{
                width: 48, height: 48, border: `1px solid ${T.gold}`, background: T.paper,
                display: 'flex', alignItems: 'center', justifyContent: 'center', transform: 'rotate(45deg)',
              }}>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 13, color: T.gold, transform: 'rotate(-45deg)' }}>{n}</span>
              </div>
              <div style={{ paddingTop: 4 }}>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 4, color: T.ink }}>{ti}</div>
                <div style={{ fontSize: 14, color: T.body, lineHeight: 1.55 }}>{d}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FOCUS — graphite section, two stacked blocks
// ─────────────────────────────────────────────────────────────
function MFocus() {
  const { t } = useLang();
  return (
    <section style={{ padding: '80px 18px', background: T.graphite, color: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={260} top="-100px" right="-80px" color={T.gold} opacity={0.1} dur={26} />
      <Diamond size={80} bottom="15%" right="20px" color={T.gold} opacity={0.55} fill dur={14} delay={1} />
      <SH s={t.sec.focus} dark />
      <FocusBlock kind="crypto" data={t.focus.crypto} flow={t.focus.cryptoFlow} />
      <div style={{ height: 14 }} />
      <FocusBlock kind="forex" data={t.focus.forex} flow={t.focus.forexFlow} />
    </section>
  );
}

function FocusBlock({ kind, data, flow }) {
  return (
    <Reveal>
      <div style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid rgba(255,255,255,0.18)` }}>
        <FocusVisual kind={kind} flow={flow} />
        <div style={{ padding: '22px 20px 24px' }}>
          <div style={{ ...TX.mono, fontSize: 10, color: kind === 'crypto' ? T.gold : T.goldS, marginBottom: 10 }}>
            {data.kicker}
          </div>
          <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 12, color: T.white }}>{data.title}</div>
          <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, marginBottom: 16 }}>{data.body}</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 0 }}>
            {data.rows.map((r, i) => (
              <li key={r} style={{
                display: 'grid', gridTemplateColumns: '24px 1fr', gap: 8, padding: '12px 0',
                borderTop: `1px solid rgba(255,255,255,0.14)`, fontSize: 13, color: T.white, alignItems: 'center',
              }}>
                <span style={{ ...TX.mono, fontSize: 9, color: 'rgba(255,255,255,0.5)' }}>{String(i + 1).padStart(2, '0')}</span>
                {r}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </Reveal>
  );
}

function FocusVisual({ kind, flow }) {
  if (kind === 'crypto') {
    return (
      <div style={{ background: 'rgba(0,0,0,0.3)', borderBottom: `1px solid rgba(255,255,255,0.14)`, padding: 14 }}>
        <svg viewBox="0 0 320 110" style={{ width: '100%', display: 'block' }} aria-hidden>
          {[20, 80, 140, 200, 260].map((cx, i) => (
            <g key={cx}>
              <line x1={cx + 8} y1={55} x2={cx + 52} y2={55} stroke="rgba(255,255,255,0.4)" strokeWidth="1" />
              <rect x={cx - 8} y={47} width="16" height="16" transform={`rotate(45 ${cx} 55)`}
                    fill={i === 2 ? T.gold : 'none'} stroke={T.gold} strokeWidth="1.2" />
            </g>
          ))}
          <text x="160" y="92" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="rgba(255,255,255,0.6)" letterSpacing="2" textAnchor="middle">
            {flow.join('  →  ')}
          </text>
        </svg>
      </div>
    );
  }
  return (
    <div style={{ background: 'rgba(0,0,0,0.3)', borderBottom: `1px solid rgba(255,255,255,0.14)`, padding: 14 }}>
      <svg viewBox="0 0 320 110" style={{ width: '100%', display: 'block' }} aria-hidden>
        <g stroke="rgba(255,255,255,0.1)" strokeWidth="0.5">
          {[18, 38, 58, 78].map((y) => (<line key={y} x1="0" y1={y} x2="320" y2={y} />))}
        </g>
        <polyline points="0,68 30,60 60,64 90,46 120,52 150,32 180,40 210,22 240,32 270,28 300,44 320,38"
          fill="none" stroke={T.gold} strokeWidth="1.6" />
        {[[120, 52], [210, 22], [300, 44]].map(([x, y]) => (
          <rect key={x} x={x - 4} y={y - 4} width="8" height="8" fill={T.gold} />
        ))}
        <text x="160" y="100" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="rgba(255,255,255,0.6)" letterSpacing="2" textAnchor="middle">
          {flow.join('  ·  ')}
        </text>
      </svg>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TRUST — white
// ─────────────────────────────────────────────────────────────
function MTrust() {
  const { t } = useLang();
  return (
    <section style={{ padding: '80px 18px', background: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={120} top="40px" right="-30px" color={T.gold} opacity={0.18} dur={18} />
      <SH s={t.sec.trust} />
      <div style={{ borderTop: `1px solid ${T.ink}`, marginTop: 12 }}>
        {t.trust.map(([k, v], i) => (
          <Reveal key={k} delay={i * 80}>
            <div style={{ padding: '22px 0', borderBottom: `1px solid ${T.hair}`, display: 'grid', gridTemplateColumns: '36px 1fr', gap: 14 }}>
              <div style={{ ...TX.mono, fontSize: 10, color: T.gold }}>0{i + 1}</div>
              <div>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 6, color: T.ink }}>{k}</div>
                <div style={{ fontSize: 14, color: T.body, lineHeight: 1.6 }}>{v}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CATEGORIES — black accordion
// ─────────────────────────────────────────────────────────────
function MCats() {
  const { t } = useLang();
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '80px 18px', background: T.ink, color: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={180} bottom="-60px" left="-60px" color={T.gold} opacity={0.12} dur={22} />
      <Diamond size={60} top="20%" right="20px" color={T.gold} opacity={0.5} fill dur={14} delay={1} />
      <SH s={t.sec.cats} dark />
      <div style={{ borderTop: `1px solid rgba(255,255,255,0.4)`, marginTop: 12 }}>
        {t.cats.map((c, i) => {
          const isOpen = open === i;
          return (
            <div key={c[0]} style={{ borderBottom: `1px solid rgba(255,255,255,0.14)` }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                width: '100%', background: 'transparent', border: 'none', padding: '20px 0', cursor: 'pointer', textAlign: 'left',
                display: 'grid', gridTemplateColumns: '40px 1fr 28px', gap: 12, alignItems: 'center', fontFamily: 'inherit', color: T.white,
              }}>
                <span style={{ ...TX.mono, fontSize: 11, color: T.gold }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ fontSize: 19, fontWeight: 600, letterSpacing: '-0.015em' }}>{c[0]}</span>
                <span style={{
                  width: 24, height: 24, border: `1px solid rgba(255,255,255,0.4)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'transform .35s cubic-bezier(.2,.7,.2,1)', transform: isOpen ? 'rotate(45deg)' : 'rotate(0)', fontSize: 14, color: T.gold,
                }}>+</span>
              </button>
              <div style={{ maxHeight: isOpen ? 360 : 0, overflow: 'hidden', transition: 'max-height .45s cubic-bezier(.2,.7,.2,1)' }}>
                <div style={{ padding: '4px 0 22px 52px', color: 'rgba(255,255,255,0.7)', fontSize: 14, lineHeight: 1.6 }}>
                  {c[1]}
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 14 }}>
                    {c[2].map((tg) => (
                      <span key={tg} style={{ ...TX.mono, fontSize: 9, padding: '6px 10px', border: `1px solid rgba(255,255,255,0.3)`, color: T.white }}>{tg}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// EXPERTS — white
// ─────────────────────────────────────────────────────────────
// Kept defined for reference but no longer rendered: the team grid lives
// inside <SpecialistsIndexPage/> in site/pages.jsx with full portfolios
// and VIP visual treatment. If something resurrects MExperts, the body
// reads the new object shape so it doesn't crash.
function MExperts() {
  const { t } = useLang();
  return (
    <section style={{ padding: '80px 18px', background: T.white, position: 'relative', overflow: 'hidden' }}>
      <SH s={t.sec.experts} />
      <div style={{ display: 'grid', gap: 0, borderTop: `1px solid ${T.ink}`, marginTop: 12 }}>
        {t.team.map((m, i) => (
          <Reveal key={m.name} delay={i * 70}>
            <div style={{
              display: 'grid', gridTemplateColumns: '88px 1fr', gap: 16,
              padding: '18px 0', borderBottom: `1px solid ${T.hair}`, alignItems: 'start',
            }}>
              <Portrait gender={m.gender} initials={m.initials} i={i} />
              <div>
                <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 4 }}>{m.country}</div>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 4, color: T.ink }}>{m.name}</div>
                <div style={{ fontSize: 14, color: T.ink, marginBottom: 4 }}>{m.role}</div>
                <div style={{ fontSize: 13, color: T.mute, lineHeight: 1.5 }}>{m.brief}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// VOICES — graphite carousel
// ─────────────────────────────────────────────────────────────
function MVoices() {
  const { t, lang } = useLang();
  const [i, setI] = React.useState(0);
  const items = t.voices;
  return (
    <section style={{ padding: '80px 18px', background: T.graphite, color: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={180} top="20px" left="-80px" color={T.gold} opacity={0.12} dur={22} />
      <Diamond size={70} bottom="20%" right="-20px" color={T.gold} opacity={0.4} fill dur={14} />
      <SH s={t.sec.voices} dark />
      <Reveal>
        <div style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid rgba(255,255,255,0.18)`, padding: 24, position: 'relative', minHeight: 280 }}>
          <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 16 }}>
            {t.statementWord} {String(i + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: T.white, margin: '0 0 24px', letterSpacing: '-0.005em' }}>
            «{items[i][0]}»
          </p>
          <div style={{ borderTop: `1px solid rgba(255,255,255,0.18)`, paddingTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 14 }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 14, color: T.white, fontWeight: 600 }}>{items[i][1]}</div>
              <div style={{ ...TX.mono, fontSize: 9, marginTop: 2, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.1em' }}>
                {items[i].length === 4 ? items[i][2].toUpperCase() + ' · ' + items[i][3] : items[i][2]}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'flex-end', maxWidth: 140 }}>
              {items.map((_, k) => (
                <button key={k} onClick={() => setI(k)} aria-label={`statement ${k + 1}`} style={{
                  width: 18, height: 4, padding: 0, border: 'none', cursor: 'pointer',
                  background: k === i ? T.gold : 'rgba(255,255,255,0.25)',
                  transition: 'background .2s ease',
                }} />
              ))}
            </div>
          </div>
        </div>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 12 }}>
        <button onClick={() => setI((i - 1 + items.length) % items.length)} style={{ ...M_btnDarkGhost, justifyContent: 'center' }}>← {lang === 'ru' ? 'Предыдущее' : 'Previous'}</button>
        <button onClick={() => setI((i + 1) % items.length)} style={{ ...M_btnDarkGhost, justifyContent: 'center' }}>{lang === 'ru' ? 'Следующее' : 'Next'} →</button>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQ — paper
// ─────────────────────────────────────────────────────────────
function MFAQ() {
  const { t } = useLang();
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '80px 18px', background: T.paper, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={120} top="60px" right="-30px" color={T.gold} opacity={0.16} dur={18} />
      <SH s={t.sec.faq} />
      <div style={{ borderTop: `1px solid ${T.ink}`, marginTop: 12 }}>
        {t.faq.map((q, i) => {
          const isOpen = open === i;
          return (
            <div key={q[0]} style={{ borderBottom: `1px solid ${T.hair2}` }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                width: '100%', background: 'transparent', border: 'none', padding: '18px 0', cursor: 'pointer', textAlign: 'left',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'inherit', gap: 14,
              }}>
                <span style={{ fontSize: 16, color: T.ink, fontWeight: 500, letterSpacing: '-0.005em', lineHeight: 1.35, flex: 1 }}>{q[0]}</span>
                <span style={{
                  width: 26, height: 26, border: `1px solid ${T.hair2}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transform: isOpen ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform .35s cubic-bezier(.2,.7,.2,1)', flexShrink: 0, color: T.gold,
                }}>+</span>
              </button>
              <div style={{ maxHeight: isOpen ? 360 : 0, overflow: 'hidden', transition: 'max-height .45s cubic-bezier(.2,.7,.2,1)' }}>
                <div style={{ padding: '0 0 22px', color: T.body, fontSize: 14, lineHeight: 1.65 }}>{q[1]}</div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CTA / FORM — black with gold submit
// ─────────────────────────────────────────────────────────────
function MCTA() {
  const { t, lang } = useLang();
  const F = t.formLabels;
  const c = t.contact;
  const { form, setField, errors, status, serverError, submit } = useLeadForm({ type: F.types[0] });
  const sending = status === 'sending';
  const sent    = status === 'sent';
  const errored = status === 'error';

  const channels = [
    { label: c.tgLabel || 'Telegram',   sub: CONTACT.telegramText, href: CONTACT.telegram, icon: '✈', external: true  },
    { label: c.waLabel || 'WhatsApp',   sub: CONTACT.whatsappText, href: CONTACT.whatsapp, icon: '✆', external: true  },
    { label: c.mailLabel || 'E-mail',   sub: CONTACT.email,        href: CONTACT.emailHref, icon: '✉', external: false },
  ];

  return (
    <section style={{ padding: '80px 18px', background: T.ink, color: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={260} bottom="-100px" right="-100px" color={T.gold} opacity={0.1} dur={26} />
      <Diamond size={90} top="60px" left="-30px" color={T.gold} opacity={0.45} fill dur={14} delay={1} />
      <SH s={t.sec.cta} dark />

      {/* PREMIUM CONTACT CHANNELS */}
      <Reveal delay={120}>
        <div role="list" aria-label={c.channelsTitle || 'Каналы связи'}
             style={{ display: 'grid', gap: 10, marginTop: 20, marginBottom: 18 }}>
          {channels.map((ch, i) => (
            <a key={i} href={ch.href}
               target={ch.external ? '_blank' : undefined}
               rel={ch.external ? 'noopener noreferrer' : undefined}
               role="listitem"
               style={{
                 display: 'grid', gridTemplateColumns: '40px 1fr 22px', alignItems: 'center', gap: 14,
                 padding: '18px 18px',
                 background: 'rgba(255,255,255,0.04)',
                 border: '1px solid rgba(255,255,255,0.18)',
                 borderLeft: `3px solid ${T.gold}`,
                 color: T.white, textDecoration: 'none',
                 transition: 'background .2s ease, transform .25s ease',
               }}>
              <span aria-hidden style={{
                width: 36, height: 36, border: `1px solid ${T.gold}`, transform: 'rotate(45deg)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.gold,
              }}><span style={{ transform: 'rotate(-45deg)', fontSize: 14 }}>{ch.icon}</span></span>
              <span style={{ minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 15, fontWeight: 600, letterSpacing: '-0.005em' }}>{ch.label}</span>
                <span style={{ display: 'block', fontSize: 12, color: 'rgba(255,255,255,0.6)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{ch.sub}</span>
              </span>
              <span style={{ color: T.gold, fontSize: 16 }}>→</span>
            </a>
          ))}
        </div>
      </Reveal>

      <Reveal delay={200}>
        <div style={{ ...TX.mono, fontSize: 9, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.1em', marginBottom: 24, lineHeight: 1.6 }}>
          {(c.replyNote || 'Первый отклик — в течение 2 рабочих дней. Все обращения конфиденциальны.').toUpperCase()}
        </div>
      </Reveal>

      {sent ? (
        <Reveal>
          <div style={{ border: `1px solid ${T.gold}`, padding: 26, background: 'rgba(164,136,79,0.1)' }}>
            <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 10 }}>{F.sentMark}</div>
            <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 10 }}>{F.sentTitle}</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.75)' }}>{F.sentBody}</div>
          </div>
        </Reveal>
      ) : (
        <form onSubmit={submit} noValidate aria-busy={sending} style={{ display: 'grid', gap: 12 }}>
          <DField label={F.name}    v={form.name}    onChange={(v) => setField('name', v)}    placeholder={F.placeholders.name}    err={errors.name    ? F.errors.name  : ''} disabled={sending} req />
          <DField label={F.phone}   v={form.phone}   onChange={(v) => setField('phone', v)}   placeholder={F.placeholders.phone}   err={errors.phone   ? F.errors.phone : ''} disabled={sending} req autoComplete="tel" />
          <DField label={F.email}   type="email" v={form.email}   onChange={(v) => setField('email', v)}   placeholder={F.placeholders.email}   err={errors.email   ? F.errors.email : ''} disabled={sending} autoComplete="email" />
          <DField label={F.country} v={form.country} onChange={(v) => setField('country', v)} placeholder={F.placeholders.country} disabled={sending} />
          <DField label={F.amount}  v={form.amount}  onChange={(v) => setField('amount', v)}  placeholder={F.placeholders.amount}  disabled={sending} />
          <div>
            <label style={fLD}>{F.type}</label>
            <select value={form.type} onChange={(e) => setField('type', e.target.value)} disabled={sending} style={fID}>
              {F.types.map((x) => <option key={x}>{x}</option>)}
            </select>
          </div>
          <div>
            <label style={fLD}>{F.desc} <span style={{ color: T.gold }}>· {F.required}</span></label>
            <textarea value={form.desc} onChange={(e) => setField('desc', e.target.value)} rows={4}
              placeholder={F.placeholders.desc} disabled={sending}
              aria-invalid={errors.desc ? 'true' : 'false'}
              style={{ ...fID, resize: 'vertical', paddingTop: 14, lineHeight: 1.5, fontFamily: 'inherit',
                       borderColor: errors.desc ? '#C26959' : 'rgba(255,255,255,0.22)' }} />
            {errors.desc && <div role="alert" style={{ ...TX.mono, fontSize: 9, color: '#E2A39A', letterSpacing: '0.08em', marginTop: 4 }}>{F.errors.desc}</div>}
          </div>
          {/* Honeypot */}
          <label aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }}>
            {F.honey.label}
            <input type="text" tabIndex={-1} autoComplete="off"
              value={form.company || ''} onChange={(e) => setField('company', e.target.value)} />
          </label>
          {errored && serverError && (
            <div role="alert" style={{
              border: '1px solid rgba(226,163,154,0.45)', padding: '12px 16px',
              background: 'rgba(140,58,46,0.18)', fontSize: 13, color: '#FBE8E2',
            }}>{F.errors[serverError] || F.errors.server}</div>
          )}
          <button type="submit" disabled={sending} style={{
            minHeight: 60, background: sending ? 'rgba(164,136,79,0.55)' : T.gold, color: T.ink, border: 'none',
            cursor: sending ? 'wait' : 'pointer',
            fontFamily: 'inherit', fontSize: 14, fontWeight: 700, letterSpacing: '0.04em',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 22px', marginTop: 6,
            transition: 'background .2s ease',
          }}>
            {sending ? F.sending : (errored ? F.retry : F.submit)} <span>→</span>
          </button>
          <div style={{ ...TX.mono, fontSize: 9, color: 'rgba(255,255,255,0.45)', lineHeight: 1.6, marginTop: 4, textTransform: 'none', letterSpacing: '0.04em' }}>
            {F.legal}
          </div>
        </form>
      )}
    </section>
  );
}

const fLD = { ...TX.mono, fontSize: 10, color: 'rgba(255,255,255,0.7)', display: 'block', marginBottom: 6 };
const fID = {
  width: '100%', minHeight: 54, padding: '0 14px', border: `1px solid rgba(255,255,255,0.22)`,
  background: 'rgba(255,255,255,0.04)', fontFamily: 'inherit', fontSize: 16, color: T.white, borderRadius: 0, outline: 'none', boxSizing: 'border-box',
};
function DField({ label, v, onChange, placeholder, type = 'text', err = '', disabled = false, req = false, autoComplete = 'off' }) {
  const { t } = useLang();
  const F = t.formLabels;
  return (
    <div>
      <label style={fLD}>
        {label} {req && <span style={{ color: T.gold }}>· {F.required}</span>}
      </label>
      <input type={type} value={v} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        disabled={disabled} required={req} autoComplete={autoComplete}
        aria-invalid={err ? 'true' : 'false'}
        style={{ ...fID, borderColor: err ? '#C26959' : 'rgba(255,255,255,0.22)' }} />
      {err && <div role="alert" style={{ ...TX.mono, fontSize: 9, color: '#E2A39A', letterSpacing: '0.08em', marginTop: 4 }}>{err}</div>}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FOOTER — graphite
// ─────────────────────────────────────────────────────────────
function MFooter() {
  const { t, lang } = useLang();
  const f = t.footer;
  return (
    <footer style={{ background: T.graphite, color: T.white, padding: '40px 18px 24px', position: 'relative', overflow: 'hidden' }}>
      <Diamond size={120} top="-40px" right="-40px" color={T.gold} opacity={0.1} dur={20} />
      <div style={{ marginBottom: 16 }}><MWordmark light /></div>
      <address style={{ fontStyle: 'normal', fontSize: 12, color: 'rgba(255,255,255,0.7)', lineHeight: 1.7, marginBottom: 16 }}>
        {CONTACT.legalName}<br />
        Hoofdvestiging · {CONTACT.address}<br />
        {lang === 'ru' ? CONTACT.country : CONTACT.countryEn} · KVK {CONTACT.kvk}
      </address>
      <p style={{ color: 'rgba(255,255,255,0.65)', fontSize: 13, lineHeight: 1.6, margin: '0 0 28px', maxWidth: 320 }}>
        {f.desc}
      </p>
      <div style={{ display: 'grid', gap: 24 }}>
        <FCol title={f.contact} rows={f.contactRows} />
        <FCol title={f.channels} rows={f.channelRows} />
        <div>
          <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 10 }}>{f.sitemap}</div>
          <div style={{ display: 'grid', gap: 6 }}>
            {[
              [t.nav[0], '/'], [t.nav[1], '/services'], [t.nav[2], '/crypto'], [t.nav[3], '/forex'],
              [t.nav[4], '/business'], [t.nav[5], '/about'], [t.nav[6], '/specialists'], [t.nav[7], '/contact'],
            ].map(([label, to]) => (
              <a key={to} href={'#' + to} style={{ fontSize: 13, color: 'rgba(255,255,255,0.78)', textDecoration: 'none', padding: '2px 0' }}>{label}</a>
            ))}
          </div>
        </div>
        <div>
          <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 10 }}>{t.legalCol.title.toUpperCase()}</div>
          <div style={{ display: 'grid', gap: 6 }}>
            {t.legalCol.links.map(([label, to]) => (
              <a key={to} href={'#' + to} style={{ fontSize: 13, color: 'rgba(255,255,255,0.78)', textDecoration: 'none', padding: '2px 0' }}>{label}</a>
            ))}
          </div>
        </div>
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.14)', marginTop: 30, paddingTop: 18 }}>
        <div style={{ ...TX.mono, fontSize: 9, color: T.gold, marginBottom: 10 }}>{lang === 'ru' ? 'ПРАВОВАЯ ОГОВОРКА' : 'LEGAL DISCLAIMER'}</div>
        <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6, margin: 0 }}>{f.legal}</p>
        <div style={{ marginTop: 18, fontSize: 11, color: 'rgba(255,255,255,0.45)' }}>{f.copy}</div>
      </div>
    </footer>
  );
}

function FCol({ title, rows }) {
  return (
    <div>
      <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 10 }}>{title}</div>
      <div style={{ display: 'grid', gap: 8 }}>
        {rows.map((row) => {
          const k = row[0], v = row[1], href = row[2];
          return (
            <div key={k} style={{ display: 'grid', gridTemplateColumns: '110px 1fr', gap: 10, fontSize: 13 }}>
              <span style={{ color: 'rgba(255,255,255,0.5)' }}>{k}</span>
              {href ? (
                <a href={href}
                   target={href.startsWith('http') ? '_blank' : undefined}
                   rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
                   style={{ color: 'rgba(255,255,255,0.92)', textDecoration: 'none', wordBreak: 'break-word' }}>
                  {v}
                </a>
              ) : <span style={{ color: 'rgba(255,255,255,0.92)' }}>{v}</span>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StickyCTA({ visible }) {
  const { t } = useLang();
  return (
    <div style={{
      position: 'sticky', bottom: 14, zIndex: 40, padding: '0 14px', marginTop: -64,
      opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(20px)',
      transition: 'opacity .3s ease, transform .3s ease', pointerEvents: visible ? 'auto' : 'none',
    }}>
      <a href="#/contact" style={{ ...M_btnLight, minHeight: 54, boxShadow: '0 18px 40px rgba(11,15,20,0.4)', textDecoration: 'none' }}>
        {t.ctaPrimary} <span>→</span>
      </a>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PAGE
// ─────────────────────────────────────────────────────────────
function MobileHomepage() {
  const [navOpen, setNavOpen] = React.useState(false);
  const [stickyVisible, setStickyVisible] = React.useState(false);
  React.useEffect(() => {
    // The page scrolls in the window — not in this wrapper. Tracking
    // window.scrollY is enough; an inner overflow:auto container would
    // hijack mobile touch scrolling and break IntersectionObserver-driven
    // reveals (Reveal/Counter pick the nearest overflow-auto ancestor as
    // their IO root).
    const onWinScroll = () => setStickyVisible(window.scrollY > 700);
    window.addEventListener('scroll', onWinScroll, { passive: true });
    return () => window.removeEventListener('scroll', onWinScroll);
  }, []);
  return (
    <div style={{
      width: '100%', minHeight: '100%',
      background: T.white, color: T.ink,
      fontFamily: '"Inter", system-ui, sans-serif', fontSize: 16, lineHeight: 1.55, letterSpacing: '-0.005em',
    }} data-screen-label="Mobile Homepage">
      <MUtil />
      <MNav open={navOpen} setOpen={setNavOpen} />
      <MHero />
      <XAbout dense />
      <MStrip />
      <XWhy dense />
      <MPractices />
      <XProcessExt dense />
      <MMethod />
      <XEvidence dense />
      <MFocus />
      <MTrust />
      <MCats />
      <XStats dense />
      {/* Experts block lives on /specialists now — no longer rendered here. */}
      <MVoices />
      <MFAQ />
      <MCTA />
      <XContact dense />
      <MFooter />
      <StickyCTA visible={stickyVisible} />
    </div>
  );
}

Object.assign(window, { MobileHomepage });