@extends('user.layout')
@section('title', 'Page Title')
@push('styles')
<style>
    @media (max-width: 767.98px) {
        .about-mobile-hero {
            min-height: max(100vh, 32rem);
            min-height: max(100svh, 32rem);
        }

        .about-mobile-hero-image {
            position: absolute;
            inset: 0;
            height: 100% !important;
            max-height: none !important;
            object-fit: cover;
            object-position: center;
        }

        .about-mobile-hero-overlay {
            justify-content: flex-end !important;
            padding: 7rem 1.25rem 5rem;
        }

        .about-mobile-hero-copy {
            padding: 0;
        }

        .about-mobile-hero-copy .card-text {
            font-size: 0.875rem;
        }

        .about-mobile-hero-copy h1 {
            font-size: clamp(1.65rem, 7.4vw, 2.1rem);
            line-height: 1.18;
            margin-bottom: 0.75rem !important;
        }

        .about-mobile-hero-copy h5 {
            font-size: clamp(0.95rem, 4.4vw, 1.15rem);
            line-height: 1.4;
            margin-bottom: 0;
        }
    }
</style>
@endpush
@section('content')
<div class="container-fluid p-0">
    <div class="card border-0 rounded-0 overflow-hidden about-mobile-hero">
        <img class="card-img img-fluid rounded-0 w-100 about-mobile-hero-image" src="{{ optimizedImageUrl('banner', $banner->image, 1600) }}" srcset="{{ optimizedImageSrcset('banner', $banner->image, 1600) }}" sizes="100vw" fetchpriority="high" decoding="async" alt="{{ $banner->title }}" title="{{ $banner->title }}" style="max-height: 100vh;" />

        <div class="card-img-overlay text-white d-flex flex-column justify-content-center px-lg-5 about-mobile-hero-overlay" style="background: rgba(0, 0, 0, 0.5);">
            <div class="container-fluid container-lg about-mobile-hero-copy">
                <p class="card-text mb-0">#{{ str_replace(' ', '', config('app.name')) }}</p>
                <h1 class="card-title mb-3">{{ $banner->title }}</h1>
                <h5 class="card-title">{{ $banner->sub_title }}</h5>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid container-md my-5 scroll-reveal">
    <div class="row">
        <div class="col-sm-12 col-lg-4 mb-5 mb-md-0 py-2 py-md-5 d-flex justify-content-center">
            <span class="rounded d-inline-block text-center founder-image-container" style="max-height: 350px;">
                <img id="founder-image" class="img-fluid rounded img-thumbnail d-block m-auto w-auto bg-light" src="{{ asset('storage/about/' . @$record->founder_image) }}" alt="{{ @$record->founder_name }}" title="{{ @$record->founder_name }}" style="max-height: 350px;">
            </span>
        </div>

        <div class="col-sm-12 col-lg-8">
            <p class="mb-1 secondary fw-semibild">{{ @$record->founder_name }}</p>
            <h4 class="mb-4">{{ @$record->founder_designation }}</h4>
            <div style="text-align: justify;">{!! @$record->founder_message !!}</div>
        </div>
    </div>
</div>

<div class="container-fluid container-md my-5 scroll-reveal" id="blog-author" style="scroll-margin-top: 100px;">
    <div class="row">
         <div class="col-sm-12 col-lg-8 order-1 order-lg-0">
            <p class="mb-1 secondary fw-semibild">{{ @$record->co_founder_name }}</p>
            <h4 class="mb-4">{{ @$record->co_founder_designation }}</h4>
            <div style="text-align: justify;">{!! @$record->co_founder_message !!}</div>
        </div>
        
        <div class="col-sm-12 col-lg-4 mb-5 mb-md-0 py-2 py-md-5 d-flex justify-content-center order-0 order-lg-1">
            <span class="rounded d-inline-block text-center co-founder-image-container" style="max-height: 350px;">
                <img id="co-founder-image" class="img-fluid rounded img-thumbnail d-block m-auto w-auto bg-light" src="{{ asset('storage/about/' . @$record->co_founder_image) }}" alt="{{ @$record->co_founder_name }}" title="{{ @$record->co_founder_name }}" style="max-height: 350px;">
            </span>
        </div>
    </div>
