---
import { formatUSD } from "../lib/intake_manifest";

export interface Props {
  priceCents?: number;
  govFeeLabel?: string;
  note?: string;
}

const { priceCents, govFeeLabel, note } = Astro.props;
const hasPrice = typeof priceCents === "number";
---

{hasPrice && (
  <aside class="pw-price-banner" aria-label="Service price">
    <div>
      <p class="pw-price-label">Service fee</p>
      <p class="pw-price-value">{formatUSD(priceCents!)}</p>
    </div>
    <div class="pw-price-copy">
      {govFeeLabel ? (
        <p><strong>Pass-through fees:</strong>{" "}{govFeeLabel}. Billed separately at cost.</p>
      ) : (
        <p>No hidden Performance West service fee. You will review the total before payment.</p>
      )}
      {note && <p>{note}</p>}
    </div>
  </aside>
)}

<style>
  .pw-price-banner {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.15rem;
    margin: 1rem 0 1.5rem;
    border: 2px solid #fed7aa;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    box-shadow: 0 10px 28px rgba(249, 115, 22, 0.10);
  }
  .pw-price-label {
    margin: 0 0 0.15rem;
    color: #9a3412;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pw-price-value {
    margin: 0;
    color: #ea580c;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    font-weight: 900;
  }
  .pw-price-copy {
    max-width: 30rem;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.45;
  }
  .pw-price-copy p { margin: 0.2rem 0; }
  @media (max-width: 640px) {
    .pw-price-banner { align-items: flex-start; flex-direction: column; }
  }
</style>