<?php
/**
 * TechShop Perú - Detalle de Producto
 * Con zoom de imagen, Schema.org SEO, aviso de stock y imagen fallback.
 */
define('SECURE_ACCESS', true);
require_once __DIR__ . '/../includes/config.php';
require_once __DIR__ . '/../includes/database.php';
require_once __DIR__ . '/../includes/functions.php';

$slug = sanitize($_GET['slug'] ?? '');
if (empty($slug)) redirect('pages/productos.php');

$db = db();

$stmt = $db->prepare('
    SELECT p.*, 
           c.nombre AS categoria_nombre, c.slug AS categoria_slug,
           m.nombre AS marca_nombre, m.slug AS marca_slug
    FROM productos p
    JOIN categorias c ON p.categoria_id = c.id
    JOIN marcas m ON p.marca_id = m.id
    WHERE p.slug = ? AND p.activo = 1
');
$stmt->execute([$slug]);
$producto = $stmt->fetch();

if (!$producto) {
    $page_title = 'Producto no encontrado';
    require_once __DIR__ . '/../includes/header.php';
    echo '<section class="py-5"><div class="container"><div class="text-center py-5"><i class="bi bi-box-seam display-1 text-muted opacity-30 d-block mb-3"></i><h4>Producto no encontrado</h4><p class="text-muted">El producto que buscas no está disponible o ha sido removido.</p><a href="'.url('pages/productos.php').'" class="btn btn-primary">Ver catálogo</a></div></div></section>';
    require_once __DIR__ . '/../includes/footer.php';
    exit;
}

// Imágenes adicionales
try {
    $stmt = $db->prepare('SELECT * FROM imagenes_producto WHERE producto_id = ? ORDER BY orden');
    $stmt->execute([$producto['id']]);
    $imagenes_extra = $stmt->fetchAll();
} catch (PDOException $e) {
    $imagenes_extra = [];
}

// Especificaciones técnicas
try {
    $stmt = $db->prepare('SELECT * FROM especificaciones_producto WHERE producto_id = ?');
    $stmt->execute([$producto['id']]);
    $especificaciones = $stmt->fetchAll();
} catch (PDOException $e) {
    $especificaciones = [];
}

// Icono por clave de especificación (estilo retail tech)
function ts_spec_icon(string $clave): string {
    $map = [
        'procesador'          => 'bi-cpu',
        'cpu'                 => 'bi-cpu',
        'memoria'             => 'bi-memory',
        'ram'                 => 'bi-memory',
        'almacenamiento'      => 'bi-hdd',
        'disco'               => 'bi-hdd',
        'ssd'                 => 'bi-hdd',
        'pantalla'            => 'bi-display',
        'tamano'              => 'bi-arrows-angle-expand',
        'tamaño'              => 'bi-arrows-angle-expand',
        'resolucion'          => 'bi-aspect-ratio',
        'graficos'            => 'bi-gpu-card',
        'gpu'                 => 'bi-gpu-card',
        'video'               => 'bi-gpu-card',
        'sistema'             => 'bi-windows',
        'sistema operativo'   => 'bi-windows',
        'conectividad'        => 'bi-wifi',
        'wifi'                => 'bi-wifi',
        'bluetooth'           => 'bi-bluetooth',
        'puertos'             => 'bi-usb-plug',
        'bateria'             => 'bi-battery-charging',
        'peso'                => 'bi-weight',
        'dimensiones'         => 'bi-rulers',
        'color'               => 'bi-palette',
        'garantia'            => 'bi-shield-check',
        'garantía'            => 'bi-shield-check',
        'marca'               => 'bi-tag',
        'modelo'              => 'bi-upc-scan',
        'categoria'           => 'bi-box-seam',
        'precio'              => 'bi-currency-dollar',
        'duracion'            => 'bi-clock-history',
        'velocidad'           => 'bi-speedometer2',
        'energia'             => 'bi-plug',
        'voltaje'             => 'bi-plug',
        'potencia'            => 'bi-lightning-charge',
        'audio'               => 'bi-speaker',
        'camara'              => 'bi-camera',
        'seguridad'           => 'bi-shield-lock',
        'material'            => 'bi-box',
        'certificacion'       => 'bi-patch-check',
        'incluye'             => 'bi-gift',
        'contenido'           => 'bi-card-checklist',
    ];
    $k = strtolower(trim($clave));
    // Buscar coincidencia parcial (ej: 'Memoria RAM' -> bi-memory)
    foreach ($map as $palabra => $icono) {
        if (str_contains($k, $palabra)) return $icono;
    }
    return 'bi-gear';
}

// Productos relacionados
try {
    $stmt = $db->prepare('SELECT p.*, c.nombre AS categoria_nombre, c.slug AS categoria_slug, m.nombre AS marca_nombre, m.slug AS marca_slug FROM productos p JOIN categorias c ON p.categoria_id = c.id JOIN marcas m ON p.marca_id = m.id WHERE p.categoria_id = ? AND p.id != ? AND p.activo = 1 ORDER BY RAND() LIMIT 4');
    $stmt->execute([$producto['categoria_id'], $producto['id']]);
    $relacionados = $stmt->fetchAll();
} catch (PDOException $e) {
    $relacionados = [];
}

// Favorito del usuario
$is_fav = false;
if (is_logged_in()) {
    try {
        $stmt = $db->prepare('SELECT id FROM favoritos WHERE usuario_id = ? AND producto_id = ?');
        $stmt->execute([$_SESSION['usuario_id'], $producto['id']]);
        $is_fav = (bool)$stmt->fetch();
    } catch (PDOException $e) { $is_fav = false; }
}

// Reseñas
try {
    $stmtR = $db->prepare('SELECT t.*, u.nombres, u.apellidos FROM testimonios t JOIN usuarios u ON t.usuario_id = u.id WHERE t.producto_id = ? AND t.activo = 1 ORDER BY t.fecha_creacion DESC');
    $stmtR->execute([$producto['id']]);
    $resenas = $stmtR->fetchAll();
} catch (PDOException $e) {
    $resenas = [];
}

$page_title     = $producto['nombre'];
$precio_final   = precio_final($producto);
$tiene_oferta   = tiene_oferta($producto);
$descuento      = $tiene_oferta ? calc_descuento((float)$producto['precio'], (float)$producto['precio_oferta']) : 0;

// Imagen principal
$img_src = !empty($producto['imagen_principal'])
    ? UPLOADS_URL . '/products/' . $producto['imagen_principal']
    : ASSETS_URL . '/images/placeholder-product.svg';

require_once __DIR__ . '/../includes/header.php';
?>

<!-- Schema.org SEO para producto -->
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "<?= e($producto['nombre']) ?>",
  "sku": "<?= e($producto['sku'] ?? '') ?>",
  "description": "<?= e(strip_tags($producto['descripcion_corta'] ?? $producto['descripcion'] ?? '')) ?>",
  "brand": {"@type": "Brand", "name": "<?= e($producto['marca_nombre']) ?>"},
  "category": "<?= e($producto['categoria_nombre']) ?>",
  "image": "<?= $img_src ?>",
  "offers": {
    "@type": "Offer",
    "url": "<?= BASE_URL ?>/pages/detalle.php?slug=<?= e($producto['slug']) ?>",
    "priceCurrency": "PEN",
    "price": "<?= number_format((float)$precio_final, 2, '.', '') ?>",
    "availability": "<?= $producto['stock'] > 0 ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' ?>",
    "seller": {"@type": "Organization", "name": "<?= TIENDA_NOMBRE ?>"}
  }
  <?php if (!empty($resenas)): ?>
  ,"aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "<?= number_format((float)$producto['calificacion'], 1) ?>",
    "reviewCount": "<?= (int)$producto['num_calificaciones'] ?>"
  }
  <?php endif; ?>
}
</script>

