@extends('layouts.app')

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

@section('content')
    <section class="hero social-info py-5 bg-primary-ultra-light min-vh-100 d-flex align-items-center" data-aos="fade-up">
        <div class="container text-center">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="social-card p-5 bg-white rounded-4 shadow-lg" data-aos="fade-up" data-aos-delay="100">
                        <div class="social-icon mb-4">
                            <i class="fab fa-facebook fa-4x text-primary"></i>
                        </div>
                        <h1 class="display-5 fw-bold mb-4">
                            Connect with Us via <span class="text-gradient">Facebook</span>
                        </h1>
                        <p class="lead text-muted mb-5">
                            Join us on Facebook for the latest insights, news, and exclusive content. Additional social
                            platforms will be launching soon.
                        </p>

                        <div class="social-links mb-5">
                            <a href="https://www.facebook.com/BoltonStudios.co.uk" target="_blank" rel="noopener noreferrer"
                                class="btn btn-primary btn-lg px-5 py-3 rounded-pill me-3">
                                <i class="fab fa-facebook-f me-2"></i> Visit Our Official Facebook Page
                            </a>
                            <a href="{{ route('home') }}" class="btn btn-outline-primary btn-lg px-5 py-3 rounded-pill">
                                <i class="fas fa-home me-2"></i> Back to Home
                            </a>
                        </div>

                        <div class="coming-soon">
                            <h4 class="mb-3 text-dark">Launching Soon</h4>
                            <div class="d-flex flex-wrap justify-content-center gap-3">
                                <span class="badge bg-light text-dark p-3 rounded-3">
                                    <i class="fab fa-instagram me-2"></i> Instagram
                                </span>
                                <span class="badge bg-light text-dark p-3 rounded-3">
                                    <i class="fab fa-twitter me-2"></i> Twitter
                                </span>
                                <span class="badge bg-light text-dark p-3 rounded-3">
                                    <i class="fab fa-linkedin me-2"></i> LinkedIn
                                </span>
                                <span class="badge bg-light text-dark p-3 rounded-3">
                                    <i class="fab fa-youtube me-2"></i> YouTube
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        .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;
        }

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

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

        .social-icon {
            width: 120px;
            height: 120px;
            background: var(--primary-ultra-light);
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            transition: var(--transition-smooth);
        }

        .social-card:hover .social-icon {
            background: var(--primary-color);
            transform: rotate(10deg) scale(1.1);
        }

        .social-card:hover .social-icon i {
            color: white !important;
        }

        .coming-soon .badge {
            border: 2px solid transparent;
            transition: var(--transition-smooth);
        }

        .coming-soon .badge:hover {
            border-color: var(--primary-color);
            transform: translateY(-2px);
        }

        @media (max-width: 767.98px) {
            .social-links .btn {
                display: block;
                width: 100%;
                margin-bottom: 1rem;
            }

            .social-links .btn:last-child {
                margin-bottom: 0;
            }

            .social-card {
                padding: 2rem !important;
            }
        }
    </style>
@endpush