// What ships every month — right-sized monthly kit for a weekly-use new user.
function MonthlyKit() {
  const items = [
    { qty: "10×", name: "Insulin syringes", spec: "0.5ml · 31g · 8mm" },
    { qty: "20×", name: "Alcohol pads", spec: "70% IPA · sealed" },
    { qty: "2×",  name: "Mixing syringes", spec: "3ml · 21g" },
    { qty: "1×",  name: "Bacteriostatic water", spec: "30ml · 0.9% benzyl alcohol" },
    { qty: "10×", name: "Gauze + plasters", spec: "skin-tone · low-tack" },
    { qty: "10×", name: "Cotton balls", spec: "100% cotton · pressed" },
    { qty: "5×",  name: "Date stickers", spec: "matte · for the vial" }
  ];

  return (
    <section id="monthly" style={{ background: "var(--paper)" }}>
      <div className="container">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1.05fr",
            gap: 56,
            alignItems: "center"
          }}
          className="monthly-grid"
        >
          <div className="col gap-16">
            <h2 className="display section-title">Right-sized for weekly use. No medical-cabinet overflow.</h2>
            <p className="section-sub">
              The monthly pouch lands the week before you run out. Everything you need for four weeks of weekly dosing — nothing more. When you finish, the pouch goes back in the box.
            </p>

            <div
              style={{
                marginTop: 8,
                display: "flex",
                gap: 8,
                flexWrap: "wrap"
              }}
            >
              <span className="pill"><span className="pill-dot" /> Same-day · Bangkok</span>
              <span className="pill" style={{ background: "var(--white)", color: "var(--ink-2)", border: "1px solid var(--line)" }}>
                Pause or skip any month
              </span>
            </div>
          </div>

          <div className="monthly-card">
            <div className="monthly-card-head">
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--ink-3)" }}>
                  THE MONTHLY POUCH
                </div>
                <div className="display" style={{ fontSize: 22, marginTop: 4, lineHeight: 1.1 }}>
                  Seven items. Standard packaging.
                </div>
              </div>
              <span
                className="mono"
                style={{
                  fontSize: 10,
                  letterSpacing: "0.16em",
                  color: "var(--accent-deep)",
                  background: "var(--accent-soft)",
                  padding: "6px 10px",
                  borderRadius: 999,
                  fontWeight: 600
                }}
              >
                4 WEEKS
              </span>
            </div>

            <ul className="monthly-list">
              {items.map((it, i) => (
                <li key={i} className="monthly-row">
                  <span className="monthly-qty mono">{it.qty}</span>
                  <span className="monthly-name">{it.name}</span>
                  <span className="monthly-spec mono">{it.spec}</span>
                </li>
              ))}
            </ul>

            <div className="monthly-foot">
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--ink-3)" }}>
                CYCLE LOG INSERT
              </span>
              <span style={{ fontSize: 12.5, color: "var(--ink-3)" }}>
                A small folded card. Tick the day. Note how you feel. That's it.
              </span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .monthly-card {
          background: var(--white);
          border: 1px solid var(--line);
          border-radius: 18px;
          padding: 28px;
          box-shadow: 0 1px 0 rgba(0,0,0,0.02);
        }
        .monthly-card-head {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 16px;
          padding-bottom: 18px;
          border-bottom: 1px solid var(--line);
          margin-bottom: 8px;
        }
        .monthly-list {
          list-style: none;
          margin: 0;
          padding: 0;
        }
        .monthly-row {
          display: grid;
          grid-template-columns: 56px 1fr auto;
          align-items: baseline;
          gap: 14px;
          padding: 14px 0;
          border-bottom: 1px dashed var(--line-2);
        }
        .monthly-row:last-child { border-bottom: 0; }
        .monthly-qty {
          font-size: 13px;
          font-weight: 600;
          color: var(--accent-deep);
          letter-spacing: 0.04em;
        }
        .monthly-name {
          font-size: 15px;
          color: var(--ink);
          font-weight: 500;
        }
        .monthly-spec {
          font-size: 11px;
          color: var(--ink-3);
          letter-spacing: 0.04em;
          text-align: right;
        }
        .monthly-foot {
          margin-top: 18px;
          padding-top: 18px;
          border-top: 1px solid var(--line);
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
        @media (max-width: 860px) {
          .monthly-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .monthly-row { grid-template-columns: 48px 1fr; }
          .monthly-spec { grid-column: 2; text-align: left; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { MonthlyKit });