/* Orinova Operations Portal — work-only.
   Orinova: operating group sitting above the trade brands.
   DreamValley Trade Solutions: paint / drywall / repairs in the Inland Empire.

   No book, no album, no press references. This is a working portal:
   marketing surfaces, estimate intake, partner pages, financing, and a
   member account that spans both houses.

   Globals consumed from window:
     useLang(), t({ es, en }, lang), Slot, Eyebrow, LangPill, Nav, Foot
*/

const SERVICES = [
  {
    es: 'Pintura interior y exterior',
    en: 'Interior & exterior paint',
    detail: {
      es: 'Casa entera, cuartos sueltos, fachadas. Residencial y comercial.',
      en: 'Whole-home, single rooms, exteriors. Residential and commercial.',
    },
  },
  {
    es: 'Pintura especializada — gabinetes, molduras, muebles',
    en: 'Specialty paint — cabinets, moldings, furniture',
    detail: {
      es: 'Lo que más nos piden. Preparación, lijado, espray fino, terminado.',
      en: 'What we get asked for most. Prep, sand, fine spray, clean finish.',
    },
  },
  {
    es: 'Drywall y techos',
    en: 'Drywall & ceilings',
    detail: {
      es: 'Reparación, parchado, texturizado, remoción de popcorn.',
      en: 'Repair, patching, texturing, popcorn-ceiling removal.',
    },
  },
  {
    es: 'Refrescamiento previo a la venta',
    en: 'Pre-sale refresh',
    detail: {
      es: 'Listo para listar en 5–10 días. Para agentes y dueños.',
      en: 'List-ready in 5–10 days. For agents and owners.',
    },
  },
];

const STEPS = [
  { n: '1', es: 'Llamas o llenas el formulario',          en: 'You call or fill the form',           d: { es: 'Cinco minutos. Lo que sea más fácil.', en: 'Five minutes. Whichever is easier.' } },
  { n: '2', es: 'Recibes el estimado en 48 horas',        en: 'You get the estimate in 48 hours',    d: { es: 'Escrito, en español e inglés, con renglones claros.', en: 'Written, in Spanish and English, with clear line items.' } },
  { n: '3', es: 'Si lo necesitas, financiamiento',         en: 'If you need it, financing options',   d: { es: 'Pre-aprobación sin afectar crédito. Términos los pone el prestamista.', en: 'Pre-qualification without affecting credit. Final terms set by the lender.' } },
  { n: '4', es: 'Trabajamos. Pagas al terminar.',          en: 'We work. You pay at completion.',     d: { es: 'Sin sorpresas. Sin cargos escondidos.', en: 'No surprises. No hidden fees.' } },
];

/* ── nav href map · keeps Nav links routable across the app ── */

const NAV_HREFS = {
  home:      '/',
  services:  '/services',
  estimate:  '/estimate',
  financing: '/financing',
  realtors:  '/realtors',
  account:   '/account',
  divisions: '/services',
  partners:  '/realtors',
  about:     '/about',
};

/* ── shared atoms ─────────────────────────────────────────── */

// Slot renders an <image-slot> drag-and-drop target so the user can drop
// real photos in. Each slot gets a stable id from the label so the
// drop persists across reloads. Pass `slotId` to override.
function Slot({ label, sub, style, slotId, shape = 'rect' }) {
  const id = 'orinova-' + (slotId || (label || 'slot').toLowerCase().replace(/[^a-z0-9]+/g, '-')).replace(/^-|-$/g, '');
  const placeholder = (label || '') + (sub ? ' \u00b7 ' + sub : '');
  return (
    <image-slot
      id={id}
      shape={shape}
      placeholder={placeholder}
      style={{ display: 'block', width: '100%', height: '100%', ...style }}
    />
  );
}

function Eyebrow({ children, right }) {
  return <div className="eyebrow" style={{ textAlign: right ? 'right' : 'left' }}>{children}</div>;
}

function LangPill() {
  const { lang, setLang } = window.useLang();
  return (
    <div className="lang-pill" role="group" aria-label="Language">
      <button onClick={() => setLang('es')} className={lang === 'es' ? 'is-active' : ''}>ES</button>
      <button onClick={() => setLang('en')} className={lang === 'en' ? 'is-active' : ''}>EN</button>
    </div>
  );
}

function Nav({ active = 'home', surface = 'orinova', tone = 'paper' }) {
  const t = window.t;
  const { lang } = window.useLang();
  const links = surface === 'dreamvalley'
    ? [
        { id: 'services',  es: 'Servicios',      en: 'Services' },
        { id: 'estimate',  es: 'Estimado',       en: 'Estimate' },
        { id: 'financing', es: 'Financiamiento', en: 'Financing' },
        { id: 'realtors',  es: 'Agentes',        en: 'Realtors' },
        { id: 'account',   es: 'Cuenta',         en: 'Account' },
      ]
    : [
        { id: 'divisions', es: 'Divisiones',     en: 'Divisions' },
        { id: 'partners',  es: 'Socios',         en: 'Partners' },
        { id: 'about',     es: 'Operaciones',    en: 'Operations' },
        { id: 'account',   es: 'Cuenta',         en: 'Account' },
      ];

  // Public site is always DreamValley-branded. The internal Orinova operating
  // group naming is editorial and not customer-facing for this deployment.
  const brand = 'DreamValley';
  const sub   = 'TRADE SOLUTIONS';

  return (
    <div className={'nav ' + (tone === 'dark' ? 'tone-dark' : '')}>
      <div className="nav-inner">
        <a className="brand" href="/" style={{ textDecoration: 'none', color: 'inherit', display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <span className="brand-mark">{brand}</span>
          <span className="brand-sub">{sub}</span>
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.id} href={NAV_HREFS[l.id] || '#'} className={'nav-link ' + (active === l.id ? 'is-active' : '')}>
              {t(l, lang)}
            </a>
          ))}
          <LangPill />
          <a className="btn btn-call" href="tel:+19515550148" style={{ padding: '6px 14px', fontSize: 12 }}>(951) 555-0148</a>
        </div>
      </div>
    </div>
  );
}

function Foot({ surface = 'dreamvalley' }) {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="foot">
      <div>
        <div className="codex" style={{ marginBottom: 4 }}>
          DREAMVALLEY · TRADE SOLUTIONS
        </div>
        {t({
          es: 'Cuadrillas bilingües. Estimados escritos. Sin cargos escondidos.',
          en: 'Bilingual crews. Written estimates. No hidden fees.'
        }, lang)}
        <div style={{ marginTop: 10, display: 'flex', gap: 14, flexWrap: 'wrap', fontSize: 12 }}>
          <a href="/services" style={{ color: 'inherit' }}>{t({ es: 'Servicios', en: 'Services' }, lang)}</a>
          <a href="/estimate" style={{ color: 'inherit' }}>{t({ es: 'Estimado', en: 'Estimate' }, lang)}</a>
          <a href="/financing" style={{ color: 'inherit' }}>{t({ es: 'Financiamiento', en: 'Financing' }, lang)}</a>
          <a href="/help" style={{ color: 'inherit' }}>{t({ es: 'Ayuda', en: 'Help' }, lang)}</a>
          <a href="/contact" style={{ color: 'inherit' }}>{t({ es: 'Contacto', en: 'Contact' }, lang)}</a>
          <a href="/account" style={{ color: 'inherit' }}>{t({ es: 'Cuenta', en: 'Account' }, lang)}</a>
        </div>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div className="codex">RIVERSIDE, CA · INLAND EMPIRE</div>
        <div style={{ marginTop: 4 }}>© 2026 DreamValley Trade Solutions</div>
        <div style={{ marginTop: 4, fontSize: 11, color: 'var(--ink-muted)' }}>{t({ es: 'CSLB · licencia nombrada al firmar contrato', en: 'CSLB · license named at contract signing' }, lang)}</div>
      </div>
    </div>
  );
}

/* ── HOME — Orinova A: Quiet (DV-faithful, paper) ──────────── */

