@extends('layouts.app')

@section('title', __('About SavEX | Solidarity Shopping App'))

@section('description', __('Learn more about SavEX, the solidarity shopping app built to connect users with products, services, offers, deals, and digital solutions through one organized platform.'))

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

@section('content')
<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"
                        >

                        <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/OrAph_8NWfU?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="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"
                        >

                        <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="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"
                        >
                    </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="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