// homepage-desktop.jsx — RU-first, chessboard rhythm, motion-rich. 1440 wide.

const dx = {
  page: { width: '100%', minHeight: '100%', background: T.white, color: T.ink, fontFamily: '"Inter", system-ui, sans-serif', fontSize: 16, lineHeight: 1.55, letterSpacing: '-0.005em' },
  container: { maxWidth: 1320, margin: '0 auto', padding: '0 56px' },
};

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

function DLangSwitch({ dark = false }) {
  const { lang, setLang } = useLang();
  const base = { ...TX.mono, fontSize: 10, letterSpacing: '0.14em', cursor: 'pointer', padding: '6px 12px', border: 'none', background: 'transparent', fontFamily: 'inherit' };
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', 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 DUtil() {
  const { t } = useLang();
  return (
    <div style={{ background: T.ink, color: 'rgba(255,255,255,0.78)', padding: '8px 0', fontSize: 11 }}>
      <div style={{ ...dx.container, display: 'flex', justifyContent: 'space-between', alignItems: 'center', ...TX.mono, fontSize: 10, color: 'rgba(255,255,255,0.7)' }}>
        <span>{t.util.city}</span>
        <span style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
          <a href={CONTACT.emailHref} style={{ color: 'inherit', textDecoration: 'none' }}>{CONTACT.email}</a>
          <DLangSwitch dark />
        </span>
      </div>
    </div>
  );
}

function DNav() {
  const { t } = useLang();
  const [open, setOpen] = React.useState('');
  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', drop: t.practicesDrop, dropRoutes: 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, no hover dropdown. The page itself
    // surfaces the team grid first; educational materials still sit
    // below it on /specialists.
    { label: t.nav[6], to: '/specialists' },
    { label: t.nav[7], to: '/contact' },
  ];
  return (
    <div onMouseLeave={() => setOpen('')} style={{ position: 'sticky', top: 0, zIndex: 50, background: T.white, borderBottom: `1px solid ${T.hair}` }}>
      <div style={{ ...dx.container, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 56px' }}>
        <DWordmark />
        <nav style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          {items.map((it) => (
            <div key={it.label} onMouseEnter={() => setOpen(it.drop ? it.label : '')}>
              <a href={'#' + (it.to || '/')} style={{
                color: T.ink, fontSize: 13, fontWeight: 500, textDecoration: 'none',
                padding: '10px 0', display: 'flex', alignItems: 'center', gap: 6,
                borderBottom: open === it.label ? `1px solid ${T.gold}` : '1px solid transparent',
                transition: 'border-color .2s ease',
              }}>
                {it.label} {it.drop && <span style={{ fontSize: 9, color: T.mute }}>▾</span>}
              </a>
            </div>
          ))}
        </nav>
        <a href="#/contact" style={{
          background: T.ink, color: T.white, border: 'none', padding: '14px 22px',
          fontFamily: 'inherit', fontSize: 13, fontWeight: 500, letterSpacing: '0.02em',
          display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none',
        }}>{t.ctaPrimary} <span>→</span></a>
      </div>
      {open && (() => {
        const it = items.find((x) => x.label === open);
        if (!it || !it.drop) return null;
        return (
          <div style={{ position: 'absolute', left: 0, right: 0, top: '100%', background: T.paper, borderBottom: `1px solid ${T.hair}`, animation: 'fadeDown .2s ease' }}>
            <div style={{ ...dx.container, padding: '32px 56px', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 56 }}>
              <div>
                <Kicker>{it.label}</Kicker>
                <div style={{ ...TX.display, fontSize: 32, marginTop: 14, color: T.ink }}>
                  {it.label === t.nav[1] ? t.sec.practices.title : t.sec.faq.title}
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderTop: `1px solid ${T.hair2}` }}>
                {it.drop.map((d, i) => (
                  <a key={d} href={'#' + (it.dropRoutes ? it.dropRoutes[i] : '/services')} style={{
                    padding: '14px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    color: T.ink, textDecoration: 'none', fontSize: 14, borderBottom: `1px solid ${T.hair2}`,
                    borderRight: i % 2 === 0 ? `1px solid ${T.hair2}` : 'none',
                  }}>
                    <span style={{ display: 'flex', gap: 12 }}>
                      <span style={{ ...TX.mono, fontSize: 9, color: T.mute }}>{String(i + 1).padStart(2, '0')}</span>
                      {d}
                    </span>
                    <span style={{ color: T.gold }}>→</span>
                  </a>
                ))}
              </div>
            </div>
          </div>
        );
      })()}
    </div>
  );
}

