/* Kingstoring Vector — HOME page sections */

function HomeHero() {
  return (
    <section style={{ background: "var(--vk-ink)", color: "var(--vk-ivory)", padding: "96px 32px 120px", position: "relative", overflow: "hidden", borderBottom: "1px solid var(--vk-ink-3)" }}>
      {/* Grid bg */}
      <div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(rgba(88,166,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.04) 1px, transparent 1px)`, backgroundSize: "32px 32px" }} />
      <div style={{ position: "absolute", left: 0, right: 0, top: "55%", height: 1, background: "linear-gradient(90deg, transparent, rgba(255,180,0,0.4), transparent)" }} />

      <div style={{ maxWidth: 1440, margin: "0 auto", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 64, position: "relative" }}>
        {/* Left — copy */}
        <div>
          <div style={{ display: "flex", gap: 12, marginBottom: 32 }}>
            <Pill kind="live" text="MULTIPROPRIÉTÉ · LIVE" />
            <Pill kind="verified" text="MOBILISATION · EU" />
            <Pill kind="focal" text="DEPUIS 2018" />
          </div>
          <span className="vk-mono" style={{ fontSize: 11, color: "var(--vk-amber)", letterSpacing: "0.22em" }}>// CABINET CONSEIL & OPÉRATIONNEL · DEPUIS 2018</span>
          <h1 style={{ fontFamily: "var(--vk-font-display)", fontSize: 112, lineHeight: 0.92, letterSpacing: "-0.045em", fontWeight: 500, margin: "32px 0 32px" }}>
            <span style={{ color: "var(--vk-amber)" }}>Le quorum,</span><br />
            <span style={{ fontStyle: "italic", fontWeight: 300, opacity: 0.75 }}>atteint.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--vk-mist)", maxWidth: 600, margin: "0 0 40px" }}>
            Kingstoring mobilise les associés silencieux pour que vos assemblées générales se tiennent vraiment. Multipropriété, sociétés cotées, structures à actionnariat dispersé — multi-canal, multilingue, jusqu'au scrutin. L'OSINT en appui pour identifier et joindre, partout, dans toutes les langues utiles.
          </p>
          <div style={{ display: "flex", gap: 16 }}>
            <a href="contact.html" style={{ fontFamily: "var(--vk-font-mono)", fontSize: 12, letterSpacing: "0.18em", padding: "14px 22px", background: "var(--vk-amber)", color: "var(--vk-ink)", fontWeight: 600 }}>RÉSERVER UN BRIEFING →</a>
          </div>
        </div>

        {/* Right — Synthèse cabinet (enhanced by JS) */}
        <div data-ks-live-dashboard style={{ background: "var(--vk-ink-2)", border: "1px solid var(--vk-ink-3)", padding: 32, position: "relative", alignSelf: "start" }}>
          <Brackets color="var(--vk-amber)" inset={8} size={10} />

          {/* Header */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
            <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-blue)", letterSpacing: "0.2em" }}>// CABINET · SYNTHÈSE</span>
            <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-mist)" }}><span className="vk-live-dot"></span>LIVE</span>
          </div>
          <div className="vk-mono" style={{ fontSize: 9, color: "var(--vk-mist)", letterSpacing: "0.18em", paddingBottom: 16, borderBottom: "1px solid var(--vk-ink-3)" }}>
            MIS À JOUR · <span data-ks-dash-timestamp>2026·05·07T14:32Z</span>
          </div>

          {/* Intro */}
          <p style={{ fontFamily: "var(--vk-font-display)", fontSize: 16, lineHeight: 1.5, color: "var(--vk-ivory)", margin: "20px 0 24px" }}>
            Cabinet indépendant à Nice, <span style={{ color: "var(--vk-amber)" }}>depuis 2018</span>. Mobilisation actionnariale et multipropriété, en chiffres :
          </p>

          {/* Stats table — clear key/value layout */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto", rowGap: 10, columnGap: 16, fontFamily: "var(--vk-font-mono)", fontSize: 12, alignItems: "baseline" }}>
            <span style={{ color: "var(--vk-mist)", letterSpacing: "0.08em" }}>Associés contactés</span>
            <span style={{ color: "var(--vk-ivory)", fontWeight: 600 }}><span data-ks-counter data-target="5000">5000</span>+</span>

            <span style={{ color: "var(--vk-mist)", letterSpacing: "0.08em" }}>AG mobilisées (2018→26)</span>
            <span style={{ color: "var(--vk-ivory)", fontWeight: 600 }}><span data-ks-counter data-target="12">12</span></span>

            <span style={{ color: "var(--vk-mist)", letterSpacing: "0.08em" }}>Quorum moyen atteint</span>
            <span style={{ color: "var(--vk-green)", fontWeight: 600 }}><span data-ks-counter data-target="74" data-suffix="%">74%</span></span>

            <span style={{ color: "var(--vk-mist)", letterSpacing: "0.08em" }}>Dossiers en cours</span>
            <span style={{ color: "var(--vk-amber)", fontWeight: 600 }}><span data-ks-counter data-target="7">7</span></span>

            <span style={{ color: "var(--vk-mist)", letterSpacing: "0.08em" }}>Langues opérées</span>
            <span style={{ color: "var(--vk-blue)", fontWeight: 600 }}>FR · EN · IT · ES</span>

            <span style={{ color: "var(--vk-mist)", letterSpacing: "0.08em" }}>Canaux activables</span>
            <span style={{ color: "var(--vk-blue)", fontWeight: 600 }}>mail · sms · postal · web</span>
          </div>

          {/* Status */}
          <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--vk-ink-3)", fontFamily: "var(--vk-font-mono)", fontSize: 12, lineHeight: 1.6 }}>
            <div style={{ color: "var(--vk-green)" }}>→ CABINET INDÉPENDANT · NICE · DEPUIS 2018</div>
            <div data-ks-dash-feed style={{ color: "var(--vk-mist)", marginTop: 4, minHeight: 22, transition: "color .3s" }}>_</div>
          </div>

          {/* Sparkline */}
          <div data-ks-sparkline style={{ marginTop: 14, height: 44, position: "relative" }}>
            <div className="vk-mono" style={{ fontSize: 9, color: "var(--vk-mist)", letterSpacing: "0.2em", marginBottom: 4 }}>ACTIVITÉ · 30 DERNIERS JOURS</div>
            {/* canvas is injected by live-dashboard.js */}
          </div>

          {/* Bottom: 3 mini stats (animated counters) */}
          <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--vk-ink-3)", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
            <div>
              <div className="vk-mono" style={{ fontSize: 9, color: "var(--vk-mist)", letterSpacing: "0.18em", marginBottom: 4 }}>ASSOCIÉS</div>
              <div data-ks-counter data-target="5000" style={{ fontFamily: "var(--vk-font-display)", fontSize: 28, fontWeight: 500, letterSpacing: "-0.025em", color: "var(--vk-amber)" }}>5000</div>
            </div>
            <div>
              <div className="vk-mono" style={{ fontSize: 9, color: "var(--vk-mist)", letterSpacing: "0.18em", marginBottom: 4 }}>AG MOB.</div>
              <div data-ks-counter data-target="12" style={{ fontFamily: "var(--vk-font-display)", fontSize: 28, fontWeight: 500, letterSpacing: "-0.025em", color: "var(--vk-green)" }}>12</div>
            </div>
            <div>
              <div className="vk-mono" style={{ fontSize: 9, color: "var(--vk-mist)", letterSpacing: "0.18em", marginBottom: 4 }}>QUORUM MOY.</div>
              <div data-ks-counter data-target="74" data-suffix="%" style={{ fontFamily: "var(--vk-font-display)", fontSize: 28, fontWeight: 500, letterSpacing: "-0.025em", color: "var(--vk-blue)" }}>74%</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePractices() {
  const items = [
    { code: "OBS·01", title: "OSINT",     subtitle: "Recherche & identification",   desc: "Digital footprint, reconnaissance faciale, recoupement multi-source. Identification d'associés, propriétaires, décideurs.",                       href: "osint.html",     metrics: [{ k: "4×",   l: "Recoupement" }, { k: "RGPD", l: "Conforme" }] },
    { code: "TIM·02", title: "Timeshare", subtitle: "Communication multipropriété", desc: "Reconnexion des associés silencieux avec leur C.S. Site associés sécurisé, multi-canal (mail/SMS/postal), multilingue, sondages, mobilisation pré-AG.", href: "timeshare.html", metrics: [{ k: "4",    l: "Langues" }, { k: "4",    l: "Canaux" }] },
    { code: "QRM·03", title: "Quorum",    subtitle: "Mobilisation actionnariale",   desc: "Atteinte de quorum sur AG difficiles. Cartographie d'actionnariat, dispositif de relance, tableau de bord intentions / quorum temps réel.",            href: "quorum.html",    metrics: [{ k: "74%",  l: "Quorum moy." }, { k: "45j",  l: "Délai méd." }] },
  ];
  return (
    <section style={{ background: "var(--vk-paper)", padding: "120px 32px", borderBottom: "1px solid var(--vk-fog)" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64 }}>
          <div>
            <span className="vk-eyebrow" style={{ color: "var(--vk-blue-deep)" }}>// §02 — TROIS PRATIQUES</span>
            <h2 style={{ fontFamily: "var(--vk-font-display)", fontSize: 64, lineHeight: 1, letterSpacing: "-0.035em", fontWeight: 500, margin: "16px 0 0", maxWidth: 800 }}>
              Identifier, joindre,<br />remobiliser.
            </h2>
          </div>
          <p style={{ maxWidth: 360, fontSize: 15, lineHeight: 1.55, color: "var(--vk-slate)", margin: 0 }}>
            Trois pratiques articulées, jamais cloisonnées. L'OSINT identifie et localise. La mobilisation reconnecte et fait voter. Le dispositif opère, multi-canal, multilingue.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, border: "1px solid var(--vk-fog)" }}>
          {items.map((p, i) => (
            <a key={p.code} href={p.href} style={{ padding: 40, borderRight: i < 2 ? "1px solid var(--vk-fog)" : "none", display: "flex", flexDirection: "column", minHeight: 480, position: "relative", color: "inherit", transition: "background .2s" }}
              onMouseEnter={e => e.currentTarget.style.background = "var(--vk-bone)"}
              onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 32 }}>
                <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-amber-deep)", letterSpacing: "0.22em" }}>// {p.code}</span>
                <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-slate)", letterSpacing: "0.18em" }}>0{i + 1}/03</span>
              </div>
              <div style={{ flex: 1 }}>
                <div className="vk-mono" style={{ fontSize: 11, color: "var(--vk-slate)", letterSpacing: "0.18em", marginBottom: 8, textTransform: "uppercase" }}>{p.subtitle}</div>
                <h3 style={{ fontFamily: "var(--vk-font-display)", fontSize: 48, fontWeight: 500, letterSpacing: "-0.03em", margin: "0 0 20px", color: "var(--vk-graphite)" }}>{p.title}.</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--vk-slate)", margin: 0 }}>{p.desc}</p>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, paddingTop: 24, borderTop: "1px solid var(--vk-fog)", marginTop: 32 }}>
                {p.metrics.map(m => (
                  <div key={m.l}>
                    <div style={{ fontFamily: "var(--vk-font-display)", fontSize: 28, fontWeight: 500, letterSpacing: "-0.025em", color: "var(--vk-amber-deep)", lineHeight: 1 }}>{m.k}</div>
                    <div className="vk-mono" style={{ fontSize: 9, color: "var(--vk-slate)", letterSpacing: "0.18em", marginTop: 6, textTransform: "uppercase" }}>{m.l}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24, fontFamily: "var(--vk-font-mono)", fontSize: 11, letterSpacing: "0.18em", color: "var(--vk-amber-deep)" }}>EXPLORER →</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeMethod() {
  const steps = [
    { n: "01", title: "Cartographie",  desc: "Identifier les associés réels, leurs coordonnées à jour, leurs langues. L'OSINT comble les bases incomplètes." },
    { n: "02", title: "Reconnexion",   desc: "Mail, SMS, postal, site associés sécurisé. Multi-canal, multilingue, calendrier orchestré." },
    { n: "03", title: "Engagement",    desc: "Sondages, forum, contact direct avec le conseil. Mesure de l'intention avant l'AG." },
    { n: "04", title: "Mobilisation",  desc: "Plateforme de vote, tableau de bord temps réel, accompagnement jusqu'au scrutin." },
  ];
  return (
    <section style={{ background: "var(--vk-ink)", color: "var(--vk-ivory)", padding: "120px 32px", position: "relative", overflow: "hidden", borderBottom: "1px solid var(--vk-ink-3)" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(rgba(88,166,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.04) 1px, transparent 1px)`, backgroundSize: "32px 32px" }} />
      <div style={{ maxWidth: 1440, margin: "0 auto", position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, marginBottom: 64 }}>
          <div>
            <span className="vk-eyebrow" style={{ color: "var(--vk-amber)" }}>// §03 — MÉTHODE</span>
            <h2 style={{ fontFamily: "var(--vk-font-display)", fontSize: 64, lineHeight: 1, letterSpacing: "-0.035em", fontWeight: 500, margin: "16px 0 24px" }}>
              Quatre étapes,<br />une mécanique éprouvée.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--vk-mist)", margin: 0 }}>
              Une chaîne courte, mesurée, reproductible. Chaque étape produit un livrable opposable au conseil de surveillance et auditable.
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: "1px solid var(--vk-ink-3)" }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{ padding: 32, borderRight: i < 3 ? "1px solid var(--vk-ink-3)" : "none", position: "relative" }}>
              <div style={{ position: "absolute", top: 0, left: 0, height: 2, width: "100%", background: "var(--vk-ink-3)" }}>
                <div style={{ height: "100%", width: `${(i + 1) * 25}%`, background: "var(--vk-amber)" }} />
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 32, marginTop: 16 }}>
                <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-amber)", letterSpacing: "0.22em" }}>// STEP·{s.n}</span>
                <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-mist)" }}>{s.n}/04</span>
              </div>
              <h3 style={{ fontFamily: "var(--vk-font-display)", fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", margin: "0 0 12px" }}>{s.title}</h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--vk-mist)", margin: 0 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeCases() {
  const cases = [
    {
      code: "CASE·001",
      sector: "TIMESHARE · SAVOIE",
      title: "Vente de la résidence La Plagne Bellecôte (SARPB). Mobilisation de 3 400 associés sur résolution de vente.",
      outcome: "20% → 82%",
      time: "Vente votée",
      n: "3 400 associés",
      source: "https://mesinfos.fr/ile-de-france/cornet-vincent-segurel-conseil-de-la-sarpb-114811.html",
      sourceLabel: "mesinfos.fr",
    },
    {
      code: "CASE·002",
      sector: "TIMESHARE · GUADELOUPE",
      title: "Vente du Green Blue Houses. Reconnexion et mobilisation des 700 associés.",
      outcome: "25% → 72%",
      time: "Vente votée",
      n: "700 associés",
    },
    {
      code: "CASE·003",
      sector: "ACCOMPAGNEMENT · C.S.",
      title: "Mission durable auprès de plusieurs conseils de surveillance. Communication réactivée, AG préparées, participation rétablie.",
      outcome: "Multi-dossiers",
      time: "En cours",
      n: "Plusieurs structures",
    },
  ];
  return (
    <section style={{ background: "var(--vk-bone)", padding: "120px 32px", borderBottom: "1px solid var(--vk-fog)" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64 }}>
          <div>
            <span className="vk-eyebrow" style={{ color: "var(--vk-blue-deep)" }}>// §04 — DOSSIERS RÉCENTS</span>
            <h2 style={{ fontFamily: "var(--vk-font-display)", fontSize: 64, lineHeight: 1, letterSpacing: "-0.035em", fontWeight: 500, margin: "16px 0 0", maxWidth: 800 }}>
              Trois dossiers,<br />trois quorums atteints.
            </h2>
          </div>
          <a href="timeshare.html" className="vk-mono" style={{ fontSize: 12, letterSpacing: "0.18em", color: "var(--vk-amber-deep)", padding: "14px 20px", border: "1px solid var(--vk-amber-deep)" }}>TOUS LES DOSSIERS →</a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24 }}>
          {cases.map(c => (
            <article key={c.code} style={{ background: "var(--vk-paper)", border: "1px solid var(--vk-fog)", padding: 32, position: "relative", display: "flex", flexDirection: "column", minHeight: 360 }}>
              <Brackets color="var(--vk-blue-deep)" inset={6} size={10} />
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 24 }}>
                <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-amber-deep)", letterSpacing: "0.22em" }}>// {c.code}</span>
                <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-slate)", letterSpacing: "0.18em" }}>{c.sector}</span>
              </div>
              <h3 style={{ fontFamily: "var(--vk-font-display)", fontSize: 22, lineHeight: 1.25, fontWeight: 500, letterSpacing: "-0.02em", margin: "0 0 24px", flex: 1 }}>{c.title}</h3>
              <div style={{ borderTop: "1px solid var(--vk-fog)", paddingTop: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div>
                  <div className="vk-mono" style={{ fontSize: 9, color: "var(--vk-slate)", letterSpacing: "0.18em", marginBottom: 4, textTransform: "uppercase" }}>Participation</div>
                  <div style={{ fontSize: 16, fontWeight: 600, color: "var(--vk-amber-deep)" }}>{c.outcome}</div>
                </div>
                <div>
                  <div className="vk-mono" style={{ fontSize: 9, color: "var(--vk-slate)", letterSpacing: "0.18em", marginBottom: 4, textTransform: "uppercase" }}>Résultat</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{c.time}</div>
                </div>
                <div style={{ gridColumn: "1 / -1", paddingTop: 12, borderTop: "1px solid var(--vk-fog)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
                  <span className="vk-mono" style={{ fontSize: 10, color: "var(--vk-slate)", letterSpacing: "0.15em" }}>{c.n}</span>
                  {c.source && (
                    <a href={c.source} target="_blank" rel="noopener" className="vk-mono" style={{ fontSize: 10, color: "var(--vk-blue-deep)", letterSpacing: "0.15em", textDecoration: "underline" }}>↗ {c.sourceLabel}</a>
                  )}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeQuote() {
  const quotes = [
    {
      text: "Avec une échéance rapprochée de la société, nécessitant la cession de son actif immobilier puis une dissolution anticipée, les actionnaires de la SARPB ont souhaité se faire accompagner afin d'assurer une cession optimisée et maîtrisée de la résidence Bellecôte. En raison du nombre significatif d'actionnaires, l'opération a été menée en concertation avec l'intervention efficace de la société Kingstoring pour recueillir le quorum nécessaire à la bonne tenue de l'assemblée générale.",
      attrib: "Cornet Vincent Ségurel",
      meta: "EXTRAIT DE COMMUNIQUÉ DE PRESSE · DOSSIER SARPB",
    },
    {
      text: "La mise en place d'une stratégie complète pour l'atteinte de quorums nécessaires aux bonnes tenues des assemblées générales a été initiée tôt dans le processus avec l'aide de la société Kingstoring Consulting afin d'être en mesure de recueillir les 2/3 des votes à chaque étape décisionnelle.",
      attrib: "CBRE France",
      meta: "EXTRAIT DE COMMUNIQUÉ DE PRESSE",
    },
  ];
  return (
    <section style={{ background: "var(--vk-paper)", padding: "120px 32px", borderBottom: "1px solid var(--vk-fog)" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ marginBottom: 64 }}>
          <span className="vk-eyebrow" style={{ color: "var(--vk-blue-deep)" }}>// §05 — ILS NOUS ONT CITÉS</span>
          <h2 style={{ fontFamily: "var(--vk-font-display)", fontSize: 56, lineHeight: 1, letterSpacing: "-0.035em", fontWeight: 500, margin: "16px 0 0", maxWidth: 800 }}>
            Extraits de communiqués<br />de presse.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          {quotes.map((q) => (
            <article key={q.attrib} style={{ background: "var(--vk-bone)", border: "1px solid var(--vk-fog)", padding: 40, position: "relative", display: "flex", flexDirection: "column" }}>
              <Brackets color="var(--vk-amber-deep)" inset={8} size={10} />
              <span style={{ fontFamily: "var(--vk-font-display)", fontSize: 56, lineHeight: 0.5, color: "var(--vk-amber-deep)" }}>«</span>
              <blockquote style={{ margin: "16px 0 24px", fontFamily: "var(--vk-font-display)", fontSize: 19, lineHeight: 1.5, fontWeight: 400, color: "var(--vk-graphite)", flex: 1 }}>
                {q.text}
              </blockquote>
              <div style={{ paddingTop: 20, borderTop: "1px solid var(--vk-fog)" }}>
                <div style={{ fontWeight: 600, fontSize: 15, color: "var(--vk-graphite)" }}>{q.attrib}</div>
                <div className="vk-mono" style={{ fontSize: 10, color: "var(--vk-slate)", letterSpacing: "0.18em", marginTop: 6 }}>{q.meta}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeCTA() {
  return (
    <section style={{ background: "var(--vk-ink)", color: "var(--vk-ivory)", padding: "120px 32px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(rgba(255,180,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,180,0,0.04) 1px, transparent 1px)`, backgroundSize: "32px 32px" }} />
      <div style={{ maxWidth: 1440, margin: "0 auto", position: "relative", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "center" }}>
        <div>
          <span className="vk-eyebrow" style={{ color: "var(--vk-amber)" }}>// READY_TO_BRIEF</span>
          <h2 style={{ fontFamily: "var(--vk-font-display)", fontSize: 88, lineHeight: 0.95, letterSpacing: "-0.04em", fontWeight: 500, margin: "16px 0 32px" }}>
            Un dossier ?<br /><span style={{ color: "var(--vk-amber)" }}>Un briefing</span>.<br />Trente minutes.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--vk-mist)", maxWidth: 600, margin: "0 0 32px" }}>
            Premier rendez-vous confidentiel, sans engagement. Vous exposez le contexte de votre structure ou de votre AG, nous évaluons le périmètre.
          </p>
          <a href="contact.html" style={{ fontFamily: "var(--vk-font-mono)", fontSize: 12, letterSpacing: "0.18em", padding: "16px 28px", background: "var(--vk-amber)", color: "var(--vk-ink)", fontWeight: 600 }}>RÉSERVER UN BRIEFING →</a>
        </div>
        <div style={{ background: "var(--vk-ink-2)", border: "1px solid var(--vk-ink-3)", padding: 32, position: "relative" }}>
          <Brackets color="var(--vk-amber)" inset={8} size={10} />
          <div className="vk-mono" style={{ fontSize: 10, color: "var(--vk-blue)", letterSpacing: "0.2em", marginBottom: 24 }}>// CONTACT_INFO</div>
          {[
            { l: "Email",     v: "contact@kingstoring.com" },
            { l: "Téléphone", v: "06.27.76.44.16" },
            { l: "Bureau",    v: "20 Avenue Jean Médecin · 06000 Nice" },
          ].map((x, i) => (
            <div key={x.l} style={{ paddingTop: 16, borderTop: i === 0 ? "none" : "1px solid var(--vk-ink-3)", paddingBottom: 16 }}>
              <div className="vk-mono" style={{ fontSize: 10, color: "var(--vk-mist)", letterSpacing: "0.2em", marginBottom: 6, textTransform: "uppercase" }}>{x.l}</div>
              <div style={{ fontFamily: "var(--vk-font-mono)", fontSize: 14, color: "var(--vk-ivory)" }}>{x.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomeHero, HomePractices, HomeMethod, HomeCases, HomeQuote, HomeCTA });