/** Contact section — simple glass card with Telegram + email CTAs and meta. */

const CONTACT_META = (lang) => [
  { k: T(lang, 'РЕГИОН',         'REGION'),    v: 'Бишкек / Kyrgyzstan' },
  { k: T(lang, 'ЧАСОВОЙ ПОЯС',   'TIMEZONE'),  v: 'GMT+6' },
  { k: T(lang, 'СЛЕДУЮЩИЙ СЛОТ', 'NEXT SLOT'), v: T(lang, '12 мая 2026', 'May 12, 2026') },
];

const Contact = ({ lang }) => (
  <section id="contact" style={{ padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
    <div className="grid-bg" />
    <div
      className="glow-orb"
      style={{
        width: 500, height: 500,
        left: '50%', top: '-30%', transform: 'translateX(-50%)',
        background: 'rgba(102, 58, 243, 0.30)',
      }}
    />

    <div className="container" style={{ position: 'relative' }}>
      <div className="card-glass" style={{ padding: 56, textAlign: 'center', maxWidth: 880, margin: '0 auto' }}>
        <span className="section-eyebrow" style={{ justifyContent: 'center' }}>
          {T(lang, '03 / Связаться', '03 / Get in touch')}
        </span>

        <h2 className="section-title" style={{ marginTop: 20, maxWidth: 640, margin: '20px auto 0' }}>
          {T(lang, 'Расскажите о задаче.', 'Tell us about the task.')}
        </h2>

        <p style={{
          marginTop: 16, fontSize: 16,
          color: 'var(--color-arctic-mist)',
          maxWidth: 540, margin: '16px auto 0',
        }}>
          {T(lang,
            'Бриф можно прислать в любом виде — голосовое, скриншоты, ссылка на конкурента. Дальше мы сами зададим нужные вопросы.',
            'Send the brief however — a voice note, screenshots, a competitor link. We’ll take it from there with the right questions.'
          )}
        </p>

        <div style={{ marginTop: 32, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a className="btn-violet" href="https://t.me/codaro_it">@codaro_it · Telegram →</a>
          <a className="btn-outline" href="mailto:hi@codaro.studio">hi@codaro.studio</a>
        </div>

        <div data-grid="meta-row" style={{ marginTop: 40, display: 'flex', gap: 32, justifyContent: 'center', flexWrap: 'wrap' }}>
          {CONTACT_META(lang).map((row, i) => (
            <div key={i}>
              <div className="font-mono" style={{
                fontSize: 10, color: 'var(--color-whisper-blue)', letterSpacing: '0.16em',
              }}>{row.k}</div>
              <div style={{ marginTop: 4, fontSize: 13, color: 'var(--color-comet)' }}>{row.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

window.Contact = Contact;