// home.jsx — Homepage 2C ITECH
const { useState: useStateH } = React;

const DEFAULTS = { prixDiag: 49, prixConf: 690, prixIA: 1490, prixAbo: 49, prixDep: 60 };

function Home() {
  return (
    <>
      <UrgenceBar level="high" />
      <Header active="home" />
      <main>
        <HeroSplit prixDiag={DEFAULTS.prixDiag} />
        <TrustStrip />
        <Probleme />
        <Solution />
        <Concretement />
        <Offres {...DEFAULTS} />
        <Cas />
        <SecondaryServices prixDep={DEFAULTS.prixDep} />
        <MaintenanceSection prixAbo={DEFAULTS.prixAbo} />
        <IATransparence />
        <Process />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      <ChatBubble />
    </>
  );
}

function HeroSplit({ prixDiag }) {
  return (
    <section className="hero hero-split">
      <div className="container hero-grid">
        <div className="hero-text">
          <span className="eyebrow">Échéance facturation électronique · Septembre 2026</span>
          <h1 className="h-display">
            Facturation électronique 2026&nbsp;: <em>êtes-vous prêt&nbsp;?</em>
          </h1>
          <p className="lede">
            Diagnostic en 30 min, mise en conformité clé-en-main et automatisation
            de votre cycle facture. Pour les TPE/PME du Lot, par un ingénieur
            informatique indépendant.
          </p>
          <div className="row" style={{ marginTop: 28 }}>
            <a href="/rendez-vous.html" className="btn btn-primary">
              Réserver un diagnostic — {prixDiag}€ <span className="arrow">→</span>
            </a>
            <a href="/services.html" className="btn btn-ghost">Voir les offres</a>
          </div>
          <ul className="hero-bullets">
            <li><CheckIcon /> Intervention sous 24h</li>
            <li><CheckIcon /> Devis avant tout</li>
            <li><CheckIcon /> Bretenoux · St-Céré · Vallée Dordogne</li>
          </ul>
        </div>
        <aside className="hero-card">
          <div className="hero-card-top">
            <span className="chip live">Diagnostic en cours</span>
            <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>2C·ITECH·OS</span>
          </div>
          <div className="hero-card-body">
            <div className="hc-row"><span>Logiciel de facturation</span><b>Sage 50</b></div>
            <div className="hc-row"><span>Format actuel</span><b>PDF + papier</b></div>
            <div className="hc-row warn"><span>Conformité 2026</span><b>Non conforme ⚠</b></div>
            <div className="hc-progress">
              <div className="hc-progress-bar" style={{ width: "64%" }} />
              <span>Conformité 64%</span>
            </div>
            <div className="hc-row"><span>Solution recommandée</span><b>Pennylane + PDP</b></div>
            <div className="hc-row ok"><span>Délai estimé</span><b>2 semaines</b></div>
            <div className="hc-row ok"><span>Économie / an</span><b>~ 2 800€</b></div>
          </div>
          <div className="hero-card-foot">
            <span className="mono">› Diagnostic complet en 30 min</span>
            <span className="arrow">→</span>
          </div>
        </aside>
      </div>
      <style>{`
        .hero-split { padding-top: 80px; padding-bottom: 100px; }
        .hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
        @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }
        .hero-bullets { list-style: none; padding: 0; margin: 32px 0 0; display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
        .hero-bullets li { display: inline-flex; align-items: center; gap: 8px; }
        .hero-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px; font-size: 14px; position: relative; overflow: hidden; }
        .hero-card::before { content: ""; position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: radial-gradient(circle, var(--accent), transparent 60%); opacity: 0.10; pointer-events: none; }
        .hero-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
        .hero-card-body { display: flex; flex-direction: column; gap: 12px; }
        .hc-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line); }
        .hc-row:last-of-type { border-bottom: 0; }
        .hc-row b { font-weight: 600; }
        .hc-row.warn b { color: var(--warn); }
        .hc-row.ok b { color: var(--success); }
        .hc-progress { height: 8px; background: var(--line); border-radius: 999px; position: relative; margin: 6px 0; }
        .hc-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }
        .hc-progress span { position: absolute; right: 0; top: -22px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
        .hero-card-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--ink-2); }
      `}</style>
    </section>
  );
}

