// Hero.jsx — headline left, hex anchor + pattern right.

const heroStyles = {
  section: {
    position: 'relative',
    overflow: 'hidden',
    padding: '72px 0 96px',
  },
  banner: {
    position: 'absolute',
    top: 0, right: 0, bottom: 0,
    width: '50%',
    backgroundImage: 'url("08_assets-marque/design-system/assets/hero-banner.jpeg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center 35%',
    zIndex: 0,
  },
  bannerOverlay: {
    position: 'absolute',
    top: 0, right: 0, bottom: 0,
    width: '50%',
    background: 'rgba(246,244,238,.5)',
    zIndex: 0,
  },
  content: { position: 'relative', zIndex: 1 },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1.4fr 1fr',
    gap: 64,
    alignItems: 'center',
  },
  eyebrowRow: {
    display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24,
  },
  eyebrowDot: {
    width: 8, height: 8, borderRadius: '50%', background: '#34C797',
    boxShadow: '0 0 0 4px rgba(52,199,151,.18)',
    flexShrink: 0,
  },
  h1: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 600,
    fontSize: 'clamp(40px, 6vw, 80px)',
    lineHeight: 1.04,
    letterSpacing: '-0.025em',
    margin: 0,
    color: 'var(--ink-900)',
    textWrap: 'balance',
  },
  accent: { color: '#022F94' },
  sub: {
    fontSize: 19,
    lineHeight: 1.65,
    color: 'var(--mist-700)',
    maxWidth: 540,
    margin: '28px 0 40px',
  },
  band: {
    borderTop: '1px solid rgba(42, 26, 7,.10)',
    marginTop: 24,
    paddingTop: 20,
    display: 'flex',
    flexWrap: 'wrap',
    gap: '12px 32px',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 12,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    color: 'var(--mist-700)',
  },
  bandItem: { display: 'flex', alignItems: 'center', gap: 8 },
  ctas: { display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 32 },
  metaRow: {
    display: 'flex', gap: 28, marginTop: 8, flexWrap: 'wrap',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
    color: 'var(--mist-500)',
  },
  panel: {
    position: 'relative',
    aspectRatio: '1 / 1.05',
    maxWidth: 460,
    marginLeft: 'auto',
    background: 'var(--ink-900)',
    color: 'var(--paper)',
    padding: 28,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    boxShadow: '8px 8px 0 0 var(--blue-700), 14px 14px 0 0 var(--amber-500)',
    overflow: 'hidden',
  },
  pattern: {
    position: 'absolute',
    inset: 0,
    backgroundImage: 'url("08_assets-marque/design-system/assets/pattern-hexgrid.svg")',
    backgroundSize: '60px',
    opacity: 0.08,
    filter: 'invert(1)',
    pointerEvents: 'none',
  },
  bigNum: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 700,
    fontSize: 'clamp(96px, 14vw, 160px)',
    lineHeight: 0.9,
    letterSpacing: '-0.04em',
    color: 'var(--amber-500)',
    position: 'relative',
  },
  bigNumSmall: { fontSize: '0.35em', color: 'var(--paper)', verticalAlign: 'top' },
  panelLabel: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    color: 'var(--mist-200)',
    position: 'relative',
  },
  panelFooter: {
    position: 'relative',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
  panelMetric: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontSize: 24,
    fontWeight: 600,
    color: 'var(--paper)',
  },
};

const Hero = ({ onBookCall }) => (
  <section style={heroStyles.section} id="top">
    <div style={heroStyles.banner} aria-hidden="true" />
    <div style={heroStyles.bannerOverlay} aria-hidden="true" />
    <div style={heroStyles.content}>
    <div className="b2a-container b2a-grid-2" style={heroStyles.grid}>
      <div>
        <div style={heroStyles.eyebrowRow}>
          <span style={heroStyles.eyebrowDot} aria-hidden="true" />
          <p className="b2a-eyebrow" style={{ margin: 0 }}>
            // Agence IA · Montréal, Québec
          </p>
        </div>
        <h1 style={heroStyles.h1}>
          L'IA qui travaille,<br />
          pendant que <span style={heroStyles.accent}>vous</span> dirigez.
        </h1>
        <p style={heroStyles.sub}>
          On construit les agents IA qui prennent en charge le travail répétitif de votre
          entreprise — propositions, support client, tâches back-office — pour que votre
          équipe se concentre sur ce qui compte vraiment.
        </p>
        <div style={heroStyles.ctas}>
          <button className="b2a-btn b2a-btn-primary" onClick={onBookCall}>
            Réserver un appel de 20 min <Icon name="arrow-right" size={16} />
          </button>
          <a href="#offres" className="b2a-btn b2a-btn-ghost">Voir nos offres</a>
        </div>
        <div style={heroStyles.metaRow}>
          <span>LIVRAISON EN 2-4 SEMAINES</span>
          <span>PRIX FIXE</span>
          <span>VOUS GARDEZ LE CODE</span>
        </div>
      </div>
      <div style={heroStyles.panel} className="b2a-hero-panel">
        <div style={heroStyles.pattern} />
        <div style={heroStyles.panelLabel}>// AGENT EN PRODUCTION · EXEMPLE</div>
        <div style={heroStyles.bigNum}>
          37<span style={heroStyles.bigNumSmall}>h / mois</span>
        </div>
        <div style={heroStyles.panelFooter}>
          <div>
            <div style={heroStyles.panelLabel}>RÉCUPÉRÉES</div>
            <div style={heroStyles.panelMetric}>par un agent</div>
          </div>
          <WorkingGlyph size={48} color="var(--paper)" dot="var(--amber-500)" />
        </div>
      </div>
    </div>
    <div className="b2a-container">
      <div style={heroStyles.band}>
        <span style={heroStyles.bandItem}>
          <Icon name="check" size={14} color="var(--amber-500)" /> Admissible subventions IA Québec
        </span>
        <span style={heroStyles.bandItem}>
          <Icon name="check" size={14} color="var(--amber-500)" /> Code source transféré
        </span>
        <span style={heroStyles.bandItem}>
          <Icon name="check" size={14} color="var(--amber-500)" /> Livraison en 2-4 semaines
        </span>
        <span style={heroStyles.bandItem}>
          <Icon name="map-pin" size={14} color="var(--amber-500)" /> Montréal, Québec
        </span>
      </div>
    </div>
    </div>
  </section>
);

window.Hero = Hero;