# Eye Specialists Page — Integration Notes

Short document explaining best-fit Drupal techniques per section, highlighting risks and open decisions. Companion to `docs/eye-specialists-drupal-mapping.md`.

## 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 in Drupal |
| Hero banner | **Paragraph** (`hero_banner_callback`) | Page-specific content; editors customise heading, subtitle, image, CTA per landing page |
| Search filter | **Views Exposed Form** | Leverages Views filter framework; integrates naturally with the doctor grid listing |
| Doctor grid | **Views page display** (`node--doctor--card.html.twig` as row template) | One template, many places; no duplication |
| Load More | **`views_load_more` module** | Avoids custom AJAX; well-maintained; replaces static `data-doctor-load-more` stub |
| Our Story and Vision | **Paragraph** (`text_callout`) | Reusable grey text block; shared bundle with centre-cluster page |
| Specialities accordion | **Paragraph bundle** (shared with homepage and centre-cluster) | Complex interactive content; already content-managed |
| Why CFS cards | **Paragraph** (`feature_card_grid` with nested `feature_card`) | Variable card count; each card is its own paragraph entity |
| FAQ | **Paragraph** (`faq_section` with nested `faq_item`) | Editors add/edit individual Q&A entries |
| Callback form | **Webform** (shared) + **Paragraph** (`callback_cta`) | Shared form across pages; validation, submission handling, email notifications built-in |

---

## Reused shared components

These files are included verbatim from `html/components/` — the Drupal team should map them to existing Twig regions/blocks from the homepage implementation, not create new templates.

| Component file | Source page | Drupal region/block |
|----------------|------------|---------------------|
| `html/components/01-utility-bar.html` | Homepage | `region--secondary.html.twig` + menu block |
| `html/components/02-main-nav.html` | Homepage | `region--header.html.twig` + `menu.html.twig` |
| `html/components/05-specialities.html` | Homepage | Paragraph bundle `specialities_accordion` |
| `html/components/15-footer.html` | Homepage | `region--footer.html.twig` |
| `html/components/16-sticky-bar.html` | Homepage | Custom block in `region--bottom.html.twig` |

No modifications to shared components are needed for this page.

---

## Reused cross-page patterns

These components are new files but follow the layout patterns established by earlier pages. The Drupal team should recognise the paragraph bundle names and reuse existing bundle configurations where possible.

| Component | Pattern source | Paragraph bundle |
|-----------|---------------|-----------------|
| `01-breadcrumb.html` | `centre-cluster-components/01-breadcrumb.html` | `breadcrumb.html.twig` (core block) |
| `02-hero-banner.html` | `centre-cluster-components/02-hero-banner.html` | `hero_banner_callback` |
| `03-search-filter.html` | `centre-cluster-components/03-search-filter.html` (adapted: 3 filters vs 2) | `views-exposed-form.html.twig` override |
| `06-our-story.html` | `centre-cluster-components/08-our-story.html` | `text_callout` |
| `07-why-cfs.html` | `centre-cluster-components/10-why-cfs.html` | `feature_card_grid` |
| `08-faq.html` | `centre-cluster-components/11-faq.html` | `faq_section` + `faq_item` |
| `05-load-more.html` | `centre-cluster-components/07-load-more.html` | `views_load_more` pager |
| `09-callback-form.html` | Cataract callback form ("Could not find" variant) | `callback_cta` |

The search filter is the one structural difference from centre-cluster: it has **three** exposed filters (location, speciality, name) instead of two (state, name). The Views configuration needs a third exposed filter for `field_specialities`.

---

## JS hooks needed

**No new JS files or new handler functions are required for this page.**

All interactive elements are covered by `js/main.js` (shared). `eye-specialists.html` contains no inline `<script>` blocks — it loads only `js/main.js` via a single `<script src="../js/main.js">` tag.

| Interaction | Handler location | Status |
|-------------|-----------------|--------|
| Mobile nav toggle | `js/main.js` (`data-menu-toggle`) | Live, shared |
| Specialities accordion | `js/main.js` (`data-accordion="specialities"`) | Live, shared |
| Sticky bar | `js/main.js` (`data-sticky-action`) | Live, shared |
| FAQ accordion | `js/main.js` (`data-faq-toggle` / `data-faq-answer` / `data-faq-item`) | Live, shared handler in `js/main.js` — no Drupal-side work needed |
| Hero callback form | `data-hero-callback` — stub form, no JS handler | Stub form, no JS handler. Drupal Webform module wires submission post-handoff |
| Search filter | Drupal Views Exposed Form handles submit | No custom JS needed after handoff |
| Doctor Load More | `data-doctor-load-more` → `views_load_more` module | No custom JS needed after handoff |
| Callback form | `data-callback-form` — stub form, no JS handler | Stub form, no JS handler. Drupal Webform module wires submission post-handoff |

