/* global React, Reveal */

function Services({ onNav }) {
  const blocks = [
    {
      idx: "/ Service 01",
      title: ["Création", "sur mesure"],
      lede: "Un site qui vous ressemble, codé sur mesure et livré rapidement. Pas de template générique, pas de plugin lourd.",
      features: [
        ["Design sur mesure", "Maquettes uniques, pensées pour votre marque et votre cible."],
        ["Code propre", "HTML, CSS, JS modernes. Pas de surcouche inutile."],
        ["Performance", "Score Lighthouse 95+. Pages qui chargent en moins d'une seconde."],
        ["Responsive", "Pixel-perfect du mobile au grand écran."],
      ],
      meta: [["Délai", "7–14 jours"], ["À partir de", "500€"], ["Inclus", "Hébergement 1ʳᵉ année"]],
    },
    {
      idx: "/ Service 02",
      title: ["Refonte", "modernisée"],
      lede: "Votre site existant, repensé de fond en comble — sans perdre votre référencement ni vos clients.",
      features: [
        ["Audit complet", "Performance, SEO, UX, accessibilité — diagnostic détaillé avant tout."],
        ["Migration SEO", "Redirections 301, sitemap, structure préservée. Zéro perte de trafic."],
        ["Nouveau design", "Identité actualisée, ergonomie repensée pour la conversion."],
        ["Stack moderne", "Adieu WordPress lent, place à du code maîtrisé."],
      ],
      meta: [["Délai", "10–21 jours"], ["À partir de", "800€"], ["Inclus", "Audit SEO offert"]],
    },
    {
      idx: "/ Service 03",
      title: ["Maintenance", "tranquille"],
      lede: "Votre site, gardé à jour, sécurisé et toujours en ligne. Vous vous occupez de votre métier, je m'occupe du reste.",
      features: [
        ["Mises à jour", "Sécurité, dépendances, patches — appliqués chaque mois."],
        ["Sauvegardes", "Quotidiennes, chiffrées, restauration en moins d'une heure."],
        ["Petits ajouts", "1h d'évolutions/mois incluses. Texte, images, sections."],
        ["Monitoring", "Uptime 24/7, alertes si quoi que ce soit lâche."],
      ],
      meta: [["Engagement", "Sans engagement"], ["À partir de", "49€/mois"], ["Réponse", "Sous 4h ouvrées"]],
    },
    {
      idx: "/ Service 04",
      title: ["SEO", "local"],
      lede: "Pour être trouvé sur Google, là où vos clients cherchent. Stratégie locale, technique soignée, contenu utile.",
      features: [
        ["Audit technique", "Crawl, structure, vitesse, balises — diagnostic complet."],
        ["SEO local", "Google Business Profile, citations, avis, géolocalisation."],
        ["Contenu", "Pages services, articles ciblés, optimisation existant."],
        ["Suivi", "Rapports mensuels lisibles. Positions, trafic, conversions."],
      ],
      meta: [["Délai audit", "5 jours"], ["À partir de", "350€"], ["Suivi", "À partir de 150€/mois"]],
    },
  ];

  return (
    <div className="vw-page">
      <header className="vw-page-head">
        <Reveal>
          <div className="vw-eyebrow" style={{ marginBottom: 24 }}>/ Services</div>
          <h1 className="vw-page-head__title">
            Quatre <em>métiers,</em><br/>
            <span className="accent">une</span> personne.
          </h1>
        </Reveal>
        <Reveal>
          <p className="vw-page-head__lede">
            Pas de chef de projet, pas de sous-traitant. Vous parlez directement à la personne qui conçoit, code et déploie votre site. C'est plus rapide, plus précis, et souvent moins cher.
          </p>
        </Reveal>
      </header>

      {blocks.map((b, i) => (
        <Reveal key={i} className="vw-svc-block">
          <div className="vw-svc-block__index">
            <div>{b.idx}</div>
            <h2 className="vw-svc-block__title">{b.title[0]} <em>{b.title[1]}</em></h2>
          </div>
          <div className="vw-svc-block__body">
            <p className="vw-svc-block__lede">{b.lede}</p>
            <div className="vw-svc-block__features">
              {b.features.map((f, j) => (
                <div key={j} className="vw-svc-block__feature">
                  <div className="vw-svc-block__feature-num">/ 0{j + 1}</div>
                  <div className="vw-svc-block__feature-name">{f[0]}</div>
                  <div className="vw-svc-block__feature-desc">{f[1]}</div>
                </div>
              ))}
            </div>
            <div className="vw-svc-block__meta">
              {b.meta.map(([k, v]) => (
                <span key={k}>{k} · <strong>{v}</strong></span>
              ))}
            </div>
          </div>
        </Reveal>
      ))}

      <section className="vw-final-cta">
        <div className="vw-final-cta__bg" aria-hidden="true">s</div>
        <div className="vw-final-cta__inner">
          <Reveal>
            <div className="vw-final-cta__sub">/ Une question ?</div>
            <h2 className="vw-final-cta__title">Voyons <em>ce qu'il</em> <span className="accent">vous faut.</span></h2>
          </Reveal>
          <Reveal>
            <a href="#contact" onClick={(e)=>{e.preventDefault(); onNav("contact");}} className="vw-final-cta__btn">
              <span>Discuter →</span>
            </a>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

window.Services = Services;