/* Orinova Portal — pages5.jsx
   Trust + access surface:
     · ServiceAreaMap — coverage by zip, lead times, schematic map
     · HelpCenter     — FAQ grouped by topic, anchored TOC
     · MobileDashboard— phone-sized account view (390 × 844)
*/

const ATOMS5 = window.OrinovaAtoms;

/* ── SERVICE AREA — coverage map + zip ledger ─────────────── */

// Schematic IE map — abstract polygons, NOT a real map outline.
// Three concentric rings show same-week / next-week / two-week.
function CoverageDiagram() {
  return (
    <svg viewBox="0 0 520 360" style={{ width: '100%', height: 'auto', display: 'block' }}>
      <defs>
        <pattern id="hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(26,26,26,0.10)" strokeWidth="1" />
        </pattern>
      </defs>

      {/* hatched ground */}
      <rect width="520" height="360" fill="url(#hatch)" opacity="0.55" />

      {/* ring 3 — two weeks */}
      <ellipse cx="240" cy="180" rx="220" ry="140" fill="none" stroke="var(--ink-muted)" strokeWidth="0.8" strokeDasharray="3 5" />
      {/* ring 2 — next week */}
      <ellipse cx="240" cy="180" rx="150" ry="100" fill="none" stroke="var(--ink-soft)" strokeWidth="1" strokeDasharray="4 4" />
      {/* ring 1 — same week */}
      <ellipse cx="240" cy="180" rx="80" ry="58" fill="none" stroke="var(--terracotta)" strokeWidth="1.4" />

      {/* dots */}
      {[
        { x: 240, y: 180, big: true, label: 'Riverside · HQ' },
        { x: 200, y: 168, label: 'Corona' },
        { x: 198, y: 198, label: 'Norco' },
        { x: 268, y: 156, label: 'Eastvale' },
        { x: 280, y: 200, label: 'Jurupa' },
        { x: 168, y: 220, label: 'Chino' },
        { x: 330, y: 222, label: 'Moreno V.' },
        { x: 110, y: 154, label: 'Ontario' },
        { x: 132, y: 280, label: 'Yorba Linda' },
        { x: 386, y: 130, label: 'Rancho Cuc.' },
        { x: 410, y: 250, label: 'Redlands' },
        { x: 60, y: 230, label: 'Brea' },
        { x: 70, y: 100, label: 'Pomona' },
        { x: 462, y: 180, label: 'Banning' },
      ].map((p, i) => (
        <g key={i}>
          <circle cx={p.x} cy={p.y} r={p.big ? 5 : 3} fill={p.big ? 'var(--terracotta)' : 'var(--ink)'} />
          <text x={p.x + 7} y={p.y + 3} fontFamily="var(--mono)" fontSize="9" fill="var(--ink-soft)" style={{ letterSpacing: '0.06em' }}>{p.label}</text>
        </g>
      ))}

      {/* legend */}
      <g fontFamily="var(--mono)" fontSize="9" fill="var(--ink-muted)" style={{ letterSpacing: '0.14em', textTransform: 'uppercase' }}>
        <circle cx="20" cy="334" r="3" fill="var(--terracotta)" />
        <text x="30" y="337">SAME WEEK</text>
        <circle cx="140" cy="334" r="3" fill="var(--ink-soft)" />
        <text x="150" y="337">NEXT WEEK</text>
        <circle cx="270" cy="334" r="3" fill="var(--ink-muted)" />
        <text x="280" y="337">TWO WEEKS</text>
      </g>
    </svg>
  );
}

