/* Orinova Portal — pages12.jsx
   Mobile, the rest. Trust + crew + hero pieces, sized for phones.

     · MobileHelp           — FAQ accordion
     · MobileEstimateDoc    — signed estimate viewer
     · MobileSignIn         — login screen
     · MobileForemanDay     — today's schedule (internal)
     · MobileForemanJob     — single job sheet (internal)
     · MobileTruism         — full-bleed truism, swipe
     · MobileBroadside      — vertical newspaper
*/

// Reuse mobile chrome from pages11 if present, else define locally
const MStatusBar12 = (window.OrinovaPages11 && window.OrinovaPages11.MStatusBar) || (function () {
  return function MStatusBar({ clock = '9:41' }) {
    return (
      <div className="m-statusbar">
        <div className="m-statusbar-clock">{clock}</div>
        <div className="m-statusbar-notch" />
        <div className="m-statusbar-icons"><span style={{ marginRight: 4 }}>5G</span><span style={{ marginRight: 4 }}>●●●●</span><span>100</span></div>
      </div>
    );
  };
})();

function MTopBar12({ back = '‹', title, action, tone = 'paper' }) {
  return (
    <div className="m-topbar" style={tone === 'dark' ? { background: 'rgba(20,17,13,.92)', borderBottom: '1px solid rgba(245,240,232,0.15)' } : null}>
      <button className="m-back" aria-label="back" style={tone === 'dark' ? { background: 'transparent', borderColor: 'rgba(245,240,232,0.3)', color: 'var(--paper)' } : null}>{back}</button>
      <div className="m-title" style={tone === 'dark' ? { color: 'var(--paper)' } : null}>{title}</div>
      <div className="m-action" style={tone === 'dark' ? { color: 'rgba(245,240,232,0.7)' } : null}>{action || ' '}</div>
    </div>
  );
}

function MTabBar12({ active }) {
  const tabs = [
    { id: 'job',  l: { es: 'OBRA',  en: 'JOB' } },
    { id: 'docs', l: { es: 'DOCS',  en: 'DOCS' } },
    { id: 'pay',  l: { es: 'PAGOS', en: 'PAY' } },
    { id: 'help', l: { es: 'AYUDA', en: 'HELP' } },
  ];
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="m-tabbar">
      {tabs.map((tab) => (
        <div key={tab.id} className={'m-tab ' + (active === tab.id ? 'is-active' : '')}>
          <div className="m-tab-dot" />
          {t(tab.l, lang)}
        </div>
      ))}
    </div>
  );
}

/* ── MOBILE · HELP / FAQ ──────────────────────────────────
   Accordion grouped by topic, big tap rows, a final call card.
*/

const M_FAQ = [
  {
    code: '01', title: { es: 'Estimados', en: 'Estimates' }, qs: [
      {
        q: { es: '¿Cuánto cuesta un estimado?', en: 'How much is an estimate?' },
        a: { es: 'Nada. Visita, medición, escrito en 48h. 30 días para decidir.', en: 'Nothing. Visit, measure, written in 48h. 30 days to decide.' }
      },
      {
        q: { es: '¿Por qué puede subir?', en: 'Why might it change?' },
        a: { es: 'Solo por descubrimientos al abrir la pared. Paramos, llamamos, firmas, seguimos.', en: 'Only for things we find once we open the wall. Stop, call, sign, continue.' }
      },
    ]
  },
  {
    code: '02', title: { es: 'Cuadrilla', en: 'Crew' }, qs: [
      {
        q: { es: '¿Quién aparece?', en: 'Who shows up?' },
        a: { es: 'Foreman + 2–4 pintores con su nombre en la camisa. Mismas caras todos los días.', en: 'Foreman + 2–4 painters with names on shirts. Same faces every day.' }
      },
      {
        q: { es: '¿Trabajan sábados?', en: 'Saturdays?' },
        a: { es: '8–14. Domingos no.', en: '8–2. Sundays no.' }
      },
    ]
  },
  {
    code: '03', title: { es: 'Después', en: 'After' }, qs: [
      {
        q: { es: '¿Y si veo algo mal después?', en: 'What if I see a problem later?' },
        a: { es: 'Llama. Foreman en 7 días. Si es garantía, sin costo.', en: 'Call. Foreman within 7 days. If warranty, no charge.' }
      },
      {
        q: { es: '¿Pintura de retoque?', en: 'Touch-up paint?' },
        a: { es: 'Un galón sellado, etiquetado, donde tú digas.', en: 'One sealed gallon, labeled, where you say.' }
      },
    ]
  },
];

