// About — metrics + philosophy
const About = () => {
  return (
    <section id="about" className="section" style={{ position: 'relative' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }} className="about-grid">

          <div style={{ position: 'sticky', top: 100 }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>À propos</div>
            <h2 className="h-section" style={{ marginBottom: 24 }}>
              On construit<br/>comme des ingénieurs,<br/>on parle <span className="serif" style={{ color: 'var(--cyan)' }}>comme des humains.</span>
            </h2>
            <p style={{ color: 'var(--fg-dim)', fontSize: 17, lineHeight: 1.6, maxWidth: 480 }}>
              Créations PL est un studio d'automatisation basé au Québec, pensé pour
              les PME qui ont dépassé le stade des tableurs mais n'ont ni l'envie ni
              le budget d'une équipe TI à l'interne. Nous intervenons en mission
              courte, cadrée, mesurable.
            </p>
            <p style={{ color: 'var(--fg-dim)', fontSize: 17, lineHeight: 1.6, maxWidth: 480, marginTop: 18 }}>
              Notre terrain de jeu : les outils no-code robustes (Make, n8n,
              Airtable), les API modernes, et — quand ça compte — du code sur
              mesure pour les logiques qu'aucun SaaS ne couvre.
            </p>
          </div>

          <div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--line-strong)', border: '1px solid var(--line-strong)' }}>
              {[
                ['30 min', 'de diagnostic gratuit, sans engagement'],
                ['48 h', 'délai de réponse maximal à toute demande'],
                ['2-6 sem.', 'de la signature à la mise en production'],
                ['Alertes', 'surveillance des workflows pour maximiser le temps de fonctionnement']
              ].map(([n, l], i) => (
                <div key={i} style={{ background: 'var(--bg)', padding: '40px 28px' }}>
                  <div className="stat-num" style={{ color: i % 2 === 0 ? 'var(--fg)' : 'var(--cyan)', fontSize: 'clamp(40px, 4.5vw, 64px)' }}>{n}</div>
                  <div style={{ fontSize: 14, color: 'var(--fg-dim)', marginTop: 12, lineHeight: 1.4 }}>{l}</div>
                </div>
              ))}
            </div>

            {/* Engagements */}
            <div style={{ margin: '48px 0 0', padding: '32px 28px', border: '1px solid var(--line-strong)', borderRadius: 14, background: 'var(--surface)' }}>
              <div className="mono" style={{ color: 'var(--cyan)', marginBottom: 20 }}>// nos engagements</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {[
                  'Devis fixe avant tout engagement — pas de facturation surprise.',
                  'Si l\'automatisation ne se rentabilise pas, on vous le dit avant de signer.',
                  'Documentation et formation livrées avec chaque workflow.',
                  'Vos données restent dans vos outils — accès limités, documentés, révocables.'
                ].map((item, i) => (
                  <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'baseline', fontSize: 15.5, lineHeight: 1.55, color: 'var(--fg-dim)' }}>
                    <span style={{ color: 'var(--cyan)', flexShrink: 0, fontFamily: 'var(--font-mono)', fontSize: 13 }}>✓</span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .about-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { About });