// HERO
function DHero() {
  const { t } = useLang();
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: T.white, paddingBottom: 0 }}>
      <Diamond size={300} top="-100px" right="-100px" color={T.gold} opacity={0.1} dur={26} />
      <Diamond size={140} top="40%" right="8%" color={T.gold} opacity={0.5} fill dur={16} delay={1} />
      <Diamond size={70} top="60%" left="6%" color={T.steel} opacity={0.3} dur={14} delay={2} />
      <Diamond size={40} top="20%" left="12%" color={T.gold} opacity={0.7} fill dur={12} />

      <div style={{ ...dx.container, padding: '90px 56px 0', position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'end' }}>
        <div style={{ paddingBottom: 80 }}>
          <Reveal><Kicker size="lg">{t.eyebrowHero}</Kicker></Reveal>
          <Reveal delay={120}>
            <h1 style={{
              ...TX.display, fontSize: 'clamp(54px, 6.4vw, 88px)', lineHeight: 1.02,
              margin: '24px 0 24px', color: T.ink, textWrap: 'balance', maxWidth: 820,
            }}>{t.h1}</h1>
          </Reveal>
          <Reveal delay={220}>
            <p style={{ fontSize: 19, color: T.body, lineHeight: 1.55, maxWidth: 560, margin: '0 0 36px' }}>{t.heroLead}</p>
          </Reveal>
          <Reveal delay={300}>
            <div style={{ display: 'flex', gap: 14 }}>
              <a href="#/contact" style={{
                background: T.ink, color: T.white, border: 'none', padding: '20px 30px', fontSize: 13, fontFamily: 'inherit',
                fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 14, textDecoration: 'none',
              }}>{t.ctaPrimary} <span>→</span></a>
              <a href="#/specialists/how-recovery-works" style={{
                background: 'transparent', color: T.ink, border: `1px solid ${T.ink}`, padding: '20px 30px', fontSize: 13, fontFamily: 'inherit',
                fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 14, textDecoration: 'none',
              }}>{t.ctaSecondary}</a>
            </div>
          </Reveal>
        </div>
        <Reveal delay={400}>
          <ArchMark aspect="5/4" />
        </Reveal>
      </div>

      <div style={{ ...dx.container, padding: '0 56px', position: 'relative' }}>
        <Reveal delay={500}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `1px solid ${T.ink}`, borderBottom: `1px solid ${T.hair}` }}>
            {t.metrics.map(([n, l, sub], i) => (
              <div key={l} style={{ padding: '24px 24px 22px', borderRight: i < 3 ? `1px solid ${T.hair}` : 'none' }}>
                <div style={{ fontSize: 40, fontWeight: 600, color: T.ink, letterSpacing: '-0.025em', marginBottom: 6 }}><Counter value={n} /></div>
                <div style={{ ...TX.mono, fontSize: 10, color: T.ink, marginBottom: 4 }}>{l}</div>
                <div style={{ fontSize: 12, color: T.mute }}>{sub}</div>
              </div>
            ))}
          </div>
          <div style={{ ...TX.mono, fontSize: 9, padding: '14px 0 30px', display: 'flex', justifyContent: 'space-between', color: T.mute }}>
            <span>{t.metricsCaption[0]}</span>
            <span>{t.metricsCaption[1]}</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// STRIP
