/* global React */
function Hero({ onOpenContact }) {
  const wrap = {
    paddingTop: '120px', paddingBottom: '160px',
    borderBottom: '1px solid var(--ink)',
  };
  const grid = {
    display: 'grid', gridTemplateColumns: '1fr', gap: '64px',
  };
  const eyebrowRow = {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    paddingBottom: '16px', borderBottom: '1px solid var(--border)',
  };
  const display = {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(64px, 9.5vw, 144px)',
    fontWeight: 500, lineHeight: 0.98, letterSpacing: '-0.045em',
    color: 'var(--ink)', margin: 0, maxWidth: '14ch',
  };
  const dot = { color: 'var(--graphite)' };

  const subRow = {
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '64px', alignItems: 'start',
    paddingTop: '32px', borderTop: '1px solid var(--border)',
  };
  const lead = {
    fontSize: '22px', lineHeight: 1.45, color: 'var(--warm-700)',
    margin: 0, maxWidth: '38ch', letterSpacing: '-0.01em',
  };
  const cta = { display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' };
  const metaCol = { display: 'flex', flexDirection: 'column', gap: '6px' };
  const metaLabel = {
    fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--warm-500)',
  };

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section style={wrap} id="top">
      <div className="container">
        <div style={grid}>
          <div style={eyebrowRow}>
            <span className="eyebrow"><span className="dot"></span> Implementação de IA · Enterprise</span>
            <span style={metaLabel}>São Paulo · BR</span>
          </div>
          <h1 style={display}>
            Seu parceiro na implementação de IA<span style={dot}>.</span>
          </h1>
          <div style={subRow}>
            <p style={lead}>
              A Moore AI implementa agentes de IA que transformam a produtividade do seu time. Do diagnóstico ao agente em operação, integrado às ferramentas que vocês já usam.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', alignItems: 'flex-start' }}>
              <div style={cta}>
                <button className="btn primary" onClick={onOpenContact}>Agendar diagnóstico <span>→</span></button>
                <a href="#processo" className="btn secondary" onClick={scrollTo('processo')}>Ver processo</a>
              </div>
              <div style={{ display: 'flex', gap: '48px', flexWrap: 'wrap' }}>
                <div style={metaCol}>
                  <span style={metaLabel}>Foco</span>
                  <span style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 500 }}>Agentes em produção</span>
                </div>
                <div style={metaCol}>
                  <span style={metaLabel}>Público</span>
                  <span style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 500 }}>Times enterprise</span>
                </div>
                <div style={metaCol}>
                  <span style={metaLabel}>Disponível</span>
                  <span style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 500 }}>2025</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;