@extends('front.master')

@section('title', 'Floor Visualizer Kenya | Wood, Laminate & Interior Flooring Ideas | Decomagna')
@section('meta_description', 'Use the Decomagna Floor Visualizer Kenya to preview wood floors, laminate flooring colours and interior flooring ideas in a realistic room setting. Compare walnut, oak, grey and rustic floor finishes before you choose your colour.')

@section('content')

@php
    $floors = [
        [
            'key' => 'walnut',
            'name' => 'Walnut',
            'room' => asset('images/visualizer/rooms/walnut.jpg'),
            'image' => asset('images/visualizer/floors/fwalnut.jpg'),
            'thumb' => asset('images/visualizer/floors/fwalnut.jpg'),
            'short' => 'Rich, warm and premium',
            'description' => 'Walnut flooring creates a rich, grounded interior with a distinctly premium feel. Its darker tone brings warmth and depth to larger living rooms, formal lounges, executive offices and statement interiors where you want the floor to feel elegant rather than understated. In Kenya, walnut tones work especially well in homes with generous natural light, feature walls, brass accents, darker joinery or leather furniture. It is a strong choice for clients who want a classic luxury look with timeless character.',
            'best_for' => 'Larger rooms, executive interiors, premium homes and formal reception spaces',
            'rating' => [
                'space' => 2,
                'maintenance' => 3,
                'versatility' => 4,
                'brightness' => 2,
                'warmth' => 5,
            ],
        ],
        [
            'key' => 'merbau',
            'name' => 'Merbau / Mahogany',
            'room' => asset('images/visualizer/rooms/merbau.jpg'),
            'image' => asset('images/visualizer/floors/fmerbau.jpg'),
            'thumb' => asset('images/visualizer/floors/fmerbau.jpg'),
            'short' => 'Bold, classic and distinguished',
            'description' => 'Merbau and mahogany-inspired flooring gives a room a strong, traditional character with a deep reddish-brown tone that feels established and refined. It suits clients who prefer a more classic wood look over pale contemporary finishes. In Kenya, this tone can work beautifully in studies, libraries, hospitality lounges, private offices and homes with warmer paint palettes, timber details or heritage-inspired furniture. It is less minimalist than light oak or grey, but it offers a richer and more distinctive identity.',
            'best_for' => 'Classic interiors, offices, hospitality settings and warm traditional spaces',
            'rating' => [
                'space' => 2,
                'maintenance' => 4,
                'versatility' => 3,
                'brightness' => 2,
                'warmth' => 5,
            ],
        ],
        [
            'key' => 'grey-light',
            'name' => 'Light Grey',
            'room' => asset('images/visualizer/rooms/grey-light.jpg'),
            'image' => asset('images/visualizer/floors/fgrey-light.jpg'),
            'thumb' => asset('images/visualizer/floors/fgrey-light.jpg'),
            'short' => 'Modern, airy and space-enhancing',
            'description' => 'Light grey flooring is one of the easiest choices for making a room feel brighter, calmer and more spacious. It is especially effective in smaller apartments, compact living rooms, modern townhouses and contemporary offices where you want the floor to open up the space rather than dominate it. In Kenya, grey tones are popular because they pair well with white walls, black aluminium, soft beige furniture, modern kitchens and minimalist interior styling. It is a practical neutral with a clean, updated look.',
            'best_for' => 'Apartments, smaller rooms, modern homes and clean contemporary interiors',
            'rating' => [
                'space' => 5,
                'maintenance' => 4,
                'versatility' => 5,
                'brightness' => 4,
                'warmth' => 3,
            ],
        ],
        [
            'key' => 'oak_natural',
            'name' => 'Oak Natural',
            'room' => asset('images/visualizer/rooms/oak_natural.jpg'),
            'image' => asset('images/visualizer/floors/foak_natural.jpg'),
            'thumb' => asset('images/visualizer/floors/foak_natural.jpg'),
            'short' => 'Balanced, timeless and easy to live with',
            'description' => 'Natural oak is one of the most versatile flooring tones because it gives you warmth without making the room feel heavy. It reflects light well, complements both classic and modern furniture, and creates a welcoming interior that feels natural rather than overly styled. For Kenyan homes, natural oak works well across living rooms, bedrooms, family homes, rental upgrades and show houses because it appeals to a broad range of tastes. It is the safe, strong all-rounder for clients who want lasting style and flexibility.',
            'best_for' => 'Family homes, living rooms, bedrooms, rentals and all-round interior use',
            'rating' => [
                'space' => 4,
                'maintenance' => 4,
                'versatility' => 5,
                'brightness' => 5,
                'warmth' => 4,
            ],
        ],
        [
            'key' => 'reclaimedoak',
            'name' => 'Reclaimed / Rustic Oak',
            'room' => asset('images/visualizer/rooms/reclaimedoak.jpg'),
            'image' => asset('images/visualizer/floors/freclaimedoak.jpg'),
            'thumb' => asset('images/visualizer/floors/freclaimedoak.jpg'),
            'short' => 'Textured, characterful and forgiving',
            'description' => 'Reclaimed or rustic oak flooring brings visible character into a room through grain movement, tonal variation and a more natural, lived-in appearance. This makes it an excellent choice for busy family spaces, hospitality projects, rustic-modern homes and interiors where you want texture and personality rather than a perfectly uniform finish. In Kenya, rustic oak can work especially well in farm-style homes, safari-inspired interiors, relaxed lounges, cafés and homes that mix modern furniture with more organic materials. It is stylish, practical and visually forgiving.',
            'best_for' => 'Busy homes, textured interiors, hospitality spaces and rustic-modern styling',
            'rating' => [
                'space' => 3,
                'maintenance' => 5,
                'versatility' => 4,
                'brightness' => 3,
                'warmth' => 4,
            ],
        ],
        [
            'key' => 'darkgrey',
            'name' => 'Dark Grey',
            'room' => asset('images/visualizer/rooms/dark-grey.jpg'),
            'image' => asset('images/visualizer/floors/fdarkgrey.jpg'),
            'thumb' => asset('images/visualizer/floors/fdarkgrey.jpg'),
            'short' => 'Modern, grounded and architectural',
            'description' => 'Dark grey flooring offers a refined and contemporary take on neutral interiors, bringing depth and contrast without overwhelming the space. It sits between light grey and darker wood tones, making it ideal for clients who want a modern look with more presence and definition. The darker tone helps anchor furniture, highlight textures and create a more architectural feel in the room. In Kenya, dark grey flooring works especially well in apartments and homes with good natural light, black aluminium frames, stone finishes or modern kitchens. It is a strong choice for those looking for a clean, premium aesthetic that remains versatile across different interior styles.',
            'best_for' => 'Modern homes, apartments, offices and interiors with contrast or darker finishes',
            'rating' => [
                'space' => 4,
                'maintenance' => 3,
                'versatility' => 5,
                'brightness' => 3,
                'warmth' => 3,
            ],
        ],
        [
            'key' => 'lightoak',
            'name' => 'Light Oak',
            'room' => asset('images/visualizer/rooms/light-oak.jpg'),
            'image' => asset('images/visualizer/floors/flight-oak.jpg'),
            'thumb' => asset('images/visualizer/floors/flight-oak.jpg'),
            'short' => 'Bright, soft and naturally spacious',
            'description' => 'Light oak flooring is one of the most effective ways to create a bright, open and welcoming interior. Its pale natural tone reflects light beautifully, making rooms feel larger, calmer and more spacious without losing the warmth of real wood. It strikes a perfect balance between modern and timeless, working equally well with minimalist interiors, Scandinavian-inspired designs and more classic family homes. In Kenya, light oak is especially popular in apartments, townhouses and homes where natural light is a key feature, as it enhances brightness while keeping the space soft and livable. It is an excellent choice for clients who want a clean, airy look that remains warm and easy to style over time.',
            'best_for' => 'Apartments, smaller rooms, bright interiors and modern family homes',
            'rating' => [
                'space' => 5,
                'maintenance' => 3,
                'versatility' => 5,
                'brightness' => 5,
                'warmth' => 4,
            ],
        ],
        [
            'key' => 'greige',
            'name' => 'Greige Oak',
            'room' => asset('images/visualizer/rooms/greige.jpg'),
            'image' => asset('images/visualizer/floors/fgreige.jpg'),
            'thumb' => asset('images/visualizer/floors/fgreige.jpg'),
            'short' => 'Balanced, modern and effortlessly refined',
            'description' => 'Greige oak flooring blends the warmth of beige with the subtle coolness of grey, creating a perfectly balanced and contemporary interior tone. It is one of the most versatile flooring choices available, offering a neutral base that works across modern, transitional and even more classic interiors without feeling too cold or too yellow. The muted tone helps soften strong contrasts in furniture and décor, making it ideal for open-plan living spaces, high-end apartments and contemporary homes. In Kenya, greige flooring is increasingly popular in modern developments and renovated homes, as it pairs well with both natural light and darker finishes, delivering a clean, premium look that remains practical and easy to maintain over time.',
            'best_for' => 'Open-plan homes, modern interiors, high-end apartments and balanced colour schemes',
            'rating' => [
                'space' => 4,
                'maintenance' => 4,
                'versatility' => 5,
                'brightness' => 4,
                'warmth' => 3,
            ],
        ],
    ];

    $defaultFloor = $floors[0];
