@extends('front::layouts.master')

@section('title','E-SHOP || About Us')

@section('content')

<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />

<style>
    .about-hero {
        padding: 120px 0 80px;
        background: linear-gradient(135deg, #f5f7fa, #eef1f5);
    }
    .about-hero h1 {
        font-size: 48px;
        font-weight: 800;
        color: #111;
    }
    .about-hero p {
        max-width: 550px;
        font-size: 18px;
        color: #555;
        margin-top: 15px;
    }
    .about-hero img {
        border-radius: 12px;
        width: 100%;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

    /* World Map Section */
    .world-map-section {
        padding: 0 0;
        background: #fff;
        text-align: center;
    }
    .world-map-section h2 {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 15px;
    }
    .world-map-container {
        position: relative;
        margin: 40px auto 0;
        max-width: 900px;
    }
    .world-map {
        width: 100%;
        opacity: 0.95;
    }

    /* Map Dots */
    .map-marker {
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        animation: pulse 1.8s infinite;
    }
    .marker-dallas {
        background: #6a5af9;
        top: 47%;
        left: 29%;
    }
    .marker-bangalore {
        background: #bbb;
        top: 59%;
        left: 74%;
        animation: blink 2s infinite;
    }

    /* Pulsing Animation */
    @keyframes pulse {
        0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
        50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
        100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
    }

    @keyframes blink {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 1; }
    }

    /* Video Button */
    .video-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255,255,255,0.9);
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        transition: .3s;
    }
    .video-btn:hover {
        transform: translate(-50%, -50%) scale(1.1);
    }

    /* Teams Section - Slightly modernized */
    .team {
        background: #fafafa;
        padding: 100px 0;
    }
    .single-team {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        transition: .3s;
        background: #fff;
    }
    .single-team:hover {
        transform: translateY(-6px);
    }

</style>


<!-- HERO ABOUT -->
<section class="about-hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6" data-aos="fade-right">
                <h1>Creative Page to Display Everything About the Company</h1>
                <p>
                    Include images, videos and a live location map showing our global offices.
                    Currently featured: <strong>Dallas</strong> and <strong>Bangalore (Coming Soon)</strong>.
                </p>
            </div>
            <div class="col-lg-6" data-aos="fade-left">
                <div style="position: relative;">
                   <img src="{{ asset('images/about-us.jpg') }}" alt="About Image" />
                    <a href="https://www.youtube.com/watch?v=nh2aYrGMrIE"
                       class="video video-popup mfp-iframe video-btn">
                        <i class="fa fa-play"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>



<!-- WORLD MAP SECTION -->
<section class="world-map-section">
    <h2 data-aos="fade-up">Our Global Presence</h2>
    <p data-aos="fade-up" data-aos-delay="100">
        Our operations spread across major global hubs including the USA and India.
    </p>

    <div class="world-map-container" data-aos="zoom-in">
       <img src="{{ asset('images/dotted-world-map.png') }}" class="world-map" alt="World Map">

        <!-- Markers -->
        <div class="map-marker marker-dallas" title="Dallas, USA"></div>

        <div class="map-marker marker-bangalore" title="Bangalore (Coming Soon)"></div>
    </div>
</section>



<!-- TEAM (your original section kept for now) -->
 

 {{-- @include('front::layouts.newsletter') --}}

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 800,
        once: true
    });
</script>

@endsection