---
import Base from "../../layouts/Base.astro";
import VerticalOrderHeader from "../../components/VerticalOrderHeader.astro";
import Wizard from "../../components/intake/Wizard.astro";
import OrderPriceBanner from "../../components/OrderPriceBanner.astro";

import TruckingValueNotice from "../../components/TruckingValueNotice.astro";
import { INTAKE_MANIFEST, SERVICE_META } from "../../lib/intake_manifest";

const slug = "mcs150-update";
const steps = INTAKE_MANIFEST[slug];
const meta = SERVICE_META[slug];
const title = meta ? `Order ${meta.name}` : "Order";
const description = "FMCSA biennial update of company profile, fleet size, and mileage.";
---

<Base title={title} description={description}>
  <main>
    <section class="pw-order-intro">
      <h1>{meta?.name}</h1>
      <p class="pw-desc">{description}</p>
    </section>

    <VerticalOrderHeader vertical="trucking" />

    <OrderPriceBanner priceCents={meta?.price_cents} govFeeLabel={meta?.gov_fee_label} serviceSlug={slug} note="Choose card, ACH, or PayPal at payment." />
    <TruckingValueNotice slug={slug} />

    <Wizard service_slug={slug} steps={steps ?? ["entity", "review", "payment"]} title={meta?.name ?? slug} />
  </main>
</Base>

<style>
  main { max-width: 900px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
  .pw-order-intro { margin-bottom: 1.5rem; }
  .pw-order-intro h1 { margin: 0 0 0.25rem; color: var(--pw-navy, #1a2744); }
  .pw-price { font-size: 1.5rem; font-weight: 700; color: var(--pw-green, #059669); margin: 0 0 0.75rem; }
  .pw-desc { color: var(--pw-muted, #64748b); max-width: 48rem; }
</style>