Confirma tu pedido.

// PAGO MANUAL · VERIFICACIÓN EN 30 MIN. PROMEDIO

{Ic.check}01 CARRITO {step !== 'form' && Ic.check}02 DATOS Y PAGO 03 CONFIRMACIÓN

{step === 'form' &&

1DIRECCIÓN DE ENVÍO

// COBERTURA NACIONAL · 24–72H

Dirección *

Estado *

Ciudad *

Código postal

Referencia

Notas para el repartidor

</div>
              </div>
            </div>

<div className="form-card">
              <h3><span className="num">2</span>MÉTODO DE PAGO MANUAL</h3>
              <p className="sub">// ADJUNTA EL COMPROBANTE · VERIFICAMOS EN MIN.</p>

<div className="pay-options">
                <div className={`pay-opt ${pay === 'transfer' ? 'active' : ''}`} onClick={() => setPay('transfer')}>
                  <div className="ic-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="6" width="20" height="13" rx="2" /><path d="M2 11h20" /></svg></div>
                  <div><h4>Transferencia bancaria</h4><p>// BS · USD</p></div>
                  <div className="check">{Ic.check}</div>
                </div>
                <div className={`pay-opt ${pay === 'mobile' ? 'active' : ''}`} onClick={() => setPay('mobile')}>
                  <div className="ic-box"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="7" y="2" width="10" height="20" rx="2" /><path d="M11 18h2" /></svg></div>
                  <div><h4>Pago Móvil</h4><p>// MERCANTIL · BANESCO</p></div>
                  <div className="check">{Ic.check}</div>
                </div>
              </div>

{pay === 'transfer' &&
              <div className="bank-info">
                  <h4>// DATOS DE CUENTA</h4>
                  <ul>
                    <li><span>BANCO</span><span>MERCANTIL · 0105</span></li>
                    <li><span>BENEFICIARIO</span><span>DON JUAN SECURITY C.A.</span></li>
                    <li><span>RIF</span><span>J-50012345-6</span></li>
                    <li><span>CUENTA</span><span>0105-1234-56-1234567890</span></li>
                  </ul>
                </div>
              }

{pay === 'mobile' &&
              <div className="bank-info">
                  <h4>// DATOS PAGO MÓVIL</h4>
                  <ul>
                    <li><span>BANCO</span><span>MERCANTIL · 0105</span></li>
                    <li><span>CÉDULA</span><span>J-50012345-6</span></li>
                    <li><span>TELÉFONO</span><span>0414-5550119</span></li>
                  </ul>
                </div>
              }

<div className="form-grid" style={{ marginBottom: 18 }}>
                <div className="field"><label>Referencia <span className="req">*</span></label><input placeholder="00123456789" /></div>
                <div className="field"><label>Fecha del pago <span className="req">*</span></label><input type="date" /></div>
              </div>

<label style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', display: 'block', marginBottom: 10, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.1em', textTransform: 'uppercase' }}>Comprobante <span className="req">*</span></label>
              <label className={`upload ${file ? 'filled' : ''}`}>
                <input type="file" style={{ display: 'none' }} onChange={(e) => setFile(e.target.files?.[0]?.name || 'comprobante.jpg')} />
                <div className="ic">{file ? Ic.check : Ic.upload}</div>
                {!file && <h4>Arrastra tu comprobante aquí o haz click para subirlo</h4>}
                {file && <h4>{file}</h4>}
                <p>{file ? '// VERIFICAMOS EN MENOS DE 30 MIN' : '// JPG / PNG / PDF · HASTA 5MB'}</p>
              </label>
            </div>

<div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
              <button className="btn btn-ghost" onClick={() => onNav('cart')}>← VOLVER AL CARRITO</button>
              <button className="btn btn-ghost" onClick={() => setStep('error')} style={{ color: '#FF6B47' }}>SIMULAR ERROR</button>
              <button className="btn btn-primary btn-lg" onClick={() => setStep('success')}>CONFIRMAR PEDIDO {Ic.arrow}</button>
            </div>
          </div>