<!-- Breadcrumb -->
<section class="page-header">
  <div class="container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="<?= url('') ?>">Inicio</a></li>
        <li class="breadcrumb-item"><a href="<?= url('pages/productos.php') ?>">Productos</a></li>
        <li class="breadcrumb-item"><a href="<?= url('pages/productos.php?categoria='.$producto['categoria_slug']) ?>"><?= e($producto['categoria_nombre']) ?></a></li>
        <li class="breadcrumb-item active"><?= e($producto['nombre']) ?></li>
      </ol>
    </nav>
  </div>
</section>

<section class="py-5">
<div class="container">
  <?= flash_message() ?>
  <div class="row g-5">

    <!-- ===== GALERÍA DE IMAGEN CON ZOOM ===== -->
    <div class="col-md-6">
      <!-- Imagen principal con zoom al hover -->
      <div class="product-zoom-wrapper position-relative rounded-3 overflow-hidden shadow-sm mb-3"
           style="background:#f8fafc;aspect-ratio:1;cursor:zoom-in;"
           id="zoomWrapper">
        <img src="<?= $img_src ?>" 
             alt="<?= e($producto['nombre']) ?>"
             class="img-fluid w-100 h-100"
             id="mainImage"
             style="object-fit:contain;transition:transform 0.3s ease;"
             onerror="this.src='<?= ASSETS_URL ?>/img/productos/placeholder.jpg'"
             loading="eager">
        <?php if ($tiene_oferta): ?>
          <span class="position-absolute top-0 start-0 m-2 badge bg-danger fs-6">-<?= $descuento ?>%</span>
        <?php endif; ?>
        <?php if ($producto['destacado']): ?>
          <span class="position-absolute top-0 end-0 m-2 badge bg-warning text-dark">⭐ Destacado</span>
        <?php endif; ?>
        <!-- Botón zoom -->
        <button class="btn btn-light btn-sm position-absolute bottom-0 end-0 m-2 rounded-circle shadow"
                onclick="openZoomModal()" title="Ver en grande" style="width:38px;height:38px;padding:0;">
          <i class="bi bi-zoom-in fs-6"></i>
        </button>
      </div>

      <!-- Thumbnails -->
      <div class="d-flex gap-2 flex-wrap" id="thumbsRow">
        <div class="thumb-item active rounded-2 overflow-hidden border border-2 border-primary"
             style="width:70px;height:70px;cursor:pointer;flex-shrink:0;"
             onclick="changeImage('<?= $img_src ?>', this)">
          <img src="<?= $img_src ?>" alt="Principal" 
               style="width:100%;height:100%;object-fit:contain;padding:4px;"
               onerror="this.src='<?= ASSETS_URL ?>/img/productos/placeholder.jpg'">
        </div>
        <?php foreach ($imagenes_extra as $img): 
          $img_url = UPLOADS_URL . '/products/' . e($img['ruta']); ?>
        <div class="thumb-item rounded-2 overflow-hidden border"
             style="width:70px;height:70px;cursor:pointer;flex-shrink:0;"
             onclick="changeImage('<?= $img_url ?>', this)">
          <img src="<?= $img_url ?>" alt="" 
               style="width:100%;height:100%;object-fit:contain;padding:4px;"
               onerror="this.src='<?= ASSETS_URL ?>/img/productos/placeholder.jpg'">
        </div>
        <?php endforeach; ?>
      </div>

      <!-- Compartir en redes -->
      <div class="mt-3 d-flex gap-2 align-items-center">
        <small class="text-muted">Compartir:</small>
        <a href="https://wa.me/?text=<?= urlencode($producto['nombre'].' - '.BASE_URL.'/pages/detalle.php?slug='.$slug) ?>" target="_blank" class="btn btn-sm btn-outline-success rounded-pill"><i class="bi bi-whatsapp me-1"></i>WhatsApp</a>
        <a href="https://www.facebook.com/sharer/sharer.php?u=<?= urlencode(BASE_URL.'/pages/detalle.php?slug='.$slug) ?>" target="_blank" class="btn btn-sm btn-outline-primary rounded-pill"><i class="bi bi-facebook me-1"></i>Facebook</a>
      </div>
    </div>

    <!-- ===== INFO DEL PRODUCTO ===== -->
    <div class="col-md-6 detail-purchase-box">
      <div class="d-flex gap-2 mb-2 flex-wrap">
        <span class="badge bg-secondary"><?= e($producto['marca_nombre']) ?></span>
        <span class="badge bg-light text-dark border"><?= e($producto['categoria_nombre']) ?></span>
        <?php if ($producto['en_oferta']): ?><span class="badge bg-danger">🔥 Oferta</span><?php endif; ?>
      </div>

      <h1 class="product-detail-title fw-bold mb-2"><?= e($producto['nombre']) ?></h1>

      <div class="product-rating d-flex align-items-center gap-2 mb-2">
        <?= render_estrellas((float)$producto['calificacion']) ?>
        <span class="rating-count text-muted">(<?= (int)$producto['num_calificaciones'] ?> opiniones)</span>
        <?php if (!empty($producto['sku'])): ?>
          <span class="text-muted">|</span>
          <small class="text-muted">SKU: <?= e($producto['sku']) ?></small>
        <?php endif; ?>
      </div>

      <!-- Precio -->
      <div class="product-detail-price mb-2">
        <span class="price-current fs-2 fw-bold text-primary">
          <?= format_precio((float)$precio_final) ?>
        </span>
        <?php if ($tiene_oferta): ?>
          <span class="price-original text-muted text-decoration-line-through ms-2 fs-5">
            <?= format_precio((float)$producto['precio']) ?>
          </span>
          <span class="badge bg-danger ms-2 fs-6">-<?= $descuento ?>%</span>
          <div class="text-success small fw-medium mt-1">
            <i class="bi bi-piggy-bank me-1"></i>
            Ahorras <?= format_precio((float)$producto['precio'] - (float)$precio_final) ?>
          </div>
        <?php endif; ?>
      </div>

      <!-- Badges de garantía y cuotas (estilo retail) -->
      <div class="d-flex flex-wrap gap-2 mb-3">
        <span class="detail-trust-badge">
          <i class="bi bi-shield-check me-1"></i>Garantía oficial
        </span>
        <span class="detail-trust-badge">
          <i class="bi bi-credit-card me-1"></i><?= CUOTAS_SIN_INTERES ?> cuotas de
          <strong><?= format_precio(round((float)$precio_final / CUOTAS_SIN_INTERES, 2)) ?></strong>
          sin intereses
        </span>
        <span class="detail-trust-badge">
          <i class="bi bi-truck me-1"></i>Envío 24-48h Lima
        </span>
      </div>

      <!-- Descripción corta -->
      <?php if (!empty($producto['descripcion_corta'])): ?>
        <p class="text-muted mb-3"><?= e($producto['descripcion_corta']) ?></p>
      <?php endif; ?>

      <!-- Stock y controles -->
      <?php if ($producto['stock'] > 0): ?>
        <div class="d-flex align-items-center gap-2 mb-2">
          <span class="badge bg-success-subtle text-success border border-success px-3 py-2">
            <i class="bi bi-check-circle-fill me-1"></i>En stock (<?= $producto['stock'] ?> disponibles)
          </span>
        </div>
        <div class="d-flex align-items-center gap-3 mb-3">
          <span class="text-secondary small fw-semibold">Cantidad</span>
          <div class="detail-qty">
            <button type="button" class="detail-qty-btn qty-minus" aria-label="Disminuir cantidad">
              <i class="bi bi-dash-lg"></i>
            </button>
            <input type="number" class="form-control text-center detail-qty-input quantity-input"
                   value="1" min="1" max="<?= $producto['stock'] ?>"
                   inputmode="numeric" aria-label="Cantidad de productos">
            <button type="button" class="detail-qty-btn qty-plus" aria-label="Aumentar cantidad">
              <i class="bi bi-plus-lg"></i>
            </button>
          </div>
          <span class="text-muted small" id="detailQtyStock"><?= $producto['stock'] ?> disponibles</span>
        </div>
        <div class="d-flex gap-2 mb-3 flex-wrap">
          <button class="btn btn-primary btn-lg add-to-cart-btn flex-grow-1"
                  data-producto-id="<?= $producto['id'] ?>"
                  style="min-width:180px;">
            <i class="bi bi-cart-plus me-2"></i>Agregar al Carrito
          </button>
          <button type="button" class="btn btn-outline-primary btn-lg flex-grow-1 btn-buy-now"
                  data-producto-id="<?= $producto['id'] ?>" style="min-width:180px;">
            <i class="bi bi-bag-check me-2"></i>Comprar Ahora
          </button>

          <button class="btn btn-outline-danger btn-lg btn-fav <?= $is_fav ? 'active' : '' ?>"
                  data-producto-id="<?= $producto['id'] ?>" title="Guardar en favoritos">
            <i class="bi <?= $is_fav ? 'bi-heart-fill' : 'bi-heart' ?>"></i>
          </button>
          <a href="<?= url('pages/comparar.php?add='.$producto['id']) ?>" 
             class="btn btn-outline-secondary btn-lg btn-compare" data-producto-id="<?= $producto['id'] ?>" title="Comparar producto">
            <i class="bi bi-arrow-left-right"></i>
          </a>
        </div>
      <?php else: ?>
        <div class="alert alert-danger mb-3">
          <i class="bi bi-x-circle me-2"></i>
          <strong>Producto agotado</strong> temporalmente.
        </div>
        <div class="card border-warning shadow-sm mb-4" style="border-radius:12px;">
          <div class="card-body p-4">
            <h6 class="fw-bold mb-1"><i class="bi bi-bell-fill text-warning me-2"></i>¿Te avisamos cuando haya stock?</h6>
            <p class="text-muted small mb-3">Ingresa tu correo y te notificaremos en cuanto esté disponible.</p>
            <form id="stock-notify-form" class="d-flex gap-2">
              <input type="hidden" name="producto_id" value="<?= $producto['id'] ?>">
              <input type="email" name="email" class="form-control"
                     placeholder="tu@correo.com" required
                     value="<?= e($_SESSION['usuario_email'] ?? '') ?>">
              <button type="submit" class="btn btn-warning text-nowrap fw-bold">
                <i class="bi bi-bell me-1"></i>Avisarme
              </button>
            </form>
          </div>
        </div>
      <?php endif; ?>

      <!-- Beneficios de compra -->
      <div class="row g-2 text-center mb-3">
        <div class="col-4">
          <div class="bg-light rounded-3 p-3">
            <i class="bi bi-truck text-primary d-block mb-1 fs-5"></i>
            <small class="text-muted">Envío a todo el Perú</small>
          </div>
        </div>
        <div class="col-4">
          <div class="bg-light rounded-3 p-3">
            <i class="bi bi-shield-check text-success d-block mb-1 fs-5"></i>
            <small class="text-muted">Garantía incluida</small>
          </div>
        </div>
        <div class="col-4">
          <div class="bg-light rounded-3 p-3">
            <i class="bi bi-arrow-return-left text-info d-block mb-1 fs-5"></i>
            <small class="text-muted">Devolución 7 días</small>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ===== TABS: Descripción / Especificaciones / Reseñas ===== -->
  <div class="row mt-5">
    <div class="col-12">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-desc">Descripción</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-specs">Especificaciones Técnicas</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-resenas">Reseñas (<?= count($resenas) ?>)</button></li>
      </ul>
      <div class="tab-content p-4 bg-white border border-top-0 rounded-bottom shadow-sm">
        <!-- Descripción -->
        <div class="tab-pane fade show active" id="tab-desc">
          <?php if (!empty($producto['descripcion'])): ?>
            <?= nl2br(e($producto['descripcion'])) ?>
          <?php else: ?>
            <p class="text-muted">Sin descripción detallada disponible para este producto.</p>
          <?php endif; ?>
        </div>
        <!-- Especificaciones -->
        <div class="tab-pane fade" id="tab-specs">
          <?php if (empty($especificaciones)): ?>
            <p class="text-muted">No hay especificaciones técnicas registradas para este producto.</p>
          <?php else: ?>
            <table class="table specs-table align-middle">
              <tbody>
                <?php foreach ($especificaciones as $esp): ?>
                  <tr>
                    <td class="fw-medium" style="width:38%">
                      <i class="bi <?= ts_spec_icon($esp['clave']) ?> me-2 text-primary"></i>
                      <?= e($esp['clave']) ?>
                    </td>
                    <td><?= e($esp['valor']) ?></td>
                  </tr>
                <?php endforeach; ?>
              </tbody>
            </table>
          <?php endif; ?>
        </div>
        <!-- Reseñas -->
        <div class="tab-pane fade" id="tab-resenas">
          <div class="row g-4">
            <div class="col-md-5">
                <div class="card border-0 bg-light p-4" style="border-radius:12px;">
                <h5 class="fw-bold mb-3"><i class="bi bi-pencil-square text-primary me-2"></i>Deja tu opinión</h5>
                <?php if (is_logged_in()): ?>
                  <form id="product-review-form" enctype="multipart/form-data">
                    <input type="hidden" name="producto_id" value="<?= $producto['id'] ?>">
                    <div class="mb-3">
                      <label class="form-label fw-medium">Calificación *</label>
                      <select name="calificacion" class="form-select" required>
                        <option value="5" selected>⭐⭐⭐⭐⭐ Excelente</option>
                        <option value="4">⭐⭐⭐⭐ Muy bueno</option>
                        <option value="3">⭐⭐⭐ Regular</option>
                        <option value="2">⭐⭐ Malo</option>
                        <option value="1">⭐ Muy malo</option>
                      </select>
                    </div>
                    <div class="mb-3">
                      <label class="form-label fw-medium">Título de tu reseña</label>
                      <input type="text" name="titulo" class="form-control" placeholder="Resumen breve (ej: Excelente calidad)" maxlength="200">
                    </div>
                    <div class="mb-3">
                      <label class="form-label fw-medium">Tu comentario *</label>
                      <textarea name="comentario" class="form-control" rows="4" placeholder="¿Qué te pareció el producto?" required minlength="10"></textarea>
                    </div>
                    <div class="mb-3">
                      <label class="form-label fw-medium"><i class="bi bi-camera me-1 text-muted"></i>Foto del producto (opcional)</label>
                      <input type="file" name="foto" class="form-control" accept="image/jpeg,image/png,image/webp">
                      <small class="text-muted">Máx. 3MB. Formatos: JPG, PNG, WebP.</small>
                    </div>
                    <button type="submit" class="btn btn-primary w-100"><i class="bi bi-send me-1"></i>Publicar Opinión</button>
                  </form>
                <?php else: ?>
                  <p class="text-muted">Inicia sesión para publicar una reseña.</p>
                  <a href="<?= url('pages/login.php') ?>" class="btn btn-outline-primary w-100"><i class="bi bi-box-arrow-in-right me-1"></i>Iniciar Sesión</a>
                <?php endif; ?>
              </div>
            </div>
            <div class="col-md-7">
              <h5 class="fw-bold mb-3">Opiniones de compradores</h5>
              <?php if (empty($resenas)): ?>
                <p class="text-muted">Sé el primero en dejar una opinión sobre este producto.</p>
              <?php else: ?>
                <div class="d-flex flex-column gap-3">
                <?php foreach ($resenas as $r): ?>
                  <div class="card border-0 shadow-sm p-3 mb-2" style="border-radius:10px;">
                    <div class="d-flex justify-content-between align-items-start mb-1">
                      <div>
                        <span class="fw-bold me-2"><i class="bi bi-person-circle text-primary me-1"></i><?= e($r['nombres'].' '.$r['apellidos']) ?></span>
                        <?php if (!empty($r['compra_verificada'])): ?>
                        <span class="badge bg-success-subtle text-success border border-success" style="font-size:.7rem;"><i class="bi bi-check-circle-fill me-1"></i>Compra Verificada</span>
                        <?php endif; ?>
                      </div>
                      <small class="text-muted"><?= format_fecha($r['fecha_creacion']) ?></small>
                    </div>
                    <div class="mb-1"><?= render_estrellas($r['calificacion']) ?></div>
                    <?php if (!empty($r['titulo'])): ?>
                    <p class="fw-semibold mb-1 small"><?= e($r['titulo']) ?></p>
                    <?php endif; ?>
                    <p class="text-muted mb-1 small"><?= e($r['comentario']) ?></p>
                    <?php if (!empty($r['foto'])): ?>
                    <img src="<?= UPLOADS_URL . '/reviews/' . e($r['foto']) ?>" alt="Foto de reseña" class="rounded mt-1" style="max-height:120px;object-fit:cover;cursor:pointer;" onclick="window.open(this.src,'_blank')">
                    <?php endif; ?>
                  </div>
                <?php endforeach; ?>
                </div>
              <?php endif; ?>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Productos relacionados -->
  <?php if (!empty($relacionados)): ?>
  <div class="mt-5">
    <h4 class="section-title">Productos Relacionados</h4>
    <div class="row g-3">
      <?php foreach ($relacionados as $p): ?>
        <div class="col-6 col-md-3"><?php include __DIR__ . '/../includes/product-card.php'; ?></div>
      <?php endforeach; ?>
    </div>
  </div>
  <?php endif; ?>

