---
import Base from "../../layouts/Base.astro";
import Wizard from "../../components/intake/Wizard.astro";
import TaxDeductibilityNotice from "../../components/TaxDeductibilityNotice.astro";
import { INTAKE_MANIFEST, SERVICE_META, formatUSD } from "../../lib/intake_manifest";

const slug = "dc-agent";
const steps = INTAKE_MANIFEST[slug];
const meta = SERVICE_META[slug];
const title = meta ? `Order ${meta.name}` : "Order";
const description = "Your required D.C. registered agent for service of process (47 CFR § 413). Uses Northwest Registered Agent wholesale.";
---

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

    <Wizard service_slug={slug} steps={steps ?? ["entity", "review", "payment"]} title={meta?.name ?? slug} />
  </main>
  <script>
    if (new URLSearchParams(window.location.search).has("token")) {
      const p = document.getElementById("pw-price");
      const t = document.getElementById("pw-tax-notice");
      if (p) p.style.display = "none";
      if (t) t.style.display = "none";
    }
  </script>
</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>