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

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit', sans-serif; font-size:1.8rem; color:#0f172a; margin:0;">Product Intelligence Engine</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Explore products in 3D, compare materials, and check compatibility.</p>
    </div>
</div>

<div class="grid-2">
    <!-- 3D Viewer Mockup -->
    <div class="card" style="padding:0; overflow:hidden;">
        <div style="padding:20px; border-bottom:1px solid #e2e8f0; display:flex; justify-content:space-between; align-items:center;">
            <h3 style="margin:0; font-size:1.1rem; color:#0f172a;"><i class="fas fa-cube" style="color:#3b82f6; margin-right:8px;"></i> 3D Product Viewer</h3>
            <span style="background:#f1f5f9; padding:4px 10px; border-radius:6px; font-size:0.8rem; color:#64748b;">Double Bowl Sink SS-304</span>
        </div>
        <div style="height:350px; background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;">
            <i class="fas fa-cubes" style="font-size:6rem; color:#94a3b8; text-shadow: 0 10px 15px rgba(0,0,0,0.1);"></i>
            <p style="margin-top:20px; color:#64748b; font-size:0.9rem;">Interactive 3D Model Loading...</p>
            <div style="position:absolute; bottom:20px; display:flex; gap:10px;">
                <button style="background:#fff; border:1px solid #cbd5e1; width:40px; height:40px; border-radius:50%; cursor:pointer; color:#475569; box-shadow:0 2px 4px rgba(0,0,0,0.05);"><i class="fas fa-undo"></i></button>
                <button style="background:#fff; border:1px solid #cbd5e1; width:40px; height:40px; border-radius:50%; cursor:pointer; color:#475569; box-shadow:0 2px 4px rgba(0,0,0,0.05);"><i class="fas fa-search-plus"></i></button>
                <button style="background:#fff; border:1px solid #cbd5e1; width:40px; height:40px; border-radius:50%; cursor:pointer; color:#475569; box-shadow:0 2px 4px rgba(0,0,0,0.05);"><i class="fas fa-vr-cardboard"></i></button>
            </div>
        </div>
    </div>

    <div style="display:flex; flex-direction:column; gap:24px;">
        <!-- Material Comparison -->
        <div class="card">
            <h3 style="margin:0 0 15px; font-size:1.1rem; color:#0f172a;"><i class="fas fa-balance-scale" style="color:#10b981; margin-right:8px;"></i> Material Comparison</h3>
            <table style="width:100%; border-collapse:collapse; font-size:0.85rem;">
                <thead>
                    <tr style="text-align:left; color:#64748b; border-bottom:1px solid #e2e8f0;">
                        <th style="padding-bottom:10px;">Property</th>
                        <th style="padding-bottom:10px;">SS 304</th>
                        <th style="padding-bottom:10px;">SS 202</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="padding:10px 0; border-bottom:1px solid #f1f5f9; font-weight:500;">Corrosion Resistance</td>
                        <td style="padding:10px 0; border-bottom:1px solid #f1f5f9; color:#10b981;"><i class="fas fa-check-circle"></i> High</td>
                        <td style="padding:10px 0; border-bottom:1px solid #f1f5f9; color:#d97706;">Moderate</td>
                    </tr>
                    <tr>
                        <td style="padding:10px 0; border-bottom:1px solid #f1f5f9; font-weight:500;">Durability</td>
                        <td style="padding:10px 0; border-bottom:1px solid #f1f5f9;">Excellent</td>
                        <td style="padding:10px 0; border-bottom:1px solid #f1f5f9;">Good</td>
                    </tr>
                    <tr>
                        <td style="padding:10px 0; font-weight:500;">Price Segment</td>
                        <td style="padding:10px 0;">Premium</td>
                        <td style="padding:10px 0;">Economical</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Compatibility Checker -->
        <div class="card">
            <h3 style="margin:0 0 15px; font-size:1.1rem; color:#0f172a;"><i class="fas fa-plug" style="color:#8b5cf6; margin-right:8px;"></i> Compatibility Checker</h3>
            <p style="font-size:0.85rem; color:#64748b; margin-bottom:15px;">Check if the selected faucet fits your sink mounting hole.</p>
            <div style="display:flex; gap:10px; margin-bottom:15px;">
                <select style="flex:1; padding:8px; border:1px solid #cbd5e1; border-radius:6px; font-size:0.85rem; outline:none;">
                    <option>Select Sink...</option>
                    <option selected>Double Bowl Sink SS-304</option>
                </select>
                <select style="flex:1; padding:8px; border:1px solid #cbd5e1; border-radius:6px; font-size:0.85rem; outline:none;">
                    <option>Select Faucet...</option>
                    <option selected>Premium Pull-down Faucet</option>
                </select>
            </div>
            <div style="background:#dcfce7; color:#166534; padding:10px; border-radius:6px; font-size:0.85rem; display:flex; align-items:center; gap:8px;">
                <i class="fas fa-check-circle"></i> 100% Compatible (Standard 35mm Hole)
            </div>
        </div>
    </div>
</div>

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