@extends('layouts.app')
@section('content')
    <x-header
        title="Contact Us"
        subtitle="Get in touch with us today and let us help you with any questions or inquiries you may have."
        {{-- image="images/contact-header.jpg" --}}
     />
     <div class="flex flex-col space-y-4 md:space-y-0 md:flex-row md:space-x-4 p-6 justify-center text-sm md:text-base">

          <div class="flex rounded-md py-4 px-6 space-x-2 bg-quaternary items-center">
            <div class="h-6 w-6 rounded-md md:w-6 md:h-6 bg-no-repeat bg-contain" style="background-image: url(asset/img/footer/mail.svg);"></div>
            <span class="text-zinc-200">
              hello@squareup.com
            </span>
          </div>
          <div class="flex rounded-md py-4 px-6 space-x-2 bg-quaternary items-center">
            <div class="h-6 w-6 rounded-md md:w-6 md:h-6 bg-no-repeat bg-contain"
            style="background-image: url(asset/img/footer/phone.svg);"></div>
            <span class="text-zinc-200">
              +91 91813 23 2309
            </span>
          </div>
          <div class="flex rounded-md py-4 px-6 space-x-2 bg-quaternary items-center">
            <div class="h-6 w-6 rounded-md md:w-6 md:h-6 bg-no-repeat bg-contain"
            style="background-image: url(asset/img/footer/pin.svg);"></div>
            <span class="text-zinc-200">
              Get Location
            </span>
          </div>
        </div>
        <section class="bg-[#121212] text-[#E6E6E6] py-20 px-6">
      <div class="text-center mb-12">
        <img src="/asset/img/global/Logo.svg" alt="SquareUp Logo" class="mx-auto w-12 h-12 mb-4" />
        <h2 class="text-4xl font-bold font-barlow mb-2">Thank you for your Interest in SquareUp</h2>
        <p class="text-sm font-light font-barlow max-w-2xl mx-auto mb-8">
          We would love to hear from you and discuss how we can help bring your digital ideas to life. Here are the different ways you can get in touch with us.
        </p>
        <button class="bg-[#9EFF10] w-full md:w-auto text-black font-semibold rounded px-6 py-3 hover:bg-[#85cc0d] transition">
          Start Project
        </button>
      </div>

       <form class="space-y-8 max-w-4xl w-full mx-auto" method="POST">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <x-input id="fullName" name="fullName" label="Full Name" placeholder="Type right here" required />
                <x-input id="email" name="email" label="Email" type="email" placeholder="Type right here" required />
            </div>

            <x-checkout-group title="Why You Contact Us?" name="reason" :options="['Web Design','Collaboration','Mobile App Design','Others']" />

            <x-budget-range />

            <x-text-area id="message" name="message" label="Your message" placeholder="Type right here" />

            <div class="text-center">
                <x-button text="Submit" />
            </div>
        </form>
    </section>
    <x-section-with-cards
        title="Frequently Asked Questions"
        description="Find answers to the most commonly asked questions about our services, processes, and how we can help your business succeed."
        :component="'card-f-a-q'"
        columns="1"
        :cards="
            [
                [
                    'id' => 1,
                    'title' => 'What services does Squareup offer?',
                    'description' => 'We offer a comprehensive suite of services including digital strategy, UX/UI design, web and mobile development, digital marketing, and more. Our team works closely with clients to tailor solutions that meet their specific needs and goals.',
                ],
                [
                    'id' => 2,
                    'title' => 'How does Squareup ensure the quality of its work?',
                    'description' => 'Quality is at the core of everything we do. We follow industry best practices, conduct thorough testing, and maintain open communication with our clients throughout the project lifecycle to ensure that the final deliverables meet or exceed expectations.',
                ],
                [
                    'id' => 3,
                    'title' => 'Can Squareup work with startups and small businesses?',
                    'description' => 'Absolutely! We have experience working with startups and small businesses across various industries. We understand the unique challenges they face and are committed to providing affordable, scalable solutions that drive growth and success.',
                ],
                [
                    'id' => 4,
                    'title' => 'What is the typical project timeline?',
                    'description' => 'Project timelines vary depending on the scope and complexity of the work. During the initial consultation, we will discuss your requirements and provide a detailed timeline outlining key milestones and deliverables.',
                ],
            ]"
    />  
    <x-start-cta />
@endsection
@section('title', 'contact Us - SquareUp')