{% extends "base.html" %}

{% block title %}Insurance Services - Phogo Insurance{% endblock %}

{% block content %}
<!-- Page Header -->
<section class="page-header bg-primary text-white py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-5 fw-bold mb-3">Our Insurance Services</h1>
                <p class="lead">Comprehensive coverage solutions tailored to your needs</p>
            </div>
        </div>
    </div>
</section>

<!-- Services Overview -->
<section class="py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="fw-bold mb-3">Protecting What Matters Most</h2>
                <p class="lead text-muted">We offer a comprehensive range of insurance products designed to provide you with peace of mind and financial security.</p>
            </div>
        </div>
    </div>
</section>

<!-- Auto Insurance -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="service-content">
                    <div class="service-icon mb-4">
                        <i class="fas fa-car fa-4x text-primary"></i>
                    </div>
                    <h3 class="fw-bold mb-4">Auto Insurance</h3>
                    <p class="lead mb-4">Comprehensive vehicle protection with competitive rates and excellent customer service.</p>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Third Party Coverage</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Comprehensive Coverage</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Personal Accident Cover</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Theft Protection</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Fire & Natural Disasters</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>24/7 Roadside Assistance</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="service-visual">
                    <img src="{{ url_for('static', filename='img/car-insurance.png') }}" alt="Auto Insurance" class="img-fluid rounded shadow" style="max-height: 350px; object-fit: cover;">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Health Insurance -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 order-lg-2">
                <div class="service-content">
                    <div class="service-icon mb-4">
                        <i class="fas fa-heartbeat fa-4x text-primary"></i>
                    </div>
                    <h3 class="fw-bold mb-4">Health Insurance</h3>
                    <p class="lead mb-4">Quality healthcare coverage for you and your family with access to top medical facilities.</p>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Inpatient Treatment</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Outpatient Services</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Maternity Coverage</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Emergency Services</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Dental & Optical</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Prescription Coverage</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 order-lg-1 text-center">
                <div class="service-visual">
                    <img src="{{ url_for('static', filename='img/health-insurance.png') }}" alt="Health Insurance" class="img-fluid rounded shadow" style="max-height: 350px; object-fit: cover;">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Life Insurance -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="service-content">
                    <div class="service-icon mb-4">
                        <i class="fas fa-heart fa-4x text-primary"></i>
                    </div>
                    <h3 class="fw-bold mb-4">Life Insurance</h3>
                    <p class="lead mb-4">Secure your family's future with comprehensive life insurance coverage and investment options.</p>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Term Life Insurance</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Whole Life Insurance</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Group Life Cover</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Investment Plans</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Education Plans</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Retirement Solutions</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="service-visual">
                    <img src="{{ url_for('static', filename='img/life-insurance.png') }}" alt="Life Insurance" class="img-fluid rounded shadow" style="max-height: 350px; object-fit: cover;">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Property Insurance -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 order-lg-2">
                <div class="service-content">
                    <div class="service-icon mb-4">
                        <i class="fas fa-home fa-4x text-primary"></i>
                    </div>
                    <h3 class="fw-bold mb-4">Property Insurance</h3>
                    <p class="lead mb-4">Protect your home and valuable possessions against fire, theft, and natural disasters.</p>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Home Insurance</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Contents Insurance</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Fire & Perils Cover</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Burglary Protection</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Natural Disasters</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>All Risk Coverage</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 order-lg-1 text-center">
                <div class="service-visual">
                    <img src="{{ url_for('static', filename='img/property-insurance.png') }}" alt="Property Insurance" class="img-fluid rounded shadow" style="max-height: 350px; object-fit: cover;">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Business Insurance -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="service-content">
                    <div class="service-icon mb-4">
                        <i class="fas fa-briefcase fa-4x text-primary"></i>
                    </div>
                    <h3 class="fw-bold mb-4">Business Insurance</h3>
                    <p class="lead mb-4">Comprehensive business protection and liability coverage for companies of all sizes.</p>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>General Liability</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Professional Indemnity</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Commercial Property</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-unstyled">
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Workers' Compensation</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Business Interruption</li>
                                <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Cyber Liability</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="service-visual">
                    <img src="{{ url_for('static', filename='img/business-insurance.png') }}" alt="Business Insurance" class="img-fluid rounded shadow" style="max-height: 350px; object-fit: cover;">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Additional Services -->
<section class="py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="fw-bold mb-3">Additional Services</h2>
                <p class="lead text-muted">We also offer specialized insurance solutions for unique needs</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="additional-service-card h-100 p-4 text-center border rounded">
                    <i class="fas fa-plane fa-3x text-primary mb-3"></i>
                    <h6 class="fw-bold mb-2">Travel Insurance</h6>
                    <p class="text-muted small">Comprehensive coverage for domestic and international travel.</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="additional-service-card h-100 p-4 text-center border rounded">
                    <i class="fas fa-gem fa-3x text-primary mb-3"></i>
                    <h6 class="fw-bold mb-2">Personal Valuables</h6>
                    <p class="text-muted small">Specialized coverage for jewelry, art, and collectibles.</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="additional-service-card h-100 p-4 text-center border rounded">
                    <i class="fas fa-graduation-cap fa-3x text-primary mb-3"></i>
                    <h6 class="fw-bold mb-2">Education Insurance</h6>
                    <p class="text-muted small">Secure your children's educational future with our education plans.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-5 bg-primary text-white">
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-8 mx-auto">
                <h2 class="fw-bold mb-3">Need a Custom Quote?</h2>
                <p class="lead mb-4">Our insurance experts are ready to help you find the perfect coverage solution for your unique needs.</p>
                <a href="{{ url_for('contact') }}" class="btn btn-light btn-lg text-primary px-4">Get Your Free Quote</a>
            </div>
        </div>
    </div>
</section>
{% endblock %}