/* Orinova Portal — pages17.jsx
   The editor's pass. Three new operational pieces:

     · EditorialMemo       — the cut, named: what stays, what is set aside
     · ContactPage         — phone, hours, address, "send us a note" form
     · BookingConfirmation — the page after they pick a slot

   These three exist because the operational portal had real holes
   the specimens were hiding. The memo names the cut publicly.
*/

/* ─────────────────────────────────────────────────────────
 * 01 · EDITORIAL MEMO
 *   A real memo — TO / FROM / DATE / RE — that explains the
 *   editorial cut. Two-column ledger of operational vs set-aside.
 *   This is the cover artboard of the lean operational portal.
 * ───────────────────────────────────────────────────────── */

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

  const keeps = [
    { es: 'Inicio · una versión',                 en: 'Home · one direction' },
    { es: 'Servicios · cinco páginas reales',     en: 'Services · five real pages' },
    { es: 'Estudio de color',                     en: 'Color Studio' },
    { es: 'Galería · antes y después',            en: 'Gallery · before & after' },
    { es: 'Reseñas · cobertura · ayuda',          en: 'Reviews · coverage · FAQ' },
    { es: 'Cuadrilla · empleos · financiamiento', en: 'Crew · careers · financing' },
    { es: 'Realtors · una página',                en: 'Realtors · one page' },
    { es: 'Acerca de · contacto · 404',           en: 'About · contact · 404' },
    { es: 'Intake → calendario → confirmación',   en: 'Intake → calendar → confirmation' },
    { es: 'Estimado · factura · garantía',        en: 'Estimate · invoice · warranty' },
    { es: 'Correos transaccionales',              en: 'Transactional emails' },
    { es: 'Cuenta · panel · detalle de obra',     en: 'Account · dashboard · job detail' },
    { es: 'Realtor dashboard · referidos',        en: 'Realtor dashboard · referrals' },
    { es: 'Despacho · hoja de obra',              en: 'Dispatch · job sheet' },
    { es: 'Móvil · catorce pantallas reales',     en: 'Mobile · fourteen real screens' },
  ];

  const setAside = [
    { es: 'Inicio · variantes B y C',             en: 'Home · variants B and C',           note: { es: 'Tres direcciones confunden al cliente.', en: 'Three directions confuse the buyer.' } },
    { es: 'DreamFinance · marca paralela',         en: 'DreamFinance · split brand',         note: { es: 'Una sola marca cobra mejor.',          en: 'One brand collects better.' } },
    { es: 'Realtor Alliance · página duplicada',   en: 'Realtor Alliance · duplicate',       note: { es: 'Realtors ya lo cubre.',                en: 'Realtors already covers it.' } },
    { es: 'Bienvenida multilingüe',                 en: 'Multilingual welcome',               note: { es: 'El conmutador ES/EN lo hace.',          en: 'The ES/EN toggle handles it.' } },
    { es: 'Hoja de prensa',                         en: 'Press one-pager',                    note: { es: 'Cuando haya prensa, hablamos.',         en: 'When there is press, we\u2019ll talk.' } },
    { es: 'Property Passport',                      en: 'Property Passport',                  note: { es: 'No es producto todavía.',               en: 'Not yet a product.' } },
    { es: 'Home Health Membership',                 en: 'Home Health Membership',             note: { es: 'No es producto todavía.',               en: 'Not yet a product.' } },
    { es: 'Carta del fundador',                     en: 'Founder note',                       note: { es: 'Una línea cabe en Acerca de.',         en: 'One line fits in About.' } },
    { es: 'Manifiesto de principios',               en: 'Principles manifesto',               note: { es: 'Se siente, no se proclama.',            en: 'Felt, not proclaimed.' } },
    { es: 'Móvil · truism · broadside',             en: 'Mobile · truism · broadside',        note: { es: 'Carteles, no pantallas.',               en: 'Posters, not screens.' } },
    { es: 'Plate XII Mu · de la sombra',            en: 'Plate XII Mu · Shadows',             note: { es: 'Editorial, no conversión.',             en: 'Editorial, not conversion.' } },
    { es: '36 planchas · concejos · objetos',       en: '36 plates · councils · objects',     note: { es: 'Trasladadas a Orinova Editorial Vol. I.', en: 'Moved to Orinova Editorial Vol. I.' } },
  ];

  return (
    <div className="page" style={{ background: 'var(--paper-form)' }}>
      <div className="page-scroll" style={{ padding: '28px 64px 36px' }}>
        {/* memo masthead */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto 1fr',
          alignItems: 'baseline',
          borderBottom: '2.5px solid var(--ink)', paddingBottom: 8,
        }}>
          <div className="codex">Orinova · Editorial Memo · No. I</div>
          <div className="display" style={{
            fontStyle: 'italic', fontWeight: 600, fontSize: 16,
            textAlign: 'center', letterSpacing: '-0.005em',
            color: 'var(--terracotta)',
          }}>
            {t({ es: 'CONFIDENCIAL · CIRCULACIÓN INTERNA', en: 'CONFIDENTIAL · INTERNAL CIRCULATION' }, lang)}
          </div>
          <div className="codex codex--right">Riverside · {(new Date()).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</div>
        </div>

        {/* memo header — TO / FROM / DATE / RE */}
        <div style={{
          marginTop: 16, padding: 16,
          background: 'var(--paper-cream)',
          border: '1px solid var(--divider-strong)',
          display: 'grid', gridTemplateColumns: 'auto 1fr auto 1fr', gap: '4px 14px',
          fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: 'var(--ink-muted)', lineHeight: 1.55,
        }}>
          <div>TO</div>
          <div style={{ color: 'var(--ink)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--serif)', fontSize: 13 }}>
            {t({ es: 'Erick Solano · capataz', en: 'Erick Solano · foreman' }, lang)}
          </div>
          <div>FROM</div>
          <div style={{ color: 'var(--ink)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--serif)', fontSize: 13 }}>
            {t({ es: 'La mesa editorial', en: 'The editorial table' }, lang)}
          </div>

          <div>DATE</div>
          <div style={{ color: 'var(--ink)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--serif)', fontSize: 13 }}>
            {t({ es: '19 de mayo, 2026', en: 'May 19, 2026' }, lang)}
          </div>
          <div>RE</div>
          <div style={{ color: 'var(--ink)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--serif)', fontSize: 13 }}>
            {t({ es: 'Lo que se queda · lo que se aparta', en: 'What stays · what is set aside' }, lang)}
          </div>
        </div>

        {/* title */}
        <div style={{ padding: '22px 0 8px', display: 'grid', gridTemplateColumns: '1fr 320px', alignItems: 'baseline', gap: 36 }}>
          <h1 className="display" style={{ margin: 0, fontSize: 60, lineHeight: 0.96 }}>
            {t({
              es: <>Un portal hermoso<br/><em style={{ fontStyle: 'italic', fontWeight: 500 }}>no es un portal operativo.</em></>,
              en: <>A beautiful portal<br/><em style={{ fontStyle: 'italic', fontWeight: 500 }}>is not an operational portal.</em></>,
            }, lang)}
          </h1>
          <p style={{
            margin: 0, fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 15, color: 'var(--ink-soft)', textWrap: 'pretty',
          }}>
            {t({
              es: 'Hemos hecho un museo. Es hora de hacer un negocio. Esta memo nombra cada corte, públicamente.',
              en: 'We have made a museum. It is time to make a business. This memo names each cut, publicly.',
            }, lang)}
          </p>
        </div>

        {/* body — three paragraphs */}
        <div style={{
          paddingTop: 12, paddingBottom: 16,
          fontFamily: 'var(--serif)', fontSize: 14.5,
          color: 'var(--ink)', lineHeight: 1.55, textWrap: 'pretty',
          columnCount: 2, columnGap: 40, columnRule: '1px solid var(--divider)',
          maxWidth: '100%',
        }}>
          <p style={{ marginTop: 0, marginBottom: 14 }}>
            {t({
              es: 'Hemos construido cincuenta y tres pantallas. Treinta y seis son planchas — Neurath, Du Bois, LeWitt, Becher, Tufte, Hara, la Lotería de la Cuadrilla, la Calavera, la partitura, los carteles activistas, los herbarios, el dechado bordado, la canción de cuna. Son hermosas. Algunas son lo mejor que esta cuadrilla ha hecho. Pero no contestan el teléfono. No cierran un estimado. No firman un contrato.',
              en: 'We have built fifty-three screens. Thirty-six of them are plates — Neurath, Du Bois, LeWitt, Becher, Tufte, Hara, the Lotería de la Cuadrilla, the Calavera, the score, the activist broadsides, the herbaria, the cross-stitched sampler, the lullaby. They are beautiful. Some are the best work this crew has done. But they do not answer the phone. They do not close an estimate. They do not sign a contract.',
            }, lang)}
          </p>
          <p style={{ marginBottom: 14 }}>
            {t({
              es: 'Cuando un cliente nuevo llega a un portal, busca tres cosas, en este orden: (1) ¿hacen lo que necesito?, (2) ¿son confiables?, (3) ¿cómo los contrato? Un homenaje a Tanizaki no contesta ninguna. La galería de antes y después contesta las tres. Un homenaje a Bruno Munari es delicioso; un calendario para agendar la visita cierra la venta. La pintura sirve a la vida, no al revés — y un portal sirve al oficio, no al revés.',
              en: 'When a new client arrives at a portal, they want three things, in this order: (1) do you do what I need, (2) are you trustworthy, (3) how do I hire you. A Tanizaki tribute answers none. The before-and-after gallery answers all three. A Bruno Munari homage is delicious; a calendar that schedules the visit closes the sale. Paint serves the life, not the other way around — and a portal serves the trade, not the other way around.',
            }, lang)}
          </p>
          <p style={{ marginBottom: 0 }}>
            {t({
              es: 'Por lo tanto: el portal operativo guarda 22 pantallas. Las 36 planchas pasan a Orinova Editorial · Vol. I, una publicación trimestral que esta cuadrilla edita en serio y vende a quien la quiera. El museo se mueve a su propio edificio. La oficina se queda con cinco pisos y un teléfono que suena.',
              en: 'Therefore: the operational portal keeps 22 screens. The 36 plates move to Orinova Editorial · Vol. I, a quarterly publication this crew edits seriously and sells to those who want it. The museum moves to its own building. The office keeps five floors and a telephone that rings.',
            }, lang)}
          </p>
        </div>

        {/* the ledger — two columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, paddingTop: 12 }}>
          {/* KEEPS */}
          <div>
            <div style={{
              paddingBottom: 8, borderBottom: '2px solid var(--ink)',
              display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline',
            }}>
              <div className="codex" style={{ color: 'var(--ink)' }}>
                {t({ es: 'OPERATIVO · SE QUEDA', en: 'OPERATIONAL · STAYS' }, lang)}
              </div>
              <div style={{
                fontFamily: 'var(--serif)', fontStyle: 'italic',
                fontSize: 13, color: 'var(--terracotta)', fontWeight: 500,
              }}>22 {t({ es: 'pantallas', en: 'screens' }, lang)}</div>
            </div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {keeps.map((k, i) => (
                <li key={i} style={{
                  display: 'grid', gridTemplateColumns: '20px 1fr', gap: 8,
                  padding: '8px 0', borderBottom: i < keeps.length - 1 ? '1px dotted var(--divider-strong)' : 'none',
                }}>
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--olive)', fontWeight: 600,
                  }}>✓</span>
                  <span style={{ fontFamily: 'var(--serif)', fontSize: 13.5, color: 'var(--ink)' }}>
                    {k[lang]}
                  </span>
                </li>
              ))}
            </ul>
          </div>

          {/* SET ASIDE */}
          <div>
            <div style={{
              paddingBottom: 8, borderBottom: '2px solid var(--ink)',
              display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline',
            }}>
              <div className="codex" style={{ color: 'var(--ink)' }}>
                {t({ es: 'EDITORIAL · SE APARTA', en: 'EDITORIAL · SET ASIDE' }, lang)}
              </div>
              <div style={{
                fontFamily: 'var(--serif)', fontStyle: 'italic',
                fontSize: 13, color: 'var(--ink-muted)', fontWeight: 500,
              }}>{t({ es: 'a Editorial Vol. I', en: 'to Editorial Vol. I' }, lang)}</div>
            </div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {setAside.map((k, i) => (
                <li key={i} style={{
                  display: 'grid', gridTemplateColumns: '20px 1fr', gap: 8,
                  padding: '8px 0', borderBottom: i < setAside.length - 1 ? '1px dotted var(--divider-strong)' : 'none',
                }}>
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-muted)', fontWeight: 600,
                  }}>—</span>
                  <span>
                    <span style={{ fontFamily: 'var(--serif)', fontSize: 13.5, color: 'var(--ink)' }}>
                      {k[lang]}
                    </span>
                    <div style={{
                      fontFamily: 'var(--serif)', fontStyle: 'italic',
                      fontSize: 11.5, color: 'var(--ink-soft)', marginTop: 2,
                    }}>{k.note[lang]}</div>
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* signature block */}
        <div style={{
          marginTop: 24, paddingTop: 16, borderTop: '2.5px solid var(--ink)',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28,
        }}>
          <div>
            <div className="codex">{t({ es: 'Esta memo fue informada por la lectura de:', en: 'This memo was informed by reading:' }, lang)}</div>
            <ul style={{
              margin: '8px 0 0', padding: 0, listStyle: 'none',
              fontFamily: 'var(--serif)', fontStyle: 'italic',
              fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.55,
            }}>
              <li>· Vignelli, M. — <span style={{ fontStyle: 'normal' }}>The Vignelli Canon</span>, 2008.</li>
              <li>· Monteiro, M. — <span style={{ fontStyle: 'normal' }}>Design Is a Job</span>, 2012.</li>
              <li>· Kissane, E. — <span style={{ fontStyle: 'normal' }}>The Elements of Content Strategy</span>, 2011.</li>
              <li>· Brown, T. — three decades of editorial cuts at Vanity Fair, The New Yorker.</li>
              <li>· Krug, S. — <span style={{ fontStyle: 'normal' }}>Don\u2019t Make Me Think</span>, 2000.</li>
            </ul>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{
              fontFamily: 'var(--serif)', fontStyle: 'italic',
              fontSize: 18, color: 'var(--ink)',
              borderBottom: '1px solid var(--ink)', display: 'inline-block',
              paddingBottom: 2, transform: 'rotate(-2deg) translateY(-2px)',
            }}>The Editorial Table</div>
            <div style={{
              marginTop: 12,
              fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: 'var(--ink-muted)',
            }}>
              <div>{t({ es: 'Vigencia · inmediata', en: 'Effective · immediately' }, lang)}</div>
              <div>{t({ es: 'Aplicado en · Orinova Portal · Operativo', en: 'Applied in · Orinova Portal · Operational' }, lang)}</div>
              <div>{t({ es: 'Revisión · trimestral', en: 'Reviewed · quarterly' }, lang)}</div>
            </div>
          </div>
        </div>

        {/* the final line, big */}
        <div style={{
          marginTop: 24, padding: 22,
          background: 'var(--ink)', color: 'var(--paper-cream)',
          fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22,
          textAlign: 'center', letterSpacing: '-0.005em',
          lineHeight: 1.3,
        }}>
          {t({
            es: '“Si una página no contesta el teléfono, no merece estar en la página de inicio.”',
            en: '\u201cIf a page does not answer the phone, it does not belong on the homepage.\u201d',
          }, lang)}
        </div>
      </div>
      <div className="page-folio">Memo · No. I · the cut</div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
 * 02 · CONTACT PAGE
 *   Phone, hours, address, "send us a note." The page the
 *   editor noticed was missing. Hierarchy of response time.
 * ───────────────────────────────────────────────────────── */

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

  const hours = [
    { day: { es: 'Lunes a viernes', en: 'Mon – Fri' }, time: '7:00 AM — 6:00 PM' },
    { day: { es: 'Sábado',          en: 'Saturday'  }, time: '8:00 AM — 2:00 PM' },
    { day: { es: 'Domingo',         en: 'Sunday'    }, time: { es: 'cerrado', en: 'closed' } },
  ];

  const channels = [
    {
      label: { es: 'Llamada · más rápido',         en: 'Phone · fastest' },
      value: '(951) 555·0142',
      time:  { es: 'contestamos en 5 min · hábil', en: 'we answer in 5 min · business hours' },
      cta:   { es: 'Marcar',                        en: 'Call now' },
      tone:  'terracotta',
    },
    {
      label: { es: 'Mensaje de texto',              en: 'Text message' },
      value: '(951) 555·0142',
      time:  { es: 'contestamos en 15 min',         en: 'we reply in 15 min' },
      cta:   { es: 'Mandar mensaje',                en: 'Send text' },
      tone:  'olive',
    },
    {
      label: { es: 'Correo · cosas largas',         en: 'Email · long things' },
      value: 'hola@orinova.us',
      time:  { es: 'contestamos en un día',         en: 'we reply within a day' },
      cta:   { es: 'Abrir cliente',                  en: 'Open mail' },
      tone:  'ink',
    },
  ];

  // a small SVG location pin map of the Inland Empire — schematic
  const TinyMap = () => (
    <svg viewBox="0 0 360 220" width="100%" style={{ display: 'block' }} aria-hidden>
      <rect width="360" height="220" fill="#EFE6D2" />
      {/* roads */}
      <path d="M0 110 L180 110 L210 140 L360 130" stroke="var(--ink-muted)" strokeWidth="0.8" fill="none" />
      <path d="M180 0 L180 110 L210 140 L210 220" stroke="var(--ink-muted)" strokeWidth="0.8" fill="none" />
      <path d="M40 220 L120 130 L210 130" stroke="var(--ink-faint)" strokeWidth="0.6" fill="none" strokeDasharray="3 3" />
      {/* cities as small dots + labels */}
      {[
        { x: 88,  y: 124, name: 'Riverside',     primary: true },
        { x: 188, y: 92,  name: 'San Bernardino' },
        { x: 232, y: 144, name: 'Moreno Valley' },
        { x: 268, y: 90,  name: 'Redlands' },
        { x: 124, y: 168, name: 'Corona' },
        { x: 312, y: 168, name: 'Hemet' },
      ].map((c, i) => (
        <g key={i}>
          <circle cx={c.x} cy={c.y} r={c.primary ? 5 : 3} fill={c.primary ? 'var(--terracotta)' : 'var(--ink)'} />
          {c.primary && <circle cx={c.x} cy={c.y} r={12} fill="none" stroke="var(--terracotta)" strokeWidth="0.6" />}
          <text x={c.x + 8} y={c.y + 3} fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1" fill="var(--ink-soft)" style={{ textTransform: 'uppercase' }}>{c.name}</text>
        </g>
      ))}
      {/* compass */}
      <g transform="translate(330, 30)">
        <circle cx="0" cy="0" r="12" fill="var(--paper-form)" stroke="var(--ink)" strokeWidth="0.8" />
        <path d="M0 -12 L3 0 L0 12 L-3 0 Z" fill="var(--ink)" />
        <text x="0" y="-16" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="var(--ink)">N</text>
      </g>
      {/* office X-mark with caption */}
      <g transform="translate(88, 124)">
        <line x1="-8" y1="-22" x2="0" y2="-12" stroke="var(--terracotta)" strokeWidth="1.4" />
        <text x="-12" y="-26" textAnchor="end" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="11" fill="var(--ink)">our office</text>
      </g>
    </svg>
  );

  // simple nav strip to match other pages — uses standard nav class
  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: 'Galería', en: 'Gallery' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Reseñas', en: 'Reviews' }, lang)}</a>
            <a className="nav-link is-active">{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">
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '50px 36px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline', borderBottom: '1px solid var(--ink)', paddingBottom: 10 }}>
            <div className="eyebrow">{t({ es: 'Hablemos · todos los días', en: 'Let\u2019s talk · every day' }, lang)}</div>
            <div className="codex" style={{ color: 'var(--ink-muted)' }}>DV · CONTACT · 01</div>
          </div>
          <h1 className="display" style={{ marginTop: 14, fontSize: 88, lineHeight: 0.96, letterSpacing: '-0.025em', maxWidth: 900 }}>
            {t({
              es: <>El teléfono es la forma más rápida.<br/><em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--terracotta)' }}>Contestamos.</em></>,
              en: <>The phone is the fastest way.<br/><em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--terracotta)' }}>We answer.</em></>,
            }, lang)}
          </h1>
          <p style={{
            marginTop: 14, fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 17, color: 'var(--ink-soft)', maxWidth: 660, textWrap: 'pretty',
          }}>
            {t({
              es: 'No hay árbol de teléfono. No hay chatbot. Una persona contesta, en español o en inglés, dentro de cinco minutos durante horas hábiles. Es así desde 2014.',
              en: 'No phone tree. No chatbot. A human picks up, in Spanish or English, within five minutes during business hours. It has been this way since 2014.',
            }, lang)}
          </p>
        </section>

        {/* three channels */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px' }}>
          <div className="eyebrow">{t({ es: 'Tres formas · una jerarquía', en: 'Three ways · one hierarchy' }, lang)}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 14 }}>
            {channels.map((c, i) => {
              const accent = c.tone === 'terracotta' ? 'var(--terracotta)' : (c.tone === 'olive' ? 'var(--olive)' : 'var(--ink)');
              return (
                <div key={i} style={{
                  border: '1px solid var(--divider-strong)',
                  background: i === 0 ? 'var(--paper-cream)' : 'var(--paper-elevated)',
                  padding: 22,
                  display: 'grid', gridTemplateRows: 'auto auto 1fr auto', gap: 6,
                  minHeight: 220,
                }}>
                  <div className="codex" style={{ color: accent }}>
                    {String(i + 1).padStart(2, '0')} · {c.label[lang]}
                  </div>
                  <div style={{
                    fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 28,
                    letterSpacing: '-0.015em', color: 'var(--ink)',
                  }}>{c.value}</div>
                  <div style={{
                    fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 14,
                    color: 'var(--ink-soft)',
                  }}>{c.time[lang]}</div>
                  <button className="btn" style={{
                    background: accent, color: '#fff',
                    padding: '10px 14px', fontSize: 13, justifySelf: 'start',
                  }}>
                    {c.cta[lang]} →
                  </button>
                </div>
              );
            })}
          </div>
        </section>

        {/* hours + address + map */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 32, alignItems: 'start' }}>
          <div>
            <div className="eyebrow">{t({ es: 'Horas de trabajo', en: 'Working hours' }, lang)}</div>
            <dl style={{ margin: '12px 0 0' }}>
              {hours.map((h, i) => (
                <div key={i} className="spec-row" style={{ gridTemplateColumns: '140px 1fr' }}>
                  <dt>{h.day[lang]}</dt>
                  <dd style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: 0 }}>
                    {typeof h.time === 'string' ? h.time : h.time[lang]}
                  </dd>
                </div>
              ))}
            </dl>

            <div className="eyebrow" style={{ marginTop: 24 }}>{t({ es: 'Dirección', en: 'Address' }, lang)}</div>
            <div style={{
              marginTop: 8, fontFamily: 'var(--serif)', fontSize: 16,
              color: 'var(--ink)', lineHeight: 1.5,
            }}>
              Orinova · Operating Group<br/>
              4321 University Avenue<br/>
              Riverside, CA 92501
            </div>
            <div style={{
              marginTop: 10, fontFamily: 'var(--mono)', fontSize: 10.5,
              letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-muted)',
            }}>
              {t({ es: 'CSLB #1098231 · C-33', en: 'CSLB #1098231 · C-33' }, lang)}
            </div>

            <div className="eyebrow" style={{ marginTop: 24 }}>{t({ es: 'No nos visite sin avisar', en: 'Please don\u2019t drop in unannounced' }, lang)}</div>
            <p style={{
              margin: '6px 0 0', fontFamily: 'var(--serif)', fontStyle: 'italic',
              fontSize: 13.5, color: 'var(--ink-soft)', textWrap: 'pretty',
            }}>
              {t({
                es: 'La cuadrilla está en obra. La oficina queda sola la mayor parte del día. Llame antes y abrimos.',
                en: 'The crew is on the jobsite. The office sits empty most of the day. Call first and we\u2019ll open it.',
              }, lang)}
            </p>
          </div>

          <div>
            <div className="eyebrow">{t({ es: 'Dónde quedamos · Inland Empire', en: 'Where we are · Inland Empire' }, lang)}</div>
            <div style={{ marginTop: 8, border: '1px solid var(--divider-strong)' }}>
              <TinyMap />
            </div>
            <div style={{
              marginTop: 10,
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
              fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--ink-muted)',
            }}>
              <div>{t({ es: 'Cobertura · 35 mi', en: 'Coverage · 35 mi' }, lang)} · {t({ es: 'Tiempo a obra · 1 hr', en: 'Drive to job · 1 hr' }, lang)}</div>
              <div style={{ textAlign: 'right' }}>{t({ es: 'Ver mapa completo →', en: 'See full map →' }, lang)}</div>
            </div>
          </div>
        </section>

        {/* the note form */}
        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '32px 36px', background: 'var(--paper-elevated)', borderTop: '1px solid var(--divider)', borderBottom: '1px solid var(--divider)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 36, alignItems: 'start' }}>
            <div>
              <div className="eyebrow">{t({ es: 'O · mándenos una nota', en: 'Or · send us a note' }, lang)}</div>
              <h2 className="display" style={{ marginTop: 8, fontSize: 36, lineHeight: 1 }}>
                {t({
                  es: 'No es urgente. Es para algo más largo.',
                  en: 'It\u2019s not urgent. It\u2019s for something longer.',
                }, lang)}
              </h2>
              <p style={{
                marginTop: 10, fontFamily: 'var(--serif)', fontStyle: 'italic',
                fontSize: 14, color: 'var(--ink-soft)', maxWidth: 460, textWrap: 'pretty',
              }}>
                {t({
                  es: 'Si es para agendar visita o cotizar una pared, llame mejor. Esta forma la leemos en la noche, después del jobsite.',
                  en: 'If it\u2019s to schedule a visit or price a wall, call instead. This form we read at night, after the jobsite.',
                }, lang)}
              </p>
            </div>
            <form data-dvt-form="contact" style={{ display: 'grid', gap: 12 }}>
              <input type="hidden" name="source_page" value="/contact" />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div className="field">
                  <label className="field-label" htmlFor="ctc-name">{t({ es: 'Nombre', en: 'Name' }, lang)}</label>
                  <input className="field-input" id="ctc-name" name="name" required autoComplete="name" placeholder={t({ es: 'su nombre', en: 'your name' }, lang)} />
                </div>
                <div className="field">
                  <label className="field-label" htmlFor="ctc-phone">{t({ es: 'Teléfono (opcional)', en: 'Phone (optional)' }, lang)}</label>
                  <input className="field-input" id="ctc-phone" name="phone" type="tel" autoComplete="tel" placeholder="(951) ..." />
                </div>
              </div>
              <div className="field">
                <label className="field-label" htmlFor="ctc-email">{t({ es: 'Correo', en: 'Email' }, lang)}</label>
                <input className="field-input" id="ctc-email" name="email" type="email" required autoComplete="email" placeholder="hola@correo.com" />
              </div>
              <div className="field">
                <label className="field-label" htmlFor="ctc-msg">{t({ es: 'Lo que quiere contarnos', en: 'What you want to tell us' }, lang)}</label>
                <textarea className="field-input" id="ctc-msg" name="message" required rows={5} style={{ resize: 'vertical' }} placeholder={t({ es: 'algo más largo que un teléfono', en: 'something longer than a phone call' }, lang)} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 12, paddingTop: 4 }}>
                <div style={{
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: 'var(--ink-muted)',
                }}>
                  {t({ es: 'No le mandaremos correos promocionales · nunca', en: 'We will never send you promotional email · ever' }, lang)}
                </div>
                <button className="btn btn-primary" type="submit" style={{ border: 0, cursor: 'pointer' }}>{t({ es: 'Mandar', en: 'Send' }, lang)} →</button>
              </div>
            </form>
          </div>
        </section>

        <footer className="foot">
          <div>© Orinova · Operating Group · MMXXVI · {t({ es: 'todos los derechos reservados', en: 'all rights reserved' }, lang)}</div>
          <div>{t({ es: 'Acerca de · Privacidad · Términos', en: 'About · Privacy · Terms' }, lang)}</div>
        </footer>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────────────────
 * 03 · BOOKING CONFIRMATION
 *   The page after ScheduleVisit. "You're booked." Reference
 *   number. What happens next. Add-to-calendar. Quiet ways to
 *   change. While-you-wait links. Printable.
 * ───────────────────────────────────────────────────────── */

