{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
  .logo-tile {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .logo-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.12);
  }
  .logo-tile svg,
  .logo-tile img {
    width: 72px;
    height: auto;
  }
  .home-hero {
    min-height: calc(100vh - 160px);
  }
  .feature-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(102, 126, 234, 0.12);
    color: #4f46e5;
  }
  .brand-cloud .logo-tile {
    width: 140px;
    height: 140px;
  }
  .brand-cloud .card {
    border: none;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
  }
  .banner-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(102, 126, 234, 0.1);
    color: #374151;
    font-size: 0.85rem;
    font-weight: 600;
  }
</style>

<div class="bg-light py-2">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <p class="text-uppercase text-primary fw-semibold mb-2">CELEBRITY FAN & RELATIONSHIP ENGAGEMENT PLATFORM</p>
        <h4 class="fw-bold">Connect with verified celebrities, explore exclusive content, and build real, meaningful connections.</h4>
        <p class="lead text-muted">Lumidate X is a modern platform designed for fans, creators, and individuals looking for more than just interaction. Discover verified profiles, engage securely with your favorite stars, and become part of a vibrant fan community. At the same time, meet like-minded people, form genuine relationships, and find a partner who truly matches your interests and lifestyle.</p>
        <div class="d-grid gap-2 d-sm-flex">
          <a class="btn btn-primary btn-lg me-sm-3" href="{% url 'account_signup' %}">Join now</a>
          <a class="btn btn-outline-secondary btn-lg" href="{% url 'core:subscription_plans' %}">View plans</a>
        </div>
      </div>
      <div class="col-lg-6 mt-4 mt-lg-0">
        <div class="card shadow-sm border-0">
          <div class="card-body p-4">
            <h5 class="card-title">Platform overview</h5>
            <p class="card-text text-muted">Safe, engaging, and built for real connection. We make discovery simple, safe, and enjoyable.</p>
            <div class="row text-center mt-4">
              <div class="col-6 border-end">
                <h2 class="fw-bold mb-0">{{ stats.active_users }}</h2>
                <p class="text-muted mb-0">Active fans</p>
              </div>
              <div class="col-6">
                <h2 class="fw-bold mb-0">{{ stats.celebrities }}</h2>
                <p class="text-muted mb-0">Verified celebrities</p>
              </div>
            </div>
            <div class="row text-center mt-4">
              <div class="col-6 border-end">
                <h2 class="fw-bold mb-0">{{ stats.plans }}</h2>
                <p class="text-muted mb-0">Membership plans</p>
              </div>
              <div class="col-6">
                <h2 class="fw-bold mb-0">{{ stats.premium_posts }}</h2>
                <p class="text-muted mb-0">Premium posts</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-5" id="features">
      {% for feature in feature_rows %}
      <div class="col-md-4 mb-4">
        <div class="card h-100 shadow-sm border-0">
          <div class="card-body">
            <div class="mb-3 text-primary"><i class="fas {{ feature.icon }} fa-2x"></i></div>
            <h5 class="card-title">{{ feature.title }}</h5>
            <p class="card-text text-muted">{{ feature.description }}</p>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    <div class="row mt-5">
      <div class="col-12 text-center mb-4">
        <p class="text-uppercase text-primary fw-semibold mb-2">Invest with confidence</p>
        <h2 class="display-6 fw-bold">Fixed-yield USD investment plans</h2>
        <p class="text-muted mx-auto" style="max-width: 720px;">Fund your wallet, lock in a fixed plan, and receive a transparent payout once the investment matures. Built for fans who want steady returns alongside creator engagement.</p>
      </div>
      {% if investment_plans %}
      {% for plan in investment_plans %}
      <div class="col-md-4 mb-4">
        <div class="card h-100 shadow-sm border-0 rounded-4">
          <div class="card-body d-flex flex-column">
            <div class="mb-3">
              <span class="badge bg-primary rounded-pill px-3 py-2">Earn {{ plan.profit_percent }}%</span>
            </div>
            <h5 class="card-title">{{ plan.name }}</h5>
            <p class="text-muted">{{ plan.description|default:"Simple fixed-term earning with USD-backed payouts." }}</p>
            <ul class="list-unstyled mb-4 mt-auto">
              <li><strong>Investment:</strong> {{ plan.currency }} {{ plan.amount|floatformat:2 }}</li>
              <li><strong>Duration:</strong> {{ plan.duration_days }} days</li>
              <li><strong>Payout:</strong> {{ plan.currency }} {{ plan.payout_amount|floatformat:2 }}</li>
            </ul>
            <a href="{% url 'core:checkout_investment' plan.pk %}" class="btn btn-outline-primary btn-sm mt-auto">Invest now</a>
          </div>
        </div>
      </div>
      {% endfor %}
      <div class="col-12 text-center mt-3">
        <a class="btn btn-primary btn-lg" href="{% url 'core:investment_plans' %}">View all investment plans</a>
      </div>
      {% else %}
      <div class="col-12">
        <div class="alert alert-info">No investment plans are available right now. Check back soon.</div>
      </div>
      {% endif %}
    </div>

    <div class="row mt-5 py-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px;">
      <div class="col-lg-8 mx-auto text-center text-white">
        <span class="banner-chip mb-3 d-inline-flex">Premium entertainment partners</span>
        <h2 class="fw-bold mb-3">Explore our Creator Marketplace</h2>
        <p class="lead mb-4">Discover beautiful galleries and handsome creators. Browse media categories, follow your favorites, and book meetings directly.</p>
        <a class="btn btn-light btn-lg me-3" href="{% url 'core:marketplace' %}">Browse marketplace</a>
        <a class="btn btn-outline-light btn-lg" href="{% url 'core:discover' %}">Discover profiles</a>
      </div>
    </div>

    <div class="row mt-5 brand-cloud align-items-center justify-content-center text-center gx-4 gy-4 pb-3 shadow-lg border-top border-5 rounded-top border-warning rounded-4" style="background: linear-gradient(135deg, #81ebaa 0%, #7d6b8f 100%); border-radius: 16px;">
      <!-- Trusted Entertainment Partners Section -->
      <section class="py-5 bg-light">
          <div class="container">
              
              <div class="row justify-content-center text-center mb-5">
                  <div class="col-lg-8">
                      <h2 class="display-6 fw-bold text-dark mb-2">
                          Trusted by Top Entertainment Brands
                      </h2>
                      <p class="lead text-muted">
                          Connecting you with celebrities and talents from the world's leading studios and platforms
                      </p>
                      <hr class="w-25 mx-auto border-primary border-2">
                  </div>
              </div>

              <!-- Logo Grid -->
              <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4 align-items-center justify-content-center">
                {% include "partials/trusted_brands.html" with trusted_brands=trusted_brands %}

              </div>

              <div class="text-center mt-5">
                  <button onclick="alert('Partners page coming soon!')" class="btn btn-outline-primary btn-lg px-5">
                      View All Partners
                  </button>
              </div>
          </div>
      </section>

      <div class="col-12 mb-3">
        <h3 class="fw-bold">Featured entertainment brands</h3>
        <p class="text-muted">Designed for premium partners and trusted fan experiences across global entertainment.</p>
      </div>
        {% include "partials/featured_partners.html" with featured_brands=featured_brands %}
            <!-- View All Button -->
      <div class="text-center mt-5">
        <a href="{% url 'core:brand_list' %}" class="btn btn-outline-primary btn-lg px-5">
          View All Partners
        </a>
      </div>
    </div>

    <div class="row text-center align-items-center py-4 mt-2 bg-white border-info border-5 border-start rounded-4 shadow-md">
      <!-- Header -->
      <div class="row justify-content-center text-center mb-5">
        <div class="col-lg-8">
          <span class="badge bg-success-subtle text-success px-3 py-2 mb-3">
            Secure Payments
          </span>
          <h2 class="display-6 fw-bold mb-3">Supported Payment Gateways</h2>
          <p class="lead text-muted">
            Fast, secure, and trusted payment methods for subscriptions and investments
          </p>
        </div>
      </div>
      {% include "partials/payment_gateway.html" with payment_gateways=payment_gateways %}
    </div>

    <div class="row mt-5 rounded-4 shadow-sm py-5 bg-white border-success border-5 border-end rounded-5 rounded-end">
      <div class="col-12 text-center mb-4">
        <h2 class="fw-bold">Frequently asked questions</h2>
        <p class="text-muted">Everything you need to know about signing up, subscriptions, and connecting with celebrities.</p>
      </div>
      <div class="col-lg-8 offset-lg-2">
        <div class="accordion" id="faqAccordion">
          <div class="accordion-item">
            <h2 class="accordion-header" id="faqOneHeading">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqOne" aria-expanded="true" aria-controls="faqOne">
                How do subscriptions work?
              </button>
            </h2>
            <div id="faqOne" class="accordion-collapse collapse show" aria-labelledby="faqOneHeading" data-bs-parent="#faqAccordion">
              <div class="accordion-body text-muted">
                Choose a plan, select your preferred payment provider, and unlock premium access for verified fan content, direct messages, and exclusive creator updates.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="faqTwoHeading">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqTwo" aria-expanded="false" aria-controls="faqTwo">
                Can I message verified celebrities?
              </button>
            </h2>
            <div id="faqTwo" class="accordion-collapse collapse" aria-labelledby="faqTwoHeading" data-bs-parent="#faqAccordion">
              <div class="accordion-body text-muted">
                Yes. Verified profiles can receive messages, and you can keep track of conversations with threaded chats and notification support.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="faqThreeHeading">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faqThree" aria-expanded="false" aria-controls="faqThree">
                Is my payment information secure?
              </button>
            </h2>
            <div id="faqThree" class="accordion-collapse collapse" aria-labelledby="faqThreeHeading" data-bs-parent="#faqAccordion">
              <div class="accordion-body text-muted">
                Absolutely. We integrate with trusted payment providers and never store sensitive card details on our platform. Payments are handled securely through Stripe, Paystack, or Flutterwave.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-5">
      <div class="col-12 text-center mb-4">
        <h2 class="fw-bold">What our community says</h2>
        <p class="text-muted">Real fans and creators sharing success stories from CelebrityFan.</p>
      </div>
      <div class="col-lg-4 mb-4">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body">
            <p class="card-text text-muted">“The discovery experience is incredible. I found new celebrity content, joined a premium community, and stayed connected with verified stars.”</p>
            <div class="mt-4">
              <h6 class="mb-0">Mia R.</h6>
              <small class="text-muted">Verified fan</small>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mb-4">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body">
            <p class="card-text text-muted">“As a creator, the platform makes it simple to share premium content and monetize my community with flexible payment providers.”</p>
            <div class="mt-4">
              <h6 class="mb-0">Jordan T.</h6>
              <small class="text-muted">Creator partner</small>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 mb-4">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body">
            <p class="card-text text-muted">“I love the secure messaging and notifications. It feels safe, easy, and professional for fan engagement.”</p>
            <div class="mt-4">
              <h6 class="mb-0">Chris P.</h6>
              <small class="text-muted">Fan member</small>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row py-5 bg-white rounded-4 shadow-sm mt-4">
      <div class="col-lg-7">
        <h2 class="fw-bold">Built for creators, trusted by fans</h2>
        <p class="text-muted">Support your favorite celebrities with secure subscriptions, instant notifications, and a streamlined discovery experience.</p>
      </div>
      <div class="col-lg-5 d-flex align-items-center">
        <a class="btn btn-outline-primary btn-lg w-100" href="{% url 'account_signup' %}">Start your fan journey</a>
      </div>
    </div>
  </div>