function MobileHelp() {
  const t = window.t;
  const { lang } = window.useLang();
  const [open, setOpen] = React.useState({ '01-0': true });
  const k = (a, b) => a + '-' + b;
  const toggle = (key) => setOpen(o => ({ ...o, [key]: !o[key] }));

  return (
    <div className="page m-page">
      <div className="page-scroll hide-scroll" style={{ paddingBottom: 80 }}>
        <MStatusBar12 />
        <MTopBar12 title={t({ es: 'Ayuda', en: 'Help' }, lang)} action={t({ es: 'LLAMAR', en: 'CALL' }, lang)} />

        <section style={{ padding: '22px 22px 6px' }}>
          <div className="codex" style={{ color: 'var(--terracotta)' }}>{t({ es: 'NO HAY CHATBOT', en: 'NO CHATBOT' }, lang)}</div>
          <h1 className="display" style={{ fontSize: 30, lineHeight: 1.05, margin: '8px 0 4px', letterSpacing: '-0.02em' }}>
            {t({ es: 'Te contesta una persona.', en: 'A person answers.' }, lang)}
          </h1>
        </section>

        {M_FAQ.map((g) => (
          <section key={g.code} style={{ padding: '14px 22px 0' }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '36px 1fr',
              alignItems: 'baseline',
              padding: '8px 0', borderBottom: '1px solid var(--divider-strong)',
            }}>
              <span className="codex" style={{ color: 'var(--terracotta)' }}>{g.code}</span>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 500 }}>{t(g.title, lang)}</span>
            </div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {g.qs.map((row, qi) => {
                const key = k(g.code, qi);
                const isOpen = !!open[key];
                return (
                  <li key={qi} style={{ borderBottom: '1px solid var(--divider)' }}>
                    <button onClick={() => toggle(key)} style={{
                      width: '100%', textAlign: 'left',
                      background: 'transparent', border: 0, cursor: 'pointer',
                      padding: '14px 0',
                      display: 'grid', gridTemplateColumns: '1fr 24px', gap: 10, alignItems: 'baseline',
                      fontFamily: 'var(--serif)', fontSize: 15.5, color: 'var(--ink)',
                    }}>
                      <span>{t(row.q, lang)}</span>
                      <span className="codex" style={{ color: 'var(--ink-muted)', textAlign: 'right' }}>{isOpen ? '−' : '+'}</span>
                    </button>
                    {isOpen && (
                      <p style={{ margin: '0 0 14px', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
                        {t(row.a, lang)}
                      </p>
                    )}
                  </li>
                );
              })}
            </ul>
          </section>
        ))}

        <section style={{ padding: '22px 22px 0' }}>
          <div className="m-card-dark">
            <div className="codex" style={{ opacity: 0.7 }}>{t({ es: 'TU PREGUNTA NO ESTÁ AQUÍ', en: 'YOUR QUESTION ISN\u2019T HERE' }, lang)}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.3, marginTop: 8 }}>
              {t({
                es: 'Llama. L–V 7–18, SÁB 8–14.',
                en: 'Call. M–F 7–6, Sat 8–2.'
              }, lang)}
            </div>
            <a className="btn btn-call" style={{ width: '100%', marginTop: 14, padding: '14px', fontSize: 15 }}>(951) 555-0148</a>
          </div>
        </section>

        <div style={{ height: 30 }} />
        <MTabBar12 active="help" />
      </div>
    </div>
  );
}

/* ── MOBILE · ESTIMATE DOC VIEWER ─────────────────────────
   The estimate the client signed, on a phone. Document grammar,
   not chrome. A 'PDF you can scroll'.
*/

