/* Orinova Portal — pages6.jsx
   Polish / brand surface:
     · PrinciplesManifesto — five promises, type-led editorial
     · PressOnePager       — printable single-page brand sheet
     · BeforeAfterGallery  — split-frame visual portfolio
     · NotFoundPage        — quiet, paper-grammar 404
     · DesignSpecimen      — type & color reference (the back-of-book)
*/

const ATOMS6 = window.OrinovaAtoms;

/* ── PRINCIPLES MANIFESTO ─────────────────────────────────── */

const PRINCIPLES = [
  {
    n: 'I',
    t:  { es: 'Escrito antes de empezar.',           en: 'In writing before we start.' },
    d:  {
      es: 'Cada estimado es papel y correo. Cantidad, marca, plazo, persona responsable. Si no está escrito, no existe.',
      en: 'Every estimate is paper and email. Quantity, brand, schedule, person responsible. If it isn\u2019t written, it doesn\u2019t exist.'
    }
  },
  {
    n: 'II',
    t:  { es: 'Misma cuadrilla del primer día al último.',  en: 'Same crew first day to last.' },
    d:  {
      es: 'Sin rotación, sin subcontratistas que no conoces. Foreman + 2–4 pintores con su nombre en la camisa.',
      en: 'No rotation, no subs you\u2019ve never met. Foreman + 2–4 painters with their name on the shirt.'
    }
  },
  {
    n: 'III',
    t:  { es: 'Te llamamos antes de cobrar más.',  en: 'We call before we charge more.' },
    d:  {
      es: 'Si abrimos la pared y vemos algo no previsto, paramos. Te llamamos. Firmas el cambio. Después seguimos.',
      en: 'If we open the wall and see something unforeseen, we stop. We call. You sign the change. Then we go on.'
    }
  },
  {
    n: 'IV',
    t:  { es: 'Hablamos en el idioma que prefieras.',  en: 'We speak the language you prefer.' },
    d:  {
      es: 'Español sin prisa. Inglés sin acento de venta. Lo que escribimos en uno, lo escribimos en el otro.',
      en: 'Spanish without rushing. English without a salesman\u2019s accent. What we write in one, we write in the other.'
    }
  },
  {
    n: 'V',
    t:  { es: 'Si no podemos, te decimos quién sí.', en: 'If we can\u2019t, we tell you who can.' },
    d:  {
      es: 'Hay obras fuera de nuestra mano — techos, plomería profunda, demolición estructural. Te mandamos al oficio correcto, no a un primo nuestro.',
      en: 'Some work is outside our hands — roofs, deep plumbing, structural demo. We send you to the right trade, not to our cousin.'
    }
  },
];

