{% extends "base.html" %}
{% block title %}Reviews — Thor's Hammer Electrical LLC{% endblock %}

{% block content %}

<!-- ── PAGE HEADER ─────────────────────────────────────────── -->
<section class="relative py-24 px-4 text-center overflow-hidden grid-bg">
    <div class="absolute inset-0 pointer-events-none"
         style="background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(250,204,21,0.06) 0%, transparent 70%);"></div>
    <div class="relative z-10">
        <p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">Happy Customers</p>
        <h1 class="font-oswald text-5xl md:text-6xl font-bold text-white tracking-wide mb-4">REVIEWS</h1>
        <p class="text-gray-400 max-w-xl mx-auto">
            See what our customers are saying. Your reviews may be featured here too!
        </p>
    </div>
</section>

<!-- ── REVIEWS ─────────────────────────────────────────────── -->
<section class="py-16 px-4">
    <div class="max-w-3xl mx-auto">

        <div class="text-center mb-10">
            <p class="text-gray-400 text-sm">
                We appreciate your business and your feedback. Reviews from our Facebook page are shown below.
            </p>
        </div>

        <!-- Facebook embeds wrapped in styled containers -->
        <div class="space-y-8">

            <div class="card-hover rounded-2xl p-6 border border-white/8 flex justify-center"
                 style="background-color: #111111;">
                <iframe
                    title="Customer review from Facebook"
                    src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3Dpfbid0hsfJ6TzR6YVhThHjB1KXX3zjHDz4bSiyjVs2HGh8mjWJPEbCJpa5V7CGGgoYgoDVl%26id%3D100008520403162&show_text=true&width=500&is_preview=true"
                    width="100%" height="250"
                    style="border:none; overflow:hidden; max-width:500px; border-radius: 8px;"
                    scrolling="no" frameborder="0" allowfullscreen="true"
                    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
                </iframe>
            </div>

            <div class="card-hover rounded-2xl p-6 border border-white/8 flex justify-center"
                 style="background-color: #111111;">
                <iframe
                    title="Customer review from Facebook"
                    src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Frojo1678%2Fposts%2Fpfbid07G3vZb4M3Cobru8PmNEKTiH4w66UKxqmoKzn63yqYpx8fqz1aDMyUCpAdU21r7Nkl&show_text=true&width=500&is_preview=true"
                    width="100%" height="280"
                    style="border:none; overflow:hidden; max-width:500px; border-radius: 8px;"
                    scrolling="no" frameborder="0" allowfullscreen="true"
                    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
                </iframe>
            </div>

        </div>

        <!-- Leave a review nudge -->
        <div class="mt-12 text-center p-8 rounded-2xl border border-yellow-400/15"
             style="background-color: #111111;">
            <i class="fa-solid fa-star text-yellow-400 text-2xl mb-3 block"></i>
            <h3 class="font-oswald text-xl font-bold text-white mb-2">Leave Us a Review!</h3>
            <p class="text-gray-400 text-sm mb-5">
                Your feedback means the world to us. Leave a review on Facebook and we may feature it here.
            </p>
            <a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer"
               class="inline-block px-6 py-3 bg-yellow-400 text-black font-oswald font-bold tracking-wider
                      text-sm rounded-lg hover:bg-yellow-300 transition-all">
                LEAVE A REVIEW
            </a>
        </div>
    </div>
</section>

{% endblock %}