/* offers.jsx — offer catalogue data + Offers home (hero, card grid, promo, disclaimer). */
const { Icon, Card, Badge, Button } = window.GigiMoneyDesignSystem_b54949;

// ── The four partnership offerings ─────────────────────────────
const OFFERS = [
  {
    id: 'rent_guarantee',
    n: 'Protection',
    title: 'Rent guarantee',
    forWhom: 'For owners who want certainty',
    icon: 'shield',
    card: 'The tenant pays a recurring fee instead of a deposit; the owner is guaranteed against default.',
    blurb: 'Instead of putting down a deposit, your tenant pays a small recurring fee, set as a share of the monthly rent. In return, your rent arrives on schedule every month, whether or not the tenant pays. If someone falls behind, recovery becomes our job, backed by your property manager on the ground.',
    angle: 'For a property manager, this turns chasing arrears on owners’ behalf into a service worth paying for.',
    terms: [
      ['Tenant fee', '5–10% of monthly rent, recurring'],
      ['Deposit', 'Replaced, no deposit held'],
      ['Owner payout', 'Rent on schedule, default-protected'],
      ['Recovery', 'Handled by Gigi Money + local PM'],
    ],
  },
  {
    id: 'rent_advance',
    n: 'Liquidity',
    title: 'Rent advance',
    forWhom: 'For property owners',
    icon: 'bolt',
    card: 'Gigi purchases up to 24 months of your future rent and pays you a discounted lump sum today.',
    blurb: 'Gigi purchases up to 24 months of your future rent and pays you a discounted lump sum today — the sale of an asset you already own, not a loan. The discount only reflects the cost of funding and the tenancy’s risk, with nothing hidden.',
    angle: 'A liquidity product property managers can offer owners directly, deepening the relationship and sharing in the discount margin.',
    terms: [
      ['Assignable term', 'Up to 24 months of future rent'],
      ['You receive', 'Discounted lump sum, today'],
      ['Discount', 'Cost of funding + tenancy risk'],
      ['Settlement', 'From the rent Gigi collects'],
    ],
  },
  {
    id: 'heloc',
    n: 'Equity',
    title: 'HELOC',
    forWhom: 'For property owners',
    icon: 'home',
    card: 'A revolving line of credit secured by property equity and serviced by a verified rent roll.',
    blurb: 'If you own rental property, this is a revolving line of credit backed by your equity and serviced by your verified rent roll. Draw on it when you need to, and repay from the rent you already collect.',
    angle: 'With Kenyan mortgage penetration near 2.5% of GDP, property owners are equity-rich and liquidity-constrained. The HELOC releases that equity through Gigi Money, secured by rent the platform already monitors.',
    terms: [
      ['Secured by', 'Property equity + verified rent roll'],
      ['Structure', 'Revolving line of credit'],
      ['Limit', 'Up to 50% of property equity'],
      ['Repayment', 'From collected rent'],
    ],
  },
  {
    id: 'credit_card',
    n: 'Spending',
    title: 'Credit card',
    forWhom: 'For property owners',
    icon: 'box',
    card: 'A credit card backed by your property equity. Spend what you want, when you need it.',
    blurb: 'Credit card in the front, property equity in the back. A revolving card backed by the equity in your buildings, with limits up to KES 6M, a low rate, and cash back on everyday property spend. Serviced quietly by the rent you already collect.',
    angle: 'Turns the equity line into everyday spending power and rewards, keeping property operating costs on one underwritten, rent-serviced facility.',
    terms: [
      ['Credit limit', 'Up to KES 6M (50% of equity)'],
      ['Rewards', 'Cash back on every spend'],
      ['Backed by', 'Your property equity'],
      ['Serviced via', 'A verified rent roll'],
    ],
  },
];
window.GIGI_OFFERS = OFFERS;

// ── Offering card ──────────────────────────────────────────────
function OfferCard({ offer, onOpen }) {
  return (
    <Card onClick={() => onOpen(offer.id)} style={{ display: 'flex', flexDirection: 'column', gap: 14, minHeight: 188, padding: 24 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div style={{ width: 46, height: 46, borderRadius: 13, background: 'var(--surface-2)', display: 'grid', placeItems: 'center', color: 'var(--ink-2)' }}>
          <Icon name={offer.icon} size={24} />
        </div>
        <span className="g-mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{offer.n}</span>
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--go)', marginBottom: 6 }}>{offer.forWhom}</div>
        <div className="g-num" style={{ fontSize: 20, fontWeight: 700, marginBottom: 6 }}>{offer.title}</div>
        <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>{offer.card}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--ink)', fontWeight: 700, fontSize: 13.5 }}>
        Explore <Icon name="chevR" size={15} />
      </div>
    </Card>
  );
}

// ── Offers home ────────────────────────────────────────────────
function OffersHome({ onOpen }) {
  return (
    <div className="o-wrap g-enter">
      <div className="o-hero">
        <div className="glow" />
        <h1>Offerings</h1>
        <p>Four financing and guarantee products built on the rent data Gigi Money already monitors, for property managers, owners, and the tenants they serve.</p>
        <div className="link" onClick={() => onOpen('rent_advance')}>Connect your rent roll <Icon name="chevR" size={16} /></div>
      </div>

      <div className="o-grid">
        {OFFERS.map(o => <OfferCard key={o.id} offer={o} onOpen={onOpen} />)}
      </div>

      <div className="o-promo">
        <div style={{ width: 52, height: 52, borderRadius: 14, background: 'var(--accent-ink)', display: 'grid', placeItems: 'center', color: 'var(--accent)', flexShrink: 0 }}>
          <Icon name="percent" size={26} />
        </div>
        <div>
          <h3>Equity-rich, liquidity-constrained?</h3>
          <p>Property owners can release property equity through Gigi Money, secured by a rent roll the platform already verifies.</p>
          <div className="link" onClick={() => onOpen('heloc')}>See the HELOC <Icon name="chevR" size={15} /></div>
        </div>
      </div>

      <div className="o-disc">
        Gigi Money is a financial-technology provider operating in partnership with property managers and lending partners. Products are subject to underwriting, verified ownership via Ardhi&nbsp;Sasa, and the applicable eligibility terms. Pricing reflects the cost of funding and the assessed default risk of each tenancy. A rent advance is the purchase of your future rent receivables, not a loan.
        <span className="more" onClick={() => onOpen('rent_guarantee')}>How eligibility works →</span>
      </div>
    </div>
  );
}

Object.assign(window, { GigiOffersHome: OffersHome });