<!DOCTYPE html>
<html lang="bn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ settings.product_name }} - অর্গানিক দোকান</title>
    <link rel="preconnect" href="https://cdn.tailwindcss.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">

    <link rel="preload" href="https://cdn.tailwindcss.com" as="script">
    <link rel="preload"
        href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" as="style">

    <script src="https://cdn.tailwindcss.com"></script>
    <link
        href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap&font-display=swap"
        rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        media="print" onload="this.media='all'">
    <noscript>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    </noscript>

    {% if settings.gtm_id %}
    <!-- Google Tag Manager -->
    <script>(function (w, d, s, l, i) {
            w[l] = w[l] || []; w[l].push({
                'gtm.start':
                    new Date().getTime(), event: 'gtm.js'
            }); var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', '{{ settings.gtm_id }}');</script>
    <!-- End Google Tag Manager -->
    {% endif %}
    <!-- Google Tag Manager -->
    <script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || []; w[l].push({
                'gtm.start':
                    new Date().getTime(), event: 'gtm.js'
            }); var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
                    'https://www.googletagmanager.com/gtm.js?id=GTM-NDG65FML' + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-NDG65FML');
    </script>
    <!-- End Google Tag Manager -->


    {% if settings.pixel_id %}
    <!-- Facebook Pixel Code -->
    <script>
        !function (f, b, e, v, n, t, s) {
            if (f.fbq) return; n = f.fbq = function () {
                n.callMethod ?
                    n.callMethod.apply(n, arguments) : n.queue.push(arguments)
            };
            if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
            n.queue = []; t = b.createElement(e); t.async = !0;
            t.src = v; s = b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t, s)
        }(window, document, 'script',
            'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', '{{ settings.pixel_id }}');
        fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
            src="https://www.facebook.com/tr?id={{ settings.pixel_id }}&ev=PageView&noscript=1" /></noscript>
    <!-- End Facebook Pixel Code -->
    {% endif %}


    <style>
        body {
            font-family: 'Hind Siliguri', sans-serif;
            scroll-behavior: smooth;
        }

        .hero-gradient {
            background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
        }

        .card-hover:hover {
            transform: translateY(-5px);
            transition: all 0.3s ease;
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0px);
            }
        }
    </style>
    {% if settings.custom_head_script %}
    {{ settings.custom_head_script|safe }}
    {% endif %}
</head>

