{% extends "base.html" %}

{% block title %}About Us - 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">About Phogo Insurance</h1>
                <p class="lead">Your trusted partner in comprehensive insurance solutions</p>
            </div>
        </div>
    </div>
</section>

<!-- About Content -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center mb-5">
            <div class="col-lg-6">
                <h2 class="fw-bold mb-4">Who We Are</h2>
                <p class="lead mb-4">Phogo Insurance is a leading insurance provider in Kenya, dedicated to offering comprehensive and reliable insurance solutions tailored to meet the diverse needs of our clients.</p>
                <p class="mb-4">With years of experience in the insurance industry, we understand the importance of protecting what matters most to you. Our team of experienced professionals works tirelessly to provide personalized service and expert guidance.</p>
                <p class="mb-4">Located in the heart of Nairobi at Runda Estate, we serve clients across Kenya with a commitment to excellence, integrity, and customer satisfaction.</p>
            </div>
            <div class="col-lg-6 text-center">
                <div class="about-image">
                    <img src="{{ url_for('static', filename='img/consultation.png') }}" alt="Insurance Consultation" class="img-fluid rounded shadow" style="max-height: 400px; object-fit: cover;">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Mission & Vision -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-6">
                <div class="h-100 p-4 bg-white rounded shadow-sm">
                    <div class="text-center mb-3">
                        <i class="fas fa-eye fa-3x text-primary"></i>
                    </div>
                    <h4 class="fw-bold text-center mb-3">Our Vision</h4>
                    <p class="text-muted text-center">To be the most trusted and innovative insurance provider in Kenya, empowering individuals and businesses to achieve peace of mind through comprehensive protection.</p>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="h-100 p-4 bg-white rounded shadow-sm">
                    <div class="text-center mb-3">
                        <i class="fas fa-bullseye fa-3x text-primary"></i>
                    </div>
                    <h4 class="fw-bold text-center mb-3">Our Mission</h4>
                    <p class="text-muted text-center">To provide exceptional insurance services that protect our clients' assets and future, while delivering personalized solutions with integrity and professionalism.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Values -->
<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">Our Core Values</h2>
                <p class="lead text-muted">The principles that guide everything we do</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-3">
                <div class="value-card text-center p-4">
                    <div class="value-icon mb-3">
                        <i class="fas fa-handshake fa-3x text-primary"></i>
                    </div>
                    <h6 class="fw-bold mb-2">Integrity</h6>
                    <p class="text-muted small">We conduct our business with honesty, transparency, and ethical practices.</p>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="value-card text-center p-4">
                    <div class="value-icon mb-3">
                        <i class="fas fa-star fa-3x text-primary"></i>
                    </div>
                    <h6 class="fw-bold mb-2">Excellence</h6>
                    <p class="text-muted small">We strive for excellence in everything we do, from service to solutions.</p>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="value-card text-center p-4">
                    <div class="value-icon mb-3">
                        <i class="fas fa-heart fa-3x text-primary"></i>
                    </div>
                    <h6 class="fw-bold mb-2">Care</h6>
                    <p class="text-muted small">We genuinely care about our clients and their unique insurance needs.</p>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="value-card text-center p-4">
                    <div class="value-icon mb-3">
                        <i class="fas fa-lightbulb fa-3x text-primary"></i>
                    </div>
                    <h6 class="fw-bold mb-2">Innovation</h6>
                    <p class="text-muted small">We embrace innovation to provide cutting-edge insurance solutions.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="fw-bold mb-3">Why Choose Us</h2>
                <p class="lead text-muted">Experience the difference of working with Kenya's trusted insurance professionals</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="advantage-card h-100 p-4 bg-white rounded shadow-sm text-center">
                    <i class="fas fa-chart-line fa-3x text-primary mb-3"></i>
                    <h5 class="fw-bold mb-3">Proven Experience</h5>
                    <p class="text-muted">Years of experience in the Kenyan insurance market with deep understanding of local needs and regulations.</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="advantage-card h-100 p-4 bg-white rounded shadow-sm text-center">
                    <i class="fas fa-user-friends fa-3x text-primary mb-3"></i>
                    <h5 class="fw-bold mb-3">Personalized Service</h5>
                    <p class="text-muted">Every client receives individual attention and customized insurance solutions that fit their specific requirements.</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="advantage-card h-100 p-4 bg-white rounded shadow-sm text-center">
                    <i class="fas fa-phone-alt fa-3x text-primary mb-3"></i>
                    <h5 class="fw-bold mb-3">Responsive Support</h5>
                    <p class="text-muted">Quick response times and dedicated support team available to assist you when you need it most.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact CTA -->
<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">Ready to Experience the Difference?</h2>
                <p class="lead mb-4">Contact us today to learn more about our services and how we can protect what matters most to you.</p>
                <a href="{{ url_for('contact') }}" class="btn btn-light btn-lg text-primary px-4">Get in Touch</a>
            </div>
        </div>
    </div>
</section>
{% endblock %}