@extends('layouts.app')

@section('title', 'About Us | IBS')
@section('description', 'Learn more about International Building Services LLC, our mission, core values, and dedicated team. We are committed to honesty, quality, and efficiency in every project.')

@section('content')

<x-subpage-hero 
    title="About Us" 
    description="Learn more about International Building Services LLC, our mission, core values, and dedicated team. We are committed to honesty, quality, and efficiency in every project."
/>

<x-breadcrumbs :items="$breadcrumbs" />

{{-- About Narrative Section --}}
<x-about-narrative-section />

{{-- Why Choose IBS Section --}}
<x-why-choose-ibs />

{{-- Expertise Section --}}
<section class="bg-gray-100 py-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-serif text-gray-900 mb-12 text-center" data-aos="fade-up">What We Do</h2>
        
        {{-- Plumbing Solutions --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-16">
            <div class="order-1" data-aos="fade-right">
                <img src="{{ asset('storage/images/whatwedo1.jpg') }}" alt="Plumbing Solutions" class="rounded-xl shadow-lg w-full h-auto object-cover" loading="lazy">
            </div>
            <div class="order-2" data-aos="fade-left">
                <h3 class="text-3xl font-bold font-serif text-gray-800 mb-4">Plumbing Solutions</h3>
                <p class="text-lg text-gray-700 leading-relaxed">
                    From intricate diagnostics to large-scale installations, our certified plumbers deliver reliable and efficient solutions for residential and commercial properties. We handle everything from routine maintenance to emergency repairs and complete system overhauls.
                </p>
            </div>
        </div>

        {{-- General Contracting --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-16">
            <div class="order-2 md:order-1" data-aos="fade-left">
                <h3 class="text-3xl font-bold font-serif text-gray-800 mb-4">General Contracting</h3>
                <p class="text-lg text-gray-700 leading-relaxed">
                    As experienced general contractors, we manage every phase of your construction or renovation project. Our expertise ensures seamless coordination, adherence to timelines, and exceptional build quality, from groundbreaking to final touches.
                </p>
            </div>
            <div class="order-1 md:order-2" data-aos="fade-right">
                <img src="{{ asset('storage/images/whatwedo2.jpg') }}" alt="General Contracting" class="rounded-xl shadow-lg w-full h-auto object-cover" loading="lazy">
            </div>
        </div>

        {{-- Interior Design & Build --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div class="order-1" data-aos="fade-right">
                <img src="{{ asset('storage/images/whatwedo3.jpg') }}" alt="Interior Design & Build" class="rounded-xl shadow-lg w-full h-auto object-cover" loading="lazy">
            </div>
            <div class="order-2" data-aos="fade-left">
                <h3 class="text-3xl font-bold font-serif text-gray-800 mb-4">Interior Design & Build</h3>
                <p class="text-lg text-gray-700 leading-relaxed">
                    Transforming spaces with innovative and functional designs is our passion. We integrate aesthetic vision with practical execution, creating environments that are not only beautiful but also perfectly suited to your needs and lifestyle.
                </p>
            </div>
        </div>
    </div>
</section>

{{-- Core Values --}}
<section class="bg-white py-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-serif text-gray-900 mb-10 text-center" data-aos="fade-up">Our Core Values</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-gray-50 shadow-lg rounded-xl p-8 text-center transform hover:scale-105 transition-transform duration-300" data-aos="fade-up" data-aos-delay="100">
                <div class="text-yellow-600 text-5xl mb-4">
                    <i class="fas fa-handshake"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-3">Honesty</h3>
                <p class="text-gray-700 leading-relaxed">We believe in transparency and open communication. Our clients are our partners, and we treat them with respect and integrity.</p>
            </div>
            <div class="bg-gray-50 shadow-lg rounded-xl p-8 text-center transform hover:scale-105 transition-transform duration-300" data-aos="fade-up" data-aos-delay="200">
                <div class="text-yellow-600 text-5xl mb-4">
                    <i class="fas fa-award"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-3">Quality</h3>
                <p class="text-gray-700 leading-relaxed">We are committed to the highest standards of craftsmanship. We use only the best materials and the most skilled professionals to ensure a superior result.</p>
            </div>
            <div class="bg-gray-50 shadow-lg rounded-xl p-8 text-center transform hover:scale-105 transition-transform duration-300" data-aos="fade-up" data-aos-delay="300">
                <div class="text-yellow-600 text-5xl mb-4">
                    <i class="fas fa-tachometer-alt"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-3">Efficiency</h3>
                <p class="text-gray-700 leading-relaxed">We understand that time is a valuable resource. We work diligently to complete every project on time and within budget, without compromising on quality.</p>
            </div>
        </div>
    </div>
</section>

{{-- Team Member Grid --}}
<section class="bg-gray-50 py-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-serif text-gray-900 mb-10 text-center" data-aos="fade-up">Meet Our Team</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
            @foreach ([
                ['name' => 'Gabriel Betancourt', 'role' => 'Founder & CEO', 'image' => 'gabriel-betancourt-headshot.jpg'],
                ['name' => 'Priscila Betancourt', 'role' => 'Co-Founder & Operations', 'image' => 'priscila-betancourt-headshot.jpg'],
                ['name' => 'Kevin Lara', 'role' => 'Administrator Coordinator', 'image' => 'john-lara-headshot.jpg'],
            ] as $i => $member)
                <div class="rounded-xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="{{ 100 * $i }}">
                    <div class="h-80 w-full overflow-hidden">
                        <img src="{{ asset('storage/images/' . $member['image']) }}" alt="{{ $member['name'] }}" class="w-full h-full object-cover object-center" loading="lazy">
                    </div>
                    <div class="bg-white p-6 text-center">
                        <h3 class="text-xl font-bold text-gray-800 mb-1">{{ $member['name'] }}</h3>
                        <p class="text-gray-600">{{ $member['role'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- Combined Image Section --}}
<section class="py-10 bg-gray-50">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <img src="{{ asset('storage/images/ibs-team.jpg') }}" alt="Combined Section Image" class="w-full h-auto rounded-xl shadow-lg object-cover" data-aos="fade-up">
    </div>
</section>



{{-- FAQ Section --}}
<section class="bg-gray-50 py-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-extrabold text-center text-gray-900 mb-10">Frequently Asked Questions</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
            <x-faq-item question="Are you able to pull MEP permits?" answer="Yes, we are fully capable of pulling MEP (Mechanical, Electrical, Plumbing) permits for your projects." />
            <x-faq-item question="Are you an insured company?" answer="Yes, International Building Services LLC is a fully insured company, providing peace of mind for all our clients and projects." />
            <x-faq-item question="Do you offer any type of warranty on your work?" answer="Yes, we stand by the quality of our work. Any warranty information specific to your project will be clearly specified in your invoice." />
        </div>
    </div>
</section>

{{-- Call to Action --}}
<section class="bg-gray-800 text-white py-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center" data-aos="fade-up">
        <h2 class="text-4xl font-extrabold mb-4">Let’s Build Something Great Together</h2>
        <p class="mb-8 text-xl">Ready to transform your space? Reach out to our team for a consultation today.</p>
        <a href="{{ route('contact') }}" class="inline-block bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-4 px-10 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-xl">
            Contact Us
        </a>
    </div>
</section>

@endsection