<?php
// Pull the credentials from the hidden folder
require_once('/var/www/palletsreloved/include/db_config.php');

$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

if ($conn->connect_error) {
    error_log("Connection failed: " . $conn->connect_error);
    die("Connection error. Please try again later.");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pallets Reloved | Sustainable - Handcrafted - Recycled</title>
    
    <!-- Styling Engines -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <!-- OpenCart CSS for the Footer (Crucial for styling the pulled content) -->

    
    <link rel="icon" type="image/png" href="images/logosmall.png">

    <style>
        .wood-gradient { 
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/workshop.png'); 
            background-size: cover; 
            background-position: center; 
        }
        /* Prevents OpenCart's Bootstrap from messing up your Tailwind Header */
        footer a { text-decoration: none !important; }
    </style>
</head>
<body class="bg-stone-50 text-stone-800 antialiased">

<!-- Navigation -->
<nav class="bg-white border-b border-stone-200 sticky top-0 z-50">
    <div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="images/logo.png" alt="Pallets Reloved Logo" class="h-16 w-16 rounded-full border border-stone-100 shadow-sm">
            <div class="text-xl font-bold tracking-tight text-stone-900 uppercase">
                Pallets<span class="text-stone-500">Reloved</span>
            </div>
        </div>
        
        <div class="hidden md:flex space-x-8 items-center font-medium text-sm uppercase tracking-widest text-stone-600">
            <a href="/shop" class="hover:text-black transition no-underline">The Shop</a>
        </div>
    </div>
</nav>

<!-- Hero Section -->
<header class="relative h-[70vh] flex items-center justify-center overflow-hidden bg-stone-900">
    <div class="absolute inset-0 z-0">
        <img src="images/workshop.png" class="w-full h-full object-cover opacity-40">
    </div>
    
    <div class="relative z-10 max-w-4xl text-center px-6">
        <img src="images/logo.png" alt="Pallets Reloved" class="h-[150px] w-[150px] md:h-[250px] md:w-[250px] mx-auto mb-8 invert brightness-0 opacity-90 block">
        
        <h1 class="text-4xl md:text-6xl font-light text-white mb-6 uppercase tracking-[0.2em]">
            Pallets <span class="font-bold">Reloved</span>
        </h1>
        <p class="text-stone-300 text-lg md:text-xl max-w-4xl mx-auto mb-10 font-light tracking-wide">
            Giving discarded & Unwanted Wood a Second Life.<br> 
            Handcrafted items made exclusively from carefully sourced reclaimed pallets and timber.
        </p>
        <div class="flex justify-center">
            <a href="/shop" class="bg-white text-black px-10 py-4 font-bold uppercase text-sm tracking-widest hover:bg-stone-200 transition no-underline">
                The Collection
            </a>
        </div>
    </div>
</header>

<!-- Main Content Section -->


    <?php $conn->close(); ?>

    <!-- FOOTER: PURE TAILWIND (No Bootstrap Conflicts) -->
    <footer class="bg-stone-900 text-white pt-16 pb-8">
        <div class="max-w-6xl mx-auto px-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
                
                <!-- Column 1: Information -->
                <div>
                    <h5 class="text-white uppercase tracking-[0.2em] text-[11px] font-bold mb-6">Information</h5>
                    <ul class="space-y-2 text-stone-400 text-[13px] font-light list-none p-0">
                <li><a href="/shop/index.php?route=information/information&information_id=2" class="hover:text-white transition no-underline">Terms & Conditions</a></li>
                 <li><a href="/shop/index.php?route=information/information&information_id=4" class="hover:text-white transition no-underline">Delivery Information</a></li>
                        <li><a href="/shop/index.php?route=information/information&information_id=1" class="hover:text-white transition no-underline">About Us</a></li>
                        <li><a href="/shop/index.php?route=information/information&information_id=3" class="hover:text-white transition no-underline">Privacy Policy</a></li>
                        
                    </ul>
                </div>

                <!-- Column 2: Customer Service -->
                <div>
                    <h5 class="text-white uppercase tracking-[0.2em] text-[11px] font-bold mb-6">Customer Service</h5>
                    <ul class="space-y-2 text-stone-400 text-[13px] font-light list-none p-0">
                        <li><a href="/shop/index.php?route=information/contact" class="hover:text-white transition no-underline">Contact Us</a></li>
                        <li><a href="/shop/index.php?route=account/return/add" class="hover:text-white transition no-underline">Returns</a></li>
                        <li><a href="/shop/index.php?route=information/sitemap" class="hover:text-white transition no-underline">Site Map</a></li>
                    </ul>
                </div>

                <!-- Column 3: Extras -->
                <div>
                    <h5 class="text-white uppercase tracking-[0.2em] text-[11px] font-bold mb-6">Extras</h5>
                    <ul class="space-y-2 text-stone-400 text-[13px] font-light list-none p-0">
                        <li><a href="/shop/index.php?route=product/manufacturer" class="hover:text-white transition no-underline">Brands</a></li>
                        <li><a href="/shop/index.php?route=account/voucher" class="hover:text-white transition no-underline">Gift Certificates</a></li>
                        <li><a href="/shop/index.php?route=product/special" class="hover:text-white transition no-underline">Specials</a></li>
                    </ul>
                </div>

                <!-- Column 4: My Account -->
                <div>
                    <h5 class="text-white uppercase tracking-[0.2em] text-[11px] font-bold mb-6">My Account</h5>
                    <ul class="space-y-2 text-stone-400 text-[13px] font-light list-none p-0">
                        <li><a href="/shop/index.php?route=account/account" class="hover:text-white transition no-underline">My Account</a></li>
                        <li><a href="/shop/index.php?route=account/order" class="hover:text-white transition no-underline">Order History</a></li>
                        <li><a href="/shop/index.php?route=account/wishlist" class="hover:text-white transition no-underline">Wish List</a></li>
                        <li><a href="/shop/index.php?route=account/newsletter" class="hover:text-white transition no-underline">Newsletter</a></li>
                    </ul>
                </div>

            </div>

            <!-- Bottom Copyright Bar -->
          <div class="max-w-6xl mx-auto px-4 text-center">
            <p class="mb-4">&copy; 2026 Pallets Reloved.</p>
            <div class="flex justify-center space-x-6 text-xl">
            </div>
        </div>
    </footer>