/** CRAiD UI kit — Hero */
function Hero() {
  return (
    <section style={heroStyles.section}>
      <div style={heroStyles.bgVert} />
      <div style={heroStyles.bgCloud} />
      <div style={heroStyles.bgRadial} />

      <div style={heroStyles.inner}>
        <div style={heroStyles.pill}>
          <span style={heroStyles.dot} />
          <span style={heroStyles.pillText}>Design Consultancy for the Agentic Era</span>
        </div>

        <h1 style={heroStyles.h1}>
          Human-first<br />
          <span style={{ color: 'var(--primary)' }}>agentic era.</span>
        </h1>

        <p style={heroStyles.lead}>
          We are the consultancy that lives the future of work. Every day,
          our humans and AI agents ship outcomes together — and we help your
          organization do the same.
        </p>

        <div style={heroStyles.ctaRow}>
          <button style={heroStyles.primary}>Talk to Doro</button>
          <button style={heroStyles.secondary}>See how we work</button>
        </div>

        <div style={heroStyles.proof}>
          <span style={heroStyles.overlineSm}>Trusted by</span>
          <div style={heroStyles.logos}>
            {['ALLIANZ', 'DEUTSCHE BANK', 'BMW', 'SIEMENS', 'BOSCH'].map((l) => (
              <span key={l} style={heroStyles.logoTxt}>{l}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const heroStyles = {
  section: { position: 'relative', overflow: 'hidden', padding: '120px 48px 128px' },
  bgVert: { position: 'absolute', inset: 0, background: 'var(--grad-hero-vertical)', zIndex: 0 },
  bgCloud: {
    position: 'absolute', inset: 0, backgroundImage: 'url(../../assets/cloud-bg.png)',
    backgroundSize: 'cover', backgroundPosition: 'center', opacity: 0.22, zIndex: 1,
  },
  bgRadial: { position: 'absolute', inset: 0, background: 'var(--grad-hero-radial)', zIndex: 2 },
  inner: { position: 'relative', zIndex: 3, maxWidth: 1100, margin: '0 auto', textAlign: 'center' },

  pill: {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '8px 18px', borderRadius: 9999,
    background: 'rgba(255,255,255,0.65)',
    border: '1px solid var(--border)',
    backdropFilter: 'blur(8px)',
    marginBottom: 32,
  },
  dot: { width: 8, height: 8, borderRadius: '50%', background: 'var(--primary)', animation: 'pulse-pink 2s ease-in-out infinite' },
  pillText: {
    fontSize: 12, fontWeight: 400, letterSpacing: '0.1em',
    textTransform: 'uppercase', color: 'var(--fg-muted)',
  },

  h1: {
    fontSize: 'clamp(3rem, 8vw, 7rem)',
    fontWeight: 300, lineHeight: 0.95, letterSpacing: '-0.025em',
    margin: '0 0 32px', color: 'var(--fg)',
  },
  lead: {
    fontSize: 'clamp(1.1rem, 1.3vw, 1.3rem)',
    fontWeight: 300, lineHeight: 1.625, color: 'var(--fg-muted)',
    maxWidth: 640, margin: '0 auto 40px',
  },

  ctaRow: { display: 'flex', gap: 16, justifyContent: 'center', marginBottom: 96 },
  primary: {
    background: 'var(--primary)', color: '#fff', border: 0, cursor: 'pointer',
    padding: '16px 36px', borderRadius: 9999, fontWeight: 600, fontSize: 16, fontFamily: 'inherit',
  },
  secondary: {
    background: 'transparent', color: 'var(--fg)',
    padding: '16px 36px', borderRadius: 9999,
    border: '1px solid var(--border)',
    fontWeight: 500, fontSize: 16, fontFamily: 'inherit', cursor: 'pointer',
  },

  proof: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 },
  overlineSm: {
    fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase',
    color: 'var(--fg-subtle)', fontWeight: 500,
  },
  logos: { display: 'flex', gap: 48, flexWrap: 'wrap', justifyContent: 'center' },
  logoTxt: { fontSize: 13, fontWeight: 600, letterSpacing: '0.05em', color: 'var(--fg-subtle)' },
};

window.Hero = Hero;