{% extends "base.html" %}

{% block title %}Phogo Insurance - Professional Insurance Solutions in Kenya{% endblock %}

{% block content %}
<!-- Hero Carousel Section -->
<section class="hero-carousel">
    <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
        <div class="carousel-inner">
            <!-- Slide 1 - Professional Solutions -->
            <div class="carousel-item active">
                <div class="hero-slide" style="background: linear-gradient(rgba(30, 58, 138, 0.8), rgba(59, 130, 246, 0.8)), url('{{ url_for('static', filename='img/office-building.png') }}') center/cover;">
                    <div class="container">
                        <div class="row align-items-center min-vh-75">
                            <div class="col-lg-8 mx-auto text-center text-white">
                                <h1 class="display-3 fw-bold mb-4">Professional Insurance Solutions</h1>
                                <p class="lead mb-4 fs-4">Protecting what matters most to you with comprehensive insurance coverage tailored to your needs. Trust Phogo Insurance for reliable protection and exceptional service.</p>
                                <div class="d-flex gap-3 flex-wrap justify-content-center">
                                    <a href="{{ url_for('contact') }}" class="btn btn-light btn-lg text-primary px-4">Get Free Quote</a>
                                    <a href="{{ url_for('services') }}" class="btn btn-outline-light btn-lg px-4">Our Services</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Slide 2 - Family Protection -->
            <div class="carousel-item">
                <div class="hero-slide" style="background: linear-gradient(rgba(30, 58, 138, 0.8), rgba(59, 130, 246, 0.8)), url('{{ url_for('static', filename='img/hero-family.png') }}') center/cover;">
                    <div class="container">
                        <div class="row align-items-center min-vh-75">
                            <div class="col-lg-8 mx-auto text-center text-white">
                                <h1 class="display-3 fw-bold mb-4">Protect Your Family's Future</h1>
                                <p class="lead mb-4 fs-4">Comprehensive family insurance plans that ensure your loved ones are protected. From health to life insurance, we've got your family covered with affordable and reliable solutions.</p>
                                <div class="d-flex gap-3 flex-wrap justify-content-center">
                                    <a href="{{ url_for('contact') }}" class="btn btn-light btn-lg text-primary px-4">Family Plans</a>
                                    <a href="{{ url_for('services') }}" class="btn btn-outline-light btn-lg px-4">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Slide 3 - Business Success -->
            <div class="carousel-item">
                <div class="hero-slide" style="background: linear-gradient(rgba(30, 58, 138, 0.8), rgba(59, 130, 246, 0.8)), url('{{ url_for('static', filename='img/hero-business.png') }}') center/cover;">
                    <div class="container">
                        <div class="row align-items-center min-vh-75">
                            <div class="col-lg-8 mx-auto text-center text-white">
                                <h1 class="display-3 fw-bold mb-4">Secure Your Business Success</h1>
                                <p class="lead mb-4 fs-4">Comprehensive business insurance solutions that protect your enterprise from unexpected risks. Professional indemnity, liability coverage, and business continuity plans tailored for Kenyan businesses.</p>
                                <div class="d-flex gap-3 flex-wrap justify-content-center">
                                    <a href="{{ url_for('contact') }}" class="btn btn-light btn-lg text-primary px-4">Business Quote</a>
                                    <a href="{{ url_for('services') }}" class="btn btn-outline-light btn-lg px-4">Business Plans</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Slide 4 - Future Planning -->
            <div class="carousel-item">
                <div class="hero-slide" style="background: linear-gradient(rgba(30, 58, 138, 0.8), rgba(59, 130, 246, 0.8)), url('{{ url_for('static', filename='img/hero-planning.png') }}') center/cover;">
                    <div class="container">
                        <div class="row align-items-center min-vh-75">
                            <div class="col-lg-8 mx-auto text-center text-white">
                                <h1 class="display-3 fw-bold mb-4">Plan for a Secure Future</h1>
                                <p class="lead mb-4 fs-4">Investment and retirement planning with insurance protection. Build wealth while ensuring security with our comprehensive financial planning and insurance solutions designed for your future.</p>
                                <div class="d-flex gap-3 flex-wrap justify-content-center">
                                    <a href="{{ url_for('contact') }}" class="btn btn-light btn-lg text-primary px-4">Plan Now</a>
                                    <a href="{{ url_for('services') }}" class="btn btn-outline-light btn-lg px-4">Investment Plans</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Carousel Indicators -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="3"></button>
        </div>
        
    </div>
</section>

<!-- Features 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 Phogo Insurance?</h2>
                <p class="lead text-muted">We provide comprehensive insurance solutions with a commitment to excellence and customer satisfaction.</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card h-100 p-4 bg-white rounded shadow-sm text-center">
                    <img src="{{ url_for('static', filename='img/expert-team.png') }}" alt="Expert Team" class="img-fluid mb-3" style="height: 200px; object-fit: cover; border-radius: 8px;">
                    <h5 class="fw-bold mb-3">Expert Team</h5>
                    <p class="text-muted">Our experienced professionals provide personalized service and expert guidance for all your insurance needs.</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="feature-card h-100 p-4 bg-white rounded shadow-sm text-center">
                    <img src="{{ url_for('static', filename='img/customer-support.png') }}" alt="24/7 Support" class="img-fluid mb-3" style="height: 200px; object-fit: cover; border-radius: 8px;">
                    <h5 class="fw-bold mb-3">24/7 Support</h5>
                    <p class="text-muted">Round-the-clock customer support to assist you whenever you need help with your insurance policies.</p>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="feature-card h-100 p-4 bg-white rounded shadow-sm text-center">
                    <img src="{{ url_for('static', filename='img/trust-reliability.png') }}" alt="Trusted Provider" class="img-fluid mb-3" style="height: 200px; object-fit: cover; border-radius: 8px;">
                    <h5 class="fw-bold mb-3">Trusted Provider</h5>
                    <p class="text-muted">Years of experience in the insurance industry with a proven track record of reliability and trust.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Preview -->
<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 Insurance Services</h2>
                <p class="lead text-muted">Comprehensive coverage options designed to protect you, your family, and your business.</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-3 col-md-6">
                <div class="service-card h-100 p-4 text-center border rounded">
                    <img src="{{ url_for('static', filename='img/car-insurance.png') }}" alt="Auto Insurance" class="img-fluid mb-3" style="height: 150px; object-fit: cover; border-radius: 8px;">
                    <h6 class="fw-bold mb-2">Auto Insurance</h6>
                    <p class="text-muted small">Comprehensive vehicle protection with competitive rates.</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="service-card h-100 p-4 text-center border rounded">
                    <img src="{{ url_for('static', filename='img/health-insurance.png') }}" alt="Health Insurance" class="img-fluid mb-3" style="height: 150px; object-fit: cover; border-radius: 8px;">
                    <h6 class="fw-bold mb-2">Health Insurance</h6>
                    <p class="text-muted small">Quality healthcare coverage for you and your family.</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="service-card h-100 p-4 text-center border rounded">
                    <img src="{{ url_for('static', filename='img/property-insurance.png') }}" alt="Property Insurance" class="img-fluid mb-3" style="height: 150px; object-fit: cover; border-radius: 8px;">
                    <h6 class="fw-bold mb-2">Property Insurance</h6>
                    <p class="text-muted small">Protect your home and valuable possessions.</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="service-card h-100 p-4 text-center border rounded">
                    <i class="fas fa-briefcase fa-3x text-primary mb-3"></i>
                    <h6 class="fw-bold mb-2">Business Insurance</h6>
                    <p class="text-muted small">Comprehensive business protection and liability coverage.</p>
                </div>
            </div>
        </div>
        
        <div class="text-center mt-5">
            <a href="{{ url_for('services') }}" class="btn btn-primary btn-lg px-4">View All Services</a>
        </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">Ready to Get Protected?</h2>
                <p class="lead mb-4">Get a personalized insurance quote in minutes. Our experts are here to help you find the perfect coverage.</p>
                <a href="{{ url_for('contact') }}" class="btn btn-light btn-lg text-primary px-4">Get Your Free Quote Today</a>
            </div>
        </div>
    </div>
</section>
{% endblock %}