Confirma tu pedido

Faltan pocos pasos para que recibas tus equipos. El pago se procesa de forma manual.

{Ic.check}01 Carrito {step !== 'form' && Ic.check}02 Datos y pago 03 Confirmación

{step === 'form' &&

{/* 1. ENVÍO */}

1Dirección de envío

Te enviamos por la transportadora más cercana a tu zona.

Dirección *

Estado *

Ciudad *

Código postal

Punto de referencia

Notas para el repartidor (opcional)

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

{/* 2. PAGO */}
            <div className="form-card">
              <h3><span className="num">2</span>Método de pago</h3>
              <p className="sub">Procesamos el pago de forma manual. Adjunta el comprobante y verificamos en menos de 30 minutos.</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>Bolívares · Dólares</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>Banesco · Mercantil · BNC</p></div>
                  <div className="check">{Ic.check}</div>
                </div>
              </div>

{pay === 'transfer' &&
              <div className="bank-info">
                  <h4><span className="ic">i</span>Datos de cuenta para la transferencia</h4>
                  <ul>
                    <li><span>Banco</span><span>BANCO 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 corriente</span><span>0105-1234-56-1234567890</span></li>
                    <li><span>Email confirmación</span><span>pagos@donjuansecurity.com</span></li>
                  </ul>
                </div>
              }

{pay === 'mobile' &&
              <div className="bank-info">
                  <h4><span className="ic">i</span>Datos para Pago Móvil</h4>
                  <ul>
                    <li><span>Banco destino</span><span>BANCO MERCANTIL · 0105</span></li>
                    <li><span>Cédula / RIF</span><span>J-50012345-6</span></li>
                    <li><span>Teléfono asociado</span><span>0414-5550119</span></li>
                  </ul>
                </div>
              }

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

<label style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink-2)', display: 'block', marginBottom: 10 }}>Comprobante de pago <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 ? 'Listo. Verificaremos en menos de 30 minutos.' : 'JPG, PNG o PDF · hasta 5MB'}</p>
              </label>
            </div>

<div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', paddingBottom: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-outline" onClick={() => onNav('cart')}>← Volver al carrito</button>
              <button className="btn btn-outline" onClick={() => setStep('error')} style={{ color: '#C6452B' }}>Simular error</button>
              <button className="btn btn-green btn-lg" onClick={() => setStep('success')}>Confirmar pedido {Ic.arrow}</button>
            </div>
          </div>

<aside className="summary">
            <h3>Tu pedido</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>SKU · {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 estimado</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 a pagar</span><span>${(subtotal + iva + 8.5).toFixed(2)}</span></div>
            </div>
          </aside>
        </div>
        }

{step === 'success' &&
        <div className="co-result">
            <div className="co-result-card success">
              <div className="big-ic">{Ic.check}</div>
              <div className="ix">PEDIDO #DJ-26-002847</div>
              <h2>¡Pago confirmado!</h2>
              <p>Verificaremos tu comprobante y procesaremos tu pedido. Te enviamos los productos al 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>Te avisamos por</span><strong>Email + WhatsApp</strong></div>
              </div>
              <div className="co-result-actions">
                <button className="btn btn-outline" onClick={() => onNav('home')}>Ir al inicio</button>
                <button className="btn btn-green btn-lg" onClick={() => onNav('shop')}>Seguir comprando {Ic.arrow}</button>
              </div>
            </div>
          </div>
        }

{step === 'error' &&
        <div className="co-result">
            <div className="co-result-card error">
              <div className="big-ic">!</div>
              <div className="ix">PEDIDO #DJ-26-002847 · VERIFICACIÓN PENDIENTE</div>
              <h2>No pudimos validar tu comprobante</h2>
              <p>El comprobante adjunto no coincide con los datos de pago. Revisa la referencia o vuelve a subirlo. Si necesitas ayuda, escríbenos por WhatsApp.</p>
              <div className="co-error-reasons">
                <div><span className="bullet">·</span> La referencia no coincide con ninguna operación recibida</div>
                <div><span className="bullet">·</span> La fecha del comprobante difiere de la fecha registrada</div>
                <div><span className="bullet">·</span> El monto pagado no cubre el total del pedido</div>
              </div>
              <div className="co-result-actions">
                <button className="btn btn-outline" onClick={() => setStep('form')} style={{ height: "50px" }}>← Reintentar</button>
                <button className="btn btn-green btn-lg" style={{ height: "50px" }}>{Ic.wa} Contactar por WhatsApp</button>
              </div>
            </div>
          </div>
        }
      </main>
      <Footer onNav={onNav} />
      <WAFloat />
    </React.Fragment>);

};

