@extends('layouts.store')

@section('title', 'Order Online Fresh Jhatka Mutton, Chicken, Fish in Gurgaon.')

@section('content')
{{-- Hero — full-width 30/50/20 like meatworx.in Elementor --}}
<section class="mw-hero">
    <div class="mw-hero-inner">
        <div class="mw-hero-col mw-hero-col-copy">
            <div class="mw-hero-copy">
                <p class="mw-hero-script">Jhatka Meat Specialist</p>
                <h1>Fresh, Safe,<br>Vacum Packed</h1>
                <p>Fresh Premium Quality meat delivered everyday</p>
                <a class="mw-btn" href="{{ route('shop') }}">Buy Now</a>
            </div>
        </div>
        <div class="mw-hero-col mw-hero-col-media">
            <div class="mw-hero-plate-wrap">
                <img class="mw-hero-plate" src="{{ asset('images/theme/hero-plate.webp') }}" alt="Fresh premium meat">
            </div>
            <div class="mw-hero-curves-wrap">
                <img class="mw-hero-curves" src="{{ asset('images/theme/hero-curves.webp') }}" alt="" aria-hidden="true">
            </div>
        </div>
        <div class="mw-hero-col mw-hero-col-meat">
            <div class="mw-hero-meat-inner">
                <span class="mw-hero-meat-word" aria-hidden="true">Meat</span>
            </div>
        </div>
    </div>
</section>

{{-- Fresh Meat Delivered / About — match meatworx.in exactly --}}
<section class="mw-about">
    <div class="container mw-about-inner">
        <div class="mw-about-main-row">
            <div class="mw-about-copy">
                <p class="mw-about-eyebrow">Meat Specialist</p>
                <h2 class="mw-about-title">Fresh Meat Delivered</h2>
                <div class="mw-about-cols">
                    <p>Meatworx delivers premium Jhatka fresh and ready to cook meat products through online doorstep delivery and physical outlets.</p>
                    <p>Meatworx is everything about meat platform with a vision of providing all meat products under its umbrella.</p>
                </div>
            </div>
            <div class="mw-about-media" style="background-image:url('{{ asset('images/theme/cat-banner.webp') }}')" role="img" aria-label="Fresh meat delivered"></div>
        </div>
        <div class="mw-about-thumbs">
            @foreach($aboutCats as $aCat)
                <a class="mw-about-thumb" href="{{ $aCat['url'] }}"
                   style="background-image:url('{{ asset('images/theme/about-cats/'.$aCat['slug'].'.webp') }}')">
                    <span>{{ $aCat['label'] }}</span>
                </a>
            @endforeach
        </div>
    </div>
</section>

{{-- Category product carousels --}}
@foreach($carousels as $i => $carousel)
    <section class="mw-section mw-carousel-section {{ $i % 2 === 1 ? 'mw-section-soft' : '' }}">
        <div class="container">
            <div class="mw-section-head">
                <h2 class="mw-title">
                    {{ $carousel['category']->name }}
                    <span class="mw-underline"></span>
                </h2>
                <a class="mw-view-all" href="{{ route('category.show', $carousel['category']) }}">View All →</a>
            </div>

            <div class="mw-carousel" data-carousel>
                <button class="mw-carousel-btn prev" type="button" aria-label="Previous" data-carousel-prev>‹</button>
                <div class="mw-carousel-track" data-carousel-track>
                    @foreach($carousel['products'] as $product)
                        <div class="mw-carousel-slide">
                            <x-product-card :product="$product" />
                        </div>
                    @endforeach
                </div>
                <button class="mw-carousel-btn next" type="button" aria-label="Next" data-carousel-next>›</button>
            </div>
        </div>
    </section>
@endforeach

{{-- Shop By Category --}}
<section class="mw-section mw-section-soft">
    <div class="container">
        <div class="mw-section-head mw-section-head-center">
            <h2 class="mw-title">
                Shop By Category
                <span class="mw-underline mw-underline-center"></span>
            </h2>
        </div>
        <div class="mw-shop-cats">
            @foreach($shopCategories as $cat)
                @php
                    $img = asset('images/theme/shop-cats/'.$cat->slug.'.webp');
                    if (! file_exists(public_path('images/theme/shop-cats/'.$cat->slug.'.webp'))) {
                        $img = asset('images/theme/shop-cats/chicken.webp');
                    }
                @endphp
                <a class="mw-shop-cat" href="{{ route('category.show', $cat) }}">
                    <span class="mw-shop-cat-img">
                        <img src="{{ $img }}" alt="{{ $cat->name }}">
                    </span>
                    <strong>{{ $cat->name }}</strong>
                    <span class="mw-shop-cat-btn">Shop Now</span>
                </a>
            @endforeach
        </div>
    </div>
</section>

{{-- Get In Touch — parallax food background --}}
<section class="mw-contact">
    <div class="container">
        <div class="mw-contact-card">
            <div class="mw-contact-info">
                <p class="mw-contact-our">our</p>
                <p class="mw-contact-timing">timing</p>
                <p class="mw-contact-hours">MONDAY – SUNDAY</p>
                <p class="mw-contact-hours-time">9:00 AM - 9:00 PM</p>
                <a class="mw-contact-phone" href="tel:9667747721">+91 96 677 477 21</a>
            </div>
            <div class="mw-contact-form">
                <p class="mw-contact-eyebrow">— Stay in Contact —</p>
                <h3>Get In Touch</h3>
                <form action="{{ route('shop') }}" method="GET" onsubmit="alert('Thanks! We will contact you soon.'); return false;">
                    <div class="mw-contact-grid">
                        <div class="mw-field">
                            <label>Name</label>
                            <input type="text" name="name" required>
                        </div>
                        <div class="mw-field">
                            <label>Surname</label>
                            <input type="text" name="surname">
                        </div>
                        <div class="mw-field">
                            <label>Email</label>
                            <input type="email" name="email" required>
                        </div>
                        <div class="mw-field">
                            <label>Guests</label>
                            <input type="text" name="guests">
                        </div>
                    </div>
                    <div class="mw-field">
                        <label>Message</label>
                        <textarea name="message" rows="3" required></textarea>
                    </div>
                    <button class="mw-btn mw-btn-block" type="submit">Send Message</button>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection