function Contact() {
  const { t } = window.useT();
  return (
    <section style={ctcStyles.wrap} id="contact">
      <div style={ctcStyles.inner}>
        <div style={ctcStyles.left}>
          <div style={ctcStyles.eyebrow}>{t('ctc.eyebrow')}</div>
          <h2 style={ctcStyles.h2}>
            {t('ctc.h2.a')}<span style={{color:'var(--cyan-400)'}}>{t('ctc.h2.b')}</span>
          </h2>
          <p style={ctcStyles.lede}>{t('ctc.lede')}</p>

          <div style={ctcStyles.details}>
            <div style={ctcStyles.detailRow}>
              <span style={ctcStyles.detailLabel}>{t('ctc.email')}</span>
              <a href="mailto:mtzstrategies@gmail.com" style={ctcStyles.detailLink}>mtzstrategies@gmail.com</a>
            </div>
            <div style={ctcStyles.detailRow}>
              <span style={ctcStyles.detailLabel}>{t('ctc.linkedin')}</span>
              <a href="https://www.linkedin.com/in/mtzstrategies" target="_blank" rel="noreferrer" style={ctcStyles.detailLink}>linkedin.com/in/mtzstrategies</a>
            </div>
            <div style={ctcStyles.detailRow}>
              <span style={ctcStyles.detailLabel}>{t('ctc.operating')}</span>
              <a href="https://am-digital-solutions.pages.dev/" target="_blank" rel="noreferrer" style={ctcStyles.detailLink}>AM Digital Solutions ↗</a>
            </div>
            <div style={ctcStyles.detailRow}>
              <span style={ctcStyles.detailLabel}>{t('ctc.ai')}</span>
              <a href="tel:+19568151714" style={{...ctcStyles.detailLink, color: 'var(--cyan-400)'}}>
                <span style={ctcStyles.pulse}/> (956) 815-1714
              </a>
            </div>
            <div style={ctcStyles.detailRow}>
              <span style={ctcStyles.detailLabel}>{t('ctc.based')}</span>
              <span style={ctcStyles.detailValue}>{t('ctc.basedVal')}</span>
            </div>
            <div style={{...ctcStyles.detailRow, borderBottom: 'none', paddingBottom: 0}}>
              <span style={ctcStyles.detailLabel}>{t('ctc.avail')}</span>
              <span style={{...ctcStyles.detailValue, color: 'var(--signal-success)'}}>{t('ctc.availVal')}</span>
            </div>
          </div>

          <div style={ctcStyles.calendarNote}>
            <div style={ctcStyles.calendarNoteHead}>
              <span style={ctcStyles.calendarNoteBadge}>{t('ctc.calNote.badge')}</span>
              <span style={ctcStyles.calendarNoteTitle}>{t('ctc.calNote.title')}</span>
            </div>
            <p style={ctcStyles.calendarNoteBody}>{t('ctc.calNote.body')}</p>
          </div>
        </div>

        <div style={ctcStyles.right}>
          <div style={ctcStyles.formCard}>
            <div style={ctcStyles.formHead}>
              <span style={ctcStyles.formTitle}>{t('ctc.form.title')}</span>
              <span style={ctcStyles.formMeta}>{t('ctc.form.meta')}</span>
            </div>
            <div style={ctcStyles.field}>
              <label style={ctcStyles.label}>{t('ctc.form.name')}</label>
              <input style={ctcStyles.input} placeholder={t('ctc.form.namePh')} />
            </div>
            <div style={ctcStyles.field}>
              <label style={ctcStyles.label}>{t('ctc.form.email')}</label>
              <input style={ctcStyles.input} placeholder={t('ctc.form.emailPh')} />
            </div>
            <div style={ctcStyles.field}>
              <label style={ctcStyles.label}>{t('ctc.form.what')}</label>
              <textarea style={{...ctcStyles.input, minHeight: 96, resize: 'vertical', fontFamily: 'Inter'}}
                        placeholder={t('ctc.form.whatPh')} />
            </div>
            <div style={ctcStyles.field}>
              <label style={ctcStyles.label}>{t('ctc.form.type')}</label>
              <div style={ctcStyles.chips}>
                {[
                  t('ctc.form.chip1'), t('ctc.form.chip2'), t('ctc.form.chip3'),
                  t('ctc.form.chip4'), t('ctc.form.chip5'), t('ctc.form.chip6'),
                ].map(c => (
                  <span key={c} style={ctcStyles.chip}>{c}</span>
                ))}
              </div>
            </div>
            <a
              href="mailto:mtzstrategies@gmail.com?subject=Discovery%20call%20request&body=Name%3A%20%0AEmail%3A%20%0A%0AWhat%20system%20are%20you%20trying%20to%20build%3F%0A"
              style={ctcStyles.submit}
            >
              {t('ctc.form.submit')}
            </a>
            <div style={ctcStyles.formFoot}>
              {t('ctc.form.foot.a')}<a href="mailto:mtzstrategies@gmail.com" style={ctcStyles.formFootLink}>mtzstrategies@gmail.com</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const ctcStyles = {
  wrap: { padding: '96px 32px', background: 'var(--ink-950)', borderTop: '1px solid var(--border-subtle)' },
  inner: { maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start' },
  left: { display: 'flex', flexDirection: 'column', gap: 20 },
  eyebrow: { fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--cyan-400)', letterSpacing: '0.14em', textTransform: 'uppercase' },
  h2: { fontFamily: 'Montserrat', fontWeight: 700, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--fg-1)', margin: 0 },
  lede: { fontFamily: 'Inter', fontSize: 17, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, maxWidth: 480 },
  details: {
    display: 'flex', flexDirection: 'column', gap: 14, marginTop: 16, padding: 24,
    background: 'var(--ink-900)', border: '1px solid var(--border-default)', borderRadius: 12,
  },
  detailRow: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    paddingBottom: 14, borderBottom: '1px solid var(--border-subtle)', gap: 12,
  },
  detailLabel: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.14em' },
  detailValue: { fontFamily: 'Inter', fontWeight: 500, fontSize: 14, color: 'var(--fg-1)' },
  detailLink: {
    fontFamily: 'Inter', fontWeight: 500, fontSize: 14, color: 'var(--fg-1)',
    textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
  },
  pulse: {
    width: 8, height: 8, borderRadius: '50%', background: 'var(--signal-success)',
    boxShadow: '0 0 0 3px rgba(43,214,139,0.18)',
    animation: 'oi-pulse 1.6s ease-in-out infinite',
  },

  calendarNote: {
    marginTop: 8, padding: 20,
    background: 'var(--ink-800)', border: '1px dashed var(--border-blue)', borderRadius: 12,
  },
  calendarNoteHead: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 },
  calendarNoteBadge: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
    color: 'var(--yellow-400)', letterSpacing: '0.14em',
    padding: '3px 8px', borderRadius: 4,
    background: 'rgba(255,209,58,0.10)', border: '1px solid rgba(255,209,58,0.30)',
  },
  calendarNoteTitle: {
    fontFamily: 'Montserrat', fontWeight: 600, fontSize: 14, color: 'var(--fg-1)',
  },
  calendarNoteBody: {
    fontFamily: 'Inter', fontSize: 13, lineHeight: 1.55, color: 'var(--fg-3)', margin: 0,
  },

  right: {},
  formCard: { background: 'var(--ink-900)', border: '1px solid var(--border-default)', borderRadius: 16, padding: 32, display: 'flex', flexDirection: 'column', gap: 16 },
  formHead: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingBottom: 16, borderBottom: '1px solid var(--border-subtle)' },
  formTitle: { fontFamily: 'Montserrat', fontWeight: 600, fontSize: 17, color: 'var(--fg-1)' },
  formMeta: { fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.06em' },
  field: { display: 'flex', flexDirection: 'column', gap: 6 },
  label: { fontFamily: 'Inter', fontWeight: 500, fontSize: 12, color: 'var(--fg-3)' },
  input: { background: 'var(--ink-950)', border: '1px solid var(--border-default)', borderRadius: 8, padding: '11px 14px', fontFamily: 'Inter', fontSize: 14, color: 'var(--fg-1)', outline: 'none' },
  chips: { display: 'flex', flexWrap: 'wrap', gap: 8 },
  chip: { fontFamily: 'Inter', fontWeight: 500, fontSize: 12, padding: '6px 12px', borderRadius: 4, border: '1px solid var(--border-default)', color: 'var(--fg-2)', background: 'var(--ink-950)', cursor: 'pointer' },
  submit: {
    marginTop: 6,
    fontFamily: 'Montserrat', fontWeight: 600, fontSize: 14,
    background: 'var(--yellow-400)', color: 'var(--fg-on-yellow)',
    padding: '14px 22px', borderRadius: 10, border: 'none', cursor: 'pointer',
    boxShadow: 'var(--shadow-cta)',
    textDecoration: 'none', textAlign: 'center',
  },
  formFoot: { fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--fg-3)', textAlign: 'center', letterSpacing: '0.06em', marginTop: 4 },
  formFootLink: { color: 'var(--cyan-400)', textDecoration: 'none' },
};