// ============================================================
// 06 — AUTH (Login + Register)
// ============================================================
const AuthScreen = ({ onNav }) => {
  const [mode, setMode] = useState('login');
  return (
    <React.Fragment>
      <style>{`
        .p1-auth { padding: 60px 0 100px; }
        .p1-auth .frame {
          background: white; border: 1px solid var(--line); border-radius: 18px;
          overflow: hidden; display: grid; grid-template-columns: 1fr 1.1fr;
          box-shadow: 0 32px 60px -32px rgba(14,51,38,0.18);
        }
        .p1-auth .side {
          background: linear-gradient(140deg, #102921 0%, #0A1B16 100%);
          color: white; padding: 48px;
          position: relative; overflow: hidden;
          display: flex; flex-direction: column; justify-content: space-between;
        }
        .p1-auth .side::after {
          content:""; position: absolute; right: -100px; bottom: -100px;
          width: 360px; height: 360px;
          background: url('assets/logos/mark-green.png') center/contain no-repeat;
          opacity: 0.09;
        }
        .p1-auth .side .logo img { height: 32px; }
        .p1-auth .side h2 { font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 18px; max-width: 360px; position: relative; }
        .p1-auth .side h2 em { font-style: normal; color: var(--green); }
        .p1-auth .side p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.75); max-width: 380px; position: relative; }
        .p1-auth .side ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; position: relative; }
        .p1-auth .side ul li { display: flex; gap: 12px; align-items: center; font-size: 14px; color: rgba(255,255,255,0.85); }
        .p1-auth .side ul li svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }
        .p1-auth .side .stat-row { display: flex; gap: 32px; position: relative; }
        .p1-auth .side .stat-row div { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; }
        .p1-auth .side .stat-row strong { display: block; font-family: 'Eastman Trial', 'Be Vietnam Pro', sans-serif; font-size: 24px; color: white; letter-spacing: -0.02em; font-weight: 600; margin-bottom: 4px; }

.p1-auth .form-side { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; }
        .p1-auth .toggle { display: flex; background: var(--paper-2); padding: 4px; border-radius: 999px; width: fit-content; margin-bottom: 24px; }
        .p1-auth .toggle button { padding: 9px 22px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
        .p1-auth .toggle button.active { background: white; color: var(--forest); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .p1-auth h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--forest-deep); margin-bottom: 4px; }
        .p1-auth .lede { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
        .p1-auth .google-btn {
          display: inline-flex; align-items: center; justify-content: center; gap: 10px;
          padding: 12px 16px; width: 100%;
          background: white; border: 1px solid var(--line);
          border-radius: 999px; font-size: 13px; font-weight: 500;
          margin-bottom: 16px; cursor: pointer; transition: all 0.15s;
          white-space: nowrap;
        }
        .p1-auth .google-btn:hover { border-color: var(--green-dark); background: var(--paper-2); }
        .p1-auth .google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .p1-auth .divider { display: flex; align-items: center; gap: 14px; margin: 14px 0 18px; font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; font-family: 'JetBrains Mono', monospace; }
        .p1-auth .divider::before, .p1-auth .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
        .p1-auth .options-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
        .p1-auth .options-row a { color: var(--green-dark); font-weight: 500; }
        .p1-auth .check-line { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
        .p1-auth .check-line input { width: 16px; height: 16px; accent-color: var(--green-dark); }
        .p1-auth .switch-line { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 18px; }
        .p1-auth .switch-line a { color: var(--green-dark); font-weight: 500; }
        .p1-auth .guest-link { text-align: center; margin-top: 10px; font-size: 13px; }
        .p1-auth .guest-link a { color: var(--ink-2); text-decoration: underline; }
        .p1-auth .btn.btn-primary.btn-block, .p1-auth .btn.btn-green.btn-block { padding: 14px 18px; font-size: 14px; }
      `}</style>
      <Header active="auth" onNav={onNav} />
      <main className="container p1-auth">
        <div className="frame">
          <div className="side">
            <div className="logo"><img src="assets/logos/horizontal-white.png" alt="Don Juan Security" /></div>
            <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 personalizada por WhatsApp.</p>
              <ul>
                <li>{Ic.check}<span>Carrito y wishlist sincronizados en todos tus dispositivos</span></li>
                <li>{Ic.check}<span>Seguimiento de pedidos en tiempo real</span></li>
                <li>{Ic.check}<span>Soporte técnico prioritario para tus instalaciones</span></li>
                <li>{Ic.check}<span>Descuentos exclusivos en promociones</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 nuevo.</h1>
                <p className="lede">Ingresa tus credenciales para continuar a tu cuenta.</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')} style={{ height: "93px", width: "556px" }}>Iniciar sesión {Ic.arrow}</button>

<div className="switch-line">¿Todavía no tienes cuenta? <a onClick={() => setMode('register')}>Crear una cuenta</a></div>
              </React.Fragment> :

<React.Fragment>
                <h1>Crea tu cuenta.</h1>
                <p className="lede">En menos de 1 minuto. Un ejecutivo te contacta para completar tu registro.</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: 13, color: 'var(--ink-2)' }}>Acepto los términos y la política de privacidad</span>
                </label>