function PrinciplesManifesto() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = ATOMS6;
  return (
    <div className="page">
      <Nav active="about" surface="orinova" />
      <div className="page-scroll hide-scroll">

        {/* masthead */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 36px 0' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr auto 1fr',
            alignItems: 'baseline', gap: 18,
            borderBottom: '1px solid var(--ink)', paddingBottom: 12,
          }}>
            <div className="codex">ORINOVA · BROADSIDE · NO. V</div>
            <div className="codex" style={{ textAlign: 'center' }}>{t({ es: 'CINCO PROMESAS', en: 'FIVE PROMISES' }, lang)}</div>
            <div className="codex" style={{ textAlign: 'right', color: 'var(--ink-muted)' }}>MMXXVI · RIVERSIDE, CA</div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 36, marginTop: 28, alignItems: 'end' }}>
            <h1 className="display" style={{ fontSize: 96, margin: 0, lineHeight: 0.92, letterSpacing: '-0.03em', maxWidth: 720 }}>
              {t({
                es: 'Lo que firmamos.',
                en: 'What we sign for.'
              }, lang)}
            </h1>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.55, fontStyle: 'italic', color: 'var(--ink-soft)', margin: 0, maxWidth: 360 }}>
              {t({
                es: 'Cinco frases. Cada una se puede leer en voz alta a un cliente, a una cuadrilla, a un juez.',
                en: 'Five sentences. Each one can be read aloud to a client, a crew, a judge.'
              }, lang)}
            </p>
          </div>
        </section>

        {/* principles */}
        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <div style={{ borderTop: '1px solid var(--divider-strong)' }}>
            {PRINCIPLES.map((p, i) => (
              <article key={p.n} style={{
                display: 'grid',
                gridTemplateColumns: '110px 1fr 1.2fr',
                gap: 28,
                padding: '34px 0',
                borderBottom: '1px solid var(--divider)',
                alignItems: 'baseline',
              }}>
                <div className="display" style={{
                  fontSize: 64, fontStyle: 'italic', fontWeight: 500,
                  color: 'var(--terracotta)', lineHeight: 0.9,
                  fontVariantNumeric: 'tabular-nums',
                }}>{p.n}</div>
                <h2 className="display" style={{ fontSize: 30, margin: 0, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
                  {t(p.t, lang)}
                </h2>
                <p style={{ margin: 0, fontFamily: 'var(--serif)', fontSize: 17, lineHeight: 1.55, color: 'var(--ink-soft)' }}>
                  {t(p.d, lang)}
                </p>
              </article>
            ))}
          </div>
        </section>

        {/* sign-off */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 32, alignItems: 'end' }}>
            <p style={{ fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.45, color: 'var(--ink)', margin: 0, maxWidth: 720, fontStyle: 'italic' }}>
              {t({
                es: '“Si rompemos una de estas cinco, dilo. Lo arreglamos antes de cobrar.”',
                en: '“If we break one of these five, say so. We fix it before we collect.”'
              }, lang)}
            </p>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 28, fontStyle: 'italic', color: 'var(--ink)' }}>Erick R.</div>
              <div className="codex" style={{ color: 'var(--ink-muted)', marginTop: 4 }}>{t({ es: 'FUNDADOR · CSLB #1098432', en: 'FOUNDER · CSLB #1098432' }, lang)}</div>
            </div>
          </div>
        </section>

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

/* ── PRESS ONE-PAGER ──────────────────────────────────────── */

