{% extends "base.html" %}
{% block title %}{{ t.planner_page_title }} - {{ config.APP_NAME }}{% endblock %}

{% block head %}
<meta name="description" content="{{ t.planner_meta_desc }}">
<meta property="og:title" content="{{ t.planner_page_title }} - {{ config.APP_NAME }}">
<meta property="og:description" content="{{ t.planner_meta_desc }}">
<meta property="og:type" content="website">
<meta property="og:image" content="{{ url_for('static', filename='images/planner-screenshot.png', _external=True) }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/planner.css') }}?v={{ v }}">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
{% endblock %}

{% macro slider(name, label, min, max, step, value, tip='') %}
<div class="slider-group">
  <label>
    <span class="slider-group__label">{{ label | tformat(currency=currency_sym) }}</span>{% if tip %}<span class="ti">i<span class="tp">{{ tip }}</span></span>{% endif %}
  </label>
  <div class="slider-combo">
    <input type="range" name="{{ name }}" min="{{ min }}" max="{{ max }}" step="{{ step }}" value="{{ value }}"
           hx-post="{{ url_for('planner.calculate') }}"
           hx-trigger="input changed delay:200ms"
           hx-target="#tab-content"
           hx-include="#planner-form">
    <input type="number" value="{{ value }}" step="{{ step }}" data-sync="{{ name }}">
  </div>
</div>
{% endmacro %}

{% macro pill_btn(key, val, label, active, extra_js='') %}
<button type="button" class="pill-btn {{ 'pill-btn--active' if active }}"
        data-toggle="{{ key }}" data-val="{{ val }}"
        hx-post="{{ url_for('planner.calculate') }}"
        hx-target="#tab-content"
        hx-include="#planner-form"
        onclick="setToggle(this,'{{ key }}','{{ val }}'){{ (';' ~ extra_js) if extra_js else '' }}">{{ label }}</button>
{% endmacro %}

