/* global React, Icons */
const { UI: UI2 } = window;
const { Reveal: R2, ImgPlaceholder: IPH2 } = UI2;

// All 12 services
const ALL_SERVICES = [
  { n: '01', name: 'Vidange & Révision', icon: Icons.Droplet, desc: 'Vidange moteur, filtres et contrôle multi-points selon les préconisations constructeur.' },
  { n: '02', name: 'Freins', icon: Icons.Disc, desc: 'Plaquettes, disques, étriers et purge — diagnostic complet du système de freinage.' },
  { n: '03', name: 'Climatisation', icon: Icons.Snow, desc: 'Recharge gaz, désinfection circuit, recherche de fuite et contrôle des performances.' },
  { n: '04', name: 'Batterie', icon: Icons.Battery, desc: 'Test, remplacement et installation. Toutes capacités, garantie constructeur.' },
  { n: '05', name: 'Pneumatiques', icon: Icons.Tire, desc: 'Montage, équilibrage, valves et permutations. Toutes marques sur commande.' },
  { n: '06', name: 'Direction / Suspension', icon: Icons.Steering, desc: 'Amortisseurs, rotules, biellettes, parallélisme — diagnostic de tenue de route.' },
  { n: '07', name: 'Transmission', icon: Icons.Cog, desc: 'Embrayage, cardan, soufflets, boîte mécanique — contrôle et remplacement.' },
  { n: '08', name: 'Électrique', icon: Icons.Zap, desc: 'Recherche de panne, alternateur, démarreur, faisceau et accessoires.' },
  { n: '09', name: 'Dépannage', icon: Icons.AlertTriangle, desc: 'Intervention sur place sur secteur Bueil et alentours. Sur demande prioritaire.' },
  { n: '10', name: 'Filtres', icon: Icons.Filter, desc: 'Air, habitacle, carburant et particules — remplacement aux intervalles préconisés.' },
  { n: '11', name: 'Alignement', icon: Icons.Target, desc: 'Géométrie 4 roues, parallélisme. Améliore usure, consommation et tenue de route.' },
  { n: '12', name: 'Diagnostic moteur', icon: Icons.Stethoscope, desc: 'Lecture des défauts OBD, recherche de panne, devis honnête avant intervention.' },
];

