// Pricing — two cards only.
// Monthly = comfortable trial (decoy / soft option)
// Starter (6 months) = anchored, recommended option

function Pricing({ tweaks }) {
  const monthly = tweaks.priceMonthly || 1490;
  const starterPrice = 6540; // one-time, ~฿1,090/mo
  const starterPerMo = Math.round(starterPrice / 6);
  const starterSavings = monthly * 6 - starterPrice; // ฿2,400

  const monthlyIncludes = [
    "30-day kit · same-day Bangkok",
    "Plain-language dosing booklet + QR videos",
    "Cancel anytime — no renewal traps",
    "14-day refund on most recent kit",
  ];
  const starterIncludes = [
    "6 monthly kits — sealed, dated, delivered",
    "Welcome kit (one-time) — see below",
    "30-min onboarding session before your first dose",
    "Member community — quiet, no advice-shouting",
    "14-day refund on most recent kit",
  ];

  return (
    <section id="pricing" style={{ background: "var(--paper)", paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <div className="section-head" style={{ marginBottom: 40, maxWidth: 720 }}>
          <h2 className="display section-title">Test the waters, or start the way you mean to.</h2>
          <p className="section-sub">
            Monthly is the comfortable trial. The Starter is the kind, committed beginning — six months, a welcome kit, and a real first session before you ever touch a syringe.
          </p>
        </div>

        <div
          className="pricing-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1.15fr",
            gap: 20,
            alignItems: "stretch",
          }}
        >
          {/* Monthly — soft option */}
          <div
            style={{
              background: "var(--white)",
              border: "1px solid var(--line)",
              borderRadius: 20,
              padding: "32px 32px 28px",
              display: "flex",
              flexDirection: "column",
              gap: 18,
            }}
          >
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
              <div className="display" style={{ fontSize: 24, lineHeight: 1 }}>Monthly</div>
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-4)" }}>
                test the waters
              </span>
            </div>

            <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
              <span className="display" style={{ fontSize: 52, lineHeight: 1, color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>
                ฿{monthly.toLocaleString()}
              </span>
              <span style={{ fontSize: 15, color: "var(--ink-3)" }}>/month</span>
            </div>

            <div style={{ fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5 }}>
              The kit, every 30 days. Cancel before any renewal — a friendly text, no awkwardness.
            </div>

            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {monthlyIncludes.map((p, i) => (
                <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "var(--ink-2)" }}>
                  <ICheck size={14} stroke="var(--accent)" style={{ marginTop: 4, flex: "none" }} />
                  <span>{p}</span>
                </li>
              ))}
            </ul>

            <button
              className="btn"
              style={{
                marginTop: "auto",
                justifyContent: "center",
                background: "var(--white)",
                color: "var(--ink)",
                border: "1px solid var(--ink)",
              }}
              onClick={() => document.getElementById("welcome-kit")?.scrollIntoView({ behavior: "smooth", block: "start" })}
            >
              Get my kit — monthly
            </button>
          </div>

          {/* Starter — anchored */}
          <div
            style={{
              background: "var(--ink)",
              color: "var(--paper)",
              borderRadius: 20,
              padding: "32px 32px 28px",
              display: "flex",
              flexDirection: "column",
              gap: 18,
              position: "relative",
              overflow: "hidden",
            }}
          >
            <span
              style={{
                position: "absolute", top: 20, right: 20,
                padding: "5px 11px", borderRadius: 999,
                background: "var(--accent)", color: "white",
                fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600,
              }}
            >
              Recommended
            </span>

            <div className="display" style={{ fontSize: 24, lineHeight: 1, color: "var(--paper)", marginTop: 4 }}>Starter · 6 months</div>

            <div style={{ display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
              <span className="display" style={{ fontSize: 52, lineHeight: 1, color: "var(--paper)", fontVariantNumeric: "tabular-nums" }}>
                ฿{starterPrice.toLocaleString()}
              </span>
              <span style={{ fontSize: 14, color: "color-mix(in srgb, var(--paper) 60%, transparent)" }}>
                once · ~฿{starterPerMo.toLocaleString()}/mo
              </span>
            </div>

            <div
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                alignSelf: "flex-start",
                padding: "6px 12px",
                borderRadius: 999,
                background: "color-mix(in srgb, var(--accent) 22%, transparent)",
                border: "1px solid color-mix(in srgb, var(--accent) 35%, transparent)",
                fontSize: 13,
                color: "var(--paper)",
              }}
            >
              <IBolt size={13} stroke="var(--accent)" />
              <span>Save <strong style={{ fontVariantNumeric: "tabular-nums" }}>฿{starterSavings.toLocaleString()}</strong> versus monthly</span>
            </div>

            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {starterIncludes.map((p, i) => (
                <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: "color-mix(in srgb, var(--paper) 88%, transparent)" }}>
                  <ICheck size={14} stroke="var(--accent)" style={{ marginTop: 4, flex: "none" }} />
                  <span>{p}</span>
                </li>
              ))}
            </ul>

            <button
              className="btn btn-accent"
              style={{ marginTop: "auto", justifyContent: "center", fontSize: 16, padding: "16px 22px" }}
              onClick={() => document.getElementById("welcome-kit")?.scrollIntoView({ behavior: "smooth", block: "start" })}
            >
              Get my kit — ฿{starterPrice.toLocaleString()} <IArrow size={16} />
            </button>

            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.06em", color: "color-mix(in srgb, var(--paper) 55%, transparent)", textAlign: "center" }}>
              one payment · 14-day refund on most recent kit
            </div>
          </div>
        </div>

        <p style={{ marginTop: 24, fontSize: 13, color: "var(--ink-4)", lineHeight: 1.6, maxWidth: 760 }}>
          Both options ship the same kit, on the same day, with the same booklet and the founder direct on Discord. The Starter just adds the welcome kit and the onboarding session — the things that make a first six months feel less like a project.
        </p>
      </div>

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

Object.assign(window, { Pricing });