<body class="bg-gray-50 text-gray-800">
    {% if settings.custom_body_script %}
    {{ settings.custom_body_script|safe }}
    {% endif %}


    <!-- Google Tag Manager (noscript) -->
    <noscript>
        <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NDG65FML" height="0" width="0"
            style="display:none;visibility:hidden">
        </iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->

    {% if settings.gtm_id %}
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ settings.gtm_id }}" height="0" width="0"
            style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    {% endif %}

    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center">
                {% if settings.logo_path %}
                <img src="{{ url_for('static', filename=settings.logo_path) }}" alt="{{ settings.shop_name }}"
                    class="h-12 w-auto object-contain" width="160" height="48">
                {% else %}
                <div class="text-2xl font-bold text-amber-600">{{ settings.shop_name }}</div>
                {% endif %}
            </div>
            <a href="#checkout"
                class="bg-amber-500 hover:bg-amber-600 text-white px-6 py-2 rounded-full font-semibold transition duration-300 shadow-md">অর্ডার
                করুন</a>
        </div>
    </header>

    <section class="hero-gradient py-12 lg:py-24">
        <div class="container mx-auto px-4 flex flex-col lg:flex-row items-center">
            <div class="lg:w-1/2 mb-10 lg:mb-0 text-center lg:text-left">
                <h1 class="text-4xl lg:text-6xl font-extrabold text-gray-900 leading-tight mb-6">
                    {{ settings.product_name }}
                </h1>
                <p class="text-lg lg:text-xl text-gray-700 mb-8">
                    {{ settings.product_description }}
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                    <a href="#checkout"
                        class="bg-indigo-600 hover:bg-indigo-700 text-white px-10 py-4 rounded-xl text-xl font-bold transition duration-300 shadow-xl flex items-center justify-center">
                        <i class="fas fa-shopping-cart mr-2"></i> এখনই অর্ডার করুন
                    </a>
                </div>
            </div>
            <div class="lg:w-1/2">
                {% if '/' in settings.image_path %}
                <img src="{{ url_for('static', filename=settings.image_path) }}" alt="Product Image"
                    class="w-full max-w-lg mx-auto rounded-3xl shadow-2xl animate-float" width="600" height="600"
                    style="aspect-ratio: 1/1;" fetchpriority="high">
                {% else %}
                <img src="{{ url_for('static', filename='images/' + settings.image_path) }}" alt="Product Image"
                    class="w-full max-w-lg mx-auto rounded-3xl shadow-2xl animate-float" width="600" height="600"
                    style="aspect-ratio: 1/1;" fetchpriority="high">
                {% endif %}
            </div>
        </div>
    </section>

    <section id="benefits" class="py-20 bg-white">
        <div class="container mx-auto px-4 text-center">
            <h2
                class="text-3xl lg:text-4xl font-bold mb-16 underline decoration-amber-500 decoration-4 underline-offset-8">
                হানি নাটের উপকারিতা</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Static benefits as requested in original scope, can be made dynamic later -->
                <div class="p-8 bg-amber-50 rounded-2xl card-hover">
                    <div class="w-16 h-16 bg-amber-200 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fa-solid fa-bolt text-2xl text-amber-700"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">তাতক্ষণিক শক্তি</h3>
                    <p class="text-gray-600 text-sm">প্রাকৃতিক মধু আপনাকে দিবে সারাদিন কাজ করার অদম্য শক্তি।</p>
                </div>
                <div class="p-8 bg-amber-50 rounded-2xl card-hover">
                    <div class="w-16 h-16 bg-amber-200 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fa-solid fa-shield-heart text-2xl text-amber-700"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">রোগ প্রতিরোধ</h3>
                    <p class="text-gray-600 text-sm">শরীরের ইমিউন সিস্টেমকে শক্তিশালী করে তোলে দ্রুততম সময়ে।</p>
                </div>
                <div class="p-8 bg-amber-50 rounded-2xl card-hover">
                    <div class="w-16 h-16 bg-amber-200 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fa-solid fa-brain text-2xl text-amber-700"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">মস্তিষ্কের পুষ্টি</h3>
                    <p class="text-gray-600 text-sm">বাদাম এবং মধুর সংমিশ্রণ স্মৃতিশক্তি উন্নত করতে সাহায্য করে।</p>
                </div>
                <div class="p-8 bg-amber-50 rounded-2xl card-hover">
                    <div class="w-16 h-16 bg-amber-200 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fa-solid fa-heart-pulse text-2xl text-amber-700"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">হৃদরোগ প্রতিরোধ</h3>
                    <p class="text-gray-600 text-sm">হৃদযন্ত্র ভালো রাখতে এর পুষ্টিগুন অতুলনীয়।</p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4 max-w-4xl">
            <div class="bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row">
                <div class="md:w-1/2 p-8 lg:p-12">
                    <h2 class="text-3xl font-bold mb-6 text-amber-600">আকর্ষণীয় অফার!</h2>
                    <ul class="space-y-4 mb-8">
                        <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-3"></i> ১ কেজি
                            প্রিমিয়াম হানি নাট</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-3"></i> ১০০% পিওর
                            ন্যাচারাল মধু</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-3"></i> প্রিমিয়াম
                            কোয়ালিটি ড্রাই ফ্রুটস</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-3"></i> সারাদেশে
                            ক্যাশ অন ডেলিভারি</li>
                    </ul>
                    <div class="mb-8">
                        <span class="text-4xl font-extrabold text-amber-600">৳{{ settings.price }}</span>
                        <span class="text-xl text-gray-400 line-through ml-3">৳{{ settings.old_price }}</span>
                    </div>
                    <a href="#checkout"
                        class="block text-center bg-gray-900 hover:bg-black text-white py-4 rounded-xl font-bold transition duration-300">অফারটি
                        নিন</a>
                </div>
                <div class="md:w-1/2 bg-amber-100 flex items-center justify-center p-8">
                    {% if '/' in settings.image_path %}
                    <img src="{{ url_for('static', filename=settings.image_path) }}" alt="Offer Image"
                        class="rounded-2xl shadow-lg" width="400" height="400" loading="lazy">
                    {% else %}
                    <img src="{{ url_for('static', filename='images/' + settings.image_path) }}" alt="Offer Image"
                        class="rounded-2xl shadow-lg" width="400" height="400" loading="lazy">
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

    {% if reviews %}
    <section id="reviews" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <h2
                class="text-3xl lg:text-4xl font-bold text-center mb-16 underline decoration-amber-500 decoration-4 underline-offset-8">
                কাস্টমার ফিডব্যাক</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {% for review in reviews %}
                <div class="bg-white p-4 rounded-3xl border border-amber-100 shadow-sm hover:shadow-md transition">
                    {% if review.image_path %}
                    <div class="mb-4 rounded-2xl overflow-hidden border border-gray-100">
                        <img src="{{ url_for('static', filename=review.image_path) }}"
                            class="w-full h-auto object-cover" alt="Review Screenshot" loading="lazy">
                    </div>
                    {% endif %}

                    {% if review.comment or review.customer_name %}
                    <div class="px-2 pb-2">
                        {% if review.rating %}
                        <div class="flex text-amber-400 mb-2 text-xs">
                            {% for i in range(review.rating) %}
                            <i class="fas fa-star"></i>
                            {% endfor %}
                        </div>
                        {% endif %}

                        {% if review.comment %}
                        <p class="text-gray-700 italic mb-4 text-sm leading-relaxed">"{{ review.comment }}"</p>
                        {% endif %}

                        <div class="flex items-center">
                            <div
                                class="w-10 h-10 rounded-full flex items-center justify-center text-white font-bold mr-3 overflow-hidden shadow-inner {% if not review.profile_pic_path %}bg-amber-400{% else %}bg-gray-100{% endif %}">
                                {% if review.profile_pic_path %}
                                <img src="{{ url_for('static', filename=review.profile_pic_path) }}"
                                    class="w-full h-full object-cover" loading="lazy">
                                {% else %}
                                {{ (review.customer_name or 'P')[0] }}
                                {% endif %}
                            </div>
                            <div>
                                <h4 class="font-bold text-gray-900 text-sm">{{ review.customer_name or 'Verified Buyer'
                                    }}</h4>
                                <p class="text-[9px] text-green-600 font-bold flex items-center">
                                    <i class="fas fa-check-circle mr-1"></i> ভেরিফাইড কাস্টমার
                                </p>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}

    <section id="checkout" class="py-20 hero-gradient">
        <div class="container mx-auto px-4 max-w-2xl">
            <div class="bg-white p-8 lg:p-12 rounded-3xl shadow-2xl border-4 border-amber-400">
                <h2 class="text-3xl font-bold text-center mb-8">এখনই অর্ডার কনফার্ম করুন!</h2>
                {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                {% for category, message in messages %}
                <div class="mb-6 p-4 rounded-lg bg-red-100 text-red-700 border border-red-200">{{ message }}</div>
                {% endfor %}
                {% endif %}
                {% endwith %}
                <form action="/order" method="POST" class="space-y-6">
                    <!-- Product Preview in Checkout -->
                    <div class="bg-amber-50 p-4 rounded-2xl border border-amber-100 flex items-center mb-8">
                        <div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 bg-white p-1">
                            {% if '/' in settings.image_path %}
                            <img src="{{ url_for('static', filename=settings.image_path) }}"
                                class="w-full h-full object-cover rounded" width="60" height="60" loading="lazy">
                            {% else %}
                            <img src="{{ url_for('static', filename='images/' + settings.image_path) }}"
                                class="w-full h-full object-cover rounded" width="60" height="60" loading="lazy">
                            {% endif %}
                        </div>
                        <div class="ml-4 flex-grow">
                            <h4 class="font-bold text-gray-800">{{ settings.product_name }}</h4>
                            <p class="text-sm text-amber-600 font-bold">৳<span id="unit-price">{{ settings.price
                                    }}</span></p>
                        </div>
                        <div class="flex items-center bg-white rounded-lg border border-amber-200">
                            <button type="button" onclick="updateQty(-1)"
                                class="w-10 h-10 flex items-center justify-center text-amber-600 font-bold hover:bg-amber-50 transition cursor-pointer">-</button>
                            <input type="number" name="quantity" id="quantity-input" value="1" min="1" readonly
                                class="w-10 text-center bg-transparent border-none focus:ring-0 font-bold text-gray-800 appearance-none">
                            <button type="button" onclick="updateQty(1)"
                                class="w-10 h-10 flex items-center justify-center text-amber-600 font-bold hover:bg-amber-50 transition cursor-pointer">+</button>
                        </div>
                    </div>

                    <div
                        class="flex justify-between items-center mb-6 px-2 bg-gray-50 p-4 rounded-xl border border-dashed border-gray-200">
                        <span class="text-gray-600 font-bold">মোট পরিমাণ:</span>
                        <span class="text-2xl font-black text-amber-600">৳<span id="total-display">{{ settings.price
                                }}</span></span>
                    </div>

                    <div>
                        <label class="block text-gray-700 font-bold mb-2">আপনার পূর্ণ নাম</label>
                        <input type="text" name="full_name" required placeholder="উদাহরণ: আপনার নাম"
                            class="w-full px-6 py-4 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-amber-500 text-lg">
                    </div>
                    <div>
                        <label class="block text-gray-700 font-bold mb-2">ডেলিভারি ঠিকানা</label>
                        <textarea name="address" required placeholder="গ্রাম, ডাকঘর, থানা, জেলা"
                            class="w-full px-6 py-4 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-amber-500 text-lg h-32"></textarea>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-bold mb-2">মোবাইল নম্বর</label>
                        <input type="tel" name="mobile" required placeholder="017XXXXXXXX"
                            class="w-full px-6 py-4 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-amber-500 text-lg">
                    </div>
                    <button type="submit"
                        class="w-full bg-amber-600 hover:bg-amber-700 text-white py-5 rounded-2xl text-2xl font-bold tracking-wider transition duration-300 shadow-xl">অর্ডার
                        কনফার্ম করুন</button>
                </form>
            </div>
        </div>
    </section>

    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4 text-center">
            {% if settings.logo_path %}
            <div class="flex justify-center mb-6">
                <img src="{{ url_for('static', filename=settings.logo_path) }}" alt="{{ settings.shop_name }}"
                    class="h-16 w-auto object-contain brightness-0 invert" width="160" height="64" loading="lazy">
            </div>
            {% else %}
            <div class="text-2xl font-bold text-amber-500 mb-6">{{ settings.shop_name }}</div>
            {% endif %}
            <p class="text-gray-400 mb-6 uppercase tracking-widest text-sm">১০০% অর্গানিক ও ফ্রেশ ফুড সাপ্লায়ার</p>

            <div class="flex justify-center space-x-8 mb-10">
                <a href="{{ settings.facebook_url }}" target="_blank"
                    class="w-12 h-12 bg-white/5 rounded-full flex items-center justify-center hover:bg-amber-600 transition text-2xl">
                    <i class="fab fa-facebook-f"></i>
                </a>
                <a href="https://wa.me/{{ settings.whatsapp_number }}" target="_blank"
                    class="w-12 h-12 bg-white/5 rounded-full flex items-center justify-center hover:bg-green-600 transition text-2xl">
                    <i class="fab fa-whatsapp"></i>
                </a>
            </div>

            <div class="text-gray-400 mb-8">
                <p class="mb-2">সরাসরি কল করুন:</p>
                <a href="tel:{{ settings.support_phone }}"
                    class="text-2xl font-bold text-white hover:text-amber-500 transition">{{ settings.support_phone
                    }}</a>
            </div>

            <div class="border-t border-gray-800 pt-8 text-gray-500 text-sm">
                &copy; ২০২৪ {{ settings.shop_name }}। সর্বস্বত্ব সংরক্ষিত।
            </div>
        </div>
    </footer>
    <script>
        // ১. quantity আপডেট এবং calculation এর logic
        function updateQty(change) {
            const input = document.getElementById('quantity-input');
            const unitPrice = parseFloat(document.getElementById('unit-price').innerText);
            const display = document.getElementById('total-display');

            let currentVal = parseInt(input.value);
            let newVal = currentVal + change;

            if (newVal < 1) newVal = 1;

            input.value = newVal;
            display.innerText = (newVal * unitPrice).toFixed(2);
        }

        // ২. Data Layer Events
        document.addEventListener('DOMContentLoaded', function () {

            // View Item Event (যখন পেজ লোড হবে)
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                'event': 'view_item',
                'ecommerce': {
                    'items': [{
                        'item_name': '{{ settings.product_name }}',
                        'price': '{{ settings.price }}',
                        'quantity': 1
                    }]
                }
            });

            // Add to Cart / Order Button Click Tracking
            const checkoutBtn = document.querySelector('a[href="#checkout"]');
            if (checkoutBtn) {
                checkoutBtn.addEventListener('click', function () {
                    window.dataLayer.push({
                        'event': 'add_to_cart',
                        'item_name': '{{ settings.product_name }}',
                        'price': '{{ settings.price }}'
                    });
                });
            }

            // Form Submission (Purchase Event)
            const orderForm = document.querySelector('form[action="/order"]');
            if (orderForm) {
                orderForm.addEventListener('submit', function () {
                    const qty = document.getElementById('quantity-input').value;
                    const total = document.getElementById('total-display').innerText;

                    window.dataLayer.push({
                        'event': 'purchase',
                        'ecommerce': {
                            'transaction_id': 'T_' + new Date().getTime(), // ইউনিক আইডি
                            'value': total,
                            'currency': 'BDT',
                            'items': [{
                                'item_name': '{{ settings.product_name }}',
                                'price': '{{ settings.price }}',
                                'quantity': qty
                            }]
                        }
                    });
                });
            }
        });
    </script>





</body>

</html>