/* product.jsx — shared template for the four product pages.
   Each page sets window.GIGI_PRODUCT_ID before this script mounts. */
const { Icon } = window.GigiMoneyDesignSystem_b54949;

function renderH1(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 ProductHero({ id }) {
  const m = window.GIGI_MKT[id], o = window.gOfferById(id);
  return (
    <section className="phero" id="top">
      <div className="wrap phero-grid">
        <div>
          <span className="eyebrow"><span className="dot" /> {o.n} · {m.eyebrow}</span>
          <h1>{renderH1(m.h1)}</h1>
          <p className="lede">{m.lede}</p>
          <div className="acts">
            <a className="btn btn-pill btn-lg" href="#prequalify">{m.cta || 'Get funding'}</a>
            <a className="btn btn-ghost btn-lg" href="index.html#products">All solutions</a>
          </div>
          <div className="trust" style={{ marginTop: 30 }}>
            {m.trust.map(([ic, label]) => (
              <span className="item" key={label}><span className="chip"><Icon name={ic} size={15} /></span> {label}</span>
            ))}
          </div>
        </div>
        <window.GProductVisual id={id} />
      </div>
    </section>
  );
}

function HowSpec({ id }) {
  const o = window.gOfferById(id);
  return (
    <section className="block" id="how" style={{ paddingBottom: 36 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> How it works</span>
          <h2>A smarter home for your property investments.</h2>
          <p>{o.blurb}</p>
        </div>
        <div className="spec">
          {(o.terms || []).map((t, i) => (
            <div className="row" key={i}>
              <div className="k">{t[0]}</div>
              <div className="v">{t[1]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const APPLY_META = {
  rent_advance: { sl: 'Estimate your advance', cta: 'Enter your monthly rent and the months of rent to assign, and watch your lump sum update. No account or property setup required.' },
  rent_guarantee: { sl: 'Estimate your guarantee', cta: 'Enter your monthly rent and pick a tenant fee tier. The tenant pays the fee instead of a deposit, and your rent arrives on schedule. No account or property setup required.' },
  heloc: { sl: 'Estimate your credit line', cta: 'Enter your estimated property value to see the revolving credit line you could draw on, serviced by the rent you already collect. No account or property setup required.' },
  credit_card: { sl: 'Check your offer', cta: 'Enter your estimated property value to see the credit limit you could unlock, backed by your equity and rewarded with cash back. No account or property setup required.' },
};

function Apply({ id }) {
  const o = window.gOfferById(id), meta = APPLY_META[id];
  const Form = (window.GIGI_FORMS || {})[id];
  return (
    <section className="block" id="apply" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> {meta.sl}</span>
          <h2>Get funding</h2>
          <p>{meta.cta}</p>
        </div>
        <div className="apply-grid">
          <div className="apply-card">
            <div className="sl">{meta.sl}</div>
            {Form ? <Form onBack={() => window.gScrollToId('top')} /> : null}
          </div>
          <div className="aside">
            <div className="info">
              <h4>Why this works</h4>
              <p>{o.angle}</p>
            </div>
            <div className="note">
              <span className="nic"><Icon name="shield" size={18} /></span>
              <p>Underwriting uses ownership verified via <b>Ardhi&nbsp;Sasa</b> and the rent roll Gigi&nbsp;Money already monitors. Pricing reflects the cost of funding and the assessed default risk of each tenancy.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Cross({ id }) {
  const MKT = window.GIGI_MKT, ORDER = window.GIGI_ORDER;
  const others = ORDER.filter(x => x !== id);
  return (
    <section className="block" id="more" style={{ paddingTop: 20 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot" /> Keep exploring</span>
          <h2>Other ways to unlock your property.</h2>
        </div>
        <div className="cross">
          {others.map(x => {
            const o = window.gOfferById(x), m = MKT[x];
            return (
              <a href={`${m.slug}.html`} key={x}>
                <span className="ci"><Icon name={o.icon} size={22} /></span>
                <span>
                  <span className="ct">{o.title}</span>
                  <div className="cs">{m.eyebrow}</div>
                </span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ProductPage() {
  const id = window.GIGI_PRODUCT_ID;
  return (
    <div className="g-root">
      <window.GNav active={id} />
      <ProductHero id={id} />
      <HowSpec id={id} />
      <Apply id={id} />
      <Cross id={id} />
      <window.GPrequalify id={id} interest={id} />
      <window.GFooter />
    </div>
  );
}

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