// Screens 01 — HOME for Propuesta 2 (Vigilancia)

// Product card reusable
const ProductCard = ({ p, onClick }) => {
  const badge = p.tag === 'nuevo' ? <span className="badge new">NUEVO</span>
              : p.tag === 'oferta' ? <span className="badge sale">-{Math.round((1-p.price/(p.oldPrice||p.price))*100)}%</span>
              : p.tag === 'destacado' ? <span className="badge">★ DESTACADO</span>
              : null;
  return (
    <div className="product-card" onClick={onClick}>
      <div className="img-wrap">
        <span className="corner-tl"></span><span className="corner-tr"></span>
        <span className="corner-bl"></span><span className="corner-br"></span>
        {badge}
        <ProductImage/>
      </div>
      <div className="info">
        <div className="sku-row">
          <span>{p.sku}</span>
          <span className="brand">{p.brand}</span>
        </div>
        <h3 className="name">{p.name}</h3>
        <div className="spec-row">
          <span>{p.power}</span>
          <span>★ {p.rating}</span>
          <span>STK {p.stock}</span>
        </div>
        <div className="price-row">
          <span className="price">${p.price.toFixed(2)}</span>
          {p.oldPrice && <span className="price-old">${p.oldPrice.toFixed(2)}</span>}
        </div>
        <div className="add-row">
          <button>+ AGREGAR</button>
          <button className="icon-only">{Ic.heart}</button>
        </div>
      </div>
    </div>
  );
};

