// What arrives, and how it works — merged section.
// Top: 3-step process as a compact horizontal strip.
// Bottom: kit contents grid.
function KitAndHow() {
  const steps = [
  {
    n: "01",
    title: "Tell us a little",
    body: "Three minutes. Which protocol, which peptide, where to send it.",
    tag: "no signup"
  },
  {
    n: "02",
    title: "A quiet brown box arrives",
    body: "Same day in Bangkok. Plain, unmarked. Driver doesn't know what's inside.",
    tag: "same day"
  },
  {
    n: "03",
    title: "You begin",
    body: "Open the booklet. Scan the QR. A 90-second video walks you through your first dose.",
    tag: "first dose · today"
  }];


  const items = [
  { qty: "50×", name: "Insulin syringes", spec: "0.5ml · 31g · 8mm", icon: ISyringe },
  { qty: "10×", name: "Mixing syringes", spec: "3ml · 21g", icon: ISyringe },
  { qty: "2×", name: "Bacteriostatic water", spec: "30ml · 0.9% benzyl alcohol", icon: IDroplet },
  { qty: "100×", name: "Alcohol prep pads", spec: "70% IPA · individually sealed", icon: ISparkle },
  { qty: "20×", name: "Gauze + plasters", spec: "skin-tone · low-tack", icon: IShield },
  { qty: "1×", name: "The little book", spec: "20pp · pocket-size · dose math done", icon: IBook },
  { qty: "1×", name: "Video tutorials", spec: "8 × 90s · QR-linked", icon: IQR },
  { qty: "1×", name: "Travel pouch", spec: "EVA shell · 12hr fridge-temp", icon: IBag }];


  return (
    <section id="kit" style={{ background: "var(--paper-2)" }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 40 }}>
          <span className="eyebrow">What arrives, and how it works</span>
          <h2 className="display section-title">Eight small things add up.</h2>
          <p className="section-sub">A first peptide cycle has a lot of small parts. We sourced every one of them, then wrote a calm three-step playbook for the moment the box hits the counter.</p>
        </div>

        {/* How — compact horizontal strip */}
        <div id="how" className="how-strip" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 40 }}>
          {steps.map((s, i) =>
          <div
            key={i}
            style={{
              padding: 20,
              borderRadius: 14,
              background: i === 1 ? "var(--accent-soft)" : "var(--white)",
              border: "1px solid var(--line)",
              display: "flex",
              flexDirection: "column",
              gap: 8,
              position: "relative"
            }}>
            
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
                <span className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.16em" }}>STEP {s.n}</span>
                <span
                className="mono"
                style={{
                  fontSize: 10,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  color: i === 1 ? "var(--accent-deep)" : "var(--ink-3)",
                  background: i === 1 ? "var(--white)" : "var(--paper-2)",
                  padding: "3px 8px",
                  borderRadius: 999,
                  fontWeight: 600
                }}>
                
                  {s.tag}
                </span>
              </div>
              <h3 className="display" style={{ fontSize: 22, margin: "4px 0 0", lineHeight: 1.15 }}>{s.title}</h3>
              <p style={{ margin: 0, color: "var(--ink-3)", fontSize: 14, lineHeight: 1.5 }}>{s.body}</p>
            </div>
          )}
        </div>

        {/* Divider eyebrow */}
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 20 }}>
          <span className="eyebrow">Eight items in the box</span>
          <div style={{ flex: 1, height: 1, background: "var(--line)" }} />
        </div>

        {/* Kit grid — compressed, no body copy per item */}
        <div className="grid-4" style={{ gap: 12 }}>
          {items.map((it, i) => {
            const IconC = it.icon;
            return (
              <div
                key={i}
                className="card"
                style={{
                  padding: 16,
                  display: "flex",
                  flexDirection: "column",
                  gap: 10,
                  minHeight: 0
                }}>
                
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div
                    style={{
                      width: 36,
                      height: 36,
                      borderRadius: 9,
                      background: "var(--accent-soft)",
                      color: "var(--accent-deep)",
                      display: "grid",
                      placeItems: "center"
                    }}>
                    
                    <IconC size={18} />
                  </div>
                  <span className="mono" style={{ fontSize: 11, color: "var(--accent-deep)", fontWeight: 600 }}>{it.qty}</span>
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14, color: "var(--ink)", marginBottom: 2 }}>{it.name}</div>
                  <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.04em", lineHeight: 1.5 }}>{it.spec}</div>
                </div>
              </div>);

          })}
        </div>

        <div
          style={{
            marginTop: 24,
            padding: "16px 20px",
            border: "1px dashed var(--line)",
            borderRadius: 12,
            display: "flex",
            gap: 14,
            alignItems: "center",
            flexWrap: "wrap"
          }}>
          
          <IShield size={18} stroke="var(--accent)" />
          <div style={{ fontSize: 13, color: "var(--ink-2)", flex: 1, minWidth: 260 }}>
            <strong style={{ color: "var(--ink)" }}>One thing we don't send:</strong> the peptide itself. That's between you and your doctor. Everything around it is what we're here for.
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 720px) { .how-strip { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>);

}

Object.assign(window, { KitAndHow });