@extends('layouts.app')

@section('title', __('SavEX | The World’s First Solidarity Shopping App'))

@section('description', __('SavEX is a solidarity shopping app that combines offers, services, digital shopping, payments, deals, auctions, and rewards in one simple experience.'))

@section('canonical', route('home', ['locale' => app()->getLocale()]))

@section('content')
<section id="home" class="hero-premium">
    <div class="container">
        <div class="row align-items-center g-5 min-vh-hero">
            <div class="col-lg-6 hero-content" data-hero-content>
                <div class="hero-eyebrow d-inline-flex align-items-center gap-2 mb-4">
                    <span class="eyebrow-dot"></span>
                    {{ __('The first solidarity shopping platform of its kind') }}
                </div>

                <h1 class="hero-title mb-4">
                    {!! __('Shop, join, and win with <span>SavEX</span>') !!}
                </h1>

                <p class="hero-description mb-4">
                    {{ __('Join draws with small amounts. If you do not win, your money comes back.') }}
                </p>

                <div class="hero-actions d-flex flex-column flex-sm-row gap-3 justify-content-center justify-content-lg-start mb-5">
                    <a href="#download" class="btn btn-savex-primary">
                        {{ __('Download App') }}
                    </a>

                    <a href="#how-it-works" class="btn btn-savex-outline">
                        {{ __('How It Works') }}
                    </a>
                </div>

                <div class="hero-trust row g-3">
                    <div class="col-12 col-sm-4">
                        <div class="trust-item h-100">
                            <div class="trust-icon">✓</div>
                            <div>
                                <div class="fw-black">{{ __('Money Back') }}</div>
                                <small class="text-muted-custom fw-semibold">
                                    {{ __('Guarantee') }}
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-sm-4">
                        <div class="trust-item h-100">
                            <div class="trust-icon">🔒</div>
                            <div>
                                <div class="fw-black">{{ __('Secure') }}</div>
                                <small class="text-muted-custom fw-semibold">
                                    {{ __('Payments') }}
                                </small>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-sm-4">
                        <div class="trust-item h-100">
                            <div class="trust-icon">★</div>
                            <div>
                                <div class="fw-black">{{ __('Real Winners') }}</div>
                                <small class="text-muted-custom fw-semibold">
                                    {{ __('Every Day') }}
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="hero-visual position-relative mx-auto" data-hero-visual>
                    <div class="hero-orbit hero-orbit-1"></div>
                    <div class="hero-orbit hero-orbit-2"></div>

                    <img
                        src="{{ asset('assets/images/hero-phone.webp') }}"
                        alt="SavEX App Preview"
                        class="hero-phone-img img-fluid"
                        loading="eager"
                        fetchpriority="high"
                        decoding="async"
                    >

                    <div class="hero-floating-card hero-floating-card-1">
                        <span class="floating-label">{{ __('Vouchers') }}</span>
                        <strong>{{ __('Discount Vouchers') }}</strong>
                        <small>{{ __('Products and services') }}</small>
                    </div>

                    <div class="hero-floating-card hero-floating-card-2">
                        <span class="floating-label">{{ __('Electronic Draw') }}</span>
                        <strong>{{ __('Auctions & Deals') }}</strong>
                        <small>{{ __('More shopping options') }}</small>
                    </div>

                    <div class="hero-floating-card hero-floating-card-3">
                        <span class="floating-label">{{ __('Solidarity Shopping') }}</span>
                        <strong>{{ __('One Integrated Experience') }}</strong>
                        <small>{{ __('Offers, rewards, and payments') }}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="about-video" class="video-section section-padding animate-section">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-5">
                <div class="section-badge d-inline-flex align-items-center gap-2 mb-3" data-animate="fade-up">
                    <span class="eyebrow-dot"></span>
                    {{ __('What is SavEX?') }}
                </div>

                <h2 class="section-title mb-3" data-animate="fade-up">
                    {!! __('A quick video that explains <span>SavEX</span>') !!}
                </h2>

                <p class="section-description mb-4" data-animate="fade-up">
                    {{ __('Discover how SavEX helps you shop, join draws, collect rewards, and get your money back if you do not win.') }}
                </p>

                <div class="video-actions d-flex flex-column flex-sm-row gap-3 justify-content-center justify-content-lg-start" data-animate="fade-up">
                    <a href="#download" class="btn btn-savex-primary">
                        {{ __('Download App') }}
                    </a>

                    <a href="#how-it-works" class="btn btn-savex-outline">
                        {{ __('See How It Works') }}
                    </a>
                </div>
            </div>

            <div class="col-lg-7">
                <div class="video-card" data-animate="zoom-in">
                    <button
                        type="button"
                        class="video-cover-box"
                        data-bs-toggle="modal"
                        data-bs-target="#savexVideoModal"
                        aria-label="{{ __('Play Video') }}"
                    >
                        <img
                            src="{{ asset('assets/images/video-cover.webp') }}"
                            alt="{{ __('What is SavEX?') }}"
                            class="video-cover-img"
                            loading="lazy"
                            decoding="async"
                        >

                        <span class="video-play-btn">
                            <span></span>
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<div
    class="modal fade video-modal"
    id="savexVideoModal"
    tabindex="-1"
    aria-labelledby="savexVideoModalLabel"
    aria-hidden="true"
