{% extends "layouts/layout.html" %}

{% block content %}
<!-- Hero Section -->

    <header class="site-header">
        <div class="header-inner container">
            <a href="/home" class="logo"></a>
            <!--<div class="header-actions">
                <a href="https://wa.me/9047059593?text=Hi. I'm interested in applying for a loan. Could you please send me the information and outline the steps to expedite the process?" target="_blank" class="btn-cta">QUICK LOAN</a>
            </div>-->
        </div>
    </header>

    <main class="promo-main container">
        
        <div class="promo-grid">
            <div class="promo-content">
                <h1 class="title-main">Power Your Dream Idea With An App Today!</h1>
                <h3 class="promo-tagline">Fast, reliable, and tailored to your needs.</h3>
                <p class="promo-brief">Take the first step towards your goals by signing up</p>
                
                <div class="promo-banner">
                    <img src="./assets/img/ogimage.jpg" alt="Promotion Banner">
                </div>

                <div class="promo-description-container">
                    <div class="promo-description" id="detailedDescription">
                        <p>Our tailored Applications are designed to fit seamlessly into your business. Our application streamlines both personal and professional operations by offering targeted features that eliminate inefficiencies and reduce complexity, enabling users to achieve substantially greater outcomes than previously possible. Whether you opt for a trial or a full implementation, we provide adequate resources to support your chosen level of engagement. Take the first step toward asserting control over your environment with the right tools, available at a competitive cost.</p>
                    </div>
                    <button id="readMoreBtn" class="btn-text">Read More <span class="material-symbols-outlined">expand_more</span></button>
                </div>

                <div class="benefits-section">
                    <div class="benefit-tile">
                        <span class="material-symbols-outlined benefit-icon">speed</span>
                        <h4>Quick</h4>
                    </div>
                    <div class="benefit-tile">
                        <span class="material-symbols-outlined benefit-icon">percent</span>
                        <h4>Affordable</h4>
                    </div>
                    <div class="benefit-tile">
                        <span class="material-symbols-outlined benefit-icon">support_agent</span>
                        <h4>24/7 Help</h4>
                    </div>
                    <div class="benefit-tile">
                        <span class="material-symbols-outlined benefit-icon">security</span>
                        <h4>Secure</h4>
                    </div>
                </div>
            </div>

            <div class="promo-form-wrapper">
                <div class="form-card">
                    <h2>Apply Now</h2>
                    <p class="form-subtitle">Fill out the details below to get started.</p>
                    
                    <form id="promoForm" class="compact-form">
                        
                        <div class="form-group">
                            <label>Full Name *</label>
                            <input type="text" id="fullName" required placeholder="John Doe">
                        </div>

                        <div class="form-group">
                            <label>Email Address *</label>
                            <div class="input-with-btn">
                                <input type="email" id="email" required placeholder="john@example.com">
                                <button type="button" class="btn-action" onclick="sendOTP('email')">Send OTP</button>
                            </div>
                            <div class="otp-container" id="emailOtpContainer" style="display: none;">
                                <input type="text" id="emailOtp" placeholder="Enter OTP">
                                <button type="button" class="btn-verify" onclick="verifyOTP('email')">Verify</button>
                            </div>
                            <span class="status-msg" id="emailStatus"></span>
                        </div>

                        <div class="form-group">
                            <label>Phone Number *</label>
                            <div class="input-with-btn">
                                <input type="tel" id="phone" required placeholder="+1 234 567 8900">
                                <button type="button" class="btn-action" onclick="sendOTP('phone')">Send OTP</button>
                            </div>
                            <div class="otp-container" id="phoneOtpContainer" style="display: none;">
                                <input type="text" id="phoneOtp" placeholder="Enter OTP">
                                <button type="button" class="btn-verify" onclick="verifyOTP('phone')">Verify</button>
                            </div>
                            <span class="status-msg" id="phoneStatus"></span>
                        </div>

                        <div class="form-group">
                            <label>Loan Category *</label>
                            <select id="loanCategory" required>
                                <option value="" disabled selected>Select an option</option>
                                <option value="Generic">Generic</option>
                                <option value="Home Loan">Home Loan</option>
                                <option value="Personal Loan">Personal Loan</option>
                                <option value="Business Loan">Business Loan</option>
                                <option value="Car Loan">Car Loan</option>
                                <option value="Project Loan">Project Loan</option>
                                <option value="Home Loan Transfer">Home Loan Transfer</option>
                                <option value="Debt Consolidation">Debt Consolidation</option>
                                <option value="Education Loan">Education Loan</option>
                            </select>
                        </div>

                        <div class="form-group consultation-group">
                            <label>Preferred Consultation Time *</label>
                            <div class="radio-group">
                                <label><input type="radio" name="consultTime" value="immediately" required onclick="toggleDatePicker(false)"> Immediately</label>
                                <label><input type="radio" name="consultTime" value="anytime" onclick="toggleDatePicker(false)"> Anytime</label>
                                <label><input type="radio" name="consultTime" value="specific" onclick="toggleDatePicker(true)"> Specific Date/Time</label>
                            </div>
                            <input type="datetime-local" id="specificDateTime" class="hidden-input">
                        </div>

                        <div class="form-group">
                            <label>Remarks (Optional)</label>
                            <textarea id="remarks" rows="2" placeholder="Any special requests?"></textarea>
                        </div>

                        <div class="form-actions">
                            <button type="reset" class="btn-secondary">Reset</button>
                            <button type="submit" class="btn-primary">Apply Now</button>
                        </div>
                        <div class="special-offer-box">
                            <div class="offer-icon-badge">
                                <span class="material-symbols-outlined">redeem</span>
                            </div>
                            
                            <div class="offer-content">
                                <h4 class="offer-title">
                                    <span class="material-symbols-outlined star-icon">auto_awesome</span>
                                    Special Offer
                                    <span class="material-symbols-outlined star-icon">auto_awesome</span>
                                </h4>
                                <p class="offer-text">Get a <strong>FREE</strong> book, <em>'Secrets to Increase Your Loan Approval Chances'</em> upon submission!</p>
                                
                                <div class="offer-tags">
                                    <span class="offer-tag">
                                        <span class="material-symbols-outlined">picture_as_pdf</span> PDF Guide
                                    </span>
                                    <span class="offer-tag">
                                        <span class="material-symbols-outlined">download</span> Instant Download
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="disclaimer-section">
            <p><strong>Disclaimer:</strong>By signing up on our website, you agree to all of our Terms and Policies.</p>
        </div>

    </main>
{% endblock %}