/* Orinova Portal — pages2.jsx
   Additional surfaces that round out the system:
     · ServiceCabinets    — specialty service detail
     · CareersPage        — landing for "Apply" CTA
     · InvoiceDocument    — paper companion to EstimateDocument
     · MobileEstimateStep3 — finishes the 3-step mobile flow
     · ReviewsPage        — testimonials
     · ForemanJobSheet    — internal single-job view for the foreman

   All atoms re-used from window (Nav, Foot, Eyebrow, LangPill, Slot).
*/

/* ── SERVICE · Cabinets (specialty paint) ──────────────────── */

function ServiceCabinets() {
  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: '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: 'Gabinetes', en: 'Cabinets' }, lang)}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 36, marginTop: 14, alignItems: 'start' }}>
            <div>
              <Eyebrow>SERVICE · 02 · DV·PAINT·CAB</Eyebrow>
              <h1 className="display" style={{ fontSize: 56, margin: '12px 0 12px' }}>
                {t({ es: 'Gabinetes, terminado de mueble.', en: 'Cabinets, furniture-grade finish.' }, lang)}
              </h1>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 540 }}>
                {t({
                  es: 'Lo que más nos piden. Quitamos puertas, lijamos a mano, espray fino bajo cabina. Cinco a siete días. Tu cocina queda como mueble nuevo.',
                  en: 'What we get asked for most. Doors come off, hand-sanded, fine-sprayed in a booth. Five to seven days. Your kitchen looks like new furniture.'
                }, 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="CABINET HERO" sub="finished kitchen · 4:3" slotId="service-cab-hero" style={{ aspectRatio: '4 / 3' }} />
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Pasos · siete días', en: 'Process · seven days' }, lang)}</Eyebrow>
          <ol style={{ marginTop: 12, padding: 0, listStyle: 'none', borderTop: '1px solid var(--divider)' }}>
            {[
              { n: '1', d: { es: 'LUN — Etiquetar y quitar puertas, cajones, jaladeras.', en: 'MON — Label and remove doors, drawers, hardware.' } },
              { n: '2', d: { es: 'MAR — Lijar a mano, desengrasar, primer adherente.',     en: 'MON eve / TUE — Hand-sand, degrease, bonding primer.' } },
              { n: '3', d: { es: 'MIÉ — Primera mano, espray fino bajo cabina.',           en: 'WED — First coat, fine spray inside the booth.' } },
              { n: '4', d: { es: 'JUE — Lijar entre manos, segunda mano.',                  en: 'THU — Sand between coats, second coat.' } },
              { n: '5', d: { es: 'VIE — Esmaltado · curado al sol.',                         en: 'FRI — Topcoat · sun-cure.' } },
              { n: '6', d: { es: 'LUN — Re-instalar puertas, ajustar bisagras.',             en: 'MON — Re-hang doors, adjust hinges.' } },
              { n: '7', d: { es: 'MAR — Limpieza final, revisión contigo.',                  en: 'TUE — Final clean, walk-through with you.' } },
            ].map((s, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 14, padding: '12px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                <div className="display" style={{ fontSize: 24, color: 'var(--terracotta)', lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontSize: 14.5 }}>{t(s.d, lang)}</div>
              </li>
            ))}
          </ol>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <div>
            <Eyebrow>{t({ es: 'Rangos típicos', en: 'Typical ranges' }, lang)}</Eyebrow>
            <dl style={{ marginTop: 14 }}>
              <div className="spec-row"><dt>{t({ es: '10 PUERTAS', en: '10 DOORS' }, lang)}</dt><dd className="tab">$2,200 – $2,900</dd></div>
              <div className="spec-row"><dt>{t({ es: 'COCINA · 20–30', en: 'KITCHEN · 20–30' }, lang)}</dt><dd className="tab">$3,800 – $5,600</dd></div>
              <div className="spec-row"><dt>{t({ es: 'COCINA + ISLA', en: 'KITCHEN + ISLAND' }, lang)}</dt><dd className="tab">$5,800 – $8,400</dd></div>
              <div className="spec-row"><dt>{t({ es: 'JALADERAS NUEVAS', en: 'NEW HARDWARE' }, lang)}</dt><dd>{t({ es: 'aparte · escoges tú', en: 'separate · your pick' }, lang)}</dd></div>
            </dl>
          </div>
          <div className="card">
            <Eyebrow>{t({ es: 'Pintura nombrada', en: 'Named paint' }, lang)}</Eyebrow>
            <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)' }}>
              {[
                'Benjamin Moore · Advance · semigloss',
                'Sherwin-Williams · Emerald Urethane',
                'BM · Cabinet Coat — solo si lo pides',
                t({ es: 'Color: del muestrario · sin restricción', en: 'Color: from any deck · unrestricted' }, lang),
              ].map((r, i) => (
                <li key={i} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)', fontFamily: 'var(--mono)', fontSize: 12 }}>· {r}</li>
              ))}
            </ul>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Antes y después', en: 'Before and after' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginTop: 12 }}>
            {[
              { es: 'Antes · roble',    en: 'Before · oak' },
              { es: 'Mediados · espray', en: 'Mid · spray' },
              { es: 'Después · blanco', en: 'After · white' },
              { es: 'Después · negro',  en: 'After · black' },
            ].map((p, i) => (
              <div key={i}>
                <Slot label={'CAB ' + String(i + 1).padStart(2, '0')} sub={t(p, lang)} slotId={'service-cab-' + (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>

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

window.OrinovaPages2 = Object.assign(window.OrinovaPages2 || {}, { ServiceCabinets });

/* ── CAREERS · join the crew ──────────────────────────────── */

function CareersPage() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow, Slot } = window.OrinovaAtoms;
  const roles = [
    { code: 'PNT · 03', t: { es: 'Pintor con 3+ años',   en: 'Painter · 3+ yrs' },     pay: '$28–34/h', loc: 'Riverside · IE',  type: { es: 'tiempo completo', en: 'full time' } },
    { code: 'PNT · 01', t: { es: 'Pintor sénior',         en: 'Senior painter' },       pay: '$36–42/h', loc: 'Riverside · IE',  type: { es: 'tiempo completo', en: 'full time' } },
    { code: 'DW  · 01', t: { es: 'Drywall · sénior',      en: 'Drywaller · senior' },   pay: '$32–38/h', loc: 'Riverside · IE',  type: { es: 'tiempo completo', en: 'full time' } },
    { code: 'APR · 01', t: { es: 'Aprendiz · preparación', en: 'Apprentice · prep' },   pay: '$22–26/h', loc: 'Riverside · IE',  type: { es: 'tiempo completo', en: 'full time' } },
  ];
  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: 'start' }}>
          <div>
            <Eyebrow>DREAMVALLEY · {t({ es: 'oficios', en: 'crew' }, lang)}</Eyebrow>
            <h1 className="display" style={{ fontSize: 64, margin: '14px 0 14px', maxWidth: 720 }}>
              {t({
                es: 'Trabajamos sin prisa. Pagamos a tiempo. Hablamos español.',
                en: 'We work unrushed. We pay on time. We speak Spanish.'
              }, lang)}
            </h1>
            <p style={{ maxWidth: 520, fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)' }}>
              {t({
                es: 'Buscamos gente de oficio que llegue a tiempo, cuide la casa del cliente y se quede a terminar. Sueldo justo, semanas de 40 horas, herramientas y pintura incluidas.',
                en: 'Looking for trade people who show up on time, respect the client\u2019s home, and stay to finish. Fair pay, 40-hour weeks, tools and paint covered.'
              }, lang)}
            </p>
            <div className="codex" style={{ marginTop: 18 }}>{t({ es: 'Mandar resumé · whatsapp o correo', en: 'Send résumé · WhatsApp or email' }, lang)}</div>
            <div style={{ display: 'flex', gap: 10, marginTop: 10 }}>
              <a className="btn btn-call">{t({ es: 'Mandar resumé →', en: 'Send résumé →' }, lang)}</a>
              <a className="btn btn-ghost">WhatsApp · (951) 555-0148</a>
            </div>
          </div>
          <Slot label="CREW PHOTO" sub="team on job · 4:5" slotId="careers-hero" style={{ aspectRatio: '4 / 5' }} />
        </section>

        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Lo que ofrecemos', en: 'What we offer' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--divider)', marginTop: 12 }}>
            {[
              { c: '01', h: { es: 'Sueldo claro',         en: 'Clear pay' },         d: { es: 'Por hora, semanal, sin descuentos sorpresa. Pago todos los viernes.', en: 'Hourly, weekly, no surprise deductions. Paid every Friday.' } },
              { c: '02', h: { es: 'Trabajo estable',       en: 'Steady work' },       d: { es: 'Cartera completa. Semanas de 40 horas casi todo el año, sin invierno muerto.', en: 'Full pipeline. 40-hour weeks most of the year — no dead winter.' } },
              { c: '03', h: { es: 'Cuadrilla seria',       en: 'Serious crew' },      d: { es: 'Capataz hace su trabajo. No gritos, no carreras. Trabajamos para hacerlo bien.', en: 'Foreman does his job. No yelling, no racing. We work to do it right.' } },
              { c: '04', h: { es: 'Herramientas y pintura', en: 'Tools and paint' },   d: { es: 'No traes nada. Espray, rodillos, plástico, lonas — todo lo pone la casa.', en: 'You bring nothing. Spray rig, rollers, plastic, drops — the house provides.' } },
              { c: '05', h: { es: 'Camino a capataz',       en: 'Path to foreman' },   d: { es: 'Si quieres crecer, te enseñamos a leer un estimado y a manejar una obra.', en: 'If you want to grow, we teach you to read an estimate and run a job.' } },
              { c: '06', h: { es: 'Sin prisa con el cliente', en: 'Unrushed with clients' }, d: { es: 'No te empujamos a vender. Si la obra no es para nosotros, lo decimos.', en: 'We don\u2019t push you to upsell. If the job isn\u2019t for us, we say so.' } },
            ].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.5, 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: 'Vacantes abiertas', en: 'Open roles' }, lang)}</Eyebrow>
          <div style={{ marginTop: 12 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '110px 1.8fr 110px 1fr 90px 80px', gap: 14, padding: '10px 0 8px', borderBottom: '1px solid var(--divider-strong)' }}>
              <div className="codex">ROLE</div>
              <div className="codex">{t({ es: 'PUESTO', en: 'POSITION' }, lang)}</div>
              <div className="codex">PAY</div>
              <div className="codex">{t({ es: 'TIPO', en: 'TYPE' }, lang)}</div>
              <div className="codex">{t({ es: 'CIUDAD', en: 'CITY' }, lang)}</div>
              <div className="codex" style={{ textAlign: 'right' }}>{t({ es: 'VER', en: 'OPEN' }, lang)}</div>
            </div>
            {roles.map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1.8fr 110px 1fr 90px 80px', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--divider)', alignItems: 'center' }}>
                <div className="codex" style={{ color: 'var(--ink)' }}>{r.code}</div>
                <div style={{ fontSize: 14.5, fontWeight: 500 }}>{t(r.t, lang)}</div>
                <div className="tab" style={{ fontFamily: 'var(--mono)', fontSize: 13 }}>{r.pay}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{t(r.type, lang)}</div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-muted)' }}>{r.loc}</div>
                <a className="codex" style={{ textAlign: 'right', cursor: 'pointer' }}>{t({ es: 'aplicar →', en: 'apply →' }, lang)}</a>
              </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, background: 'var(--paper-cream)' }}>
            <div>
              <Eyebrow>{t({ es: 'Lo que no hacemos', en: 'What we don\u2019t do' }, lang)}</Eyebrow>
              <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)' }}>
                {[
                  { es: 'No descontamos por errores honestos — los arreglamos.',          en: 'We don\u2019t deduct for honest mistakes — we fix them.' },
                  { es: 'No te mandamos a casas que no pagan.',                            en: 'We don\u2019t send you to houses that won\u2019t pay.' },
                  { es: 'No esperamos que traigas tu propia escalera ni tu propia pintura.', en: 'We don\u2019t expect you to bring your own ladder or your own paint.' },
                  { es: 'No te quedas en el coche esperando trabajo — si hay día, hay obra.', en: 'You\u2019re not waiting in a parking lot — if it\u2019s a workday, there\u2019s a job.' },
                ].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>
            <div>
              <Eyebrow>{t({ es: 'Lo que sí pedimos', en: 'What we do ask' }, lang)}</Eyebrow>
              <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)' }}>
                {[
                  { es: 'Llegar a tiempo. Si no puedes, avisar.',                          en: 'Be on time. If you can\u2019t, let us know.' },
                  { es: 'Respetar la casa del cliente. Es donde duermen.',                  en: 'Respect the client\u2019s house. It\u2019s where they sleep.' },
                  { es: 'Decir la verdad si encuentras un problema escondido.',             en: 'Tell the truth if you find a hidden problem.' },
                  { es: 'Cuidar al aprendiz. Todos empezamos con plástico y enmascarado.',  en: 'Look after the apprentice. We all started with plastic and tape.' },
                ].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>
          </div>
        </section>

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

window.OrinovaPages2 = Object.assign(window.OrinovaPages2 || {}, { CareersPage });

/* ── INVOICE DOCUMENT — paid invoice, paper grammar ──────── */

function InvoiceDocument() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = window.OrinovaAtoms;
  const lines = [
    { code: 'PREP-01',  d: { es: 'Plástico, enmascarado, parchado menor.',         en: 'Plastic, masking, minor patching.' },          total: 280 },
    { code: 'PAINT-LV', d: { es: 'Sala y comedor — dos manos · warm white.',       en: 'Living + dining — two coats · warm white.' }, total: 980 },
    { code: 'PAINT-BR', d: { es: 'Recámara principal — dos manos · gris claro.',   en: 'Main bedroom — two coats · light gray.' },     total: 620 },
    { code: 'PAINT-BR2',d: { es: 'Recámara 2 — dos manos · warm white.',           en: 'Bedroom 2 — two coats · warm white.' },        total: 540 },
    { code: 'TRIM-01',  d: { es: 'Molduras y puertas — un cuarto.',                en: 'Trim and doors — one room.' },                 total: 220 },
    { code: 'DW-PATCH', d: { es: 'Parchado de drywall — humedad ventana comedor.', en: 'Drywall patch — moisture spot, dining window.' }, total: 180 },
    { code: 'CLEAN',    d: { es: 'Limpieza final y reacomodo de muebles.',         en: 'Final clean and furniture replace.' },         total: 140 },
    { code: 'EXTRA-01', d: { es: 'Mancha extra · cuarto de baño (aprobada por correo).', en: 'Extra spot · bathroom (email-approved).' }, total: 180 },
  ];
  const subtotal = lines.reduce((a, l) => a + l.total, 0);
  const total = subtotal;
  return (
    <div className="page">
      <Nav active="account" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 880, margin: '0 auto', padding: '36px 36px 0' }}>
          <div style={{ background: 'var(--paper-form)', border: '1px solid var(--divider)', padding: 36, boxShadow: '0 1px 0 rgba(0,0,0,0.04), 0 14px 32px rgba(26,26,26,0.05)', position: 'relative' }}>
            {/* PAID stamp */}
            <div style={{
              position: 'absolute', top: 36, right: 200, transform: 'rotate(-12deg)',
              border: '3px solid var(--olive)', color: 'var(--olive)',
              fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 32, letterSpacing: '0.08em',
              padding: '4px 18px', opacity: 0.85, pointerEvents: 'none',
            }}>
              {t({ es: 'PAGADO', en: 'PAID' }, lang)}
            </div>

            <header style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', paddingBottom: 16, borderBottom: '1px solid var(--divider-strong)' }}>
              <div>
                <div className="brand-mark" style={{ fontSize: 24 }}>DreamValley</div>
                <div className="codex">TRADE SOLUTIONS · A DIVISION OF ORINOVA</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="codex">{t({ es: 'FACTURA FINAL', en: 'FINAL INVOICE' }, lang)}</div>
                <div className="display tab" style={{ fontSize: 22, margin: '4px 0 0' }}>INV-2026-0431</div>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>OCT 16 · 2025 · v1</div>
              </div>
            </header>

            <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 18 }}>
              <div>
                <div className="codex">{t({ es: 'PARA', en: 'FOR' }, lang)}</div>
                <div style={{ marginTop: 4, fontSize: 14 }}>
                  Lupita H.<br />
                  2418 Magnolia Ave<br />
                  Riverside, CA 92506<br />
                  (951) 555-0203
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="codex">{t({ es: 'OBRA · COMPLETADA', en: 'JOB · COMPLETED' }, lang)}</div>
                <div style={{ marginTop: 4, fontSize: 14 }}>
                  {t({ es: 'Pintura interior · 3 cuartos', en: 'Interior paint · 3 rooms' }, lang)}<br />
                  {t({ es: 'Estimado: EST-2026-0431', en: 'Estimate: EST-2026-0431' }, lang)}<br />
                  {t({ es: 'Inicio: lun 13 oct', en: 'Started: Mon Oct 13' }, lang)}<br />
                  {t({ es: 'Entrega: vie 16 oct', en: 'Handover: Fri Oct 16' }, lang)}
                </div>
              </div>
            </section>

            <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 22, fontSize: 13.5 }}>
              <thead>
                <tr style={{ borderTop: '1px solid var(--divider-strong)', borderBottom: '1px solid var(--divider-strong)' }}>
                  <th style={{ textAlign: 'left',  padding: '8px 6px', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-muted)', fontWeight: 500, width: 110 }}>CODE</th>
                  <th style={{ textAlign: 'left',  padding: '8px 6px', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-muted)', fontWeight: 500 }}>{t({ es: 'DETALLE', en: 'DETAIL' }, lang)}</th>
                  <th style={{ textAlign: 'right', padding: '8px 6px', fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-muted)', fontWeight: 500, width: 100 }}>TOTAL</th>
                </tr>
              </thead>
              <tbody>
                {lines.map((l, i) => (
                  <tr key={i} style={{ borderBottom: '1px solid var(--divider)' }}>
                    <td style={{ padding: '10px 6px', fontFamily: 'var(--mono)', fontSize: 11.5, color: 'var(--ink-muted)' }}>{l.code}</td>
                    <td style={{ padding: '10px 6px' }}>{t(l.d, lang)}</td>
                    <td style={{ padding: '10px 6px', textAlign: 'right', fontFamily: 'var(--mono)', fontVariantNumeric: 'tabular-nums' }}>${l.total.toLocaleString()}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr><td colSpan={2} style={{ padding: '12px 6px', textAlign: 'right', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-muted)' }}>SUBTOTAL</td><td style={{ padding: '12px 6px', textAlign: 'right', fontFamily: 'var(--mono)', fontVariantNumeric: 'tabular-nums' }}>${subtotal.toLocaleString()}</td></tr>
                <tr><td colSpan={2} style={{ padding: '4px 6px',  textAlign: 'right', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-muted)' }}>{t({ es: 'IMPUESTO', en: 'TAX' }, lang)}</td><td style={{ padding: '4px 6px', textAlign: 'right', fontFamily: 'var(--mono)', fontVariantNumeric: 'tabular-nums', color: 'var(--ink-muted)' }}>$0</td></tr>
                <tr style={{ borderTop: '1px solid var(--divider-strong)' }}><td colSpan={2} style={{ padding: '12px 6px', textAlign: 'right', fontFamily: 'var(--serif)', fontSize: 16, fontWeight: 500 }}>{t({ es: 'TOTAL', en: 'TOTAL' }, lang)}</td><td style={{ padding: '12px 6px', textAlign: 'right', fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--olive)', fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>${total.toLocaleString()}</td></tr>
              </tfoot>
            </table>

            <section style={{ marginTop: 22, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
              <div>
                <Eyebrow>{t({ es: 'Pago recibido', en: 'Payment received' }, lang)}</Eyebrow>
                <dl style={{ marginTop: 8 }}>
                  <div className="spec-row"><dt>{t({ es: 'MÉTODO', en: 'METHOD' }, lang)}</dt><dd>{t({ es: 'Transferencia · Zelle', en: 'Bank transfer · Zelle' }, lang)}</dd></div>
                  <div className="spec-row"><dt>{t({ es: 'FECHA', en: 'DATE' }, lang)}</dt><dd>OCT 16 · 2025</dd></div>
                  <div className="spec-row"><dt>{t({ es: 'RECIBIDO POR', en: 'RECEIVED BY' }, lang)}</dt><dd>Erick S.</dd></div>
                  <div className="spec-row"><dt>REF</dt><dd className="tab">ZL-77194032</dd></div>
                </dl>
              </div>
              <div>
                <Eyebrow>{t({ es: 'Garantía de mano de obra', en: 'Workmanship warranty' }, lang)}</Eyebrow>
                <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
                  <li>· {t({ es: '1 año desde la entrega.', en: '1 year from handover.' }, lang)}</li>
                  <li>· {t({ es: 'Cubre desprendimiento o ampollamiento de pintura.', en: 'Covers peeling or blistering paint.' }, lang)}</li>
                  <li>· {t({ es: 'No cubre humedad nueva ni daño por terceros.', en: 'Doesn\u2019t cover new moisture or third-party damage.' }, lang)}</li>
                  <li>· {t({ es: 'Para reclamar: llama a Erick S. al (951) 555-0148.', en: 'To claim: call Erick S. at (951) 555-0148.' }, lang)}</li>
                </ul>
              </div>
            </section>

            <section style={{ marginTop: 24, borderTop: '1px solid var(--divider-strong)', paddingTop: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, alignItems: 'flex-start' }}>
              <div className="codex" style={{ color: 'var(--ink-muted)', lineHeight: 1.55 }}>
                {t({
                  es: 'Trabajo bajo licencia ejecutado por contratista CSLB licenciado de California. Licencia nombrada en el contrato firmado.',
                  en: 'Licensed work performed by a California CSLB-licensed contractor. License named on the signed contract.'
                }, lang)}
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="codex">DREAMVALLEY · {t({ es: 'GRACIAS', en: 'THANK YOU' }, lang)}</div>
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, marginTop: 8, color: 'var(--ink)' }}>Erick S.</div>
                <div className="codex" style={{ color: 'var(--ink-muted)', marginTop: 2 }}>OCT 16 · 2025</div>
              </div>
            </section>
          </div>

          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 16 }}>
            <a className="btn btn-ghost">↓ {t({ es: 'Descargar PDF', en: 'Download PDF' }, lang)}</a>
            <a className="btn btn-ghost">{t({ es: 'Mandar a contador', en: 'Send to bookkeeper' }, lang)}</a>
          </div>
        </section>

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

window.OrinovaPages2 = Object.assign(window.OrinovaPages2 || {}, { InvoiceDocument });

/* ── REVIEWS · testimonials ───────────────────────────────── */

function ReviewsPage() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow, Slot } = window.OrinovaAtoms;
  const reviews = [
    {
      stars: 5,
      quote: {
        es: '"Llegaron a la hora que dijeron. Pusieron plástico en todo. Cuatro días, tres cuartos, mi mamá no tuvo que salirse de la casa."',
        en: '"Showed up at the time they said. Plastic on everything. Four days, three rooms, my mom didn\u2019t have to leave the house."'
      },
      who: 'Lupita H.',
      where: { es: 'Riverside · pintura interior', en: 'Riverside · interior paint' },
      job: 'DV-2026-0431',
    },
    {
      stars: 5,
      quote: {
        es: '"Pedí estimado a tres compañías. Sólo Erick vino a ver la casa antes de mandar precio. Por eso firmé."',
        en: '"Asked three companies for an estimate. Only Erick came to see the house before sending a price. That\u2019s why I signed."'
      },
      who: 'Carlos R.',
      where: { es: 'Moreno Valley · fachada', en: 'Moreno Valley · exterior' },
      job: 'DV-2025-0398',
    },
    {
      stars: 5,
      quote: {
        es: '"Pre-venta lista en seis días. El comprador firmó la oferta el mismo día que listamos. La cocina se ve como mueble nuevo."',
        en: '"Pre-sale ready in six days. Buyer signed the offer the same day we listed. Kitchen looks like new furniture."'
      },
      who: 'Sandra L.',
      where: { es: 'Castle Realty · pre-venta', en: 'Castle Realty · pre-sale' },
      job: 'DV-2025-0420',
    },
    {
      stars: 5,
      quote: {
        es: '"Me dijeron honestamente que la humedad había que arreglarla primero. Recomendaron un fontanero. No me cobraron por la visita. Volví cuando estuvo arreglada."',
        en: '"Told me honestly the moisture had to be fixed first. Recommended a plumber. No charge for the visit. I came back once it was sorted."'
      },
      who: 'Joel B.',
      where: { es: 'Riverside · drywall', en: 'Riverside · drywall' },
      job: 'DV-2025-0434',
    },
    {
      stars: 5,
      quote: {
        es: '"Mi inquilino se quedó toda la semana. Plástico, nadie tropezó con nada, todo limpio el viernes."',
        en: '"My tenant stayed all week. Plastic everywhere, nobody tripped on anything, all cleaned up by Friday."'
      },
      who: 'Hidalgo fam.',
      where: { es: 'Corona · interior 4 cuartos', en: 'Corona · 4-room interior' },
      job: 'DV-2025-0411',
    },
    {
      stars: 5,
      quote: {
        es: '"Hablan español sin prisa. Mi papá no oye bien y le explicaron tres veces sin gestos raros. Por eso volvimos."',
        en: '"They speak Spanish unrushed. My dad doesn\u2019t hear well and they explained three times without weird looks. That\u2019s why we came back."'
      },
      who: 'Maria O.',
      where: { es: 'Riverside · cocina', en: 'Riverside · kitchen' },
      job: 'DV-2025-0405',
    },
  ];
  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>{t({ es: 'Reseñas · clientes reales', en: 'Reviews · real clients' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 60, margin: '14px 0 16px', maxWidth: 880 }}>
            {t({
              es: 'Sin filtros, sin actores, sin precios escondidos detrás.',
              en: 'No filters, no actors, no hidden prices behind them.'
            }, lang)}
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 660 }}>
            {t({
              es: 'Cada reseña aquí tiene un número de obra al lado. Si quieres, te conectamos con el cliente que la escribió.',
              en: 'Every review here has a job number next to it. If you want, we\u2019ll connect you with the client who wrote it.'
            }, 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: '4.9 / 5', k: { es: 'PROMEDIO · 2 AÑOS', en: 'AVG · 2 YEARS' } },
              { v: '147',     k: { es: 'OBRAS TERMINADAS · 2025', en: 'JOBS COMPLETED · 2025' } },
              { v: '94 %',    k: { es: 'CLIENTES QUE VUELVEN', en: 'CLIENTS WHO RETURN' } },
              { v: '0',       k: { es: 'QUEJAS A CSLB', en: 'CSLB COMPLAINTS' } },
            ].map((m, i) => (
              <div key={i} style={{ borderRight: i < 3 ? '1px solid var(--divider)' : 'none', padding: '18px 18px' }}>
                <div className="codex">{t(m.k, lang)}</div>
                <div className="display tab" style={{ fontSize: 36, marginTop: 6 }}>{m.v}</div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '32px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Recientes', en: 'Recent' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginTop: 14 }}>
            {reviews.map((r, i) => (
              <div key={i} className="card" style={{ display: 'grid', gridTemplateRows: 'auto 1fr auto', gap: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div style={{ display: 'flex', gap: 2, color: 'var(--terracotta)', fontFamily: 'var(--mono)', fontSize: 16, letterSpacing: '0.05em' }}>
                    {Array.from({ length: r.stars }).map((_, k) => <span key={k}>★</span>)}
                  </div>
                  <div className="codex">{r.job}</div>
                </div>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 17, lineHeight: 1.5, color: 'var(--ink)', margin: 0, fontStyle: 'italic' }}>
                  {t(r.quote, lang)}
                </p>
                <div style={{ borderTop: '1px solid var(--divider)', paddingTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 13, fontWeight: 500 }}>{r.who}</span>
                  <span className="codex">{t(r.where, lang)}</span>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '36px auto 0', padding: '0 36px' }}>
          <div className="card" style={{ background: 'var(--paper-cream)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 22, alignItems: 'center' }}>
            <div>
              <Eyebrow>{t({ es: 'Quieres dejar una reseña', en: 'Want to leave a review' }, lang)}</Eyebrow>
              <p style={{ fontSize: 14.5, marginTop: 6, color: 'var(--ink-soft)' }}>
                {t({
                  es: 'Si fuimos a tu casa, mándanos dos líneas honestas — buenas o malas. Las malas nos enseñan más.',
                  en: 'If we worked on your house, send two honest lines — good or bad. The bad ones teach us more.'
                }, lang)}
              </p>
            </div>
            <a className="btn btn-primary">{t({ es: 'Escribir reseña →', en: 'Write a review →' }, lang)}</a>
          </div>
        </section>

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

window.OrinovaPages2 = Object.assign(window.OrinovaPages2 || {}, { ReviewsPage });

/* ── MOBILE · estimate step 3 (contact details, confirm) ─── */

function MobileEstimateStep3() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Eyebrow, LangPill } = window.OrinovaAtoms;
  return (
    <div className="page" style={{ fontSize: 14 }}>
      <div className="nav">
        <div className="nav-inner" style={{ padding: '12px 18px' }}>
          <a className="codex" style={{ cursor: 'pointer' }}>← {t({ es: 'atrás', en: 'back' }, lang)}</a>
          <span className="brand-mark" style={{ fontSize: 16 }}>DreamValley</span>
          <span className="codex">3 / 3</span>
        </div>
      </div>
      <div className="page-scroll hide-scroll">
        <section style={{ padding: '8px 22px 0' }}>
          <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
            {[true, true, true].map((on, i) => (
              <div key={i} style={{ flex: 1, height: 4, background: 'var(--olive)', borderRadius: 2 }} />
            ))}
          </div>
        </section>

        <section style={{ padding: '24px 22px 0' }}>
          <Eyebrow>{t({ es: 'Paso 3 · cómo contactarte', en: 'Step 3 · how to reach you' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 28, lineHeight: 1.15, margin: '8px 0 8px' }}>
            {t({ es: 'Sólo nombre y teléfono.', en: 'Just name and phone.' }, lang)}
          </h1>
          <p style={{ fontSize: 13.5, color: 'var(--ink-muted)', marginBottom: 18 }}>
            {t({ es: 'Te llamamos hoy o mañana. Cinco minutos máximo.', en: 'We\u2019ll call today or tomorrow. Five minutes, tops.' }, lang)}
          </p>

          <div style={{ display: 'grid', gap: 12 }}>
            <div className="field">
              <label className="field-label">{t({ es: 'Tu nombre', en: 'Your name' }, lang)}</label>
              <input className="field-input" defaultValue="Lupita H." />
            </div>
            <div className="field">
              <label className="field-label">{t({ es: 'Teléfono', en: 'Phone' }, lang)}</label>
              <input className="field-input" defaultValue="(951) 555-0203" />
            </div>
            <div className="field">
              <label className="field-label">{t({ es: 'Correo · opcional', en: 'Email · optional' }, lang)}</label>
              <input className="field-input" defaultValue="lupita.h@example.com" />
            </div>
            <div className="field">
              <label className="field-label">{t({ es: 'Dirección de la obra', en: 'Job address' }, lang)}</label>
              <input className="field-input" defaultValue="2418 Magnolia Ave, Riverside" />
            </div>
          </div>
        </section>

        <section style={{ padding: '24px 22px 0' }}>
          <Eyebrow>{t({ es: 'Mejor hora para llamarte', en: 'Best time to call' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 10 }}>
            {[
              { es: 'Mañana',   en: 'Morning' },
              { es: 'Tarde',    en: 'Afternoon', on: true },
              { es: 'Cuando sea', en: 'Anytime' },
            ].map((w, i) => (
              <button key={i} style={{
                padding: '12px 8px', fontSize: 13.5, fontFamily: 'inherit', cursor: 'pointer',
                background: w.on ? 'var(--olive)' : 'var(--paper-form)',
                color:      w.on ? 'var(--paper)' : 'var(--ink)',
                border: '1px solid',
                borderColor: w.on ? 'var(--olive)' : 'var(--divider-strong)',
                borderRadius: 999,
              }}>{t(w, lang)}</button>
            ))}
          </div>
        </section>

        <section style={{ padding: '24px 22px 0' }}>
          <Eyebrow>{t({ es: 'Idioma preferido', en: 'Preferred language' }, lang)}</Eyebrow>
          <div style={{ marginTop: 10 }}>
            <LangPill />
          </div>
        </section>

        <section style={{ padding: '24px 22px 0' }}>
          <div style={{ background: 'var(--paper-cream)', border: '1px solid var(--divider)', padding: 16 }}>
            <Eyebrow>{t({ es: 'Resumen', en: 'Summary' }, lang)}</Eyebrow>
            <dl style={{ marginTop: 8 }}>
              <div className="spec-row"><dt>{t({ es: 'TRABAJO', en: 'JOB' }, lang)}</dt><dd>{t({ es: 'Algunos cuartos', en: 'A few rooms' }, lang)}</dd></div>
              <div className="spec-row"><dt>{t({ es: 'URGENCIA', en: 'URGENCY' }, lang)}</dt><dd>{t({ es: 'Humedad / mancha', en: 'Moisture / spot' }, lang)}</dd></div>
              <div className="spec-row"><dt>{t({ es: 'PLAZO', en: 'WHEN' }, lang)}</dt><dd>{t({ es: 'Próximas 2 semanas', en: 'Next 2 weeks' }, lang)}</dd></div>
              <div className="spec-row"><dt>{t({ es: 'PLAZO DE ESTIMADO', en: 'ESTIMATE SLA' }, lang)}</dt><dd className="tab" style={{ color: 'var(--olive)' }}>48 h</dd></div>
            </dl>
          </div>
        </section>

        <div style={{ height: 32 }} />
        <section style={{ position: 'sticky', bottom: 0, padding: '14px 22px 18px', background: 'color-mix(in oklab, var(--paper) 90%, transparent)', backdropFilter: 'blur(8px)', borderTop: '1px solid var(--divider)', display: 'grid', gap: 8 }}>
          <a className="btn btn-call" style={{ padding: '14px', fontSize: 15 }}>
            ✓ {t({ es: 'Enviar solicitud', en: 'Send request' }, lang)}
          </a>
          <div className="codex" style={{ color: 'var(--ink-muted)', textAlign: 'center' }}>
            {t({ es: 'no vendemos tus datos · sólo te llamamos', en: 'we don\u2019t sell your data · we only call' }, lang)}
          </div>
        </section>
      </div>
    </div>
  );
}

window.OrinovaPages2 = Object.assign(window.OrinovaPages2 || {}, { MobileEstimateStep3 });

/* ── FOREMAN JOB SHEET — internal single-job view ─────────── */

function ForemanJobSheet() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Foot, Eyebrow, LangPill } = window.OrinovaAtoms;
  const checklist = [
    { done: true,  d: { es: 'Plástico en muebles y pisos',        en: 'Plastic on furniture and floors' } },
    { done: true,  d: { es: 'Enmascarado de molduras y enchufes', en: 'Masking on trim and outlets' } },
    { done: true,  d: { es: 'Parchado · humedad ventana comedor', en: 'Patching · moisture spot, dining window' } },
    { done: true,  d: { es: 'Primer en parche · 1 spot',          en: 'Primer on patch · 1 spot' } },
    { done: false, active: true, d: { es: 'Primera mano sala y comedor', en: 'First coat living + dining' } },
    { done: false, d: { es: 'Primera mano recámaras',              en: 'First coat bedrooms' } },
    { done: false, d: { es: 'Segunda mano · todo',                  en: 'Second coat · all' } },
    { done: false, d: { es: 'Molduras y puertas',                   en: 'Trim and doors' } },
    { done: false, d: { es: 'Quitar plástico, limpieza, mover muebles', en: 'Remove plastic, clean, move furniture back' } },
    { done: false, d: { es: 'Revisión con cliente',                 en: 'Walk-through with client' } },
  ];
  const log = [
    { t: '7:48 AM', es: 'Cuadrilla en sitio. Cliente abrió.',          en: 'Crew on site. Client opened up.' },
    { t: '8:14 AM', es: 'Plástico instalado, sala y comedor.',          en: 'Plastic up in living + dining.' },
    { t: '9:02 AM', es: 'Parche de humedad seco, primer aplicado.',     en: 'Moisture patch dry, primer applied.' },
    { t: '9:35 AM', es: 'Empezando primera mano · pared sur sala.',     en: 'Starting first coat · living south wall.' },
  ];
  const time = [
    { who: 'Erick S.',     hrs: 4.5, role: { es: 'Capataz',         en: 'Foreman' } },
    { who: 'Javier V.',    hrs: 4.5, role: { es: 'Pintor sénior',   en: 'Senior painter' } },
    { who: 'Andrés M.',    hrs: 3.0, role: { es: 'Pintor',          en: 'Painter' } },
  ];
  return (
    <div className="page">
      <div className="nav">
        <div className="nav-inner">
          <div className="brand">
            <span className="brand-mark">DreamValley</span>
            <span className="brand-sub">FIELD · DV-0431</span>
          </div>
          <div className="nav-links">
            <a className="codex" style={{ cursor: 'pointer' }}>← {t({ es: 'a dispatch', en: 'to dispatch' }, lang)}</a>
            <a className="nav-link is-active">{t({ es: 'Hoja de obra', en: 'Job sheet' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Fotos', en: 'Photos' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Notas', en: 'Notes' }, lang)}</a>
            <LangPill />
            <span className="badge" style={{ borderColor: 'var(--olive)' }}><span className="dot" />ERICK S.</span>
          </div>
        </div>
      </div>

      <div className="page-scroll hide-scroll">
        <div className="banner">
          <span className="dot" />
          {t({ es: 'DV-0431 · día 2 de 4 · en obra', en: 'DV-0431 · day 2 of 4 · on site' }, lang)}
          <span style={{ flex: 1 }} />
          MIÉ · 14 OCT · 11:48 AM
        </div>

        <section style={{ maxWidth: 1180, margin: '0 auto', padding: '24px 28px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 16 }}>
            <div>
              <Eyebrow>JOB DV-2026-0431 · {t({ es: 'pintura interior', en: 'interior paint' }, lang)}</Eyebrow>
              <h1 className="display" style={{ fontSize: 36, margin: '8px 0 4px' }}>2418 Magnolia Ave, Riverside</h1>
              <div style={{ fontSize: 13, color: 'var(--ink-muted)' }}>Lupita H. · (951) 555-0203 · {t({ es: 'cliente prefiere español', en: 'client prefers Spanish' }, lang)}</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <a className="btn btn-call">☎ {t({ es: 'Llamar cliente', en: 'Call client' }, lang)}</a>
              <a className="btn btn-ghost">{t({ es: '+ Foto', en: '+ Photo' }, lang)}</a>
              <a className="btn btn-primary">{t({ es: 'Cerrar día', en: 'Close out day' }, lang)}</a>
            </div>
          </div>
        </section>

        <section style={{ maxWidth: 1180, margin: '20px auto 0', padding: '0 28px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--divider-strong)', borderBottom: '1px solid var(--divider-strong)' }}>
          {[
            { v: '40 %', k: { es: 'PROGRESO', en: 'PROGRESS' } },
            { v: '12.0', k: { es: 'HORAS · HOY', en: 'HOURS · TODAY' } },
            { v: '$4,820', k: { es: 'CONTRATO',  en: 'CONTRACT' } },
            { v: '0 / 6', k: { es: 'NOTAS ABIERTAS', en: 'OPEN NOTES' } },
          ].map((m, i) => (
            <div key={i} style={{ borderRight: i < 3 ? '1px solid var(--divider)' : 'none', padding: '14px 18px' }}>
              <div className="codex">{t(m.k, lang)}</div>
              <div className="display tab" style={{ fontSize: 30, marginTop: 6 }}>{m.v}</div>
            </div>
          ))}
        </section>

        <section style={{ maxWidth: 1180, margin: '24px auto 0', padding: '0 28px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 22, alignItems: 'start' }}>
          <div className="card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <Eyebrow>{t({ es: 'Lista de obra · día 2', en: 'Job checklist · day 2' }, lang)}</Eyebrow>
              <span className="codex">4 / 10</span>
            </div>
            <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none' }}>
              {checklist.map((c, i) => (
                <li key={i} style={{
                  display: 'grid', gridTemplateColumns: '28px 1fr 90px', gap: 10, padding: '11px 0',
                  borderBottom: '1px solid var(--divider)', alignItems: 'center',
                  background: c.active ? 'var(--terracotta-soft)' : 'transparent',
                  marginLeft: c.active ? -8 : 0, marginRight: c.active ? -8 : 0, paddingLeft: c.active ? 8 : 0, paddingRight: c.active ? 8 : 0,
                }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: 4, border: '1.5px solid ' + (c.done ? 'var(--olive)' : (c.active ? 'var(--terracotta)' : 'var(--divider-strong)')),
                    background: c.done ? 'var(--olive)' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--paper)', fontSize: 11, fontFamily: 'var(--mono)',
                  }}>{c.done ? '✓' : ''}</span>
                  <div style={{ fontSize: 14, color: c.done ? 'var(--ink-muted)' : 'var(--ink)', textDecoration: c.done ? 'line-through' : 'none' }}>
                    {t(c.d, lang)}
                  </div>
                  {c.active ? (
                    <span className="codex" style={{ color: 'var(--terracotta)', textAlign: 'right' }}>● {t({ es: 'ahora', en: 'now' }, lang)}</span>
                  ) : (
                    <span className="codex" style={{ textAlign: 'right' }}>{c.done ? t({ es: 'hecho', en: 'done' }, lang) : ''}</span>
                  )}
                </li>
              ))}
            </ul>
          </div>

          <div style={{ display: 'grid', gap: 14 }}>
            <div className="card">
              <Eyebrow>{t({ es: 'Bitácora del día', en: 'Day log' }, lang)}</Eyebrow>
              <ol style={{ margin: '10px 0 0', padding: 0, listStyle: 'none' }}>
                {log.map((row, i) => (
                  <li key={i} style={{ display: 'grid', gridTemplateColumns: '70px 1fr', gap: 10, padding: '9px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                    <span className="codex tab">{row.t}</span>
                    <span style={{ fontSize: 13.5, color: 'var(--ink-soft)' }}>{t({ es: row.es, en: row.en }, lang)}</span>
                  </li>
                ))}
              </ol>
              <a className="btn btn-ghost" style={{ marginTop: 12, width: '100%', padding: 10, fontSize: 13 }}>+ {t({ es: 'Añadir entrada', en: 'Add entry' }, lang)}</a>
            </div>
            <div className="card">
              <Eyebrow>{t({ es: 'Horas · cuadrilla', en: 'Hours · crew' }, lang)}</Eyebrow>
              <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none' }}>
                {time.map((row, i) => (
                  <li key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 90px 60px', gap: 8, padding: '8px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                    <span style={{ fontSize: 13.5 }}>{row.who}</span>
                    <span className="codex">{t(row.role, lang)}</span>
                    <span className="tab" style={{ fontFamily: 'var(--mono)', fontSize: 13, textAlign: 'right' }}>{row.hrs} h</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </section>

        <section style={{ maxWidth: 1180, margin: '24px auto 0', padding: '0 28px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
          <div className="card">
            <Eyebrow>{t({ es: 'Materiales en camioneta', en: 'Truck inventory' }, lang)}</Eyebrow>
            <dl style={{ marginTop: 8 }}>
              <div className="spec-row"><dt>SW · CASHMERE · ALABASTER</dt><dd className="tab">4 gal · ok</dd></div>
              <div className="spec-row"><dt>SW · CASHMERE · REPOSE GRAY</dt><dd className="tab">2 gal · ok</dd></div>
              <div className="spec-row"><dt>BM · ADVANCE · DEC WHITE</dt><dd className="tab" style={{ color: 'var(--terracotta)' }}>0.5 gal · {t({ es: 'pedir mañana', en: 'reorder tomorrow' }, lang)}</dd></div>
              <div className="spec-row"><dt>PRIMER · PROBLOCK</dt><dd className="tab">3 spots</dd></div>
              <div className="spec-row"><dt>{t({ es: 'PLÁSTICO 12X400', en: 'PLASTIC 12X400' }, lang)}</dt><dd className="tab">1 roll</dd></div>
            </dl>
          </div>
          <div className="card" style={{ background: 'var(--paper-cream)' }}>
            <Eyebrow>{t({ es: 'Notas para mañana', en: 'Notes for tomorrow' }, lang)}</Eyebrow>
            <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)' }}>
              {[
                { es: 'Cliente pidió cambiar la recámara 2 a warm white. Confirmado.',  en: 'Client asked to switch bedroom 2 to warm white. Confirmed.' },
                { es: 'Comprar otro galón de Decorator\u2019s White antes de las 8.',     en: 'Pick up another gallon of Decorator\u2019s White before 8.' },
                { es: 'Andrés sale al mediodía — boda de hermana.',                       en: 'Andrés leaves at noon — sister\u2019s wedding.' },
              ].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(--terracotta)' }}>→</span>{t(r, lang)}
                </li>
              ))}
            </ul>
          </div>
        </section>

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

window.OrinovaPages2 = Object.assign(window.OrinovaPages2 || {}, { ForemanJobSheet });