<?xml version="1.0" encoding="utf-8" ?>
<odoo>

    <!-- ================================================================== -->
    <!--  Snippet template – Brand Universe section                          -->
    <!-- ================================================================== -->
    <template id="fino_brands" name="Fino – Brand Universe">
        <section
            class="fino_brands o_cc o_cc1 pt64 pb64"
            data-snippet="fino_brands"
            data-name="Fino – Brand Universe"
        >
            <div class="container">

                <!-- ── Section header ──────────────────────────────────── -->
                <p class="fino_brands_section_label">Our Brand Universe</p>
                <h2 class="fino_brands_section_title" id="brands-heading">
                    Consumer &amp; Retail Destinations
                </h2>
                <p class="fino_brands_section_body">
                    Direct your clients and consumers to our flagship brand
                    destinations — each crafted to deliver the full luxury
                    experience.
                </p>

                <!-- ── Brand cards grid ────────────────────────────────── -->
                <div class="fino_brands_grid" role="list">

                    <!-- FI-NE -->
                    <a
                        class="fino_brands_card fino_brands_card--fine"
                        href="https://finecosmetic.de"
                        target="_blank"
                        rel="noopener noreferrer"
                        role="listitem"
                        aria-label="Visit [fi-ne] consumer website — finecosmetic.de"
                    >
                        <div
                            class="fino_brands_card_top_accent"
                            aria-hidden="true"
                        />
                        <img
                            class="fino_brands_card_image"
                            src="/fino_brands_snippet/static/src/img/Fine.webp"
                            alt="[fi-ne] Deodorant Cream Vetiver Geranium product"
                            loading="lazy"
                        />
                        <div
                            class="fino_brands_card_overlay"
                            aria-hidden="true"
                        />
                        <div class="fino_brands_card_content">
                            <span
                                class="fino_brands_card_eyebrow"
                            >Premium Natural Cosmetics</span>
                            <img
                                class="fino_brands_card_logo"
                                src="/fino_brands_snippet/static/src/img/Fine.svg"
                                alt="[fi-ne] brand logo"
                                loading="lazy"
                            />
                            <span class="fino_brands_card_tagline">
                                Clean. Unisex. Uncompromisingly effective.<br />
                                Made in Germany.
                            </span>
                            <span class="fino_brands_card_cta">
                                finecosmetic.de
                                <span
                                    class="fino_brands_card_cta_arrow"
                                    aria-hidden="true"
                                >&#8594;</span>
                            </span>
                        </div>
                    </a>

                    <!-- LACUEOR -->
                    <a
                        class="fino_brands_card fino_brands_card--lacueor"
                        href="https://lacueor.com"
                        target="_blank"
                        rel="noopener noreferrer"
                        role="listitem"
                        aria-label="Visit LACUEOR consumer website — lacueor.com"
                    >
                        <div
                            class="fino_brands_card_top_accent"
                            aria-hidden="true"
                        />
                        <img
                            class="fino_brands_card_image"
                            src="/fino_brands_snippet/static/src/img/Lacuoer.jpg"
                            alt="LACUEOR Staub luxury skincare product on crystal"
                            loading="lazy"
                        />
                        <div
                            class="fino_brands_card_overlay"
                            aria-hidden="true"
                        />
                        <div class="fino_brands_card_content">
                            <span
                                class="fino_brands_card_eyebrow"
                            >Premium Organic Skin Care</span>
                            <img
                                class="fino_brands_card_logo fino_brands_card_logo--lacueor"
                                src="/fino_brands_snippet/static/src/img/Lacueor.svg"
                                alt="LACUEOR brand logo"
                                loading="lazy"
                            />
                            <span class="fino_brands_card_tagline">
                                From the quantum realm to your skin.<br />
                                Made in Berlin &amp; Brandenburg with love.
                            </span>
                            <span class="fino_brands_card_cta">
                                lacueor.com
                                <span
                                    class="fino_brands_card_cta_arrow"
                                    aria-hidden="true"
                                >&#8594;</span>
                            </span>
                        </div>
                    </a>

                </div>
                <!-- /fino_brands_grid -->

            </div>
        </section>
    </template>


    <!-- ================================================================== -->
    <!--  Snippet template – B2B Partner Access                              -->
    <!-- ================================================================== -->
    <template id="fino_b2b" name="Fino – B2B Partner Access">
        <section
            class="fino_b2b o_cc o_cc1 pt64 pb64"
            data-snippet="fino_b2b"
            data-name="Fino – B2B Partner Access"
        >
            <div class="container">

                <!-- ── Section header ──────────────────────────────────── -->
                <p class="fino_b2b_label">Exclusive Partnership</p>
                <h2 class="fino_b2b_title">Apply for B2B Access</h2>
                <p class="fino_b2b_body">
                    Join our Business Partner Programme and unlock wholesale pricing,
                    exclusive promotions, and dedicated account support —
                    crafted for retailers, distributors, and professional buyers.
                </p>

                <!-- ── Benefit pillars ─────────────────────────────────── -->
                <div class="fino_b2b_benefits" role="list">

                    <!-- Bulk Pricing -->
                    <div class="fino_b2b_benefit" role="listitem">
                        <div
                            class="fino_b2b_benefit_icon_wrap"
                            aria-hidden="true"
                        >
                            <!-- Package / layers icon -->
                            <svg
                                width="28"
                                height="28"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            >
                                <path
                                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                                />
                                <polyline
                                    points="3.27 6.96 12 12.01 20.73 6.96"
                                />
                                <line x1="12" y1="22.08" x2="12" y2="12" />
                            </svg>
                        </div>
                        <span class="fino_b2b_benefit_title">Bulk Pricing</span>
                        <div class="fino_b2b_benefit_rule" aria-hidden="true" />
                        <span class="fino_b2b_benefit_text">
                            Tiered wholesale rates on every SKU across our entire
                            brand portfolio — the more you order, the more you save.
                        </span>
                    </div>

                    <!-- Exclusive Promotions -->
                    <div class="fino_b2b_benefit" role="listitem">
                        <div
                            class="fino_b2b_benefit_icon_wrap"
                            aria-hidden="true"
                        >
                            <!-- Award / star icon -->
                            <svg
                                width="28"
                                height="28"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            >
                                <circle cx="12" cy="8" r="6" />
                                <path
                                    d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"
                                />
                            </svg>
                        </div>
                        <span
                            class="fino_b2b_benefit_title"
                        >Exclusive Promotions</span>
                        <div class="fino_b2b_benefit_rule" aria-hidden="true" />
                        <span class="fino_b2b_benefit_text">
                            Partner-only seasonal campaigns, early-access product launches,
                            and co-marketing opportunities reserved for B2B members.
                        </span>
                    </div>

                    <!-- Dedicated Support -->
                    <div class="fino_b2b_benefit" role="listitem">
                        <div
                            class="fino_b2b_benefit_icon_wrap"
                            aria-hidden="true"
                        >
                            <!-- Headset / support icon -->
                            <svg
                                width="28"
                                height="28"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1.25"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            >
                                <path d="M3 18v-6a9 9 0 0 1 18 0v6" />
                                <path
                                    d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z"
                                />
                                <path
                                    d="M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"
                                />
                            </svg>
                        </div>
                        <span
                            class="fino_b2b_benefit_title"
                        >Dedicated Support</span>
                        <div class="fino_b2b_benefit_rule" aria-hidden="true" />
                        <span class="fino_b2b_benefit_text">
                            A personal account manager and priority fulfilment
                            to keep your business moving without friction.
                        </span>
                    </div>

                </div>
                <!-- /fino_b2b_benefits -->

                <!-- ── Gold rule divider ────────────────────────────────── -->
                <div class="fino_b2b_divider" aria-hidden="true" />

                <!-- ── Sign-up form placeholder ────────────────────────── -->
                <!--
                    ╔══════════════════════════════════════════════════════╗
                    ║  FORM PLACEHOLDER                                    ║
                    ║  Replace .fino_b2b_form_area with your own           ║
                    ║  sign-up form, Odoo form widget, or embedded iframe. ║
                    ╚══════════════════════════════════════════════════════╝
                -->
                <div class="fino_b2b_form_area">
                    <p class="fino_b2b_form_placeholder">
                        &#9998;&#160;&#160;Send your application here
                    </p>
                </div>
                <!-- /fino_b2b_form_area -->

                <!-- ── Footer note ──────────────────────────────────────── -->
                <p class="fino_b2b_notice">
                    Already a partner?&#160;&#160;—&#160;&#160;
                    <a href="/web/login">Sign in to your B2B account</a>
                </p>

            </div>
        </section>
    </template>


    <!-- ================================================================== -->
    <!--  Register both snippets in the website editor – Content group       -->
    <!-- ================================================================== -->
    <template
        id="snippets"
        inherit_id="website.snippets"
        name="Fino – Snippet Entries"
    >
        <xpath expr="//snippets[@id='snippet_structure']" position="inside">
            <t
                t-snippet="fino_brands_snippet.fino_brands"
                t-thumbnail="/fino_brands_snippet/static/src/img/snippet_thumb.svg"
                string="Fino – Brand Universe"
                group="content"
            />
            <t
                t-snippet="fino_brands_snippet.fino_b2b"
                t-thumbnail="/fino_brands_snippet/static/src/img/b2b_snippet_thumb.svg"
                string="Fino – B2B Partner Access"
                group="content"
            />
        </xpath>
    </template>


    <!-- ================================================================== -->
    <!--  Register the Fino Luxury header in the website header picker      -->
    <!-- ================================================================== -->
    <template
        id="snippets_header_fino"
        inherit_id="website.snippet_options"
        name="Fino Header – Header Picker Entry"
    >
        <xpath
            expr="//we-select[@data-variable='header-template']"
            position="inside"
        >
            <we-button
                title="Fino – Luxury B2B"
                data-name="header_fino_opt"
                data-trigger="regular_header_visibility_opt"
                data-customize-website-views="fino_brands_snippet.template_header_fino"
                data-customize-website-variable="'fino'"
                data-img="/fino_brands_snippet/static/src/img/header_template_fino.svg"
            />
        </xpath>
    </template>

</odoo>
