// Offres.jsx — grille des 3 offres réelles (catalogue TheB2ATeK).

const offresStyles = {
  section: { padding: '96px 0', background: 'var(--paper-200)', position: 'relative', overflow: 'hidden' },
  pattern: {
    position: 'absolute',
    inset: 0,
    backgroundImage: 'url("08_assets-marque/design-system/assets/section-offres-background.jpeg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    opacity: 0.10,
    pointerEvents: 'none',
  },
  container: { position: 'relative' },
  header: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 64,
    alignItems: 'end',
    marginBottom: 56,
  },
  h2: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontWeight: 600,
    fontSize: 'clamp(36px, 4.2vw, 58px)',
    lineHeight: 1.05,
    letterSpacing: '-0.022em',
    margin: 0,
    color: 'var(--ink-900)',
  },
  intro: {
    fontSize: 18,
    lineHeight: 1.55,
    color: 'var(--mist-700)',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: 20,
  },
  card: {
    background: '#fff',
    border: '1px solid var(--ink-900)',
    padding: 28,
    minHeight: 360,
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    boxShadow: 'var(--shadow-hard)',
    transition: 'transform 220ms var(--ease), box-shadow 220ms var(--ease)',
  },
  cardDark: {
    background: 'var(--ink-900)',
    color: 'var(--paper)',
    border: '1px solid var(--ink-900)',
    padding: 28,
    minHeight: 360,
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    boxShadow: '4px 4px 0 0 var(--amber-500)',
    transition: 'transform 220ms var(--ease), box-shadow 220ms var(--ease)',
  },
  badge: {
    alignSelf: 'flex-start',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 10,
    letterSpacing: '0.1em',
    textTransform: 'uppercase',
    padding: '4px 8px',
    border: '1px solid currentColor',
  },
  title: {
    fontFamily: "'Space Grotesk', sans-serif",
    fontSize: 22,
    fontWeight: 600,
    letterSpacing: '-0.01em',
    margin: 0,
    color: 'inherit',
  },
  body: {
    fontSize: 14.5,
    lineHeight: 1.6,
    color: 'var(--mist-700)',
    margin: 0,
  },
  bodyDark: { color: 'var(--mist-200)' },
  list: {
    listStyle: 'none',
    padding: 0,
    margin: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  listItem: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: 8,
    fontSize: 13.5,
    lineHeight: 1.5,
  },
  footer: {
    marginTop: 'auto',
    paddingTop: 16,
    borderTop: '1px solid rgba(42, 26, 7,.08)',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11,
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    color: 'var(--mist-500)',
  },
  footerDark: {
    borderTopColor: 'rgba(246,244,238,.10)',
    color: 'var(--mist-200)',
  },
  accent: { color: 'var(--blue-700)' },
  accentDark: { color: 'var(--amber-500)' },
  detailsLink: {
    alignSelf: 'flex-end',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 4,
    marginTop: 4,
    padding: '8px 0',
    minHeight: 44,
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 12.5,
    letterSpacing: '0.04em',
    textDecoration: 'none',
  },
  parcours: {
    marginTop: 48,
    padding: '20px 24px',
    border: '1px dashed rgba(42, 26, 7,.25)',
    background: 'rgba(255,255,255,.5)',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 12.5,
    letterSpacing: '0.04em',
    color: 'var(--mist-700)',
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap: 10,
  },
  parcoursArrow: { color: 'var(--amber-500)' },
};

const OFFRES = [
  {
    id: 'generateur',
    icon: 'sparkles',
    badge: '★ Offre phare',
    title: 'Générateur de propositions & devis IA',
    body: "Vos propositions, prêtes en 40 minutes au lieu de 4 jours — à votre image, chiffrées sans erreur, prêtes à signer.",
    items: [
      'Formulaire ou brief en langage naturel',
      'Rédaction personnalisée par IA (Claude)',
      'Calcul automatique des montants et taxes',
      'PDF à votre charte, prêt à envoyer',
    ],
    metric: '4 j → 40 min',
    label: 'PROPOSITIONS',
  },
  {
    id: 'support',
    icon: 'message-square',
    badge: 'Disponibilité continue',
    title: 'Agent service-client 24/7',
    body: "Un opérateur senior à vos côtés 24/7, sans le salaire senior. Répond aux questions courantes, qualifie, escalade au bon moment.",
    items: [
      'Branché sur votre site, courriel ou messagerie',
      'Formé sur vos documents (FAQ, tarifs, politiques)',
      'Escalade intelligente vers vos équipes',
      'Tableau de bord des conversations',
    ],
    metric: '24/7',
    label: 'SUPPORT',
    dark: true,
  },
  {
    id: 'automatisation',
    icon: 'workflow',
    badge: 'Impact prouvé',
    title: 'Automatisation back-office',
    body: "Quarante heures récupérées, chaque mois — mesurées. On automatise les tâches manuelles répétitives qui ralentissent votre équipe.",
    items: [
      'Audit des processus répétitifs',
      'Automatisations sur mesure (relances, docs, synchros)',
      'Agents qui exécutent les tâches de bout en bout',
      'Rapport mensuel d\'heures économisées',
    ],
    metric: '40 h / mois',
    label: 'BACK-OFFICE',
  },
];

