// Process.jsx — "comment on travaille", étapes Pilote → Réalisation → Abonnement.

const processStyles = {
  section: { padding: '96px 0', position: 'relative', overflow: 'hidden' },
  pattern: {
    position: 'absolute',
    inset: 0,
    backgroundImage: 'url("08_assets-marque/design-system/assets/section-Méthode-background.jpeg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    opacity: 0.10,
    pointerEvents: 'none',
  },
  glyph: {
    position: 'absolute',
    right: '-60px',
    bottom: '-60px',
    width: '420px',
    height: '420px',
    backgroundImage: 'url("08_assets-marque/design-system/assets/glyph-working.svg")',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'contain',
    opacity: 0.10,
    pointerEvents: 'none',
  },
  inner: { position: 'relative' },
  header: { marginBottom: 56, maxWidth: 720 },
  h2: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 600,
    fontSize: 'clamp(36px, 4.2vw, 58px)',
    lineHeight: 1.05,
    letterSpacing: '-0.022em',
    margin: '0 0 16px',
    color: 'var(--ink-900)',
  },
  intro: { fontSize: 18, lineHeight: 1.55, color: 'var(--mist-700)' },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 0,
    border: '1px solid var(--ink-900)',
  },
  step: {
    padding: 32,
    borderRight: '1px solid rgba(42, 26, 7,.10)',
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    minHeight: 320,
    background: '#fff',
  },
  stepLast: { borderRight: 'none' },
  stepHead: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    paddingBottom: 16,
    borderBottom: '1px solid rgba(42, 26, 7,.10)',
  },
  stepNum: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 700,
    fontSize: 48,
    lineHeight: 1,
    color: 'var(--ink-900)',
    letterSpacing: '-0.03em',
  },
  stepWeek: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11,
    letterSpacing: '0.1em',
    textTransform: 'uppercase',
    color: 'var(--mist-500)',
    textAlign: 'right',
  },
  stepTitle: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 600,
    fontSize: 24,
    letterSpacing: '-0.01em',
    margin: 0,
    color: 'var(--ink-900)',
  },
  stepBody: {
    fontSize: 14.5,
    lineHeight: 1.55,
    color: 'var(--mist-700)',
    margin: 0,
  },
  deliverables: {
    listStyle: 'none',
    padding: 0,
    margin: '8px 0 0',
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    marginTop: 'auto',
  },
  deliverable: {
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 12,
    letterSpacing: '0.04em',
    color: 'var(--ink-900)',
  },
  deliverableDot: {
    width: 6,
    height: 6,
    borderRadius: '50%',
    background: 'var(--amber-500)',
    flexShrink: 0,
  },
};

const STEPS = [
  {
    n: '01',
    week: 'PILOTE · 1-2 SEM.',
    title: 'On cartographie.',
    body: 'Une session de travail pour cartographier le processus à automatiser — entrées, responsables, exceptions. On chiffre les heures récupérables et on rédige un devis fixe.',
    deliverables: ['Audit du processus', 'Estimation des heures récupérables', 'Devis fixe (Pilote 1 500–3 500 $)'],
  },
  {
    n: '02',
    week: 'RÉALISATION · 2-4 SEM.',
    title: 'On construit, on teste.',
    body: "On construit l'agent dans vos outils existants. Vous suivez l'avancement en continu et testez sur des données réelles avant la mise en ligne.",
    deliverables: ['Suivi de progression', 'Tests sur données réelles', 'Itérations incluses'],
  },
  {
    n: '03',
    week: 'LIVRAISON & SUITE',
    title: 'On livre, on transfère.',
    body: "L'agent passe en production. Formation de votre équipe, code source transféré (vous gardez les clés), et — si pertinent — un abonnement mensuel pour l'amélioration continue.",
    deliverables: ['Mise en production', 'Code source + formation', 'Abonnement optionnel (1 500–4 000 $/mois)'],
  },
];

const Process = () => (
  <section style={processStyles.section} id="methode">
    <div style={processStyles.pattern} />
    <div style={processStyles.glyph} />
    <div className="b2a-container" style={processStyles.inner}>
      <div style={processStyles.header} className="b2a-reveal">
        <p className="b2a-eyebrow">// 03 — Comment on travaille</p>
        <h2 style={processStyles.h2}>Pilote, Réalisation, Abonnement. Vous gardez le code à chaque étape.</h2>
        <p style={processStyles.intro}>
          Pas de plateforme propriétaire, pas de boîte noire. On audite, on construit,
          on livre — et le code vous appartient dès le premier jour.
        </p>
      </div>
      <div style={processStyles.grid} className="b2a-grid-3 b2a-reveal">
        {STEPS.map((s, i) => (
          <div key={s.n} style={{ ...processStyles.step, ...(i === STEPS.length - 1 ? processStyles.stepLast : {}) }}>
            <div style={processStyles.stepHead}>
              <div style={processStyles.stepNum}>{s.n}</div>
              <div style={processStyles.stepWeek}>{s.week}</div>
            </div>
            <h3 style={processStyles.stepTitle}>{s.title}</h3>
            <p style={processStyles.stepBody}>{s.body}</p>
            <ul style={processStyles.deliverables}>
              {s.deliverables.map((d) => (
                <li key={d} style={processStyles.deliverable}>
                  <span style={processStyles.deliverableDot} aria-hidden="true" /> {d}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.Process = Process;