@extends('layouts.app')

@section('title', 'Home Page')

@section('content')
    <section class="relative w-full min-h-auto border border-graycoffee border-t-0 bg-repeat space-y-16 md:space-y-12" style="background-image: url('{{ asset('img/global/bg.png') }}');">
        <!-- wrapper -->
        <div class="flex flex-col items-center w-full max-w-full px-6 xl:px-20 relative" style="padding-top: 6rem; padding-bottom: 10rem;">
            <!-- Main text -->
            <div class="w-full h-auto max-w-full sm:max-w-5xl md:max-w-[80vw] lg:max-w-[70vw] px-1 md:px-[3vw] lg:px-[5vw] xl:px-[8vw]">
                <h1 class="text-center text-3xl sm:text-4xl md:text-5xl xl:text-6xl font-medium text-white leading-tight">
                    A Digital Product Studio <br>that will Work
                </h1>
            </div>

            <!-- For yield -->
            <div class="flex w-full max-w-full sm:max-w-4xl md:max-w-[80vw] lg:max-w-[70vw] flex-row flex-wrap gap-1 justify-center bg-darkcoffee text-zinc-100 py-2 md:py-4 rounded-md items-center border-[0.2px] border-graycoffee font-light mt-10">
                <span class="text-zinc-100/60 font-thin">For</span>
                <div class="bg-none md:bg-graycoffee rounded py-2 px-1 md:px-4 text-md whitespace-nowrap">
                    Startups
                </div>
                <span class="text-zinc-100 font-thin">,</span>
                <div class="bg-none md:bg-graycoffee rounded py-2 px-1 md:px-4 text-md whitespace-nowrap">
                    Enterprise Leaders
                </div>
                <span class="text-zinc-100 font-thin">,</span>
                <div class="bg-none md:bg-graycoffee rounded py-2 px-1 md:px-4 text-md whitespace-nowrap">
                    Media & Publishers
                </div>
                <span class="text-zinc-100 font-thin">and</span>
                <div class="bg-none md:bg-graycoffee rounded py-2 px-1 md:px-4 text-md whitespace-nowrap">
                    Social Good
                </div>
            </div>

            <!-- Button our works and contact us -->
            <div class="flex space-x-4 sm:space-x-6 mt-11 mb-12">
                <div class="bg-quaternary py-3 px-4 sm:px-4 md:px-5 text-zinc-100 border border-1 border-graycoffee rounded-md">
                    <a href=""> Our Works </a>
                </div>
                <div class="bg-accent py-3 px-5 sm:px-6 md:px-7 font-medium text-zinc-800 rounded-md">
                    <a href=""> Contact Us </a>
                </div>
            </div>

            <!-- Abstract background -->
            <div
            class="-z-10 absolute -bottom-20 left-0 w-full h-3/5 bg-cover bg-no-repeat bg-center"
            style="background-image: url('{{ asset('img/global/Abstract.svg') }}');"
            ></div>
        </div>

        <!-- Footer hero -->
        <div class="z-10 w-full s bg-darkcoffee border border-graycoffee border-x-1 mx-0 pt-12 pb-8 flex-col space-y-4 mt-32">
            <div class="px-6 py-3 bg-darkcoffee border border-graycoffee text-white absolute -mt-24 place-self-center rounded-3xl text-xs">
                <h1>Trusted By 250+ Companies</h1>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-10 justify-between px-8 mt-8">
                @foreach ($companies as $company)
                    @if ($company->highlight)
                        <div class="py-1 flex items-center justify-center">
                            <img 
                                src="{{ asset('storage/' . $company->logo) }}" 
                                alt="{{ $company->name ?? 'Company Logo' }}" 
                                class="h-7 w-auto max-w-[120px]" 
                            />
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </section>

    <x-header
        title="Our Services"
        description="We offer a comprehensive suite of services to help you achieve your digital goals. From strategy to execution, we've got you covered."
    />
    <div class="grid grid-cols-1 md:grid-cols-3">
        @foreach ($ourServices as $ourService )
            <x-card-os
                :icons="$ourService->icon"
                :title="$ourService->title"
                :links="$ourService->link"
                :description="$ourService->description"
            />
        @endforeach
    </div>
    <x-header
        title="Why Choose Us"
        description="Discover the key reasons why partnering with Squareup will drive your business forward and help you achieve lasting success."
    />
    <div class="grid grid-cols-1 md:grid-cols-2">
    @foreach ($whyChooseUs as $wcs)        
    <x-card-without-button
        :title="$wcs->title"
        :description="$wcs->reason"
        :icons="$wcs->icon"
        :alt="$wcs->icon"
    />
    @endforeach
    </div>
    <x-header
        title="Testimonials"
        description="Hear from our satisfied clients and discover how Squareup has helped them achieve their digital goals and drive business success."
    />
    <div class="grid grid-cols-1 md:grid-cols-2">
    
    @foreach($testimonials as $testimony)
        <x-card-testimonial
            :title="$testimony->title"
            :description="$testimony->description"
            :icon="$testimony->icon"
            :name="$testimony->name"
            :role="$testimony->profession"
            :link="$testimony->link"
        />
    @endforeach
    </div>
    <x-header
        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."
    />
    <div class="grid grid-cols-1 md:grid-cols-2">
    <div class="h-20 border border-graycoffee"></div>
    <div class="h-20 border border-graycoffee"></div>
        @foreach ($faqs as $index => $faq)
        <x-card-f-a-q
            :number="$index + 1"
            :title="$faq->question"
            :description="$faq->answer"
        />
    </div>
    @endforeach

    <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" action="{{ route('project.store') }}">
        @csrf
        @method('POST')
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <x-input id="fullName" name="full_name" 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="why_choose_us" :options="$whyChooseUs" />

            <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>
@endsection