// ServicesGrid.jsx — 4-card service grid

const SERVICES = [
  {
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2"/></svg>,
    title: 'Dépannage matériel',
    body: "Diagnostic, remplacement de composants, nettoyage thermique. À domicile ou en atelier.",
    items: ['Disque SSD / NVMe', 'Mémoire RAM', 'Ventilation, pâte thermique']
  },
  {
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>,
    title: 'Configuration logicielle',
    body: "Windows propre, drivers à jour, suite logicielle adaptée à votre usage. Migration 10 → 11.",
    items: ['Installation Windows 11', 'Sauvegarde des données', 'Office, navigateurs, outils']
  },
  {
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>,
    title: 'Sites & applications',
    body: "Sites vitrine, e-commerce, applications SPA. Stack moderne Vue.js et Nuxt 4.",
    items: ['Vue.js · Nuxt 4', 'Performance & SEO', 'Hébergement géré']
  },
  {
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M2 3h20v14H2z"/><path d="M8 21h8M12 17v4"/></svg>,
    title: 'Conseil & montage PC',
    body: "Analyse du marché, devis comparé, montage personnalisé avec installation complète.",
    items: ['Devis comparé', 'Montage sur mesure', 'Mise en service complète']
  }
];

function ServiceCard({ icon, title, body, items, expanded, onToggle }) {
  return (
    <div className="kit-card" style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 12 }} onClick={onToggle}>
      <div style={{
        width: 40, height: 40,
        background: 'var(--ffit-blue-50)',
        color: 'var(--ffit-accent)',
        borderRadius: 8,
        display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>{icon}</div>
      <h3 style={{
        fontFamily: 'var(--ffit-font-display)',
        fontWeight: 600,
        fontSize: 20,
        lineHeight: 1.25,
        margin: 0,
        color: 'var(--ffit-fg-1)'
      }}>{title}</h3>
      <p style={{
        fontFamily: 'var(--ffit-font-body)',
        fontSize: 14,
        lineHeight: 1.6,
        margin: 0,
        color: 'var(--ffit-fg-2)'
      }}>{body}</p>
      <div style={{
        maxHeight: expanded ? 200 : 0,
        overflow: 'hidden',
        transition: 'max-height 300ms cubic-bezier(0.2,0.8,0.2,1)'
      }}>
        <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
          {items.map((it, i) => (
            <li key={i} style={{
              fontFamily: 'var(--ffit-font-body)',
              fontSize: 13,
              color: 'var(--ffit-fg-2)',
              display: 'flex', alignItems: 'center', gap: 8
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--ffit-accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              {it}
            </li>
          ))}
        </ul>
      </div>
      <button className="kit-btn kit-btn--ghost" style={{ alignSelf: 'flex-start', padding: 0, fontSize: 13, marginTop: 4 }}>
        + Détails
      </button>
    </div>
  );
}

function ServicesGrid() {
  const [expanded, setExpanded] = React.useState(null);
  return (
    <section id="services" style={{ padding: '80px 0', background: 'var(--ffit-bg-2)' }}>
      <div className="kit-container">
        <p className="kit-eyebrow">Services</p>
        <h2 className="kit-h2">Quatre domaines, un seul interlocuteur.</h2>
        <p className="kit-lede" style={{ marginBottom: 40 }}>
          Hardware, software, web, conseil. Chaque mission commence par un diagnostic clair et un devis écrit.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 20 }}>
          {SERVICES.map((s, i) => (
            <ServiceCard key={i} {...s}
              expanded={expanded === i}
              onToggle={() => setExpanded(expanded === i ? null : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.ServicesGrid = ServicesGrid;