function TrustStrip() {
  return (
    <section style={{ padding: "40px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 32, fontSize: 12, fontFamily: "var(--font-mono)", textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--ink-3)" }}>
          Ils nous font confiance dans le Lot
        </div>
        <ClientLogos />
        <div className="trust-stats">
          <div><b>120+</b><span>interventions réalisées</span></div>
          <div><b>4.9/5</b><span>satisfaction clients</span></div>
          <div><b>&lt; 24h</b><span>délai d'intervention</span></div>
          <div><b>5h+</b><span>gagnées / semaine après automatisation</span></div>
        </div>
      </div>
      <style>{`
        .trust-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; border-top: 1px dashed var(--line); padding-top: 32px; }
        .trust-stats div { text-align: center; }
        .trust-stats b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 3.5vw, 44px); color: var(--bg-deep); line-height: 1; }
        .trust-stats span { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
        @media (max-width: 720px) { .trust-stats { grid-template-columns: repeat(2, 1fr); } }
      `}</style>
    </section>
  );
}

function Probleme() {
  const items = [
    { num: "01", title: "Vous perdez 5 à 10h / semaine", body: "Saisie manuelle des devis, factures, relances. Le temps qui pourrait servir à votre vrai métier part en tâches répétitives." },
    { num: "02", title: "L'échéance 2026 approche", body: "À partir de septembre 2026, la facturation électronique devient obligatoire. Sans plateforme certifiée, vous ne pourrez plus émettre ni recevoir de factures." },
    { num: "03", title: "Votre informatique ralentit l'équipe", body: "Pannes, lenteurs, sauvegardes oubliées. Chaque incident coûte une demi-journée — et personne ne devrait y passer son énergie." },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="text">
            <span className="eyebrow">Le constat</span>
            <h2 className="h1" style={{ marginTop: 16 }}>Trois choses qui vous freinent — sans que ce soit votre faute.</h2>
          </div>
        </div>
        <div className="prob-grid">
          {items.map(i => (
            <div key={i.num} className="prob-item">
              <span className="mono num">{i.num}</span>
              <h3 className="h2" style={{ marginTop: 24 }}>{i.title}</h3>
              <p className="muted" style={{ marginTop: 12, lineHeight: 1.55 }}>{i.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
        .prob-item { padding: 40px 32px 40px 0; border-right: 1px solid var(--line); }
        .prob-item:last-child { border-right: 0; padding-right: 0; }
        .prob-item .num { color: var(--accent); font-size: 12px; letter-spacing: 0.12em; }
        @media (max-width: 820px) { .prob-grid { grid-template-columns: 1fr; } .prob-item { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 0; } .prob-item:last-child { border-bottom: 0; } }
      `}</style>
    </section>
  );
}

function Solution() {
  return (
    <section style={{ background: "var(--bg-deep)", color: "white" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>La solution</span>
            <h2 className="h1" style={{ marginTop: 16, color: "white" }}>
              Un seul interlocuteur,<br /><em style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--accent)" }}>du diagnostic à la maintenance.</em>
            </h2>
            <p className="lede" style={{ color: "rgba(255,255,255,0.7)", marginTop: 24 }}>
              Je suis ingénieur informatique indépendant. Je vous accompagne sur trois niveaux —
              de la mise en conformité aux automatisations IA, en passant par le dépannage classique.
              Vous parlez à une seule personne, qui connaît votre dossier.
            </p>
            <div className="row" style={{ marginTop: 32 }}>
              <a href="/rendez-vous.html" className="btn btn-primary">Démarrer un diagnostic</a>
              <a href="/services.html" className="btn" style={{ background: "rgba(255,255,255,0.1)", color: "white" }}>Toutes les offres</a>
            </div>
          </div>
          <div className="placeholder" style={{ aspectRatio: "4/5", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.4)" }}>
            [ photo · ingénieur en intervention ]
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 920px) { .sol-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function Concretement() {
  const piliers = [
    { title: "Réparer & dépanner", sub: "Quand quelque chose ne marche plus.", points: ["Diagnostic et réparation PC, Mac, serveurs", "Récupération de données", "Imprimante, réseau, internet", "Intervention sous 24h"], icon: <ToolIcon />, tag: "Court terme" },
    { title: "Automatiser & simplifier", sub: "Quand vous voulez gagner du temps.", points: ["Devis et factures automatiques", "Relances clients sans y penser", "Connexion compta · CRM · banque", "Assistants IA pour mails et documents"], icon: <BoltIcon />, tag: "Cœur de métier", featured: true },
    { title: "Sécuriser & maintenir", sub: "Pour que ça ne s'arrête plus jamais.", points: ["Sauvegarde automatique chiffrée", "Mises à jour & antivirus", "Surveillance 24/7", "Support illimité par abonnement"], icon: <ShieldIcon />, tag: "Long terme" },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="text">
            <span className="eyebrow">Concrètement</span>
            <h2 className="h1" style={{ marginTop: 16 }}>Ce que je fais pour vous.</h2>
            <p className="lede" style={{ marginTop: 16 }}>Trois domaines, trois temporalités.</p>
          </div>
        </div>
        <div className="pil-grid">
          {piliers.map((p, i) => (
            <div key={i} className={`pil-card ${p.featured ? "featured" : ""}`}>
              <div className="pil-icon">{p.icon}</div>
              <span className="chip" style={p.featured ? { background: "var(--accent)", color: "white" } : {}}>{p.tag}</span>
              <h3 className="h2" style={{ marginTop: 16 }}>{p.title}</h3>
              <p className="muted" style={{ marginTop: 4, fontStyle: "italic" }}>{p.sub}</p>
              <ul className="pil-points">
                {p.points.map(pt => <li key={pt}><CheckIcon /> {pt}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .pil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        @media (max-width: 920px) { .pil-grid { grid-template-columns: 1fr; } }
        .pil-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; transition: border-color .2s, transform .2s; }
        .pil-card:hover { transform: translateY(-2px); border-color: var(--ink-3); }
        .pil-card.featured { background: var(--bg-deep); color: white; border-color: var(--bg-deep); position: relative; overflow: hidden; }
        .pil-card.featured::before { content: ""; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, var(--accent), transparent 60%); opacity: 0.20; }
        .pil-card.featured .muted { color: rgba(255,255,255,0.65); }
        .pil-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--premium-soft); display: grid; place-items: center; margin-bottom: 24px; color: var(--bg-deep); }
        .pil-card.featured .pil-icon { background: rgba(255,255,255,0.1); color: white; }
        .pil-points { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
        .pil-points li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
        .pil-points li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }
        .pil-card.featured .pil-points li svg { color: var(--accent-2); }
      `}</style>
    </section>
  );
}

function Offres({ prixDiag, prixConf, prixIA, prixAbo, prixDep }) {
  const offres = [
    { key: "diag", tag: "Idéal pour démarrer", title: "Diagnostic Express", price: prixDiag, unit: "€", sub: "Paiement = créneau prioritaire", desc: "30 min en visio ou sur site. Audit complet, plan d'action remis sous 48h.", points: ["Audit complet 30 min", "Plan d'action écrit", "Devis détaillé inclus", "Créneau prioritaire sous 24h"], cta: "Réserver" },
    { key: "conf", tag: "Le plus demandé", title: "Pack Conformité", price: prixConf, unit: "€", sub: "Mise en conformité 2026 complète", desc: "Choix de la PDP, paramétrage, migration des données, formation de l'équipe. Tout est prêt avant l'échéance.", points: ["Choix PDP & migration", "Paramétrage et tests", "Formation 2h équipe", "Support 30 jours inclus"], cta: "En savoir plus", featured: true },
    { key: "ia", tag: "Gain de temps maximal", title: "Pack Automatisation IA", price: prixIA, unit: "€", sub: "5h+ gagnées par semaine", desc: "Automatisation de vos devis, factures, relances. Connexion à votre compta.", points: ["Devis & factures auto", "Relances intelligentes", "Assistant IA mails", "Connexion compta + CRM"], cta: "En savoir plus" },
    { key: "abo", tag: "Tranquillité durable", title: "Maintenance & Tranquillité", price: prixAbo, unit: "€/mois", sub: "Support illimité, surveillance 24/7", desc: "Sauvegarde, surveillance, mises à jour, support illimité. Comme un DSI à temps partagé.", points: ["Sauvegarde automatique", "Surveillance 24/7", "Support illimité", "Engagement 6 mois"], cta: "S'abonner" },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="text">
            <span className="eyebrow">Offres principales</span>
            <h2 className="h1" style={{ marginTop: 16 }}>Quatre offres, un objectif&nbsp;: vous faire gagner du temps.</h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8 }}>
            <span className="chip accent">🔥 Intervention prioritaire sous 24h — places limitées</span>
            <a href="/services.html" className="btn-link">Comparer toutes les offres →</a>
          </div>
        </div>
        <div className="off-grid">
          {offres.map(o => (
            <div key={o.key} className={`off-card ${o.featured ? "featured" : ""}`}>
              {o.featured && <div className="off-ribbon">Le plus demandé</div>}
              <div className="off-tag">{o.tag}</div>
              <h3 className="h2" style={{ marginTop: 8 }}>{o.title}</h3>
              <div className="off-price"><b>{o.price}</b><span>{o.unit}</span></div>
              <div className="off-sub">{o.sub}</div>
              <p className="muted" style={{ fontSize: 14, lineHeight: 1.5, marginTop: 16, minHeight: 60 }}>{o.desc}</p>
              <ul className="off-points">
                {o.points.map(p => <li key={p}><CheckIcon /> {p}</li>)}
              </ul>
              <a href="/rendez-vous.html" className={`btn ${o.featured ? "btn-primary" : "btn-dark"}`} style={{ width: "100%", justifyContent: "center", marginTop: 24 }}>
                {o.cta} <span className="arrow">→</span>
              </a>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .off-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        @media (max-width: 1100px) { .off-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .off-grid { grid-template-columns: 1fr; } }
        .off-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; position: relative; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
        .off-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
        .off-card.featured { background: var(--bg-deep); color: white; border-color: var(--bg-deep); transform: translateY(-8px); box-shadow: var(--shadow-lg); }
        .off-card.featured .muted { color: rgba(255,255,255,0.65); }
        .off-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: white; padding: 4px 14px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; font-family: var(--font-mono); text-transform: uppercase; white-space: nowrap; }
        .off-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
        .off-card.featured .off-tag { color: var(--accent-2); }
        .off-price { display: flex; align-items: baseline; gap: 4px; margin-top: 16px; font-family: var(--font-serif); }
        .off-price b { font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
        .off-price span { font-size: 16px; opacity: 0.7; font-family: var(--font-sans); }
        .off-sub { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
        .off-card.featured .off-sub { color: rgba(255,255,255,0.6); }
        .off-points { list-style: none; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 14px; flex: 1; }
        .off-card.featured .off-points { border-color: rgba(255,255,255,0.15); }
        .off-points li { display: flex; align-items: flex-start; gap: 8px; }
        .off-points li svg { color: var(--accent); flex-shrink: 0; margin-top: 3px; }
      `}</style>
    </section>
  );
}

function Cas() {
  const cases = [
    { tag: "Dépannage", title: "PC inutilisable → réparé en 24h", who: "Boulangerie · Bretenoux", body: "Caisse bloquée par une mise à jour Windows. Diagnostic le matin, réparation l'après-midi, données récupérées intégralement.", stat: "24h", statLabel: "délai d'intervention" },
    { tag: "Automatisation", title: "Cabinet libéral → 5h gagnées / semaine", who: "Cabinet d'expertise · Saint-Céré", body: "Devis et factures générés automatiquement depuis le calendrier. Relances clients sans intervention. La gérante a récupéré son mercredi soir.", stat: "5h+", statLabel: "gagnées par semaine" },
    { tag: "Conformité", title: "PME 12 salariés → conforme 2026 en 2 semaines", who: "BTP · Vallée Dordogne", body: "Choix de la PDP, migration des 1 800 clients, formation équipe. Tout est rentré dans les délais, sans interruption d'activité.", stat: "1 800", statLabel: "clients migrés" },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="text">
            <span className="eyebrow">Cas concrets</span>
            <h2 className="h1" style={{ marginTop: 16 }}>Trois exemples — trois résultats mesurables.</h2>
          </div>
        </div>
        <div className="case-grid">
          {cases.map((c, i) => (
            <article key={i} className="case-card">
              <div className="case-stat"><b>{c.stat}</b><span>{c.statLabel}</span></div>
              <span className="chip accent">{c.tag}</span>
              <h3 className="h3" style={{ marginTop: 12, fontSize: 20, lineHeight: 1.3 }}>{c.title}</h3>
              <p className="muted" style={{ fontSize: 13, marginTop: 4 }}>{c.who}</p>
              <p style={{ fontSize: 14, lineHeight: 1.55, marginTop: 16, color: "var(--ink-2)" }}>{c.body}</p>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        @media (max-width: 920px) { .case-grid { grid-template-columns: 1fr; } }
        .case-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; }
        .case-stat { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px dashed var(--line); }
        .case-stat b { display: block; font-family: var(--font-serif); font-size: 64px; line-height: 1; font-weight: 400; color: var(--accent); letter-spacing: -0.03em; }
        .case-stat span { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
      `}</style>
    </section>
  );
}

function SecondaryServices({ prixDep = 60 }) {
  const services = [
    { icon: <ToolIcon />, title: "Dépannage informatique", price: `À partir de ${prixDep}€/h` },
    { icon: <RemoteIcon />, title: "Assistance à distance", price: "30 min offertes" },
    { icon: <SyncIcon />, title: "Maintenance préventive", price: `Dès ${prixDep - 10}€/h` },
    { icon: <PackageIcon />, title: "Installation matériel & logiciel", price: "Sur devis" },
    { icon: <CloudIcon />, title: "Sauvegarde de données", price: "Inclus dans abonnement" },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="text">
            <span className="eyebrow">Services informatiques</span>
            <h2 className="h1" style={{ marginTop: 16 }}>Besoin d'un dépannage rapide&nbsp;?</h2>
            <p className="lede" style={{ marginTop: 16 }}>On s'occupe aussi du quotidien&nbsp;: pannes, installations, assistance.</p>
          </div>
          <a href="/rendez-vous.html?besoin=depannage" className="btn btn-dark">Demander un dépannage</a>
        </div>
        <div className="sec-grid">
          {services.map((s, i) => (
            <div key={i} className="sec-card">
              <div className="sec-icon">{s.icon}</div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>{s.title}</div>
                <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 2 }}>{s.price}</div>
              </div>
              <span className="arrow">→</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .sec-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
        @media (max-width: 1100px) { .sec-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .sec-grid { grid-template-columns: 1fr; } }
        .sec-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .2s, transform .2s; flex-direction: column; text-align: center; }
        .sec-card:hover { transform: translateY(-2px); border-color: var(--accent); }
        .sec-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; color: var(--bg-deep); }
        .sec-card .arrow { color: var(--ink-3); margin-top: 4px; }
      `}</style>
    </section>
  );
}

function MaintenanceSection({ prixAbo }) {
  return (
    <section style={{ background: "var(--bg-deep)", color: "white" }}>
      <div className="container">
        <div className="maint-grid">
          <div>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>Maintenance & tranquillité</span>
            <h2 className="h1" style={{ marginTop: 16, color: "white" }}>
              Le service<br /><em style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--accent)" }}>qui s'occupe de tout, sans que vous y pensiez.</em>
            </h2>
            <p className="lede" style={{ color: "rgba(255,255,255,0.75)", marginTop: 24 }}>
              Pour les entreprises qui veulent dormir tranquille — pas d'imprévu, pas de panne qui dure, pas de sauvegarde oubliée.
            </p>
            <a href="/rendez-vous.html?besoin=maintenance" className="btn btn-primary" style={{ marginTop: 32 }}>S'abonner — {prixAbo}€/mois <span className="arrow">→</span></a>
          </div>
          <div className="maint-list">
            <div className="maint-item"><CloudIcon /><div><b>Sauvegarde automatique chiffrée</b><span>Quotidienne, en France, restauration sous 1h</span></div></div>
            <div className="maint-item"><ChatIcon /><div><b>Support illimité (téléphone & chat)</b><span>Du lundi au vendredi, réponse en moins d'1h</span></div></div>
            <div className="maint-item"><EyeIcon /><div><b>Surveillance 24/7</b><span>On voit la panne avant vous</span></div></div>
            <div className="maint-item"><SyncIcon /><div><b>Mises à jour & sécurité</b><span>Système, antivirus, certificats — automatiquement</span></div></div>
          </div>
        </div>
      </div>
      <style>{`
        .maint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
        @media (max-width: 920px) { .maint-grid { grid-template-columns: 1fr; gap: 40px; } }
        .maint-list { display: flex; flex-direction: column; gap: 4px; }
        .maint-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border-radius: var(--radius); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
        .maint-item svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
        .maint-item b { display: block; font-weight: 600; font-size: 15px; }
        .maint-item span { display: block; font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }
      `}</style>
    </section>
  );
}

function IATransparence() {
  const examples = [
    { before: "Vous écrivez 30 emails de relance à la main", after: "Une IA les rédige, vous validez d'un clic", time: "−2h / semaine" },
    { before: "Vos devis sont saisis dans Word, recopiés en compta", after: "Devis générés et envoyés depuis votre agenda", time: "−3h / semaine" },
    { before: "Vous cherchez un document dans 200 emails", after: "Un assistant IA répond à votre place en 2 secondes", time: "−1h / semaine" },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div className="text">
            <span className="eyebrow">Transparence sur l'IA</span>
            <h2 className="h1" style={{ marginTop: 16 }}>L'IA, sans bullshit.</h2>
            <p className="lede" style={{ marginTop: 16 }}>On utilise l'IA pour automatiser ce qui vous fait perdre du temps. Pas pour remplacer votre métier — juste pour libérer vos heures.</p>
          </div>
        </div>
        <div className="ia-grid">
          {examples.map((e, i) => (
            <div key={i} className="ia-row">
              <div className="ia-col"><span className="mono ia-label">Avant</span><p>{e.before}</p></div>
              <div className="ia-arrow">→</div>
              <div className="ia-col after"><span className="mono ia-label">Avec IA</span><p>{e.after}</p></div>
              <div className="ia-time">{e.time}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .ia-grid { display: flex; flex-direction: column; gap: 12px; }
        .ia-row { display: grid; grid-template-columns: 1fr 40px 1fr 160px; gap: 24px; align-items: center; padding: 24px 28px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); }
        @media (max-width: 820px) { .ia-row { grid-template-columns: 1fr; gap: 16px; } .ia-arrow { display: none; } }
        .ia-col p { margin: 6px 0 0; font-size: 15px; line-height: 1.4; }
        .ia-col.after p { font-weight: 500; }
        .ia-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
        .ia-col.after .ia-label { color: var(--accent); }
        .ia-arrow { font-size: 20px; color: var(--ink-3); text-align: center; }
        .ia-time { font-family: var(--font-serif); font-size: 28px; color: var(--bg-deep); text-align: right; line-height: 1; }
        @media (max-width: 820px) { .ia-time { text-align: left; } }
      `}</style>
    </section>
  );
}

function Process() {
  const steps = [
    { n: "01", title: "Diagnostic", body: "30 min — visio ou sur place. On identifie vos vrais points de blocage." },
    { n: "02", title: "Plan d'action", body: "Sous 48h, un plan écrit avec délais et tarifs. Pas de surprise, pas de jargon." },
    { n: "03", title: "Mise en œuvre", body: "On installe, on paramètre, on migre. Vous continuez à travailler pendant ce temps." },
    { n: "04", title: "Suivi", body: "Formation de l'équipe, support 30 jours. Et un abonnement si vous voulez ne plus jamais vous en occuper." },
  ];
  return (
    <section style={{ background: "var(--premium-soft)" }}>
      <div className="container">
        <div className="section-head">
          <div className="text">
            <span className="eyebrow">Comment ça se passe</span>
            <h2 className="h1" style={{ marginTop: 16 }}>Quatre étapes — du premier appel au quotidien tranquille.</h2>
          </div>
        </div>
        <div className="proc-grid">
          {steps.map(s => (
            <div key={s.n} className="proc-step">
              <span className="mono proc-num">{s.n}</span>
              <h3 className="h2" style={{ marginTop: 16 }}>{s.title}</h3>
              <p className="muted" style={{ marginTop: 8, lineHeight: 1.5, fontSize: 14 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
        .proc-step { padding: 32px 24px 32px 0; border-right: 1px solid var(--line-strong); position: relative; }
        .proc-step:last-child { border-right: 0; }
        .proc-step::before { content: ""; position: absolute; top: -7px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); }
        .proc-num { color: var(--accent); font-size: 12px; letter-spacing: 0.12em; }
        @media (max-width: 820px) { .proc-grid { grid-template-columns: 1fr; } .proc-step { border-right: 0; border-bottom: 1px solid var(--line-strong); padding: 24px 0; } .proc-step:last-child { border-bottom: 0; } }
      `}</style>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useStateH(0);
  const items = [
    { q: "Combien coûte une intervention de dépannage ?", a: "À partir de 60€/h. Devis avant intervention systématiquement. Si le problème est résolu en moins de 30 min à distance, c'est offert." },
    { q: "Est-ce que je dois absolument passer à la facturation électronique en 2026 ?", a: "Oui — toutes les TPE/PME doivent émettre et recevoir des factures via une PDP certifiée à partir de septembre 2026. Le diagnostic gratuit vous dit où vous en êtes." },
    { q: "Vous intervenez où ?", a: "Bretenoux (46130), Saint-Céré (46400), et toute la vallée de la Dordogne. Pour le reste, on travaille en télé-assistance." },
    { q: "L'IA, ça veut dire que ChatGPT va lire mes emails ?", a: "Non. On utilise des outils certifiés RGPD, hébergés en Europe. Vos données restent chez vous, et vous gardez le contrôle." },
    { q: "Que se passe-t-il après le diagnostic ?", a: "Vous recevez un plan d'action écrit sous 48h. Vous décidez ce que vous faites — chez nous, ailleurs, ou rien. Aucune obligation." },
  ];
  return (
    <section>
      <div className="container" style={{ maxWidth: 920 }}>
        <div className="section-head" style={{ justifyContent: "center" }}>
          <div className="text" style={{ textAlign: "center", margin: "0 auto" }}>
            <span className="eyebrow">FAQ</span>
            <h2 className="h1" style={{ marginTop: 16 }}>Questions fréquentes.</h2>
          </div>
        </div>
        <div className="faq-list">
          {items.map((f, i) => (
            <button key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q"><span>{f.q}</span><span className="faq-icon">{open === i ? "−" : "+"}</span></div>
              {open === i && <div className="faq-a">{f.a}</div>}
            </button>
          ))}
        </div>
      </div>
      <style>{`
        .faq-list { display: flex; flex-direction: column; }
        .faq-item { background: transparent; border: 0; border-top: 1px solid var(--line); width: 100%; padding: 24px 0; text-align: left; cursor: pointer; }
        .faq-item:last-child { border-bottom: 1px solid var(--line); }
        .faq-q { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 500; gap: 24px; }
        .faq-icon { font-size: 24px; color: var(--accent); }
        .faq-a { margin-top: 12px; color: var(--ink-3); line-height: 1.6; max-width: 70ch; font-size: 15px; }
      `}</style>
    </section>
  );
}

function FinalCTA() {
  return (
    <section style={{ paddingBlock: 100 }}>
      <div className="container">
        <div className="final-cta">
          <div>
            <span className="eyebrow">Dernière étape</span>
            <h2 className="h-display" style={{ marginTop: 16, fontSize: "clamp(40px, 5vw, 72px)" }}>
              30 minutes —<br /><em>et vous savez où vous en êtes.</em>
            </h2>
            <p className="lede" style={{ marginTop: 24, color: "rgba(255,255,255,0.75)" }}>
              Diagnostic gratuit, sans engagement. Cinq créneaux par jour, mardi · mercredi · jeudi.
            </p>
            <div className="row" style={{ marginTop: 32, gap: 12 }}>
              <a href="/rendez-vous.html" className="btn btn-primary">Réserver un créneau</a>
              <a href="tel:+33500000000" className="btn" style={{ background: "rgba(255,255,255,0.12)", color: "white" }}>
                <PhoneIcon /> 05 00 00 00 00
              </a>
              <a href="https://wa.me/33000000000" className="btn" style={{ background: "rgba(37,211,102,0.18)", color: "#25D366" }}>
                <WhatsAppIcon /> WhatsApp
              </a>
            </div>
          </div>
          <div className="final-side">
            <div className="final-stat"><b>3j</b><span>par semaine — Ma · Me · Je</span></div>
            <div className="final-stat"><b>15</b><span>créneaux disponibles</span></div>
            <div className="final-stat"><b>24h</b><span>délai d'intervention</span></div>
          </div>
        </div>
      </div>
      <style>{`
        .final-cta { background: var(--bg-deep); color: white; border-radius: var(--radius-xl); padding: 64px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; position: relative; overflow: hidden; }
        .final-cta::before { content: ""; position: absolute; top: -200px; right: -200px; width: 500px; height: 500px; background: radial-gradient(circle, var(--accent), transparent 60%); opacity: 0.20; }
        .final-side { display: flex; flex-direction: column; gap: 16px; position: relative; }
        .final-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 20px 24px; }
        .final-stat b { display: block; font-family: var(--font-serif); font-size: 48px; line-height: 1; color: var(--accent); }
        .final-stat span { display: block; font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px; }
        @media (max-width: 920px) { .final-cta { grid-template-columns: 1fr; padding: 40px; } }
      `}</style>
    </section>
  );
}

function CheckIcon() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>; }
function ToolIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>; }
function BoltIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>; }
function ShieldIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>; }
function CloudIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>; }
function EyeIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>; }
function SyncIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>; }
function RemoteIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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>; }
function PackageIcon() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>; }

Object.assign(window, { Home });