function HomeQuiet() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="home" surface="orinova" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '46px 36px 0', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 36, alignItems: 'start' }}>
          <div>
            <Eyebrow>{t({ es: 'Riverside, CA · Inland Empire hasta la costa', en: 'Riverside, CA · Inland Empire to the coast' }, lang)}</Eyebrow>
            <h1 className="display" style={{ fontSize: 68, margin: '14px 0 16px', maxWidth: 720 }}>
              {t({
                es: 'Trabajo de oficio, hecho bien, a tiempo, sin sorpresas.',
                en: 'Trade work, done right, on time, no surprises.'
              }, lang)}
            </h1>
            <p style={{ maxWidth: 540, fontSize: 17, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
              {t({
                es: 'Orinova opera DreamValley Trade Solutions: pintura, drywall y reparaciones. Cuadrillas bilingües. Estimado escrito en 48 horas. Financiamiento sin pago inicial cuando lo necesites.',
                en: 'Orinova runs DreamValley Trade Solutions: paint, drywall, and repairs. Bilingual crews. Written estimate in 48 hours. No-money-down financing when you need it.'
              }, lang)}
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              <a className="btn btn-call" href="/estimate">{t({ es: 'Pedir estimado en línea →', en: 'Request estimate online →' }, lang)}</a>
              <a className="btn btn-ghost" href="tel:+19515550148">(951) 555-0148</a>
            </div>
            <div className="codex" style={{ marginTop: 14 }}>L–V 7:00 – 18:00 · SÁB 8:00 – 14:00 · {t({ es: 'español sin traducir prisa', en: 'Spanish without rushing' }, lang)}</div>
          </div>
          <Slot label="HERO PHOTO" sub="founder portrait or paint stroke · 4:5" style={{ aspectRatio: '4 / 5' }} />
        </section>

        <section style={{ maxWidth: 1100, margin: '60px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Por qué nos llaman', en: 'Why people call us' }, lang)}</Eyebrow>
          <p className="display" style={{ fontSize: 28, margin: '12px 0 0', maxWidth: 880, fontStyle: 'italic', fontWeight: 400, color: 'var(--ink-soft)' }}>
            {t({
              es: 'No te vendemos lo que no necesitas. Te decimos lo que cuesta, escrito, antes de empezar. Si no podemos hacerlo, te decimos quién sí.',
              en: 'We don’t sell you what you don’t need. We tell you what it costs, in writing, before we start. If we can’t do the job, we tell you who can.'
            }, lang)}
          </p>
        </section>

        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Lo que hacemos', en: 'What we do' }, lang)}</Eyebrow>
          <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', borderTop: '1px solid var(--divider)' }}>
            {SERVICES.map((s, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '1.1fr 1.4fr 90px', gap: 18, padding: '16px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                <div className="display" style={{ fontSize: 18, fontWeight: 500, color: 'var(--ink)' }}>{t(s, lang)}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-soft)' }}>{t(s.detail, lang)}</div>
                <a className="codex" style={{ textAlign: 'right', cursor: 'pointer' }}>{t({ es: 'detalle →', en: 'detail →' }, lang)}</a>
              </li>
            ))}
          </ul>
        </section>

        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Cómo funciona', en: 'How it works' }, lang)}</Eyebrow>
          <ol style={{ marginTop: 14, padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: 36, rowGap: 20 }}>
            {STEPS.map(s => (
              <li key={s.n} style={{ display: 'grid', gridTemplateColumns: '48px 1fr', gap: 18 }}>
                <div className="display" style={{ fontSize: 40, color: 'var(--terracotta)', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{s.n}</div>
                <div>
                  <div style={{ fontSize: 16, fontWeight: 500 }}>{t(s, lang)}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--ink-soft)', marginTop: 4 }}>{t(s.d, lang)}</div>
                </div>
              </li>
            ))}
          </ol>
        </section>

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

/* ── HOME — Orinova B: Operator (executive ops view) ──────── */

function HomeOperator() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="home" surface="orinova" />
      <div className="page-scroll hide-scroll">
        <div className="banner">
          <span className="dot" />
          {t({ es: 'Hoy · 4 obras activas · 7 estimados pendientes', en: 'Today · 4 active jobs · 7 estimates pending' }, lang)}
          <span style={{ flex: 1 }} />
          ORINOVA · OPS · MMXXVI
        </div>

        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 36px 0' }}>
          <Eyebrow>{t({ es: 'Grupo operativo', en: 'Operating group' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 60, margin: '12px 0 6px', maxWidth: 920 }}>
            {t({
              es: 'Una casa de oficios. Cuadrillas bilingües. Riverside hasta la costa.',
              en: 'One trade house. Bilingual crews. Riverside to the coast.'
            }, lang)}
          </h1>
          <div className="codex" style={{ marginTop: 8 }}>ORINOVA · {t({ es: 'opera DreamValley Trade Solutions', en: 'operates DreamValley Trade Solutions' }, lang)}</div>
        </section>

        <section style={{ maxWidth: 1100, margin: '32px auto 0', padding: '0 36px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--divider-strong)' }}>
            {[
              { k: { es: 'OBRAS · 2025', en: 'JOBS · 2025' }, v: '147', s: { es: 'completadas', en: 'completed' } },
              { k: { es: 'TIEMPO ESTIMADO', en: 'ESTIMATE SLA' }, v: '48h',  s: { es: 'escrito', en: 'in writing' } },
              { k: { es: 'CUADRILLAS', en: 'CREWS' }, v: '6', s: { es: 'activas', en: 'active' } },
              { k: { es: 'IDIOMAS', en: 'LANGUAGES' }, v: 'ES / EN', s: { es: 'sin prisa', en: 'unrushed' } },
            ].map((m, i) => (
              <div key={i} style={{ borderRight: i < 3 ? '1px solid var(--divider)' : 'none', padding: '20px 18px' }}>
                <div className="codex">{t(m.k, lang)}</div>
                <div className="display" style={{ fontSize: 44, marginTop: 6, color: 'var(--ink)', fontVariantNumeric: 'tabular-nums' }}>{m.v}</div>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t(m.s, lang)}</div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div className="card" style={{ padding: 24 }}>
            <Eyebrow>OV · 01 · DREAMVALLEY</Eyebrow>
            <h3 className="display" style={{ fontSize: 30, margin: '6px 0 6px' }}>DreamValley Trade Solutions</h3>
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'pintura · drywall · reparaciones', en: 'paint · drywall · repairs' }, lang)}</div>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-soft)', marginTop: 14 }}>
              {t({
                es: 'Casas reales, cocinas reales, sin photoshop. Cuadrillas bilingües, financiamiento sin pago inicial.',
                en: 'Real homes, real kitchens, no photoshop. Bilingual crews, no-money-down financing.'
              }, lang)}
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
              <a className="btn btn-primary" href="/services">{t({ es: 'Ver división →', en: 'Open division →' }, lang)}</a>
              <a className="btn btn-ghost" href="/estimate">{t({ es: 'Pedir estimado', en: 'Request estimate' }, lang)}</a>
            </div>
          </div>
          <div className="card" style={{ padding: 24, background: 'var(--paper-cream)' }}>
            <Eyebrow>OV · 02 · {t({ es: 'próximamente', en: 'in development' }, lang)}</Eyebrow>
            <h3 className="display" style={{ fontSize: 30, margin: '6px 0 6px', color: 'var(--ink-muted)' }}>{t({ es: 'Próxima división', en: 'Next division' }, lang)}</h3>
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'pendiente · expansión 2026', en: 'pending · 2026 expansion' }, lang)}</div>
            <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-soft)', marginTop: 14 }}>
              {t({
                es: 'Orinova suma divisiones por intento, no por ambición. Cuando un oficio rinde a estándar, se nombra.',
                en: 'Orinova adds divisions by attempt, not by ambition. When a trade clears the bar, it gets a name.'
              }, lang)}
            </p>
            <div className="codex" style={{ marginTop: 20, color: 'var(--ink-muted)' }}>NDA · {t({ es: 'a solicitud', en: 'on request' }, lang)}</div>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Lo que firmamos', en: 'What we sign' }, lang)}</Eyebrow>
          <ul style={{ marginTop: 12, padding: 0, listStyle: 'none', borderTop: '1px solid var(--divider)' }}>
            {[
              { es: 'Estimado escrito en 48 horas, en español e inglés.',                 en: 'Written estimate in 48 hours, in Spanish and English.' },
              { es: 'Pago al terminar. Sin cargos escondidos. Sin sorpresas.',             en: 'Pay on completion. No hidden fees. No surprises.' },
              { es: 'Si no podemos hacerlo, decimos quién sí. Eso también es trabajo.',    en: 'If we can’t do the job, we tell you who can. That’s also work.' },
              { es: 'Trabajo bajo licencia ejecutado por contratista CSLB nombrado.',       en: 'Licensed work performed by a named CSLB contractor.' },
            ].map((row, i) => (
              <li key={i} style={{ padding: '12px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, fontSize: 14, color: 'var(--ink-soft)' }}>
                <span className="codex tab">{String(i+1).padStart(2,'0')}</span>
                <span>{t(row, lang)}</span>
              </li>
            ))}
          </ul>
        </section>

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

/* ── HOME — DreamValley field-led ─────────────────────────── */

function HomeField() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="home" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '36px 36px 0' }}>
          <Slot label="JOB-SITE PHOTO" sub="full-bleed · interior or exterior" style={{ width: '100%', height: 380 }} />
        </section>

        <section style={{ maxWidth: 1100, margin: '28px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 36 }}>
          <div>
            <Eyebrow>DREAMVALLEY · {t({ es: 'una división de Orinova', en: 'a division of Orinova' }, lang)}</Eyebrow>
            <h1 className="display" style={{ fontSize: 64, margin: '12px 0 12px', maxWidth: 700 }}>
              {t({
                es: 'Pintura, drywall, reparaciones — hechas bien.',
                en: 'Paint, drywall, repairs — done right.'
              }, lang)}
            </h1>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 540 }}>
              {t({
                es: 'Cuadrillas bilingües. Estimado escrito en 48 horas. Financiamiento sin pago inicial cuando lo necesites.',
                en: 'Bilingual crews. Written estimate in 48 hours. No-money-down financing when you need it.'
              }, 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">(951) 555-0148</a>
            </div>
          </div>
          <div className="card">
            <Eyebrow>{t({ es: 'Trabajo real', en: 'Real work' }, lang)}</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 10 }}>
              {[
                { es: 'Cocina · gabinetes blancos',     en: 'Kitchen · white cabinets' },
                { es: 'Exterior · dos pisos',           en: 'Exterior · two-story' },
                { es: 'Drywall · texturizado',          en: 'Drywall · texture' },
                { es: 'Preparación · enmascarado',       en: 'Prep · masking' },
              ].map((p, i) => (
                <div key={i}>
                  <Slot label={'JOB ' + (i+1)} sub="thumb" style={{ aspectRatio: '4/3' }} />
                  <div style={{ fontSize: 11.5, color: 'var(--ink-muted)', marginTop: 4 }}>{t(p, lang)}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Servicios', en: 'Services' }, lang)}</Eyebrow>
          <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', borderTop: '1px solid var(--divider)' }}>
            {SERVICES.map((s, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 90px', gap: 18, padding: '14px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                <div style={{ fontSize: 16, fontWeight: 500 }}>{t(s, lang)}</div>
                <div style={{ fontSize: 13.5, color: 'var(--ink-soft)' }}>{t(s.detail, lang)}</div>
                <a className="codex" style={{ textAlign: 'right' }}>{t({ es: 'pedir →', en: 'request →' }, lang)}</a>
              </li>
            ))}
          </ul>
        </section>

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

/* ── ESTIMATE intake ───────────────────────────────────────── */

function EstimatePage() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="estimate" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1000, margin: '0 auto', padding: '40px 36px 0' }}>
          <Eyebrow>DREAMVALLEY · {t({ es: 'estimado', en: 'estimate' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 48, margin: '12px 0 6px', maxWidth: 720 }}>
            {t({
              es: 'Cuéntanos del trabajo. Te respondemos en 48 horas.',
              en: 'Tell us about the job. We respond in 48 hours.'
            }, lang)}
          </h1>
          <div className="codex" style={{ marginTop: 6 }}>{t({ es: 'español o inglés · sin prisa', en: 'Spanish or English · unrushed' }, lang)}</div>
        </section>

        <section style={{ maxWidth: 1000, margin: '28px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32 }}>
          <form className="card" data-dvt-form="estimate" style={{ padding: 24, display: 'grid', gap: 14 }}>
            <input type="hidden" name="preferred_language" value={lang} />
            <input type="hidden" name="source" value="web" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div className="field">
                <label className="field-label" htmlFor="dvt-name">{t({ es: 'Nombre', en: 'Name' }, lang)}</label>
                <input className="field-input" id="dvt-name" name="customer_name" required autoComplete="name" placeholder={t({ es: 'Tu nombre completo', en: 'Your full name' }, lang)} />
              </div>
              <div className="field">
                <label className="field-label" htmlFor="dvt-phone">{t({ es: 'Teléfono', en: 'Phone' }, lang)}</label>
                <input className="field-input" id="dvt-phone" name="customer_phone" type="tel" autoComplete="tel" placeholder="(951) 555-0148" />
              </div>
            </div>
            <div className="field">
              <label className="field-label" htmlFor="dvt-email">{t({ es: 'Correo', en: 'Email' }, lang)}</label>
              <input className="field-input" id="dvt-email" name="customer_email" type="email" required autoComplete="email" placeholder="tu@correo.com" />
            </div>
            <div className="field">
              <label className="field-label" htmlFor="dvt-address">{t({ es: 'Dirección de la obra', en: 'Job address' }, lang)}</label>
              <input className="field-input" id="dvt-address" name="service_address" autoComplete="street-address" placeholder={t({ es: 'Calle, ciudad, código postal', en: 'Street, city, ZIP' }, lang)} />
            </div>
            <div className="field">
              <label className="field-label" htmlFor="dvt-service">{t({ es: 'Tipo de trabajo', en: 'Job type' }, lang)}</label>
              <select className="field-input" id="dvt-service" name="service_type" defaultValue="interior_paint" style={{ appearance: 'auto' }}>
                <option value="interior_paint">{t({ es: 'Pintura interior', en: 'Interior paint' }, lang)}</option>
                <option value="exterior_paint">{t({ es: 'Pintura exterior', en: 'Exterior paint' }, lang)}</option>
                <option value="cabinets">{t({ es: 'Gabinetes y muebles', en: 'Cabinets & furniture' }, lang)}</option>
                <option value="drywall">{t({ es: 'Drywall y techos', en: 'Drywall & ceilings' }, lang)}</option>
                <option value="rope_access">{t({ es: 'Acceso por cuerda', en: 'Rope access' }, lang)}</option>
                <option value="pre_sale">{t({ es: 'Pre-venta', en: 'Pre-sale refresh' }, lang)}</option>
                <option value="other">{t({ es: 'Otro / mixto', en: 'Other / mixed' }, lang)}</option>
              </select>
            </div>
            <div className="field">
              <label className="field-label" htmlFor="dvt-urgency">{t({ es: 'Cuándo te gustaría empezar', en: 'When would you like to start' }, lang)}</label>
              <select className="field-input" id="dvt-urgency" name="urgency" defaultValue="this_month" style={{ appearance: 'auto' }}>
                <option value="asap">{t({ es: 'Lo antes posible', en: 'As soon as possible' }, lang)}</option>
                <option value="this_month">{t({ es: 'Este mes', en: 'This month' }, lang)}</option>
                <option value="next_month">{t({ es: 'El próximo mes', en: 'Next month' }, lang)}</option>
                <option value="flexible">{t({ es: 'Flexible', en: 'Flexible' }, lang)}</option>
              </select>
            </div>
            <div className="field">
              <label className="field-label" htmlFor="dvt-scope">{t({ es: 'Cuéntanos más', en: 'Tell us more' }, lang)}</label>
              <textarea className="field-input" id="dvt-scope" name="scope" rows={4} required placeholder={t({
                es: 'Cuartos, paredes, problemas existentes, fechas importantes.',
                en: 'Rooms, walls, existing problems, dates that matter.'
              }, lang)} />
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
              <button type="submit" className="btn btn-call" style={{ flex: 1, border: 0, cursor: 'pointer' }}>
                {t({ es: 'Enviar solicitud', en: 'Send request' }, lang)}
              </button>
              <a className="btn btn-ghost" href="tel:+19515550148">{t({ es: 'O llamar', en: 'Or call' }, lang)}</a>
            </div>
            <div className="codex" style={{ marginTop: 4, color: 'var(--ink-muted)' }}>
              {t({ es: 'No vendemos tus datos. Sólo los usamos para responderte.', en: 'We don’t sell your data. We use it only to reply.' }, lang)}
            </div>
          </form>
          <div>
            <div className="card" style={{ padding: 22 }}>
              <Eyebrow>{t({ es: 'Lo que pasa después', en: 'What happens next' }, lang)}</Eyebrow>
              <ol style={{ margin: '12px 0 0', padding: 0, listStyle: 'none' }}>
                {STEPS.map(s => (
                  <li key={s.n} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 12, padding: '8px 0', borderBottom: '1px solid var(--divider)' }}>
                    <span className="display" style={{ fontSize: 20, color: 'var(--terracotta)', lineHeight: 1.2 }}>{s.n}</span>
                    <span style={{ fontSize: 13.5 }}>{t(s, lang)}</span>
                  </li>
                ))}
              </ol>
            </div>
            <div className="card" style={{ marginTop: 16, padding: 22 }}>
              <Eyebrow>{t({ es: 'Honesto', en: 'Honest' }, lang)}</Eyebrow>
              <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.6, marginTop: 8 }}>
                {t({
                  es: 'Si tu obra no es para nosotros, te decimos quién sí. Eso también es trabajo honesto.',
                  en: 'If your job isn’t for us, we’ll tell you who it is for. That’s honest work too.'
                }, lang)}
              </p>
            </div>
          </div>
        </section>

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

/* ── REALTORS / Partners ───────────────────────────────────── */

function RealtorsPage() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="realtors" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 36px 0' }}>
          <Eyebrow>{t({ es: 'Para agentes inmobiliarios', en: 'For realtors' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 56, margin: '12px 0 12px', maxWidth: 880 }}>
            {t({
              es: 'Listo para listar en 5–10 días. Cuadrillas que no te hacen quedar mal.',
              en: 'List-ready in 5–10 days. Crews that won’t embarrass you.'
            }, lang)}
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 720 }}>
            {t({
              es: 'Pre-venta, refresco de fachada, parchado y pintura. Coordinamos directo con tu cliente o contigo. Estimado en 48 horas, en español e inglés.',
              en: 'Pre-sale prep, exterior refresh, patching and paint. We coordinate with your client or with you. Estimate in 48 hours, in Spanish and English.'
            }, lang)}
          </p>
        </section>

        <section style={{ maxWidth: 1100, margin: '32px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {[
            { code: 'PRE · 01', t: { es: 'Refresco previo a la venta', en: 'Pre-sale refresh' }, d: { es: 'Pintura interior, parchado, limpieza ligera. 5–10 días.', en: 'Interior paint, patching, light cleanup. 5–10 days.' } },
            { code: 'PRE · 02', t: { es: 'Cocina + gabinetes',          en: 'Kitchen + cabinets' }, d: { es: 'Lijado, espray fino, terminado. 7–12 días.', en: 'Sand, fine spray, clean finish. 7–12 days.' } },
            { code: 'PRE · 03', t: { es: 'Fachada y portón',             en: 'Exterior + entry' }, d: { es: 'Lavado a presión, pintura, números nuevos. 4–7 días.', en: 'Pressure-wash, paint, fresh numbers. 4–7 days.' } },
          ].map((c, i) => (
            <div key={i} className="card">
              <Eyebrow>{c.code}</Eyebrow>
              <h3 className="display" style={{ fontSize: 22, margin: '6px 0 8px' }}>{t(c.t, lang)}</h3>
              <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{t(c.d, lang)}</p>
            </div>
          ))}
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Cómo cobramos en pre-venta', en: 'How we bill on pre-sale' }, lang)}</Eyebrow>
          <dl style={{ marginTop: 12 }}>
            <div className="spec-row"><dt>{t({ es: 'PAGO', en: 'PAYMENT' }, lang)}</dt><dd>{t({ es: 'Al cierre o al terminar — escoge tú.', en: 'On close or on completion — your call.' }, lang)}</dd></div>
            <div className="spec-row"><dt>{t({ es: 'INVENTARIO', en: 'STAGING' }, lang)}</dt><dd>{t({ es: 'Sí, plástico y enmascarado limpio. Tu inquilino puede quedarse.', en: 'Yes — clean plastic + masking. Your tenant can stay.' }, lang)}</dd></div>
            <div className="spec-row"><dt>{t({ es: 'CONTRATO', en: 'CONTRACT' }, lang)}</dt><dd>{t({ es: 'Con el dueño, no con el agente. Marca de servicios, contratista licenciado nombrado.', en: 'With the owner, not the agent. Service brand; named licensed contractor.' }, lang)}</dd></div>
            <div className="spec-row"><dt>CSLB</dt><dd>{t({ es: 'Licencia nombrada antes de firmar.', en: 'License named before signing.' }, lang)}</dd></div>
          </dl>
        </section>

        <section style={{ maxWidth: 1100, margin: '32px auto 0', padding: '0 36px' }}>
          <div className="card" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 18, alignItems: 'center' }}>
            <div>
              <Eyebrow>{t({ es: 'Empieza una pre-venta', en: 'Start a pre-sale' }, lang)}</Eyebrow>
              <p style={{ marginTop: 6, fontSize: 14.5 }}>
                {t({
                  es: 'Mándanos la dirección y los puntos a refrescar. Te llamamos antes del cierre del día.',
                  en: 'Send the address and the punch list. We call before end-of-day.'
                }, lang)}
              </p>
            </div>
            <a className="btn btn-call">{t({ es: 'Mandar dirección →', en: 'Send address →' }, lang)}</a>
          </div>
        </section>

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

/* ── FINANCING ────────────────────────────────────────────── */

function FinancingPage() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="financing" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 980, margin: '0 auto', padding: '40px 36px 0' }}>
          <Eyebrow>{t({ es: 'Financiamiento honesto', en: 'Honest financing' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 56, margin: '12px 0 12px', maxWidth: 820 }}>
            {t({
              es: 'Pre-aprobación sin afectar tu crédito.',
              en: 'Pre-qualification that doesn’t hit your credit.'
            }, lang)}
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 660 }}>
            {t({
              es: 'Usamos plataformas de pre-calificación que muestran ofertas sin afectar tu puntaje. Los términos finales los pone el prestamista — no nosotros.',
              en: 'We use pre-qualification platforms that show offers without affecting your score. Final terms are set by the lender — not us.'
            }, lang)}
          </p>
        </section>

        <section style={{ maxWidth: 980, margin: '28px auto 0', padding: '0 36px' }}>
          <dl>
            <div className="spec-row"><dt>{t({ es: 'PAGO INICIAL', en: 'DOWN' }, lang)}</dt><dd>{t({ es: '$0 cuando el prestamista lo aprueba.', en: '$0 when the lender approves it.' }, lang)}</dd></div>
            <div className="spec-row"><dt>{t({ es: 'PUNTAJE', en: 'CREDIT PULL' }, lang)}</dt><dd>{t({ es: 'Suave para pre-calificar; duro al firmar.', en: 'Soft to pre-qualify; hard at signing.' }, lang)}</dd></div>
            <div className="spec-row"><dt>{t({ es: 'PLAZOS', en: 'TERMS' }, lang)}</dt><dd>{t({ es: '6, 12, 24, 60 meses según el prestamista.', en: '6, 12, 24, 60 months depending on the lender.' }, lang)}</dd></div>
            <div className="spec-row"><dt>{t({ es: 'NUESTRA TARIFA', en: 'OUR FEE' }, lang)}</dt><dd>{t({ es: 'Cero. No cobramos por la conexión.', en: 'Zero. We don’t charge for the intro.' }, lang)}</dd></div>
            <div className="spec-row"><dt>{t({ es: 'SI NO CALIFICAS', en: 'IF YOU DON’T QUALIFY' }, lang)}</dt><dd>{t({ es: 'Te decimos plan B: pago dividido, fases, o nada. Sin presión.', en: 'We tell you a plan B: split pay, phasing, or nothing. No pressure.' }, lang)}</dd></div>
          </dl>
        </section>

        <section style={{ maxWidth: 980, margin: '28px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
          <a className="btn btn-primary" style={{ padding: 14 }}>{t({ es: 'Pre-calificar (1–2 min)', en: 'Pre-qualify (1–2 min)' }, lang)}</a>
          <a className="btn btn-ghost" style={{ padding: 14 }}>{t({ es: 'Hablar con alguien', en: 'Talk to someone' }, lang)}</a>
        </section>

        <section style={{ maxWidth: 980, margin: '40px auto 0', padding: '0 36px' }}>
          <div className="card-quiet">
            <Eyebrow>{t({ es: 'Aviso', en: 'Disclosure' }, lang)}</Eyebrow>
            <p style={{ fontSize: 12.5, color: 'var(--ink-muted)', lineHeight: 1.6, marginTop: 6, maxWidth: 760 }}>
              {t({
                es: 'DreamValley Trade Solutions es una marca de servicios de Orinova. El financiamiento lo provee un tercero. La licencia CSLB la nombramos antes de firmar contrato.',
                en: 'DreamValley Trade Solutions is a service brand of Orinova. Financing is provided by a third party. We name the CSLB license before contract signing.'
              }, lang)}
            </p>
          </div>
        </section>

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

/* ── OPERATIONS / About ────────────────────────────────────── */

function OperationsPage() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="about" surface="orinova" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 980, margin: '0 auto', padding: '48px 36px 0' }}>
          <Eyebrow>ORINOVA · {t({ es: 'operaciones', en: 'operations' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 56, margin: '12px 0 16px' }}>
            {t({ es: 'Una casa de oficios.', en: 'One trade house.' }, lang)}
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 720, fontFamily: 'var(--serif)' }}>
            {t({
              es: 'Orinova es el grupo operativo. DreamValley es la división de oficios. Cuadrillas bilingües, estimados escritos, sin cargos escondidos. Un sólo libro de cuentas. Un sólo estándar.',
              en: 'Orinova is the operating group. DreamValley is the trade division. Bilingual crews, written estimates, no hidden fees. One ledger. One standard.'
            }, lang)}
          </p>
        </section>

        <section style={{ maxWidth: 980, margin: '32px auto 0', padding: '0 36px' }}>
          <div className="rule rule-strong" />
          <dl style={{ margin: '14px 0' }}>
            <div className="spec-row"><dt>FOUNDED</dt><dd>2025 · Riverside, California</dd></div>
            <div className="spec-row"><dt>OPERATING GROUP</dt><dd>Orinova</dd></div>
            <div className="spec-row"><dt>{t({ es: 'DIVISIÓN ACTIVA', en: 'ACTIVE DIVISION' }, lang)}</dt><dd>DreamValley Trade Solutions · {t({ es: 'oficios de pintura, drywall, reparaciones', en: 'paint / drywall / repair trades' }, lang)}</dd></div>
            <div className="spec-row"><dt>{t({ es: 'COBERTURA', en: 'COVERAGE' }, lang)}</dt><dd>{t({ es: 'Inland Empire hasta la costa', en: 'Inland Empire to the coast' }, lang)}</dd></div>
            <div className="spec-row"><dt>{t({ es: 'IDIOMAS', en: 'LANGUAGES' }, lang)}</dt><dd>Español · English</dd></div>
            <div className="spec-row"><dt>CSLB</dt><dd>{t({ es: 'Trabajo bajo licencia ejecutado por contratista de California licenciado. Licencia nombrada antes de contrato.', en: 'Licensed work performed by a California-licensed contractor. License named prior to contract.' }, lang)}</dd></div>
            <div className="spec-row"><dt>{t({ es: 'SOCIO GC', en: 'GC PARTNERSHIP' }, lang)}</dt><dd>Ryan Davidson Construction · Norco, CA · <a href="/partners" style={{ color: 'var(--terracotta)' }}>{t({ es: 'ver red de socios →', en: 'see partnership →' }, lang)}</a></dd></div>
            <div className="spec-row"><dt>{t({ es: 'POLÍTICA', en: 'POLICY' }, lang)}</dt><dd>{t({ es: 'Sin cargos escondidos. Sin sorpresas. Sin sobrevender.', en: 'No hidden fees. No surprises. No overselling.' }, lang)}</dd></div>
          </dl>
          <div className="rule rule-strong" />
        </section>

        <section style={{ maxWidth: 980, margin: '32px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Lo que firmamos', en: 'What we sign' }, lang)}</Eyebrow>
          <ul style={{ marginTop: 12, padding: 0, listStyle: 'none' }}>
            {[
              { es: 'Estimado escrito en 48 horas — bilingüe — con renglones claros.',                en: 'Written estimate in 48 hours — bilingual — clear line items.' },
              { es: 'Pago al terminar. Sin cargos escondidos. Sin presión.',                          en: 'Pay on completion. No hidden fees. No pressure.' },
              { es: 'Si no podemos hacerlo, decimos quién sí.',                                       en: 'If we can’t do the job, we tell you who can.' },
              { es: 'Hablamos español sin traducir prisa.',                                            en: 'We speak Spanish without rushing.' },
              { es: 'Un cliente, un capataz responsable, un número al cual llamar.',                  en: 'One client, one foreman, one number to call.' },
            ].map((row, i) => (
              <li key={i} style={{ padding: '12px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '40px 1fr', gap: 14, fontSize: 14, color: 'var(--ink-soft)' }}>
                <span className="codex tab">{String(i+1).padStart(2,'0')}</span>
                <span>{t(row, lang)}</span>
              </li>
            ))}
          </ul>
        </section>

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

/* ── ACCOUNT — login + dashboard ───────────────────────────── */

function MembershipLogin() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="account" surface="orinova" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 980, margin: '0 auto', padding: '60px 36px 0', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'start' }}>
          <div>
            <Eyebrow>ORINOVA · {t({ es: 'cuenta', en: 'account' }, lang)}</Eyebrow>
            <h1 className="display" style={{ fontSize: 52, margin: '12px 0 14px' }}>
              {t({ es: 'Inicia sesión.', en: 'Sign in.' }, lang)}
            </h1>
            <p style={{ color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.6, maxWidth: 460 }}>
              {t({
                es: 'Una cuenta para clientes, agentes y equipo. Cubre Orinova y DreamValley.',
                en: 'One account for clients, realtors, and crew. Covers Orinova and DreamValley.'
              }, lang)}
            </p>
            <form data-dvt-form="sign-in" style={{ display: 'grid', gap: 14, marginTop: 26, maxWidth: 460 }}>
              <input type="hidden" name="redirect_to" value={typeof window !== 'undefined' ? (new URLSearchParams(window.location.search).get('next') || '/account') : '/account'} />
              <div className="field">
                <label className="field-label" htmlFor="dvt-login-email">{t({ es: 'Correo', en: 'Email address' }, lang)}</label>
                <input className="field-input" id="dvt-login-email" name="email" type="email" required autoComplete="email" placeholder={t({ es: 'tu@correo.com', en: 'you@email.com' }, lang)} />
              </div>
              <div className="codex" style={{ color: 'var(--ink-muted)', marginTop: -2 }}>
                {t({
                  es: 'Te mandamos un enlace mágico. Sin contraseñas que recordar.',
                  en: 'We email you a one-time sign-in link. No password to remember.'
                }, lang)}
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
                <button type="submit" className="btn btn-primary" style={{ flex: 1, border: 0, cursor: 'pointer' }}>
                  {t({ es: 'Enviar enlace →', en: 'Send my sign-in link →' }, lang)}
                </button>
              </div>
              <div className="codex" style={{ marginTop: 8, color: 'var(--ink-muted)' }}>
                {t({
                  es: '¿Primera vez? El mismo enlace abre tu cuenta nueva.',
                  en: 'First time? The same link creates your new account.'
                }, lang)}
              </div>
            </form>
          </div>
          <div>
            <Slot label="OPERATIONS PHOTO" sub="job site or crew · 4:5" style={{ aspectRatio: '4/5' }} />
            <div className="card" style={{ marginTop: 14 }}>
              <Eyebrow>{t({ es: 'Tu cuenta incluye', en: 'Your account includes' }, lang)}</Eyebrow>
              <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none', fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
                {[
                  { es: 'Tablero de obra · estimados, programación, fotos.', en: 'Job dashboard · estimates, schedule, photos.' },
                  { es: 'Facturas y recibos en español o inglés.',           en: 'Invoices and receipts in Spanish or English.' },
                  { es: 'Pre-calificación de financiamiento sin afectar crédito.', en: 'Soft pre-qualification for financing.' },
                  { es: 'Para agentes: cartera de pre-ventas + estados.',    en: 'For realtors: pre-sale roster + statuses.' },
                ].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="orinova" />
      </div>
    </div>
  );
}

