@extends('layouts.web.main')

@section('contents')
	<!-- Start of breadcrumb section ============================================= -->
	<section class="in-breadcrumb-contentc mt-1 px-4 py-5 my-10 text-center" style="border-radius: 100px; background-color: #f8f9fa;">
		<div class="in-breadcrumb-content position-relative"  data-background="/assets/images/services/error-bg.jpg"></div> 
	</section>

	<section class="in-breadcrumb-contentc mt-1 px-4 py-5 my-10 text-center" style="border-radius: 100px; background-color: #f8f9fa;">
		<div class="in-breadcrumb-content position-relative"  data-background="/assets/images/services/error-bg.jpg"></div> 
	</section>

	<!-- End of breadcrumb section ============================================= -->

	<!-- Start of Service section ============================================= -->
	<section id="in-service" class="in-service-section mt-10">
		<div class="container">
			<div class="in-section-title-2 text-center headline pera-content">
				<h2>{{ $service['title'] }}</h2>
                <p>{{ $service['description'] }}</p>
			</div>
		</div>
	</section>
	<!-- End of Service section ============================================= -->

    <!-- Start of Single Service Hero ============================================= -->
    <section class="in-service-hero-section position-relative" data-background="{{ asset($service['image']) }}">
        <div class="service-hero-overlay position-absolute" style="background: rgba(0,0,0,0.3); top:0; left:0; right:0; bottom:0; z-index:1;"></div>
        <div class="container position-relative z-2" style="min-height: 400px; display: flex; align-items: center;">
            <div class="row align-items-center">
                <div class="col-lg-12 mx-auto" style=" background: rgb(0,0,0,0.5); border-radius: 8px">
                    <div class="row service-hero-content headline pera-content text-white wow fadeInUp" data-wow-delay="0.3s">
                        <div class="service-icon mb-2 mt-2">
                            <i class="{{ $service['icon'] }} text-5xl text-white"></i>
                        </div>
                        {{-- <div class="col "> --}}
                            <h1 class="mb-4 px-2">{{ $service['title'] }}</h1>
                            <div class="in-btn-1 fa-pull-right py-2 px-4" style="padding: 4px 8px; margin: 4px 8px;">
                                <a href="/contact">Get Quote <i class="fal fa-long-arrow-right ml-2"></i></a>
                            </div>
                        {{-- </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Service Details -->
    <section class="in-service-details-section py-5 mt-10">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="service-detail-content headline pera-content wow fadeInUp" data-wow-delay="0.3s">
                        {{-- <img src="{{ asset($service['image']) }}" alt="{{ $service['title'] }}" class="img-fluid rounded mb-4 mx-auto d-block"> --}}
                        
                        <!-- Coverage Highlights -->
                        <div class="features-section mb-5">
                            <div class="in-section-title-2 text-center mb-5">
                                <h3>Coverage Highlights</h3>
                            </div>
                            <div class="row justify-content-center align-items-stretch">
                                @foreach($service['features'] as $index => $feature)
                                    <div class="col-lg-6 mb-4">
                                        <div class="feature-item justify-content-between h-100 p-4 bg-light rounded border-start border-primary border-4 min-h-200px">
                                            <div class="number-badge d-inline-block bg-primary text-white rounded-circle p-3 font-bold mb-3">{{ $index + 1 }}</div>
                                            <p class="pera-content flex-grow-1">{{ $feature }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Detailed Description -->
                        <div class="detailed-description">
                            <div class="in-section-title-2 text-center mb-4">
                                <h3>Our Approach to {{ $service['title'] }}</h3>
                            </div>
                            <div class="pera-content">
                                {!! nl2br(e($service['content'])) !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Quote Form -->
    <section id="in-cta-contact" class="in-cta-contact-section position-relative" data-background="{{ asset('assets/images/services/happy-family.jpg') }}">
        <div class="container">
            <div class="in-cta-contact-content-3 position-relative wow fadeInUp" data-wow-delay="0.3s">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <div class="get-quote-form-area bg-white bg-opacity-90 p-5 rounded">
                            <div class="section-title text-center headline mb-5">
                                <h2>Get Your {{ $service['title'] }} Quote</h2>
                                <p>Complete the form and our broker will contact you within 24 hours with personalized options.</p>
                            </div>
                            <form action="/contact" method="POST" class="row g-4">
                                @csrf
                                <input type="hidden" name="service" value="{{ $service['title'] }}">
                                <div class="col-md-6">
                                    <input type="text" name="name" placeholder="Full Name *" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <input type="email" name="email" placeholder="Email Address *" class="form-control" required>
                                </div>
                                <div class="col-12">
                                    <input type="tel" name="phone" placeholder="Phone *" class="form-control" required>
                                </div>
                                <div class="col-12">
                                    <textarea name="message" placeholder="Additional details about your insurance needs" class="form-control" rows="4">{{ $service['cta_type'] }}</textarea>
                                </div>
                                <div class="col-12 text-center">
                                    <button type="submit" class="btn btn-primary in-btn-1">Request Quote</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Related Services -->
    <section id="in-service-page-service-1" class="in-service-page-service-section-1 py-5 bg-light">
        <div class="container">
            <div class="in-section-title-2 text-center headline pera-content mb-5">
                <h2>Complementary Services</h2>
                <p>Insurance solutions that work together for comprehensive protection</p>
            </div>
            <div class="in-service-content-3">
                <div class="row justify-content-center g-4">
                    <div class="col-lg-4 col-md-6 mb-4">
                        <a href="/services/marine-cargo" class="in-service-item-3 d-flex h-100 position-relative">
                            <div class="inner-icon">
                                <i class="flaticon-ship text-primary"></i>
                            </div>
                            <div class="inner-text headline pera-content">
                                <h4>Marine Cargo</h4>
                                <p>Goods transit protection</p>
                            </div>
                            <div class="inner-btn">
                                <i class="far fa-long-arrow-right"></i>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <a href="/services/credit-insurance" class="in-service-item-3 d-flex h-100 position-relative">
                            <div class="inner-icon">
                                <i class="flaticon-insurance-1 text-primary"></i>
                            </div>
                            <div class="inner-text headline pera-content">
                                <h4>Credit Insurance</h4>
                                <p>Buyer default protection</p>
                            </div>
                            <div class="inner-btn">
                                <i class="far fa-long-arrow-right"></i>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <a href="/services/home-insurance" class="in-service-item-3 d-flex h-100 position-relative">
                            <div class="inner-icon">
                                <i class="flaticon-home-insurance text-primary"></i>
                            </div>
                            <div class="inner-text headline pera-content">
                                <h4>Home Insurance</h4>
                                <p>Property protection</p>
                            </div>
                            <div class="inner-btn">
                                <i class="far fa-long-arrow-right"></i>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <a href="/services/health-insurance" class="in-service-item-3 d-flex h-100 position-relative">
                            <div class="inner-icon">
                                <i class="flaticon-healthcare text-primary"></i>
                            </div>
                            <div class="inner-text headline pera-content">
                                <h4>Health Insurance</h4>
                                <p>Comprehensive health coverage</p>
                            </div>
                            <div class="inner-btn">
                                <i class="far fa-long-arrow-right"></i>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <a href="/services/car-insurance" class="in-service-item-3 d-flex h-100 position-relative">
                            <div class="inner-icon">
                                <i class="flaticon-insurance-2 text-primary"></i>
                            </div>
                            <div class="inner-text headline pera-content">
                                <h4>Car Insurance</h4>
                                <p>Vehicle protection</p>
                            </div>
                            <div class="inner-btn">
                                <i class="far fa-long-arrow-right"></i>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <a href="/services/motor-insurance" class="in-service-item-3 d-flex h-100 position-relative">
                            <div class="inner-icon">
                                <i class="flaticon-car text-primary"></i>
                            </div>
                            <div class="inner-text headline pera-content">
                                <h4>Motor Insurance</h4>
                                <p>Comprehensive vehicle cover</p>
                            </div>
                            <div class="inner-btn">
                                <i class="far fa-long-arrow-right"></i>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
@endsection