function PressOnePager() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Eyebrow, Slot } = ATOMS6;
  return (
    <div className="page" style={{ background: 'var(--paper-form)' }}>
      <div className="page-scroll hide-scroll">
        <div style={{ maxWidth: 880, margin: '0 auto', padding: '46px 56px 56px' }}>

          {/* head */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr auto',
            alignItems: 'baseline', borderBottom: '1px solid var(--ink)', paddingBottom: 14,
          }}>
            <div>
              <div className="brand-mark" style={{ fontSize: 30, letterSpacing: '-0.025em' }}>Orinova</div>
              <div className="brand-sub" style={{ marginTop: 2 }}>OPERATING GROUP · {t({ es: 'HOJA DE PRENSA', en: 'PRESS SHEET' }, lang)}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="codex">ORINOVA · DOC · PRESS · 01</div>
              <div className="codex" style={{ color: 'var(--ink-muted)', marginTop: 4 }}>MMXXVI</div>
            </div>
          </div>

          {/* hero line */}
          <div style={{ marginTop: 30, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32, alignItems: 'start' }}>
            <div>
              <Eyebrow>{t({ es: 'En una línea', en: 'In one line' }, lang)}</Eyebrow>
              <p className="display" style={{ fontSize: 36, lineHeight: 1.08, margin: '10px 0 0', maxWidth: 480 }}>
                {t({
                  es: 'Una casa de oficios bilingüe que escribe el estimado antes de empezar.',
                  en: 'A bilingual trade house that writes the estimate before starting.'
                }, lang)}
              </p>
            </div>
            <div>
              <Eyebrow>{t({ es: 'Sede', en: 'Based' }, lang)}</Eyebrow>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 6 }}>Riverside, CA</div>
              <div style={{ fontSize: 13.5, color: 'var(--ink-soft)' }}>{t({ es: 'sirviendo el Inland Empire', en: 'serving the Inland Empire' }, lang)}</div>
              <Eyebrow right={false} >&nbsp;</Eyebrow>
              <Eyebrow>{t({ es: 'Fundada', en: 'Founded' }, lang)}</Eyebrow>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 6 }}>2017</div>
            </div>
          </div>

          {/* stats */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            marginTop: 28, borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)',
          }}>
            {[
              { k: { es: 'OBRAS · 2025', en: 'JOBS · 2025' }, v: '147' },
              { k: { es: 'CUADRILLAS', en: 'CREWS' }, v: '6' },
              { k: { es: 'IDIOMAS', en: 'LANGUAGES' }, v: '2' },
              { k: { es: 'GARANTÍA', en: 'WARRANTY' }, v: '3 yr' },
            ].map((m, i) => (
              <div key={i} style={{ padding: '16px 16px 18px', borderRight: i < 3 ? '1px solid var(--divider)' : 'none' }}>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t(m.k, lang)}</div>
                <div className="display" style={{ fontSize: 36, fontVariantNumeric: 'tabular-nums', marginTop: 4 }}>{m.v}</div>
              </div>
            ))}
          </div>

          {/* body */}
          <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32 }}>
            <div>
              <Eyebrow>{t({ es: 'Quiénes somos', en: 'Who we are' }, lang)}</Eyebrow>
              <p style={{ fontFamily: 'var(--serif)', fontSize: 15.5, lineHeight: 1.65, color: 'var(--ink)', marginTop: 8 }}>
                {t({
                  es: 'Orinova es el grupo operativo detrás de DreamValley Trade Solutions — pintura, drywall y reparaciones para casas del Inland Empire. Fundada por Erick R., un pintor que aprendió el oficio ayudando a su padre en Riverside. Hoy seis cuadrillas, todas bilingües, todas en nómina, sin subcontratos escondidos.',
                  en: 'Orinova is the operating group behind DreamValley Trade Solutions — paint, drywall, and repairs for Inland Empire homes. Founded by Erick R., a painter who learned the trade helping his father in Riverside. Today six crews, all bilingual, all on payroll, no hidden subs.'
                }, lang)}
              </p>
              <Eyebrow>&nbsp;</Eyebrow>
              <Eyebrow>{t({ es: 'Para historias sobre', en: 'For stories about' }, lang)}</Eyebrow>
              <ul style={{ margin: '8px 0 0', padding: 0, listStyle: 'none', fontSize: 13.5, color: 'var(--ink-soft)' }}>
                {[
                  { es: 'Trabajadores latinos en oficio formal del IE.', en: 'Latino tradespeople going formal in the IE.' },
                  { es: 'Cómo se ve una contratación honesta en 2026.', en: 'What honest contracting looks like in 2026.' },
                  { es: 'Pintura exclusiva Dunn-Edwards para casas residenciales.', en: 'Dunn-Edwards exclusive paint for residential homes.' },
                  { es: 'Programa Realtor Alliance — preparación pre-venta.', en: 'Realtor Alliance program — pre-sale prep.' },
                ].map((r, i) => (
                  <li key={i} style={{ padding: '8px 0', borderBottom: '1px solid var(--divider)' }}>— {t(r, lang)}</li>
                ))}
              </ul>
            </div>

            <div>
              <Slot label="FOUNDER PORTRAIT" sub="erick r. · 4:5" slotId="press-founder" style={{ aspectRatio: '4 / 5' }} />
              <div className="codex" style={{ marginTop: 10, color: 'var(--ink-muted)' }}>{t({ es: 'FOTOGRAFÍA · USO LIBRE CON CRÉDITO', en: 'PHOTOGRAPHY · FREE WITH CREDIT' }, lang)}</div>

              <div style={{ marginTop: 22, padding: 14, background: 'var(--paper-cream)', border: '1px solid var(--divider)' }}>
                <div className="codex">{t({ es: 'CONTACTO DE PRENSA', en: 'PRESS CONTACT' }, lang)}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 17, marginTop: 6 }}>Marisol C.</div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>press@orinova.group</div>
                <div className="tab" style={{ fontSize: 13, color: 'var(--ink-soft)' }}>(951) 555-0148 · {t({ es: 'ext.', en: 'ext.' }, lang)} 3</div>
              </div>
            </div>
          </div>

          {/* footer rule */}
          <div style={{ marginTop: 30, paddingTop: 12, borderTop: '1px solid var(--ink)', display: 'grid', gridTemplateColumns: '1fr 1fr', fontSize: 11, fontFamily: 'var(--mono)', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-muted)' }}>
            <div>CSLB #1098432 · BONDED · INSURED</div>
            <div style={{ textAlign: 'right' }}>ORINOVA.GROUP / PRESS</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── BEFORE / AFTER GALLERY ───────────────────────────────── */

const BA_JOBS = [
  { id: 'rpv-01', room: { es: 'Sala · Rancho Palos Verdes', en: 'Living · Rancho Palos Verdes' }, paint: 'DE6196 Linen',          when: { es: 'feb 2026', en: 'Feb 2026' }, days: 3 },
  { id: 'rvs-02', room: { es: 'Cocina · Riverside',          en: 'Kitchen · Riverside' },        paint: 'DE6371 Riverbed',       when: { es: 'ene 2026', en: 'Jan 2026' }, days: 4 },
  { id: 'cor-03', room: { es: 'Exterior · Corona',           en: 'Exterior · Corona' },          paint: 'DE6111 Adobe',          when: { es: 'dic 2025', en: 'Dec 2025' }, days: 6 },
  { id: 'evl-04', room: { es: 'Recámara · Eastvale',         en: 'Bedroom · Eastvale' },         paint: 'DE5605 Sage',           when: { es: 'nov 2025', en: 'Nov 2025' }, days: 2 },
];

function BeforeAfterGallery() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow, Slot } = ATOMS6;
  const [active, setActive] = React.useState(0);
  const job = BA_JOBS[active];

  return (
    <div className="page">
      <Nav active="services" surface="dreamvalley" />
      <div className="page-scroll hide-scroll">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 36px 0' }}>
          <Eyebrow>{t({ es: 'Trabajos · antes y después', en: 'Work · before and after' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 36, alignItems: 'end', marginTop: 12 }}>
            <h1 className="display" style={{ fontSize: 56, margin: 0, maxWidth: 720, lineHeight: 1 }}>
              {t({
                es: 'Casas reales. Sin photoshop, sin filtros.',
                en: 'Real houses. No photoshop, no filters.'
              }, lang)}
            </h1>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0 }}>
              {t({
                es: 'Mismo encuadre, misma hora, misma luz. Si la foto sale igual antes y después, no la subimos.',
                en: 'Same frame, same hour, same light. If the photo looks the same before and after, we don\u2019t post it.'
              }, lang)}
            </p>
          </div>
        </section>

        {/* big split */}
        <section style={{ maxWidth: 1100, margin: '32px auto 0', padding: '0 36px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            <div>
              <div className="codex" style={{ color: 'var(--ink-muted)', marginBottom: 8 }}>{t({ es: 'ANTES', en: 'BEFORE' }, lang)}</div>
              <Slot label="BEFORE" sub={t(job.room, lang)} slotId={'ba-' + job.id + '-before'} style={{ aspectRatio: '4 / 3' }} />
            </div>
            <div>
              <div className="codex" style={{ color: 'var(--terracotta)', marginBottom: 8 }}>{t({ es: 'DESPUÉS', en: 'AFTER' }, lang)} · {job.paint}</div>
              <Slot label="AFTER" sub={t(job.room, lang)} slotId={'ba-' + job.id + '-after'} style={{ aspectRatio: '4 / 3' }} />
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--divider)', marginTop: 14 }}>
            {[
              { k: { es: 'OBRA', en: 'JOB' }, v: job.room },
              { k: { es: 'PINTURA',   en: 'PAINT' }, v: { es: job.paint, en: job.paint } },
              { k: { es: 'PLAZO',   en: 'DURATION' }, v: { es: job.days + ' días', en: job.days + ' days' } },
              { k: { es: 'FECHA',   en: 'WHEN' }, v: job.when },
            ].map((m, i) => (
              <div key={i} style={{ borderRight: i < 3 ? '1px solid var(--divider)' : 'none', padding: '14px 16px' }}>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t(m.k, lang)}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 15, marginTop: 4 }}>{t(m.v, lang)}</div>
              </div>
            ))}
          </div>
        </section>

        {/* thumbnail strip */}
        <section style={{ maxWidth: 1100, margin: '34px auto 0', padding: '0 36px' }}>
          <Eyebrow>{t({ es: 'Más trabajos', en: 'More work' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 12 }}>
            {BA_JOBS.map((j, i) => (
              <button key={j.id} onClick={() => setActive(i)} style={{
                background: 'transparent', border: 0, padding: 0, cursor: 'pointer', textAlign: 'left',
              }}>
                <div style={{
                  position: 'relative',
                  outline: i === active ? '2px solid var(--ink)' : 'none',
                  outlineOffset: 2,
                }}>
                  <Slot label="THUMB" sub={t(j.room, lang)} slotId={'ba-' + j.id + '-thumb'} style={{ aspectRatio: '4 / 3' }} />
                  {i === active && (
                    <div style={{
                      position: 'absolute', top: 6, left: 6,
                      background: 'var(--ink)', color: 'var(--paper)',
                      padding: '2px 8px',
                      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em',
                    }}>{t({ es: 'VIENDO', en: 'VIEWING' }, lang)}</div>
                  )}
                </div>
                <div style={{ marginTop: 8, fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--ink)' }}>{t(j.room, lang)}</div>
                <div className="codex" style={{ marginTop: 2, color: 'var(--ink-muted)' }}>{j.paint}</div>
              </button>
            ))}
          </div>
        </section>

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

/* ── 404 — quiet paper-grammar ────────────────────────────── */

function NotFoundPage() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = ATOMS6;
  return (
    <div className="page">
      <Nav active="" surface="dreamvalley" />
      <div className="page-scroll hide-scroll" style={{ display: 'grid', placeItems: 'center' }}>
        <section style={{ maxWidth: 760, margin: '0 auto', padding: '60px 36px', textAlign: 'center' }}>
          <div className="display tab" style={{
            fontSize: 220, lineHeight: 0.9, color: 'var(--terracotta)',
            fontStyle: 'italic', fontWeight: 500, letterSpacing: '-0.04em',
          }}>404</div>
          <div className="codex" style={{ marginTop: 8, color: 'var(--ink-muted)' }}>
            DV · ERROR · 404 · {t({ es: 'PÁGINA NO ENCONTRADA', en: 'PAGE NOT FOUND' }, lang)}
          </div>
          <h1 className="display" style={{ fontSize: 48, margin: '20px auto 14px', maxWidth: 560, lineHeight: 1.05 }}>
            {t({
              es: 'Esta dirección no existe en la casa.',
              en: 'This address isn\u2019t on the house.'
            }, lang)}
          </h1>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 17, color: 'var(--ink-soft)', maxWidth: 540, margin: '0 auto', lineHeight: 1.55 }}>
            {t({
              es: 'Puede que el enlace tuviera un dedo en el medio. Puede que la página haya cambiado de nombre. Si veniste por algo específico, llámanos — te encontramos el camino correcto.',
              en: 'The link may have had a thumb on it. The page may have been renamed. If you came here for something specific, call us — we\u2019ll find the right path.'
            }, lang)}
          </p>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 10, marginTop: 26 }}>
            <a className="btn btn-primary">{t({ es: 'Volver al inicio →', en: 'Back to home →' }, lang)}</a>
            <a className="btn btn-ghost">(951) 555-0148</a>
          </div>

          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, textAlign: 'left' }}>
            {[
              { l: { es: 'Servicios',         en: 'Services' },        h: '/services' },
              { l: { es: 'Pedir estimado',    en: 'Request estimate' },h: '/estimate' },
              { l: { es: 'Entrar a mi cuenta',en: 'Sign in to account'},h: '/account' },
            ].map((r, i) => (
              <a key={i} className="card-quiet" style={{ padding: '14px 0', borderTop: '1px solid var(--divider)', borderBottom: 'none', textDecoration: 'none' }}>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{r.h}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 16, marginTop: 4, color: 'var(--ink)' }}>{t(r.l, lang)}</div>
              </a>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

/* ── DESIGN SPECIMEN — type & color reference ─────────────── */

function SwatchRow({ name, varName, hex, note }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '48px 1fr 130px 110px', gap: 14, alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--divider)' }}>
      <div style={{ width: 48, height: 36, background: hex, border: '1px solid var(--divider-strong)' }} />
      <div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 16 }}>{name}</div>
        {note && <div className="codex" style={{ marginTop: 2, color: 'var(--ink-muted)' }}>{note}</div>}
      </div>
      <div className="codex" style={{ color: 'var(--ink-soft)' }}>{varName}</div>
      <div className="codex tab" style={{ textAlign: 'right' }}>{hex.toUpperCase()}</div>
    </div>
  );
}

