/* Orinova Portal — pages20.jsx
   El Trato v0.2 — the doctrine made visible.

     · NightWatch          — BusinessCare 24/7 · 10 PM – 6 AM full shift
                             Light Night $350/mo · Full Night $850/mo
     · DignityFloor        — Family Dock + published wage floor
                             $25/hr loaded · no 1099-only · healthcare at 30hr
     · LaPared             — the Wall · social proof · opt-in only
     · ThreeDoors          — the three-options explainer (estimate ladder)

   Each page follows the voice codex of El Trato v0.2 — bilingual native,
   prices naked, worker first, no emergency upsell.
*/

/* ── NIGHT WATCH · BusinessCare 24/7 ────────────────────────────
   The B2B / commercial after-hours offering. Full-shift, not a sliver.
   Sun Tzu + Deming + Studs Terkel ratified the 10 PM – 6 AM window.
*/

function NightWatch() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = window.OrinovaAtoms;

  const skus = [
    {
      code: 'I',
      name:   { es: 'Guardia Ligera',                       en: 'Light Night' },
      window: { es: '10 PM – 1 AM · 3 paradas',             en: '10 PM – 1 AM · 3 stops' },
      target: { es: 'Boutique · gimnasio · consultorio dental · oficinas pequeñas',
                en: 'Boutique retail · gyms · dental offices · small clinics' },
      price:  '$350 / mo',
      priceSub: { es: 'piso publicado · cotización por SF y ritmo',
                  en: 'published floor · quoted by SF and cadence' },
      scope: [
        { es: 'Esquineros y marcos de puerta',                en: 'Corner guards & door jambs' },
        { es: 'Cubrir rayones y grafiti',                      en: 'Scuff & graffiti cover-up' },
        { es: 'Toques en paredes de alto tráfico',             en: 'Touch-ups in high-traffic walls' },
        { es: 'Lista de pendientes para visita siguiente',     en: 'Punch list for next visit' },
      ],
      accent: 'var(--olive)',
    },
    {
      code: 'II',
      name:   { es: 'Guardia Completa',                     en: 'Full Night' },
      window: { es: '10 PM – 6 AM · turno completo',        en: '10 PM – 6 AM · full shift' },
      target: { es: 'Restaurantes · retail multi-locatario · escuelas · oficinas médicas',
                en: 'Restaurants · multi-tenant retail · schools · medical offices' },
      price:  '$850 / mo',
      priceSub: { es: 'piso publicado · cotización por SF y ritmo',
                  en: 'published floor · quoted by SF and cadence' },
      best: true,
      scope: [
        { es: 'Mantenimiento completo · pisos · paredes · accesorios',
          en: 'Complete maintenance · floors · walls · fixtures' },
        { es: 'Coordinación con limpieza profunda',            en: 'Deep-clean coordination' },
        { es: 'Reportes con foto al amanecer',                  en: 'Photo report by sunrise' },
        { es: 'Foreman bilingüe en sitio',                      en: 'Bilingual foreman on-site' },
        { es: 'Tarifa nocturna posteada · sin sorpresas',       en: 'Night rate posted · no surprises' },
      ],
      accent: 'var(--terracotta)',
    },
  ];

  const premiums = [
    { speed: { es: '7 días estándar',  en: '7-day standard' },     mod: '—',     note: { es: 'línea base',           en: 'baseline' } },
    { speed: { es: 'Arranque en 72h',  en: 'Start within 72h' },   mod: '+15 %', note: { es: 'cobro publicado',       en: 'published premium' } },
    { speed: { es: 'Arranque en 48h',  en: 'Start within 48h' },   mod: '+25 %', note: { es: 'cobro publicado',       en: 'published premium' } },
    { speed: { es: 'Arranque en 24h / fin de semana / fuera de horario', en: 'Start within 24h / weekend / after-hours' }, mod: '+40–60 %', note: { es: 'cobro publicado · sin sorpresa', en: 'published premium · never a surprise' } },
  ];

  return (
    <div className="page">
      <Nav active="services" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">

        {/* ── HERO ───────────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 36px 0' }}>
          <Eyebrow>DREAMVALLEY · {t({ es: 'guardia nocturna', en: 'night watch' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 64, lineHeight: 0.98, margin: '14px 0 18px', maxWidth: 940, letterSpacing: '-0.022em' }}>
            {t({
              es: <>La noche es un <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>turno completo,</em> no una rebanada.</>,
              en: <>The night is a <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>full shift,</em> not a sliver.</>,
            }, lang)}
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 760, fontFamily: 'var(--serif)' }}>
            {t({
              es: 'Tu negocio no puede cerrar dos horas en la mañana para que un pintor repare el marco de la puerta. La Guardia Nocturna entra cuando tu negocio cierra y sale antes de que abras. Diez de la noche a seis de la mañana. Pinta, parcha, limpia, documenta. Tú llegas a un piso seco y un reporte con foto.',
              en: 'Your business cannot lose two morning hours so a painter can patch a door jamb. The Night Watch enters when your business closes and leaves before you open. Ten at night to six in the morning. Paints, patches, cleans, documents. You arrive to a dry floor and a photo report.'
            }, lang)}
          </p>
        </section>

        {/* ── COUNCIL ATTESTATION ──────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '30px auto 0', padding: '0 36px' }}>
          <div className="card-quiet" style={{ padding: 22 }}>
            <Eyebrow>{t({ es: 'Por qué el turno es completo', en: 'Why the shift is full' }, lang)}</Eyebrow>
            <p style={{ margin: '8px 0 0', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
              {t({
                es: 'Tres horas no aguantan el armado y el desarmado. La cuadrilla pone plástico, prepara, trabaja, recoge, lava. Si el turno es tres horas, dos se van en logística. Un turno completo paga la calidad. La cuadrilla descansa en el día, no parte el sueño en dos.',
                en: 'Three hours can’t carry setup and breakdown. The crew tapes off, preps, works, cleans, washes. A three-hour shift means two hours of logistics. A full shift pays for quality. The crew rests in the day; they don’t split their sleep in two.'
              }, lang)}
            </p>
          </div>
        </section>

        {/* ── TWO SKUS · LIGHT & FULL ─────────────────── */}
        <section style={{ maxWidth: 1180, margin: '40px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 22 }}>
          {skus.map((s, i) => (
            <div key={i} className="card" style={{
              padding: 28, display: 'flex', flexDirection: 'column', gap: 14,
              borderColor: s.best ? s.accent : 'var(--divider)',
              borderWidth: s.best ? 2 : 1,
              background: s.best ? 'var(--paper-form)' : 'var(--paper-elevated)',
              position: 'relative',
            }}>
              {s.best && (
                <div style={{ position: 'absolute', top: -12, right: 20, background: s.accent, color: 'var(--paper)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', padding: '4px 10px' }}>
                  {t({ es: 'TURNO COMPLETO', en: 'FULL SHIFT' }, lang)}
                </div>
              )}
              <div className="codex" style={{ color: s.accent }}>SKU · {s.code} · DV·NW</div>
              <div className="display" style={{ fontSize: 32, margin: '2px 0', letterSpacing: '-0.014em' }}>{t(s.name, lang)}</div>
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t(s.window, lang)}</div>
              <p style={{ fontFamily: 'var(--serif)', fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.5, margin: '4px 0 0' }}>
                {t(s.target, lang)}
              </p>
              <div style={{ borderTop: '1px solid var(--divider)', paddingTop: 14, marginTop: 4 }}>
                <div className="display tab" style={{ fontSize: 40, color: s.accent }}>{s.price}</div>
                <div className="codex" style={{ color: 'var(--ink-muted)', marginTop: 2 }}>{t(s.priceSub, lang)}</div>
              </div>
              <ul style={{ margin: '6px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.55, flex: 1 }}>
                {s.scope.map((line, k) => (
                  <li key={k} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '18px 1fr', gap: 8 }}>
                    <span style={{ color: s.accent }}>·</span>{t(line, lang)}
                  </li>
                ))}
              </ul>
              <a className="btn btn-primary" href="/estimate" style={{ background: s.accent, marginTop: 6 }}>
                {t({ es: 'Cotizar mi local →', en: 'Quote my space →' }, lang)}
              </a>
            </div>
          ))}
        </section>

        {/* ── PROJECT PREMIUMS (one-time work) ───────────── */}
        <section style={{ maxWidth: 1100, margin: '50px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Trabajo de proyecto · una sola vez', en: 'Project work · one-time, not subscription' }, lang)}</Eyebrow>
          <h2 className="display" style={{ fontSize: 32, margin: '10px 0 16px', maxWidth: 760, letterSpacing: '-0.014em' }}>
            {t({
              es: 'Los premiums por velocidad se publican. Nunca son sorpresa.',
              en: 'Speed premiums are published. Never a surprise.'
            }, lang)}
          </h2>
          <div style={{ marginTop: 10, border: '1px solid var(--divider-strong)' }}>
            {premiums.map((p, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '2fr 1fr 2fr',
                padding: '16px 18px', alignItems: 'baseline', gap: 18,
                borderBottom: i < premiums.length - 1 ? '1px solid var(--divider)' : 'none',
                background: i % 2 ? 'var(--paper-elevated)' : 'var(--paper)',
              }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 16, fontWeight: 500 }}>{t(p.speed, lang)}</div>
                <div className="display tab" style={{ fontSize: 22, color: p.mod === '—' ? 'var(--ink-muted)' : 'var(--terracotta)' }}>{p.mod}</div>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t(p.note, lang)}</div>
              </div>
            ))}
          </div>
        </section>

        {/* ── EMERGENCY PATCH ─────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '50px auto 0', padding: '0 36px' }}>
          <div className="card" style={{ padding: 30, borderColor: 'var(--ink)', borderWidth: 2 }}>
            <Eyebrow>{t({ es: 'Parche de emergencia · sólo para miembros', en: 'Emergency Patch · members only' }, lang)}</Eyebrow>
            <h2 className="display" style={{ fontSize: 30, margin: '10px 0 14px', maxWidth: 720, letterSpacing: '-0.014em' }}>
              {t({
                es: 'Cuando algo se rompe en la noche, no es momento para una venta.',
                en: 'When something breaks at night, it is not the time for a sale.'
              }, lang)}
            </h2>
            <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
              {[
                { es: 'Respuesta en 2 horas para miembros Refresh y Renew.',                            en: 'Response within 2 hours for Refresh and Renew members.' },
                { es: 'Maintain · siguiente mañana laboral.',                                              en: 'Maintain · next business morning.' },
                { es: 'No miembros · te referimos a alguien que sí está disponible. Sin cargo.',          en: 'Non-members · referred out to someone who is available. No charge.' },
                { es: 'Alcance · estabilizar, no completar. Cubrir una fuga. Tapiar una ventana. Sellar una mancha.', en: 'Scope · stabilize, don’t complete. Tarp a leak. Board a window. Seal a stain.' },
                { es: 'Costo publicado · $250 despacho + materiales al costo. Sin precio sorpresa.',     en: 'Published cost · $250 dispatch + materials at cost. No surge pricing.' },
                { es: 'Reparación completa programada en 7 días a tarifa normal.',                       en: 'Full repair scheduled within 7 days at normal rate.' },
              ].map((r, i) => (
                <li key={i} style={{ padding: '9px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10 }}>
                  <span style={{ color: 'var(--terracotta)' }}>·</span>{t(r, lang)}
                </li>
              ))}
            </ul>
          </div>
        </section>

        {/* ── CLOSE · COMMERCIAL CONTACT ─────────────────── */}
        <section style={{ maxWidth: 1100, margin: '50px auto 0', padding: '0 36px 0' }}>
          <div className="m-card-dark" style={{ padding: '30px 30px' }}>
            <Eyebrow>{t({ es: 'Cotizar mi negocio', en: 'Quote my business' }, lang)}</Eyebrow>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 26, lineHeight: 1.2, margin: '10px 0 14px' }}>
              {t({
                es: 'Mándanos el SF y el ritmo. Cotizamos en 48 horas, por escrito, con foreman nombrado.',
                en: 'Send us the square footage and cadence. We quote in 48 hours, in writing, with foreman named.'
              }, lang)}
            </h3>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="/estimate" style={{ padding: '14px 22px' }}>
                {t({ es: 'Pedir estimado comercial →', en: 'Request commercial estimate →' }, lang)}
              </a>
              <a className="btn btn-ghost" href="tel:+19515550148" style={{ padding: '14px 22px' }}>
                (951) 555-0148
              </a>
            </div>
          </div>
        </section>

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

