/* segment.jsx — Personal & Business customer-segment pages. window.GIGI_SEGMENT picks one. */
const { Icon } = window.GigiMoneyDesignSystem_b54949;

const SEGMENTS = {
  business: {
    eyebrow: 'Gigi Business',
    h1: ['A new way to ', { hl: 'manage' }, ' your real estate assets.'],
    lede: 'Gigi Business turns future rent into immediate capital, a complementary source of liquidity alongside bank financing for companies and real estate portfolios.',
    example: {
      big: ['Rent ', { b: 'KES 800,000' }, '/month × 24 months = ', { b: 'KES 19.2M' }, ' over 2 years.'],
      sub: 'With Gigi Business you can turn that future rent into liquidity for new investments today.',
    },
    howTitle: ['Liquidity up to 24 months: ', { hl: 'early, fast, secure' }],
    how: [
      ['box', 'Receive advance liquidity for up to 24 months of rent across one or more properties in your portfolio.'],
      ['doc', 'We collect the rent directly from the tenant, leaving your lease agreement unchanged.'],
      ['shield', 'Use the cash for new investments, capex, or to strengthen your financial position.'],
    ],
    reqTitle: 'Main requirements to access the service',
    req: [
      ['Owner and tenant are legal entities', 'You own one or more commercial properties, already leased, with a company owner and a company tenant.'],
      ['Rental income of at least KES 500,000 / month', 'Total rental income for a single property or across the portfolio must reach KES 500,000 per month.'],
      ['Liquidity from KES 5M', 'The rental advance is activated from a minimum amount of KES 5M, up to KES 100M.'],
    ],
    cmpTitle: ['Enhancing your real estate assets ', { hl: 'has never been easier.' }],
    without: [
      ['Monthly income flows', 'Rent trickles in over time and limits your ability to seize new opportunities.'],
      ['Fixed capital', 'Much of the portfolio\u2019s value stays locked in the property, with little liquidity available.'],
      ['Dependence on traditional debt', 'To finance projects and capex you rely mainly on bank lines, within their limits.'],
    ],
    withList: [
      ['Instant liquidity for your projects', 'Convert up to 24 months of rent into a single liquidity transaction for investment and growth.'],
      ['Greater financial flexibility', 'Alongside traditional debt, an alternative lever based on future rents, without weighing down capacity.'],
      ['Capital that works better', 'Reallocate cash where it generates the most return across your real estate portfolio.'],
    ],
    customers: 'Designed for entrepreneurs, multi-owners and companies who want to unlock the value of their real estate assets and invest in new opportunities.',
  },
  personal: {
    eyebrow: 'Gigi Personal',
    h1: ['Advance ', { hl: 'liquidity' }, ' for your rentals.'],
    lede: 'Gigi Personal turns the rent from your residential properties into cash today, with built-in default protection.',
    example: {
      big: ['Rent ', { b: 'KES 120,000' }, '/month × 12 months = ', { b: 'KES 1.44M' }, ' over a year.'],
      sub: 'With Gigi Personal you receive that future rent as a lump sum today, disbursed to M-Pesa.',
    },
    howTitle: ['Advance liquidity ', { hl: 'for your rentals' }],
    how: [
      ['box', 'Receive an advance payment of rent for one or more rental properties you own.'],
      ['doc', 'We collect the rent directly from the tenant, leaving your rental agreement unchanged.'],
      ['shield', 'We handle payment delays, arrears and possible relocation issues for you.'],
    ],
    reqTitle: 'Main requirements to access the service',
    req: [
      ['You own residential rental property', 'A single unit or a few, already tenanted, with the title in your name.'],
      ['Rental income of at least KES 50,000 / month', 'Your total monthly rent across the property (or properties) should reach KES 50,000.'],
      ['Liquidity up to KES 5M', 'The advance is sized to your verified rent and tenancy, up to KES 5M.'],
    ],
    cmpTitle: ['Putting your rent to work ', { hl: 'has never been easier.' }],
    without: [
      ['Waiting on collections', 'Rent trickles in month by month on M-Pesa, so cash is never there when you need it.'],
      ['Cash tied up in property', 'Your wealth stays locked in the building, with little available for life or repairs.'],
      ['Borrowing against the title', 'A bank loan means new debt, a mortgage on the property, and a slow process.'],
    ],
    withList: [
      ['Up to 12 months of rent upfront', 'Bring future rent forward as one lump sum, disbursed to M-Pesa within minutes.'],
      ['Default protection included', 'We handle arrears, delays and relocation, so a quiet tenant never costs you.'],
      ['No new debt', 'It is not a loan and there is no mortgage. The title stays entirely in your name.'],
    ],
    customers: 'For individual property owners who want to put the rent they already earn to work, without taking on debt.',
  },
};

