# Integration Notes — CFS Cataract Speciality Page

Technical notes for the Drupal 10 theme developer integrating the cataract page HTML/Tailwind components.

---

## 1. File Structure

- **Full page:** `html/cataract.html` — assembled page with all components inlined
- **Individual components:** `html/cataract-components/01-hero-banner.html` through `17-callback-form.html`
- **JS:** `js/cataract.js` — all cataract-specific interactions (tabs, FAQ, journey stepper, carousels)
- **CSS:** `css/input.css` (Tailwind v4 with `@theme` tokens), `css/custom.css` (shared custom styles)
- **Shared components:** Utility bar, main nav, footer, and sticky bar are embedded directly in `cataract.html` — identical to homepage versions

---

## 2. JS Interaction Hooks (Data Attributes)

The following `data-*` attributes are used as JS hooks in `js/cataract.js`. Do not remove them when porting to Twig templates.

### Tab Switching System

Used by: Risk Factors (03), Surgery Types (04), IOL Benefits (06), Understanding Cataract (02), Risks & Prevention (09)

| Attribute | Purpose |
|---|---|
| `data-tabs` | Container element; value identifies the tab group (e.g., `riskfactors`, `surgerytypes-desktop`, `ioltypes-desktop`, `understanding`, `risks`, `risks-mobile`) |
| `data-tab` | Tab trigger button; value matches `data-panel` on the corresponding content panel |
| `data-panel` | Content panel toggled by matching `data-tab` value |

Tab buttons use the CSS class `.cat-tab` and panels use `.cat-panel`. Active styling varies by section: standard sections use yellow (`bg-accent`) for the active tab; the Risks section uses navy (`bg-primary`) with white text.

### FAQ Accordion

Used by: FAQ (15)

| Attribute | Purpose |
|---|---|
| `data-faq-item` | Wrapper for each FAQ question/answer pair |
| `data-faq-toggle` | Click target (the question button) that toggles the answer visibility |
| `data-faq-answer` | The answer element toggled between `hidden` and visible; chevron icon rotates 180deg |

### Patient Journey Stepper

Used by: Patient Journey (05)

| Attribute | Purpose |
|---|---|
| `data-journey-stepper` | Root container for the stepper widget |
| `data-step` | Each clickable step dot; value is the zero-based index (0-3) |
| `data-journey-panel` | Content panel for each step; toggled by index |
| `data-journey-progress` | The progress bar element; JS sets its `width` style to `0%`, `25%`, `50%`, `75%` |
| `data-journey-title` | Mobile title element updated with the active step name |

Step names are hardcoded in JS: `['Consultations & Diagnosis', 'Procedure', 'Quick Recovery', 'Post-Op Care']`. In Drupal, these should come from field data instead.

### Expandable/Read More

Used by: Understanding Cataract (02)

| Attribute | Purpose |
|---|---|
| `data-expandable` | Wrapper for expandable content block |
| `data-expand-toggle` | Button that toggles between "Read More" / "Read Less" |
| `data-expand-full` | The hidden content revealed on toggle |
| `data-expand-dots` | The ellipsis element hidden when content is expanded |
| `data-truncatable` | Mobile content block with `max-h` class toggled |
| `data-read-more` | Mobile "Read more" button that toggles `max-h` on the preceding element |

### Symptom Carousel (Mobile)

Used by: Understanding Cataract (02) — mobile only

| Attribute | Purpose |
|---|---|
| `data-symptom-carousel` | Carousel container |
| `data-symptom-img` | Image element updated per slide |
| `data-symptom-label` | Label text updated per slide |
| `data-symptom-prev` / `data-symptom-next` | Navigation arrow buttons |

**Drupal note:** Symptom data is currently hardcoded as a JS array in `cataract.js`. For Drupal, replace this with DOM-driven data (e.g., hidden elements or `data-` attributes on server-rendered markup) so editors can manage symptoms via content fields.

### Doctor Mobile Carousel

Used by: Eye Care Experts (13) — mobile only

| Attribute | Purpose |
|---|---|
| `data-featured-prev` / `data-featured-next` | Navigation arrow buttons |
| `data-featured-img` | Doctor photo element |
| `data-featured-name` | Doctor name text |
| `data-featured-location-mobile` / `data-featured-location-desktop` | Location label |
| `data-featured-quals` | Qualifications text |
| `data-featured-subtitle` | Subtitle (e.g., "Padma Shri Awardee") |
| `data-featured-specs` | Specialty tags container |
| `data-featured-exp` | Experience years text |

**Drupal note:** Doctor data is currently hardcoded as a JS array in `cataract.js`. This must be replaced with DOM-driven data for Drupal integration. Render all doctor cards as hidden server-side markup and cycle through them via JS, or use Drupal's Views AJAX to fetch doctor data.

