{% extends "base.html" %}

{% block title %}Download - PaddocLabs{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/static/css/paddoclabs-glass.css?v=17756500">
<style>
.dl { max-width:1200px; margin:0 auto; padding:60px 24px 100px; }

/* HERO */
.dl-hero { text-align:center; margin-bottom:72px; position:relative; }
.dl-hero::before {
  content:''; position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(241,90,36,0.12) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
.dl-hero > * { position:relative; z-index:1; }
.dl-hero__badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 20px; margin-bottom:24px;
  background:rgba(241,90,36,0.08); border:1px solid rgba(241,90,36,0.2);
  border-radius:50px; font-size:12px; font-weight:600; color:#f15a24;
  letter-spacing:0.5px;
}
.dl-hero__badge i { font-size:8px; animation:pulse 2s infinite; }
.dl-hero__title {
  font-family:'Orbitron',sans-serif; font-size:clamp(1.4rem,3vw,2.2rem);
  font-weight:900; color:#fff; letter-spacing:3px; text-transform:uppercase;
  margin-bottom:16px; line-height:1.1;
}
.dl-hero__title span {
  background:linear-gradient(135deg, #f15a24 0%, #D946EF 50%, #f15a24 100%);
  background-size:200% auto; animation:dl-grad 4s linear infinite;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
@keyframes dl-grad { 0%{background-position:0% center} 100%{background-position:200% center} }
.dl-hero__sub {
  font-size:17px; color:rgba(255,255,255,0.45); max-width:520px; margin:0 auto; line-height:1.7;
}

/* MAIN CTA */
.dl-cta {
  background:rgba(255,255,255,0.03); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,0.08); border-radius:28px;
  padding:52px 48px; margin-bottom:52px; text-align:center; position:relative; overflow:hidden;
}
.dl-cta::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(241,90,36,0.6), rgba(217,70,239,0.4), transparent);
}
.dl-cta::after {
  content:''; position:absolute; inset:0; border-radius:28px;
  background:radial-gradient(ellipse at 50% 0%, rgba(241,90,36,0.06) 0%, transparent 60%);
  pointer-events:none;
}
.dl-cta > * { position:relative; z-index:1; }
.dl-cta__ver {
  display:inline-flex; align-items:center; gap:12px;
  padding:6px 18px; margin-bottom:28px;
  background:rgba(241,90,36,0.06); border:1px solid rgba(241,90,36,0.15);
  border-radius:50px; font-size:13px; color:#f15a24; font-weight:600;
}
.dl-cta__os {
  font-family:'Orbitron',sans-serif; font-size:clamp(1.4rem,3vw,2rem);
  font-weight:900; color:#fff; margin-bottom:8px; letter-spacing:1px;
}
.dl-cta__note { font-size:13px; color:rgba(255,255,255,0.3); margin-bottom:32px; }
.dl-btn {
  display:inline-flex; align-items:center; gap:12px;
  padding:18px 52px; font-size:16px; font-weight:800; font-family:'Orbitron',sans-serif;
  letter-spacing:1.5px; text-transform:uppercase; color:#fff; text-decoration:none;
  background:linear-gradient(135deg, #f15a24, #D946EF);
  border:none; border-radius:16px; cursor:pointer;
  box-shadow:0 8px 32px rgba(241,90,36,0.35), 0 0 80px rgba(241,90,36,0.15);
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1); position:relative;
}
.dl-btn:hover {
  transform:translateY(-3px) scale(1.02); color:#fff;
  box-shadow:0 12px 48px rgba(241,90,36,0.5), 0 0 120px rgba(241,90,36,0.2);
}
.dl-btn::before {
  content:''; position:absolute; inset:-3px; border-radius:19px;
  background:linear-gradient(135deg, #f15a24, #D946EF);
  opacity:0.4; filter:blur(12px); z-index:-1; transition:opacity 0.3s;
}
.dl-btn:hover::before { opacity:0.7; }
.dl-cta__req { margin-top:28px; font-size:12px; color:rgba(255,255,255,0.25); }

/* 3 CARDS */
.dl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:52px; }
.dl-card {
  background:rgba(255,255,255,0.025); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.06); border-radius:20px;
  padding:32px 28px; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden;
}
.dl-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition:background 0.3s;
}
.dl-card:hover {
  background:rgba(255,255,255,0.04); border-color:rgba(241,90,36,0.2);
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(0,0,0,0.3), 0 0 60px rgba(241,90,36,0.08);
}
.dl-card:hover::before { background:linear-gradient(90deg, transparent, rgba(241,90,36,0.4), transparent); }
.dl-card__icon {
  width:48px; height:48px; border-radius:14px; margin-bottom:20px;
  background:linear-gradient(135deg, rgba(241,90,36,0.12), rgba(217,70,239,0.08));
  border:1px solid rgba(241,90,36,0.2); display:flex; align-items:center; justify-content:center;
  font-size:20px; color:#f15a24;
}
.dl-card__title {
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:#f15a24; margin-bottom:16px;
}

