// Hero.jsx — Deep surface hero with marquee of WE SAY vocabulary
function Hero({ accent = 'teal' }) {
  const emColor = accent === 'parchment' ? 'var(--aq-parchment)' : accent === 'italic-only' ? 'var(--aq-parchment)' : 'var(--aq-teal)';
  const emStyle = accent === 'italic-only' ? { fontStyle: 'italic', color: emColor, borderBottom: '1px solid var(--aq-teal)', paddingBottom: 2 } : { fontStyle: 'italic', color: emColor };
  const vocab = [
    'Inside out', 'Co-build', 'Co-design', 'Co-implement',
    'Sticky workflows', 'Realistic limits', 'Until the capability is yours',
    'Inside your organization',
  ];

  return (
    <section id="top" style={{
      background: 'var(--aq-deep)',
      padding: '112px 40px 120px',
      borderBottom: '1px solid rgba(216,228,220,.10)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        {/* Brand wordmark — large */}
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 20,
          marginBottom: 64, paddingBottom: 28,
          borderBottom: '1px solid rgba(216,228,220,.14)',
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 72,
            color: 'var(--aq-parchment)', letterSpacing: '-0.025em', lineHeight: 1,
          }}>
            Accio<span style={{
              fontFamily: 'var(--font-body)', fontWeight: 500,
              color: 'var(--aq-teal)', letterSpacing: '-0.01em',
            }}>IQ</span>
          </div>
          <div style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
            fontSize: 22, color: 'var(--aq-sage)', letterSpacing: '-0.005em',
          }}>
            AI from the inside out.
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end',
          gap: 48, marginBottom: 56,
        }}>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 400, fontSize: 11,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--aq-teal)',
          }}>
            AccioIQ · AI Consulting & Upskilling
          </div>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 12,
            color: 'var(--aq-sage)', letterSpacing: '0.04em',
          }}>
            Est. 2024 · Confidential engagements
          </div>
        </div>

        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 92,
          lineHeight: 1.0, letterSpacing: '-0.018em',
          color: 'var(--aq-parchment)', margin: 0, maxWidth: '15ch',
        }}>
          Transforming organizations from the <em style={emStyle}>inside out.</em>
        </h1>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 96,
          marginTop: 72, alignItems: 'start',
        }}>
          <p style={{
            fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 19,
            lineHeight: 1.6, color: 'var(--aq-parchment)',
            margin: 0, maxWidth: 560,
          }}>
            Most AI consulting hands you a roadmap and leaves. <span style={{ color: 'var(--aq-teal)' }}>We stay until the capability is genuinely yours.</span> We embed with your teams, learn your workflows, and solve the social and organizational change problems that prevent AI adoption.
          </p>
          <div style={{
            borderLeft: '1px solid rgba(216,228,220,.25)', paddingLeft: 32,
          }}>
            <div className="aq-eyebrow" style={{ color: 'var(--aq-sage)', marginBottom: 16 }}>
              Three registers, one engagement
            </div>
            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: 1.4,
              color: 'var(--aq-parchment)',
            }}>
              {['Leadership', 'Labs', 'Teams'].map((r, i) => (
                <li key={r} style={{
                  display: 'flex', alignItems: 'baseline', gap: 16,
                  padding: '10px 0',
                  borderBottom: i < 2 ? '1px solid rgba(216,228,220,.12)' : 'none',
                }}>
                  <span style={{
                    fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 400,
                    letterSpacing: '0.22em', color: 'var(--aq-teal)', width: 28,
                  }}>0{i+1}</span>
                  <span style={{ fontStyle: i === 1 ? 'italic' : 'normal' }}>{r}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 64 }}>
          <a href="#contact" className="aq-btn aq-btn--primary"
             style={{ background: 'var(--aq-teal)', color: 'var(--aq-deep)', borderColor: 'transparent' }}>
            Request a consultation →
          </a>
          <a href="#method" className="aq-btn aq-btn--ghost"
             style={{ color: 'var(--aq-parchment)', borderColor: 'rgba(216,228,220,.35)' }}>
            How we work
          </a>
        </div>

        {/* Vocabulary strip */}
        <div style={{
          marginTop: 112, paddingTop: 28,
          borderTop: '1px solid rgba(216,228,220,.12)',
          display: 'flex', flexWrap: 'wrap', gap: '8px 28px',
        }}>
          <span className="aq-eyebrow" style={{ color: 'var(--aq-sage)', marginRight: 12 }}>We say —</span>
          {vocab.map((v, i) => (
            <span key={v} style={{
              fontFamily: 'var(--font-body)', fontWeight: 300, fontSize: 12,
              color: i % 3 === 0 ? 'var(--aq-teal)' : 'var(--aq-sage)',
              letterSpacing: '0.02em',
            }}>
              {v}{i < vocab.length - 1 && <span style={{ opacity: 0.4, marginLeft: 28 }}>·</span>}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;