/* pricing.jsx — Gigi Money pricing page (Business vs Personal comparison matrix, KES). */
const { Icon } = window.GigiMoneyDesignSystem_b54949;

/* One ordered list of comparison rows — labels are defined once and the two tiers
   become aligned columns, so the reader scans straight across each row. */
const COMPARE_ROWS = [
  { label: 'Minimum monthly rent', icon: 'percent', business: '> KES 500,000', personal: '> KES 50,000' },
  { label: 'Months in advance', icon: 'clock', business: 'Up to 24', personal: 'Up to 12' },
  { label: 'Property type', icon: 'building', business: 'Commercial & mixed-use', personal: 'Mainly residential' },
  { label: 'Liquidity you can obtain', icon: 'vault', business: 'KES 5M – 100M', personal: 'Up to KES 5M' },
  { label: 'Owner type', icon: 'users', business: 'Company or trust', personal: 'Private individuals' },
  { label: 'Tenant type', icon: 'user', business: 'Company / institutional', personal: 'Mainly private' },
  { label: 'Default protection', icon: 'shield', business: 'Optional', personal: 'Included', personalCheck: true },
];

function Header({ tier, kind, tag }) {
  return (
    <th scope="col" className={`cmp-h ${kind}`}>
      <span className="cmp-tier">{tier}</span>
      <span className="cmp-tag">{tag}</span>
      <span className="cmp-badge"><Icon name="check" size={12} stroke={2.6} /> Active</span>
    </th>
  );
}

function Matrix() {
  return (
    <table className="cmp" aria-label="Compare Gigi Business and Gigi Personal">
      <thead>
        <tr className="cmp-head">
          <th className="cmp-corner" aria-hidden="true" />
          <Header tier="Gigi Business" kind="biz"
            tag="For companies & real estate portfolios — higher limits, liquidity sized to growth." />
          <Header tier="Gigi Personal" kind="per"
            tag="For individual owners of mostly residential property, with default protection built in." />
        </tr>
      </thead>
      <tbody>
        {COMPARE_ROWS.map((r) => (
          <tr className="cmp-row" key={r.label}>
            <th scope="row" className="cmp-lbl">
              <span className="cmp-ic"><Icon name={r.icon} size={15} /></span>
              {r.label}
            </th>
            <td className="cmp-val cmp-biz">{r.business}</td>
            <td className="cmp-val cmp-per">
              {r.personal}
              {r.personalCheck && (
                <span className="cmp-check"><Icon name="check" size={12} stroke={3} /></span>
              )}
            </td>
          </tr>
        ))}
      </tbody>
      <tfoot>
        <tr className="cmp-foot">
          <td className="cmp-foot-cell">
            <span className="cmp-foot-note">Same simple offer for both tiers — the only cost is the rent-advance discount, shown in full.</span>
            <a className="btn btn-accent btn-lg cmp-foot-cta" href="#prequalify">Check your offer</a>
          </td>
        </tr>
      </tfoot>
    </table>
  );
}

function Pricing() {
  return (
    <div className="g-root">
      <window.GNav active={null} />
      <section className="block" id="top" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="sec-head center">
            <span className="eyebrow" style={{ display: 'inline-flex' }}><span className="dot" /> Pricing</span>
            <h2>Simple, transparent pricing.</h2>
            <p>Two tiers built around the size of your portfolio. The only cost is the discount on a rent advance, shown in full before you agree, with no monthly account fees.</p>
          </div>
          <Matrix />
          <p className="pricing-note">All amounts are in Kenyan Shillings (KES) and illustrative. Your terms depend on the verified rent and tenancy, confirmed via Ardhi&nbsp;Sasa. Pricing reflects the cost of funding and the assessed risk of each tenancy. Subject to eligibility.</p>
        </div>
      </section>
      <window.GPrequalify interest="rent_advance" />
      <window.GFooter />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Pricing />);