</div>
</section>

<!-- ===== SECCIONES ADICIONALES: Q&A + ALERTA DE PRECIO ===== -->
<section class="py-4 bg-light border-top">
<div class="container">
  <div class="row g-4">

    <!-- Q&A - Preguntas del producto (Mejora 15) -->
    <div class="col-md-6">
      <div class="card border-0 shadow-sm p-4" style="border-radius:14px;">
        <h5 class="fw-bold mb-3"><i class="bi bi-question-circle text-info me-2"></i>Preguntas y Respuestas</h5>
        <?php
        try {
            $stmtQA = db()->prepare("CREATE TABLE IF NOT EXISTS producto_qa (id INT AUTO_INCREMENT PRIMARY KEY, producto_id INT NOT NULL, usuario_id INT NOT NULL, pregunta TEXT NOT NULL, respuesta TEXT DEFAULT NULL, respondido_por INT DEFAULT NULL, creado_en TIMESTAMP DEFAULT CURRENT_TIMESTAMP, respondido_en TIMESTAMP NULL, KEY idx_producto (producto_id)) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");
            $stmtQA->execute();
            $stmtQAs = db()->prepare("SELECT qa.*, CONCAT(u.nombres, COALESCE(CONCAT(' ', u.apellidos), '')) AS nombre FROM producto_qa qa LEFT JOIN usuarios u ON qa.usuario_id = u.id WHERE qa.producto_id = ? ORDER BY qa.creado_en DESC LIMIT 5");
            $stmtQAs->execute([$producto['id']]);
            $qaItems = $stmtQAs->fetchAll();
        } catch (Exception $eqa) { $qaItems = []; }
        ?>
        <?php foreach ($qaItems as $qa): ?>
        <div class="mb-3 p-3 bg-white rounded-3 shadow-sm border-start border-info border-3">
          <p class="mb-1 fw-semibold small"><i class="bi bi-person-circle text-info me-1"></i><?= e($qa['nombre'] ?? 'Anónimo') ?> preguntó:</p>
          <p class="mb-2 small"><?= e($qa['pregunta']) ?></p>
          <?php if (!empty($qa['respuesta'])): ?>
          <div class="ps-2 border-start border-success border-2">
            <p class="mb-0 small text-success fw-semibold"><i class="bi bi-shield-check me-1"></i>TechShop Perú respondió:</p>
            <p class="mb-0 small"><?= e($qa['respuesta']) ?></p>
          </div>
          <?php else: ?>
          <small class="text-muted"><i class="bi bi-hourglass-split me-1"></i>Esperando respuesta...</small>
          <?php endif; ?>
        </div>
        <?php endforeach; ?>
        <?php if (empty($qaItems)): ?>
        <p class="text-muted small mb-3">Aún no hay preguntas para este producto. ¡Sé el primero!</p>
        <?php endif; ?>
        <?php if (is_logged_in()): ?>
        <form id="qa-form" class="mt-2">
          <input type="hidden" name="producto_id" value="<?= $producto['id'] ?>">
          <div class="input-group">
            <input type="text" name="pregunta" class="form-control form-control-sm" placeholder="¿Tienes una pregunta sobre el producto?" minlength="10" required>
            <button type="submit" class="btn btn-info btn-sm text-white"><i class="bi bi-send me-1"></i>Preguntar</button>
          </div>
        </form>
        <div id="qa-msg" class="mt-2"></div>
        <?php else: ?>
        <a href="<?= url('pages/login.php') ?>" class="btn btn-outline-info btn-sm w-100"><i class="bi bi-box-arrow-in-right me-1"></i>Inicia sesión para preguntar</a>
        <?php endif; ?>
      </div>
    </div>

    <!-- Alerta de bajada de precio (Mejora 17) -->
    <div class="col-md-6">
      <div class="card border-0 shadow-sm p-4" style="border-radius:14px;">
        <h5 class="fw-bold mb-2"><i class="bi bi-graph-down-arrow text-danger me-2"></i>Alerta de Bajada de Precio</h5>
        <p class="text-muted small mb-3">¿Quieres que te avisemos si el precio de este producto baja? Ingresa tu correo y te notificaremos.</p>
        <form id="price-alert-form">
          <input type="hidden" name="producto_id" value="<?= $producto['id'] ?>">
          <div class="input-group">
            <input type="email" name="email" class="form-control" placeholder="tucorreo@ejemplo.com"
                   value="<?= is_logged_in() ? e($_SESSION['usuario_email'] ?? '') : '' ?>" required>
            <button type="submit" class="btn btn-danger"><i class="bi bi-bell me-1"></i>Avisar</button>
          </div>
        </form>
        <div id="price-alert-msg" class="mt-2"></div>
        <div class="mt-3 pt-3 border-top">
          <p class="small text-muted mb-1"><i class="bi bi-shield-lock text-success me-1"></i>Precio actual: <strong><?= format_precio((float)$precio_final) ?></strong></p>
          <?php if ($tiene_oferta): ?>
          <p class="small text-success mb-0"><i class="bi bi-tag-fill me-1"></i>¡Ya tiene <strong><?= $descuento ?>% de descuento</strong> sobre el precio original!</p>
          <?php endif; ?>
        </div>
      </div>
    </div>

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

