All-in Price <mv-all-in>

node scripts/add.mjs all-in --out ./src/marvelous

<mv-all-in base="164" quantity="3" unit="night">
  <span data-fee="32" data-per="unit">Destination fee</span>
  <span data-fee data-kind="tax" data-rate="17.49%">Hotel tax</span>
</mv-all-in>

<div id="ai-demo" style="width:min(100%,64rem);margin-inline:auto">
  <style>
    #ai-demo { display:grid; gap:1.25rem; align-content:start }
    #ai-demo .ai-top { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1.25rem; align-items:start }
    #ai-demo .ai-card { display:grid; gap:1rem; min-width:0; padding:1.25rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm) }
    #ai-demo .ai-eyebrow { margin:0; color:var(--mv-fg-subtle); font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase }
    #ai-demo .ai-title { margin:.125rem 0 0; font-size:1.0625rem; font-weight:650; letter-spacing:-.01em }
    #ai-demo .ai-meta { margin:.25rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #ai-demo .ai-media { display:flex; gap:.875rem; align-items:flex-start }
    #ai-demo .ai-thumb { flex:none; display:grid; place-items:center; width:4.5rem; height:4.5rem; border-radius:var(--mv-radius-lg); background:linear-gradient(135deg, color-mix(in oklab, var(--mv-accent) 22%, var(--mv-bg-muted)), var(--mv-bg-muted)); color:var(--mv-fg-muted) }
    #ai-demo .ai-thumb svg { width:1.75rem; height:1.75rem }
    #ai-demo .ai-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.625rem 1rem; padding-top:1rem; border-top:1px solid var(--mv-border) }
    #ai-demo .ai-control { display:grid; gap:.3125rem }
    #ai-demo .ai-label { color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    #ai-demo .ai-log { min-height:1.1rem; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono) }
    #ai-demo .ai-compare { display:grid; gap:1rem; padding:1.25rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle) }
    #ai-demo .ai-compare-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.75rem 1.25rem }
    #ai-demo .ai-compare-tools { display:flex; flex-wrap:wrap; gap:.625rem 1rem }
    #ai-demo .ai-offer { display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto; gap:.75rem 1.25rem; align-items:start; padding:1rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-surface) }
    #ai-demo .ai-seller { display:grid; gap:.25rem; min-width:0 }
    #ai-demo .ai-seller h4 { margin:0; font-size:.9375rem; font-weight:650 }
    #ai-demo .ai-seller p { margin:0; color:var(--mv-fg-muted); font-size:.75rem; line-height:1.45 }
    #ai-demo .ai-offer .mv-button { align-self:start }
    @media (max-width:52rem) {
      #ai-demo .ai-top { grid-template-columns:minmax(0,1fr) }
      #ai-demo .ai-offer { grid-template-columns:minmax(0,1fr) }
    }
  </style>

  <div class="ai-top">
    <!-- Hotel booking: the total leads, the nightly rate is secondary, the destination fee is due at the property. -->
    <section class="ai-card" aria-labelledby="ai-hotel-title">
      <div class="ai-media">
        <span class="ai-thumb" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21V8l9-5 9 5v13"/><path d="M9 21v-6h6v6"/><path d="M8 10h.01M12 10h.01M16 10h.01"/></svg></span>
        <div>
          <p class="ai-eyebrow">Hotel · Chicago, IL</p>
          <h3 class="ai-title" id="ai-hotel-title">The Marlowe River North</h3>
          <p class="ai-meta">Deluxe King · Wed, Oct 14 to Sat, Oct 17, 2026 · 2 guests</p>
        </div>
      </div>

      <mv-all-in id="ai-hotel" base="164" quantity="3" unit="night" base-label="Room rate" data-size="lg">
        <span data-fee="32" data-per="unit" data-due="at the property" data-note="Wi-Fi, fitness center and two welcome drinks. Charged by the hotel.">Destination fee</span>
        <span data-fee="18.90" data-note="Charged by the booking site to process your reservation.">Service fee</span>
        <span data-fee data-kind="tax" data-rate="17.49%" data-note="State, county and city hotel taxes.">Chicago hotel tax</span>
        <span data-fee="28" data-per="unit" data-optional data-note="Served 7-10:30 a.m. in the lobby café.">Breakfast for two</span>
        <span data-fee="72" data-per="unit" data-optional data-note="In-and-out privileges.">Valet parking</span>
        <span data-fee="40" data-optional data-note="Subject to availability, confirmed at check-in.">Late checkout (2 p.m.)</span>
      </mv-all-in>

      <div class="ai-controls">
        <div class="ai-control">
          <span class="ai-label" id="ai-nights-l">Nights</span>
          <mv-segmented id="ai-nights" aria-labelledby="ai-nights-l" name="nights" value="3">
            <button value="2">2</button>
            <button value="3">3</button>
            <button value="5">5</button>
          </mv-segmented>
        </div>
        <div class="ai-control">
          <span class="ai-label" id="ai-head-l">Headline</span>
          <mv-segmented id="ai-head" aria-labelledby="ai-head-l" name="headline" value="total">
            <button value="total">All-in total</button>
            <button value="base">Base price</button>
          </mv-segmented>
        </div>
        <p class="ai-log" id="ai-log" aria-live="polite" style="flex:1 1 12rem;align-self:end">Open “What’s included” or add an extra.</p>
      </div>
    </section>

    <!-- SaaS checkout: intro price, higher renewal, per-seat minimum, tax and currency by region. -->
    <section class="ai-card" aria-labelledby="ai-saas-title">
      <div>
        <p class="ai-eyebrow">Checkout · Team plan</p>
        <h3 class="ai-title" id="ai-saas-title">Relaydesk CRM</h3>
        <p class="ai-meta">Shared inbox, pipelines and reporting for small sales teams.</p>
      </div>

      <mv-all-in id="ai-saas" base="12" renewal="19" intro-periods="3" unit="seat" period="month" quantity="2" min-quantity="3" region="US-NY" base-label="Intro price">
        <span data-fee data-kind="tax" data-rate="8.875" data-region="US-NY">New York sales tax</span>
        <span data-fee data-kind="tax" data-rate="19" data-region="DE">German VAT</span>
        <span data-fee data-kind="tax" data-rate="20" data-region="GB">UK VAT</span>
        <span data-fee="2" data-per="unit" data-optional data-note="10 GB extra per seat.">Extra file storage</span>
      </mv-all-in>

      <div class="ai-controls">
        <div class="ai-control">
          <span class="ai-label" id="ai-seats-l">Seats</span>
          <mv-segmented id="ai-seats" aria-labelledby="ai-seats-l" name="seats" value="2">
            <button value="2">2</button>
            <button value="5">5</button>
            <button value="12">12</button>
          </mv-segmented>
        </div>
        <div class="ai-control">
          <label class="ai-label" for="ai-region">Billing country</label>
          <select class="mv-select" id="ai-region" data-size="sm">
            <option value="US-NY" selected>United States (NY)</option>
            <option value="US-OR">United States (OR)</option>
            <option value="DE">Germany</option>
            <option value="GB">United Kingdom</option>
          </select>
        </div>
      </div>
    </section>
  </div>

  <!-- Ticket comparison: every offer shows its all-in total, sorted by what you will actually pay. -->
  <section class="ai-compare" aria-labelledby="ai-cmp-title">
    <div class="ai-compare-head">
      <div>
        <p class="ai-eyebrow">2 tickets · Floor B, Row 12</p>
        <h3 class="ai-title" id="ai-cmp-title">Lumen Arena · Sat, Nov 7, 2026, 8:00 p.m.</h3>
      </div>
      <div class="ai-compare-tools">
        <div class="ai-control">
          <span class="ai-label" id="ai-show-l">Show</span>
          <mv-segmented id="ai-show" aria-labelledby="ai-show-l" name="show" value="total">
            <button value="total">All-in totals</button>
            <button value="base">Advertised prices</button>
          </mv-segmented>
        </div>
        <div class="ai-control">
          <span class="ai-label" id="ai-sort-l">Sort by</span>
          <mv-segmented id="ai-sort" aria-labelledby="ai-sort-l" name="sort" value="total">
            <button value="total">Total</button>
            <button value="base">Advertised</button>
          </mv-segmented>
        </div>
      </div>
    </div>

    <mv-all-in-list id="ai-list" sort="total" headline="total">
      <article class="ai-offer" data-name="SeatHub">
        <div class="ai-seller">
          <h4>SeatHub</h4>
          <p>Resale marketplace · delivered to your phone 48 h before the show</p>
        </div>
        <mv-all-in base="89" quantity="2" unit="ticket" data-size="sm">
          <span data-fee data-rate="27%" data-note="Marketplace fee, charged per order.">Service fee</span>
          <span data-fee="7.50" data-per="unit" data-note="Collected for the venue.">Facility fee</span>
          <span data-fee="5.95">Order processing</span>
          <span data-fee data-kind="tax" data-rate="9%">Amusement tax</span>
        </mv-all-in>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm">Select</button>
      </article>

      <article class="ai-offer" data-name="TixPoint">
        <div class="ai-seller">
          <h4>TixPoint</h4>
          <p>Verified resale · instant mobile transfer</p>
        </div>
        <mv-all-in base="104" quantity="2" unit="ticket" data-size="sm">
          <span data-fee="11" data-per="unit">Service fee</span>
          <span data-fee data-kind="tax" data-rate="9%">Amusement tax</span>
        </mv-all-in>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm">Select</button>
      </article>

      <article class="ai-offer" data-name="Lumen Arena box office">
        <div class="ai-seller">
          <h4>Lumen Arena box office</h4>
          <p>Official seller · pick up at will call or print at home</p>
        </div>
        <mv-all-in base="118" quantity="2" unit="ticket" data-size="sm">
          <span data-fee="3" data-per="unit" data-note="Venue restoration fee.">Facility fee</span>
          <span data-fee data-kind="tax" data-rate="9%">Amusement tax</span>
        </mv-all-in>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm">Select</button>
      </article>
    </mv-all-in-list>
  </section>

  <script type="module">
    const hotel = document.getElementById("ai-hotel");
    const saas = document.getElementById("ai-saas");
    const list = document.getElementById("ai-list");
    const log = document.getElementById("ai-log");
    const say = (text) => { log.textContent = text; };

    document.getElementById("ai-nights").addEventListener("mv-change", (e) => { hotel.quantity = Number(e.detail.value); });
    document.getElementById("ai-head").addEventListener("mv-change", (e) => { hotel.headline = e.detail.value; });
    hotel.addEventListener("mv-breakdown-open", (e) => say(`mv-breakdown-open · total ${hotel.formattedTotal}`));
    hotel.addEventListener("mv-extra-change", (e) => say(`mv-extra-change · ${e.detail.label} ${e.detail.added ? "added" : "removed"}`));

    document.getElementById("ai-seats").addEventListener("mv-change", (e) => { saas.quantity = Number(e.detail.value); });
    // Each billing country has its own currency and list price.
    const regions = {
      "US-NY": { currency: "USD", locale: "en-US", base: 12, renewal: 19 },
      "US-OR": { currency: "USD", locale: "en-US", base: 12, renewal: 19 },
      DE: { currency: "EUR", locale: "de-DE", base: 11, renewal: 18 },
      GB: { currency: "GBP", locale: "en-GB", base: 10, renewal: 16 },
    };
    document.getElementById("ai-region").addEventListener("change", (e) => {
      const r = regions[e.target.value];
      Object.assign(saas, { currency: r.currency, locale: r.locale, base: r.base, renewal: r.renewal, region: e.target.value });
    });

    document.getElementById("ai-show").addEventListener("mv-change", (e) => { list.headline = e.detail.value; });
    document.getElementById("ai-sort").addEventListener("mv-change", (e) => { list.sort = e.detail.value; });
  </script>
</div>