<?php
$page_title = 'Product Details';
require_once __DIR__ . '/header.php';
?>

<div class="breadcrumb" style="margin-bottom:20px; font-size:0.9rem; color:#64748b;">
    <a href="index.php" style="color:#2563eb; text-decoration:none;">Home</a> / 
    <a href="products.php" style="color:#2563eb; text-decoration:none;">Kitchen Sinks</a> / 
    <span style="color:#0f172a;">Premium Sink 24x18</span>
</div>

<div class="card" style="padding:30px;">
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:40px;">
        <!-- Left: Images -->
        <div>
            <div style="position:relative; width:100%; height:400px; background:#f8fafc; border-radius:12px; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; margin-bottom:16px;">
                <span style="position:absolute; top:20px; left:20px; background:#16a34a; color:#fff; padding:4px 12px; font-size:0.8rem; border-radius:12px; font-weight:700; z-index:2;">Best Seller</span>
                <i class="fas fa-image" style="font-size:8rem; color:#cbd5e1;"></i>
                <button style="position:absolute; bottom:20px; right:20px; background:#fff; border:1px solid #cbd5e1; padding:8px 16px; border-radius:20px; font-weight:600; cursor:pointer; box-shadow:0 4px 6px rgba(0,0,0,0.05);"><i class="fas fa-sync-alt" style="margin-right:6px;"></i> 360° View</button>
            </div>
            <div style="display:flex; gap:12px;">
                <div style="width:80px; height:80px; background:#f8fafc; border:2px solid #2563eb; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer;"><i class="fas fa-image" style="color:#cbd5e1; font-size:1.5rem;"></i></div>
                <div style="width:80px; height:80px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer;"><i class="fas fa-image" style="color:#cbd5e1; font-size:1.5rem;"></i></div>
                <div style="width:80px; height:80px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer;"><i class="fas fa-image" style="color:#cbd5e1; font-size:1.5rem;"></i></div>
                <div style="width:80px; height:80px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer;"><i class="fas fa-play-circle" style="color:#64748b; font-size:1.5rem;"></i></div>
            </div>
        </div>

        <!-- Right: Details -->
        <div>
            <h1 style="margin:0 0 10px; font-size:2.2rem; font-family:'Outfit', sans-serif; color:#0f172a;">Premium Sink 24x18</h1>
            <div style="display:flex; align-items:center; gap:12px; margin-bottom:20px; font-size:0.9rem;">
                <div style="color:#f59e0b;"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
                <span style="color:#64748b;">(124 Reviews)</span>
                <span style="color:#cbd5e1;">|</span>
                <span style="color:#16a34a; font-weight:600;"><i class="fas fa-check-circle"></i> In Stock</span>
            </div>

            <div style="font-size:2.5rem; font-weight:700; color:#2563eb; margin-bottom:24px;">
                ₹4,850.00 <span style="font-size:1.2rem; color:#94a3b8; text-decoration:line-through; font-weight:400;">₹5,500.00</span>
                <span style="font-size:0.9rem; color:#ef4444; background:#fee2e2; padding:4px 8px; border-radius:6px; vertical-align:middle; margin-left:12px;">12% OFF</span>
            </div>

            <p style="color:#475569; line-height:1.6; margin-bottom:24px;">
                Premium quality handmade stainless steel kitchen sink designed for durability and elegance. Features noise reduction pads and anti-condensation coating.
            </p>

            <div style="margin-bottom:24px;">
                <strong style="display:block; margin-bottom:10px; color:#0f172a;">Material Grade</strong>
                <div style="display:flex; gap:12px;">
                    <button style="padding:8px 16px; border:2px solid #2563eb; background:#eff6ff; color:#2563eb; border-radius:6px; font-weight:600; cursor:pointer;">SS 304</button>
                    <button style="padding:8px 16px; border:1px solid #cbd5e1; background:#fff; color:#475569; border-radius:6px; cursor:pointer;">SS 202</button>
                </div>
            </div>

            <div style="margin-bottom:30px;">
                <strong style="display:block; margin-bottom:10px; color:#0f172a;">Finish</strong>
                <div style="display:flex; gap:12px;">
                    <button style="padding:8px 16px; border:2px solid #2563eb; background:#eff6ff; color:#2563eb; border-radius:6px; font-weight:600; cursor:pointer;">Matte</button>
                    <button style="padding:8px 16px; border:1px solid #cbd5e1; background:#fff; color:#475569; border-radius:6px; cursor:pointer;">Glossy</button>
                </div>
            </div>

            <div style="display:flex; gap:16px; margin-bottom:30px;">
                <div style="display:flex; border:1px solid #cbd5e1; border-radius:8px; overflow:hidden;">
                    <button style="width:40px; background:#f8fafc; border:none; cursor:pointer; font-size:1.2rem; color:#475569;">-</button>
                    <input type="text" value="1" style="width:50px; text-align:center; border:none; border-left:1px solid #cbd5e1; border-right:1px solid #cbd5e1; font-weight:600; font-size:1rem; outline:none;">
                    <button style="width:40px; background:#f8fafc; border:none; cursor:pointer; font-size:1.2rem; color:#475569;">+</button>
                </div>
                <button style="flex:1; background:#2563eb; color:#fff; border:none; border-radius:8px; font-size:1.1rem; font-weight:600; cursor:pointer; transition:background 0.2s;"><i class="fas fa-shopping-cart" style="margin-right:8px;"></i> Add to Cart</button>
                <button style="flex:1; background:#0f172a; color:#fff; border:none; border-radius:8px; font-size:1.1rem; font-weight:600; cursor:pointer;"><i class="fas fa-bolt" style="margin-right:8px;"></i> Buy Now</button>
            </div>

            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:16px; padding:20px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;">
                <div style="display:flex; align-items:center; gap:12px;">
                    <i class="fas fa-shield-alt" style="font-size:1.5rem; color:#2563eb;"></i>
                    <div>
                        <div style="font-weight:600; color:#0f172a;">10 Year Warranty</div>
                        <div style="font-size:0.8rem; color:#64748b;">Against manufacturing defects</div>
                    </div>
                </div>
                <div style="display:flex; align-items:center; gap:12px;">
                    <i class="fas fa-file-pdf" style="font-size:1.5rem; color:#ef4444;"></i>
                    <div>
                        <div style="font-weight:600; color:#0f172a;">Download Brochure</div>
                        <div style="font-size:0.8rem; color:#2563eb; cursor:pointer;">Click here to download</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card" style="margin-top:24px;">
    <!-- Tabs -->
    <div style="display:flex; gap:30px; border-bottom:1px solid #e2e8f0; margin-bottom:24px;">
        <div style="padding-bottom:12px; border-bottom:2px solid #2563eb; color:#2563eb; font-weight:600; cursor:pointer; font-size:1.1rem;">Specifications</div>
        <div style="padding-bottom:12px; color:#64748b; font-weight:500; cursor:pointer; font-size:1.1rem;">Installation Guide</div>
        <div style="padding-bottom:12px; color:#64748b; font-weight:500; cursor:pointer; font-size:1.1rem;">Reviews (124)</div>
    </div>
    
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:40px;">
        <table style="width:100%; border-collapse:collapse;">
            <tr style="border-bottom:1px solid #f1f5f9;"><td style="padding:12px 0; color:#64748b;">Brand</td><td style="font-weight:500; color:#0f172a;">Balimeen</td></tr>
            <tr style="border-bottom:1px solid #f1f5f9;"><td style="padding:12px 0; color:#64748b;">Overall Dimensions</td><td style="font-weight:500; color:#0f172a;">24" L x 18" W x 9" D</td></tr>
            <tr style="border-bottom:1px solid #f1f5f9;"><td style="padding:12px 0; color:#64748b;">Bowl Dimensions</td><td style="font-weight:500; color:#0f172a;">22" L x 16" W x 9" D</td></tr>
            <tr style="border-bottom:1px solid #f1f5f9;"><td style="padding:12px 0; color:#64748b;">Material</td><td style="font-weight:500; color:#0f172a;">Stainless Steel 304 Grade</td></tr>
        </table>
        <table style="width:100%; border-collapse:collapse;">
            <tr style="border-bottom:1px solid #f1f5f9;"><td style="padding:12px 0; color:#64748b;">Thickness</td><td style="font-weight:500; color:#0f172a;">1.0 mm</td></tr>
            <tr style="border-bottom:1px solid #f1f5f9;"><td style="padding:12px 0; color:#64748b;">Finish Type</td><td style="font-weight:500; color:#0f172a;">Matte / Satin</td></tr>
            <tr style="border-bottom:1px solid #f1f5f9;"><td style="padding:12px 0; color:#64748b;">Installation Type</td><td style="font-weight:500; color:#0f172a;">Topmount / Undermount</td></tr>
            <tr style="border-bottom:1px solid #f1f5f9;"><td style="padding:12px 0; color:#64748b;">Sound Dampening</td><td style="font-weight:500; color:#0f172a;">Heavy duty rubber pads</td></tr>
        </table>
    </div>
</div>

<?php 
echo '</div></main></body></html>'; 
?>
