// Three Promises — After Hours room.
function ThreePromises() {
  const promises = [
  {
    n: "01",
    kicker: "The Right-Refill Promise",
    title: "Every component sterile, sealed, and right. Or we replace it free.",
    body: "If anything in your refill arrives wrong, missing, expired, or damaged, we refund it and send a replacement.",
    proof: "",
    Icon: IShield,
  },
  {
    n: "02",
    kicker: "Same-Day Delivery",
    title: "New pouch every month. Collect them or don't. Your flatmate won't know either way.",
    body: "Every refill ships in a limited-edition pouch. Discreet, but the kind of discreet you actually want to keep.",
    proof: "",
    Icon: ITruck,
  },
  {
    n: "03",
    kicker: "The 14-Day Promise",
    title: "Open the box. Go through the cards. Change your mind? Refund the most recent refill.",
    body: "If you change your mind, message us and we'll refund your most recent refill.",
    proof: "",
    Icon: IBook,
  }];


  return (
    <section id="promises" style={{ background: "var(--g-after)", color: "#F4F1EA", padding: "72px 0" }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 56, maxWidth: 760 }}>
          <h2 className="display section-title" style={{ color: "#F4F1EA" }}>
            Three things we'll <em style={{ fontStyle: "normal", fontFamily: "var(--font-display)", color: "var(--neon)", fontWeight: 800, textShadow: "0 0 38px rgba(255,222,3,0.25)" }}>stake the business on.</em>
          </h2>
          <p className="section-sub" style={{ color: "rgba(244,241,234,0.7)", maxWidth: "60ch" }}>We don't sell peptides. We don't promise outcomes. What we will stake the company on is the operation: the right refill, on time, every time.
          </p>
        </div>

        <div className="grid-3" style={{ gap: 20 }}>
          {promises.map((p, i) => {const Ic = p.Icon;
              return (
                <div
                  key={i}
                  style={{
                    padding: 28,
                    borderRadius: 16,
                    border: "1px solid rgba(244,241,234,0.12)",
                    background: "rgba(244,241,234,0.04)",
                    boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
                    display: "flex",
                    flexDirection: "column",
                    gap: 16,
                    position: "relative",
                    overflow: "hidden"
                  }}>

                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
                  <span
                      className="mono"
                      style={{
                        fontSize: 11,
                        letterSpacing: "0.16em",
                        color: "rgba(244,241,234,0.5)"
                      }}>
                    {p.n}
                  </span>
                  <span
                      style={{
                        width: 40,
                        height: 40,
                        borderRadius: 10,
                        background: "var(--neon)",
                        display: "grid",
                        placeItems: "center",
                        color: "var(--night)"
                      }}>
                    <Ic size={20} stroke="var(--night)" />
                  </span>
                </div>

                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--neon)" }}>
                  {p.kicker}
                </div>

                <h3 className="display" style={{ fontSize: 24, lineHeight: 1.15, margin: 0, color: "#F4F1EA" }}>
                  {p.title}
                </h3>

                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "rgba(244,241,234,0.78)" }}>
                  {p.body}
                </p>

                {p.proof && <div
                    style={{
                      marginTop: "auto",
                      paddingTop: 16,
                      borderTop: "1px dashed rgba(244,241,234,0.16)",
                      display: "flex",
                      alignItems: "center",
                      gap: 8,
                      fontFamily: "var(--font-mono)",
                      fontSize: 11,
                      letterSpacing: "0.08em",
                      color: "rgba(244,241,234,0.6)"
                    }}>
                  <ICheck size={14} stroke="var(--neon)" />
                  {p.proof}
                </div>}
              </div>);
            })}
        </div>

      </div>
    </section>);
}

Object.assign(window, { ThreePromises });