function ServiceAreaMap() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = ATOMS5;
  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: 'Cobertura · Inland Empire', en: 'Coverage · Inland Empire' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 56, margin: '12px 0 12px', maxWidth: 820 }}>
            {t({
              es: 'Manejamos hasta donde sigue siendo trabajo, no chofereo.',
              en: 'We drive as far as it stays work, not commuting.'
            }, lang)}
          </h1>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 720 }}>
            {t({
              es: 'Sede en Riverside. Si tu trabajo está dentro del primer círculo, te podemos empezar esta misma semana. Más lejos, te decimos el día exacto en el estimado.',
              en: 'Home base in Riverside. Inside the first ring, we can start this week. Further out, we name the exact date on your estimate.'
            }, lang)}
          </p>
        </section>

        <section style={{ maxWidth: 1100, margin: '28px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 28, alignItems: 'start' }}>
          <div style={{ background: 'var(--paper-elevated)', border: '1px solid var(--divider)', padding: 18 }}>
            <CoverageDiagram />
          </div>
          <div>
            <Eyebrow>{t({ es: 'Tiempo de salida típico', en: 'Typical lead time' }, lang)}</Eyebrow>
            <dl style={{ marginTop: 12 }}>
              <div className="spec-row"><dt>{t({ es: 'RIVERSIDE 925··', en: 'RIVERSIDE 925··' }, lang)}</dt><dd className="tab">{t({ es: '3–5 días', en: '3–5 days' }, lang)}</dd></div>
              <div className="spec-row"><dt>CORONA · NORCO 928··</dt><dd className="tab">{t({ es: '3–6 días', en: '3–6 days' }, lang)}</dd></div>
              <div className="spec-row"><dt>EASTVALE · JURUPA 917··</dt><dd className="tab">{t({ es: '4–7 días', en: '4–7 days' }, lang)}</dd></div>
              <div className="spec-row"><dt>MORENO VALLEY 925··</dt><dd className="tab">{t({ es: '5–8 días', en: '5–8 days' }, lang)}</dd></div>
              <div className="spec-row"><dt>ONTARIO · CHINO 917··</dt><dd className="tab">{t({ es: '6–9 días', en: '6–9 days' }, lang)}</dd></div>
              <div className="spec-row"><dt>REDLANDS · BANNING 923··</dt><dd className="tab">{t({ es: '7–10 días', en: '7–10 days' }, lang)}</dd></div>
              <div className="spec-row"><dt>{t({ es: 'COSTA · OC NORTE', en: 'COAST · N. OC' }, lang)}</dt><dd className="tab">{t({ es: '8–12 días', en: '8–12 days' }, lang)}</dd></div>
            </dl>
            <div className="codex" style={{ marginTop: 14, color: 'var(--ink-muted)' }}>
              {t({ es: 'tiempos contados desde firma del estimado', en: 'measured from estimate signing' }, lang)}
            </div>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Por código postal · 38 ZIPs en el libro', en: 'By zip code · 38 ZIPs on the books' }, lang)}</Eyebrow>
          <div style={{
            marginTop: 12,
            display: 'grid',
            gridTemplateColumns: 'repeat(8, 1fr)',
            gap: 6,
            fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em',
          }}>
            {[
              '92501','92503','92504','92505','92506','92507','92508','92509',
              '92518','92551','92553','92555','92557','92571','92583','92584',
              '91752','91758','91761','91762','91764','91708','91710','91720',
              '91760','92879','92880','92881','92882','92883','92860','92886',
              '92223','92220','92240','92373','92374','92376',
            ].map((z, i) => (
              <div key={i} style={{
                padding: '8px 10px',
                background: 'var(--paper-elevated)',
                border: '1px solid var(--divider)',
                textAlign: 'center',
                color: 'var(--ink-soft)',
              }}>{z}</div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div className="card">
            <Eyebrow>{t({ es: 'Fuera del mapa', en: 'Off the map' }, lang)}</Eyebrow>
            <p style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.6, marginTop: 8 }}>
              {t({
                es: 'Si tu casa está más lejos, llámanos. Para obras grandes (sobre $25,000) viajamos a Palm Desert, Big Bear, San Diego norte. Cobramos el manejo por separado, escrito.',
                en: 'Further out, call us. For larger jobs (over $25,000) we travel to Palm Desert, Big Bear, north San Diego. Drive is billed separately, in writing.'
              }, lang)}
            </p>
          </div>
          <div className="card">
            <Eyebrow>{t({ es: 'Lo que no hacemos', en: 'What we don\u2019t do' }, lang)}</Eyebrow>
            <p style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.6, marginTop: 8 }}>
              {t({
                es: 'Edificios comerciales sobre 4 pisos. HOA grandes sin contrato escrito. Trabajo que requiere unión sin contrato pre-acordado. Te decimos rápido para no perder tu tiempo.',
                en: 'Commercial buildings over 4 stories. Large HOAs without a written contract. Union-required work without a pre-arranged contract. We say no fast so we don\u2019t waste your time.'
              }, lang)}
            </p>
          </div>
        </section>

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

/* ── HELP CENTER — FAQ grouped by topic ───────────────────── */

const FAQ_GROUPS = [
  {
    code: '01',
    title: { es: 'Estimados y precio', en: 'Estimates and pricing' },
    qs: [
      {
        q: { es: '¿Cuánto cuesta un estimado?', en: 'How much does an estimate cost?' },
        a: {
          es: 'Nada. Visita en sitio, medición, recomendación de pintura, escrito en papel y por correo. Tienes 30 días para decidir, sin presión.',
          en: 'Nothing. On-site visit, measurements, paint recommendation, written on paper and emailed. You have 30 days to decide, no pressure.'
        }
      },
      {
        q: { es: '¿Por qué un estimado puede subir?', en: 'Why might an estimate change?' },
        a: {
          es: 'Solo por cosas que descubrimos al abrir la pared o quitar el plástico — madera podrida, humedad escondida, mucho parchado. Si pasa, paramos, te llamamos, escribimos el cambio y lo firmas antes de seguir.',
          en: 'Only for things we find once we open the wall or pull plastic — rotten wood, hidden moisture, heavy patching. If it happens we stop, call you, write the change order, and you sign before we continue.'
        }
      },
      {
        q: { es: '¿Aceptan tarjeta?', en: 'Do you take cards?' },
        a: { es: 'Sí — Visa, MC, Amex, ACH. Sin recargo bajo $10,000. Sobre eso, ACH o cheque para evitar el fee del 2.9%.', en: 'Yes — Visa, MC, Amex, ACH. No surcharge under $10,000. Above that, ACH or check to avoid the 2.9% fee.' }
      },
    ],
  },
  {
    code: '02',
    title: { es: 'Programa y cuadrilla', en: 'Schedule and crew' },
    qs: [
      {
        q: { es: '¿Cuándo pueden empezar?', en: 'When can you start?' },
        a: {
          es: 'Riverside / Corona / Norco: misma semana. Más lejos: 1–2 semanas. Te damos la fecha exacta en el estimado escrito, no “entre las 9 y las 3”.',
          en: 'Riverside / Corona / Norco: same week. Further out: 1–2 weeks. We give an exact date on the written estimate, not a 9-to-3 window.'
        }
      },
      {
        q: { es: '¿Quién aparece a mi casa?', en: 'Who shows up at my house?' },
        a: { es: 'Foreman + 2–4 pintores. Mismas caras todos los días del trabajo. Camisa con su nombre, ID con foto. Erick visita el primer día y el último.', en: 'Foreman + 2–4 painters. Same faces every day of the job. Name on the shirt, photo ID. Erick walks the first and last day.' }
      },
      {
        q: { es: '¿Trabajan los sábados?', en: 'Do you work Saturdays?' },
        a: { es: 'Sí, 8–14. Domingos no — la cuadrilla descansa. Las emergencias (fuga de agua, vandalismo) son aparte.', en: 'Yes, 8–2. Sundays no — the crew rests. Emergencies (water leak, vandalism) are separate.' }
      },
    ],
  },
  {
    code: '03',
    title: { es: 'Después del trabajo', en: 'After the work' },
    qs: [
      {
        q: { es: '¿Qué pasa si veo algo mal una semana después?', en: 'What if I see a problem a week later?' },
        a: { es: 'Nos llamas, viene un foreman dentro de 7 días hábiles. Si cae bajo garantía, lo arreglamos sin costo. Si no, te decimos por qué, escrito.', en: 'Call us, a foreman is on-site within 7 business days. If it\u2019s warranty, we fix it at no charge. If not, we tell you why, in writing.' }
      },
      {
        q: { es: '¿Me dejan pintura extra?', en: 'Do you leave touch-up paint?' },
        a: { es: 'Sí — un galón etiquetado con cuarto, color, marca y código, sellado. Lo dejamos donde tú nos digas. Te dura 18 meses bien guardada.', en: 'Yes — one gallon labeled with room, color, brand, code, sealed. We leave it where you say. Keeps 18 months stored cool.' }
      },
    ],
  },
];

function HelpCenter() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = ATOMS5;
  const [open, setOpen] = React.useState({ '01-0': true });
  const k = (gi, qi) => gi + '-' + qi;
  const toggle = (key) => setOpen(o => ({ ...o, [key]: !o[key] }));

  return (
    <div className="page">
      <Nav active="services" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 980, margin: '0 auto', padding: '46px 36px 0' }}>
          <Eyebrow>{t({ es: 'Centro de ayuda', en: 'Help center' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 56, margin: '12px 0 12px', maxWidth: 720 }}>
            {t({ es: 'Preguntas que la gente sí pregunta.', en: 'Questions people actually ask.' }, lang)}
          </h1>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 640 }}>
            {t({
              es: 'Si la respuesta que buscas no está aquí, llama o escribe. No tenemos un chatbot — te contesta una persona, en el idioma que prefieras.',
              en: 'If your question isn\u2019t here, call or write. No chatbot — a person answers, in the language you prefer.'
            }, lang)}
          </p>
        </section>

        <section style={{ maxWidth: 980, margin: '32px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '180px 1fr', gap: 36, alignItems: 'start' }}>
          <nav style={{ position: 'sticky', top: 80 }}>
            <Eyebrow>{t({ es: 'Saltar a', en: 'Jump to' }, lang)}</Eyebrow>
            <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none' }}>
              {FAQ_GROUPS.map((g) => (
                <li key={g.code} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)' }}>
                  <a href={'#faq-' + g.code} style={{ display: 'grid', gridTemplateColumns: '28px 1fr', gap: 8, textDecoration: 'none', color: 'var(--ink-soft)', fontSize: 13 }}>
                    <span className="codex" style={{ color: 'var(--terracotta)' }}>{g.code}</span>
                    <span>{t(g.title, lang)}</span>
                  </a>
                </li>
              ))}
            </ul>
          </nav>

          <div>
            {FAQ_GROUPS.map((g, gi) => (
              <div key={g.code} id={'faq-' + g.code} style={{ marginBottom: 36 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 10, alignItems: 'baseline', borderBottom: '1px solid var(--divider-strong)', paddingBottom: 10 }}>
                  <span className="codex" style={{ color: 'var(--terracotta)' }}>{g.code}</span>
                  <h2 className="display" style={{ fontSize: 24, margin: 0 }}>{t(g.title, lang)}</h2>
                </div>
                <ul style={{ margin: '6px 0 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', cursor: 'pointer',
                          background: 'transparent', border: 0,
                          padding: '16px 0', display: 'grid', gridTemplateColumns: '1fr 28px', gap: 10, alignItems: 'baseline',
                          fontFamily: 'var(--serif)', fontSize: 17, 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 16px', fontSize: 14, lineHeight: 1.65, color: 'var(--ink-soft)', maxWidth: 640 }}>
                            {t(row.a, lang)}
                          </p>
                        )}
                      </li>
                    );
                  })}
                </ul>
              </div>
            ))}

            <div className="card" style={{ marginTop: 12 }}>
              <Eyebrow>{t({ es: 'Tu pregunta no está aquí', en: 'Your question isn\u2019t here' }, lang)}</Eyebrow>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-soft)', marginTop: 8 }}>
                {t({
                  es: 'Llama (951) 555-0148 — L–V 7:00–18:00, SÁB 8:00–14:00. O escribe a hola@dreamvalley.trade y te contesto el mismo día, casi siempre.',
                  en: 'Call (951) 555-0148 — M–F 7:00–6:00, Sat 8:00–2:00. Or write hola@dreamvalley.trade and I answer the same day, almost always.'
                }, lang)}
              </p>
              <div style={{ marginTop: 12, display: 'flex', gap: 10 }}>
                <a className="btn btn-call">(951) 555-0148</a>
                <a className="btn btn-ghost">hola@dreamvalley.trade</a>
              </div>
            </div>
          </div>
        </section>

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

