/* ============================================== */
/* Home page — IBD Services — Mobile optimized    */
/* ============================================== */

/* Inject mobile styles */
const mobileCSS = `
  @keyframes ibdPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px #22C55E; }
    50% { opacity: .5; box-shadow: 0 0 3px #22C55E; }
  }
  @media (max-width: 768px) {
    .ibd-hero-grid { grid-template-columns: 1fr !important; }
    .ibd-hero-photo { display: none !important; }
    .ibd-stats-grid { grid-template-columns: 1fr !important; }
    .ibd-stats-grid > div { border-right: none !important; border-bottom: 1px solid #14294A; }
    .ibd-section-head { grid-template-columns: 1fr !important; gap: 24px !important; }
    .ibd-why-grid { grid-template-columns: 1fr !important; }
    .ibd-inv-grid { grid-template-columns: 1fr !important; }
    .ibd-steps { grid-template-columns: 1fr !important; }
    .ibd-steps > div { margin-right: 0 !important; border-top: 2px solid var(--marin); padding: 24px 0 !important; }
    .ibd-cta-grid { grid-template-columns: 1fr !important; }
    .ibd-conditions-grid { grid-template-columns: 1fr !important; }
    .wrap { padding-left: 20px !important; padding-right: 20px !important; }
    .ibd-hero-ctas { flex-direction: column !important; }
    .ibd-hero-ctas a { text-align: center; justify-content: center; }
    .h1 { font-size: clamp(40px, 10vw, 72px) !important; }
  }
`;

function Home() {
  React.useEffect(() => {
    const style = document.createElement("style");
    style.textContent = mobileCSS;
    document.head.appendChild(style);
    return () => document.head.removeChild(style);
  }, []);

  return (
    <Page>
      <Hero />
      <WhyIBD />
      <InventoryStrip />
      <HowItWorks />
      <CTAFinal />
    </Page>
  );
}