function MembershipAccount() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="account" surface="orinova" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '36px 36px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
            <div>
              <Eyebrow>ORINOVA · {t({ es: 'cuenta', en: 'account' }, lang)}</Eyebrow>
              <h1 className="display" style={{ fontSize: 40, margin: '8px 0 0' }}>
                {t({ es: 'Hola, Lupita.', en: 'Welcome back, Lupita.' }, lang)}
              </h1>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <span className="badge"><span className="dot" /> {t({ es: 'Cliente · DreamValley', en: 'Client · DreamValley' }, lang)}</span>
              <span className="badge" style={{ borderColor: 'var(--terracotta)' }}>
                <span className="dot" style={{ background: 'var(--terracotta)' }} /> {t({ es: 'Pre-calificado · 24m', en: 'Pre-qualified · 24m' }, lang)}
              </span>
            </div>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '24px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 22 }}>
          <div className="card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <Eyebrow>{t({ es: 'Tu obra', en: 'Your job' }, lang)}</Eyebrow>
              <span className="codex">DV-2026-0431</span>
            </div>
            <h3 className="display" style={{ fontSize: 24, margin: '10px 0 4px' }}>{t({ es: 'Pintura interior · 3 cuartos', en: 'Interior paint · 3 rooms' }, lang)}</h3>
            <div style={{ fontSize: 13, color: 'var(--ink-muted)' }}>2418 Magnolia Ave, Riverside · {t({ es: 'estimado escrito · $4,820', en: 'written estimate · $4,820' }, lang)}</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginTop: 18 }}>
              {[
                { es: 'Solicitado', en: 'Requested', done: true,  date: 'OCT 02' },
                { es: 'Estimado',   en: 'Estimated', done: true,  date: 'OCT 04' },
                { es: 'Programado', en: 'Scheduled', done: true,  date: 'OCT 12' },
                { es: 'En obra',    en: 'On site',   done: false, date: 'OCT 14' },
              ].map((s, i) => (
                <div key={i} style={{ borderTop: '2px solid ' + (s.done ? 'var(--olive)' : 'var(--divider-strong)'), paddingTop: 10 }}>
                  <div className="codex" style={{ color: s.done ? 'var(--ink)' : 'var(--ink-muted)' }}>0{i+1} · {s.date}</div>
                  <div style={{ fontSize: 13, marginTop: 4, color: s.done ? 'var(--ink)' : 'var(--ink-muted)' }}>{t(s, lang)}</div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
              <a className="btn btn-call">{t({ es: 'Llamar a Erick', en: 'Call Erick' }, lang)}</a>
              <a className="btn btn-ghost">{t({ es: 'Ver estimado PDF', en: 'View estimate PDF' }, lang)}</a>
            </div>
          </div>

          <div className="card">
            <Eyebrow>{t({ es: 'Resumen', en: 'Summary' }, lang)}</Eyebrow>
            <dl style={{ marginTop: 10 }}>
              <div className="spec-row"><dt>{t({ es: 'OBRA ACTIVA', en: 'ACTIVE JOB' }, lang)}</dt><dd>1</dd></div>
              <div className="spec-row"><dt>{t({ es: 'OBRAS PASADAS', en: 'PAST JOBS' }, lang)}</dt><dd>2</dd></div>
              <div className="spec-row"><dt>{t({ es: 'BALANCE', en: 'BALANCE' }, lang)}</dt><dd className="tab">$0.00</dd></div>
              <div className="spec-row"><dt>{t({ es: 'PRÓXIMO PAGO', en: 'NEXT PAY' }, lang)}</dt><dd>{t({ es: 'al terminar', en: 'on completion' }, lang)}</dd></div>
            </dl>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '24px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
          <div className="card">
            <Eyebrow>{t({ es: 'Documentos', en: 'Documents' }, lang)}</Eyebrow>
            <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none' }}>
              {[
                { code: 'EST-0431', n: { es: 'Estimado · 3 cuartos', en: 'Estimate · 3 rooms' }, d: 'OCT 04 · 2025' },
                { code: 'CON-0431', n: { es: 'Contrato firmado',     en: 'Signed contract' },     d: 'OCT 06 · 2025' },
                { code: 'INV-0431', n: { es: 'Factura final',         en: 'Final invoice' },        d: '—' },
              ].map((r, i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 100px 60px', gap: 10, padding: '10px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                  <div className="codex">{r.code}</div>
                  <div style={{ fontSize: 13.5 }}>{t(r.n, lang)}</div>
                  <div className="codex tab">{r.d}</div>
                  <a className="codex" style={{ textAlign: 'right', cursor: 'pointer' }}>↓ PDF</a>
                </li>
              ))}
            </ul>
          </div>

          <div className="card">
            <Eyebrow>{t({ es: 'Fotos · obra', en: 'Photos · jobsite' }, lang)}</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 12 }}>
              {[
                { es: 'Antes · sala', en: 'Before · living' },
                { es: 'Preparación', en: 'Prep' },
                { es: 'Día 2',       en: 'Day 2' },
                { es: 'Día 4 · cocina', en: 'Day 4 · kitchen' },
                { es: 'Detalle ventana', en: 'Window detail' },
                { es: 'Después · entrega', en: 'After · handover' },
              ].map((p, i) => (
                <div key={i}>
                  <Slot label={'IMG ' + String(i+1).padStart(2,'0')} sub="thumb" style={{ aspectRatio: '4/3' }} />
                  <div style={{ fontSize: 11, color: 'var(--ink-muted)', marginTop: 4 }}>{t(p, lang)}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

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

/* ── SERVICE DETAIL — Interior Paint ─────────────────────── */

function ServiceInteriorPaint() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="services" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '36px 36px 0' }}>
          <div className="codex" style={{ color: 'var(--ink-muted)' }}>
            <a style={{ color: 'inherit', textDecoration: 'none' }}>{t({ es: 'Servicios', en: 'Services' }, lang)}</a> &nbsp;/&nbsp; {t({ es: 'Pintura interior', en: 'Interior paint' }, lang)}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 36, marginTop: 14, alignItems: 'start' }}>
            <div>
              <Eyebrow>SERVICE · 01 · DV·PAINT·INT</Eyebrow>
              <h1 className="display" style={{ fontSize: 56, margin: '12px 0 12px' }}>
                {t({ es: 'Pintura interior.', en: 'Interior paint.' }, lang)}
              </h1>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 540 }}>
                {t({
                  es: 'Casa entera o cuartos sueltos. Preparación honesta, dos manos de pintura, limpieza al terminar. Tu inquilino puede quedarse en casa.',
                  en: 'Whole-home or single rooms. Honest prep, two coats, clean-up at the end. Your tenant can stay home.'
                }, lang)}
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
                <a className="btn btn-call">{t({ es: 'Pedir estimado →', en: 'Request estimate →' }, lang)}</a>
                <a className="btn btn-ghost">{t({ es: 'Ver fotos', en: 'See photos' }, lang)}</a>
              </div>
            </div>
            <Slot label="SERVICE HERO" sub="finished room · 4:3" slotId="service-paint-int-hero" style={{ aspectRatio: '4 / 3' }} />
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Qué incluye', en: 'What it includes' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--divider)', marginTop: 12 }}>
            {[
              { code: '01', t: { es: 'Preparación',  en: 'Prep' },      d: { es: 'Plástico, enmascarado, parchado pequeño, lijado, primer donde haga falta.', en: 'Plastic, masking, light patching, sand, primer where needed.' } },
              { code: '02', t: { es: 'Dos manos',    en: 'Two coats' }, d: { es: 'Pintura de calidad — marca y línea nombradas en el estimado.', en: 'Quality paint — brand and line named on the estimate.' } },
              { code: '03', t: { es: 'Limpieza',     en: 'Clean-up' },  d: { es: 'Quitamos plástico, barremos, regresamos los muebles donde estaban.', en: 'Plastic comes off, we sweep, furniture goes back where it was.' } },
            ].map((b, i) => (
              <div key={i} style={{ borderRight: i < 2 ? '1px solid var(--divider)' : 'none', borderBottom: '1px solid var(--divider)', padding: '18px 20px 22px' }}>
                <div className="codex" style={{ color: 'var(--terracotta)' }}>{b.code}</div>
                <div className="display" style={{ fontSize: 22, margin: '8px 0 8px' }}>{t(b.t, 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', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 32, alignItems: 'start' }}>
          <div>
            <Eyebrow>{t({ es: 'Rangos típicos', en: 'Typical ranges' }, lang)}</Eyebrow>
            <p style={{ fontSize: 13.5, color: 'var(--ink-muted)', maxWidth: 480, lineHeight: 1.55, marginTop: 6 }}>
              {t({
                es: 'Para que sepas en qué tono estamos. Tu estimado real cambia con el tamaño, el estado de las paredes y la pintura escogida.',
                en: 'So you know the ballpark. Your real estimate moves with size, wall condition, and paint chosen.'
              }, lang)}
            </p>
            <dl style={{ marginTop: 14 }}>
              <div className="spec-row"><dt>{t({ es: '1 CUARTO', en: '1 ROOM' }, lang)}</dt><dd className="tab">$480 – $780</dd></div>
              <div className="spec-row"><dt>{t({ es: '3 CUARTOS', en: '3 ROOMS' }, lang)}</dt><dd className="tab">$1,400 – $2,200</dd></div>
              <div className="spec-row"><dt>{t({ es: 'CASA ENTERA · 3BR', en: 'WHOLE HOME · 3BR' }, lang)}</dt><dd className="tab">$3,800 – $6,200</dd></div>
              <div className="spec-row"><dt>{t({ es: 'PLAZO TÍPICO', en: 'TYPICAL DURATION' }, lang)}</dt><dd>{t({ es: '1–5 días según tamaño', en: '1–5 days by size' }, lang)}</dd></div>
            </dl>
          </div>
          <div className="card">
            <Eyebrow>{t({ es: 'No incluye', en: 'Not included' }, lang)}</Eyebrow>
            <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)' }}>
              {[
                { es: 'Drywall mayor — pared rota, hoyos grandes. Va aparte.', en: 'Major drywall — broken walls, big holes. Separate line.' },
                { es: 'Reparación de humedad en el origen — fontanero / techador primero.', en: 'Fixing the moisture source — plumber / roofer first.' },
                { es: 'Color match exacto si la pintura original es discontinuada.', en: 'Exact color match if the original paint is discontinued.' },
                { es: 'Cambio de tinte sin aviso después de empezar.', en: 'Mid-job color changes without notice.' },
              ].map((r, i) => (
                <li key={i} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10 }}>
                  <span style={{ color: 'var(--ink-muted)' }}>×</span>{t(r, lang)}
                </li>
              ))}
            </ul>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Trabajos recientes', en: 'Recent work' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginTop: 12 }}>
            {[
              { es: 'Sala · warm-white', en: 'Living · warm white' },
              { es: 'Recámara principal · gris claro', en: 'Main bedroom · light gray' },
              { es: 'Pasillo · ojivas',  en: 'Hallway · niches' },
              { es: 'Cocina · gabinetes', en: 'Kitchen · cabinets' },
            ].map((p, i) => (
              <div key={i}>
                <Slot label={'WORK ' + String(i + 1).padStart(2, '0')} sub={t(p, lang)} slotId={'service-paint-int-' + (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>
  );
}

/* ── WRITTEN ESTIMATE DOCUMENT (what client receives) ────── */

function EstimateDocument() {
  const t = window.t;
  const { lang } = window.useLang();
  const lines = [
    { code: 'PREP-01', d: { es: 'Plástico, enmascarado, parchado menor.',        en: 'Plastic, masking, minor patching.' },          qty: '1', unit: 'lot', total: 280 },
    { code: 'PAINT-LV', d: { es: 'Sala y comedor — dos manos · warm white.',     en: 'Living + dining — two coats · warm white.' }, qty: '1', unit: 'rm', total: 980 },
    { code: 'PAINT-BR', d: { es: 'Recámara principal — dos manos · gris claro.', en: 'Main bedroom — two coats · light gray.' },     qty: '1', unit: 'rm', total: 620 },
    { code: 'PAINT-BR2', d: { es: 'Recámara 2 — dos manos · warm white.',         en: 'Bedroom 2 — two coats · warm white.' },        qty: '1', unit: 'rm', total: 540 },
    { code: 'TRIM-01', d: { es: 'Molduras y puertas — un cuarto.',                 en: 'Trim and doors — one room.' },                 qty: '1', unit: 'set', total: 220 },
    { code: 'DW-PATCH', d: { es: 'Parchado de drywall — humedad ventana comedor.', en: 'Drywall patch — moisture spot, dining window.' }, qty: '1', unit: 'spot', total: 180 },
    { code: 'CLEAN', d: { es: 'Limpieza final y reacomodo de muebles.',           en: 'Final clean and furniture replace.' },         qty: '1', unit: 'lot', total: 140 },
  ];
  const subtotal = lines.reduce((a, l) => a + l.total, 0);
  const tax = 0;
  const total = subtotal + tax;
  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)' }}>
            <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: 'ESTIMADO ESCRITO', en: 'WRITTEN ESTIMATE' }, lang)}</div>
                <div className="display tab" style={{ fontSize: 22, margin: '4px 0 0' }}>EST-2026-0431</div>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>OCT 04 · 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: 'TRABAJO', en: 'JOB' }, lang)}</div>
                <div style={{ marginTop: 4, fontSize: 14 }}>
                  {t({ es: 'Pintura interior · 3 cuartos', en: 'Interior paint · 3 rooms' }, lang)}<br />
                  {t({ es: 'Capataz: Erick S.', en: 'Foreman: Erick S.' }, lang)}<br />
                  {t({ es: 'Plazo: 4 días laborables', en: 'Duration: 4 working days' }, lang)}<br />
                  {t({ es: 'Inicia: lun 13 oct, 8:00 a.m.', en: 'Starts: Mon Oct 13, 8:00 a.m.' }, 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: 60 }}>QTY</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: 90 }}>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)', fontSize: 12, color: 'var(--ink-muted)' }}>{l.qty} {l.unit}</td>
                    <td style={{ padding: '10px 6px', textAlign: 'right', fontFamily: 'var(--mono)', fontVariantNumeric: 'tabular-nums' }}>${l.total.toLocaleString()}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr><td colSpan={3} 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={3} style={{ padding: '4px 6px', textAlign: 'right', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-muted)' }}>{t({ es: 'IMPUESTO (servicios)', en: 'TAX (services)' }, 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={3} 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: 'Términos', en: 'Terms' }, lang)}</Eyebrow>
                <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
                  <li>· {t({ es: 'Pago al terminar. Sin pago inicial.', en: 'Pay on completion. No deposit.' }, lang)}</li>
                  <li>· {t({ es: 'Validez del estimado: 30 días.', en: 'Estimate valid: 30 days.' }, lang)}</li>
                  <li>· {t({ es: 'Garantía de mano de obra: 1 año.', en: 'Workmanship warranty: 1 year.' }, lang)}</li>
                  <li>· {t({ es: 'Contrato firmado antes de empezar.', en: 'Signed contract before start.' }, lang)}</li>
                </ul>
              </div>
              <div>
                <Eyebrow>{t({ es: 'Licencia y aseguranza', en: 'License & insurance' }, lang)}</Eyebrow>
                <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
                  <li>· {t({ es: 'CSLB: contratista nombrado al firmar.', en: 'CSLB: contractor named at signing.' }, lang)}</li>
                  <li>· {t({ es: 'Aseguranza: liability + workers comp.', en: 'Insurance: liability + workers comp.' }, lang)}</li>
                  <li>· {t({ es: 'Solicita el certificado si quieres.', en: 'Ask for the COI if you want one.' }, lang)}</li>
                </ul>
              </div>
            </section>

            <section style={{ marginTop: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, borderTop: '1px solid var(--divider-strong)', paddingTop: 18 }}>
              <div>
                <div className="codex">{t({ es: 'CLIENTE — FIRMA', en: 'CLIENT — SIGNATURE' }, lang)}</div>
                <div style={{ height: 50, borderBottom: '1.5px solid var(--ink)', margin: '24px 0 4px' }} />
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'fecha:', en: 'date:' }, lang)} ____________</div>
              </div>
              <div>
                <div className="codex">{t({ es: 'DREAMVALLEY — FIRMA', en: 'DREAMVALLEY — SIGNATURE' }, lang)}</div>
                <div style={{ height: 50, borderBottom: '1.5px solid var(--ink)', margin: '24px 0 4px', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, paddingLeft: 4, display: 'flex', alignItems: 'flex-end', color: 'var(--ink)' }}>Erick S.</div>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>OCT 04 · 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-primary">{t({ es: 'Aceptar y firmar', en: 'Accept & sign' }, lang)}</a>
          </div>
        </section>

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

