/* landing.jsx — Gigi Money home page composition. */
const { Icon } = window.GigiMoneyDesignSystem_b54949;

function Hero() {
  const onGo = () => window.gScrollToId('simulate');
  const onKey = (e) => { if (e.key === 'Enter') onGo(); };
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div>
          <span className="eyebrow"><span className="dot" /> For property owners</span>
          <h1>Get <span className="hl">24 months&rsquo;</span> advance of future rent from your properties.</h1>
          <p className="lede">Turn your future rent into immediate cash. It&rsquo;s not a loan, there&rsquo;s no mortgage and it&rsquo;s 100% digital.</p>

          <div className="amount" role="group" aria-label="Estimate your advance">
            <span className="cur">KES</span>
            <input type="text" inputMode="numeric" placeholder="How much do you need?" onKeyDown={onKey} aria-label="Amount needed" />
            <button className="go" onClick={onGo} aria-label="Run a simulation"><Icon name="chevR" size={20} stroke={2.2} /></button>
          </div>

          <div className="trust">
            <span className="item"><span className="chip"><Icon name="percent" size={15} /></span> Lowest rates on the market</span>
            <span className="item"><span className="chip"><Icon name="shield" size={15} /></span> Verified via Ardhi Sasa</span>
          </div>

          <p className="partner-line">Run a property business? <a href="#partner">Become a partner</a> and offer this to your owners.</p>
        </div>

        <window.GPreviewCard />
      </div>
    </section>
  );
}

function Strip() { return null; }

function Simulate() {
  const AdvanceForm = (window.GIGI_FORMS || {}).rent_advance;
  return (
    <section className="block" id="simulate" style={{ paddingBottom: 40 }}>
      <div className="wrap">
        <div className="sec-head center">
          <span className="eyebrow"><span className="dot" /> Run a simulation</span>
          <h2>See what your rent can unlock</h2>
          <p>Tell us your monthly rent and how many months you&rsquo;d like to bring forward. You&rsquo;ll see a no-obligation estimate in under a minute.</p>
        </div>
        <div className="sim-shell">
          <div className="sl">Rent advance estimate</div>
          {AdvanceForm ? <AdvanceForm onBack={() => window.gScrollToId('products')} /> : null}
        </div>
      </div>
    </section>
  );
}

function How() {
  const steps = [
    { ic: 'percent', n: '01', t: 'Simulate', b: 'Tell us a little about your rent and see what you could unlock. It takes under a minute, and there’s nothing to upload yet.', lk: ['Run the simulation', () => window.gScrollToId('simulate')] },
    { ic: 'shield', n: '02', t: 'Verify', b: 'When you’re ready, we confirm your title with Ardhi Sasa and look over your rent roll. Most checks clear within a day or two.', lk: ['Understand better', 'rent-advance.html'] },
    { ic: 'bolt', n: '03', t: 'Get paid', b: 'Once you’re approved, the money goes straight to M-Pesa or your bank, usually within 15 minutes. Repayment then happens from the rent you collect.', lk: ['See the products', () => window.gScrollToId('products')] },
  ];
  return (
    <section className="block" id="how">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> How it works</span>
          <h2>From simulation to money in hand, in three steps.</h2>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="num"><span className="ic"><Icon name={s.ic} size={20} /></span> {s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.b}</p>
              {typeof s.lk[1] === 'string'
                ? <a className="lk" href={s.lk[1]}>{s.lk[0]} <Icon name="chevR" size={15} /></a>
                : <span className="lk g-tap" onClick={s.lk[1]}>{s.lk[0]} <Icon name="chevR" size={15} /></span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Products() {
  const MKT = window.GIGI_MKT, ORDER = window.GIGI_ORDER;
  const feat = MKT.rent_advance, featOffer = window.gOfferById('rent_advance');
  const rest = ORDER.filter(id => id !== 'rent_advance');
  return (
    <section className="block" id="products" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> Our solutions</span>
          <h2>Four ways to unlock your property.</h2>
          <p>Different ways to put the rent you already earn to work for you.</p>
        </div>
        <div className="prod-grid">
          {ORDER.map(id => {
            const o = window.gOfferById(id), m = MKT[id];
            const hued = id === 'rent_advance';
            return (
              <a className={`pcard${hued ? ' hued' : ''}`} href={`${m.slug}.html`} key={id}>
                <div className="pc-top">
                  <span className="pc-ic"><Icon name={o.icon} size={24} /></span>
                  <span className="pc-n">{o.n}</span>
                </div>
                <div style={{ flex: 1 }}>
                  <span className="pc-for">{o.forWhom}</span>
                  <h3>{o.title}</h3>
                  <p className="pc-body">{o.card}</p>
                </div>
                <span className="pc-go">Explore <Icon name="chevR" size={16} /></span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function PartnerCTA() {
  return (
    <section className="block" id="partner" 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" /> For property managers</span>
            <h2 style={{ marginTop: 12 }}>Offer financing to every owner you manage.</h2>
            <p>Give every owner you manage a way to unlock their rent, and share in the margin, all built on the rent roll you already run. You handle verification and collection; we bring the capital and the rails.</p>
          </div>
          <div className="acts" style={{ flex: '0 0 auto' }}>
            <a className="btn btn-accent btn-lg" href="partners.html">Become a partner</a>
            <a className="btn btn-ghost btn-lg on-dark" href="partners.html#how">See how it works</a>
          </div>
        </div>
        <p className="disclaimer">
          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. Amounts shown are illustrative.
        </p>
      </div>
    </section>
  );
}

function Landing() {
  return (
    <div className="g-root">
      <window.GNav active={null} />
      <Hero />
      <Products />
      <How />
      <Simulate />
      <window.GCompare />
      <window.GRepExample />
      <window.GPrequalify interest="rent_advance" />
      <window.GBenefits />
      <window.GPartnerSearch />
      <window.GTestimonials />
      <window.GCompliance />
      <window.GFAQ />
      <PartnerCTA />
      <window.GWaitlist />
      <window.GFooter />
    </div>
  );
}

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