function BookingConfirmation() {
  const t = window.t;
  const { lang } = window.useLang();
  const q = React.useMemo(() => {
    try {
      return new URLSearchParams(window.location.search);
    } catch (e) {
      return new URLSearchParams();
    }
  }, []);

  const next = [
    {
      n: '01',
      title: { es: 'Le mandamos un mensaje',          en: 'We send a text' },
      when:  { es: 'en cinco minutos',                en: 'within five minutes' },
      body:  { es: 'Con el día, la hora, el nombre del foreman y un teléfono que sí contesta.', en: 'With the day, the time, the foreman\u2019s name and a phone that actually picks up.' },
    },
    {
      n: '02',
      title: { es: 'Llamamos un día antes',           en: 'We call the day before' },
      when:  { es: 'a las 5 PM',                       en: 'at 5 PM' },
      body:  { es: 'Para confirmar que el horario aún sirve y para preguntar si hay perros o algo que cubrir.', en: 'To confirm the slot still works and ask if there are dogs or anything to cover.' },
    },
    {
      n: '03',
      title: { es: 'Llegamos cinco minutos antes',    en: 'We arrive five minutes early' },
      when:  { es: 'sin herramientas en la mano',      en: 'with empty hands' },
      body:  { es: 'Saludamos por su nombre, caminamos juntos a la pared, escuchamos, anotamos a lápiz.', en: 'Greet you by name, walk to the wall together, listen, write one pencil note.' },
    },
  ];

  const refNum = q.get('ref') || 'DV-—';
  const visitDate = q.get('date');
  const visitWindow = q.get('window') || 'morning';
  const parsedDate = visitDate ? new Date(visitDate + 'T00:00:00.000Z') : null;
  const date = parsedDate && !isNaN(parsedDate.getTime())
    ? parsedDate.toLocaleDateString(lang === 'es' ? 'es-MX' : 'en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
    : (lang === 'es' ? 'fecha pendiente' : 'date pending');
  const time = visitWindow === 'afternoon' ? '1:00 — 4:00 PM' : visitWindow === 'evening' ? '4:00 — 6:00 PM' : '8:00 — 11:00 AM';

  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: 'Galería', en: 'Gallery' }, lang)}</a>
            <a className="nav-link is-active">{t({ es: 'Pedir estimado', en: 'Get an estimate' }, lang)}</a>
            <a className="nav-link">{t({ es: 'Contacto', en: 'Contact' }, 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 — the big confirmation */}
        <section style={{ maxWidth: 1100, margin: '0 auto', padding: '48px 36px 12px' }}>
          {/* breadcrumb of the flow */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, auto) 1fr', gap: 10, alignItems: 'center',
            paddingBottom: 12, borderBottom: '1px solid var(--divider)',
            fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-muted)',
          }}>
            {[
              { n: '01', l: { es: 'Estimado', en: 'Estimate' }, done: true },
              { n: '02', l: { es: 'Calendario', en: 'Schedule' }, done: true },
              { n: '03', l: { es: 'Confirmación', en: 'Confirmed' }, active: true },
              { n: '04', l: { es: 'Visita', en: 'Visit' } },
            ].map((s, i) => (
              <span key={i} style={{
                color: s.active ? 'var(--terracotta)' : (s.done ? 'var(--ink)' : 'var(--ink-faint)'),
              }}>{s.done && '✓ '}{s.n} · {s.l[lang]}</span>
            ))}
            <span />
          </div>

          <div className="eyebrow" style={{ marginTop: 16, color: 'var(--terracotta)' }}>
            {t({ es: 'Confirmado · {ref}', en: 'Confirmed · {ref}' }, lang).replace('{ref}', refNum)}
          </div>
          <h1 className="display" style={{ marginTop: 6, fontSize: 112, lineHeight: 0.92, letterSpacing: '-0.03em' }}>
            {t({
              es: <>Quedó agendado.<br /><em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--terracotta)' }}>Nos vemos {date.split(',')[0]}.</em></>,
              en: <>You\u2019re booked.<br /><em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--terracotta)' }}>See you {date.split(' ')[0]}.</em></>,
            }, lang)}
          </h1>
        </section>

        {/* the booking card + add to calendar */}
        <section style={{ maxWidth: 1100, margin: '32px auto 0', padding: '0 36px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 28, alignItems: 'start' }}>
          {/* the booking summary card */}
          <div style={{
            background: 'var(--paper-cream)', border: '1px solid var(--ink)', padding: 26,
            position: 'relative',
          }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline', borderBottom: '1.5px solid var(--ink)', paddingBottom: 8 }}>
              <div className="codex">{t({ es: 'Detalle de la visita', en: 'Visit details' }, lang)}</div>
              <div className="codex" style={{ color: 'var(--terracotta)' }}>{refNum}</div>
            </div>
            <dl style={{ margin: '14px 0 0' }}>
              {[
                { l: { es: 'Día y hora', en: 'Day & time' }, v: `${date} · ${time}` },
                { l: { es: 'Dirección', en: 'Address' },       v: '1402 Sycamore Way · Moreno Valley, CA' },
                { l: { es: 'Para qué', en: 'For' },            v: { es: 'Interior · sala, pasillo, dos cuartos · ~ 6 paredes', en: 'Interior · living, hallway, two bedrooms · ~ 6 walls' } },
                { l: { es: 'Foreman',  en: 'Foreman' },        v: 'DreamValley estimator' },
                { l: { es: 'Idioma',   en: 'Language' },       v: { es: 'español · inglés disponible', en: 'Spanish · English available' } },
                { l: { es: 'Costo de visita', en: 'Visit fee' }, v: { es: 'gratis', en: 'free' } },
              ].map((r, i) => (
                <div key={i} className="spec-row" style={{ gridTemplateColumns: '180px 1fr' }}>
                  <dt>{r.l[lang]}</dt>
                  <dd style={{ fontFamily: 'var(--serif)', fontSize: 14.5 }}>
                    {typeof r.v === 'string' ? r.v : r.v[lang]}
                  </dd>
                </div>
              ))}
            </dl>
            {/* italic confirmation footer */}
            <div style={{
              marginTop: 18, paddingTop: 14, borderTop: '1px dashed var(--ink)',
              display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline', gap: 12,
            }}>
              <div style={{
                fontFamily: 'var(--serif)', fontStyle: 'italic',
                fontSize: 13.5, color: 'var(--ink-soft)', textWrap: 'pretty',
              }}>
                {t({
                  es: 'La visita dura una hora. No se firma nada ese día — el estimado se manda al día siguiente, por escrito, sin presión.',
                  en: 'The visit lasts one hour. Nothing is signed that day — the estimate goes out the next day, in writing, no pressure.',
                }, lang)}
              </div>
              <button className="btn btn-ghost" style={{ padding: '8px 14px', fontSize: 12 }}>
                {t({ es: 'Imprimir', en: 'Print' }, lang)} ↗
              </button>
            </div>
          </div>

          {/* add to calendar */}
          <div>
            <div className="eyebrow">{t({ es: 'Añadir a su calendario', en: 'Add to your calendar' }, lang)}</div>
            <div style={{ display: 'grid', gap: 8, marginTop: 12 }}>
              {[
                { name: 'Apple', glyph: '' },
                { name: 'Google', glyph: 'G' },
                { name: 'Outlook', glyph: 'O' },
                { name: { es: 'Descargar .ics', en: 'Download .ics' }, glyph: '' },
              ].map((g, i) => (
                <button key={i} className="btn btn-ghost" style={{
                  justifyContent: 'space-between', padding: '12px 14px',
                  fontFamily: 'var(--serif)', fontSize: 14, color: 'var(--ink)',
                }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
                    {g.glyph && <span style={{
                      width: 22, height: 22, background: 'var(--ink)', color: 'var(--paper)',
                      borderRadius: '50%', display: 'grid', placeItems: 'center',
                      fontFamily: 'var(--serif)', fontSize: 12, fontWeight: 600,
                    }}>{g.glyph}</span>}
                    {typeof g.name === 'string' ? g.name : g.name[lang]}
                  </span>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-muted)', textTransform: 'uppercase' }}>add →</span>
                </button>
              ))}
            </div>
            <div style={{
              marginTop: 14, padding: 14,
              background: 'var(--paper-elevated)', border: '1px solid var(--divider-strong)',
              fontFamily: 'var(--serif)', fontStyle: 'italic',
              fontSize: 13, color: 'var(--ink-soft)', textWrap: 'pretty',
            }}>
              {t({
                es: '¿Quiere cambiarlo o cancelar? Mande mensaje al (951) 555·0142 o conteste el correo. Sin costo. Sin culpa.',
                en: 'Want to change or cancel? Text (951) 555·0142 or reply to the email. No fee. No guilt.',
              }, lang)}
            </div>
          </div>
        </section>

        {/* what happens next — three steps */}
        <section style={{ maxWidth: 1100, margin: '52px auto 0', padding: '0 36px' }}>
          <div className="eyebrow">{t({ es: 'Lo que pasa entre ahora y la visita', en: 'What happens between now and the visit' }, lang)}</div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            borderTop: '1px solid var(--ink)', marginTop: 12,
          }}>
            {next.map((s, idx) => (
              <div key={s.n} style={{
                padding: '20px 22px 24px',
                borderRight: idx < next.length - 1 ? '1px solid var(--divider)' : 'none',
              }}>
                <div className="codex" style={{ color: 'var(--terracotta)' }}>{s.n} · {s.when[lang]}</div>
                <h3 style={{ margin: '8px 0 0', fontFamily: 'var(--serif)', fontWeight: 600, fontSize: 22, letterSpacing: '-0.015em' }}>
                  {s.title[lang]}
                </h3>
                <p style={{
                  margin: '10px 0 0', fontFamily: 'var(--serif)', fontSize: 14.5,
                  color: 'var(--ink-soft)', lineHeight: 1.5, textWrap: 'pretty',
                }}>{s.body[lang]}</p>
              </div>
            ))}
          </div>
        </section>

        {/* while you wait */}
        <section style={{ maxWidth: 1100, margin: '40px auto 0', padding: '0 36px 28px' }}>
          <div className="eyebrow">{t({ es: 'Mientras espera', en: 'While you wait' }, lang)}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginTop: 12 }}>
            {[
              { l: { es: 'Empezar a elegir color', en: 'Start picking color' },         sub: { es: 'Estudio de color · 27 muestras Dunn-Edwards', en: 'Color Studio · 27 Dunn-Edwards chips' } },
              { l: { es: 'Ver obras parecidas',     en: 'See similar jobs'        },     sub: { es: 'Galería antes y después · 18 casas',          en: 'Gallery before & after · 18 houses' } },
              { l: { es: 'Las preguntas frecuentes', en: 'Read the FAQ'             },   sub: { es: 'Centro de ayuda · 22 preguntas honestas',     en: 'Help center · 22 honest questions' } },
            ].map((c, i) => (
              <a key={i} className="card" style={{ padding: 18, display: 'block', textDecoration: 'none', color: 'var(--ink)' }}>
                <div className="codex" style={{ color: 'var(--ink-muted)' }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ marginTop: 8, fontFamily: 'var(--serif)', fontSize: 19, fontWeight: 600, letterSpacing: '-0.01em' }}>{c.l[lang]} →</div>
                <div style={{ marginTop: 4, fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 13.5, color: 'var(--ink-soft)' }}>{c.sub[lang]}</div>
              </a>
            ))}
          </div>
        </section>

        <footer className="foot">
          <div>© Orinova · Operating Group · MMXXVI</div>
          <div>{t({ es: 'Bookings · {ref} · email + sms enviados', en: 'Bookings · {ref} · email + sms sent' }, lang).replace('{ref}', refNum)}</div>
        </footer>
      </div>
    </div>
  );
}

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

window.OrinovaPages17 = {
  EditorialMemo,
  ContactPage,
  BookingConfirmation,
};