@endphp

<style>
    .viz-page {
        padding: 95px 0 60px;
        background: linear-gradient(to bottom, #f8f6f2 0%, #f4f1eb 100%);
    }

    .viz-wrap {
        max-width: 1420px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .viz-header {
        text-align: center;
        margin-bottom: 28px;
    }

    .viz-header h1 {
        font-size: 2.45rem;
        line-height: 1.15;
        font-weight: 700;
        color: #171717;
        margin-bottom: 12px;
    }

    .viz-header p {
        max-width: 900px;
        margin: 0 auto;
        color: #5b5b5b;
        font-size: 1.05rem;
        line-height: 1.8;
    }

    .viz-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 24px;
        align-items: start;
    }
    
        .viz-loader {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(248, 246, 242, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease;
    }

    .viz-loader.active {
        opacity: 1;
    }

    .viz-loader-spinner {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 3px solid rgba(0, 0, 0, 0.12);
        border-top-color: #1d1d1d;
        animation: vizSpin 0.75s linear infinite;
    }

    @keyframes vizSpin {
        to {
            transform: rotate(360deg);
        }
    }

    .viz-stage-card,
    .viz-sidebar,
    .viz-seo-block {
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
    }

    .viz-stage-card {
        padding: 18px;
        overflow: hidden;
    }

    .viz-stage-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }

    .viz-stage-top h2,
    .viz-sidebar h2,
    .viz-seo-block h2,
    .viz-mobile-selector-head h2 {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
        color: #171717;
    }

    .viz-badges {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .viz-badge {
        background: #f2f0ec;
        color: #333;
        border-radius: 999px;
        padding: 8px 13px;
        font-size: 0.87rem;
        font-weight: 600;
    }

    .viz-stage {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        border-radius: 18px;
        overflow: hidden;
        background: #eceae6;
    }

    .viz-room-image,
    .viz-floor-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .viz-room-image {
        object-fit: cover;
        z-index: 1;
    }

    .viz-floor-overlay {
        z-index: 2;
        pointer-events: none;
        background-size: 900px auto;
        background-repeat: repeat;
        background-position: center center;
        opacity: 0.92;
        clip-path: polygon(8% 78%, 92% 78%, 100% 100%, 0% 100%);
        transform: perspective(900px) rotateX(58deg);
        transform-origin: center bottom;
        top: 58%;
        height: 55%;
        mix-blend-mode: multiply;
        filter: contrast(1.04) saturate(0.95);
    }

    .viz-mobile-selector {
        display: none;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #ece7df;
    }

    .viz-mobile-selector-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .viz-mobile-selector-head p {
        margin: 0;
        font-size: 0.82rem;
        color: #7a7a7a;
        line-height: 1.5;
    }

    .mobile-floor-strip {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-floor-strip::-webkit-scrollbar {
        height: 6px;
    }

    .mobile-floor-strip::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
        border-radius: 999px;
    }

    .mobile-floor-btn {
        flex: 0 0 94px;
        background: #fff;
        border: 1px solid #e6e0d7;
        border-radius: 16px;
        padding: 8px;
        text-align: center;
        cursor: pointer;
        scroll-snap-align: start;
        transition: all 0.22s ease;
    }

    .mobile-floor-btn.active {
        border-color: #1d1d1d;
        box-shadow: 0 0 0 2px rgba(29, 29, 29, 0.08);
        background: #fcfbf9;
    }

    .mobile-floor-btn img {
        width: 100%;
        height: 72px;
        object-fit: cover;
        border-radius: 12px;
        display: block;
        margin-bottom: 7px;
    }

    .mobile-floor-btn strong {
        display: block;
        font-size: 0.8rem;
        line-height: 1.25;
        color: #1d1d1d;
        font-weight: 700;
    }

    .viz-floor-panel {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 18px;
        align-items: start;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid #ece7df;
    }

    .viz-floor-sample {
        background: #faf8f4;
        border: 1px solid #ece7df;
        border-radius: 16px;
        padding: 10px;
    }

    .viz-floor-sample img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 12px;
        display: block;
    }

    .viz-floor-copy h3 {
        margin: 0 0 8px;
        font-size: 1.25rem;
        font-weight: 700;
        color: #171717;
    }

    .viz-floor-tag {
        display: inline-block;
        margin-bottom: 12px;
        padding: 7px 12px;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        border-radius: 999px;
        background: #f3efe7;
        color: #5e4930;
    }

    .viz-floor-copy p {
        margin: 0 0 12px;
        color: #555;
        line-height: 1.8;
        font-size: 0.98rem;
    }

    .viz-floor-best {
        color: #3f3f3f;
        font-size: 0.94rem;
        line-height: 1.7;
    }

    .viz-floor-best strong {
        color: #171717;
    }

    .viz-note {
        margin-top: 14px;
        color: #666;
        font-size: 0.92rem;
        line-height: 1.7;
    }

    .viz-sidebar {
        padding: 22px;
        position: sticky;
        top: 20px;
    }

    .viz-sidebar-head {
        margin-bottom: 16px;
    }

    .viz-sidebar-head p {
        margin: 8px 0 0;
        color: #666;
        font-size: 0.94rem;
        line-height: 1.7;
    }

    .floor-list {
        display: grid;
        gap: 12px;
    }

    .floor-btn {
        width: 100%;
        display: grid;
        grid-template-columns: 72px 1fr;
        gap: 12px;
        align-items: center;
        text-align: left;
        border: 1px solid #e6e0d7;
        background: #fff;
        border-radius: 16px;
        padding: 10px;
        cursor: pointer;
        transition: all 0.22s ease;
    }

    .floor-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
        border-color: #d5ccbf;
    }

    .floor-btn.active {
        border-color: #1d1d1d;
        box-shadow: 0 0 0 2px rgba(29, 29, 29, 0.08);
        background: #fcfbf9;
    }

    .floor-btn img {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border-radius: 12px;
        display: block;
    }

    .floor-btn-text strong {
        display: block;
        font-size: 0.96rem;
        line-height: 1.35;
        color: #1d1d1d;
        margin-bottom: 4px;
    }

    .floor-btn-text span {
        display: block;
        font-size: 0.83rem;
        line-height: 1.45;
        color: #777;
    }

    .viz-seo-block {
        margin-top: 30px;
        padding: 30px;
    }

    .viz-seo-block p {
        color: #4f4f4f;
        line-height: 1.85;
        margin-bottom: 16px;
    }

    .viz-seo-block ul {
        margin: 0 0 18px 18px;
        color: #4f4f4f;
        line-height: 1.85;
    }

    .viz-seo-block h3 {
        font-size: 1rem;
        font-weight: 700;
        color: #171717;
        margin: 22px 0 10px;
    }

    @media (max-width: 1180px) {
        .viz-main {
            grid-template-columns: 1fr;
        }

        .viz-sidebar {
            position: relative;
            top: 0;
            order: 2;
        }

        .viz-stage-card {
            order: 1;
        }
    }

    @media (max-width: 768px) {
        .viz-page {
            padding: 28px 0 50px;
        }

        .viz-wrap {
            padding: 0 14px;
        }

        .viz-header {
            margin-bottom: 20px;
        }

        .viz-header h1 {
            font-size: 1.8rem;
        }

        .viz-header p {
            font-size: 0.97rem;
            line-height: 1.7;
        }

        .viz-stage-card,
        .viz-sidebar,
        .viz-seo-block {
            border-radius: 18px;
        }

        .viz-stage-card {
            padding: 12px;
        }

        .viz-stage {
            aspect-ratio: 4 / 3;
            border-radius: 14px;
        }

        .viz-floor-overlay {
            background-size: 600px auto;
            top: 58%;
            height: 56%;
        }

        .viz-mobile-selector {
            display: block;
        }

        .viz-floor-panel {
            grid-template-columns: 1fr;
            gap: 14px;
            margin-top: 14px;
            padding-top: 14px;
        }

        .viz-floor-sample {
            max-width: 110px;
        }

        .viz-sidebar {
            display: none;
        }

        .viz-seo-block {
            padding: 22px 18px;
        }
    }
    
    .btn-decomagna {
        display: inline-block;
        padding: 14px 28px;
        background-color: #1c1c1c;
        color: #fff;
        font-size: 14px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        border-radius: 2px;
        transition: all 0.3s ease;
        text-decoration: none;
    }
    
    .btn-decomagna:hover {
        background-color: #bfa37a; /* subtle luxury gold */
        color: #fff;
        text-decoration: none;
    }
        
