# Centre Cluster Page — Integration Notes

Short document explaining best-fit Drupal techniques per section, highlighting risks and open decisions.

## Section suitability

| Section | Best fit | Why |
|---------|----------|-----|
| Utility bar, main nav, footer, sticky bar | **Regions + Blocks** | Chrome/layout elements — render once per page template |
| Breadcrumb | **Core breadcrumb block** | Path-aware, already dynamic |
| Hero banner | **Paragraph** (`hero_banner_form`) | Page-specific content; editors customise per landing page |
| Search filter | **Views exposed form** | Leverages Views filter framework; integrates naturally with grouped listing |
| State chips | **Views block** or **Custom block with taxonomy term list** | Auto-regenerates when new states are added |
| Centre card | **Node view-mode `card`** | One template, many places (homepage, centre cluster, search results) |
| State section group | **Views display with grouping** | No duplication; editor workflow = just add centre node with state term |
| Load More | **`views_load_more` module** | Avoids custom AJAX; well-maintained |
| Our Story and Vision | **Paragraph** (`text_callout`) | Reusable across pages; grey-bg text block pattern |
| Specialities accordion | **Paragraph bundle** (shared with homepage) | Complex interactive content, content-managed |
| Experts split | **Paragraph** (`split_content`) | Generic 2-column pattern, reusable |
| Why CFS cards | **Paragraph** (`feature_card_grid` with nested `feature_card`) | Variable count of cards; each card is its own paragraph |
| FAQ | **Paragraph** (`faq_section` with nested `faq_item`) | Editors add/edit individual Q&A entries |
| Callback form | **Webform** (shared) | Validation, submission handling, email notifications built-in |

## Paragraph bundle suggestions (new)

Bundles this page needs that don't exist in the homepage/cataract setup:
- `hero_banner_form` — hero with embedded phone input + CTA (variation of the regular hero)
- `text_callout` — grey card with heading + body (simple text block)
- `split_content` — 2-column text + image with CTA (already exists? check `drupal-mapping.md`)
- `feature_card_grid` + `feature_card` — Why CFS card grid
- `faq_section` + `faq_item` — same structure as cataract page

## Views suggestions

One new View needed:

**View: "Centres by State"**
- Base: `node` (type = `centre`)
- Display 1: **Page listing** (the centre cluster page body)
  - Grouping field: `field_state`
  - Row template: `node--centre--card.html.twig` (view mode `card`)
  - Sort: state display_order, then title
  - Filter: published; optional state filter for a state-specific landing page
  - Pager: "Load More" via `views_load_more`
- Display 2: **Filter block** (for the "Search by Location" section)
  - Exposed filters: `field_state` (dropdown from taxonomy), `title` (contains)

The same View's row template is reused on the homepage centres listing (currently `html/components/04-centres-listing.html`) — the Drupal team should harmonize these.

## Layout risks

1. **State slug consistency.** The page uses `id="state-{slug}"` anchors and `href="#state-{slug}"` chips. The slug must be the term's machine name (or a deterministic transform of the display name). Inconsistency between chip href and section id = broken jumps. Recommend using taxonomy term machine_name.

2. **Mobile hamburger + sticky bar coexistence.** Both hide/show at the same breakpoint (`lg:`). If a future design shifts the mobile breakpoint, both must move in sync. Currently handled — documented in `16-sticky-bar.html` comments.

3. **Centre card button text overflow.** "Book an Appointment" is 18 characters — on mobile `text-[14px]`, h=28 it fits. If translated (Hindi: "अपॉइंटमेंट बुक करें" = longer) the card footer could wrap. Mitigation: allow footer flex to wrap, or use a shorter label. Drupal-managed label = safe.

4. **Long state names.** "Jammu & Kashmir" is the widest chip text. Already handled via `px-5`, `text-[22px]`, `whitespace-nowrap` implicit in `inline-flex`. If a new state with a longer name enters (e.g., "Dadra and Nagar Haveli"), the chip wraps at `flex-wrap` row level — acceptable.

5. **Hero phone input validation.** Currently uses HTML5 `pattern="[0-9]{10}"`. Drupal Webform should mirror this. Mismatched validation = frustrated users.

## Files shared with other pages

- `css/input.css`, `css/output.css`, `css/custom.css` — no new utility classes needed
- `js/main.js` — used for nav toggle, specialities accordion. FAQ accordion JS is currently inlined in `centre-cluster.html` — recommend moving to `js/main.js` during Drupal handoff to consolidate.
- Shared component files listed in `centre-cluster-component-inventory.md`

## No deviations from Figma

All sections match the Figma node `1:1629` ("Centre Cluster") per `docs/centre-cluster-design-spec.md`. The card image placeholders use existing project images (`centre-delhi.png`, `centre-telangana.png`) as stand-ins — Drupal will populate real per-centre images via `field_image`.