// Pricing — Golden Hour room. Velvet border on recommended card.
function Pricing({ tweaks }) {
  const monthly = tweaks.priceMonthly || 1490;

  const includes = [
    "30-day supply, sterile and guided",
    "Printed injection + dosing guides, cycle log, body map",
    "Prep kit with your first order (storage box, cards, digital walkthrough)",
    "Same-day delivery",
    "14-day refund on most recent refill",
  ];

  return (
    <section id="pricing" style={{ background: "var(--paper)", paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <div style={{ maxWidth: 560, margin: "0 auto" }}>
          <div
            style={{
              background: "var(--white)",
              border: "2px solid var(--night)",
              borderRadius: 16,
              padding: "36px 32px 32px",
              display: "flex",
              flexDirection: "column",
              gap: 20,
              boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
            }}
          >
            <div className="display" style={{ fontSize: 24, lineHeight: 1 }}>The monthly refill</div>

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

            <div style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.5 }}>
              Everything you need for four weeks of weekly dosing. Right-sized, nothing wasted.
            </div>

            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {includes.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-deep)" style={{ marginTop: 4, flex: "none" }} />
                  <span>{p}</span>
                </li>
              ))}
            </ul>

            <a
              className="btn btn-accent"
              href="/waitlist/"
              onClick={() => gtag('event', 'waitlist_click', { event_category: 'conversion', link_location: 'pricing' })}
              style={{ marginTop: 8, justifyContent: "center" }}
            >
              Join the waitlist <IArrow size={16} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing });