/* risk.jsx — owner-facing "risk & recourse" explainer. Plain-language companion
   to the formal Lending Disclosures: what you're committing to, what happens if
   a tenant stops paying, how you're protected, and how to get recourse. */
const { Icon } = window.GigiMoneyDesignSystem_b54949;

function RHero() {
  return (
    <section className="phero" id="top">
      <div className="wrap phero-grid">
        <div>
          <span className="eyebrow"><span className="dot" /> Risk &amp; recourse</span>
          <h1>Bringing your rent forward — <span className="hl">the honest version</span>.</h1>
          <p className="lede">A rent advance is a genuinely good deal for most owners, but it&rsquo;s a real commitment. Here&rsquo;s exactly what you&rsquo;re agreeing to, what happens if a tenant stops paying, and how to get help if something goes wrong — in plain language, no small print.</p>
          <div className="acts">
            <a className="btn btn-pill btn-lg" href="rent-advance.html#prequalify">Run a simulation</a>
            <a className="btn btn-ghost btn-lg" href="disclosures.html">Read the full disclosures</a>
          </div>
        </div>
        <div className="hero-visual">
          <div className="risk-hero-card">
            <div className="rhc-row good"><span className="ic"><Icon name="check" size={16} stroke={2.6} /></span><span>Your title never leaves your name</span></div>
            <div className="rhc-row good"><span className="ic"><Icon name="check" size={16} stroke={2.6} /></span><span>Every fee shown before you agree</span></div>
            <div className="rhc-row good"><span className="ic"><Icon name="check" size={16} stroke={2.6} /></span><span>Recovery is handled by Gigi, fairly</span></div>
            <div className="rhc-row watch"><span className="ic"><Icon name="info" size={16} stroke={2.4} /></span><span>The rent you bring forward is committed</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Commit() {
  const items = [
    { ic: 'bolt', t: 'Rent advance', d: 'You assign up to 24 months of future rent and receive a discounted lump sum today. That rent is committed for the assigned period — you won’t receive it again during that time. It is not a loan, there’s no mortgage, and the title stays yours.' },
    { ic: 'shield', t: 'Rent guarantee', d: 'Your tenant pays a small monthly fee instead of a deposit, and you’re paid on schedule whether or not the tenant pays. The commitment here is the service fee — the protection is yours.' },
    { ic: 'vault', t: 'HELOC & credit card', d: 'These are credit facilities secured against your property equity. Missing repayments can reduce your equity and may be reported to credit reference bureaus, so only draw what your rent can comfortably service.' },
  ];
  return (
    <section className="block" id="commit" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> What you&rsquo;re committing to</span>
          <h2>Each product asks something different of you.</h2>
          <p>Know the trade before you take it. Here&rsquo;s the commitment behind each Gigi product, stated plainly.</p>
        </div>
        <div className="partner-why">
          {items.map(c => (
            <div className="pw-card" key={c.t}>
              <span className="pw-ic"><Icon name={c.ic} size={24} /></span>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Scenario() {
  const rows = [
    {
      tone: 'watch', q: 'A tenant stops paying after I’ve taken a rent advance.',
      a: 'Because you assigned that rent to us, recovery becomes our job, not yours — we pursue it through a fair, lawful process. What you owe us, if anything, is limited to exactly what your agreement says. We never pursue you beyond those agreed terms, and we never use harassment or threats.',
    },
    {
      tone: 'good', q: 'A tenant goes quiet and I have rent guarantee.',
      a: 'You’re protected. Your rent is paid to you on schedule regardless, and chasing the tenant is entirely on us. This is exactly what the guarantee is for.',
    },
    {
      tone: 'watch', q: 'My circumstances change and I can’t service a credit facility.',
      a: 'Contact us early — before a payment is missed if you can. We’d far rather restructure something workable than see you fall into default. For secured credit, sustained non-payment can affect your equity and your credit record, so the sooner we talk, the more options you have.',
    },
    {
      tone: 'good', q: 'I change my mind before the money is disbursed.',
      a: 'No problem, and no cost. You can decline any offer right up until you accept it. Estimates on this site are never binding.',
    },
  ];
  return (
    <section className="block" id="scenarios" style={{ paddingTop: 10 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> If something goes wrong</span>
          <h2>Real situations, and exactly what happens.</h2>
        </div>
        <div className="risk-scenarios">
          {rows.map(r => (
            <div className={`risk-card ${r.tone}`} key={r.q}>
              <div className="rc-head">
                <span className="rc-ic"><Icon name={r.tone === 'good' ? 'check' : 'info'} size={16} stroke={2.4} /></span>
                <h3>{r.q}</h3>
              </div>
              <p>{r.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Protections() {
  const items = [
    ['ardhi', 'Your title stays yours', 'A rent advance assigns future rent only. It places no mortgage or charge on your property, and ownership never transfers.'],
    ['percent', 'No hidden costs', 'Every charge is shown in full before you agree. The figure you accept is the figure you pay — we never add fees afterwards.'],
    ['users', 'Fair recovery, always', 'If a tenant defaults, we recover lawfully and respectfully. No harassment, no threats, no unlawful collection — ever.'],
    ['shield', 'Regulated & accountable', 'We’re registered with the ODPC, so you have formal recourse if we get it wrong.'],
  ];
  return (
    <section className="block" id="protections" style={{ paddingTop: 10 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> How you&rsquo;re protected</span>
          <h2>The safeguards built in for you.</h2>
        </div>
        <div className="wf2-grid">
          {items.map(([ic, t, d]) => (
            <div className="wf2-col" key={t}>
              <span className="wf2-ic"><Icon name={ic} size={32} /></span>
              <h3 className="wf2-t">{t}</h3>
              <p className="wf2-d">{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Recourse() {
  const steps = [
    { ic: 'mail', n: '01', t: 'Talk to us first', b: <>Email <a href="mailto:complaints@gigi.money">complaints@gigi.money</a> or call <mark className="legal-todo" title="Confirm before publishing">TODO: support phone no.</mark>. We aim to acknowledge within 2 business days and resolve it quickly.</> },
    { ic: 'bank', n: '02', t: 'Escalate to the CBK', b: <>If your complaint concerns a credit facility and stays unresolved, you can escalate to the Central Bank of Kenya at <a href="https://www.centralbank.go.ke" target="_blank" rel="noopener">centralbank.go.ke</a>.</> },
    { ic: 'lock', n: '03', t: 'Data concerns to the ODPC', b: <>For anything about your personal data, contact the Office of the Data Protection Commissioner at <a href="https://www.odpc.go.ke" target="_blank" rel="noopener">odpc.go.ke</a>.</> },
  ];
  return (
    <section className="block" id="recourse" style={{ paddingTop: 10 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> Your recourse</span>
          <h2>If you&rsquo;re unhappy, here&rsquo;s your ladder.</h2>
          <p>You always have somewhere to go. We want to fix things ourselves — but you&rsquo;re never stuck with just our answer.</p>
        </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>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="block" id="cta" style={{ paddingTop: 10 }}>
      <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" /> Still have questions?</span>
            <h2 style={{ marginTop: 12 }}>Talk it through before you commit.</h2>
            <p>No obligation. Run a simulation to see your numbers, or read the full disclosures for every detail.</p>
          </div>
          <div className="acts" style={{ flex: '0 0 auto' }}>
            <a className="btn btn-accent btn-lg" href="rent-advance.html#prequalify">Run a simulation</a>
            <a className="btn btn-ghost btn-lg on-dark" href="disclosures.html">Full disclosures</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function RiskPage() {
  return (
    <div className="g-root">
      <window.GNav active={null} />
      <RHero />
      <Commit />
      <Scenario />
      <Protections />
      <Recourse />
      <CTA />
      <window.GFooter />
    </div>
  );
}

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