function MobileEstimateDoc() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page m-page" style={{ background: 'var(--paper-form)' }}>
      <div className="page-scroll hide-scroll" style={{ paddingBottom: 90 }}>
        <MStatusBar12 />
        <MTopBar12 title={t({ es: 'Estimado · DV-0431', en: 'Estimate · DV-0431' }, lang)} action="PDF" />

        <div style={{ padding: '14px 22px 24px' }}>
          {/* doc head */}
          <div style={{ borderBottom: '1px solid var(--ink)', paddingBottom: 10 }}>
            <div className="brand-mark" style={{ fontSize: 22 }}>DreamValley</div>
            <div className="brand-sub" style={{ marginTop: 2 }}>TRADE SOLUTIONS · A DIVISION OF ORINOVA</div>
            <div className="codex" style={{ marginTop: 8, color: 'var(--ink-muted)' }}>DV · DOC · ESTIMATE · 04</div>
          </div>

          {/* meta */}
          <div style={{ marginTop: 18 }}>
            <div className="codex">{t({ es: 'CLIENTE', en: 'CLIENT' }, lang)}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 17, marginTop: 4 }}>María Peña</div>
            <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>1428 Magnolia Ave · Riverside CA 92501</div>
          </div>

          {/* eyebrow + title */}
          <div style={{ marginTop: 22 }}>
            <div className="codex" style={{ color: 'var(--terracotta)' }}>{t({ es: 'ALCANCE', en: 'SCOPE' }, lang)}</div>
            <h1 className="display" style={{ fontSize: 28, lineHeight: 1.05, margin: '6px 0 0' }}>
              {t({ es: 'Pintura interior · 3 br + sala', en: 'Interior paint · 3 br + living' }, lang)}
            </h1>
          </div>

          {/* line items */}
          <dl style={{ marginTop: 18 }}>
            {[
              { k: { es: 'PRIMER',  en: 'PRIMER' },   v: 'PVA · 1 mano · todas las paredes' },
              { k: { es: 'COATS',   en: 'COATS' },    v: 'DE6371 · 2 manos · acabado eggshell' },
              { k: { es: 'TRIM',    en: 'TRIM' },     v: 'DE6196 · semigloss · 2 manos' },
              { k: { es: 'PLAZO',   en: 'DURATION' }, v: t({ es: '4 días · L–J · 7:30 a 16:30', en: '4 days · M–Th · 7:30 to 4:30' }, lang) },
              { k: { es: 'CIERRE',  en: 'CLOSE' },    v: t({ es: 'caminata + garantía 3 años', en: 'walk + 3-yr warranty' }, lang) },
            ].map((r, i) => (
              <div key={i} className="spec-row">
                <dt>{t(r.k, lang)}</dt>
                <dd>{typeof r.v === 'string' ? r.v : t(r.v, lang)}</dd>
              </div>
            ))}
          </dl>

          {/* totals */}
          <div style={{ marginTop: 18, padding: '14px 0', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline' }}>
              <div className="codex">{t({ es: 'SUBTOTAL · MANO DE OBRA', en: 'SUBTOTAL · LABOR' }, lang)}</div>
              <div className="tab">$3,820</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline', marginTop: 4 }}>
              <div className="codex">{t({ es: 'SUBTOTAL · MATERIAL', en: 'SUBTOTAL · MATERIALS' }, lang)}</div>
              <div className="tab">$1,000</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline', marginTop: 10, paddingTop: 8, borderTop: '1px solid var(--divider)' }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 16, fontWeight: 500 }}>{t({ es: 'TOTAL', en: 'TOTAL' }, lang)}</div>
              <div className="display tab" style={{ fontSize: 26 }}>$4,820</div>
            </div>
          </div>

          {/* signatures */}
          <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            <div>
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'FIRMADO POR LA CASA', en: 'SIGNED FOR THE HOUSE' }, lang)}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, fontStyle: 'italic', marginTop: 16 }}>Erick R.</div>
              <div className="codex tab" style={{ marginTop: 2, color: 'var(--ink-muted)' }}>09 MAR 2026</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'FIRMADO POR EL CLIENTE', en: 'SIGNED BY OWNER' }, lang)}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, fontStyle: 'italic', marginTop: 16 }}>María Peña</div>
              <div className="codex tab" style={{ marginTop: 2, color: 'var(--ink-muted)' }}>09 MAR 2026</div>
            </div>
          </div>
        </div>

        <div style={{ height: 30 }} />
        <MTabBar12 active="docs" />
      </div>
    </div>
  );
}

/* ── MOBILE · SIGN IN ─────────────────────────────────────
   The only screen where Orinova asks for something. Quiet, generous.
*/