>
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <button
                type="button"
                class="btn-close video-modal-close"
                data-bs-dismiss="modal"
                aria-label="Close"
            ></button>

            <div class="video-embed video-embed-short">
                <iframe
                    id="savexVideoIframe"
                    data-src="https://www.youtube.com/embed/o3iUAYg6Ghg?autoplay=1"
                    title="{{ __('What is SavEX?') }}"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen
                ></iframe>
            </div>
        </div>
    </div>
</div>

<section id="app-gallery" class="app-gallery-section section-padding animate-section">
    <div class="container">
        <div class="section-head d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-4 mb-5" data-animate="fade-up">
            <div>
                <div class="section-badge d-inline-flex align-items-center gap-2 mb-3">
                    <span class="eyebrow-dot"></span>
                    {{ __('SavEX Highlights') }}
                </div>

                <h2 class="section-title mb-3">
                    {!! __('Discover the <span>SavEX benefits</span>') !!}
                </h2>

                <p class="section-description mb-0">
                    {{ __('Promotional and informative visuals that explain the main benefits, services, and features available through SavEX.') }}
                </p>
            </div>

            <div class="app-gallery-controls d-flex gap-2">
                <button class="slider-btn" type="button" data-app-gallery-prev aria-label="{{ __('Previous') }}">
                    ‹
                </button>

                <button class="slider-btn" type="button" data-app-gallery-next aria-label="{{ __('Next') }}">
                    ›
                </button>
            </div>
        </div>

        <div class="app-gallery-shell" data-animate="fade-up">
            <div class="app-gallery-slider" data-app-gallery-slider>
                @foreach (range(1, 7) as $index)
                    @php
                        $imageNumber = str_pad($index, 2, '0', STR_PAD_LEFT);
                    @endphp

                    <article class="app-gallery-card">
                        <div class="app-gallery-image-wrap">
                            <img
                                src="{{ asset('assets/images/slider/slider_' . $imageNumber . '.webp') }}"
                                alt="{{ __('SavEX Promotional Visual') }} {{ $index }}"
                                class="app-gallery-image"
                                loading="lazy"
                                decoding="async"
                            >
                        </div>

                        <div class="app-gallery-glow"></div>
                    </article>
                @endforeach
            </div>
        </div>
    </div>
</section>

