/* global React */
function Contact({ onOpenContact }) {
  const wrap = { background: 'var(--ink)', color: 'var(--cream)', padding: '160px 0', position: 'relative', overflow: 'hidden' };
  const inner = {
    display: 'grid', gridTemplateColumns: '7fr 5fr', gap: '96px', alignItems: 'start',
    paddingBottom: '64px', borderBottom: '1px solid rgba(246,244,239,0.18)',
  };
  const eyebrow = {
    fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--warm-400)',
    display: 'inline-flex', alignItems: 'center', gap: '10px',
  };
  const dot = { width: 6, height: 6, background: 'var(--accent-on-ink)', display: 'inline-block' };
  const big = {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(56px, 8vw, 120px)', fontWeight: 500,
    lineHeight: 0.98, letterSpacing: '-0.04em', color: 'var(--cream)', margin: '24px 0 0',
    maxWidth: '12ch',
  };
  const accent = { color: 'var(--accent-on-ink)' };
  const lead = {
    fontSize: '20px', lineHeight: 1.5, color: 'var(--warm-300)', margin: '24px 0 0',
    maxWidth: '34ch',
  };

  const ctaRow = {
    display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap',
    paddingTop: '40px',
  };

  const detailGrid = {
    display: 'grid', gridTemplateColumns: '1fr', gap: '32px',
  };
  const detailLabel = {
    fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--warm-400)', display: 'block', marginBottom: '8px',
  };
  const detailValue = { fontSize: '16px', color: 'var(--cream)', fontWeight: 500, margin: 0 };
  const detailValueSub = { fontSize: '14px', color: 'var(--warm-300)', margin: '4px 0 0' };

  return (
    <section style={wrap} id="contato" className="on-ink">
      <img
        src="assets/mark-light.svg"
        alt=""
        aria-hidden="true"
        width="220" height="220"
        style={{ position: 'absolute', top: '64px', right: '48px', opacity: 0.18, pointerEvents: 'none' }}
      />
      <div className="container" style={{ position: 'relative' }}>
        <div style={inner}>
          <div>
            <span style={eyebrow}><span style={dot}></span> Contato · 05</span>
            <h2 style={big}>
              Vamos<br/>conversar<span style={accent}>.</span>
            </h2>
            <p style={lead}>
              Conte onde sua operação ainda perde tempo. Voltamos em até 24 horas úteis com uma proposta de conversa.
            </p>
            <div style={ctaRow}>
              <button className="btn ink-inverse" onClick={onOpenContact}>
                Agendar diagnóstico <span>→</span>
              </button>
              <a href="mailto:contato@getmoore.ai" className="btn secondary" style={{ borderColor: 'var(--cream)', color: 'var(--cream)' }}>
                contato@getmoore.ai
              </a>
            </div>
          </div>

          <div style={detailGrid}>
            <div>
              <span style={detailLabel}>Onde estamos</span>
              <p style={detailValue}>São Paulo · BR</p>
              <p style={detailValueSub}>R. Placeholder, 000 · Itaim Bibi</p>
            </div>
            <div>
              <span style={detailLabel}>Resposta</span>
              <p style={detailValue}>24 horas úteis</p>
              <p style={detailValueSub}>Sem auto-reply. Quem responde é do time.</p>
            </div>
            <div>
              <span style={detailLabel}>Para imprensa</span>
              <p style={detailValue}>press@getmoore.ai</p>
              <p style={detailValueSub}>Material institucional sob demanda.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;