function MobileSignIn() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page m-page">
      <div className="page-scroll hide-scroll" style={{ paddingBottom: 40 }}>
        <MStatusBar12 />
        <div className="m-topbar" style={{ borderBottom: 0 }}>
          <span />
          <div className="m-title">DreamValley</div>
          <div className="m-action">{t({ es: 'ES · EN', en: 'ES · EN' }, lang)}</div>
        </div>

        <section style={{ padding: '60px 22px 0' }}>
          <Eyebrow12>{t({ es: 'TU CUENTA', en: 'YOUR ACCOUNT' }, lang)}</Eyebrow12>
          <h1 className="display" style={{ fontSize: 44, lineHeight: 0.98, margin: '8px 0 6px', letterSpacing: '-0.025em' }}>
            {t({ es: 'Entra.', en: 'Sign in.' }, lang)}
          </h1>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.5, color: 'var(--ink-soft)', margin: 0 }}>
            {t({
              es: 'Aquí vives tus obras, tus facturas y tu garantía.',
              en: 'Here is where your jobs, invoices and warranty live.'
            }, lang)}
          </p>
        </section>

        <section style={{ padding: '32px 22px 0' }}>
          <div className="field">
            <label className="field-label">{t({ es: 'TELÉFONO O CORREO', en: 'PHONE OR EMAIL' }, lang)}</label>
            <input className="field-input" placeholder="(951) 555-0148" style={{ fontSize: 16, padding: '14px 16px' }} />
          </div>
          <div className="field" style={{ marginTop: 14 }}>
            <label className="field-label">{t({ es: 'CONTRASEÑA', en: 'PASSWORD' }, lang)}</label>
            <input className="field-input" type="password" defaultValue="••••••••" style={{ fontSize: 16, padding: '14px 16px' }} />
          </div>

          <a className="btn btn-primary" style={{ width: '100%', marginTop: 20, padding: '16px', fontSize: 16 }}>
            {t({ es: 'Entrar →', en: 'Sign in →' }, lang)}
          </a>
          <div style={{ textAlign: 'center', marginTop: 12 }}>
            <a className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'OLVIDÉ LA CONTRASEÑA', en: 'FORGOT PASSWORD' }, lang)}</a>
          </div>
        </section>

        <section style={{ padding: '32px 22px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 12 }}>
            <div style={{ height: 1, background: 'var(--divider)' }} />
            <div className="codex" style={{ color: 'var(--ink-muted)', textAlign: 'center' }}>O</div>
            <div style={{ height: 1, background: 'var(--divider)' }} />
          </div>
          <a className="btn btn-ghost" style={{ width: '100%', marginTop: 16, padding: '14px', fontSize: 15 }}>
            {t({ es: 'Recibir código por mensaje', en: 'Get a text code' }, lang)}
          </a>
          <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 13.5, color: 'var(--ink-muted)', marginTop: 14, textAlign: 'center', lineHeight: 1.5 }}>
            {t({
              es: 'No vendemos tu número. No mandamos publicidad.',
              en: 'We don\u2019t sell your number. We don\u2019t market to you.'
            }, lang)}
          </p>
        </section>

        <div className="m-home-indicator" />
      </div>
    </div>
  );
}

function Eyebrow12({ children }) {
  return <div className="eyebrow">{children}</div>;
}

/* ── MOBILE · FOREMAN DAY (internal) ─────────────────────
   Today's roster on a foreman's phone. Built for thumbs at 7am.
*/