function DesignSpecimen() {
  const t = window.t;
  const { lang } = window.useLang();
  const { Nav, Foot, Eyebrow } = ATOMS6;
  return (
    <div className="page">
      <Nav active="about" surface="orinova" />
      <div className="page-scroll hide-scroll">

        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '44px 36px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'baseline', borderBottom: '1px solid var(--ink)', paddingBottom: 12 }}>
            <div className="codex">ORINOVA · SPECIMEN · NO. I</div>
            <div className="codex" style={{ textAlign: 'center' }}>{t({ es: 'TIPOGRAFÍA · COLOR · COMPONENTES', en: 'TYPE · COLOR · COMPONENTS' }, lang)}</div>
            <div className="codex" style={{ textAlign: 'right', color: 'var(--ink-muted)' }}>MMXXVI</div>
          </div>
          <h1 className="display" style={{ fontSize: 76, margin: '22px 0 12px', letterSpacing: '-0.025em', lineHeight: 0.95 }}>
            {t({ es: 'Aa Áá Ññ — paper & ink.', en: 'Aa Áá Ññ — paper & ink.' }, lang)}
          </h1>
          <p style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: 720, margin: 0, fontStyle: 'italic' }}>
            {t({
              es: 'El sistema visual de Orinova. Una página, todo a la mano.',
              en: 'The Orinova visual system. One page, everything within reach.'
            }, lang)}
          </p>
        </section>

        {/* TYPE */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>01 · {t({ es: 'Tipografía', en: 'Typography' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--divider)', marginTop: 12 }}>

            <div style={{ borderRight: '1px solid var(--divider)', padding: '20px 22px 24px' }}>
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>SERIF · DISPLAY</div>
              <div className="display" style={{ fontSize: 76, lineHeight: 0.95, margin: '8px 0 10px' }}>Aa</div>
              <div className="codex" style={{ color: 'var(--ink-soft)' }}>FRAUNCES · OPSZ 144 · 500/600</div>
              <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5, marginTop: 10 }}>
                {t({ es: 'Encabezados, títulos, cifras. Tracking apretado.', en: 'Headings, titles, figures. Tight tracking.' }, lang)}
              </p>
            </div>

            <div style={{ borderRight: '1px solid var(--divider)', padding: '20px 22px 24px' }}>
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>SANS · BODY</div>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 76, lineHeight: 0.95, fontWeight: 500, margin: '8px 0 10px' }}>Aa</div>
              <div className="codex" style={{ color: 'var(--ink-soft)' }}>INTER · 400/500/600/700</div>
              <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5, marginTop: 10 }}>
                {t({ es: 'Texto corrido, UI, formularios. Apertura ligera.', en: 'Body, UI, forms. Lightly open.' }, lang)}
              </p>
            </div>

            <div style={{ padding: '20px 22px 24px' }}>
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>MONO · CODEX</div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 64, lineHeight: 0.95, margin: '8px 0 10px' }}>Aa</div>
              <div className="codex" style={{ color: 'var(--ink-soft)' }}>JETBRAINS MONO · 400/500</div>
              <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5, marginTop: 10 }}>
                {t({ es: 'Etiquetas, códigos, mayúsculas, números tabulares.', en: 'Labels, codes, all-caps, tabular figures.' }, lang)}
              </p>
            </div>
          </div>

          {/* type scale */}
          <div style={{ marginTop: 24, borderTop: '1px solid var(--divider)', paddingTop: 18 }}>
            <Eyebrow>{t({ es: 'Escala display', en: 'Display scale' }, lang)}</Eyebrow>
            <div style={{ marginTop: 6 }}>
              {[
                { px: 96, l: 'DISPLAY/2XL' },
                { px: 64, l: 'DISPLAY/XL' },
                { px: 44, l: 'DISPLAY/LG' },
                { px: 28, l: 'DISPLAY/MD' },
                { px: 18, l: 'BODY/SERIF' },
                { px: 14, l: 'BODY/SANS' },
                { px: 10.5, l: 'CODEX' },
              ].map((row, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '160px 1fr 70px',
                  alignItems: 'baseline', borderBottom: '1px solid var(--divider)',
                  padding: '10px 0', gap: 16,
                }}>
                  <div className="codex" style={{ color: 'var(--ink-muted)' }}>{row.l}</div>
                  <div style={{
                    fontFamily: row.l.startsWith('DISPLAY') ? 'var(--serif)' : (row.l === 'CODEX' ? 'var(--mono)' : (row.l === 'BODY/SERIF' ? 'var(--serif)' : 'var(--sans)')),
                    fontSize: row.px,
                    lineHeight: row.px > 30 ? 1 : 1.4,
                    fontWeight: row.l.startsWith('DISPLAY') ? 500 : 400,
                    letterSpacing: row.l === 'CODEX' ? '0.18em' : (row.l.startsWith('DISPLAY') ? '-0.02em' : 'normal'),
                    textTransform: row.l === 'CODEX' ? 'uppercase' : 'none',
                    color: 'var(--ink)',
                  }}>
                    {t({ es: 'Trabajo de oficio, hecho bien.', en: 'Trade work, done right.' }, lang)}
                  </div>
                  <div className="codex tab" style={{ textAlign: 'right' }}>{row.px}px</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* COLOR */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>02 · {t({ es: 'Color', en: 'Color' }, lang)}</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, marginTop: 12 }}>
            <div>
              <div className="codex" style={{ color: 'var(--ink-muted)', marginBottom: 4 }}>{t({ es: 'PAPEL / TINTA', en: 'PAPER / INK' }, lang)}</div>
              <SwatchRow name={t({ es: 'Papel',          en: 'Paper' }, lang)}        varName="--paper"          hex="#F5F0E8" />
              <SwatchRow name={t({ es: 'Papel elevado',  en: 'Paper elevated' }, lang)} varName="--paper-elev." hex="#FAF6EF" />
              <SwatchRow name={t({ es: 'Papel crema',    en: 'Paper cream' }, lang)}  varName="--paper-cream"   hex="#EFE9DD" />
              <SwatchRow name={t({ es: 'Tinta',          en: 'Ink' }, lang)}          varName="--ink"            hex="#1A1A1A" />
              <SwatchRow name={t({ es: 'Tinta suave',    en: 'Ink soft' }, lang)}     varName="--ink-soft"       hex="#3F3F3F" />
              <SwatchRow name={t({ es: 'Tinta apagada',  en: 'Ink muted' }, lang)}    varName="--ink-muted"      hex="#6B6B6B" />
            </div>
            <div>
              <div className="codex" style={{ color: 'var(--ink-muted)', marginBottom: 4 }}>{t({ es: 'ACENTOS', en: 'ACCENTS' }, lang)}</div>
              <SwatchRow name="Olive"          varName="--olive"          hex="#2D4A1F" note={t({ es: 'Botones, énfasis ', en: 'Buttons, emphasis' }, lang)} />
              <SwatchRow name="Olive hover"    varName="--olive-hover"    hex="#1F3415" />
              <SwatchRow name="Terracotta"     varName="--terracotta"     hex="#C5503E" note={t({ es: 'Llamada, marcador', en: 'Call to action' }, lang)} />
              <SwatchRow name="Terracotta hover" varName="--terracotta-hover" hex="#A0402F" />
              <SwatchRow name="Dirt"           varName="--dirt"           hex="#6B4A2B" note={t({ es: 'Sombra Dirt Press', en: 'Dirt Press shadow' }, lang)} />
              <SwatchRow name="Dust"           varName="--dust"           hex="#C9BFA8" />
            </div>
          </div>
        </section>

        {/* COMPONENTS */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <Eyebrow>03 · {t({ es: 'Componentes', en: 'Components' }, lang)}</Eyebrow>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 14 }}>

            <div className="card">
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'BOTONES', en: 'BUTTONS' }, lang)}</div>
              <div style={{ display: 'flex', gap: 10, marginTop: 12, flexWrap: 'wrap' }}>
                <a className="btn btn-primary">{t({ es: 'Primario', en: 'Primary' }, lang)}</a>
                <a className="btn btn-call">{t({ es: 'Llamar', en: 'Call' }, lang)}</a>
                <a className="btn btn-ghost">{t({ es: 'Fantasma', en: 'Ghost' }, lang)}</a>
              </div>
              <div style={{ marginTop: 16, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                <span className="badge"><span className="dot" />{t({ es: 'En obra', en: 'On site' }, lang)}</span>
                <span className="badge">CSLB #1098432</span>
                <span className="badge">SPRAT L1</span>
              </div>
            </div>

            <div className="card">
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'CAMPO', en: 'FIELD' }, lang)}</div>
              <div className="field" style={{ marginTop: 12 }}>
                <label className="field-label">{t({ es: 'NOMBRE', en: 'NAME' }, lang)}</label>
                <input className="field-input" defaultValue="María R." />
              </div>
            </div>

            <div className="card">
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'PASTILLA DE IDIOMA', en: 'LANGUAGE PILL' }, lang)}</div>
              <div style={{ marginTop: 12, display: 'flex', gap: 12, alignItems: 'center' }}>
                <span className="lang-pill">
                  <button className="is-active">ES</button>
                  <button>EN</button>
                </span>
                <span className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'sin recargar', en: 'no reload' }, lang)}</span>
              </div>
            </div>

            <div className="card">
              <div className="codex" style={{ color: 'var(--ink-muted)' }}>{t({ es: 'MARCA SOSTENIDA', en: 'HELD-SILENCE MARK' }, lang)}</div>
              <div style={{ marginTop: 12, fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.4 }}>
                {t({ es: 'el silencio importa', en: 'silence matters' }, lang)} <span className="hs" /> {t({ es: 'tanto como la voz.', en: 'as much as voice.' }, lang)}
              </div>
            </div>

          </div>
        </section>

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

window.OrinovaPages6 = {
  PrinciplesManifesto,
  PressOnePager,
  BeforeAfterGallery,
  NotFoundPage,
  DesignSpecimen,
};