// Hero + background layers
function Hero({ layout, demo, t }) {
  const HeroContent = (
    <>
      <div style={{ display: 'flex', gap: 6, marginBottom: 24, flexWrap: 'wrap' }}>
        <Pill tone="brand" icon={<Spark size={10} color="var(--brand)"/>}>{t.badge_agents}</Pill>
        <Pill tone="accent" icon={<FleurDot size={9}/>}>{t.fait_au_quebec}</Pill>
        <Pill tone="neutral">{t.loi_25}</Pill>
      </div>
      <h1 style={{
        fontFamily: 'var(--font-display)',
        fontSize: 'clamp(42px, 5.4vw, 80px)',
        lineHeight: 0.96,
        letterSpacing: '-0.035em',
        margin: 0,
        fontWeight: 500,
        color: 'var(--ink)',
        textWrap: 'balance',
      }}>
        {t.hero_l1}<br/>
        <span className="gradient-text">{t.hero_l2}</span> {t.hero_l3}
      </h1>
      <p style={{
        fontFamily: 'var(--font-ui)',
        fontSize: 'clamp(16px, 1.2vw, 18px)',
        lineHeight: 1.55,
        color: 'var(--ink-soft)',
        maxWidth: 520,
        marginTop: 24,
        textWrap: 'pretty',
        fontWeight: 400,
      }}>{t.hero_sub}</p>
      <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
        <Button href="/contact" variant="primary" size="lg" icon={<ArrowRight/>}>{t.cta_diag}</Button>
        <Button href="/#verticals" variant="secondary" size="lg">{t.cta_demo}</Button>
      </div>
      <div style={{ display: 'flex', gap: 20, marginTop: 32, flexWrap: 'wrap', color: 'var(--ink-faint)', fontSize: 12.5, fontFamily: 'var(--font-mono)', letterSpacing: '0.02em' }}>
        <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><Check size={12} color="var(--brand)"/> {t.hero_p1}</span>
        <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><Check size={12} color="var(--brand)"/> {t.hero_p2}</span>
        <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><Check size={12} color="var(--brand)"/> {t.hero_p3}</span>
      </div>
    </>
  );

  if (layout === 'centered') {
    return (
      <section className="hero-section" style={{ padding: '80px 32px 60px', textAlign: 'center', position: 'relative' }}>
        <HeroAura/>
        <div style={{ maxWidth: 880, margin: '0 auto', position: 'relative' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>{HeroContent}</div>
        </div>
        <div style={{ marginTop: 56, maxWidth: 1100, margin: '56px auto 0', position: 'relative' }}>
          <DemoPanel demo={demo} t={t}/>
        </div>
      </section>
    );
  }

  if (layout === 'fullbleed') {
    return (
      <section className="hero-section" style={{ position: 'relative', padding: '100px 32px 120px', overflow: 'hidden' }}>
        <HeroAura/>
        <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 1 }}>
          {HeroContent}
        </div>
        <div style={{ maxWidth: 1200, margin: '56px auto 0', position: 'relative', zIndex: 1 }}>
          <DemoPanel demo={demo} t={t}/>
        </div>
      </section>
    );
  }

  if (layout === 'terminal') {
    return (
      <section className="hero-section" style={{ padding: '60px 32px 40px', position: 'relative' }}>
        <HeroAura/>
        <div className="hero-grid" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center', position: 'relative' }}>
          <div>{HeroContent}</div>
          <DemoPanel demo="terminal" t={t}/>
        </div>
      </section>
    );
  }

  return (
    <section className="hero-section" style={{ padding: '70px 32px 40px', position: 'relative' }}>
      <HeroAura/>
      <div className="hero-grid" style={{ maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center', position: 'relative' }}>
        <div>{HeroContent}</div>
        <DemoPanel demo={demo} t={t}/>
      </div>
    </section>
  );
}

// Soft radial glow behind hero
function HeroAura() {
  return (
    <div aria-hidden style={{
      position: 'absolute', top: -100, left: '50%', transform: 'translateX(-50%)',
      width: '80%', maxWidth: 900, height: 500,
      background: 'radial-gradient(ellipse at center, var(--glow) 0%, transparent 60%)',
      filter: 'blur(60px)',
      pointerEvents: 'none',
      zIndex: 0,
    }}/>
  );
}

Object.assign(window, { Hero, HeroAura });