// =============================================================
// PAGE 2 — SERVICES
// =============================================================
const ServicesPage = ({ go, cardStyle }) => {
  return (
    <div className="page-enter" data-screen-label="02 Services" style={{ paddingTop: 120 }}>
      {/* ---- Intro ---- */}
      <section className="section-dark section-pad-lg" style={{ paddingTop: 64 }}>
        <span className="section-num">§ 02 / 05 — PRESTATIONS</span>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.3fr) minmax(0, 1fr)', gap: 64, alignItems: 'flex-end' }} className="srv-intro">
            <div>
              <R2><span className="eyebrow">Catalogue complet</span></R2>
              <R2 delay={80}>
                <h1 className="h-display" style={{ marginTop: 24, marginBottom: 0, fontSize: 'clamp(48px, 7vw, 96px)' }}>
                  Mécanique<br/>
                  <span style={{ color: 'var(--accent)' }}>générale</span><br/>
                  toutes marques.
                </h1>
              </R2>
            </div>
            <R2 delay={160}>
              <div>
                <p className="body-lg" style={{ color: 'var(--gris-clair)' }}>
                  Du remplacement de plaquettes au diagnostic électronique : 12 prestations couvrant l'essentiel de l'entretien et de la réparation automobile.
                </p>
                <div style={{ marginTop: 32, display: 'flex', gap: 24, flexWrap: 'wrap' }}>
                  <div>
                    <div className="mono" style={{ fontSize: 32, color: 'var(--accent)' }}>12</div>
                    <div className="mono small" style={{ color: 'var(--gris-clair)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>prestations</div>
                  </div>
                  <div>
                    <div className="mono" style={{ fontSize: 32, color: 'var(--accent)' }}>0€</div>
                    <div className="mono small" style={{ color: 'var(--gris-clair)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>devis gratuit</div>
                  </div>
                  <div>
                    <div className="mono" style={{ fontSize: 32, color: 'var(--accent)' }}>24h</div>
                    <div className="mono small" style={{ color: 'var(--gris-clair)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>réponse</div>
                  </div>
                </div>
              </div>
            </R2>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .srv-intro { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </section>

      {/* ---- Grille des services ---- */}
      <section className="section-dark-2 section-pad-lg" style={{ paddingTop: 32 }}>
        <div className="wrap">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--gris-bordure)', paddingBottom: 16, marginBottom: 0 }}>
            <span className="mono small" style={{ color: 'var(--gris-clair)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Index des prestations / 12</span>
            <span className="mono small" style={{ color: 'var(--accent)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Toutes marques</span>
          </div>

          <div className="svc-grid">
            {ALL_SERVICES.map((s, i) => (
              <R2 key={s.n} delay={(i % 3) * 60}>
                <FullServiceCard service={s} cardStyle={cardStyle} go={go} />
              </R2>
            ))}
          </div>
        </div>
        <style>{`
          .svc-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border-left: 1px solid var(--gris-bordure);
          }
          .svc-grid > * > * { border-right: 1px solid var(--gris-bordure); border-bottom: 1px solid var(--gris-bordure); }
          @media (max-width: 880px) {
            .svc-grid { grid-template-columns: repeat(2, 1fr); }
          }
          @media (max-width: 540px) {
            .svc-grid { grid-template-columns: 1fr; }
          }
        `}</style>
      </section>

      {/* ---- Bloc bas "Vous ne trouvez pas votre besoin ?" ---- */}
      <section className="section-light section-pad-md">
        <span className="section-num" style={{ color: 'var(--nuit)' }}>§ FIN / PERSONNALISÉ</span>
        <div className="wrap">
          <R2>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'minmax(0, 1fr) auto',
              gap: 48,
              alignItems: 'center',
              padding: '48px 0',
              borderTop: '1px solid var(--border-light)',
              borderBottom: '1px solid var(--border-light)',
            }} className="srv-bottom">
              <div>
                <span className="eyebrow">Demande spécifique</span>
                <h2 className="h-xl" style={{ marginTop: 16, marginBottom: 0 }}>
                  Vous ne trouvez pas<br/>votre besoin ?
                </h2>
                <p className="body-lg" style={{ marginTop: 20, color: 'var(--muted-on-light)' }}>
                  Restauration partielle, montage spécifique, préparation : contactez-moi pour en discuter.
                </p>
              </div>
              <div>
                <button className="btn btn-primary" onClick={() => go('contact')} style={{ padding: '18px 28px' }}>
                  Me contacter <Icons.ArrowRight className="arrow" />
                </button>
              </div>
            </div>
          </R2>
        </div>
        <style>{`
          @media (max-width: 720px) {
            .srv-bottom { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>
    </div>
  );
};

// Full service card (used on services page)
const FullServiceCard = ({ service, cardStyle, go }) => {
  const Icon = service.icon;
  if (cardStyle === 'photo') {
    return (
      <div className="svc-card photo" onClick={() => go('contact')} style={{ cursor: 'pointer', border: 'none' }}>
        <div className="svc-photo">
          <IPH2 icon={Icon} label={service.name} style={{ height: '100%' }} />
          <span className="svc-num" style={{ color: 'var(--accent)', top: 12, left: 16 }}>{service.n}</span>
        </div>
        <div className="svc-body">
          <h3 className="svc-name">{service.name}</h3>
          <p className="svc-desc">{service.desc}</p>
          <span className="svc-cta">Demander un devis</span>
        </div>
      </div>
    );
  }
  return (
    <div className={`svc-card ${cardStyle === 'filled' ? 'filled' : ''}`} onClick={() => go('contact')} style={{ cursor: 'pointer', border: 'none' }}>
      <span className="svc-num">{service.n}</span>
      <Icon className="svc-icon" />
      <h3 className="svc-name">{service.name}</h3>
      <p className="svc-desc">{service.desc}</p>
      <span className="svc-cta">Demander un devis</span>
    </div>
  );
};

window.ServicesPage = ServicesPage;
window.ALL_SERVICES = ALL_SERVICES;