// Pricing teaser
function Pricing({ t }) {
  return (
    <Section id="pricing">
      <SectionHead kicker={t.kicker} title={t.title}/>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--rule)", border: "1px solid var(--rule)" }}>
        {t.tiers.map((tier, i) => (
          <Tier key={i} tier={tier}/>
        ))}
      </div>
      <div style={{ marginTop: 20, fontSize: 13, color: "var(--ink-3)" }}>{t.foot}</div>
    </Section>
  );
}

function Tier({ tier }) {
  return (
    <div style={{
      background: tier.highlight ? "var(--ink)" : "var(--paper)",
      color: tier.highlight ? "var(--bg)" : "var(--ink)",
      padding: "32px 28px 32px",
      display: "flex", flexDirection: "column",
      minHeight: 280,
    }}>
      <div className="mono" style={{
        fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase",
        color: tier.highlight ? "var(--accent-2)" : "var(--ink-3)",
        marginBottom: 16,
      }}>{tier.name}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 16 }}>
        <span className="serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: "-0.025em" }}>{tier.price}</span>
        <span className="mono" style={{ fontSize: 12, color: tier.highlight ? "color-mix(in srgb, var(--bg) 60%, transparent)" : "var(--ink-3)" }}>{tier.per}</span>
      </div>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: tier.highlight ? "color-mix(in srgb, var(--bg) 75%, transparent)" : "var(--ink-3)", margin: "0 0 24px", flex: 1, textWrap: "pretty" }}>{tier.body}</p>
      <button data-waitlist className="btn" style={{
        background: tier.highlight ? "var(--bg)" : "var(--ink)",
        color: tier.highlight ? "var(--ink)" : "var(--bg)",
        border: "1px solid " + (tier.highlight ? "var(--bg)" : "var(--ink)"),
        alignSelf: "flex-start",
      }}>{tier.cta} →</button>
    </div>
  );
}

window.Pricing = Pricing;