@extends('layouts.app')

@section('title', 'Terms & Conditions | DIGITAL STUDIO2')

@push('styles')
    <style>
        /* Terms & Conditions Page Specific Styles */
        .hero-terms {
            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;
        }

        .terms-card {
            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);
        }

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

        .terms-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: var(--primary-500);
            color: white;
            border-radius: var(--radius-full);
            font-weight: 700;
            margin-right: 1rem;
            flex-shrink: 0;
        }

        .terms-timeline {
            position: relative;
            padding-left: 3rem;
            margin: 3rem 0;
        }

        .terms-timeline:before {
            content: '';
            position: absolute;
            left: 1.5rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--text-300);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 2rem;
        }

        .timeline-item:last-child {
            margin-bottom: 0;
        }

        .timeline-icon {
            position: absolute;
            left: -3rem;
            width: 3rem;
            height: 3rem;
            background: var(--primary-100);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--primary-500);
        }

        .timeline-icon i {
            color: var(--primary-500);
            font-size: 1.25rem;
        }

        .warning-box {
            background: #fff3cd;
            border: 1px solid #ffecb5;
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            margin: 2rem 0;
        }

        .warning-box i {
            color: #856404;
            margin-right: 0.75rem;
        }

        .info-box {
            background: var(--primary-50);
            border: 1px solid var(--primary-100);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            margin: 2rem 0;
        }

        .info-box i {
            color: var(--primary-500);
            margin-right: 0.75rem;
        }

        .table-of-contents {
            background: var(--bg-light);
            border-radius: var(--radius-lg);
            padding: 2rem;
            margin-bottom: 3rem;
        }

        .table-of-contents ul {
            columns: 2;
            column-gap: 3rem;
            list-style: none;
            padding-left: 0;
        }

        .table-of-contents li {
            margin-bottom: 0.75rem;
            break-inside: avoid;
        }

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

        .table-of-contents a:hover {
            color: var(--primary-500);
            padding-left: 0.5rem;
        }

        .table-of-contents i {
            color: var(--primary-500);
            font-size: 0.875rem;
        }

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

            .terms-card {
                padding: 1.5rem;
            }

            .table-of-contents ul {
                columns: 1;
            }

            .terms-timeline {
                padding-left: 2rem;
            }

            .terms-timeline:before {
                left: 1rem;
            }

            .timeline-icon {
                left: -2rem;
                width: 2rem;
                height: 2rem;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Hero Section -->
    <section class="hero-terms 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">
                        Terms & <span class="text-gradient">Conditions</span>
                    </h1>
                    <p class="lead text-light opacity-90">
                        We recommend all users carefully review and accept these terms and conditions
                        before accessing our website or using our professional services.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Table of Contents -->
    <section class="py-5">
        <div class="container">
            <div class="table-of-contents" data-aos="fade-up">
                <h3 class="fw-bold mb-4">Table of Contents</h3>
                <ul>
                    <li><a href="#revision-policy"><i class="fas fa-chevron-right"></i> Revision Policy</a></li>
                    <li><a href="#refund-policy"><i class="fas fa-chevron-right"></i> Refund Policy</a></li>
                    <li><a href="#money-back-guarantee"><i class="fas fa-chevron-right"></i> Money-Back Guarantee</a></li>
                    <li><a href="#claim-refund"><i class="fas fa-chevron-right"></i> How to Claim Refund</a></li>
                    <li><a href="#quality-assurance"><i class="fas fa-chevron-right"></i> Quality Assurance</a></li>
                    <li><a href="#indemnity"><i class="fas fa-chevron-right"></i> Indemnity</a></li>
                    <li><a href="#breach-agreement"><i class="fas fa-chevron-right"></i> Breach of Agreement</a></li>
                    <li><a href="#project-closure"><i class="fas fa-chevron-right"></i> Project Closure</a></li>
                    <li><a href="#amendments"><i class="fas fa-chevron-right"></i> Amendments</a></li>
                    <li><a href="#contact"><i class="fas fa-chevron-right"></i> Contact Information</a></li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Terms Content -->
    <section class="py-5 bg-light">
        <div class="container">
            <!-- Revision Policy -->
            <div class="terms-card" id="revision-policy" data-aos="fade-up">
                <div class="d-flex align-items-start mb-4">
                    <span class="terms-badge">1</span>
                    <div>
                        <h3 class="fw-bold mb-3">Revision Policy</h3>
                        <p class="text-muted mb-0">
                            You may request as many revisions as outlined in your chosen package details.
                            Customers are entitled to unlimited revisions provided the original design concept
                            remains unchanged.
                        </p>
                    </div>
                </div>

                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Important:</strong> Revisions must be requested within 30 days of project delivery.
                    Major concept changes after approval may incur additional charges.
                </div>
            </div>

            <!-- Refund Policy -->
            <div class="terms-card" id="refund-policy" data-aos="fade-up">
                <div class="d-flex align-items-start mb-4">
                    <span class="terms-badge">2</span>
                    <div>
                        <h3 class="fw-bold mb-3">Refund Policy</h3>
                        <p class="text-muted mb-0">
                            DIGITAL STUDIO2 offers a complete refund on all its services, but you will not
                            get any refund if you approve the initial concept, select special packages,
                            or accept a revision.
                        </p>
                    </div>
                </div>

                <div class="row g-4 mt-4">
                    <div class="col-md-6">
                        <div class="border rounded-lg p-3">
                            <h6 class="fw-bold text-primary mb-2">Refund Eligible</h6>
                            <ul class="text-muted small mb-0">
                                <li>Project cancellation before work begins</li>
                                <li>Service not delivered as promised</li>
                                <li>Quality standards not met</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="border rounded-lg p-3">
                            <h6 class="fw-bold text-primary mb-2">Refund Not Eligible</h6>
                            <ul class="text-muted small mb-0">
                                <li>After initial concept approval</li>
                                <li>For special/promotional packages</li>
                                <li>After accepting any revision</li>
                                <li>Change of mind after delivery</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Money-Back Guarantee -->
            <div class="terms-card" id="money-back-guarantee" data-aos="fade-up">
                <div class="d-flex align-items-start mb-4">
                    <span class="terms-badge">3</span>
                    <div>
                        <h3 class="fw-bold mb-3">Money-Back Guarantee</h3>
                        <p class="text-muted mb-0">
                            DIGITAL STUDIO2 offers a 100% money-back guarantee for complete customer satisfaction.
                            Make sure to contact us within 14 days after placing the order.
                        </p>
                    </div>
                </div>

                <div class="terms-timeline">
                    <div class="timeline-item">
                        <div class="timeline-icon">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <h5 class="fw-bold mb-2">Day 1-7</h5>
                        <p class="text-muted mb-0">
                            Full refund available if you're not satisfied with initial concept delivery.
                        </p>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <h5 class="fw-bold mb-2">Day 8-14</h5>
                        <p class="text-muted mb-0">
                            Partial refund available (up to 50%) based on work completed.
                        </p>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-icon">
                            <i class="fas fa-ban"></i>
                        </div>
                        <h5 class="fw-bold mb-2">After Day 14</h5>
                        <p class="text-muted mb-0">
                            No refund available. Support available for project completion.
                        </p>
                    </div>
                </div>
            </div>

            <!-- How to Claim Refund -->
            <div class="terms-card" id="claim-refund" data-aos="fade-up">
                <div class="d-flex align-items-start mb-4">
                    <span class="terms-badge">4</span>
                    <div>
                        <h3 class="fw-bold mb-3">How to Claim Refund</h3>
                        <p class="text-muted mb-0">
                            To claim a refund, you need to contact our customer support team via call or
                            live chat. Don't forget to share your order ID.
                        </p>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="text-center p-3 border rounded-lg">
                            <i class="fas fa-phone-alt fa-2x text-primary mb-3"></i>
                            <h6 class="fw-bold mb-2">Call Support</h6>
                            <p class="text-muted small mb-0">
                                Call us at +44 74 7660 3415 to discuss refund options
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center p-3 border rounded-lg">
                            <i class="fas fa-comments fa-2x text-primary mb-3"></i>
                            <h6 class="fw-bold mb-2">Live Chat</h6>
                            <p class="text-muted small mb-0">
                                Use our live chat support for immediate assistance
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center p-3 border rounded-lg">
                            <i class="fas fa-envelope fa-2x text-primary mb-3"></i>
                            <h6 class="fw-bold mb-2">Email Support</h6>
                            <p class="text-muted small mb-0">
                                Email refunds@DigitalStudio.com with your order ID
                            </p>
                        </div>
                    </div>
                </div>

                <div class="warning-box mt-4">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Important:</strong> Refund processing may take 7-14 business days depending on
                    your payment method and bank processing times.
                </div>
            </div>

            <!-- Quality Assurance -->
            <div class="terms-card" id="quality-assurance" data-aos="fade-up">
                <div class="d-flex align-items-start mb-4">
                    <span class="terms-badge">5</span>
                    <div>
                        <h3 class="fw-bold mb-3">Quality Assurance</h3>
                        <p class="text-muted mb-0">
                            We never compromise on standard. Our designers consistently deliver solutions
                            that meet our clients' exacting expectations.
                        </p>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="text-center p-3">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
                                style="width: 60px; height: 60px; background: var(--primary-100);">
                                <i class="fas fa-check-circle text-primary"></i>
                            </div>
                            <h6 class="fw-bold mb-2">100% Original</h6>
                            <p class="text-muted small mb-0">
                                All designs are created from scratch
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center p-3">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
                                style="width: 60px; height: 60px; background: var(--primary-100);">
                                <i class="fas fa-star text-primary"></i>
                            </div>
                            <h6 class="fw-bold mb-2">Premium Quality</h6>
                            <p class="text-muted small mb-0">
                                Industry-leading quality standards
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center p-3">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
                                style="width: 60px; height: 60px; background: var(--primary-100);">
                                <i class="fas fa-thumbs-up text-primary"></i>
                            </div>
                            <h6 class="fw-bold mb-2">Client Satisfaction</h6>
                            <p class="text-muted small mb-0">
                                We work until you're completely satisfied
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Indemnity -->
            <div class="terms-card" id="indemnity" data-aos="fade-up">
                <div class="d-flex align-items-start mb-4">
                    <span class="terms-badge">6</span>
                    <div>
                        <h3 class="fw-bold mb-3">Indemnity</h3>
                        <p class="text-muted mb-0">
                            DIGITAL STUDIO2 will not be responsible for any loss, damage, or legal dispute
                            arising from designs created per your requirements.
                        </p>
                    </div>
                </div>

                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <strong>Disclaimer:</strong> We provide creative services based on client requirements.
                    Clients are responsible for ensuring their requirements comply with all applicable laws,
                    regulations, and copyright restrictions.
                </div>
            </div>

            <!-- Breach of Agreement -->
            <div class="terms-card" id="breach-agreement" data-aos="fade-up">
                <div class="d-flex align-items-start mb-4">
                    <span class="terms-badge">7</span>
                    <div>
                        <h3 class="fw-bold mb-3">Breach of Agreement</h3>
                        <p class="text-muted mb-0">
                            We reserve the right to take legal actions against anyone who breaches these
                            terms and conditions.
                        </p>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="border rounded-lg p-3">
                            <h6 class="fw-bold text-primary mb-2">Client Breaches</h6>
                            <ul class="text-muted small mb-0">
                                <li>Non-payment for services rendered</li>
                                <li>Unauthorised use of our intellectual property</li>
                                <li>Providing false information</li>
                                <li>Violation of copyright laws</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="border rounded-lg p-3">
                            <h6 class="fw-bold text-primary mb-2">Our Actions</h6>
                            <ul class="text-muted small mb-0">
                                <li>Project suspension or termination</li>
                                <li>Legal notice and demand letters</li>
                                <li>Court proceedings if necessary</li>
                                <li>Blacklisting from future services</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Project Closure -->
            <div class="terms-card" id="project-closure" data-aos="fade-up">
                <div class="d-flex align-items-start mb-4">
                    <span class="terms-badge">8</span>
                    <div>
                        <h3 class="fw-bold mb-3">Project Closure</h3>
                        <p class="text-muted mb-0">
                            Lack of communication for more than 14 days results in project closure.
                            The project is considered closed if not claimed within 14 days.
                        </p>
                    </div>
                </div>

                <div class="info-box">
                    <i class="fas fa-lightbulb"></i>
                    <strong>Tip:</strong> To avoid project closure, maintain regular communication with
                    your project manager. If you need to pause the project, inform us in writing.
                </div>
            </div>

            <!-- Amendments -->
            <div class="terms-card" id="amendments" data-aos="fade-up">
                <div class="d-flex align-items-start mb-4">
                    <span class="terms-badge">9</span>
                    <div>
                        <h3 class="fw-bold mb-3">Amendments</h3>
                        <p class="text-muted mb-0">
                            DIGITAL STUDIO2 reserves the right to amend these Terms & Conditions at any time.
                            Changes come into effect immediately.
                        </p>
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="border rounded-lg p-3 text-center">
                            <i class="fas fa-bell fa-2x text-primary mb-3"></i>
                            <h6 class="fw-bold mb-2">Notification</h6>
                            <p class="text-muted small mb-0">
                                We notify users of major changes via email
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="border rounded-lg p-3 text-center">
                            <i class="fas fa-check-circle fa-2x text-primary mb-3"></i>
                            <h6 class="fw-bold mb-2">Acceptance</h6>
                            <p class="text-muted small mb-0">
                                Continued use means acceptance of new terms
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="terms-card" id="contact" data-aos="fade-up">
                <div class="d-flex align-items-start mb-4">
                    <span class="terms-badge">10</span>
                    <div>
                        <h3 class="fw-bold mb-3">Contact Information</h3>
                        <p class="text-muted mb-0">
                            For any questions or concerns regarding these Terms & Conditions, please contact us.
                        </p>
                    </div>
                </div>

                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="text-center p-4 border rounded-lg">
                            <i class="fas fa-envelope fa-2x text-primary mb-3"></i>
                            <h6 class="fw-bold mb-2">Email</h6>
                            <a href="mailto:legal@DigitalStudio.com" class="d-block text-primary">
                                legal@DigitalStudio.com
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center p-4 border rounded-lg">
                            <i class="fas fa-phone-alt fa-2x text-primary mb-3"></i>
                            <h6 class="fw-bold mb-2">Phone</h6>
                            <a href="tel:+447476603415" class="d-block text-primary">
                                +44 74 7660 3415
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center p-4 border rounded-lg">
                            <i class="fas fa-map-marker-alt fa-2x text-primary mb-3"></i>
                            <h6 class="fw-bold mb-2">Address</h6>
                            <span class="d-block text-primary">
                                London, United Kingdom
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Acceptance Section -->
    <section class="py-5">
        <div class="container">
            <div class="text-center" data-aos="fade-up">
                <div class="border rounded-lg p-5 bg-white shadow-sm">
                    <i class="fas fa-file-contract fa-3x text-primary mb-4"></i>
                    <h3 class="fw-bold mb-4">Acceptance of Terms</h3>
                    <p class="text-muted mb-4">
                        By using our website and services, you acknowledge that you have read,
                        understood, and agree to be bound by these Terms & Conditions.
                    </p>
                    <div class="d-flex flex-wrap gap-3 justify-content-center">
                        <a href="{{ route('home') }}" class="btn btn-primary">
                            Return to Homepage
                        </a>
                        <a href="{{ route('contact') }}" class="btn btn-outline-primary">
                            Contact Legal Team
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Smooth scroll for anchor links
            document.querySelectorAll('.table-of-contents 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'
                        });
                    }
                });
            });

            // Highlight active section in table of contents
            const sections = document.querySelectorAll('.terms-card');
            const tocLinks = document.querySelectorAll('.table-of-contents 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');
                    }
                });

                tocLinks.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