</div>

<div class="container-fluid mt-5 py-5 scroll-reveal bg-light">
    <div class="container-md" style="text-align: justify;">{!! @$record->about_description !!}</div>
</div>

<div id="stats-counter-section" class="container-fluid container-md pt-5 pb-3 scroll-reveal">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
        @foreach($counter->counter_title ?? [] as $ct_key => $title)
            <div class="col">
                <div class="card border-0 counter">
                    <div class="card-body text-center">
                        <h2 class="card-title primary counter-number" data-count="{{ $counter->counter[$ct_key] }}">0+</h2>
                        <h5 class="card-title secondary">{{ $title }}</h5>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

<div class="container-fluid container-md about mb-5">
    <div class="row row-cols-1 row-cols-lg-2 g-4 g-md-5 mt-4 mt-mb-0 scroll-reveal">
        <div class="col">
            <div class="card border-0 overflow-hidden">
                <img class="card-img img-fluid rounded img-thumbnail w-auto" src="{{ optimizedImageUrl('about', @$record->about_highlight_1_image, 960) }}" srcset="{{ optimizedImageSrcset('about', @$record->about_highlight_1_image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="First About Highlight Content Image" title="First About Highlight Content Image" style="max-height: 300px;">
            </div>
        </div>

        <div class="col px-4 px-md-5 px-lg-0" style="text-align: justify;">
            <p class="my-0">{!! @$record->about_highlight_1_content !!}</p>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-lg-2 g-4 g-md-5 py-4 scroll-reveal">
        <div class="col px-4 px-md-5 px-lg-0 order-1 order-lg-0" style="text-align: justify;">
            <p class="my-0">{!! @$record->about_highlight_2_content !!}</p>
        </div>
        <div class="col order-0 order-lg-1">
            <div class="card border-0 overflow-hidden">
                <img class="card-img img-fluid rounded img-thumbnail w-auto" src="{{ optimizedImageUrl('about', @$record->about_highlight_2_image, 960) }}" srcset="{{ optimizedImageSrcset('about', @$record->about_highlight_2_image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="Second About Highlight Content Image" title="Second About Highlight Content Image" style="max-height: 300px;">
            </div>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-lg-2 g-4 g-md-5 py-4 scroll-reveal">
        <div class="col">
            <div class="card border-0 overflow-hidden">
                <img class="card-img img-fluid rounded img-thumbnail w-auto" src="{{ optimizedImageUrl('about', @$record->about_highlight_3_image, 960) }}" srcset="{{ optimizedImageSrcset('about', @$record->about_highlight_3_image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="Third About Highlight Content Image" title="Third About Highlight Content Image" style="max-height: 300px;">
            </div>
        </div>

        <div class="col px-4 px-md-5 px-lg-0" style="text-align: justify;">
            <p class="my-0">{!! @$record->about_highlight_3_content !!}</p>
        </div>
    </div>
</div>

