// Pain points, Services, Process, About

const PAIN_ICONS = {
  slow: ( // Ordi lent — écran avec points de chargement
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="3" width="28" height="20" rx="2"/>
      <line x1="10" y1="29" x2="22" y2="29"/>
      <line x1="16" y1="23" x2="16" y2="29"/>
      <circle cx="10" cy="13" r="2" fill="currentColor" stroke="none"/>
      <circle cx="16" cy="13" r="2" fill="currentColor" stroke="none"/>
      <circle cx="22" cy="13" r="2" fill="currentColor" stroke="none"/>
    </svg>
  ),
  security: ( // Données — bouclier avec point d'exclamation
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M16 2L3 7v9c0 7 5.5 12 13 14 7.5-2 13-7 13-14V7Z"/>
      <line x1="16" y1="11" x2="16" y2="18" strokeWidth="2"/>
      <circle cx="16" cy="22.5" r="1.5" fill="currentColor" stroke="none"/>
    </svg>
  ),
  support: ( // Pas de support — combiné téléphone
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 4h5l3 7-3.5 2a17 17 0 0 0 7.5 7.5L21 17l7 3v5a2 2 0 0 1-2 2A28 28 0 0 1 3 3a2 2 0 0 1 2-2h2z"/>
      <line x1="24" y1="4" x2="28" y2="8" strokeWidth="2"/>
      <line x1="28" y1="4" x2="24" y2="8" strokeWidth="2"/>
    </svg>
  ),
  response: ( // Prestataire lent — horloge
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="16" cy="16" r="13"/>
      <polyline points="16,8 16,17 22,17"/>
    </svg>
  ),
  web: ( // Site vieux — navigateur avec avertissement
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="28" height="22" rx="2"/>
      <line x1="2" y1="11" x2="30" y2="11"/>
      <circle cx="7" cy="7.5" r="1.5" fill="currentColor" stroke="none"/>
      <circle cx="12" cy="7.5" r="1.5" fill="currentColor" stroke="none"/>
      <path d="M13 21l3-6 3 6"/>
      <line x1="14.2" y1="19" x2="17.8" y2="19"/>
    </svg>
  ),
  cost: ( // Facture incomprise — reçu avec point d'interrogation
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 2h20v28l-4-3-4 3-4-3-4 3-4-3V2z"/>
      <line x1="11" y1="10" x2="21" y2="10"/>
      <line x1="11" y1="15" x2="17" y2="15"/>
      <path d="M18 21a2.5 2.5 0 1 1 3 2.4c-.8.3-1 .8-1 1.6"/>
      <circle cx="20" cy="27" r="1" fill="currentColor" stroke="none"/>
    </svg>
  ),
};

function PainPoints({ t }) {
  return (
    <section className="section pain-section" id="pain">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="caps eyebrow mono" style={{ marginBottom: 20 }}>[01] — {t.pain.eyebrow}</div>
            <h2 className="display title">{t.pain.title}</h2>
          </div>
          <p className="sub">{t.pain.sub}</p>
        </div>
        <div className="pain-grid">
          {t.pain.items.map((item, i) => (
            <div key={i} className="pain-card">
              <div className="pain-icon">{PAIN_ICONS[item.icon]}</div>
              <p className="pain-text">{item.t}</p>
            </div>
          ))}
        </div>
        <div className="pain-cta">
          <a href="#contact" className="btn btn-primary">{t.pain.cta} →</a>
        </div>
      </div>
    </section>
  );
}

