@extends('website.layout.app')

@section('content')
    <div class="flex justify-center h-[800px] w-full relative">
        <img src="{{ asset('storage/' . $about->header_image) }}" alt="header-bg"
            class="w-full md:w-[95%] object-cover brightness-[0.6]">
        <div class="absolute top-1/3 md:top-[25%] top-[15%]">
            <div class="flex flex-col justify-center items-start w-full text-white">
                <div class="w-[85vw]">{!! $about->description !!}</div>
                {{-- <span class="text-5xl font-bold">We are building the
                    <span class="text-yellow-500">
                        Operating System
                    </span>
                    for Commerce</span>
                <p class="text-2xl mt-5">Trusted partner for small businesses, large marketplaces and every type of business
                </p> --}}
            </div>
        </div>
    </div>
    {{-- Card 1 --}}
    @php
        $leftSide = false;
    @endphp
    @foreach ($about->sections as $section)
        @if ($leftSide)
            <div class="grid grid-cols-1 md:grid-cols-2 w-[90%] gap-5 mb-10">
                <div class="flex flex-col py-16">
                    <div class="w-max">
                        <span class="text-2xl text-white">{{ $section->title }}</span>
                        <div class="flex gap-1 mt-1 w-full">
                            <div class="parallelogram w-full"></div>
                            <div class="parallelogram w-[5px]"></div>
                            <div class="parallelogram w-[5px]"></div>
                        </div>
                    </div>
                    <div class="text-white text-lg w-[90%] mt-5">
                        {!! $section->description !!}
                    </div>
                </div>
                <div class="flex items-center relative">
                    <div class="about-card-bg h-full w-full md:block hidden md:absolute md:top-0"></div>
                    <img src="{{ asset('storage/' . $section->image) }}" alt="card"
                        class="w-[50%] rounded-xl md:absolute md:top-1/2 md:transform md:-translate-y-1/2">
                </div>
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 w-[90%] gap-5 mt-10 md:mb-10 mb-3">
                <div class="flex items-center relative">
                    <div class="about-card-bg-reverse h-full w-full hidden md:block md:absolute md:top-0"></div>
                    <img src="{{ asset('storage/' . $section->image) }}" alt="card"
                        class="w-[50%] rounded-xl md:absolute md:top-1/2 md:transform md:-translate-y-1/2 md:right-10">
                </div>
                <div class="flex flex-col md:py-16 py-2">
                    <div class="w-max text-center">
                        <h1 class="text-2xl text-white">{{ $section->title }}</h1>
                        <div class="flex gap-1 mt-1 w-full">
                            <div class="parallelogram w-full"></div>
                            <div class="parallelogram w-[5px]"></div>
                            <div class="parallelogram w-[5px]"></div>
                        </div>
                    </div>
                    <div class="text-white text-lg w-[90%] mt-5">
                        {!! $section->description !!}
                    </div>
                </div>
            </div>
        @endif
        @php
            $leftSide = !$leftSide;
        @endphp
    @endforeach
    {{-- Stats --}}
    @include('website.components.stats')
@endsection