{% block content %}
<div class="planner-app">
  <header class="planner-header">
    <h1>{{ t.planner_page_title }}</h1>
    <span id="headerTag" class="planner-summary">{{ s.venue == 'indoor' and t.label_indoor or t.label_outdoor }} &middot; {{ s.own == 'buy' and t.label_build_buy or t.label_rent }} &middot; {{ d.totalCourts }} {{ t.label_courts }} &middot; {{ d.capex | fmt_k }}</span>

    {% if user %}
    <div class="scenario-controls">
      <button id="scenarioListBtn"
              hx-get="{{ url_for('planner.scenario_list') }}"
              hx-target="#scenario-drawer"
              hx-swap="innerHTML">
        {{ t.btn_my_scenarios }} ({{ scenario_count }})
      </button>
      <button id="saveScenarioBtn" onclick="document.getElementById('saveForm').style.display=''">{{ t.btn_save }}</button>
    </div>
    <div id="saveForm" style="display:none;position:absolute;right:1rem;top:100%;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:0 4px 16px rgba(0,0,0,0.1);z-index:80;width:240px">
      <label style="font-size:11px;color:var(--txt-2);display:block;margin-bottom:4px">{{ t.scenario_name_label|default('Scenario name') }}</label>
      <input type="text" name="scenario_name" value="{{ t.scenario_default_name|default('My Scenario') }}"
             style="width:100%;padding:6px 10px;border:1px solid var(--border-2);border-radius:8px;font-size:12px;font-family:'DM Sans',sans-serif;margin-bottom:8px;box-sizing:border-box">
      <div style="display:flex;gap:6px">
        <button type="button"
                hx-post="{{ url_for('planner.save_scenario') }}"
                hx-include="#planner-form, [name=scenario_name]"
                hx-target="#save-feedback"
                hx-swap="innerHTML"
                onclick="document.getElementById('saveForm').style.display='none'"
                style="flex:1;padding:6px;font-size:12px;font-weight:600;background:var(--cta);color:#fff;border:none;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif">{{ t.btn_save }}</button>
        <button type="button" onclick="this.closest('#saveForm').style.display='none'"
                style="padding:6px 10px;font-size:12px;background:none;border:1px solid var(--border);border-radius:8px;cursor:pointer;color:var(--txt-2)">{{ t.btn_cancel|default('Cancel') }}</button>
      </div>
    </div>
    {% endif %}
  </header>

  <nav id="nav" class="tab-nav">
    <button class="tab-btn tab-btn--active" data-tab="assumptions" onclick="setActiveTab('assumptions')">{{ t.tab_assumptions }}</button>
    {% for tab_id, tab_key in [('capex','tab_capex'),('operating','tab_operating'),('cashflow','tab_cashflow'),('returns','tab_returns')] %}
    <button class="tab-btn" data-tab="{{ tab_id }}"
            hx-post="{{ url_for('planner.calculate') }}"
            hx-target="#tab-content"
            hx-include="#planner-form"
            onclick="setActiveTab('{{ tab_id }}')">{{ t[tab_key] }}</button>
    {% endfor %}
  </nav>

  <main class="planner-main">
    <!-- ═══════════════════════════════════════════════════════════════════
         FORM: wraps wizard + all state inputs. hx-include references this.
         ═══════════════════════════════════════════════════════════════════ -->
    <form id="planner-form">
      <!-- State: active tab -->
      <input type="hidden" name="activeTab" id="h-activeTab" value="{{ active_tab }}">

      <!-- State: toggles (managed by setToggle JS) -->
      <input type="hidden" name="venue" id="h-venue" value="{{ s.venue }}">
      <input type="hidden" name="own" id="h-own" value="{{ s.own }}">
      <input type="hidden" name="country" id="h-country" value="{{ s.country }}">
      <input type="hidden" name="glassType" id="h-glassType" value="{{ s.glassType }}">
      <input type="hidden" name="lightingType" id="h-lightingType" value="{{ s.lightingType }}">

      <!-- State: ramp and season arrays -->
      {% for val in s.ramp %}<input type="hidden" name="ramp" value="{{ val }}">{% endfor %}
      {% for val in s.season %}<input type="hidden" name="season" value="{{ val }}">{% endfor %}

      <!-- ═══════════════════════════════════════════════════════════════
           WIZARD (assumptions tab)
           ═══════════════════════════════════════════════════════════════ -->
      <div id="planner-wizard">
        <div class="wizard-header" id="wizardHeader">
          <div class="wizard-dots" id="wizardDots">
            {% set steps = [('wiz_venue',1),('wiz_pricing',2),('wiz_costs',3),('wiz_finance',4)] %}
            {% for key, n in steps %}
            <button type="button" class="wiz-dot {{ 'wiz-dot--active' if n == 1 }}" data-wiz="{{ n }}" onclick="showWizStep({{ n }})">
              <span class="wiz-dot__num">{{ n }}</span>{{ t[key] }}
            </button>
            {% endfor %}
          </div>
          <a href="{{ url_for('planner.index') }}" class="btn-reset">{{ t.btn_reset }}</a>
        </div>

        <!-- Step 1: Venue -->
        <div class="wizard-step active" data-wiz="1">
          <h2 class="wizard-step__title">{{ t.planner_step1_title }}</h2>
          <p class="wizard-step__sub">{{ t.planner_step1_sub }}</p>

          <div class="mb-section">
            <label class="slider-group__label">{{ t.planner_label_environment }}</label>
            <div class="toggle-group">
              <button type="button" class="toggle-btn {{ 'toggle-btn--active' if s.venue == 'indoor' }}"
                      data-toggle="venue" data-val="indoor"
                      hx-post="{{ url_for('planner.calculate') }}"
                      hx-target="#tab-content" hx-include="#planner-form"
                      onclick="setToggle(this,'venue','indoor')">{{ t.toggle_indoor }}</button>
              <button type="button" class="toggle-btn {{ 'toggle-btn--active' if s.venue == 'outdoor' }}"
                      data-toggle="venue" data-val="outdoor"
                      hx-post="{{ url_for('planner.calculate') }}"
                      hx-target="#tab-content" hx-include="#planner-form"
                      onclick="setToggle(this,'venue','outdoor')">{{ t.toggle_outdoor }}</button>
            </div>
            <label class="slider-group__label">{{ t.planner_label_ownership }}</label>
            <div class="toggle-group">
              <button type="button" class="toggle-btn {{ 'toggle-btn--active' if s.own == 'rent' }}"
                      data-toggle="own" data-val="rent"
                      hx-post="{{ url_for('planner.calculate') }}"
                      hx-target="#tab-content" hx-include="#planner-form"
                      onclick="setToggle(this,'own','rent')">{{ t.toggle_rent }}</button>
              <button type="button" class="toggle-btn {{ 'toggle-btn--active' if s.own == 'buy' }}"
                      data-toggle="own" data-val="buy"
                      hx-post="{{ url_for('planner.calculate') }}"
                      hx-target="#tab-content" hx-include="#planner-form"
                      onclick="setToggle(this,'own','buy')">{{ t.toggle_buy }}</button>
            </div>
          </div>

          <div class="mb-section">
            <div class="pill-group">
              <label><span class="slider-group__label">{{ t.pill_country }}</span></label>
              <div class="pill-options">
                {% for code, lkey in [('DE','country_de'),('ES','country_es'),('IT','country_it'),('FR','country_fr'),('NL','country_nl'),('SE','country_se'),('UK','country_uk'),('US','country_us')] %}
                <button type="button" class="pill-btn {{ 'pill-btn--active' if s.country == code }}"
                        data-toggle="country" data-val="{{ code }}"
                        hx-post="{{ url_for('planner.calculate') }}"
                        hx-target="#tab-content" hx-include="#planner-form"
                        onclick="setToggle(this,'country','{{ code }}');setCountryPreset('{{ code }}')">{{ t[lkey] }}</button>
                {% endfor %}
              </div>
            </div>
            {{ slider('permitsCompliance', t.sl_permits, 0, 50000, 1000, s.permitsCompliance, t.tip_permits_compliance) }}
          </div>

          <details class="wizard-details" open>
            <summary class="wizard-details__summary">{{ t.planner_section_court_config }}</summary>
            <div class="wizard-details__body">
              {{ slider('dblCourts', t.sl_dbl_courts, 0, 30, 1, s.dblCourts, t.tip_dbl_courts) }}
              {{ slider('sglCourts', t.sl_sgl_courts, 0, 30, 1, s.sglCourts, t.tip_sgl_courts) }}
              <div class="court-summary" id="courtSummary">{% include "partials/court_summary.html" %}</div>
            </div>
          </details>

          <details class="wizard-details">
            <summary class="wizard-details__summary">{{ t.planner_section_space_req }}</summary>
            <div class="wizard-details__body">
              <div data-show-venue="indoor">
                {{ slider('sqmPerDblHall', t.sl_sqm_dbl_hall, 200, 600, 10, s.sqmPerDblHall, t.tip_sqm_dbl_hall) }}
                {{ slider('sqmPerSglHall', t.sl_sqm_sgl_hall, 120, 400, 10, s.sqmPerSglHall, t.tip_sqm_sgl_hall) }}
              </div>
              <div data-show-venue="outdoor">
                {{ slider('sqmPerDblOutdoor', t.sl_sqm_dbl_outdoor, 200, 500, 10, s.sqmPerDblOutdoor, t.tip_sqm_dbl_outdoor) }}
                {{ slider('sqmPerSglOutdoor', t.sl_sqm_sgl_outdoor, 120, 350, 10, s.sqmPerSglOutdoor, t.tip_sqm_sgl_outdoor) }}
              </div>
            </div>
          </details>
        </div>

        <!-- Step 2: Pricing & Utilization -->
        <div class="wizard-step" data-wiz="2">
          <h2 class="wizard-step__title">{{ t.planner_step2_title }}</h2>
          <p class="wizard-step__sub">{{ t.planner_step2_sub }}</p>

          <details class="wizard-details" open>
            <summary class="wizard-details__summary">{{ t.planner_section_pricing }} <span class="wizard-details__hint">{{ t.planner_hint_per_court }}</span></summary>
            <div class="wizard-details__body">
              {{ slider('ratePeak', t.sl_rate_peak, 0, 150, 1, s.ratePeak, t.tip_rate_peak) }}
              {{ slider('rateOffPeak', t.sl_rate_offpeak, 0, 150, 1, s.rateOffPeak, t.tip_rate_offpeak) }}
              {{ slider('rateSingle', t.sl_rate_single, 0, 150, 1, s.rateSingle, t.tip_rate_single) }}
              {{ slider('peakPct', t.sl_peak_pct, 0, 100, 1, s.peakPct, t.tip_peak_pct) }}
              {{ slider('bookingFee', t.sl_booking_fee, 0, 30, 1, s.bookingFee, t.tip_booking_fee) }}
            </div>
          </details>

          <details class="wizard-details" open>
            <summary class="wizard-details__summary">{{ t.planner_section_util }}</summary>
            <div class="wizard-details__body">
              {{ slider('utilTarget', t.sl_util_target, 0, 100, 1, s.utilTarget, t.tip_util_target) }}
              {{ slider('hoursPerDay', t.sl_hours_per_day, 0, 24, 1, s.hoursPerDay, t.tip_hours_per_day) }}
              {{ slider('daysPerMonthIndoor', t.sl_days_indoor, 0, 31, 1, s.daysPerMonthIndoor, t.tip_days_indoor) }}
              {{ slider('daysPerMonthOutdoor', t.sl_days_outdoor, 0, 31, 1, s.daysPerMonthOutdoor, t.tip_days_outdoor) }}
            </div>
          </details>

          <details class="wizard-details">
            <summary class="wizard-details__summary">{{ t.sl_ancillary_header }} <span class="wizard-details__hint">{{ t.planner_hint_optional|default('Optional') }}</span></summary>
            <div class="wizard-details__body">
              {{ slider('membershipRevPerCourt', t.sl_membership_rev, 0, 2000, 50, s.membershipRevPerCourt, t.tip_membership_rev) }}
              {{ slider('fbRevPerCourt', t.sl_fb_rev, 0, 2000, 25, s.fbRevPerCourt, t.tip_fb_rev) }}
              {{ slider('coachingRevPerCourt', t.sl_coaching_rev, 0, 2000, 25, s.coachingRevPerCourt, t.tip_coaching_rev) }}
              {{ slider('retailRevPerCourt', t.sl_retail_rev, 0, 1000, 10, s.retailRevPerCourt, t.tip_retail_rev) }}
            </div>
          </details>
        </div>

        <!-- Step 3: Investment & Build Costs -->
        <div class="wizard-step" data-wiz="3">
          <h2 class="wizard-step__title">{{ t.planner_step3_title }}</h2>
          <p class="wizard-step__sub">{{ t.planner_step3_sub }}</p>

          <details class="wizard-details" open>
            <summary class="wizard-details__summary">{{ t.planner_section_capex }} <span class="wizard-details__hint">{{ t.planner_hint_adjust }}</span></summary>
            <div class="wizard-details__body">
              <div class="pill-group">
                <label><span class="slider-group__label">{{ t.pill_glass_type }}</span><span class="ti">i<span class="tp">{{ t.tip_glass_type }}</span></span></label>
                <div class="pill-options">
                  {{ pill_btn('glassType','standard', t.pill_glass_standard, s.glassType == 'standard') }}
                  {{ pill_btn('glassType','panoramic', t.pill_glass_panoramic, s.glassType == 'panoramic') }}
                </div>
              </div>
              <div class="pill-group">
                <label><span class="slider-group__label">{{ t.pill_lighting_type }}</span></label>
                <div class="pill-options">
                  {{ pill_btn('lightingType','led_standard', t.pill_light_led_standard, s.lightingType == 'led_standard') }}
                  {{ pill_btn('lightingType','led_competition', t.pill_light_led_competition, s.lightingType == 'led_competition') }}
                  <span data-show-venue="outdoor">{{ pill_btn('lightingType','natural', t.pill_light_natural, s.lightingType == 'natural') }}</span>
                </div>
              </div>
              {{ slider('courtCostDbl', t.sl_court_cost_dbl, 0, 80000, 1000, s.courtCostDbl, t.tip_court_cost_dbl) }}
              {{ slider('courtCostSgl', t.sl_court_cost_sgl, 0, 60000, 1000, s.courtCostSgl, t.tip_court_cost_sgl) }}
            </div>
          </details>

          <details class="wizard-details" open>
            <summary class="wizard-details__summary">{{ t.planner_section_building|default('Building & Facility') }}</summary>
            <div class="wizard-details__body">
              <!-- Indoor + Buy -->
              <div data-show-capex="indoor-buy">
                {{ slider('hallCostSqm', t.sl_hall_cost_sqm, 0, 2000, 10, s.hallCostSqm, t.tip_hall_cost_sqm) }}
                {{ slider('foundationSqm', t.sl_foundation_sqm, 0, 400, 5, s.foundationSqm, t.tip_foundation_sqm) }}
                {{ slider('landPriceSqm', t.sl_land_price_sqm, 0, 500, 5, s.landPriceSqm, t.tip_land_price_sqm) }}
                {{ slider('hvac', t.sl_hvac, 0, 500000, 5000, s.hvac, t.tip_hvac) }}
                {{ slider('electrical', t.sl_electrical, 0, 400000, 5000, s.electrical, t.tip_electrical) }}
                {{ slider('sanitary', t.sl_sanitary, 0, 400000, 5000, s.sanitary, t.tip_sanitary) }}
                {{ slider('fireProtection', t.sl_fire, 0, 500000, 5000, s.fireProtection, t.tip_fire_protection) }}
                {{ slider('planning', t.sl_planning, 0, 500000, 5000, s.planning, t.tip_planning) }}
              </div>
              <!-- Indoor + Rent -->
              <div data-show-capex="indoor-rent">
                {{ slider('floorPrep', t.sl_floor_prep, 0, 100000, 1000, s.floorPrep, t.tip_floor_prep) }}
                {{ slider('hvacUpgrade', t.sl_hvac_upgrade, 0, 200000, 1000, s.hvacUpgrade, t.tip_hvac_upgrade) }}
                {{ slider('lightingUpgrade', t.sl_lighting_upgrade, 0, 100000, 1000, s.lightingUpgrade, t.tip_lighting_upgrade) }}
                {{ slider('fitout', t.sl_fitout, 0, 300000, 1000, s.fitout, t.tip_fitout) }}
              </div>
              <!-- Outdoor -->
              <div data-show-capex="outdoor">
                {{ slider('outdoorFoundation', t.sl_outdoor_foundation, 0, 150, 1, s.outdoorFoundation, t.tip_outdoor_foundation) }}
                {{ slider('outdoorSiteWork', t.sl_outdoor_site_work, 0, 60000, 500, s.outdoorSiteWork, t.tip_outdoor_site_work) }}
                {{ slider('outdoorLighting', t.sl_outdoor_lighting, 0, 20000, 500, s.outdoorLighting, t.tip_outdoor_lighting) }}
                {{ slider('outdoorFencing', t.sl_outdoor_fencing, 0, 40000, 500, s.outdoorFencing, t.tip_outdoor_fencing) }}
                <div data-show-capex="outdoor-buy">{{ slider('landPriceSqm', t.sl_land_price_sqm, 0, 500, 5, s.landPriceSqm, t.tip_land_price_sqm) }}</div>
              </div>
            </div>
          </details>

          <details class="wizard-details">
            <summary class="wizard-details__summary">{{ t.planner_section_other_costs|default('Other Costs') }}</summary>
            <div class="wizard-details__body">
              {{ slider('workingCapital', t.sl_working_capital, 0, 200000, 1000, s.workingCapital, t.tip_working_capital) }}
              {{ slider('contingencyPct', t.sl_contingency, 0, 30, 1, s.contingencyPct, t.tip_contingency) }}
              {{ slider('budgetTarget', t.sl_budget_target, 0, 5000000, 10000, s.budgetTarget, t.tip_budget_target) }}
            </div>
          </details>
        </div>

        <!-- Step 4: Operations & Financing -->
        <div class="wizard-step" data-wiz="4">
          <h2 class="wizard-step__title">{{ t.planner_step4_title }}</h2>
          <p class="wizard-step__sub">{{ t.planner_step4_sub }}</p>

          <details class="wizard-details" open>
            <summary class="wizard-details__summary">{{ t.planner_section_opex }}</summary>
            <div class="wizard-details__body">
              <div data-show-opex="indoor-rent">{{ slider('rentSqm', t.sl_rent_sqm, 0, 25, 0.5, s.rentSqm, t.tip_rent_sqm) }}</div>
              <div data-show-opex="outdoor-rent">{{ slider('outdoorRent', t.sl_outdoor_rent, 0, 5000, 50, s.outdoorRent, t.tip_outdoor_rent) }}</div>
              <div data-show-opex="buy">{{ slider('propertyTax', t.sl_property_tax, 0, 2000, 25, s.propertyTax, t.tip_property_tax) }}</div>
              {{ slider('insurance', t.sl_insurance, 0, 2000, 25, s.insurance, t.tip_insurance) }}
              {{ slider('electricity', t.sl_electricity, 0, 5000, 25, s.electricity, t.tip_electricity) }}
              <div data-show-opex="indoor">
                {{ slider('heating', t.sl_heating, 0, 3000, 25, s.heating, t.tip_heating) }}
                {{ slider('water', t.sl_water, 0, 1000, 25, s.water, t.tip_water) }}
              </div>
              {{ slider('maintenance', t.sl_maintenance, 0, 2000, 25, s.maintenance, t.tip_maintenance) }}
              <div data-show-opex="indoor">{{ slider('cleaning', t.sl_cleaning, 0, 2000, 25, s.cleaning, t.tip_cleaning) }}</div>
              {{ slider('marketing', t.sl_marketing, 0, 5000, 25, s.marketing, t.tip_marketing) }}
              {{ slider('staff', t.sl_staff, 0, 20000, 100, s.staff, t.tip_staff) }}
            </div>
          </details>

          <details class="wizard-details" open>
            <summary class="wizard-details__summary">{{ t.planner_section_financing }}</summary>
            <div class="wizard-details__body">
              {{ slider('loanPct', t.sl_loan_pct, 0, 100, 1, s.loanPct, t.tip_loan_pct) }}
              {{ slider('interestRate', t.sl_interest_rate, 0, 15, 0.1, s.interestRate, t.tip_interest_rate) }}
              {{ slider('loanTerm', t.sl_loan_term, 0, 30, 1, s.loanTerm, t.tip_loan_term) }}
              {{ slider('constructionMonths', t.sl_construction_months, 0, 24, 1, s.constructionMonths, t.tip_construction_months) }}
              {{ slider('interestOnlyMonths', t.sl_interest_only_months|default('Interest-Only Period (mo)'), 0, 24, 1, s.interestOnlyMonths, t.tip_interest_only_months|default('Months of interest-only payments before P+I amortization begins. Reduces early cash flow drag during ramp.')) }}
            </div>
          </details>

          <details class="wizard-details">
            <summary class="wizard-details__summary">{{ t.planner_section_exit }} <span class="wizard-details__hint">{{ t.planner_hint_advanced|default('Advanced') }}</span></summary>
            <div class="wizard-details__body">
              {{ slider('holdYears', t.sl_hold_years, 1, 20, 1, s.holdYears, t.tip_hold_years) }}
              {{ slider('exitMultiple', t.sl_exit_multiple, 0, 20, 0.5, s.exitMultiple, t.tip_exit_multiple) }}
              {{ slider('annualRevGrowth', t.sl_annual_rev_growth, 0, 15, 0.5, s.annualRevGrowth, t.tip_annual_rev_growth) }}
              {{ slider('annualOpexGrowth', t.sl_annual_opex_growth|default('Annual OpEx Growth (%)'), 0, 10, 0.5, s.annualOpexGrowth, t.tip_annual_opex_growth|default('Annual cost inflation for utilities, staff, and insurance. 2% matches Western European CPI. Without this, Year 4–5 EBITDA is overstated.')) }}
              {{ slider('hurdleRate', t.sl_hurdle_rate|default('Hurdle Rate (%)'), 5, 35, 1, s.hurdleRate, t.tip_hurdle_rate|default('Minimum equity return required. NPV is positive when equity IRR exceeds this rate. 12% is typical for mid-market sports venues in Western Europe.')) }}
            </div>
          </details>
        </div>

        <!-- Wizard footer: preview bar + navigation -->
        <div class="wizard-footer">
          <div class="wizard-preview" id="wizPreview">{% include "partials/wizard_preview.html" %}</div>
          <div class="wizard-nav" id="wizNav"
               data-back="{{ t.btn_back }}" data-next="{{ t.btn_next }}" data-results="{{ t.btn_show_results }}">
            {% include "partials/wizard_nav.html" %}
          </div>
        </div>
      </div><!-- /planner-wizard -->
    </form>

    <!-- ═══════════════════════════════════════════════════════════════════
         RESULT TABS (HTMX swap target)
         ═══════════════════════════════════════════════════════════════════ -->
    <div id="tab-content" style="display:none">
      {% set tab_template = "partials/tab_" ~ active_tab ~ ".html" %}
      {% include tab_template %}
    </div>

  </main>

  <!-- Sidebar CTA (desktop, simplified) -->
  <aside class="quote-sidebar" id="quoteSidebar">
    <h3 class="quote-sidebar__title">{{ t.planner_quote_cta_title }}</h3>
    <p class="quote-sidebar__desc">{{ t.planner_quote_sidebar_desc|default('Compare your estimate with real supplier quotes.') }}</p>
    <button class="quote-sidebar__btn" onclick="goToQuoteForm()">{{ t.planner_quote_cta_btn }}</button>
    <span class="quote-sidebar__hint">{{ t.planner_quote_cta_hint }}</span>
    <a href="{{ url_for('planner.export') }}" class="quote-sidebar__export-link">{{ t.planner_export_btn }}</a>
  </aside>

  <!-- Mobile CTA bar (above bottom nav, result tabs only) -->
  <div class="cta-bottom-bar" id="ctaBottomBar">
    <button class="cta-bottom-bar__dismiss" onclick="this.parentElement.classList.remove('visible');this.parentElement.dataset.dismissed='1'" aria-label="Dismiss">&times;</button>
    <div class="cta-bottom-bar__text">
      <div class="cta-bottom-bar__value" id="ctaCapexValue">{{ d.capex | fmt_k }} {{ t.planner_cta_estimated|default('estimated') }}</div>
      <div class="cta-bottom-bar__hint">{{ t.planner_cta_micro|default('Free · 2 min · No obligation') }}</div>
    </div>
    <button class="cta-bottom-bar__btn" onclick="goToQuoteForm()">{{ t.planner_quote_cta_btn }} &rarr;</button>
  </div>

  {% if not user %}
  <div class="signup-bar" id="signupBar" style="display:none">
    <span>{{ t.planner_signup_bar_msg }}</span>
    <a href="{{ url_for('auth.signup') }}" class="lead-cta__btn">{{ t.planner_signup_bar_btn }}</a>
  </div>
  {% endif %}

  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <div id="scenario-drawer"></div>
  <div id="save-feedback"></div>

