<?php
// Connect to DB
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$servername = "sql309.infinityfree.com";
$username = "if0_39334806";
$password = "lPyUUejipjGBK";
$database = "if0_39334806_grapixgro";

$mysqli = new mysqli($servername, $username, $password, $database);

if ($mysqli->connect_error) {
    die("DB connection failed: " . $mysqli->connect_error);
}

// Determine which page to show; for demo we use portfolio1
$page_name = 'portfolio3';
if (isset($_GET['page'])) {
    $page_name = $_GET['page'];
}

// Fetch images for the given portfolio page
$stmt = $mysqli->prepare("SELECT image_path FROM portfolio_images WHERE page_name = ?");
$stmt->bind_param("s", $page_name);
$stmt->execute();
$result = $stmt->get_result();
$images = $result->fetch_all(MYSQLI_ASSOC);
$stmt->close();
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Printing Designing Portfolio Page</title>
  <link rel="stylesheet" href="../style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<style>
  body { 
    margin:0;
    padding:0;
    background: #111;
    font-family: "Montserrat", Arial, sans-serif;
    color: #fff;
    min-height: 100vh;
  }
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 10px;
  }
  .gallery-item {
    overflow: hidden;
    border-radius: 10px;
    transition: filter 0.4s ease;
  }
  .gallery-item:hover img {
    filter: grayscale(0);
    transform: scale(1.05);   
  }
  .gallery-item img {
    width: 100%;
    height: auto;
    filter: grayscale(100%);
    display: block;
    transition: transform 0.4s ease;
  }
    .portfolio-text {
            position: relative;
            width: 100%;
            text-align: center;
            margin-top: 90px;
            margin-bottom: 40px;
        }
        .portfolio-bg-text {
            display: block;
            font-size: 7vw;        
            color: #b8b8b8;        
            font-weight: 900;
            letter-spacing: 0.05em;
            opacity: 0.32;
            line-height: 1;
            user-select: none;
        }

        .portfolio-top-text {
            position: absolute;
            top: 54%;
            left: 50%;
            transform: translate(-50%, -50%);  
            font-size: 3.5vw;    
            font-weight: 800;
            color: #005bae;
            letter-spacing: 0.06em;
            z-index: 1;
            background: transparent;
            pointer-events: none;  
        }


    @media (max-width: 768px) {
        .gallery-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding: 10px 10px;
        }

        .gallery-item {
            border-radius: 10px;
            overflow: hidden;
        }
        .portfolio-text {
            margin-top: 100px;
        }

        .portfolio-bg-text {
            font-size: 12vw;
            opacity: 15%;
        }

        .portfolio-top-text {
            font-size: 6.5vw;
            font-weight: 1000;
        }
    }

</style>
</head>
<body>
    <div class="cursor-dot"></div>

<a href="#" class="back-to-top" id="backToTop">
  <span>&#9650;</span>
</a>


<header class="header">
  <div class="header-container">
    <div id="logo">
      <a href="index.html">
        <img src="../assets/GrapixGro_Logo.svg" alt="GrapixGro Logo">
      </a>
    </div>

    <!-- Navigation -->
    <nav class="nav" id="nav">
      <ul class="nav-links" id="nav-links">
      <li><a href="../index.html">Home</a></li>
      <li><a href="../about-us/about-us.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
         <li class="dropdown">
      <a href="#" id="layoutMobileToggle">Layouts ▾</a>
      <ul class="dropdown-content"id="layoutDropdown">
        <li><a href="../service-pages/graphic.html">Social Media Marketing</a></li>
        <li><a href="../service-pages/branding.html">Branding</a></li>
        <li><a href="../service-pages/printing.html">Printing</a></li>
        <!-- <li class="submenu">
          <a href="#"id="subToggle">Submenu ▸</a>
          <ul class="sub-dropdown" id="subDropdown">
            <li><a href="#option1">Option 1</a></li>
            <li><a href="#option2">Option 2</a></li>
          </ul>
        </li> -->
      </ul>
    </li>
        <!-- <li><a href="../our-plans.html">Our Plans</a></li> -->
        <li><a href="../contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>



<div class="portfolio-text">
  <span class="portfolio-bg-text">PRINTING DESIGNING</span>
  <span class="portfolio-top-text">PRINTING DESIGNING</span>
</div>

<div class="gallery-grid">
  <?php foreach ($images as $img): ?>
    <div class="gallery-item">
      <img src="<?php echo htmlspecialchars($img['image_path']); ?>" alt="Portfolio Image" />
    </div>
  <?php endforeach; ?>
  <?php if (empty($images)): ?>
    <p>Coming Soon...</p>
  <?php endif; ?>
</div>
  <script src="../script.js"></script>
</body>
</html>