@extends('layouts.app')

@section('title', 'Privacy Policy | DIGITAL STUDIO2')

@push('styles')
    <style>
        /* Privacy Policy Page Specific Styles */
        .hero-privacy {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 100%),
                url('{{ asset("assets/service-hero-bg.png") }}');
            background-size: cover;
            background-position: center;
            min-height: 60vh;
            display: flex;
            align-items: center;
        }

        .policy-section {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--text-200);
            padding: 2rem;
            margin-bottom: 2rem;
            transition: all var(--transition-normal);
        }

        .policy-section:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--primary-300);
        }

        .policy-list {
            list-style: none;
            padding-left: 0;
        }

        .policy-list li {
            padding-left: 2rem;
            position: relative;
            margin-bottom: 1rem;
            color: var(--text-600);
        }

        .policy-list li:before {
            content: '•';
            color: var(--primary-500);
            font-weight: bold;
            position: absolute;
            left: 0;
        }

        .policy-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5rem 0;
        }

        .policy-table th,
        .policy-table td {
            padding: 1rem;
            border: 1px solid var(--text-200);
            text-align: left;
        }

        .policy-table th {
            background: var(--primary-50);
            font-weight: 600;
            color: var(--text-800);
        }

        .policy-table tr:nth-child(even) {
            background: var(--bg-light);
        }

        .last-updated {
            background: var(--primary-50);
            border-left: 4px solid var(--primary-500);
            padding: 1rem 1.5rem;
            border-radius: var(--radius-md);
            margin: 2rem 0;
        }

        .back-to-top-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: var(--primary-500);
            color: white;
            border: none;
            border-radius: var(--radius-full);
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-normal);
            z-index: 100;
            box-shadow: var(--shadow-md);
        }

        .back-to-top-btn.show {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top-btn:hover {
            background: var(--primary-600);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .policy-nav {
            position: sticky;
            top: 100px;
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--text-200);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .policy-nav ul {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }

        .policy-nav li {
            margin-bottom: 0.75rem;
        }

        .policy-nav a {
            color: var(--text-600);
            text-decoration: none;
            transition: all var(--transition-fast);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .policy-nav a:hover {
            color: var(--primary-500);
            padding-left: 0.5rem;
        }

        .policy-nav i {
            font-size: 0.875rem;
            color: var(--primary-500);
        }

        @media (max-width: 992px) {
            .policy-nav {
                position: static;
                margin-bottom: 2rem;
            }
        }

        @media (max-width: 768px) {
            .hero-privacy {
                min-height: 50vh;
            }

            .policy-section {
                padding: 1.5rem;
            }

            .policy-table {
                display: block;
                overflow-x: auto;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Hero Section -->
    <section class="hero-privacy position-relative">
        <!-- Glow Effects -->
        <div class="glow-effect glow-primary glow-top-right"></div>
        <div class="glow-effect glow-primary glow-bottom-left"></div>

        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-8" data-aos="fade-up">
                    <h1 class="display-3 fw-bold text-white mb-4">
                        Privacy <span class="text-gradient">Policy</span>
                    </h1>
                    <p class="lead text-light opacity-90">
                        We recommend all our clients thoroughly review our Privacy Policy before placing an order.
                        This ensures a transparent purchasing journey and helps build lasting trust in our dedicated
                        services.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Last Updated -->
    <section class="py-4">
        <div class="container">
            <div class="last-updated" data-aos="fade-up">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <strong class="text-primary">Last Updated:</strong>
                        <span class="text-muted">December 1, 2024</span>
                    </div>
                    <div>
                        <strong class="text-primary">Version:</strong>
                        <span class="text-muted">2.0</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Policy Content -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <!-- Navigation -->
                <div class="col-lg-3" data-aos="fade-right">
                    <div class="policy-nav">
                        <h5 class="fw-bold mb-3">On This Page</h5>
                        <ul>
                            <li><a href="#information-collection"><i class="fas fa-chevron-right"></i> Information
                                    Collection</a></li>
                            <li><a href="#information-use"><i class="fas fa-chevron-right"></i> How We Use Information</a>
                            </li>
                            <li><a href="#security"><i class="fas fa-chevron-right"></i> Security Measures</a></li>
                            <li><a href="#cookies"><i class="fas fa-chevron-right"></i> Cookies Policy</a></li>
                            <li><a href="#data-protection"><i class="fas fa-chevron-right"></i> Data Protection</a></li>
                            <li><a href="#your-rights"><i class="fas fa-chevron-right"></i> Your Rights</a></li>
                            <li><a href="#changes"><i class="fas fa-chevron-right"></i> Policy Changes</a></li>
                        </ul>
                    </div>
                </div>

                <!-- Main Content -->
                <div class="col-lg-9">
                    <!-- Information Collection -->
                    <div class="policy-section" id="information-collection" data-aos="fade-up">
                        <h3 class="fw-bold mb-4">Information We Collect</h3>
                        <p class="text-muted mb-4">
                            When you decide to sign up to our website or buy our products or services,
                            we ask you to provide the following information:
                        </p>
                        <ul class="policy-list">
                            <li>
                                <strong>Personal Information:</strong> Including name, phone number, email address,
                                and residential address for account creation and service delivery.
                            </li>
                            <li>
                                <strong>Financial Details:</strong> Including bank statements and credit/debit
                                card information for secure payment processing.
                            </li>
                            <li>
                                <strong>Order Information:</strong> Including product details, order number,
                                and receipt for order management and customer support.
                            </li>
                            <li>
                                <strong>Technical Information:</strong> Including IP address, browser version,
                                operating system, date and time of website visits, and user actions for
                                analytics and service improvement.
                            </li>
                        </ul>
                    </div>

                    <!-- Information Use -->
                    <div class="policy-section" id="information-use" data-aos="fade-up">
                        <h3 class="fw-bold mb-4">How We Use Your Information</h3>
                        <ul class="policy-list">
                            <li>
                                The personal and technical data we collect helps us tailor our services
                                to your specific requirements and improve user experience.
                            </li>
                            <li>
                                Financial information is essential for processing secure payments and
                                preventing fraudulent activities.
                            </li>
                            <li>
                                We use your email address to keep you informed about our services,
                                including project updates, promotional offers, and latest product launches.
                            </li>
                            <li>
                                Additionally, we use your contact details to share industry insights,
                                order status updates, and to request valuable feedback for service enhancement.
                            </li>
                        </ul>

                        <div class="mt-4">
                            <table class="policy-table">
                                <thead>
                                    <tr>
                                        <th>Type of Information</th>
                                        <th>Purpose</th>
                                        <th>Legal Basis</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Contact Information</td>
                                        <td>Account management and communication</td>
                                        <td>Contractual necessity</td>
                                    </tr>
                                    <tr>
                                        <td>Payment Details</td>
                                        <td>Service payment processing</td>
                                        <td>Contractual necessity</td>
                                    </tr>
                                    <tr>
                                        <td>Usage Data</td>
                                        <td>Website improvement and analytics</td>
                                        <td>Legitimate interest</td>
                                    </tr>
                                    <tr>
                                        <td>Marketing Preferences</td>
                                        <td>Personalised offers and updates</td>
                                        <td>Consent</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Security -->
                    <div class="policy-section" id="security" data-aos="fade-up">
                        <h3 class="fw-bold mb-4">Security Measures</h3>
                        <ul class="policy-list">
                            <li>
                                We implement state-of-the-art security measures to secure your personal
                                information from unauthorised access, alteration, or disclosure.
                            </li>
                            <li>
                                We collect, store, and process all customer details using encrypted
                                databases and secure servers for smooth and safe operations.
                            </li>
                            <li>
                                We use highly secured payment gateways and SSL encryption to keep our
                                customers' financial information safe during transactions.
                            </li>
                            <li>
                                Regular security audits and vulnerability assessments are conducted
                                to maintain the highest level of data protection.
                            </li>
                            <li>
                                Access to personal information is restricted to authorized personnel
                                only, who are bound by confidentiality agreements.
                            </li>
                        </ul>
                    </div>

                    <!-- Cookies -->
                    <div class="policy-section" id="cookies" data-aos="fade-up">
                        <h3 class="fw-bold mb-4">Cookies Policy</h3>
                        <p class="text-muted mb-4">
                            Our team may use browser cookies to enhance your online experience and
                            monitor website activities. It helps us determine your preferences and
                            deliver better, personalised content.
                        </p>

                        <h5 class="fw-bold mb-3">Types of Cookies We Use:</h5>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border rounded-lg">
                                    <h6 class="fw-bold text-primary mb-2">Essential Cookies</h6>
                                    <p class="text-muted small mb-0">
                                        Required for website functionality and cannot be switched off.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border rounded-lg">
                                    <h6 class="fw-bold text-primary mb-2">Analytics Cookies</h6>
                                    <p class="text-muted small mb-0">
                                        Help us understand how visitors interact with our website.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 border rounded-lg">
                                    <h6 class="fw-bold text-primary mb-2">Functional Cookies</h6>
                                    <p class="text-muted small mb-0">
                                        Enable enhanced functionality and personalisation.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 border rounded-lg">
                                    <h6 class="fw-bold text-primary mb-2">Marketing Cookies</h6>
                                    <p class="text-muted small mb-0">
                                        Track visitors across websites to display relevant advertisements.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-info mt-4">
                            <i class="fas fa-info-circle me-2"></i>
                            You can manage your cookie preferences through your browser settings
                            at any time. However, disabling certain cookies may affect website functionality.
                        </div>
                    </div>

                    <!-- Data Protection -->
                    <div class="policy-section" id="data-protection" data-aos="fade-up">
                        <h3 class="fw-bold mb-4">Data Protection & GDPR Compliance</h3>
                        <p class="text-muted mb-4">
                            We are committed to complying with all applicable data protection laws,
                            including the General Data Protection Regulation (GDPR).
                        </p>

                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <div class="d-flex align-items-start gap-3">
                                    <i class="fas fa-shield-alt text-primary mt-1"></i>
                                    <div>
                                        <h6 class="fw-bold mb-2">Data Minimisation</h6>
                                        <p class="text-muted small mb-0">
                                            We only collect data that is necessary for providing our services.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="d-flex align-items-start gap-3">
                                    <i class="fas fa-lock text-primary mt-1"></i>
                                    <div>
                                        <h6 class="fw-bold mb-2">Storage Limitation</h6>
                                        <p class="text-muted small mb-0">
                                            We retain personal data only for as long as necessary.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="d-flex align-items-start gap-3">
                                    <i class="fas fa-user-check text-primary mt-1"></i>
                                    <div>
                                        <h6 class="fw-bold mb-2">Consent Management</h6>
                                        <p class="text-muted small mb-0">
                                            Clear opt-in mechanisms and easy withdrawal options.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="d-flex align-items-start gap-3">
                                    <i class="fas fa-file-contract text-primary mt-1"></i>
                                    <div>
                                        <h6 class="fw-bold mb-2">DPA Compliance</h6>
                                        <p class="text-muted small mb-0">
                                            Data Processing Agreements with all third-party processors.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Your Rights -->
                    <div class="policy-section" id="your-rights" data-aos="fade-up">
                        <h3 class="fw-bold mb-4">Your Data Protection Rights</h3>
                        <p class="text-muted mb-4">
                            Under data protection laws, you have rights including:
                        </p>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="border rounded-lg p-3 h-100">
                                    <h6 class="fw-bold text-primary mb-2">Right to Access</h6>
                                    <p class="text-muted small mb-0">
                                        You have the right to request copies of your personal data.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded-lg p-3 h-100">
                                    <h6 class="fw-bold text-primary mb-2">Right to Rectification</h6>
                                    <p class="text-muted small mb-0">
                                        You have the right to request correction of inaccurate information.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded-lg p-3 h-100">
                                    <h6 class="fw-bold text-primary mb-2">Right to Erasure</h6>
                                    <p class="text-muted small mb-0">
                                        You have the right to request deletion of your personal data.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded-lg p-3 h-100">
                                    <h6 class="fw-bold text-primary mb-2">Right to Restrict Processing</h6>
                                    <p class="text-muted small mb-0">
                                        You have the right to request restriction of processing your data.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded-lg p-3 h-100">
                                    <h6 class="fw-bold text-primary mb-2">Right to Object</h6>
                                    <p class="text-muted small mb-0">
                                        You have the right to object to processing of your personal data.
                                    </p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded-lg p-3 h-100">
                                    <h6 class="fw-bold text-primary mb-2">Right to Data Portability</h6>
                                    <p class="text-muted small mb-0">
                                        You have the right to request transfer of your data to another organisation.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-primary mt-4">
                            <p class="mb-0">
                                <strong>To exercise any of these rights:</strong> Please contact us at
                                <a href="mailto:privacy@DigitalStudio.com" class="fw-bold">privacy@DigitalStudio.com</a>.
                                We will respond to your request within 30 days.
                            </p>
                        </div>
                    </div>

                    <!-- Changes -->
                    <div class="policy-section" id="changes" data-aos="fade-up">
                        <h3 class="fw-bold mb-4">Policy Changes & Acknowledgement</h3>
                        <ul class="policy-list">
                            <li>
                                DIGITAL STUDIO2 reserves the right to amend this Privacy Policy at any time
                                to reflect changes in our practices or legal requirements.
                            </li>
                            <li>
                                All changes come into effect immediately upon posting on our website.
                            </li>
                            <li>
                                We will notify users of any material changes through email or website notifications.
                            </li>
                            <li>
                                Continued use of our website and services after changes constitutes acceptance
                                of the updated Privacy Policy.
                            </li>
                            <li>
                                You need to agree to the new terms to continue using our website effectively.
                            </li>
                        </ul>

                        <div class="mt-4 p-4 border rounded-lg bg-light">
                            <h5 class="fw-bold mb-3">Contact Information</h5>
                            <p class="text-muted mb-2">
                                For any questions about this Privacy Policy or our data practices, please contact:
                            </p>
                            <div class="d-flex flex-wrap gap-4">
                                <div>
                                    <strong class="d-block">Email:</strong>
                                    <a href="mailto:privacy@DigitalStudio.com">privacy@DigitalStudio.com</a>
                                </div>
                                <div>
                                    <strong class="d-block">Phone:</strong>
                                    <a href="tel:+447476603415">+44 74 7660 3415</a>
                                </div>
                                <div>
                                    <strong class="d-block">Address:</strong>
                                    <span>London, United Kingdom</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Smooth scroll for anchor links
            document.querySelectorAll('.policy-nav a').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();

                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);

                    if (targetElement) {
                        const offset = 100;
                        const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;

                        window.scrollTo({
                            top: targetPosition - offset,
                            behavior: 'smooth'
                        });
                    }
                });
            });

            // Back to top button
            const backToTopBtn = document.createElement('button');
            backToTopBtn.className = 'back-to-top-btn';
            backToTopBtn.innerHTML = '<i class="fas fa-chevron-up"></i>';
            document.body.appendChild(backToTopBtn);

            backToTopBtn.addEventListener('click', function () {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });

            window.addEventListener('scroll', function () {
                if (window.scrollY > 500) {
                    backToTopBtn.classList.add('show');
                } else {
                    backToTopBtn.classList.remove('show');
                }
            });

            // Highlight active section in navigation
            const sections = document.querySelectorAll('.policy-section');
            const navLinks = document.querySelectorAll('.policy-nav a');

            window.addEventListener('scroll', function () {
                let current = '';

                sections.forEach(section => {
                    const sectionTop = section.offsetTop;
                    const sectionHeight = section.clientHeight;

                    if (window.scrollY >= (sectionTop - 150)) {
                        current = section.getAttribute('id');
                    }
                });

                navLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === `#${current}`) {
                        link.classList.add('active');
                        link.style.color = 'var(--primary-500)';
                        link.style.fontWeight = '600';
                    } else {
                        link.style.color = '';
                        link.style.fontWeight = '';
                    }
                });
            });
        });
    </script>
@endpush