/* Platforms */
.dl-plat {
  display:flex; align-items:center; gap:14px; padding:12px 14px;
  border-radius:12px; margin-bottom:6px; transition:all 0.25s; border:1px solid transparent;
}
.dl-plat--on { background:rgba(241,90,36,0.06); border-color:rgba(241,90,36,0.15); }
.dl-plat--off { opacity:0.35; }
.dl-plat__ic { font-size:18px; color:rgba(255,255,255,0.5); width:22px; text-align:center; }
.dl-plat--on .dl-plat__ic { color:#f15a24; }
.dl-plat__name { font-size:14px; font-weight:600; color:#fff; flex:1; }
.dl-plat__tag { font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 10px; border-radius:50px; }
.dl-plat__tag--ok { background:rgba(34,197,94,0.1); color:#22c55e; border:1px solid rgba(34,197,94,0.2); }
.dl-plat__tag--soon { background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.25); border:1px solid rgba(255,255,255,0.06); }

/* Steps */
.dl-step { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.dl-step:last-child { border-bottom:none; }
.dl-step__n {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, rgba(241,90,36,0.15), rgba(217,70,239,0.08));
  border:1.5px solid rgba(241,90,36,0.3);
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-size:13px; font-weight:800; color:#f15a24;
}
.dl-step__t { font-size:14px; font-weight:700; color:#fff; margin-bottom:3px; }
.dl-step__d { font-size:13px; color:rgba(255,255,255,0.35); line-height:1.5; }

/* Reqs */
.dl-req { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.dl-req:last-child { border-bottom:none; }
.dl-req__ic { color:rgba(241,90,36,0.5); width:18px; text-align:center; font-size:14px; }
.dl-req__lb { font-size:11px; color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; min-width:50px; }
.dl-req__vl { font-size:13px; color:rgba(255,255,255,0.7); font-weight:500; }

/* FAQ */
.dl-faq {
  background:rgba(255,255,255,0.02); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.05); border-radius:20px; padding:40px;
}
.dl-faq__title {
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:#f15a24; margin-bottom:24px;
}
.dl-faq-item { border-bottom:1px solid rgba(255,255,255,0.04); }
.dl-faq-item:last-child { border-bottom:none; }
.dl-faq-q {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 0; cursor:pointer; font-size:14px; font-weight:600; color:rgba(255,255,255,0.75);
  transition:color 0.2s; border:none; background:none; width:100%; text-align:left;
}
.dl-faq-q:hover { color:#f15a24; }
.dl-faq-q i.fa-chevron-down { font-size:10px; color:rgba(255,255,255,0.2); transition:transform 0.3s; }
.dl-faq-a { padding:0 0 16px; font-size:13px; color:rgba(255,255,255,0.4); line-height:1.7; }

/* Animations */
.dl-anim { opacity:0; transform:translateY(24px); animation:dl-in 0.7s ease-out forwards; }
.dl-anim-d1 { animation-delay:0.1s; }
.dl-anim-d2 { animation-delay:0.2s; }
.dl-anim-d3 { animation-delay:0.3s; }
.dl-anim-d4 { animation-delay:0.4s; }
@keyframes dl-in { to { opacity:1; transform:translateY(0); } }

@media (max-width:900px) { .dl-grid { grid-template-columns:1fr; } }
@media (max-width:600px) {
  .dl { padding:32px 16px 60px; }
  .dl-cta { padding:32px 20px; }
  .dl-btn { padding:16px 32px; font-size:14px; }
  .dl-faq { padding:24px 20px; }
}
</style>
{% endblock %}

{% block content %}
<div class="dl">

  <div class="dl-cta dl-anim dl-anim-d1">
    <div class="dl-cta__ver"><i class="fas fa-tag"></i> v1.0.0 &bull; January 2026 &bull; ~15 MB</div>
    <div class="dl-cta__os"><i class="fab fa-windows" style="margin-right:8px;"></i> Download for Windows</div>
    <div class="dl-cta__note">Standalone executable — extract and race. No admin rights needed.</div>
    <a href="#" class="dl-btn"><i class="fab fa-windows"></i> Download Now</a>
    <div class="dl-cta__req">Windows 10+ &bull; 64-bit &bull; 50 MB disk &bull; 4 GB RAM</div>
  </div>

  <div class="dl-grid">
    <div class="dl-card dl-anim dl-anim-d2">
      <div class="dl-card__icon"><i class="fas fa-desktop"></i></div>
      <div class="dl-card__title">Platforms</div>
      <div class="dl-plat dl-plat--on">
        <span class="dl-plat__ic"><i class="fab fa-windows"></i></span>
        <span class="dl-plat__name">Windows</span>
        <span class="dl-plat__tag dl-plat__tag--ok">Available</span>
      </div>
      <div class="dl-plat dl-plat--off">
        <span class="dl-plat__ic"><i class="fab fa-apple"></i></span>
        <span class="dl-plat__name">macOS</span>
        <span class="dl-plat__tag dl-plat__tag--soon">Soon</span>
      </div>
      <div class="dl-plat dl-plat--off">
        <span class="dl-plat__ic"><i class="fab fa-linux"></i></span>
        <span class="dl-plat__name">Linux</span>
        <span class="dl-plat__tag dl-plat__tag--soon">Soon</span>
      </div>
    </div>

    <div class="dl-card dl-anim dl-anim-d3">
      <div class="dl-card__icon"><i class="fas fa-rocket"></i></div>
      <div class="dl-card__title">Quick Start</div>
      <div class="dl-step">
        <div class="dl-step__n">1</div>
        <div><div class="dl-step__t">Download &amp; Extract</div><div class="dl-step__d">Grab the ZIP, extract anywhere.</div></div>
      </div>
      <div class="dl-step">
        <div class="dl-step__n">2</div>
        <div><div class="dl-step__t">Run sidebar.exe</div><div class="dl-step__d">Double-click to launch. No install.</div></div>
      </div>
      <div class="dl-step">
        <div class="dl-step__n">3</div>
        <div><div class="dl-step__t">Race</div><div class="dl-step__d">Overlay appears on game start.</div></div>
      </div>
    </div>

    <div class="dl-card dl-anim dl-anim-d4">
      <div class="dl-card__icon"><i class="fas fa-microchip"></i></div>
      <div class="dl-card__title">Requirements</div>
      <div class="dl-req"><span class="dl-req__ic"><i class="fab fa-windows"></i></span><span class="dl-req__lb">OS</span><span class="dl-req__vl">Windows 10+ (64-bit)</span></div>
      <div class="dl-req"><span class="dl-req__ic"><i class="fas fa-microchip"></i></span><span class="dl-req__lb">CPU</span><span class="dl-req__vl">Intel i3 / Ryzen 3+</span></div>
      <div class="dl-req"><span class="dl-req__ic"><i class="fas fa-memory"></i></span><span class="dl-req__lb">RAM</span><span class="dl-req__vl">4 GB (8 rec.)</span></div>
      <div class="dl-req"><span class="dl-req__ic"><i class="fas fa-hdd"></i></span><span class="dl-req__lb">Disk</span><span class="dl-req__vl">50 MB SSD pref.</span></div>
      <div class="dl-req"><span class="dl-req__ic"><i class="fas fa-wifi"></i></span><span class="dl-req__lb">Net</span><span class="dl-req__vl">5 Mbps+ (engineer)</span></div>
    </div>
  </div>

  <div class="dl-faq dl-anim dl-anim-d4">
    <div class="dl-faq__title">Frequently Asked Questions</div>
    <div class="accordion" id="faqAccordion">
      <div class="dl-faq-item">
        <h5 class="dl-faq-q" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true">
          <span>Is PaddocLabs really free?</span><i class="fas fa-chevron-down"></i>
        </h5>
        <div id="faq1" class="collapse show" data-bs-parent="#faqAccordion">
          <div class="dl-faq-a">Yes! PaddocLabs FREE includes core telemetry overlay and basic features forever. Upgrade to PRO for advanced features like engineer mode and custom overlays.</div>
        </div>
      </div>
      <div class="dl-faq-item">
        <h5 class="dl-faq-q" data-bs-toggle="collapse" data-bs-target="#faq2">
          <span>Which games are supported?</span><i class="fas fa-chevron-down"></i>
        </h5>
        <div id="faq2" class="collapse" data-bs-parent="#faqAccordion">
          <div class="dl-faq-a">All major sim racing titles: iRacing, Assetto Corsa, ACC, F1, rFactor 2, Project CARS 2, Automobilista 2, Le Mans Ultimate and more. See the <a href="/features" style="color:#f15a24;">features page</a>.</div>
        </div>
      </div>
      <div class="dl-faq-item">
        <h5 class="dl-faq-q" data-bs-toggle="collapse" data-bs-target="#faq3">
          <span>Do I need to install anything?</span><i class="fas fa-chevron-down"></i>
        </h5>
        <div id="faq3" class="collapse" data-bs-parent="#faqAccordion">
          <div class="dl-faq-a">No. PaddocLabs is a standalone .exe — extract and run. No admin rights, no registry, no dependencies.</div>
        </div>
      </div>
      <div class="dl-faq-item">
        <h5 class="dl-faq-q" data-bs-toggle="collapse" data-bs-target="#faq4">
          <span>Will this affect my FPS?</span><i class="fas fa-chevron-down"></i>
        </h5>
        <div id="faq4" class="collapse" data-bs-parent="#faqAccordion">
          <div class="dl-faq-a">Negligible impact — typically less than 1% FPS drop. Hardware-accelerated rendering with minimal CPU/GPU overhead.</div>
        </div>
      </div>
      <div class="dl-faq-item">
        <h5 class="dl-faq-q" data-bs-toggle="collapse" data-bs-target="#faq5">
          <span>How does Engineer Mode work?</span><i class="fas fa-chevron-down"></i>
        </h5>
        <div id="faq5" class="collapse" data-bs-parent="#faqAccordion">
          <div class="dl-faq-a">Your telemetry streams to a secure web dashboard your engineer can access. Live data, setup notes, integrated Discord voice — all real-time. Requires PRO.</div>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
{% endblock %}