<div class="container-fluid py-5 scroll-reveal bg-light">
    <div class="container">
        <p class="mb-0 fw-semibold secondary">#{{ str_replace(' ', '', config('app.name')) }}</p>
        <h2>Our Mission</h2>
        <h6 class="mb-5" style="font-size: small;">To revolutionize design customs through innovative solutions and approaches and build them into reality.</h6>

        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            <div class="col">
                <div class="card border-0 h-100 overflow-hidden">
                    <div class="overflow-hidden">
                        <img class="card-img-top img-fluid w-100 h-auto" src="{{ optimizedImageUrl('about', @$record->vision_image, 960) }}" srcset="{{ optimizedImageSrcset('about', @$record->vision_image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="Vision Image" title="Vision Image">
                    </div>

                    <div class="card-body">
                        <h4 class="secondary">Our Vision</h4>
                        <p class="card-text" style="text-align: justify;">{!! @$record->vision_description !!}</p>
                        @if(@$record->vision_quote)<h5 class="card-title">{{ @$record->vision_quote }}</h5>@endif
                        @if(@$record->vision_quote_author)<h6 class="text-muted text-end">-{{ @$record->vision_quote_author }}</h6>@endif
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card border-0 h-100 overflow-hidden">
                    <div class="overflow-hidden">
                        <img class="card-img-top img-fluid w-100 h-auto" src="{{ optimizedImageUrl('about', @$record->value_image, 960) }}" srcset="{{ optimizedImageSrcset('about', @$record->value_image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="Value Image" title="Value Image">
                    </div>

                    <div class="card-body">
                        <h4 class="secondary">Our Value</h4>
                        <p class="card-text" style="text-align: justify;">{!! @$record->value_description !!}</p>
                        @if(@$record->value_quote)<h5 class="card-title">{{ @$record->value_quote }}</h5>@endif
                        @if(@$record->value_quote_author)<h6 class="text-muted text-end">-{{ @$record->value_quote_author }}</h6>@endif
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card border-0 h-100 overflow-hidden">
                    <div class="overflow-hidden">
                        <img class="card-img-top img-fluid w-100 h-auto" src="{{ optimizedImageUrl('about', @$record->mission_image, 960) }}" srcset="{{ optimizedImageSrcset('about', @$record->mission_image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="Mission Image" title="Mission Image">
                    </div>

                    <div class="card-body">
                        <h4 class="secondary">Our Mission</h4>
                        <p class="card-text" style="text-align: justify;">{!! @$record->mission_description !!}</p>
                        @if(@$record->mission_quote)<h5 class="card-title">{{ @$record->mission_quote }}</h5>@endif
                        @if(@$record->mission_quote_author)<h6 class="text-muted text-end">-{{ @$record->mission_quote_author }}</h6>@endif
                    </div>
                </div>
            </div>
        </div>

        <button class="btn btn-custom mt-5" role="button" style="width: 150px;" data-bs-toggle="modal" data-bs-target="#enquiryModal"><span>GET IN TOUCH</span></button>
    </div>
</div>

<form method="POST" action="{{ route('contact-store') }}" enctype="multipart/form-data" class="custom-form">
    @csrf

    <div class="modal fade" id="enquiryModal" tabindex="-1" aria-labelledby="enquiryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title secondary" id="enquiryModalLabel">Send Enquiry</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    @if ($errors->any())
                        <div class="alert alert-danger" role="alert">{{ $errors->first() }}</div>
                    @endif
                    <div class="custom-form">
                        <div class="row g-3 mb-3">
                            <div class="col-md-6 position-relative">
                                <input type="text" class="form-control" name="name" id="fullName" value="{{ old('name') }}" placeholder=" " required>
                                <label for="fullName" class="form-label">Full Name</label>
                            </div>

                            <div class="col-md-6 position-relative">
                                <input type="text" class="form-control" name="company_name" id="companyName" value="{{ old('company_name') }}" placeholder=" " required>
                                <label for="companyName" class="form-label">Company Name</label>
                            </div>

                            <div class="col-md-6 position-relative">
                                <input type="text" class="form-control" name="phone" id="contactNumber" value="{{ old('phone') }}" placeholder=" " required>
                                <label for="contactNumber" class="form-label">Contact Number</label>
                            </div>

                            <div class="col-md-6 position-relative">
                                <input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}" placeholder=" " required>
                                <label for="email" class="form-label">Email</label>
                            </div>

                            <!--<div class="col-md-4 position-relative">-->
                            <!--    <select class="form-select" name="location" id="locationSelect" required>-->
                            <!--        <option value="" disabled selected hidden></option>-->
                            <!--        <option value="Dubai">Dubai</option>-->
                            <!--        <option value="Abu Dhabi">Abu Dhabi</option>-->
                            <!--        <option value="Sharjah">Sharjah</option>-->
                            <!--    </select>-->
                            <!--    <label for="locationSelect" class="form-label">Choose Location</label>-->
                            <!--</div>-->

                            <div class="col-12 position-relative">
                                <textarea class="form-control" name="message" id="message" rows="4" placeholder=" " required>{{ old('message') }}</textarea>
                                <label for="message" class="form-label">Type your message here</label>
                            </div>

                            <div class="col-12 position-relative">
                                <input type="file" class="form-control" name="attachment" id="fileUpload" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                                <small class="form-text text-muted">PDF, JPG, PNG, DOC, or DOCX; maximum 5 MB. If an error occurs, choose the file again.</small>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-custom px-4" style="width: 180px;"><span>SEND ENQUIRY</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const img = document.getElementById("founder-image");
            const observer = new IntersectionObserver(([entry]) => {
                if (entry.isIntersecting) {
                    img.classList.add("rotate-in");
                } else {
                    img.classList.remove("rotate-in");
                }
            }, { threshold: 0.5 });
            observer.observe(img);
        });
    </script>
    
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const img2 = document.getElementById("co-founder-image");
            const observer2 = new IntersectionObserver(([entry]) => {
                if (entry.isIntersecting) {
                    img2.classList.add("rotate-in");
                } else {
                    img2.classList.remove("rotate-in");
                }
            }, { threshold: 0.5});
            observer2.observe(img2);
        });
    </script>
    <script>
        $(document).ready(function () {
            const statsSection = document.getElementById('stats-counter-section');
            let isAnimating = false;
    
            if (!statsSection) {
                return;
            }
    
            function runCounters() {
                $('.counter-number').each(function () {
                    const $counter = $(this);
                    const target = parseInt($counter.attr('data-count'), 10);
    
                    if (isNaN(target)) {
                        return;
                    }
    
                    $counter.stop(true, true);
                    $counter.text('0+');
    
                    $({ countNum: 0 }).animate(
                        { countNum: target },
                        {
                            duration: 1500,
                            easing: 'swing',
                            step: function () {
                                $counter.text(Math.floor(this.countNum) + '+');
                            },
                            complete: function () {
                                $counter.text(target + '+');
                            }
                        }
                    );
                });
            }
    
            const observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting && !isAnimating) {
                        isAnimating = true;
                        runCounters();
    
                        setTimeout(function () {
                            isAnimating = false;
                        }, 1600);
                    }
                });
            }, {
                threshold: 0.45
            });
    
            observer.observe(statsSection);
        });
    </script>
    
    <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Organization",
          "name": "{{ config('app.name') }}",
          "url": "{{ route('about') }}",
          "logo": "{{ asset('images/Triangle-BD-Header-Logo.png') }}",
          "description": "{{ strip_tags(Str::limit($record->about_description, 160)) }}",
          "founder": {
            "@type": "Person",
            "name": "{{ $record->founder_name }}",
            "jobTitle": "{{ $record->founder_designation }}"
          },
          "employee": {
            "@type": "Person",
            "name": "{{ $record->co_founder_name }}",
            "jobTitle": "{{ $record->co_founder_designation }}"
          },
          "address": {
            "@type": "PostalAddress",
            "streetAddress": "House- 02, Road-12/A, Sector-10, Uttara, Dhaka - 1230, Bangladesh",
            "addressLocality": "Dhaka",
            "addressRegion": "Dhaka Division",
            "postalCode": "1230",
            "addressCountry": "Bangladesh"
          },
          "contactPoint": {
            "@type": "ContactPoint",
            "telephone": "+8801325074113",
            "email": "info@telmep.com",
            "contactType": "customer support"
          },
          "foundingDate": "2013",
          "sameAs": [
            "https://www.facebook.com/telmep",
            "https://www.linkedin.com/company/telmep"
          ]
        }
    </script>
@endpush