# Innov Eyes Page — Integration Notes

## Open items

| # | Item | Status in static | Resolved in Drupal |
|---|---|---|---|
| 1 | Hero patient photo | Placeholder copy of `doctor-lalit-verma.png` → `assets/images/innov-eyes/patient-girl.png` | `field_hero_image` |
| 2 | Machine / diagram / tech / lightburst images (×4) | All placeholder copies of `centre-telangana.png` | Per-section image fields |
| 3 | Hero stats (500 Hz / 99%+ / 15 min) | Hard-coded | `field_hero_stats` paragraph reference |
| 4 | Vision problems content (×5) | Hard-coded copy | Multivalue paragraph reference |
| 5 | What Makes Different cards (×4) | Hard-coded | `feature_card` paragraphs |
| 6 | What Is The Surgery copy | Hard-coded | Long-text field |
| 7 | Procedure stepper steps (×7) | Hard-coded with Step 1 detail | `procedure_step` paragraphs |
| 8 | Core Technology tab panels (×4) | Hard-coded with 3D Ray Tracing active | `tab_panel` paragraphs (reuses `[data-tab-swap]`) |
| 9 | Specifications table rows (×7) | Hard-coded | `spec_row` paragraphs |
| 10 | Benefits bar chart + 7 cards | Hard-coded percentages (98/82/45/8) and card text | `benefit_card` + `bar_data` paragraphs |
| 11 | Eligibility lists | Hard-coded | `field_eligibility_in` / `field_eligibility_out` multivalue |
| 12 | Recovery Timeline (×4) | Hard-coded with first step active | `recovery_step` paragraphs |
| 13 | Risks (×6) | Hard-coded | Multivalue text |
| 14 | Cost banner ₹1,30,000 + 5 factors | Hard-coded | `field_starting_price` + `field_cost_factors` |
| 15 | Comparison table rows (×6) | Hard-coded with InnovEyes column yellow | `comparison_row` paragraphs |
| 16 | Cost comparison table rows (×6) | Hard-coded | `cost_compare_row` paragraphs |
| 17 | Why Choose CFS cards (×4) | Hard-coded | `why_choose_card` paragraphs |
| 18 | FAQ (×6) | Hard-coded | `field_faq_items` paragraph reference |
| 19 | Hero callback form action | `action="#"`, phone only | Webform `innov-eyes-callback` |
| 20 | Active nav | "Specialities" | Drupal active-trail |

## JS dependency

Reuses the `[data-tab-swap]` handler in `js/main.js` for the Core Technology tabs section. The handler is shared across centre-individual, blog-individual, city-individual (modified pattern), and now innov-eyes. Verify all four still work after any change to that handler.

## Schema / SEO

`schema.org/MedicalProcedure` structured data via Drupal Metatag's Schema.org submodule:

```json
{
  "@context": "https://schema.org",
  "@type": "MedicalProcedure",
  "name": "Wavelight Plus InnovEyes Surgery",
  "description": "AI-driven, fully personalized laser eye surgery using 3D ray tracing and Digital Eye Twin.",
  "procedureType": "https://schema.org/SurgicalProcedure",
  "preparation": "Comprehensive pre-surgery eye evaluation including topography, pachymetry, wavefront analysis.",
  "expectedPrognosis": "Up to 99%+ success rate; recovery in 24-48 hours.",
  "estimatedCost": "₹1,30,000+ (both eyes)",
  "performedBy": {
    "@type": "MedicalOrganization",
    "name": "Centre for Sight"
  }
}
```

## Accessibility / a11y notes

- The procedure stepper's circles are decorative `<div>`s — for keyboard/screen-reader users, the Step 1 detail (heading + body) is the actual content. Drupal could add `aria-current="step"` to step 1.
- The bar chart uses CSS-only fills with no `<svg>` semantics — for SR users, percentages are visible as text above each bar. A `role="img"` + `aria-label` would harden the contract.
- The 5-col comparison table is rendered with CSS grid (not `<table>`). For SR users, consider switching to a real `<table>` with `<thead>` and `<tbody>` for better navigation. Drupal team's call.
- All images have `alt=""` (decorative).
- FAQ uses native `<details>`/`<summary>` — full keyboard support out of the box.

## Testing checklist

- [ ] Render `/wavelight-plus-innov-eyes` with full content
- [ ] Click each of the 4 Core Technology chips; verify panel swap
- [ ] Click each FAQ item; verify expand/collapse
- [ ] Submit hero callback form; verify webform submission
- [ ] Verify breadcrumb back-link to specialities cluster
- [ ] Verify "Determine Your Eligibility" CTA scrolls to hero callback
- [ ] Verify "Request a Callback" CTA in Why-Choose section scrolls to hero callback
- [ ] Verify mobile layout (5-col comparison table either horizontal-scrolls or transforms to cards; 7-step stepper compresses or stacks)
- [ ] Verify console clean (no errors)
- [ ] Render with fewer benefit cards (3-5); verify grid still balances