// Pricing

function Pricing({ ctx }) {
  const { t } = ctx;
  const p = t.pricing;
  const tiers = [
    { k: "free", ...p.tiers.free, colIdx: 1, color: "var(--ink-3)" },
    { k: "pro",  ...p.tiers.pro,  colIdx: 2, color: "var(--accent)" },
    { k: "ent",  ...p.tiers.ent,  colIdx: 3, color: "var(--warn)" },
  ];

  const renderCapability = (row, colIdx, key) => {
    const v = row[colIdx];
    const name = row[0];
    const base = { display: "flex", alignItems: "flex-start", fontSize: 13, marginBottom: 10, lineHeight: 1.5, gap: 10 };
    const isObj = typeof v === "object" && v !== null;
    const vv = isObj ? v.v : v;
    const tip = isObj ? v.tip : null;
    const tipEl = tip && <span title={tip} style={{ cursor: "help", color: "var(--ink-3)", fontSize: 12, fontFamily: "inherit" }}>ⓘ</span>;
    if (vv === true) return (
      <div key={key} style={{ ...base, color: "var(--ink-2)", justifyContent: "space-between" }}>
        <span style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
          <span style={{ color: "var(--accent)", fontFamily: "var(--mono)", flexShrink: 0 }}>✓</span>
          <span>{name}</span>
        </span>
        {tipEl}
      </div>
    );
    if (vv === false) return (
      <div key={key} style={{ ...base, color: "var(--ink-3)", opacity: 0.55, justifyContent: "space-between" }}>
        <span style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
          <span style={{ fontFamily: "var(--mono)", flexShrink: 0 }}>—</span>
          <span>{name}</span>
        </span>
        {tipEl}
      </div>
    );
    const text = vv;
    return (
      <div key={key} style={{ ...base, color: "var(--ink-2)", justifyContent: "space-between" }}>
        <span style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
          <span style={{ color: "var(--accent)", fontFamily: "var(--mono)", flexShrink: 0 }}>✓</span>
          <span>{name}</span>
        </span>
        <span style={{ fontFamily: "var(--mono)", color: "var(--ink)", fontWeight: 500, textAlign: "right", display: "inline-flex", alignItems: "center", gap: 4 }}>
          {tip && <span title={tip} style={{ cursor: "help", color: "var(--ink-3)", fontSize: 12, fontFamily: "inherit" }}>ⓘ</span>}
          {text}
        </span>
      </div>
    );
  };

  return (
    <section id="pricing" style={{ padding: "96px 0", borderTop: "1px solid var(--line)", background: "var(--bg-2)" }}>
      <div className="wrap">
        <SectionHeader kicker={p.kicker} title={p.title} subtitle={p.subtitle} body={p.body} subtitleNoWrap/>

        <div style={{ marginBottom: 32 }}>
          <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: -0.01, marginBottom: 8 }}>{p.pickTitle}</div>
          <div style={{ fontSize: 14, color: "var(--ink-2)", maxWidth: 640, lineHeight: 1.55 }}>{p.pickBody}</div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 80 }}>
          {tiers.map(tier => {
            const price = tier.priceM || tier.price;
            return (
              <div key={tier.k} style={{
                background: "var(--bg)", border: "1px solid var(--line)",
                borderTop: `4px solid ${tier.color}`,
                borderRadius: 14, padding: 28, position: "relative",
                display: "flex", flexDirection: "column", gap: 18,
              }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500, color: tier.color, marginBottom: 8 }}>{tier.name}</div>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                    <div style={{ fontSize: 42, fontWeight: 500, letterSpacing: -0.02, fontFamily: "var(--mono)" }}>{price}</div>
                    {tier.per && <div style={{ fontSize: 13, color: "var(--ink-3)" }}>{tier.per}</div>}
                  </div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 6 }}>{tier.sub}</div>
                </div>
                <div style={{ borderTop: "1px solid var(--line-2)", paddingTop: 16 }}>
                  {p.cmp.rows.map((row, i) => renderCapability(row, tier.colIdx, i))}
                </div>
                {tier.cta && (
                  <div style={{ marginTop: "auto", paddingTop: 16 }}>
                    <a href="app.html" style={{
                      display: "flex", alignItems: "center", justifyContent: "center",
                      padding: "11px 16px", borderRadius: 8, fontSize: 13, fontWeight: 500,
                      border: "1px solid var(--ink)", color: "var(--bg)", background: "var(--ink)",
                      textDecoration: "none", transition: "opacity 120ms",
                    }}
                      onMouseEnter={e => e.currentTarget.style.opacity = "0.85"}
                      onMouseLeave={e => e.currentTarget.style.opacity = "1"}
                    >{tier.cta}</a>
                  </div>
                )}
              </div>
            );
          })}
        </div>

      </div>
    </section>
  );
}

window.Pricing = Pricing;