<!DOCTYPE html>

<head>

<title>DeepFish | Catálogo de Productos</title>

<style>

body{margin:0;font-family:Arial, Helvetica, sans-serif;background:#0e1a1f;color:#fff;}

header{background:linear-gradient(135deg,#001f2b,#003d4f);padding:40px 20px;text-align:center;}

header h1{margin:0;font-size:2.5rem;letter-spacing:2px;}

header p{margin-top:10px;font-size:1.1rem;opacity:.85;}

.container{max-width:1200px;margin:auto;padding:40px 20px;}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;}

.card{background:#12252e;border-radius:12px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,0.3);transition:transform .3s ease;}

.card:hover{transform:translateY(-6px);}

.card img{width:100%;height:200px;object-fit:cover;}

.card-content{padding:20px;}

.card-content h3{margin:0 0 10px;font-size:1.2rem;}

.price{color:#1dd3b0;font-weight:bold;margin-bottom:10px;}

.card-content p{font-size:.95rem;opacity:.85;margin-bottom:15px;}

.btn{display:inline-block;padding:10px 16px;background:#1dd3b0;color:#000;text-decoration:none;border-radius:8px;font-weight:bold;text-align:center;}

.btn:hover{background:#17b89a;}

footer{background:#000f14;text-align:center;padding:20px;font-size:.85rem;opacity:.7;}

input, select, textarea, button{font-family:inherit;}

</style>

</head>

<body>

<div style="background:#000f14;padding:10px;text-align:center;font-size:0.9rem;">🔒 Para publicar en DeepFish es necesario registrar un método de pago</div>

<h1>DeepFish</h1>

<p>Marketplace profesional de peces de ornato | Compra, vende y promociona</p>

</header>

<h2>Catálogo de productos</h2>

</div>

</section>

<h2>Agregar nuevo producto</h2>

<label>Nombre del producto<br><input type="text" id="prod-name" required style="width:100%;padding:10px;margin-bottom:15px;"></label>

<label>Precio<br><input type="text" id="prod-price" required style="width:100%;padding:10px;margin-bottom:15px;"></label>

<label>Descripción<br><textarea id="prod-desc" required style="width:100%;padding:10px;margin-bottom:15px;"></textarea></label>

<label>URL de la imagen<br><input type="text" id="prod-img" required style="width:100%;padding:10px;margin-bottom:15px;"></label>

<button type="submit" class="btn">Agregar producto</button>

<p style="margin-top:10px;font-size:.85rem;opacity:.8;">Máximo 100 productos por vendedor</p>

</form>

</section>

<h2>Planes y suscripción</h2>

<h3>Plan mensual</h3>

<p>Incluye publicaciones activas, opción a productos destacados y acceso a compradores reales.</p>

<a href="https://link.mercadopago.com.mx/deepfishmx" target="_blank" class="btn">Renovar suscripción</a>

</div>

<h3>Comisión por venta</h3>

<p>Comisión reducida aplicada únicamente cuando se concreta una venta.</p>

<a href="https://link.mercadopago.com.mx/deepfishmx" target="_blank" class="btn">Pagar comisión</a>

</div>

</section>

</footer>

// ================================

// Configuración

// ================================

const SELLER_ID = new URLSearchParams(window.location.search).get('v') || 'vendedor_001';

const STORAGE_KEY_PRODUCTS = 'deepfish_products_' + SELLER_ID;

const STORAGE_KEY_SUBSCRIPTION = 'deepfish_subscription_' + SELLER_ID;

const DAYS_SUBSCRIPTION = 30;

// ================================

// Suscripción automática

// ================================

function addDays(date, days){ const d=new Date(date); d.setDate(d.getDate()+days); return d; }

if(!localStorage.getItem(STORAGE_KEY_SUBSCRIPTION)){

const end=addDays(new Date(),DAYS_SUBSCRIPTION);

localStorage.setItem(STORAGE_KEY_SUBSCRIPTION,end.toISOString());

}

const subscriptionEnd=new Date(localStorage.getItem(STORAGE_KEY_SUBSCRIPTION));

const today=new Date();

function blockProducts(){

document.querySelectorAll('#product-grid .card').forEach(card=>{

card.style.opacity='0.35';

card.style.pointerEvents='none';

if(!card.querySelector('.renew-box')){

const box=document.createElement('div');

box.className='renew-box';

box.style.background='#7a1f1f';

box.style.color='#fff';

box.style.padding='12px';

box.style.marginTop='12px';

box.style.borderRadius='8px';

box.style.fontSize='.85rem';

box.innerHTML=`🔒 Suscripción vencida<br><br><a href="https://link.mercadopago.com.mx/deepfishmx" target="_blank" class="btn">Renovar suscripción</a>`;

card.appendChild(box);

}

});

}

if(today>subscriptionEnd){ blockProducts(); }

// ================================

// Catálogo dinámico

// ================================

function loadProducts(){

const container=document.getElementById('product-grid');

container.innerHTML='';

const products=JSON.parse(localStorage.getItem(STORAGE_KEY_PRODUCTS)||'[]');

products.forEach(prod=>{

const card=document.createElement('div');

card.className='card';

card.innerHTML=`

<div class="price">${prod.price}</div>

<a class="btn" href="https://wa.me/5210000000000?text=Hola%20vi%20este%20pez%20en%20DeepFish" target="_blank">Contactar vendedor</a>

</div>

container.appendChild(card);

});

}

function addProduct(name,price,desc,img){

const products=JSON.parse(localStorage.getItem(STORAGE_KEY_PRODUCTS)||'[]');

if(products.length>=100){ alert('Has alcanzado el máximo de 100 productos.'); return; }

products.push({name,price,desc,img});

localStorage.setItem(STORAGE_KEY_PRODUCTS,JSON.stringify(products));

loadProducts();

}

document.getElementById('add-product-form').addEventListener('submit',e=>{

e.preventDefault();

const name=document.getElementById('prod-name').value;

const price=document.getElementById('prod-price').value;

const desc=document.getElementById('prod-desc').value;

const img=document.getElementById('prod-img').value;

addProduct(name,price,desc,img);

e.target.reset();

});

// ================================

// Panel admin (opcional: ?admin=true)

// ================================

const sellers={ 'vendedor_001':{name:'Acuarios Rivera'}, 'vendedor_002':{name:'Granja AquaFish'} };

function renderAdminPanel(){

const admin=document.createElement('div');

admin.style.position='fixed'; admin.style.bottom='20px'; admin.style.right='20px';

admin.style.background='#00141c'; admin.style.padding='15px'; admin.style.borderRadius='10px';

admin.style.boxShadow='0 0 20px rgba(0,0,0,0.6)'; admin.style.zIndex='9999';

admin.innerHTML='<strong>Admin DeepFish</strong><br><br>';

Object.keys(sellers).forEach(id=>{

const btn=document.createElement('button');

btn.innerText='Activar '+sellers[id].name;

btn.className='btn'; btn.style.display='block'; btn.style.marginBottom='8px';

btn.onclick=()=>{

const newEnd=addDays(new Date(),DAYS_SUBSCRIPTION);

localStorage.setItem('deepfish_subscription_'+id,newEnd.toISOString());

alert('Suscripción activada para '+sellers[id].name);

location.reload();

};

admin.appendChild(btn);

});

document.body.appendChild(admin);

}

if(window.location.search.includes('admin=true')){ renderAdminPanel(); }

// ================================

// Inicialización

// ================================

window.addEventListener('DOMContentLoaded',()=>{ loadProducts(); });

</script>

</body>

</html>