function DStrip() {
  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: '28px 0' }}>
      <div style={{ ...dx.container, padding: '0 56px 16px' }}>
        <div style={{ ...TX.mono, fontSize: 10, color: T.mute }}>{t.stripLabel}</div>
      </div>
      <div style={{
        overflow: 'hidden',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)',
        maskImage: 'linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)',
      }}>
        <div style={{
          display: 'flex', gap: 56, whiteSpace: 'nowrap',
          animation: 'marquee 60s linear infinite',
          willChange: 'transform',
          width: 'max-content',
        }}>
          {row.map((it, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16 }} aria-hidden={i >= row.length / 2}>
              <span aria-hidden style={{ width: 9, height: 9, background: T.gold, transform: 'rotate(45deg)' }} />
              <span style={{ fontSize: 20, fontWeight: 500, color: T.ink2, letterSpacing: '-0.015em' }}>{it}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DSH({ s, dark = false }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr 1.4fr', gap: 40, marginBottom: 56, alignItems: 'start' }}>
      <div style={{ ...TX.mono, fontSize: 11, color: T.gold, paddingTop: 8 }}>§ {s.num}</div>
      <div>
        <Kicker>{s.kicker}</Kicker>
        <Reveal><h2 style={{ ...TX.display, fontSize: 56, margin: '18px 0 0', color: dark ? T.white : T.ink, textWrap: 'balance' }}>{s.title}</h2></Reveal>
      </div>
      <Reveal delay={120}>
        <div style={{ paddingTop: 30, fontSize: 17, lineHeight: 1.55, color: dark ? 'rgba(255,255,255,0.72)' : T.body }}>
          {s.intro}
        </div>
      </Reveal>
    </div>
  );
}

