const { Wordmark: FootWordmark, Button: FootButton } = window.OctanexDesignSystem_0e3b75;
const FootIcon = window.OxIcon;

const FOOT_COLS = [
  { title: 'сервисы', links: ['накрутка тг', 'маркет юзернеймов', 'маркет рекламы', 'ии-студия'] },
  { title: 'компания', links: ['о проекте', 'цены', 'партнёрам', 'статус систем'] },
  { title: 'контакты', links: ['t.me/octanex', 'l@octanex.cc', 'partner@octanex.cc', 'поддержка 24/7'] },
];

function Footer({ onStart }) {
  return (
    <footer className="ox-grid-bg" style={{ position: 'relative', overflow: 'hidden', borderTop: '1px solid var(--border-hairline)' }}>
      <span className="ox-glow-spot" style={{ bottom: -360, left: '50%', transform: 'translateX(-50%)', width: 720, height: 720 }}></span>

      <div style={{ position: 'relative', maxWidth: 1000, margin: '0 auto', padding: '80px 32px 56px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(30px, 4.5vw, 52px)', letterSpacing: '-0.01em', lineHeight: 1.1, margin: '0 0 18px' }}>
          продвижение начинается<br />с одной команды
        </h2>
        <p style={{ fontSize: 16, color: 'var(--text-secondary)', margin: '0 0 28px' }}>регистрация бесплатна · демо ии-студии без пополнения</p>
        <FootButton size="lg" onClick={onStart}><FootIcon name="zap" size={16} /> начать — octanex.cc</FootButton>
      </div>

      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(220px, 1.4fr) repeat(3, 1fr)', gap: 40,
          padding: '48px 0 40px', borderTop: '1px solid var(--border-hairline)',
        }}>
          <div>
            <FootWordmark size={22} tagline mark />
            <p style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 16, maxWidth: 240, lineHeight: 1.6 }}>
              aio-панель под смм и e-com. накрутка, маркет активов и ии-студия с одного баланса.
            </p>
          </div>
          {FOOT_COLS.map((col) => (
            <div key={col.title}>
              <div className="ox-label" style={{ marginBottom: 14 }}>{col.title}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.links.map((l) => (
                  <li key={l}>
                    <a href="#" onClick={(e) => e.preventDefault()} style={{
                      fontFamily: col.title === 'контакты' ? 'var(--font-mono)' : 'var(--font-body)',
                      fontSize: 13, color: 'var(--text-secondary)', textDecoration: 'none',
                    }}
                      onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--text-accent)'; }}
                      onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--text-secondary)'; }}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
          padding: '20px 0 40px', borderTop: '1px solid var(--border-hairline)',
          fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-muted)',
        }}>
          <span>© 2026 o<span style={{ color: 'var(--accent)' }}>/</span>ctanex · все данные демонстрационные</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green-400)', boxShadow: '0 0 8px var(--green-400)' }}></span>
            все системы online
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });