// Monthly Kit — Golden Hour room.
function MonthlyKit() {
  const items = [
    { qty: "10×", name: "Insulin syringes", spec: "0.5ml · 31g · 8mm" },
    { qty: "2×",  name: "Mixing syringes + needles", spec: "3ml · 23g" },
    { qty: "20×", name: "Alcohol wipes", spec: "70% IPA · sealed" },
    { qty: "4×",  name: "Date labels", 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">Sized to your cycle. Nothing wasted.</h2>
            <p className="section-sub">
              Fresh supplies land before the last ones run out. Four weeks of weekly dosing, right-sized. You run the protocol. The kit keeps pace.
            </p>

            <div
              style={{
                marginTop: 8,
                display: "flex",
                gap: 8,
                flexWrap: "wrap"
              }}
            >
              <span className="pill"><span className="pill-dot" style={{ background: "var(--neon)" }} /> Starting in Bangkok</span>
              <span className="pill">
                Pause or skip any month
              </span>
              <span className="pill">Your city, soon</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 REFILL
                </div>
                <div className="display" style={{ fontSize: 22, marginTop: 4, lineHeight: 1.1 }}>
                  Four items. Standard packaging.
                </div>
              </div>
              <span
                className="mono"
                style={{
                  fontSize: 10,
                  letterSpacing: "0.16em",
                  color: "var(--night)",
                  background: "var(--neon)",
                  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: 16px;
          padding: 28px;
          box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        .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);
        }
        .monthly-row:last-child { border-bottom: 0; }
        .monthly-qty {
          font-size: 13px;
          font-weight: 600;
          color: #E8A200;
          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 });