<aside className="summary">
            <h3>// TU PEDIDO · {items.length} ITEMS</h3>
            {items.map((i, idx) =>
            <div className="item-mini" key={idx}>
                <div className="ph-wrap">
                  <img src="assets/product-camera.svg" alt="" />
                  <span className="qty-badge">{i.qty}</span>
                </div>
                <div className="info">
                  <h4>{i.name}</h4>
                  <span>// {i.sku}</span>
                </div>
                <span className="price">${(i.price * i.qty).toFixed(2)}</span>
              </div>
            )}
            <div className="totals">
              <div className="line"><span>SUBTOTAL</span><span>${subtotal.toFixed(2)}</span></div>
              <div className="line muted"><span>ENVÍO</span><span>$8.50</span></div>
              <div className="line muted"><span>IVA · 16%</span><span>${iva.toFixed(2)}</span></div>
              <div className="line total-line"><span>TOTAL</span><span>${(subtotal + iva + 8.5).toFixed(2)}</span></div>
            </div>
            <div style={{ marginTop: 14, padding: '14px 16px', background: 'var(--green-glow)', border: '1px solid var(--green)', fontSize: 12, color: 'var(--ink)', lineHeight: 1.5, display: 'flex', gap: 10, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.03em' }}>
              {Ic.shield}
              <span>// UNA VEZ CONFIRMADO TU COMPROBANTE DE PAGO, TE ENVIAMOS LOS PRODUCTOS AL INSTANTE</span>
            </div>
          </aside>
        </div>
        }

{step === 'success' &&
        <div className="p2-co-result">
            <div className="p2-co-card success">
              <div className="big-ic">{Ic.check}</div>
              <div className="ix">// PEDIDO #DJ-26-002847</div>
              <h2>Pago <em>confirmado.</em></h2>
              <p>Verificamos tu comprobante. Tu pedido entra a despacho en este instante.</p>
              <div className="detail-grid">
                <div><span>TOTAL PAGADO</span><strong>${(subtotal + iva + 8.5).toFixed(2)}</strong></div>
                <div><span>PRODUCTOS</span><strong>{items.length} ITEMS</strong></div>
                <div><span>ENVÍO ESTIMADO</span><strong>24–72HS</strong></div>
                <div><span>NOTIFICACIÓN</span><strong>EMAIL + WHATSAPP</strong></div>
              </div>
              <div className="actions">
                <button className="btn btn-ghost" onClick={() => onNav('home')}>VOLVER AL INICIO</button>
                <button className="btn btn-primary btn-lg" onClick={() => onNav('shop')}>SEGUIR COMPRANDO {Ic.arrow}</button>
              </div>
            </div>
          </div>
        }

{step === 'error' &&
        <div className="p2-co-result">
            <div className="p2-co-card error">
              <div className="big-ic">!</div>
              <div className="ix">// PEDIDO #DJ-26-002847 · VERIFICACIÓN PENDIENTE</div>
              <h2>No pudimos validar tu <em>comprobante.</em></h2>
              <p>Los datos del pago no coinciden. Revisa la referencia o vuelve a subir el comprobante.</p>
              <div className="reasons">
                <div><span>·</span> La referencia no coincide con ninguna operación recibida</div>
                <div><span>·</span> La fecha del comprobante difiere de la fecha registrada</div>
                <div><span>·</span> El monto pagado no cubre el total del pedido</div>
              </div>
              <div className="actions">
                <button className="btn btn-ghost" onClick={() => setStep('form')} style={{ height: "50px" }}>← REINTENTAR</button>
                <button className="btn btn-primary btn-lg" style={{ height: "50px" }}>{Ic.wa} CONTACTAR POR WHATSAPP</button>
              </div>
            </div>
          </div>
        }
      </main>
      <Footer onNav={onNav} />
      <WAFloat />
    </React.Fragment>);

};

