{% extends "base.html" %} {% load static %} {% load humanize %} {% block title
%}{{ PLATFORM_NAME }} -- Book. Upload. Sell.{% endblock %} {% block
meta_description %}FlashSale is the premier flash sale platform for Ghanaian
businesses. Book a sale window, upload your products, and sell to customers in
real-time.{% endblock %} {% block content %}
<!-- 1. Hero Section with Parallax Background & Glassmorphism -->
<section class="landing-hero">
  <div class="landing-hero__bg-wrapper">
    <img
      src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?q=80&w=1600&auto=format&fit=crop"
      alt="Flash Sale Shopping Experience"
      class="landing-hero__bg"
      loading="eager"
    />
  </div>
  <div class="landing-hero__overlay"></div>
  <div class="container">
    <div class="landing-hero__grid">
      <div class="landing-hero__content animate-in">
        <h1 class="landing-hero__title">
          Host High-Impact Flash Sales &
          <span class="gradient-text">Skyrocket Revenue</span>
        </h1>

        <p class="landing-hero__subtitle">
          The all-in-one platform for Ghanaian entrepreneurs to launch
          time-limited sales events. Reserve your exclusive window, upload your
          catalog, share your link, and collect payments seamlessly.
        </p>

        <div class="landing-hero__actions">
          <a href="#booking" class="btn btn--primary btn--lg">
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2.5"
            >
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
              <line x1="16" y1="2" x2="16" y2="6" />
              <line x1="8" y1="2" x2="8" y2="6" />
              <line x1="3" y1="10" x2="21" y2="10" />
            </svg>
            Book Your Sale Window
          </a>
          <a
            href="{% url 'discovery:list' %}"
            class="btn btn--secondary btn--lg"
            style="
              background: rgba(255, 255, 255, 0.15);
              color: #fff;
              border-color: rgba(255, 255, 255, 0.3);
              backdrop-filter: blur(10px);
            "
          >
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2.5"
            >
              <polygon points="5 3 19 12 5 21 5 3" />
            </svg>
            Explore Live Sales
          </a>
        </div>
      </div>

      <!-- Floating Glass Cards side column -->
      <div class="hero-glass-cards">
        <div class="hero-glass-card">
          <div class="hero-glass-card__icon">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
            </svg>
          </div>
          <div>
            <div class="hero-glass-card__title">Instant Setup</div>
            <div class="hero-glass-card__desc">Launch sales in minutes</div>
          </div>
        </div>
        <div class="hero-glass-card">
          <div class="hero-glass-card__icon">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
            </svg>
          </div>
          <div>
            <div class="hero-glass-card__title">Paystack Secured</div>
            <div class="hero-glass-card__desc">MoMo & Card payments</div>
          </div>
        </div>
        <div class="hero-glass-card">
          <div class="hero-glass-card__icon">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
            >
              <circle cx="12" cy="12" r="10" />
              <polyline points="12 6 12 12 16 14" />
            </svg>
          </div>
          <div>
            <div class="hero-glass-card__title">Synced Timers</div>
            <div class="hero-glass-card__desc">Tamper-proof countdowns</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 2. Trusted Businesses Infinite Marquee Bar -->