<section id="about" class="about-section section-padding animate-section">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <div class="about-visual" data-animate="zoom-in">
                    <div class="about-logo-card" data-animate="zoom-in">
                        <img
                            src="{{ asset('assets/images/logo.webp') }}"
                            alt="SavEX"
                            class="about-logo"
                            loading="lazy"
                            decoding="async"
                        >

                        <div class="about-logo-text">
                            <span>{{ __('Mobile App') }}</span>
                            <strong>{{ __('For solidarity shopping') }}</strong>
                        </div>
                    </div>

                    <div class="about-stat-card about-stat-card-1" data-animate="fade-up">
                        <strong>{{ __('First') }}</strong>
                        <span>{{ __('Of its kind globally') }}</span>
                    </div>

                    <div class="about-stat-card about-stat-card-2" data-animate="fade-up">
                        <strong>{{ __('Win-Win') }}</strong>
                        <span>{{ __('Fair shopping experience') }}</span>
                    </div>

                    <div class="about-circle about-circle-1"></div>
                    <div class="about-circle about-circle-2"></div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="section-badge d-inline-flex align-items-center gap-2 mb-3" data-animate="fade-up">
                    <span class="eyebrow-dot"></span>
                    {{ __('About Us') }}
                </div>

                <h2 class="section-title mb-3" data-animate="fade-up">
                    {!! __('A mobile app for <span>solidarity shopping</span>') !!}
                </h2>

                <p class="section-description mb-4" data-animate="fade-up">
                    {{ __('SavEX is a first-of-its-kind mobile app for solidarity shopping, built to make shopping more exciting, fair, and rewarding.') }}
                </p>

                <div class="about-cards">
                    <div class="about-info-card" data-animate="fade-up">
                        <div class="about-icon">◎</div>
                        <div>
                            <h3>{{ __('Our Vision') }}</h3>
                            <p>
                                {{ __('We aspire to become the world’s leading platform for solidarity shopping.') }}
                            </p>
                        </div>
                    </div>

                    <div class="about-info-card" data-animate="fade-up">
                        <div class="about-icon">✦</div>
                        <div>
                            <h3>{{ __('Our Goal') }}</h3>
                            <p>
                                {{ __('We help turn dreams into reality through carefully selected quality products and a fair experience where everyone has a better chance to win.') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="chairman-message" class="chairman-section section-padding animate-section">
    <div class="container">
        <div class="chairman-wrapper" data-animate="fade-up">
            <div class="row align-items-center g-5">
                <div class="col-lg-5">
                    <div class="chairman-card" data-animate="zoom-in">
                        <div class="chairman-quote-icon">“</div>

                        <h2 class="chairman-card-title">
                            {{ __('A smarter balance between value and convenience') }}
                        </h2>

                        <p class="chairman-card-text">
                            {{ __('SavEX was built to make digital shopping more useful, organized, and rewarding by bringing multiple services together in one simple experience.') }}
                        </p>

                        <div class="chairman-highlight">
                            <span>{{ __('One App') }}</span>
                            <strong>{{ __('Multiple Benefits') }}</strong>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="section-badge d-inline-flex align-items-center gap-2 mb-3" data-animate="fade-up">
                        <span class="eyebrow-dot"></span>
                        {{ __('Chairman Message') }}
                    </div>

                    <h2 class="section-title mb-4" data-animate="fade-up">
                        {!! __('A vision for the future of <span>digital shopping</span>') !!}
                    </h2>

                    <div class="chairman-content" data-animate="fade-up">
                        <p>
                            {{ __('Digital shopping has become an essential part of modern life, with users looking for easier, faster, and more reliable ways to access products and services.') }}
                        </p>

                        <p>
                            {{ __('At SavEX, we believe that the future of shopping depends on creating integrated digital experiences that combine convenience, value, and trust in one place.') }}
                        </p>

                        <p>
                            {{ __('Many users today are looking for more than just a traditional shopping journey; they need offers, services, payment solutions, and flexible ways to benefit from every interaction.') }}
                        </p>

                        <p>
                            {{ __('That is why SavEX was created as a solidarity shopping model that connects users with products, services, offers, deals, and digital solutions through a simple and organized platform.') }}
                        </p>
                    </div>

                    <div class="chairman-actions d-flex flex-column flex-sm-row gap-3 mt-4" data-animate="fade-up">
                        <a href="{{ route('home', ['locale' => app()->getLocale()]) }}#download" class="btn btn-savex-primary">
                            {{ __('Download App') }}
                        </a>

                        <a href="{{ route('about', ['locale' => app()->getLocale()]) }}" class="btn btn-savex-outline">
                            {{ __('About Us') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="categories" class="categories-section section-padding animate-section">
    <div class="container">
        <div class="section-head d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-4 mb-5" data-animate="fade-up">
            <div>
                <div class="section-badge d-inline-flex align-items-center gap-2 mb-3" data-animate="fade-up">
                    <span class="eyebrow-dot"></span>
                    {{ __('Explore Categories') }}
                </div>

                <h2 class="section-title mb-0" data-animate="fade-up">
                    {!! __('Choose from <span>many categories</span>') !!}
                </h2>
            </div>

            <div class="categories-controls d-flex gap-2">
                <button class="slider-btn" type="button" data-category-prev aria-label="{{ __('Previous') }}">
                    ‹
                </button>

                <button class="slider-btn" type="button" data-category-next aria-label="{{ __('Next') }}">
                    ›
                </button>
            </div>
        </div>

        <div class="categories-slider" data-category-slider>
            @forelse ($categories as $category)
                <article class="category-card">
                    <div class="category-image-wrap">
                        <img
                            src="{{ $category->image_url }}"
                            alt="{{ $category->translated_name }}"
                            class="category-image"
                            loading="lazy"
                            decoding="async"
                        >
                    </div>

                    <div class="category-content">
                        <h3>{{ $category->translated_name }}</h3>

                        <a
                            href="{{ route('home', ['locale' => app()->getLocale()]) }}#download"
                            class="text-decoration-none fw-bold"
                            style="color: #00c896;"
                            data-scroll-download
                        >
                            {{ __('View Offers') }}
                        </a>
                    </div>
                </article>
            @empty
                <div class="empty-state">
                    {{ __('No categories available now.') }}
                </div>
            @endforelse
        </div>
    </div>
</section>

<section id="latest-offers" class="offers-section section-padding animate-section">
    <div class="container">
        <div class="section-head d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-4 mb-5" data-animate="fade-up">
            <div>
                <div class="section-badge d-inline-flex align-items-center gap-2 mb-3" data-animate="fade-up">
                    <span class="eyebrow-dot"></span>
                    {{ __('Latest Offers') }}
                </div>

                <h2 class="section-title mb-0" data-animate="fade-up">
                    {!! __('Discover the latest <span>SavEX offers</span>') !!}
                </h2>
            </div>

            <div class="offers-controls d-flex gap-2">
                <button class="slider-btn" type="button" data-offers-prev aria-label="{{ __('Previous') }}">
                    ‹
                </button>

                <button class="slider-btn" type="button" data-offers-next aria-label="{{ __('Next') }}">
                    ›
                </button>
            </div>
        </div>

        <div
            class="offers-slider"
            data-offers-slider
            data-ajax-url="{{ route('ajax.offers', ['locale' => app()->getLocale()]) }}"
        >
            @for ($i = 0; $i < 6; $i++)
                <article class="offer-card skeleton-card">
                    <div class="offer-image-wrap skeleton-box"></div>

                    <div class="offer-content">
                        <span class="skeleton-line skeleton-line-sm"></span>
                        <span class="skeleton-line"></span>
                        <span class="skeleton-line skeleton-line-md"></span>
                    </div>
                </article>
            @endfor
        </div>

    </div>
</section>

<section id="how-it-works" class="how-section section-padding animate-section">
    <div class="container">
        <div class="section-head text-center mb-5" data-animate="fade-up">
            <div class="section-badge d-inline-flex align-items-center gap-2 mb-3" data-animate="fade-up">
                <span class="eyebrow-dot"></span>
                {{ __('How It Works') }}
            </div>

            <h2 class="section-title mb-3" data-animate="fade-up">
                {!! __('How does <span>SavEX</span> work?') !!}
            </h2>

            <p class="section-description mx-auto mb-0" data-animate="fade-up">
                {{ __('SavEX makes solidarity shopping simple: choose, join, increase your chances, then win or get your money back.') }}
            </p>
        </div>

        <div class="row g-4 align-items-stretch">
            <div class="col-lg-5">
                <div class="solidarity-card h-100" data-animate="zoom-in">
                    <div class="solidarity-icon">
                        <img
                            src="{{ asset('assets/images/favicon.ico') }}"
                            alt="SavEX"
                            loading="lazy"
                            decoding="async"
                        >
                    </div>

                    <h3>
                        {{ __('What is SavEX?') }}
                    </h3>

                    <p>
                        {{ __('SavEX is a first-of-its-kind solidarity shopping app that offers products, services, discounts, reward points, and free draws below market value through a fair digital experience.') }}
                    </p>

                    <div class="solidarity-highlight">
                        <span>{{ __('No loser') }}</span>
                        <strong>{{ __('If you do not win, your paid amount is refunded.') }}</strong>
                    </div>
                </div>
            </div>

            <div class="col-lg-7">
                <div class="how-steps">
                    <div class="how-step" data-animate="card">
                        <div class="how-step-number">01</div>

                        <div class="how-step-content">
                            <div class="how-step-icon">🎁</div>
                            <h3>{{ __('Choose your offer') }}</h3>
                            <p>{{ __('Browse products, services, coupons, rewards, and exclusive offers inside the app.') }}</p>
                        </div>
                    </div>

                    <div class="how-step" data-animate="card">
                        <div class="how-step-number">02</div>

                        <div class="how-step-content">
                            <div class="how-step-icon">🎟</div>
                            <h3>{{ __('Join the draw') }}</h3>
                            <p>{{ __('Join free draws or increase your chances using cash balance or reward points.') }}</p>
                        </div>
                    </div>

                    <div class="how-step" data-animate="card">
                        <div class="how-step-number">03</div>

                        <div class="how-step-content">
                            <div class="how-step-icon">⚡</div>
                            <h3>{{ __('Draw turns into auction') }}</h3>
                            <p>{{ __('If the draw time ends, it can turn into an auction and the product goes to the highest bidder.') }}</p>
                        </div>
                    </div>

                    <div class="how-step" data-animate="card">
                        <div class="how-step-number">04</div>

                        <div class="how-step-content">
                            <div class="how-step-icon">💸</div>
                            <h3>{{ __('Win or get refunded') }}</h3>
                            <p>{{ __('If you are not selected in the draw or auction, any paid amount used to increase participation is refunded without deduction.') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="winners" class="winners-section section-padding animate-section">
    <div class="container">
        <div class="section-head d-flex flex-column flex-lg-row align-items-lg-end justify-content-between gap-4 mb-5" data-animate="fade-up">
            <div>
                <div class="section-badge d-inline-flex align-items-center gap-2 mb-3" data-animate="fade-up">
                    <span class="eyebrow-dot"></span>
                    {{ __('Latest Winners') }}
                </div>

                <h2 class="section-title mb-0" data-animate="fade-up">
                    {!! __('Real winners with <span>SavEX</span>') !!}
                </h2>
            </div>

            <div class="winners-controls d-flex gap-2">
                <button class="slider-btn" type="button" data-winners-prev aria-label="{{ __('Previous') }}">
                    ‹
                </button>

                <button class="slider-btn" type="button" data-winners-next aria-label="{{ __('Next') }}">
                    ›
                </button>
            </div>
        </div>

        <div
            class="winners-slider"
            data-winners-slider
            data-ajax-url="{{ route('ajax.winners', ['locale' => app()->getLocale()]) }}"
        >
            @for ($i = 0; $i < 5; $i++)
                <article class="winner-card skeleton-card">
                    <div class="winner-avatar-img skeleton-avatar"></div>

                    <div class="winner-content">
                        <span class="skeleton-line skeleton-line-md"></span>
                        <span class="skeleton-line"></span>
                        <span class="skeleton-line skeleton-line-sm"></span>
                    </div>
                </article>
            @endfor
        </div>
    </div>
</section>

<section id="download" class="download-section section-padding animate-section">
    <div class="container">
        <div class="download-wrapper">
            <div class="row align-items-center g-5">
                <div class="col-lg-7">
                    <div class="download-content">
                        <div class="section-badge d-inline-flex align-items-center gap-2 mb-3" data-animate="fade-up">
                            <span class="eyebrow-dot"></span>
                            {{ __('Download App') }}
                        </div>

                        <h2 class="download-title mb-4" data-animate="fade-up">
                            {!! __('Have you seen enough already?') !!}
                        </h2>

                        <p class="download-description mb-4" data-animate="fade-up">
                            {{ __('The first mobile app of its kind in the world for solidarity shopping. You can get all your dreams for only 1 EGP, from simple products like watches, mobile phones, tablets, and laptops to appliances, cars, and villas.') }}
                        </p>

                        <div class="download-buttons d-flex flex-column flex-sm-row gap-3" data-animate="fade-up">
                            <a href="{{ config('services.savex_links.app_store') }}" class="download-store-btn">
                                <span class="download-store-icon">
                                    <svg viewBox="0 0 24 24" aria-hidden="true">
                                        <path d="M16.6 13.4c0-2.4 2-3.6 2.1-3.7-1.2-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-2-.9-3.3-.8-1.7 0-3.2 1-4.1 2.5-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.5 1.3-.1 1.8-.8 3.3-.8 1.6 0 2 .8 3.4.8 1.4 0 2.3-1.2 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9 0-.1-2.7-1-2.7-4.3zM14.2 6.2c.7-.9 1.2-2.1 1.1-3.3-1.1 0-2.4.7-3.1 1.6-.7.8-1.3 2.1-1.1 3.2 1.2.1 2.4-.6 3.1-1.5z"/>
                                    </svg>
                                </span>

                                <span class="download-store-text">
                                    <small>{{ __('Download') }}</small>
                                    <strong>{{ __('From App Store') }}</strong>
                                </span>
                            </a>

                            <a href="{{ config('services.savex_links.play_store') }}" class="download-store-btn">
                                <span class="download-store-icon">
                                    <svg viewBox="0 0 24 24" aria-hidden="true">
                                        <path d="M3.7 2.4c-.4.3-.7.9-.7 1.6v16c0 .7.3 1.3.8 1.6l9.1-9.6L3.7 2.4zm10 10.4 2.4 2.5-9 5.2 6.6-7.7zm3.2 1.7 2.9-1.7c1-.6 1-2 0-2.6l-2.9-1.7-2.6 3 2.6 3zM7.1 3.5l9 5.2-2.4 2.5-6.6-7.7z"/>
                                    </svg>
                                </span>

                                <span class="download-store-text">
                                    <small>{{ __('Download') }}</small>
                                    <strong>{{ __('From Google Play') }}</strong>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="download-visual" data-animate="zoom-in">
                        <div class="download-phone-card">
                            <img
                                src="{{ asset('assets/images/hero-phone.webp') }}"
                                alt="SavEX App"
                                class="download-phone-img"
                            >

                            <div class="download-mini-card download-mini-card-1">
                                <span>{{ __('Voucher Balance') }}</span>
                                <strong>{{ __('Bonus Points') }}</strong>
                            </div>

                            <div class="download-mini-card download-mini-card-2">
                                <span>{{ __('Electronic Services') }}</span>
                                <strong>{{ __('Secure Payments') }}</strong>
                            </div>
                        </div>

                        <div class="download-circle download-circle-1"></div>
                        <div class="download-circle download-circle-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection