<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="hazard_homepage" inherit_id="website.homepage" name="Hazard Homepage">
        <xpath expr="//div[@id='wrap']" position="replace">
            <div id="wrap" class="oe_structure">
                <!-- Hero Section Inspiration from hazardrs.com -->
                <section class="s_hero_hazard">
                    <div class="container py-5">
                        <div class="row align-items-center">
                            <div class="col-lg-12 text-center" data-name="Content">
                                <h1 class="display-1 text-white mb-3" style="font-family: 'Outfit', sans-serif; font-weight: 900;">
                                    HAZARD ROUGH SOCIETY
                                </h1>
                                <p class="lead text-white-50 mb-4" style="letter-spacing: 5px;">
                                    IF YOU LOOK GOOD, YOU PLAY GOOD.
                                </p>
                                <div class="mt-4">
                                    <a href="/shop" class="btn btn-hazard btn-lg shadow-sm">
                                        SHOP COLLECTIONS
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Grid Section -->
                <section class="s_text_block py-5" data-snippet="s_text_block">
                    <div class="container text-center">
                        <div class="row">
                            <div class="col-lg-4 p-4">
                                <h3 class="mb-3">GOLF</h3>
                                <p class="text-muted">Premium apparel for the modern golfer.</p>
                                <a href="/shop/category/golf-1" class="btn btn-outline-dark btn-sm">EXPLORE</a>
                            </div>
                            <div class="col-lg-4 p-4">
                                <h3 class="mb-3">PADEL</h3>
                                <p class="text-muted">High-performance gear for the court.</p>
                                <a href="/shop/category/padel-2" class="btn btn-outline-dark btn-sm">EXPLORE</a>
                            </div>
                            <div class="col-lg-4 p-4">
                                <h3 class="mb-3">ACTIVE</h3>
                                <p class="text-muted">Superior comfort and style for every move.</p>
                                <a href="/shop/category/active-3" class="btn btn-outline-dark btn-sm">EXPLORE</a>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Brand Message Section -->
                <section class="s_features py-5" style="background-color: #000; color: #fff;">
                    <div class="container text-center py-5">
                        <h2 class="mb-4" style="letter-spacing: 2px;">PREMIUM QUALITY GOODS</h2>
                        <p class="mx-auto" style="max-width: 600px; color: #aaa;">
                            Founded on the principle that performance and style should never be mutually exclusive. 
                            Designed for those who demand excellence in every aspect of their game.
                        </p>
                    </div>
                </section>
            </div>
        </xpath>
    </template>
</odoo>