/* ---------- HERO ---------- */
function Hero() {
  return (
    <section data-screen-label="01 Hero" style={{
      position: "relative",
      background: "var(--marin)",
      color: "#fff",
      overflow: "hidden",
      borderBottom: "1px solid #14294A",
      minHeight: "100vh",
      display: "flex",
      flexDirection: "column",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "url(assets/hero-construction.jpg)",
        backgroundSize: "cover",
        backgroundPosition: "center 40%",
        backgroundRepeat: "no-repeat",
      }}/>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(105deg, rgba(5,14,26,0.92) 0%, rgba(11,30,56,0.82) 45%, rgba(11,30,56,0.45) 100%)",
      }}/>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 60% 60% at 85% 50%, rgba(232,98,18,0.22), transparent 70%)",
        pointerEvents: "none",
      }}/>

      <div className="wrap" style={{ position: "relative", padding: "72px 32px 0" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
          <span className="tag">Mbour · Saly · Sénégal</span>
          <div style={{
            display: "flex", alignItems: "center", gap: 8,
            background: "rgba(34,197,94,0.12)",
            border: "1px solid rgba(34,197,94,0.35)",
            borderRadius: 999,
            padding: "7px 14px",
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: "50%",
              background: "#22C55E",
              boxShadow: "0 0 8px #22C55E",
              animation: "ibdPulse 2s ease-in-out infinite",
            }}/>
            <span style={{ fontSize: 11, fontWeight: 700, color: "#22C55E", letterSpacing: 1.5, textTransform: "uppercase" }}>
              Disponible
            </span>
          </div>
        </div>

        <div className="ibd-hero-grid" style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr",
          gap: 48,
          alignItems: "center",
          marginTop: 48,
          paddingBottom: 80,
          minHeight: "70vh",
        }}>
          <div>
            <h1 className="h1" style={{ fontSize: "clamp(48px, 7.5vw, 132px)", color: "#fff", maxWidth: "12ch" }}>
              Location d'étais<br/>
              <span style={{ color: "var(--orange)" }}>métalliques</span>
            </h1>

            <p style={{
              marginTop: 28,
              fontFamily: "var(--ff-body)",
              fontWeight: 500,
              fontSize: 18,
              lineHeight: 1.45,
              color: "var(--sable)",
              maxWidth: 560,
            }}>
              IBD Services… notre matériel, vos chantiers.
            </p>

            <p className="body-dark" style={{ marginTop: 16, maxWidth: 520, fontSize: 15 }}>
              Étais de coffrage neufs et révisés, livrés sur la Petite Côte en J+1.
              Tarif clair à la pièce, contrat signé, support de chantier 24h.
            </p>

            <div className="ibd-hero-ctas" style={{ marginTop: 40, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <a href="#/reservation" className="btn btn--orange">
                Réserver maintenant <span className="arr">→</span>
              </a>
              <a href="https://wa.me/221789230600" className="btn btn--ghost-white">
                <span style={{
                  width: 18, height: 18, borderRadius: 999, background: "#25D366",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: 10, fontWeight: 800, color: "#fff"
                }}>W</span>
                WhatsApp
              </a>
            </div>


          </div>

          {/* Panneau droit — masqué sur mobile via CSS */}
          <div className="ibd-hero-photo" style={{ position: "relative", aspectRatio: "3 / 4", minHeight: 420 }}>
            <div style={{
              position: "absolute", inset: 0,
              display: "flex", flexDirection: "column", justifyContent: "flex-end",
              padding: 28,
            }}>
              <div style={{
                position: "absolute", top: 0, right: 0,
                background: "var(--orange)", color: "#fff",
                padding: "12px 16px",
                fontFamily: "var(--ff-title)", fontWeight: 900,
                textTransform: "uppercase", letterSpacing: -.5, lineHeight: 1,
                boxShadow: "6px 6px 0 var(--marin-deep)",
              }}>
                <div style={{ fontSize: 11, letterSpacing: 2, fontWeight: 700 }}>À PARTIR DE</div>
                <div style={{ fontSize: 30, marginTop: 4 }}>1 000<span style={{ fontSize: 13, marginLeft: 4 }}>XOF/J</span></div>
              </div>

              <div style={{
                background: "rgba(5,14,26,0.82)",
                backdropFilter: "blur(12px)",
                border: "1px solid rgba(176,190,202,0.15)",
                padding: "20px 22px",
                display: "grid", gridTemplateColumns: "1fr 1fr",
                gap: "16px 0",
              }}>
                <div style={{ borderRight: "1px solid #14294A", paddingRight: 16 }}>
                  <div className="label" style={{ color: "var(--acier)", fontSize: 9 }}>Support</div>
                  <div className="h3" style={{ color: "var(--sable)", fontSize: 26, marginTop: 4 }}>24h</div>
                  <div style={{ fontSize: 11, color: "var(--acier)", marginTop: 2 }}>WhatsApp · 7/7</div>
                </div>
                <div style={{ paddingLeft: 16 }}>
                  <div className="label" style={{ color: "var(--acier)", fontSize: 9 }}>Livraison</div>
                  <div className="h3" style={{ color: "var(--orange)", fontSize: 26, marginTop: 4 }}>J+1</div>
                  <div style={{ fontSize: 11, color: "var(--acier)", marginTop: 2 }}>Mbour · Saly</div>
                </div>
                <div style={{ borderRight: "1px solid #14294A", borderTop: "1px solid #14294A", paddingRight: 16, paddingTop: 14 }}>
                  <div className="label" style={{ color: "var(--acier)", fontSize: 9 }}>Base standard</div>
                  <div style={{ fontFamily: "var(--ff-title)", fontWeight: 700, color: "#fff", fontSize: 16, marginTop: 4 }}>21 jours</div>
                </div>
                <div style={{ paddingLeft: 16, borderTop: "1px solid #14294A", paddingTop: 14 }}>
                  <div className="label" style={{ color: "var(--acier)", fontSize: 9 }}>Acompte</div>
                  <div style={{ fontFamily: "var(--ff-title)", fontWeight: 700, color: "#fff", fontSize: 16, marginTop: 4 }}>30 %</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, height: 8,
        background: "repeating-linear-gradient(90deg, var(--marin-line) 0 1px, transparent 1px 40px)",
      }}/>
    </section>
  );
}

