<!--
  ┌─────────────────────────────────────────────────────────────┐
  │ AIRCON SIZE CALCULATOR – PRO GRADE WITH TRADIE MODE         │
  │ Built by Syrup (syrup.dev) — Digital solutions that stick.  │
  └─────────────────────────────────────────────────────────────┘

  ═══════════════════════════════════════════════════════════════
  CALCULATION METHODOLOGY & FORMULAS
  ═══════════════════════════════════════════════════════════════

  BASE CALCULATION:
  ────────────────
  kW = Room Volume × Base Multiplier × Environmental Factors
  
  Where Room Volume = Length × Width × Height (in metres)
  Base Multiplier = 0.065 kW/m³ (Queensland climate optimized)

  ENVIRONMENTAL FACTORS:
  ─────────────────────
  1. Insulation Quality:
     • Poor (pre-1990): 1.1× (adds 10% capacity)
     • Average (standard): 1.0× (baseline)
     • Good (modern): 0.9× (reduces 10% capacity)

  2. Sunlight Exposure:
     • Shaded: 0.9× (reduces 10% capacity)
     • Average: 1.0× (baseline)
     • Full Sun: 1.1× (adds 10% capacity)

  3. Occupant Load:
     • Base: 1 person included
     • Additional: +0.15 kW per extra person (150W heat load)

  ADVANCED FACTORS (Advanced Mode):
  ────────────────────────────────
  4. Roof Type:
     • Uninsulated Metal: 1.10× (adds 10% for poor thermal performance - common in older QLD homes)
     • Flat Metal: 1.05× (adds 5% for heat gain)
     • Tiled: 1.02× (adds 2% for moderate heat gain)
     • Insulated: 0.95× (reduces 5% for better insulation)

  5. Window Heat Gain:
     • Threshold: >4m² window area
     • West-facing: 0.05 kW per m² (overrides standard rate - afternoon sun penalty)
     • Other directions: 0.03 kW per m² (general heat gain)

  6. Climate Zone:
     • Tropical/High Humidity: 1.1× (Sunshine Coast default - high humidity loads)
     • Temperate: 1.0× (baseline for cooler areas)
     • Arid: 1.05× (extreme dry heat)
     • Cool: 0.95× (reduced cooling needs)

  7. Appliance Load:
     • Direct addition: kW value of heat-generating appliances
     • Typical values: PC (0.2-0.4kW), TV (0.1-0.2kW), Kitchen (0.5-2.0kW)
     • Modern appliances generate significant heat loads

  PROFESSIONAL TRADIE FACTORS:
  ────────────────────────────
  8. Duct Run Length:
     • >10m: 1.05× (compensate for distribution losses)

  9. Circuit Size:
     • <20 Amps: 1.1× (electrical capacity constraint)

  10. Unit Clearance:
      • <50cm: 1.02× (reduced efficiency from poor airflow)

  FINAL CALCULATION FLOW:
  ──────────────────────
  1. Calculate base load: Volume × 0.065
  2. Apply insulation factor: × insulation_multiplier
  3. Apply sunlight factor: × sunlight_multiplier
  4. Add occupant load: + (occupants-1) × 0.15
  5. [Advanced] Apply roof factor: × roof_multiplier
  6. [Advanced] Add window load: + window_area × direction_factor
  7. [Advanced] Add appliance load: + appliance_kW
  8. [Advanced] Apply climate factor: × climate_multiplier
  9. [Tradie] Apply installation factors: × tradie_multipliers

  DESIGN PRINCIPLES:
  ─────────────────
  • Conservative sizing prevents undersized systems
  • Queensland climate considerations (high humidity)
  • Professional installation factors for real-world performance
  • Modular calculation allows for easy factor adjustments
  • All factors based on Australian HVAC industry standards

  VALIDATION RULES:
  ────────────────
  • Length, Width, Height must be > 0
  • Occupants minimum 1, maximum 20
  • All advanced fields optional with sensible defaults
  • Error handling prevents calculation with invalid inputs

  RESULT INTERPRETATION:
  ─────────────────────
  • Output in kW (kilowatts) cooling capacity
  • Typical residential range: 2.5kW - 15kW
  • Commercial applications may exceed 20kW
  • Professional site assessment recommended for final sizing
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aircon Size Calculator - Cali Air</title>
  <style>
    :root {
      --primary: #3CA1E0;
      --primary-light: #60b5e8;
      --primary-dark: #2b89c7;
      --secondary: #2980b9;
      --gray-50: #fafafa;
      --gray-100: #f5f5f5;
      --gray-200: #e5e5e5;
      --gray-300: #d4d4d4;
      --gray-400: #a3a3a3;
      --gray-500: #737373;
      --gray-600: #525252;
      --gray-700: #404040;
      --gray-800: #262626;
      --gray-900: #171717;
      --white: #ffffff;
      --border: hsl(214.3 31.8% 91.4%);
      --ring: hsl(215 20.2% 65.1%);
      --success: #22c55e;
      --warning: #f59e0b;
      --error: #ef4444;
      --radius: 8px;
      --radius-lg: 12px;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
      color: var(--gray-900);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      min-height: 100vh;
      padding: 24px 20px;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      width: 100vw;
      max-width: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
    }

    .container {
      max-width: 1600px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 24px;
      overflow-x: hidden;
    }

    .header {
      text-align: center;
      margin-bottom: 32px;
      width: 100%;
    }

    .logo {
      max-width: 180px;
      height: auto;
      margin: 0 auto 16px auto;
      display: block;
    }

    .title {
      font-size: 42px;
      font-weight: 700;
      color: var(--gray-900);
      margin-bottom: 12px;
      letter-spacing: -0.02em;
      text-align: center;
    }

    .subtitle {
      font-size: 18px;
      color: var(--gray-600);
      font-weight: 400;
      text-align: center;
    }

    .main-grid {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 600px;
      width: 100%;
      max-width: 1400px; 
      margin: 0 auto;
      overflow-x: hidden;
    }

    @media (min-width: 768px) {
      body {
        padding: 24px 24px;
      }
    }

    .card {
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: all 0.2s ease;
      min-height: 500px;
      width: 100%;
      max-width: 900px;
    }

    .card:hover {
      box-shadow: var(--shadow-md);
    }

    .card-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      background: var(--white);
    }

    .card-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: 6px;
    }

    .card-description {
      font-size: 15px;
      color: var(--gray-600);
    }

    .card-content {
      padding: 24px;
    }

    .tabs {
      display: flex;
      background: var(--gray-100);
      border-radius: var(--radius);
      padding: 3px;
      margin-bottom: 24px;
    }

    .tab {
      flex: 1;
      text-align: center;
      padding: 10px 20px;
      cursor: pointer;
      font-weight: 500;
      font-size: 15px;
      color: var(--gray-600);
      border-radius: calc(var(--radius) - 3px);
      transition: all 0.15s ease;
      position: relative;
    }

    .tab:hover {
      color: var(--gray-900);
    }

    .tab.active {
      background: var(--white);
      color: var(--gray-900);
      box-shadow: var(--shadow-sm);
    }

    .quick-tips {
      background: linear-gradient(135deg, rgba(60, 161, 224, 0.05), rgba(60, 161, 224, 0.02));
      border: 1px solid rgba(60, 161, 224, 0.1);
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 24px;
    }

    .tips-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .tips-icon {
      font-size: 16px;
    }

    .tips-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary-dark);
    }

    .tips-content {
      font-size: 14px;
      color: var(--gray-600);
      line-height: 1.5;
      min-height: 60px;
      display: flex;
      align-items: center;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      font-size: 15px;
      color: var(--gray-700);
    }

    .form-input,
    .form-select {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 15px;
      color: var(--gray-900);
      background: var(--white);
      transition: all 0.15s ease;
    }

    .form-input:hover,
    .form-select:hover {
      border-color: var(--gray-300);
    }

    .form-input:focus,
    .form-select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(60, 161, 224, 0.1);
    }

    .form-input:disabled {
      background: var(--gray-50);
      color: var(--gray-500);
      cursor: not-allowed;
    }

    .helper-text {
      font-size: 13px;
      color: var(--gray-500);
      margin-top: 5px;
      line-height: 1.4;
    }

    .toggle-section {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      border-radius: var(--radius);
      padding: 16px;
      margin-bottom: 20px;
    }

    .toggle-label {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--white);
      font-weight: 600;
      cursor: pointer;
      font-size: 16px;
    }

    .toggle-input {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 44px;
      height: 24px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      border: none;
      outline: none;
      position: relative;
      cursor: pointer;
      transition: background 0.2s ease;
      margin: 0;
      flex-shrink: 0;
    }

    .toggle-input:checked {
      background: rgba(255, 255, 255, 0.3);
    }

    .toggle-input:focus {
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    .toggle-input::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background: var(--white);
      top: 2px;
      left: 2px;
      transition: transform 0.2s ease;
      box-shadow: var(--shadow-sm);
    }

    .toggle-input:checked::after {
      transform: translateX(20px);
    }

    .advanced-section {
      background: var(--gray-50);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-top: 16px;
      display: none;
      opacity: 0;
      transition: all 0.3s ease;
    }

    .advanced-section.show {
      display: block;
      opacity: 1;
    }

    .advanced-header {
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }

    .advanced-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: 6px;
    }

    .advanced-description {
      font-size: 14px;
      color: var(--gray-600);
      line-height: 1.5;
    }

    .grid {
      display: grid;
      gap: 16px;
    }

    .grid-cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    @media (max-width: 640px) {
      .grid-cols-2,
      .grid-cols-3 {
        grid-template-columns: 1fr;
      }
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 20px;
      border-radius: var(--radius);
      font-weight: 500;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.15s ease;
      border: 1px solid transparent;
      text-decoration: none;
    }

    .button-primary {
      background: var(--primary);
      color: var(--white);
      box-shadow: var(--shadow-sm);
    }

    .button-primary:hover {
      background: var(--primary-dark);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }

    .button-secondary {
      background: var(--white);
      color: var(--gray-700);
      border-color: var(--border);
    }

    .button-secondary:hover {
      background: var(--gray-50);
      border-color: var(--gray-300);
    }

    .button-full {
      width: 100%;
    }

    .result-card {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: var(--white);
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-top: 24px;
      text-align: center;
      box-shadow: var(--shadow-lg);
    }

    .result-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .result-value {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .result-range {
      background: rgba(255, 255, 255, 0.1);
      border-radius: var(--radius);
      padding: 16px;
      margin: 16px 0;
      text-align: left;
    }

    .range-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 12px;
      color: rgba(255, 255, 255, 0.9);
    }

    .range-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .range-item:last-child {
      margin-bottom: 0;
    }

    .range-label {
      color: rgba(255, 255, 255, 0.8);
    }

    .range-value {
      font-weight: 600;
      color: var(--white);
    }

    .sizing-indicator {
      background: rgba(255, 255, 255, 0.1);
      border-radius: var(--radius);
      padding: 12px;
      margin: 16px 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .indicator-icon {
      font-size: 20px;
    }

    .indicator-text {
      font-size: 14px;
      line-height: 1.4;
    }

    .system-recommendation {
      background: rgba(255, 255, 255, 0.1);
      border-radius: var(--radius);
      padding: 12px;
      margin: 16px 0;
      font-size: 14px;
      text-align: left;
    }

    .recommendation-title {
      font-weight: 600;
      margin-bottom: 6px;
    }

    .efficiency-bar {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      height: 12px;
      margin: 8px 0;
      overflow: hidden;
    }

    .efficiency-fill {
      height: 100%;
      border-radius: 8px;
      transition: width 0.8s ease;
    }

    .efficiency-conservative {
      background: linear-gradient(90deg, #22c55e, #16a34a);
    }

    .efficiency-optimal {
      background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    }

    .efficiency-aggressive {
      background: linear-gradient(90deg, #f59e0b, #d97706);
    }

    .cta-section {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-top: 16px;
      display: none;
    }

    .cta-section.visible {
      display: block;
      animation: slideInUp 0.3s ease;
    }

    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .cta-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: 8px;
    }

    .cta-description {
      color: var(--gray-600);
      margin-bottom: 20px;
      line-height: 1.6;
      font-size: 15px;
    }

    .cta-buttons {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
    }

    .cta-info {
      display: flex;
      gap: 24px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
    }

    .cta-info-item {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--gray-600);
      font-size: 14px;
    }

    .visualization-container {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      min-height: 600px;
      width: 100%;
      max-width: 900px;
      box-sizing: border-box;
      transition: all 0.2s ease;
    }

    .visualization-container:hover {
      box-shadow: var(--shadow-md);
    }

    .visualization-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(90deg, var(--gray-50), var(--white));
    }

    .visualization-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: 8px;
    }

    .visualization-description {
      font-size: 14px;
      color: var(--gray-600);
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .canvas-wrapper {
      position: relative;
      height: 500px;
      background: linear-gradient(135deg, var(--gray-50), var(--white));
    }

    #airflow-canvas {
      width: 100%;
      height: 100%;
      cursor: crosshair;
    }

    .overlay {
      position: absolute;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px;
      font-size: 12px;
      box-shadow: var(--shadow-sm);
    }

    .temp-overlay {
      top: 16px;
      left: 16px;
    }

    .controls-overlay {
      top: 16px;
      right: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 200px;
      max-width: 240px;
    }

    .stats-overlay {
      bottom: 16px;
      right: 16px;
      font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
      color: var(--gray-500);
    }

    .control-group {
      margin-bottom: 8px;
    }

    .control-label {
      font-size: 12px;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 6px;
    }

    .button-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      background: var(--gray-100);
      border-radius: var(--radius);
      padding: 2px;
      width: 100%;
    }

    .button-group .button {
      padding: 6px 8px;
      font-size: 11px;
      border-radius: calc(var(--radius) - 2px);
      background: transparent;
      color: var(--gray-600);
      border: none;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .button-group .button.active {
      background: var(--white);
      color: var(--gray-900);
      box-shadow: var(--shadow-sm);
    }

    .legend {
      display: flex;
      gap: 16px;
      padding: 16px 24px;
      background: var(--gray-50);
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--gray-600);
    }

    .legend-color {
      width: 12px;
      height: 12px;
      border-radius: 2px;
    }

    .error-state {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
      padding: 16px;
      border-radius: var(--radius);
      margin-bottom: 16px;
      font-size: 14px;
    }

    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 16px 20px;
      box-shadow: var(--shadow-xl);
      transform: translateX(100%);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      max-width: 400px;
      font-size: 14px;
    }

    .notification.show {
      transform: translateX(0);
      opacity: 1;
    }

    .notification.success {
      border-left: 4px solid var(--success);
    }

    .notification.error {
      border-left: 4px solid var(--error);
    }

    @media (max-width: 768px) {
      body {
        padding: 16px 12px;
      }

      .container {
        gap: 16px;
      }

      .title {
        font-size: 28px;
      }

      .subtitle {
        font-size: 16px;
      }

      .card-content {
        padding: 20px;
      }

      .main-grid {
        gap: 20px;
      }

      .cta-buttons {
        flex-direction: column;
      }

      .legend {
        justify-content: center;
      }

      .canvas-wrapper {
        height: 400px;
      }

      .visualization-container {
        min-height: 500px;
        max-width: 100%;
      }

      .controls-overlay {
        min-width: 180px;
        max-width: 200px;
      }

      .button-group .button {
        padding: 4px 6px;
        font-size: 10px;
      }
    }

    .demo-tips {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      margin-top: 16px;
      padding: 0 24px;
    }

    .demo-tip {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: var(--gray-700);
      box-shadow: var(--shadow-sm);
    }

    .tip-icon {
      font-size: 18px;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--gray-50);
      border-radius: 50%;
    }

    .tip-text {
      line-height: 1.5;
    }

    .feature-toggles {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .feature-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: var(--gray-700);
      cursor: pointer;
      padding: 4px 6px;
      border-radius: var(--radius);
      transition: all 0.15s ease;
    }

    .feature-toggle:hover {
      background: var(--gray-50);
    }

    .feature-toggle input[type="checkbox"] {
      width: 14px;
      height: 14px;
      border: 2px solid var(--border);
      border-radius: 3px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: var(--white);
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
      transition: all 0.15s ease;
      padding: 0;
      margin: 0;
    }

    .feature-toggle input[type="checkbox"]:checked {
      background: var(--primary);
      border-color: var(--primary);
    }

    .feature-toggle input[type="checkbox"]:checked::after {
      content: '✓';
      position: absolute;
      color: white;
      font-size: 10px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .analysis-tips {
      background: var(--white);
      border-top: 1px solid var(--border);
      padding: 20px 24px;
    }

    .tips-header {
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: 12px;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tips-header::before {
      content: '💡';
      font-size: 18px;
    }

    .tips-content {
      color: var(--gray-700);
      font-size: 14px;
      line-height: 1.6;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
    }

    .tip-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 8px 12px;
      background: var(--gray-50);
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }

    .tip-item span {
      line-height: 1.5;
    }

    .tip-item.warning {
      background: #fff5f5;
      border-color: #feb2b2;
    }

    .tip-item.success {
      background: #f0fff4;
      border-color: #9ae6b4;
    }

    .tip-item.info {
      background: #ebf8ff;
      border-color: #90cdf4;
    }

    @media (max-width: 768px) {
      .demo-tips {
        grid-template-columns: 1fr;
        padding: 0 16px;
      }

      .feature-toggles {
        grid-template-columns: 1fr;
      }

      .tips-content {
        grid-template-columns: 1fr;
      }
    }

    .beta-banner {
      background: linear-gradient(135deg, #ff6b6b10, #ff8f8f10);
      border: 1px solid #ff8f8f;
      border-radius: var(--radius);
      padding: 12px 16px;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      color: #e03131;
      font-size: 14px;
      position: relative;
      top: 0;
      width: 100%;
      box-sizing: border-box;
    }

    .beta-icon {
      font-size: 18px;
      flex-shrink: 0;
    }

    .beta-content {
      flex: 1;
      line-height: 1.5;
    }

    .beta-badge {
      background: #ff8f8f;
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="main-grid">
      <div class="visualization-container">
        <div class="card-header">
          <img src="https://caliair.com.au/wp-content/uploads/2025/03/blob-224bca4.png" alt="Cali Air" class="logo">
          <h2 class="card-title">Professional AC Calculator</h2>
          <p class="card-description">Advanced airflow analysis and sizing tool for HVAC specialists</p>
        </div>
        
        <div class="card-content">
          <div class="quick-tips">
            <div class="tips-header">
              <span class="tips-icon">💡</span>
              <span class="tips-title">Professional Tips</span>
            </div>
            <div id="rotating-tips" class="tips-content">
              <!-- Tips will be inserted here -->
            </div>
          </div>

    <div class="tabs">
      <div class="tab active" id="tab-basic">Basic</div>
      <div class="tab" id="tab-advanced">Advanced</div>
            <div class="tab" id="tab-airflow">Advanced Airflow Analysis</div>
    </div>

          <div id="calculator-forms">
            <form id="calculator">
              <div class="form-group">
                <label class="form-label">
                  Room Length (m)
                </label>
                <input type="number" id="length" class="form-input" step="0.1" placeholder="e.g. 4.5">
                <p class="helper-text">Measure the longest wall of your room in metres</p>
    </div>

              <div class="form-group">
                <label class="form-label">
                  Room Width (m)
                </label>
                <input type="number" id="width" class="form-input" step="0.1" placeholder="e.g. 3.2">
                <p class="helper-text">Measure the shorter wall of your room in metres</p>
              </div>

              <div class="form-group">
                <label class="form-label">
                  Room Height (m)
                </label>
                <input type="number" id="height" class="form-input" value="2.4" step="0.1">
                <p class="helper-text">Standard ceiling height is 2.4m. Measure if your room is different</p>
              </div>

              <div class="grid grid-cols-2">
                <div class="form-group">
                  <label class="form-label">
                    Insulation Quality
                  </label>
                  <select id="insulation" class="form-select">
                    <option value="low">Poor</option>
                    <option value="medium" selected>Average</option>
                    <option value="high">Good</option>
                  </select>
                  <p class="helper-text">Poor: No insulation, Single brick. Average: Standard insulation, Double brick. Good: Full insulation, Modern build</p>
                </div>

                <div class="form-group">
                  <label class="form-label">
                    Sunlight Exposure
                  </label>
                  <select id="sunlight" class="form-select">
                    <option value="low">Shaded</option>
                    <option value="medium" selected>Average</option>
                    <option value="high">Full Sun</option>
                  </select>
                  <p class="helper-text">Shaded: Trees/buildings block sun. Average: Some shade during day. Full Sun: Direct sunlight most of the day</p>
                </div>
              </div>

              <div class="form-group">
                <label class="form-label">Number of Occupants</label>
                <input type="number" id="occupants" class="form-input" value="1" min="1" max="20">
                <p class="helper-text">Number of people regularly using this room</p>
              </div>

      <div id="advanced-fields" style="display:none">
                <div class="toggle-section">
                  <label class="toggle-label">
                    <input type="checkbox" id="tradie_toggle" class="toggle-input">
                    <span>🛠️ Enable Tradie Mode</span>
                  </label>
      </div>

                <div id="tradie-tools" class="advanced-section">
                  <div class="advanced-header">
                    <h3 class="advanced-title">Professional Installation Factors</h3>
                    <p class="advanced-description">
                      These technical factors affect system sizing and performance calculations for professional installations.
                    </p>
                  </div>
                  <div class="grid grid-cols-3">
                    <div class="form-group">
                      <label class="form-label">Duct Run Length (m)</label>
                      <input type="number" id="duct_length" class="form-input" step="0.1" placeholder="Distance" disabled>
                      <p class="helper-text">Longer runs need more capacity</p>
                    </div>
                    <div class="form-group">
                      <label class="form-label">Circuit Size (Amps)</label>
                      <input type="number" id="circuit_size" class="form-input" placeholder="Circuit rating" disabled>
                      <p class="helper-text">Electrical capacity limit</p>
                    </div>
                    <div class="form-group">
                      <label class="form-label">Unit Clearance (cm)</label>
                      <input type="number" id="clearance" class="form-input" placeholder="Space around unit" disabled>
                      <p class="helper-text">Affects airflow efficiency</p>
                    </div>
                  </div>
      </div>

                <div class="grid grid-cols-2">
                  <div class="form-group">
                    <label class="form-label">Roof Type</label>
                    <select id="roof_type" class="form-select">
                      <option value="uninsulated_metal">Uninsulated Metal</option>
                      <option value="flat_metal">Flat Metal</option>
                      <option value="tiled">Tiled</option>
                      <option value="insulated">Insulated</option>
                    </select>
                    <p class="helper-text">Uninsulated Metal: Common in older QLD homes (pre-1980s). Flat Metal: Modern metal without insulation. Tiled: Clay/concrete tiles. Insulated: Well-insulated modern construction</p>
                  </div>
                  <div class="form-group">
                    <label class="form-label">Window Orientation</label>
                    <select id="window_orientation" class="form-select">
                      <option value="north">North</option>
                      <option value="south">South</option>
                      <option value="east">East</option>
                      <option value="west">West</option>
                    </select>
                    <p class="helper-text">Direction windows face affects heat gain</p>
                  </div>
                </div>

                <div class="grid grid-cols-2">
                  <div class="form-group">
                    <label class="form-label">Window Area (m²)</label>
                    <input type="number" id="window_area" class="form-input" step="0.1" placeholder="Total window area">
                    <p class="helper-text">Total area of all windows in the room</p>
                  </div>
                  <div class="form-group">
                    <label class="form-label">Climate Zone</label>
                    <select id="climate_zone" class="form-select">
                      <option value="tropical" selected>Tropical/High Humidity (Sunshine Coast)</option>
                      <option value="temperate">Temperate</option>
                      <option value="arid">Arid</option>
                      <option value="cool">Cool</option>
                    </select>
                    <p class="helper-text">Tropical selected as default for Sunshine Coast high humidity conditions</p>
                  </div>
                </div>

                <div class="form-group">
                  <label class="form-label">
                    Appliance Load (kW)
                  </label>
                  <input type="number" id="appliance_load" class="form-input" step="0.1" placeholder="e.g. 0.5">
                  <p class="helper-text">Add up heat-generating appliances: Desktop PC (0.2-0.4kW), TV (0.1-0.2kW), Kitchen appliances (0.5-2.0kW)</p>
                </div>
              </div>

              <button type="submit" class="button button-primary button-full">
                Calculate AC Size
              </button>

              <div id="result">
                <div class="result-card" style="display: none;">
                  <div class="result-title">Recommended System Size</div>
                  <div class="result-value" id="result-value">—</div>
                  <div id="result-description">Enter room dimensions to calculate</div>
                </div>
              </div>
    </form>
          </div>

          <div id="airflow-visualizer" style="display: none;">
            <div class="beta-banner">
              <span class="beta-icon">⚡</span>
              <div class="beta-content">
                This visualization is in beta. Results are approximate and should not be used as the sole basis for installation decisions.
                <span class="beta-badge">Beta</span>
              </div>
            </div>
            
            <div class="visualization-header">
              <h3 class="visualization-title">Advanced Airflow Analysis</h3>
              <p class="visualization-description">
                Interactive demonstration showing how air conditioning affects your room. Drag the AC unit to different positions to see how placement impacts cooling efficiency.
              </p>
            </div>

            <div class="canvas-wrapper">
              <canvas id="airflow-canvas"></canvas>
              
              <div class="overlay temp-overlay">
                <div style="font-weight: 600; margin-bottom: 4px;">Room Analysis</div>
                <div style="font-size: 16px; font-weight: 700; color: var(--primary);" class="temp-reading">24.0°C</div>
                <div style="margin-top: 8px;">
                  <div style="font-size: 11px; color: var(--gray-500); margin-bottom: 2px;">Cooling Coverage</div>
                  <div style="background: var(--gray-200); border-radius: 4px; height: 6px; margin-bottom: 4px;">
                    <div id="efficiency-bar" style="background: var(--success); width: 0%; height: 100%; border-radius: 4px; transition: all 0.3s ease;"></div>
                  </div>
                  <div id="efficiency-text" style="font-size: 11px; font-weight: 600;">Analyzing...</div>
                </div>
                <div class="comfort-rating" style="margin-top: 8px; font-size: 12px;">
                  <div style="margin-bottom: 4px;">Comfort Rating</div>
                  <div class="rating-stars">★★★★★</div>
                </div>
              </div>

              <div class="overlay controls-overlay">
                <div class="control-group">
                  <div class="control-label">Installation Type</div>
                  <div class="button-group">
                    <button class="button active" id="wall-unit">Wall Split</button>
                    <button class="button" id="ceiling-unit">Cassette</button>
                    <button class="button" id="floor-unit">Floor</button>
                  </div>
                </div>

                <div class="control-group">
                  <div class="control-label">System Size</div>
                  <select id="unit-size" class="form-select" style="font-size: 11px; padding: 6px 8px;">
                    <option value="2.5">2.5 kW (Small)</option>
                    <option value="3.5">3.5 kW (Medium)</option>
                    <option value="5.0">5.0 kW (Large)</option>
                    <option value="7.0">7.0 kW (Open)</option>
                    <option value="8.0">8.0 kW (Multi)</option>
                  </select>
                </div>

                <div class="control-group">
                  <div class="control-label">Airflow Pattern</div>
                  <select id="air-direction" class="form-select" style="font-size: 11px; padding: 6px 8px;">
                    <option value="auto">Auto Swing (Best)</option>
                    <option value="fixed">Fixed Direction</option>
                    <option value="wide">Wide Angle</option>
                    <option value="spot">Spot Cooling</option>
                  </select>
                </div>

                <div class="control-group">
                  <div class="control-label">Room Features</div>
                  <div class="feature-toggles">
                    <label class="feature-toggle">
                      <input type="checkbox" id="show-furniture" class="room-feature">
                      <span>Show Furniture</span>
                    </label>
                    <label class="feature-toggle">
                      <input type="checkbox" id="show-windows" class="room-feature">
                      <span>Show Windows</span>
                    </label>
                    <label class="feature-toggle">
                      <input type="checkbox" id="show-doors" class="room-feature">
                      <span>Show Doors</span>
                    </label>
                  </div>
                </div>
              </div>

              <div class="overlay stats-overlay" id="performance-stats">
                <div class="stats-title">Professional Analysis</div>
                <div class="stats-grid">
                  <div class="stat-item">
                    <span class="stat-label">Coverage</span>
                    <span class="stat-value">--</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">Air Speed</span>
                    <span class="stat-value">--</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">Throw</span>
                    <span class="stat-value">--</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="legend">
              <div class="legend-item">
                <div class="legend-color" style="background: rgba(60, 161, 224, 0.8);"></div>
                <span>Strong Airflow</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background: rgba(60, 161, 224, 0.4);"></div>
                <span>Moderate Flow</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background: rgba(60, 161, 224, 0.2);"></div>
                <span>Light Flow</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background: var(--error);"></div>
                <span>Heat Build-up</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background: var(--success);"></div>
                <span>Optimal Cooling</span>
              </div>
            </div>

            <div class="analysis-tips">
              <div class="tips-header">Installation Tips</div>
              <div class="tips-content" id="installation-tips">
                Analyzing unit placement and room characteristics...
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const CALCULATION_FACTORS = {
      insulation: { low: 1.1, medium: 1.0, high: 0.9 },
      sunlight: { low: 0.9, medium: 1.0, high: 1.1 },
      occupantLoad: 0.15,
      baseMultiplier: 0.065,
      roofTypes: { uninsulated_metal: 1.10, flat_metal: 1.05, tiled: 1.02, insulated: 0.95 },
      windowFactors: { west: 0.05, other: 0.03 },
      climateZones: { tropical: 1.1, temperate: 1.0, arid: 1.05, cool: 0.95 }
    };

    let calculationHistory = [];
    let mode = 'basic';
    let currentUnit = 'wall';
    let isDragging = false;
    let unitX = 0;
    let unitY = 0;

    function validateInputs() {
      const errors = [];
      const requiredFields = ['length', 'width', 'height'];
      
      requiredFields.forEach(field => {
        const value = document.getElementById(field).value;
        if (!value || value <= 0) {
          errors.push(`${field.charAt(0).toUpperCase() + field.slice(1)} must be greater than 0`);
        }
      });

      return errors;
    }

    function showNotification(message, type = 'success') {
      const notification = document.createElement('div');
      notification.className = `notification ${type}`;
      notification.textContent = message;
      document.body.appendChild(notification);
      
      setTimeout(() => notification.classList.add('show'), 50);
      setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => notification.remove(), 300);
      }, 4000);
    }

    function calculateTradieFactors() {
      if (!document.getElementById('tradie_toggle').checked) return 1;

      const ductLength = parseFloat(document.getElementById('duct_length').value) || 0;
      const circuitSize = parseFloat(document.getElementById('circuit_size').value) || 0;
      const clearance = parseFloat(document.getElementById('clearance').value) || 0;

      let factor = 1;
      if (ductLength > 10) factor *= 1.05;
      if (circuitSize < 20) factor *= 1.1;
      if (clearance < 50) factor *= 1.02;

      return factor;
    }

    // Tab switching - improved and consistent navigation
    document.getElementById('tab-basic').addEventListener('click', () => {
      mode = 'basic';
      cleanupAirflowVisualizer(); // Stop visualization when leaving
      document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
      document.getElementById('tab-basic').classList.add('active');
      // Show calculator forms, hide airflow visualizer
      document.getElementById('calculator-forms').style.display = 'block';
      document.getElementById('advanced-fields').style.display = 'none';
      document.getElementById('airflow-visualizer').style.display = 'none';
    });

    document.getElementById('tab-advanced').addEventListener('click', () => {
      mode = 'advanced';
      cleanupAirflowVisualizer(); // Stop visualization when leaving
      document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
      document.getElementById('tab-advanced').classList.add('active');
      // Show calculator forms with advanced fields, hide airflow visualizer
      document.getElementById('calculator-forms').style.display = 'block';
      document.getElementById('advanced-fields').style.display = 'block';
      document.getElementById('airflow-visualizer').style.display = 'none';
    });

    document.getElementById('tab-airflow').addEventListener('click', () => {
      mode = 'airflow';
      document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
      document.getElementById('tab-airflow').classList.add('active');
      // Hide calculator forms, show airflow visualizer
      document.getElementById('calculator-forms').style.display = 'none';
      document.getElementById('airflow-visualizer').style.display = 'block';
      
      // Initialize visualization after DOM is ready
      setTimeout(() => {
        initializeAirflowVisualizer();
      }, 150);
    });

    // Tradie toggle
    document.getElementById('tradie_toggle').addEventListener('change', function() {
      const tradieTools = document.getElementById('tradie-tools');
      const tradieInputs = tradieTools.querySelectorAll('input[type="number"]');
      
      if (this.checked) {
        tradieTools.classList.add('show');
      } else {
        tradieTools.classList.remove('show');
      }

      tradieInputs.forEach(input => {
        input.disabled = !this.checked;
        if (!this.checked) input.value = '';
      });
    });

    function showResults(kw) {
      const resultCard = document.querySelector('.result-card');
      const resultValue = document.getElementById('result-value');
      const resultDescription = document.getElementById('result-description');
      
      // Calculate ranges
      const minSize = kw * 0.9; // 10% under for minimum efficient size
      const recommendedSize = kw; // Calculated size
      const maxSize = kw * 1.2; // 20% buffer for overhead
      
      // Determine system type recommendation
      const roomVolume = parseFloat(document.getElementById('length').value) * 
                        parseFloat(document.getElementById('width').value) * 
                        parseFloat(document.getElementById('height').value);
      
      let systemType = "Split System";
      if (roomVolume > 100) {
        systemType = "Ducted System (large space)";
      } else if (kw > 10) {
        systemType = "Ducted or Multi-Head Split";
      }
      
      // Determine sizing efficiency
      let sizingCategory = "optimal";
      let sizingIcon = "🎯";
      let sizingText = "Optimal sizing for efficiency and comfort";
      
      if (kw < 3) {
        sizingCategory = "conservative";
        sizingIcon = "💚";
        sizingText = "Conservative sizing - excellent efficiency";
      } else if (kw > 12) {
        sizingCategory = "aggressive";
        sizingIcon = "⚠️";
        sizingText = "Large capacity - consider ducted system";
      }
      
      // Build enhanced result display
      resultValue.textContent = `${recommendedSize.toFixed(1)} kW`;
      resultDescription.innerHTML = `
        <div class="result-range">
          <div class="range-title">📊 Sizing Range Analysis</div>
          <div class="range-item">
            <span class="range-label">Minimum Efficient:</span>
            <span class="range-value">${minSize.toFixed(1)} kW</span>
          </div>
          <div class="range-item">
            <span class="range-label">Recommended:</span>
            <span class="range-value">${recommendedSize.toFixed(1)} kW</span>
          </div>
          <div class="range-item">
            <span class="range-label">With 20% Buffer:</span>
            <span class="range-value">${maxSize.toFixed(1)} kW</span>
          </div>
        </div>
        
        <div class="sizing-indicator">
          <span class="indicator-icon">${sizingIcon}</span>
          <div class="indicator-text">
            <strong>Sizing Assessment:</strong><br>
            ${sizingText}
          </div>
        </div>
        
        <div class="system-recommendation">
          <div class="recommendation-title">🏠 System Type Recommendation</div>
          <strong>${systemType}</strong><br>
          ${roomVolume.toFixed(0)}m³ room volume • Queensland climate optimized
        </div>
        
        <div class="efficiency-bar">
          <div class="efficiency-fill efficiency-${sizingCategory}" style="width: ${Math.min(100, (kw / 15) * 100)}%"></div>
        </div>
        
        <div class="cta-section visible">
          <h3 class="cta-title">Expert Air Conditioning Installation</h3>
          <p class="cta-description">Get your ${recommendedSize.toFixed(1)}kW ${systemType.toLowerCase()} professionally installed by Cali Air's licensed technicians. We service the entire Sunshine Coast region with quality workmanship and exceptional service.</p>
          <div class="cta-buttons">
            <a href="tel:0413355468" class="button button-primary">
              Request a Quote
            </a>
            <a href="mailto:enquiries@caliair.com.au" class="button button-secondary">
              Email Enquiry
            </a>
          </div>
          <div class="cta-info">
            <div class="cta-info-item">
              <span>📍</span>
              <span>Birtinya, Sunshine Coast</span>
            </div>
            <div class="cta-info-item">
              <span>📞</span>
              <span>0413 355 468</span>
            </div>
            <div class="cta-info-item">
              <span>⏰</span>
              <span>Open 8:00 AM - 5:00 PM</span>
            </div>
          </div>
        </div>
      `;
      
      resultCard.style.display = 'block';
    }

    // Calculator form submission
    document.getElementById('calculator').addEventListener('submit', function (e) {
      e.preventDefault();
      
      // Clear any previous error states first
      const resultContainer = document.getElementById('result');
      const existingError = resultContainer.querySelector('.error-state');
      if (existingError) {
        existingError.remove();
      }
      
      const errors = validateInputs();
      if (errors.length > 0) {
        const errorHtml = errors.map(error => `<div>❌ ${error}</div>`).join('');
        
        // Hide result card if showing
        const resultCard = document.querySelector('.result-card');
        if (resultCard) {
          resultCard.style.display = 'none';
        }
        
        // Insert error message before the result card, don't replace everything
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-state';
        errorDiv.innerHTML = errorHtml;
        resultContainer.insertBefore(errorDiv, resultContainer.firstChild);
        
        return;
      }

      // Clear any error states and show loading
      const existingErrorAfterValidation = resultContainer.querySelector('.error-state');
      if (existingErrorAfterValidation) {
        existingErrorAfterValidation.remove();
      }

      const resultCard = document.querySelector('.result-card');
      const resultDescription = document.getElementById('result-description');
      
      // Ensure result card exists and is visible
      if (resultCard && resultDescription) {
        resultDescription.textContent = 'Running the maths...';
        resultCard.style.display = 'block';
      }

      setTimeout(() => {
      const length = parseFloat(document.getElementById('length').value);
      const width = parseFloat(document.getElementById('width').value);
      const height = parseFloat(document.getElementById('height').value);
      const insulation = document.getElementById('insulation').value;
      const sunlight = document.getElementById('sunlight').value;
      const occupants = parseInt(document.getElementById('occupants').value);

        let kw = length * width * height * CALCULATION_FACTORS.baseMultiplier;
        kw *= CALCULATION_FACTORS.insulation[insulation];
        kw *= CALCULATION_FACTORS.sunlight[sunlight];
        if (occupants > 1) kw += (occupants - 1) * CALCULATION_FACTORS.occupantLoad;

      if (mode === 'advanced') {
        const roof = document.getElementById('roof_type').value;
        const windowArea = parseFloat(document.getElementById('window_area').value || 0);
        const orientation = document.getElementById('window_orientation').value;
        const applianceLoad = parseFloat(document.getElementById('appliance_load').value || 0);
        const zone = document.getElementById('climate_zone').value;

          kw *= CALCULATION_FACTORS.roofTypes[roof];
          if (windowArea > 4) {
            kw += windowArea * (orientation === 'west' ? 
              CALCULATION_FACTORS.windowFactors.west : 
              CALCULATION_FACTORS.windowFactors.other);
          }
        kw += applianceLoad;
          kw *= CALCULATION_FACTORS.climateZones[zone];
        }

        kw *= calculateTradieFactors();
        showResults(kw);
        showNotification('✅ Calculation completed successfully');
      }, 800);
    });

    // Tips rotation
    document.addEventListener('DOMContentLoaded', function() {
const tips = [
  "💡 Room dimensions: Measure wall-to-wall, not furniture-to-furniture. Include alcoves and bay windows in your measurements.",
  "🏠 Insulation quality: If your home was built before 1990, it likely has minimal insulation. Choose 'Poor' for more accurate sizing.",
  "☀️ Sunlight exposure: Rooms with large windows facing west need significantly more cooling power due to afternoon sun.",
  "👥 Occupancy tip: Count regular occupants, not maximum capacity. Each person adds about 100W of heat load.",
  "🌡️ Temperature reality: Most people are comfortable at 24-26°C. Sizing for 18°C wastes energy and money.",
  "📏 Ceiling height matters: Standard 2.4m ceilings are assumed. Vaulted or high ceilings need extra cooling capacity.",
  "🪟 Window direction: North-facing windows are easiest to cool. West-facing windows create the biggest cooling challenge.",
  "🏠 Roof type impact: Uninsulated metal roofs can add 30% to your cooling needs on hot Queensland days.",
  "📱 Appliance heat: Your TV, computer, and kitchen appliances all generate heat. Include major heat sources in calculations.",
  "🌿 Climate zones: Sunshine Coast has high humidity loads. Tropical climate setting adds 10% capacity for comfort.",
  "⚡ Energy efficiency: Look for 5+ star energy ratings. Higher SEER (>6.0) means lower running costs long-term.",
  "🔧 Professional sizing: This calculator gives estimates. Always get a site assessment for final system selection.",
  "🌊 Coastal considerations: Salt air requires corrosion-resistant outdoor units. Factor this into equipment selection.",
  "🏡 Open plan homes: Large connected spaces may need ducted systems or multiple split systems for even cooling.",
  "💰 Running costs: A properly sized 5kW system typically costs $1-3 per hour to run, depending on electricity rates.",
  "⚠️ Oversizing warning: Systems >20% oversized waste energy and create humidity problems. Right-sizing is crucial.",
  "🎯 Size ranges: Minimum efficient size prevents undersizing. 20% buffer allows for extreme weather days.",
  "🏠 System types: Rooms >100m³ often benefit from ducted systems. Split systems work well for smaller spaces."
];

      const rotatingTips = document.getElementById('rotating-tips');
      let currentTipIndex = 0;
      
      function rotateTips() {
        if (rotatingTips) {
          rotatingTips.style.opacity = '0';
          setTimeout(() => {
            rotatingTips.textContent = tips[currentTipIndex];
            rotatingTips.style.opacity = '1';
            currentTipIndex = (currentTipIndex + 1) % tips.length;
          }, 500);
        }
      }

      rotateTips();
      setInterval(rotateTips, 8000);
    });

    // Airflow Visualizer - Enhanced and Fixed
    let airflowAnimationId = null;
    let airflowInitialized = false;

    function initializeAirflowVisualizer() {
      
      // Prevent multiple initializations
      if (airflowInitialized) {
        return;
      }
      
      const canvas = document.getElementById('airflow-canvas');
      const ctx = canvas.getContext('2d');
      
      if (!canvas || !ctx) {
        console.error('Canvas or context not found!');
        return;
      }
      
      // Better canvas sizing
      function resizeCanvas() {
        const wrapper = canvas.parentElement;
        canvas.width = wrapper.clientWidth;
        canvas.height = wrapper.clientHeight; // Use CSS height instead of fixed 400
      }
      resizeCanvas();

      // Global variables for dragging
      let particles = [];
      const maxParticles = 150; // Reduced for better performance
      let isDraggingUnit = false;
      let unitX = canvas.width / 2;
      let unitY = canvas.height / 2;
      let currentUnit = 'wall';
      
      // Add visual feedback for interactivity
      let isHoveringUnit = false;

      // Enhanced Heat Map
      class HeatMap {
        constructor(width, height) {
          this.width = Math.floor(width / 20); // Larger cells for better performance
          this.height = Math.floor(height / 20);
          this.grid = [];
          this.cellSize = 20;
          
          for(let y = 0; y < this.height; y++) {
            this.grid[y] = [];
            for(let x = 0; x < this.width; x++) {
              this.grid[y][x] = 26; // Starting temperature
            }
          }
        }
        
        update(unitX, unitY, unitSize, particles) {
          // Cool areas where particles are present
          particles.forEach(particle => {
            const gridX = Math.floor(particle.x / this.cellSize);
            const gridY = Math.floor(particle.y / this.cellSize);
            
            if (gridX >= 0 && gridX < this.width && gridY >= 0 && gridY < this.height) {
              const cooling = unitSize * 0.04;
              this.grid[gridY][gridX] = Math.max(16, this.grid[gridY][gridX] - cooling);
            }
          });
          
          // Natural temperature rise
          for(let y = 0; y < this.height; y++) {
            for(let x = 0; x < this.width; x++) {
              this.grid[y][x] = Math.min(26, this.grid[y][x] + 0.01);
            }
          }
        }
        
        draw(ctx) {
          for(let y = 0; y < this.height; y++) {
            for(let x = 0; x < this.width; x++) {
              const temp = this.grid[y][x];
              const intensity = (temp - 16) / 10;
              
              let r, g, b;
              if (intensity < 0.5) {
                // Cool colors (blue to cyan)
                r = Math.round(intensity * 2 * 80);
                g = Math.round(180 + intensity * 50);
                b = 255;
              } else {
                // Warm colors (yellow to red)
                r = 255;
                g = Math.round(230 - (intensity - 0.5) * 200);
                b = Math.round(100 - (intensity - 0.5) * 100);
              }
              
              ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 0.15)`;
              ctx.fillRect(x * this.cellSize, y * this.cellSize, this.cellSize, this.cellSize);
            }
          }
        }
        
        getAverageTemp() {
          let sum = 0;
          for(let y = 0; y < this.height; y++) {
            for(let x = 0; x < this.width; x++) {
              sum += this.grid[y][x];
            }
          }
          return sum / (this.width * this.height);
        }
        
        getEfficiency() {
          const avgTemp = this.getAverageTemp();
          return Math.max(0, Math.min(100, ((26 - avgTemp) / 10) * 100));
        }
      }

      const heatMap = new HeatMap(canvas.width, canvas.height);

      // Enhanced Particle System
      class Particle {
        constructor(x, y, unitType, unitSize) {
          this.x = x;
          this.y = y;
          this.size = Math.random() * 2 + 1;
          this.speedX = 0;
          this.speedY = 0;
          this.unitType = unitType;
          this.unitSize = unitSize;
          this.lifetime = Math.random() * 60 + 30;
          this.age = 0;
          this.opacity = Math.random() * 0.6 + 0.4;
        }

        update() {
          this.age++;
          
          const airDirection = document.getElementById('air-direction')?.value || 'auto';
          const baseSpeed = this.unitSize * 0.3;
          
          switch(this.unitType) {
            case 'wall':
              if (airDirection === 'auto') {
                const oscillation = Math.sin(this.age * 0.1) * 0.3;
                this.speedX = Math.cos(Math.PI / 3 + oscillation) * baseSpeed;
                this.speedY = Math.sin(Math.PI / 3 + oscillation) * baseSpeed;
              } else {
                this.speedX = Math.cos(Math.PI / 3) * baseSpeed;
                this.speedY = Math.sin(Math.PI / 3) * baseSpeed;
              }
              break;
            case 'ceiling':
              const angle = this.age * 0.03;
              this.speedX = Math.cos(angle) * baseSpeed * 0.5;
              this.speedY = baseSpeed;
              break;
            case 'floor':
              this.speedX = (Math.random() - 0.5) * baseSpeed * 0.3;
              this.speedY = -baseSpeed * 0.8;
              break;
          }

          // Add some randomness for natural movement
          this.speedX += (Math.random() - 0.5) * 0.1;
          this.speedY += (Math.random() - 0.5) * 0.1;

          this.x += this.speedX;
          this.y += this.speedY;

          this.opacity = Math.max(0, 1 - (this.age / this.lifetime)) * 0.7;
        }

        draw(ctx) {
          ctx.save();
          ctx.globalAlpha = this.opacity;
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = `hsl(200, 70%, 60%)`;
          ctx.fill();
          ctx.restore();
        }

        isDead() {
          return this.age >= this.lifetime || 
                 this.x < -50 || this.x > canvas.width + 50 ||
                 this.y < -50 || this.y > canvas.height + 50;
        }
      }

      // Enhanced animation loop
      function animate() {
        if (mode !== 'airflow') {
          return;
        }

        const canvas = document.getElementById('airflow-canvas');
        const ctx = canvas.getContext('2d');
        
        if (!canvas || !ctx) {
          return;
        }

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw background grid
        ctx.strokeStyle = 'rgba(0, 0, 0, 0.05)';
        ctx.lineWidth = 1;
        for(let x = 0; x <= canvas.width; x += 50) {
          ctx.beginPath();
          ctx.moveTo(x, 0);
          ctx.lineTo(x, canvas.height);
          ctx.stroke();
        }
        for(let y = 0; y <= canvas.height; y += 50) {
          ctx.beginPath();
          ctx.moveTo(0, y);
          ctx.lineTo(canvas.width, y);
          ctx.stroke();
        }

        // Draw room features first (behind heat map and particles)
        if (roomFeatures.windows) drawWindows(ctx, canvas.width, canvas.height);
        if (roomFeatures.doors) drawDoors(ctx, canvas.width, canvas.height);
        
        // Draw heat map
        heatMap.draw(ctx);
        
        // Draw furniture after heat map but before particles
        if (roomFeatures.furniture) drawFurniture(ctx, canvas.width, canvas.height);
        
        // Update particles
        particles = particles.filter(p => !p.isDead());
        
        const unitSize = parseFloat(document.getElementById('unit-size')?.value) || 3.5;
        const airDirection = document.getElementById('air-direction')?.value || 'auto';
        let emissionRate = 3;
        if (airDirection === 'spot') emissionRate = 4;
        if (airDirection === 'wide') emissionRate = 5;
        
        // Create new particles
        if (particles.length < maxParticles) {
          for(let i = 0; i < emissionRate; i++) {
            let particleX = unitX + (Math.random() - 0.5) * 20;
            let particleY = unitY + (Math.random() - 0.5) * 10;
            particles.push(new Particle(particleX, particleY, currentUnit, unitSize));
          }
        }

        // Update systems
        heatMap.update(unitX, unitY, unitSize, particles);
        const efficiency = heatMap.getEfficiency();

        // Draw particles
        particles.forEach(particle => {
          particle.update();
          if (roomFeatures.furniture) {
            handleFurnitureCollision(particle, canvas.width, canvas.height);
          }
          particle.draw(ctx);
        });

        // Draw AC unit with hover effect
        drawUnit();
        
        // Update UI elements safely
        try {
          const avgTemp = heatMap.getAverageTemp();
          
          const tempReading = document.querySelector('.temp-reading');
          if (tempReading) {
            tempReading.textContent = `${avgTemp.toFixed(1)}°C`;
          }
          
          const efficiencyBar = document.getElementById('efficiency-bar');
          const efficiencyText = document.getElementById('efficiency-text');
          if (efficiencyBar && efficiencyText) {
            efficiencyBar.style.width = `${efficiency}%`;
            efficiencyBar.style.background = efficiency > 70 ? 'var(--success)' : 
                                           efficiency > 40 ? 'var(--warning)' : 'var(--error)';
            efficiencyText.textContent = `${efficiency.toFixed(0)}% Coverage`;
          }
          
          const ratingStars = document.querySelector('.rating-stars');
          if (ratingStars) {
            const rating = Math.round((efficiency / 100) * 5);
            ratingStars.textContent = '★'.repeat(rating) + '☆'.repeat(5 - rating);
            ratingStars.style.color = efficiency > 70 ? 'var(--success)' : 
                                    efficiency > 40 ? 'var(--warning)' : 'var(--error)';
          }
          
          const stats = document.getElementById('performance-stats');
          if (stats) {
            const statsGrid = stats.querySelector('.stats-grid');
            if (statsGrid) {
              const coverage = efficiency.toFixed(0);
              const airSpeed = (unitSize * 0.05).toFixed(2);
              const throwDistance = (unitSize * 0.8).toFixed(1);
              
              const values = statsGrid.querySelectorAll('.stat-value');
              if (values.length >= 3) {
                values[0].textContent = coverage + '%';
                values[1].textContent = airSpeed + ' m/s';
                values[2].textContent = throwDistance + 'm';
              }
            }
          }
        } catch (e) {
          // Silent error handling for UI updates
        }

        airflowAnimationId = requestAnimationFrame(animate);
      }

      function handleFurnitureCollision(particle, canvasWidth, canvasHeight) {
        // Simple collision detection with furniture
        const sofa = { x: 100, y: canvasHeight - 150, width: 200, height: 80 };
        const table = { x: 150, y: canvasHeight - 250, width: 100, height: 60 };
        
        [sofa, table].forEach(furniture => {
          if (particle.x > furniture.x && particle.x < furniture.x + furniture.width &&
              particle.y > furniture.y && particle.y < furniture.y + furniture.height) {
            // Reflect particle
            if (Math.random() > 0.5) {
              particle.speedX *= -0.8;
            } else {
              particle.speedY *= -0.8;
            }
            // Reduce particle lifetime
            particle.lifetime = Math.min(particle.lifetime, particle.age + 10);
          }
        });
      }

      function drawUnit() {
        ctx.save();
        ctx.translate(unitX, unitY);
        
        // Add glow effect when hovering or dragging
        if (isHoveringUnit || isDraggingUnit) {
          ctx.shadowColor = 'rgba(60, 161, 224, 0.5)';
          ctx.shadowBlur = 15;
        } else {
          ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
          ctx.shadowBlur = 8;
        }
        ctx.shadowOffsetY = 3;

        switch(currentUnit) {
          case 'wall':
            ctx.fillStyle = isDraggingUnit ? '#60b5e8' : '#3CA1E0';
            ctx.fillRect(-30, -15, 60, 30);
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(-25, -8, 50, 3);
            ctx.fillRect(-25, 5, 50, 3);
            break;
          case 'ceiling':
            ctx.fillStyle = isDraggingUnit ? '#60b5e8' : '#3CA1E0';
            ctx.fillRect(-35, -35, 70, 70);
            ctx.fillStyle = '#ffffff';
            ctx.beginPath();
            ctx.moveTo(-20, -20); ctx.lineTo(20, 20);
            ctx.moveTo(20, -20); ctx.lineTo(-20, 20);
            ctx.lineWidth = 4;
            ctx.stroke();
            break;
          case 'floor':
            ctx.fillStyle = isDraggingUnit ? '#60b5e8' : '#3CA1E0';
            ctx.fillRect(-20, -30, 40, 60);
            ctx.fillStyle = '#ffffff';
            for(let i = -25; i <= 25; i += 12) {
              ctx.fillRect(-15, i, 30, 4);
            }
            break;
        }
        ctx.restore();
      }

      // Enhanced mouse interaction
      function getMousePos(e) {
        const rect = canvas.getBoundingClientRect();
        return {
          x: e.clientX - rect.left,
          y: e.clientY - rect.top
        };
      }

      function isMouseOverUnit(mouseX, mouseY) {
        const dx = mouseX - unitX;
        const dy = mouseY - unitY;
        return Math.sqrt(dx * dx + dy * dy) < 40;
      }

      function handleMouseDown(e) {
        const mouse = getMousePos(e);
        if (isMouseOverUnit(mouse.x, mouse.y)) {
          isDraggingUnit = true;
          canvas.style.cursor = 'grabbing';
        }
      }

      function handleMouseMove(e) {
        const mouse = getMousePos(e);
        const wasHovering = isHoveringUnit;
        isHoveringUnit = isMouseOverUnit(mouse.x, mouse.y);

        if (isDraggingUnit) {
          unitX = Math.max(40, Math.min(canvas.width - 40, mouse.x));
          unitY = Math.max(40, Math.min(canvas.height - 40, mouse.y));
        } else {
          canvas.style.cursor = isHoveringUnit ? 'grab' : 'crosshair';
        }

        // Redraw if hover state changed
        if (wasHovering !== isHoveringUnit) {
          // Visual feedback will be handled in the animation loop
        }
      }

      function handleMouseUp(e) {
        if (isDraggingUnit) {
      }
        isDraggingUnit = false;
        canvas.style.cursor = isHoveringUnit ? 'grab' : 'crosshair';
      }

      // Unit type selection
      const unitButtons = {
        'wall-unit': 'wall',
        'ceiling-unit': 'ceiling', 
        'floor-unit': 'floor'
      };

      Object.entries(unitButtons).forEach(([buttonId, unitType]) => {
        const button = document.getElementById(buttonId);
        if (button) {
          button.addEventListener('click', function() {
            currentUnit = unitType;
            document.querySelectorAll('.button-group .button').forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
          });
        }
      });

      // Add event listeners
      canvas.addEventListener('mousedown', handleMouseDown);
      canvas.addEventListener('mousemove', handleMouseMove);
      canvas.addEventListener('mouseup', handleMouseUp);
      canvas.addEventListener('mouseleave', () => {
        isDraggingUnit = false;
        isHoveringUnit = false;
        canvas.style.cursor = 'crosshair';
      });

      // Handle window resize
      window.addEventListener('resize', () => {
        resizeCanvas();
        // Reposition unit if it's outside bounds
        unitX = Math.min(unitX, canvas.width - 40);
        unitY = Math.min(unitY, canvas.height - 40);
      });

      // Start animation
      airflowInitialized = true;
      animate();
    }

    // Cleanup function for when leaving visualization mode
    function cleanupAirflowVisualizer() {
      if (airflowAnimationId) {
        cancelAnimationFrame(airflowAnimationId);
        airflowAnimationId = null;
      }
      airflowInitialized = false;
    }

    // Room features and installation tips
    let roomFeatures = {
      furniture: false,
      windows: false,
      doors: false
    };

    function updateVisualization() {
      // This function will be called when features are toggled
      const canvas = document.getElementById('airflow-canvas');
      const ctx = canvas.getContext('2d');
      
      if (!canvas || !ctx) return;

      // Clear existing room features
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      if (roomFeatures.furniture) {
        drawFurniture(ctx);
      }
      
      if (roomFeatures.windows) {
        drawWindows(ctx);
      }
      
      if (roomFeatures.doors) {
        drawDoors(ctx);
      }
    }

    function drawFurniture(ctx) {
      // Example furniture - sofa
      ctx.save();
      ctx.fillStyle = 'rgba(180, 180, 180, 0.3)';
      ctx.strokeStyle = 'rgba(180, 180, 180, 0.5)';
      ctx.lineWidth = 2;
      
      // Sofa
      ctx.fillRect(100, canvas.height - 150, 200, 80);
      ctx.strokeRect(100, canvas.height - 150, 200, 80);
      
      // Coffee table
      ctx.fillRect(150, canvas.height - 250, 100, 60);
      ctx.strokeRect(150, canvas.height - 250, 100, 60);
      
      ctx.restore();
    }

    function drawWindows(ctx) {
      ctx.save();
      ctx.strokeStyle = 'rgba(100, 181, 246, 0.5)';
      ctx.lineWidth = 3;
      
      // Window frames
      ctx.strokeRect(0, 100, 30, 200);
      ctx.strokeRect(canvas.width - 30, 100, 30, 200);
      
      // Glass effect
      ctx.fillStyle = 'rgba(100, 181, 246, 0.1)';
      ctx.fillRect(0, 100, 30, 200);
      ctx.fillRect(canvas.width - 30, 100, 30, 200);
      
      ctx.restore();
    }

    function drawDoors(ctx) {
      ctx.save();
      ctx.strokeStyle = 'rgba(121, 85, 72, 0.5)';
      ctx.lineWidth = 3;
      
      // Door frame
      ctx.strokeRect(canvas.width - 100, canvas.height - 30, 80, 30);
      
      // Door swing arc
      ctx.beginPath();
      ctx.arc(canvas.width - 100, canvas.height, 80, -Math.PI/2, -Math.PI/4, true);
      ctx.stroke();
      
      ctx.restore();
    }

    function formatTip(tip, type = 'info') {
      return `<div class="tip-item ${type}"><span>${tip}</span></div>`;
    }

    function updateInstallationTips() {
      const unitType = currentUnit;
      const unitSize = parseFloat(document.getElementById('unit-size').value);
      const airDirection = document.getElementById('air-direction').value;
      
      let tips = [];
      
      // Unit type specific tips
      switch(unitType) {
        case 'wall':
          tips.push(formatTip("Install at 2.1-2.3m height for optimal air distribution", "success"));
          tips.push(formatTip("Maintain 15cm clearance from ceiling for proper air return", "info"));
          if(roomFeatures.furniture) {
            tips.push(formatTip("Check furniture layout - current position may affect airflow", "warning"));
          }
          break;
        case 'ceiling':
          tips.push(formatTip("Requires 300mm minimum ceiling cavity", "info"));
          tips.push(formatTip("Central positioning recommended for even distribution", "success"));
          tips.push(formatTip("Verify structural support in ceiling space", "warning"));
          break;
        case 'floor':
          tips.push(formatTip("Ideal for rooms with glass walls or height restrictions", "success"));
          tips.push(formatTip("Keep 100mm clearance from floor level", "info"));
          tips.push(formatTip("Ensure furniture doesn't block return air path", "warning"));
          break;
      }
      
      // Size specific tips
      if(unitSize <= 3.5) {
        tips.push(formatTip("Compact system - perfect for bedroom/small living areas", "info"));
      } else if(unitSize >= 7.0) {
        tips.push(formatTip("Large capacity - verify circuit amperage", "warning"));
        tips.push(formatTip("Consider multi-split system for better zone control", "info"));
      }
      
      // Room feature specific tips
      if(roomFeatures.windows) {
        tips.push(formatTip("Shield outdoor unit from direct sunlight", "warning"));
        tips.push(formatTip("Consider UV protection for west-facing windows", "info"));
      }
      
      if(roomFeatures.doors) {
        tips.push(formatTip("Unit positioned to optimize air circulation through doorways", "success"));
      }
      
      // Airflow pattern tips
      switch(airDirection) {
        case 'auto':
          tips.push(formatTip("Auto swing provides optimal room coverage", "success"));
          break;
        case 'fixed':
          tips.push(formatTip("Monitor for temperature stratification with fixed direction", "warning"));
          break;
        case 'wide':
          tips.push(formatTip("Wide angle setting ideal for open spaces", "success"));
          break;
        case 'spot':
          tips.push(formatTip("Direct cooling effective for workstations", "info"));
          break;
      }
      
      document.getElementById('installation-tips').innerHTML = tips.join('');
    }

    // Initialize room features
    document.addEventListener('DOMContentLoaded', function() {
      // Initialize room features object
      window.roomFeatures = {
        furniture: false,
        windows: false,
        doors: false
      };

      // Map checkbox IDs to feature names
      const featureMap = {
        'show-furniture': 'furniture',
        'show-windows': 'windows',
        'show-doors': 'doors'
      };

      // Add event listeners to all room feature checkboxes
      document.querySelectorAll('.room-feature').forEach(checkbox => {
        checkbox.addEventListener('change', function(e) {
          const featureKey = featureMap[this.id];
          if (featureKey) {
            window.roomFeatures[featureKey] = this.checked;
            if (typeof updateVisualization === 'function') {
              updateVisualization();
            }
          }
        });
      });

      // Initialize unit type buttons
      document.querySelectorAll('.button-group .button').forEach(button => {
        button.addEventListener('click', function() {
          document.querySelectorAll('.button-group .button').forEach(b => b.classList.remove('active'));
          this.classList.add('active');
          window.currentUnit = this.id.replace('-unit', '');
        });
      });
    });
  </script>
</body>
</html>