---

## Caveats / known gaps

1. **`assets/images/specialists-group.png` is a placeholder.** The hero right panel currently uses a copy of `centre-delhi.png` renamed as `specialists-group.png`. The real doctors-group photography has not been provided. The `<img>` dimensions `width="663" height="672"` match the design spec (Figma frame proportions), not the placeholder image's actual dimensions. Update both the `src` and confirm dimensions match the real asset when it arrives.

2. **FAQ questions are screenshot placeholders.** Q1 is explicitly marked `*PLACEHOLDER*` in the markup. Questions 2–6 are cataract-related content from the screenshot preview (e.g. "Is Cataract Surgery A Major Surgery?", "Which Lens Is Best For Cataract?"). None of these are appropriate for an eye-specialists listing page. The Drupal content team **must replace all 6 questions** with eye-specialist-specific FAQ content before launch.

3. **Search filter is stub-only.** The `<select>` and `<input>` elements in `03-search-filter.html` contain static seeded options and no backend wiring. Drupal must wire this to the Views Exposed Form per the mapping in `docs/eye-specialists-drupal-mapping.md`. The static option values (e.g. `value="delhi"`) are illustrative — actual values must match taxonomy term machine names from the `centre_location` and `speciality` vocabularies.

4. **Hero `<img>` `width="663" height="672"` matches design spec, not placeholder dimensions.** The `width`/`height` attributes are intentionally set to the Figma-specified dimensions of the real asset slot. This ensures the browser reserves the correct layout space (avoiding CLS) once the real image is dropped in. Do not change these values to match the placeholder image — instead, ensure the real doctors-group photo is delivered at 663×672px (or 2× for retina: 1326×1344px).

5. **`+91` phone prefix div has no `aria-hidden`.** The `<div>` acting as a decorative prefix in the hero phone input (`02-hero-banner.html`) and callback form (`09-callback-form.html`) does not carry `aria-hidden="true"`. This matches the existing pattern in `cataract-components/` and `centre-cluster-components/`. A screen reader will announce "+91" before the input, which is confusing. Consider a project-wide a11y improvement: add `aria-hidden="true"` to all `+91` prefix divs across all pages during the Drupal Twig implementation pass.

---

## Paragraph bundle suggestions (new for this page)

All required bundles already exist from prior pages. No new bundles are needed:

| Bundle | First introduced on | Used here as |
|--------|-------------------|--------------|
| `hero_banner_callback` | Centre-cluster | Hero with inline phone CTA |
| `text_callout` | Centre-cluster | Our Story grey block |
| `feature_card_grid` + `feature_card` | Centre-cluster | Why CFS 4-card grid |
| `faq_section` + `faq_item` | Centre-cluster / Cataract | FAQ accordion |
| `callback_cta` | Cataract / Centre-cluster | Callback form section |
| `specialities_accordion` | Homepage | Specialities strip |

The only **new Drupal entity** this page introduces is the `node--doctor` content type (with its `card` view mode). This is the primary implementation work for the Drupal team on this page.

---

## Views suggestions

One new View needed:

**View: "Doctors"**
- Base: `node` (type = `doctor`)
- Display 1: **Page listing** (the eye-specialists page body — the doctor grid)
  - Row template: `node--doctor--card.html.twig` (view mode `card`)
  - Sort: `field_years_of_experience` DESC, then `title` ASC
  - Filter: published = Yes
  - Exposed filters: `field_location` (dropdown), `field_specialities` (dropdown), `title` (contains)
  - Pager: `views_load_more` — initial display 8 or 12 cards, load 8 more per click
  - Path: `/eye-specialists` (or append as a block on the landing page node)

The doctor card view mode template is specific to this page. Unlike centre cards (which appear on the homepage listing too), doctor cards are only on this page for now — but design the template generically so it can be reused on a per-doctor listing or search results page.

---

## Files shared with other pages

- `css/input.css`, `css/output.css`, `css/custom.css` — no new utility classes introduced
- `js/main.js` — nav toggle, specialities accordion, sticky bar, FAQ accordion (all shared).
- `html/components/` — utility bar, nav, specialities, footer, sticky bar (5 files verbatim)

## No deviations from design

All sections match the eye-specialists Figma design intent as referenced in `docs/eye-specialists-design-spec.md`. Doctor card image placeholders use existing project images (`doctor-lalit-verma.png` etc.) as stand-ins — Drupal will populate real per-doctor photos via `field_photo`.