<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Local Lendables: Helping Small Communities with its Lending Circles</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Cavolini Font -->
    <link href="https://fonts.googleapis.com/css2?family=Cavolini:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>


<style>
    /* Import Cavolini font locally */
    @font-face {
        font-family: 'Cavolini';
        src: url('/fonts/CAVOLINI.TTF') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Cavolini';
        src: url('/fonts/CAVOLINIBOLD.TTF') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Cavolini';
        src: url('/fonts/CAVOLINIITALIC.TTF') format('truetype');
        font-weight: 400;
        font-style: italic;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Cavolini';
        src: url('/fonts/CAVOLINIBOLDITALIC.TTF') format('truetype');
        font-weight: 700;
        font-style: italic;
        font-display: swap;
    }

    /* Cavolini as main font for homepage */
    body, * {
        font-family: 'Cavolini', 'Times New Roman', serif !important;
        line-height: 1.1 !important;
    }
    
    .homepage-content {
        font-family: 'Cavolini', 'Times New Roman', serif !important;
        line-height: 1.1 !important;
    }
    
    .homepage-content h1, .homepage-content h2, .homepage-content h3, 
    .homepage-content h4, .homepage-content h5, .homepage-content h6,
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Cavolini', 'Times New Roman', serif !important;
        line-height: 1.1 !important;
    }
    
    .homepage-content p, .homepage-content .lead,
    p, .lead, .btn, button {
        font-family: 'Cavolini', 'Times New Roman', serif !important;
        line-height: 1.1 !important;
    }
    
    .demo-user-card .small {
        font-family: 'Cavolini', 'Times New Roman', serif !important;
        line-height: 1.1 !important;
    }
</style>

<main class="container-fluid py-4 homepage-content">
    
    <!-- Logo and Demo Section -->
    <div class="row g-2">
        <div class="col-md-6 d-flex flex-column align-items-start">
            <div class="d-flex align-items-start mb-2">
                <img src="/lendables/logo_community_300.png" alt="Community Logo" style="width: 140px; height: 140px; margin-right: 20px; object-fit: contain;">
                <div>
                    <h1 class="display-3 fw-bold mb-2" style="font-family: 'Cavolini', serif !important; font-size: 2.45rem; line-height: 1.0;">Local Lendables</h1>
                    <p class="mb-0" style="font-family: 'Cavolini', serif !important; font-size: 1.26rem; font-weight: 500;">
                        Helping Small Communities with their Lending Circle of Things.
                    </p>
                </div>
            </div>
            
            <!-- With a Local Lendables Site Section -->
            <div class="p-3 mt-1">
                <p class="mb-2" style="font-family: 'Cavolini', serif !important; font-size: 1.26rem;">
                    Generosity made simple -- <em>with easy inventory management!</em>
                </p>
                <p class="fs-5" style="font-family: 'Cavolini', serif !important;">
                    With a Local Lendables site, you can <strong>safely share</strong> your stored stuff, 
                    keep track of who has what till when, and find things to <strong>borrow</strong> yourself, too! 
                    <strong>Save money, and help others.</strong> All it takes is a little <strong>organized effort!</strong>
                </p>
            </div>
        </div>
        <div class="col-md-6 d-flex align-items-center justify-content-center">
            
            <!-- Demo User Grid -->
            <div class="bg-success rounded-3 p-2 text-center" style="background-color: lightgreen !important;">
                <div class="mb-2">
                    <h2 class="h4 fw-bold mb-1" style="font-family: 'Cavolini', serif !important;">See It in Action!</h2>
                    <p class="mb-3" style="font-family: 'Cavolini', serif !important;">Which Member do you want to impersonate?</p>
                </div>
                
                <!-- Dynamic User Grid -->
                {% if demoUsers %}
                {% set userRows = [
                    demoUsers|slice(0, 5),
                    demoUsers|slice(5, 5),
                    demoUsers|slice(10, 4)
                ] %}
                
                {% for rowIndex, userRow in userRows %}
                <div class="row g-2 mb-2 justify-content-center">
                    {% for user in userRow %}
                    <div class="col-auto">
                        <a href="/login?demo={{ user.username }}" class="text-decoration-none">
                            <div class="bg-white rounded-2 p-2 demo-user-card {% if user.username == 'dilly.admin' %}border border-warning{% endif %}" style="cursor: pointer; border: 2px solid transparent;" onmouseover="this.style.borderColor='#28a745';" onmouseout="this.style.borderColor='transparent';">
                                {% set hasRollover = user.avatar in ['f10.jpg', 'f12.jpg', 'f22.jpg', 'f23.jpg', 'f34.jpg', 'f46.jpg', 'f67.jpg', 'f71.jpg', 'f78.jpg', 'f85.jpg', 'm11.jpg', 'm19.jpg', 'm46.jpg'] %}
                                <img src="/ll_images/{{ user.avatar }}" width="50" height="50" class="rounded demo-avatar"
                                     {% if hasRollover %}onmouseover="this.src='/ll_images/x{{ user.avatar }}'" onmouseout="this.src='/ll_images/{{ user.avatar }}'"{% endif %}>
                                <div class="small fw-bold mt-1 {% if user.username == 'dilly.admin' %}text-warning{% endif %}">{{ user.showName ?: user.firstName }}</div>
                                {% if user.username == 'dilly.admin' %}
                                <div class="badge bg-warning text-dark" style="font-size: 0.6rem;">ADMIN</div>
                                {% endif %}
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
                {% else %}
                <!-- Fallback: Loading message -->
                <div class="row g-2 justify-content-center">
                    <div class="col-12 text-center">
                        <p class="text-muted">Loading demo users...</p>
                    </div>
                </div>
                {% endif %}
            </div>
            
        </div>
    </div>
    

    

    
    <!-- Who are the Members Section -->
    <div class="row mt-1">
        <div class="col-12">
            <div class="p-3">
                <!-- FAQ Links - reorganized vertically -->
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="mb-3 text-center">
                            <a href="https://locallendables.com/faq.html" class="btn btn-link text-start p-0 fs-5 text-decoration-underline fw-bold" style="font-family: 'Cavolini', serif !important;" target="_blank">
                                Frequently Asked Questions
                            </a>
                        </div>
                        
                        <div class="mb-3 text-center">
                            <button class="btn btn-link text-start p-0 fs-5" data-bs-toggle="modal" data-bs-target="#whoaremembers" style="font-family: 'Cavolini', serif !important;">
                                Who are the Members of a Lendables site?
                            </button>
                        </div>
                        
                        <div class="mb-3 text-center">
                            <button class="btn btn-link text-start p-0 fs-5" data-bs-toggle="modal" data-bs-target="#mygroup" style="font-family: 'Cavolini', serif !important;">
                                Is there one for my group/community?
                            </button>
                        </div>
                        
                        <div class="mb-3 text-center">
                            <button class="btn btn-link text-start p-0 fs-5" data-bs-toggle="modal" data-bs-target="#startup" style="font-family: 'Cavolini', serif !important;">
                                Startup Requirements
                            </button>
                        </div>
                        
                        <div class="mb-3 text-center">
                            <button class="btn btn-link text-start p-0 fs-5" data-bs-toggle="modal" data-bs-target="#results" style="font-family: 'Cavolini', serif !important;">
                                Your Community's Results
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</main>