### Testimonials Slider

Used by: Testimonials (11)

| Attribute | Purpose |
|---|---|
| `data-slider="testimonials"` | Marks the slider container |

Testimonial photo positions are driven by CSS classes in `css/input.css` (`.testimonial-photo[data-photo-slot]`).

---

## 3. Font Loading

Same as the homepage. The design uses two Google Fonts:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
```

- **Poppins** (`--font-heading`) — section headings, navigation, buttons
- **Lato** (`--font-body`) — body text, form labels, descriptions

---

## 4. CSS Architecture

- **`css/input.css`** — Tailwind v4 source with `@theme` block defining all design tokens (colors, fonts, sizes, radii, containers). Compiled via `npx @tailwindcss/cli -i ./css/input.css -o ./css/output.css`.
- **`css/custom.css`** — Shared custom CSS for animations and effects not expressible in Tailwind utilities (testimonial photo transitions, speciality accordion animations, callback form gradient borders, CTA button hover effects, journey dot animations).
- **`css/output.css`** — Compiled Tailwind output (do not edit directly).

There is no separate cataract-specific CSS file. All cataract styles use Tailwind utilities inline in the HTML, with shared custom styles in `css/custom.css`.

---

## 5. Blocks vs Paragraphs vs Views — Cataract Page

### Use Blocks for:
- **Hero Banner** (01) — if shared across speciality pages with field variations; alternatively use Paragraph if per-page content is needed
- **Patient Journey** (05) — timeline stepper with specific data attribute requirements; custom block with repeater fields
- **Surgery Cost** (08) — cost table/cards; custom block or Paragraph depending on editorial needs
- **Callback Form** (17) — Webform block; same as homepage
- **Sticky Bar** (shared) — site-wide fixed-position block

### Use Paragraphs for:
- **Understanding Cataract** (02) — tabbed content with expandable text
- **Risk Factors** (03) — tabbed card repeaters
- **Surgery Types** (04) — surgery card repeaters in tab groups
- **IOL Benefits** (06) — IOL card repeaters in tab groups
- **Vision Types** (07) — comparison cards
- **Risks & Prevention** (09) — tabbed content (reuse "Tabbed Content" Paragraph type)
- **Why Choose Us** (10) — USP card repeaters
- **FAQ** (15) — accordion Paragraph repeaters
- **Video** (12) — video embed Paragraph

### Use Views for:
- **Eye Care Experts** (13) — Doctor content type; Views grid with featured display
- **Centres** (14) — Centre content type; reuse homepage Views
- **Testimonials** (11) — Testimonial content type; slider block referencing Views
- **Blogs** (16) — Blog content type; reuse homepage Views

---

## 6. Layout Risks & Notes

| Section | Risk | Mitigation |
|---|---|---|
| Testimonials (11) | Desktop layout uses fixed pixel dimensions (`width: 1399px; height: 599px`) and absolute positioning for photo collage | Wrap in a max-width container; photo positions are CSS-driven via `data-photo-slot` attributes — update pixel values if container size changes |
| Patient Journey (05) | Stepper requires specific `data-step` index values (0-3) and hardcoded step names in JS | Ensure Twig template outputs correct `data-step` attributes; move step names to `data-` attributes or Drupal settings |
| Doctor Carousel (13) | Doctor data is hardcoded as a JS array — will not reflect CMS content | Rewrite to read from DOM elements rendered by Views; each doctor card should be a hidden server-rendered element |
| Symptom Carousel (02) | Symptom data is hardcoded as a JS array | Same approach as doctors — render symptoms server-side and read from DOM |
| Tab Sections (03, 04, 06, 09) | Multiple tab group variants with different active styling logic | Tab group type is determined by `data-tabs` value; ensure Twig templates output the correct value for each section |
| Risks Section (09) | Desktop and mobile have completely different tab layouts (navy card vs. separate tabs) | Both layouts exist in the same component; visibility controlled by `hidden lg:block` / `lg:hidden` patterns |

---

## 7. Deviations from Homepage

The cataract page introduces the following patterns not present in the homepage:

- **Multi-group tabs** — Surgery Types and IOL Benefits use two tab groups per section (desktop), each with its own `data-tabs` container
- **Interactive stepper** — Patient Journey uses a step-by-step progress widget instead of a static timeline
- **Embedded video** — Video section (12) uses a YouTube iframe embed
- **FAQ accordion** — New accordion pattern with `data-faq-*` attributes (homepage does not have FAQ)
- **Symptom carousel** — Mobile-only carousel with JS-driven data swap
- **Expandable content** — Read More/Read Less toggle for long-form text sections