/* partners.jsx — Gigi Money partner page for property managers, agencies,
   developers and SACCOs.

   Partnership model: the property manager owns the on-the-ground work —
   tenant verification, rent collection and enforcement — while Gigi provides
   the capital, underwriting and digital rails. Partners earn an ongoing share
   on the deals they help fund; the exact rate lives in the partner agreement
   and is deliberately NOT published here. Reuses the shared chrome
   (GNav/GFooter) and the partner WaitlistForm. */
const { Icon } = window.GigiMoneyDesignSystem_b54949;

function PHero() {
  return (
    <section className="phero" id="top">
      <div className="wrap phero-grid">
        <div>
          <span className="eyebrow"><span className="dot" /> For property managers &amp; agencies</span>
          <h1>You run the buildings. We bring the <span className="hl">capital and the rails</span>.</h1>
          <p className="lede">Gigi partners with property managers to bring rent-backed financing to the owners you serve. You verify tenants and handle collection and enforcement — the things you already do best. We provide the capital, the underwriting and the digital rails, and you earn a share on every deal you help fund.</p>
          <div className="acts">
            <a className="btn btn-pill btn-lg" href="#apply">Become a partner</a>
            <a className="btn btn-ghost btn-lg" href="#how">How it works</a>
          </div>
          <div className="trust" style={{ marginTop: 30 }}>
            <span className="item"><span className="chip"><Icon name="percent" size={15} /></span> Earn on every funded deal</span>
            <span className="item"><span className="chip"><Icon name="vault" size={15} /></span> You don&rsquo;t put up the capital</span>
          </div>
        </div>

        <div className="hero-visual">
          <div className="partner-split">
            <div className="glow" />
            <div className="psplit-col">
              <div className="psplit-h"><Icon name="users" size={16} /> You handle</div>
              <div className="psplit-row"><span className="ic"><Icon name="check" size={13} stroke={2.6} /></span> Tenant verification</div>
              <div className="psplit-row"><span className="ic"><Icon name="check" size={13} stroke={2.6} /></span> Rent collection</div>
              <div className="psplit-row"><span className="ic"><Icon name="check" size={13} stroke={2.6} /></span> Enforcement &amp; recovery</div>
            </div>
            <div className="psplit-div" />
            <div className="psplit-col">
              <div className="psplit-h accent"><Icon name="vault" size={16} /> Gigi handles</div>
              <div className="psplit-row"><span className="ic accent"><Icon name="check" size={13} stroke={2.6} /></span> Capital &amp; underwriting</div>
              <div className="psplit-row"><span className="ic accent"><Icon name="check" size={13} stroke={2.6} /></span> Ardhi Sasa ownership checks</div>
              <div className="psplit-row"><span className="ic accent"><Icon name="check" size={13} stroke={2.6} /></span> Disbursement &amp; digital rails</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Why() {
  const items = [
    ['percent', 'A share on every deal', 'Earn an ongoing commission on every owner you help fund. The exact rate is set in your partner agreement, tailored to your volume and the role you play.'],
    ['users', 'Paid for what you already do', 'You verify tenants and collect rent today. Under a Gigi partnership those same activities become a revenue line — without changing how you work.'],
    ['vault', 'No capital from you', 'Gigi provides the financing and underwrites every facility. You bring the tenant relationship and local knowledge; we bring the money.'],
    ['home', 'Win & keep mandates', 'Owners stay with the manager who can unlock their rent. Offer Gigi to win pitches and reduce churn across your portfolio.'],
    ['bolt', 'Built on digital rails', 'Disbursement, tracking and reconciliation run on our rails. Owners get funded in minutes, and you get clean reporting on every deal.'],
    ['shield', 'A clear division of labour', 'You own the on-the-ground relationship — verification, collection, enforcement. We own financing, compliance and the tech. No overlap, no confusion.'],
  ];
  return (
    <section className="block" id="why" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> Why partner with Gigi</span>
          <h2>Your tenants and rent roll. Our capital and rails.</h2>
          <p>A partnership built around what each side does best — so you add a revenue line without taking on the financing or the technology.</p>
        </div>
        <div className="partner-why">
          {items.map(([ic, t, b]) => (
            <div className="pw-card" key={t}>
              <span className="pw-ic"><Icon name={ic} size={24} /></span>
              <h3>{t}</h3>
              <p>{b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function How() {
  const steps = [
    { ic: 'users', n: '01', t: 'Partner & onboard', b: 'Tell us about your agency and portfolio. We set you up with a partner agreement and a dashboard to track your deals.' },
    { ic: 'check', n: '02', t: 'Verify the tenancy', b: 'You confirm the tenant and the rent using the local knowledge you already have. Your verification feeds straight into our underwriting.' },
    { ic: 'bolt', n: '03', t: 'We finance & disburse', b: 'Gigi confirms ownership via Ardhi Sasa, underwrites the facility, and pays the owner over our digital rails — usually within minutes.' },
    { ic: 'percent', n: '04', t: 'Collect, enforce & earn', b: 'You manage collection of the assigned rent and any enforcement if a tenant falls behind — and earn your share on the deal.' },
  ];
  return (
    <section className="block" id="how">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> How partnership works</span>
          <h2>Four steps, with each side playing its part.</h2>
        </div>
        <div className="flow">
          {steps.map(s => (
            <div className="flow-step" key={s.n}>
              <div className="flow-node">{s.n}</div>
              <div className="flow-body">
                <span className="flow-n"><Icon name={s.ic} size={14} /> Step {s.n}</span>
                <h3>{s.t}</h3>
                <p>{s.b}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Earn() {
  const cards = [
    ['percent', 'A share on every funded deal', 'You earn an ongoing commission on the financing you help originate, paid as deals are funded. It scales with the volume you bring.'],
    ['users', 'Recognising the work you do', 'Because you verify tenants and run collection and enforcement, your share reflects that operational role — not just an introduction.'],
  ];
  return (
    <section className="block" id="earn" style={{ paddingTop: 20 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> How partners earn</span>
          <h2>A revenue line that grows with your portfolio.</h2>
          <p>Partners earn a commission on every deal they help fund. We keep the exact rate to your partner agreement, so it can be tailored to your volume and the role you play — rather than fixed on a public page.</p>
        </div>
        <div className="partner-earn">
          {cards.map(([ic, t, b]) => (
            <div className="pw-card" key={t}>
              <span className="pw-ic"><Icon name={ic} size={24} /></span>
              <h3>{t}</h3>
              <p>{b}</p>
            </div>
          ))}
        </div>
        <p className="partner-fine">Commission terms are set out in your partner agreement and depend on funded volume, product mix and the servicing role you take on.</p>
      </div>
    </section>
  );
}

function WhoPartners() {
  const cards = [
    { ic: 'users', t: 'Property managers', d: 'Offer financing to the owners whose buildings you manage, keep running collection and enforcement, and earn on every funded deal.' },
    { ic: 'home', t: 'Real estate agencies', d: 'Add a financing option to your service, win more mandates, and keep owners loyal to your brand.' },
    { ic: 'bank', t: 'Developers & investors', d: 'Help owners in your projects unlock liquidity, and unlock capital for your own income-producing assets.' },
    { ic: 'vault', t: 'SACCOs & co-ops', d: 'Give your property-owning members rent-backed liquidity, with Gigi providing the capital and rails behind it.' },
  ];
  return (
    <section className="block" id="who" style={{ paddingTop: 20 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> Who partners with Gigi</span>
          <h2>Built for everyone who serves property owners.</h2>
        </div>
        <div className="wf2-grid">
          {cards.map(c => (
            <div className="wf2-col" key={c.t}>
              <span className="wf2-ic"><Icon name={c.ic} size={32} /></span>
              <h3 className="wf2-t">{c.t}</h3>
              <p className="wf2-d">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PFAQ() {
  const qa = [
    ['Does partnering cost anything?', 'No. There is no fee to become a Gigi partner. You earn a share on the deals you help fund — you never pay to take part.'],
    ['Who puts up the money?', 'Gigi does. We provide and underwrite all the financing and carry the funding. You don’t lend your own capital.'],
    ['What is my role day to day?', 'You do what you already do well: verify tenants, collect the assigned rent, and handle enforcement if a tenant falls behind. Gigi handles the capital, compliance and the digital rails.'],
    ['How and when am I paid?', 'You earn a share on every funded deal, paid as deals fund. The exact commission is set out in your partner agreement.'],
    ['What do my owners need?', 'Verified ownership (confirmed via Ardhi Sasa) and a genuine tenancy with verifiable rent. We provide the financing and the rails; you bring the relationship.'],
    ['Can I co-brand it for my agency?', 'Yes. Partners get co-branded materials and a simple link to share, so the offer feels like a natural extension of your service.'],
  ];
  return (
    <section className="block" id="faq" style={{ paddingTop: 20 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> Partner questions</span>
          <h2>The details that matter to partners.</h2>
        </div>
        <div className="partner-faq">
          {qa.map(([q, a]) => (
            <div className="pfaq-item" key={q}>
              <h3>{q}</h3>
              <p>{a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Apply() {
  return (
    <section className="block" id="apply" style={{ paddingTop: 20 }}>
      <div className="wrap">
        <div className="cta-band">
          <div className="glow" />
          <div style={{ flex: '1 1 360px', minWidth: 0 }}>
            <span className="eyebrow on-dark"><span className="dot" /> Become a partner</span>
            <h2 style={{ marginTop: 12 }}>Start offering financing to your owners.</h2>
            <p>Tell us about your agency and we&rsquo;ll get you set up. A partnerships specialist will reach out to walk you through the agreement, your commission and your dashboard.</p>
          </div>
          <div className="prequal-card" style={{ position: 'relative', flex: '1 1 360px', maxWidth: 460, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '.04em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 16 }}>Request partnership</div>
            <window.GWaitlistForm kind="partner" />
          </div>
        </div>
        <p className="disclaimer">
          Commission terms are confirmed in your partner agreement. Gigi Money Limited is licensed and regulated. Products are subject to underwriting, verified ownership via Ardhi&nbsp;Sasa, and the applicable eligibility terms.
        </p>
      </div>
    </section>
  );
}

function PartnersPage() {
  return (
    <div className="g-root">
      <window.GNav active={null} />
      <PHero />
      <Why />
      <How />
      <Earn />
      <WhoPartners />
      <PFAQ />
      <Apply />
      <window.GFooter />
    </div>
  );
}

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