</div>

<!-- Mobile bottom tab bar (outside .planner-app to avoid ancestor interference with position:fixed) -->
<nav class="bottom-nav" id="bottomNav">
  <button class="bottom-nav__btn bottom-nav__btn--active" data-tab="assumptions" onclick="setActiveTab('assumptions')">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
    <span>{{ t.tab_assumptions_short|default('Setup') }}</span>
  </button>
  <button class="bottom-nav__btn" data-tab="capex"
          hx-post="{{ url_for('planner.calculate') }}" hx-target="#tab-content" hx-include="#planner-form"
          onclick="setActiveTab('capex')">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
    <span>{{ t.tab_capex_short|default('CAPEX') }}</span>
  </button>
  <button class="bottom-nav__btn" data-tab="operating"
          hx-post="{{ url_for('planner.calculate') }}" hx-target="#tab-content" hx-include="#planner-form"
          onclick="setActiveTab('operating')">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
    <span>{{ t.tab_operating_short|default('P&L') }}</span>
  </button>
  <button class="bottom-nav__btn" data-tab="cashflow"
          hx-post="{{ url_for('planner.calculate') }}" hx-target="#tab-content" hx-include="#planner-form"
          onclick="setActiveTab('cashflow')">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
    <span>{{ t.tab_cashflow_short|default('Cash') }}</span>
  </button>
  <button class="bottom-nav__btn" data-tab="returns"
          hx-post="{{ url_for('planner.calculate') }}" hx-target="#tab-content" hx-include="#planner-form"
          onclick="setActiveTab('returns')">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M16 8l-4 4-4-4"/><path d="M12 12v4"/></svg>
    <span>{{ t.tab_returns_short|default('Returns') }}</span>
  </button>
</nav>
{% endblock %}

{% block scripts %}
<script>
window.__COUNTRY_PRESETS__ = {{ country_presets | tojson | safe }};
window.__QUOTE_URL__ = "{{ url_for('leads.quote_request') }}";
</script>
<script src="{{ url_for('static', filename='js/planner.js') }}?v={{ v }}"></script>
{% endblock %}
