@extends('layouts.app')

@section('title', 'Web Design & Development | DIGITAL STUDIO2')

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

        .web-item {
            border-radius: var(--radius-lg);
            overflow: hidden;
            position: relative;
            height: 250px;
        }

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

        .web-item:hover img {
            transform: scale(1.1);
        }

        .web-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;
        }

        .web-item:hover .web-overlay {
            opacity: 1;
        }

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

        .web-title {
            color: white;
            font-size: 1.25rem;
            font-weight: 700;
        }

        .tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 1rem 0;
        }

        .tech-tag {
            padding: 0.25rem 0.75rem;
            background: var(--primary-50);
            color: var(--primary-700);
            border-radius: var(--radius-full);
            font-size: 0.75rem;
            font-weight: 600;
        }
    </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-code me-2"></i> Web Design & Development
                        </span>
                        <h1 class="display-3 fw-bold mb-4">
                            Top Web Design & <br>
                            <span class="text-gradient">Development Services</span>
                        </h1>
                        <p class="lead mb-5 mx-auto" style="max-width: 800px;">
                            Empower your brand with high-performing, responsive websites built for modern users.
                            At DIGITAL STUDIO2, we specialise in sleek, scalable web solutions that combine
                            aesthetics with functionality—ensuring your site not only looks stunning but delivers real
                            business
                            results.
                        </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 Quote
                            </a>
                            <a href="#portfolio" class="btn btn-outline-light btn-lg">
                                <i class="fas fa-eye me-2"></i>
                                View Portfolio
                            </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">Web Design & Development <br><span class="text-gradient">Services</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Boost your site performance with our comprehensive web design & development services.
                </p>
            </div>

            <div class="row g-4">
                <!-- WordPress Development -->
                <div class="col-lg-8">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fab fa-wordpress"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Custom WordPress Website</h4>
                        <p class="text-muted mb-4">
                            Our custom WordPress website services are customised to your business, providing unique
                            designs and improved functionality. Our responsive sites are optimised for all devices and
                            involve SEO best practices.
                        </p>
                        <div class="tech-stack">
                            <span class="tech-tag">WordPress</span>
                            <span class="tech-tag">Elementor</span>
                            <span class="tech-tag">WooCommerce</span>
                            <span class="tech-tag">SEO Ready</span>
                            <span class="tech-tag">Responsive</span>
                        </div>
                        <a href="{{ route('contact') }}" class="text-primary fw-semibold d-flex align-items-center gap-2">
                            Build WordPress Site
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="row g-4 h-100">
                        <!-- Static Websites -->
                        <div class="col-12">
                            <div class="service-card h-100">
                                <div class="service-icon">
                                    <i class="fas fa-file-code"></i>
                                </div>
                                <h4 class="fw-bold mb-3">Static Website Pages</h4>
                                <p class="text-muted mb-4">
                                    Our professional static website page services display your brand effectively with
                                    fast-loading, user-friendly designs perfect for businesses needing simple, elegant
                                    sites.
                                </p>
                            </div>
                        </div>

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

                <!-- Responsive Development -->
                <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/web-service img 1.png') }}" alt="Responsive Web Development"
                                    class="img-fluid rounded-3 shadow"
                                    onerror="this.src='https://images.unsplash.com/photo-1555099962-4199c345e5dd?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">Responsive Web Development</h4>
                                <p class="text-muted mb-4">
                                    Our responsive web development services ensure your website looks and functions
                                    perfectly
                                    across all devices. From mobile phones to desktops, we optimise layout, speed, and
                                    performance, offering a seamless user experience that keeps your audience engaged and
                                    your
                                    brand looking sharp.
                                </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-mobile-alt me-1"></i> Mobile First
                                    </span>
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-tablet-alt me-1"></i> Tablet Optimised
                                    </span>
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-desktop me-1"></i> Desktop Perfect
                                    </span>
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-tachometer-alt me-1"></i> Performance
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technologies 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">
                    Technologies
                </span>
                <h2 class="mb-4">Web Development <br><span class="text-gradient">Stack</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    We use modern technologies and frameworks to build fast, secure, and scalable websites.
                </p>
            </div>

            <div class="tech-grid">
                @php
                    $technologies = [
                        ['name' => 'HTML5', 'icon' => 'html5.svg'],
                        ['name' => 'CSS3', 'icon' => 'css3.svg'],
                        ['name' => 'JavaScript', 'icon' => 'javascript.svg'],
                        ['name' => 'React', 'icon' => 'react.svg'],
                        ['name' => 'Vue.js', 'icon' => 'vue.svg'],
                        ['name' => 'Node.js', 'icon' => 'nodejs.svg'],
                        ['name' => 'PHP', 'icon' => 'php.svg'],
                        ['name' => 'Laravel', 'icon' => 'laravel.svg'],
                        ['name' => 'WordPress', 'icon' => 'wordpress.svg'],
                        ['name' => 'Shopify', 'icon' => 'shopify.svg'],
                        ['name' => 'MySQL', 'icon' => 'mysql.svg'],
                        ['name' => 'MongoDB', 'icon' => 'mongodb.svg'],
                    ];
                @endphp

                @foreach($technologies as $tech)
                    <div class="tech-item">
                        <div class="tech-icon">
                            <img src="{{ asset('assets/' . $tech['icon']) }}" alt="{{ $tech['name'] }}"
                                onerror="this.src='https://via.placeholder.com/48?text={{ substr($tech['name'], 0, 2) }}'">
                        </div>
                        <div class="tech-name">{{ $tech['name'] }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio" 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">
                    Portfolio
                </span>
                <h2 class="mb-4">Web Design <br><span class="text-gradient">Portfolio</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Explore our web design portfolio featuring responsive, modern, and user-friendly websites.
                </p>
            </div>

            <div class="web-showcase">
                @for($i = 1; $i <= 9; $i++)
                    <div class="web-item">
                        <img src="{{ asset('assets/show-case ' . $i . '.png') }}" alt="Web Design {{ $i }}"
                            onerror="this.src='https://images.unsplash.com/photo-1551650975-87deedd944c3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'">
                        <div class="web-overlay">
                            <div class="web-category">Web Design</div>
                            <h3 class="web-title">Project {{ $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">Web Development <br><span class="text-gradient">Process</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Our systematic approach ensures quality, transparency, and timely delivery.
                </p>
            </div>

            <div class="row g-4">
                @php
                    $steps = [
                        ['icon' => 'fas fa-search', 'title' => 'Discovery', 'desc' => 'Understanding requirements and planning'],
                        ['icon' => 'fas fa-paint-brush', 'title' => 'UI/UX Design', 'desc' => 'Creating wireframes and designs'],
                        ['icon' => 'fas fa-code', 'title' => 'Development', 'desc' => 'Building with modern technologies'],
                        ['icon' => 'fas fa-mobile-alt', 'title' => 'Responsive', 'desc' => 'Optimising for all devices'],
                        ['icon' => 'fas fa-bug', 'title' => 'Testing', 'desc' => 'Quality assurance and bug fixing'],
                        ['icon' => 'fas fa-rocket', 'title' => 'Launch', 'desc' => 'Deployment and go-live'],
                        ['icon' => 'fas fa-search-plus', 'title' => 'SEO', 'desc' => 'Search engine optimisation'],
                        ['icon' => 'fas fa-headset', 'title' => 'Support', 'desc' => 'Ongoing maintenance and support'],
                    ];
                @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 Build Your Website?</h2>
                        <p class="lead mb-5 text-light opacity-90">
                            Let's create a stunning website that drives business growth 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 Web Project
                            </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-bolt me-1"></i> Free domain & hosting for 1 year
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection