/* ============================================== */
/* Page À propos — Équipez · Construisez · Avancez */
/* ============================================== */

function APropos() {
  return (
    <Page>
      <AboutHero />
      <AboutStory />
      <AboutKPIs />
    </Page>
  );
}

/* ---------- HERO ---------- */
function AboutHero() {
  return (
    <section data-screen-label="About Hero" style={{
      background: "var(--marin)", color: "#fff",
      position: "relative", overflow: "hidden",
      borderBottom: "1px solid #14294A",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 70% 60% at 90% 50%, rgba(232,98,18,.18), transparent 60%)",
        pointerEvents: "none",
      }}/>
      <div className="wrap" style={{ position: "relative", padding: "84px 32px 96px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
          <span className="tag">À propos d'IBD Services</span>
          <span className="hr-orange"/>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center" }} className="ibd-section-head">
          <div>
            <h1 className="h1" style={{ fontSize: "clamp(48px, 6vw, 108px)", color: "#fff" }}>
              On vous<br/>
              <span style={{ color: "var(--orange)" }}>équipe,</span><br/>
              vous bâtissez.
            </h1>
            <p style={{ marginTop: 28, fontSize: 18, color: "var(--acier)", maxWidth: 480, lineHeight: 1.55 }}>
              IBD Services — partenaire de terrain des chantiers de la Petite Côte.
              Notre matériel, vos chantiers.
            </p>
          </div>

          {/* Photo dépôt */}
          <div style={{ position: "relative", aspectRatio: "4/3", overflow: "hidden" }}>
            <img
              src="assets/entrepot.jpg"
              alt="Dépôt matériaux BTP"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", filter: "saturate(.85) brightness(.9)" }}
            />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, rgba(10,22,40,0.45) 0%, transparent 60%)" }}/>
            <div className="mono" style={{
              position: "absolute", top: 16, right: 16,
              fontSize: 10, letterSpacing: 2, color: "var(--acier)",
              background: "rgba(5,14,26,.80)", padding: "6px 10px"
            }}>DÉPÔT / 01</div>
            <div className="mono" style={{
              position: "absolute", left: 16, bottom: 16,
              fontSize: 10, letterSpacing: 2, color: "var(--acier)",
              background: "rgba(5,14,26,.80)", padding: "6px 10px",
              borderLeft: "2px solid var(--orange)"
            }}>ROUTE DE SALY · MBOUR</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- STORY (photo container à gauche, texte à droite) ---------- */
function AboutStory() {
  return (
    <section data-screen-label="Notre histoire" style={{ background: "var(--fond)", padding: "48px 0" }}>
      <div className="wrap">
        <div className="ibd-about-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 64, alignItems: "center",
        }}>
          {/* photo container étais à gauche */}
          <div style={{ position: "relative", aspectRatio: "4 / 5" }}>
            <img
              src="assets/etais-stock.jpg"
              alt="Stock d'étais métalliques IBD"
              style={{
                position: "absolute", inset: 0,
                width: "100%", height: "100%",
                objectFit: "cover",
                objectPosition: "center",
                filter: "saturate(.95) contrast(1.05)"
              }}
            />
            {/* corner ticks */}
            <div style={{
              position: "absolute", inset: 14,
              border: "1px dashed rgba(255,255,255,.35)",
              pointerEvents: "none"
            }}/>
            {/* photo corner ref */}
            <div className="mono" style={{
              position: "absolute", top: 22, right: 22,
              fontSize: 10, letterSpacing: 2,
              color: "var(--sable)",
              background: "rgba(5,14,26,.78)",
              padding: "6px 10px"
            }}>DÉPÔT / 01</div>
            {/* photo label */}
            <div className="mono" style={{
              position: "absolute", left: 22, bottom: 22,
              fontSize: 10, letterSpacing: 2,
              color: "var(--acier)",
              background: "rgba(5,14,26,.78)",
              padding: "6px 10px",
              borderLeft: "2px solid var(--orange)"
            }}>STOCK ÉTAIS · ROUTE DE SALY</div>
          </div>

          {/* texte à droite */}
          <div>
            <span className="tag tag--marin">Notre histoire</span>
            <h2 className="h1" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--marin)", marginTop: 18 }}>
              Un dépôt.<br/>
              Une équipe.<br/>
              <span style={{ color: "var(--orange)" }}>Un seul métier.</span>
            </h2>

            <div style={{ display: "flex", flexDirection: "column", gap: 18, marginTop: 28 }}>
              <p className="body-light" style={{ fontSize: 16, color: "var(--noir)" }}>
                IBD Services est né sur le terrain. Un container, une trentaine d'étais
                et une frustration partagée par les chantiers de la Petite Côte : trouver du matériel
                fiable, à un tarif clair, livré quand on le promet.
              </p>
              <p className="body-light" style={{ fontSize: 16, color: "var(--noir)" }}>
                Aujourd'hui, nous gérons un parc d'étais en rotation continue entre Mbour,
                Saly, Nguékhokh et Somone. Pas de scaffolding, pas de banche, pas de plâtre —
                <strong style={{ color: "var(--marin)" }}> uniquement des étais</strong>. C'est notre métier, pas un rayon.
              </p>
              <p className="body-light" style={{ fontSize: 16, color: "var(--noir)" }}>
                Notre promesse n'a pas changé : du matériel qui tient, une équipe qui répond,
                un tarif que vous comprenez avant de signer.
              </p>
            </div>

            <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--acier-soft)" }}>
              <div className="label" style={{ color: "var(--orange)" }}>Signé</div>
              <div className="h3" style={{ fontSize: 24, marginTop: 8, color: "var(--marin)" }}>
                Idrissa DIA
              </div>
              <div className="mono" style={{ fontSize: 11, color: "#7E8B96", marginTop: 4, letterSpacing: 1.5 }}>
                FONDATEUR · IBD SERVICES
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 3 CHIFFRES CLÉS ---------- */
function AboutKPIs() {
  const kpis = [
    { val: "1",     unit: "gamme",  k: "Étai standard", body: "Hauteur réglable de 2,2 m à 4,0 m. Charge admissible certifiée." },
    { val: "J+1",   unit: "",       k: "Livraison Petite Côte", body: "Mbour, Saly, Nguékhokh, Somone. Camion plateau IBD." },
    { val: "24h",   unit: "/ 7",    k: "Support chantier",       body: "Hotline + WhatsApp dédiés à votre équipe." },
  ];
  return (
    <section style={{ background: "var(--marin)", color: "#fff", padding: "0" }}>
      <div className="wrap">
        <div className="ibd-stats-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }}>
          {kpis.map((s, i) => (
            <div key={i} style={{
              padding: "56px 32px",
              borderRight: i < 2 ? "1px solid #14294A" : "none",
              position: "relative",
            }}>
              <span className="label" style={{ color: "var(--acier)", fontSize: 10 }}>0{i+1} / 03 · CHIFFRE CLÉ</span>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 18, flexWrap: "nowrap" }}>
                <span className="h1" style={{ fontSize: 88, color: "#fff", whiteSpace: "nowrap" }}>{s.val}</span>
                <span className="h3" style={{ fontSize: 26, color: "var(--orange)", whiteSpace: "nowrap" }}>{s.unit}</span>
              </div>
              <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid #14294A" }}>
                <div className="h3" style={{ fontSize: 20, color: "#fff" }}>{s.k}</div>
                <p className="body-dark" style={{ fontSize: 14, marginTop: 8 }}>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- VALEURS / MANIFESTO ---------- */
function AboutValues() {
  const vals = [
    { v: "Réactif", k: "01", body: "Disponible, mobile, livraison express sur les chantiers. WhatsApp répondu sous 15 minutes en heures ouvrées." },
    { v: "Fiable", k: "02", body: "On livre ce qu'on promet, dans les meilleurs délais. Fiche de remise signée à chaque rotation." },
    { v: "Local", k: "03", body: "Ancré à Mbour/Saly, le terrain n'a pas de secrets pour nous. Wolof, français, anglais — on parle votre langue." },
    { v: "Professionnel", k: "04", body: "Contrats, devis, factures, NINEA, assurances : tout est réglé chez IBD. Pas de zone grise." },
  ];
  return (
    <section data-screen-label="Valeurs" style={{ background: "var(--fond-warm)", padding: "104px 0" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 56 }}>
          <div style={{ flex: "1 1 480px", minWidth: 0 }}>
            <span className="tag tag--orange">Personnalité de marque</span>
            <h2 className="h1" style={{ fontSize: "clamp(36px, 4.6vw, 68px)", color: "var(--marin)", marginTop: 16 }}>
              Quatre mots,<br/>tenus à la lettre.
            </h2>
          </div>
          <span className="mono" style={{ fontSize: 11, color: "var(--marin)", letterSpacing: 2, opacity: .6 }}>
            VALEURS / 04
          </span>
        </div>

        <div className="ibd-values-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          {vals.map((v) => (
            <div key={v.v} style={{
              padding: 28, background: "#fff",
              border: "1px solid var(--acier-soft)",
              borderTop: "4px solid var(--orange)",
              position: "relative",
            }}>
              <span className="mono" style={{
                position: "absolute", top: 14, right: 14,
                fontSize: 10, letterSpacing: 2, color: "#7E8B96",
              }}>{v.k}</span>
              <h3 className="h1" style={{ fontSize: "clamp(28px, 2.4vw, 36px)", color: "var(--marin)", marginTop: 14 }}>
                {v.v}<span style={{ color: "var(--orange)" }}>.</span>
              </h3>
              <p className="body-light" style={{ fontSize: 14, marginTop: 14 }}>{v.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA ---------- */
function AboutCTA() {
  return (
    <section style={{ background: "var(--fond)", padding: "96px 0" }}>
      <div className="wrap">
        <div style={{
          background: "var(--marin)", color: "#fff",
          padding: "56px 48px",
          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 32,
          position: "relative", overflow: "hidden",
        }}>
          <div style={{ position: "relative", maxWidth: 600 }}>
            <span className="tag">On a un chantier à équiper ?</span>
            <h3 className="h1" style={{ fontSize: "clamp(36px, 4vw, 56px)", marginTop: 14, color: "#fff" }}>
              Parlons-en<br/><span style={{ color: "var(--orange)" }}>maintenant.</span>
            </h3>
          </div>
          <div style={{ position: "relative", display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#/reservation" onClick={() => setTimeout(() => window.scrollTo({top:0, behavior:"smooth"}), 50)} className="btn btn--orange">Voir les tarifs <span className="arr">→</span></a>
            <a href="#/contact" className="btn btn--ghost-white">Nous contacter <span className="arr">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.APropos = APropos;