{% extends 'front.html.twig' %}

{% block body %}

    <style type="text/css">
        #check-wrapper {
            display: none !important;
        }
    </style>
    <link type="text/css" rel="stylesheet" href="{{ asset('plugins/sweetalert2/sweetalert2.min.css') }}">

    <section class="w3l-covers-4">
        <div id="covers4-block">
            <div class="main-slider">
                <div class="csslider infinity" id="slider1">
                    <input type="radio" name="slides" checked="checked" id="slides_1" />
                    <input type="radio" name="slides" id="slides_2" />
                    <input type="radio" name="slides" id="slides_3" />
                    <input type="radio" name="slides" id="slides_4" />
                    <input type="radio" name="slides" id="slides_5" />
                    <input type="radio" name="slides" id="slides_6" />
                    <ul>
                        <li>
                            <div class="wrapper">
                                <div class="slider-info">
                                    <div class="d-grid slide-two-col">
                                        <div class="slide-left-text">
                                            <h3>Stop Chasing Invoices. Start Managing Jobs.</h3>
                                            <p>Meet WorkBird—our custom-built platform for Australian trades. Manage quotes, jobs, and invoicing from anywhere from any device.</p>
                                            <a href="{{ path('product_work_bird_action') }}" style="max-width: 150px;" class="btn button-style">See WorkBird</a>
                                        </div>
                                        <div class="slide-right-img">
                                            <img src="{{ asset('logo/work-bird-logo-compact-no-bg.png') }}" class="img-responsive" alt="Work Bird Application" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="wrapper">
                                <div class="slider-info">
                                    <div class="d-grid slide-two-col">
                                        <div class="slide-left-text">
                                            <h3>Customized Software Development</h3>
                                            <p>PixelShield provides custom software development services tailored to your business needs.
                                                We design and build secure, scalable, and high-performance solutions that help streamline
                                                operations, drive innovation, and support long-term growth.</p>
                                            <a href="{{ path('service_custom_software_development_action') }}" style="max-width: 150px;" class="btn button-style">See More</a>
                                        </div>
                                        <div class="slide-right-img">
                                            <img src="{{ asset('images/system-development.png') }}" class="img-responsive" alt="" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="wrapper">
                                <div class="slider-info">
                                    <div class="d-grid slide-two-col">
                                        <div class="slide-right-img">
                                            <img src="{{ asset('images/web-development.png') }}" class="img-responsive" alt="" />
                                        </div>
                                        <div class="slide-left-text">
                                            <h3>Website Design and Development</h3>
                                            <p>PixelShield offers professional website design and development services focused on
                                                creating visually appealing, responsive, and high-performing websites. We craft
                                                user-friendly digital experiences that strengthen your brand, engage visitors,
                                                and support your business objectives.</p>
                                            <a href="{{ path('service_website_design_and_development_action') }}" style="max-width: 150px;" class="btn button-style">See More</a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="wrapper">
                                <div class="slider-info">
                                    <div class="d-grid slide-two-col">
                                        <div class="slide-left-text">
                                            <h3>IT Consulting & Management</h3>
                                            <p>PixelShield provides IT consulting and management services to help businesses plan,
                                                optimize, and manage their technology effectively. We deliver strategic guidance and
                                                reliable support to improve performance, enhance security, and ensure your IT
                                                infrastructure aligns with your business goals.</p>
                                            <a href="{{ path('service_it_consulting_and_management_action') }}" style="max-width: 150px;" class="btn button-style">See More</a>
                                        </div>
                                        <div class="slide-right-img">
                                            <img src="{{ asset('images/it-consulting.png') }}" class="img-responsive" alt="" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="wrapper">
                                <div class="slider-info">
                                    <div class="d-grid slide-two-col">
                                        <div class="slide-left-text">
                                            <h3>Software & Website Migration<br>(Legacy Rescue)</h3>
                                            <p>Is your old website holding you back? PixelShield offers software and website migration services
                                                to ensure a smooth and secure transition to new platforms or environments. We carefully manage
                                                data, functionality, and performance to minimize downtime while improving scalability, security,
                                                and reliability.</p>
                                            <a href="{{ path('service_software_and_website_migration_action') }}" style="max-width: 150px;" class="btn button-style">See More</a>
                                        </div>
                                        <div class="slide-right-img">
                                            <img src="{{ asset('images/web-migration.png') }}" class="img-responsive" alt="" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="wrapper">
                                <div class="slider-info">
                                    <div class="d-grid slide-two-col">
                                        <div class="slide-left-text">
                                            <h3>Cybersecurity</h3>
                                            <p>PixelShield provides comprehensive cybersecurity services to protect your systems, data, and digital assets from evolving threats. We implement proactive security measures and best practices to reduce risk, strengthen defenses, and ensure business continuity.</p>
                                            <a href="{{ path('service_cyber_security_action') }}" style="max-width: 150px;" class="btn button-style">See More</a>
                                        </div>
                                        <div class="slide-right-img">
                                            <img src="{{ asset('images/cybersecurity.png') }}" class="img-responsive" alt="" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="arrows">
                        <label for="slides_1"></label>
                        <label for="slides_2"></label>
                        <label for="slides_3"></label>
                        <label for="slides_4"></label>
                        <label for="slides_5"></label>
                        <label for="slides_6"></label>
                    </div>
                    <div class="navigation">
                        <div>
                            <label for="slides_1"></label>
                            <label for="slides_2"></label>
                            <label for="slides_3"></label>
                            <label for="slides_4"></label>
                            <label for="slides_5"></label>
                            <label for="slides_6"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="w3l-forms-7">
        <div class="forms-main">
            <form id="contactForm">
                <div class="wrapper">
                    <div class="grid grid-column-3">
                        <div class="column form-7-gd pr-0">
                            <h3>Book 30 minute consultation</h3>
                            <p>We will analyze your current workflow and provide suggestions to improve and save time and cost.</p>
                        </div>
                        <div class="column form-7-gd pr-0">
                            <input type="text" id="name" placeholder="Enter your name...">
                        </div>
                        <div class="column form-7-gd pr-0">
                            <input type="email" id="email" placeholder="Enter your email...">&nbsp;
                            <div  class="form-input" id="check-wrapper">
                                <label for="reason">Reason</label>
                                <input type="text" id="reason" placeholder="Reason"/>
                            </div>
                            <input type="hidden" name="_csrf_token" id="_csrf_token" value="{{ csrf_token('contact_form') }}">
                            <button type="button" id="contact-request">Submit</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <section class="w3l-features-4">
        <div id="features4-block">
            <div class="wrapper">
                <h3 class="host-title">Why Choose Us</h3>
                <div class="features4-grids d-grid">
                    <div class="features4-grid">
                        <div class="features-icon">
                            <span class="fa fa-users" aria-hidden="true"></span>
                        </div>
                        <h5><a href="javascript:void(0);">Full Specialist Team</a></h5>
                        <p>PixelShield brings together a full specialist team of experienced professionals, including software developers, web and UI/UX designers, app developers, and cybersecurity experts. This diverse expertise allows us to deliver complete, high-quality solutions under one roof, ensuring consistency, efficiency, and results you can trust.</p>
                    </div>
                    <div class="features4-grid">
                        <div class="features-icon">
                            <span class="fa fa-line-chart" aria-hidden="true"></span>
                        </div>
                        <h5><a href="javascript:void(0);">Analyzed Systems</a></h5>
                        <p>PixelShield designs and develops carefully analyzed systems tailored to each client’s specific requirements. By thoroughly understanding business processes and goals, we create efficient, scalable solutions that deliver the best possible fit and long-term value.</p>
                    </div>
                    <div class="features4-grid">
                        <div class="features-icon">
                            <span class="fa fa-usd" aria-hidden="true"></span>
                        </div>
                        <h5><a href="javascript:void(0);">Reasonable Pricing</a></h5>
                        <p>PixelShield offers reasonable and flexible pricing designed to uplift SMEs. By providing cost-effective, high-quality solutions, we help small and medium enterprises adopt the right technology, grow confidently, and compete effectively in the digital space.</p>
                    </div>
                    <div class="features4-grid">
                        <div class="features-icon">
                            <span class="fa fa-bolt" aria-hidden="true"></span>
                        </div>
                        <h5><a href="javascript:void(0);">Powerful Tools</a></h5>
                        <p>PixelShield leverages powerful, industry-leading tools and technologies in our website and system development processes. By using modern frameworks, secure platforms, and proven development tools, we ensure faster delivery, high performance, and reliable, future-ready solutions.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="w3l-features-with-photo-17">
        <div class="features-with-17_sur">
            <div class="wrapper">
                <h3 class="host-title">Our Main Services</h3>
                <div class="features-with-17-top_sur">
                    <div class="features-with-17-left_sur">
                        <img src="{{ asset('images/feat_pho_17.png') }}" class="img" alt="">
                    </div>
                    <div class="features-with-17-right_sur">
                        <div class="features-with-17-right-tp_sur">
                            <div class="features-with-17-left1">
                                <span class="fa fa-cloud" aria-hidden="true"></span>
                            </div>
                            <div class="features-with-17-left2">
                                <h6><a href="{{ path('service_custom_software_development_action') }}">Custom Software</a></h6>
                                <p>Tools built specifically for your workflow. If an 'off-the-shelf' app doesn't work for your business, we'll build one that does.</p>
                            </div>
                        </div>
                        <div class="features-with-17-right-tp_sur">
                            <div class="features-with-17-left1">
                                <span class="fa fa-refresh" aria-hidden="true"></span>
                            </div>
                            <div class="features-with-17-left2">
                                <h6><a href="{{ path('service_website_design_and_development_action') }}">Website Refresh</a></h6>
                                <p>Modern, responsive websites that look great on a phone and actually help you win more local jobs.</p>
                            </div>
                        </div>
                        <div class="features-with-17-right-tp_sur">
                            <div class="features-with-17-left1">
                                <span class="fa fa-share-alt" aria-hidden="true"></span>
                            </div>
                            <div class="features-with-17-left2">
                                <h6><a href="{{ path('service_software_and_website_migration_action') }}">Legacy Rescue</a> </h6>
                                <p>We modernize your existing systems with zero downtime, making them faster and more secure.</p>
                            </div>
                        </div>
                        <div class="features-with-17-right-tp_sur">
                            <div class="features-with-17-left1">
                                <span class="fa fa-shield" aria-hidden="true"></span>
                            </div>
                            <div class="features-with-17-left2">
                                <h6><a href="{{ path('service_cyber_security_action') }}">Cybersecurity</a></h6>
                                <p>Peace of mind for you and your customers. We keep your business data under lock and key.</p>
                            </div>
                        </div>
                        <div class="features-with-17-right-tp_sur">
                            <div class="features-with-17-left1">
                                <span class="fa fa-laptop" aria-hidden="true"></span>
                            </div>
                            <div class="features-with-17-left2">
                                <h6><a href="{{ path('service_it_consulting_and_management_action') }}">Consulting &amp; Management </a></h6>
                                <p>Your on-call tech partners. We provide expert advice and proactive management to keep your systems running smoothly, so you can stay focused on the business.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {% if false %}
    <div class="w3l-grids-block-5">
        <section id="grids5-block">
            <div class="wrapper">
                <h3 class="host-title">Latest From Our Blog</h3>
                <div class="d-grid align-grids">
                    <div class="grids5-info">
                        <a href="blog-single.html"><img src="{{ asset('images/home-blog-1.jpg') }}" alt="" /></a>
                        <div class="grid-5-content">
                            <h5>Posted on <a href="blog-single.html">Jan 11</a>, 2026 by <a href="blog-single.html">admin</a></h5>
                            <h4><a href="blog-single.html">Popular blog post title one headline </a></h4>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority in some form.</p>
                        </div>
                    </div>
                    <div class="grids5-info">
                        <a href="blog-single.html"><img src="{{ asset('images/home-blog-2.jpg') }}" alt="" /></a>
                        <div class="grid-5-content">
                            <h5>Posted on <a href="blog-single.html">Mar 31</a>, 2025 by <a href="blog-single.html">admin</a></h5>
                            <h4><a href="blog-single.html">Popular blog post title two headline </a></h4>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority in some form.</p>
                        </div>
                    </div>
                    <div class="grids5-info">
                        <a href="blog-single.html"><img src="{{ asset('images/home-blog-3.jpg') }}" alt="" /></a>
                        <div class="grid-5-content">
                            <h5>Posted on <a href="blog-single.html">May 11</a>, 2025 by <a href="blog-single.html">admin</a></h5>
                            <h4><a href="blog-single.html">Popular blog post title three headline </a></h4>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority in some form.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <section class="w3l-customers-7">
        <div class="customers_sur">
            <div class="wrapper">
                <h3>What our Clients Say</h3>
                <div class="customers-top_sur">
                    <div class="customers-left_sur">
                        <div class="customers_grid">
                            <p class="sub-test">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
                            <div class="customers-bottom_sur">
                                <div class="custo-img-res">
                                    <img src="{{ asset('images/c1.jpg') }}" alt=" " class="img">
                                </div>
                                <div class="custo_grid">
                                    <h5>Benjamin Jin</h5>
                                    <span>Founder, CEO</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="customers-middle_sur">
                        <div class="customers_grid">
                            <p class="sub-test">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
                            <div class="customers-bottom_sur">
                                <div class="custo-img-res">
                                    <img src="{{ asset('images/c2.jpg') }}" alt=" " class="img">
                                </div>
                                <div class="custo_grid">
                                    <h5>Abigail</h5>
                                    <span>Lead Designer</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="customers-right_sur">
                        <div class="customers_grid">
                            <p class="sub-test">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
                            <div class="customers-bottom_sur">
                                <div class="custo-img-res">
                                    <img src="{{ asset('images/c3.jpg') }}" alt=" " class="img">
                                </div>
                                <div class="custo_grid">
                                    <h5>Charlotte</h5>
                                    <span>Head of Support</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </section>
    {% endif %}

    <section class="w3l-forms-9">
        <div class="main-host">
            <div class="wrapper">
                <div class="grids-forms">
                    <span class="fa fa-envelope" aria-hidden="true"></span>
                    <div class="main-midd">
                        <h4 class="title-head">Get the latest Updates</h4>
                        <p>Receive the newsletter with the most popular content, platform updates and software guides
                        </p>
                    </div>
                    <div class="main-midd-2">
                        <form action="#" method="post" class="rightside-form">
                            <input type="email" name="email" placeholder="Enter your email">
                            <button type="submit" class="btn">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script type="text/javascript" src="{{ asset('jquery.js') }}"></script>
    <script type="text/javascript" src="{{ asset('plugins/sweetalert2/seetalert2.min.js') }}"></script>

    <script type="text/javascript">
        $("#contact-request").on("click", function (e) {
            e.preventDefault();

            const $btn = $("#contact-request");
            var name = $("#name").val();
            var email = $("#email").val();
            var subject = "30 Minutes Consultation Request";
            var reason = $("#reason").val();
            var _csrf_token = $("#_csrf_token").val();


            $btn.prop('disabled', true).text('Sending...');

            if (
                validateInput(name, 'Name') &&
                validateInput(email, 'Email')
            )
            {
                $.ajax({
                    url: "{{ path('api_support_action') }}",
                    method: "POST",
                    data: {
                        name: name,
                        email: email,
                        subject: subject,
                        message: "30 Minutes Consultation Request",
                        reason: reason,
                        _csrf_token: _csrf_token
                    },
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Message Sent!',
                            text: 'We will get back to you within 2 business hours.',
                            confirmButtonColor: '#3085d6'
                        });

                        setTimeout(function() {
                            window.location.reload();
                        }, 2000);
                    },
                    error: function (xhr) {
                        let errorMsg = 'Something went wrong. Please try again.';
                        if (xhr.responseJSON && xhr.responseJSON.status) {
                            errorMsg = xhr.responseJSON.status;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: errorMsg
                        });
                    },
                    complete: function() {
                        $btn.prop('disabled', false).text('Send');
                    }
                });
            }

        });
    </script>

{% endblock %}