<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>RF Power Converter</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>

<div class="app">
  <div class="hdr">
    <div class="hdr-left">
      <div class="hdr-icon">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
          <circle cx="9" cy="9" r="2.5" fill="white"/>
          <circle cx="9" cy="9" r="5" stroke="white" stroke-width="1.2" fill="none" opacity="0.6"/>
          <circle cx="9" cy="9" r="8" stroke="white" stroke-width="1.2" fill="none" opacity="0.3"/>
        </svg>
      </div>
      <div>
        <div class="hdr-title">RF Power Converter</div>
        <div class="hdr-sub">Wireless Design Tool ↔ Vendor Config</div>
      </div>
    </div>
    <div style="display:flex;align-items:center;gap:8px;">
      <span class="version">v1.3.0</span>
      <span class="beta">Beta</span>
    </div>
  </div>

  <div class="wrap">
    <div class="intro">Convert transmit power between wireless design tools and vendor configurations. Fill in all fields below, then click Calculate.</div>

    <div class="card">

      <!-- STEP 1: DIRECTION — always first -->
      <div class="form-section">
        <div class="field">
          <label class="flabel"><span class="lnum">1</span> Conversion direction</label>
          <div class="dir-wrap" style="display:flex;flex-direction:row;gap:12px;">
            <button class="dir-btn on" id="d1" onclick="setDir('t2v')" style="flex:1;">
              <div class="dir-circle">↓</div>
              <div>
                <div class="dir-title">Design tool → Vendor</div>
                <div class="dir-desc">Enter the value shown in your design tool</div>
              </div>
            </button>
            <button class="dir-btn" id="d2" onclick="setDir('v2t')" style="flex:1;">
              <div class="dir-circle">↑</div>
              <div>
                <div class="dir-title">Vendor → Design tool</div>
                <div class="dir-desc">Enter the value from vendor config</div>
              </div>
            </button>
          </div>
        </div>
      </div>

      <!-- STEPS 2 & 3: VENDOR + DESIGN TOOL — labels swap based on direction -->
      <div class="form-section two-col">
        <div class="field" id="field-left">
          <label class="flabel" id="label-left"><span class="lnum">2</span> <span id="label-left-text">Vendor</span></label>
          <select id="sel-vendor" onchange="onVendor()">
            <option value="">— Select vendor —</option>
            <option value="hpe">HPE – Juniper Networking</option>
            <option value="nile">Nile</option>
          </select>
          <div class="logo-row" id="logo-row"></div>
        </div>
        <div class="field" id="field-right">
          <label class="flabel" id="label-right"><span class="lnum">3</span> <span id="label-right-text">Design tool</span></label>
          <select id="sel-tool" onchange="onTool()">
            <option value="">— Select design tool —</option>
            <option value="ekahau">Ekahau</option>
            <option value="hamina">Hamina</option>
            <option value="sidos">Sidos</option>
          </select>
          <div class="logo-row" id="tool-logo-row"></div>
        </div>
      </div>

      <!-- STEPS 4 & 5: AP MODEL + FREQUENCY BAND -->
      <div class="form-section two-col">
        <div class="field">
          <label class="flabel"><span class="lnum">4</span> AP model</label>
          <select id="sel-ap" disabled onchange="onAP()">
            <option value="">— Select vendor first —</option>
          </select>
          <div class="ap-badges" id="ap-badges"></div>
        </div>
        <div class="field">
          <label class="flabel"><span class="lnum">5</span> Frequency band</label>
          <div class="seg" id="band-seg">
            <button class="seg-b on" data-v="2.4" onclick="selBand(this)">2.4 GHz</button>
            <button class="seg-b" data-v="5" onclick="selBand(this)">5 GHz</button>
            <button class="seg-b" data-v="6" onclick="selBand(this)">6 GHz</button>
          </div>
          <div class="cw-wrap hidden" id="cw-wrap">
            <span class="cw-label">Channel width (MHz)</span>
            <div class="seg" id="cw-seg">
              <button class="seg-b" data-v="20" onclick="selCW(this)">20</button>
              <button class="seg-b" data-v="40" onclick="selCW(this)">40</button>
              <button class="seg-b on" data-v="80" onclick="selCW(this)">80</button>
              <button class="seg-b" data-v="160" onclick="selCW(this)">160</button>
              <button class="seg-b" data-v="320" onclick="selCW(this)">320</button>
            </div>
          </div>
        </div>
      </div>

      <!-- STEPS 6 & 7: POWER + ANTENNA -->
      <div class="form-section two-col">
        <div class="field">
          <label class="flabel" id="pwr-label"><span class="lnum">6</span> Transmit power</label>
          <div class="input-row">
            <input type="number" id="inp-power" placeholder="e.g. 14" min="-30" max="40" step="0.5"/>
            <span class="unit">dBm</span>
          </div>
        </div>
        <div class="field">
          <label class="flabel"><span class="lnum">7</span> Antenna gain</label>
          <select id="sel-ant" onchange="onAnt()">
            <option value="">— Select antenna gain —</option>
            <option value="2">2 dBi — 2.4 GHz internal</option>
            <option value="3">3 dBi — 5 GHz internal</option>
            <option value="4">4 dBi — mid-range internal</option>
            <option value="5">5 dBi — 5/6 GHz internal</option>
            <option value="6">6 dBi — high-gain internal</option>
            <option value="custom">Custom value…</option>
          </select>
          <div class="input-row hidden" id="ant-custom-row" style="margin-top:8px">
            <input type="number" id="inp-ant-custom" placeholder="Enter dBi" min="0" max="20" step="0.5" style="width:140px"/>
            <span class="unit">dBi</span>
          </div>
        </div>
      </div>

      <div class="calc-bar">
        <button class="btn-calc" onclick="calc()">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 8h12M9 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          Calculate
        </button>
        <button class="btn-reset" onclick="reset()">Reset</button>
      </div>
    </div>

    <div id="results-area"></div>

  </div>
</div>

<footer class="site-footer">
  <p>RF Power Converter &nbsp;·&nbsp; Always verify against vendor documentation &nbsp;·&nbsp; For wireless design reference only</p>
</footer>

<script src="js/vendors/juniper_mist.js"></script>
<script src="js/vendors/nile.js"></script>
<script src="js/converter.js"></script>
<script src="js/main.js"></script>
</body>
</html>