@extends('layouts.tabler')

@section('title', 'LuSar d.o.o. – Inovativna tehnološka rješenja')

@push('styles')
<style>
    /* Full-bleed hero izlazi izvan page-body containera */
    .hero-fullbleed {
        margin: -1.5rem -1.5rem 0;
        min-height: 580px;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
    }
    @media (max-width: 767.98px) {
        .hero-fullbleed { min-height: 420px; margin: -1rem -1rem 0; }
    }
    .stat-number { font-size: 2.2rem; font-weight: 800; line-height: 1; }
    .section-wave {
        position: relative;
        margin-top: -1px;
    }
    .testimonial-card {
        border: none;
        background: var(--tblr-bg-surface-secondary);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .testimonial-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0,0,0,.1);
    }
</style>
@endpush

@section('content')

    {{-- ===== HERO ===== --}}
    <div class="hero-fullbleed mb-5">
        <div style="position: absolute; inset: 0; background-image: url('{{ asset('media/Nsalovna.webp') }}'); background-size: cover; background-position: center;"></div>
        <div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20,80,170,0.92) 0%, rgba(10,25,55,0.80) 100%);"></div>
        <div class="container-xl" style="position: relative; z-index: 1; padding: 80px 1.5rem;">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <div class="text-white">
                        <div class="mb-3">
                            <span class="badge bg-white text-primary fw-bold px-3 py-2" style="font-size: 0.85rem; letter-spacing: .04em; margin-bottom: 2rem;">LuSar d.o.o. — Osijek</span>
                        </div>
                        <h1 class="display-4 fw-bold text-white mb-3" style="line-height: 1.15;">
                            Inovativna rješenja<br>za vaš prostor i poslovanje
                        </h1>
                        <p class="lead mb-4" style="color: rgba(255,255,255,0.92); font-size: 1.15rem; max-width: 520px;">
                            Od pametnih staklenih površina do LED zaslona i klimatizacije — nudimo vrhunska tehnološka rješenja za domove i poslovne prostore.
                        </p>
                        <div class="d-flex flex-wrap gap-3">
                            <a href="{{ route('kontakt') }}" class="btn btn-white btn-lg fw-semibold">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
                                </svg>
                                Kontaktirajte nas
                            </a>
                            <a href="{{ route('klime') }}" class="btn btn-outline-white btn-lg">
                                Naše usluge
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M5 12l14 0" /><path d="M15 16l4 -4" /><path d="M15 8l4 4" />
                                </svg>
                            </a>
                        </div>
                        {{-- Mini trust badges --}}
                        <div class="d-flex flex-wrap gap-4 mt-5">
                            <div class="d-flex align-items-center gap-2 text-white-75" style="opacity:.8;">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 12l2 2l4 -4" /><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" /></svg>
                                <span class="small fw-medium">Ovlašteni tehničari</span>
                            </div>
                            <div class="d-flex align-items-center gap-2 text-white-75" style="opacity:.8;">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 7v5l3 3" /></svg>
                                <span class="small fw-medium">Brza izvedba</span>
                            </div>
                            <div class="d-flex align-items-center gap-2 text-white-75" style="opacity:.8;">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
                                <span class="small fw-medium">Pisano jamstvo</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== STATS s countup.js ===== --}}
    <div class="row g-3 mb-5">
        @foreach([
            ['num' => 15,  'suffix' => '+', 'label' => 'godina iskustva',      'color' => 'blue'],
            ['num' => 500, 'suffix' => '+', 'label' => 'zadovoljnih klijenata', 'color' => 'green'],
            ['num' => 4,   'suffix' => '',  'label' => 'područja djelovanja',   'color' => 'purple'],
            ['num' => 24,  'suffix' => '/7','label' => 'podrška i servis',      'color' => 'orange'],
        ] as $i => $stat)
        <div class="col-6 col-md-3">
            <div class="card card-sm text-center h-100">
                <div class="card-body py-4">
                    <div class="stat-number text-{{ $stat['color'] }} mb-1">
                        <span class="countup-number" data-countup-target="{{ $stat['num'] }}">{{ $stat['num'] }}</span>{{ $stat['suffix'] }}
                    </div>
                    <div class="text-secondary small">{{ $stat['label'] }}</div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    {{-- ===== NAŠE USLUGE ===== --}}
    <div class="mb-5">
        <div class="row mb-4 align-items-end">
            <div class="col">
                <h2 class="mb-1">Naše usluge</h2>
                <p class="text-secondary mb-0">Odaberite jedno od naših područja stručnosti</p>
            </div>
        </div>
        <div class="row row-cards">

            {{-- Klime --}}
            <div class="col-md-6 col-lg-3">
                <div class="card card-link card-link-pop h-100">
                    <div style="height: 200px; overflow: hidden;">
                        <img src="{{ asset('media/KLIME.webp') }}" alt="Klima uređaji" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="card-body">
                        <span class="badge bg-blue-lt mb-2">Klimatizacija</span>
                        <h3 class="card-title">Klima uređaji</h3>
                        <p class="text-secondary small">Prodaja, montaža i servis klima uređaja vodećih svjetskih proizvođača. Rješenja za domove, urede i industrijske prostore.</p>
                    </div>
                    <div class="card-footer">
                        <a href="{{ route('klime') }}" class="btn btn-primary w-100">Saznaj više</a>
                    </div>
                </div>
            </div>

            {{-- LED Film --}}
            <div class="col-md-6 col-lg-3">
                <div class="card card-link card-link-pop h-100">
                    <div style="height: 200px; overflow: hidden;">
                        <img src="{{ asset('media/LED-FILM.webp') }}" alt="LED Film" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="card-body">
                        <span class="badge bg-yellow-lt mb-2">Digitalni mediji</span>
                        <h3 class="card-title">LED Film</h3>
                        <p class="text-secondary small">Transformirajte prozore i fasade u interaktivne LED zaslone. Nova generacija urbanog digitalnog marketinga za vaš poslovni prostor.</p>
                    </div>
                    <div class="card-footer">
                        <a href="{{ route('led-film') }}" class="btn btn-primary w-100">Saznaj više</a>
                    </div>
                </div>
            </div>

            {{-- Smart Film --}}
            <div class="col-md-6 col-lg-3">
                <div class="card card-link card-link-pop h-100">
                    <div style="height: 200px; overflow: hidden;">
                        <img src="{{ asset('media/SMART-FILM.webp') }}" alt="Smart Film" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="card-body">
                        <span class="badge bg-green-lt mb-2">Pametno staklo</span>
                        <h3 class="card-title">Smart Film</h3>
                        <p class="text-secondary small">Kontrolirajte privatnost i svjetlost jednim klikom. Smart film pretvara prozirno staklo u neprozirno uz pomoć električne struje.</p>
                    </div>
                    <div class="card-footer">
                        <a href="{{ route('smart-film') }}" class="btn btn-primary w-100">Saznaj više</a>
                    </div>
                </div>
            </div>

            {{-- Pozivni centar --}}
            <div class="col-md-6 col-lg-3">
                <div class="card card-link card-link-pop h-100">
                    <div style="height: 200px; overflow: hidden;">
                        <img src="{{ asset('media/CallDesk-1.png') }}" alt="Pozivni centar" style="width: 100%; height: 100%; object-fit: cover; object-position: top;">
                    </div>
                    <div class="card-body">
                        <span class="badge bg-purple-lt mb-2">Poslovne usluge</span>
                        <h3 class="card-title">Pozivni centar</h3>
                        <p class="text-secondary small">15+ godina iskustva u teleprodaji, primanju dolaznih poziva i anketiranju. Profesionalni call centar s naprednim alatima i izvještajima.</p>
                    </div>
                    <div class="card-footer">
                        <a href="{{ route('pozivni-centar') }}" class="btn btn-primary w-100">Saznaj više</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- ===== UTD HIGHLIGHT ===== --}}
    <div class="card mb-5" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); overflow: hidden;">
        <div class="row g-0 align-items-center">
            <div class="col-md-5" style="height: 300px; overflow: hidden;">
                <img src="{{ asset('media/filmbase.jpeg') }}" alt="Ultratanki prozirni zaslon" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.7;">
            </div>
            <div class="col-md-7 p-4 p-md-5">
                <span class="badge bg-cyan-lt text-cyan mb-3">Najnovija tehnologija</span>
                <h2 class="text-white mb-3">Ultratanki prozirni zaslon (UTD)</h2>
                <p class="mb-4" style="color: rgba(255,255,255,0.85);">
                    Revolucija u prikaznim tehnologijama — transparentnost veća od 70%, rezolucija do 8K, debljina svega <strong class="text-white">0,2 mm</strong>. Idealno za izložbene prostore, maloprodaju i kulturni turizam.
                </p>
                <a href="{{ route('ultratanki-zaslon') }}" class="btn btn-cyan">
                    Otkrijte UTD tehnologiju
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M15 16l4 -4" /><path d="M15 8l4 4" />
                    </svg>
                </a>
            </div>
        </div>
    </div>

    {{-- ===== ZAŠTO MI ===== --}}
    <div class="mb-5">
        <div class="row mb-4">
            <div class="col text-center">
                <h2 class="mb-1">Zašto odabrati LuSar?</h2>
                <p class="text-secondary">Pouzdanost, stručnost i inovacija na jednom mjestu</p>
            </div>
        </div>
        <div class="row row-cards">
            @foreach([
                ['ikona' => '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 12l2 2l4 -4" /><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" />', 'boja' => 'blue', 'naslov' => 'Ovlašteni stručnjaci', 'opis' => 'Certificirani tehničari s višegodišnjim iskustvom. Pisano jamstvo na sav rad i materijal.'],
                ['ikona' => '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M12 3l0 -2" /><path d="M12 21l0 -2" /><path d="M3 12l-2 0" /><path d="M21 12l-2 0" /><path d="M5.6 5.6l-1.4 -1.4" /><path d="M18.4 5.6l1.4 -1.4" /><path d="M18.4 18.4l1.4 1.4" /><path d="M5.6 18.4l-1.4 1.4" />', 'boja' => 'yellow', 'naslov' => 'Inovativne tehnologije', 'opis' => 'Jedini u regiji koji nude Smart Film, LED Film i UTD zaslone uz klimatizacijska rješenja.'],
                ['ikona' => '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 7v5l3 3" />', 'boja' => 'green', 'naslov' => 'Brza izvedba', 'opis' => 'Većinu standardnih ugradnji završavamo u jednom radnom danu, bez remećenja vašeg rasporeda.'],
                ['ikona' => '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15h6v6" /><path d="M15 21l6 -6" />', 'boja' => 'purple', 'naslov' => 'Podrška nakon servisa', 'opis' => 'Dostupni smo i nakon završenog posla. Savjetujemo, educiramo i reagiramo brzo na svaki upit.'],
            ] as $zast)
            <div class="col-sm-6 col-lg-3">
                <div class="card h-100 text-center">
                    <div class="card-body py-4">
                        <div class="avatar avatar-xl bg-{{ $zast['boja'] }}-lt text-{{ $zast['boja'] }} mb-3 mx-auto">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                {!! $zast['ikona'] !!}
                            </svg>
                        </div>
                        <h4 class="fw-bold mb-2">{{ $zast['naslov'] }}</h4>
                        <p class="text-secondary small mb-0">{{ $zast['opis'] }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- ===== RECENZIJE KLIJENATA ===== --}}
    <div class="mb-5">
        <div class="row mb-4">
            <div class="col text-center">
                <h2 class="mb-1">Što kažu naši klijenti</h2>
                <p class="text-secondary">Povjerenje i zadovoljstvo su naš najveći uspjeh</p>
            </div>
        </div>
        <div class="row row-cards">
            @foreach([
                ['ime' => 'Marija H.', 'posao' => 'Vlasnica apartmana', 'tekst' => 'Montaža klime obavljena brzo i uredno. Tehničari su bili iznimno profesionalni i sve objasnili. Preporučam svima!', 'ocjena' => 5],
                ['ime' => 'Tomislav K.', 'posao' => 'Direktor tvrtke', 'tekst' => 'Smart Film instalirali smo u konferencijsku sobu. Klijenti su oduševljeni. LuSar tim je bio pouzdan i stručan kroz cijeli proces.', 'ocjena' => 5],
                ['ime' => 'Ivana M.', 'posao' => 'Vlasnica kafića', 'tekst' => 'Servis klime je obavljen brzo, bez naknadnih iznenađenja. Cijenimo transparentnost i pristojnost ekipe.', 'ocjena' => 5],
            ] as $rec)
            <div class="col-md-4">
                <div class="card testimonial-card h-100">
                    <div class="card-body p-4">
                        <div class="d-flex mb-3">
                            @for ($s = 0; $s < $rec['ocjena']; $s++)
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87l1.18 6.88L12 17.77l-6.18 3.25L7 14.14L2 9.27l6.91-1.01L12 2z"/></svg>
                            @endfor
                        </div>
                        <p class="text-secondary mb-4" style="font-style: italic;">"{{ $rec['tekst'] }}"</p>
                        <div class="d-flex align-items-center gap-3">
                            <span class="avatar bg-primary-lt text-primary">{{ substr($rec['ime'], 0, 1) }}</span>
                            <div>
                                <div class="fw-bold small">{{ $rec['ime'] }}</div>
                                <div class="text-secondary" style="font-size: .8rem;">{{ $rec['posao'] }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- ===== CTA kontakt ===== --}}
    <div class="card mb-4" style="background: linear-gradient(135deg, #206bc4 0%, #1a1a2e 100%); overflow: hidden; position: relative;">
        <div style="position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.06);"></div>
        <div style="position: absolute; left: 40%; bottom: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.04);"></div>
        <div class="card-body p-5 position-relative text-center">
            <h2 class="text-white fw-bold mb-2">Imate pitanje ili projekt?</h2>
            <p class="mb-4" style="color: rgba(255,255,255,.85); max-width: 540px; margin-inline: auto;">Naš tim stoji vam na raspolaganju. Kontaktirajte nas i zajedno ćemo pronaći najbolje rješenje za vaše potrebe.</p>
            <div class="d-flex justify-content-center gap-3 flex-wrap">
                <a href="{{ route('kontakt') }}" class="btn btn-white btn-lg fw-semibold">Pošalji upit</a>
                <a href="tel:+385995492621" class="btn btn-outline-white btn-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
                    </svg>
                    +385 99 549 2621
                </a>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script src="{{ asset('tabler/libs/countup.js/dist/countUp.umd.js') }}"></script>
<script>
    // CountUp animacija za stats
    document.addEventListener('DOMContentLoaded', function () {
        const observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    const el = entry.target;
                    const target = parseInt(el.dataset.countupTarget, 10);
                    const cu = new countUp.CountUp(el, target, { duration: 2, useEasing: true });
                    if (!cu.error) { cu.start(); }
                    observer.unobserve(el);
                }
            });
        }, { threshold: 0.5 });

        document.querySelectorAll('.countup-number').forEach(function (el) {
            observer.observe(el);
        });
    });
</script>
@endpush