<section class="marquee-section">
  <div class="marquee-title">Trusted By Growing Brands Across Ghana</div>
  <div class="marquee">
    <div class="marquee__content">
      {% for biz in trusted_businesses %}
      <div class="marquee__item">
        {% if biz.logo %}
        <img src="{{ biz.logo.url }}" class="marquee__img" alt="FS" />
        {% else %}
        <div
          class="logo-wall__placeholder"
          style="width: 36px; height: 36px; font-size: 14px"
        >
          FS
        </div>
        {% endif %}
        <span>{{ biz.name }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- 3. How It Works - Zigzag Layout with Imagery -->
<section class="section" id="how-it-works">
  <div class="container">
    <div class="section__header reveal">
      <span class="zigzag-item__step">3 Simple Steps</span>
      <h2>How FlashSale Works</h2>
      <p class="section__subtitle">
        From booking your window to instant payouts, here is your path to
        high-volume revenue.
      </p>
    </div>

    <div class="feature-zigzag">
      <!-- Step 1 -->
      <div class="zigzag-item reveal">
        <div class="zigzag-item__image-wrap">
          <span class="zigzag-item__badge">Step 01</span>
          <img
            src="https://images.unsplash.com/photo-1506784983877-45594efa4cbe?q=80&w=800&auto=format&fit=crop"
            alt="Book Sale Window"
            class="zigzag-item__img"
            loading="lazy"
          />
        </div>
        <div class="zigzag-item__content">
          <div class="zigzag-item__step">Schedule & Lock In</div>
          <h3 class="zigzag-item__title">Book Your Sale Window</h3>
          <p class="zigzag-item__desc">
            Pick your start and end dates directly on our interactive calendar
            picker. Choose between a low upfront daily rate or flexible revenue
            commission.
          </p>
          <div class="zigzag-item__bullets">
            <div class="zigzag-item__bullet">
              <div class="zigzag-item__bullet-icon">✓</div>
              <span>Automated seller dashboard creation</span>
            </div>
            <div class="zigzag-item__bullet">
              <div class="zigzag-item__bullet-icon">✓</div>
              <span>Guaranteed exclusive time slot reservation</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Step 2 -->
      <div class="zigzag-item zigzag-item--reverse reveal">
        <div class="zigzag-item__image-wrap">
          <span class="zigzag-item__badge">Step 02</span>
          <img
            src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?q=80&w=800&auto=format&fit=crop"
            alt="Upload Products"
            class="zigzag-item__img"
            loading="lazy"
          />
        </div>
        <div class="zigzag-item__content">
          <div class="zigzag-item__step">Catalog Preparation</div>
          <h3 class="zigzag-item__title">Upload & Pricing Strategy</h3>
          <p class="zigzag-item__desc">
            Upload HD product photos, set special flash sale pricing, and set
            stock limits. Our automated image optimizer ensures ultra-fast
            mobile loading.
          </p>
          <div class="zigzag-item__bullets">
            <div class="zigzag-item__bullet">
              <div class="zigzag-item__bullet-icon">✓</div>
              <span>Bulk image upload & optimization</span>
            </div>
            <div class="zigzag-item__bullet">
              <div class="zigzag-item__bullet-icon">✓</div>
              <span>Inventory management with stock limits</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Step 3 -->
      <div class="zigzag-item reveal">
        <div class="zigzag-item__image-wrap">
          <span class="zigzag-item__badge">Step 03</span>
          <img
            src="https://images.unsplash.com/photo-1556742504-16b083241fab?q=80&w=800&auto=format&fit=cro"
            alt="Sell Real-time"
            class="zigzag-item__img"
            loading="lazy"
          />
        </div>
        <div class="zigzag-item__content">
          <div class="zigzag-item__step">Go Live & Collect</div>
          <h3 class="zigzag-item__title">Share Link & Collect Revenue</h3>
          <p class="zigzag-item__desc">
            Distribute your unique sale link across Instagram, WhatsApp, and
            TikTok. As the live countdown hits zero, buyers purchase with
            1-click Mobile Money or Card.
          </p>
          <div class="zigzag-item__bullets">
            <div class="zigzag-item__bullet">
              <div class="zigzag-item__bullet-icon">✓</div>
              <span>Instant Paystack payment & settlements</span>
            </div>
            <div class="zigzag-item__bullet">
              <div class="zigzag-item__bullet-icon">✓</div>
              <span>Real-time live order tracking dashboard</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 4. Animated Stats Counter Section -->
<section class="stats-counter">
  <div class="container">
    <div class="stats-counter__grid">
      <div class="stat-counter__item">
        <div class="stat-counter__value" data-target="15000" data-suffix="+">
          0
        </div>
        <div class="stat-counter__label">Orders Processed</div>
      </div>
      <div class="stat-counter__item">
        <div class="stat-counter__value" data-target="500" data-suffix="+">
          0
        </div>
        <div class="stat-counter__label">Successful Flash Sales</div>
      </div>
      <div class="stat-counter__item">
        <div class="stat-counter__value" data-target="99" data-suffix="%">
          0
        </div>
        <div class="stat-counter__label">Seller Satisfaction Rate</div>
      </div>
      <div class="stat-counter__item">
        <div
          class="stat-counter__value"
          data-prefix="GHS "
          data-target="2"
          data-suffix="M+"
        >
          0
        </div>
        <div class="stat-counter__label">Total Revenue Generated</div>
      </div>
    </div>
  </div>
</section>

<!-- 5. Visual Category Showcase Gallery -->
<section class="section" style="background: #f8fafc">
  <div class="container">
    <div class="section__header reveal">
      <h2>Built For All Retail Verticals</h2>
      <p class="section__subtitle">
        Whether selling fashion, electronics, cosmetics, or artisanal goods,
        FlashSale powers rapid conversion.
      </p>
    </div>

    <div class="showcase-strip reveal">
      <div class="showcase-card">
        <img
          src="https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=800&auto=format&fit=crop"
          alt="Fashion & Apparel"
          class="showcase-card__img"
          loading="lazy"
        />
        <div class="showcase-card__overlay">
          <span class="showcase-card__tag">Fashion</span>
          <h4 class="showcase-card__title">Apparel & Footwear</h4>
          <p class="showcase-card__desc">
            Clear seasonal stock in hours with high urge countdowns.
          </p>
        </div>
      </div>
      <div class="showcase-card">
        <img
          src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=800&auto=format&fit=crop"
          alt="Tech & Gadgets"
          class="showcase-card__img"
          loading="lazy"
        />
        <div class="showcase-card__overlay">
          <span class="showcase-card__tag">Electronics</span>
          <h4 class="showcase-card__title">Tech & Accessories</h4>
          <p class="showcase-card__desc">
            Run limited-unit drops with live remaining stock meters.
          </p>
        </div>
      </div>
      <div class="showcase-card">
        <img
          src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?q=80&w=800&auto=format&fit=crop"
          alt="Beauty & Skincare"
          class="showcase-card__img"
          loading="lazy"
        />
        <div class="showcase-card__overlay">
          <span class="showcase-card__tag">Beauty</span>
          <h4 class="showcase-card__title">Cosmetics & Skincare</h4>
          <p class="showcase-card__desc">
            Bundle top-selling items and boost average cart value.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- 6. Booking Calendar Section -->
<section
  class="section"
  id="booking"
  style="background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%)"
>
  <div class="container">
    <div class="section__header reveal">
      <span class="badge badge--live mb-2" style="font-size: 12px"
        >Reserve Now</span
      >
      <h2>Book Your Sale Window</h2>
      <p class="section__subtitle">
        Select your start & end date on the calendar below to instantly
        calculate your booking rate.
      </p>
    </div>

    <div
      class="card reveal"
      style="
        max-width: 820px;
        margin: 0 auto;
        border-color: var(--color-primary-200);
        box-shadow: var(--shadow-lg);
      "
    >
      <!-- Single Calendar Range Picker Container -->
      <div id="rangeCalendarContainer"></div>

      <input type="hidden" id="startDate" />
      <input type="hidden" id="endDate" />

      <!-- iOS Alarm-Style Time Picker -->
      <div class="ios-alarm-picker mb-6">
        <div class="ios-alarm-col">
          <span class="ios-alarm-label">Start Time</span>
          <div class="ios-alarm-box">
            <input
              type="time"
              id="startTime"
              class="ios-alarm-input"
              value="09:00"
              onchange="autoQuote()"
            />
          </div>
        </div>
        <div class="ios-alarm-divider">&rarr;</div>
        <div class="ios-alarm-col">
          <span class="ios-alarm-label">End Time</span>
          <div class="ios-alarm-box">
            <input
              type="time"
              id="endTime"
              class="ios-alarm-input"
              value="18:00"
              onchange="autoQuote()"
            />
          </div>
        </div>
      </div>

      <!-- Pricing Model -->
      <div class="form-group">
        <label class="form-label" style="font-size: 1rem; font-weight: 700"
          >Select Pricing Model</label
        >
        <div class="grid grid--2 gap-3">
          <label
            class="card card--flat"
            style="
              cursor: pointer;
              padding: var(--space-4);
              border-radius: var(--radius-md);
            "
          >
            <input
              type="radio"
              name="pricing_model"
              value="daily_rate"
              checked
              style="accent-color: var(--color-primary); margin-right: 8px"
              onchange="autoQuote()"
            />
            <div>
              <strong>Daily Rate</strong>
              <p class="text-sm text-secondary">
                GHS {{ BOOKING_DAILY_RATE|default:"50.00" }} per day, paid
                upfront
              </p>
            </div>
          </label>
          <label
            class="card card--flat"
            style="
              cursor: pointer;
              padding: var(--space-4);
              border-radius: var(--radius-md);
            "
          >
            <input
              type="radio"
              name="pricing_model"
              value="commission"
              style="accent-color: var(--color-primary); margin-right: 8px"
              onchange="autoQuote()"
            />
            <div>
              <strong>Commission</strong>
              <p class="text-sm text-secondary">
                5% of sales revenue (GHS 10.00 activation fee)
              </p>
            </div>
          </label>
        </div>
      </div>

      <div id="quoteResult" class="alert alert--info hidden mb-6"></div>

      <button
        id="openBookingBtn"
        class="btn btn--primary btn--block btn--lg hidden"
        onclick="openBookingModal()"
      >
        Proceed to Book
      </button>
    </div>
  </div>
</section>

<!-- Booking Modal -->
<div class="modal-overlay" id="bookingModal">
  <div class="modal">
    <div class="modal__header">
      <h3 class="modal__title">Complete Your Booking</h3>
      <button class="modal__close" onclick="closeBookingModal()">
        <svg
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <path d="M18 6L6 18M6 6l12 12" />
        </svg>
      </button>
    </div>

    <div id="modalQuote" class="alert alert--info mb-6"></div>

    <form id="bookingForm">
      <!-- Preferred Login Method Cards -->
      <div class="form-group mb-4">
        <label class="form-label" style="font-weight: 700"
          >Choose Login Method</label
        >
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px">
          <div
            id="bookingCardMagic"
            class="card card--selectable active"
            onclick="selectBookingAuthMethod('magic')"
            style="
              cursor: pointer;
              padding: 12px;
              text-align: center;
              border: 2px solid var(--color-primary, #0d9488);
              border-radius: var(--radius-md);
              background: rgba(13, 148, 136, 0.04);
              transition: all 0.2s ease;
            "
          >
            <div
              style="
                display: flex;
                justify-content: center;
                margin-bottom: 4px;
                color: var(--color-primary, #0d9488);
              "
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
                />
                <path
                  d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
                />
              </svg>
            </div>
            <div
              style="
                font-weight: 700;
                font-size: 0.85rem;
                color: var(--color-text);
              "
            >
              Magic Link
            </div>
            <div
              style="
                font-size: 0.7rem;
                color: var(--color-secondary, #64748b);
                margin-top: 2px;
              "
            >
              No password needed
            </div>
          </div>
          <div
            id="bookingCardPassword"
            class="card card--selectable"
            onclick="selectBookingAuthMethod('password')"
            style="
              cursor: pointer;
              padding: 12px;
              text-align: center;
              border: 2px solid #e2e8f0;
              border-radius: var(--radius-md);
              transition: all 0.2s ease;
            "
          >
            <div
              style="
                display: flex;
                justify-content: center;
                margin-bottom: 4px;
                color: var(--color-primary, #0d9488);
              "
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
              </svg>
            </div>
            <div
              style="
                font-weight: 700;
                font-size: 0.85rem;
                color: var(--color-text);
              "
            >
              Password
            </div>
            <div
              style="
                font-size: 0.7rem;
                color: var(--color-secondary, #64748b);
                margin-top: 2px;
              "
            >
              Set username & pass
            </div>
          </div>
        </div>
        <input
          type="hidden"
          id="bookingAuthMethod"
          name="auth_method"
          value="magic"
        />
      </div>

      <!-- Password Fields (hidden by default when magic link selected) -->
      <div
        id="bookingPasswordFields"
        style="display: none"
        class="grid grid--2"
      >
        <div class="form-group">
          <label class="form-label">Username</label>
          <input
            type="text"
            name="username"
            id="bookingUsername"
            class="form-input"
            placeholder="Choose a username"
          />
        </div>
        <div class="form-group">
          <label class="form-label">Password</label>
          <input
            type="password"
            name="password"
            id="bookingPassword"
            class="form-input"
            minlength="8"
            placeholder="Min 8 characters"
          />
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">Business Name</label>
        <input
          type="text"
          name="business_name"
          class="form-input"
          required
          placeholder="Your business name"
        />
      </div>
      <div class="form-group">
        <label class="form-label">Business Logo</label>
        <input type="file" name="logo" class="form-input" accept="image/*" />
      </div>
      <div class="grid grid--2">
        <div class="form-group">
          <label class="form-label">Phone</label>
          <div class="phone-input-group">
            <span class="phone-prefix">+233</span>
            <input
              type="tel"
              name="phone"
              class="form-input"
              required
              placeholder="24 123 4567"
              maxlength="9"
              oninput="formatGhanaPhoneInput(this)"
            />
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Email</label>
          <input
            type="email"
            name="email"
            class="form-input"
            required
            placeholder="you@business.com"
          />
        </div>
      </div>
      <div class="form-group">
        <label class="form-check">
          <input type="checkbox" name="accept_terms" required />
          <span class="text-sm"
            >I accept the
            <a
              href="{% url 'businesses:legal' %}#terms"
              style="color: var(--color-primary)"
              >Terms of Service and Privacy Policy
            </a></span
          >
        </label>
      </div>
      <div id="bookingError" class="alert alert--error hidden"></div>
      <button
        type="submit"
        class="btn btn--primary btn--block btn--lg"
        id="payNowBtn"
      >
        Pay Now
      </button>
    </form>
  </div>
</div>

<!-- 8. FAQ Accordion -->
<section class="section" id="faq">
  <div class="container">
    <div class="section__header reveal">
      <h2>Frequently Asked Questions</h2>
      <p class="section__subtitle">Got questions? We have answers.</p>
    </div>
    <div class="faq reveal">
      <div class="faq__item">
        <button class="faq__question" onclick="toggleFaq(this)">
          <span>How do I start selling on FlashSale?</span>
          <svg
            class="faq__icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M12 5v14M5 12h14" />
          </svg>
        </button>
        <div class="faq__answer">
          Book a sale window by selecting your start and end dates on the
          calendar, fill in your business details, and complete the booking fee.
          Your seller account and management dashboard will be created
          automatically.
        </div>
      </div>
      <div class="faq__item">
        <button class="faq__question" onclick="toggleFaq(this)">
          <span>What payment methods are supported for buyers?</span>
          <svg
            class="faq__icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M12 5v14M5 12h14" />
          </svg>
        </button>
        <div class="faq__answer">
          All payments are securely processed via Paystack, supporting MTN
          Mobile Money, Telecel Cash, AT Money, and Visa/Mastercard bank cards
          in GHS.
        </div>
      </div>
      <div class="faq__item">
        <button class="faq__question" onclick="toggleFaq(this)">
          <span>What are the pricing model options?</span>
          <svg
            class="faq__icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M12 5v14M5 12h14" />
          </svg>
        </button>
        <div class="faq__answer">
          We offer two simple choices: (1) <strong>Daily Rate</strong> — GHS 50
          upfront per day of sale duration. (2)
          <strong>Commission Model</strong> — GHS 10 activation fee upfront + 5%
          of total sale earnings.
        </div>
      </div>
      <div class="faq__item">
        <button class="faq__question" onclick="toggleFaq(this)">
          <span>Do buyers need to create an account?</span>
          <svg
            class="faq__icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M12 5v14M5 12h14" />
          </svg>
        </button>
        <div class="faq__answer">
          No. Buyers use 1-click guest checkout requiring only name, phone
          number, and delivery email address to eliminate cart abandonment.
        </div>
      </div>
      <div class="faq__item">
        <button class="faq__question" onclick="toggleFaq(this)">
          <span>What happens after my flash sale finishes?</span>
          <svg
            class="faq__icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="M12 5v14M5 12h14" />
          </svg>
        </button>
        <div class="faq__answer">
          Your public link transitions to an "Ended" state while keeping product
          listings in your dashboard catalog. You can easily re-book a future
          window anytime without re-uploading products.
        </div>
      </div>
    </div>

    <!-- 9. Final CTA Banner -->
    <div class="cta-banner reveal">
      <h3 class="cta-banner__title">Ready To Launch Your Flash Sale?</h3>
      <p class="cta-banner__subtitle">
        Join hundreds of Ghanaian businesses driving record sales today.
      </p>
      <a href="#booking" class="btn btn--lg cta-banner__btn">
        Reserve Your Sale Dates Now
      </a>
    </div>
  </div>
</section>
{% endblock %} {% block extra_js %}
<script src="{% static 'js/range_calendar.js' %}"></script>
<script src="{% static 'js/landing.js' %}"></script>
<script>
  function getCookie(name) {
    let v = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
    return v ? v[2] : null;
  }

  const calendar = new RangeCalendar("rangeCalendarContainer", {
    onSelect: (startIso, endIso) => {
      document.getElementById("startDate").value = startIso || "";
      document.getElementById("endDate").value = endIso || "";
      autoQuote();
    },
  });

  let quoteTimeout = null;
  function autoQuote() {
    clearTimeout(quoteTimeout);
    quoteTimeout = setTimeout(calcQuote, 300);
  }

  async function calcQuote() {
    const sDate = document.getElementById("startDate").value;
    const eDate = document.getElementById("endDate").value;
    const resultEl = document.getElementById("quoteResult");
    const proceedBtn = document.getElementById("openBookingBtn");

    if (!sDate || !eDate) {
      resultEl.classList.add("hidden");
      proceedBtn.classList.add("hidden");
      return;
    }

    const pricingModel = document.querySelector(
      'input[name="pricing_model"]:checked',
    ).value;

    try {
      const resp = await fetch("/payments/booking/quote/", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": getCookie("csrftoken"),
        },
        body: JSON.stringify({
          start_date: sDate,
          end_date: eDate,
          start_time: document.getElementById("startTime").value,
          end_time: document.getElementById("endTime").value,
          pricing_model: pricingModel,
        }),
      });
      const data = await resp.json();

      if (resp.ok) {
        resultEl.textContent = data.description;
        resultEl.classList.remove("hidden", "alert--error");
        resultEl.classList.add("alert--info");
        proceedBtn.classList.remove("hidden");
        window._bookingQuote = data;
      } else {
        resultEl.textContent = data.error;
        resultEl.classList.remove("hidden", "alert--info");
        resultEl.classList.add("alert--error");
        proceedBtn.classList.add("hidden");
      }
    } catch (e) {
      resultEl.textContent = "Network error. Please try again.";
      resultEl.classList.remove("hidden", "alert--info");
      resultEl.classList.add("alert--error");
    }
  }

  function openBookingModal() {
    const modal = document.getElementById("bookingModal");
    const quoteEl = document.getElementById("modalQuote");
    if (window._bookingQuote) {
      quoteEl.textContent = window._bookingQuote.description;
    }
    modal.classList.add("is-open");
    document.body.style.overflow = "hidden";
  }

  function closeBookingModal() {
    document.getElementById("bookingModal").classList.remove("is-open");
    document.body.style.overflow = "";
  }

  function selectBookingAuthMethod(method) {
    const magicCard = document.getElementById("bookingCardMagic");
    const passCard = document.getElementById("bookingCardPassword");
    const passFields = document.getElementById("bookingPasswordFields");
    const authMethodInput = document.getElementById("bookingAuthMethod");
    const usernameInput = document.getElementById("bookingUsername");
    const passwordInput = document.getElementById("bookingPassword");

    authMethodInput.value = method;

    if (method === "magic") {
      magicCard.classList.add("active");
      magicCard.style.borderColor = "var(--color-primary, #0D9488)";
      magicCard.style.background = "rgba(13, 148, 136, 0.04)";
      passCard.classList.remove("active");
      passCard.style.borderColor = "#E2E8F0";
      passCard.style.background = "#FFFFFF";
      passFields.style.display = "none";
      if (usernameInput) usernameInput.removeAttribute("required");
      if (passwordInput) passwordInput.removeAttribute("required");
    } else {
      passCard.classList.add("active");
      passCard.style.borderColor = "var(--color-primary, #0D9488)";
      passCard.style.background = "rgba(13, 148, 136, 0.04)";
      magicCard.classList.remove("active");
      magicCard.style.borderColor = "#E2E8F0";
      magicCard.style.background = "#FFFFFF";
      passFields.style.display = "grid";
      if (usernameInput) usernameInput.setAttribute("required", "required");
      if (passwordInput) passwordInput.setAttribute("required", "required");
    }
  }

  document
    .getElementById("bookingForm")
    .addEventListener("submit", async function (e) {
      e.preventDefault();
      const errorEl = document.getElementById("bookingError");
      const btn = document.getElementById("payNowBtn");
      const form = e.target;

      btn.disabled = true;
      btn.textContent = "Processing...";
      errorEl.classList.add("hidden");

      const pricingModel = document.querySelector(
        'input[name="pricing_model"]:checked',
      ).value;
      const authMethod = document.getElementById("bookingAuthMethod").value;

      try {
        const resp = await fetch("/payments/booking/initiate/", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": getCookie("csrftoken"),
          },
          body: JSON.stringify({
            auth_method: authMethod,
            username: form.username ? form.username.value : "",
            password: form.password ? form.password.value : "",
            business_name: form.business_name.value,
            phone: form.phone.value,
            email: form.email.value,
            accept_terms: form.accept_terms.checked,
            start_date: document.getElementById("startDate").value,
            end_date: document.getElementById("endDate").value,
            start_time: document.getElementById("startTime").value,
            end_time: document.getElementById("endTime").value,
            pricing_model: pricingModel,
          }),
        });
        const data = await resp.json();

        if (data.success) {
          window.location.href = data.authorization_url;
        } else {
          errorEl.textContent = data.error;
          errorEl.classList.remove("hidden");
        }
      } catch (e) {
        errorEl.textContent = "Network error. Please try again.";
        errorEl.classList.remove("hidden");
      } finally {
        btn.disabled = false;
        btn.textContent = "Pay Now";
      }
    });

  function formatGhanaPhoneInput(inputEl) {
    let raw = inputEl.value.replace(/\D/g, "");
    if (raw.startsWith("233")) raw = raw.substring(3);
    if (raw.startsWith("0")) raw = raw.substring(1);
    if (raw.length > 9) raw = raw.substring(0, 9);
    inputEl.value = raw;
  }

  function toggleFaq(btn) {
    btn.closest(".faq__item").classList.toggle("is-open");
  }
</script>
{% endblock %}