<!-- ===== MODAL ZOOM IMAGEN ===== -->
<div class="modal fade" id="zoomModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content bg-transparent border-0">
      <div class="modal-header border-0 pb-0">
        <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0 text-center">
        <img id="zoomModalImg" src="" alt="<?= e($producto['nombre']) ?>"
             style="max-height:85vh;max-width:100%;object-fit:contain;border-radius:12px;"
             onerror="this.src='<?= ASSETS_URL ?>/img/productos/placeholder.jpg'">
      </div>
    </div>
  </div>
</div>

<style>
/* Zoom CSS */
.product-zoom-wrapper:hover #mainImage {
  transform: scale(1.05);
}
.thumb-item {
  transition: border-color 0.2s;
}
.thumb-item.active {
  border-color: var(--color-primary, #2563eb) !important;
}
.thumb-item:hover {
  border-color: var(--color-primary, #2563eb) !important;
}
#zoomModal .modal-content {
  background: rgba(0,0,0,0.9) !important;
}
</style>

<script>
function changeImage(src, el) {
  document.getElementById('mainImage').src = src;
  document.getElementById('zoomModalImg').src = src;
  document.querySelectorAll('.thumb-item').forEach(t => t.classList.remove('active','border-primary','border-2'));
  el.classList.add('active','border-primary','border-2');
}

function openZoomModal() {
  const currentSrc = document.getElementById('mainImage').src;
  document.getElementById('zoomModalImg').src = currentSrc;
  new bootstrap.Modal(document.getElementById('zoomModal')).show();
}

// Zoom al hacer clic en la imagen principal
document.getElementById('mainImage').addEventListener('click', function() {
  openZoomModal();
});
document.getElementById('zoomWrapper').style.cursor = 'zoom-in';

const baseUrl = (document.body.dataset.baseUrl || '').replace(/\/$/, '');
const apiUrl = path => baseUrl + '/' + path.replace(/^\//, '');
const csrfMeta = document.querySelector('meta[name="csrf-token"]');
const csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';

// ===== RESEÑA CON FOTO (Mejora 9) =====
const reviewForm = document.getElementById('product-review-form');
if (reviewForm) {
  reviewForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const btn = reviewForm.querySelector('button[type="submit"]');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Enviando...';
    const fd = new FormData(reviewForm);
    fd.append('csrf_token', csrfToken);
    fetch(apiUrl('api/review-add.php'), { method: 'POST', body: fd })
      .then(r => r.json())
      .then(d => {
        if (d.success) {
          reviewForm.reset();
          const msg = document.createElement('div');
          msg.className = 'alert alert-success mt-2 small';
          msg.textContent = d.message;
          reviewForm.after(msg);
          // Recargar para mostrar la reseña publicada (comportamiento previo)
          setTimeout(() => location.reload(), 1200);
        } else {
          alert(d.message || 'Error al enviar la reseña');
        }
      })
      .catch(() => alert('Error de conexión'))
      .finally(() => { btn.disabled = false; btn.innerHTML = '<i class="bi bi-send me-1"></i>Publicar Opinión'; });
  });
}

