# Centre Individual Page — Integration Notes

Open items and TODO list for the Drupal team. Each item identifies a placeholder, stub, or decision deferred from the static handover.

## Open items table

| # | Item | Status in static | Resolved in Drupal by |
|---|---|---|---|
| 1 | Centre exterior photo | Placeholder copy of `centre-telangana.png` → `assets/images/centre-individual/centre-sector-29-gurugram.png` | `field_centre_photo` on `node--centre`. Real Sector 29 photo pending from client |
| 2 | Speciality panel doctor photos (×8) | All 8 are placeholder copies of `doctor-lalit-verma.png` at `assets/images/centre-individual/speciality-doctor-{slug}.png` | `field_speciality_panel_image` per `taxonomy_term--speciality` |
| 3 | Speciality panel paragraph copy | Hard-coded one-paragraph descriptions for each of the 8 specialities | `field_speciality_description` per term |
| 4 | Centre name + address + phone + email + hours | Hard-coded "Sector 29, Gurugram" + corresponding address, phone, email, hours | `node.title` + `field_full_address`, `field_phone_primary`, `field_email`, `field_hours_text` |
| 5 | Hero callback form action | `action="#"` — phone input only | Webform `centre-callback` — POST endpoint `/webforms/centre-callback/submit`. Hidden `centre_id` = `node.id()` |
| 6 | Map iframe URL | Stub Google Maps embed pointing at place query "Centre for Sight Sector 29 Gurugram". The map area may render blank in preview if Google blocks the iframe — that's a referrer/policy issue, not a markup bug | `field_map_embed_url` (full Google Maps "Embed a map" URL pasted by the editor) |
| 7 | Doctor cards (×4) | Reuse 4 existing doctor headshots, hard-coded names/qualifications/specialities | Views block `view-centre-doctors` filtered by `node.field_practising_doctors` |
| 8 | "More Centers In Haryana" cards (×5) | Reuse `centre-sector-29-gurugram.png` for all 5, hard-coded city names ("Faridabad", "Karnal", "Panchkula", "Hisar", "Rohtak") | Views block `view-centres-by-region` filtered by `node.field_state` (excluding self). Per-centre `field_centre_photo` |
| 9 | FAQ items (×6) | Hard-coded cataract-related placeholder questions | `field_faq_items` paragraph reference. Real FAQ content pending from client |
| 10 | Specialities tab list | Static 8 chips hard-coded (LASIK, SMILE, Cataract, Glaucoma, Retina, Paediatric, Cornea, Neuro) | `field_offered_specialities` term reference (multivalue). First chip auto-active in Drupal Twig |
| 11 | Active nav | "Locate Us" — set via `aria-current="page"` on the static page | Per-route active nav; Drupal's active-trail computation handles this |
| 12 | Breadcrumb city crumb | Hard-coded "Eye Hospital In Gurugram" with link to `centre-cluster.html` | `field_city` term name + URL alias `/eye-hospital-in-<city>` |

## Hooking up the centre cluster

The centre cards on `centre-cluster.html` currently have `href="#"` on the "Book an Appointment" CTA inside each card. In Drupal, these should be replaced with the centre's profile URL.

**Decision deferred to client:** should the cluster card's "Book an Appointment" CTA go to:

- (a) the embedded hero callback form — link to `/eye-hospital-in-<city>/<slug>#hero-callback`, or
- (b) the centre profile root — link to `/eye-hospital-in-<city>/<slug>`

Option (a) preserves the "click → book" momentum from the cluster. Option (b) lets the user qualify the centre (read About, browse specialities, see doctors) before deciding to book. The Figma design didn't specify.

If the cluster card adds a separate "View centre" link in a future iteration, then the existing yellow "Book an Appointment" should go to `#hero-callback` (option a) and the new link should go to the bare URL (option b).

## Drupal templates summary

Listed in `centre-individual-drupal-mapping.md`. Brief recap:

- `node--centre--full.html.twig`
- `views-view-row--centre-specialities.html.twig`
- `views-view-row--centre-doctors.html.twig` (reuses existing doctor-card row template)
- `views-view-row--centres-by-region.html.twig` (reuses existing centre-card row template)
- `paragraph--faq_item.html.twig`
- `webform--centre-callback.html.twig`

## Schema / SEO

This page is a high-value SERP target for local "eye hospital in {city}" queries. Add `schema.org/Hospital` (or `MedicalBusiness`) structured data via Drupal Metatag's Schema.org submodule:

```json
{
  "@context": "https://schema.org",
  "@type": "Hospital",
  "name": "{node.title}",
  "image": "{absolute URL of field_centre_photo}",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "{field_full_address}",
    "addressLocality": "{field_city.name}",
    "addressRegion": "{field_state.name}",
    "addressCountry": "IN"
  },
  "telephone": "{field_phone_primary}",
  "email": "{field_email}",
  "openingHours": "{field_hours_text}",
  "geo": { "@type": "GeoCoordinates", "latitude": "{lat}", "longitude": "{long}" },
  "medicalSpecialty": "[{field_offered_specialities[*].name}]",
  "parentOrganization": { "@type": "MedicalOrganization", "name": "Centre for Sight" }
}
```

Configure via Drupal Metatag's Schema.org submodule on `node--centre` content type.

## Accessibility / a11y notes

- All 8 speciality chips are `<button type="button">` with `role="tab"` — keyboard-focusable and announce as tabs to screen readers.
- The active chip uses `data-active="true"` — Drupal could supplement with `aria-selected="true"` for ARIA conformance (the JS handler already toggles `data-active`; an additional `aria-selected` toggle would be a 1-line addition).
- The FAQ accordion uses native `<details>`/`<summary>` — full keyboard support, screen reader semantics out of the box.
- The map iframe has a descriptive `<title>` attribute.
- Decorative SVGs use `aria-hidden="true"`. Functional SVGs (e.g. the location pin in cards) are next to text labels so are appropriately decorative.
- Hero callback form input has a `<label class="sr-only">` for screen readers; visible placeholder serves sighted users.
- Console issue: hero callback form's phone input has `autocomplete="tel"` — good. Bottom callback form's inputs have `autocomplete="name"` and `autocomplete="tel"` — good. No autocomplete-attribute warnings expected.
- Tab/panel relationship enhancement: optional `aria-controls` linking each chip to its matching panel (matched by `data-speciality`) would strengthen the ARIA contract. Add during Drupal templating if the team prefers.

## Testing checklist for Drupal handoff

- [ ] Render `/eye-hospital-in-gurugram/sector-29` with full content; verify all 12 sections render
- [ ] Click each of the 8 speciality chips; verify panel content swaps and active chip updates
- [ ] Verify the FAQ accordion items expand/collapse on click and keyboard
- [ ] Submit the hero callback form with a valid phone; verify webform submission lands
- [ ] Render the page for at least 3 different centres in different states (verify the "More Centers In {state}" row updates correctly)
- [ ] Render a centre with fewer than 4 doctors (verify the doctor row + Load More handle short lists)
- [ ] Render a centre with fewer than 5 sibling centres in its state (verify the More Centers grid handles short lists)
- [ ] Render a centre with fewer than 8 specialities (verify the tab strip wraps correctly with 1-7 chips)
- [ ] Verify breadcrumb city crumb links to the city cluster page
- [ ] Verify the map iframe loads in production (check referrer policy, CSP, X-Frame-Options compatibility)
- [ ] Verify mobile sticky bar's "Book Appointment" CTA opens the hero callback form (existing behavior, should already work)