/* PlaceholderSection — empty "À compléter" blocks for menu items without content yet. window.PlaceholderSection */
(function () {
  const Icon = window.Icon, SectionHead = window.SectionHead;

  // ----- shape variants for the drop zone -----
  const Shapes = {
    text({ note }) {
      return (
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 36, alignItems: "start" }} className="ema-2col">
          <Lines lines={[78, 92, 68, 86, 74]} />
          <div style={{ background: "var(--paper-2)", borderRadius: 8, padding: 26, border: "1px solid var(--hairline)" }}>
            <Lines lines={[80, 95, 70]} />
            <div style={{ height: 20 }}></div>
            <Lines lines={[88, 75, 90]} />
          </div>
        </div>
      );
    },
    cards({ count = 3 }) {
      return (
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${count},minmax(0,1fr))`, gap: 16 }} className={count >= 3 ? "ema-3col" : "ema-2col"}>
          {Array.from({ length: count }).map((_, i) => (
            <div key={i} style={{ background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 8, padding: "26px 24px", minHeight: 200 }}>
              <div style={{ width: 40, height: 40, borderRadius: 99, background: "var(--paper-2)", marginBottom: 18 }}></div>
              <Lines lines={[90, 70]} thick />
              <div style={{ height: 12 }}></div>
              <Lines lines={[82, 95, 72]} />
            </div>
          ))}
        </div>
      );
    },
    calendar({ count = 4 }) {
      const months = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Aoû", "Sep", "Oct", "Nov", "Déc"];
      return (
        <div style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--hairline)", border: "1px solid var(--hairline)", borderRadius: 8, overflow: "hidden" }}>
          {Array.from({ length: count }).map((_, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "84px 1fr auto", gap: 24, alignItems: "center", background: "var(--surface)", padding: "22px 26px" }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--gold-600)", letterSpacing: ".1em", textTransform: "uppercase" }}>{months[i % 12]} 2026</div>
              <Lines lines={[72]} thick />
              <span style={{ color: "var(--slate-400)", display: "flex" }}><Icon name="arrow" size={16} /></span>
            </div>
          ))}
        </div>
      );
    },
    faq({ count = 4 }) {
      return (
        <div style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--hairline)", border: "1px solid var(--hairline)", borderRadius: 8, overflow: "hidden" }}>
          {Array.from({ length: count }).map((_, i) => (
            <details key={i} style={{ background: "var(--surface)", padding: "22px 26px" }}>
              <summary style={{ cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between", listStyle: "none", gap: 24 }}>
                <span style={{ fontFamily: "var(--display)", fontSize: 19, color: "var(--ink)" }}>Question {i + 1}</span>
                <span style={{ color: "var(--gold-500)", display: "flex" }}><Icon name="arrowDown" size={18} /></span>
              </summary>
              <div style={{ paddingTop: 14 }}><Lines lines={[88, 80]} /></div>
            </details>
          ))}
        </div>
      );
    },
    form() {
      return (
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 18 }} className="ema-2col">
          {["Raison sociale", "SIRET / Identifiant", "Secteur d'activité", "Effectif", "Contact référent", "Téléphone", "E-mail", "Site web"].map((label, i) => (
            <div key={i} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--slate-400)" }}>{label}</span>
              <div style={{ height: 44, border: "1px solid var(--hairline)", borderRadius: 6, background: "var(--surface)" }}></div>
            </div>
          ))}
          <div style={{ gridColumn: "1/-1", display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--slate-400)" }}>Présentation & motivations</span>
            <div style={{ height: 120, border: "1px solid var(--hairline)", borderRadius: 6, background: "var(--surface)" }}></div>
          </div>
          <div style={{ gridColumn: "1/-1", display: "flex", gap: 12, marginTop: 6 }}>
            <button className="btn btn-gold" type="button" disabled style={{ opacity: .5, cursor: "default" }}>Envoyer le dossier</button>
            <button className="btn btn-ghost" type="button" disabled style={{ opacity: .5, cursor: "default" }}>Télécharger en PDF</button>
          </div>
        </div>
      );
    },
  };

  function Lines({ lines = [80], thick }) {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: thick ? 10 : 8 }}>
        {lines.map((w, i) => (
          <div key={i} style={{ width: w + "%", height: thick ? 12 : 10, background: "var(--paper-2)", borderRadius: 99 }}></div>
        ))}
      </div>
    );
  }

  // ----- the placeholder section -----
  window.PlaceholderSection = function PlaceholderSection({ id, eyebrow, title, lede, note, type = "cards", count, alt, lang }) {
    const Shape = Shapes[type] || Shapes.cards;
    const bg = alt ? "var(--bg-alt)" : "var(--bg)";
    const todoLabel = lang === "en" ? "To complete" : "À compléter";
    return (
      <section id={id} className="section" style={{ background: bg, scrollMarginTop: 80, paddingBlock: "clamp(56px,7vw,96px)" }}>
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap" }}>
            <div data-reveal style={{ maxWidth: 640 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
                <span className="kicker-rule"></span>
                <span className="eyebrow">{eyebrow}</span>
              </div>
              <h2 className="display" style={{ fontSize: "clamp(30px,3.6vw,46px)", margin: 0 }}>{title}</h2>
              {lede && <p className="lede" style={{ marginTop: 14, fontSize: 18 }}>{lede}</p>}
            </div>
            <div data-reveal style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 14px", border: "1px dashed var(--gold-400)", borderRadius: 99, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--gold-600)", background: "rgba(184,144,47,.06)" }}>
              <span style={{ width: 6, height: 6, borderRadius: 99, background: "var(--gold-500)", animation: "emaPulse 2s ease-in-out infinite" }}></span>
              {todoLabel}
            </div>
          </div>

          <div data-reveal style={{ marginTop: 36, position: "relative" }}>
            <Shape count={count} note={note} />
            {note && (
              <p style={{ marginTop: 22, fontFamily: "var(--mono)", fontSize: 12, color: "var(--slate-400)", letterSpacing: ".04em", textAlign: "center" }}>↳ {note}</p>
            )}
          </div>
        </div>
      </section>
    );
  };
})();