</div>

<!-- Investment opportunity modal -->
<div class="modal fade" id="investmentModal" tabindex="-1" aria-labelledby="investmentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content rounded-4 shadow-lg border-0">
      <div class="modal-header border-bottom-0">
        <div>
          <h5 class="modal-title fw-bold" id="investmentModalLabel">Featured investment opportunities</h5>
          <p class="text-muted mb-0">Choose a vetted USD package and earn fixed returns after the plan term ends.</p>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row gy-4">
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-4">
              <div class="card-body">
                <h5 class="card-title">Plan A</h5>
                <p class="text-muted">Invest $50 → Earn 20% after 7 days</p>
                <ul class="list-unstyled mb-0">
                  <li><strong>Investment:</strong> USD 50.00</li>
                  <li><strong>Return:</strong> USD 60.00</li>
                  <li><strong>Duration:</strong> 7 days</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-4">
              <div class="card-body">
                <h5 class="card-title">Plan B</h5>
                <p class="text-muted">Invest $200 → Earn 40% after 14 days</p>
                <ul class="list-unstyled mb-0">
                  <li><strong>Investment:</strong> USD 200.00</li>
                  <li><strong>Return:</strong> USD 280.00</li>
                  <li><strong>Duration:</strong> 14 days</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-4">
              <div class="card-body">
                <h5 class="card-title">Plan C</h5>
                <p class="text-muted">Invest $500 → Earn 80% after 30 days</p>
                <ul class="list-unstyled mb-0">
                  <li><strong>Investment:</strong> USD 500.00</li>
                  <li><strong>Return:</strong> USD 900.00</li>
                  <li><strong>Duration:</strong> 30 days</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer border-top-0 justify-content-between">
        <a href="{% url 'core:investment_plans' %}" class="btn btn-primary">Explore all plans</a>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (!localStorage.getItem('investmentModalShown')) {
      var investmentModal = new bootstrap.Modal(document.getElementById('investmentModal'));
      investmentModal.show();
      localStorage.setItem('investmentModalShown', 'true');
    }
  });
</script>
{% endblock %}