# BroadbandFacts

> Slug: `broadband-facts` · Category: Display

## When to use
- The FCC-mandated **broadband nutrition label** for an Internet service plan — pricing, fees, speeds, ACP participation, policy links, and customer support contact.
- One label per plan, surfaced on a plan-detail or compare page.

## When NOT to use
- Generic pricing summaries -> `BillCard` or a custom layout with `Tidbit` / `Title`.
- Mobile / phone plan disclosures (the label is broadband-specific).
- A short marketing card -> `DisclosureCard`.

## Variants & decision tree
- Single monthly price -> set `monthlyPrice` plus optional `linesSummary`.
- Itemized line-based pricing -> set `priceDetails` (and optionally `moreLines`).
- Itemized fees -> use `monthlyFeesItems` / `oneTimeFeesItems`; otherwise pass `monthlyFeesValue` / `oneTimeFeesValue`.
- Bilingual deployments: render two instances or pass localized strings (the component does not auto-translate).

## States
- `expanded` — controls the inner accordion's initial state.
- `focused` — force-focus visual on the accordion button.
- `inverse` — dark-background styling.

## Props (high-level groups)
| Group | Required props |
| --- | --- |
| Headline | `heading`, `subheading`, `accordionEyebrow`, `accordionHeading` |
| Monthly Price | `monthlyPriceHeading` (+ `monthlyPrice` or `priceDetails`) |
| Charges & Terms | `additionalChargesAndTermsHeading`, `monthlyFeesSubheading`, `oneTimeFeesSubheading`, `earlyTerminationChargesLabel`, `taxLabel`, `taxValue` |
| Discounts | `discountsHeading`, `discountsParagraph` |
| ACP | `acpHeading`, `acpParagraph`, `acpLineLabel` |
| Speeds | `speedsHeading`, `downloadSpeedLabel/Value`, `uploadSpeedLabel/Value`, `latencyLabel/Value`, `dataIncludedLabel` |
| Policies | `networkPolicyLinkText/Href`, `privacyPolicyLinkText/Href` |
| Support | `customerSupportHeading`, `contactLinkText/Href` |

Optional content: `priceDetails`, `moreLines`, `monthlyFeesItems`, `oneTimeFeesItems`, `dataUsageChargeItems`, `introParagraph1/2`, `supportParagraph1/2`, `footerParagraph`, `uniquePlanIdentifierLabel/value`.

## Usage examples
```tsx
import { BroadbandFacts } from 'arrow-react-bootstrap';

<BroadbandFacts
  heading="Broadband Facts"
  subheading="Mobile Broadband Consumer Disclosure"
  accordionEyebrow="T-Mobile plan"
  accordionHeading="Go5G Next"
  monthlyPriceHeading="Monthly Price"
  monthlyPrice={105}
  linesSummary="1 line"
  additionalChargesAndTermsHeading="Additional Charges & Terms"
  monthlyFeesSubheading="Provider Monthly Fees"
  monthlyFeesValue={0}
  oneTimeFeesSubheading="One-time Fees"
  oneTimeFeesValue={35}
  earlyTerminationChargesLabel="Early termination fee"
  taxLabel="Taxes & fees"
  taxValue="Included in monthly price"
  discountsHeading="Discounts & Bundles"
  discountsParagraph={<>See current promotions <a href="/promo">here</a>.</>}
  acpHeading="Affordable Connectivity Program (ACP)"
  acpParagraph="The ACP is a federal program…"
  acpLineLabel="Participates in the ACP"
  acpLineValue="No"
  speedsHeading="Speeds Provided with Plan"
  downloadSpeedLabel="Typical Download Speed" downloadSpeedValue="80-382 Mbps"
  uploadSpeedLabel="Typical Upload Speed" uploadSpeedValue="7-32 Mbps"
  latencyLabel="Typical Latency" latencyValue="19-37 ms"
  dataIncludedLabel="Data Included with Monthly Price"
  dataIncludedValue="Unlimited"
  networkPolicyLinkText="Network Management" networkPolicyLinkHref="/network"
  privacyPolicyLinkText="Privacy Policy" privacyPolicyLinkHref="/privacy"
  customerSupportHeading="Customer Support"
  contactLinkText="Contact us" contactLinkHref="/support"
/>
```

## Composition
- Render once per plan; do not nest. Place inside a plan-detail page; pair with a `Title` and the plan's marketing cards.

## Accessibility
- Inner accordion uses Arrow's accordion pattern (correct `aria-expanded`).
- Provide localized strings for every label — the component does not provide defaults.

## Do / Don't
- Do: keep wording identical to the FCC template where possible (this is a regulatory artifact).
- Do: use itemized props (`priceDetails`, `monthlyFeesItems`) when several lines must be shown.
- Don't: omit required headings — they are FCC-mandated.
- Don't: customize visuals beyond `inverse` and `className`.
