@extends('layouts.app', [
    'class' => '',
    'elementActive' => ''
])

@section('title', env('APP_NAME').' - Home')

@section('meta')
<meta name="description" content="Streamline lending operations with our advanced loan management system for microfinance, cooperatives, and banks. Manage loans, repayments, clients, and agents in one platform.">
@endsection

@section('css')
<style>
.hero-header {
    background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.2)), url("{{ asset('img/loan-bg.jpg') }}") center/cover no-repeat;
    color: #fff;
    padding: 100px 0;
    text-align: center;
}
.section {
    padding: 80px 0;
}
.feature-box, .faq-box, .pricing-box {
    padding: 20px;
    border-radius: 10px;
    transition: 0.3s;
}
.feature-box:hover, .faq-box:hover, .pricing-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
</style>
@endsection

@section('content')

<!-- Hero Section -->
<div class="hero-header" id="home">
    <div class="container">
        <h1 class="display-4 fw-bold text-white">Modern Loan Management with <span class="text-primary">{{ env("APP_NAME") }}</span></h1>
        <p class="fs-4 text-light">Digitize your lending operations — manage loans, repayments, clients, and financial reports seamlessly.</p>
        <a href="#contact" class="btn btn-primary btn-lg rounded-pill">Request a Demo</a>
    </div>
</div>

<!-- Features Section -->
<div class="section bg-light" id="features">
    <div class="container text-center">
        <h2 class="fw-bold">Key Features</h2>
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="feature-box bg-white p-4">
                    <h4 class="text-primary">Loan Origination</h4>
                    <p>Capture borrower details, upload documents, and process applications with custom workflows.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-box bg-white p-4">
                    <h4 class="text-primary">Repayment Scheduling</h4>
                    <p>Create flexible repayment plans and automate due date tracking with alerts and reminders.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-box bg-white p-4">
                    <h4 class="text-primary">Borrower & Agent Management</h4>
                    <p>Organize clients, agents, and field officers with complete visibility and role-based access.</p>
                </div>
            </div>
            <div class="col-md-6 mt-4">
                <div class="feature-box bg-white p-4">
                    <h4 class="text-primary">Financial Analytics</h4>
                    <p>Monitor repayments, defaults, and earnings with customizable dashboards and reports.</p>
                </div>
            </div>
            <div class="col-md-6 mt-4">
                <div class="feature-box bg-white p-4">
                    <h4 class="text-primary">Role-Based Permissions</h4>
                    <p>Admins, loan officers, and auditors access only what they need — ensuring security and compliance.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- FAQs Section -->
<div class="section" id="faqs">
    <div class="container text-center">
        <h2 class="fw-bold">Frequently Asked Questions</h2>
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="faq-box bg-light p-4">
                    <h5>Can I manage multiple loan products?</h5>
                    <p>Yes, create and manage different loan types with customized interest rates, terms, and fees.</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="faq-box bg-light p-4">
                    <h5>Does it support offline collections?</h5>
                    <p>Yes, field agents can record payments made offline, which syncs when online connectivity is restored.</p>
                </div>
            </div>
            <div class="col-md-6 mt-4">
                <div class="faq-box bg-light p-4">
                    <h5>How are repayments tracked?</h5>
                    <p>Our system logs each payment, auto-applies it to scheduled installments, and flags overdue accounts.</p>
                </div>
            </div>
            <div class="col-md-6 mt-4">
                <div class="faq-box bg-light p-4">
                    <h5>Is there a borrower portal?</h5>
                    <p>Yes! Borrowers can log in to view their loan status, upcoming payments, and transaction history.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Pricing Section -->
<div class="section bg-light" id="pricing">
    <div class="container text-center">
        <h2 class="fw-bold">Pricing Plans</h2>
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="pricing-box bg-white p-4">
                    <h4>Basic</h4>
                    <h3 class="text-primary">$39/month</h3>
                    <p>✔ Up to 500 clients<br>✔ Core loan management<br>✔ Email support</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="pricing-box bg-white p-4">
                    <h4>Professional</h4>
                    <h3 class="text-primary">$79/month</h3>
                    <p>✔ Everything in Basic<br>✔ Agent management<br>✔ Custom reports<br>✔ Phone support</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="pricing-box bg-white p-4">
                    <h4>Enterprise</h4>
                    <h3 class="text-primary">Custom</h3>
                    <p>✔ Unlimited clients<br>✔ API access<br>✔ SLA support<br>✔ White-labeling</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Contact Section -->
<div class="section" id="contact">
    <div class="container text-center">
        <h2 class="fw-bold">Request a Demo</h2>
        <p>Let us show you how {{ env('APP_NAME') }} can transform your lending operations.</p>
        <form class="mt-4">
            <div class="row">
                <div class="col-md-6">
                    <input type="text" class="form-control mb-3" placeholder="Your Name">
                </div>
                <div class="col-md-6">
                    <input type="email" class="form-control mb-3" placeholder="Your Email">
                </div>
            </div>
            <textarea class="form-control mb-3" rows="4" placeholder="Your Message"></textarea>
            <button class="btn btn-primary btn-lg">Send Message</button>
        </form>
    </div>
</div>

@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const navLinks = document.querySelectorAll('.nav-item.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            const targetElement = document.getElementById(targetId);
            if(targetElement) {
                targetElement.scrollIntoView({ behavior: 'smooth' });
                history.pushState(null, '', `#${targetId}`);
            }
        });
    });
});
</script>
@endsection