/* Orinova Portal — pages4.jsx
   Service surface continued:
     · ServiceExteriorPaint — companion to interior service detail
     · ColorStudio          — paint chip consultation page
     · WarrantyDocument     — printable workmanship warranty
*/

const { Nav, Foot, Eyebrow, Slot } = window.OrinovaAtoms;

/* ── SERVICE · Exterior Paint ─────────────────────────────── */

function ServiceExteriorPaint() {
  const t = window.t;
  const { lang } = window.useLang();
  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: 'Servicios', en: 'Services' }, lang)}</a> &nbsp;/&nbsp; {t({ es: 'Pintura exterior', en: 'Exterior paint' }, lang)}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 36, marginTop: 14, alignItems: 'start' }}>
            <div>
              <Eyebrow>SERVICE · 02 · DV·PAINT·EXT</Eyebrow>
              <h1 className="display" style={{ fontSize: 56, margin: '12px 0 12px' }}>
                {t({ es: 'Pintura exterior.', en: 'Exterior paint.' }, lang)}
              </h1>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 540 }}>
                {t({
                  es: 'Estuco, madera, fascia, eaves. Lavado a presión, parchado del estuco, sellado, dos manos. Ventana de clima en el estimado.',
                  en: 'Stucco, wood, fascia, eaves. Pressure wash, stucco patch, seal, two coats. Weather window written into the estimate.'
                }, lang)}
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
                <a className="btn btn-call">{t({ es: 'Pedir estimado →', en: 'Request estimate →' }, lang)}</a>
                <a className="btn btn-ghost">{t({ es: 'Ver fotos', en: 'See photos' }, lang)}</a>
              </div>
            </div>
            <Slot label="SERVICE HERO" sub="stucco home · 4:3" slotId="service-paint-ext-hero" style={{ aspectRatio: '4 / 3' }} />
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Proceso de cinco pasos', en: 'Five-step process' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, borderTop: '1px solid var(--divider)', marginTop: 12 }}>
            {[
              { code: '01', t: { es: 'Lavado',    en: 'Wash' },    d: { es: '2,500 PSI, deja secar 24h.', en: '2,500 PSI, dry 24h.' } },
              { code: '02', t: { es: 'Parchado',  en: 'Patch' },   d: { es: 'Estuco, madera podrida hasta 2 sq ft.', en: 'Stucco, rotten wood up to 2 sq ft.' } },
              { code: '03', t: { es: 'Sellado',   en: 'Seal' },    d: { es: 'Grietas, juntas, alrededor de ventanas.', en: 'Cracks, joints, around windows.' } },
              { code: '04', t: { es: 'Pintura',   en: 'Paint' },   d: { es: 'Dos manos, fascia y eaves incluidos.', en: 'Two coats, fascia and eaves included.' } },
              { code: '05', t: { es: 'Caminata',  en: 'Walk-out' },d: { es: 'Caminamos contigo. Si falta algo, lo arreglamos.', en: 'We walk with you. Anything missed, we fix.' } },
            ].map((b, i) => (
              <div key={i} style={{ borderRight: i < 4 ? '1px solid var(--divider)' : 'none', borderBottom: '1px solid var(--divider)', padding: '16px 14px 18px' }}>
                <div className="codex" style={{ color: 'var(--terracotta)' }}>{b.code}</div>
                <div className="display" style={{ fontSize: 18, margin: '8px 0 6px' }}>{t(b.t, lang)}</div>
                <p style={{ fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.5, margin: 0 }}>{t(b.d, lang)}</p>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 32, alignItems: 'start' }}>
          <div>
            <Eyebrow>{t({ es: 'Rangos típicos', en: 'Typical ranges' }, lang)}</Eyebrow>
            <p style={{ fontSize: 13.5, color: 'var(--ink-muted)', maxWidth: 480, lineHeight: 1.55, marginTop: 6 }}>
              {t({
                es: 'Casas reales del Inland Empire. Tu estimado real cambia con el tamaño, la altura y el estado del estuco.',
                en: 'Real Inland Empire homes. Your real estimate moves with size, height, and stucco condition.'
              }, lang)}
            </p>
            <dl style={{ marginTop: 14 }}>
              <div className="spec-row"><dt>{t({ es: 'CASA 1 PISO · 1,400sf', en: 'SINGLE-STORY · 1,400sf' }, lang)}</dt><dd className="tab">$3,200 – $4,800</dd></div>
              <div className="spec-row"><dt>{t({ es: 'CASA 2 PISOS · 2,400sf', en: 'TWO-STORY · 2,400sf' }, lang)}</dt><dd className="tab">$5,400 – $8,200</dd></div>
              <div className="spec-row"><dt>{t({ es: 'CASA GRANDE · 3,800sf+', en: 'LARGE HOME · 3,800sf+' }, lang)}</dt><dd className="tab">$9,800 – $14,500</dd></div>
              <div className="spec-row"><dt>{t({ es: 'PLAZO TÍPICO', en: 'TYPICAL DURATION' }, lang)}</dt><dd>{t({ es: '3–7 días según clima', en: '3–7 days by weather' }, lang)}</dd></div>
            </dl>
          </div>
          <div className="card">
            <Eyebrow>{t({ es: 'Ventana de clima', en: 'Weather window' }, lang)}</Eyebrow>
            <p style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.6, marginTop: 10 }}>
              {t({
                es: 'No pintamos exterior bajo 50°F, sobre 95°F, ni dentro de las 24h después de lluvia. Si el clima cambia, te avisamos el día anterior y movemos la fecha sin cargo.',
                en: 'We don\u2019t paint exterior under 50°F, over 95°F, or within 24h of rain. If weather turns, we call the day before and reschedule at no charge.'
              }, lang)}
            </p>
            <div className="rule rule-strong" style={{ margin: '14px 0' }} />
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'Garantía de mano de obra', en: 'Workmanship warranty' }, lang)}</div>
            <div className="display" style={{ fontSize: 28, marginTop: 6 }}>3 {t({ es: 'años', en: 'years' }, lang)}</div>
            <div className="codex" style={{ marginTop: 4, color: 'var(--ink-muted)' }}>{t({ es: 'transferible al siguiente dueño', en: 'transferable to next owner' }, lang)}</div>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Trabajos recientes', en: 'Recent work' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginTop: 12 }}>
            {[
              { es: 'Riverside · estuco crema', en: 'Riverside · cream stucco' },
              { es: 'Corona · adobe',           en: 'Corona · adobe' },
              { es: 'Norco · rancho blanco',    en: 'Norco · white ranch' },
              { es: 'Eastvale · gris cálido',   en: 'Eastvale · warm gray' },
            ].map((p, i) => (
              <div key={i}>
                <Slot label={'WORK ' + String(i + 1).padStart(2, '0')} sub={t(p, lang)} slotId={'service-paint-ext-' + (i + 1)} style={{ aspectRatio: '4 / 3' }} />
                <div style={{ marginTop: 6, color: 'var(--ink-muted)', fontFamily: 'var(--sans)', fontSize: 12 }}>{t(p, lang)}</div>
              </div>
            ))}
          </div>
        </section>

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

/* ── COLOR STUDIO — paint chip consultation ───────────────── */

const CHIPS = [
  { name: 'Bone',           code: 'DE6213', hex: '#EFE6D2', family: 'warm-white' },
  { name: 'Linen',          code: 'DE6196', hex: '#E4D6B7', family: 'warm-white' },
  { name: 'Sand Trail',     code: 'DE6135', hex: '#D7BF95', family: 'sand' },
  { name: 'Adobe',          code: 'DE6111', hex: '#B5895C', family: 'sand' },
  { name: 'Riverbed',       code: 'DE6371', hex: '#8A7A66', family: 'earth' },
  { name: 'Cinder',         code: 'DE6385', hex: '#5C544A', family: 'earth' },
  { name: 'Slate',          code: 'DE6310', hex: '#3F4348', family: 'cool' },
  { name: 'Olive Branch',   code: 'DE5572', hex: '#5C6240', family: 'cool' },
  { name: 'Sage',           code: 'DE5605', hex: '#A6AC8A', family: 'cool' },
  { name: 'Cream',          code: 'DE6200', hex: '#F2EAD3', family: 'warm-white' },
  { name: 'Pale Quartz',    code: 'DE6219', hex: '#E0D8C8', family: 'cool' },
  { name: 'Terra Cotta',    code: 'DE5215', hex: '#B25C42', family: 'accent' },
];

function ColorStudio() {
  const t = window.t;
  const { lang } = window.useLang();
  const [picked, setPicked] = React.useState(['Bone', 'Riverbed', 'Olive Branch']);

  const toggle = (n) => setPicked(p =>
    p.includes(n) ? p.filter(x => x !== n) : (p.length >= 3 ? [p[1], p[2], n] : [...p, n])
  );

  const pickedChips = picked.map(n => CHIPS.find(c => c.name === n)).filter(Boolean);

  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>STUDIO · 01 · DV·COLOR</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 36, marginTop: 12, alignItems: 'end' }}>
            <h1 className="display" style={{ fontSize: 60, margin: 0, maxWidth: 720 }}>
              {t({ es: 'Escoge tres. Te llevamos muestras a la casa.', en: 'Pick three. We bring sample boards to the house.' }, lang)}
            </h1>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0 }}>
              {t({
                es: 'Dunn-Edwards exclusivo. Pintamos 2×2 ft de cada color en una placa de cartón, la dejamos en tu sala 48 horas para que la veas con tu luz.',
                en: 'Dunn-Edwards exclusive. We paint 2×2 ft of each color on a foam-core board and leave it in your living room for 48 hours so you see it in your light.'
              }, lang)}
            </p>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '32px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Paleta · doce favoritos del Inland Empire', en: 'Palette · twelve Inland Empire favorites' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12, marginTop: 14 }}>
            {CHIPS.map((c) => {
              const on = picked.includes(c.name);
              return (
                <button key={c.code} onClick={() => toggle(c.name)} style={{
                  textAlign: 'left', cursor: 'pointer',
                  background: 'transparent', border: 0, padding: 0,
                }}>
                  <div style={{
                    height: 110, background: c.hex,
                    border: on ? '2px solid var(--ink)' : '1px solid var(--divider)',
                    outline: on ? '4px solid var(--paper)' : 'none',
                    boxShadow: on ? '0 0 0 5px var(--ink)' : 'none',
                    position: 'relative',
                  }}>
                    {on && <span style={{
                      position: 'absolute', top: 6, right: 8,
                      fontFamily: 'var(--mono)', fontSize: 10, color: '#fff',
                      background: 'var(--ink)', padding: '2px 6px', letterSpacing: '0.16em'
                    }}>{picked.indexOf(c.name) + 1}/3</span>}
                  </div>
                  <div style={{ marginTop: 8, fontFamily: 'var(--serif)', fontSize: 14, fontWeight: 500 }}>{c.name}</div>
                  <div className="codex" style={{ marginTop: 2 }}>{c.code}</div>
                </button>
              );
            })}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 32, alignItems: 'start' }}>
          <div>
            <Eyebrow>{t({ es: 'Tu selección', en: 'Your selection' }, lang)}</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginTop: 12 }}>
              {[0,1,2].map(i => {
                const c = pickedChips[i];
                return (
                  <div key={i} style={{ border: '1px solid var(--divider)', background: 'var(--paper-elevated)' }}>
                    <div style={{ height: 90, background: c ? c.hex : 'var(--paper-cream)' }} />
                    <div style={{ padding: '10px 12px 12px' }}>
                      <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'MUESTRA', en: 'SAMPLE' }, lang)} · {String(i+1).padStart(2,'0')}</div>
                      <div style={{ fontFamily: 'var(--serif)', fontSize: 16, marginTop: 4 }}>{c ? c.name : t({ es: '— vacío —', en: '— empty —' }, lang)}</div>
                      <div className="codex" style={{ marginTop: 2 }}>{c ? c.code : '··· ····'}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="card">
            <Eyebrow>{t({ es: 'Siguiente paso', en: 'Next step' }, lang)}</Eyebrow>
            <div className="display" style={{ fontSize: 22, margin: '8px 0 6px' }}>
              {t({ es: 'Muestras pintadas en tu casa', en: 'Painted samples at your home' }, lang)}
            </div>
            <p style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.6, margin: '8px 0 14px' }}>
              {t({
                es: 'Sin costo si nos contratas. $75 si decides no seguir — se descuenta de cualquier estimado futuro.',
                en: 'Free if you book the job. $75 if you decide not to proceed — credited toward any future estimate.'
              }, lang)}
            </p>
            <a className="btn btn-call" style={{ width: '100%' }}>
              {t({ es: 'Agendar visita →', en: 'Schedule the visit →' }, lang)}
            </a>
            <div className="codex" style={{ marginTop: 10, color: 'var(--ink-muted)' }}>
              {t({ es: 'visita típica · 30 min', en: 'typical visit · 30 min' }, lang)}
            </div>
          </div>
        </section>

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

/* ── WARRANTY DOCUMENT — printable workmanship warranty ───── */

function WarrantyDocument() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page" style={{ background: 'var(--paper-form)' }}>
      <div className="page-scroll hide-scroll">
        <div style={{ maxWidth: 760, margin: '0 auto', padding: '42px 56px 56px', fontFamily: 'var(--sans)', color: 'var(--ink)' }}>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'baseline', borderBottom: '1px solid var(--ink)', paddingBottom: 14 }}>
            <div>
              <div className="brand-mark" style={{ fontSize: 22 }}>DreamValley</div>
              <div className="brand-sub">TRADE SOLUTIONS · A DIVISION OF ORINOVA</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="codex">DV · DOC · WARRANTY · 03</div>
              <div className="codex" style={{ color: 'var(--ink-muted)', marginTop: 4 }}>CSLB #1098432 · BONDED · INSURED</div>
            </div>
          </div>

          <div style={{ marginTop: 32 }}>
            <Eyebrow>{t({ es: 'GARANTÍA DE MANO DE OBRA', en: 'WORKMANSHIP WARRANTY' }, lang)}</Eyebrow>
            <h1 className="display" style={{ fontSize: 44, margin: '10px 0 8px' }}>
              {t({ es: 'Lo que respaldamos.', en: 'What we stand behind.' }, lang)}
            </h1>
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>
              {t({ es: 'EMITIDA AL CIERRE DE OBRA · TRANSFERIBLE UNA VEZ', en: 'ISSUED AT JOB CLOSE · TRANSFERABLE ONCE' }, lang)}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 28 }}>
            <div className="card-quiet">
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'TRABAJO', en: 'JOB' }, lang)}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 4 }}>DV-0431</div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>1428 Magnolia Ave · Riverside</div>
            </div>
            <div className="card-quiet" style={{ textAlign: 'right' }}>
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'CIERRE', en: 'CLOSED' }, lang)}</div>
              <div className="tab" style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 4 }}>11 MAR 2026</div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>{t({ es: 'fin de garantía · 11 mar 2029', en: 'expires · 11 mar 2029' }, lang)}</div>
            </div>
          </div>

          <div style={{ marginTop: 36 }}>
            <Eyebrow>{t({ es: 'Cubierto · 3 años', en: 'Covered · 3 years' }, lang)}</Eyebrow>
            <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none' }}>
              {[
                { es: 'Pelado, ampollas o desprendimiento de la pintura aplicada por nuestra cuadrilla.', en: 'Peeling, blistering, or detachment of paint applied by our crew.' },
                { es: 'Fallas de adherencia en estuco preparado y sellado por nosotros.', en: 'Adhesion failure on stucco we prepped and sealed.' },
                { es: 'Sangrado de manchas a través de primer que aplicamos.', en: 'Stain bleed-through on primer we applied.' },
                { es: 'Defectos visibles del acabado bajo luz natural a 6 pies de distancia.', en: 'Finish defects visible in natural light at 6 ft.' },
              ].map((r, i) => (
                <li key={i} style={{ padding: '12px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12, fontSize: 13.5 }}>
                  <span className="codex" style={{ color: 'var(--terracotta)' }}>{String(i+1).padStart(2,'0')}</span>
                  <span style={{ color: 'var(--ink-soft)', lineHeight: 1.55 }}>{t(r, lang)}</span>
                </li>
              ))}
            </ul>
          </div>

          <div style={{ marginTop: 32 }}>
            <Eyebrow>{t({ es: 'No cubierto', en: 'Not covered' }, lang)}</Eyebrow>
            <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none' }}>
              {[
                { es: 'Daño por agua del techo, fontanería o riego — el origen va aparte.', en: 'Water damage from roof, plumbing, or irrigation — source is separate.' },
                { es: 'Movimiento estructural, asentamiento o grietas nuevas en cimientos.', en: 'Structural movement, settling, or new foundation cracks.' },
                { es: 'Daño físico — rayones, golpes, mascotas, mudanzas.', en: 'Physical damage — scratches, dents, pets, moving in/out.' },
                { es: 'Decoloración por sol más allá del rango normal del fabricante.', en: 'Sun fade beyond the manufacturer\u2019s normal range.' },
              ].map((r, i) => (
                <li key={i} style={{ padding: '12px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12, fontSize: 13.5 }}>
                  <span style={{ color: 'var(--ink-muted)' }}>×</span>
                  <span style={{ color: 'var(--ink-soft)', lineHeight: 1.55 }}>{t(r, lang)}</span>
                </li>
              ))}
            </ul>
          </div>

          <div style={{ marginTop: 32 }}>
            <Eyebrow>{t({ es: 'Cómo hacer un reclamo', en: 'How to make a claim' }, lang)}</Eyebrow>
            <p style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.65, marginTop: 8 }}>
              {t({
                es: 'Llama o escribe. Mandamos a un foreman a inspeccionar dentro de 7 días hábiles. Si el defecto cae bajo esta garantía, lo arreglamos sin costo — pintura, mano de obra, limpieza. No te cobramos visita.',
                en: 'Call or write. A foreman inspects within 7 business days. If the defect falls under this warranty, we fix it at no cost — paint, labor, clean-up. No trip charge.'
              }, lang)}
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 14 }}>
              <div className="card-quiet">
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'LLAMA', en: 'CALL' }, lang)}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4 }}>(951) 555-0148</div>
              </div>
              <div className="card-quiet" style={{ textAlign: 'right' }}>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'ESCRIBE', en: 'WRITE' }, lang)}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 4 }}>warranty@dreamvalley.trade</div>
              </div>
            </div>
          </div>

          <div style={{ marginTop: 44, paddingTop: 18, borderTop: '1px solid var(--ink)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
            <div>
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'FIRMADO POR LA CASA', en: 'SIGNED FOR THE HOUSE' }, lang)}</div>
              <div style={{ height: 28, borderBottom: '1px solid var(--ink-muted)', marginTop: 18 }} />
              <div style={{ fontFamily: 'var(--serif)', fontSize: 15, marginTop: 6 }}>Erick R. · {t({ es: 'fundador', en: 'founder' }, lang)}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'RECIBIDO POR EL CLIENTE', en: 'RECEIVED BY OWNER' }, lang)}</div>
              <div style={{ height: 28, borderBottom: '1px solid var(--ink-muted)', marginTop: 18 }} />
              <div style={{ fontFamily: 'var(--serif)', fontSize: 15, marginTop: 6, color: 'var(--ink-muted)', fontStyle: 'italic' }}>{t({ es: 'firma del propietario', en: 'owner signature' }, lang)}</div>
            </div>
          </div>

          <div className="codex" style={{ marginTop: 36, color: 'var(--ink-muted)' }}>
            DV · WARRANTY · DV-0431 · MMXXVI · {t({ es: 'PÁGINA 1 DE 1', en: 'PAGE 1 OF 1' }, lang)}
          </div>
        </div>
      </div>
    </div>
  );
}

window.OrinovaPages4 = {
  ServiceExteriorPaint,
  ColorStudio,
  WarrantyDocument,
};