// Three Promises — operational risk reversal. Spade-seller's grand slam.
// Sits directly above Pricing.
function ThreePromises() {
  const promises = [
  {
    n: "01",
    kicker: "The Right-Kit Promise",
    title: "Every component sterile, sealed, and right — or it's free.",
    body: "If anything in your kit arrives wrong, missing, expired, or damaged, we refund the kit and overnight a replacement. No photos to take, no forms to fill. One message, one fix.",
    proof: "Lot-traceable · expiry-tracked · double-sealed",
    Icon: IShield,
    quote: "Apparently I had been doing the math wrong. The little book caught it on the first night.",
    author: "Rin S.",
    authorMeta: "month two",
    featured: true
  },
  {
    n: "02",
    kicker: "The Same-Day Promise",
    title: "On your door by 9pm in Bangkok — or this kit is on us.",
    body: "Order by 2pm any weekday inside Bangkok's 47 covered districts. If we don't deliver by 9pm the same day, the kit is free. We track every order against this clock so you don't have to.",
    proof: "Bangkok · 47 districts · unmarked packaging",
    Icon: ITruck,
    quote: "What I got was a brown box and a small book and a very calm afternoon.",
    author: "Marc T.",
    authorMeta: "first cycle"
  },
  {
    n: "03",
    kicker: "The 14-Day Promise",
    title: "Open the box. Read the booklet. Change your mind? Refund the most recent kit.",
    body: "Whichever kit landed last — that's the one with the 14-day window. If you change your mind, message us and we refund it. Keep the booklet. Keep the welcome kit. No photos, no forms, no awkward questions.",
    proof: "14-day window · most recent kit · no questions",
    Icon: IBook,
    quote: "It wasn't easy until this showed up. Then it was actually a little boring. Which is what I wanted.",
    author: "Anya P.",
    authorMeta: "first cycle"
  }];


  return (
    <section id="promises" style={{ background: "var(--ink)", color: "var(--paper)", padding: "72px 0" }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 56, maxWidth: 760 }}>
          <h2 className="display section-title" style={{ color: "var(--paper)" }}>
            Three things we'll <em style={{ fontFamily: "var(--font-display)", color: "var(--accent)", fontWeight: 400 }}>stake the business on.</em>
          </h2>
          <p className="section-sub" style={{ color: "color-mix(in srgb, var(--paper) 70%, transparent)", maxWidth: "60ch" }}>We don't sell peptides. We don't promise outcomes. What we will stake the company on is the operation: the kit, the timing, and the moment before your first injection.

          </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: 18,
                    border: "1px solid color-mix(in srgb, var(--paper) 14%, transparent)",
                    background: "color-mix(in srgb, var(--paper) 4%, transparent)",
                    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: "color-mix(in srgb, var(--paper) 50%, transparent)"
                      }}>
                    
                    {p.n}
                  </span>
                  <span
                      style={{
                        width: 40,
                        height: 40,
                        borderRadius: 10,
                        background: "var(--accent)",
                        display: "grid",
                        placeItems: "center",
                        color: "white"
                      }}>
                    
                    <Ic size={20} stroke="white" />
                  </span>
                </div>

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

                <h3 className="display" style={{ fontSize: 24, lineHeight: 1.15, margin: 0, color: "var(--paper)" }}>
                  {p.title}
                </h3>

                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "color-mix(in srgb, var(--paper) 78%, transparent)" }}>
                  {p.body}
                </p>

                {/* Customer quote — folded in from the old Testimonials section */}
                <div
                    style={{
                      padding: "16px 18px",
                      borderRadius: 10,
                      background: "color-mix(in srgb, var(--paper) 8%, transparent)",
                      borderLeft: "3px solid var(--accent)",
                      display: "flex",
                      flexDirection: "column",
                      gap: 10
                    }}>
                  
                  <p
                      style={{
                        margin: 0,
                        fontSize: p.featured ? 19 : 15,
                        lineHeight: p.featured ? 1.45 : 1.55,
                        fontWeight: p.featured ? 500 : 400,
                        color: "var(--paper)",
                        fontFamily: p.featured ? "var(--font-display)" : "var(--font-body)",
                        letterSpacing: p.featured ? "-0.005em" : "normal"
                      }}>
                    
                    "{p.quote}"
                  </p>
                  <div
                      className="mono"
                      style={{
                        fontSize: 11,
                        letterSpacing: "0.08em",
                        textTransform: "uppercase",
                        color: "color-mix(in srgb, var(--paper) 70%, transparent)"
                      }}>
                    
                    — {p.author} · {p.authorMeta}
                  </div>
                </div>

                <div
                    style={{
                      marginTop: "auto",
                      paddingTop: 16,
                      borderTop: "1px dashed color-mix(in srgb, var(--paper) 16%, transparent)",
                      display: "flex",
                      alignItems: "center",
                      gap: 8,
                      fontFamily: "var(--font-mono)",
                      fontSize: 11,
                      letterSpacing: "0.08em",
                      color: "color-mix(in srgb, var(--paper) 60%, transparent)"
                    }}>
                  
                  <ICheck size={14} stroke="var(--accent)" />
                  {p.proof}
                </div>
              </div>);

            })}
        </div>

        <div
          style={{
            marginTop: 32,
            padding: "16px 20px",
            borderRadius: 12,
            background: "color-mix(in srgb, var(--paper) 6%, transparent)",
            border: "1px solid color-mix(in srgb, var(--paper) 12%, transparent)",
            display: "flex",
            alignItems: "center",
            gap: 14,
            flexWrap: "wrap",
            fontSize: 13,
            color: "color-mix(in srgb, var(--paper) 75%, transparent)"
          }}>
          
          <IBolt size={18} stroke="var(--accent)" />
          <span>
            <strong style={{ color: "var(--paper)" }}>One message resolves any of these.</strong>{" "}
            A real human, 7 days a week. No tickets, no menu trees.
          </span>
        </div>
      </div>
    </section>);

}

Object.assign(window, { ThreePromises });