/* ============================================================
   Pricing — beta pricing from the live site, restyled to the
   new calm system. Driven by i18n (L.pricing).
   ============================================================ */

function PlanCard({ p, popular, perMo, betaLabel, popularLabel, bookDemo }) {
  const dark = popular;
  const sub = dark ? "rgba(255,255,255,.65)" : "var(--ink-2)";
  const faint = dark ? "rgba(255,255,255,.45)" : "var(--ink-4)";
  const isCustom = !/\d/.test(p.price);
  return (
    <div className="plan-card" style={{
      position: "relative", height: "100%", display: "flex", flexDirection: "column",
      background: dark ? "var(--contrast-bg)" : "var(--bg-2)", color: dark ? "#fff" : "var(--ink)",
      borderRadius: 24, padding: "32px 28px"
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
        <span style={{ fontSize: 17, fontWeight: 700 }}>{p.name}</span>
        {popular && <span style={{ marginLeft: "auto", fontSize: 11, fontWeight: 700, letterSpacing: ".03em", color: "#fff", background: "var(--primary)", padding: "5px 12px", borderRadius: 999 }}>{popularLabel}</span>}
      </div>
      {p.oldPrice ? (
        <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 8 }}>
          <span style={{ fontSize: 14.5, fontWeight: 600, color: faint, textDecoration: "line-through" }}>{p.oldPrice} kr</span>
          <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: ".04em", textTransform: "uppercase", color: dark ? "#8fd6b3" : "var(--auto)", background: dark ? "rgba(78,207,145,.16)" : "var(--auto-tint)", padding: "3px 8px", borderRadius: 6 }}>{betaLabel}</span>
        </div>
      ) : (
        <div style={{ height: 29, marginBottom: 8 }}></div>
      )}
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 16 }}>
        <span style={{ fontSize: isCustom ? 30 : 42, fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1.1 }}>{p.price}</span>
        {!isCustom && <span style={{ fontSize: 13.5, color: sub }}>{perMo}</span>}
      </div>
      <p style={{ fontSize: 13.5, lineHeight: 1.55, color: sub, marginBottom: 22, minHeight: 64 }}>{p.note}</p>
      <div style={{ display: "grid", gap: 10, marginBottom: 28 }}>
        {p.feats.map((f) => (
          <div key={f} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: 13.5 }}>
            <span style={{ color: dark ? "#8fd6b3" : "var(--auto)", marginTop: 1, flex: "none" }}><Icon.check style={{ width: 15, height: 15 }} /></span>{f}
          </div>
        ))}
      </div>
      <a href="#demo" className="btn" style={{ marginTop: "auto", width: "100%", height: 46, borderRadius: 999,
        background: dark ? "#fff" : "var(--surface)", color: "var(--ink)",
        boxShadow: dark ? "none" : "inset 0 0 0 1px var(--line-2)" }}>{bookDemo}</a>
    </div>
  );
}

function Plans() {
  const { L } = useT();
  const pr = L.pricing;
  const inc = pr.included;
  return (
    <section id="pricing" className="section" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <Reveal style={{ marginBottom: 52, maxWidth: 640 }}>
          <h2 className="h-section" style={{ fontSize: "clamp(32px,3.6vw,52px)", marginBottom: 20 }}><Lines text={pr.title} /></h2>
          <p className="lead">{pr.lead}</p>
        </Reveal>
        <Reveal className="rise-d1 plan-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 22, alignItems: "stretch" }}>
          {pr.plans.map((p, i) => (
            <PlanCard key={p.name} p={p} popular={i === 1}
              perMo={pr.perMo} betaLabel={pr.beta} popularLabel={pr.popular} bookDemo={pr.bookDemo} />
          ))}
        </Reveal>

        {inc && (
          <Reveal style={{ marginTop: 22 }}>
            <div style={{ background: "var(--bg-2)", borderRadius: 24, padding: "clamp(28px,3.5vw,48px)" }}>
              <h3 style={{ fontSize: "clamp(21px,2vw,28px)", fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 10 }}>{inc.title}</h3>
              <p className="lead" style={{ marginBottom: 30, maxWidth: 620 }}>{inc.lead}</p>
              <div className="incl-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 44, rowGap: 15 }}>
                {inc.feats.map((f) => (
                  <div key={f} style={{ display: "flex", gap: 11, alignItems: "flex-start", fontSize: 14.5, lineHeight: 1.45 }}>
                    <span style={{ color: "var(--auto)", marginTop: 2, flex: "none" }}><Icon.check style={{ width: 16, height: 16 }} /></span>{f}
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        )}
      </div>
      <style>{`
        @media (max-width:1080px){ .plan-grid{ grid-template-columns:repeat(2,1fr) !important; } }
        @media (max-width:560px){
          .plan-grid{ grid-template-columns:1fr !important; max-width:360px; margin-left:auto; margin-right:auto; gap:16px !important; }
          .plan-card{ padding:24px 22px !important; border-radius:20px !important; }
        }
        @media (max-width:640px){ .incl-grid{ grid-template-columns:1fr !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Plans });