/* Orinova Portal — pages18.jsx
   The final operational pass. Three pages a working website actually needs
   but most contractor sites avoid because they require courage:

     · PricingTransparency  — what this actually costs · honest ranges
     · TheWeek              — public weekly ledger of completed jobs
     · WhyWeSayNo           — refusals · what we don't do · why

   This is the radical move for an operational site: stop selling and
   start being accountable. These three pages are why we get hired by
   the right clients, and why the wrong ones don't waste our day.
*/

/* ─────────────────────────────────────────────────────────
 * 01 · PRICING TRANSPARENCY
 *   The page no contractor site has, because every contractor
 *   is afraid of the homeowner with a calculator. We are not.
 * ───────────────────────────────────────────────────────── */

function PricingTransparency() {
  const t = window.t;
  const { lang } = window.useLang();

  // Honest ranges from the ledger — actual averages, not "starting from."
  const rows = [
    {
      job: { es: 'Una pared interior (8 × 12 ft)', en: 'One interior wall (8 × 12 ft)' },
      hours: '4 — 6',
      low: 380, mid: 480, high: 620,
      note: { es: 'una mano de imprimante, dos de color. Cinta + lavado incluidos.', en: 'one coat primer, two of color. Tape + wash included.' },
    },
    {
      job: { es: 'Cuarto · 4 paredes + techo', en: 'Bedroom · 4 walls + ceiling' },
      hours: '12 — 18',
      low: 1450, mid: 1850, high: 2400,
      note: { es: 'cuarto promedio · 12 × 12 ft · sin amoblado heredado.', en: 'average bedroom · 12 × 12 ft · no inherited furniture.' },
    },
    {
      job: { es: 'Sala + comedor abierto', en: 'Open living + dining' },
      hours: '20 — 32',
      low: 2400, mid: 3200, high: 4400,
      note: { es: 'incluyen retoque de molduras. Techo abovedado +15 %.', en: 'includes trim touch-ups. Vaulted ceiling +15%.' },
    },
    {
      job: { es: 'Interior completo · 3 br · 1 800 ft²', en: 'Whole interior · 3 br · 1,800 sf' },
      hours: '64 — 92',
      low: 7800, mid: 9800, high: 13200,
      note: { es: 'incluye armarios, baños, lavandería. Pintura premium.', en: 'closets, baths, laundry. Premium paint.' },
    },
    {
      job: { es: 'Exterior · estuco · 1 800 ft²', en: 'Exterior · stucco · 1,800 sf' },
      hours: '40 — 60',
      low: 5400, mid: 6900, high: 9200,
      note: { es: 'lavado a presión, sellado, dos manos. Sin reemplazo de madera.', en: 'pressure-wash, seal, two coats. No wood replacement.' },
    },
    {
      job: { es: 'Gabinetes de cocina · 24 puertas', en: 'Kitchen cabinets · 24 doors' },
      hours: '36 — 50',
      low: 4200, mid: 5400, high: 7100,
      note: { es: 'pintura a pistola en taller. Vuelven instaladas.', en: 'sprayed off-site in the shop. Reinstalled afterward.' },
    },
    {
      job: { es: 'Reparación de drywall · agujero', en: 'Drywall repair · a hole' },
      hours: '2 — 4',
      low: 260, mid: 340, high: 480,
      note: { es: 'hasta 12 × 12 in. Textura igualada. Sin pintar.', en: 'up to 12 × 12 in. Texture-matched. Unpainted.' },
    },
  ];

  // Breakdown of where every dollar goes — same idea as the Du Bois plate,
  // but for a real client about to swipe a card.
  const breakdown = [
    { l: { es: 'Mano de obra', en: 'Labor' },        pct: 46, c: 'var(--ink)' },
    { l: { es: 'Materiales',   en: 'Materials' },    pct: 28, c: 'var(--terracotta)' },
    { l: { es: 'Margen',       en: 'Margin' },       pct: 8,  c: 'var(--olive)' },
    { l: { es: 'Seguros · lic.', en: 'Insurance · lic.' }, pct: 8, c: '#C19B3A' },
    { l: { es: 'Camión · gas',  en: 'Truck · gas' }, pct: 6,  c: '#8A7256' },
    { l: { es: 'Impuesto',      en: 'Tax' },         pct: 4,  c: '#5A5247' },
  ];

  return (
    <div className="page">
      <nav className="nav">
        <div className="nav-inner">
          <div className="brand">
            <div className="brand-mark">Orinova</div>
            <div className="brand-sub">Operating Group</div>
          </div>
          <div className="nav-links">
            <a className="nav-link">{t({ es: 'Servicios', en: 'Services' }, lang)}</a>
            <a className="nav-link is-active">{t({ es: 'Precios', en: 'Pricing' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Galería', en: 'Gallery' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Contacto', en: 'Contact' }, lang)}</a>
            <a className="btn btn-primary" style={{ padding: '8px 16px', fontSize: 13 }}>{t({ es: 'Pedir estimado', en: 'Get an estimate' }, lang)}</a>
            <div className="lang-pill" role="group">
              <button className={lang === 'es' ? 'is-active' : ''} onClick={() => window.__setLang && window.__setLang('es')}>ES</button>
              <button className={lang === 'en' ? 'is-active' : ''} onClick={() => window.__setLang && window.__setLang('en')}>EN</button>
            </div>
          </div>
        </div>
      </nav>

      <div className="page-scroll hide-scroll">
        {/* hero */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 36px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline', borderBottom: '1px solid var(--ink)', paddingBottom: 10 }}>
            <div className="eyebrow">{t({ es: 'Precios · honestos · publicados', en: 'Pricing · honest · published' }, lang)}</div>
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>DV · PRICING · 01</div>
          </div>
          <h1 className="display" style={{ marginTop: 14, fontSize: 96, lineHeight: 0.94, letterSpacing: '-0.028em', maxWidth: 1000 }}>
            {t({
              es: <>El precio antes<br/><em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--terracotta)' }}>de la visita.</em></>,
              en: <>The price before<br/><em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--terracotta)' }}>the visit.</em></>,
            }, lang)}
          </h1>
          <p style={{ marginTop: 14, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 17, color: 'var(--ink-soft)', maxWidth: 720, textWrap: 'pretty' }}>
            {t({
              es: 'La mayoría de los pintores se niega a publicar precios para poder “evaluar cada caso.” Nosotros publicamos los rangos reales del libro mayor 2024–2026. Tu cotización caerá adentro. Si no, te explicamos en escrito por qué.',
              en: 'Most painters refuse to publish prices so they can “price every case.” We publish actual ranges from the 2024–2026 ledger. Your quote will land inside. If it doesn\u2019t, we explain in writing why.',
            }, lang)}
          </p>
        </section>

        {/* the table */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <div className="eyebrow">{t({ es: 'Siete trabajos típicos · rango bajo / medio / alto', en: 'Seven typical jobs · low / mid / high range' }, lang)}</div>
          <div style={{
            border: '1px solid var(--ink)', marginTop: 12,
            background: 'var(--paper-elevated)',
          }}>
            {/* header row */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1.6fr 90px 1fr 1fr 1fr',
              padding: '12px 16px', borderBottom: '1.5px solid var(--ink)',
              fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: 'var(--ink-muted)',
              gap: 14, alignItems: 'baseline',
            }}>
              <div>{t({ es: 'Trabajo', en: 'Job' }, lang)}</div>
              <div style={{ textAlign: 'right' }}>{t({ es: 'Horas', en: 'Hours' }, lang)}</div>
              <div style={{ textAlign: 'right' }}>{t({ es: 'Bajo', en: 'Low' }, lang)}</div>
              <div style={{ textAlign: 'right', color: 'var(--terracotta)' }}>{t({ es: 'Medio · promedio', en: 'Mid · typical' }, lang)}</div>
              <div style={{ textAlign: 'right' }}>{t({ es: 'Alto', en: 'High' }, lang)}</div>
            </div>
            {/* rows */}
            {rows.map((r, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1.6fr 90px 1fr 1fr 1fr',
                padding: '16px 16px', borderBottom: i < rows.length - 1 ? '1px dotted var(--divider-strong)' : 'none',
                gap: 14, alignItems: 'baseline',
              }}>
                <div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 15.5, fontWeight: 500, color: 'var(--ink)' }}>{r.job[lang]}</div>
                  <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 12.5, color: 'var(--ink-soft)', marginTop: 2 }}>
                    {r.note[lang]}
                  </div>
                </div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-muted)', textAlign: 'right', fontVariantNumeric: 'tabular-nums', paddingTop: 4 }}>{r.hours} h</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-soft)', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>${r.low.toLocaleString()}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 600, color: 'var(--ink)', textAlign: 'right', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.005em' }}>
                  ${r.mid.toLocaleString()}
                </div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-soft)', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>${r.high.toLocaleString()}</div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 10, display: 'grid', gridTemplateColumns: '1fr auto', gap: 12,
            fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: 'var(--ink-muted)',
          }}>
            <div>{t({ es: 'Promedios de 142 obras · ene 2024 — abr 2026 · Riverside + IE', en: 'Averaged across 142 jobs · Jan 2024 — Apr 2026 · Riverside + IE' }, lang)}</div>
            <div>{t({ es: 'Sin IVA · servicios no se gravan en CA', en: 'No tax · services untaxed in CA' }, lang)}</div>
          </div>
        </section>

        {/* dollar breakdown */}
        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, alignItems: 'start' }}>
            <div>
              <div className="eyebrow">{t({ es: 'A dónde va cada dólar', en: 'Where every dollar goes' }, lang)}</div>
              <h2 className="display" style={{ marginTop: 8, fontSize: 36, lineHeight: 1, letterSpacing: '-0.018em' }}>
                {t({
                  es: 'Lo que la cuadrilla se lleva es lo más grande. Como debe ser.',
                  en: 'Labor is the biggest line. As it should be.',
                }, lang)}
              </h2>
              <p style={{ marginTop: 10, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14, color: 'var(--ink-soft)', maxWidth: 460, textWrap: 'pretty' }}>
                {t({
                  es: 'Si un competidor te cotiza la mitad, está cortando “mano de obra” — pagándole a alguien menos del salario digno, o subcontratando a quien sí lo hace.',
                  en: 'If a competitor quotes you half, they\u2019re cutting the “labor” line — paying someone less than a living wage, or subcontracting to someone who is.',
                }, lang)}
              </p>
            </div>
            {/* stacked horizontal bar */}
            <div>
              <div style={{
                display: 'flex', width: '100%', height: 44,
                border: '1px solid var(--ink)',
              }}>
                {breakdown.map((b, i) => (
                  <div key={i} style={{
                    flex: b.pct, background: b.c, position: 'relative',
                    borderRight: i < breakdown.length - 1 ? '1px solid var(--paper)' : 'none',
                  }} title={`${b.l[lang]} · ${b.pct}%`} />
                ))}
              </div>
              <div style={{ marginTop: 10 }}>
                {breakdown.map((b, i) => (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: '14px 1fr auto', gap: 10, alignItems: 'baseline',
                    padding: '5px 0', borderBottom: i < breakdown.length - 1 ? '1px dotted var(--divider)' : 'none',
                  }}>
                    <div style={{ width: 14, height: 14, background: b.c, border: '1px solid var(--ink)' }} />
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--ink)' }}>{b.l[lang]}</div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink)', fontVariantNumeric: 'tabular-nums' }}>{b.pct}%</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* what moves the number */}
        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <div className="eyebrow">{t({ es: 'Qué mueve el número, hacia arriba o abajo', en: 'What moves the number, up or down' }, lang)}</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 14 }}>
            <div>
              <div className="codex" style={{ color: 'var(--terracotta)', paddingBottom: 6, borderBottom: '1px solid var(--terracotta)' }}>
                {t({ es: 'SUBE el precio', en: 'PUSHES it UP' }, lang)}
              </div>
              <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none' }}>
                {[
                  { es: 'Techos altos · sobre 10 ft · andamios',         en: 'Tall ceilings · over 10 ft · scaffolding' },
                  { es: 'Madera vieja sin sellar · necesita imprimante', en: 'Old unsealed wood · needs primer' },
                  { es: 'Cambio fuerte de color · oscuro a claro',        en: 'Big color shift · dark to light' },
                  { es: 'Pintura premium · zero-VOC · una sola marca',    en: 'Premium paint · zero-VOC · single brand' },
                  { es: 'Muebles heredados que no se mueven',             en: 'Inherited furniture that can\u2019t be moved' },
                  { es: 'Trabajo en fin de semana o noche',               en: 'Weekend or evening work' },
                ].map((r, i) => (
                  <li key={i} style={{ padding: '8px 0', borderBottom: '1px dotted var(--divider)', display: 'grid', gridTemplateColumns: '18px 1fr', gap: 8, fontFamily: 'var(--serif)', fontSize: 13.5, color: 'var(--ink)' }}>
                    <span style={{ color: 'var(--terracotta)' }}>↑</span>
                    <span>{r[lang]}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <div className="codex" style={{ color: 'var(--olive)', paddingBottom: 6, borderBottom: '1px solid var(--olive)' }}>
                {t({ es: 'BAJA el precio', en: 'PULLS it DOWN' }, lang)}
              </div>
              <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none' }}>
                {[
                  { es: 'Cuartos vacíos · sin amoblado',               en: 'Empty rooms · no furniture' },
                  { es: 'El mismo color · un tono más claro',           en: 'Same color · one shade lighter' },
                  { es: 'Multiples cuartos · misma visita',             en: 'Several rooms · same visit' },
                  { es: 'Pre-venta · entre inquilinos',                 en: 'Pre-sale · between tenants' },
                  { es: 'Dunn-Edwards estándar · color de catálogo',    en: 'Stock Dunn-Edwards color' },
                  { es: 'Tú mueves los muebles antes',                   en: 'You move furniture beforehand' },
                ].map((r, i) => (
                  <li key={i} style={{ padding: '8px 0', borderBottom: '1px dotted var(--divider)', display: 'grid', gridTemplateColumns: '18px 1fr', gap: 8, fontFamily: 'var(--serif)', fontSize: 13.5, color: 'var(--ink)' }}>
                    <span style={{ color: 'var(--olive)' }}>↓</span>
                    <span>{r[lang]}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </section>

        {/* the promise + CTA */}
        <section style={{ maxWidth: 1100, margin: '60px auto 0', padding: '32px 36px', background: 'var(--ink)', color: 'var(--paper-cream)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 28, alignItems: 'center' }}>
            <div>
              <div className="codex" style={{ color: 'rgba(245,240,232,0.65)' }}>
                {t({ es: 'La promesa publicada', en: 'The published promise' }, lang)}
              </div>
              <h2 className="display" style={{ marginTop: 8, fontSize: 34, lineHeight: 1, color: 'var(--paper-cream)' }}>
                {t({
                  es: 'Tu estimado cae adentro del rango. O te lo explicamos por escrito.',
                  en: 'Your estimate lands inside the range. Or we put the reason in writing.',
                }, lang)}
              </h2>
              <p style={{ marginTop: 10, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14, color: 'rgba(245,240,232,0.8)', maxWidth: 540, textWrap: 'pretty' }}>
                {t({
                  es: 'Nunca cobramos por la visita. Nunca presionamos a firmar el mismo día. El estimado se manda al día siguiente, con el desglose línea por línea.',
                  en: 'We never charge for the visit. We never push to sign the same day. The estimate goes out the next day, line by line.',
                }, lang)}
              </p>
            </div>
            <div style={{ display: 'grid', gap: 10 }}>
              <a className="btn btn-call" style={{ padding: '16px 22px', fontSize: 16, justifyContent: 'space-between' }}>
                <span>(951) 555·0142</span>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em' }}>CALL →</span>
              </a>
              <a className="btn btn-ghost" style={{ padding: '14px 22px', fontSize: 14, color: 'var(--paper-cream)', borderColor: 'rgba(245,240,232,0.3)' }}>
                {t({ es: 'O pide el estimado por web', en: 'Or request online' })} →
              </a>
            </div>
          </div>
        </section>

        <footer className="foot">
          <div>© Orinova · Operating Group · MMXXVI · CSLB #1098231 · C-33</div>
          <div>{t({ es: 'Rangos verificables · pregunta por el libro mayor', en: 'Ranges verifiable · ask for the ledger' }, lang)}</div>
        </footer>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
 * 02 · THE WEEK
 *   A public weekly ledger. Every job we touched, by name and number.
 *   This is what builds trust faster than any testimonial: proof of life.
 * ───────────────────────────────────────────────────────── */

function TheWeek() {
  const t = window.t;
  const { lang } = window.useLang();

  // Eight entries that span the operational reality of a week.
  const entries = [
    {
      id: 'DV-0431', day: 'Mon', date: '12',
      status: 'closed',
      title: { es: 'Casa Aguilar · Moreno Valley', en: 'Aguilar residence · Moreno Valley' },
      what:  { es: 'sala, pasillo, dos cuartos · interior · 3 días',  en: 'living, hallway, two bedrooms · interior · 3 days' },
      moment:{ es: 'la niña dibujó un capataz con sombrero en la pared del cuarto. No lo borramos.', en: 'the daughter drew a hatted foreman on the bedroom wall. We left it.' },
      paid:  '$ 5,633',
    },
    {
      id: 'DV-0432', day: 'Tue', date: '13',
      status: 'started',
      title: { es: 'Casa Patel · Eastvale',          en: 'Patel residence · Eastvale' },
      what:  { es: 'exterior estuco · pre-venta · 4 días',           en: 'stucco exterior · pre-sale · 4 days' },
      moment:{ es: 'comenzamos a las 6:42 a.m. El vecino bajó a saludar.', en: 'started 6:42 a.m. The neighbor came down to say hello.' },
      paid:  '— · in progress',
    },
    {
      id: 'DV-0428', day: 'Tue', date: '13',
      status: 'paid',
      title: { es: 'Cocina Ruiz · Riverside',         en: 'Ruiz kitchen · Riverside' },
      what:  { es: 'gabinetes · 24 puertas · taller',  en: 'cabinets · 24 doors · shop spray' },
      moment:{ es: 'devueltos e instalados antes del jueves de la cena.', en: 'returned + installed before Thursday\u2019s dinner.' },
      paid:  '$ 5,420',
    },
    {
      id: 'DV-0433', day: 'Wed', date: '14',
      status: 'visit',
      title: { es: 'Casa Tanaka · Corona',            en: 'Tanaka residence · Corona' },
      what:  { es: 'visita de estimado · ~ 8 paredes', en: 'estimate visit · ~ 8 walls' },
      moment:{ es: 'pidieron Linen DE6196. Buena elección, lo dijimos.', en: 'asked for Linen DE6196. A good choice, we said so.' },
      paid:  '— · estimate pending',
    },
    {
      id: 'DV-0411', day: 'Wed', date: '14',
      status: 'callback',
      title: { es: 'Departamento Greene · Hemet',     en: 'Greene apartment · Hemet' },
      what:  { es: 'retoque · 6 meses de garantía',    en: 'touch-up · 6-month warranty visit' },
      moment:{ es: 'el saldo del baño volvió por humedad. Manda lo reparamos sin cargo.', en: 'bathroom edge returned from humidity. We came back at no charge.' },
      paid:  '— · warranty',
    },
    {
      id: 'DV-0434', day: 'Thu', date: '15',
      status: 'declined',
      title: { es: 'Casa Lopez · San Bernardino',      en: 'Lopez residence · San Bernardino' },
      what:  { es: 'fuera de cobertura · 41 mi',        en: 'outside coverage · 41 mi' },
      moment:{ es: 'recomendamos a Calderón Brothers. Conducen para allá.',  en: 'referred to Calderón Brothers. They drive that far.' },
      paid:  '— · referred out',
    },
    {
      id: 'DV-0435', day: 'Fri', date: '16',
      status: 'visit',
      title: { es: 'Realtor · Stafford · Rancho',       en: 'Realtor · Stafford · Rancho' },
      what:  { es: 'visita de estimado · 6 listings',   en: 'estimate visit · 6 listings' },
      moment:{ es: 'firmamos pre-venta para los seis. Empezamos el 22.',     en: 'pre-sale signed for all six. Start the 22nd.' },
      paid:  '— · contract signed',
    },
    {
      id: 'crew', day: 'Fri', date: '16',
      status: 'crew',
      title: { es: 'Pago de la cuadrilla',              en: 'Crew payday' },
      what:  { es: 'doce personas · W-2 · sin atraso',  en: 'twelve people · W-2 · on time' },
      moment:{ es: 'cuarenta y ocho semanas seguidas sin tardanza.', en: 'forty-eight consecutive weeks without delay.' },
      paid:  '$ 38,420',
    },
  ];

  const statusColor = (s) => ({
    closed:   'var(--olive)',
    started:  'var(--terracotta)',
    paid:     'var(--olive)',
    visit:    'var(--ink)',
    callback: 'var(--ink-muted)',
    declined: 'var(--ink-muted)',
    crew:     'var(--terracotta)',
  })[s] || 'var(--ink)';

  const statusLabel = (s) => ({
    closed:   { es: 'cerrada',   en: 'closed' },
    started:  { es: 'comenzada', en: 'started' },
    paid:     { es: 'pagada',    en: 'paid' },
    visit:    { es: 'visita',    en: 'visit' },
    callback: { es: 'garantía',  en: 'warranty' },
    declined: { es: 'referida',  en: 'referred' },
    crew:     { es: 'cuadrilla', en: 'crew' },
  })[s];

  // group by day
  const days = ['Mon','Tue','Wed','Thu','Fri'];
  const dayName = {
    Mon: { es: 'lunes', en: 'monday' },
    Tue: { es: 'martes', en: 'tuesday' },
    Wed: { es: 'miércoles', en: 'wednesday' },
    Thu: { es: 'jueves', en: 'thursday' },
    Fri: { es: 'viernes', en: 'friday' },
  };

  return (
    <div className="page">
      <nav className="nav">
        <div className="nav-inner">
          <div className="brand">
            <div className="brand-mark">Orinova</div>
            <div className="brand-sub">Operating Group</div>
          </div>
          <div className="nav-links">
            <a className="nav-link">{t({ es: 'Servicios', en: 'Services' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Precios', en: 'Pricing' }, lang)}</a>
            <a className="nav-link is-active">{t({ es: 'La semana', en: 'The Week' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Contacto', en: 'Contact' }, lang)}</a>
            <a className="btn btn-primary" style={{ padding: '8px 16px', fontSize: 13 }}>{t({ es: 'Pedir estimado', en: 'Get an estimate' }, lang)}</a>
            <div className="lang-pill" role="group">
              <button className={lang === 'es' ? 'is-active' : ''} onClick={() => window.__setLang && window.__setLang('es')}>ES</button>
              <button className={lang === 'en' ? 'is-active' : ''} onClick={() => window.__setLang && window.__setLang('en')}>EN</button>
            </div>
          </div>
        </div>
      </nav>

      <div className="page-scroll hide-scroll">
        {/* hero */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 36px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline', borderBottom: '1px solid var(--ink)', paddingBottom: 10 }}>
            <div className="eyebrow">{t({ es: 'La semana · publicada cada viernes a las 6 PM', en: 'The week · published every Friday at 6 PM' }, lang)}</div>
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>NO. 21 · {t({ es: 'sem. del 12 al 16 de mayo', en: 'wk. May 12 — 16' }, lang)}</div>
          </div>
          <h1 className="display" style={{ marginTop: 14, fontSize: 100, lineHeight: 0.94, letterSpacing: '-0.028em', maxWidth: 1000 }}>
            {t({
              es: <>Lo que tocamos<br/><em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--terracotta)' }}>esta semana.</em></>,
              en: <>Everything we touched<br/><em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--terracotta)' }}>this week.</em></>,
            }, lang)}
          </h1>
          <p style={{ marginTop: 14, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 17, color: 'var(--ink-soft)', maxWidth: 720, textWrap: 'pretty' }}>
            {t({
              es: 'Publicar nuestra semana, completa y por nombre, es el reseñazo más honesto que podemos darte. No editamos. Si referimos un trabajo a otra cuadrilla, lo decimos. Si volvimos sin cobrar por garantía, también.',
              en: 'Publishing our whole week, by name, is the most honest review we can give you. Nothing edited. If we sent a job to another crew, we say so. If we came back free under warranty, that too.',
            }, lang)}
          </p>

          {/* week summary numbers */}
          <div style={{
            marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0,
            borderTop: '1.5px solid var(--ink)', borderBottom: '1.5px solid var(--ink)',
          }}>
            {[
              { v: '8', l: { es: 'obras tocadas', en: 'jobs touched' } },
              { v: '$ 11,053', l: { es: 'cobrado · neto', en: 'collected · net' } },
              { v: '$ 38,420', l: { es: 'pagado a la cuadrilla', en: 'paid to crew' } },
              { v: '1', l: { es: 'visita por garantía', en: 'warranty callback' } },
              { v: '0', l: { es: 'reclamos sin resolver', en: 'unresolved complaints' } },
            ].map((s, i) => (
              <div key={i} style={{
                padding: '20px 18px',
                borderRight: i < 4 ? '1px solid var(--divider)' : 'none',
              }}>
                <div style={{ fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 36, letterSpacing: '-0.02em', color: 'var(--ink)' }}>{s.v}</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-muted)', marginTop: 4 }}>{s.l[lang]}</div>
              </div>
            ))}
          </div>
        </section>

        {/* the entries — grouped by day */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          {days.map((d) => {
            const dayEntries = entries.filter(e => e.day === d);
            if (!dayEntries.length) return null;
            return (
              <div key={d} style={{ marginBottom: 20 }}>
                <div style={{
                  display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 16, alignItems: 'baseline',
                  borderBottom: '2px solid var(--ink)', paddingBottom: 6,
                }}>
                  <div style={{
                    fontFamily: 'var(--serif)', fontWeight: 600, fontStyle: 'italic',
                    fontSize: 36, color: 'var(--terracotta)', letterSpacing: '-0.018em', lineHeight: 1,
                  }}>{dayEntries[0].date}</div>
                  <div className="codex">{dayName[d][lang]} · {d}</div>
                  <div className="codex" style={{ color: 'var(--ink-muted)' }}>{dayEntries.length} {t({ es: 'entradas', en: 'entries' }, lang)}</div>
                </div>
                {dayEntries.map((e, ei) => (
                  <article key={ei} style={{
                    display: 'grid', gridTemplateColumns: '92px 1fr 1fr 130px',
                    padding: '14px 0', borderBottom: '1px dotted var(--divider-strong)',
                    gap: 18, alignItems: 'baseline',
                  }}>
                    <div>
                      <div style={{
                        fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.12em',
                        color: 'var(--ink-muted)', fontVariantNumeric: 'tabular-nums',
                      }}>{e.id}</div>
                      <div style={{
                        display: 'inline-block', marginTop: 6,
                        padding: '2px 8px', border: '1px solid ' + statusColor(e.status),
                        color: statusColor(e.status),
                        fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase',
                        borderRadius: 999,
                      }}>{statusLabel(e.status)[lang]}</div>
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--serif)', fontSize: 16, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.005em' }}>
                        {e.title[lang]}
                      </div>
                      <div style={{ fontFamily: 'var(--serif)', fontSize: 13, color: 'var(--ink-soft)', marginTop: 2 }}>
                        {e.what[lang]}
                      </div>
                    </div>
                    <div style={{
                      fontFamily: 'var(--serif)', fontStyle: 'italic',
                      fontSize: 13.5, color: 'var(--ink)', lineHeight: 1.45, textWrap: 'pretty',
                    }}>
                      {e.moment[lang]}
                    </div>
                    <div style={{
                      fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink)',
                      textAlign: 'right', fontVariantNumeric: 'tabular-nums',
                    }}>{e.paid}</div>
                  </article>
                ))}
              </div>
            );
          })}
        </section>

        {/* archive strip */}
        <section style={{ maxWidth: 1100, margin: '20px auto 0', padding: '20px 36px', borderTop: '2px solid var(--ink)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'baseline' }}>
            <div>
              <div className="codex">{t({ es: 'Archivo · 21 semanas', en: 'Archive · 21 weeks' }, lang)}</div>
              <div style={{ marginTop: 6, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14, color: 'var(--ink-soft)' }}>
                {t({ es: 'cada semana desde la del 30 de diciembre, 2025.', en: 'every week since the week of December 30, 2025.' }, lang)}
              </div>
            </div>
            <a className="btn btn-ghost" style={{ padding: '10px 16px', fontSize: 13 }}>
              {t({ es: 'Ver semanas anteriores', en: 'See earlier weeks' }, lang)} →
            </a>
          </div>
        </section>

        <footer className="foot">
          <div>© Orinova · Operating Group · MMXXVI · {t({ es: 'cada viernes a las 6 PM', en: 'every Friday at 6 PM' }, lang)}</div>
          <div>{t({ es: 'Suscribirse · correo · una vez por semana', en: 'Subscribe · email · once a week' }, lang)} →</div>
        </footer>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
 * 03 · WHY WE SAY NO
 *   The refusals page. What we don't do, and why. The most
 *   conversion-positive page on the site for the right client.
 * ───────────────────────────────────────────────────────── */

function WhyWeSayNo() {
  const t = window.t;
  const { lang } = window.useLang();

  const refusals = [
    {
      n: 'I',
      what:  { es: 'Trabajos de menos de $400.',                                en: 'Jobs under $400.' },
      why:   { es: 'No cubre el costo de manejar hasta tu casa y volver. Mandamos a alguien más pequeño con cariño.', en: 'It doesn\u2019t cover the drive there and back. We refer to a smaller painter with respect.' },
      refer: { es: 'Recomendamos a Hugo Mendoza · (951) 555·0214.',              en: 'We recommend Hugo Mendoza · (951) 555·0214.' },
    },
    {
      n: 'II',
      what:  { es: 'Pintar sobre moho sin que un experto lo trate primero.',     en: 'Painting over mold before it has been treated by a remediator.' },
      why:   { es: 'La pintura sobre moho sella el problema. Vuelve más fuerte. Un técnico de remediación es trescientos dólares y vale cada uno.', en: 'Paint over mold seals the problem in. It comes back worse. A remediation tech costs $300 and is worth every dollar.' },
      refer: { es: 'Recomendamos a ServPro Inland · (909) 555·6700.',             en: 'We recommend ServPro Inland · (909) 555·6700.' },
    },
    {
      n: 'III',
      what:  { es: 'Cobrar por la visita, o por el estimado.',                   en: 'Charging for the visit, or for the estimate.' },
      why:   { es: 'Si tienes que pagarnos para saber cuánto cuesta, no hemos empezado a ganarnos tu confianza. Los estimados son gratis. Sin trampas, sin caja escondida.', en: 'If you have to pay us to learn the price, we haven\u2019t started earning your trust. Estimates are free. No tricks, no hidden charge.' },
    },
    {
      n: 'IV',
      what:  { es: 'Trabajos con presión de “firma hoy o subo el precio.”',      en: 'Jobs with “sign today or the price goes up” pressure.' },
      why:   { es: 'Es la frase de un vendedor cansado, no de un capataz orgulloso. Tu estimado vale por treinta días. Llámanos a los veintinueve si quieres. El número será el mismo.', en: 'That\u2019s the line of a tired salesman, not a proud foreman. Your estimate is valid for thirty days. Call us on day twenty-nine. The number will be the same.' },
    },
    {
      n: 'V',
      what:  { es: 'Pintar paredes de yeso que se desmoronan al tacto.',         en: 'Painting plaster walls that crumble under a fingertip.' },
      why:   { es: 'Necesitan un yesero antes que un pintor. Si pintamos primero, hacemos una pared hermosa que se cae en seis meses.', en: 'They need a plasterer before a painter. If we paint first, we make a beautiful wall that falls in six months.' },
      refer: { es: 'Recomendamos a Carrillo Yeso · (951) 555·0455.',              en: 'We recommend Carrillo Plaster · (951) 555·0455.' },
    },
    {
      n: 'VI',
      what:  { es: 'Mezclar nuestra pintura con materiales que el cliente trae de la tienda.', en: 'Mixing our paint with materials a client brings from the store.' },
      why:   { es: 'No podemos garantizar lo que no compramos. Si trajiste una lata para igualar, está bien — la usamos sin garantía. Si quieres garantía, compramos la lata nosotros.', en: 'We can\u2019t warranty what we didn\u2019t buy. If you brought a can to match, fine — we use it, no warranty. For warranty, we buy the paint ourselves.' },
    },
    {
      n: 'VII',
      what:  { es: 'Trabajos fuera de la cobertura · 35 mi del centro de Riverside.', en: 'Jobs outside coverage · 35 mi from downtown Riverside.' },
      why:   { es: 'Más lejos y la cuadrilla pierde una hora en la carretera, dos veces al día. La obra sale resentida, no perfecta. Mejor referirla.', en: 'Farther and the crew loses an hour on the road, twice a day. The work comes out resentful, not perfect. Better to refer.' },
      refer: { es: 'Mapas y referidos en /coverage.',                              en: 'Maps and referrals on /coverage.' },
    },
    {
      n: 'VIII',
      what:  { es: 'Reuniones a las 7 PM en la casa del cliente, con vino y “hablemos de los colores.”', en: 'Meetings at 7 PM at the client\u2019s house, wine out, “let\u2019s talk colors.”' },
      why:   { es: 'Encantadores. Pero el ojo cansado escoge mal. El color se decide a la luz de la tarde, sobrio, en quince minutos. Si quieres vino, te ganamos uno cuando entregamos.', en: 'Lovely. But a tired eye picks badly. Color is decided in afternoon light, sober, in fifteen minutes. If you want wine, we\u2019ll bring some to handover.' },
    },
  ];

  return (
    <div className="page">
      <nav className="nav">
        <div className="nav-inner">
          <div className="brand">
            <div className="brand-mark">Orinova</div>
            <div className="brand-sub">Operating Group</div>
          </div>
          <div className="nav-links">
            <a className="nav-link">{t({ es: 'Servicios', en: 'Services' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Precios', en: 'Pricing' }, lang)}</a>
            <a className="nav-link is-active">{t({ es: 'Lo que no hacemos', en: 'What we won\u2019t do' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Contacto', en: 'Contact' }, lang)}</a>
            <a className="btn btn-primary" style={{ padding: '8px 16px', fontSize: 13 }}>{t({ es: 'Pedir estimado', en: 'Get an estimate' }, lang)}</a>
            <div className="lang-pill" role="group">
              <button className={lang === 'es' ? 'is-active' : ''} onClick={() => window.__setLang && window.__setLang('es')}>ES</button>
              <button className={lang === 'en' ? 'is-active' : ''} onClick={() => window.__setLang && window.__setLang('en')}>EN</button>
            </div>
          </div>
        </div>
      </nav>

      <div className="page-scroll hide-scroll">
        {/* hero */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 36px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline', borderBottom: '1px solid var(--ink)', paddingBottom: 10 }}>
            <div className="eyebrow">{t({ es: 'Lo que no hacemos · ocho rechazos', en: 'What we won\u2019t do · eight refusals' }, lang)}</div>
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>DV · REFUSALS · 01</div>
          </div>
          <h1 className="display" style={{ marginTop: 14, fontSize: 104, lineHeight: 0.94, letterSpacing: '-0.028em', maxWidth: 1000 }}>
            {t({
              es: <>Lo que decimos<br/><em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--terracotta)' }}>que no.</em></>,
              en: <>What we say<br/><em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--terracotta)' }}>no to.</em></>,
            }, lang)}
          </h1>
          <p style={{ marginTop: 14, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 17, color: 'var(--ink-soft)', maxWidth: 720, textWrap: 'pretty' }}>
            {t({
              es: 'Decir “sí” a todo es la forma más rápida de hacer mal trabajo. Estas son ocho cosas que no hacemos — algunas porque no podemos honestamente, otras porque hacerlas mancharía lo demás. Si alguna te describe, te recomendamos a quien sí.',
              en: 'Saying yes to everything is the fastest way to do bad work. These are eight things we don\u2019t do — some because we honestly can\u2019t, others because doing them would stain everything else. If one fits, we recommend who can.',
            }, lang)}
          </p>
        </section>

        {/* the refusals */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <ol style={{ margin: 0, padding: 0, listStyle: 'none', borderTop: '1px solid var(--ink)' }}>
            {refusals.map((r, i) => (
              <li key={i} style={{
                display: 'grid', gridTemplateColumns: '80px 1fr 1fr',
                padding: '24px 0', borderBottom: '1px solid var(--divider)',
                gap: 28, alignItems: 'baseline',
                breakInside: 'avoid',
              }}>
                <div style={{
                  fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 500,
                  fontSize: 32, color: 'var(--terracotta)', letterSpacing: '-0.015em', lineHeight: 0.95,
                }}>{r.n}.</div>
                <div>
                  <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'No haremos', en: 'We won\u2019t' }, lang)}</div>
                  <h3 style={{
                    margin: '6px 0 0', fontFamily: 'var(--serif)', fontWeight: 600,
                    fontSize: 26, letterSpacing: '-0.012em', lineHeight: 1.15,
                    color: 'var(--ink)', textWrap: 'pretty',
                  }}>{r.what[lang]}</h3>
                </div>
                <div>
                  <div className="codex" style={{ color: 'var(--terracotta)' }}>{t({ es: 'Por qué', en: 'Why' }, lang)}</div>
                  <p style={{
                    margin: '6px 0 0', fontFamily: 'var(--serif)', fontStyle: 'italic',
                    fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.5, textWrap: 'pretty',
                  }}>{r.why[lang]}</p>
                  {r.refer && (
                    <div style={{
                      marginTop: 10, padding: '8px 12px',
                      background: 'var(--paper-cream)', border: '1px solid var(--divider-strong)',
                      fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.16em',
                      textTransform: 'uppercase', color: 'var(--ink)',
                      display: 'inline-block',
                    }}>
                      → {r.refer[lang]}
                    </div>
                  )}
                </div>
              </li>
            ))}
          </ol>
        </section>

        {/* closing */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '32px 36px', borderTop: '2px solid var(--ink)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 28, alignItems: 'center' }}>
            <p style={{
              margin: 0, fontFamily: 'var(--serif)', fontStyle: 'italic',
              fontSize: 22, color: 'var(--ink)', lineHeight: 1.4, maxWidth: 820, textWrap: 'pretty',
            }}>
              {t({
                es: '“El oficio es lo que decides no hacer. Lo demás cualquiera lo hace, deprisa, mal y por menos.”',
                en: '\u201cThe trade is what you decide not to do. The rest, anyone can do — fast, badly, and cheaper.\u201d',
              }, lang)}
            </p>
            <a className="btn btn-primary" style={{ padding: '14px 22px', fontSize: 15, whiteSpace: 'nowrap' }}>
              {t({ es: 'Ver lo que sí hacemos', en: 'See what we do →' }, lang)}
            </a>
          </div>
        </section>

        <footer className="foot">
          <div>© Orinova · Operating Group · MMXXVI · {t({ es: 'rechazos publicados · trimestrales', en: 'refusals published quarterly' }, lang)}</div>
          <div>{t({ es: 'Última revisión · 19 mayo 2026', en: 'Last reviewed · May 19, 2026' }, lang)}</div>
        </footer>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
 * Exports
 * ───────────────────────────────────────────────────────── */

window.OrinovaPages18 = {
  PricingTransparency,
  TheWeek,
  WhyWeSayNo,
};