/* Orinova Portal — pages19.jsx
   The GC partnership surface.

     · PartnersPage  — names the licensed GC of record, explains the
                       three-signature model in homeowner-facing language,
                       provides the credentialing the rest of the site
                       only references abstractly.

   This page is the credentialing layer for any pitch where the GC
   partnership matters to the client (high-end residential, referral-led
   accounts, repeat work). It does not bury the partnership; it names it.
*/

function PartnersPage() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow, Slot } = window.OrinovaAtoms;

  return (
    <div className="page">
      <Nav active="about" surface="orinova" />
      <div className="page-scroll hide-scroll">

        {/* ── 01 · HEADER ─────────────────────────────────────── */}
        <section style={{ maxWidth: 980, margin: '0 auto', padding: '48px 36px 0' }}>
          <Eyebrow>ORINOVA · {t({ es: 'red de socios contratistas', en: 'GC partnership network' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 56, margin: '12px 0 16px', maxWidth: 820 }}>
            {t({
              es: 'Una licencia nombrada. Un contratista responsable. Un coordinador bilingüe.',
              en: 'A named license. An accountable contractor. A bilingual coordinator.'
            }, lang)}
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 720, fontFamily: 'var(--serif)' }}>
            {t({
              es: 'DreamValley opera a través de un socio contratista general licenciado por el estado. Tú contratas con la licencia. Nosotros coordinamos el trabajo. La licencia y el dinero no se mezclan.',
              en: 'DreamValley works through a state-licensed general contractor partner. You contract with the license. We coordinate the work. License and money never commingle.'
            }, lang)}
          </p>
        </section>

        {/* ── 02 · SPEC TABLE — the partnership facts ──────────── */}
        <section style={{ maxWidth: 980, margin: '32px auto 0', padding: '0 36px' }}>
          <div className="rule rule-strong" />
          <dl style={{ margin: '14px 0' }}>
            <div className="spec-row">
              <dt>{t({ es: 'SOCIO GC PRINCIPAL', en: 'LEAD GC PARTNER' }, lang)}</dt>
              <dd>Ryan Davidson Construction · Norco, CA</dd>
            </div>
            <div className="spec-row">
              <dt>CSLB</dt>
              <dd>
                <span style={{ color: 'var(--ink-muted)', fontStyle: 'italic' }}>
                  {t({ es: 'licencia #__________ (pendiente)', en: 'License #__________ (pending)' }, lang)}
                </span>
              </dd>
            </div>
            <div className="spec-row">
              <dt>{t({ es: 'CLASIFICACIÓN', en: 'CLASSIFICATION' }, lang)}</dt>
              <dd>
                <span style={{ color: 'var(--ink-muted)', fontStyle: 'italic' }}>
                  {t({ es: 'a confirmar', en: 'to confirm' }, lang)}
                </span>
              </dd>
            </div>
            <div className="spec-row">
              <dt>{t({ es: 'SEGURO', en: 'INSURANCE' }, lang)}</dt>
              <dd>
                {t({
                  es: 'Responsabilidad civil general $1M mínimo · Workers’ Comp vigente',
                  en: 'General liability $1M minimum · current Workers’ Comp'
                }, lang)}
              </dd>
            </div>
            <div className="spec-row">
              <dt>{t({ es: 'JURISDICCIÓN', en: 'JURISDICTION' }, lang)}</dt>
              <dd>{t({ es: 'Inland Empire hasta la costa', en: 'Inland Empire to the coast' }, lang)}</dd>
            </div>
            <div className="spec-row">
              <dt>{t({ es: 'COORDINADOR · HIS', en: 'COORDINATOR · HIS' }, lang)}</dt>
              <dd>Erick Lucas · {t({ es: 'representante de ventas registrado CSLB', en: 'CSLB-registered Home Improvement Salesperson' }, lang)}</dd>
            </div>
            <div className="spec-row">
              <dt>{t({ es: 'IDIOMAS', en: 'LANGUAGES' }, lang)}</dt>
              <dd>Español · English</dd>
            </div>
          </dl>
          <div className="rule rule-strong" />
        </section>

        {/* ── 03 · THE THREE-SIGNATURE MODEL — homeowner-facing ── */}
        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Cómo funciona el modelo', en: 'How the model works' }, lang)}</Eyebrow>
          <h2 className="display" style={{ fontSize: 32, margin: '12px 0 24px', maxWidth: 760, fontWeight: 500 }}>
            {t({
              es: 'Tres firmas. Cero confusión sobre quién es responsable.',
              en: 'Three signatures. No confusion about who is accountable.'
            }, lang)}
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
            {[
              {
                n: '01',
                head: { es: 'El contratista firma el contrato', en: 'The contractor signs the contract' },
                who:  { es: 'Ryan Davidson Construction', en: 'Ryan Davidson Construction' },
                body: {
                  es: 'El contrato es entre tú y el GC licenciado. La licencia, el seguro, y la responsabilidad ante la CSLB están a su nombre. El pago se hace directo a RDC.',
                  en: 'The contract is between you and the licensed GC. License, insurance, and CSLB accountability all sit with him. Payment goes direct to RDC.'
                }
              },
              {
                n: '02',
                head: { es: 'El coordinador firma como HIS', en: 'The coordinator signs as HIS' },
                who:  { es: 'Erick Lucas · representante autorizado', en: 'Erick Lucas · authorized representative' },
                body: {
                  es: 'Como representante de ventas registrado de RDC, firmo el contrato en su nombre al momento de cerrar. Es la figura legal que California creó para este rol exacto.',
                  en: 'As an RDC-registered sales rep, I sign the contract on his behalf at point of close. It is the legal role California created for exactly this function.'
                }
              },
              {
                n: '03',
                head: { es: 'El ingeniero firma si se requiere', en: 'The engineer signs when required' },
                who:  { es: 'Ingeniero estructural licenciado · CA', en: 'CA-licensed structural engineer' },
                body: {
                  es: 'En obras que requieren plano o carta estructural (paredes no portantes, permisos comerciales), un ingeniero externo licenciado firma y sella el documento.',
                  en: 'When a project requires plans or a structural letter (non-load-bearing walls, commercial permits), an outside licensed engineer signs and stamps the document.'
                }
              },
            ].map((card, i) => (
              <div key={i} className="card" style={{ padding: 22 }}>
                <div className="codex" style={{ color: 'var(--terracotta)' }}>{card.n}</div>
                <h3 className="display" style={{ fontSize: 18, margin: '8px 0 4px', fontWeight: 500 }}>
                  {t(card.head, lang)}
                </h3>
                <div className="codex" style={{ color: 'var(--ink-muted)', marginBottom: 12 }}>
                  {t(card.who, lang)}
                </div>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0 }}>
                  {t(card.body, lang)}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* ── 04 · WHY THIS PROTECTS YOU ──────────────────────── */}
        <section style={{ maxWidth: 980, margin: '52px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Por qué este modelo te protege', en: 'Why this model protects you' }, lang)}</Eyebrow>
          <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', borderTop: '1px solid var(--divider)' }}>
            {[
              {
                es: 'Un contratista licenciado, asegurado, responsable ante la CSLB legalmente a cargo del trabajo.',
                en: 'A licensed, insured, CSLB-accountable contractor legally on the hook for the work.'
              },
              {
                es: 'Un coordinador dedicado cuya única tarea es que tú quedes satisfecho — desde la primera llamada hasta la última firma.',
                en: 'A dedicated coordinator whose only job is your satisfaction — from first call to final signature.'
              },
              {
                es: 'Separación transparente entre la licencia y el dinero. Tú pagas a RDC. Orinova cobra a RDC. Nunca se mezclan.',
                en: 'Transparent separation between license and money. You pay RDC. Orinova bills RDC. They never commingle.'
              },
              {
                es: 'Documentación bilingüe línea por línea. El estimado, el contrato, y la factura existen en español e inglés.',
                en: 'Bilingual documentation, line by line. The estimate, the contract, and the invoice all exist in Spanish and English.'
              },
              {
                es: 'Derecho completo a presentar queja ante la CSLB contra RDC si algo sale mal — con la documentación de Orinova como evidencia.',
                en: 'Full CSLB complaint rights against RDC if anything goes wrong — with Orinova’s documentation as evidence.'
              },
            ].map((row, i) => (
              <li key={i} style={{ padding: '14px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, fontSize: 14, color: 'var(--ink-soft)' }}>
                <span className="codex tab">{String(i+1).padStart(2,'0')}</span>
                <span>{t(row, lang)}</span>
              </li>
            ))}
          </ul>
        </section>

        {/* ── 05 · ABOUT RDC ──────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '60px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 36, alignItems: 'start' }}>
          <Slot label="RYAN · RDC" sub="GC partner portrait or jobsite · 4:5" style={{ aspectRatio: '4 / 5' }} />
          <div>
            <Eyebrow>{t({ es: 'sobre el socio', en: 'about the partner' }, lang)}</Eyebrow>
            <h2 className="display" style={{ fontSize: 30, margin: '12px 0 14px', fontWeight: 500 }}>
              {t({
                es: 'Ryan Davidson Construction',
                en: 'Ryan Davidson Construction'
              }, lang)}
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--ink-soft)', fontFamily: 'var(--serif)' }}>
              {t({
                es: 'Contratista general de Norco, California. Trabajo residencial y comercial en el Inland Empire. Relación familiar de varios años con el fundador de Orinova. Socio licenciado para los servicios que DreamValley coordina y entrega.',
                en: 'General contractor based in Norco, California. Residential and commercial work across the Inland Empire. Multi-year family relationship with Orinova’s founder. The licensed partner under whom DreamValley coordinates and delivers services.'
              }, lang)}
            </p>
            <div className="codex" style={{ marginTop: 20, color: 'var(--ink-muted)' }}>
              {t({ es: 'Norco · CA · CSLB licenciado', en: 'Norco · CA · CSLB-licensed' }, lang)}
            </div>
          </div>
        </section>

        {/* ── 06 · CTA ────────────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '60px auto 0', padding: '32px 36px', background: 'var(--ink)', color: 'var(--paper-cream)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 28, alignItems: 'center' }}>
            <div>
              <div className="codex" style={{ color: 'rgba(245,240,232,0.65)' }}>
                {t({ es: 'estimado bajo el modelo de socio licenciado', en: 'request an estimate under the licensed-partner model' }, lang)}
              </div>
              <h2 className="display" style={{ marginTop: 8, fontSize: 32, lineHeight: 1.1, color: 'var(--paper-cream)' }}>
                {t({
                  es: 'Una visita. Un estimado escrito. Una licencia nombrada antes de firmar.',
                  en: 'One visit. One written estimate. A named license on the table before you sign.'
                }, lang)}
              </h2>
            </div>
            <div style={{ display: 'grid', gap: 10 }}>
              <a className="btn btn-call" href="/estimate" style={{ padding: '14px 20px' }}>
                {t({ es: 'Pedir estimado →', en: 'Request estimate →' }, lang)}
              </a>
              <a className="btn btn-ghost" href="/contact" style={{ padding: '12px 20px', color: 'var(--paper-cream)', borderColor: 'rgba(245,240,232,0.3)' }}>
                {t({ es: 'O escríbenos', en: 'Or write to us' }, lang)}
              </a>
            </div>
          </div>
        </section>

        <div style={{ height: 50 }} />
        <Foot surface="orinova" />
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
 * Exports
 * ───────────────────────────────────────────────────────── */

window.OrinovaPages19 = {
  PartnersPage,
};