const SVC_ICONS = {
  "01": ( // Surveillance permanente — oeil
    <svg width="36" height="36" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 16s5-9 14-9 14 9 14 9-5 9-14 9S2 16 2 16z"/>
      <circle cx="16" cy="16" r="4"/>
      <circle cx="16" cy="16" r="1.5" fill="currentColor" stroke="none"/>
    </svg>
  ),
  "02": ( // Équipement & mise en place — écran
    <svg width="36" height="36" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="28" height="18" rx="2"/>
      <line x1="10" y1="28" x2="22" y2="28"/>
      <line x1="16" y1="22" x2="16" y2="28"/>
    </svg>
  ),
  "03": ( // Dépannage & assistance — casque support
    <svg width="36" height="36" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 16a10 10 0 0 1 20 0"/>
      <rect x="4" y="15" width="4" height="7" rx="2"/>
      <rect x="24" y="15" width="4" height="7" rx="2"/>
      <path d="M28 22v2a4 4 0 0 1-4 4h-4"/>
      <circle cx="19" cy="28" r="1.5" fill="currentColor" stroke="none"/>
    </svg>
  ),
  "04": ( // Réseau & connexion — wifi
    <svg width="36" height="36" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 10a20 20 0 0 1 28 0"/>
      <path d="M6 15a13 13 0 0 1 20 0"/>
      <path d="M10.5 20a8 8 0 0 1 11 0"/>
      <circle cx="16" cy="26" r="2" fill="currentColor" stroke="none"/>
    </svg>
  ),
  "05": ( // Protection de vos données — cadenas
    <svg width="36" height="36" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="14" width="20" height="15" rx="2"/>
      <path d="M11 14v-4a5 5 0 0 1 10 0v4"/>
      <circle cx="16" cy="21" r="2" fill="currentColor" stroke="none"/>
      <line x1="16" y1="23" x2="16" y2="26"/>
    </svg>
  ),
  "06": ( // Votre site internet — navigateur
    <svg width="36" height="36" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="28" height="24" rx="2"/>
      <line x1="2" y1="12" x2="30" y2="12"/>
      <circle cx="7" cy="8" r="1.5" fill="currentColor" stroke="none"/>
      <circle cx="12" cy="8" r="1.5" fill="currentColor" stroke="none"/>
      <line x1="8" y1="18" x2="24" y2="18"/>
      <line x1="8" y1="22" x2="20" y2="22"/>
    </svg>
  ),
  "07": ( // Votre application mobile — téléphone
    <svg width="36" height="36" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="8" y="2" width="16" height="28" rx="3"/>
      <line x1="8" y1="7" x2="24" y2="7"/>
      <line x1="8" y1="25" x2="24" y2="25"/>
      <circle cx="16" cy="28" r="1" fill="currentColor" stroke="none"/>
      <line x1="12" y1="14" x2="20" y2="14"/>
      <line x1="12" y1="18" x2="17" y2="18"/>
    </svg>
  ),
  "08": ( // Bilan & conseil — presse-papier
    <svg width="36" height="36" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 4h4a2 2 0 0 1 2 2v22a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4"/>
      <rect x="12" y="2" width="8" height="5" rx="1"/>
      <polyline points="11,15 13.5,17.5 21,10"/>
      <polyline points="11,21 13.5,23.5 21,16"/>
    </svg>
  ),
};

function Services({ t }) {
  const [filter, setFilter] = React.useState("all");
  const items = t.services.items.filter((i) => filter === "all" || i.side === filter);
  const count = t.services.items.length.toString().padStart(2, "0");

  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="caps eyebrow mono" style={{ marginBottom: 20 }}>[02] — {t.services.eyebrow}</div>
            <h2 className="display title">{t.services.title}</h2>
          </div>
          {t.services.sub && <p className="sub">{t.services.sub}</p>}
        </div>

        <div className="svc-tabs">
          <button className={filter === "all" ? "active" : ""} onClick={() => setFilter("all")}>
            {t.services.all}
          </button>
          <button className={filter === "net" ? "active" : ""} onClick={() => setFilter("net")}>
            {t.services.net}
          </button>
          <button className={filter === "dev" ? "active" : ""} onClick={() => setFilter("dev")}>
            {t.services.dev}
          </button>
        </div>

        <div className="svc-grid">
          {items.map((it, i) => (
            <div key={i} className="svc-card">
              <div className="svc-icon">{SVC_ICONS[it.tag]}</div>
              <div className="svc-cat">{it.side === "net" ? t.services.net : t.services.dev}</div>
              <h3>{it.title}</h3>
              <p className="body">{it.body}</p>
              <ul>
                {it.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process({ t }) {
  return (
    <section className="section" id="process">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="caps eyebrow mono" style={{ marginBottom: 20 }}>[03] — {t.process.eyebrow}</div>
            <h2 className="display title">{t.process.title}</h2>
          </div>
          <p className="sub">{t.process.sub}</p>
        </div>
        <div className="proc-grid">
          {t.process.steps.map((s, i) => (
            <div key={i} className="proc-step">
              <div className="n mono">{s.n} / 05</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function About({ t }) {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="caps eyebrow mono" style={{ marginBottom: 20 }}>[04] — {t.about.eyebrow}</div>
            <h2 className="display title">{t.about.title}</h2>
          </div>
          <div>
            <p style={{ fontSize: 17, color: "var(--ink-dim)", lineHeight: 1.65 }}><BrandInline>{t.about.p1}</BrandInline></p>
            <p style={{ fontSize: 17, color: "var(--ink-dim)", marginTop: 18, lineHeight: 1.65 }}><BrandInline>{t.about.p2}</BrandInline></p>
          </div>
        </div>
        <div className="values-grid">
          {t.about.values.map((v, i) => (
            <div key={i} className="value-card">
              <div className="value-num mono">0{i + 1}</div>
              <h5>{v.t}</h5>
              <p>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PainPoints, Services, Process, About });