// La vignette elle-même n'est plus un lien (conserve juste l'animation de
// survol) — seul le lien « Détails… » en bas à droite mène à la page de
// détail de l'offre (09_site-web/offres/{id}.html).
const OffreCard = ({ offre }) => {
  const [hover, setHover] = React.useState(false);
  const isDark = offre.dark;
  const base = isDark ? offresStyles.cardDark : offresStyles.card;
  const hoverShadow = isDark ? '6px 6px 0 0 var(--amber-500)' : '6px 6px 0 0 var(--blue-700)';
  const accentColor = isDark ? 'var(--amber-500)' : 'var(--blue-700)';
  return (
    <article
      style={{
        ...base,
        boxShadow: hover ? hoverShadow : base.boxShadow,
        transform: hover ? 'translate(-2px, -2px)' : 'translate(0,0)',
      }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      id={offre.id}
    >
      <span style={{ ...offresStyles.badge, color: accentColor }}>
        {offre.badge}
      </span>
      <WorkingGlyph
        size={36}
        color={isDark ? 'var(--paper)' : 'var(--ink-900)'}
        dot="var(--amber-500)"
      />
      <h3 style={offresStyles.title}>{offre.title}</h3>
      <p style={{ ...offresStyles.body, ...(isDark ? offresStyles.bodyDark : {}) }}>
        {offre.body}
      </p>
      <ul style={offresStyles.list}>
        {offre.items.map((it) => (
          <li key={it} style={offresStyles.listItem}>
            <Icon name="check" size={14} color={accentColor} style={{ marginTop: 2, flexShrink: 0 }} />
            <span style={isDark ? offresStyles.bodyDark : {}}>{it}</span>
          </li>
        ))}
      </ul>
      <div style={{ ...offresStyles.footer, ...(isDark ? offresStyles.footerDark : {}) }}>
        <span>{offre.label}</span>
        <span style={isDark ? offresStyles.accentDark : offresStyles.accent}>{offre.metric}</span>
      </div>
      <a
        href={`offres/${offre.id}.html`}
        className="b2a-link"
        style={{ ...offresStyles.detailsLink, color: accentColor }}
      >
        Détails… <Icon name="arrow-right" size={12} />
      </a>
    </article>
  );
};

const Offres = () => (
  <section style={offresStyles.section} id="offres">
    <div style={offresStyles.pattern} />
    <div className="b2a-container" style={offresStyles.container}>
      <div style={offresStyles.header} className="b2a-grid-2 b2a-reveal">
        <div>
          <p className="b2a-eyebrow">// 01 — Le catalogue</p>
          <h2 style={offresStyles.h2}>Trois offres. Un objectif : vous redonner du temps.</h2>
        </div>
        <p style={offresStyles.intro}>
          On ne vend pas une plateforme. On construit l'agent dont votre entreprise a besoin,
          on l'intègre dans vos outils, et vous repartez avec le code source — vous gardez les clés.
        </p>
      </div>
      <div style={offresStyles.grid} className="b2a-grid-3">
        {OFFRES.map((o, i) => (
          <div key={o.id} className="b2a-reveal" style={{ display: 'flex', '--reveal-delay': (i * 90) + 'ms' }}>
            <OffreCard offre={o} />
          </div>
        ))}
      </div>
      <div style={offresStyles.parcours}>
        <span>Pilote</span>
        <Icon name="arrow-right" size={14} style={offresStyles.parcoursArrow} />
        <span>Générateur de propositions</span>
        <Icon name="arrow-right" size={14} style={offresStyles.parcoursArrow} />
        <span>Agent support (abonnement)</span>
        <Icon name="arrow-right" size={14} style={offresStyles.parcoursArrow} />
        <span>Automatisation back-office</span>
      </div>
    </div>
  </section>
);

window.Offres = Offres;