// ============================================================
// 06 — AUTH
// ============================================================
const AuthScreen = ({ onNav }) => {
  const [mode, setMode] = useState('login');
  return (
    <React.Fragment>
      <style>{`
        .p2-auth { padding: 60px 0 100px; min-height: 700px; }
        .p2-auth .frame { background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; }
        .p2-auth .side { background: var(--bg); padding: 44px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
        .p2-auth .side::before { content:""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(159, 211, 86, 0.06) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; }
        .p2-auth .side .top-strip { position: relative; display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; margin-bottom: 32px; }
        .p2-auth .side .top-strip .pulse { color: var(--green); display: flex; gap: 6px; align-items: center; }
        .p2-auth .side .top-strip .pulse::before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
        .p2-auth .side .logo img { height: 36px; display: block; margin-bottom: 32px; }
        .p2-auth .side h2 { font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 18px; position: relative; }
        .p2-auth .side h2 em { font-style: normal; color: var(--green); }
        .p2-auth .side p { font-size: 14px; line-height: 1.55; color: var(--ink-2); position: relative; max-width: 380px; }
        .p2-auth .side ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; position: relative; }
        .p2-auth .side ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--ink); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p2-auth .side ul li svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
        .p2-auth .side .stat-row { display: flex; gap: 32px; position: relative; }
        .p2-auth .side .stat-row div { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; }
        .p2-auth .side .stat-row strong { display: block; font-family: 'Eastman Trial', 'Be Vietnam Pro', sans-serif; font-size: 28px; color: var(--green); letter-spacing: -0.02em; font-weight: 600; margin-bottom: 4px; }

.p2-auth .form-side { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; background: var(--surface); }
        .p2-auth .toggle { display: flex; padding: 4px; background: var(--bg); border: 1px solid var(--line); width: fit-content; margin-bottom: 28px; }
        .p2-auth .toggle button { padding: 9px 22px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
        .p2-auth .toggle button.active { background: var(--green); color: var(--bg); }
        .p2-auth h1 { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 6px; }
        .p2-auth h1 em { font-style: normal; color: var(--green); }
        .p2-auth .lede { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; margin-bottom: 24px; }
        .p2-auth .google-btn {
          display: inline-flex; align-items: center; justify-content: center; gap: 10px;
          padding: 13px 16px; width: 100%;
          background: var(--bg); border: 1px solid var(--line);
          font-size: 12px; font-weight: 500; color: var(--ink);
          margin-bottom: 14px; cursor: pointer; transition: all 0.15s;
          font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em;
          white-space: nowrap;
        }
        .p2-auth .google-btn:hover { border-color: var(--green); }
        .p2-auth .google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .p2-auth .divider { display: flex; align-items: center; gap: 14px; margin: 14px 0 20px; font-size: 10px; color: var(--ink-3); letter-spacing: 0.12em; font-family: 'JetBrains Mono', monospace; }
        .p2-auth .divider::before, .p2-auth .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
        .p2-auth .options-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 18px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; gap: 10px; flex-wrap: wrap; }
        .p2-auth .options-row a { color: var(--green); }
        .p2-auth .check-line { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
        .p2-auth .check-line input { width: 14px; height: 14px; accent-color: var(--green); }
        .p2-auth .switch-line { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 18px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
        .p2-auth .switch-line a { color: var(--green); }
        .p2-auth .guest-link { text-align: center; margin-top: 10px; }
        .p2-auth .guest-link a { color: var(--ink-3); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
        .p2-auth .btn.btn-block { padding: 14px 18px; font-size: 12px; }
      `}</style>
      <Header active="auth" onNav={onNav} />
      <main className="container p2-auth">
        <div className="frame">
          <div className="side">
            <div>
              <div className="logo"><img src="assets/logos/horizontal-white.png" alt="" /></div>
              <div className="kicker">// ACCESO PROTEGIDO</div>
              <h2>Tu cuenta es la <em>llave maestra</em> de tu seguridad.</h2>
              <p>Regístrate una vez y accede a precios mayoristas, historial de compras, pedidos guardados y atención prioritaria por WhatsApp.</p>
              <ul>
                <li>{Ic.check}<span>CARRITO Y WISHLIST SINCRONIZADOS</span></li>
                <li>{Ic.check}<span>SEGUIMIENTO DE PEDIDOS EN TIEMPO REAL</span></li>
                <li>{Ic.check}<span>SOPORTE TÉCNICO PRIORITARIO</span></li>
                <li>{Ic.check}<span>DESCUENTOS EXCLUSIVOS</span></li>
              </ul>
            </div>
            <div className="stat-row">
              <div><strong>+800</strong>PRODUCTOS</div>
              <div><strong>3.2k</strong>CLIENTES</div>
              <div><strong>24h</strong>ENVÍO PROMEDIO</div>
            </div>
          </div>

<div className="form-side">
            <div className="toggle">
              <button className={mode === 'login' ? 'active' : ''} onClick={() => setMode('login')}>INICIAR SESIÓN</button>
              <button className={mode === 'register' ? 'active' : ''} onClick={() => setMode('register')}>CREAR CUENTA</button>
            </div>

{mode === 'login' ?
            <React.Fragment>
                <h1>Bienvenido de <em>vuelta.</em></h1>
                <p className="lede">// INGRESA TUS CREDENCIALES</p>

<button className="google-btn">{Ic.google}<span>CONTINUAR CON GOOGLE</span></button>

<div className="divider">// O CON TU EMAIL</div>

<div className="field"><label>Email</label><input type="email" placeholder="stephanie@ejemplo.com" /></div>
                <div className="field"><label>Contraseña</label><input type="password" placeholder="••••••••" /></div>

<div className="options-row">
                  <label className="check-line"><input type="checkbox" defaultChecked />RECORDARME</label>
                  <a>¿OLVIDASTE TU CLAVE?</a>
                </div>

<button className="btn btn-primary btn-block" onClick={() => onNav('home')}>INICIAR SESIÓN {Ic.arrow}</button>

<div className="switch-line">// ¿NO TIENES CUENTA? <a onClick={() => setMode('register')}>CREAR UNA</a></div>
              </React.Fragment> :

<React.Fragment>
                <h1>Crea tu <em>cuenta.</em></h1>
                <p className="lede">// MENOS DE UN MINUTO</p>

<button className="google-btn">{Ic.google}<span>REGISTRARME CON GOOGLE</span></button>

<div className="divider">// O CON TUS DATOS</div>

<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 14px' }}>
                  <div className="field"><label>Nombre</label><input placeholder="Stephanie" /></div>
                  <div className="field"><label>Apellido</label><input placeholder="Castillo" /></div>
                  <div className="field" style={{ gridColumn: 'span 2' }}><label>Email</label><input placeholder="stephanie@ejemplo.com" /></div>
                  <div className="field"><label>Cédula / DNI</label><input placeholder="V-12345678" /></div>
                  <div className="field"><label>Teléfono</label><input placeholder="+58 414…" /></div>
                  <div className="field" style={{ gridColumn: 'span 2' }}><label>Contraseña</label><input type="password" placeholder="Mín 8 caracteres" /></div>
                </div>

<label className="check-line" style={{ margin: '4px 0 18px' }}>
                  <input type="checkbox" />
                  <span style={{ fontSize: 12, color: 'var(--ink-2)', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.04em' }}>// ACEPTO TÉRMINOS Y POLÍTICA DE PRIVACIDAD</span>
                </label>

<button className="btn btn-primary btn-block">CREAR CUENTA {Ic.arrow}</button>

<div className="switch-line">// ¿YA TIENES CUENTA? <a onClick={() => setMode('login')}>INICIAR SESIÓN</a></div>
              </React.Fragment>
            }
          </div>
        </div>
      </main>
      <Footer onNav={onNav} />
      <WAFloat />
    </React.Fragment>);

};

// ============================================================
// 07 — TECHNICIAN PORTAL (3 sub-views: directorio público / login / perfil)
// ============================================================
const TechScreen = ({ onNav }) => {
  const [view, setView] = useState('directory');
  return (
    <React.Fragment>
      <style>{`
        .p2-tech-header { background: var(--bg); padding: 12px 0; border-bottom: 1px solid var(--green); }
        .p2-tech-header .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
        .p2-tech-header .left { display: flex; align-items: center; gap: 14px; }
        .p2-tech-header .logo img { height: 28px; }
        .p2-tech-header .badge-sub { padding: 4px 10px; background: var(--green); color: var(--bg); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; font-family: 'JetBrains Mono', monospace; }
        .p2-tech-header nav { display: flex; gap: 2px; }
        .p2-tech-header nav a { padding: 8px 14px; font-size: 11px; color: var(--ink-2); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
        .p2-tech-header nav a:hover { color: var(--green); }
        .p2-tech-header nav a.active { color: var(--green); background: var(--surface-3); }
        .p2-tech-header .domain { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green); letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; }
        .p2-tech-header .domain::before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }

/* ========== DIRECTORY ========== */
        .p2-tech-dir-hero {
          padding: 60px 0 50px;
          position: relative; overflow: hidden;
          border-bottom: 1px solid var(--line);
        }
        .p2-tech-dir-hero .dots {
          position: absolute; inset: 0;
          background-image: radial-gradient(circle, rgba(159, 211, 86, 0.07) 1px, transparent 1px);
          background-size: 22px 22px;
        }
        .p2-tech-dir-hero .container { position: relative; }
        .p2-tech-dir-hero h1 { font-size: 52px; line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; max-width: 880px; margin-bottom: 18px; }
        .p2-tech-dir-hero h1 em { font-style: normal; color: var(--green); }
        .p2-tech-dir-hero .lede { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 580px; margin-bottom: 28px; }
        .p2-tech-dir-hero .access { display: flex; gap: 10px; flex-wrap: wrap; }

.p2-tech-filters { padding: 22px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
        .p2-tech-filters .row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
        .p2-tech-filters .field { margin: 0; }
        .p2-tech-filters .field label { font-size: 10px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); }
        .p2-tech-filters .field input, .p2-tech-filters .field select { padding: 11px 14px; font-size: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .p2-tech-filters .search-field { position: relative; }
        .p2-tech-filters .search-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink-3); }
        .p2-tech-filters .search-field input { padding-left: 38px; }

.p2-tech-list { padding: 32px 0 80px; }
        .p2-tech-list .head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
        .p2-tech-list .head-row .count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-2); letter-spacing: 0.06em; }
        .p2-tech-list .head-row .count strong { color: var(--green); }
        .p2-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .p2-tech-card {
          background: var(--surface); border: 1px solid var(--line);
          padding: 22px; display: flex; flex-direction: column; gap: 14px;
          transition: all 0.2s; position: relative; overflow: hidden;
        }
        .p2-tech-card:hover { border-color: var(--green); box-shadow: 0 0 24px var(--green-glow); }
        .p2-tech-card .corner-tl, .p2-tech-card .corner-br {
          position: absolute; width: 10px; height: 10px; border-color: var(--green); opacity: 0.5;
        }
        .p2-tech-card .corner-tl { top: 6px; left: 6px; border-top: 1px solid; border-left: 1px solid; }
        .p2-tech-card .corner-br { bottom: 6px; right: 6px; border-bottom: 1px solid; border-right: 1px solid; }
        .p2-tech-card .top { display: flex; gap: 14px; }
        .p2-tech-card .av {
          width: 56px; height: 56px;
          background: var(--bg); border: 1px solid var(--green);
          display: flex; align-items: center; justify-content: center;
          color: var(--green); flex-shrink: 0;
          font-weight: 700; font-size: 16px; font-family: 'JetBrains Mono', monospace;
        }
        .p2-tech-card .top h4 { font-size: 16px; font-weight: 600; color: var(--ink); }
        .p2-tech-card .top .city { font-size: 11px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }
        .p2-tech-card .top .city svg { width: 12px; height: 12px; }
        .p2-tech-card .status-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
        .p2-tech-card .status-row .badge-avail {
          padding: 3px 10px; background: var(--green-glow); border: 1px solid var(--green); color: var(--green);
          font-size: 10px; font-weight: 600; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em;
          display: inline-flex; align-items: center; gap: 6px;
        }
        .p2-tech-card .status-row .badge-avail::before { content:""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
        .p2-tech-card .status-row .badge-busy {
          padding: 3px 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3);
          font-size: 10px; font-weight: 600; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em;
        }
        .p2-tech-card .stars { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-2); font-family: 'JetBrains Mono', monospace; }
        .p2-tech-card .stars svg { color: var(--green); width: 12px; height: 12px; }
        .p2-tech-card .specs { display: flex; gap: 6px; flex-wrap: wrap; }
        .p2-tech-card .specs span {
          font-size: 10px; padding: 3px 8px;
          background: var(--surface-2); border: 1px solid var(--line);
          font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em;
          color: var(--ink-2);
        }
        .p2-tech-card .ctas { display: flex; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--line); }
        .p2-tech-card .ctas .btn { flex: 1; padding: 9px 12px; font-size: 10px; }

/* ========== LOGIN ========== */
        .p2-tech-auth { padding: 60px 0 90px; }
        .p2-tech-auth .frame {
          max-width: 480px; margin: 0 auto;
          background: var(--surface); border: 1px solid var(--line);
          padding: 44px 48px;
        }
        .p2-tech-auth h1 { font-size: 30px; font-weight: 500; margin-bottom: 6px; letter-spacing: -0.02em; }
        .p2-tech-auth h1 em { font-style: normal; color: var(--green); }
        .p2-tech-auth .lede { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; margin-bottom: 22px; }
        .p2-tech-auth .toggle { display: flex; padding: 4px; background: var(--bg); border: 1px solid var(--line); margin-bottom: 24px; }
        .p2-tech-auth .toggle button { flex: 1; padding: 9px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
        .p2-tech-auth .toggle button.active { background: var(--green); color: var(--bg); }
        .p2-tech-auth .google-btn {
          display: inline-flex; align-items: center; justify-content: center; gap: 10px;
          padding: 13px 16px; width: 100%; background: var(--bg); border: 1px solid var(--line);
          font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 16px; cursor: pointer;
          font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em;
          white-space: nowrap;
        }
        .p2-tech-auth .google-btn:hover { border-color: var(--green); }
        .p2-tech-auth .google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .p2-tech-auth .divider { display: flex; align-items: center; gap: 14px; margin: 14px 0 20px; font-size: 10px; color: var(--ink-3); letter-spacing: 0.12em; font-family: 'JetBrains Mono', monospace; }
        .p2-tech-auth .divider::before, .p2-tech-auth .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
        .p2-tech-auth .options-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; margin-bottom: 22px; gap: 10px; flex-wrap: wrap; }
        .p2-tech-auth .options-row a { color: var(--green); }
        .p2-tech-auth .check-line { display: flex; gap: 8px; align-items: center; color: var(--ink-2); }
        .p2-tech-auth .check-line input { width: 14px; height: 14px; accent-color: var(--green); }
        .p2-tech-auth .note { text-align: center; margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.05em; }

/* ========== PROFILE ========== */
        .p2-tech-prof-section { padding: 32px 0 80px; }
        .p2-tech-profile { background: var(--surface); border: 1px solid var(--line); padding: 36px; }
        .p2-tech-profile .top { display: flex; gap: 24px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
        .p2-tech-profile .avatar { width: 100px; height: 100px; background: var(--bg); padding: 14px; border: 2px solid var(--green); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
        .p2-tech-profile .avatar img { width: 100%; height: 100%; object-fit: contain; color: var(--green); }
        .p2-tech-profile .top h2 { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 6px; }
        .p2-tech-profile .top h2 em { font-style: normal; color: var(--green); }
        .p2-tech-profile .top .meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); display: flex; gap: 18px; flex-wrap: wrap; letter-spacing: 0.05em; }
        .p2-tech-profile .top .meta span { display: inline-flex; align-items: center; gap: 6px; }
        .p2-tech-profile .top .meta .verified { color: var(--green); }
        .p2-tech-profile .top .meta svg { width: 12px; height: 12px; }

.p2-tech-avail-toggle {
          margin-left: auto;
          display: flex; align-items: center; gap: 12px;
          background: var(--bg); padding: 8px 14px; border: 1px solid var(--green);
        }
        .p2-tech-avail-toggle .switch { width: 38px; height: 22px; background: var(--green); position: relative; cursor: pointer; transition: background 0.2s; }
        .p2-tech-avail-toggle .switch::after { content:""; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: var(--bg); transition: all 0.2s; }
        .p2-tech-avail-toggle.off .switch { background: var(--ink-4); }
        .p2-tech-avail-toggle.off .switch::after { left: 2px; right: auto; background: var(--ink-3); }
        .p2-tech-avail-toggle .lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--green); letter-spacing: 0.08em; text-transform: uppercase; }

.p2-tech-approval {
          padding: 16px 20px;
          background: var(--green-glow);
          border: 1px solid var(--green);
          display: flex; gap: 14px; align-items: center;
          margin-bottom: 28px;
        }
        .p2-tech-approval .ic { width: 36px; height: 36px; background: var(--green); color: var(--bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .p2-tech-approval .ic svg { width: 18px; height: 18px; }
        .p2-tech-approval h4 { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--green); letter-spacing: 0.06em; }
        .p2-tech-approval p { font-size: 12px; color: var(--ink); margin-top: 2px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }

.p2-tech-profile h3 { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--green); letter-spacing: 0.1em; margin-bottom: 16px; text-transform: uppercase; }
        .p2-tech-profile .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-bottom: 32px; }
        .p2-tech-profile .field { margin-bottom: 0; }
        .p2-tech-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 32px; }
        .p2-tech-pills .chip { padding: 7px 14px; background: var(--green); color: var(--bg); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; }
        .p2-tech-pills .add { padding: 7px 14px; background: var(--bg); border: 1px dashed var(--line); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.05em; }
        .p2-tech-profile .actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
      `}</style>

<header className="p2-tech-header">
        <div className="container">
          <div className="row">
            <div className="left">
              <a className="logo" onClick={() => onNav('home')}><img src="assets/logos/horizontal-white.png" alt="" /></a>
              <span className="badge-sub">PORTAL TÉCNICOS</span>
            </div>
            <nav>
              <a className={view === 'directory' ? 'active' : ''} onClick={() => setView('directory')}>// DIRECTORIO</a>
              <a className={view === 'login' ? 'active' : ''} onClick={() => setView('login')}>// ACCESO</a>
              <a className={view === 'profile' ? 'active' : ''} onClick={() => setView('profile')}>// MI PERFIL</a>
            </nav>
            <span className="domain">tecnicos.donjuansecurity.com</span>
          </div>
        </div>
      </header>

{/* === DIRECTORY === */}
      {view === 'directory' &&
      <React.Fragment>
          <section className="p2-tech-dir-hero">
            <div className="dots"></div>
            <div className="container">
              <div className="kicker">DIRECTORIO PÚBLICO · TÉCNICOS CERTIFICADOS</div>
              <h1>Encuentra al <em>técnico instalador</em> de tu ciudad.</h1>
              <p className="lede">Listado público de técnicos certificados Don Juan Security. Filtra por ciudad y especialidad, contáctalos directamente por WhatsApp y coordina tu instalación.</p>
              <div className="access">
                <button className="btn btn-primary" onClick={() => setView('login')}>¿ERES TÉCNICO? REGISTRARSE {Ic.arrow}</button>
                <button className="btn btn-outline" onClick={() => setView('login')}>INICIAR SESIÓN</button>
              </div>
            </div>
          </section>

<section className="p2-tech-filters">
            <div className="container">
              <div className="row">
                <div className="field search-field">
                  <label>BUSCAR</label>
                  <div style={{ position: 'relative' }}>{Ic.search}<input placeholder="Nombre, especialidad…" /></div>
                </div>
                <div className="field"><label>CIUDAD</label><select><option>Todas las ciudades</option><option>Ciudad Bolívar</option><option>Puerto Ordaz</option><option>Caracas</option><option>Maracay</option><option>Valencia</option><option>Maracaibo</option><option>San Felipe</option></select></div>
                <div className="field"><label>ESPECIALIDAD</label><select><option>Todas</option><option>CCTV</option><option>Motores</option><option>Alarmas</option><option>Accesos</option><option>Domótica</option></select></div>
                <div className="field"><label>DISPONIBILIDAD</label><select><option>Cualquiera</option><option>Disponibles ahora</option></select></div>
                <button className="btn btn-primary">APLICAR</button>
              </div>
            </div>
          </section>

<section className="container p2-tech-list">
            <div className="head-row">
              <div className="count">MOSTRANDO <strong>1–9</strong> DE <strong>34</strong> TÉCNICOS</div>
              <select style={{ padding: '9px 12px', background: 'var(--surface)', border: '1px solid var(--line)', fontSize: 11, color: 'var(--ink)', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.06em' }}>
                <option>// MEJOR CALIFICADOS</option><option>// MÁS CERCANOS</option><option>// MÁS EXPERIENCIA</option>
              </select>
            </div>
            <div className="p2-tech-grid">
              {[
            { name: 'Carlos Méndez', city: 'CIUDAD BOLÍVAR', rating: 4.8, jobs: 47, specs: ['CCTV', 'MOTORES', 'ALARMAS'], avail: true, initials: 'CM' },
            { name: 'María Rodríguez', city: 'CARACAS', rating: 4.9, jobs: 62, specs: ['CCTV', 'DOMÓTICA', 'ACCESOS'], avail: true, initials: 'MR' },
            { name: 'José Hernández', city: 'MARACAY', rating: 4.6, jobs: 28, specs: ['MOTORES', 'ALARMAS'], avail: false, initials: 'JH' },
            { name: 'Andrés Pérez', city: 'VALENCIA', rating: 4.7, jobs: 39, specs: ['CCTV', 'ACCESOS'], avail: true, initials: 'AP' },
            { name: 'Luisa Suárez', city: 'MARACAIBO', rating: 4.8, jobs: 51, specs: ['CCTV', 'DOMÓTICA'], avail: true, initials: 'LS' },
            { name: 'Roberto Salazar', city: 'BARQUISIMETO', rating: 4.5, jobs: 22, specs: ['MOTORES', 'CCTV'], avail: false, initials: 'RS' },
            { name: 'Francisco García', city: 'PUERTO LA CRUZ', rating: 4.7, jobs: 33, specs: ['CCTV', 'ACCESOS'], avail: true, initials: 'FG' },
            { name: 'Patricia Núñez', city: 'SAN FELIPE', rating: 4.9, jobs: 44, specs: ['CCTV', 'DOMÓTICA'], avail: true, initials: 'PN' },
            { name: 'Daniel Castro', city: 'CIUDAD BOLÍVAR', rating: 4.6, jobs: 31, specs: ['CCTV', 'ALARMAS'], avail: true, initials: 'DC' }].
            map((t, i) =>
            <div className="p2-tech-card" key={i}>
                  <span className="corner-tl"></span><span className="corner-br"></span>
                  <div className="top">
                    <div className="av">{t.initials}</div>
                    <div style={{ flex: 1 }}>
                      <h4>{t.name}</h4>
                      <div className="city">{Ic.pin}{t.city}</div>
                      <div className="status-row">
                        {t.avail ?
                    <span className="badge-avail">DISPONIBLE</span> :
                    <span className="badge-busy">OCUPADO</span>}
                      </div>
                    </div>
                  </div>
                  <div className="specs">{t.specs.map((s, j) => <span key={j}>{s}</span>)}</div>
                </div>
            )}
            </div>
          </section>
        </React.Fragment>
      }

{/* === LOGIN === */}
      {view === 'login' &&
      <section className="p2-tech-auth">
          <div className="container">
            <div className="frame">
              <div className="kicker">// ACCESO DE TÉCNICOS</div>
              <h1>Portal de <em>técnicos.</em></h1>
              <p className="lede">// INICIA SESIÓN O REGÍSTRATE</p>

<div className="toggle">
                <button className="active">INICIAR SESIÓN</button>
                <button>CREAR CUENTA</button>
              </div>

<button className="google-btn">{Ic.google}<span>CONTINUAR CON GOOGLE</span></button>

<div className="divider">// O CON EMAIL</div>

<div className="field"><label>Email</label><input placeholder="tecnico@ejemplo.com" /></div>
              <div className="field"><label>Contraseña</label><input type="password" placeholder="••••••••" /></div>

<div className="options-row">
                <label className="check-line"><input type="checkbox" defaultChecked />RECORDARME</label>
                <a>¿OLVIDASTE TU CLAVE?</a>
              </div>

<button className="btn btn-primary btn-block" onClick={() => setView('profile')}>INGRESAR AL PORTAL</button>

<p className="note">// CUENTA DEBE ESTAR APROBADA POR ADMIN PARA APARECER EN EL DIRECTORIO</p>
            </div>
          </div>
        </section>
      }

{/* === PROFILE === */}
      {view === 'profile' &&
      <section className="container p2-tech-prof-section">
          <div className="p2-tech-profile">
            <div className="top">
              <div className="avatar"><img src="assets/product-camera.svg" alt="" /></div>
              <div>
                <h2>Carlos <em>Méndez.</em></h2>
                <div className="meta">
                  <span className="verified">{Ic.check}APROBADO · 12 MAR 2026</span>
                  <span>{Ic.pin}CIUDAD BOLÍVAR · PTO ORDAZ</span>
                </div>
              </div>
              <div className="p2-tech-avail-toggle">
                <span className="lbl">Disponible</span>
                <span className="switch"></span>
              </div>
            </div>

<div className="p2-tech-approval">
              <div className="ic">{Ic.check}</div>
              <div>
                <h4>// ESTADO: APROBADO POR ADMIN</h4>
                <p>APARECES EN EL DIRECTORIO PÚBLICO · CLIENTES PUEDEN CONTACTARTE POR WHATSAPP</p>
              </div>
            </div>

<h3>// INFORMACIÓN DE CONTACTO</h3>
            <div className="grid">
              <div className="field"><label>Nombre completo</label><input defaultValue="Carlos Antonio Méndez Pérez" /></div>
              <div className="field"><label>Documento de identidad</label><input defaultValue="V-15.234.788" /></div>
              <div className="field"><label>Teléfono / WhatsApp</label><input defaultValue="+58 414 555 7821" /></div>
              <div className="field"><label>Email</label><input defaultValue="carlos.mendez@gmail.com" /></div>
              <div className="field"><label>Ciudad principal</label><input defaultValue="Ciudad Bolívar" /></div>
              <div className="field"><label>Zona de cobertura</label><input defaultValue="Bolívar · Anzoátegui · Monagas" /></div>
              <div className="field"><label>Años de experiencia</label><input defaultValue="12 años" /></div>
              <div className="field"><label>Tarifa visita técnica (USD)</label><input defaultValue="$25" /></div>
            </div>

<h3>// ESPECIALIDADES</h3>
            <div className="p2-tech-pills">
              <span className="chip">CCTV</span>
              <span className="chip">MOTORES Y PORTONES</span>
              <span className="chip">ALARMAS</span>
              <span className="chip">ACCESOS</span>
              <span className="add">+ AGREGAR</span>
            </div>

<h3>// DOCUMENTACIÓN</h3>
            <div className="grid">
              <div className="field"><label>Foto de perfil</label><input value="foto-perfil.jpg" readOnly /></div>
              <div className="field"><label>Documento (frente y dorso)</label><input value="cedula.pdf · 2 archivos" readOnly /></div>
              <div className="field"><label>Certificaciones técnicas</label><input value="cert-cctv-2024.pdf, cert-motores.pdf" readOnly /></div>
              <div className="field"><label>RIF (si aplica)</label><input defaultValue="" /></div>
            </div>

<div className="actions">
              <button className="btn btn-ghost" onClick={() => setView('directory')}>CERRAR SESIÓN</button>
              <button className="btn btn-primary btn-lg">GUARDAR CAMBIOS</button>
            </div>
          </div>
        </section>
      }

<Footer onNav={onNav} />
      <WAFloat />
    </React.Fragment>);

};

window.CheckoutScreen = CheckoutScreen;
window.AuthScreen = AuthScreen;
window.TechScreen = TechScreen;