@extends('layouts.app')

@section('title', 'Social Media Marketing | DIGITAL STUDIO')

@section('content')
    <section class="hero hero-service-detail py-5 position-relative overflow-hidden" data-aos="fade-up">
        <div class="hero-pattern"></div>
        <div class="container py-lg-5 text-center">
            <h2 class="h5 text-primary fw-bold mb-3" data-aos="fade-up" data-aos-delay="100">Social Media Marketing</h2>
            <h1 class="display-4 fw-bold mb-4" data-aos="fade-up" data-aos-delay="200">
                Strategic Social Media <br>
                <span class="text-gradient">Marketing Solutions</span>
            </h1>
            <p class="lead text-muted mx-auto mb-5" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="300">
                From strategic advertising campaigns to daily content management, DIGITAL STUDIO empowers your brand to
                connect, engage, and flourish across all leading platforms. Allow us to develop a tailored social strategy
                that drives traffic, enhances retention, and maximises your return on investment.
            </p>
            <div data-aos="fade-up" data-aos-delay="400">
                <a href="{{ route('contact') }}" class="btn btn-primary btn-lg px-5 py-3 rounded-pill">
                    Request a Bespoke Quote
                </a>
            </div>
        </div>
    </section>

    <section class="services-detail py-5" data-aos="fade-up">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold mb-4">
                    Social Media Marketing <br>
                    <span class="text-gradient">Expertise</span>
                </h2>
            </div>

            <div class="row g-4">
                <!-- Social Media Strategy Development -->
                <div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">
                    <div class="service-card-detail p-4 bg-white border rounded-3 shadow-sm h-100">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h4 class="fw-bold mb-3">Strategic Social Media Development</h4>
                                <p class="text-muted">
                                    We craft bespoke social media strategies that align with your commercial objectives,
                                    target audience, and brand voice; encompassing platform selection and comprehensive
                                    content planning.
                                </p>
                                <a href="#" class="text-primary text-decoration-none fw-bold">Read More <i
                                        class="fas fa-arrow-right ms-1"></i></a>
                            </div>
                            <div class="col-md-4 text-center">
                                <img src="{{ asset('assets/SMM (1).png') }}" alt="Social Media Strategy" class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="row g-4 h-100">
                        <!-- Content Creation & Scheduling -->
                        <div class="col-12">
                            <div class="service-card-detail p-4 bg-white border rounded-3 shadow-sm h-100">
                                <h4 class="fw-bold mb-3">Bespoke Content Creation</h4>
                                <p class="text-muted mb-0">
                                    Our creative specialists produce high-calibre graphics, videos, and copy, precisely
                                    tailored for each specific platform.
                                </p>
                                <a href="#" class="text-primary text-decoration-none fw-bold mt-2 d-inline-block">Read More
                                    <i class="fas fa-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                        <!-- Hire SMM Strategist -->
                        <div class="col-12">
                            <div
                                class="service-card-detail p-4 bg-primary border rounded-3 shadow-sm h-100 d-flex flex-column justify-content-center">
                                <h4 class="fw-bold mb-3 text-white">Hire a Specialist Social Media Strategist</h4>
                                <a href="{{ route('contact') }}"
                                    class="btn btn-light rounded-pill w-100 fw-bold text-primary">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Targeted Ad Campaigns -->
                <div class="col-12" data-aos="fade-up" data-aos-delay="300">
                    <div class="service-card-detail p-4 bg-white border rounded-3 shadow-sm">
                        <div class="row align-items-center">
                            <div class="col-lg-4 text-center">
                                <img src="{{ asset('assets/SMM (2).png') }}" alt="Targeted Ad Campaigns" class="img-fluid">
                            </div>
                            <div class="col-lg-8">
                                <h4 class="fw-bold mb-3">Targeted Advertising Campaigns</h4>
                                <p class="text-muted mb-0">
                                    Attract the ideal audience at the perfect moment with highly targeted social media
                                    advertising campaigns. From initial setup to continuous optimisation, we assist you in
                                    maximising ROI across platforms such as Facebook, Instagram, and LinkedIn.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="platforms py-5 bg-primary-ultra-light" data-aos="fade-up">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 text-center text-lg-start mb-4 mb-lg-0">
                    <h2 class="fw-bold mb-3">Maximise Your Reach on Major Social Platforms!</h2>
                    <p class="text-muted">Expand your visibility and engage with your target audience on the most
                        influential social media platforms. Construct a robust social presence that fosters growth and
                        connection.</p>
                </div>
                <div class="col-lg-6">
                    <div class="row g-3 justify-content-center">
                        @php
                            $socialPlatforms = [
                                'Service facebook.png' => 'Facebook',
                                'Service insta.png' => 'Instagram',
                                'Service twitter.png' => 'Twitter',
                                'Service linkedin.png' => 'LinkedIn'
                            ];
                        @endphp

                        @foreach($socialPlatforms as $icon => $name)
                            <div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="{{ $loop->index * 50 }}">
                                <div class="platform-card p-3 bg-white border rounded-3 shadow-sm text-center">
                                    <img src="{{ asset('assets/' . $icon) }}" alt="{{ $name }}" class="img-fluid mb-2"
                                        style="height: 40px;">
                                    <p class="small mb-0 text-dark fw-bold">{{ $name }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="portfolio-showcase py-5" data-aos="fade-up">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold mb-4">How Our Social Media Marketing <span class="text-gradient">Drives Brand
                        Authority</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Success stories demonstrating how our social media marketing strategies have empowered organisations to
                    cultivate community, enhance engagement, and drive commercial conversions.
                </p>
            </div>

            <div class="row g-4 portfolio-grid">
                @for($i = 1; $i <= 12; $i++)
                    <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ $i * 50 }}">
                        <div class="portfolio-card h-100">
                            <div class="portfolio-image-wrapper">
                                <img src="{{ asset('assets/Service SMM (' . $i . ').png') }}" alt="SMM Portfolio {{ $i }}"
                                    class="portfolio-image" loading="lazy" width="400" height="240">
                                <div class="portfolio-overlay">
                                    <div class="portfolio-content">
                                        <span class="portfolio-category badge bg-primary mb-2">
                                            Social Media
                                        </span>
                                        <h3 class="h5 fw-bold mb-2 text-white">Social Media Campaign {{ $i }}</h3>
                                        <a href="{{ route('portfolio') }}" class="btn btn-outline-light btn-sm rounded-pill">
                                            View Details <i class="fas fa-arrow-right ms-2"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-info p-4">
                                <h3 class="h6 fw-bold mb-2">Social Media Campaign</h3>
                                <p class="text-muted small mb-0">Effective social media marketing solution</p>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        .hero-service-detail {
            background-color: var(--background-color);
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)),
                url("https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?auto=format&fit=crop&q=80&w=2074");
            background-size: cover;
            background-position: center;
            min-height: 50vh;
            display: flex;
            align-items: center;
            position: relative;
        }

        .hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66 3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-46-71c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm20 31c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239929ea' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 1;
            pointer-events: none;
        }

        .text-gradient {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .service-card-detail {
            transition: var(--transition-smooth);
            border: 1px solid var(--border-light);
        }

        .service-card-detail:hover {
            border-color: var(--primary-color);
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .platform-card {
            transition: var(--transition-smooth);
            border: 1px solid var(--border-light);
        }

        .platform-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-3px);
        }

        .portfolio-card {
            background: white;
            border-radius: 16px;
            transition: var(--transition-smooth);
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            height: 100%;
        }

        .portfolio-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }

        .portfolio-image-wrapper {
            position: relative;
            overflow: hidden;
            height: 240px;
        }

        .portfolio-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .portfolio-card:hover .portfolio-image {
            transform: scale(1.05);
        }

        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            display: flex;
            align-items: flex-end;
            padding: 2rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .portfolio-card:hover .portfolio-overlay {
            opacity: 1;
        }

        .portfolio-content {
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

        .portfolio-card:hover .portfolio-content {
            transform: translateY(0);
        }

        .portfolio-info {
            padding: 1.5rem;
        }

        @media (max-width: 767.98px) {
            .hero-service-detail {
                min-height: auto;
                padding: 4rem 0;
            }

            .platform-card {
                padding: 1rem;
            }

            .portfolio-image-wrapper {
                height: 200px;
            }
        }
    </style>
@endpush