function MobileForemanDay() {
  const t = window.t;
  const { lang } = window.useLang();
  const stops = [
    { c: 'DV-0431', a: '1428 Magnolia · Riverside', from: '07:30', to: '11:30', kind: { es: 'pintura int · día 2', en: 'int. paint · day 2' }, crew: 'Luis · Andrés · Beto', now: true },
    { c: 'DV-0430', a: '14 Hibiscus · Norco',       from: '12:30', to: '15:00', kind: { es: 'fascia · día 2 de 3',   en: 'fascia · day 2 of 3' },   crew: 'Mateo · Diego' },
    { c: 'DV-0429', a: '821 Pine St · Corona',      from: '15:30', to: '17:00', kind: { es: 'caminata final', en: 'final walk-through' }, crew: 'Luis · ' + (lang === 'es' ? 'cliente Sra. R.' : 'client Mrs. R.') },
  ];
  return (
    <div className="page m-page">
      <div className="page-scroll hide-scroll" style={{ paddingBottom: 80 }}>
        <MStatusBar12 />
        <MTopBar12 title={t({ es: 'Día de hoy · Luis', en: 'Today · Luis' }, lang)} action="3 / 3" />

        <section style={{ padding: '18px 22px 0' }}>
          <div className="codex" style={{ color: 'var(--terracotta)' }}>{t({ es: 'MARTES · 17 MAR · 4 OBRAS', en: 'TUE · MAR 17 · 4 JOBS' }, lang)}</div>
          <h1 className="display" style={{ fontSize: 28, lineHeight: 1.05, margin: '6px 0 4px', letterSpacing: '-0.02em' }}>
            {t({ es: 'Llegada · 07:30 · Magnolia.', en: 'Arrival · 07:30 · Magnolia.' }, lang)}
          </h1>
          <div className="codex">{t({ es: 'CLIMA · 64°F · NUBOSO · 0% LLUVIA', en: 'WEATHER · 64°F · CLOUDY · 0% RAIN' }, lang)}</div>
        </section>

        <section style={{ padding: '18px 18px 0' }}>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
            {stops.map((s, i) => (
              <li key={s.c} style={{
                background: s.now ? 'var(--ink)' : 'var(--paper-elevated)',
                color: s.now ? 'var(--paper)' : 'var(--ink)',
                border: '1px solid ' + (s.now ? 'var(--ink)' : 'var(--divider)'),
                borderRadius: 14,
                padding: 14,
                marginBottom: 10,
              }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'baseline', gap: 10 }}>
                  <div className="codex tab" style={{ color: s.now ? 'rgba(245,240,232,0.7)' : 'var(--ink-muted)' }}>{s.from} – {s.to}</div>
                  <div className="codex" style={{ color: s.now ? 'var(--paper-cream)' : 'var(--terracotta)' }}>{s.c}</div>
                  <div className="codex" style={{ color: s.now ? 'var(--paper-cream)' : 'var(--ink-muted)' }}>{String(i+1).padStart(2,'0')}/0{stops.length}</div>
                </div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 6, lineHeight: 1.2 }}>{s.a}</div>
                <div style={{ fontSize: 12.5, marginTop: 4, color: s.now ? 'rgba(245,240,232,0.8)' : 'var(--ink-soft)' }}>{t(s.kind, lang)} · {s.crew}</div>
                {s.now && (
                  <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
                    <button style={btnInverse}>{t({ es: 'INDICAC.', en: 'NAV' }, lang)}</button>
                    <button style={btnInverse}>{t({ es: 'CLIENTE', en: 'CLIENT' }, lang)}</button>
                    <button style={btnInverse}>{t({ es: 'FOTO', en: 'PHOTO' }, lang)}</button>
                  </div>
                )}
              </li>
            ))}
          </ul>
        </section>

        <section style={{ padding: '18px 22px 0' }}>
          <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'ALERTAS', en: 'FLAGS' }, lang)}</div>
          <div className="m-card" style={{ marginTop: 8, padding: 12 }}>
            <div className="codex" style={{ color: 'var(--terracotta)' }}>{t({ es: 'OJO', en: 'HEADS UP' }, lang)}</div>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14, lineHeight: 1.45, margin: '4px 0 0', color: 'var(--ink)' }}>
              {t({
                es: 'Sra. Peña pidió entrar por atrás. La perra (Negrita) ladra pero no muerde.',
                en: 'Mrs. Peña asked us to come in from the back. Dog (Negrita) barks but doesn\u2019t bite.'
              }, lang)}
            </p>
          </div>
        </section>

        <div style={{ height: 30 }} />
        <MTabBar12 active="job" />
      </div>
    </div>
  );
}

const btnInverse = {
  background: 'transparent',
  color: 'var(--paper)',
  border: '1px solid rgba(245,240,232,0.4)',
  borderRadius: 999,
  padding: '8px 10px',
  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em',
  cursor: 'pointer',
};

/* ── MOBILE · FOREMAN JOB SHEET ──────────────────────────
   Single job in detail, with checklist that a foreman can tap.
*/