</style>

<section class="viz-page">
    <div class="viz-wrap">

        <div class="viz-header">
            <h1>Floor Visualizer Kenya</h1>
            <p>
                Preview different flooring colours in a realistic interior and compare warm, natural, modern and textured
                wood looks before making your final choice. This Decomagna visualizer is designed to help homeowners,
                developers, designers and renovators in Kenya choose flooring more confidently.
            </p>
        </div>

        <div class="viz-main">

            <div class="viz-stage-card">
                <div class="viz-stage-top">
                    <h2>Room Preview</h2>
                    <div class="viz-badges">
                        <div class="viz-badge">Room: Living Room</div>
                        <div class="viz-badge">Floor: <span id="selectedFloorName">{{ $defaultFloor['name'] }}</span></div>
                    </div>
                </div>

                <div class="viz-stage">
                    <img
                        id="roomImage"
                        class="viz-room-image"
                        src="{{ $defaultFloor['room'] }}"
                        alt="Living room flooring visualizer in Kenya by Decomagna"
                    >
                    <div
                        id="floorOverlay"
                        class="viz-floor-overlay"
                        style="background-image: url('{{ $defaultFloor['image'] }}');"
                        aria-hidden="true"
                    ></div>
                
                    <div id="vizLoader" class="viz-loader" aria-hidden="true">
                        <div class="viz-loader-spinner"></div>
                    </div>
                </div>
                
                <div class="viz-mobile-selector">
                    <div class="viz-mobile-selector-head">
                        <h2>Try another colour</h2>
                        <p>Swipe to compare</p>
                    </div>

                    <div class="mobile-floor-strip">
                        @foreach($floors as $floor)
                            <button
                                class="mobile-floor-btn floor-switcher {{ $loop->first ? 'active' : '' }}"
                                type="button"
                                data-floor-name="{{ $floor['name'] }}"
                                data-floor-image="{{ $floor['image'] }}"
                                data-floor-thumb="{{ $floor['thumb'] }}"
                                data-room-image="{{ $floor['room'] }}"
                                data-floor-tag="{{ $floor['short'] }}"
                                data-floor-description="{{ $floor['description'] }}"
                                data-floor-best="{{ $floor['best_for'] }}"
                                aria-label="Preview {{ $floor['name'] }} flooring in a living room"
                            >
                                <img src="{{ $floor['thumb'] }}" alt="{{ $floor['name'] }} flooring sample in Kenya">
                                <strong>{{ $floor['name'] }}</strong>
                            </button>
                        @endforeach
                    </div>
                </div>

                <div class="viz-floor-panel">
                    <div class="viz-floor-sample">
                        <img
                            id="floorSampleImage"
                            src="{{ $defaultFloor['thumb'] }}"
                            alt="{{ $defaultFloor['name'] }} flooring sample in Kenya"
                        >
                    </div>

                    <div class="viz-floor-copy">
                        <h3 id="floorTitle">{{ $defaultFloor['name'] }}</h3>
                        <div id="floorTag" class="viz-floor-tag">{{ $defaultFloor['short'] }}</div>
                        <p id="floorDescription">{{ $defaultFloor['description'] }}</p>
                        <div class="viz-floor-best">
                            <strong>Best for:</strong>
                            <span id="floorBestFor">{{ $defaultFloor['best_for'] }}</span>
                        </div>
                    </div>
                </div>

                <div class="viz-note">
                    Use this floor visualizer as a style guide before requesting samples, visiting the showroom or making a final flooring selection.
                </div>
            </div>

            <aside class="viz-sidebar">
                <div class="viz-sidebar-head">
                    <h2>Select Floor Colour</h2>
                    <p>
                        Compare tone, warmth, character and overall mood. Tap any option to update the room preview.
                    </p>
                </div>

                <div class="floor-list">
                    @foreach($floors as $floor)
                        <button
                            class="floor-btn floor-switcher {{ $loop->first ? 'active' : '' }}"
                            type="button"
                            data-floor-name="{{ $floor['name'] }}"
                            data-floor-image="{{ $floor['image'] }}"
                            data-floor-thumb="{{ $floor['thumb'] }}"
                            data-room-image="{{ $floor['room'] }}"
                            data-floor-tag="{{ $floor['short'] }}"
                            data-floor-description="{{ $floor['description'] }}"
                            data-floor-best="{{ $floor['best_for'] }}"
                            aria-label="Preview {{ $floor['name'] }} flooring in a living room"
                        >
                            <img src="{{ $floor['thumb'] }}" alt="{{ $floor['name'] }} flooring sample in Kenya">
                            <div class="floor-btn-text">
                                <strong>{{ $floor['name'] }}</strong>
                                <span>{{ $floor['short'] }}</span>
                            </div>
                        </button>
                    @endforeach
                </div>
            </aside>

        </div>

        <div class="viz-seo-block">
        
        
        <div class="container my-5 text-center">

            <p class="mb-3" style="font-size: 15px; color: #777;">
            Found a style you like? Explore our full range of laminate flooring colours and finishes.
            </p>

            <a href="{{ url('/products/original-laminate-flooring') }}" class="btn-decomagna">
            Explore Full Colour Collection →
            </a>

        </div>   
            
            <h2>Choose the Right Flooring Colour for Your Space in Kenya</h2>

            <p>
                Choosing flooring is not only about the material itself. The colour, grain character and depth of tone can
                completely change how a room feels. A darker floor can make a space feel richer and more grounded. A lighter
                floor can make it feel more open, fresh and contemporary. A textured or rustic floor can introduce warmth,
                personality and a more relaxed interior mood.
            </p>

            <p>
                In Kenya, clients often compare walnut, oak, light grey and rustic wood looks when planning homes,
                apartments, offices, hospitality spaces and show units. The right choice depends on the style of furniture,
                wall colours, natural light, maintenance expectations and the overall atmosphere the client wants to create.
                That is why a visualizer is useful: it helps you move from abstract sample pieces to a more realistic room impression.
            </p>

            <h3>Popular Flooring Directions in Kenya</h3>
            <ul>
                <li>Walnut tones for premium, darker and more formal interiors</li>
                <li>Natural oak for timeless full-home flooring that is easy to decorate around</li>
                <li>Light grey floors for modern apartments and brighter minimalist spaces</li>
                <li>Rustic or reclaimed wood looks for character, texture and relaxed warmth</li>
                <li>Warmer red-brown wood tones for classic executive or heritage-inspired interiors</li>
            </ul>

            <h3>Why a Visualizer Helps Before You Buy</h3>
            <p>
                Looking at a plank sample alone can be misleading because flooring interacts with space, light and surrounding finishes.
                A floor visualizer helps you compare colours more intelligently before ordering. It can help reduce uncertainty,
                narrow your shortlist and make discussions with your interior designer, contractor or family much easier.
            </p>

            <h3>Decomagna Flooring Kenya</h3>
            <p>
                Decomagna supplies premium flooring in Kenya for residential and commercial spaces, with a focus on high-quality
                interior finishes that balance design, practicality and long-term visual appeal. This visualizer is intended
                to help clients explore flooring colours in a clearer and more realistic way before moving to sampling,
                specification and final selection.
            </p>
        </div>

    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const floorButtons = document.querySelectorAll('.floor-switcher');
        const floorOverlay = document.getElementById('floorOverlay');
        const roomImage = document.getElementById('roomImage');
        const selectedFloorName = document.getElementById('selectedFloorName');
        const vizLoader = document.getElementById('vizLoader');

        const floorTitle = document.getElementById('floorTitle');
        const floorTag = document.getElementById('floorTag');
        const floorDescription = document.getElementById('floorDescription');
        const floorBestFor = document.getElementById('floorBestFor');
        const floorSampleImage = document.getElementById('floorSampleImage');

        function setActiveFloor(button) {
            const floorName = button.dataset.floorName;
            const floorImage = button.dataset.floorImage;
            const floorThumb = button.dataset.floorThumb;
            const roomImageSrc = button.dataset.roomImage;
            const tag = button.dataset.floorTag;
            const description = button.dataset.floorDescription;
            const bestFor = button.dataset.floorBest;

            document.querySelectorAll('.floor-switcher').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.floorName === floorName) {
                    btn.classList.add('active');
                }
            });

            vizLoader.classList.add('active');

            const preloadImage = new Image();

            preloadImage.onload = function () {
                floorOverlay.style.backgroundImage = `url('${floorImage}')`;
                roomImage.src = roomImageSrc;
                roomImage.alt = `${floorName} flooring visualizer room preview in Kenya`;

                selectedFloorName.textContent = floorName;
                floorTitle.textContent = floorName;
                floorTag.textContent = tag;
                floorDescription.textContent = description;
                floorBestFor.textContent = bestFor;
                floorSampleImage.src = floorThumb;
                floorSampleImage.alt = `${floorName} flooring sample in Kenya`;

                vizLoader.classList.remove('active');
            };

            preloadImage.onerror = function () {
                vizLoader.classList.remove('active');
            };

            preloadImage.src = roomImageSrc;
        }

        floorButtons.forEach(button => {
            button.addEventListener('click', function () {
                setActiveFloor(this);
            });
        });

        window.addEventListener('load', function () {
            const seen = new Set();

            floorButtons.forEach(button => {
                const src = button.dataset.roomImage;
                if (!seen.has(src)) {
                    const img = new Image();
                    img.src = src;
                    seen.add(src);
                }
            });
        });
    });
</script>

@endsection