// MostlyRender — Pricing. Monthly/annual toggle; included + overage per tier;
// the one-sentence rule + a worked rounding example. Enterprise = Contact us.
const { useState: useStatePR } = React;
const { Button: BtnPR, Badge: BadgePR, Card: CardPR, CardBody: CardBodyPR } = MR_F;
const trPR = (typeof window !== "undefined" && window.ForgeI18n) ? window.ForgeI18n.t : (k, a) => k;

const PLANS = [
  { id: "free", price: { mo: 0, yr: 0 }, highlight: false, featCount: 4 },
  { id: "starter", price: { mo: 19, yr: 16 }, highlight: false, featCount: 4 },
  // "Team workspaces" (seats) omitted until the seat model ships — see ROADMAP.md.
  { id: "pro", price: { mo: 49, yr: 41 }, highlight: true, featCount: 4 },
  // "SSO & audit log" omitted until built — see ROADMAP.md.
  { id: "scale", price: { mo: 149, yr: 124 }, highlight: false, featCount: 3 },
];

function PricingTable({ go }) {
  const [annual, setAnnual] = useStatePR(true);
  const onPlan = (p) => {
    if (p.id === "free") { go("signin"); return; }
    if (window.MRApi && MRApi.ready && MRApi.currentUser && MRApi.currentUser()) MRApi.checkout(p.id, annual);
    else go("signin"); // sign in first, then upgrade from the app
  };
  return (
    <section className="pr">
      <div className="mk-wrap">
        <div className="mk-section-head" style={{ marginBottom: 26 }}>
          <span className="mk-eyebrow">{trPR('mr.pricing.eyebrow')}</span>
          <h1 className="mk-h1" style={{ fontSize: 46 }}>{trPR('mr.pricing.h1')}</h1>
          <p className="mk-lead" style={{ marginInline: "auto", maxWidth: "34em" }}>{trPR('mr.pricing.lead')}</p>
          <div className="pr-toggle">
            <button className={!annual ? "is-active" : ""} onClick={() => setAnnual(false)}>{trPR('mr.pricing.toggle.monthly')}</button>
            <button className={annual ? "is-active" : ""} onClick={() => setAnnual(true)}>{trPR('mr.pricing.toggle.annualBefore')} <span className="pr-toggle__save">{trPR('mr.pricing.toggle.save')}</span></button>
          </div>
        </div>

        <div className="pr-grid">
          {PLANS.map((p) => (
            <div key={p.id} className={"pr-card" + (p.highlight ? " pr-card--hl" : "")}>
              {p.highlight && <div className="pr-card__ribbon">{trPR('mr.pricing.mostPopular')}</div>}
              <div className="pr-card__name">{trPR('mr.pricing.plans.' + p.id + '.name')}</div>
              <div className="pr-card__price">
                <span className="pr-card__amt">${annual ? p.price.yr : p.price.mo}</span>
                <span className="pr-card__per">{trPR('mr.pricing.perMo')}</span>
              </div>
              <div className="pr-card__unit">{trPR('mr.pricing.plans.' + p.id + '.unit')}</div>
              <div className="pr-card__over">{trPR('mr.pricing.plans.' + p.id + '.overage')}</div>
              <BtnPR variant={p.highlight ? "primary" : "secondary"} size="md" block onClick={() => onPlan(p)}>{trPR('mr.pricing.plans.' + p.id + '.cta')}</BtnPR>
              <div className="pr-card__feats">
                {Array.from({ length: p.featCount }, (_, i) => <div key={i} className="pr-feat"><Icon d="check" size={15} />{trPR('mr.pricing.plans.' + p.id + '.feat.' + i)}</div>)}
              </div>
            </div>
          ))}
          <div className="pr-card pr-card--ent">
            <div className="pr-card__name">{trPR('mr.pricing.ent.name')}</div>
            <div className="pr-card__price"><span className="pr-card__amt" style={{ fontSize: 30 }}>{trPR('mr.pricing.ent.amt')}</span></div>
            <div className="pr-card__unit">{trPR('mr.pricing.ent.unit')}</div>
            <div className="pr-card__over">{trPR('mr.pricing.ent.overage')}</div>
            <BtnPR variant="secondary" size="md" block onClick={() => { window.location.href = "mailto:hello@mostlytiny.io?subject=MostlyRender%20Enterprise"; }}>{trPR('mr.pricing.ent.cta')}</BtnPR>
            <div className="pr-card__feats">
              {Array.from({ length: 5 }, (_, i) => <div key={i} className="pr-feat"><Icon d="check" size={15} />{trPR('mr.pricing.ent.feat.' + i)}</div>)}
            </div>
          </div>
        </div>

        {/* the one-sentence rule + worked example */}
        <div className="pr-rule">
          <div className="pr-rule__main">
            <span className="mk-eyebrow" style={{ color: "var(--accent)" }}>{trPR('mr.pricing.rule.eyebrow')}</span>
            <h2 className="mk-h2" style={{ fontSize: 26 }}>{trPR('mr.pricing.rule.h2')}</h2>
            <p className="mk-lead">{trPR('mr.pricing.rule.lead')}</p>
          </div>
          <div className="pr-worked">
            <div className="pr-worked__h">{trPR('mr.pricing.worked.h')}</div>
            <div className="pr-worked__row"><span>{trPR('mr.pricing.worked.send')}</span><b>{trPR('mr.pricing.worked.sendVal')}</b></div>
            <div className="pr-worked__row"><span>{trPR('mr.pricing.worked.included')}</span><b>{trPR('mr.pricing.worked.includedVal')}</b></div>
            <div className="pr-worked__row"><span>{trPR('mr.pricing.worked.overage')}</span><b>{trPR('mr.pricing.worked.overageVal')}</b></div>
            <div className="pr-worked__row pr-worked__total"><span>{trPR('mr.pricing.worked.extra')}</span><b>{trPR('mr.pricing.worked.extraVal')}</b></div>
            <div className="pr-worked__note">{trPR('mr.pricing.worked.note')}</div>
          </div>
        </div>

        <div className="pr-faq">
          {[0, 1, 2, 3].map((i) => (
            <div key={i} className="pr-faq__item">
              <div className="pr-faq__q">{trPR('mr.pricing.faq.' + i + '.q')}</div>
              <div className="pr-faq__a">{trPR('mr.pricing.faq.' + i + '.a')}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing({ go }) {
  return (
    <div className="mk-root">
      <window.MkNav go={go} />
      <PricingTable go={go} />
      <window.MkFooter go={go} />
    </div>
  );
}

window.Pricing = Pricing;