window.OrinovaPages20 = Object.assign(window.OrinovaPages20 || {}, { NightWatch });


/* ── DIGNITY FLOOR · published wage floor ────────────────────────
   The Family Dock made specific. César Chávez + Aaron Feuerstein +
   Simone Weil + Studs Terkel + Marcos forced the publication.
*/

function DignityFloor() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = window.OrinovaAtoms;

  const floors = [
    {
      n: 'I',
      label: { es: 'Salario mínimo',                              en: 'Wage floor' },
      value: '$25 / hr',
      detail: { es: 'cargado · nadie de la cuadrilla gana menos en ningún trabajo de DreamValley. Sube cuando suba el mínimo del estado.',
                en: 'fully burdened · no crew member earns less on any DreamValley job. Rises with state minimum wage.' },
    },
    {
      n: 'II',
      label: { es: 'W-2 obligatorio · residencial',                en: 'W-2 required · residential' },
      value: { es: 'sin 1099 únicamente', en: 'no 1099-only' },
      detail: { es: 'W-2 con workers comp. 1099 sólo se permite para cuadrillas subcontratistas especializadas con aseguranza nombrada.',
                en: 'W-2 with workers comp. 1099 permitted only for subcontractor specialty crews with named insurance.' },
    },
    {
      n: 'III',
      label: { es: 'Aporte a salud',                                en: 'Healthcare contribution' },
      value: { es: '30 hr / 90 días', en: '30 hr / 90 days' },
      detail: { es: 'Plan ACA Bronze mínimo · empleador cubre 60 % · empleados de 30 hr/semana continuos por 90 días califican automáticamente.',
                en: 'Bronze ACA plan minimum · employer covers 60 % · employees at 30 hr/week continuous for 90 days qualify automatically.' },
    },
    {
      n: 'IV',
      label: { es: 'Horas extra',                                   en: 'Overtime' },
      value: { es: '24 hr aviso · 1.5×', en: '24 hr notice · 1.5×' },
      detail: { es: 'No hay horas extra obligatorias sin 24 horas de aviso. Tarifa 1.5× sobre la base. Piso de California más cortesía.',
                en: 'No mandatory overtime without 24 hours notice. 1.5× over base rate. California floor plus 24-hour courtesy.' },
    },
    {
      n: 'V',
      label: { es: 'Escalera de carrera',                           en: 'Career ladder' },
      value: { es: 'visible · escrita', en: 'visible · written' },
      detail: { es: 'Cada empleado ve los hitos hacia el siguiente rol y aumento. Sin sorpresas. Sin favoritismo. La Academia DreamValley certifica.',
                en: 'Every employee sees the milestones to next role and pay raise. No surprises. No favoritism. DreamValley Academy certifies.' },
    },
    {
      n: 'VI',
      label: { es: 'Sin culpar',                                    en: 'No-blame post-mortems' },
      value: { es: 'sistema, no persona', en: 'system, not person' },
      detail: { es: 'Cuando algo falla, corremos los Cinco Por Qué. Falló el sistema. La persona no. La cuadrilla puede parar la línea — el Andon.',
                en: 'When something fails, we run the Five Whys. The system failed. The person didn’t. Any crew member can stop the line — the Andon.' },
    },
  ];

  return (
    <div className="page">
      <Nav active="about" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">

        {/* ── HERO ───────────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 36px 0' }}>
          <Eyebrow>DREAMVALLEY · {t({ es: 'la familia · el piso publicado', en: 'la familia · the published floor' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 68, lineHeight: 0.98, margin: '14px 0 18px', maxWidth: 980, letterSpacing: '-0.024em' }}>
            {t({
              es: <>El piso es <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>público.</em></>,
              en: <>The floor is <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>public.</em></>,
            }, lang)}
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 760, fontFamily: 'var(--serif)' }}>
            {t({
              es: 'Cada empresa de oficios habla del “equipo.” Pocos publican los números. Esto es lo que firmamos con cada persona que pone el pincel — y con cada cliente que firma un contrato. Si fallamos en cualquiera, este es el documento al que regresar.',
              en: 'Every trade company talks about “the team.” Few publish the numbers. This is what we sign with every person who holds the brush — and with every customer who signs a contract. If we fail on any of these, this is the document to return to.'
            }, lang)}
          </p>
        </section>

        {/* ── THE SIX FLOORS ────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <ol style={{ margin: 0, padding: 0, listStyle: 'none', borderTop: '1px solid var(--ink)' }}>
            {floors.map((f, i) => (
              <li key={i} style={{
                display: 'grid', gridTemplateColumns: '60px 1.5fr 1fr 2fr',
                padding: '24px 0', borderBottom: '1px solid var(--divider)',
                gap: 22, alignItems: 'baseline',
              }}>
                <div style={{
                  fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 500,
                  fontSize: 28, color: 'var(--terracotta)', letterSpacing: '-0.015em',
                }}>{f.n}.</div>
                <div>
                  <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'Piso', en: 'Floor' }, lang)}</div>
                  <h3 style={{ margin: '6px 0 0', fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.01em' }}>
                    {t(f.label, lang)}
                  </h3>
                </div>
                <div className="display tab" style={{ fontSize: 22, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
                  {typeof f.value === 'string' ? f.value : t(f.value, lang)}
                </div>
                <p style={{ margin: 0, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
                  {t(f.detail, lang)}
                </p>
              </li>
            ))}
          </ol>
        </section>

        {/* ── THE ANDON ───────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '50px auto 0', padding: '0 36px' }}>
          <div className="card" style={{ padding: 28, borderColor: 'var(--ink)', borderWidth: 2 }}>
            <Eyebrow>{t({ es: 'El Pare · la cuerda del cliente', en: 'The Andon · the customer’s rope' }, lang)}</Eyebrow>
            <h2 className="display" style={{ fontSize: 30, margin: '10px 0 12px', letterSpacing: '-0.012em', maxWidth: 760 }}>
              {t({
                es: 'Cualquier cliente puede parar la obra. Sin penalidad. Sin pregunta.',
                en: 'Any customer can stop the job. No penalty. No question.'
              }, lang)}
            </h2>
            <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 15.5, color: 'var(--ink-soft)', lineHeight: 1.5, margin: '0 0 14px', maxWidth: 760 }}>
              {t({
                es: 'En Toyota, cualquier obrero puede parar la línea. En tu casa, tú puedes parar la cuadrilla. Es el mismo principio. La calidad se construye desde adentro, no se inspecciona al final.',
                en: 'On a Toyota line, any worker can stop the line. In your home, you can stop the crew. Same principle. Quality is built in, not inspected at the end.'
              }, lang)}
            </p>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
              {[
                { es: 'Mandas “STOP” por WhatsApp al foreman del día.',                       en: 'Text “STOP” via WhatsApp to the Foreman of the Day.' },
                { es: 'El foreman llama en 15 minutos.',                                       en: 'Foreman calls within 15 minutes.' },
                { es: 'Sin resolver en 4 horas · el celular del jefe de operaciones.',        en: 'Unresolved in 4 hours · Operations Lead’s mobile.' },
                { es: 'Sin resolver en 24 horas · el celular del Fundador.',                  en: 'Unresolved in 24 hours · the Founder’s mobile.' },
                { es: 'Sin represalia. Sin penalidad. Sin “estás siendo difícil.”',           en: 'No retaliation. No penalty. No “you’re being difficult.”' },
              ].map((r, i) => (
                <li key={i} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10 }}>
                  <span style={{ color: 'var(--terracotta)' }}>·</span>{t(r, lang)}
                </li>
              ))}
            </ul>
          </div>
        </section>

        {/* ── CLOSING DECLARATION ─────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '50px auto 0', padding: '32px 36px', borderTop: '2px solid var(--ink)' }}>
          <p style={{ margin: 0, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--ink)', lineHeight: 1.4, maxWidth: 880 }}>
            {t({
              es: '“La palabra antes que el precio. El trabajador antes que la empresa. El cliente antes que la venta.”',
              en: '“The word before the price. The worker before the company. The customer before the sale.”'
            }, lang)}
          </p>
          <div className="codex" style={{ marginTop: 10, color: 'var(--ink-muted)' }}>
            EL TRATO · v0.2 · {t({ es: 'piso ratificado por el consejo', en: 'floor ratified by council' }, lang)}
          </div>
        </section>

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

window.OrinovaPages20 = Object.assign(window.OrinovaPages20 || {}, { DignityFloor });


/* ── LA PARED · the wall of social proof ─────────────────────────
   Jane Jacobs's sidewalk ballet. Bezos's review moat. Disney's
   parade. Each entry is opt-in (Reyes Doctrine).
*/

function LaPared() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = window.OrinovaAtoms;

  // Each row is an opted-in member. First name + neighborhood + month + note.
  // These are placeholders until the moderation pipeline + member opt-in form ships.
  const stones = [
    { name: 'Brandi', zip: '92376',  zone: 'Rialto',        month: { es: 'abr 2026', en: 'apr 2026' },
      note: { es: 'El foreman me llamó por nombre desde el primer día. Eso ya es la mitad del oficio.',
              en: 'The foreman called me by my name from day one. That is already half the trade.' },
      color: 'var(--terracotta)' },
    { name: 'Joel',   zip: '92508',  zone: 'Orangecrest',   month: { es: 'mar 2026', en: 'mar 2026' },
      note: { es: 'Volvieron a los 30 días por una falla mía. Sin discutir. Ese es el trato.',
              en: 'They came back at day 30 for a problem that was mine. No argument. That is the deal.' },
      color: 'var(--olive)' },
    { name: 'Anastasia', zip: '92504', zone: 'Riverside',  month: { es: 'mar 2026', en: 'mar 2026' },
      note: { es: 'Pidieron permiso para la foto del piso terminado. Permiso. Por eso firmé.',
              en: 'They asked permission before the finished-floor photo. Permission. That is why I signed.' },
      color: 'var(--ink)' },
    { name: 'Pat', zip: '92503', zone: 'La Sierra',         month: { es: 'feb 2026', en: 'feb 2026' },
      note: { es: 'El reporte llegó en 48 horas como dijeron. En este oficio eso es raro.',
              en: 'The report arrived in 48 hours like they said. In this trade that is rare.' },
      color: 'var(--terracotta)' },
    { name: 'Brandon', zip: '92508', zone: 'Orangecrest',   month: { es: 'feb 2026', en: 'feb 2026' },
      note: { es: 'Soy quisquilloso. Volvieron tres veces sin cargo. La cuarta no pasó nada.',
              en: 'I am nitpicky. They came back three times no charge. The fourth never happened.' },
      color: 'var(--olive)' },
    { name: 'Maritza', zip: '92557', zone: 'Moreno Valley', month: { es: 'ene 2026', en: 'jan 2026' },
      note: { es: 'Mi esposo escogió el color en el patio a la luz de la tarde. Eso fue idea de ellos. Salió perfecto.',
              en: 'My husband picked the color in the yard in afternoon light. That was their idea. Came out perfect.' },
      color: 'var(--ink)' },
  ];

  return (
    <div className="page">
      <Nav active="about" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">

        {/* ── HERO ──────────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 36px 0' }}>
          <Eyebrow>DREAMVALLEY · {t({ es: 'la pared · pruebas en público', en: 'la pared · proof in public' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 72, lineHeight: 0.96, margin: '14px 0 16px', maxWidth: 980, letterSpacing: '-0.026em' }}>
            {t({
              es: <>Lo que <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>los vecinos</em> escribieron.</>,
              en: <>What <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>the neighbors</em> wrote.</>,
            }, lang)}
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 760, fontFamily: 'var(--serif)' }}>
            {t({
              es: 'No son reseñas de cinco estrellas. Son notas escritas a mano de personas que firmaron y se quedaron. Cada nombre apareció porque pidieron aparecer. Cada uno guarda su apellido. La pared crece sin promoción.',
              en: 'These are not five-star reviews. They are handwritten notes from people who signed and stayed. Each name appears because they asked to appear. Last names are kept private. The Wall grows without promotion.'
            }, lang)}
          </p>
        </section>

        {/* ── STONES OF LA PARED ────────────────────────── */}
        <section style={{ maxWidth: 1180, margin: '40px auto 0', padding: '0 36px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(330px, 1fr))', gap: 18 }}>
            {stones.map((s, i) => (
              <div key={i} style={{
                padding: 24,
                background: 'var(--paper-elevated)',
                border: '1px solid var(--divider)',
                borderLeft: `4px solid ${s.color}`,
                display: 'flex', flexDirection: 'column', gap: 12,
                position: 'relative',
              }}>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>
                  {s.zip} · {s.zone} · {t(s.month, lang)}
                </div>
                <div style={{
                  fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 17.5,
                  color: 'var(--ink)', lineHeight: 1.4,
                }}>
                  {t(s.note, lang)}
                </div>
                <div style={{ fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 14, color: s.color, marginTop: 'auto', paddingTop: 8, borderTop: '1px solid var(--divider)' }}>
                  — {s.name}
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* ── RULES OF LA PARED ─────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '50px auto 0', padding: '0 36px' }}>
          <div className="card-quiet" style={{ padding: 24 }}>
            <Eyebrow>{t({ es: 'Las reglas de la pared', en: 'Rules of the Wall' }, lang)}</Eyebrow>
            <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
              {[
                { es: 'Sólo entras si firmaste y completaste el trabajo. Nada de “miembro nuevo, escribe algo bonito.”',
                  en: 'You only enter if you signed and completed the work. No “new member, write something nice.”' },
                { es: 'Sólo primer nombre y zona. Sin apellidos. Sin direcciones.',
                  en: 'First name + neighborhood only. No surnames. No addresses.' },
                { es: 'Sin descuentos por reseña. Nunca. Las reseñas se ganan.',
                  en: 'No discount for review. Ever. Reviews are earned.' },
                { es: 'Tú escribes la nota. Nosotros no editamos. Si dices que regresamos tres veces, dice tres veces.',
                  en: 'You write the note. We don’t edit. If you say we came back three times, it says three times.' },
                { es: 'Puedes quitar tu entrada en cualquier momento. Un mensaje y desaparece.',
                  en: 'You can remove your entry at any time. One message and it is gone.' },
              ].map((r, i) => (
                <li key={i} style={{ padding: '9px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '20px 1fr', gap: 10 }}>
                  <span style={{ color: 'var(--terracotta)' }}>·</span>{t(r, lang)}
                </li>
              ))}
            </ul>
          </div>
        </section>

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

window.OrinovaPages20 = Object.assign(window.OrinovaPages20 || {}, { LaPared });


/* ── THREE DOORS · the estimate ladder explainer ──────────────
   Every estimate over $1,500 is delivered as three options on
   one page. This page explains the architecture so customers
   understand WHY they get three doors when they ask for one.
*/

function ThreeDoors() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = window.OrinovaAtoms;

  const doors = [
    {
      n: 'I',
      name:  { es: 'Estándar', en: 'Standard' },
      sub:   { es: 'precio honesto · mercado',           en: 'honest market price' },
      pitch: { es: 'El trabajo bien hecho a precio competitivo. Garantía estándar. Cuadrilla nombrada. Si solo quieres el trabajo, esta es la puerta.',
               en: 'The work, done well, at competitive market price. Standard warranty. Crew named. If you only want the job, this is the door.' },
      accent: 'var(--ink-muted)',
      gets: [
        { es: 'Estimado escrito en 48 horas',                       en: 'Written estimate in 48 hours' },
        { es: 'Garantía de mano de obra estándar',                  en: 'Standard workmanship warranty' },
        { es: 'Foreman y cuadrilla nombrados en el contrato',       en: 'Foreman and crew named on the contract' },
        { es: 'Aseguranza nombrada · COI bajo pedido',               en: 'Insurance named · COI on request' },
      ],
    },
    {
      n: 'II',
      name:  { es: 'El Trato Completo', en: 'The Full Deal' },
      sub:   { es: 'mejor valor · membresía incluida 12 meses',     en: 'best value · 12-month membership included' },
      pitch: { es: 'El Estándar más 12 meses de la membresía Maintain · $39/mes. Visita anual, descuento en obras chicas, pasaporte de tu casa. La opción que más se firma.',
               en: 'Standard plus 12 months of Maintain membership at $39/mo. Annual walk, discount on small work, Property Passport. The option most-chosen.' },
      accent: 'var(--terracotta)',
      best:  true,
      gets: [
        { es: 'Todo lo del Estándar',                                en: 'Everything in Standard' },
        { es: '12 meses de membresía Maintain incluidos',            en: '12 months of Maintain membership included' },
        { es: '10 % de descuento en obras pequeñas el primer año',   en: '10 % off small fix-up jobs in year one' },
        { es: 'Pasaporte de Casa entregado al cierre',                en: 'Property Passport delivered at closeout' },
        { es: 'Pintura sobrante guardada · 5 años',                  en: 'Leftover paint stored · 5 years' },
        { es: 'Foreman por WhatsApp · respuesta al día siguiente',    en: 'Foreman on WhatsApp · next-day response' },
      ],
    },
    {
      n: 'III',
      name:  { es: 'LuxValley Premium', en: 'LuxValley Premium' },
      sub:   { es: 'preparación premium · documentación · prioridad', en: 'premium prep · documentation · priority' },
      pitch: { es: 'Preparación extendida, documentación nivel concierge, membresía LuxValley Care de 12 meses, ventana de programación prioritaria. La misma cuadrilla. El mismo piso de salario. Solo la preparación y el papel son premium.',
               en: 'Extended prep, concierge-grade documentation, 12 months LuxValley Care membership, priority scheduling window. Same crew. Same wage floor. Only prep and paperwork are premium.' },
      accent: 'var(--olive)',
      gets: [
        { es: 'Todo lo del Trato Completo',                          en: 'Everything in the Full Deal' },
        { es: 'Preparación nivel premium · más capas, mejor sellado', en: 'Premium prep tier · more coats, better sealing' },
        { es: 'Documentación concierge · marca · línea · gallones',   en: 'Concierge documentation · brand · line · gallons' },
        { es: 'LuxValley Care 12 meses · $325/mes valor',             en: 'LuxValley Care 12 months · $325/mo value' },
        { es: 'Ventana de programación prioritaria',                  en: 'Priority scheduling window' },
        { es: 'La misma cuadrilla · sin casta',                       en: 'Same crew · no caste' },
      ],
    },
  ];

  return (
    <div className="page">
      <Nav active="services" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">

        {/* ── HERO ─────────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 36px 0' }}>
          <Eyebrow>DREAMVALLEY · {t({ es: 'las tres puertas', en: 'the three doors' }, lang)}</Eyebrow>
          <h1 className="display" style={{ fontSize: 64, lineHeight: 0.98, margin: '14px 0 18px', maxWidth: 940, letterSpacing: '-0.022em' }}>
            {t({
              es: <>Cada estimado sobre $1,500 llega como <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>tres puertas,</em> no una.</>,
              en: <>Every estimate over $1,500 arrives as <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>three doors,</em> not one.</>,
            }, lang)}
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 760, fontFamily: 'var(--serif)' }}>
            {t({
              es: 'Una sola opción te obliga a confiar en nosotros. Tres te dejan escoger. El precio Estándar es honesto y suficiente. El Trato Completo te ahorra dinero a 18 meses. LuxValley es para casas que pesan más. Te enseñamos las tres. Tú escoges. Ninguna es trampa.',
              en: 'A single option forces you to trust us. Three lets you choose. The Standard price is honest and sufficient. The Full Deal saves you money over 18 months. LuxValley is for homes that carry more weight. We show you all three. You choose. None is a decoy.'
            }, lang)}
          </p>
        </section>

        {/* ── THREE DOORS ─────────────────────────────── */}
        <section style={{ maxWidth: 1300, margin: '40px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {doors.map((d, i) => (
            <div key={i} className="card" style={{
              padding: 26, display: 'flex', flexDirection: 'column', gap: 14,
              borderColor: d.best ? d.accent : 'var(--divider)',
              borderWidth: d.best ? 2 : 1,
              background: d.best ? 'var(--paper-form)' : 'var(--paper-elevated)',
              position: 'relative',
            }}>
              {d.best && (
                <div style={{ position: 'absolute', top: -12, right: 20, background: d.accent, color: 'var(--paper)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', padding: '4px 10px' }}>
                  {t({ es: 'MÁS ESCOGIDO', en: 'MOST CHOSEN' }, lang)}
                </div>
              )}
              <div className="codex" style={{ color: d.accent }}>PUERTA · {d.n}</div>
              <div className="display" style={{ fontSize: 28, margin: '2px 0', letterSpacing: '-0.012em' }}>{t(d.name, lang)}</div>
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t(d.sub, lang)}</div>
              <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.5, margin: '4px 0 0' }}>
                {t(d.pitch, lang)}
              </p>
              <ul style={{ margin: '6px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.55, flex: 1 }}>
                {d.gets.map((line, k) => (
                  <li key={k} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)', display: 'grid', gridTemplateColumns: '18px 1fr', gap: 8 }}>
                    <span style={{ color: d.accent }}>·</span>{t(line, lang)}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </section>

        {/* ── LUX VALLEY CONSTRAINT ─────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '50px auto 0', padding: '0 36px' }}>
          <div className="card-quiet" style={{ padding: 24 }}>
            <Eyebrow>{t({ es: 'La regla LuxValley · sin casta', en: 'The LuxValley rule · no caste' }, lang)}</Eyebrow>
            <p style={{ margin: '8px 0 0', fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
              {t({
                es: 'Las mismas manos pintan la pared de $1,500 y la finca de $50,000. La cuadrilla rota. No existe una “cuadrilla LuxValley.” El premium paga preparación, materiales, documentación y reserva de margen — no estratifica al trabajador. El trabajador gana el mismo piso en cada trabajo.',
                en: 'The same hands paint the $1,500 wall and the $50,000 estate. The crew rotates. There is no “LuxValley crew.” The premium funds prep, materials, documentation, and margin reserve — it does not stratify the worker. The worker earns the same floor on every job.'
              }, lang)}
            </p>
          </div>
        </section>

        {/* ── BELOW $1,500 NOTE ──────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <div className="rule" />
          <p style={{ margin: '14px 0 0', fontFamily: 'var(--serif)', fontSize: 14.5, color: 'var(--ink-muted)', lineHeight: 1.5 }}>
            {t({
              es: 'Para trabajos bajo $1,500 entregamos una sola cotización, con la opción de subir a membresía Maintain por el mismo total. Tres puertas se reservan para trabajos donde la decisión vale la elección.',
              en: 'For jobs under $1,500 we deliver a single quoted price, with the option to upgrade to Maintain membership for the same total. Three Doors is reserved for jobs where the decision deserves the choice.'
            }, lang)}
          </p>
        </section>

        {/* ── CLOSE ────────────────────────────────────── */}
        <section style={{ maxWidth: 1100, margin: '50px auto 0', padding: '0 36px' }}>
          <div className="m-card-dark" style={{ padding: '30px 30px' }}>
            <Eyebrow>{t({ es: 'Pedir las tres puertas', en: 'Request the three doors' }, lang)}</Eyebrow>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 26, lineHeight: 1.2, margin: '10px 0 14px' }}>
              {t({
                es: 'Cuéntanos el trabajo. Entregamos las tres puertas en una sola página, en 48 horas.',
                en: 'Tell us the job. We deliver all three doors on one page, in 48 hours.'
              }, lang)}
            </h3>
            <a className="btn btn-primary" href="/estimate" style={{ padding: '14px 22px' }}>
              {t({ es: 'Pedir estimado →', en: 'Request estimate →' }, lang)}
            </a>
          </div>
        </section>

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

window.OrinovaPages20 = Object.assign(window.OrinovaPages20 || {}, { ThreeDoors });

/* ── EL TRATO DOCUMENT LIBRARY ────────────────────────────────────
   Integrates:
   - EL-TRATO.md (v0.2 canon)
   - EL-TRATO-v0.2-REVIEW.md (adversarial changelog)
   - EL-TRATO-DRYWALL.md (second-trade proof)
   - EL-TRATO-v0.1-archived.md (historical baseline)
*/

function ElTratoDocShell({ active = 'about', kicker, title, lead, children }) {
  const { Nav, Foot, Eyebrow } = window.OrinovaAtoms;
  return (
    <div className="page">
      <Nav active={active} surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 36px 0' }}>
          <Eyebrow>{kicker}</Eyebrow>
          <h1 className="display" style={{ fontSize: 62, lineHeight: 0.98, margin: '14px 0 16px', letterSpacing: '-0.022em', maxWidth: 980 }}>
            {title}
          </h1>
          <p style={{ maxWidth: 820, fontFamily: 'var(--serif)', fontSize: 17, lineHeight: 1.58, color: 'var(--ink-soft)' }}>{lead}</p>
        </section>
        {children}
        <div style={{ height: 48 }} />
        <Foot surface="dreamvalley" />
      </div>
    </div>
  );
}

function MobileElTratoShell({ kicker, title, lead, children }) {
  return (
    <div className="page m-page">
      <div className="page-scroll hide-scroll" style={{ padding: '24px 20px 90px' }}>
        <div className="codex" style={{ color: 'var(--ink-muted)' }}>{kicker}</div>
        <h1 className="display" style={{ fontSize: 36, margin: '8px 0 10px', lineHeight: 1.04 }}>{title}</h1>
        <p style={{ margin: 0, fontFamily: 'var(--serif)', fontSize: 15, lineHeight: 1.52, color: 'var(--ink-soft)' }}>{lead}</p>
        <div style={{ marginTop: 16, display: 'grid', gap: 8 }}>
          <a className="btn btn-ghost" href="/el-trato">{'v0.2'}</a>
          <a className="btn btn-ghost" href="/el-trato/review">{'Council review'}</a>
          <a className="btn btn-ghost" href="/el-trato/drywall">{'Drywall clone'}</a>
          <a className="btn btn-ghost" href="/el-trato/archive">{'v0.1 archive'}</a>
        </div>
        <div style={{ marginTop: 16 }}>{children}</div>
      </div>
    </div>
  );
}

function ElTratoConstitution() {
  const t = window.t;
  const { lang } = window.useLang();
  const principles = [
    { es: 'La palabra antes del precio.', en: 'The word before the price.' },
    { es: 'El trabajador antes de la empresa.', en: 'The worker before the company.' },
    { es: 'El cliente antes de la venta.', en: 'The customer before the sale.' },
    { es: 'La membresía es pacto transferible.', en: 'Membership is a transferable covenant.' },
    { es: 'El pasaporte es del dueño de casa.', en: 'The Property Passport belongs to the homeowner.' },
    { es: 'La noche es turno completo (10 PM – 6 AM).', en: 'Night is a full shift (10 PM – 6 AM).' },
    { es: 'Margen sostenible: 22% en servicios a miembros.', en: 'Sustainable margin: 22% on member services.' },
    { es: 'Bilingüe nativo EN/ES + extensión por regla del 15%.', en: 'Native bilingual EN/ES + 15% extension trigger.' },
    { es: 'Gobernanza colectiva por Trade Council.', en: 'Collective governance through the Trade Council.' },
    { es: 'Rehusamos públicamente lo que no debemos vender.', en: 'We publicly refuse work we should not sell.' },
  ];
  const doors = [
    ['01', { es: 'La Palabra / The Oath', en: 'La Palabra / The Oath' }],
    ['02', { es: 'La Membresía / The Guild Membership', en: 'La Membresía / The Guild Membership' }],
    ['03', { es: 'Las Tres Puertas / The Three Doors', en: 'Las Tres Puertas / The Three Doors' }],
    ['04', { es: 'La Revisión / The Diagnostic', en: 'La Revisión / The Diagnostic' }],
    ['05', { es: 'La Guardia Nocturna / The Night Watch', en: 'La Guardia Nocturna / The Night Watch' }],
    ['06', { es: 'La Especialidad / The Specialty', en: 'La Especialidad / The Specialty' }],
    ['07', { es: 'El Puente / DreamFinance', en: 'El Puente / DreamFinance' }],
    ['08', { es: 'La Familia / Family Dock', en: 'La Familia / Family Dock' }],
    ['09', { es: 'La Pared / The Wall', en: 'La Pared / The Wall' }],
  ];

  return (
    <ElTratoDocShell
      kicker={'EL TRATO · v0.2 · UNIVERSAL TRADE CONSTITUTION'}
      title={t({ es: 'Un solo menú para todos los oficios.', en: 'One menu for every trade.' }, lang)}
      lead={t({
        es: 'Integramos el documento canonizado completo en la experiencia web: principios operativos, puertas, voz bilingüe, reglas de precio, kill criteria y despliegue por fases.',
        en: 'The canonized document is now integrated as a first-class web surface: operating principles, doors, bilingual voice rules, pricing discipline, kill criteria, and phased deployment.'
      }, lang)}
    >
      <section style={{ maxWidth: 1100, margin: '26px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 20 }}>
        <div className="card">
          <div className="eyebrow">{t({ es: '10 principios operativos', en: '10 operating principles' }, lang)}</div>
          <ol style={{ margin: '10px 0 0', padding: 0, listStyle: 'none' }}>
            {principles.map((p, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 10, padding: '9px 0', borderBottom: '1px solid var(--divider)' }}>
                <span className="codex" style={{ color: 'var(--terracotta)' }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ color: 'var(--ink-soft)', fontSize: 14.5 }}>{t(p, lang)}</span>
              </li>
            ))}
          </ol>
        </div>
        <div className="card">
          <div className="eyebrow">{t({ es: 'Navegación de doctrina', en: 'Doctrine navigation' }, lang)}</div>
          <div style={{ display: 'grid', gap: 10, marginTop: 10 }}>
            <a className="btn btn-ghost" href="/el-trato/review">{t({ es: 'Ver revisión adversarial v0.2', en: 'Open v0.2 adversarial review' }, lang)}</a>
            <a className="btn btn-ghost" href="/el-trato/drywall">{t({ es: 'Ver clon de drywall', en: 'Open drywall clone proof' }, lang)}</a>
            <a className="btn btn-ghost" href="/el-trato/archive">{t({ es: 'Ver archivo v0.1', en: 'Open v0.1 archive' }, lang)}</a>
            <a className="btn btn-primary" href="/estimate">{t({ es: 'Aplicarlo a mi estimado →', en: 'Apply this to my estimate →' }, lang)}</a>
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 1100, margin: '28px auto 0', padding: '0 36px' }}>
        <div className="card-quiet" style={{ padding: 22 }}>
          <div className="eyebrow">{t({ es: 'Las nueve puertas + meta', en: 'The nine doors + meta layer' }, lang)}</div>
          <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }}>
            {doors.map(([id, label]) => (
              <div key={id} style={{ border: '1px solid var(--divider)', padding: '10px 12px', background: 'var(--paper)' }}>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{id}</div>
                <div style={{ fontSize: 13.5, color: 'var(--ink-soft)', marginTop: 4 }}>{t(label, lang)}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </ElTratoDocShell>
  );
}

function ElTratoCouncilReview() {
  const t = window.t;
  const { lang } = window.useLang();
  const changes = [
    { n: '01', topic: { es: 'Turno nocturno', en: 'Night shift window' }, diff: { es: '4–7 AM → 10 PM–6 AM', en: '4–7 AM → 10 PM–6 AM' } },
    { n: '02', topic: { es: 'Margen de membresía', en: 'Membership margin' }, diff: { es: '14% → 22% (miembros)', en: '14% → 22% (member work)' } },
    { n: '03', topic: { es: 'Umbral Tres Puertas', en: 'Three Doors threshold' }, diff: { es: '$2,500 → $1,500', en: '$2,500 → $1,500' } },
    { n: '04', topic: { es: 'Diagnóstico', en: 'Diagnostic' }, diff: { es: '$249+ → $149 + martes gratis', en: '$249+ → $149 + free Tuesday' } },
    { n: '06', topic: { es: 'Penalidad de falla', en: 'Failure penalty' }, diff: { es: 'redo o 100% refund', en: 'redo or 100% refund' } },
    { n: '07', topic: { es: 'Piso de dignidad', en: 'Dignity floor' }, diff: { es: '$25/h + no 1099-only', en: '$25/hr + no 1099-only' } },
    { n: '09', topic: { es: 'Andon del cliente', en: 'Customer andon' }, diff: { es: 'línea STOP publicada', en: 'published STOP line' } },
    { n: '11', topic: { es: 'Escalera de lealtad', en: 'Loyalty ladder' }, diff: { es: 'Y1 → Y10 compuesta', en: 'Y1 → Y10 compounding' } },
    { n: '15', topic: { es: 'Cláusula de transferencia', en: 'Transfer clause' }, diff: { es: 'membresía pasa con la casa', en: 'membership follows the home' } },
    { n: '23', topic: { es: 'Refusals publicados', en: 'Published refusals' }, diff: { es: '8 noes oficiales', en: '8 official noes' } },
  ];
  return (
    <ElTratoDocShell
      kicker={'EL TRATO v0.2 · COUNCIL ADVERSARIAL REVIEW'}
      title={t({ es: '25 retos. 22 cambios adoptados.', en: '25 challenges. 22 adopted changes.' }, lang)}
      lead={t({
        es: 'La revisión v0.2 ya está integrada como una capa explicativa: qué se cuestionó, qué cambió y cuál fue la regla final para operaciones, precio, calidad y dignidad del equipo.',
        en: 'The v0.2 review is integrated as an explainer layer: what was challenged, what changed, and the final operating rule for pricing, quality, and worker dignity.'
      }, lang)}
    >
      <section style={{ maxWidth: 1100, margin: '26px auto 0', padding: '0 36px' }}>
        <div className="card">
          <div className="eyebrow">{t({ es: 'Cambios ratificados principales', en: 'Key ratified changes' }, lang)}</div>
          {changes.map((c, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '72px 1fr 1fr', gap: 12, padding: '11px 0', borderBottom: '1px solid var(--divider)' }}>
              <div className="codex" style={{ color: 'var(--terracotta)' }}>#{c.n}</div>
              <div style={{ fontSize: 14, color: 'var(--ink)' }}>{t(c.topic, lang)}</div>
              <div style={{ fontSize: 13.5, color: 'var(--ink-soft)' }}>{t(c.diff, lang)}</div>
            </div>
          ))}
        </div>
      </section>
    </ElTratoDocShell>
  );
}

function ElTratoDrywall() {
  const t = window.t;
  const { lang } = window.useLang();
  const changed = [
    { es: 'Membresía drywall: $29 / $59 / $109', en: 'Drywall membership: $29 / $59 / $109' },
    { es: 'Garantía de mano de obra: 1 año + textura', en: 'Workmanship warranty: 1 year + texture match' },
    { es: 'Night Watch drywall: $400 / $950', en: 'Drywall Night Watch: $400 / $950' },
    { es: 'Puente financiero: gatillo > $2,500', en: 'Finance bridge trigger: > $2,500' },
    { es: 'Especialidad: restauración lath & plaster', en: 'Specialty: lath & plaster restoration' },
    { es: 'Passport: Drywall DNA (textura, boquilla, presión, fotos)', en: 'Passport: Drywall DNA (texture, nozzle, pressure, photo map)' },
  ];
  return (
    <ElTratoDocShell
      kicker={'EL TRATO DRYWALL · DRAFT v0.1'}
      title={t({ es: 'Prueba de replicación por segundo oficio.', en: 'Second-trade replication proof.' }, lang)}
      lead={t({
        es: 'El documento de drywall ya vive en la app como capa de producto: qué conserva del canon universal y qué parámetros cambian por economía de drywall.',
        en: 'The drywall document now lives in-app as a product layer: what remains universal and which parameters change for drywall economics.'
      }, lang)}
    >
      <section style={{ maxWidth: 1100, margin: '26px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div className="card">
          <div className="eyebrow">{t({ es: 'Lo que NO cambia', en: 'What does NOT change' }, lang)}</div>
          <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none' }}>
            {[
              { es: 'La arquitectura de Ocho Puertas.', en: 'The Eight Doors architecture.' },
              { es: 'Voz bilingüe nativa EN/ES.', en: 'Native EN/ES bilingual voice.' },
              { es: 'Andon STOP del cliente.', en: 'Customer STOP andon line.' },
              { es: 'Piso de dignidad y escalera de carrera.', en: 'Dignity floor and career ladder.' },
              { es: 'Transfer Clause y Passport transferible.', en: 'Transfer Clause and transferable Passport.' },
            ].map((row, i) => (
              <li key={i} style={{ padding: '9px 0', borderBottom: '1px solid var(--divider)', fontSize: 14.5, color: 'var(--ink-soft)' }}>
                {t(row, lang)}
              </li>
            ))}
          </ul>
        </div>
        <div className="card">
          <div className="eyebrow">{t({ es: 'Lo que cambia para drywall', en: 'What changes for drywall' }, lang)}</div>
          <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none' }}>
            {changed.map((row, i) => (
              <li key={i} style={{ padding: '9px 0', borderBottom: '1px solid var(--divider)', fontSize: 14.5, color: 'var(--ink-soft)' }}>
                {t(row, lang)}
              </li>
            ))}
          </ul>
        </div>
      </section>
    </ElTratoDocShell>
  );
}

function ElTratoArchive() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <ElTratoDocShell
      kicker={'EL TRATO v0.1 · ARCHIVE'}
      title={t({ es: 'Registro histórico de la primera versión.', en: 'Historical record of the first release.' }, lang)}
      lead={t({
        es: 'El archivo v0.1 queda integrado para trazabilidad: conserva la primera formulación y permite comparar cada ajuste ratificado en v0.2.',
        en: 'The v0.1 archive is integrated for traceability: it preserves the first formulation and allows direct comparison with v0.2 ratified changes.'
      }, lang)}
    >
      <section style={{ maxWidth: 1100, margin: '26px auto 0', padding: '0 36px' }}>
        <div className="card">
          <div className="eyebrow">{t({ es: 'Mapa de evolución', en: 'Evolution map' }, lang)}</div>
          <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none' }}>
            {[
              { es: 'v0.1 definió los 8/9 Doors y el codex de voz.', en: 'v0.1 established the 8/9 Door architecture and voice codex.' },
              { es: 'v0.2 endureció reglas: margen, dignidad, Andon, transferibilidad.', en: 'v0.2 hardened rules: margin, dignity floor, andon, transferability.' },
              { es: 'Drywall confirma que la arquitectura no era solo pintura.', en: 'Drywall confirms the architecture is not paint-only.' },
              { es: 'La revisión adversarial queda visible como bitácora pública.', en: 'The adversarial review remains visible as public ledger.' },
            ].map((row, i) => (
              <li key={i} style={{ padding: '10px 0', borderBottom: '1px solid var(--divider)', fontSize: 14.5, color: 'var(--ink-soft)' }}>
                {t(row, lang)}
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 14, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a className="btn btn-ghost" href="/el-trato">{t({ es: 'Ir al canon v0.2', en: 'Open v0.2 canon' }, lang)}</a>
            <a className="btn btn-ghost" href="/el-trato/review">{t({ es: 'Ver revisión', en: 'Open review' }, lang)}</a>
          </div>
        </div>
      </section>
    </ElTratoDocShell>
  );
}

function MobileElTratoConstitution() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <MobileElTratoShell
      kicker={'EL TRATO v0.2'}
      title={t({ es: 'Constitución universal', en: 'Universal constitution' }, lang)}
      lead={t({ es: 'Versión móvil del canon con acceso rápido a revisión, clon drywall y archivo v0.1.', en: 'Mobile canon with quick access to review, drywall clone, and v0.1 archive.' }, lang)}
    >
      <div className="m-card">
        <div className="codex">{t({ es: 'PUERTAS ACTIVAS', en: 'ACTIVE DOORS' }, lang)}</div>
        <div style={{ marginTop: 6, fontFamily: 'var(--serif)', fontSize: 22 }}>9 + {t({ es: 'Pasaporte', en: 'Passport' }, lang)}</div>
      </div>
    </MobileElTratoShell>
  );
}

function MobileElTratoCouncilReview() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <MobileElTratoShell
      kicker={'EL TRATO v0.2 REVIEW'}
      title={t({ es: '22 cambios adoptados', en: '22 adopted changes' }, lang)}
      lead={t({ es: 'Resumen móvil de la revisión adversarial del consejo.', en: 'Mobile summary of the council adversarial review.' }, lang)}
    >
      <div className="m-card">
        <div className="codex">#01 #02 #03 #07 #09 #23</div>
        <div style={{ marginTop: 8, fontSize: 14, color: 'var(--ink-soft)' }}>
          {t({ es: 'Turno nocturno, margen, umbral, piso de dignidad, andon y refusals fueron endurecidos.', en: 'Night shift, margin, threshold, dignity floor, andon, and refusals were hardened.' }, lang)}
        </div>
      </div>
    </MobileElTratoShell>
  );
}

function MobileElTratoDrywall() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <MobileElTratoShell
      kicker={'EL TRATO DRYWALL'}
      title={t({ es: 'Clon de segundo oficio', en: 'Second-trade clone' }, lang)}
      lead={t({ es: 'La misma arquitectura, parámetros de drywall y Bundle paint+drywall.', en: 'Same architecture, drywall parameters, and paint+drywall bundle.' }, lang)}
    >
      <div className="m-card">
        <div className="codex">{t({ es: 'MEMBRESÍA DRYWALL', en: 'DRYWALL MEMBERSHIP' }, lang)}</div>
        <div style={{ marginTop: 6, fontFamily: 'var(--serif)', fontSize: 24 }}>$29 / $59 / $109</div>
      </div>
    </MobileElTratoShell>
  );
}

function MobileElTratoArchive() {
  const t = window.t;
  const { lang } = window.useLang();
  return (
    <MobileElTratoShell
      kicker={'EL TRATO v0.1 ARCHIVE'}
      title={t({ es: 'Bitácora histórica', en: 'Historical ledger' }, lang)}
      lead={t({ es: 'Registro de origen para comparar v0.1 contra v0.2 y drywall.', en: 'Origin record to compare v0.1 against v0.2 and drywall.' }, lang)}
    >
      <div className="m-card">
        <a className="btn btn-primary" href="/el-trato">{t({ es: 'Volver al canon v0.2', en: 'Back to v0.2 canon' }, lang)}</a>
      </div>
    </MobileElTratoShell>
  );
}

window.OrinovaPages20 = Object.assign(window.OrinovaPages20 || {}, {
  ElTratoConstitution,
  ElTratoCouncilReview,
  ElTratoDrywall,
  ElTratoArchive,
  MobileElTratoConstitution,
  MobileElTratoCouncilReview,
  MobileElTratoDrywall,
  MobileElTratoArchive,
});
