// Three-tier subscribe module — restrained, equal weight, "Most Popular" subtle.
const { useState: useStateTiers } = React;

function TierGrid({ navigate, compact = false }) {
  const { TIERS } = window.HOAGS_DATA;
  const [annual, setAnnual] = useStateTiers(false);

  return (
    <div className={"th-tier-wrap" + (compact ? " is-compact" : "")}>
      <div className="th-tier-toggle-row">
        <button
          className={"th-toggle-pill" + (!annual ? " is-on" : "")}
          onClick={() => setAnnual(false)}
        >
          Monthly
        </button>
        <button
          className={"th-toggle-pill" + (annual ? " is-on" : "")}
          onClick={() => setAnnual(true)}
        >
          Annual <span className="th-toggle-save">save 20%</span>
        </button>
      </div>

      <div className="th-tier-grid">
        {TIERS.map((t) => {
          const monthly = annual ? Math.round(t.annual / 12) : t.price;
          return (
            <div key={t.id} className={"th-tier-card th-tier-card-" + t.id}>
              {t.popular && <span className="th-tier-pop">Most read</span>}
              <div className="th-tier-card-head">
                <span className="th-tier-rule" style={{ background: t.accent }} />
                <h4 style={{ color: t.accent }}>{t.name}</h4>
              </div>
              <p className="th-tier-blurb">{t.blurb}</p>
              <div className="th-tier-price">
                {t.price === 0 ? (
                  <span className="th-tier-price-num">Free</span>
                ) : (
                  <>
                    <span className="th-tier-price-num">${monthly}</span>
                    <span className="th-tier-price-cad">/mo {annual && t.price > 0 ? `· $${t.annual}/yr` : ""}</span>
                  </>
                )}
              </div>
              <ul className="th-tier-features">
                {t.features.map((f, i) => (
                  <li key={i}>
                    <span className="th-tier-bullet" style={{ background: t.accent }} />
                    {f}
                  </li>
                ))}
              </ul>
              <button
                className="th-tier-cta"
                style={{ background: t.accent }}
                onClick={() => window.open(window.HOAGS_DATA.SUBSTACK_SUBSCRIBE, "_blank", "noopener")}
              >
                {t.cta} →
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.TierGrid = TierGrid;