<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= product.name %> - <%= settings.company_name %></title>
    <meta name="description" content="Buy <%= product.name %> from <%= settings.company_name %>, <%= settings.city %>. Best prices guaranteed.">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>

<%- include('partials/header', { activePage: 'products' }) %>

    <section class="product-detail-page">
        <div class="container">
            <div class="breadcrumb">
                <a href="/">Home</a> <i class="fas fa-chevron-right"></i>
                <a href="/category/<%= product.category_slug %>"><%= product.category_name %></a> <i class="fas fa-chevron-right"></i>
                <span><%= product.name %></span>
            </div>

            <div class="product-detail-layout">
                <div class="product-detail-image">
                    <img src="<%= product.image %>" alt="<%= product.name %>" id="mainProductImage">
                </div>

                <div class="product-detail-info">
                    <h1><%= product.name %></h1>

                    <% if (product.price) { %>
                    <div class="product-detail-price">
                        <span class="price-label">Price:</span>
                        <span class="price-value"><%= product.price %></span>
                    </div>
                    <% } %>

                    <% if (product.min_order) { %>
                    <div class="product-detail-min-order">
                        <span>Minimum Order Quantity:</span> <strong><%= product.min_order %></strong>
                    </div>
                    <% } %>

                    <% if (product.description) { %>
                    <div class="product-detail-desc">
                        <p><%= product.description %></p>
                    </div>
                    <% } %>

                    <div class="product-detail-actions">
                        <button type="button" class="btn btn-primary btn-lg get-quote-btn"
                                data-category="<%= product.category_name %>"
                                data-product="<%= product.name %>"
                                data-price="<%= product.price %>"
                                data-image="<%= product.image %>">
                            <i class="fas fa-paper-plane"></i> Get Best Quote
                        </button>
                        <a href="tel:<%= settings.phone %>" class="btn btn-outline btn-lg">
                            <i class="fas fa-phone"></i> Call Now
                        </a>
                    </div>
                </div>
            </div>

            <% 
            let specs = {};
            try { specs = product.specs ? JSON.parse(product.specs) : {}; } catch(e) {}
            const specKeys = Object.keys(specs);
            %>
            <% if (specKeys.length > 0) { %>
            <div class="product-specs-section">
                <h2>Product Specifications</h2>
                <table class="specs-table">
                    <tbody>
                        <% specKeys.forEach(key => { %>
                        <tr>
                            <th><%= key %></th>
                            <td><%= specs[key] %></td>
                        </tr>
                        <% }); %>
                    </tbody>
                </table>
            </div>
            <% } %>

            <%
            let features = [];
            if (product.features) { features = product.features.split('|').filter(f => f.trim()); }
            %>
            <% if (features.length > 0) { %>
            <div class="product-features-section">
                <h2>Key Features</h2>
                <ul class="features-list">
                    <% features.forEach(f => { %>
                    <li><i class="fas fa-check-circle"></i> <%= f.trim() %></li>
                    <% }); %>
                </ul>
            </div>
            <% } %>

            <% if (relatedProducts.length > 0) { %>
            <div class="related-products-section">
                <h2>Related Products</h2>
                <div class="products-grid">
                    <% relatedProducts.forEach(rp => { %>
                    <div class="product-card" data-category="<%= product.category_name %>" data-product="<%= rp.name %>" data-price="<%= rp.price %>" data-image="<%= rp.image %>">
                        <div class="product-card-image">
                            <a href="/product/<%= rp.id %>">
                                <img src="<%= rp.image %>" alt="<%= rp.name %>" loading="lazy">
                            </a>
                        </div>
                        <div class="product-card-content">
                            <h4><a href="/product/<%= rp.id %>"><%= rp.name %></a></h4>
                            <% if (rp.price) { %>
                            <p class="product-price"><%= rp.price %></p>
                            <% } %>
                            <div class="product-card-actions">
                                <a href="/product/<%= rp.id %>" class="btn btn-sm btn-outline">View Details</a>
                                <button type="button" class="btn btn-sm btn-primary get-quote-btn">Get Quote</button>
                            </div>
                        </div>
                    </div>
                    <% }); %>
                </div>
            </div>
            <% } %>
        </div>
    </section>

<%- include('partials/footer', { categories: [{ slug: product.category_slug, name: product.category_name }] }) %>

    <script src="/js/main.js"></script>
</body>
</html>
