// Industries — grid of sector cards with sample pricing & volume
const indStyles = {
  wrap: { padding: '140px 0', borderBottom: '1px solid var(--line)' },
  head: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 60, gap: 40 },
  title: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 72, lineHeight: 0.95, letterSpacing: '-0.02em',
    margin: 0, maxWidth: 720,
  },
  kicker: {
    fontSize: 15, lineHeight: 1.5, color: 'var(--ink-2)',
    maxWidth: 340,
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 16,
  },
  card: {
    padding: 24,
    background: 'var(--panel)',
    border: '1px solid var(--line-2)',
    borderRadius: 'var(--radius)',
    display: 'flex', flexDirection: 'column', gap: 12,
    position: 'relative',
    cursor: 'pointer',
    transition: 'transform .25s ease, border-color .25s ease',
  },
  cardBig: {
    gridColumn: 'span 2',
    gridRow: 'span 1',
    background: 'linear-gradient(135deg, rgba(var(--accent-rgb),.08), rgba(109,91,255,.06))',
    borderColor: 'rgba(var(--accent-rgb),.25)',
  },
  avatar: {
    width: 44, height: 44, borderRadius: 10,
    display: 'grid', placeItems: 'center',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 13, color: '#0A0A0A', fontWeight: 500,
    marginBottom: 8,
  },
  cardH: {
    fontFamily: "'Instrument Serif', serif", fontSize: 28, margin: 0, letterSpacing: '-0.01em',
  },
  cardP: { fontSize: 13, lineHeight: 1.5, color: 'var(--ink-2)', margin: 0 },
  stats: {
    display: 'flex', justifyContent: 'space-between',
    marginTop: 'auto', paddingTop: 18,
    borderTop: '1px solid var(--line)',
    fontFamily: "'JetBrains Mono', monospace", fontSize: 12,
  },
  stat: { display: 'flex', flexDirection: 'column', gap: 2 },
  statLabel: { color: 'var(--ink-3)', letterSpacing: '.1em', textTransform: 'uppercase', fontSize: 10 },
  statValue: { color: 'var(--ink)', fontSize: 15 },
};

const SECTORS = [
  { t: 'BTP / Rénovation',   c: '#FF9C6A', p: 'Artisans, PME, grands comptes : pose, isolation, ITE, pompe à chaleur.', price: '42–68', vol: '1 200+/m' },
  { t: 'Immobilier',          c: '#E8C766', p: 'Vendeurs qualifiés, primo-accédants, investisseurs locatifs ciblés par ville.', price: '52–95', vol: '800+/m',  big: true },
  { t: 'Assurance',           c: '#6D5BFF', p: 'Mutuelle santé, prévoyance, habitation, emprunteur.', price: '28–54', vol: '2 100+/m' },
  { t: 'Santé',               c: '#5BC8E0', p: 'Dentistes, kinés, audioprothésistes, chirurgie esthétique.', price: '36–80', vol: '600+/m' },
  { t: 'Éducation / Formation', c: '#FF6B9E', p: 'Formations CPF, écoles supérieures, alternance, reconversion.', price: '24–48', vol: '1 800+/m' },
  { t: 'Énergie',             c: '#E8C766', p: 'Panneaux solaires, pompes à chaleur, rénovation énergétique.', price: '38–72', vol: '950+/m' },
  { t: 'Automobile',          c: '#A1E8A1', p: 'Leasing, LLD, reprise, financement véhicule.', price: '32–58', vol: '700+/m' },
  { t: 'Autre secteur',       c: '#3A3A3A', p: 'Un besoin spécifique ? On étudie la campagne et on vous répond sous 48h.', price: 'sur devis', vol: '—', custom: true },
];

function Industries() {
  return (
    <section id="secteurs" style={indStyles.wrap} className="section-pad">
      <div className="wrap">
        <div style={indStyles.head}>
          <div>
            <div className="eyebrow" style={{marginBottom: 20}}>Secteurs servis</div>
            <h2 style={indStyles.title} className="h-display-2">
              Huit verticales, <span className="serif italic">un seul</span> standard de qualité.
            </h2>
          </div>
          <p style={indStyles.kicker}>
            Chaque secteur a ses codes. Nos formulaires, ciblages et scripts de qualification sont calibrés pour le vôtre.
          </p>
        </div>

        <div style={indStyles.grid} className="grid-4">
          {SECTORS.map((s) => (
            <div key={s.t}
                 className={s.big ? 'ind-card-big' : undefined}
                 style={{...indStyles.card, ...(s.big ? indStyles.cardBig : {})}}
                 onMouseEnter={(e)=>{e.currentTarget.style.transform='translateY(-2px)';e.currentTarget.style.borderColor='var(--line-2)';}}
                 onMouseLeave={(e)=>{e.currentTarget.style.transform='none';e.currentTarget.style.borderColor=s.big?'rgba(var(--accent-rgb),.25)':'var(--line-2)';}}
            >
              <div style={{...indStyles.avatar, background: s.c, color: s.custom ? 'var(--ink-2)' : '#0A0A0A'}}>
                {s.t.slice(0,2).toUpperCase()}
              </div>
              <h3 style={indStyles.cardH}>{s.t}</h3>
              <p style={indStyles.cardP}>{s.p}</p>
              <div style={indStyles.stats}>
                <div style={indStyles.stat}>
                  <span style={indStyles.statLabel}>Tarif /lead</span>
                  <span style={indStyles.statValue}>{s.price}{!s.custom && ' €'}</span>
                </div>
                <div style={indStyles.stat}>
                  <span style={indStyles.statLabel}>Volume</span>
                  <span style={indStyles.statValue}>{s.vol}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Industries });