// ===== Q&A (Mejora 15) =====
const qaForm = document.getElementById('qa-form');
if (qaForm) {
  qaForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const fd = new FormData(qaForm);
    fd.append('csrf_token', csrfToken);
    fetch(apiUrl('api/qa-ask.php'), { method: 'POST', body: new URLSearchParams(fd) })
      .then(r => r.json())
      .then(d => {
        const msg = document.getElementById('qa-msg');
        msg.innerHTML = '<div class="alert alert-' + (d.success ? 'success' : 'danger') + ' small py-2">' + d.message + '</div>';
        if (d.success) qaForm.reset();
        setTimeout(() => msg.innerHTML = '', 5000);
      })
      .catch(() => alert('Error de conexión'));
  });
}

// ===== ALERTA DE PRECIO (Mejora 17) =====
const priceAlertForm = document.getElementById('price-alert-form');
if (priceAlertForm) {
  priceAlertForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const btn = priceAlertForm.querySelector('button[type="submit"]');
    btn.disabled = true;
    const fd = new FormData(priceAlertForm);
    fd.append('csrf_token', csrfToken);
    fetch(apiUrl('api/price-notify.php'), { method: 'POST', body: new URLSearchParams(fd) })
      .then(r => r.json())
      .then(d => {
        const msg = document.getElementById('price-alert-msg');
        msg.innerHTML = '<div class="alert alert-' + (d.success ? 'success' : 'danger') + ' small py-2">' + d.message + '</div>';
        if (d.success) priceAlertForm.reset();
        btn.disabled = false;
        setTimeout(() => msg.innerHTML = '', 5000);
      })
      .catch(() => { alert('Error de conexión'); btn.disabled = false; });
  });
}
</script>

<?php require_once __DIR__ . '/../includes/footer.php'; ?>