/* ── FOREMAN DISPATCH (internal ops view) ────────────────── */

function ForemanDispatch() {
  const t = window.t;
  const { lang } = window.useLang();
  const jobs = [
    { id: 'DV-0431', client: 'Lupita H.',    addr: '2418 Magnolia Ave, Riverside',  type: { es: 'Interior · 3 cuartos', en: 'Interior · 3 rooms' }, status: { es: 'Día 1 · cubrir', en: 'Day 1 · cover' }, crew: ['ES', 'JV', 'AM'], color: 'var(--olive)' },
    { id: 'DV-0432', client: 'Ramirez fam.', addr: '5102 Arlington, Riverside',     type: { es: 'Exterior · 2 pisos',    en: 'Exterior · 2-story' }, status: { es: 'Día 3 · cuerpo',  en: 'Day 3 · body coat' }, crew: ['JV', 'MR'], color: 'var(--olive)' },
    { id: 'DV-0433', client: 'Castle Realty',addr: '8841 Mission, Riverside',       type: { es: 'Pre-venta · cocina',    en: 'Pre-sale · kitchen' }, status: { es: 'Esperar primer',   en: 'Wait primer' },     crew: ['AM'],        color: 'var(--terracotta)' },
    { id: 'DV-0434', client: 'Joel B.',      addr: '320 Russell St, Riverside',     type: { es: 'Drywall · techo',       en: 'Drywall · ceiling' },  status: { es: 'Programar',         en: 'Schedule' },        crew: [],            color: 'var(--ink-muted)' },
  ];
  const estimates = [
    { id: 'EST-0541', client: 'Maria O.',    when: { es: 'esperando 18 h',  en: 'waiting 18 h' }, sla: 'good' },
    { id: 'EST-0542', client: 'Hidalgo fam.',when: { es: 'esperando 41 h',  en: 'waiting 41 h' }, sla: 'warn' },
    { id: 'EST-0543', client: 'A. Pérez',    when: { es: 'esperando 6 h',   en: 'waiting 6 h' },  sla: 'good' },
  ];
  return (
    <div className="page">
      <div className="nav">
        <div className="nav-inner">
          <div className="brand">
            <span className="brand-mark">DreamValley</span>
            <span className="brand-sub">DISPATCH · OPS</span>
          </div>
          <div className="nav-links">
            <a className="nav-link is-active">{t({ es: 'Hoy', en: 'Today' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Esta semana', en: 'This week' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Cuadrillas', en: 'Crews' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Estimados', en: 'Estimates' }, lang)}</a>
            <LangPill />
            <span className="badge" style={{ borderColor: 'var(--olive)' }}><span className="dot" />ERICK S. · {t({ es: 'capataz', en: 'foreman' }, lang)}</span>
          </div>
        </div>
      </div>

      <div className="page-scroll hide-scroll">
        <div className="banner">
          <span className="dot" />
          {t({ es: 'Mié 14 oct · 4 obras activas · 3 estimados', en: 'Wed Oct 14 · 4 active jobs · 3 estimates' }, lang)}
          <span style={{ flex: 1 }} />
          ORINOVA · OPS · MMXXVI
        </div>

        <section style={{ maxWidth: 1180, margin: '0 auto', padding: '24px 28px 0' }}>
          <Eyebrow>{t({ es: 'Obras de hoy', en: 'Today\u2019s jobs' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '110px 1.6fr 1fr 1fr 100px 110px', gap: 14, padding: '10px 0 8px', borderBottom: '1px solid var(--divider-strong)', marginTop: 10 }}>
            <div className="codex">JOB</div>
            <div className="codex">{t({ es: 'CLIENTE / DIRECCIÓN', en: 'CLIENT / ADDRESS' }, lang)}</div>
            <div className="codex">{t({ es: 'TIPO', en: 'TYPE' }, lang)}</div>
            <div className="codex">{t({ es: 'ESTADO', en: 'STATUS' }, lang)}</div>
            <div className="codex">CREW</div>
            <div className="codex" style={{ textAlign: 'right' }}>{t({ es: 'ACCIÓN', en: 'ACTION' }, lang)}</div>
          </div>
          {jobs.map((j, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1.6fr 1fr 1fr 100px 110px', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--divider)', alignItems: 'center' }}>
              <div className="codex" style={{ color: 'var(--ink)' }}>{j.id}</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{j.client}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-muted)' }}>{j.addr}</div>
              </div>
              <div style={{ fontSize: 13.5 }}>{t(j.type, lang)}</div>
              <div style={{ fontSize: 13, color: j.color, fontWeight: 500 }}>● {t(j.status, lang)}</div>
              <div style={{ display: 'flex', gap: 4 }}>
                {j.crew.length === 0 ? <span className="codex" style={{ color: 'var(--ink-muted)' }}>—</span> :
                  j.crew.map((c, k) => (
                    <span key={k} style={{ width: 28, height: 28, borderRadius: 14, background: 'var(--paper-cream)', border: '1px solid var(--divider)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-soft)' }}>{c}</span>
                  ))
                }
              </div>
              <a className="codex" style={{ textAlign: 'right', cursor: 'pointer' }}>{t({ es: 'abrir →', en: 'open →' }, lang)}</a>
            </div>
          ))}
        </section>

        <section style={{ maxWidth: 1180, margin: '32px auto 0', padding: '0 28px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 22 }}>
          <div className="card">
            <Eyebrow>{t({ es: 'Calendario · esta semana', en: 'Schedule · this week' }, lang)}</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: '60px repeat(6, 1fr)', borderTop: '1px solid var(--divider)', marginTop: 10 }}>
              <div className="codex" style={{ padding: '8px 0' }}>&nbsp;</div>
              {['LUN', 'MAR', 'MIÉ', 'JUE', 'VIE', 'SÁB'].map(d => (
                <div key={d} className="codex" style={{ padding: '8px 0', textAlign: 'center' }}>{d}</div>
              ))}
              {['ES', 'JV', 'AM', 'MR'].map((crew, r) => (
                <React.Fragment key={crew}>
                  <div className="codex" style={{ padding: '14px 0', borderTop: '1px solid var(--divider)' }}>{crew}</div>
                  {[0, 1, 2, 3, 4, 5].map(c => {
                    const filled = (r + c) % 3 !== 2;
                    return (
                      <div key={c} style={{ padding: 6, borderTop: '1px solid var(--divider)', borderLeft: c === 0 ? '1px solid var(--divider)' : 'none' }}>
                        {filled ? (
                          <div style={{ height: 28, background: r === 2 && c >= 3 ? 'var(--terracotta)' : 'var(--olive)', borderRadius: 2, display: 'flex', alignItems: 'center', padding: '0 6px', fontSize: 10, color: 'var(--paper)', fontFamily: 'var(--mono)' }}>
                            DV-{(431 + r + c).toString()}
                          </div>
                        ) : null}
                      </div>
                    );
                  })}
                </React.Fragment>
              ))}
            </div>
          </div>
          <div className="card">
            <Eyebrow>{t({ es: 'Cola de estimados', en: 'Estimate queue' }, lang)}</Eyebrow>
            <ul style={{ margin: '12px 0 0', padding: 0, listStyle: 'none' }}>
              {estimates.map((e, i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 90px', gap: 8, padding: '10px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                  <span className="codex">{e.id}</span>
                  <div>
                    <div style={{ fontSize: 13 }}>{e.client}</div>
                    <div className="codex" style={{ color: e.sla === 'warn' ? 'var(--terracotta)' : 'var(--ink-muted)' }}>● {t(e.when, lang)}</div>
                  </div>
                  <a className="codex" style={{ textAlign: 'right', cursor: 'pointer' }}>{t({ es: 'escribir →', en: 'write →' }, lang)}</a>
                </li>
              ))}
            </ul>
            <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
              <a className="btn btn-primary" style={{ flex: 1 }}>{t({ es: 'Nuevo estimado', en: 'New estimate' }, lang)}</a>
            </div>
          </div>
        </section>

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

/* ── MOBILE HOME (390 × 844) ─────────────────────────────── */

function MobileHome() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page" style={{ fontSize: 14 }}>
      <div className="nav">
        <div className="nav-inner" style={{ padding: '12px 18px' }}>
          <div className="brand">
            <span className="brand-mark" style={{ fontSize: 18 }}>DreamValley</span>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <LangPill />
            <a className="btn btn-call" style={{ padding: '4px 10px', fontSize: 11 }}>☎</a>
          </div>
        </div>
      </div>
      <div className="page-scroll hide-scroll">
        <section style={{ padding: '22px 22px 0' }}>
          <Eyebrow>DREAMVALLEY · ORINOVA</Eyebrow>
          <h1 className="display" style={{ fontSize: 36, lineHeight: 1.05, margin: '10px 0 10px' }}>
            {t({ es: 'Pintura, drywall, reparaciones — hechas bien.', en: 'Paint, drywall, repairs — done right.' }, lang)}
          </h1>
          <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
            {t({
              es: 'Cuadrillas bilingües. Estimado escrito en 48 horas. Sin sorpresas.',
              en: 'Bilingual crews. Written estimate in 48 hours. No surprises.'
            }, lang)}
          </p>
          <div style={{ display: 'grid', gap: 10, marginTop: 18 }}>
            <a className="btn btn-call" style={{ padding: '14px', fontSize: 16 }}>
              ☎ {t({ es: 'Llamar · (951) 555-0148', en: 'Call · (951) 555-0148' }, lang)}
            </a>
            <a className="btn btn-primary" style={{ padding: '14px', fontSize: 16 }}>
              {t({ es: 'Pedir estimado', en: 'Request estimate' }, lang)} →
            </a>
          </div>
        </section>

        <section style={{ padding: '22px 22px 0' }}>
          <Slot label="HERO PHOTO" sub="mobile · 4:5" slotId="mobile-hero" style={{ aspectRatio: '4 / 5' }} />
        </section>

        <section style={{ padding: '24px 22px 0' }}>
          <Eyebrow>{t({ es: 'Servicios', en: 'Services' }, lang)}</Eyebrow>
          <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none', borderTop: '1px solid var(--divider)' }}>
            {SERVICES.map((s, i) => (
              <li key={i} style={{ padding: '14px 0', borderBottom: '1px solid var(--divider)' }}>
                <div className="codex" style={{ color: 'var(--terracotta)' }}>0{i + 1}</div>
                <div style={{ fontSize: 15, fontWeight: 500, marginTop: 4 }}>{t(s, lang)}</div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', marginTop: 4, lineHeight: 1.5 }}>{t(s.detail, lang)}</div>
              </li>
            ))}
          </ul>
        </section>

        <section style={{ padding: '24px 22px 0' }}>
          <Eyebrow>{t({ es: 'Cómo funciona', en: 'How it works' }, lang)}</Eyebrow>
          <ol style={{ margin: '10px 0 0', padding: 0, listStyle: 'none' }}>
            {STEPS.map(s => (
              <li key={s.n} style={{ display: 'grid', gridTemplateColumns: '34px 1fr', gap: 12, padding: '10px 0', borderBottom: '1px solid var(--divider)' }}>
                <div className="display" style={{ fontSize: 26, color: 'var(--terracotta)', lineHeight: 1 }}>{s.n}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{t(s, lang)}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{t(s.d, lang)}</div>
                </div>
              </li>
            ))}
          </ol>
        </section>

        <section style={{ padding: '24px 22px 28px' }}>
          <div style={{ background: 'var(--paper-cream)', border: '1px solid var(--divider)', padding: 18 }}>
            <Eyebrow>{t({ es: 'Honesto', en: 'Honest' }, lang)}</Eyebrow>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 16, fontStyle: 'italic', lineHeight: 1.5, marginTop: 8, color: 'var(--ink-soft)' }}>
              {t({
                es: '"No te vendemos lo que no necesitas. Hablamos español sin traducir prisa."',
                en: '"We don\u2019t sell you what you don\u2019t need. We speak Spanish without rushing."'
              }, lang)}
            </p>
          </div>
        </section>

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

/* ── CREW page — meet the team ────────────────────────────── */

const CREW = [
  { initials: 'ES', name: 'Erick S.',     role: { es: 'Capataz · fundador',         en: 'Foreman · founder' },        years: 14, lang: 'ES · EN', city: 'Riverside',  bio: { es: 'Empezó pintando con su padre a los 16. Pintura, drywall, gabinetes — todo el oficio. Habla con cada cliente antes de firmar.', en: 'Started painting with his dad at 16. Paint, drywall, cabinetry — full trade. Talks to every client before contract.' } },
  { initials: 'JV', name: 'Javier V.',    role: { es: 'Pintor sénior',              en: 'Senior painter' },           years: 11, lang: 'ES · EN', city: 'Moreno Valley', bio: { es: 'Especialista en exteriores y rodillo. La fachada de dos pisos en Arlington fue suya.',  en: 'Exterior and roller specialist. The two-story on Arlington was his.' } },
  { initials: 'AM', name: 'Andrés M.',    role: { es: 'Pintor · gabinetes',          en: 'Painter · cabinets' },       years: 7,  lang: 'ES · EN', city: 'Fontana',    bio: { es: 'Cabinetería y espray fino. Si quieres terminado de mueble en una puerta, lo hace Andrés.', en: 'Cabinetry and fine spray. Furniture-grade finish on doors — that\u2019s Andrés.' } },
  { initials: 'MR', name: 'Mauricio R.',  role: { es: 'Drywall y techo',             en: 'Drywall & ceiling' },        years: 9,  lang: 'ES',      city: 'Riverside',  bio: { es: 'Parchado, texturizado, remoción de popcorn. Mejor mano en el equipo para techos.',  en: 'Patching, texture, popcorn removal. Best ceiling hands on the team.' } },
  { initials: 'LO', name: 'Lourdes O.',   role: { es: 'Coordinación · estimados',    en: 'Coordination · estimates' }, years: 4,  lang: 'ES · EN', city: 'Corona',     bio: { es: 'Recibe la llamada, pasa la obra al capataz, manda el estimado escrito. Tu primer punto de contacto.', en: 'Takes the call, hands the job to a foreman, sends the written estimate. Your first point of contact.' } },
  { initials: 'GH', name: 'Gabriel H.',   role: { es: 'Aprendiz · preparación',      en: 'Apprentice · prep' },        years: 1,  lang: 'ES · EN', city: 'Riverside',  bio: { es: 'En su primer año. Hace plástico, enmascarado y lijado. Aprendiendo de cada capataz.',  en: 'First year. Plastic, masking, sanding. Learning from every foreman.' } },
];

function CrewPage() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <div className="page">
      <Nav active="services" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 36px 0' }}>
          <Eyebrow>DREAMVALLEY · {t({ es: 'cuadrilla', en: 'crew' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 60, margin: '12px 0 12px', maxWidth: 880 }}>
            {t({ es: 'La gente que llega a tu casa.', en: 'The people who show up at your house.' }, lang)}
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 720 }}>
            {t({
              es: 'Mismas caras, mismos nombres, todos los días. Tu capataz es la misma persona del primer estimado hasta la entrega.',
              en: 'Same faces, same names, every day. Your foreman is the same person from the first estimate through handover.'
            }, lang)}
          </p>
        </section>

        <section style={{ maxWidth: 1100, margin: '32px auto 0', padding: '0 36px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {CREW.map(c => (
              <div className="card" key={c.initials} style={{ padding: 0, overflow: 'hidden' }}>
                <Slot label={c.initials} sub={t(c.role, lang)} slotId={'crew-' + c.initials.toLowerCase()} style={{ aspectRatio: '5 / 4' }} />
                <div style={{ padding: 18 }}>
                  <div className="codex">{c.city.toUpperCase()} · {c.years} {t({ es: 'años', en: 'yrs' }, lang)} · {c.lang}</div>
                  <h3 className="display" style={{ fontSize: 22, margin: '8px 0 2px' }}>{c.name}</h3>
                  <div style={{ fontSize: 12.5, color: 'var(--terracotta)', fontFamily: 'var(--mono)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{t(c.role, lang)}</div>
                  <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-soft)', margin: '10px 0 0' }}>{t(c.bio, lang)}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <div className="card" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 18, alignItems: 'center', background: 'var(--paper-cream)' }}>
            <div>
              <Eyebrow>{t({ es: 'Únete', en: 'Join the crew' }, lang)}</Eyebrow>
              <p style={{ fontSize: 14.5, marginTop: 6, color: 'var(--ink-soft)' }}>
                {t({
                  es: 'Buscamos pintor con 3+ años de experiencia. Sueldo justo, semanas de 40 h, herramientas incluidas. Hablamos español sin prisa.',
                  en: 'Looking for a painter with 3+ years experience. Fair wage, 40-hour weeks, tools included. We speak Spanish without rushing.'
                }, lang)}
              </p>
            </div>
            <a className="btn btn-primary">{t({ es: 'Aplicar →', en: 'Apply →' }, lang)}</a>
          </div>
        </section>

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

/* ── JOB DETAIL — client drill-in ─────────────────────────── */

function JobDetail() {
  const t = window.t;
  const { lang } = window.useLang();
  const timeline = [
    { d: 'OCT 02', what: { es: 'Solicitud recibida',                            en: 'Request received' },                       by: 'Lourdes O.',     done: true },
    { d: 'OCT 03', what: { es: 'Llamada de bienvenida · 18 min',                en: 'Welcome call · 18 min' },                  by: 'Lourdes O.',     done: true },
    { d: 'OCT 03', what: { es: 'Visita en sitio · 45 min',                       en: 'Site walkthrough · 45 min' },              by: 'Erick S.',       done: true },
    { d: 'OCT 04', what: { es: 'Estimado escrito enviado — EST-2026-0431',      en: 'Written estimate sent — EST-2026-0431' },  by: 'Erick S.',       done: true },
    { d: 'OCT 06', what: { es: 'Contrato firmado',                              en: 'Contract signed' },                        by: 'Lupita H.',      done: true },
    { d: 'OCT 12', what: { es: 'Cuadrilla programada · lun 13 oct',             en: 'Crew scheduled · Mon Oct 13' },            by: 'Erick S.',       done: true },
    { d: 'OCT 13', what: { es: 'Día 1 · plástico y enmascarado',                 en: 'Day 1 · plastic and masking' },             by: 'Crew',           done: true },
    { d: 'OCT 14', what: { es: 'Día 2 · primera mano sala y comedor',           en: 'Day 2 · first coat living + dining' },     by: 'Crew',           done: false, active: true },
    { d: 'OCT 15', what: { es: 'Día 3 · segunda mano sala, recámaras',          en: 'Day 3 · second coat living, bedrooms' },   by: 'Crew',           done: false },
    { d: 'OCT 16', what: { es: 'Día 4 · molduras, limpieza y entrega',          en: 'Day 4 · trim, cleanup, handover' },        by: 'Crew',           done: false },
  ];
  return (
    <div className="page">
      <Nav active="account" surface="orinova" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '30px 36px 0' }}>
          <div className="codex" style={{ color: 'var(--ink-muted)' }}>
            <a style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>{t({ es: 'Cuenta', en: 'Account' }, lang)}</a> &nbsp;/&nbsp; <a style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>{t({ es: 'Tus obras', en: 'Your jobs' }, lang)}</a> &nbsp;/&nbsp; DV-2026-0431
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 12, gap: 16 }}>
            <div>
              <Eyebrow>DV-2026-0431 · {t({ es: 'en obra · día 2 de 4', en: 'on site · day 2 of 4' }, lang)}</Eyebrow>
              <h1 className="display" style={{ fontSize: 40, margin: '8px 0 4px' }}>
                {t({ es: 'Pintura interior · 3 cuartos', en: 'Interior paint · 3 rooms' }, lang)}
              </h1>
              <div style={{ fontSize: 13, color: 'var(--ink-muted)' }}>2418 Magnolia Ave, Riverside · {t({ es: 'capataz', en: 'foreman' }, lang)}: Erick S.</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <a className="btn btn-call">☎ Erick S. · (951) 555-0148</a>
              <a className="btn btn-ghost">{t({ es: 'Mensaje al capataz', en: 'Message foreman' }, lang)}</a>
            </div>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '24px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 22, alignItems: 'start' }}>
          <div className="card">
            <Eyebrow>{t({ es: 'Línea de tiempo', en: 'Timeline' }, lang)}</Eyebrow>
            <ol style={{ margin: '14px 0 0', padding: 0, listStyle: 'none' }}>
              {timeline.map((s, i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '70px 18px 1fr 90px', gap: 10, padding: '10px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                  <span className="codex tab" style={{ color: s.done ? 'var(--ink)' : (s.active ? 'var(--terracotta)' : 'var(--ink-muted)') }}>{s.d}</span>
                  <span style={{ fontFamily: 'var(--mono)', color: s.done ? 'var(--olive)' : (s.active ? 'var(--terracotta)' : 'var(--ink-muted)') }}>
                    {s.done ? '●' : (s.active ? '◉' : '○')}
                  </span>
                  <div>
                    <div style={{ fontSize: 13.5, fontWeight: s.active ? 500 : 400, color: s.done || s.active ? 'var(--ink)' : 'var(--ink-muted)' }}>{t(s.what, lang)}</div>
                    {s.active && <div style={{ fontSize: 11.5, color: 'var(--terracotta)', marginTop: 2, fontFamily: 'var(--mono)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{t({ es: 'hoy · en progreso', en: 'today · in progress' }, lang)}</div>}
                  </div>
                  <span className="codex" style={{ textAlign: 'right' }}>{s.by}</span>
                </li>
              ))}
            </ol>
          </div>

          <div style={{ display: 'grid', gap: 14 }}>
            <div className="card">
              <Eyebrow>{t({ es: 'Notas del capataz', en: 'Foreman notes' }, lang)}</Eyebrow>
              <div style={{ marginTop: 12, padding: 12, background: 'var(--paper-cream)', borderLeft: '3px solid var(--terracotta)', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
                {t({
                  es: '"La humedad cerca de la ventana del comedor es vieja, ya seca. Parchamos y sellamos antes de la primera mano. No vimos otra mancha."',
                  en: '"The moisture spot by the dining window is old, fully dry. We patched and sealed before the first coat. No other spots found."'
                }, lang)}
                <div className="codex" style={{ marginTop: 8, fontStyle: 'normal', color: 'var(--ink-muted)' }}>ERICK S. · OCT 13 · 4:18 PM</div>
              </div>
            </div>

            <div className="card">
              <Eyebrow>{t({ es: 'Materiales nombrados', en: 'Materials named' }, lang)}</Eyebrow>
              <dl style={{ marginTop: 10 }}>
                <div className="spec-row"><dt>{t({ es: 'PAREDES', en: 'WALLS' }, lang)}</dt><dd>Sherwin-Williams · Cashmere · Alabaster</dd></div>
                <div className="spec-row"><dt>{t({ es: 'RECÁMARA', en: 'BEDROOM' }, lang)}</dt><dd>Sherwin-Williams · Cashmere · Repose Gray</dd></div>
                <div className="spec-row"><dt>{t({ es: 'MOLDURAS', en: 'TRIM' }, lang)}</dt><dd>Benjamin Moore · Advance · Decorator's White</dd></div>
                <div className="spec-row"><dt>PRIMER</dt><dd>SW · ProBlock · 1 spot</dd></div>
              </dl>
            </div>
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '24px auto 0', padding: '0 36px' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <Eyebrow>{t({ es: 'Fotos de hoy', en: 'Today\u2019s photos' }, lang)}</Eyebrow>
            <span className="codex">OCT 14 · 9 {t({ es: 'fotos', en: 'photos' }, lang)}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8, marginTop: 12 }}>
            {[...Array(6)].map((_, i) => (
              <Slot key={i} label={'JOB ' + String(i + 1).padStart(2, '0')} sub={'day 2 · ' + (i + 1)} slotId={'job-detail-' + i} style={{ aspectRatio: '4 / 3' }} />
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1100, margin: '24px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
          <div className="card">
            <Eyebrow>{t({ es: 'Estado financiero', en: 'Financial state' }, lang)}</Eyebrow>
            <dl style={{ marginTop: 10 }}>
              <div className="spec-row"><dt>{t({ es: 'CONTRATO', en: 'CONTRACT' }, lang)}</dt><dd className="tab">$4,820.00</dd></div>
              <div className="spec-row"><dt>{t({ es: 'PAGADO', en: 'PAID' }, lang)}</dt><dd className="tab" style={{ color: 'var(--olive)' }}>$0.00</dd></div>
              <div className="spec-row"><dt>{t({ es: 'AL TERMINAR', en: 'ON COMPLETION' }, lang)}</dt><dd className="tab">$4,820.00</dd></div>
            </dl>
          </div>
          <div className="card" style={{ background: 'var(--paper-cream)' }}>
            <Eyebrow>{t({ es: 'Lo que viene', en: 'Up next' }, lang)}</Eyebrow>
            <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)' }}>
              {[
                { es: 'Mañana 8:00 · segunda mano sala y comedor.',                 en: 'Tomorrow 8:00 · second coat living + dining.' },
                { es: 'Jueves · recámaras y molduras.',                              en: 'Thursday · bedrooms and trim.' },
                { es: 'Viernes · revisión final contigo y entrega.',                  en: 'Friday · final walk with you and handover.' },
              ].map((r, i) => (
                <li key={i} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10 }}>
                  <span style={{ color: 'var(--olive)' }}>→</span>{t(r, lang)}
                </li>
              ))}
            </ul>
          </div>
        </section>

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

/* ── REALTOR DASHBOARD — logged-in agent view ─────────────── */

function RealtorDashboard() {
  const t = window.t;
  const { lang } = window.useLang();
  const listings = [
    { id: 'DV-0420', addr: '8841 Mission Blvd',      city: 'Riverside',     status: { es: 'En obra · día 3 de 7',     en: 'On site · day 3 of 7' },    color: 'var(--olive)',     close: 'OCT 28', total: 6800 },
    { id: 'DV-0423', addr: '12440 Citrus St',        city: 'Corona',        status: { es: 'Programado · lun 20 oct',   en: 'Scheduled · Mon Oct 20' },  color: 'var(--terracotta)', close: 'NOV 04', total: 4200 },
    { id: 'DV-0428', addr: '604 Almond Ave',         city: 'Moreno Valley', status: { es: 'Estimado enviado',           en: 'Estimate sent' },          color: 'var(--ink-muted)',  close: 'NOV 12', total: 3950 },
    { id: 'DV-0431', addr: '2418 Magnolia Ave',      city: 'Riverside',     status: { es: 'Entregado · OCT 09',         en: 'Handover · OCT 09' },      color: 'var(--ink)',         close: 'OCT 15', total: 5180 },
  ];
  return (
    <div className="page">
      <Nav active="account" surface="orinova" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1180, margin: '0 auto', padding: '30px 36px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <div>
              <Eyebrow>{t({ es: 'Cuenta · agente inmobiliario', en: 'Account · realtor' }, lang)}</Eyebrow>
              <h1 className="display" style={{ fontSize: 38, margin: '6px 0 0' }}>
                {t({ es: 'Hola, Sandra.', en: 'Welcome back, Sandra.' }, lang)}
              </h1>
              <div className="codex" style={{ marginTop: 4, color: 'var(--ink-muted)' }}>CASTLE REALTY · DRE 02041907 · 4 {t({ es: 'listings activos', en: 'active listings' }, lang)}</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <span className="badge"><span className="dot" /> {t({ es: 'Agente · activo', en: 'Realtor · active' }, lang)}</span>
              <a className="btn btn-primary">+ {t({ es: 'Pedir pre-venta', en: 'Request pre-sale' }, lang)}</a>
            </div>
          </div>
        </section>

        <section style={{ maxWidth: 1180, margin: '22px auto 0', padding: '0 36px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--divider-strong)', borderBottom: '1px solid var(--divider-strong)' }}>
            {[
              { v: '4',       k: { es: 'LISTINGS ACTIVOS',          en: 'ACTIVE LISTINGS' } },
              { v: '$20,130', k: { es: 'CONTRATADO · 90 D',         en: 'CONTRACTED · 90D' } },
              { v: '5.2 d',   k: { es: 'PLAZO MEDIO DE OBRA',        en: 'AVG JOB DURATION' } },
              { v: '4.9/5',   k: { es: 'SATISFACCIÓN',                en: 'SATISFACTION' } },
            ].map((m, i) => (
              <div key={i} style={{ borderRight: i < 3 ? '1px solid var(--divider)' : 'none', padding: '16px 18px' }}>
                <div className="codex">{t(m.k, lang)}</div>
                <div className="display tab" style={{ fontSize: 32, marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>{m.v}</div>
              </div>
            ))}
          </div>
        </section>

        <section style={{ maxWidth: 1180, margin: '24px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Tus listings', en: 'Your listings' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '100px 1.6fr 1fr 1fr 90px 90px', gap: 14, padding: '10px 0 8px', borderBottom: '1px solid var(--divider-strong)', marginTop: 10 }}>
            <div className="codex">JOB</div>
            <div className="codex">{t({ es: 'DIRECCIÓN', en: 'ADDRESS' }, lang)}</div>
            <div className="codex">{t({ es: 'ESTADO', en: 'STATUS' }, lang)}</div>
            <div className="codex">{t({ es: 'CIERRE', en: 'CLOSE' }, lang)}</div>
            <div className="codex" style={{ textAlign: 'right' }}>TOTAL</div>
            <div className="codex" style={{ textAlign: 'right' }}>{t({ es: 'VER', en: 'VIEW' }, lang)}</div>
          </div>
          {listings.map((l, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '100px 1.6fr 1fr 1fr 90px 90px', gap: 14, padding: '14px 0', borderBottom: '1px solid var(--divider)', alignItems: 'center' }}>
              <div className="codex">{l.id}</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{l.addr}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-muted)' }}>{l.city}</div>
              </div>
              <div style={{ fontSize: 13, color: l.color, fontWeight: 500 }}>● {t(l.status, lang)}</div>
              <div className="codex tab">{l.close}</div>
              <div className="tab" style={{ textAlign: 'right', fontFamily: 'var(--mono)', fontSize: 13 }}>${l.total.toLocaleString()}</div>
              <a className="codex" style={{ textAlign: 'right', cursor: 'pointer' }}>{t({ es: 'abrir →', en: 'open →' }, lang)}</a>
            </div>
          ))}
        </section>

        <section style={{ maxWidth: 1180, margin: '24px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 22 }}>
          <div className="card">
            <Eyebrow>{t({ es: 'Listing destacado · DV-0420', en: 'Featured listing · DV-0420' }, lang)}</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 12 }}>
              <Slot label="BEFORE" sub="kitchen" slotId="rl-0420-before" style={{ aspectRatio: '4 / 3' }} />
              <Slot label="MID-JOB" sub="kitchen" slotId="rl-0420-mid"    style={{ aspectRatio: '4 / 3' }} />
              <Slot label="AFTER"  sub="kitchen" slotId="rl-0420-after"  style={{ aspectRatio: '4 / 3' }} />
            </div>
            <p style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.55, marginTop: 12 }}>
              {t({
                es: 'Cocina lista para listar el lunes. Foto profesional el martes. Cierre estimado: 28 octubre.',
                en: 'Kitchen ready for listing Monday. Pro photos Tuesday. Estimated close: Oct 28.'
              }, lang)}
            </p>
          </div>
          <div className="card">
            <Eyebrow>{t({ es: 'Facturación · al cierre', en: 'Billing · on close' }, lang)}</Eyebrow>
            <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none' }}>
              {[
                { id: 'INV-0420', when: 'OCT 28', amount: 6800, state: { es: 'esperando cierre', en: 'awaiting close' }, color: 'var(--ink-muted)' },
                { id: 'INV-0423', when: 'NOV 04', amount: 4200, state: { es: 'esperando obra',   en: 'awaiting work' },  color: 'var(--ink-muted)' },
                { id: 'INV-0431', when: 'OCT 09', amount: 5180, state: { es: 'pagada',           en: 'paid' },           color: 'var(--olive)' },
              ].map((r, i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '90px 80px 1fr 70px', gap: 8, padding: '10px 0', borderBottom: '1px solid var(--divider)', alignItems: 'baseline' }}>
                  <span className="codex">{r.id}</span>
                  <span className="codex tab">{r.when}</span>
                  <span className="codex" style={{ color: r.color }}>● {t(r.state, lang)}</span>
                  <span className="tab" style={{ textAlign: 'right', fontFamily: 'var(--mono)', fontSize: 13 }}>${r.amount.toLocaleString()}</span>
                </li>
              ))}
            </ul>
          </div>
        </section>

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

/* ── MOBILE · estimate flow (3-step phone form) ──────────── */

function MobileEstimateFlow() {
  const t = window.t;
  const { lang } = window.useLang();
  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">2 / 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, false].map((on, i) => (
              <div key={i} style={{ flex: 1, height: 4, background: on ? 'var(--olive)' : 'var(--divider)', borderRadius: 2 }} />
            ))}
          </div>
        </section>

        <section style={{ padding: '24px 22px 0' }}>
          <Eyebrow>{t({ es: 'Paso 2 · sobre la obra', en: 'Step 2 · about the job' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 28, lineHeight: 1.15, margin: '8px 0 8px' }}>
            {t({ es: '¿Qué necesitas pintar?', en: 'What needs paint?' }, lang)}
          </h1>
          <p style={{ fontSize: 13.5, color: 'var(--ink-muted)', marginBottom: 18 }}>
            {t({ es: 'Escoge lo que más se acerque. Lo afinamos por teléfono.', en: 'Pick the closest match. We refine on the call.' }, lang)}
          </p>

          <div style={{ display: 'grid', gap: 10 }}>
            {[
              { es: 'Un cuarto solo',           en: 'One room only',         hint: { es: '1 día',     en: '1 day' } },
              { es: 'Algunos cuartos',           en: 'A few rooms',           hint: { es: '2–3 días', en: '2–3 days' }, on: true },
              { es: 'Toda la casa',              en: 'Whole house',           hint: { es: '4–6 días', en: '4–6 days' } },
              { es: 'Fachada · exterior',        en: 'Exterior · facade',     hint: { es: '3–5 días', en: '3–5 days' } },
              { es: 'Gabinetes de cocina',       en: 'Kitchen cabinets',      hint: { es: '5–7 días', en: '5–7 days' } },
              { es: 'Drywall · parchado / techo', en: 'Drywall · patch / ceiling', hint: { es: '1–2 días', en: '1–2 days' } },
            ].map((o, i) => (
              <button key={i} className="card" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 16, textAlign: 'left', background: o.on ? 'var(--olive-soft)' : 'var(--paper-form)', borderColor: o.on ? 'var(--olive)' : 'var(--divider)', cursor: 'pointer', fontFamily: 'inherit', borderWidth: 1, borderStyle: 'solid' }}>
                <span>
                  <span style={{ display: 'block', fontSize: 15, fontWeight: 500 }}>{t(o, lang)}</span>
                  <span className="codex" style={{ marginTop: 4, display: 'block', color: 'var(--ink-muted)' }}>{t(o.hint, lang)}</span>
                </span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 18, color: o.on ? 'var(--olive)' : 'var(--ink-faint)' }}>{o.on ? '●' : '○'}</span>
              </button>
            ))}
          </div>
        </section>

        <section style={{ padding: '24px 22px 0' }}>
          <Eyebrow>{t({ es: '¿Hay algo urgente?', en: 'Anything urgent?' }, lang)}</Eyebrow>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 10 }}>
            {[
              { es: 'Humedad / mancha', en: 'Moisture / spot', on: true },
              { es: 'Pre-venta',         en: 'Pre-sale' },
              { es: 'Inquilino nuevo',   en: 'New tenant' },
              { es: 'Inspección',         en: 'Inspection' },
              { es: 'Ninguno',            en: 'None' },
            ].map((c, i) => (
              <span key={i} className="badge" style={{
                background: c.on ? 'var(--ink)' : 'transparent',
                color: c.on ? 'var(--paper)' : 'var(--ink-soft)',
                borderColor: c.on ? 'var(--ink)' : 'var(--divider-strong)',
                padding: '8px 14px', fontSize: 12,
              }}>{t(c, lang)}</span>
            ))}
          </div>
        </section>

        <section style={{ padding: '24px 22px 0' }}>
          <Eyebrow>{t({ es: 'Cuándo te gustaría empezar', en: 'When would you start' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginTop: 10 }}>
            {[
              { es: 'Esta semana', en: 'This week' },
              { es: 'Próximas 2',  en: 'Next 2 wks', on: true },
              { es: 'Sin prisa',   en: 'Flexible' },
            ].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>

        <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: 10 }}>
          <a className="btn btn-primary" style={{ padding: '14px', fontSize: 15 }}>{t({ es: 'Siguiente · datos de contacto', en: 'Next · contact details' }, lang)} →</a>
          <a className="btn btn-ghost" style={{ padding: '12px', fontSize: 13 }}>
            {t({ es: 'O llámanos · (951) 555-0148', en: 'Or call us · (951) 555-0148' }, lang)}
          </a>
        </section>
      </div>
    </div>
  );
}

window.OrinovaPages = {
  HomeQuiet, HomeOperator, HomeField,
  EstimatePage, RealtorsPage, FinancingPage, OperationsPage,
  MembershipLogin, MembershipAccount,
  ServiceInteriorPaint, EstimateDocument, ForemanDispatch, MobileHome,
  CrewPage, JobDetail, RealtorDashboard, MobileEstimateFlow,
};

// Atoms shared with pages2.jsx (separate script scope).
window.OrinovaAtoms = { Nav, Foot, Eyebrow, LangPill, Slot };
window.OrinovaShared = { SERVICES, STEPS, CREW };
