/* Orinova Portal — pages3.jsx
   Additions rooted in the actual operating record:
     · FounderNote          — Erick's plain-language letter
     · DreamFinance         — branded financing landing (real Acorn link)
     · PropertyPassport     — "homes that remember" (public translation of HAOS)
     · HomeHealthMembership — recurring tiered care plan
     · RopeAccessPage       — SPRAT-certified specialty
     · RealtorAlliance      — pre-sale partner program
     · MultilingualWelcome  — ES / EN / PA (Gurmukhi) / Tagalog / Hindi tile
     · CaseStudyPalosVerdes — Dunn-Edwards exclusive, BPC §7159 study

   Stays under the Obsidian Veil — no internal Orinova lore on these pages.
   Atoms reused from window.OrinovaAtoms.
*/

/* ── FOUNDER NOTE · why this exists ──────────────────────── */

function FounderNote() {
  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">
        <section style={{ maxWidth: 880, margin: '0 auto', padding: '52px 36px 0' }}>
          <Eyebrow>ORINOVA · {t({ es: 'una carta del fundador', en: 'a note from the founder' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 56, margin: '14px 0 24px', maxWidth: 720 }}>
            {t({
              es: 'Por qué existe esta compañía.',
              en: 'Why this company exists.'
            }, lang)}
          </h1>
        </section>

        <section style={{ maxWidth: 880, margin: '0 auto', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 36, alignItems: 'start' }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.6, color: 'var(--ink)' }}>
            <p style={{ marginTop: 0 }}>
              {t({
                es: 'Me llamo Erick. Llegué a este país a los trece años, caminando con mi madre. Aprendí inglés ayudando a mi padre a pintar casas en Riverside los fines de semana.',
                en: 'My name is Erick. I came to this country at thirteen, walking with my mother. I learned English helping my father paint houses in Riverside on weekends.'
              }, lang)}
            </p>
            <p>
              {t({
                es: 'Empecé esta compañía porque vi muchas casas pintadas mal. No por flojera — por prisa. Estimadores que prometen lo que la cuadrilla no puede dar. Capataces que cobran al frente y se desaparecen. Familias en español a las que nadie les explica nada.',
                en: 'I started this company because I saw too many houses painted badly. Not from laziness — from rush. Estimators promising what the crew can\u2019t deliver. Foremen who collect up front and disappear. Spanish-speaking families nobody bothered to explain anything to.'
              }, lang)}
            </p>
            <p>
              {t({
                es: 'No quiero ser la compañía más grande de pintura del condado. Quiero ser la que dice la verdad de qué cuesta, hace bien el trabajo, y vuelve a tu puerta sin que tengas que cazarla.',
                en: 'I don\u2019t want to be the biggest paint company in the county. I want to be the one that tells the truth about what it costs, does the work right, and comes back to your door without you having to chase it.'
              }, lang)}
            </p>
            <p style={{ borderLeft: '3px solid var(--terracotta)', paddingLeft: 18, marginLeft: 0, fontStyle: 'italic', color: 'var(--ink-soft)' }}>
              {t({
                es: 'Si en la primera llamada nadie te dijo qué cuesta y qué pasa después, no era una compañía seria. Era un anuncio.',
                en: 'If on the first call no one told you what it costs and what happens next, it wasn\u2019t a serious company. It was an ad.'
              }, lang)}
            </p>
            <p>
              {t({
                es: 'Hablamos español sin traducir prisa. Mandamos el estimado escrito en 48 horas, con renglones claros. Si no podemos hacer la obra, te decimos quién sí. Pagas cuando terminamos, no antes. La garantía la firmamos con nombre, no con un logo.',
                en: 'We speak Spanish unrushed. We send the written estimate in 48 hours, clear line items. If we can\u2019t do the job, we tell you who can. You pay when we\u2019re done, not before. The warranty is signed with a name — not a logo.'
              }, lang)}
            </p>
            <p>
              {t({
                es: 'Esa es la compañía. Esa es la idea entera.',
                en: 'That\u2019s the company. That\u2019s the whole idea.'
              }, lang)}
            </p>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 24, marginTop: 28, color: 'var(--ink)' }}>
              Erick L.
            </p>
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>RIVERSIDE, CA · {t({ es: 'mayo de 2026', en: 'May 2026' }, lang)}</div>
          </div>

          <aside>
            <Slot label="FOUNDER PORTRAIT" sub="paint-clothed · 4:5" slotId="founder-portrait" style={{ aspectRatio: '4 / 5' }} />
            <div className="card" style={{ marginTop: 18 }}>
              <Eyebrow>{t({ es: 'Lo que firmamos', en: 'What we sign' }, lang)}</Eyebrow>
              <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none', fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
                {[
                  { es: 'Estimado escrito en 48 horas',                  en: 'Written estimate in 48 hours' },
                  { es: 'Bilingüe: español e inglés',                     en: 'Bilingual: Spanish and English' },
                  { es: 'Pago al terminar — sin pago inicial',            en: 'Pay on completion — no deposit' },
                  { es: 'Garantía de mano de obra · 1 año',                en: '1-year workmanship warranty' },
                  { es: 'Contratista CSLB nombrado antes de firmar',       en: 'CSLB contractor named before signing' },
                  { es: 'Inmigración: jamás preguntada, jamás guardada',   en: 'Immigration: never asked, never stored' },
                ].map((r, i) => (
                  <li key={i} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10 }}>
                    <span style={{ color: 'var(--olive)' }}>·</span>{t(r, lang)}
                  </li>
                ))}
              </ul>
            </div>
          </aside>
        </section>

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

window.OrinovaPages3 = Object.assign(window.OrinovaPages3 || {}, { FounderNote });

/* ── DREAMFINANCE — branded financing landing ─────────────── */