<!-- Modals -->
<!-- Who are members modal -->
<div class="modal fade" id="whoaremembers" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Who are the Members of a Lendables site?</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Almost any small defined community of geography, interest, or culture: Villages, Churches, Membership Orgs, Community Halls, HOAs, Co-ops, or even a Bowling League!</p>
                <p class="text-success fw-bold">
                    It's so sensible! Save money, effort, time, and energy by lending and borrowing stuff with folks you know!
                </p>
            </div>
        </div>
    </div>
</div>

<!-- My group modal -->
<div class="modal fade" id="mygroup" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Is there a Local Lendables site for my group/community?</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Probably not. If there was, you'd have heard about it. It's community thing:</p>
                <ul>
                    <li>Easy to start</li>
                    <li>60 days free trial</li>
                    <li>Lend and Borrow things only with Members of your Lendables Community: those invited in, or vouched for by Members.</li>
                    <li>Super-easy, phone-friendly ways to take pix, list, lend, borrow, and track your own Lendable Items</li>
                    <li>Each Member's personal "Lendables Inventory" lets them know who has what, and for how long</li>
                    <li>The community saves money, time, effort, shipping, and materials</li>
                    <li>Sharing like this builds up the community</li>
                    <li>We help you and your community get started!</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Startup modal -->
<div class="modal fade" id="startup" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Startup Requirements</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul>
                    <li>An active Manager from inside the community, to organize, start up, invite in, and validate new vouched-for Members</li>
                    <li>A handful of interested "Advisory Board" Members, who could each initially post 5 or 10 Lendable Items to jumpstart the inventory, as well as assist the Manager to invite in other Community Members</li>
                    <li>The ability to raise $50 per month for the Lendables Community subscription, from sponsors, members, or an existing organization's budget.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Results modal -->
<div class="modal fade" id="results" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Your Community's Results</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Your community will get:</p>
                <ul>
                    <li>A uniquely named site, like "yourGroup-Lendables.com"</li>
                    <li>A private community database</li>
                    <li>The Lendables Platform© for easy sharing of your community's Items</li>
                    <li>No advertising</li>
                    <li>No outside scams or spam</li>
                    <li>The ability to define your Membership as you choose, and invite who participates</li>
                    <li>Support as you start off, and support as you grow</li>
                    <li>and more!</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<style>
.demo-user-card {
    transition: transform 0.2s ease;
    cursor: pointer;
    min-width: 70px;
    pointer-events: auto;
}

.demo-user-card a {
    pointer-events: auto;
    display: block;
}

a[href^="/login?demo="] {
    pointer-events: auto !important;
    cursor: pointer !important;
    display: block !important;
}

a[href^="/login?demo="]:hover .demo-user-card {
    background-color: #f8f9fa !important;
}

.demo-user-card:hover {
    transform: translateY(-2px);
}

.demo-avatar {
    object-fit: cover;
    border: 2px solid #dee2e6;
}

.demo-avatar:hover {
    border-color: var(--primary-color);
}
</style>

</body>
</html>