<button className="btn btn-green 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>{`
        .p1-tech-header {
          background: var(--forest-deep); color: white;
          padding: 14px 0; border-bottom: 1px solid rgba(141,193,73,0.18);
        }
        .p1-tech-header .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
        .p1-tech-header .left { display: flex; align-items: center; gap: 18px; }
        .p1-tech-header .logo img { height: 28px; }
        .p1-tech-header .badge-sub {
          padding: 4px 10px; background: var(--green-dark); color: white;
          border-radius: 4px; font-size: 10px; font-weight: 600;
          letter-spacing: 0.1em; font-family: 'JetBrains Mono', monospace;
        }
        .p1-tech-header nav { display: flex; gap: 4px; }
        .p1-tech-header nav a { padding: 8px 14px; font-size: 13px; color: rgba(255,255,255,0.65); border-radius: 6px; cursor: pointer; }
        .p1-tech-header nav a:hover { color: white; background: rgba(141,193,73,0.10); }
        .p1-tech-header nav a.active { color: white; background: rgba(141,193,73,0.18); }
        .p1-tech-header .domain {
          font-family: 'JetBrains Mono', monospace; font-size: 11px;
          color: var(--green); letter-spacing: 0.08em;
          display: flex; align-items: center; gap: 8px;
        }
        .p1-tech-header .domain::before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }

/* ============ DIRECTORY (public) ============ */
        .p1-tech-dir-hero {
          padding: 60px 0 50px;
          background: linear-gradient(180deg, #102921 0%, var(--forest-deep) 100%);
          color: white;
          position: relative;
          overflow: hidden;
        }
        .p1-tech-dir-hero::after {
          content:""; position: absolute;
          right: -200px; top: 0;
          width: 500px; height: 100%;
          background: url('assets/logos/mark-green.png') center/contain no-repeat;
          opacity: 0.05;
        }
        .p1-tech-dir-hero h1 { font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; max-width: 720px; position: relative; }
        .p1-tech-dir-hero h1 em { font-style: normal; color: var(--green); }
        .p1-tech-dir-hero .lede { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 520px; margin-top: 14px; position: relative; }
        .p1-tech-dir-hero .access {
          margin-top: 22px; position: relative;
          display: flex; gap: 10px; flex-wrap: wrap;
        }

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

.p1-tech-list {
          padding: 32px 0 80px;
        }
        .p1-tech-list .head-row {
          display: flex; justify-content: space-between; align-items: center;
          margin-bottom: 22px;
        }
        .p1-tech-list .head-row .count { font-size: 13px; color: var(--ink-2); }
        .p1-tech-list .head-row .count strong { color: var(--ink); font-weight: 600; }
        .p1-tech-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
        }
        .p1-tech-card {
          background: white; border: 1px solid var(--line); border-radius: 14px;
          padding: 22px; display: flex; flex-direction: column; gap: 14px;
          transition: all 0.2s;
        }
        .p1-tech-card:hover {
          border-color: var(--green-soft);
          transform: translateY(-2px);
          box-shadow: 0 16px 32px -16px rgba(14,51,38,0.16);
        }
        .p1-tech-card .top { display: flex; gap: 14px; }
        .p1-tech-card .av {
          width: 60px; height: 60px; background: var(--paper-2);
          border-radius: 50%; padding: 8px;
          color: var(--forest-deep); border: 2px solid var(--green-dark);
          flex-shrink: 0; display: flex; align-items: center; justify-content: center;
          font-weight: 700; font-size: 18px;
        }
        .p1-tech-card .top h4 { font-size: 16px; font-weight: 600; color: var(--ink); }
        .p1-tech-card .top .city { font-size: 12px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
        .p1-tech-card .top .city svg { width: 12px; height: 12px; }
        .p1-tech-card .status-row { display: flex; align-items: center; gap: 8px; }
        .p1-tech-card .status-row .badge-avail {
          padding: 4px 10px; border-radius: 999px;
          background: rgba(141, 193, 73, 0.18); color: var(--green-deep);
          font-size: 11px; font-weight: 600;
          display: inline-flex; align-items: center; gap: 6px;
        }
        .p1-tech-card .status-row .badge-avail::before { content:""; width: 6px; height: 6px; background: var(--green-dark); border-radius: 50%; }
        .p1-tech-card .status-row .badge-busy {
          padding: 4px 10px; border-radius: 999px;
          background: var(--paper-2); color: var(--ink-3);
          font-size: 11px; font-weight: 600;
        }
        .p1-tech-card .stars { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
        .p1-tech-card .stars svg { color: var(--green-dark); width: 13px; height: 13px; }
        .p1-tech-card .specs { display: flex; gap: 6px; flex-wrap: wrap; }
        .p1-tech-card .specs span {
          font-size: 11px; padding: 4px 10px;
          background: var(--paper-2); border-radius: 999px;
          color: var(--ink-2);
        }
        .p1-tech-card .ctas { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
        .p1-tech-card .ctas .btn { flex: 1; padding: 10px 14px; font-size: 13px; }

/* ============ LOGIN ============ */
        .p1-tech-auth {
          padding: 60px 0 100px;
          background: var(--paper);
        }
        .p1-tech-auth .frame {
          max-width: 480px; margin: 0 auto;
          background: white; border: 1px solid var(--line); border-radius: 18px;
          padding: 44px 48px;
          box-shadow: 0 32px 60px -32px rgba(14,51,38,0.14);
        }
        .p1-tech-auth h1 { font-size: 28px; font-weight: 600; color: var(--forest-deep); margin-bottom: 6px; }
        .p1-tech-auth .lede { font-size: 14px; color: var(--ink-3); margin-bottom: 22px; }
        .p1-tech-auth .toggle { display: flex; background: var(--paper-2); padding: 4px; border-radius: 999px; margin-bottom: 24px; }
        .p1-tech-auth .toggle button { flex: 1; padding: 9px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
        .p1-tech-auth .toggle button.active { background: white; color: var(--forest); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .p1-tech-auth .google-btn {
          display: inline-flex; align-items: center; justify-content: center; gap: 10px;
          padding: 12px 16px; width: 100%; background: white; border: 1px solid var(--line);
          border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer;
          margin-bottom: 16px; transition: all 0.15s;
        }
        .p1-tech-auth .google-btn:hover { border-color: var(--green-dark); background: var(--paper-2); }
        .p1-tech-auth .google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
        .p1-tech-auth .divider { display: flex; align-items: center; gap: 14px; margin: 14px 0 18px; font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; font-family: 'JetBrains Mono', monospace; }
        .p1-tech-auth .divider::before, .p1-tech-auth .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
        .p1-tech-auth .options-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 18px; gap: 10px; flex-wrap: wrap; }
        .p1-tech-auth .options-row a { color: var(--green-dark); font-weight: 500; }
        .p1-tech-auth .check-line { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
        .p1-tech-auth .note { text-align: center; margin-top: 18px; font-size: 12px; color: var(--ink-3); }

/* ============ PROFILE ============ */
        .p1-tech-prof-section { padding: 32px 0 80px; }
        .p1-tech-profile {
          background: white; border: 1px solid var(--line); border-radius: 14px;
          padding: 36px;
        }
        .p1-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;
        }
        .p1-tech-profile .avatar {
          width: 96px; height: 96px; border-radius: 50%;
          background: var(--cream); padding: 14px;
          border: 3px solid var(--green-dark); flex-shrink: 0;
          color: var(--forest-deep);
          display: flex; align-items: center; justify-content: center;
        }
        .p1-tech-profile .avatar img { width: 100%; height: 100%; object-fit: contain; }
        .p1-tech-profile .top h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
        .p1-tech-profile .top .meta { font-size: 13px; color: var(--ink-3); display: flex; gap: 14px; flex-wrap: wrap; }
        .p1-tech-profile .top .meta span { display: inline-flex; align-items: center; gap: 6px; }
        .p1-tech-profile .top .meta .verified { color: var(--green-dark); font-weight: 500; }
        .p1-tech-profile .top .meta .verified svg { width: 13px; height: 13px; }
        .p1-tech-profile .top .meta .meta-svg svg { width: 13px; height: 13px; }

.p1-tech-avail-toggle {
          margin-left: auto;
          display: flex; align-items: center; gap: 12px;
          background: var(--paper-2); padding: 8px 14px; border-radius: 999px;
        }
        .p1-tech-avail-toggle .switch {
          width: 38px; height: 22px; background: var(--green-dark);
          border-radius: 999px; position: relative; cursor: pointer; transition: background 0.2s;
        }
        .p1-tech-avail-toggle .switch::after {
          content:""; position: absolute; top: 2px; right: 2px;
          width: 18px; height: 18px; background: white;
          border-radius: 50%; transition: all 0.2s;
        }
        .p1-tech-avail-toggle.off .switch { background: var(--ink-4); }
        .p1-tech-avail-toggle.off .switch::after { left: 2px; right: auto; }
        .p1-tech-avail-toggle .lbl { font-size: 13px; font-weight: 500; color: var(--forest-deep); }

.p1-tech-approval {
          padding: 16px 20px;
          background: rgba(141, 193, 73, 0.12);
          border: 1px solid var(--green-soft);
          border-radius: 12px;
          display: flex; gap: 14px; align-items: center;
          margin-bottom: 28px;
        }
        .p1-tech-approval .ic { width: 36px; height: 36px; background: var(--green-dark); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .p1-tech-approval .ic svg { width: 18px; height: 18px; }
        .p1-tech-approval h4 { font-size: 14px; font-weight: 600; color: var(--forest-deep); }
        .p1-tech-approval p { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

.p1-tech-profile .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
        .p1-tech-profile .field { margin-bottom: 0; }
        .p1-tech-profile .span2 { grid-column: span 2; }
        .p1-tech-profile h3 { font-size: 16px; font-weight: 600; margin: 0 0 16px; color: var(--forest-deep); }
        .p1-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; }

.p1-tech-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 32px; }
        .p1-tech-pills .chip { padding: 6px 14px; background: var(--green-dark); color: white; border-radius: 999px; font-size: 12px; font-weight: 500; }
        .p1-tech-pills .add { padding: 6px 14px; background: var(--paper-2); border: 1px dashed var(--line); border-radius: 999px; font-size: 12px; color: var(--ink-3); }
      `}</style>

{/* Sub-domain header */}
      <header className="p1-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="Don Juan Security" /></a>
              <span className="badge-sub">PORTAL TÉCNICOS</span>
            </div>
            <nav>
              <a className={view === 'directory' ? 'active' : ''} onClick={() => setView('directory')}>Directorio público</a>
              <a className={view === 'login' ? 'active' : ''} onClick={() => setView('login')}>Acceso técnicos</a>
              <a className={view === 'profile' ? 'active' : ''} onClick={() => setView('profile')}>Mi perfil</a>
            </nav>
            <span className="domain">tecnicos.donjuansecurity.com</span>
          </div>
        </div>
      </header>

{/* === 1. DIRECTORY (public) === */}
      {view === 'directory' &&
      <React.Fragment>
          <section className="p1-tech-dir-hero">
            <div className="container">
              <div className="kicker" style={{ color: 'var(--green)' }}>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 por WhatsApp y coordina tu instalación de forma directa.</p>
              <div className="access">
                <button className="btn btn-green" onClick={() => setView('login')}>¿Eres técnico? Regístrate aquí {Ic.arrow}</button>
                <button className="btn" style={{ background: 'transparent', color: 'white', border: '1px solid rgba(255,255,255,0.18)' }} onClick={() => setView('login')}>Iniciar sesión</button>
              </div>
            </div>
          </section>

<section className="p1-tech-filters">
            <div className="container">
              <div className="row">
                <div className="field search-field">
                  <label>Buscar técnico</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 y portones</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" style={{ padding: '12px 22px' }}>Aplicar filtros</button>
              </div>
            </div>
          </section>

<section className="container p1-tech-list">
            <div className="head-row">
              <div className="count">Mostrando <strong>1–9</strong> de <strong>34</strong> técnicos certificados</div>
              <select style={{ padding: '8px 12px', border: '1px solid var(--line)', borderRadius: 8, fontSize: 13, background: 'white' }}>
                <option>Mejor calificados</option><option>Más cercanos</option><option>Más experiencia</option>
              </select>
            </div>
            <div className="p1-tech-grid">
              {[
            { name: 'Carlos Méndez', city: 'Ciudad Bolívar · Puerto Ordaz', rating: 4.8, jobs: 47, specs: ['CCTV', 'Motores', 'Alarmas'], avail: true, initials: 'CM' },
            { name: 'María Rodríguez', city: 'Caracas · Chacao', 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 · San Diego', 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', 'Alarmas', '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', 'Motores'], 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="p1-tech-card" key={i}>
                  <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" style={{ marginTop: 8 }}>
                        {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>
      }

{/* === 2. LOGIN === */}
      {view === 'login' &&
      <section className="p1-tech-auth">
          <div className="container">
            <div className="frame">
              <h1>Acceso de técnicos</h1>
              <p className="lede">Inicia sesión o regístrate para aparecer en el directorio.</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 TU 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-green btn-block" onClick={() => setView('profile')}>Ingresar al portal {Ic.arrow}</button>

<p className="note">Tu cuenta debe estar aprobada por administración para aparecer en el directorio público.</p>
            </div>
          </div>
        </section>
      }

{/* === 3. PROFILE === */}
      {view === 'profile' &&
      <section className="container p1-tech-prof-section">
          <div className="p1-tech-profile">
            <div className="top">
              <div className="avatar"><img src="assets/product-camera.svg" alt="" /></div>
              <div>
                <h2>Carlos Méndez</h2>
                <div className="meta">
                  <span className="verified">{Ic.check}Cuenta aprobada · 12 mar 2026</span>
                  <span className="meta-svg">{Ic.pin}Ciudad Bolívar · Puerto Ordaz</span>
                </div>
              </div>
              <div className="p1-tech-avail-toggle">
                <span className="lbl">Disponible para trabajo</span>
                <span className="switch"></span>
              </div>
            </div>

<div className="p1-tech-approval">
              <div className="ic">{Ic.check}</div>
              <div>
                <h4>Estado: Aprobado por administración</h4>
                <p>Apareces en el directorio público y los clientes te pueden contactar por WhatsApp.</p>
              </div>
            </div>

<h3>Información de contacto</h3>
            <div className="grid" style={{ marginBottom: 32 }}>
              <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="p1-tech-pills">
              <span className="chip">Cámaras CCTV</span>
              <span className="chip">Motores y portones</span>
              <span className="chip">Alarmas e intrusión</span>
              <span className="chip">Control de accesos</span>
              <span className="add">+ Agregar especialidad</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-outline" onClick={() => setView('directory')}>Cerrar sesión</button>
              <button className="btn btn-green btn-lg">Guardar cambios</button>
            </div>
          </div>
        </section>
      }

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

};

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