/* ── MOBILE DASHBOARD — phone-sized account view ──────────── */

function MobileDashboard() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page" style={{ fontSize: 14 }}>
      <div className="page-scroll hide-scroll" style={{ paddingBottom: 70 }}>
        {/* status bar / app header */}
        <div style={{
          position: 'sticky', top: 0, zIndex: 4,
          background: 'color-mix(in oklab, var(--paper) 96%, transparent)',
          backdropFilter: 'blur(6px)',
          borderBottom: '1px solid var(--divider)',
          padding: '14px 18px 12px',
          display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 12,
        }}>
          <div>
            <div className="brand-mark" style={{ fontSize: 17 }}>DreamValley</div>
            <div className="codex" style={{ marginTop: 2, color: 'var(--ink-muted)' }}>
              {t({ es: 'CUENTA · MARÍA', en: 'ACCOUNT · MARIA' }, lang)}
            </div>
          </div>
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: 'var(--paper-cream)', border: '1px solid var(--divider-strong)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--ink)',
          }}>M</div>
        </div>

        {/* greeting */}
        <section style={{ padding: '20px 18px 6px' }}>
          <div className="codex" style={{ color: 'var(--ink-muted)' }}>
            {t({ es: 'MARTES 17 MAR', en: 'TUE 17 MAR' }, lang)}
          </div>
          <h1 className="display" style={{ fontSize: 28, margin: '6px 0 4px', lineHeight: 1.05 }}>
            {t({ es: 'Hola María.', en: 'Hi Maria.' }, lang)}
          </h1>
          <p style={{ fontSize: 13.5, color: 'var(--ink-soft)', margin: 0 }}>
            {t({ es: 'Tu obra empieza el lunes 23.', en: 'Your job starts Monday the 23rd.' }, lang)}
          </p>
        </section>

        {/* active job card */}
        <section style={{ padding: '14px 18px 0' }}>
          <div style={{
            background: 'var(--ink)', color: 'var(--paper)',
            padding: 16, borderRadius: 14,
          }}>
            <div className="codex" style={{ color: 'var(--paper-cream)', opacity: 0.7 }}>DV-0431 · INTERIOR PAINT</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 22, margin: '6px 0 8px' }}>1428 Magnolia Ave</div>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
              fontSize: 10, fontFamily: 'var(--mono)',
              letterSpacing: '0.14em', textTransform: 'uppercase',
              marginTop: 10,
            }}>
              {[
                { l: 'EST', v: '✓' },
                { l: 'FIRM', v: '✓' },
                { l: 'PROG', v: '·' },
                { l: 'FIN',  v: '·' },
              ].map((s, i) => (
                <div key={i} style={{ textAlign: i === 0 ? 'left' : 'center', color: s.v === '✓' ? 'var(--paper)' : 'rgba(245,240,232,0.4)' }}>
                  <div>{s.l}</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 16, marginTop: 2 }}>{s.v}</div>
                </div>
              ))}
            </div>
            <div style={{ height: 1, background: 'rgba(245,240,232,0.18)', margin: '14px 0' }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5 }}>
              <span style={{ opacity: 0.7 }}>{t({ es: 'Foreman', en: 'Foreman' }, lang)}</span>
              <span>Luis O.</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginTop: 4 }}>
              <span style={{ opacity: 0.7 }}>{t({ es: 'Llega', en: 'Arrives' }, lang)}</span>
              <span className="tab">7:30 AM</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginTop: 4 }}>
              <span style={{ opacity: 0.7 }}>{t({ es: 'Total', en: 'Total' }, lang)}</span>
              <span className="tab">$4,820</span>
            </div>
          </div>
        </section>

        {/* quick actions */}
        <section style={{ padding: '18px 18px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
            {[
              { l: { es: 'Llamar al foreman', en: 'Call foreman' },        sub: 'Luis O.' },
              { l: { es: 'Ver estimado',      en: 'View estimate' },       sub: 'PDF' },
              { l: { es: 'Pagar saldo',       en: 'Pay balance' },         sub: '$2,820' },
              { l: { es: 'Reagendar',         en: 'Reschedule' },          sub: t({ es: 'sin cargo', en: 'no charge' }, lang) },
            ].map((q, i) => (
              <div key={i} style={{
                background: 'var(--paper-elevated)',
                border: '1px solid var(--divider)',
                padding: 12, borderRadius: 10,
              }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>{t(q.l, lang)}</div>
                <div className="codex" style={{ marginTop: 4, color: 'var(--ink-muted)' }}>{q.sub}</div>
              </div>
            ))}
          </div>
        </section>

        {/* timeline */}
        <section style={{ padding: '22px 18px 0' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <div className="codex">{t({ es: 'CRONOLOGÍA', en: 'TIMELINE' }, lang)}</div>
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'mostrar todo', en: 'show all' }, lang)} →</div>
          </div>
          <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none' }}>
            {[
              { d: 'TUE 17 MAR', t: { es: 'Recordatorio: muebles fuera de las paredes el domingo.', en: 'Reminder: move furniture off walls by Sunday.' }, k: { es: 'aviso', en: 'reminder' } },
              { d: 'FRI 13 MAR', t: { es: 'Foreman confirmado. Luis O. llega 7:30 AM lunes.', en: 'Foreman confirmed. Luis O. arrives 7:30 AM Monday.' }, k: { es: 'sistema', en: 'system' } },
              { d: 'WED 11 MAR', t: { es: 'Depósito recibido — $2,000. Gracias.', en: 'Deposit received — $2,000. Thank you.' }, k: { es: 'pago', en: 'payment' } },
              { d: 'MON 09 MAR', t: { es: 'Estimado firmado por María R.', en: 'Estimate signed by Maria R.' }, k: { es: 'documento', en: 'document' } },
            ].map((e, i) => (
              <li key={i} style={{
                padding: '12px 0',
                borderBottom: '1px solid var(--divider)',
                display: 'grid', gridTemplateColumns: '74px 1fr', gap: 10,
              }}>
                <div>
                  <div className="codex tab" style={{ color: 'var(--ink-muted)' }}>{e.d}</div>
                  <div className="codex" style={{ marginTop: 2, color: 'var(--terracotta)' }}>{t(e.k, lang)}</div>
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.45 }}>{t(e.t, lang)}</div>
              </li>
            ))}
          </ul>
        </section>

        <div style={{ height: 30 }} />

        {/* tab bar */}
        <div style={{
          position: 'fixed', bottom: 0, left: 0, right: 0,
          background: 'color-mix(in oklab, var(--paper) 96%, transparent)',
          backdropFilter: 'blur(6px)',
          borderTop: '1px solid var(--divider)',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          padding: '10px 0 14px',
          fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
        }}>
          {[
            { l: { es: 'OBRA', en: 'JOB' }, on: true },
            { l: { es: 'DOCS', en: 'DOCS' } },
            { l: { es: 'PAGOS', en: 'PAY' } },
            { l: { es: 'AYUDA', en: 'HELP' } },
          ].map((tab, i) => (
            <div key={i} style={{ textAlign: 'center', color: tab.on ? 'var(--ink)' : 'var(--ink-muted)' }}>
              <div style={{ width: 6, height: 6, background: tab.on ? 'var(--terracotta)' : 'transparent', borderRadius: '50%', margin: '0 auto 6px' }} />
              {t(tab.l, lang)}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.OrinovaPages5 = {
  ServiceAreaMap,
  HelpCenter,
  MobileDashboard,
};