function MobileForemanJob() {
  const t = window.t;
  const { lang } = window.useLang();
  const [done, setDone] = React.useState({ a: true, b: true, c: false, d: false, e: false });
  const toggle = (k) => setDone(d => ({ ...d, [k]: !d[k] }));

  const items = [
    { k: 'a', t: { es: 'Plástico y enmascarado', en: 'Plastic + masking' },          time: '07:30' },
    { k: 'b', t: { es: 'Primer en pared norte',  en: 'Primer · north wall' },        time: '09:00' },
    { k: 'c', t: { es: 'Primer en pared este',   en: 'Primer · east wall' },         time: '10:30' },
    { k: 'd', t: { es: 'Foto del día',           en: 'Daily photo' },                time: '15:30' },
    { k: 'e', t: { es: 'Caminata con cliente',   en: 'Walk-through with client' },   time: '16:00' },
  ];
  const completed = items.filter(i => done[i.k]).length;

  return (
    <div className="page m-page">
      <div className="page-scroll hide-scroll" style={{ paddingBottom: 80 }}>
        <MStatusBar12 />
        <MTopBar12 title="DV-0431" action={completed + '/' + items.length} />

        <section style={{ padding: '18px 22px 0' }}>
          <div className="codex" style={{ color: 'var(--terracotta)' }}>{t({ es: 'OBRA · DÍA 2 DE 4', en: 'JOB · DAY 2 OF 4' }, lang)}</div>
          <h1 className="display" style={{ fontSize: 26, lineHeight: 1.05, margin: '6px 0 4px', letterSpacing: '-0.02em' }}>1428 Magnolia · Riverside</h1>
          <div className="codex">{t({ es: 'CLIENTE · MARÍA PEÑA · (951) 555-0224', en: 'CLIENT · MARÍA PEÑA · (951) 555-0224' }, lang)}</div>
        </section>

        {/* spec card */}
        <section style={{ padding: '14px 22px 0' }}>
          <div className="m-card">
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'ESPECIFICACIÓN', en: 'SPEC' }, lang)}</div>
            <dl style={{ margin: '6px 0 0' }}>
              <div className="spec-row"><dt>PINTURA</dt><dd>DE6371 Riverbed · eggshell</dd></div>
              <div className="spec-row"><dt>TRIM</dt><dd>DE6196 Linen · semigloss</dd></div>
              <div className="spec-row"><dt>{t({ es: 'CUARTOS', en: 'ROOMS' }, lang)}</dt><dd>3 br + sala + comedor</dd></div>
            </dl>
          </div>
        </section>

        {/* checklist */}
        <section style={{ padding: '20px 22px 0' }}>
          <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'HOY · MARCA CUANDO TERMINES', en: 'TODAY · TAP TO MARK DONE' }, lang)}</div>
          <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none' }}>
            {items.map((it) => {
              const isDone = done[it.k];
              return (
                <li key={it.k} onClick={() => toggle(it.k)} style={{
                  display: 'grid', gridTemplateColumns: '36px 1fr auto', gap: 12,
                  padding: '14px 0', borderBottom: '1px solid var(--divider)',
                  cursor: 'pointer', alignItems: 'center',
                }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 8,
                    border: '1.5px solid ' + (isDone ? 'var(--olive)' : 'var(--divider-strong)'),
                    background: isDone ? 'var(--olive)' : 'transparent',
                    color: 'var(--paper)',
                    display: 'grid', placeItems: 'center',
                    fontFamily: 'var(--mono)', fontSize: 14,
                  }}>{isDone ? '✓' : ''}</div>
                  <div style={{
                    fontFamily: 'var(--serif)', fontSize: 16,
                    color: isDone ? 'var(--ink-muted)' : 'var(--ink)',
                    textDecoration: isDone ? 'line-through' : 'none',
                  }}>{t(it.t, lang)}</div>
                  <div className="codex tab" style={{ color: 'var(--ink-muted)' }}>{it.time}</div>
                </li>
              );
            })}
          </ul>
        </section>

        <section style={{ padding: '22px 22px 0' }}>
          <a className="btn btn-primary" style={{ width: '100%', padding: '14px', fontSize: 15 }}>
            {t({ es: 'Subir foto del día →', en: 'Upload daily photo →' }, lang)}
          </a>
        </section>

        <div style={{ height: 30 }} />
        <MTabBar12 active="job" />
      </div>
    </div>
  );
}

/* ── MOBILE · TRUISM (Holzer on a phone) ──────────────────
   Full-bleed black, one statement per screen, swipe via buttons.
*/

const M_TRUISMS = [
  { es: 'EL ESTIMADO HONESTO ES UN ACTO POLÍTICO.',                                   en: 'AN HONEST ESTIMATE IS A POLITICAL ACT.' },
  { es: 'LA PRISA ES CORRUPCIÓN.',                                                    en: 'HURRY IS CORRUPTION.' },
  { es: 'EL SILENCIO DEL TRABAJADOR ES OTRO TIPO DE LENGUAJE.',                       en: 'THE WORKER\u2019S SILENCE IS A LANGUAGE.' },
  { es: 'SI NO PUEDE DECIRSE EN VOZ ALTA, NO DEBE FIRMARSE.',                          en: 'IF YOU CAN\u2019T SAY IT OUT LOUD, DON\u2019T SIGN IT.' },
];

