@extends('layouts.app')

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

@push('styles')
    <style>
        .social-platforms {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .platform-item {
            background: white;
            border-radius: var(--radius-lg);
            padding: 2rem;
            text-align: center;
            border: 1px solid var(--border-subtle);
            transition: all var(--transition-normal);
        }

        .platform-item:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }

        .platform-icon {
            width: 64px;
            height: 64px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
            color: white;
        }

        .platform-icon.facebook {
            background: #1877F2;
        }

        .platform-icon.instagram {
            background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
        }

        .platform-icon.twitter {
            background: #1DA1F2;
        }

        .platform-icon.linkedin {
            background: #0077B5;
        }

        .platform-icon.tiktok {
            background: #000000;
        }

        .platform-icon.youtube {
            background: #FF0000;
        }

        .smm-showcase {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .smm-card {
            border-radius: var(--radius-lg);
            overflow: hidden;
            position: relative;
            height: 300px;
        }

        .smm-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        .smm-card:hover img {
            transform: scale(1.1);
        }

        .smm-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1.5rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

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

        .smm-category {
            color: var(--primary-500);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }

        .smm-title {
            color: white;
            font-size: 1.25rem;
            font-weight: 700;
        }
    </style>
@endpush

@section('content')
    <!-- Hero Section -->
    <section class="service-hero">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10 text-center">
                    <div class="service-hero-content text-white">
                        <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                            <i class="fas fa-hashtag me-2"></i> Social Media Marketing
                        </span>
                        <h1 class="display-3 fw-bold mb-4 text-white">
                            Results-Driven SMM <br>
                            <span class="text-gradient">Services</span>
                        </h1>
                        <p class="lead mb-5 mx-auto" style="max-width: 800px;">
                            From strategic advertising campaigns to daily post management, DIGITAL STUDIO2 helps your brand
                            connect, engage, and grow across all major platforms. Let us build a tailored social strategy
                            that drives traffic, boosts retention, and increases your ROI.
                        </p>
                        <div class="d-flex flex-wrap gap-3 justify-content-center">
                            <a href="{{ route('contact') }}" class="btn btn-primary btn-lg">
                                <i class="fas fa-calendar me-2"></i>
                                Request Free Strategy
                            </a>
                            <a href="#platforms" class="btn btn-outline-light btn-lg">
                                <i class="fas fa-thumbs-up me-2"></i>
                                View Platforms
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="service-section">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Services
                </span>
                <h2 class="mb-4">Social Media <br><span class="text-gradient">Marketing</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Comprehensive social media solutions to build your brand and engage your audience.
                </p>
            </div>

            <div class="row g-4">
                <!-- Strategy Development -->
                <div class="col-lg-8">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-chess"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Social Media Strategy Development</h4>
                        <p class="text-muted mb-4">
                            We create tailored social media strategies that align with your business goals, audience,
                            and brand tone. From platform selection to content planning and performance tracking.
                        </p>
                        <div class="d-flex flex-wrap gap-2 mb-4">
                            <span class="badge bg-primary-100 text-primary px-3 py-2">
                                <i class="fas fa-bullseye me-1"></i> Target Analysis
                            </span>
                            <span class="badge bg-primary-100 text-primary px-3 py-2">
                                <i class="fas fa-chart-line me-1"></i> Competitor Research
                            </span>
                            <span class="badge bg-primary-100 text-primary px-3 py-2">
                                <i class="fas fa-calendar-alt me-1"></i> Content Calendar
                            </span>
                            <span class="badge bg-primary-100 text-primary px-3 py-2">
                                <i class="fas fa-chart-pie me-1"></i> KPI Setting
                            </span>
                        </div>
                        <a href="{{ route('contact') }}" class="text-primary fw-semibold d-flex align-items-center gap-2">
                            Get SMM Strategy
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="row g-4 h-100">
                        <!-- Content Creation -->
                        <div class="col-12">
                            <div class="service-card h-100">
                                <div class="service-icon">
                                    <i class="fas fa-photo-video"></i>
                                </div>
                                <h4 class="fw-bold mb-3">Content Creation & Scheduling</h4>
                                <p class="text-muted mb-4">
                                    Our creative team produces high-quality graphics, videos, and copy tailored to each
                                    platform. We schedule and publish content for optimal engagement.
                                </p>
                            </div>
                        </div>

                        <!-- CTA Card -->
                        <div class="col-12">
                            <div class="service-card bg-primary text-white">
                                <h4 class="fw-bold mb-3">Hire SMM Strategist</h4>
                                <p class="text-light opacity-90 mb-4">
                                    Get dedicated social media experts for your brand.
                                </p>
                                <a href="{{ route('contact') }}" class="btn btn-light btn-lg w-100 fw-bold">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Ad Campaigns -->
                <div class="col-12">
                    <div class="service-card">
                        <div class="row align-items-center">
                            <div class="col-lg-5 mb-4 mb-lg-0">
                                <img src="{{ asset('assets/SMM (2).png') }}" alt="Targeted Ad Campaigns"
                                    class="img-fluid rounded-3 shadow"
                                    onerror="this.src='https://images.unsplash.com/photo-1563986768609-322da13575f3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'">
                            </div>
                            <div class="col-lg-7">
                                <h4 class="fw-bold mb-3">Targeted Ad Campaigns</h4>
                                <p class="text-muted mb-4">
                                    Reach the right audience at the right time with highly targeted social media ad
                                    campaigns.
                                    From setup to optimisation, we help you maximise ROI across platforms like Facebook,
                                    Instagram, and LinkedIn.
                                </p>
                                <div class="d-flex flex-wrap gap-2">
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-bullseye me-1"></i> Audience Targeting
                                    </span>
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-ad me-1"></i> Ad Creative
                                    </span>
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-chart-line me-1"></i> A/B Testing
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Platforms Section -->
    <section id="platforms" class="service-section bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Platforms
                </span>
                <h2 class="mb-4">Social Media <br><span class="text-gradient">Platforms</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    We manage and optimise your presence across all major social media platforms.
                </p>
            </div>

            <div class="social-platforms">
                <div class="platform-item">
                    <div class="platform-icon facebook">
                        <i class="fab fa-facebook-f"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Facebook</h5>
                    <p class="text-muted small">Largest social network</p>
                </div>
                <div class="platform-item">
                    <div class="platform-icon instagram">
                        <i class="fab fa-instagram"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Instagram</h5>
                    <p class="text-muted small">Visual content platform</p>
                </div>
                <div class="platform-item">
                    <div class="platform-icon twitter">
                        <i class="fab fa-twitter"></i>
                    </div>
                    <h5 class="fw-bold mb-2">Twitter</h5>
                    <p class="text-muted small">Real-time conversations</p>
                </div>
                <div class="platform-item">
                    <div class="platform-icon linkedin">
                        <i class="fab fa-linkedin-in"></i>
                    </div>
                    <h5 class="fw-bold mb-2">LinkedIn</h5>
                    <p class="text-muted small">Professional network</p>
                </div>
                <div class="platform-item">
                    <div class="platform-icon tiktok">
                        <i class="fab fa-tiktok"></i>
                    </div>
                    <h5 class="fw-bold mb-2">TikTok</h5>
                    <p class="text-muted small">Short-form video</p>
                </div>
                <div class="platform-item">
                    <div class="platform-icon youtube">
                        <i class="fab fa-youtube"></i>
                    </div>
                    <h5 class="fw-bold mb-2">YouTube</h5>
                    <p class="text-muted small">Video sharing platform</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section class="service-section">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Work
                </span>
                <h2 class="mb-4">SMM <br><span class="text-gradient">Portfolio</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Success stories featuring how our social media marketing strategies have helped companies build
                    community.
                </p>
            </div>

            <div class="smm-showcase">
                @for($i = 1; $i <= 12; $i++)
                    <div class="smm-card">
                        <img src="{{ asset('assets/Service SMM (' . $i . ').png') }}" alt="SMM Campaign {{ $i }}"
                            onerror="this.src='https://images.unsplash.com/photo-1611224923853-80b023f02d71?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'">
                        <div class="smm-overlay">
                            <div class="smm-category">Social Media Campaign</div>
                            <h3 class="smm-title">Campaign {{ $i }}</h3>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </section>

    <!-- Process Section -->
    <section class="service-section bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Process
                </span>
                <h2 class="mb-4">SMM <br><span class="text-gradient">Process</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Our systematic approach to social media marketing ensures consistent growth and engagement.
                </p>
            </div>

            <div class="row g-4">
                @php
                    $steps = [
                        ['icon' => 'fas fa-search', 'title' => 'Audit & Analysis', 'desc' => 'Analysing current social presence and competitors'],
                        ['icon' => 'fas fa-bullseye', 'title' => 'Goal Setting', 'desc' => 'Defining clear objectives and KPIs'],
                        ['icon' => 'fas fa-chess', 'title' => 'Strategy Development', 'desc' => 'Creating platform-specific strategies'],
                        ['icon' => 'fas fa-paint-brush', 'title' => 'Content Creation', 'desc' => 'Designing and creating engaging content'],
                        ['icon' => 'fas fa-calendar-alt', 'title' => 'Scheduling', 'desc' => 'Planning and scheduling content calendar'],
                        ['icon' => 'fas fa-chart-line', 'title' => 'Campaign Management', 'desc' => 'Running and optimising ad campaigns'],
                        ['icon' => 'fas fa-comments', 'title' => 'Community Management', 'desc' => 'Engaging with audience and responding'],
                        ['icon' => 'fas fa-chart-bar', 'title' => 'Analytics & Reporting', 'desc' => 'Tracking performance and providing insights'],
                    ];
                @endphp

                @foreach($steps as $step)
                    <div class="col-md-6 col-lg-3">
                        <div class="service-card text-center h-100">
                            <div class="service-icon mx-auto">
                                <i class="{{ $step['icon'] }}"></i>
                            </div>
                            <h5 class="fw-bold mb-3">{{ $step['title'] }}</h5>
                            <p class="text-muted mb-0">{{ $step['desc'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="service-cta">
        <div class="cta-pattern"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center" data-aos="fade-up">
                    <div class="service-cta-content">
                        <h2 class="display-5 fw-bold mb-4">Ready to Grow on Social Media?</h2>
                        <p class="lead mb-5 text-light opacity-90">
                            Let's create a social media strategy that builds your brand and engages your audience.
                        </p>

                        <div class="d-flex flex-wrap gap-3 justify-content-center">
                            <a href="{{ route('contact') }}" class="btn btn-primary btn-lg">
                                <i class="fas fa-calendar me-2"></i>
                                Start SMM Campaign
                            </a>
                            <a href="{{ route('packages') }}" class="btn btn-outline-light btn-lg">
                                <i class="fas fa-tags me-2"></i>
                                View Pricing
                            </a>
                        </div>

                        <p class="mt-4 mb-0 text-light opacity-75">
                            <i class="fas fa-users me-1"></i> First month free with annual plan
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection