{{-- resources/views/about.blade.php --}}
@extends('layouts.horizontalLayoutMaster')

@section('title', 'About KanfeeAgency')

@section('content')
    <div class="auth-wrapper auth-cover" style="background-color: #F8F8F8;">
        <div class="auth-inner row m-0 justify-content-center">
            <div class="col-lg-8 d-flex align-items-center px-3 px-lg-5 pt-2">
                <div class="w-100 my-5">
                    {{-- INTRO --}}
                    <div class="text-center mb-5">
                        <h1 style="font-size: 32px; font-weight: 700; color: #0B1970;">Welcome to the KanfeeAgency Agent
                            Portal</h1>
                        <p style="font-size: 18px; color: #666;">Empowering Insurance Agents to Succeed</p>
                        <img src="{{ asset('images/teamwork.jpg') }}" alt="Teamwork" class="img-fluid rounded shadow mt-4"
                            style="max-height: 400px; width: 100%; object-fit: cover;">
                    </div>

                    {{-- DASHBOARD SECTION --}}
                    <div class="mb-5">
                        <h3 style="font-size: 24px; color: #007bff;">Your All-in-One Agent Dashboard</h3>
                        <p style="font-size: 16px; line-height: 1.6;">
                            The <strong>KanfeeAgency Agent Portal</strong> provides life and health insurance agents with
                            powerful tools and resources. From lead generation to client communication and
                            training—everything is accessible in one place.
                        </p>
                        <img src="{{ asset('images/portal-dashboard.png') }}" alt="Dashboard"
                            class="img-fluid rounded shadow mt-3"
                            style="max-height: 350px; width: 100%; object-fit: cover;">
                    </div>

                    {{-- FEATURES SECTION --}}
                    <div class="row mb-5 align-items-center">
                        <div class="col-md-6 mb-4 mb-md-0">
                            <h4 style="font-size: 22px; color: #28a745;">Key Features:</h4>
                            <ul style="font-size: 16px; padding-left: 18px;">
                                <li>Lead management for consistent growth</li>
                                <li>Secure client communication tools</li>
                                <li>Training resources for new and veteran agents</li>
                                <li>Task tracking and reminders</li>
                                <li>Cloud-based document sharing</li>
                            </ul>
                        </div>
                        {{-- <div class="col-md-6">
                            <img src="{{ asset('images/features.png') }}" alt="Features" class="img-fluid rounded shadow"
                                style="width: 100%; max-height: 320px; object-fit: contain;">
                        </div>
                        </div> --}}

                        {{-- CONNECTIVITY SECTION --}}
                        <div class="mb-5">
                            <h3 style="font-size: 24px; color: #007bff;">Stay Organized, Informed & Connected</h3>
                            <p style="font-size: 16px;">
                                The agent portal integrates all your business essentials in one clean, modern interface.
                                Eliminate the clutter and focus on what matters—building relationships and growing your
                                business.
                            </p>
                            <img src="{{ asset('images/connected.jpg') }}" alt="Connected"
                                class="img-fluid rounded shadow my-3"
                                style="width: 100%; max-height: 300px; object-fit: cover;">
                        </div>

                        {{-- LEADS SECTION --}}
                        <div class="mb-5">
                            <h3 style="font-size: 24px; color: #007bff;">Get Access to Quality Leads</h3>
                            <p style="font-size: 16px;">
                                Leads are the backbone of your business. We provide you with direct access to new leads from
                                multiple channels—including free leads, pay-per-lead, and referral programs—to help you grow
                                faster.
                            </p>
                            <img src="{{ asset('images/leads.jpg') }}" alt="Leads" class="img-fluid rounded shadow my-3"
                                style="width: 100%; max-height: 300px; object-fit: cover;">
                        </div>

                        {{-- CARRIER NETWORK SECTION --}}
                        <div class="mb-5">
                            <h3 style="font-size: 24px; color: #007bff;">Backed by 30+ Trusted Carriers</h3>
                            <p style="font-size: 16px;">
                                We partner with over 30 insurance carriers to deliver competitive, reliable, and flexible
                                coverage options. We directly promote <strong>EthosLife</strong> products and collaborate
                                with
                                other agencies to match each client with the best available plan.
                            </p>
                            <img src="{{ asset('images/carriers.png') }}" alt="Carriers"
                                class="img-fluid rounded shadow my-3"
                                style="width: 100%; max-height: 300px; object-fit: contain;">
                        </div>

                        {{-- CTA SECTION --}}
                        <div class="text-center mt-0">
                            <h4 style="font-size: 20px; color: #444;">Ready to grow your insurance business with confidence?
                            </h4>
                            <p style="font-size: 16px; margin-bottom: 25px;">Join KanfeeAgency today and start your journey
                                with
                                the tools, training, and support you deserve.</p>
                            <a href="{{ route('register') }}" class="btn btn-success px-4 py-2" style="font-size: 16px;">Get
                                Started Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection