SF Permits MCP Server

{# showcase_whatif.html — What-If Comparison (visual-first redesign) #}
{# Receives: showcase.whatif #}
{% set whatif = showcase.whatif %}
<div class="showcase-whatif glass-card"
     data-track="showcase-view"
     data-showcase="whatif"
     style="padding: var(--space-6);">
  <style>
    .whatif-intel-label {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      margin-bottom: var(--space-4);
    }
    .whatif-compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
      margin-bottom: var(--space-4);
    }
    .whatif-col {
      border-radius: var(--radius-sm);
      padding: var(--space-4);
    }
    .whatif-col--a {
      background: rgba(52, 211, 153, 0.07);
      border: 1px solid rgba(52, 211, 153, 0.18);
    }
    .whatif-col--b {
      background: rgba(251, 191, 36, 0.07);
      border: 1px solid rgba(251, 191, 36, 0.18);
    }
    .whatif-col-title {
      font-family: var(--sans);
      font-size: var(--text-xs);
      font-weight: 400;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: var(--space-2);
    }
    .whatif-col--a .whatif-col-title {
      color: var(--signal-green);
    }
    .whatif-col--b .whatif-col-title {
      color: var(--signal-amber);
    }
    .whatif-big-number {
      font-family: var(--mono);
      font-size: clamp(1.75rem, 3vw, 2.25rem);
      font-weight: 300;
      line-height: 1;
      margin-bottom: var(--space-2);
    }
    .whatif-col--a .whatif-big-number {
      color: var(--signal-green);
    }
    .whatif-col--b .whatif-big-number {
      color: var(--signal-amber);
    }
    .whatif-sub {
      font-family: var(--mono);
      font-size: var(--text-xs);
      color: var(--text-secondary);
    }
    .whatif-bars {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
      margin-bottom: var(--space-5);
    }
    .whatif-bar-wrap {
      height: 4px;
      background: var(--glass-border);
      border-radius: var(--radius-full);
      overflow: hidden;
    }
    .whatif-bar-fill {
      height: 100%;
      border-radius: var(--radius-full);
    }
    .whatif-bar-fill--a {
      width: 20%;
      background: var(--signal-green);
    }
    .whatif-bar-fill--b {
      width: 100%;
      background: var(--dot-amber);
    }
    .whatif-cta-row {
      padding-top: var(--space-4);
      border-top: 1px solid var(--glass-border);
      display: flex;
      justify-content: flex-end;
    }
  </style>

  <div class="whatif-intel-label">Simulation Intelligence</div>

  <div class="whatif-compare">
    <div class="whatif-col whatif-col--a">
      <div class="whatif-col-title">Kitchen remodel</div>
      <div class="whatif-big-number">2 weeks</div>
      <div class="whatif-sub">$1,200 &middot; OTC</div>
    </div>
    <div class="whatif-col whatif-col--b">
      <div class="whatif-col-title">Kitchen + Bath + Wall</div>
      <div class="whatif-big-number">5 months</div>
      <div class="whatif-sub">$6,487 &middot; In-house</div>
    </div>
  </div>

  <div class="whatif-bars">
    <div class="whatif-bar-wrap">
      <div class="whatif-bar-fill whatif-bar-fill--a"></div>
    </div>
    <div class="whatif-bar-wrap">
      <div class="whatif-bar-fill whatif-bar-fill--b"></div>
    </div>
  </div>

  <div class="whatif-cta-row">
    <a href="/tools/what-if?demo=kitchen-vs-full"
       class="ghost-cta"
       data-track="showcase-click"
       data-showcase="whatif">Compare your project &rarr;</a>
  </div>
</div>