// 01 — HOME for Propuesta 3 (Perímetro / Editorial)

const ProductCard = ({ p, onClick }) => {
  const badge = p.tag === 'nuevo' ? <span className="badge new">NUEVO</span>
              : p.tag === 'oferta' ? <span className="badge sale">OFERTA</span>
              : p.tag === 'destacado' ? <span className="badge">★ DESTACADO</span>
              : null;
  return (
    <div className="product-card" onClick={onClick}>
      <div className="img-wrap">
        {badge}
        <button className="wish">{Ic.heart}</button>
        <ProductImage/>
      </div>
      <div className="info">
        <span className="sku">{p.sku}</span>
        <h3 className="name">{p.name}</h3>
        <span className="stock">Stock · {p.stock} und</span>
        <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>
    </div>
  );
};

const HomeScreen = ({ onNav }) => (
  <React.Fragment>
    <style>{`
      /* HERO — editorial style, big serif */
      .p3-hero { padding: 60px 0 80px; background: var(--paper); position: relative; overflow: hidden; }
      .p3-hero .index-strip { display: flex; justify-content: space-between; align-items: center; padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
      .p3-hero .index-strip .left { display: flex; gap: 28px; }
      .p3-hero .index-strip .left strong { color: var(--forest); }

      .p3-hero .layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; }
      .p3-hero h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 132px; line-height: 0.85; letter-spacing: -0.045em; color: var(--forest-deep); margin-bottom: 0; }
      .p3-hero h1 em { font-style: italic; color: var(--green-deep); font-weight: 400; }
      .p3-hero h1 .line2 { display: block; margin-left: 80px; }
      .p3-hero .right { padding-bottom: 14px; }
      .p3-hero .right .lede { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin-bottom: 24px; max-width: 380px; }
      .p3-hero .right .lede em { font-family: 'Fraunces', serif; font-style: italic; color: var(--forest-deep); font-size: 18px; }
      .p3-hero .right .ctas { display: flex; gap: 10px; }

      .p3-hero .featured-band { margin-top: 56px; display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 18px; align-items: stretch; }
      .p3-hero .featured-band .label-card { display: flex; flex-direction: column; justify-content: space-between; padding: 24px; background: var(--cream); border-radius: 12px; }
      .p3-hero .featured-band .label-card .ix-num { font-size: 14px; }
      .p3-hero .featured-band .label-card h3 { font-family: 'Fraunces', serif; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--forest-deep); margin-top: 14px; }
      .p3-hero .featured-band .label-card h3 em { font-style: italic; color: var(--green-deep); }
      .p3-hero .featured-band .label-card p { font-size: 12px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; margin-top: 16px; }

      .p3-hero .featured-band .main-card { background: var(--forest-deep); color: var(--cream); border-radius: 12px; padding: 28px 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
      .p3-hero .featured-band .main-card::after { content: ""; position: absolute; right: -100px; bottom: -100px; width: 320px; height: 320px; background: url('assets/logos/mark-green.png') center/contain no-repeat; opacity: 0.10; }
      .p3-hero .featured-band .main-card .top { position: relative; }
      .p3-hero .featured-band .main-card .kicker { color: var(--green); margin-bottom: 12px; }
      .p3-hero .featured-band .main-card .kicker::before { background: var(--green); }
      .p3-hero .featured-band .main-card h3 { font-family: 'Fraunces', serif; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; }
      .p3-hero .featured-band .main-card h3 em { font-style: italic; color: var(--green); }
      .p3-hero .featured-band .main-card .specs { display: flex; gap: 18px; margin-top: 22px; position: relative; }
      .p3-hero .featured-band .main-card .specs div { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(244,241,234,0.5); letter-spacing: 0.08em; }
      .p3-hero .featured-band .main-card .specs strong { display: block; font-family: 'Manrope'; font-size: 22px; color: var(--green); margin-bottom: 3px; font-weight: 700; letter-spacing: -0.02em; }

      .p3-hero .featured-band .price-card { background: var(--cream-2); border-radius: 12px; padding: 24px; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
      .p3-hero .featured-band .price-card .ph-wrap { aspect-ratio: 1; background: var(--paper); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
      .p3-hero .featured-band .price-card .label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; }
      .p3-hero .featured-band .price-card h4 { font-family: 'Fraunces', serif; font-size: 19px; line-height: 1.15; margin: 6px 0 12px; color: var(--forest-deep); }
      .p3-hero .featured-band .price-card .price { font-family: 'Fraunces', serif; font-size: 30px; color: var(--green-deep); letter-spacing: -0.02em; font-weight: 500; }
      .p3-hero .featured-band .price-card .price small { font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; display: block; letter-spacing: 0.05em; margin-bottom: 2px; }

      /* INDEX strip (categories as editorial index) */
      .p3-index { padding: 70px 0 90px; background: var(--cream); }
      .p3-index h2.serif { font-size: 48px; max-width: 760px; margin-bottom: 12px; }
      .p3-index .ix-rows { display: flex; flex-direction: column; }
      .p3-index .ix-row {
        display: grid; grid-template-columns: 60px 1fr 1fr 60px;
        gap: 32px; align-items: center;
        padding: 24px 8px;
        border-bottom: 1px solid var(--line);
        cursor: pointer; transition: all 0.2s;
        position: relative;
      }
      .p3-index .ix-row:first-child { border-top: 1px solid var(--line); }
      .p3-index .ix-row:hover { padding-left: 22px; }
      .p3-index .ix-row .num { font-family: 'Fraunces', serif; font-style: italic; font-size: 22px; color: var(--ink-3); font-weight: 400; }
      .p3-index .ix-row .title { font-family: 'Fraunces', serif; font-size: 28px; letter-spacing: -0.02em; color: var(--forest-deep); font-weight: 500; }
      .p3-index .ix-row .meta { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
      .p3-index .ix-row .meta strong { color: var(--forest); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; }
      .p3-index .ix-row .arr { width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-3); justify-self: end; transition: all 0.2s; }
      .p3-index .ix-row:hover .arr { background: var(--forest-deep); color: var(--paper); border-color: var(--forest-deep); }

      /* TRUST — minimal */
      .p3-trust { padding: 36px 0; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
      .p3-trust .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
      .p3-trust .item { display: flex; gap: 16px; align-items: center; padding: 0 16px; border-right: 1px solid var(--line); }
      .p3-trust .item:last-child { border-right: 0; }
      .p3-trust .item:first-child { padding-left: 0; }
      .p3-trust .ic { width: 44px; height: 44px; background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--green-deep); flex-shrink: 0; }
      .p3-trust .ic.hexbox { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
      .p3-trust .ic svg { width: 22px; height: 22px; }
      .p3-trust h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
      .p3-trust p { font-size: 12px; color: var(--ink-3); }

      /* FEATURED — products */
      .p3-feat { padding: 90px 0; background: var(--paper); }
      .p3-feat .pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

      /* EDITORIAL split (dark) */
      .p3-editorial { padding: 90px 0; background: var(--forest-deep); color: var(--cream); position: relative; overflow: hidden; }
      .p3-editorial::before { content: ""; position: absolute; right: -200px; top: -100px; width: 600px; height: 600px; background: url('assets/logos/mark-green.png') center/contain no-repeat; opacity: 0.04; pointer-events: none; }
      .p3-editorial .container { position: relative; }
      .p3-editorial .layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
      .p3-editorial h2 { font-family: 'Fraunces', serif; font-size: 76px; line-height: 0.92; letter-spacing: -0.03em; font-weight: 500; color: var(--cream); margin-bottom: 24px; }
      .p3-editorial h2 em { font-style: italic; color: var(--green); }
      .p3-editorial p.lede { font-size: 16px; line-height: 1.6; color: rgba(244,241,234,0.75); margin-bottom: 28px; max-width: 460px; }
      .p3-editorial .ctas { display: flex; gap: 10px; }
      .p3-editorial .right { position: relative; }
      .p3-editorial .quote-card {
        background: rgba(244,241,234,0.04);
        border: 1px solid rgba(244,241,234,0.1);
        border-radius: 14px;
        padding: 36px 38px;
        position: relative;
      }
      .p3-editorial .quote-card .mark { position: absolute; top: -16px; left: 32px; font-family: 'Fraunces', serif; font-size: 80px; line-height: 1; color: var(--green); font-style: italic; }
      .p3-editorial .quote-card blockquote { font-family: 'Fraunces', serif; font-size: 26px; line-height: 1.25; color: var(--cream); font-style: italic; font-weight: 400; margin-bottom: 24px; }
      .p3-editorial .quote-card .author { display: flex; gap: 14px; align-items: center; padding-top: 20px; border-top: 1px solid rgba(244,241,234,0.1); }
      .p3-editorial .quote-card .author .av { width: 44px; height: 44px; background: rgba(141,193,73,0.18); flex-shrink: 0; padding: 8px; }
      .p3-editorial .quote-card .author h5 { font-size: 14px; font-weight: 600; color: var(--cream); }
      .p3-editorial .quote-card .author p { font-size: 12px; color: rgba(244,241,234,0.55); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; }

      .p3-editorial .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 36px; padding-top: 32px; border-top: 1px solid rgba(244,241,234,0.1); }
      .p3-editorial .stats div { padding: 0 24px; border-right: 1px solid rgba(244,241,234,0.1); }
      .p3-editorial .stats div:first-child { padding-left: 0; }
      .p3-editorial .stats div:last-child { border-right: 0; }
      .p3-editorial .stats strong { display: block; font-family: 'Fraunces', serif; font-size: 42px; line-height: 1; letter-spacing: -0.02em; color: var(--green); font-weight: 500; }
      .p3-editorial .stats span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(244,241,234,0.55); letter-spacing: 0.08em; margin-top: 6px; display: block; }

      /* TECH CTA — large hex */
      .p3-tech { padding: 90px 0; background: var(--cream); position: relative; overflow: hidden; }
      .p3-tech .layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
      .p3-tech h2.serif { font-size: 64px; line-height: 0.95; margin-bottom: 18px; }
      .p3-tech .lede { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-bottom: 26px; max-width: 460px; }
      .p3-tech .ctas { display: flex; gap: 10px; }
      .p3-tech .hex-stack { display: flex; flex-direction: column; gap: 12px; }
      .p3-tech .hex-row { display: flex; align-items: center; gap: 20px; padding: 24px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
      .p3-tech .hex-row .hex { width: 52px; height: 52px; background: var(--forest-deep); color: var(--green); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; flex-shrink: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
      .p3-tech .hex-row h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--ink); }
      .p3-tech .hex-row p { font-size: 13px; line-height: 1.5; color: var(--ink-2); }

      /* NOTES */
      .p3-notes { padding: 90px 0; background: var(--paper); }
      .p3-notes .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 22px; }
      .p3-note-big { background: var(--cream); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
      .p3-note-big .img-wrap { aspect-ratio: 16/10; padding: 28px; }
      .p3-note-big .body { padding: 28px 32px 32px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
      .p3-note-big .meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--green-deep); letter-spacing: 0.08em; margin-bottom: 12px; }
      .p3-note-big h3 { font-family: 'Fraunces', serif; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; color: var(--forest-deep); margin-bottom: 14px; font-weight: 500; }
      .p3-note-big h3 em { font-style: italic; color: var(--green-deep); }
      .p3-note-big p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-bottom: 18px; }
      .p3-note-small { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
      .p3-note-small .img-wrap { aspect-ratio: 16/9; padding: 22px; background: var(--cream); }
      .p3-note-small .body { padding: 22px 24px 26px; flex: 1; }
      .p3-note-small .meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--green-deep); letter-spacing: 0.08em; margin-bottom: 10px; }
      .p3-note-small h3 { font-family: 'Fraunces', serif; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; color: var(--forest-deep); margin-bottom: 10px; font-weight: 500; }
      .p3-note-small p { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
    `}</style>
    <Header active="home" onNav={onNav}/>
    <main>

      {/* HERO */}
      <section className="p3-hero">
        <div className="container">
          <div className="layout">
            <h1 className="serif">
              Tu casa<br/>
              <em>protegida,</em><br/>
              <span className="line2">con criterio.</span>
            </h1>
            <div className="right">
              <p className="lede"><em>Don Juan Security</em> es el catálogo curado de tecnología de seguridad para el hogar y el negocio. Cámaras 4K, motores para portones, alarmas, accesos biométricos y domótica IoT. Sin tiendas genéricas, sin productos de relleno.</p>
              <div className="ctas">
                <button className="btn btn-primary" onClick={()=>onNav('shop')}>Ver el catálogo {Ic.arrow}</button>
                <button className="btn btn-outline">Hablar con asesor</button>
              </div>
            </div>
          </div>

          {/* Featured band — 3 columns */}
          <div className="featured-band">
            <div className="label-card">
              <div>
                <span className="ix-num">— Edición 01</span>
                <h3 className="serif">Lo nuevo<br/>del <em>perímetro.</em></h3>
              </div>
              <p>// CURADO POR LA REDACCIÓN</p>
            </div>
            <div className="main-card">
              <div className="top">
                <div className="kicker">CCTV · PROTAGONISTA DE LA SEMANA</div>
                <h3 className="serif">Cámara IP Domo 4K<br/>con visión <em>nocturna</em> 60m.</h3>
              </div>
              <div className="specs">
                <div><strong>4K</strong>UHD</div>
                <div><strong>60m</strong>IR NOCHE</div>
                <div><strong>IP67</strong>EXTERIOR</div>
                <div><strong>22x</strong>ZOOM</div>
              </div>
            </div>
            <div className="price-card">
              <div className="ph-wrap"><ProductImage/></div>
              <div>
                <span className="label">DJ-CAM-IP4K-01 · HIKVISION</span>
                <h4>Domo IP 4K · Visión nocturna 60m</h4>
                <span className="price"><small>DESDE</small>$287.50</span>
              </div>
            </div>
          </div>

        </div>
      </section>

      {/* TRUST */}
      <section className="p3-trust">
        <div className="container">
          <div className="row">
            <div className="item"><div className="ic hexbox">{Ic.box}</div><div><h4>Stock permanente</h4><p>847 productos disponibles</p></div></div>
            <div className="item"><div className="ic hexbox">{Ic.truck}</div><div><h4>Envío rápido</h4><p>A todo el país en 24–72h</p></div></div>
            <div className="item"><div className="ic hexbox">{Ic.shield}</div><div><h4>Pago manual</h4><p>Transferencia / Pago Móvil</p></div></div>
            <div className="item"><div className="ic hexbox">{Ic.headset}</div><div><h4>Asesoría técnica</h4><p>Equipo de expertos por WhatsApp</p></div></div>
          </div>
        </div>
      </section>

      {/* INDEX of categories */}
      <section className="p3-index">
        <div className="container">
          <div className="section-head">
            <div className="left">
              <div className="kicker">ÍNDICE · 06 CATEGORÍAS</div>
              <h2 className="serif">El catálogo,<br/>como un <em>sumario.</em></h2>
              <p className="lede">No te pierdes navegando: cada categoría es una sección. Haz click en la que quieres explorar y entra directo al detalle técnico.</p>
            </div>
            <a className="more" onClick={()=>onNav('shop')}>Ir a la tienda completa {Ic.arrow}</a>
          </div>

          <div className="ix-rows">
            {CATEGORIES.map((c, i) => (
              <div className="ix-row" key={c.id} onClick={()=>onNav('shop')}>
                <span className="num">— 0{i+1}</span>
                <h3 className="title">{c.name}</h3>
                <div className="meta">
                  <strong>{c.sub.toUpperCase()}</strong><br/>
                  <span style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.05em'}}>// {[121, 87, 64, 42, 53, 38][i]} ARTÍCULOS</span>
                </div>
                <button className="arr">{Ic.chevRight}</button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED PRODUCTS */}
      <section className="p3-feat">
        <div className="container">
          <div className="section-head">
            <div className="left">
              <div className="kicker">SECCIÓN 02 · DESTACADOS</div>
              <h2 className="serif">Lo que más se<br/><em>mueve</em> esta semana.</h2>
            </div>
            <a className="more">Ver todo {Ic.arrow}</a>
          </div>
          <div className="pgrid">
            {PRODUCTS.slice(0,8).map(p => <ProductCard key={p.sku} p={p} onClick={()=>onNav('product')}/>)}
          </div>
        </div>
      </section>

      {/* EDITORIAL DARK SECTION */}
      <section className="p3-editorial">
        <div className="container">
          <div className="layout">
            <div>
              <div className="kicker">SECCIÓN 03 · ENSAYO</div>
              <h2>La seguridad no se compra<br/><em>en cualquier parte.</em></h2>
              <p className="lede">Llevamos quince años distribuyendo equipos de seguridad. Conocemos cada motor, cada cámara, cada placa controladora. Cuando un cliente nos pregunta qué necesita, no le vendemos: le recomendamos.</p>
              <div className="stats">
                <div><strong>15<em>a</em></strong><span>AÑOS EN EL MERCADO</span></div>
                <div><strong>3.2k</strong><span>CLIENTES ACTIVOS</span></div>
                <div><strong>847</strong><span>PRODUCTOS EN STOCK</span></div>
              </div>
            </div>
            <div className="right">
              <div className="quote-card">
                <span className="mark">"</span>
                <blockquote>Nos asesoraron motor, cámara y alarma para el depósito. Llegó en 48 horas y el técnico que nos recomendaron lo instaló perfecto. Hace dos años que somos clientes y no nos movemos de acá.</blockquote>
                <div className="author">
                  <div className="av"><PHOLDER label="JF" ar="1"/></div>
                  <div>
                    <h5>Javier Fernández</h5>
                    <p>// FERRETERÍA ANDINA · PUERTO ORDAZ</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TECH PORTAL */}
      <section className="p3-tech">
        <div className="container">
          <div className="layout">
            <div>
              <div className="kicker">SECCIÓN 04 · PORTAL DE TÉCNICOS</div>
              <h2 className="serif">¿Eres<br/>instalador?<br/><em>Súmate.</em></h2>
              <p className="lede">El directorio público de técnicos certificados Don Juan Security. Los clientes que compran sus equipos con nosotros te contactan directo. Sin comisiones. Cobras el trabajo entero.</p>
              <div className="ctas">
                <button className="btn btn-primary" onClick={()=>onNav('tech')}>Registrarme como técnico {Ic.arrow}</button>
                <button className="btn btn-outline" onClick={()=>onNav('tech')}>Ver técnicos</button>
              </div>
            </div>
            <div className="hex-stack">
              <div className="hex-row">
                <div className="hex">01</div>
                <div>
                  <h4>Registro y aprobación en 24h</h4>
                  <p>Sube tu cédula y certificaciones. Te validamos rápido.</p>
                </div>
              </div>
              <div className="hex-row">
                <div className="hex">02</div>
                <div>
                  <h4>−15% en equipos</h4>
                  <p>Tarifas mayoristas en todas las marcas para técnicos activos.</p>
                </div>
              </div>
              <div className="hex-row">
                <div className="hex">03</div>
                <div>
                  <h4>Trabajos directos del cliente</h4>
                  <p>Apareces en el listado público y recibes pedidos por WhatsApp.</p>
                </div>
              </div>
              <div className="hex-row">
                <div className="hex">04</div>
                <div>
                  <h4>Sin comisión</h4>
                  <p>El trabajo se paga directo entre tú y el cliente.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

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

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