function MobileTruism() {
  const t = window.t;
  const { lang } = window.useLang();
  const [i, setI] = React.useState(0);
  const truth = M_TRUISMS[i];
  return (
    <div className="page m-page" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="page-scroll hide-scroll" style={{
        display: 'grid', gridTemplateRows: 'auto 1fr auto',
        padding: '0 22px 16px',
      }}>
        <div style={{ color: 'var(--paper)' }}>
          <div className="m-statusbar" style={{ color: 'var(--paper)' }}>
            <div className="m-statusbar-clock">9:41</div>
            <div className="m-statusbar-notch" />
            <div className="m-statusbar-icons" style={{ color: 'var(--paper)' }}>
              <span style={{ marginRight: 4 }}>5G</span>
              <span style={{ marginRight: 4 }}>●●●●</span>
              <span>100</span>
            </div>
          </div>
          <div style={{ borderBottom: '1px solid rgba(245,240,232,0.2)', padding: '12px 0 14px', display: 'grid', gridTemplateColumns: '1fr auto 1fr' }}>
            <div className="codex" style={{ color: 'rgba(245,240,232,0.55)' }}>ORINOVA · TRUISMS</div>
            <div className="codex" style={{ color: 'rgba(245,240,232,0.55)' }}>NO. {['I','II','III','IV'][i]}</div>
            <div className="codex" style={{ textAlign: 'right', color: 'rgba(245,240,232,0.55)' }}>{i+1}/4</div>
          </div>
        </div>

        <div style={{ display: 'grid', alignItems: 'center', padding: '32px 0' }}>
          <h1 style={{
            fontFamily: 'var(--serif)', fontWeight: 600,
            fontSize: 54, lineHeight: 0.96, letterSpacing: '-0.03em',
            margin: 0,
            color: 'var(--paper)',
            textWrap: 'balance',
          }}>{t({ es: truth.es, en: truth.en }, lang)}</h1>

          <div style={{ marginTop: 28, display: 'flex', alignItems: 'baseline', gap: 12, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', color: 'rgba(245,240,232,0.55)' }}>
            <span style={{ width: 36, height: 1, background: 'rgba(245,240,232,0.4)' }} />
            {t({ es: 'CITAR LIBREMENTE', en: 'QUOTE FREELY' }, lang)}
          </div>
        </div>

        {/* swipe */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', paddingTop: 14, borderTop: '1px solid rgba(245,240,232,0.2)' }}>
          <button onClick={() => setI((i + M_TRUISMS.length - 1) % M_TRUISMS.length)} style={{
            background: 'transparent', color: 'var(--paper)', border: '1px solid rgba(245,240,232,0.3)', borderRadius: 999, padding: '10px 14px',
            fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', cursor: 'pointer', textAlign: 'left',
          }}>← {t({ es: 'ANT.', en: 'PREV' }, lang)}</button>
          <div style={{ display: 'flex', gap: 6, justifyContent: 'center' }}>
            {M_TRUISMS.map((_, k) => (
              <span key={k} style={{
                width: 6, height: 6, borderRadius: 3,
                background: k === i ? 'var(--terracotta)' : 'rgba(245,240,232,0.25)',
              }} />
            ))}
          </div>
          <button onClick={() => setI((i + 1) % M_TRUISMS.length)} style={{
            background: 'transparent', color: 'var(--paper)', border: '1px solid rgba(245,240,232,0.3)', borderRadius: 999, padding: '10px 14px',
            fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em', cursor: 'pointer', textAlign: 'right',
          }}>{t({ es: 'SIG.', en: 'NEXT' }, lang)} →</button>
        </div>
      </div>
    </div>
  );
}

/* ── MOBILE · BROADSIDE (vertical newspaper) ──────────────
   The front page reflowed for the phone. Single column,
   massive masthead, drop cap on first paragraph.
*/

function MobileBroadside() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page m-page" style={{ background: 'var(--paper-form)' }}>
      <div className="page-scroll hide-scroll" style={{ paddingBottom: 40 }}>
        <MStatusBar12 />
        <div style={{ padding: '4px 22px 24px', fontFamily: 'var(--serif)', color: 'var(--ink)' }}>

          {/* dateline strip */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            alignItems: 'baseline', borderBottom: '1px solid var(--ink)', paddingBottom: 8,
            fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase',
          }}>
            <div>VOL. I · NO. 01</div>
            <div style={{ textAlign: 'right', color: 'var(--ink-muted)' }}>MMXXVI</div>
          </div>

          {/* masthead */}
          <h1 style={{
            fontFamily: 'var(--serif)', fontWeight: 600,
            fontSize: 74, lineHeight: 0.86, letterSpacing: '-0.04em',
            textAlign: 'center', margin: '14px 0 6px',
          }}>Orinova</h1>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            alignItems: 'baseline', paddingTop: 6, paddingBottom: 6,
            borderTop: '4px solid var(--ink)', borderBottom: '1px solid var(--ink)',
            fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase',
          }}>
            <div>{t({ es: 'MARTES 17 MARZO', en: 'TUESDAY MAR 17' }, lang)}</div>
            <div style={{ textAlign: 'right' }}>{t({ es: '4 OBRAS HOY', en: '4 JOBS TODAY' }, lang)}</div>
          </div>

          {/* kicker + headline */}
          <div className="codex" style={{ marginTop: 16, color: 'var(--terracotta)' }}>
            {t({ es: 'EL HOMBRE QUE ESCRIBE EL ESTIMADO PRIMERO', en: 'THE MAN WHO WRITES THE ESTIMATE FIRST' }, lang)}
          </div>
          <h2 style={{
            fontFamily: 'var(--serif)', fontWeight: 600,
            fontSize: 38, lineHeight: 0.95, letterSpacing: '-0.025em',
            margin: '8px 0 12px',
          }}>
            {t({ es: 'Por qué una casa de oficios deja de ser un riesgo.', en: 'Why a trade shop stops being a risk.' }, lang)}
          </h2>
          <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 15, lineHeight: 1.45, color: 'var(--ink-soft)', margin: 0 }}>
            {t({
              es: 'En el Inland Empire, donde el ochenta por ciento de los pintores son “primos de un primo”, Orinova decidió que cada palabra dicha en la sala de un cliente cabría también en una hoja firmada.',
              en: 'In the Inland Empire, where eighty per cent of painters are “a cousin\u2019s cousin,” Orinova decided every word spoken in a client\u2019s living room would also fit on a signed sheet.'
            }, lang)}
          </p>

          <div style={{ height: 1, background: 'var(--ink)', margin: '18px 0 14px' }} />

          {/* lead with drop cap */}
          <p style={{ fontSize: 14, lineHeight: 1.55, textAlign: 'justify', hyphens: 'auto', margin: 0 }}>
            <span style={{
              fontFamily: 'var(--serif)', fontWeight: 600,
              fontSize: 64, float: 'left',
              lineHeight: 0.85, marginRight: 8, marginTop: 4,
              color: 'var(--terracotta)',
            }}>{lang === 'es' ? 'M' : 'I'}</span>
            {t({
              es: 'i padre pintaba casas en Riverside los sábados. Yo cargaba el plástico. Aprendí inglés antes que él porque tuve que traducir presupuestos a clientes que no sabían leer el suyo.',
              en: 'first watched my father paint houses in Riverside on Saturdays. I carried the plastic. I learned English before he did because I had to translate quotes to clients who couldn\u2019t read their own.'
            }, lang)}
          </p>
          <p style={{ fontSize: 14, lineHeight: 1.55, textAlign: 'justify', hyphens: 'auto', margin: '8px 0 0' }}>
            {t({
              es: 'Empecé Orinova porque vi demasiados estimados escritos a lápiz en la cajuela de una troca. Nosotros lo escribimos primero. Después pintamos.',
              en: 'I started Orinova because I saw too many estimates written in pencil on a truck tailgate. We write it first. Then we paint.'
            }, lang)}
          </p>

          {/* pull quote */}
          <blockquote style={{
            margin: '20px 0',
            fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 500,
            fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.01em',
            borderTop: '1px solid var(--divider-strong)',
            borderBottom: '1px solid var(--divider-strong)',
            padding: '14px 0',
          }}>
            <span style={{ color: 'var(--terracotta)', fontStyle: 'normal' }}>“ </span>
            {t({
              es: 'Si rompemos una de estas cinco, dilo. Lo arreglamos antes de cobrar.',
              en: 'If we break one of these five, say so. We fix it before we collect.'
            }, lang)}
            <span style={{ color: 'var(--terracotta)', fontStyle: 'normal' }}> ”</span>
          </blockquote>
          <div className="codex" style={{ color: 'var(--ink-muted)' }}>— ERICK R. · {t({ es: 'FUNDADOR', en: 'FOUNDER' }, lang)}</div>

          {/* page bottom */}
          <div style={{
            marginTop: 22, paddingTop: 8,
            borderTop: '4px solid var(--ink)',
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.16em',
            color: 'var(--ink-muted)', textTransform: 'uppercase',
          }}>
            <div>CSLB #1098432</div>
            <div style={{ textAlign: 'right' }}>{t({ es: 'PÁG. 01', en: 'PG. 01' }, lang)}</div>
          </div>
        </div>
        <div className="m-home-indicator" />
      </div>
    </div>
  );
}

window.OrinovaPages12 = {
  MobileHelp,
  MobileEstimateDoc,
  MobileSignIn,
  MobileForemanDay,
  MobileForemanJob,
  MobileTruism,
  MobileBroadside,
};