// PRACTICES — black
function DPractices() {
  const { t } = useLang();
  return (
    <section style={{ padding: '120px 0', background: T.ink, color: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={400} top="-150px" right="-150px" color={T.gold} opacity={0.08} dur={28} />
      <Diamond size={120} bottom="20%" left="-60px" color={T.steel} opacity={0.4} fill dur={18} delay={1} />
      <div style={dx.container}>
        <DSH s={t.sec.practices} dark />
        <div style={{ borderTop: `1px solid rgba(255,255,255,0.4)` }}>
          {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 * 50}>
              <a href={'#' + routes[i]} style={{
                display: 'grid', gridTemplateColumns: '110px 320px 1fr 60px', alignItems: 'center', gap: 32, padding: '26px 0',
                borderBottom: `1px solid rgba(255,255,255,0.14)`, color: T.white, textDecoration: 'none',
                transition: 'background .25s ease, padding .25s ease',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; e.currentTarget.style.paddingLeft = '12px'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.paddingLeft = '0'; }}>
                <div style={{ ...TX.mono, fontSize: 12, color: T.gold }}>{n}</div>
                <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em' }}>{ti}</div>
                <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.65)', lineHeight: 1.55 }}>{d}</div>
                <div style={{ color: T.gold, fontSize: 18, textAlign: 'right' }}>→</div>
              </a>
            </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// METHOD — paper
function DMethod() {
  const { t } = useLang();
  return (
    <section style={{ padding: '120px 0', background: T.paper, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={240} top="100px" right="-80px" color={T.gold} opacity={0.16} dur={22} />
      <Diamond size={100} bottom="80px" left="6%" color={T.steel} opacity={0.18} fill dur={18} delay={1.5} />
      <div style={dx.container}>
        <DSH s={t.sec.method} />
        <div style={{ position: 'relative' }}>
          <div aria-hidden style={{ position: 'absolute', top: 36, left: 36, right: 36, height: 1, background: T.gold, opacity: 0.5 }} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24, position: 'relative' }}>
            {t.method.map(([n, ti, d], i) => (
              <Reveal key={n} delay={i * 100}>
                <div>
                  <div style={{
                    width: 72, height: 72, border: `1px solid ${T.gold}`, background: T.paper,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', transform: 'rotate(45deg)', marginBottom: 26,
                  }}>
                    <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 16, color: T.gold, transform: 'rotate(-45deg)' }}>{n}</span>
                  </div>
                  <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 8 }}>{ti}</div>
                  <div style={{ fontSize: 14, color: T.body, lineHeight: 1.55 }}>{d}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// FOCUS — graphite split
function DFocus() {
  const { t } = useLang();
  return (
    <section style={{ padding: '120px 0', background: T.graphite, color: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={300} top="-100px" left="-100px" color={T.gold} opacity={0.1} dur={24} />
      <Diamond size={140} bottom="10%" right="6%" color={T.gold} opacity={0.5} fill dur={16} delay={1} />
      <div style={dx.container}>
        <DSH s={t.sec.focus} dark />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <DFocusBlock kind="crypto" data={t.focus.crypto} flow={t.focus.cryptoFlow} />
          <DFocusBlock kind="forex" data={t.focus.forex} flow={t.focus.forexFlow} />
        </div>
      </div>
    </section>
  );
}

function DFocusBlock({ kind, data, flow }) {
  const accent = kind === 'crypto' ? T.gold : T.goldS;
  return (
    <Reveal>
      <div style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid rgba(255,255,255,0.18)` }}>
        <div style={{ background: 'rgba(0,0,0,0.3)', padding: 28, borderBottom: `1px solid rgba(255,255,255,0.14)` }}>
          {kind === 'crypto' ? (
            <svg viewBox="0 0 600 140" style={{ width: '100%', display: 'block' }} aria-hidden>
              {[40, 140, 240, 340, 440, 540].map((cx, i) => (
                <g key={cx}>
                  <line x1={cx + 14} y1={70} x2={cx + 86} y2={70} stroke="rgba(255,255,255,0.4)" strokeWidth="1" />
                  <rect x={cx - 14} y={56} width="28" height="28" transform={`rotate(45 ${cx} 70)`} fill={i === 3 ? T.gold : 'none'} stroke={T.gold} strokeWidth="1.4" />
                </g>
              ))}
              <text x="300" y="120" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.6)" letterSpacing="3" textAnchor="middle">{flow.join('  →  ')}</text>
            </svg>
          ) : (
            <svg viewBox="0 0 600 140" style={{ width: '100%', display: 'block' }} aria-hidden>
              <g stroke="rgba(255,255,255,0.1)" strokeWidth="0.5">
                {[20, 50, 80, 110].map((y) => (<line key={y} x1="0" y1={y} x2="600" y2={y} />))}
              </g>
              <polyline points="0,90 60,80 120,86 180,60 240,68 300,40 360,52 420,30 480,42 540,28 600,52" fill="none" stroke={T.gold} strokeWidth="1.8" />
              {[[180, 60], [300, 40], [420, 30], [600, 52]].map(([x, y]) => (<rect key={x} x={x - 5} y={y - 5} width="10" height="10" fill={T.gold} />))}
              <text x="300" y="135" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.6)" letterSpacing="3" textAnchor="middle">{flow.join('  ·  ')}</text>
            </svg>
          )}
        </div>
        <div style={{ padding: 36 }}>
          <div style={{ ...TX.mono, fontSize: 11, color: accent, marginBottom: 12 }}>{data.kicker}</div>
          <div style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 12, color: T.white }}>{data.title}</div>
          <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55, marginBottom: 24, maxWidth: 460 }}>{data.body}</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: `1px solid rgba(255,255,255,0.18)` }}>
            {data.rows.map((r, i) => (
              <li key={r} style={{ padding: '14px 0', display: 'grid', gridTemplateColumns: '32px 1fr', gap: 8, fontSize: 13, color: T.white, alignItems: 'center', borderBottom: `1px solid rgba(255,255,255,0.18)`, paddingRight: i % 2 === 0 ? 12 : 0 }}>
                <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>
  );
}

// TRUST — white
function DTrust() {
  const { t } = useLang();
  return (
    <section style={{ padding: '120px 0', background: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={200} top="100px" right="-50px" color={T.gold} opacity={0.14} dur={20} />
      <div style={dx.container}>
        <DSH s={t.sec.trust} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `1px solid ${T.ink}` }}>
          {t.trust.map(([k, v], i) => (
            <Reveal key={k} delay={i * 100}>
              <div style={{ padding: '32px 28px 80px', borderRight: i < 3 ? `1px solid ${T.hair2}` : 'none', borderBottom: `1px solid ${T.hair2}`, position: 'relative', minHeight: 240 }}>
                <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 16 }}>0{i + 1}</div>
                <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 12 }}>{k}</div>
                <div style={{ fontSize: 14, color: T.body, lineHeight: 1.6 }}>{v}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// CATEGORIES — black tabs
function DCats() {
  const { t } = useLang();
  const [tab, setTab] = React.useState(0);
  return (
    <section style={{ padding: '120px 0', background: T.ink, color: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={260} top="20%" right="-80px" color={T.gold} opacity={0.1} dur={24} />
      <div style={dx.container}>
        <DSH s={t.sec.cats} dark />
        <div style={{ display: 'grid', gridTemplateColumns: '360px 1fr', gap: 32 }}>
          <div style={{ borderTop: `1px solid rgba(255,255,255,0.4)` }}>
            {t.cats.map((c, i) => (
              <button key={c[0]} onClick={() => setTab(i)} style={{
                background: tab === i ? T.gold : 'transparent', color: tab === i ? T.ink : T.white,
                border: 'none', borderBottom: `1px solid rgba(255,255,255,0.14)`, padding: '22px 18px',
                width: '100%', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
                display: 'grid', gridTemplateColumns: '40px 1fr 24px', alignItems: 'center', gap: 12,
                transition: 'background .25s ease, color .25s ease',
              }}>
                <span style={{ ...TX.mono, fontSize: 10, color: tab === i ? T.ink : T.gold }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em' }}>{c[0]}</span>
                <span style={{ textAlign: 'right' }}>{tab === i ? '◆' : '→'}</span>
              </button>
            ))}
          </div>
          <Reveal key={tab}>
            <div style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid rgba(255,255,255,0.18)`, padding: 48, minHeight: 420, position: 'relative', overflow: 'hidden' }}>
              <Diamond size={200} bottom="-60px" right="-60px" color={T.gold} opacity={0.16} dur={20} />
              <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 16 }}>0{tab + 1} / 0{t.cats.length}</div>
              <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 18, color: T.white, lineHeight: 1.05 }}>{t.cats[tab][0]}</div>
              <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, margin: '0 0 28px', maxWidth: 620 }}>{t.cats[tab][1]}</p>
              <div style={{ borderTop: `1px solid rgba(255,255,255,0.18)`, paddingTop: 18, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {t.cats[tab][2].map((tg) => (<span key={tg} style={{ ...TX.mono, fontSize: 10, padding: '8px 12px', border: `1px solid rgba(255,255,255,0.3)`, color: T.white }}>{tg}</span>))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// EXPERTS — paper
// 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. The body uses the new object shape.
function DExperts() {
  const { t } = useLang();
  return (
    <section style={{ padding: '120px 0', background: T.paper, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={180} top="80px" right="6%" color={T.gold} opacity={0.16} dur={20} />
      <div style={dx.container}>
        <DSH s={t.sec.experts} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
          {t.team.map((m, i) => (
            <Reveal key={m.name} delay={i * 80}>
              <div style={{
                background: T.white, border: `1px solid ${T.hair}`,
                transition: 'transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 18px 36px rgba(11,15,20,0.08)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
                <Portrait gender={m.gender} initials={m.initials} i={i} />
                <div style={{ padding: '20px 18px 22px', borderTop: `1px solid ${T.hair}` }}>
                  <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 6 }}>{m.country}</div>
                  <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: '-0.015em', marginBottom: 6, lineHeight: 1.2 }}>{m.name}</div>
                  <div style={{ fontSize: 13, color: T.ink, marginBottom: 4 }}>{m.role}</div>
                  <div style={{ fontSize: 12, color: T.mute, lineHeight: 1.5 }}>{m.brief}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// VOICES — graphite
function DVoices() {
  const { t } = useLang();
  return (
    <section style={{ padding: '120px 0', background: T.graphite, color: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={300} top="-100px" left="-100px" color={T.gold} opacity={0.08} dur={24} />
      <Diamond size={120} bottom="10%" right="-40px" color={T.gold} opacity={0.5} fill dur={16} delay={1} />
      <div style={dx.container}>
        <DSH s={t.sec.voices} dark />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: `1px solid rgba(255,255,255,0.4)` }}>
          {t.voices.map((row, i) => {
            const [q, name, country, ctx] = row.length === 4 ? row : [row[0], row[1], '', row[2]];
            const cols = 4;
            return (
              <Reveal key={name + i} delay={i * 60}>
                <div style={{
                  padding: '28px 22px',
                  borderRight: (i + 1) % cols !== 0 ? `1px solid rgba(255,255,255,0.14)` : 'none',
                  borderBottom: `1px solid rgba(255,255,255,0.14)`,
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  minHeight: 280,
                  transition: 'background .25s ease',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.03)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
                  <div>
                    <div style={{ ...TX.mono, fontSize: 9, color: T.gold, marginBottom: 14, letterSpacing: '0.14em' }}>{t.statementWord} {String(i + 1).padStart(2, '0')}</div>
                    <p style={{ fontSize: 14.5, lineHeight: 1.55, color: T.white, margin: 0, letterSpacing: '-0.003em' }}>«{q}»</p>
                  </div>
                  <div style={{ borderTop: `1px solid rgba(255,255,255,0.18)`, paddingTop: 12, marginTop: 22 }}>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{name}</div>
                    <div style={{ ...TX.mono, fontSize: 9, marginTop: 4, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.1em' }}>
                      {country ? country.toUpperCase() + ' · ' : ''}{ctx}
                    </div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// FAQ — white
function DFAQ() {
  const { t } = useLang();
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '120px 0', background: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={200} top="60px" right="6%" color={T.gold} opacity={0.14} dur={20} />
      <div style={dx.container}>
        <DSH s={t.sec.faq} />
        <div style={{ borderTop: `1px solid ${T.ink}` }}>
          {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: '28px 4px', cursor: 'pointer', textAlign: 'left',
                  display: 'grid', gridTemplateColumns: '110px 1fr 32px', gap: 24, alignItems: 'center', fontFamily: 'inherit',
                }}>
                  <span style={{ ...TX.mono, fontSize: 11, color: T.gold }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{ fontSize: 22, fontWeight: 500, color: T.ink, letterSpacing: '-0.015em' }}>{q[0]}</span>
                  <span style={{ width: 28, height: 28, 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)', justifySelf: 'end', color: T.gold }}>+</span>
                </button>
                <div style={{ maxHeight: isOpen ? 240 : 0, overflow: 'hidden', transition: 'max-height .45s cubic-bezier(.2,.7,.2,1)' }}>
                  <div style={{ padding: '0 4px 28px 134px', color: T.body, fontSize: 16, lineHeight: 1.6, maxWidth: 880 }}>{q[1]}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// CTA — black with form
function DCTA() {
  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: '120px 0', background: T.ink, color: T.white, position: 'relative', overflow: 'hidden' }}>
      <Diamond size={500} bottom="-200px" right="-200px" color={T.gold} opacity={0.08} dur={28} />
      <Diamond size={140} top="20%" left="6%" color={T.gold} opacity={0.5} fill dur={16} />
      <div style={{ ...dx.container, position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'start' }}>
        <div>
          <Kicker>§ {t.sec.cta.num} · {t.sec.cta.kicker}</Kicker>
          <Reveal>
            <h2 style={{ ...TX.display, fontSize: 'clamp(40px, 4.4vw, 60px)', lineHeight: 1.05, margin: '20px 0 18px', color: T.white, textWrap: 'balance' }}>{t.sec.cta.title}</h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.72)', lineHeight: 1.55, margin: '0 0 28px', maxWidth: 480 }}>{t.sec.cta.intro}</p>
          </Reveal>

          {/* PREMIUM CHANNEL CARDS */}
          <Reveal delay={180}>
            <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 12, letterSpacing: '0.14em' }}>
              {(c.channelsTitle || 'КАНАЛЫ СВЯЗИ').toUpperCase()}
            </div>
            <div role="list" style={{ display: 'grid', gap: 8, maxWidth: 460, marginBottom: 28 }}>
              {channels.map((ch, i) => (
                <a key={i} href={ch.href}
                   target={ch.external ? '_blank' : undefined}
                   rel={ch.external ? 'noopener noreferrer' : undefined}
                   role="listitem"
                   onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(164,136,79,0.10)'; e.currentTarget.style.transform = 'translateX(4px)'; }}
                   onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; e.currentTarget.style.transform = 'translateX(0)'; }}
                   style={{
                     display: 'grid', gridTemplateColumns: '44px 1fr 24px', alignItems: 'center', gap: 16,
                     padding: '16px 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: 38, height: 38, 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>
                    <span style={{ display: 'block', fontSize: 15, fontWeight: 600 }}>{ch.label}</span>
                    <span style={{ display: 'block', fontSize: 12, color: 'rgba(255,255,255,0.62)' }}>{ch.sub}</span>
                  </span>
                  <span style={{ color: T.gold, fontSize: 18 }}>→</span>
                </a>
              ))}
            </div>
          </Reveal>

          <div style={{ display: 'grid', maxWidth: 460, borderTop: '1px solid rgba(255,255,255,0.2)' }}>
            {t.ctaSide.map(([k, v], i) => (
              <Reveal key={k} delay={i * 100}>
                <div style={{ display: 'grid', gridTemplateColumns: '14px 1fr 1fr', gap: 14, padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.2)', alignItems: 'center' }}>
                  <span style={{ width: 9, height: 9, background: T.gold, transform: 'rotate(45deg)' }} />
                  <span style={{ fontSize: 14, color: T.white }}>{k}</span>
                  <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', textAlign: 'right' }}>{v}</span>
                </div>
              </Reveal>
            ))}
          </div>

          <div style={{ ...TX.mono, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.1em', marginTop: 18, lineHeight: 1.6 }}>
            {(c.replyNote || 'Первый отклик — в течение 2 рабочих дней. Все обращения конфиденциальны.').toUpperCase()}
          </div>
        </div>
        <Reveal>
          <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.2)', padding: 40 }}>
            {sent ? (
              <div>
                <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 12 }}>{F.sentMark}</div>
                <div style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 12 }}>{F.sentTitle}</div>
                <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)' }}>{F.sentBody}</div>
              </div>
            ) : (
              <form onSubmit={submit} noValidate aria-busy={sending} style={{ display: 'grid', gap: 14 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <DInp label={F.name}    v={form.name}    onChange={(v) => setField('name', v)}    placeholder={F.placeholders.name}    err={errors.name    ? F.errors.name  : ''} disabled={sending} req autoComplete="name" />
                  <DInp 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" />
                  <DInp 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" />
                  <DInp label={F.country} v={form.country} onChange={(v) => setField('country', v)} placeholder={F.placeholders.country} disabled={sending} />
                  <DInp 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>
                <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, fontFamily: 'inherit', lineHeight: 1.5,
                             borderColor: errors.desc ? '#C26959' : 'rgba(255,255,255,0.2)' }} />
                  {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={{
                  background: sending ? 'rgba(164,136,79,0.55)' : T.gold, color: T.ink, border: 'none',
                  padding: '22px 24px', fontSize: 13, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase',
                  cursor: sending ? 'wait' : 'pointer', fontFamily: 'inherit',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6,
                  transition: 'background .2s ease',
                }}>
                  <span>{sending ? F.sending : (errored ? F.retry : F.submit)}</span><span>→</span>
                </button>
                <div style={{ ...TX.mono, fontSize: 9, color: 'rgba(255,255,255,0.45)', lineHeight: 1.6, textTransform: 'none', letterSpacing: '0.04em' }}>{F.legal}</div>
              </form>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function DInp({ 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.2)' }} />
      {err && <div role="alert" style={{ ...TX.mono, fontSize: 9, color: '#E2A39A', letterSpacing: '0.08em', marginTop: 4 }}>{err}</div>}
    </div>
  );
}

// FOOTER — graphite
function DFooter() {
  const { t, lang } = useLang();
  const f = t.footer;
  return (
    <footer style={{ background: T.graphite, color: T.white, padding: '70px 0 26px', position: 'relative', overflow: 'hidden' }}>
      <Diamond size={200} top="-60px" right="-60px" color={T.gold} opacity={0.1} dur={22} />
      <div style={dx.container}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr', gap: 32, paddingBottom: 50 }}>
          <div>
            <div style={{ marginBottom: 18 }}><DWordmark light /></div>
            <p style={{ color: 'rgba(255,255,255,0.65)', fontSize: 14, lineHeight: 1.6, margin: '0 0 14px', maxWidth: 360 }}>{f.desc}</p>
            <address style={{ fontStyle: 'normal', fontSize: 12, color: 'rgba(255,255,255,0.55)', lineHeight: 1.7 }}>
              De Vries &amp; Partners B.V.<br />
              Hoofdvestiging · Waspik, Benedenkerkstraat 1<br />
              {lang === 'ru' ? 'Нидерланды' : 'Netherlands'} · KVK 27164831
            </address>
          </div>
          <DFC title={f.contact} rows={f.contactRows} />
          <DFC title={f.channels} rows={f.channelRows} />
          <div>
            <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 12 }}>{f.sitemap}</div>
            <div style={{ display: 'grid', gap: 8 }}>
              {[
                [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' }}>{label}</a>
              ))}
            </div>
          </div>
          <div>
            <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 12 }}>{t.legalCol.title.toUpperCase()}</div>
            <div style={{ display: 'grid', gap: 8 }}>
              {t.legalCol.links.map(([label, to]) => (
                <a key={to} href={'#' + to} style={{ fontSize: 13, color: 'rgba(255,255,255,0.78)', textDecoration: 'none' }}>{label}</a>
              ))}
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.14)', paddingTop: 22, display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 32 }}>
          <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', lineHeight: 1.6, margin: 0 }}>{f.legal}</p>
          <div style={{ ...TX.mono, fontSize: 10, color: 'rgba(255,255,255,0.45)', alignSelf: 'end', textAlign: 'right', textTransform: 'none', letterSpacing: '0.04em' }}>{f.copy}</div>
        </div>
      </div>
    </footer>
  );
}

function DFC({ title, rows }) {
  return (
    <div>
      <div style={{ ...TX.mono, fontSize: 10, color: T.gold, marginBottom: 12 }}>{title}</div>
      <div style={{ display: 'grid', gap: 10 }}>
        {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', borderBottom: '1px solid transparent', transition: 'border-color .15s ease, color .15s ease' }}
                   onMouseEnter={(e) => { e.currentTarget.style.borderBottomColor = T.gold; e.currentTarget.style.color = T.gold; }}
                   onMouseLeave={(e) => { e.currentTarget.style.borderBottomColor = 'transparent'; e.currentTarget.style.color = 'rgba(255,255,255,0.92)'; }}>
                  {v}
                </a>
              ) : <span style={{ color: 'rgba(255,255,255,0.92)' }}>{v}</span>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DesktopHomepage() {
  return (
    <div style={dx.page} data-screen-label="Desktop Homepage">
      <DUtil />
      <DNav />
      <DHero />
      <XAbout />
      <DStrip />
      <XWhy />
      <DPractices />
      <XProcessExt />
      <DMethod />
      <XEvidence />
      <DFocus />
      <DTrust />
      <DCats />
      <XStats />
      {/* Experts block lives on /specialists now — no longer rendered here. */}
      <DVoices />
      <DFAQ />
      <DCTA />
      <XContact />
      <DFooter />
    </div>
  );
}

Object.assign(window, { DesktopHomepage });