const HomeScreen = ({ onNav }) => (
  <React.Fragment>
    <style>{`
      .p2-hero {
        padding: 50px 0 40px;
        position: relative; overflow: hidden;
        border-bottom: 1px solid var(--line);
      }
      .p2-hero .dots {
        position: absolute; inset: 0;
        background-image: radial-gradient(circle, rgba(159, 211, 86, 0.07) 1px, transparent 1px);
        background-size: 24px 24px;
        pointer-events: none;
      }
      .p2-hero .container { position: relative; }
      .p2-hero .top-strip {
        display: flex; justify-content: space-between; align-items: center;
        padding-bottom: 22px; margin-bottom: 40px;
        border-bottom: 1px dashed var(--line);
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px; color: var(--ink-3);
        letter-spacing: 0.1em;
      }
      .p2-hero .top-strip .left { display: flex; gap: 28px; align-items: center; }
      .p2-hero .top-strip .pulse { color: var(--green); display: inline-flex; align-items: center; gap: 8px; }
      .p2-hero .top-strip .pulse::before {
        content: ""; width: 8px; height: 8px; background: var(--green);
        border-radius: 50%; box-shadow: 0 0 12px var(--green-glow-strong);
        animation: pulse 1.4s ease-in-out infinite;
      }

      .p2-hero .grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
      .p2-hero h1 {
        font-size: 88px; line-height: 0.95; letter-spacing: -0.04em;
        font-weight: 500; color: var(--ink);
        margin: 22px 0 26px;
      }
      .p2-hero h1 em { font-style: normal; color: var(--green); font-weight: 500; }
      .p2-hero p.lede {
        font-size: 17px; line-height: 1.5; max-width: 560px;
        color: var(--ink-2); margin-bottom: 32px;
      }
      .p2-hero .stats {
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: 28px; padding-top: 32px; border-top: 1px solid var(--line);
      }
      .p2-hero .stats div {
        font-family: 'JetBrains Mono', monospace; font-size: 11px;
        color: var(--ink-3); letter-spacing: 0.1em;
      }
      .p2-hero .stats strong {
        display: block; font-family: 'Space Grotesk';
        font-size: 32px; color: var(--ink);
        letter-spacing: -0.02em; font-weight: 600; margin-bottom: 4px;
      }
      .p2-hero .stats em { font-style: normal; color: var(--green); }
      .p2-hero .ctas { display: flex; gap: 12px; margin-bottom: 40px; }

      .p2-hero .right {
        aspect-ratio: 1; position: relative;
        background: var(--surface);
        border: 1px solid var(--line);
        display: flex; align-items: center; justify-content: center;
        padding: 40px;
        overflow: hidden;
      }
      .p2-hero .right::before, .p2-hero .right::after {
        content: ""; position: absolute;
        background: var(--green-glow);
      }
      .p2-hero .right::before {
        top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, var(--green), transparent);
      }
      .p2-hero .right .corners span {
        position: absolute; width: 24px; height: 24px;
        border-color: var(--green);
      }
      .p2-hero .right .corners .tl { top: 16px; left: 16px; border-top: 2px solid; border-left: 2px solid; }
      .p2-hero .right .corners .tr { top: 16px; right: 16px; border-top: 2px solid; border-right: 2px solid; }
      .p2-hero .right .corners .bl { bottom: 16px; left: 16px; border-bottom: 2px solid; border-left: 2px solid; }
      .p2-hero .right .corners .br { bottom: 16px; right: 16px; border-bottom: 2px solid; border-right: 2px solid; }
      .p2-hero .right .ph { width: 78%; height: 78%; }
      .p2-hero .right .info-tag {
        position: absolute; bottom: 32px; left: 32px;
        font-family: 'JetBrains Mono', monospace; font-size: 11px;
        color: var(--green); letter-spacing: 0.08em;
        padding: 6px 12px; background: var(--bg);
        border: 1px solid var(--green);
      }
      .p2-hero .right .price-tag {
        position: absolute; top: 32px; right: 32px;
        background: var(--bg); padding: 12px 16px;
        border: 1px solid var(--line-strong);
        font-family: 'JetBrains Mono', monospace;
      }
      .p2-hero .right .price-tag small { display: block; font-size: 9px; color: var(--ink-3); letter-spacing: 0.1em; margin-bottom: 4px; }
      .p2-hero .right .price-tag strong { color: var(--green); font-size: 22px; font-family: 'Space Grotesk'; font-weight: 700; letter-spacing: -0.02em; }

      .p2-trust { padding: 28px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
      .p2-trust .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
      .p2-trust .item { display: flex; gap: 16px; padding: 16px 28px; align-items: center; border-right: 1px solid var(--line); }
      .p2-trust .item:last-child { border-right: 0; }
      .p2-trust .item:first-child { padding-left: 0; }
      .p2-trust .num { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--green); letter-spacing: 0.1em; flex-shrink: 0; }
      .p2-trust h4 { font-size: 14px; font-weight: 600; color: var(--ink); }
      .p2-trust p { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }

      .p2-cats { padding: 80px 0; }
      .p2-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
      .p2-cat {
        background: var(--surface); border: 1px solid var(--line);
        padding: 28px 32px;
        display: flex; align-items: center; gap: 24px;
        transition: all 0.2s; cursor: pointer;
        position: relative; overflow: hidden;
      }
      .p2-cat:hover { border-color: var(--green); box-shadow: 0 0 24px var(--green-glow); }
      .p2-cat .hex {
        width: 64px; height: 64px;
        background: var(--bg);
        border: 1px solid var(--line-strong);
        display: flex; align-items: center; justify-content: center;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        color: var(--green); flex-shrink: 0;
      }
      .p2-cat .hex svg { width: 28px; height: 28px; }
      .p2-cat .num {
        position: absolute; top: 14px; right: 18px;
        font-family: 'JetBrains Mono', monospace; font-size: 10px;
        color: var(--ink-4); letter-spacing: 0.1em;
      }
      .p2-cat h4 { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
      .p2-cat p { font-size: 12px; color: var(--green); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; }
      .p2-cat .arr { margin-left: auto; color: var(--ink-3); transition: all 0.15s; }
      .p2-cat:hover .arr { color: var(--green); transform: translateX(4px); }

      .p2-feat { padding: 60px 0; border-top: 1px solid var(--line); }
      .p2-feat .head-row { display: flex; align-items: end; justify-content: space-between; margin-bottom: 36px; }
      .p2-feat .ftabs { display: flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); }
      .p2-feat .ftabs button {
        padding: 9px 18px; font-size: 12px; font-weight: 600;
        color: var(--ink-3); font-family: 'JetBrains Mono', monospace;
        letter-spacing: 0.06em; text-transform: uppercase;
      }
      .p2-feat .ftabs button.active { background: var(--green); color: var(--bg); }
      .p2-feat .pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
      .p2-tech-cta {
        padding: 80px 0;
        position: relative; overflow: hidden;
        border-top: 1px solid var(--line);
        background: var(--surface);
      }
      .p2-tech-cta .container { position: relative; }
      .p2-tech-cta .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
      .p2-tech-cta h2 { font-size: 56px; line-height: 1; letter-spacing: -0.03em; font-weight: 500; margin-bottom: 22px; }
      .p2-tech-cta h2 em { font-style: normal; color: var(--green); }
      .p2-tech-cta p { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin-bottom: 28px; max-width: 460px; }
      .p2-tech-cta .ctas { display: flex; gap: 12px; }
      .p2-tech-cta .feat-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
        background: var(--line); padding: 1px;
      }
      .p2-tech-cta .feat-item {
        background: var(--bg); padding: 26px 24px;
      }
      .p2-tech-cta .feat-item .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green); letter-spacing: 0.1em; margin-bottom: 10px; }
      .p2-tech-cta .feat-item h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
      .p2-tech-cta .feat-item p { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

      .p2-news {
        padding: 60px 0 40px;
        background: var(--surface);
        border-top: 1px solid var(--line);
      }
      .p2-news .block {
        background: var(--bg); padding: 48px 56px;
        display: flex; align-items: center; justify-content: space-between; gap: 32px;
        border: 1px solid var(--line);
        position: relative; overflow: hidden;
      }
      .p2-news .block::before {
        content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
        background: var(--green);
      }
      .p2-news h2 { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; max-width: 480px; line-height: 1.1; }
      .p2-news h2 em { font-style: normal; color: var(--green); }
      .p2-news p { font-size: 14px; color: var(--ink-3); margin-top: 8px; max-width: 420px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
      .p2-news .form { display: flex; gap: 6px; flex: 1; max-width: 480px; }
      .p2-news .form input { flex: 1; padding: 14px 22px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); outline: 0; font-size: 14px; }
      .p2-news .form input:focus { border-color: var(--green); }
    `}</style>
    <Header active="home" onNav={onNav}/>
    <main>
      {/* HERO */}
      <section className="p2-hero">
        <div className="dots"></div>
        <div className="container">
          <div className="grid">
            <div>
              <div className="kicker">VIGILANCIA PROFESIONAL · CCTV 4K</div>
              <h1>Vigila lo que más importa,<br/><em>con grado militar.</em></h1>
              <p className="lede">Cámaras IP 4K con sensor SONY 1/1.8", visión nocturna IR de 60 metros y procesamiento por IA. Equipos profesionales de las marcas líderes del mundo, distribuidos en Venezuela con stock permanente.</p>
              <div className="ctas">
                <button className="btn btn-primary btn-lg" onClick={()=>onNav('shop')}>Ver catálogo {Ic.arrow}</button>
                <button className="btn btn-outline btn-lg">Hablar con asesor</button>
              </div>
            </div>
            <div className="right">
              <div className="corners"><span className="tl"></span><span className="tr"></span><span className="bl"></span><span className="br"></span></div>
              <ProductImage/>
              <span className="info-tag">// LIVE STOCK · 12 UND</span>
              <div className="price-tag">
                <small>DESDE</small>
                <strong>$287.50</strong>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TRUST */}
      <section className="p2-trust">
        <div className="container">
          <div className="row">
            <div className="item"><span className="num">/ 01</span><div><h4>Stock permanente</h4><p>847 SKU disponibles</p></div></div>
            <div className="item"><span className="num">/ 02</span><div><h4>Envío 24–72h</h4><p>Cobertura nacional</p></div></div>
            <div className="item"><span className="num">/ 03</span><div><h4>Pago manual seguro</h4><p>Transferencia / Pago Móvil</p></div></div>
            <div className="item"><span className="num">/ 04</span><div><h4>Soporte técnico</h4><p>WhatsApp · 8 a 18hs</p></div></div>
          </div>
        </div>
      </section>

      {/* CATEGORIES */}
      <section className="p2-cats">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="kicker">EXPLORÁ POR CATEGORÍA · 06 ÁREAS</div>
              <h2>Tu instalación,<br/>desde el sensor hasta la nube.</h2>
            </div>
            <a className="more">Ver el catálogo completo {Ic.arrow}</a>
          </div>
          <div className="p2-cat-grid">
            {CATEGORIES.map((c, i) => (
              <div className="p2-cat" key={c.id} onClick={()=>onNav('shop')}>
                <span className="num">CAT · 0{i+1}</span>
                <div className="hex">{Ic.hexagon}</div>
                <div>
                  <h4>{c.name}</h4>
                  <p>// {c.sub}</p>
                </div>
                <span className="arr">{Ic.chevRight}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED */}
      <section className="p2-feat">
        <div className="container">
          <div className="head-row">
            <div>
              <div className="kicker">PRODUCTOS DESTACADOS · TOP-RATED</div>
              <h2 style={{fontSize: 38, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--ink)'}}>Los que más se mueven esta semana.</h2>
            </div>
          </div>
          <div className="pgrid">
            {PRODUCTS.slice(0,8).map(p => (
              <ProductCard key={p.sku} p={p} onClick={()=>onNav('product')}/>
            ))}
          </div>
        </div>
      </section>

      {/* TECH PORTAL */}
      <section className="p2-tech-cta">
        <div className="container">
          <div className="grid">
            <div>
              <div className="kicker">PORTAL DE TÉCNICOS · SUBDOMINIO</div>
              <h2>¿Instalas equipos?<br/><em>Súmate a la red.</em></h2>
              <p>El directorio público de técnicos certificados Don Juan Security. Los clientes que compran sus equipos con nosotros te contactan directo para la instalación. Sin comisiones.</p>
              <div className="ctas">
                <button className="btn btn-primary btn-lg" onClick={()=>onNav('tech')}>Registrarme {Ic.arrow}</button>
                <button className="btn btn-ghost btn-lg" onClick={()=>onNav('tech')}>Ver técnicos</button>
              </div>
            </div>
            <div className="feat-grid">
              <div className="feat-item"><div className="num">// 01</div><h4>Registro abierto</h4><p>Email o Google. 3 minutos de carga inicial.</p></div>
              <div className="feat-item"><div className="num">// 02</div><h4>Aprobación 24h</h4><p>Verificamos identidad y certificaciones.</p></div>
              <div className="feat-item"><div className="num">// 03</div><h4>Tarifas mayoristas</h4><p>Mejores precios para técnicos activos.</p></div>
              <div className="feat-item"><div className="num">// 04</div><h4>Trabajos directos</h4><p>El cliente te contacta, cobras entero.</p></div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <Footer onNav={onNav}/>
    <WAFloat/>
  </React.Fragment>
);

window.HomeScreen = HomeScreen;
window.ProductCard = ProductCard;