# City Individual Page — Integration Notes

## Open items

| # | Item | Status in static | Resolved in Drupal by |
|---|---|---|---|
| 1 | Hero cityscape photo | Placeholder copy of `centre-telangana.png` → `assets/images/city-individual/city-mumbai-gateway.png` | `field_city_photo` on `node--city` |
| 2 | Centres list (×10) | Reuse one centre photo + 10 hard-coded names (Chembur/Navi Mumbai/etc.) | Views block `view-centres-by-city` filtered by city |
| 3 | Specialty accordion (×5) | Hard-coded Retina/Keratoconus/Glaucoma/Cataract/LASIK with progressive purple bgs | Views block `view-city-specialties` filtered by `node.field_specialities_offered` |
| 4 | Doctor cards (×4) | Reuse existing 4 doctor headshots, hard-coded names | Views block `view-city-doctors` |
| 5 | FAQ items (×3) | Hard-coded cataract Q&A | `field_faq_items` paragraph reference |
| 6 | Services-across strip | Hard-coded 8 localities (Dombivli/Ghatkopar/etc.) | `field_localities` (multivalue text) joined with ` | ` |
| 7 | Hero callback form | `action="#"`, phone only | Webform `city-callback` |
| 8 | Active nav | "Locate Us" — set via `aria-current="page"` | Drupal active-trail |

## Hooking up the centre cluster

Centre cards on `centre-cluster.html` link to `/eye-hospital-in-<city>` via the city header (group label) — Drupal's existing centre-cluster template should auto-link those.

Locality links in the "Services Across Mumbai" strip (`Dombivli | Ghatkopar | …`) currently have `href="#"`. In Drupal, each should link to a locality detail page (`/eye-hospital-in-mumbai/dombivli`) — separate template, treat as future work. Until then, link them to the parent city's hash anchor (`#`) or to the cluster.

## JS dependency

Reuses the `[data-tab-swap]` handler in `js/main.js`, which is shared with centre-individual specialities and blog-individual chip tabs.

**Important:** The accordion panels on this page do NOT have `data-tab-panel` (only `data-tab` + `data-target`). Adding `data-tab-panel` would trigger the handler's `hidden`-class toggle, which would break the always-visible-but-resized accordion behavior. The panels' visual state changes are handled entirely by Tailwind's `data-[active=*]` and `group-data-[active=*]/spec` modifiers.

If you (Drupal team) regenerate the panels via Views, ensure the row template only emits `data-tab` and not `data-tab-panel`. Drupal's row template needs to alternate `data-active="true"` (for the first row) and `"false"` (for the rest).

## Schema / SEO

`schema.org/MedicalBusiness` or a custom `City` page-level structured data via Drupal Metatag's Schema.org submodule. The city page should aggregate the centres listed within it.

## Accessibility / a11y notes

- Each accordion panel is a `<div role="button" tabindex="0">`. Drupal could harden this with `role="tab"` and `aria-controls` linking to the body content if it makes sense for the SR contract.
- The expanded panel doesn't have a focus-visible ring; consider adding `focus-visible:ring-2 focus-visible:ring-primary` for keyboard users.
- Locality links in services-strip are flagged as decorative/SEO links, but they are tab-stops for keyboard users — consider if that's the desired UX.

## Testing checklist

- [ ] Render `/eye-hospital-in-<city>` for at least 3 different cities; verify all sections render
- [ ] Click each accordion panel; verify swap works for all 5
- [ ] Click each FAQ item; verify expand/collapse
- [ ] Verify mobile layout (accordion stacks, centres 1-col, doctors 1-col)
- [ ] Submit hero callback form; verify webform submission
- [ ] Verify breadcrumb back-link to home
- [ ] Verify centre cards link to `/eye-hospital-in-<city>/<centre-slug>` (centre individual pages)
- [ ] Render a city with fewer than 5 specialities; verify accordion still works (1-4 panels)
- [ ] Render a city with more than 10 centres; verify Load More / pagination