function DreamFinance() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = window.OrinovaAtoms;
  const examples = [
    { job: { es: 'Pintura interior · 3 cuartos', en: 'Interior paint · 3 rooms' }, total: '$4,820',  m12: '$425',  m24: '$224',  m60: '$96' },
    { job: { es: 'Cocina + gabinetes',             en: 'Kitchen + cabinets' },      total: '$6,400',  m12: '$564',  m24: '$298',  m60: '$128' },
    { job: { es: 'Fachada · 2 pisos',                en: 'Exterior · 2-story' },     total: '$8,950',  m12: '$789',  m24: '$416',  m60: '$179' },
    { job: { es: 'Refresco previo a la venta',       en: 'Pre-sale refresh' },       total: '$11,200', m12: '$988',  m24: '$521',  m60: '$224' },
  ];
  return (
    <div className="page">
      <Nav active="financing" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 36px 0', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 36, alignItems: 'end' }}>
          <div>
            <Eyebrow>DREAMFINANCE · {t({ es: 'una marca de DreamValley', en: 'a DreamValley service' }, lang)}</Eyebrow>
            <h1 className="display" style={{ fontSize: 64, margin: '12px 0 14px', maxWidth: 640 }}>
              {t({
                es: 'Hasta $100,000 — sin afectar tu crédito al pre-calificar.',
                en: 'Up to $100,000 — no credit-score hit to pre-qualify.'
              }, lang)}
            </h1>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 540 }}>
              {t({
                es: 'Plataforma de Acorn Finance. Pre-aprobación en 60 segundos. Ves la oferta antes de firmar. Los términos finales los pone el prestamista — no nosotros — y tú decides.',
                en: 'Powered by Acorn Finance. Pre-qualify in 60 seconds. You see the offer before you sign. Final terms come from the lender — not us — and the choice is yours.'
              }, lang)}
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              <a className="btn btn-primary" style={{ padding: '12px 20px' }}>{t({ es: 'Pre-calificar · 60 s', en: 'Pre-qualify · 60 s' }, lang)} →</a>
              <a className="btn btn-ghost">{t({ es: 'Hablar con alguien', en: 'Talk to someone' }, lang)}</a>
            </div>
            <div className="codex" style={{ marginTop: 14, color: 'var(--ink-muted)' }}>
              acornfinance.com/pre-qualify/?d=QZD8N
            </div>
          </div>
          <div className="card" style={{ background: 'var(--paper-cream)' }}>
            <div className="codex">DREAMFINANCE · {t({ es: 'EJEMPLO', en: 'EXAMPLE' }, lang)}</div>
            <div className="display" style={{ fontSize: 28, margin: '8px 0 6px' }}>$4,820</div>
            <div style={{ fontSize: 13, color: 'var(--ink-muted)' }}>{t({ es: 'pintura interior · 3 cuartos', en: 'interior paint · 3 rooms' }, lang)}</div>
            <div className="rule" style={{ margin: '14px 0' }} />
            <dl style={{ margin: 0 }}>
              <div className="spec-row"><dt>12 {t({ es: 'MESES', en: 'MONTHS' }, lang)}</dt><dd className="tab">$425 / mo</dd></div>
              <div className="spec-row"><dt>24 {t({ es: 'MESES', en: 'MONTHS' }, lang)}</dt><dd className="tab">$224 / mo</dd></div>
              <div className="spec-row"><dt>60 {t({ es: 'MESES', en: 'MONTHS' }, lang)}</dt><dd className="tab" style={{ color: 'var(--olive)' }}>$96 / mo</dd></div>
              <div className="spec-row"><dt>{t({ es: 'PAGO INICIAL', en: 'DOWN' }, lang)}</dt><dd className="tab">$0</dd></div>
            </dl>
            <div className="codex" style={{ marginTop: 12, color: 'var(--ink-muted)' }}>
              {t({ es: 'ejemplos · tarifa real depende del prestamista', en: 'examples · your rate set by lender' }, lang)}
            </div>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Cuatro pasos. Sin papeleo en mano.', en: 'Four steps. No paperwork in hand.' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--divider)', marginTop: 12 }}>
            {[
              { n: '01', t: { es: 'Pre-calificas',   en: 'Pre-qualify' },   d: { es: '60 s · soft pull · no afecta puntaje.', en: '60 s · soft pull · no score hit.' } },
              { n: '02', t: { es: 'Ves ofertas',     en: 'See offers' },    d: { es: 'Tasa, plazo, pago mensual. Comparas.',   en: 'APR, term, monthly payment. Compare.' } },
              { n: '03', t: { es: 'Escoges',         en: 'You pick' },      d: { es: 'Sin presión. Puedes decir no.',           en: 'No pressure. You can say no.' } },
              { n: '04', t: { es: 'Trabajamos',      en: 'We work' },       d: { es: 'Fondos al terminar. Pagas al prestamista.', en: 'Funds at completion. You pay the lender.' } },
            ].map((s, i) => (
              <div key={i} style={{ borderRight: i < 3 ? '1px solid var(--divider)' : 'none', borderBottom: '1px solid var(--divider)', padding: '18px 20px 22px' }}>
                <div className="codex" style={{ color: 'var(--terracotta)' }}>{s.n}</div>
                <div className="display" style={{ fontSize: 20, margin: '8px 0 8px' }}>{t(s.t, lang)}</div>
                <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.55, margin: 0 }}>{t(s.d, lang)}</p>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Pagos mensuales · trabajos típicos', en: 'Monthly payments · typical jobs' }, lang)}</Eyebrow>
          <div style={{ marginTop: 12, borderTop: '1px solid var(--divider-strong)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 12, padding: '8px 0', borderBottom: '1px solid var(--divider-strong)' }}>
              <div className="codex">{t({ es: 'TIPO DE OBRA', en: 'JOB TYPE' }, lang)}</div>
              <div className="codex" style={{ textAlign: 'right' }}>TOTAL</div>
              <div className="codex" style={{ textAlign: 'right' }}>12 MO</div>
              <div className="codex" style={{ textAlign: 'right' }}>24 MO</div>
              <div className="codex" style={{ textAlign: 'right' }}>60 MO</div>
            </div>
            {examples.map((row, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 12, padding: '14px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                <div style={{ fontSize: 14.5 }}>{t(row.job, lang)}</div>
                <div className="tab" style={{ fontFamily: 'var(--mono)', textAlign: 'right' }}>{row.total}</div>
                <div className="tab" style={{ fontFamily: 'var(--mono)', textAlign: 'right' }}>{row.m12}</div>
                <div className="tab" style={{ fontFamily: 'var(--mono)', textAlign: 'right' }}>{row.m24}</div>
                <div className="tab" style={{ fontFamily: 'var(--mono)', textAlign: 'right', color: 'var(--olive)' }}>{row.m60}</div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <div className="card-quiet">
            <Eyebrow>{t({ es: 'Aviso · honesto', en: 'Disclosure · plain' }, lang)}</Eyebrow>
            <p style={{ fontSize: 12.5, color: 'var(--ink-muted)', lineHeight: 1.6, marginTop: 6, maxWidth: 800 }}>
              {t({
                es: 'DreamFinance es la marca de servicio que conecta a Acorn Finance con tu estimado de DreamValley Trade Solutions. La pre-calificación es soft pull — no afecta tu puntaje. El crédito formal lo evalúa el prestamista al firmar. Términos, tasa y plazo los pone el prestamista, no nosotros. No cobramos por conectarte; si no calificas, te ofrecemos pago dividido o por fases sin presión. DreamValley Trade Solutions es una marca de DreamValley Construction & Development LLC. Trabajo bajo licencia ejecutado por contratista CSLB nombrado en el contrato firmado.',
                en: 'DreamFinance is the service brand that connects Acorn Finance to your DreamValley Trade Solutions estimate. Pre-qualification is a soft pull — your score isn\u2019t hit. Hard credit is pulled by the lender at signing. APR, term, and rate are set by the lender, not by us. We don\u2019t charge to connect you; if you don\u2019t qualify, we offer split pay or phasing with no pressure. DreamValley Trade Solutions is a service brand of DreamValley Construction & Development LLC. Licensed work performed by a CSLB-licensed contractor named on the signed contract.'
              }, lang)}
            </p>
          </div>
        </section>

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

window.OrinovaPages3 = Object.assign(window.OrinovaPages3 || {}, { DreamFinance });

/* ── PROPERTY PASSPORT — public-facing HAOS ───────────────── */

function PropertyPassport() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow, Slot } = window.OrinovaAtoms;
  return (
    <div className="page">
      <Nav active="services" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 36px 0', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 36, alignItems: 'end' }}>
          <div>
            <Eyebrow>DREAMVALLEY · {t({ es: 'pasaporte de casa', en: 'property passport' }, lang)}</Eyebrow>
            <h1 className="display" style={{ fontSize: 60, margin: '14px 0 14px', maxWidth: 660 }}>
              {t({
                es: 'Tu casa con memoria.',
                en: 'Your home, on the record.'
              }, lang)}
            </h1>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 520 }}>
              {t({
                es: 'Cada vez que tocamos tu casa — pintura, drywall, parchado — queda escrito: marca, color, código, fecha, cuadrilla, fotos antes y después. Es tu casa, no es nuestro secreto.',
                en: 'Every time we touch your house — paint, drywall, patches — we write it down: brand, color, code, date, crew, before-and-after photos. It\u2019s your house. It\u2019s not our secret.'
              }, lang)}
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
              <a className="btn btn-primary">{t({ es: 'Pedir tu pasaporte →', en: 'Get your passport →' }, lang)}</a>
              <a className="btn btn-ghost">{t({ es: 'Ver ejemplo', en: 'See an example' }, lang)}</a>
            </div>
          </div>

          {/* a small "passport" card mock */}
          <div style={{
            background: 'var(--paper-cream)', border: '1px solid var(--divider)', padding: 22,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: 18, right: 18, transform: 'rotate(8deg)', border: '2px solid var(--olive)', color: 'var(--olive)', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.16em', padding: '3px 8px' }}>
              {t({ es: 'EMITIDO · OCT 16 2025', en: 'ISSUED · OCT 16 2025' }, lang)}
            </div>
            <div className="codex">DV · PROPERTY PASSPORT</div>
            <div className="display tab" style={{ fontSize: 18, margin: '6px 0 2px' }}>PP-2026-0431</div>
            <div style={{ fontSize: 13, color: 'var(--ink-muted)' }}>2418 Magnolia Ave, Riverside · 92506</div>
            <div className="rule" style={{ margin: '14px 0' }} />
            <dl style={{ margin: 0 }}>
              <div className="spec-row"><dt>{t({ es: 'PAREDES', en: 'WALLS' }, lang)}</dt><dd>SW · Cashmere · Alabaster · SW7008</dd></div>
              <div className="spec-row"><dt>{t({ es: 'RECÁMARA', en: 'BEDROOM' }, lang)}</dt><dd>SW · Cashmere · Repose Gray · SW7015</dd></div>
              <div className="spec-row"><dt>{t({ es: 'MOLDURAS', en: 'TRIM' }, lang)}</dt><dd>BM · Advance · Dec. White · OC-149</dd></div>
              <div className="spec-row"><dt>{t({ es: 'CUADRILLA', en: 'CREW' }, lang)}</dt><dd>Erick S. · Javier V. · Andrés M.</dd></div>
              <div className="spec-row"><dt>{t({ es: 'FOTOS', en: 'PHOTOS' }, lang)}</dt><dd>42 · {t({ es: '4 días', en: '4 days' }, lang)}</dd></div>
            </dl>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '56px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Qué guardamos · por ti', en: 'What we record · for you' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--divider)', marginTop: 12 }}>
            {[
              { c: '01', h: { es: 'Pinturas y códigos', en: 'Paints + codes' },        d: { es: 'Marca, línea, código exacto. Si quieres tocar un golpe en cinco años, ya sabes qué pedir.', en: 'Brand, line, exact code. Want to touch up a scuff in five years? You already know what to ask for.' } },
              { c: '02', h: { es: 'Fotos · antes y después', en: 'Photos · before / after' }, d: { es: 'Cada habitación, cada pared. Tomadas por el capataz, no por marketing.', en: 'Every room, every wall. Taken by the foreman, not by marketing.' } },
              { c: '03', h: { es: 'Daños encontrados',    en: 'Issues we found' },     d: { es: 'Humedad, drywall flojo, cualquier cosa. Lo decimos, con foto, aunque no podamos arreglarlo.', en: 'Moisture, loose drywall, anything else. We tell you, with a photo, even when we can\u2019t fix it.' } },
              { c: '04', h: { es: 'Materiales nombrados', en: 'Materials named' },      d: { es: 'Primer, masilla, herrajes. Lo que se usó en tu casa queda escrito.', en: 'Primer, caulk, hardware. Whatever went into the house gets written down.' } },
              { c: '05', h: { es: 'Garantía firmada',     en: 'Signed warranty' },     d: { es: 'Mano de obra a un año. Firmada con nombre, no con logo.', en: 'Workmanship at one year. Signed with a name — not a logo.' } },
              { c: '06', h: { es: 'Recordatorios suaves', en: 'Soft reminders' },      d: { es: 'A los cinco años te llegamos con un correo: "se ve cómo va." Cero presión.', en: 'At year five we drop you a quiet email: \u201chow\u2019s it holding up.\u201d No pressure.' } },
            ].map((b, i) => (
              <div key={i} style={{ borderRight: (i % 3) < 2 ? '1px solid var(--divider)' : 'none', borderBottom: '1px solid var(--divider)', padding: '20px 22px 24px' }}>
                <div className="codex" style={{ color: 'var(--terracotta)' }}>{b.c}</div>
                <div className="display" style={{ fontSize: 20, margin: '8px 0 8px' }}>{t(b.h, lang)}</div>
                <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.55, margin: 0 }}>{t(b.d, lang)}</p>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <div className="card" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, alignItems: 'center' }}>
            <div>
              <Eyebrow>{t({ es: 'Privacidad · clara', en: 'Privacy · plain' }, lang)}</Eyebrow>
              <p style={{ fontSize: 14.5, marginTop: 6, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
                {t({
                  es: 'El pasaporte es tuyo. Lo descargas en PDF cuando quieras. No lo vendemos a aseguradoras, no lo mandamos a tasadores sin tu permiso, no preguntamos por estatus migratorio.',
                  en: 'The passport is yours. Download a PDF anytime. We don\u2019t sell it to insurers, we don\u2019t share with appraisers without your okay, we don\u2019t ask about immigration status.'
                }, lang)}
              </p>
            </div>
            <Slot label="PASSPORT BINDER" sub="closed packet · cream paper" slotId="passport-binder" style={{ aspectRatio: '5 / 4' }} />
          </div>
        </section>

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

window.OrinovaPages3 = Object.assign(window.OrinovaPages3 || {}, { PropertyPassport });

/* ── HOME HEALTH MEMBERSHIP — recurring tiered plan ────────── */

function HomeHealthMembership() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = window.OrinovaAtoms;
  const tiers = [
    {
      code: 'TIER A · WALK',
      name: { es: 'Caminata anual', en: 'Annual walk' },
      price: '$390 / yr',
      monthly: '$32.50 / mo',
      accent: 'var(--ink-muted)',
      includes: [
        { es: 'Una visita al año · revisión completa de pintura y techos', en: 'One yearly visit · full paint + ceiling walk' },
        { es: 'Reporte escrito de hallazgos · con fotos',                   en: 'Written findings report · with photos' },
        { es: '10 % de descuento en obras pequeñas',                         en: '10 % off small fix-up jobs' },
        { es: 'Pasaporte de Casa actualizado',                                en: 'Property Passport updated' },
      ],
    },
    {
      code: 'TIER B · CARE',
      name: { es: 'Cuidado activo', en: 'Active care' },
      price: '$3,900 / yr',
      monthly: '$325 / mo',
      accent: 'var(--terracotta)',
      best: true,
      includes: [
        { es: 'Todo lo del Tier A',                                            en: 'Everything in Tier A' },
        { es: 'Hasta 16 horas de mano de obra al año · parchado y toques',    en: 'Up to 16 hours of labor a year · patching + touch-ups' },
        { es: 'Línea directa con tu capataz por WhatsApp',                       en: 'Direct WhatsApp line to your foreman' },
        { es: 'Prioridad en estimados y programación',                            en: 'Priority on estimates and scheduling' },
        { es: 'Pintura sobrante guardada en bodega · 5 años',                    en: 'Leftover paint kept on the shelf · 5 years' },
        { es: '15 % de descuento en obras grandes',                                en: '15 % off larger jobs' },
      ],
    },
    {
      code: 'TIER C · TRUST',
      name: { es: 'Casa entera', en: 'Whole house' },
      price: '$9,800 / yr',
      monthly: '$816 / mo',
      accent: 'var(--olive)',
      includes: [
        { es: 'Todo lo del Tier B',                                            en: 'Everything in Tier B' },
        { es: 'Hasta 60 horas de mano de obra · parchado, repintar, drywall menor', en: 'Up to 60 hours of labor · patching, repainting, minor drywall' },
        { es: 'Visita en sitio dos veces al año',                                en: 'On-site walk twice a year' },
        { es: 'Cobertura para una segunda propiedad (renta o casa de papás)',     en: 'Coverage for a second property (rental or parents\u2019 house)' },
        { es: 'Refresco gratis de un cuarto cada año',                            en: 'One room repaint free every year' },
        { es: '20 % de descuento en pre-venta',                                    en: '20 % off pre-sale refresh' },
      ],
    },
  ];
  return (
    <div className="page">
      <Nav active="services" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 36px 0' }}>
          <Eyebrow>DREAMVALLEY · {t({ es: 'cuidado de casa', en: 'home care' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 60, margin: '14px 0 14px', maxWidth: 880 }}>
            {t({
              es: 'Una vez al año no es mantenimiento. Es un susto programado.',
              en: 'Once-a-year isn\u2019t maintenance. It\u2019s a scheduled scare.'
            }, lang)}
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 720 }}>
            {t({
              es: 'La pintura no se gasta en un día. Se gasta poco a poco. La membresía te da una cuadrilla que conoce tu casa, regresa a ver, y trata los problemas pequeños antes de que sean grandes.',
              en: 'Paint doesn\u2019t wear out in a day. It wears out a little at a time. The membership gives you a crew that already knows your house, comes back to look, and fixes small things before they become big things.'
            }, lang)}
          </p>
        </section>

        <section style={{ maxWidth: 1180, margin: '32px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {tiers.map((tier, i) => (
            <div key={i} className="card" style={{
              padding: 26, display: 'flex', flexDirection: 'column', gap: 14,
              borderColor: tier.best ? tier.accent : 'var(--divider)',
              borderWidth: tier.best ? 2 : 1,
              background: tier.best ? 'var(--paper-form)' : 'var(--paper-elevated)',
              position: 'relative',
            }}>
              {tier.best && (
                <div style={{ position: 'absolute', top: -12, right: 18, background: tier.accent, color: 'var(--paper)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', padding: '4px 10px' }}>
                  {t({ es: 'MÁS PEDIDO', en: 'MOST CHOSEN' }, lang)}
                </div>
              )}
              <div className="codex" style={{ color: tier.accent }}>{tier.code}</div>
              <div className="display" style={{ fontSize: 28, margin: '2px 0' }}>{t(tier.name, lang)}</div>
              <div>
                <div className="display tab" style={{ fontSize: 36, color: tier.accent }}>{tier.price}</div>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{tier.monthly} · {t({ es: 'cobro mensual posible', en: 'monthly billing optional' }, lang)}</div>
              </div>
              <ul style={{ margin: '6px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.5, flex: 1 }}>
                {tier.includes.map((r, k) => (
                  <li key={k} style={{ padding: '7px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '18px 1fr', gap: 8 }}>
                    <span style={{ color: tier.accent }}>·</span>{t(r, lang)}
                  </li>
                ))}
              </ul>
              <a className="btn btn-primary" style={{ background: tier.accent, marginTop: 4 }}>
                {t({ es: 'Empezar membresía →', en: 'Start membership →' }, lang)}
              </a>
            </div>
          ))}
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <div className="card-quiet">
            <Eyebrow>{t({ es: 'Lo que no es', en: 'What it is not' }, lang)}</Eyebrow>
            <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)' }}>
              {[
                { es: 'No es un seguro. No reemplazamos lo que rompe el clima.',                            en: 'It\u2019s not insurance. We don\u2019t replace what weather breaks.' },
                { es: 'No es un contrato a tres años. Cancelas con 30 días de aviso.',                       en: 'It\u2019s not a three-year contract. Cancel with 30 days\u2019 notice.' },
                { es: 'No incluye reparaciones estructurales — fugas, techo, plomería. Te decimos a quién llamar.', en: 'It doesn\u2019t cover structural — leaks, roof, plumbing. We tell you who to call.' },
                { es: 'No cobramos por la visita anual si decides cancelar en los primeros 60 días.',         en: 'We don\u2019t charge for the first walk if you cancel within the first 60 days.' },
              ].map((r, i) => (
                <li key={i} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10 }}>
                  <span style={{ color: 'var(--ink-muted)' }}>×</span>{t(r, lang)}
                </li>
              ))}
            </ul>
          </div>
        </section>

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

window.OrinovaPages3 = Object.assign(window.OrinovaPages3 || {}, { HomeHealthMembership });

/* ── ROPE ACCESS — SPRAT specialty ─────────────────────────── */

function RopeAccessPage() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow, Slot } = window.OrinovaAtoms;
  return (
    <div className="page">
      <Nav active="services" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 36px 0', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 36, alignItems: 'end' }}>
          <div>
            <Eyebrow>SERVICE · 04 · DV·ROPE</Eyebrow>
            <h1 className="display" style={{ fontSize: 60, margin: '14px 0 12px', maxWidth: 600 }}>
              {t({
                es: 'Lo que otros no escalan, lo pintamos en cuerda.',
                en: 'What others won\u2019t climb, we paint on rope.'
              }, lang)}
            </h1>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 520 }}>
              {t({
                es: 'Fachadas escalonadas, traseros sobre barrancos, casas de dos y tres pisos donde la escalera no llega. Cuadrilla con certificación SPRAT nivel 1. Aseguranza nombrada en cuerda.',
                en: 'Step-back facades, back elevations over canyons, two- and three-story homes where a ladder doesn\u2019t reach. Crew is SPRAT Level 1 certified. Insurance names rope work explicitly.'
              }, lang)}
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
              <a className="btn btn-call">{t({ es: 'Pedir visita en sitio →', en: 'Request site walk →' }, lang)}</a>
              <a className="btn btn-ghost">{t({ es: 'Ver certificación SPRAT', en: 'See SPRAT certificate' }, lang)}</a>
            </div>
          </div>
          <Slot label="ROPE WORK" sub="rappel on tall facade · 4:5" slotId="rope-hero" style={{ aspectRatio: '4 / 5' }} />
        </section>

        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Para qué la usamos', en: 'What it\u2019s for' }, lang)}</Eyebrow>
          <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', borderTop: '1px solid var(--divider)' }}>
            {[
              { c: 'A', t: { es: 'Traseros sobre barranco · Riverside hills, RPV',  en: 'Back elevations over canyons · Riverside hills, RPV' },     d: { es: 'Sin andamio, sin pisar el jardín del vecino.', en: 'No scaffold, no stepping into the neighbor\u2019s yard.' } },
              { c: 'B', t: { es: 'Casas escalonadas a media pendiente',              en: 'Step-back homes on a hillside' },                            d: { es: 'Acceso desde arriba. Una sola plataforma de anclaje.', en: 'Access from above. One anchor platform.' } },
              { c: 'C', t: { es: 'Chimeneas altas · estuco arriba de los 8 m',        en: 'Tall chimneys · stucco above 25 ft' },                       d: { es: 'Lavado y pintura sin tocar el techo.',     en: 'Wash and paint without walking on the roof.' } },
              { c: 'D', t: { es: 'Comercial · letreros, fachadas de marcas',           en: 'Commercial · signage, brand facades' },                     d: { es: 'Cierre nocturno o de fin de semana, sin grúa.', en: 'Night or weekend close, no boom lift needed.' } },
            ].map((r, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '30px 1.2fr 1.5fr', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                <span className="codex" style={{ color: 'var(--terracotta)' }}>{r.c}</span>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{t(r.t, lang)}</div>
                <div style={{ fontSize: 13.5, color: 'var(--ink-soft)' }}>{t(r.d, lang)}</div>
              </li>
            ))}
          </ul>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div>
            <Eyebrow>{t({ es: 'Qué cuesta · honesto', en: 'What it costs · plain' }, lang)}</Eyebrow>
            <p style={{ fontSize: 13.5, color: 'var(--ink-muted)', marginTop: 6, maxWidth: 480 }}>
              {t({ es: 'Trabajo en cuerda es 40–60 % más caro que escalera. Es por riesgo, certificación y tiempo de montaje. No por mañas.', en: 'Rope work runs 40–60 % more than ladder work. That\u2019s risk, certification, and set-up time. Not a markup.' }, lang)}
            </p>
            <dl style={{ marginTop: 14 }}>
              <div className="spec-row"><dt>{t({ es: 'TRASERO · 2 PISOS', en: 'BACK · 2-STORY' }, lang)}</dt><dd className="tab">$4,200 – $6,800</dd></div>
              <div className="spec-row"><dt>{t({ es: 'TRASERO · 3 PISOS', en: 'BACK · 3-STORY' }, lang)}</dt><dd className="tab">$7,400 – $11,200</dd></div>
              <div className="spec-row"><dt>{t({ es: 'CHIMENEA ALTA',     en: 'TALL CHIMNEY' }, lang)}</dt><dd className="tab">$1,400 – $2,600</dd></div>
              <div className="spec-row"><dt>{t({ es: 'MONTAJE · TYPICAL', en: 'SET-UP · TYPICAL' }, lang)}</dt><dd>{t({ es: '½ día · día 1', en: '½ day · day 1' }, lang)}</dd></div>
            </dl>
          </div>
          <div className="card">
            <Eyebrow>{t({ es: 'Lo que firmamos', en: 'What we sign' }, lang)}</Eyebrow>
            <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none', fontSize: 13, color: 'var(--ink-soft)' }}>
              {[
                { es: 'Trabajo bajo SPRAT · nivel 1 mínimo en cuerda.',                  en: 'Work performed under SPRAT · Level 1 minimum on rope.' },
                { es: 'Aseguranza nombra trabajo en altura. COI bajo pedido.',           en: 'Insurance names at-height work. COI on request.' },
                { es: 'Anclajes inspeccionados antes de cargar — siempre.',                 en: 'Anchors inspected before loading — always.' },
                { es: 'Si el viento pasa de 20 mph, bajamos. Sin discusión.',                en: 'Above 20 mph wind, we come down. No argument.' },
                { es: 'Vecinos avisados antes. No bloqueamos su acera.',                     en: 'Neighbors notified ahead. We don\u2019t block their sidewalk.' },
              ].map((r, i) => (
                <li key={i} style={{ padding: '7px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10 }}>
                  <span style={{ color: 'var(--olive)' }}>·</span>{t(r, lang)}
                </li>
              ))}
            </ul>
          </div>
        </section>

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

window.OrinovaPages3 = Object.assign(window.OrinovaPages3 || {}, { RopeAccessPage });

/* ── REALTOR ALLIANCE — partner program (IE pre-sale) ─────── */

function RealtorAlliance() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = window.OrinovaAtoms;
  const partners = [
    { name: 'Castle Realty',         dre: 'DRE 02041907', city: 'Riverside',      pre: 14 },
    { name: 'Mission Real Estate',    dre: 'DRE 01988033', city: 'Riverside',      pre: 11 },
    { name: 'Inland Empire Homes',    dre: 'DRE 02144819', city: 'Moreno Valley',  pre: 9  },
    { name: 'Citrus Heritage Realty', dre: 'DRE 01876502', city: 'Corona',         pre: 7  },
    { name: 'Magnolia Group',          dre: 'DRE 02199174', city: 'Riverside',      pre: 6  },
  ];
  return (
    <div className="page">
      <Nav active="realtors" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 36px 0' }}>
          <Eyebrow>DREAMVALLEY · {t({ es: 'alianza de pre-venta', en: 'pre-sale alliance' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 56, margin: '14px 0 14px', maxWidth: 860 }}>
            {t({
              es: 'Cinco a diez agentes. Una cuadrilla que sabe cómo listar.',
              en: 'Five to ten agents. One crew that knows how to list.'
            }, lang)}
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 720 }}>
            {t({
              es: 'Programa cerrado, no abierto al público. Trabajamos directo con agentes del Inland Empire que mandan dos o más listings al año. Te asignamos un capataz fijo, una línea de WhatsApp y precios escritos por adelantado.',
              en: 'Closed program, not open to the public. We work directly with Inland Empire agents who send two or more listings a year. You get a dedicated foreman, a WhatsApp line, and pricing written up front.'
            }, lang)}
          </p>
        </section>

        <section style={{ maxWidth: 1100, margin: '28px auto 0', padding: '0 36px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--divider-strong)', borderBottom: '1px solid var(--divider-strong)' }}>
            {[
              { v: '5–10',   k: { es: 'AGENTES EN LA ALIANZA',  en: 'AGENTS IN ALLIANCE' } },
              { v: '5.2 d',  k: { es: 'PLAZO MEDIO DE OBRA',     en: 'AVG JOB DURATION' } },
              { v: '$0',     k: { es: 'TARIFA DE ENTRADA',         en: 'ENTRY FEE' } },
              { v: '90 d',   k: { es: 'EXCLUSIVA · SE PRUEBA',     en: 'EXCLUSIVITY · TRY-OUT' } },
            ].map((m, i) => (
              <div key={i} style={{ borderRight: i < 3 ? '1px solid var(--divider)' : 'none', padding: '16px 18px' }}>
                <div className="codex">{t(m.k, lang)}</div>
                <div className="display tab" style={{ fontSize: 30, marginTop: 6 }}>{m.v}</div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '32px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Lo que entra al paquete', en: 'What\u2019s in the package' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--divider)', marginTop: 12 }}>
            {[
              { c: '01', h: { es: 'Capataz dedicado',           en: 'Dedicated foreman' },           d: { es: 'El mismo nombre, la misma cara, cada listing. Erick S. para Riverside.', en: 'Same name, same face, every listing. Erick S. for Riverside.' } },
              { c: '02', h: { es: 'Precio escrito por adelantado', en: 'Pricing in writing up front' }, d: { es: 'Tabla por habitación, por cocina, por fachada. Sin sorpresas.',          en: 'Per-room, per-kitchen, per-facade table. No surprises.' } },
              { c: '03', h: { es: 'Pago al cierre',                en: 'Paid at close' },              d: { es: 'O al terminar — escoges tú. Sin pago inicial nunca.',                       en: 'Or on completion — your call. Never any deposit.' } },
              { c: '04', h: { es: 'Cinco a diez días',              en: 'Five to ten days' },           d: { es: 'Listo para listar. Foto profesional el día once.',                            en: 'List-ready. Pro photos by day eleven.' } },
              { c: '05', h: { es: 'Tu inquilino se queda',           en: 'Your tenant stays put' },      d: { es: 'Plástico limpio, enmascarado, sin huellas. Día tras día.',                   en: 'Clean plastic, masking, no footprints. Day after day.' } },
              { c: '06', h: { es: 'Reporte semanal',                en: 'Weekly status' },              d: { es: 'Lunes a las 8. Fotos, lo que falta, pago dónde está.',                       en: 'Mondays at 8. Photos, what\u2019s left, where payment sits.' } },
            ].map((b, i) => (
              <div key={i} style={{ borderRight: (i % 3) < 2 ? '1px solid var(--divider)' : 'none', borderBottom: '1px solid var(--divider)', padding: '20px 22px 24px' }}>
                <div className="codex" style={{ color: 'var(--terracotta)' }}>{b.c}</div>
                <div className="display" style={{ fontSize: 19, margin: '8px 0 8px' }}>{t(b.h, lang)}</div>
                <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.55, margin: 0 }}>{t(b.d, lang)}</p>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Agentes en la alianza · 2025', en: 'Agents in the alliance · 2025' }, lang)}</Eyebrow>
          <div style={{ marginTop: 12 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.4fr 1fr 90px 90px', gap: 12, padding: '8px 0', borderBottom: '1px solid var(--divider-strong)' }}>
              <div className="codex">{t({ es: 'AGENCIA', en: 'AGENCY' }, lang)}</div>
              <div className="codex">DRE</div>
              <div className="codex">{t({ es: 'CIUDAD', en: 'CITY' }, lang)}</div>
              <div className="codex" style={{ textAlign: 'right' }}>{t({ es: 'PRE-VENTAS', en: 'PRE-SALES' }, lang)}</div>
              <div className="codex" style={{ textAlign: 'right' }}>{t({ es: 'ESTADO', en: 'STATUS' }, lang)}</div>
            </div>
            {partners.map((p, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 1.4fr 1fr 90px 90px', gap: 12, padding: '13px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                <div style={{ fontSize: 14.5, fontWeight: 500 }}>{p.name}</div>
                <div className="codex">{p.dre}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{p.city}</div>
                <div className="tab" style={{ fontFamily: 'var(--mono)', fontSize: 14, textAlign: 'right' }}>{p.pre}</div>
                <div className="codex" style={{ textAlign: 'right', color: 'var(--olive)' }}>● {t({ es: 'activo', en: 'active' }, lang)}</div>
              </div>
            ))}
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.4fr 1fr 90px 90px', gap: 12, padding: '13px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline', background: 'var(--paper-cream)', marginLeft: -8, marginRight: -8, paddingLeft: 8, paddingRight: 8 }}>
              <div style={{ fontSize: 14.5, fontWeight: 500, color: 'var(--ink-muted)' }}>{t({ es: 'Tu agencia — espacio abierto', en: 'Your agency — open seat' }, lang)}</div>
              <div className="codex">DRE ____</div>
              <div style={{ fontSize: 13, color: 'var(--ink-muted)' }}>{t({ es: 'Inland Empire', en: 'Inland Empire' }, lang)}</div>
              <div className="tab" style={{ fontFamily: 'var(--mono)', fontSize: 14, textAlign: 'right' }}>—</div>
              <a className="codex" style={{ textAlign: 'right', cursor: 'pointer', color: 'var(--terracotta)' }}>{t({ es: 'aplicar →', en: 'apply →' }, lang)}</a>
            </div>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '32px auto 0', padding: '0 36px' }}>
          <div className="card" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 18, alignItems: 'center', background: 'var(--paper-cream)' }}>
            <div>
              <Eyebrow>{t({ es: 'Pedir entrada a la alianza', en: 'Apply to the alliance' }, lang)}</Eyebrow>
              <p style={{ fontSize: 14.5, marginTop: 6, color: 'var(--ink-soft)' }}>
                {t({
                  es: 'Mándanos tu DRE, tu ciudad y los próximos tres listings que tendrás. Te llamamos antes de fin de semana.',
                  en: 'Send your DRE, your city, and the next three listings on your roster. We call before the weekend.'
                }, lang)}
              </p>
            </div>
            <a className="btn btn-primary">{t({ es: 'Mandar aplicación →', en: 'Send application →' }, lang)}</a>
          </div>
        </section>

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

window.OrinovaPages3 = Object.assign(window.OrinovaPages3 || {}, { RealtorAlliance });

/* ── MULTILINGUAL WELCOME — language tile ─────────────────── */

function MultilingualWelcome() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = window.OrinovaAtoms;
  const langs = [
    { code: 'ES', native: 'Español',     hello: 'Bienvenidos a su casa.',          script: 'Latin',    note: { es: 'Nuestra cuadrilla habla español sin prisa.', en: 'Our crew speaks Spanish unrushed.' },           level: { es: 'completo · estimados y contratos', en: 'fluent · estimates and contracts' } },
      { code: 'EN', native: 'English',     hello: 'Welcome to your home.',           script: 'Latin',    note: { es: 'Estimados y contratos también en inglés.', en: 'Estimates and contracts also in English.' },     level: { es: 'completo', en: 'fluent' } },
      { code: 'PA', native: 'ਪੰਜਾਬੀ',     hello: 'ਤੁਹਾਡੇ ਘਰ ਵਿੱਚ ਸੁਆਗਤ ਹੈ।',           script: 'Gurmukhi', note: { es: 'Traducciones escritas para familias punjabi · Riverside.', en: 'Written translation for Punjabi families · Riverside.' }, level: { es: 'traducciones escritas', en: 'written translations' } },
      { code: 'HI', native: 'हिन्दी',       hello: 'आपके घर में स्वागत है।',                script: 'Devanagari', note: { es: 'Traducciones escritas y llamadas con intérprete.', en: 'Written translations and interpreter on calls.' }, level: { es: 'traducciones escritas', en: 'written translations' } },
      { code: 'TL', native: 'Tagalog',     hello: 'Maligayang pagdating sa inyong tahanan.', script: 'Latin', note: { es: 'Cuadrilla con dos hablantes nativos.',         en: 'Crew has two native speakers.' },           level: { es: 'hablado en obra', en: 'spoken on site' } },
      { code: 'VI', native: 'Tiếng Việt',   hello: 'Chào mừng đến nhà của bạn.',       script: 'Latin',    note: { es: 'Por contratar — buscando un hablante para 2026.', en: 'Hiring — looking for a speaker for 2026.' }, level: { es: 'por contratar', en: 'hiring' } },
  ];
  return (
    <div className="page">
      <Nav active="about" surface="orinova" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 36px 0' }}>
          <Eyebrow>ORINOVA · {t({ es: 'lenguas que hablamos', en: 'languages we speak' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 60, margin: '14px 0 14px', maxWidth: 860 }}>
            {t({
              es: 'No traducimos por encima. Traducimos por debajo — desde la cocina, no desde el correo.',
              en: 'We don\u2019t translate from the top. We translate from underneath — from the kitchen, not from email.'
            }, lang)}
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 720 }}>
            {t({
              es: 'En el Inland Empire vive el país entero. Si en tu casa se habla otra cosa que inglés, dínoslo. Conseguimos un capataz que entiende o una traducción escrita en tu lengua antes de firmar.',
              en: 'The Inland Empire is the whole country in one place. If something other than English is spoken in your home, tell us. We\u2019ll bring a foreman who understands — or written translation in your language before contract.'
            }, lang)}
          </p>
        </section>

        <section style={{ maxWidth: 1180, margin: '40px auto 0', padding: '0 36px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {langs.map((L) => (
              <div key={L.code} className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div className="codex">{L.native.toUpperCase()} · {L.code}</div>
                  <div className="codex" style={{ color: 'var(--ink-muted)' }}>{L.script}</div>
                </div>
                <div className="display" style={{ fontSize: L.script === 'Latin' ? 24 : 26, lineHeight: 1.2, margin: '4px 0', minHeight: 60 }}>
                  {L.hello}
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{t(L.note, lang)}</div>
                <div className="rule" style={{ margin: '6px 0' }} />
                <div className="codex" style={{ color: L.level.en.includes('fluent') || L.level.en.includes('on site') ? 'var(--olive)' : (L.level.en.includes('hiring') ? 'var(--ink-muted)' : 'var(--terracotta)') }}>
                  ● {t(L.level, lang)}
                </div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <div className="card" style={{ background: 'var(--paper-cream)' }}>
            <Eyebrow>{t({ es: 'Cómo funciona en la práctica', en: 'How it works in practice' }, lang)}</Eyebrow>
            <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
              {[
                { es: 'Llamas. Si Lourdes O. no habla tu lengua, te conecta con alguien que sí — o agenda una visita con intérprete.',                  en: 'You call. If Lourdes O. doesn\u2019t speak your language, she connects you with someone who does — or schedules an interpreter site walk.' },
                { es: 'Estimado escrito en dos columnas: inglés a la derecha, tu lengua a la izquierda. Ambas firmadas.',                                en: 'Written estimate in two columns: English on the right, your language on the left. Both signed.' },
                { es: 'Si la lengua usa otro alfabeto, te mandamos también el contrato impreso para que lo lean a mano los de la casa.',                  en: 'If your language uses another script, we also print the contract so the elders in the house can read it on paper.' },
                { es: 'Nunca preguntamos por estatus migratorio. Nunca lo guardamos. Tu casa nos importa; tus papeles no nos importan.',                    en: 'We never ask about immigration status. We never store it. We care about your house; not about your papers.' },
              ].map((r, i) => (
                <li key={i} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10 }}>
                  <span style={{ color: 'var(--olive)' }}>·</span>{t(r, lang)}
                </li>
              ))}
            </ul>
          </div>
        </section>

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

window.OrinovaPages3 = Object.assign(window.OrinovaPages3 || {}, { MultilingualWelcome });

/* ── CASE STUDY — Rancho Palos Verdes, Dunn-Edwards exclusive ─ */

function CaseStudyPalosVerdes() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow, Slot } = window.OrinovaAtoms;
  const palette = [
    { code: 'DE6213', name: 'Quiet Rain',         hex: '#cdcabb', use: { es: 'cuerpo · stucco',     en: 'body · stucco' } },
    { code: 'DET649', name: 'Cliff Rock',         hex: '#74695c', use: { es: 'acento · molduras',   en: 'accent · trim' } },
    { code: 'DEW380', name: 'Whisper',            hex: '#efeae0', use: { es: 'corniza · alero',     en: 'fascia · soffit' } },
    { code: 'DEA158', name: 'Black Bean',         hex: '#1f1c19', use: { es: 'puertas · portón',     en: 'doors · gate' } },
    { code: 'DEC713', name: 'Coastal Trail',      hex: '#92886f', use: { es: 'reja · cerca',         en: 'railing · fence' } },
  ];
  return (
    <div className="page">
      <Nav active="services" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '36px 36px 0' }}>
          <div className="codex" style={{ color: 'var(--ink-muted)' }}>
            <a style={{ color: 'inherit', textDecoration: 'none' }}>{t({ es: 'Estudios de obra', en: 'Case studies' }, lang)}</a> &nbsp;/&nbsp; CS-2025-RPV-01
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 36, marginTop: 14, alignItems: 'end' }}>
            <div>
              <Eyebrow>CASE STUDY · CS · 2025 · RPV · 01</Eyebrow>
              <h1 className="display" style={{ fontSize: 56, margin: '12px 0 12px', maxWidth: 640 }}>
                {t({
                  es: 'Una casa en la costa, cinco colores escogidos a mano.',
                  en: 'A coastal house, five colors picked by hand.'
                }, lang)}
              </h1>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 540 }}>
                {t({
                  es: 'Estudio de color para una casa en Rancho Palos Verdes, sobre el barranco al mar. Paleta exclusiva Dunn-Edwards. Cumple con BPC §7159 — la ley de contratos de mejora del hogar de California — antes de firmar.',
                  en: 'Color study for a Rancho Palos Verdes home perched on the ocean bluff. Dunn-Edwards exclusive palette. Fully compliant with California BPC §7159 — the home-improvement contract statute — before contract.'
                }, lang)}
              </p>
            </div>
            <Slot label="HOUSE · BEFORE" sub="elevation · sunlight · 4:3" slotId="rpv-before" style={{ aspectRatio: '4 / 3' }} />
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Paleta · Dunn-Edwards exclusiva', en: 'Palette · Dunn-Edwards exclusive' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, marginTop: 14 }}>
            {palette.map((c, i) => (
              <div key={i} style={{ border: '1px solid var(--divider)', background: 'var(--paper-form)' }}>
                <div style={{ height: 140, background: c.hex }} />
                <div style={{ padding: '12px 14px 14px' }}>
                  <div className="codex tab">{c.code}</div>
                  <div className="display" style={{ fontSize: 16, margin: '4px 0 2px' }}>{c.name}</div>
                  <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t(c.use, lang)}</div>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <div>
            <Eyebrow>{t({ es: 'Lo que se hizo', en: 'What was done' }, lang)}</Eyebrow>
            <dl style={{ marginTop: 12 }}>
              <div className="spec-row"><dt>{t({ es: 'ÁREA · CUERPO', en: 'AREA · BODY' }, lang)}</dt><dd className="tab">3,840 sq ft</dd></div>
              <div className="spec-row"><dt>{t({ es: 'ÁREA · MOLDURAS', en: 'AREA · TRIM' }, lang)}</dt><dd className="tab">410 sq ft</dd></div>
              <div className="spec-row"><dt>{t({ es: 'PLAZO',     en: 'DURATION' }, lang)}</dt><dd>{t({ es: '9 días laborables', en: '9 working days' }, lang)}</dd></div>
              <div className="spec-row"><dt>{t({ es: 'ACCESO',     en: 'ACCESS' }, lang)}</dt><dd>{t({ es: 'mixto · escalera + cuerda (SPRAT)', en: 'mixed · ladder + rope (SPRAT)' }, lang)}</dd></div>
              <div className="spec-row"><dt>{t({ es: 'PINTURA',    en: 'PAINT' }, lang)}</dt><dd>Dunn-Edwards Evershield · 2 coats</dd></div>
              <div className="spec-row"><dt>BPC §7159</dt><dd>{t({ es: 'contrato bilingüe firmado · garantía 1 año', en: 'bilingual contract signed · 1-yr warranty' }, lang)}</dd></div>
              <div className="spec-row"><dt>TOTAL</dt><dd className="tab" style={{ color: 'var(--olive)' }}>$18,420</dd></div>
            </dl>
          </div>
          <div>
            <Eyebrow>{t({ es: 'Notas del estudio', en: 'Study notes' }, lang)}</Eyebrow>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', marginTop: 8, fontStyle: 'italic' }}>
              {t({
                es: '"Probamos seis pares antes de firmar. La luz de la costa cambia mucho entre 7 a.m. y 4 p.m. — pintamos un cuadro de prueba en la pared sur y otro en la pared este. Quiet Rain ganó porque a las 3 de la tarde, contra el cielo, no se ve gris muerto."',
                en: '"We tested six pairs before signing. The coastal light shifts hard between 7 a.m. and 4 p.m. — we painted a sample on the south wall and another on the east wall. Quiet Rain won because at 3 p.m., against the sky, it doesn\u2019t go dead-gray."'
              }, lang)}
            </p>
            <div className="codex" style={{ marginTop: 12, color: 'var(--ink-muted)' }}>ERICK S. · FOREMAN · OCT 2025</div>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Hoja de obra', en: 'Job sheet' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginTop: 12 }}>
            {[
              { es: 'Antes · fachada sur',    en: 'Before · south face' },
              { es: 'Cuerda · trasero',       en: 'Rope · back face' },
              { es: 'Después · cuerpo',       en: 'After · body' },
              { es: 'Después · portón negro', en: 'After · black gate' },
            ].map((p, i) => (
              <div key={i}>
                <Slot label={'RPV ' + String(i + 1).padStart(2, '0')} sub={t(p, lang)} slotId={'rpv-cs-' + (i + 1)} style={{ aspectRatio: '4 / 3' }} />
                <div className="codex" style={{ marginTop: 6, color: 'var(--ink-muted)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--sans)', fontSize: 12 }}>{t(p, lang)}</div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <div className="card-quiet">
            <Eyebrow>{t({ es: 'Lo que firmamos · BPC §7159', en: 'What we sign · BPC §7159' }, lang)}</Eyebrow>
            <p style={{ fontSize: 12.5, color: 'var(--ink-muted)', lineHeight: 1.6, marginTop: 6, maxWidth: 780 }}>
              {t({
                es: 'Trabajo bajo licencia ejecutado por contratista CSLB nombrado. Contrato cumple Business & Professions Code §7159 — incluye descripción, plazo, calendario de pago, derechos de cancelación de tres días y aviso del Mechanics Lien Law. Paleta Dunn-Edwards seleccionada del muestrario sin límite de carta. Garantía de mano de obra: 1 año desde la entrega.',
                en: 'Licensed work performed by a named CSLB contractor. Contract meets California Business & Professions Code §7159 — includes description, schedule, payment timeline, three-day cancellation rights, and Mechanics Lien Law notice. Dunn-Edwards palette selected from the full deck, no card restriction. Workmanship warranty: 1 year from handover.'
              }, lang)}
            </p>
          </div>
        </section>

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

window.OrinovaPages3 = Object.assign(window.OrinovaPages3 || {}, { CaseStudyPalosVerdes });