function renderRich(parts) {
  return parts.map((p, i) => (typeof p === 'string'
    ? <React.Fragment key={i}>{p}</React.Fragment>
    : <span className="hl" key={i}>{p.hl}</span>));
}
function renderBold(parts) {
  return parts.map((p, i) => (typeof p === 'string'
    ? <React.Fragment key={i}>{p}</React.Fragment>
    : <b key={i}>{p.b}</b>));
}

function SegmentPage() {
  const d = SEGMENTS[window.GIGI_SEGMENT] || SEGMENTS.business;
  return (
    <div className="g-root">
      <window.GNav active={null} />

      <section className="block" id="top" style={{ paddingTop: 56 }}>
        <div className="wrap">
          <div className="seg-hero">
            <div className="glow" />
            <span className="eyebrow on-dark"><span className="dot" /> {d.eyebrow}</span>
            <h1>{renderRich(d.h1)}</h1>
            <p>{d.lede}</p>
            <div className="acts">
              <a className="btn btn-accent btn-lg" href="#prequalify">Check your offer</a>
              <a className="btn btn-light btn-lg" href="pricing.html">See pricing</a>
            </div>
          </div>
          <div className="seg-example">
            <div className="lbl">Example</div>
            <div className="big">{renderBold(d.example.big)}</div>
            <p className="sub">{d.example.sub}</p>
          </div>
        </div>
      </section>

      <section className="block">
        <div className="wrap">
          <div className="sec-head"><span className="eyebrow"><span className="dot" /> How it works</span><h2>{renderRich(d.howTitle)}</h2></div>
          <div className="seg-cards">
            {d.how.map(([ic, t], i) => (
              <div className="seg-card" key={i}>
                <span className="ic"><Icon name={ic} size={22} /></span>
                <p style={{ marginTop: 16 }}>{t}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="block">
        <div className="wrap">
          <div className="sec-head"><span className="eyebrow"><span className="dot" /> Eligibility</span><h2>{d.reqTitle}</h2></div>
          <div className="seg-cards">
            {d.req.map(([t, b], i) => (
              <div className="seg-card" key={i}>
                <h4>{t}</h4>
                <p>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="block">
        <div className="wrap">
          <div className="sec-head"><span className="eyebrow"><span className="dot" /> Why it matters</span><h2>{renderRich(d.cmpTitle)}</h2></div>
          <div className="seg-compare">
            <div className="seg-col no">
              <h3>Without Gigi</h3>
              {d.without.map(([t, b], i) => (
                <div className="seg-item" key={i}><span className="si"><Icon name="x" size={15} stroke={2.6} /></span><div><h5>{t}</h5><p>{b}</p></div></div>
              ))}
            </div>
            <div className="seg-col yes">
              <h3>With Gigi</h3>
              {d.withList.map(([t, b], i) => (
                <div className="seg-item" key={i}><span className="si"><Icon name="check" size={15} stroke={2.6} /></span><div><h5>{t}</h5><p>{b}</p></div></div>
              ))}
            </div>
          </div>
          <p className="seg-customers">{d.customers}</p>
        </div>
      </section>

      <window.GPrequalify interest={window.GIGI_SEGMENT === 'business' ? 'rent_advance' : 'rent_advance'} />
      <window.GFooter />
    </div>
  );
}

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