/* ---------- POURQUOI IBD ---------- */
function WhyIBD() {
  const items = [
    { n: "01", title: "Tarif clair, sans surprise",  body: "Pas de frais cachés. Devis instantané en ligne.", meta: "À partir de 1 000 XOF" },
    { n: "02", title: "Livraison rapide J+1",         body: "Réservation avant 18h, livraison le lendemain matin sur Mbour, Saly, Nguékhokh, Somone. Camion plateau IBD en option.", meta: "Mbour · Saly · Petite Côte" },
    { n: "03", title: "Matériel vérifié, signé",      body: "Étais conformes, testés à chaque rotation. Fiche de contrôle remise à la livraison. Remplacement immédiat si défaut constaté.", meta: "Fiche technique fournie" },
    { n: "04", title: "Équipe de terrain",            body: "Conseil dimensionnement, conseils de pose, support WhatsApp. Nous parlons votre langue — Wolof, Français, Anglais.", meta: "Hotline + WhatsApp 24/7" },
  ];
  return (
    <section data-screen-label="02 Pourquoi IBD" style={{ background: "var(--fond)", padding: "80px 0" }}>
      <div className="wrap">
        <div className="ibd-section-head ibd-reveal" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center", marginBottom: 48 }}>
          <div>
            <span className="tag tag--orange">Pourquoi IBD Services</span>
            <h2 className="h1" style={{ fontSize: "clamp(32px, 4vw, 56px)", color: "var(--marin)", marginTop: 18 }}>
             On vous <span style={{ color: "var(--orange)" }}>équipe,</span><br/>vous batissez.
            </h2>
          </div>
          <div style={{ paddingBottom: 12 }}>
            <p className="body-light" style={{ color: "var(--marin)", fontSize: 16, maxWidth: 480 }}>
              IBD Services équipe les chantiers de la Petite Côte.
              Nous louons exclusivement des étais métalliques — c'est notre métier, pas une option.
            </p>
          </div>
        </div>

        <div className="ibd-why-grid ibd-reveal-group" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "#D7DEE4", border: "1px solid #D7DEE4" }}>
          {items.map(it => (
            <div key={it.n} className="ibd-reveal-scale" style={{
              background: "var(--fond)", padding: "32px 28px",
              display: "flex", gap: 20, alignItems: "flex-start",
              transition: "background .2s",
            }}
            onMouseEnter={e => e.currentTarget.style.background = "#fff"}
            onMouseLeave={e => e.currentTarget.style.background = "var(--fond)"}
            >
              <div style={{
                width: 56, height: 56, flex: "0 0 auto",
                background: "var(--marin)", color: "var(--sable)",
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontFamily: "var(--ff-title)", fontWeight: 900, fontSize: 28,
                position: "relative",
              }}>
                {it.n}
                <span style={{ position: "absolute", right: -4, bottom: -4, width: 8, height: 8, background: "var(--orange)" }}/>
              </div>
              <div style={{ flex: 1 }}>
                <h3 className="h3" style={{ fontSize: 22, color: "var(--marin)" }}>{it.title}</h3>
                <p className="body-light" style={{ color: "var(--noir)", marginTop: 10, fontSize: 14, lineHeight: 1.6 }}>{it.body}</p>
                <div style={{ marginTop: 14, paddingTop: 12, borderTop: "1px solid #E5E9ED", display: "flex", justifyContent: "space-between" }}>
                  <span className="label" style={{ color: "var(--orange)" }}>{it.meta}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- INVENTORY STRIP — 1 seul étai ---------- */
function InventoryStrip() {
  return (
    <section data-screen-label="03 Matériel" style={{ background: "var(--marin)", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div className="wrap" style={{ position: "relative", padding: "80px 32px" }}>
        <div className="ibd-reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 40 }}>
          <div>
            <span className="tag">Matériel disponible</span>
            <h2 className="h1" style={{ fontSize: "clamp(32px, 5vw, 64px)", color: "#fff", marginTop: 14 }}>
              Notre matériel,<br/>prêt pour <span style={{ color: "var(--orange)" }}>votre chantier.</span>
            </h2>
          </div>
        </div>

        {/* Card unique — layout responsive */}
        <div className="ibd-inv-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, alignItems: "start" }}>

          {/* Carte étai */}
          <article className="ibd-reveal-left" style={{
            background: "var(--marin-deep)", border: "1px solid var(--orange)",
            position: "relative", overflow: "hidden",
          }}>
            <div style={{ position: "absolute", top: 14, left: 14, zIndex: 3, display: "flex", alignItems: "center", gap: 6, background: "rgba(34,197,94,0.15)", border: "1px solid rgba(34,197,94,0.4)", borderRadius: 999, padding: "4px 10px" }}>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#22C55E", boxShadow: "0 0 6px #22C55E" }}/>
              <span style={{ fontSize: 10, fontWeight: 700, color: "#22C55E", textTransform: "uppercase", letterSpacing: 1 }}>Disponible</span>
            </div>

            <div style={{ height: 240, position: "relative", overflow: "hidden", borderBottom: "1px solid var(--orange)" }}>
              <img src="assets/etais-stock.jpg" alt="Étai standard" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%" }}/>
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(5,14,26,.1) 0%, rgba(5,14,26,.55) 100%)" }}/>
              <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 4, background: "#E86212" }}/>
              <div style={{ position: "absolute", bottom: 12, left: 12, background: "rgba(5,14,26,.85)", border: "1px solid var(--sable)", padding: "5px 9px", fontFamily: "var(--ff-mono)", fontSize: 11, color: "var(--sable)", letterSpacing: 1 }}>↕ 2,2 – 4,0 m</div>
            </div>

            <div style={{ padding: 24 }}>
              <h3 className="h3" style={{ fontSize: 22, color: "#fff" }}>Étai de coffrage standard</h3>
              <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                <Spec k="Hauteur" v="2,2 – 4,0 m"/>
                <Spec k="Charge" v="1,8 t"/>
              </div>
              <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid #14294A", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div>
                  <span className="label" style={{ color: "var(--acier)" }}>Tarif / jour</span>
                  <div className="h3" style={{ fontSize: 20, color: "var(--sable)", marginTop: 3 }}>1 000 <span style={{ fontSize: 11, color: "var(--acier)" }}>XOF</span></div>
                </div>
              </div>
            </div>
          </article>

          {/* Avantages */}
          <div className="ibd-reveal-right ibd-reveal-group" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              { icon: "✓", t: "Matériel certifié",  b: "Étais contrôlés et révisés à chaque rotation. Fiche technique fournie à la livraison." },
              { icon: "✓", t: "Livraison J+1",       b: "Camion plateau IBD sur chantier le lendemain. Chargement & déchargement inclus." },
              { icon: "✓", t: "Durée flexible",       b: "Minimum 7 jours. Durée adaptée à votre chantier, renouvelable selon disponibilité." },
            ].map(item => (
              <div key={item.t} style={{ display: "flex", gap: 14, padding: "16px 18px", background: "var(--marin-deep)", border: "1px solid #14294A" }}>
                <span style={{ color: "var(--orange)", fontWeight: 900, fontSize: 16, flexShrink: 0, marginTop: 2 }}>{item.icon}</span>
                <div>
                  <div style={{ fontFamily: "var(--ff-title)", fontWeight: 700, fontSize: 15, color: "#fff", textTransform: "uppercase" }}>{item.t}</div>
                  <div style={{ fontSize: 13, color: "var(--acier)", marginTop: 3, lineHeight: 1.5 }}>{item.b}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Spec({ k, v }) {
  return (
    <div style={{ borderLeft: "2px solid #E86212", paddingLeft: 10 }}>
      <div className="label" style={{ color: "var(--acier)", fontSize: 10 }}>{k}</div>
      <div style={{ fontFamily: "var(--ff-title)", fontWeight: 700, fontSize: 16, color: "#fff", marginTop: 2 }}>{v}</div>
    </div>
  );
}

/* ---------- HOW IT WORKS ---------- */
function HowItWorks() {
  const steps = [
    { n: "01", t: "Vous estimez", b: "Indiquez le nombre d'étais et les dates. Devis instantané en ligne ou par WhatsApp." },
    { n: "02", t: "Vous validez",  b: "Acompte 30% par Wave, Orange Money ou virement. Contrat envoyé par email. Réservation confirmée après réception." },
    { n: "03", t: "On livre",      b: "Camion IBD à pied d'œuvre en J+1. Comptage + signature de la fiche de remise. Solde réglé avant ou à la livraison." },
    { n: "04", t: "On récupère",   b: "À la fin de votre période, notre équipe reprend le matériel sur votre chantier." },
  ];
  return (
    <section data-screen-label="04 Process" style={{ background: "var(--fond-warm)", padding: "80px 0" }}>
      <div className="wrap">
        <div className="ibd-reveal" style={{ marginBottom: 48 }}>
          <span className="tag tag--marin">Comment ça marche</span>
          <h2 className="h1" style={{ fontSize: "clamp(32px, 5vw, 64px)", color: "var(--marin)", marginTop: 14 }}>
            Quatre étapes.<br/>Aucune surprise.
          </h2>
        </div>

        <div className="ibd-steps ibd-reveal-group" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
          {steps.map((s, i) => (
            <div key={s.n} className="ibd-reveal" style={{
              padding: "28px 24px 28px 0",
              borderTop: "2px solid var(--marin)",
              marginRight: i < 3 ? 20 : 0,
              position: "relative",
            }}>
              <span style={{ position: "absolute", top: -7, left: 0, width: 12, height: 12, background: "var(--orange)" }}/>
              <span className="mono" style={{ color: "var(--orange)", fontSize: 11, letterSpacing: 2 }}>ÉTAPE {s.n}</span>
              <h3 className="h2" style={{ fontSize: 26, marginTop: 12, color: "var(--marin)" }}>{s.t}</h3>
              <p className="body-light" style={{ marginTop: 10, color: "var(--noir)", fontSize: 14, lineHeight: 1.6 }}>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA FINAL ---------- */
function CTAFinal() {
  return (
    <section data-screen-label="05 CTA final" style={{
  background: "var(--orange)", color: "#fff", position: "relative", overflow: "hidden",
  backgroundImage: "url(assets/volcan.jpeg)",
  backgroundSize: "cover",
  backgroundPosition: "center",
  backgroundBlendMode: "multiply",
}}>
      <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 18px, transparent 18px 36px)", pointerEvents: "none" }}/>

      <div className="wrap" style={{ position: "relative", padding: "48px 32px" }}>
        <div className="ibd-cta-grid ibd-reveal" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "center" }}>
          <div>
            <span className="tag" style={{ color: "var(--marin)" }}>Chantier à équiper ?</span>
            <h2 className="h1" style={{ fontSize: "clamp(36px, 6vw, 88px)", marginTop: 14 }}>
              Vos étais,<br/>livrés demain<br/>matin.
            </h2>
            <p style={{ marginTop: 16, fontSize: 16, maxWidth: 500, lineHeight: 1.55 }}>
              Devis en 2 minutes. Réponse confirmée sous 1h ouvrée.
              Acompte par Wave ou Orange Money.
            </p>
          </div>

          <div style={{ background: "var(--marin-deep)", color: "#fff", padding: 32, position: "relative" }}>
            <span className="label" style={{ color: "var(--acier)" }}>Hotline chantier</span>
            <a href="tel:+221789230600" className="h1" style={{ display: "block", fontSize: "clamp(28px, 4vw, 40px)", color: "#fff", marginTop: 8 }}>
              +221 78 923 06 00
            </a>

            <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid #14294A" }}>
              <span className="label" style={{ color: "var(--acier)" }}>WhatsApp 24/7</span>
              <a href="https://wa.me/221789230600" style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 10, color: "var(--sable)", fontFamily: "var(--ff-title)", fontWeight: 800, fontSize: 20, textTransform: "uppercase" }}>
                <span style={{ width: 32, height: 32, borderRadius: 999, background: "#25D366", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 900, color: "#fff", fontSize: 14 }}>W</span>
                Discuter direct
              </a>
            </div>

            <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid #14294A", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
              <div>
                <span className="label" style={{ color: "var(--acier)" }}>Localisation</span>
                <div style={{ marginTop: 4, fontWeight: 600, fontSize: 14 }}>Route de Saly, Mbour</div>
              </div>
              <div>
                <span className="label" style={{ color: "var(--acier)" }}>Horaires</span>
                <div style={{ marginTop: 4, fontWeight: 600, fontSize: 14 }}>Lun–Sam · 08–19h</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Home = Home;