# City Individual Page — Component Inventory

**Page file:** `html/city-individual.html`
**Component files:** `html/city-individual-components/` (page-specific) + `html/components/` (shared)

## Components used

| # | Section | Component file | Reused from | Type |
|---|---------|----------------|-------------|------|
| 1 | Top utility bar | `html/components/01-utility-bar.html` | Homepage (verbatim) | Shared |
| 2 | Main navigation | `html/components/02-main-nav.html` | Homepage (verbatim) | Shared |
| 3 | Breadcrumb | `html/city-individual-components/01-breadcrumb.html` | Pattern from centre-individual | New |
| 4 | Hero (heading + tagline + embedded callback + cityscape) | `html/city-individual-components/02-hero-banner.html` | Hero callback shape from centre-individual | New |
| 5 | About paragraph | `html/city-individual-components/03-about.html` | New | New |
| 6 | Centres in city (10-card grid) | `html/city-individual-components/04-centres-in-city.html` | Centre-card markup from `centre-cluster-components/05-centre-card.html` | New (uses card pattern) |
| 7 | Specialties Available (horizontal accordion) | `html/city-individual-components/05-specialties-accordion.html` | New (reuses `[data-tab-swap]` JS) | New |
| 8 | Eye Care Specialists row | `html/city-individual-components/06-eye-care-specialists.html` | Doctor-card markup from centre-individual | New |
| 9 | FAQ accordion (3 items) | `html/city-individual-components/07-faq.html` | Native `<details>` pattern | New |
| 10 | Services-across strip | `html/city-individual-components/08-services-strip.html` | New | New |
| 11 | Callback form | `html/city-individual-components/09-callback-form.html` | Cross-page copy of `blogs-components/10-callback-form.html` | New (cross-page reuse) |
| 12 | Footer | `html/components/15-footer.html` | Homepage (verbatim) | Shared |
| 13 | Sticky bottom bar | `html/components/16-sticky-bar.html` | Homepage (verbatim) | Shared |

## JavaScript hooks

Reuses existing handlers; no new JS.

| Hook | Element | Behaviour |
|------|---------|-----------|
| `data-tab-swap` | Accordion container | Click any panel → swap which one has `data-active="true"` |
| `data-tab` + `data-target` | Each accordion panel (acts as both chip and panel) | Click target |
| `data-active` | Each panel | `"true"` for expanded, `"false"` for collapsed; styled via Tailwind `data-[active=*]` and `group-data-[active=*]/spec` modifiers |
| `data-doctor-card` | Each doctor card | Card-level hook for Drupal Views |

**Note on accordion implementation:** The 5 panels are each both the click target (`data-tab`) and the visual element. They do NOT have `data-tab-panel` (intentionally — that attribute would trigger the JS handler's `hidden`-class toggle, which would break the always-visible-but-resized accordion behavior). Visual states swap via Tailwind's `data-[active=*]` modifier on the panel and `group-data-[active=*]/spec` on its expanded/collapsed children.

## Design tokens

No new tokens. New CSS variable on accordion panels: `--spec-bg` (one of 5 progressive purple shades from `#2B286F` darkest to `#5B54EB` lightest), used by the collapsed-content child only.

## Dynamic content readiness

| Requirement | How this page meets it |
|---|---|
| Variable centre count | 3-col grid handles 1-N centres |
| Variable speciality count | Accordion handles N panels (sizing scales naturally — though >5-6 may need vertical scrolling) |
| Variable doctor count | 4-col doctor grid handles 1-N |
| Variable FAQ count | space-y flex column |
| Variable locality count in services-strip | Pipe-separated, wraps naturally |