@redacto.io/consent-sdk-react 10.0.0-beta.11 → 10.0.0-beta.12

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -1,4299 +0,0 @@
-/**
- * Redacto Notice Consent Component
- *
- * A comprehensive consent management component that handles both initial consent
- * collection and reconsent flows with visual distinction between already-consented
- * and needs-consent purposes.
- */
-// @ts-nocheck - React 19 @types/react has Element/ReactNode assignability issues; tsc passes
-// React imports
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-// API imports
-import {
-  clearApiCache,
-  fetchConsentContent,
-  fetchTTSAudioUrls,
-  initiateGuardianVerification,
-  submitConsentEvent,
-  verifyGuardianStatus,
-} from "./api";
-
-// Type imports
-import type {
-  ConsentContent,
-  PurposeItemData,
-  PurposeItemProps,
-} from "./api/types";
-import type { Props, TranslationObject } from "./types";
-
-// Asset imports
-import logo from "./assets/redacto-logo.png";
-
-// Constants
-import { DPO_AUDIO_ELEMENT_MAP } from "./constants";
-import { toBcp47Code, toNativeLabel } from "./language-codes";
-
-// Utility imports
-import { injectCheckboxStyles } from "./injectStyles";
-import { styles } from "./styles";
-import { useMediaQuery } from "./useMediaQuery";
-
-// Storage service for redirect flow
-import { clearConsentState, getConsentState, saveConsentState } from "./services/storage";
-
-// =============================================================================
-// SUB-COMPONENTS
-// =============================================================================
-
-/**
- * PurposeItem Component
- *
- * Displays an individual purpose with its data elements.
- * Supports both regular consent and reconsent UI modes.
- */
-const PurposeItem: React.FC<
-  PurposeItemProps & {
-    selectedLanguage: string;
-    initialDataElementSelections?: Record<string, boolean>;
-  }
-> = ({
-  purpose,
-  selectedPurposes,
-  collapsedPurposes,
-  selectedDataElements,
-  settings,
-  styles,
-  responsiveStyles,
-  onPurposeToggle,
-  onPurposeCollapse,
-  onDataElementToggle,
-  getTranslatedText,
-  isAlreadyConsented,
-  selectedLanguage,
-  initialDataElementSelections = {},
-}) => {
-    const headingStyle = useMemo(
-      () => ({
-        color: settings?.headingColor || "#323B4B",
-        fontFamily: settings?.font || "inherit",
-      }),
-      [settings]
-    );
-
-    const textStyle = useMemo(
-      () => ({
-        color: settings?.textColor || "#344054",
-        fontFamily: settings?.font || "inherit",
-      }),
-      [settings]
-    );
-
-    return (
-      <div key={purpose.uuid}>
-        <div style={styles.optionItem}>
-          <div
-            style={styles.optionLeft}
-            onClick={() => onPurposeCollapse(purpose.uuid)}
-            role="button"
-            tabIndex={0}
-            aria-expanded={!collapsedPurposes[purpose.uuid]}
-            aria-controls={`purpose-${purpose.uuid}`}
-            aria-label={`${collapsedPurposes[purpose.uuid] ? "Expand" : "Collapse"} ${getTranslatedText(
-              `purposes.name`,
-              purpose.name,
-              purpose.uuid
-            )} details`}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                onPurposeCollapse(purpose.uuid);
-              }
-            }}
-          >
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                marginLeft: "5px",
-              }}
-            >
-              <svg
-                width="7"
-                height="12"
-                viewBox="0 0 7 12"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                stroke={settings?.headingColor || "#323B4B"}
-                strokeWidth="2"
-                strokeLinecap={"round" as const}
-                strokeLinejoin={"round" as const}
-                style={{
-                  transform: !collapsedPurposes[purpose.uuid]
-                    ? "rotate(90deg)"
-                    : "rotate(0deg)",
-                  transition: "transform 0.3s ease",
-                }}
-                aria-hidden="true"
-              >
-                <path d="M1 1L6 6L1 11" />
-              </svg>
-            </div>
-            <div style={styles.optionTextContainer}>
-              <h2
-                key={`purpose-name-${purpose.uuid}-${selectedLanguage}`}
-                id={`purpose-name-${purpose.uuid}`}
-                style={{
-                  ...styles.optionTitle,
-                  ...responsiveStyles.optionTitle,
-                  ...headingStyle,
-                }}
-              >
-                {getTranslatedText(`purposes.name`, purpose.name, purpose.uuid)}
-              </h2>
-              <h3
-                key={`purpose-description-${purpose.uuid}-${selectedLanguage}`}
-                id={`purpose-description-${purpose.uuid}`}
-                style={{
-                  ...styles.optionDescription,
-                  ...responsiveStyles.optionDescription,
-                  ...textStyle,
-                }}
-              >
-                {getTranslatedText(
-                  `purposes.description`,
-                  purpose.description,
-                  purpose.uuid
-                )}
-              </h3>
-            </div>
-          </div>
-          {!isAlreadyConsented && (
-            <input
-              className="redacto-checkbox-large"
-              type="checkbox"
-              checked={selectedPurposes[purpose.uuid] || false}
-              onChange={() => onPurposeToggle(purpose.uuid)}
-              aria-label={`Select all data elements for ${getTranslatedText(
-                `purposes.name`,
-                purpose.name,
-                purpose.uuid
-              )}`}
-            />
-          )}
-          {isAlreadyConsented && (
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "20px",
-                height: "20px",
-                borderRadius: "50%",
-                backgroundColor: "#10B981",
-                marginLeft: "12px",
-              }}
-              aria-label={`Already consented to ${getTranslatedText(
-                `purposes.name`,
-                purpose.name,
-                purpose.uuid
-              )}`}
-            >
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 12 12"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                <path
-                  d="M4 6L5.5 7.5L8.5 4.5"
-                  stroke="white"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            </div>
-          )}
-        </div>
-        {!collapsedPurposes[purpose.uuid] &&
-          purpose.data_elements &&
-          purpose.data_elements.length > 0 && (
-            <div
-              key={`purpose-${purpose.uuid}-container-${selectedLanguage}`}
-              id={`purpose-${purpose.uuid}`}
-              style={styles.dataElementsContainer}
-            >
-              {purpose.data_elements.map((dataElement: any) => (
-                <div
-                  key={`${dataElement.uuid}-${selectedLanguage}`}
-                  style={styles.dataElementItem}
-                >
-                  <span
-                    key={`data-element-${purpose.uuid}-${dataElement.uuid}-${selectedLanguage}`}
-                    id={`data-element-${purpose.uuid}-${dataElement.uuid}`}
-                    style={{
-                      ...styles.dataElementText,
-                      ...responsiveStyles.dataElementText,
-                      ...textStyle,
-                    }}
-                  >
-                    {getTranslatedText(
-                      `data_elements.name`,
-                      dataElement.name,
-                      dataElement.uuid
-                    )}
-                    {dataElement.required && (
-                      <span
-                        style={{
-                          color: "red",
-                          marginLeft: "4px",
-                        }}
-                        aria-label="required"
-                      >
-                        *
-                      </span>
-                    )}
-                  </span>
-                  {!isAlreadyConsented && (
-                    <input
-                      className="redacto-checkbox-small"
-                      type="checkbox"
-                      checked={
-                        selectedDataElements[
-                        `${purpose.uuid}-${dataElement.uuid}`
-                        ] || false
-                      }
-                      onChange={() =>
-                        onDataElementToggle(dataElement.uuid, purpose.uuid)
-                      }
-                      aria-label={`Select ${getTranslatedText(
-                        `data_elements.name`,
-                        dataElement.name,
-                        dataElement.uuid
-                      )}${dataElement.required ? " (required)" : ""}`}
-                    />
-                  )}
-                  {isAlreadyConsented && (
-                    <>
-                      {(() => {
-                        const combinedId = `${purpose.uuid}-${dataElement.uuid}`;
-                        const wasOriginallySelected =
-                          initialDataElementSelections[combinedId] || false;
-
-                        // Review mode: read-only display of what user consented to
-                        // Green tick = consented, empty circle = not consented (no editing)
-                        if (wasOriginallySelected) {
-                          return (
-                            <div
-                              style={{
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                width: "16px",
-                                height: "16px",
-                                borderRadius: "50%",
-                                backgroundColor: "#10B981",
-                              }}
-                              aria-label={`Consented to ${getTranslatedText(
-                                `data_elements.name`,
-                                dataElement.name,
-                                dataElement.uuid
-                              )}`}
-                            >
-                              <svg
-                                width="10"
-                                height="10"
-                                viewBox="0 0 10 10"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                                aria-hidden="true"
-                              >
-                                <path
-                                  d="M3 5L4.5 6.5L7.5 3.5"
-                                  stroke="white"
-                                  strokeWidth="1.5"
-                                  strokeLinecap={"round" as const}
-                                  strokeLinejoin={"round" as const}
-                                />
-                              </svg>
-                            </div>
-                          );
-                        } else {
-                          // Not consented: show empty circle (read-only, no checkbox)
-                          return (
-                            <div
-                              style={{
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                width: "16px",
-                                height: "16px",
-                                borderRadius: "50%",
-                                border: "2px solid #d0d5dd",
-                                backgroundColor: "transparent",
-                              }}
-                              aria-label={`Not consented to ${getTranslatedText(
-                                `data_elements.name`,
-                                dataElement.name,
-                                dataElement.uuid
-                              )}`}
-                            />
-                          );
-                        }
-                      })()}
-                    </>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-      </div>
-    );
-  };
-
-/**
- * GuardianForm Component
- *
- * Displays a form for collecting guardian information for minor consent.
- */
-const RELATIONSHIP_OPTIONS = [
-  { value: "Father", label: "Father" },
-  { value: "Mother", label: "Mother" },
-  { value: "Legal Guardian", label: "Legal Guardian" },
-  { value: "Grandparent", label: "Grandparent" },
-];
-
-const GuardianForm: React.FC<{
-  formData: {
-    guardianName: string;
-    guardianContact: string;
-    guardianRelationship: string;
-  };
-  errors: Record<string, string>;
-  isSubmitting: boolean;
-  onChange: (field: string, value: string) => void;
-  onNext: () => void;
-  onDecline: () => void;
-  styles: any;
-  responsiveStyles: any;
-  settings?: any;
-  componentHeadingStyle: any;
-  componentTextStyle: any;
-  acceptButtonStyle: any;
-  declineButtonStyle: any;
-  logoUrl: string;
-}> = ({
-  formData,
-  errors,
-  isSubmitting,
-  onChange,
-  onNext,
-  onDecline,
-  styles,
-  responsiveStyles,
-  settings,
-  componentHeadingStyle,
-  componentTextStyle,
-  acceptButtonStyle,
-  declineButtonStyle,
-  logoUrl,
-}) => {
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-    const [focusedIndex, setFocusedIndex] = useState(-1);
-    const [openUpward, setOpenUpward] = useState(false);
-    const dropdownRef = useRef<HTMLDivElement>(null);
-    const optionsRef = useRef<HTMLDivElement>(null);
-
-    // Close dropdown on outside click
-    useEffect(() => {
-      if (!isDropdownOpen) return;
-      const handleClickOutside = (e: MouseEvent) => {
-        if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-          setIsDropdownOpen(false);
-          setFocusedIndex(-1);
-        }
-      };
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [isDropdownOpen]);
-
-    // Determine direction on open
-    useEffect(() => {
-      if (!isDropdownOpen || !dropdownRef.current) return;
-      const rect = dropdownRef.current.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const dropdownHeight = 220; // approximate max height of options panel
-      setOpenUpward(spaceBelow < dropdownHeight && rect.top > dropdownHeight);
-    }, [isDropdownOpen]);
-
-    const handleSelect = (value: string) => {
-      onChange("guardianRelationship", value);
-      setIsDropdownOpen(false);
-      setFocusedIndex(-1);
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (!isDropdownOpen) {
-        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
-          e.preventDefault();
-          setIsDropdownOpen(true);
-          setFocusedIndex(0);
-        }
-        return;
-      }
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          setFocusedIndex((prev) => Math.min(prev + 1, RELATIONSHIP_OPTIONS.length - 1));
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          setFocusedIndex((prev) => Math.max(prev - 1, 0));
-          break;
-        case "Enter":
-        case " ":
-          e.preventDefault();
-          if (focusedIndex >= 0) handleSelect(RELATIONSHIP_OPTIONS[focusedIndex].value);
-          break;
-        case "Escape":
-        case "Tab":
-          setIsDropdownOpen(false);
-          setFocusedIndex(-1);
-          break;
-      }
-    };
-
-    // Scroll focused option into view
-    useEffect(() => {
-      if (focusedIndex >= 0 && optionsRef.current) {
-        const option = optionsRef.current.children[focusedIndex] as HTMLElement;
-        option?.scrollIntoView?.({ block: "nearest" });
-      }
-    }, [focusedIndex]);
-
-    const borderColor = settings?.borderColor || "#d0d5dd";
-    const textColor = settings?.textColor || "#344054";
-    const bgColor = settings?.backgroundColor || "#ffffff";
-    const radius = settings?.borderRadius || "8px";
-    const font = settings?.font || "inherit";
-
-    const inputStyle = {
-      width: "100%",
-      padding: "10px 12px",
-      border: `1px solid ${borderColor}`,
-      borderRadius: radius,
-      fontSize: "13px",
-      fontFamily: font,
-      color: textColor,
-      backgroundColor: bgColor,
-      marginBottom: "2px",
-      boxSizing: "border-box" as const,
-      outline: "none",
-    };
-
-    const errorStyle = {
-      color: "#DC2626",
-      fontSize: "11px",
-      marginTop: "4px",
-      marginBottom: "0px",
-    };
-
-    const labelStyle = {
-      ...componentTextStyle,
-      fontSize: "13px",
-      fontWeight: "500" as const,
-      marginBottom: "4px",
-      display: "block",
-    };
-
-    const hintStyle = {
-      fontSize: "11px",
-      color: "#667085",
-      marginTop: "2px",
-      marginBottom: "0px",
-      lineHeight: "1.4",
-    };
-
-    const infoBannerStyle = {
-      display: "flex",
-      alignItems: "flex-start",
-      gap: "8px",
-      padding: "10px 12px",
-      backgroundColor: "#EFF6FF",
-      border: "1px solid #BFDBFE",
-      borderRadius: radius,
-      marginBottom: "16px",
-      fontSize: "12px",
-      lineHeight: "1.5",
-      color: "#1E40AF",
-    };
-
-    const selectedLabel = RELATIONSHIP_OPTIONS.find((o) => o.value === formData.guardianRelationship)?.label;
-    const hasError = Boolean(errors.guardianRelationship);
-
-    return (
-      <>
-        <div style={{ ...styles.topSection, ...componentTextStyle }}>
-          <div style={styles.topLeft}>
-            <img style={styles.logo} src={logoUrl} alt="Logo" />
-            <h2
-              id="guardian-form-title"
-              style={{
-                ...styles.title,
-                ...responsiveStyles.title,
-                ...componentHeadingStyle,
-                fontSize: "16px",
-                fontWeight: 600,
-              }}
-            >
-              Guardian Verification
-            </h2>
-          </div>
-        </div>
-
-        <div
-          style={{
-            ...styles.middleSection,
-            ...responsiveStyles.middleSection,
-            ...componentTextStyle,
-          }}
-        >
-          <p
-            style={{
-              ...styles.privacyText,
-              ...responsiveStyles.privacyText,
-              ...componentTextStyle,
-              fontSize: "13px",
-              lineHeight: "1.5",
-              marginBottom: "12px",
-            }}
-          >
-            Since you are under the age of consent, a legal guardian must verify
-            their identity via DigiLocker before you can proceed.
-          </p>
-
-          <div style={infoBannerStyle}>
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#2563EB"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              style={{ flexShrink: 0, marginTop: "1px" }}
-            >
-              <circle cx="12" cy="12" r="10" />
-              <line x1="12" y1="16" x2="12" y2="12" />
-              <line x1="12" y1="8" x2="12.01" y2="8" />
-            </svg>
-            <span>
-              The guardian's name will be matched against their DigiLocker identity document (e.g. Aadhaar). Please enter the name exactly as it appears on the document.
-            </span>
-          </div>
-
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: "14px",
-            }}
-          >
-            <div>
-              <label htmlFor="guardianName" style={labelStyle}>
-                Guardian's Full Name <span style={{ color: "#DC2626" }}>*</span>
-              </label>
-              <input
-                id="guardianName"
-                type="text"
-                value={formData.guardianName}
-                onChange={(e) => onChange("guardianName", e.target.value)}
-                style={{
-                  ...inputStyle,
-                  borderColor: errors.guardianName ? "#DC2626" : borderColor,
-                }}
-                placeholder="e.g. Rajesh Kumar"
-                autoComplete="name"
-                aria-describedby="guardianName-hint"
-              />
-              <p id="guardianName-hint" style={hintStyle}>
-                Enter the full name as per government ID (Aadhaar, PAN, etc.)
-              </p>
-              {errors.guardianName && (
-                <div style={errorStyle} role="alert">{errors.guardianName}</div>
-              )}
-            </div>
-
-            <div>
-              <label htmlFor="guardianContact" style={labelStyle}>
-                Guardian's Phone Number <span style={{ color: "#DC2626" }}>*</span>
-              </label>
-              <input
-                id="guardianContact"
-                type="tel"
-                inputMode="tel"
-                value={formData.guardianContact}
-                onChange={(e) => onChange("guardianContact", e.target.value)}
-                style={{
-                  ...inputStyle,
-                  borderColor: errors.guardianContact ? "#DC2626" : borderColor,
-                }}
-                placeholder="e.g. 9876543210"
-                autoComplete="tel"
-                aria-describedby="guardianContact-hint"
-              />
-              <p id="guardianContact-hint" style={hintStyle}>
-                Mobile number linked to guardian's Aadhaar
-              </p>
-              {errors.guardianContact && (
-                <div style={errorStyle} role="alert">{errors.guardianContact}</div>
-              )}
-            </div>
-
-            <div ref={dropdownRef} style={{ position: "relative" }}>
-              <label id="guardianRelationship-label" style={labelStyle}>
-                Relationship <span style={{ color: "#DC2626" }}>*</span>
-              </label>
-              <div
-                role="combobox"
-                aria-expanded={isDropdownOpen}
-                aria-haspopup="listbox"
-                aria-labelledby="guardianRelationship-label"
-                aria-controls="guardianRelationship-listbox"
-                aria-activedescendant={focusedIndex >= 0 ? `guardianRelationship-option-${focusedIndex}` : undefined}
-                tabIndex={0}
-                onClick={() => { setIsDropdownOpen((prev) => !prev); setFocusedIndex(-1); }}
-                onKeyDown={handleKeyDown}
-                style={{
-                  ...inputStyle,
-                  borderColor: hasError ? "#DC2626" : isDropdownOpen ? (settings?.button?.accept?.backgroundColor || "#3b82f6") : borderColor,
-                  boxShadow: isDropdownOpen ? `0 0 0 1px ${settings?.button?.accept?.backgroundColor || "#3b82f6"}` : "none",
-                  color: selectedLabel ? textColor : "#9CA3AF",
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  userSelect: "none",
-                  transition: "border-color 0.15s, box-shadow 0.15s",
-                }}
-              >
-                <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                  {selectedLabel || "Select relationship"}
-                </span>
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="#667085"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  style={{
-                    flexShrink: 0,
-                    marginLeft: "8px",
-                    transform: isDropdownOpen ? "rotate(180deg)" : "rotate(0deg)",
-                    transition: "transform 0.2s",
-                  }}
-                >
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
-              </div>
-
-              {isDropdownOpen && (
-                <div
-                  ref={optionsRef}
-                  id="guardianRelationship-listbox"
-                  role="listbox"
-                  aria-labelledby="guardianRelationship-label"
-                  style={{
-                    position: "absolute",
-                    ...(openUpward
-                      ? { bottom: "calc(100% + 4px)" }
-                      : { top: "calc(100% + 4px)" }),
-                    left: 0,
-                    right: 0,
-                    backgroundColor: bgColor,
-                    border: `1px solid ${borderColor}`,
-                    borderRadius: radius,
-                    boxShadow: openUpward
-                      ? "0 -4px 12px rgba(0, 0, 0, 0.1), 0 -1px 3px rgba(0, 0, 0, 0.06)"
-                      : "0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06)",
-                    zIndex: 50,
-                    overflow: "hidden",
-                    padding: "4px 0",
-                    maxHeight: "220px",
-                    overflowY: "auto",
-                  }}
-                >
-                  {RELATIONSHIP_OPTIONS.map((option, index) => {
-                    const isSelected = formData.guardianRelationship === option.value;
-                    const isFocused = focusedIndex === index;
-                    const accentColor = settings?.button?.accept?.backgroundColor || "#3b82f6";
-                    return (
-                      <div
-                        key={option.value}
-                        id={`guardianRelationship-option-${index}`}
-                        role="option"
-                        aria-selected={isSelected}
-                        onClick={() => handleSelect(option.value)}
-                        onMouseEnter={() => setFocusedIndex(index)}
-                        style={{
-                          padding: "9px 12px",
-                          fontSize: "13px",
-                          fontFamily: font,
-                          color: isSelected ? accentColor : textColor,
-                          backgroundColor: isFocused ? "#F3F4F6" : "transparent",
-                          cursor: "pointer",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                          transition: "background-color 0.1s",
-                        }}
-                      >
-                        <span>{option.label}</span>
-                        {isSelected && (
-                          <svg
-                            width="14"
-                            height="14"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke={accentColor}
-                            strokeWidth="2.5"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            style={{ flexShrink: 0 }}
-                          >
-                            <polyline points="20 6 9 17 4 12" />
-                          </svg>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-
-              {errors.guardianRelationship && (
-                <div style={errorStyle} role="alert">{errors.guardianRelationship}</div>
-              )}
-            </div>
-          </div>
-
-          {errors.general && (
-            <div
-              role="alert"
-              style={{
-                color: "#DC2626",
-                fontSize: "13px",
-                marginTop: "16px",
-                padding: "12px",
-                borderRadius: "6px",
-                border: "1px solid #FCA5A5",
-                backgroundColor: "#FEF2F2",
-                textAlign: "center",
-              }}
-            >
-              {errors.general}
-            </div>
-          )}
-        </div>
-
-        <div
-          style={{
-            ...styles.bottomSection,
-            ...responsiveStyles.bottomSection,
-            ...componentTextStyle,
-            paddingTop: "12px",
-          }}
-        >
-          <button
-            style={{
-              ...styles.button,
-              ...responsiveStyles.button,
-              ...styles.acceptButton,
-              ...acceptButtonStyle,
-            }}
-            onClick={onNext}
-            disabled={isSubmitting}
-            type="button"
-            aria-label={
-              isSubmitting
-                ? "Verifying guardian identity"
-                : "Proceed to guardian verification"
-            }
-          >
-            {isSubmitting ? "Verifying..." : "Verify via DigiLocker"}
-          </button>
-          <button
-            style={{
-              ...styles.button,
-              ...responsiveStyles.button,
-              ...styles.cancelButton,
-              ...declineButtonStyle,
-            }}
-            onClick={onDecline}
-            type="button"
-            aria-label="Cancel"
-          >
-            Cancel
-          </button>
-        </div>
-      </>
-    );
-  };
-
-/**
- * VerificationScreen Component
- *
- * Displays verification status while DigiLocker verification is in progress.
- * No longer requires document type selection - handled by backend.
- */
-const VerificationScreen: React.FC<{
-  onBack: (clearName?: boolean) => void;
-  onContinue: () => void;
-  isInitiating: boolean;
-  isPolling: boolean;
-  isVerificationComplete: boolean;
-  isAutoTransitioning: boolean;
-  error: string | null;
-  errorCode: string | null;
-  canRetry: boolean;
-  styles: any;
-  responsiveStyles: any;
-  settings?: any;
-  componentHeadingStyle: any;
-  componentTextStyle: any;
-  acceptButtonStyle: any;
-  declineButtonStyle: any;
-  logoUrl: string;
-}> = ({
-  onBack,
-  onContinue,
-  isInitiating,
-  isPolling,
-  isVerificationComplete,
-  isAutoTransitioning,
-  error,
-  errorCode,
-  canRetry,
-  styles,
-  responsiveStyles,
-  settings,
-  componentHeadingStyle,
-  componentTextStyle,
-  acceptButtonStyle,
-  declineButtonStyle,
-  logoUrl,
-}) => {
-  const errorStyle = {
-    color: "#DC2626",
-    fontSize: "14px",
-    marginTop: "16px",
-    padding: "12px",
-    borderRadius: "6px",
-    border: "1px solid #FCA5A5",
-    backgroundColor: "#FEF2F2",
-    textAlign: "center" as const,
-  };
-
-  const statusStyle = {
-    color: "#059669",
-    fontSize: "14px",
-    marginTop: "16px",
-    padding: "12px",
-    borderRadius: "6px",
-    border: "1px solid #A7F3D0",
-    backgroundColor: "#D1FAE5",
-    textAlign: "center" as const,
-  };
-
-  const spinnerStyle = {
-    width: "48px",
-    height: "48px",
-    border: "4px solid #e5e7eb",
-    borderTopColor: settings?.button?.accept?.backgroundColor || "#3b82f6",
-    borderRadius: "50%",
-    animation: "spin 1s linear infinite",
-    margin: "24px auto",
-  };
-
-  return (
-    <>
-      <div style={{ ...styles.topSection, ...componentTextStyle }}>
-        <div style={styles.topLeft}>
-          <img style={styles.logo} src={logoUrl} alt="Logo" />
-          <h2
-            id="verification-title"
-            style={{
-              ...styles.title,
-              ...responsiveStyles.title,
-              ...componentHeadingStyle,
-              fontSize: "16px",
-              fontWeight: 600,
-            }}
-          >
-            Guardian Verification
-          </h2>
-        </div>
-      </div>
-
-      <div
-        style={{
-          ...styles.middleSection,
-          ...responsiveStyles.middleSection,
-          ...componentTextStyle,
-          textAlign: "center" as const,
-        }}
-      >
-        {isVerificationComplete && !error ? (
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              flex: 1,
-            }}
-          >
-            <div
-              style={{
-                width: "64px",
-                height: "64px",
-                borderRadius: "50%",
-                backgroundColor: "#D1FAE5",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <svg
-                width="32"
-                height="32"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="#059669"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            </div>
-            <p
-              style={{
-                ...componentHeadingStyle,
-                fontSize: "16px",
-                fontWeight: 600,
-                lineHeight: "1.5",
-                marginTop: "12px",
-                marginBottom: "24px",
-              }}
-            >
-              Verification Completed
-            </p>
-          </div>
-        ) : (isInitiating || isPolling) && !error ? (
-          <>
-            <div style={spinnerStyle} />
-            <div style={statusStyle}>
-              {isInitiating
-                ? "Opening DigiLocker in a new tab..."
-                : "Please complete the verification in the DigiLocker tab. This page will update automatically when verification is complete."}
-            </div>
-          </>
-        ) : null}
-
-        {error && (
-          <>
-            <div
-              style={{
-                width: "64px",
-                height: "64px",
-                borderRadius: "50%",
-                backgroundColor: "#fee2e2",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                margin: "24px auto",
-              }}
-            >
-              <svg
-                width="32"
-                height="32"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="#dc2626"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <line x1="18" y1="6" x2="6" y2="18" />
-                <line x1="6" y1="6" x2="18" y2="18" />
-              </svg>
-            </div>
-            <p
-              style={{
-                ...styles.privacyText,
-                ...responsiveStyles.privacyText,
-                ...componentTextStyle,
-                fontSize: "14px",
-                lineHeight: "1.5",
-                marginBottom: "12px",
-              }}
-            >
-              Verification failed
-            </p>
-            <div style={errorStyle}>{error}</div>
-          </>
-        )}
-      </div>
-
-      {isAutoTransitioning ? null : (
-      <div
-        style={{
-          ...styles.bottomSection,
-          ...responsiveStyles.bottomSection,
-          ...componentTextStyle,
-          paddingTop: "12px",
-          display: "flex",
-          gap: "12px",
-          justifyContent: "center",
-        }}
-      >
-        {isVerificationComplete && !error ? (
-          <button
-            style={{
-              ...styles.button,
-              ...responsiveStyles.button,
-              ...acceptButtonStyle,
-            }}
-            onClick={onContinue}
-            type="button"
-            aria-label="Continue to consent form"
-          >
-            Continue
-          </button>
-        ) : error && canRetry ? (
-          <button
-            style={{
-              ...styles.button,
-              ...responsiveStyles.button,
-              ...styles.acceptButton,
-              ...acceptButtonStyle,
-            }}
-            onClick={() => onBack(errorCode === "GUARDIAN_UNDER_18")}
-            type="button"
-            aria-label={
-              errorCode === "GUARDIAN_UNDER_18"
-                ? "Change guardian details"
-                : "Try verification again"
-            }
-          >
-            {errorCode === "GUARDIAN_UNDER_18"
-              ? "Change Guardian"
-              : "Try Again"}
-          </button>
-        ) : error ? (
-          <button
-            style={{
-              ...styles.button,
-              ...responsiveStyles.button,
-              ...styles.cancelButton,
-              ...declineButtonStyle,
-            }}
-            onClick={() => onBack(false)}
-            type="button"
-            aria-label="Go back"
-          >
-            Go Back
-          </button>
-        ) : (
-          <button
-            style={{
-              ...styles.button,
-              ...responsiveStyles.button,
-              ...styles.cancelButton,
-              ...declineButtonStyle,
-            }}
-            onClick={() => onBack(false)}
-            type="button"
-            aria-label="Cancel verification"
-          >
-            Cancel
-          </button>
-        )}
-      </div>
-      )}
-    </>
-  );
-};
-
-/**
- * AgeVerification Component
- *
- * Displays an age verification screen asking if the user is 18+.
- */
-const AgeVerification: React.FC<{
-  onYes: () => void;
-  onNo: () => void;
-  onClose: () => void;
-  styles: any;
-  responsiveStyles: any;
-  componentHeadingStyle: any;
-  componentTextStyle: any;
-  acceptButtonStyle: any;
-  declineButtonStyle: any;
-  logoUrl: string;
-  isMobile: boolean;
-}> = ({
-  onYes,
-  onNo,
-  onClose,
-  styles,
-  responsiveStyles,
-  componentHeadingStyle,
-  componentTextStyle,
-  acceptButtonStyle,
-  declineButtonStyle,
-  logoUrl,
-  isMobile,
-}) => {
-    return (
-      <>
-        <div style={{ ...styles.topSection, ...componentTextStyle }}>
-          <div style={styles.topLeft}>
-            <img style={styles.logo} src={logoUrl} alt="Redacto Logo" />
-            <h2
-              id="age-verification-title"
-              style={{
-                ...styles.title,
-                ...responsiveStyles.title,
-                ...componentHeadingStyle,
-              }}
-            >
-              Age Verification Required
-            </h2>
-          </div>
-          <button
-            onClick={onClose}
-            style={{
-              background: "none",
-              border: "none",
-              color: componentHeadingStyle?.color || "#323B4B",
-              cursor: "pointer",
-              padding: isMobile ? "2px" : "4px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-            aria-label="Close modal"
-          >
-            <svg
-              width={isMobile ? "18" : "20"}
-              height={isMobile ? "18" : "20"}
-              viewBox="0 0 20 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <path
-                d="M15 5L5 15M5 5L15 15"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </button>
-        </div>
-
-        <div
-          style={{
-            ...styles.middleSection,
-            ...responsiveStyles.middleSection,
-            ...componentTextStyle,
-          }}
-        >
-          <p
-            style={{
-              ...styles.privacyText,
-              ...responsiveStyles.privacyText,
-              ...componentTextStyle,
-              marginBottom: "16px",
-            }}
-          >
-            To proceed with this consent form, we need to verify your age.
-          </p>
-
-          <p
-            style={{
-              ...styles.subTitle,
-              ...componentTextStyle,
-              marginBottom: "24px",
-              textAlign: "left",
-            }}
-          >
-            Are you 18 years of age or older?
-          </p>
-        </div>
-
-        <div
-          style={{
-            ...styles.bottomSection,
-            ...responsiveStyles.bottomSection,
-            ...componentTextStyle,
-          }}
-        >
-          <button
-            style={{
-              ...styles.button,
-              ...responsiveStyles.button,
-              ...styles.acceptButton,
-              ...acceptButtonStyle,
-            }}
-            onClick={onYes}
-            type="button"
-            aria-label="Confirm that I am 18 years of age or older"
-          >
-            Yes, I am 18 or older
-          </button>
-          <button
-            style={{
-              ...styles.button,
-              ...responsiveStyles.button,
-              ...styles.cancelButton,
-              ...declineButtonStyle,
-            }}
-            onClick={onNo}
-            type="button"
-            aria-label="Indicate that I am under 18 years of age"
-          >
-            No, I am under 18
-          </button>
-        </div>
-      </>
-    );
-  };
-
-// =============================================================================
-// MAIN COMPONENT
-// =============================================================================
-
-/**
- * RedactoNoticeConsent
- *
- * Main consent management component that provides a comprehensive UI for users
- * to view and manage their consent preferences. Supports both initial consent
- * collection and reconsent flows.
- */
-export const RedactoNoticeConsent = ({
-  noticeId,
-  accessToken,
-  refreshToken,
-  token,
-  email,
-  mobile,
-  ucic,
-  organisationUuid,
-  workspaceUuid,
-  baseUrl,
-  ledgerBaseUrl,
-  language = "en",
-  blockUI = true,
-  onAccept,
-  onDecline,
-  onError,
-  settings,
-  applicationId,
-  validateAgainst = "all",
-  digilockerMode = "redirect", // Default to full page redirect (DigiLocker blocks iframe embedding)
-  digilockerCallbackUrl = "/digilocker-callback", // Default callback path
-  includeFullyConsentedData = false,
-  reviewModeButtonText = "Continue",
-}: Props) => {
-  // =============================================================================
-  // SANDBOX MODE
-  // =============================================================================
-
-  // Sandbox PoC: when `token` is set, every API call bypasses the JWT and sends
-  // the single X-Consent-Token header, carrying the acting identity (subject) in
-  // each request's own payload. Org/workspace/subject are taken straight from
-  // props. Passed through to the API layer alongside `accessToken`.
-  const sandboxParams = useMemo(
-    () => ({
-      token,
-      sandboxUcic: ucic,
-      sandboxSubject: email || mobile,
-      organisationUuid,
-      workspaceUuid,
-    }),
-    [token, ucic, email, mobile, organisationUuid, workspaceUuid]
-  );
-
-  // =============================================================================
-  // PROP VALIDATION
-  // =============================================================================
-
-  // Validate required props gracefully
-  const propValidationError = useMemo(() => {
-    if (!noticeId?.trim()) {
-      return "RedactoNoticeConsent: 'noticeId' prop is required and cannot be empty";
-    }
-    // Sandbox mode: require a static token, org/workspace, and a subject instead
-    // of a JWT access token.
-    if (token?.trim()) {
-      if (!organisationUuid?.trim() || !workspaceUuid?.trim()) {
-        return "RedactoNoticeConsent: sandbox mode requires 'organisationUuid' and 'workspaceUuid'";
-      }
-      if (!email?.trim() && !mobile?.trim() && !ucic?.trim()) {
-        return "RedactoNoticeConsent: sandbox mode requires 'email', 'mobile', or 'ucic'";
-      }
-      return null;
-    }
-    if (!accessToken?.trim()) {
-      return "RedactoNoticeConsent: 'accessToken' prop is required and cannot be empty";
-    }
-    return null;
-  }, [
-    noticeId,
-    accessToken,
-    token,
-    organisationUuid,
-    workspaceUuid,
-    email,
-    mobile,
-    ucic,
-  ]);
-
-  // Show error UI if props are invalid
-  if (propValidationError) {
-    return (
-      <div
-        style={{
-          padding: "20px",
-          backgroundColor: "#fee",
-          border: "1px solid #fcc",
-          borderRadius: "4px",
-          color: "#c33",
-        }}
-      >
-        <h3>Configuration Error</h3>
-        <p>{propValidationError}</p>
-        <p>Please check your component props and try again.</p>
-      </div>
-    );
-  }
-
-  // =============================================================================
-  // STATE MANAGEMENT
-  // =============================================================================
-
-  // Loading and submission states
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isSubmittingAccept, setIsSubmittingAccept] = useState(false);
-  const [isSubmittingDecline, setIsSubmittingDecline] = useState(false);
-
-  // Content and consent data
-  const [content, setContent] = useState<
-    ConsentContent["detail"]["active_config"] | null
-  >(null);
-  const [categorizedPurposes, setCategorizedPurposes] = useState<{
-    alreadyConsented: Array<PurposeItemData>;
-    needsConsent: Array<PurposeItemData>;
-  } | null>(null);
-
-  // User interaction states
-  const [selectedPurposes, setSelectedPurposes] = useState<
-    Record<string, boolean>
-  >({});
-  const [selectedDataElements, setSelectedDataElements] = useState<
-    Record<string, boolean>
-  >({});
-  // Track initial data element selections for already-consented purposes
-  const [initialDataElementSelections, setInitialDataElementSelections] =
-    useState<Record<string, boolean>>({});
-  const [collapsedPurposes, setCollapsedPurposes] = useState<
-    Record<string, boolean>
-  >({});
-  const [hasAlreadyConsented, setHasAlreadyConsented] = useState(false);
-  const [isFullyConsentedReviewMode, setIsFullyConsentedReviewMode] =
-    useState(false);
-
-  // UI states
-  const [isLanguageDropdownOpen, setIsLanguageDropdownOpen] = useState(false);
-  const [selectedLanguage, setSelectedLanguage] = useState<string>(language);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [fetchError, setFetchError] = useState<Error | null>(null);
-
-  // TTS audio states
-  const [ttsAudioUrls, setTtsAudioUrls] = useState<
-    import("./api/types").TTSAudioUrlsResponse["detail"] | null
-  >(null);
-  const [isTTSAvailable, setIsTTSAvailable] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isPaused, setIsPaused] = useState(false);
-  const [currentAudioIndex, setCurrentAudioIndex] = useState(0);
-  const [highlightedElementId, setHighlightedElementId] = useState<
-    string | null
-  >(null);
-
-  // Age verification states
-  const [showAgeVerification, setShowAgeVerification] = useState(false);
-  const [isMinorFlow, setIsMinorFlow] = useState(false);
-  const [selfDeclaredAdult, setSelfDeclaredAdult] = useState(false);
-
-  // Guardian form states
-  const [showGuardianForm, setShowGuardianForm] = useState(false);
-  const [isSubmittingGuardian, setIsSubmittingGuardian] = useState(false);
-  const [guardianFormData, setGuardianFormData] = useState({
-    guardianName: "",
-    guardianContact: "",
-    guardianRelationship: "",
-  });
-  const [guardianFormErrors, setGuardianFormErrors] = useState<
-    Record<string, string>
-  >({});
-
-  // Guardian verification states
-  const [showVerificationScreen, setShowVerificationScreen] = useState(false);
-  const [verificationReference, setVerificationReference] = useState<string | null>(null);
-  const [isInitiatingVerification, setIsInitiatingVerification] =
-    useState(false);
-  const [verificationError, setVerificationError] = useState<string | null>(
-    null
-  );
-  const [verificationErrorCode, setVerificationErrorCode] = useState<string | null>(null);
-  const [canRetryVerification, setCanRetryVerification] = useState(false);
-  const [isPollingStatus, setIsPollingStatus] = useState(false);
-  const [isVerificationComplete, setIsVerificationComplete] = useState(false);
-  const [isAutoTransitioning, setIsAutoTransitioning] = useState(false);
-
-  // Refs and constants
-  const modalRef = useRef<HTMLDivElement>(null);
-  const firstFocusableRef = useRef<HTMLButtonElement>(null);
-  const lastFocusableRef = useRef<HTMLButtonElement>(null);
-  const abortControllerRef = useRef<AbortController | null>(null);
-  const isRequestInProgressRef = useRef(false);
-  const currentAudioRef = useRef<HTMLAudioElement | null>(null);
-  const popupCheckIntervalRef = useRef<number | null>(null);
-  const statusPollIntervalRef = useRef<number | null>(null);
-  const verificationPopupRef = useRef<Window | null>(null);
-  const pollingCleanupRef = useRef<(() => void) | null>(null);
-  const autoTransitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const digilockerRedirectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const isInitialMountRef = useRef(true);
-  const isPollingStatusRef = useRef(false);
-  const verificationSessionTokenRef = useRef<string | null>(null);
-
-  // =============================================================================
-  // RESPONSIVE DESIGN & STYLING
-  // =============================================================================
-
-  // Media query hooks
-  const isMobile = useMediaQuery("(max-width: 768px)");
-
-  // Memoize responsive styles to avoid recalculation
-  const responsiveStyles = useMemo(
-    () => ({
-      modal: {
-        width: isMobile ? "90%" : "700px",
-      },
-      content: {
-        margin: isMobile ? "20px" : "22px",
-      },
-      title: {
-        fontSize: isMobile ? "16px" : "18px",
-      },
-      subTitle: {
-        fontSize: isMobile ? "14px" : "16px",
-      },
-      optionTitle: {
-        fontSize: isMobile ? "14px" : "16px",
-      },
-      optionDescription: {
-        fontSize: isMobile ? "12px" : "14px",
-      },
-      dataElementText: {
-        fontSize: isMobile ? "12px" : "14px",
-      },
-      bottomSection: {
-        flexDirection: isMobile ? ("column" as const) : ("row" as const),
-        gap: isMobile ? "12px" : "16px",
-      },
-      privacyText: {
-        fontSize: isMobile ? "14px" : "16px",
-      },
-      errorDialog: {
-        padding: isMobile ? "12px" : "16px",
-        maxWidth: isMobile ? "100%" : "400px",
-        marginBottom: isMobile ? "16px" : "20px",
-      },
-      errorTitle: {
-        fontSize: isMobile ? "16px" : "18px",
-        margin: isMobile ? "0 0 8px 0" : "0 0 12px 0",
-      },
-      errorMessage: {
-        fontSize: isMobile ? "12px" : "14px",
-        margin: isMobile ? "0 0 12px 0" : "0 0 16px 0",
-      },
-      errorButton: {
-        padding: isMobile ? "6px 12px" : "8px 16px",
-        fontSize: isMobile ? "12px" : "14px",
-      },
-      closeButton: {
-        top: isMobile ? "4px" : "8px",
-        right: isMobile ? "4px" : "8px",
-        padding: isMobile ? "2px" : "4px",
-      },
-      topRight: {
-        fontSize: isMobile ? "11px" : "12px",
-        padding: isMobile ? "3px 6px" : "3px 9px",
-        height: isMobile ? "auto" : undefined,
-        width: isMobile ? "auto" : undefined,
-      },
-      topSection: {
-        flexDirection: isMobile ? ("column" as const) : ("row" as const),
-        alignItems: isMobile ? ("stretch" as const) : ("flex-start" as const),
-        gap: isMobile ? "12px" : "10px",
-      },
-      logo: {
-        maxWidth: isMobile ? "96px" : "140px",
-        maxHeight: isMobile ? "28px" : "32px",
-      },
-      languageItem: {
-        fontSize: isMobile ? "11px" : "12px",
-        padding: isMobile ? "6px 10px" : "8px 12px",
-      },
-      middleSection: {
-        paddingRight: isMobile ? "10px" : "15px",
-      },
-      button: {
-        fontSize: isMobile ? "14px" : "16px",
-        padding: isMobile ? "10px 20px" : "9px 45px",
-      },
-    }),
-    [isMobile]
-  );
-
-  // Memoize component-level styles
-  const componentHeadingStyle = useMemo(
-    () => ({
-      color: settings?.headingColor || "#323B4B",
-      fontFamily: settings?.font || "inherit",
-    }),
-    [settings?.headingColor, settings?.font]
-  );
-
-  const componentTextStyle = useMemo(
-    () => ({
-      color: settings?.textColor || "#344054",
-      fontFamily: settings?.font || "inherit",
-    }),
-    [settings?.textColor, settings?.font]
-  );
-
-  // Memoize section style for buttons
-  const sectionStyle = useMemo(
-    () => ({
-      color: settings?.textColor || "#344054",
-      fontFamily: settings?.font || "inherit",
-    }),
-    [settings?.textColor, settings?.font]
-  );
-
-  // =============================================================================
-  // COMPUTED VALUES & BUSINESS LOGIC
-  // =============================================================================
-
-  /**
-   * Checks if all required data elements are selected for consent submission
-   */
-  const areAllRequiredElementsChecked = useMemo(() => {
-    if (!content) return false;
-
-    return content.purposes.every((purpose) => {
-      const requiredElements = purpose.data_elements.filter(
-        (element) => element.required
-      );
-      return requiredElements.every(
-        (element) => selectedDataElements[`${purpose.uuid}-${element.uuid}`]
-      );
-    });
-  }, [content, selectedDataElements]);
-
-  const acceptDisabled = isSubmitting || !areAllRequiredElementsChecked;
-
-  // =============================================================================
-  // EFFECTS & LIFECYCLE
-  // =============================================================================
-
-  /**
-   * Reset component state when accessToken changes to prevent stale data
-   */
-  useEffect(() => {
-    // Clear API cache to prevent data from previous user sessions
-    clearApiCache();
-
-    // Reset request flag when token changes
-    isRequestInProgressRef.current = false;
-
-    // Clear component state when token changes
-    setContent(null);
-    setCategorizedPurposes(null);
-    setSelectedPurposes({});
-    setSelectedDataElements({});
-    setInitialDataElementSelections({});
-    setCollapsedPurposes({});
-    setHasAlreadyConsented(false);
-    setErrorMessage(null);
-    setFetchError(null);
-    setIsLoading(true);
-    setIsSubmittingAccept(false);
-    setIsSubmittingDecline(false);
-
-    // Clear age verification and guardian form state
-    setShowAgeVerification(false);
-    setIsMinorFlow(false);
-    setSelfDeclaredAdult(false);
-    setShowGuardianForm(false);
-    setIsSubmittingGuardian(false);
-    setGuardianFormData({
-      guardianName: "",
-      guardianContact: "",
-      guardianRelationship: "",
-    });
-    setGuardianFormErrors({});
-
-    // Clear verification state
-    setShowVerificationScreen(false);
-    setVerificationReference(null);
-    setIsInitiatingVerification(false);
-    setVerificationError(null);
-    setVerificationErrorCode(null);
-    setCanRetryVerification(false);
-    setIsVerificationComplete(false);
-    setIsAutoTransitioning(false);
-    setIsPollingStatus(false);
-    isPollingStatusRef.current = false;
-    verificationSessionTokenRef.current = null;
-    if (popupCheckIntervalRef.current) {
-      clearInterval(popupCheckIntervalRef.current);
-      popupCheckIntervalRef.current = null;
-    }
-    if (statusPollIntervalRef.current) {
-      clearTimeout(statusPollIntervalRef.current);
-      statusPollIntervalRef.current = null;
-    }
-    // Clean up visibilitychange listener if polling was active
-    pollingCleanupRef.current?.();
-    pollingCleanupRef.current = null;
-    verificationPopupRef.current?.close();
-    verificationPopupRef.current = null;
-    if (autoTransitionTimerRef.current) {
-      clearTimeout(autoTransitionTimerRef.current);
-      autoTransitionTimerRef.current = null;
-    }
-    if (digilockerRedirectTimeoutRef.current) {
-      clearTimeout(digilockerRedirectTimeoutRef.current);
-      digilockerRedirectTimeoutRef.current = null;
-    }
-
-    // Clear persisted state only on token change, not initial mount.
-    // The restore effect (below) needs to read persisted state on first mount.
-    if (!isInitialMountRef.current) {
-      clearConsentState();
-    }
-    isInitialMountRef.current = false;
-  }, [accessToken]);
-
-  /**
-   * Handle automatic acceptance if user has already consented
-   */
-  useEffect(() => {
-    if (hasAlreadyConsented) {
-      onAccept?.();
-    }
-  }, [hasAlreadyConsented, onAccept]);
-
-  const isDefaultLanguage = (lang: string): boolean => {
-    if (!content) return true;
-    if (lang === "English" || lang === "en" || lang === "EN") return true;
-    return false;
-  };
-
-  const getTranslatedText = (
-    key: string,
-    defaultText: string,
-    itemId?: string
-  ): string => {
-    if (!content) return defaultText;
-
-    // If default language is selected, use the base content from active_config
-    if (isDefaultLanguage(selectedLanguage)) {
-      // Check for specific keys in content object
-      if (
-        key === "privacy_policy_anchor_text" &&
-        content.privacy_policy_anchor_text
-      ) {
-        return content.privacy_policy_anchor_text;
-      }
-      if (
-        key === "purpose_section_heading" &&
-        content.purpose_section_heading
-      ) {
-        return content.purpose_section_heading;
-      }
-      if (key === "notice_banner_heading" && content.notice_banner_heading) {
-        return content.notice_banner_heading;
-      }
-      if (
-        key === "privacy_policy_prefix_text" &&
-        content.privacy_policy_prefix_text
-      ) {
-        return content.privacy_policy_prefix_text;
-      }
-      if (key === "notice_text" && content.notice_text) {
-        return content.notice_text;
-      }
-      return defaultText;
-    }
-
-    // For other languages, check supported_languages_and_translations
-    if (!content.supported_languages_and_translations) {
-      return defaultText;
-    }
-
-    const translationMap = content.supported_languages_and_translations[
-      selectedLanguage
-    ] as TranslationObject | undefined;
-
-    if (!translationMap) {
-      return defaultText;
-    }
-
-    if (itemId) {
-      if (key === "purposes.name" || key === "purposes.description") {
-        const purposeData = translationMap.purposes?.[itemId];
-        if (purposeData) {
-          if (typeof purposeData === "string") {
-            return key === "purposes.name" ? purposeData : defaultText;
-          }
-          return key === "purposes.name"
-            ? purposeData.name || defaultText
-            : purposeData.description || defaultText;
-        }
-        return defaultText;
-      }
-      if (key.startsWith("data_elements.")) {
-        return translationMap.data_elements?.[itemId] || defaultText;
-      }
-    }
-
-    const value = translationMap[key];
-    if (typeof value === "string" && value) {
-      return value;
-    }
-
-    return defaultText;
-  };
-
-  const getTranslatedDpoText = (
-    key: string,
-    defaultText: string
-  ): string => {
-    if (!content?.dpo_info) return defaultText;
-
-    if (isDefaultLanguage(selectedLanguage)) {
-      return (content.dpo_info as Record<string, string>)[key] || defaultText;
-    }
-
-    if (!content.supported_languages_and_translations) return defaultText;
-
-    const translationMap = content.supported_languages_and_translations[
-      selectedLanguage
-    ] as TranslationObject | undefined;
-
-    if (translationMap?.dpo_info) {
-      const translated = (translationMap.dpo_info as Record<string, string | undefined>)[key];
-      if (translated) return translated;
-    }
-
-    return (content.dpo_info as Record<string, string>)[key] || defaultText;
-  };
-
-  // =============================================================================
-  // EVENT HANDLERS
-  // =============================================================================
-
-  /**
-   * Fetches consent notice data from the API
-   */
-  const fetchNotice = async () => {
-    // Prevent rapid successive calls
-    if (isRequestInProgressRef.current) {
-      return;
-    }
-    isRequestInProgressRef.current = true;
-
-    // Cancel any existing request
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-
-    // Create new abort controller for this request
-    abortControllerRef.current = new AbortController();
-
-    setIsLoading(true);
-    setFetchError(null);
-    // Reset age verification and guardian form states when starting a new fetch
-    setShowAgeVerification(false);
-    setShowGuardianForm(false);
-    try {
-      // Standard flow reads the notice from the Go ledger. The magic-link flow
-      // (applicationId/specific_uuid) and sandbox sessions stay on the consent
-      // server: the ledger notice read supports neither (no specific_uuid, no
-      // X-Consent-Token auth).
-      const noticeBaseUrl =
-        ledgerBaseUrl && !applicationId && !token ? ledgerBaseUrl : baseUrl;
-      const consentContentData = await fetchConsentContent({
-        noticeId,
-        accessToken,
-        refreshToken,
-        baseUrl: noticeBaseUrl,
-        language,
-        specific_uuid: applicationId,
-        validate_against: validateAgainst,
-        include_fully_consented_data: includeFullyConsentedData,
-        signal: abortControllerRef.current?.signal,
-        ...sandboxParams,
-      });
-      const activeConfig = consentContentData.detail.active_config;
-      setContent(activeConfig);
-      if (activeConfig.default_language) {
-        // Normalize "en" to "English" for consistency
-        const defaultLang = activeConfig.default_language;
-        setSelectedLanguage(
-          defaultLang === "en" || defaultLang === "EN" ? "English" : defaultLang
-        );
-      }
-      const initialCollapsedState = activeConfig.purposes.reduce(
-        (acc, purpose) => ({
-          ...acc,
-          [purpose.uuid]: true,
-        }),
-        {}
-      );
-      setCollapsedPurposes(initialCollapsedState);
-
-      // Initialize selected states - handle reconsent pre-population.
-      // Both notice reads return the per-principal reconsent overlay inline, so
-      // we just consume it — same as the Python flow always did. The ledger
-      // computes it from the very same consent-status read the standalone
-      // check-consent route uses, so a second round-trip only duplicated that
-      // work and produced a *weaker* overlay: it had no notice-version
-      // awareness (a republished notice never re-prompted) and ignored
-      // validate_against, both of which the inline overlay handles server-side.
-      const isReconsentRequired = consentContentData.detail.reconsent_required;
-      const purposeSelections = consentContentData.detail.purpose_selections;
-
-      // Categorize purposes for reconsent UI
-      const newCategorizedPurposes = isReconsentRequired
-        ? {
-          alreadyConsented: activeConfig.purposes.filter(
-            (purpose) => {
-              const selection = purposeSelections?.[purpose.uuid];
-              return (
-                selection &&
-                (selection.status === "ACTIVE" ||
-                  selection.status === "EXPIRED") &&
-                !selection.needs_reconsent
-              );
-            }
-          ),
-          needsConsent: activeConfig.purposes.filter(
-            (purpose) => {
-              const selection = purposeSelections?.[purpose.uuid];
-              return (
-                !selection ||
-                selection.status !== "ACTIVE" ||
-                selection.needs_reconsent
-              );
-            }
-          ),
-        }
-        : null;
-
-      setCategorizedPurposes(newCategorizedPurposes);
-
-      const initialPurposeState: Record<string, boolean> =
-        activeConfig.purposes.reduce(
-          (acc: Record<string, boolean>, purpose) => {
-            if (purposeSelections?.[purpose.uuid]) {
-              // Pre-populate with existing selection (reconsent or magic link flow)
-              acc[purpose.uuid] = purposeSelections[purpose.uuid].selected;
-            } else {
-              // Default to false for new consent
-              acc[purpose.uuid] = false;
-            }
-            return acc;
-          },
-          {}
-        );
-      setSelectedPurposes(initialPurposeState);
-
-      const initialDataElementState: Record<string, boolean> =
-        activeConfig.purposes.reduce(
-          (acc: Record<string, boolean>, purpose) => {
-            purpose.data_elements.forEach((element) => {
-              const combinedId = `${purpose.uuid}-${element.uuid}`;
-              if (
-                purposeSelections?.[purpose.uuid]?.data_elements?.[element.uuid]
-              ) {
-                // Pre-populate with existing selection (reconsent or magic link flow)
-                acc[combinedId] =
-                  purposeSelections[purpose.uuid].data_elements[
-                    element.uuid
-                  ].selected;
-              } else {
-                // Default to false for new consent (including required elements)
-                acc[combinedId] = false;
-              }
-            });
-            return acc;
-          },
-          {}
-        );
-      setSelectedDataElements(initialDataElementState);
-      // Store initial selections for already-consented purposes to track modifications
-      if (isReconsentRequired && newCategorizedPurposes) {
-        setIsFullyConsentedReviewMode(false);
-        const initialSelections: Record<string, boolean> = {};
-        newCategorizedPurposes.alreadyConsented.forEach((purpose) => {
-          purpose.data_elements.forEach((element) => {
-            const combinedId = `${purpose.uuid}-${element.uuid}`;
-            if (
-              purposeSelections?.[purpose.uuid]?.data_elements?.[element.uuid]
-            ) {
-              initialSelections[combinedId] =
-                purposeSelections[purpose.uuid].data_elements[element.uuid]
-                  .selected;
-            } else {
-              initialSelections[combinedId] = false;
-            }
-          });
-        });
-        setInitialDataElementSelections(initialSelections);
-      } else if (includeFullyConsentedData && purposeSelections) {
-        // Fully consented review mode: all purposes show green ticks, need initialDataElementSelections
-        const allPurposesSelected =
-          activeConfig.purposes.length > 0 &&
-          activeConfig.purposes.every(
-            (p) => purposeSelections[p.uuid]?.selected === true
-          );
-        setIsFullyConsentedReviewMode(allPurposesSelected);
-        if (allPurposesSelected) {
-          const initialSelections: Record<string, boolean> = {};
-          activeConfig.purposes.forEach(
-            (purpose) => {
-              purpose.data_elements.forEach((element) => {
-                const combinedId = `${purpose.uuid}-${element.uuid}`;
-                if (
-                  purposeSelections[purpose.uuid]?.data_elements?.[element.uuid]
-                ) {
-                  initialSelections[combinedId] =
-                    purposeSelections[purpose.uuid].data_elements[element.uuid]
-                      .selected;
-                } else {
-                  initialSelections[combinedId] = false;
-                }
-              });
-            }
-          );
-          setInitialDataElementSelections(initialSelections);
-        } else {
-          setIsFullyConsentedReviewMode(false);
-          setInitialDataElementSelections({});
-        }
-      } else {
-        setIsFullyConsentedReviewMode(false);
-        setInitialDataElementSelections({});
-      }
-
-      // Check if age verification is required - set this after all content is loaded
-      // but before setIsLoading(false) to ensure proper render order
-      if (consentContentData.detail.is_minor) {
-        setIsMinorFlow(true);
-        // Only show age verification if not returning from a DigiLocker redirect
-        // (persisted state means user is mid-verification flow — the state restoration
-        // effect handles showing the correct screen)
-        const persistedState = getConsentState();
-        if (!persistedState?.sessionToken && !persistedState?.verificationReference) {
-          setShowAgeVerification(true);
-        }
-      }
-
-      // Set loading to false after all state updates are complete
-      setIsLoading(false);
-    } catch (err: unknown) {
-      // Don't treat AbortError as an actual error - it's expected when requests are cancelled
-      if (err instanceof Error && err.name === "AbortError") {
-        return; // Don't update state for cancelled requests
-      }
-
-      const error = err as Error & { status?: number };
-      setFetchError(error);
-      if (error.status === 409) {
-        setHasAlreadyConsented(true);
-      } else {
-        onError?.(error);
-      }
-      // Ensure loading is set to false even on error
-      setIsLoading(false);
-    } finally {
-      isRequestInProgressRef.current = false; // Reset request flag
-    }
-  };
-
-  useEffect(() => {
-    // Inject checkbox styles when component mounts
-    injectCheckboxStyles();
-    fetchNotice();
-  }, [
-    noticeId,
-    accessToken,
-    refreshToken,
-    sandboxParams,
-    language,
-    applicationId,
-    ledgerBaseUrl,
-    validateAgainst,
-    includeFullyConsentedData,
-    // Removed onError and isRefreshingToken from dependencies to prevent duplicate API calls
-    // onError is only called on errors, not needed for initial data fetching
-  ]);
-
-  const togglePurposeCollapse = (purposeUuid: string) => {
-    setCollapsedPurposes((prev) => ({
-      ...prev,
-      [purposeUuid]: !prev[purposeUuid],
-    }));
-  };
-
-  const toggleLanguageDropdown = () => {
-    setIsLanguageDropdownOpen(!isLanguageDropdownOpen);
-  };
-
-  const handleLanguageSelect = (lang: string) => {
-    setSelectedLanguage(lang);
-    setIsLanguageDropdownOpen(false);
-  };
-
-  const handlePurposeCheckboxChange = (purposeUuid: string) => {
-    if (content) {
-      const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
-      if (purpose) {
-        const newPurposeState = !selectedPurposes[purposeUuid];
-
-        // Update purpose state
-        setSelectedPurposes((prev) => ({
-          ...prev,
-          [purposeUuid]: newPurposeState,
-        }));
-
-        // Update all data elements for this purpose
-        setSelectedDataElements((prev) => {
-          const updated = { ...prev };
-          purpose.data_elements.forEach((el) => {
-            updated[`${purposeUuid}-${el.uuid}`] = newPurposeState;
-          });
-          return updated;
-        });
-      }
-    }
-  };
-
-  const handleDataElementCheckboxChange = (
-    elementUuid: string,
-    purposeUuid: string
-  ) => {
-    // Prevent state updates if content is not loaded yet
-    if (!content) return;
-
-    const combinedId = `${purposeUuid}-${elementUuid}`;
-
-    // Update data element state
-    setSelectedDataElements((prev) => {
-      const newState = {
-        ...prev,
-        [combinedId]: !prev[combinedId],
-      };
-
-      // Check if all required elements for this purpose are checked
-      const purpose = content.purposes.find((p) => p.uuid === purposeUuid);
-      if (purpose) {
-        const requiredElements = purpose.data_elements.filter(
-          (el) => el.required
-        );
-
-        let shouldCheckPurpose: boolean;
-
-        if (requiredElements.length > 0) {
-          // Has required elements: check purpose when all required are selected
-          shouldCheckPurpose = requiredElements.every(
-            (el) => newState[`${purposeUuid}-${el.uuid}`]
-          );
-        } else {
-          // No required elements: check purpose when ANY element is selected
-          shouldCheckPurpose = purpose.data_elements.some(
-            (el) => newState[`${purposeUuid}-${el.uuid}`]
-          );
-        }
-
-        setSelectedPurposes((prevPurposes) => ({
-          ...prevPurposes,
-          [purposeUuid]: shouldCheckPurpose,
-        }));
-      }
-
-      return newState;
-    });
-  };
-
-  const handleAccept = async () => {
-    // Create abort controller for submission
-    const submitController = new AbortController();
-
-    try {
-      // Block submission if minor consent flow is active but verification reference is missing
-      if (isMinorFlow && !verificationReference) {
-        setErrorMessage("Guardian verification is required before consent can be submitted.");
-        return;
-      }
-
-      setIsSubmittingAccept(true);
-      setIsSubmitting(true); // Keep for backward compatibility with acceptDisabled
-      setErrorMessage(null);
-      if (content) {
-        await submitConsentEvent({
-          accessToken,
-          baseUrl,
-          ledgerBaseUrl,
-          noticeUuid: content.notice_uuid,
-          purposes: content.purposes.map((purpose) => {
-            // Check if this is an already-consented purpose that was modified
-            const isAlreadyConsented =
-              categorizedPurposes?.alreadyConsented.some(
-                (p) => p.uuid === purpose.uuid
-              ) || false;
-
-            let purposeSelected = selectedPurposes[purpose.uuid] || false;
-
-            // If it's an already-consented purpose, check if any data elements were modified
-            if (isAlreadyConsented) {
-              const wasModified = purpose.data_elements.some((element) => {
-                const combinedId = `${purpose.uuid}-${element.uuid}`;
-                const currentSelection =
-                  selectedDataElements[combinedId] || false;
-                const initialSelection =
-                  initialDataElementSelections[combinedId] || false;
-                return currentSelection !== initialSelection;
-              });
-
-              // If modified, treat as new selection (mark purpose as selected)
-              if (wasModified) {
-                purposeSelected = true;
-              }
-            }
-
-            return {
-              ...purpose,
-              selected: purposeSelected,
-              data_elements: purpose.data_elements.map((element) => ({
-                ...element,
-                selected: element.required
-                  ? true
-                  : selectedDataElements[`${purpose.uuid}-${element.uuid}`] ||
-                  false,
-              })),
-            };
-          }),
-          declined: false,
-          language: toBcp47Code(selectedLanguage),
-          meta_data: applicationId
-            ? { specific_uuid: applicationId }
-            : undefined,
-          guardianVerificationReference: verificationReference || undefined,
-          selfDeclaredAdult: selfDeclaredAdult || undefined,
-          signal: submitController.signal,
-          ...sandboxParams,
-        });
-      }
-      onAccept?.();
-    } catch (error) {
-      // Don't treat AbortError as an actual error
-      if (error instanceof Error && error.name === "AbortError") {
-        return;
-      }
-
-      const err = error as Error;
-      // The SDK is a passthrough: server-owned message wins. Only the
-      // bare-Error fallback is used when no message is present (e.g. a
-      // network failure that never produced a Response).
-      const message =
-        err.message || "Failed to submit consent. Please try again.";
-      setErrorMessage(message);
-      onError?.(error as Error);
-    } finally {
-      setIsSubmittingAccept(false);
-      setIsSubmitting(false); // Keep for backward compatibility
-    }
-  };
-
-  const handleDecline = useCallback(async () => {
-    try {
-      setIsSubmittingDecline(true);
-      setIsSubmitting(true);
-      onDecline?.();
-    } finally {
-      setIsSubmittingDecline(false);
-      setIsSubmitting(false);
-    }
-  }, [onDecline]);
-
-  // Guardian form handlers
-  const handleGuardianFormChange = useCallback(
-    (field: string, value: string) => {
-      setGuardianFormData((prev) => ({
-        ...prev,
-        [field]: value,
-      }));
-      // Clear error when user starts typing
-      if (guardianFormErrors[field]) {
-        setGuardianFormErrors((prev) => ({
-          ...prev,
-          [field]: "",
-        }));
-      }
-    },
-    [guardianFormErrors]
-  );
-
-  const validateGuardianForm = () => {
-    const errors: Record<string, string> = {};
-
-    if (!guardianFormData.guardianName.trim()) {
-      errors.guardianName = "Guardian name is required";
-    }
-    if (!guardianFormData.guardianContact.trim()) {
-      errors.guardianContact = "Guardian contact is required";
-    }
-    if (!guardianFormData.guardianRelationship.trim()) {
-      errors.guardianRelationship = "Relationship to guardian is required";
-    }
-
-    setGuardianFormErrors(errors);
-    return Object.keys(errors).length === 0;
-  };
-
-  const handleGuardianFormNext = useCallback(async () => {
-    if (!validateGuardianForm()) {
-      return;
-    }
-
-    // Create abort controller for submission
-    const guardianController = new AbortController();
-
-    try {
-      setIsSubmittingGuardian(true);
-      setGuardianFormErrors({}); // Clear any previous errors
-      setVerificationError(null);
-
-      // For redirect mode: Don't send frontendCallbackUrl
-      // DigiLocker should redirect to BACKEND callback URL (e.g., http://localhost:8000/consent/public/digilocker/callback)
-      // Backend processes the callback and updates status in database
-      // SDK will poll verify-status endpoint to detect completion
-      // 
-      // For popup mode: Send frontendCallbackUrl so backend can redirect back to frontend
-      const callbackUrl = digilockerMode === "popup"
-        ? new URL(digilockerCallbackUrl, window.location.origin).href
-        : undefined;
-
-      // Initiate guardian verification - combines guardian details + DigiLocker start
-      const response = await initiateGuardianVerification({
-        accessToken,
-        baseUrl,
-        guardianName: guardianFormData.guardianName,
-        guardianContact: guardianFormData.guardianContact,
-        guardianRelationship: guardianFormData.guardianRelationship,
-        frontendCallbackUrl: callbackUrl, // Only for popup mode
-        signal: guardianController.signal,
-      });
-
-      setIsSubmittingGuardian(false);
-
-      // ── Already verified: skip DigiLocker, brief success flash then consent form ──
-      if (response.already_verified && response.verification_reference) {
-        setVerificationReference(response.verification_reference);
-        setShowGuardianForm(false);
-        setShowVerificationScreen(true);
-        setIsInitiatingVerification(false);
-        setIsVerificationComplete(true);
-        setIsAutoTransitioning(true);
-
-        // Auto-transition to consent form after brief success flash
-        autoTransitionTimerRef.current = setTimeout(() => {
-          setShowVerificationScreen(false);
-          setIsVerificationComplete(false);
-          setIsAutoTransitioning(false);
-          autoTransitionTimerRef.current = null;
-        }, 1000);
-        return;
-      }
-
-      // ── New verification: needs DigiLocker ──
-      if (!response.session_token || !response.digilocker_redirect_url) {
-        throw new Error("Invalid response from server: missing required fields");
-      }
-
-      // Show verification screen before redirect
-      setShowGuardianForm(false);
-      setShowVerificationScreen(true);
-      setIsInitiatingVerification(true);
-
-      if (digilockerMode === "redirect") {
-        // Save state BEFORE redirect — restored when user returns from DigiLocker callback
-        // NOTE: Guardian PII (name, contact, relationship) intentionally excluded from
-        // persisted state to avoid storing sensitive data in sessionStorage.
-        saveConsentState({
-          flowState: "digilocker-pending",
-          sessionToken: response.session_token,
-          guardianInfoUuid: response.guardian_info_uuid,
-          selectedPurposes,
-          selectedDataElements,
-          timestamp: new Date().toISOString(),
-          originalUrl: window.location.href,
-          noticeId,
-          baseUrl,
-        });
-
-        // Open DigiLocker in a new tab — keeps original page open for polling
-        // Flow: DigiLocker → backend callback → backend updates DB → this tab polls → detects completion
-        // NOTE: Do NOT pass "noopener" in the features string (3rd param) — it causes
-        // window.open to return null per spec, even when the tab opens successfully.
-        // Instead, manually null out opener after opening.
-        try {
-          const openedWindow = window.open(
-            response.digilocker_redirect_url,
-            "_blank"
-          );
-
-          if (!openedWindow) {
-            // Popup was blocked — show error instead of same-tab redirect
-            // (same-tab redirect would lose the current page with no frontend route back)
-            console.warn("Popup blocked — cannot open DigiLocker in new tab");
-            setIsInitiatingVerification(false);
-            setVerificationError(
-              "Unable to open DigiLocker in a new tab. Please allow popups for this site and try again."
-            );
-            return;
-          }
-
-          // Prevent the opened tab from accessing window.opener (security)
-          try { openedWindow.opener = null; } catch { /* cross-origin — safe to ignore */ }
-        } catch (error) {
-          console.error("Failed to open DigiLocker in new tab:", error);
-          setIsInitiatingVerification(false);
-          setVerificationError(
-            "Unable to open DigiLocker. Please allow popups for this site and try again."
-          );
-          return;
-        }
-
-        setIsInitiatingVerification(false);
-        setIsPollingStatus(true);
-        isPollingStatusRef.current = true;
-        startStatusPolling(response.session_token);
-      } else {
-        // Popup mode - open DigiLocker in new window
-        setIsInitiatingVerification(true);
-        
-        const popup = window.open(
-          response.digilocker_redirect_url,
-          "digilocker_verification",
-          "width=600,height=700,scrollbars=yes,resizable=yes"
-        );
-
-        if (popup) {
-          verificationPopupRef.current = popup;
-          startPopupMonitoring(popup);
-          startStatusPolling(response.session_token);
-          // Keep isInitiatingVerification true while polling
-        } else {
-          // Popup blocked - fall back to redirect
-          setIsInitiatingVerification(false);
-          setVerificationError(
-            "Popup blocked. Please allow popups for this site or use redirect mode."
-          );
-        }
-      }
-    } catch (error) {
-      // Handle API errors
-      const err = error as Error & { status?: number };
-      setIsInitiatingVerification(false);
-
-      if (err.status === 422) {
-        // Validation error from server - try to extract field-specific errors
-        if (err.message.includes("guardian_contact")) {
-          setGuardianFormErrors({ guardianContact: err.message });
-        } else if (err.message.includes("guardian_name")) {
-          setGuardianFormErrors({ guardianName: err.message });
-        } else if (err.message.includes("guardian_relationship")) {
-          setGuardianFormErrors({ guardianRelationship: err.message });
-        } else {
-          setGuardianFormErrors({ general: err.message });
-        }
-        // Go back to guardian form to show errors
-        setShowVerificationScreen(false);
-        setShowGuardianForm(true);
-      } else {
-        // Other errors - show general error
-        setGuardianFormErrors({
-          general:
-            err.message ||
-            "Failed to initiate verification. Please try again.",
-        });
-        setShowVerificationScreen(false);
-        setShowGuardianForm(true);
-        onError?.(err);
-      }
-    } finally {
-      setIsSubmittingGuardian(false);
-    }
-  }, [accessToken, sandboxParams, baseUrl, guardianFormData, digilockerMode, digilockerCallbackUrl, selectedPurposes, selectedDataElements, noticeId, onError]);
-
-  // Age verification handlers
-  const handleAgeVerificationYes = useCallback(() => {
-    setShowAgeVerification(false);
-    setIsMinorFlow(false);
-    setSelfDeclaredAdult(true);
-    // User is 18+, proceed directly to consent
-  }, []);
-
-  const handleAgeVerificationNo = useCallback(() => {
-    setShowAgeVerification(false);
-    setShowGuardianForm(true);
-    // User is under 18, show guardian form
-  }, []);
-
-  const handleVerificationContinue = useCallback(() => {
-    // Transition from verification success screen to consent form
-    setShowVerificationScreen(false);
-    setIsVerificationComplete(false);
-  }, []);
-
-  // Guardian verification handlers
-  const handlePopupClosed = useCallback(async () => {
-    // Stop the popup monitor
-    if (popupCheckIntervalRef.current) {
-      clearInterval(popupCheckIntervalRef.current);
-      popupCheckIntervalRef.current = null;
-    }
-    // Stop status polling timer
-    if (statusPollIntervalRef.current) {
-      clearTimeout(statusPollIntervalRef.current);
-      statusPollIntervalRef.current = null;
-    }
-    // Clean up visibilitychange listener
-    pollingCleanupRef.current?.();
-    pollingCleanupRef.current = null;
-    // Null out popup ref
-    verificationPopupRef.current = null;
-
-    // Use ref to avoid stale closure — startPopupMonitoring installs interval
-    // before startStatusPolling flips isPollingStatus state
-    if (!isPollingStatusRef.current) return;
-
-    // Perform one final status check — the user may have completed verification
-    // right before closing the popup
-    const sessionToken = verificationSessionTokenRef.current;
-    if (sessionToken) {
-      try {
-        const response = await verifyGuardianStatus({
-          accessToken,
-          baseUrl,
-          sessionToken,
-        });
-
-        if (response.status === "verified") {
-          const ref = response.verification_reference || response.guardian_details?.verification_reference;
-          if (ref) {
-            setVerificationReference(ref);
-            setIsVerificationComplete(true);
-            setIsPollingStatus(false);
-            isPollingStatusRef.current = false;
-            setIsInitiatingVerification(false);
-            clearConsentState();
-            return;
-          }
-        }
-      } catch {
-        // Final check failed — fall through to show error
-      }
-    }
-
-    // Verification not complete — mark as failure
-    setVerificationError(
-      "Verification window was closed. Please try again."
-    );
-    setIsPollingStatus(false);
-    isPollingStatusRef.current = false;
-    setIsInitiatingVerification(false);
-  }, [accessToken, sandboxParams, baseUrl]);
-
-  const startPopupMonitoring = useCallback((popup: Window) => {
-    // Check every 500ms if popup is closed
-    popupCheckIntervalRef.current = window.setInterval(() => {
-      if (popup.closed) {
-        handlePopupClosed();
-      }
-    }, 500);
-  }, [handlePopupClosed]);
-
-  /** Map error_code to user-friendly message */
-  const getVerificationErrorMessage = useCallback(
-    (errorCode: string | null, fallbackError: string | null): string => {
-      switch (errorCode) {
-        case "GUARDIAN_UNDER_18":
-          return "The guardian must be 18 years or older. Please provide details of a different guardian.";
-        case "TOKEN_FAILED":
-          return "DigiLocker verification could not be completed. Please try again.";
-        case "DIGILOCKER_AUTH_FAILED":
-          return "DigiLocker authorization was cancelled or failed. Please try again.";
-        case "NO_AUTH_CODE":
-          return "DigiLocker did not return an authorization code. Please try again.";
-        case "SESSION_EXPIRED":
-          return "Verification session has expired. Please try again.";
-        default:
-          return fallbackError || "Verification failed. Please try again.";
-      }
-    },
-    []
-  );
-
-  /**
-   * Poll verification status every 3s, hard stop at 2 minutes.
-   * Pauses when tab is hidden (user is on DigiLocker tab), resumes on return.
-   */
-  const startStatusPolling = useCallback(
-    (token: string) => {
-      verificationSessionTokenRef.current = token;
-      setIsPollingStatus(true);
-      isPollingStatusRef.current = true;
-      setVerificationError(null);
-      setVerificationErrorCode(null);
-      setCanRetryVerification(false);
-
-      let attempts = 0;
-      let consecutiveErrors = 0;
-      let paused = false;
-      const MAX_ATTEMPTS = 40; // 40 × 3s = 2 minutes
-      const MAX_CONSECUTIVE_ERRORS = 3;
-      const POLL_INTERVAL = 3000;
-
-      const stopPolling = () => {
-        if (statusPollIntervalRef.current) {
-          clearTimeout(statusPollIntervalRef.current);
-          statusPollIntervalRef.current = null;
-        }
-        if (popupCheckIntervalRef.current) {
-          clearInterval(popupCheckIntervalRef.current);
-          popupCheckIntervalRef.current = null;
-        }
-        verificationPopupRef.current?.close();
-        verificationPopupRef.current = null;
-        document.removeEventListener("visibilitychange", onVisibilityChange);
-        pollingCleanupRef.current = null;
-        setIsPollingStatus(false);
-        isPollingStatusRef.current = false;
-        setIsInitiatingVerification(false);
-      };
-
-      const setError = (message: string, errorCode: string | null, canRetry: boolean) => {
-        stopPolling();
-        setVerificationError(message);
-        setVerificationErrorCode(errorCode);
-        setCanRetryVerification(canRetry);
-      };
-
-      const poll = async () => {
-        if (paused) return;
-
-        attempts++;
-
-        if (attempts > MAX_ATTEMPTS) {
-          setError(
-            "Verification is taking longer than expected. Please try again.",
-            "SESSION_EXPIRED",
-            true
-          );
-          return;
-        }
-
-        try {
-          const response = await verifyGuardianStatus({
-            accessToken,
-            baseUrl,
-            sessionToken: token,
-          });
-
-          // Reset consecutive errors on any successful API call
-          consecutiveErrors = 0;
-
-          if (response.status === "verified") {
-            stopPolling();
-            const ref = response.verification_reference || response.guardian_details?.verification_reference;
-            if (!ref) {
-              setError(
-                "Verification completed but no reference received. Please try again.",
-                null,
-                true
-              );
-              return;
-            }
-            setVerificationReference(ref);
-            setIsVerificationComplete(true);
-            clearConsentState();
-            return;
-          }
-
-          if (response.status === "failed" || response.status === "expired") {
-            setError(
-              getVerificationErrorMessage(response.error_code, response.error),
-              response.error_code,
-              response.can_retry
-            );
-            return;
-          }
-
-          // pending / in_progress — poll again
-          if (!paused) {
-            statusPollIntervalRef.current = window.setTimeout(poll, POLL_INTERVAL);
-          }
-        } catch (error) {
-          const err = error as Error & { status?: number };
-
-          if (err.status === 404 || err.status === 410) {
-            setError(
-              "Verification session not found or expired. Please try again.",
-              "SESSION_EXPIRED",
-              true
-            );
-            return;
-          }
-
-          // Transient error — keep polling, fail after consecutive threshold
-          consecutiveErrors++;
-          if (consecutiveErrors >= MAX_CONSECUTIVE_ERRORS) {
-            setError(
-              err.message || "Unable to check verification status. Please try again.",
-              null,
-              true
-            );
-            return;
-          }
-
-          statusPollIntervalRef.current = window.setTimeout(poll, POLL_INTERVAL);
-        }
-      };
-
-      // Pause when tab hidden, resume immediately when visible
-      const onVisibilityChange = () => {
-        if (document.hidden) {
-          paused = true;
-          if (statusPollIntervalRef.current) {
-            clearTimeout(statusPollIntervalRef.current);
-            statusPollIntervalRef.current = null;
-          }
-        } else {
-          paused = false;
-          poll();
-        }
-      };
-
-      document.addEventListener("visibilitychange", onVisibilityChange);
-      // Store cleanup so unmount/reset can remove the listener
-      pollingCleanupRef.current = () => {
-        document.removeEventListener("visibilitychange", onVisibilityChange);
-      };
-
-      // First poll after 3s
-      statusPollIntervalRef.current = window.setTimeout(poll, POLL_INTERVAL);
-    },
-    [accessToken, sandboxParams, baseUrl, getVerificationErrorMessage]
-  );
-
-
-  const handleBackToGuardianForm = useCallback((clearName = false) => {
-    // Close any open popup
-    verificationPopupRef.current?.close();
-    verificationPopupRef.current = null;
-
-    // Clear all timers
-    if (popupCheckIntervalRef.current) {
-      clearInterval(popupCheckIntervalRef.current);
-      popupCheckIntervalRef.current = null;
-    }
-    if (statusPollIntervalRef.current) {
-      clearTimeout(statusPollIntervalRef.current);
-      statusPollIntervalRef.current = null;
-    }
-    if (autoTransitionTimerRef.current) {
-      clearTimeout(autoTransitionTimerRef.current);
-      autoTransitionTimerRef.current = null;
-    }
-    if (digilockerRedirectTimeoutRef.current) {
-      clearTimeout(digilockerRedirectTimeoutRef.current);
-      digilockerRedirectTimeoutRef.current = null;
-    }
-    // Clean up visibilitychange listener
-    pollingCleanupRef.current?.();
-    pollingCleanupRef.current = null;
-
-    // Reset verification state
-    setShowVerificationScreen(false);
-    setShowGuardianForm(true);
-    setVerificationError(null);
-    setVerificationErrorCode(null);
-    setCanRetryVerification(false);
-    setIsInitiatingVerification(false);
-    setIsPollingStatus(false);
-    isPollingStatusRef.current = false;
-    setIsVerificationComplete(false);
-
-    // For GUARDIAN_UNDER_18: clear name so user enters a different guardian
-    if (clearName) {
-      setGuardianFormData((prev) => ({ ...prev, guardianName: "" }));
-    }
-
-    clearConsentState();
-  }, []);
-
-  const availableLanguages = useMemo(() => {
-    if (!content) return [language];
-
-    // English is always pinned first since it's in active_config.
-    // Non-English default_language is pinned second so users can find it quickly.
-    // Remaining languages are sorted A→Z by English name.
-    const pinned = ["English"];
-    if (
-      content.default_language &&
-      content.default_language !== "English" &&
-      content.default_language !== "en"
-    ) {
-      pinned.push(content.default_language);
-    }
-
-    const rest = content.supported_languages_and_translations
-      ? Object.keys(content.supported_languages_and_translations)
-          .filter((lang) => !pinned.includes(lang))
-          .sort((a, b) => a.localeCompare(b, "en"))
-      : [];
-
-    return [...pinned, ...rest];
-  }, [content, language]);
-
-  /**
-   * Maps display language name to language code for API calls
-   * "English" -> "English", other languages use their key from supported_languages_and_translations
-   */
-  const getLanguageCode = useCallback(
-    (displayLanguage: string): string => {
-      if (!content) return "English";
-
-      // English maps to "English" for audio API
-      if (displayLanguage === "English" || displayLanguage === "en") {
-        return "English";
-      }
-
-      // Check if the display language is a key in supported_languages_and_translations
-      // If so, use it directly (it's already a language code)
-      if (
-        content.supported_languages_and_translations &&
-        content.supported_languages_and_translations[displayLanguage]
-      ) {
-        return displayLanguage;
-      }
-
-      // Fallback to default language or "English"
-      return content.default_language === "en" ||
-        content.default_language === "EN"
-        ? "English"
-        : content.default_language || "English";
-    },
-    [content]
-  );
-
-  // Build audio sequence array matching UI text order
-  const audioSequence = useMemo(() => {
-    if (!ttsAudioUrls || !content) return [];
-
-    const sequence: string[] = [];
-
-    // 1. Notice banner heading
-    if (ttsAudioUrls.notice_banner_heading_audio_url) {
-      sequence.push(ttsAudioUrls.notice_banner_heading_audio_url);
-    }
-
-    // 2. Notice text
-    if (ttsAudioUrls.notice_text_audio_url) {
-      sequence.push(ttsAudioUrls.notice_text_audio_url);
-    }
-
-    // 3. Privacy policy prefix text
-    if (ttsAudioUrls.privacy_policy_prefix_text_audio_url) {
-      sequence.push(ttsAudioUrls.privacy_policy_prefix_text_audio_url);
-    }
-
-    // 4. Privacy policy anchor text
-    if (ttsAudioUrls.privacy_policy_anchor_text_audio_url) {
-      sequence.push(ttsAudioUrls.privacy_policy_anchor_text_audio_url);
-    }
-
-    // 5. Purpose section heading
-    if (ttsAudioUrls.purpose_section_heading_audio_url) {
-      sequence.push(ttsAudioUrls.purpose_section_heading_audio_url);
-    }
-
-    // 6. Purposes and data elements
-    // Determine which purposes to include based on UI mode
-    const purposesToProcess = categorizedPurposes
-      ? [
-        ...categorizedPurposes.alreadyConsented,
-        ...categorizedPurposes.needsConsent,
-      ]
-      : content.purposes || [];
-
-    purposesToProcess.forEach((purpose) => {
-      // Purpose name audio
-      if (ttsAudioUrls.purposes_audio[purpose.uuid]?.name_audio_url) {
-        sequence.push(ttsAudioUrls.purposes_audio[purpose.uuid].name_audio_url);
-      }
-
-      // Purpose description audio
-      if (ttsAudioUrls.purposes_audio[purpose.uuid]?.description_audio_url) {
-        sequence.push(
-          ttsAudioUrls.purposes_audio[purpose.uuid].description_audio_url
-        );
-      }
-
-      // Data elements audio
-      if (purpose.data_elements && purpose.data_elements.length > 0) {
-        purpose.data_elements.forEach((dataElement) => {
-          if (
-            ttsAudioUrls.data_elements_audio[dataElement.uuid]?.name_audio_url
-          ) {
-            sequence.push(
-              ttsAudioUrls.data_elements_audio[dataElement.uuid].name_audio_url
-            );
-          }
-        });
-      }
-    });
-
-    // 7. Additional text audio
-    if (content.additional_text && ttsAudioUrls.additional_text_audio_url) {
-      sequence.push(ttsAudioUrls.additional_text_audio_url);
-    }
-
-    // 8. Privacy center anchor text audio
-    if (content.privacy_center_url && ttsAudioUrls.privacy_center_anchor_text_audio_url) {
-      sequence.push(ttsAudioUrls.privacy_center_anchor_text_audio_url);
-    }
-
-    // 9. DPO info audio
-    if (content.dpo_info && ttsAudioUrls.dpo_info_audio) {
-      const dpoAudio = ttsAudioUrls.dpo_info_audio;
-      DPO_AUDIO_ELEMENT_MAP.forEach(({ audioKey }) => {
-        if (dpoAudio[audioKey]) {
-          sequence.push(dpoAudio[audioKey]);
-        }
-      });
-    }
-
-    // 10. Confirm button text audio
-    if (ttsAudioUrls.confirm_button_text_audio_url) {
-      sequence.push(ttsAudioUrls.confirm_button_text_audio_url);
-    }
-
-    // 11. Decline button text audio
-    if (ttsAudioUrls.decline_button_text_audio_url) {
-      sequence.push(ttsAudioUrls.decline_button_text_audio_url);
-    }
-
-    return sequence;
-  }, [ttsAudioUrls, content, categorizedPurposes]);
-
-  // Build element ID sequence array matching audio sequence order
-  const elementIdSequence = useMemo(() => {
-    if (!ttsAudioUrls || !content) return [];
-
-    const elementIds: (string | null)[] = [];
-
-    // 1. Notice banner heading
-    if (ttsAudioUrls.notice_banner_heading_audio_url) {
-      elementIds.push("privacy-notice-title");
-    }
-
-    // 2. Notice text
-    if (ttsAudioUrls.notice_text_audio_url) {
-      elementIds.push("privacy-notice-text");
-    }
-
-    // 3. Privacy policy prefix text
-    if (ttsAudioUrls.privacy_policy_prefix_text_audio_url) {
-      elementIds.push("privacy-policy-text");
-    }
-
-    // 4. Privacy policy anchor text
-    if (ttsAudioUrls.privacy_policy_anchor_text_audio_url) {
-      elementIds.push("privacy-policy-link");
-    }
-
-    // 5. Purpose section heading
-    if (ttsAudioUrls.purpose_section_heading_audio_url) {
-      elementIds.push("purpose-section-heading");
-    }
-
-    // 6. Purposes and data elements
-    const purposesToProcess = categorizedPurposes
-      ? [
-        ...categorizedPurposes.alreadyConsented,
-        ...categorizedPurposes.needsConsent,
-      ]
-      : content.purposes || [];
-
-    purposesToProcess.forEach((purpose) => {
-      // Purpose name
-      if (ttsAudioUrls.purposes_audio[purpose.uuid]?.name_audio_url) {
-        elementIds.push(`purpose-name-${purpose.uuid}`);
-      }
-
-      // Purpose description
-      if (ttsAudioUrls.purposes_audio[purpose.uuid]?.description_audio_url) {
-        elementIds.push(`purpose-description-${purpose.uuid}`);
-      }
-
-      // Data elements
-      if (purpose.data_elements && purpose.data_elements.length > 0) {
-        purpose.data_elements.forEach((dataElement) => {
-          if (
-            ttsAudioUrls.data_elements_audio[dataElement.uuid]?.name_audio_url
-          ) {
-            elementIds.push(`data-element-${purpose.uuid}-${dataElement.uuid}`);
-          }
-        });
-      }
-    });
-
-    // 7. Additional text audio
-    if (content.additional_text && ttsAudioUrls.additional_text_audio_url) {
-      elementIds.push("additional-text");
-    }
-
-    // 8. Privacy center anchor text audio
-    if (content.privacy_center_url && ttsAudioUrls.privacy_center_anchor_text_audio_url) {
-      elementIds.push("privacy-center-link");
-    }
-
-    // 9. DPO info audio
-    if (content.dpo_info && ttsAudioUrls.dpo_info_audio) {
-      const dpoAudio = ttsAudioUrls.dpo_info_audio;
-      DPO_AUDIO_ELEMENT_MAP.forEach(({ audioKey, elementId }) => {
-        if (dpoAudio[audioKey]) {
-          elementIds.push(elementId);
-        }
-      });
-    }
-
-    // 10. Confirm button text audio
-    if (ttsAudioUrls.confirm_button_text_audio_url) {
-      elementIds.push("confirm-button-text");
-    }
-
-    // 11. Decline button text audio
-    if (ttsAudioUrls.decline_button_text_audio_url) {
-      elementIds.push("decline-button-text");
-    }
-
-    return elementIds;
-  }, [ttsAudioUrls, content, categorizedPurposes]);
-
-  // Audio playback functions
-  const stopAudio = useCallback(() => {
-    if (currentAudioRef.current) {
-      currentAudioRef.current.pause();
-      currentAudioRef.current.currentTime = 0;
-      currentAudioRef.current = null;
-    }
-    setIsPlaying(false);
-    setIsPaused(false);
-    setCurrentAudioIndex(0);
-    setHighlightedElementId(null);
-  }, []);
-
-  const playNextAudio = useCallback(
-    (index: number) => {
-      if (index >= audioSequence.length) {
-        // Finished all audio
-        stopAudio();
-        return;
-      }
-
-      // Stop current audio if playing
-      if (currentAudioRef.current) {
-        currentAudioRef.current.pause();
-        currentAudioRef.current = null;
-      }
-
-      // Create new audio element
-      const audio = new Audio(audioSequence[index]);
-      currentAudioRef.current = audio;
-      setCurrentAudioIndex(index);
-      setIsPlaying(true);
-      setIsPaused(false);
-
-      // Highlight corresponding element
-      const elementId = elementIdSequence[index];
-      if (elementId) {
-        setHighlightedElementId(elementId);
-      }
-
-      // Handle audio end - play next in sequence
-      audio.onended = () => {
-        playNextAudio(index + 1);
-      };
-
-      // Handle errors
-      audio.onerror = () => {
-        console.warn(`Failed to load audio at index ${index}`);
-        // Skip to next audio on error
-        playNextAudio(index + 1);
-      };
-
-      // Play the audio
-      audio.play().catch((error) => {
-        console.warn(`Failed to play audio at index ${index}:`, error);
-        setIsPlaying(false);
-      });
-    },
-    [audioSequence, elementIdSequence, stopAudio]
-  );
-
-  const playAudio = useCallback(() => {
-    if (audioSequence.length === 0) return;
-
-    if (isPaused && currentAudioRef.current) {
-      // Resume paused audio
-      currentAudioRef.current
-        .play()
-        .then(() => {
-          setIsPlaying(true);
-          setIsPaused(false);
-        })
-        .catch((error) => {
-          console.warn("Failed to resume audio:", error);
-        });
-    } else {
-      // Start from beginning or current index
-      const startIndex = isPlaying ? currentAudioIndex : 0;
-      playNextAudio(startIndex);
-    }
-  }, [audioSequence, isPaused, isPlaying, currentAudioIndex, playNextAudio]);
-
-  const pauseAudio = useCallback(() => {
-    if (currentAudioRef.current && isPlaying) {
-      currentAudioRef.current.pause();
-      setIsPlaying(false);
-      setIsPaused(true);
-    }
-  }, [isPlaying]);
-
-  const toggleAudio = useCallback(() => {
-    if (isPlaying) {
-      pauseAudio();
-    } else {
-      playAudio();
-    }
-  }, [isPlaying, playAudio, pauseAudio]);
-
-  // Auto-expand collapsed purposes when their audio is playing
-  useEffect(() => {
-    if (!isPlaying || !content || audioSequence.length === 0) return;
-
-    // Determine which purpose corresponds to current audio index
-    // This is approximate - we'll expand purposes as we progress through the sequence
-    const currentIndex = currentAudioIndex;
-
-    // Calculate approximate purpose index based on audio sequence position
-    // Skip header audio (notice_banner, notice_text, privacy_policy, purpose_section = ~4-5 items)
-    const headerAudioCount = 5;
-    if (currentIndex < headerAudioCount) return;
-
-    // Find which purpose we're on (rough estimate)
-    const purposesToProcess = categorizedPurposes
-      ? [
-        ...categorizedPurposes.alreadyConsented,
-        ...categorizedPurposes.needsConsent,
-      ]
-      : content.purposes || [];
-
-    let audioOffset = headerAudioCount;
-    for (const purpose of purposesToProcess) {
-      // Purpose name + description = 2 audio items
-      const purposeAudioCount = 2;
-      const dataElementsAudioCount = purpose.data_elements?.length || 0;
-      const totalPurposeAudioCount = purposeAudioCount + dataElementsAudioCount;
-
-      if (
-        currentIndex >= audioOffset &&
-        currentIndex < audioOffset + totalPurposeAudioCount
-      ) {
-        // Expand this purpose if collapsed
-        if (collapsedPurposes[purpose.uuid]) {
-          setCollapsedPurposes((prev) => ({
-            ...prev,
-            [purpose.uuid]: false,
-          }));
-        }
-        break;
-      }
-
-      audioOffset += totalPurposeAudioCount;
-    }
-  }, [
-    isPlaying,
-    currentAudioIndex,
-    audioSequence,
-    content,
-    categorizedPurposes,
-    collapsedPurposes,
-  ]);
-
-  // Highlight and scroll to element when audio is playing
-  useEffect(() => {
-    // Remove highlight from all elements
-    const removeAllHighlights = () => {
-      document.querySelectorAll(".redacto-tts-highlight").forEach((el) => {
-        el.classList.remove("redacto-tts-highlight");
-      });
-    };
-
-    if (!highlightedElementId || !isPlaying) {
-      removeAllHighlights();
-      return;
-    }
-
-    // Remove previous highlights
-    removeAllHighlights();
-
-    // Use setTimeout to ensure DOM is ready and styles are applied
-    const highlightTimeout = setTimeout(() => {
-      // Find and highlight the current element
-      const element = document.getElementById(highlightedElementId);
-      if (element) {
-        // Add highlight class
-        element.classList.add("redacto-tts-highlight");
-
-        // Force a repaint to ensure styles are applied
-        void element.offsetHeight;
-
-        // Scroll element into view (only if it's not already visible)
-        const rect = element.getBoundingClientRect();
-        const isVisible =
-          rect.top >= 0 &&
-          rect.left >= 0 &&
-          rect.bottom <=
-          (window.innerHeight || document.documentElement.clientHeight) &&
-          rect.right <=
-          (window.innerWidth || document.documentElement.clientWidth);
-
-        if (!isVisible) {
-          element.scrollIntoView({
-            behavior: "smooth",
-            block: "center",
-            inline: "nearest",
-          });
-        }
-      } else {
-        // Debug: log if element not found
-        console.warn(
-          `TTS Highlight: Element with ID "${highlightedElementId}" not found`
-        );
-      }
-    }, 50); // Small delay to ensure DOM is ready
-
-    // Cleanup function
-    return () => {
-      clearTimeout(highlightTimeout);
-      removeAllHighlights();
-    };
-  }, [highlightedElementId, isPlaying]);
-
-  // Fetch TTS audio URLs when content loads and language changes
-  useEffect(() => {
-    // Reset TTS availability when content or language changes
-    setIsTTSAvailable(false);
-    setTtsAudioUrls(null);
-    stopAudio();
-
-    // Only fetch if content is loaded and has notice_uuid
-    if (!content || !content.notice_uuid) {
-      return;
-    }
-
-    // Get language code from display language name
-    const languageCode = getLanguageCode(selectedLanguage);
-
-    // Create abort controller for this request
-    const ttsAbortController = new AbortController();
-
-    // Prefer the Go ledger for audio; fetchTTSAudioUrls keeps sandbox sessions
-    // on the consent server (the ledger has no X-Consent-Token support).
-    fetchTTSAudioUrls({
-      accessToken,
-      baseUrl,
-      ledgerBaseUrl,
-      noticeUuid: content.notice_uuid,
-      language: languageCode,
-      signal: ttsAbortController.signal,
-      ...sandboxParams,
-    })
-      .then((response) => {
-        // Store the response and mark TTS as available
-        setTtsAudioUrls(response.detail);
-        setIsTTSAvailable(true);
-      })
-      .catch((error) => {
-        // Handle errors gracefully - don't break the UI if TTS API fails
-        if (error instanceof Error && error.name !== "AbortError") {
-          setIsTTSAvailable(false);
-          setTtsAudioUrls(null);
-        }
-      });
-
-    // Cleanup: abort request if component unmounts or dependencies change
-    return () => {
-      ttsAbortController.abort();
-    };
-  }, [content, selectedLanguage, accessToken, sandboxParams, baseUrl, ledgerBaseUrl, getLanguageCode]);
-
-  const modalStyle = {
-    borderRadius: settings?.borderRadius || "8px",
-    backgroundColor: settings?.backgroundColor || "#ffffff",
-  };
-
-  const buttonStyle = {
-    borderRadius: settings?.borderRadius || "8px",
-  };
-
-  const acceptButtonStyle = {
-    ...buttonStyle,
-    backgroundColor:
-      settings?.button?.accept?.backgroundColor ||
-      content?.primary_color ||
-      "#4f87ff",
-    color: settings?.button?.accept?.textColor || "#ffffff",
-  };
-
-  const declineButtonStyle = {
-    ...buttonStyle,
-    backgroundColor: settings?.button?.decline?.backgroundColor || "#ffffff",
-    color: settings?.button?.decline?.textColor || "#000000",
-    borderColor: settings?.borderColor || "#d0d5dd",
-  };
-
-  const linkStyle = {
-    color: settings?.link || content?.secondary_color || "#4f87ff",
-  };
-
-  const languageSelectorStyle = {
-    borderRadius: settings?.borderRadius || "8px",
-    borderColor: settings?.borderColor || "#d0d5dd",
-    backgroundColor: settings?.button?.language?.backgroundColor || "#ffffff",
-    color: settings?.button?.language?.textColor || "#344054",
-  };
-
-  const selectedLanguageItemStyle = {
-    ...languageSelectorStyle,
-    backgroundColor:
-      settings?.button?.language?.selectedBackgroundColor || "#f3f4f6",
-    color: settings?.button?.language?.selectedTextColor || "#344054",
-    fontWeight: 600,
-  };
-
-  const handleCloseError = () => {
-    setErrorMessage(null);
-  };
-
-  // Add keyboard event handler for the modal
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (!modalRef.current) return;
-
-      const focusableElements = modalRef.current.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      if (!focusableElements.length) return;
-
-      if (event.key === "Escape") {
-        handleDecline();
-      }
-
-      if (event.key === "Tab") {
-        const firstElement = focusableElements[0] as HTMLElement;
-        const lastElement = focusableElements[
-          focusableElements.length - 1
-        ] as HTMLElement;
-
-        if (event.shiftKey) {
-          if (document.activeElement === firstElement) {
-            event.preventDefault();
-            lastElement.focus();
-          }
-        } else {
-          if (document.activeElement === lastElement) {
-            event.preventDefault();
-            firstElement.focus();
-          }
-        }
-      }
-    };
-
-    const modal = modalRef.current;
-    modal?.addEventListener("keydown", handleKeyDown);
-
-    // Focus the first focusable element when modal opens
-    if (modal && !isLoading) {
-      const focusableElements = modal.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      const firstElement = focusableElements[0] as HTMLElement;
-      firstElement?.focus();
-    }
-
-    return () => {
-      modal?.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isLoading, handleDecline]);
-
-  // Stop audio when language changes
-  useEffect(() => {
-    stopAudio();
-  }, [selectedLanguage, stopAudio]);
-
-  // Stop audio when content changes
-  useEffect(() => {
-    stopAudio();
-  }, [content, stopAudio]);
-
-  // Cleanup effect - cancel any pending requests and stop audio when component unmounts
-  useEffect(() => {
-    return () => {
-      // Cancel any pending fetch request
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-      // Stop and cleanup audio
-      stopAudio();
-      // Cleanup verification intervals, popup, and visibilitychange listener
-      if (popupCheckIntervalRef.current) {
-        clearInterval(popupCheckIntervalRef.current);
-      }
-      if (statusPollIntervalRef.current) {
-        clearTimeout(statusPollIntervalRef.current);
-      }
-      pollingCleanupRef.current?.();
-      pollingCleanupRef.current = null;
-      verificationPopupRef.current?.close();
-      if (autoTransitionTimerRef.current) {
-        clearTimeout(autoTransitionTimerRef.current);
-        autoTransitionTimerRef.current = null;
-      }
-      if (digilockerRedirectTimeoutRef.current) {
-        clearTimeout(digilockerRedirectTimeoutRef.current);
-        digilockerRedirectTimeoutRef.current = null;
-      }
-    };
-  }, [stopAudio]);
-
-  // Restore state from redirect flow (when user returns from DigiLocker)
-  useEffect(() => {
-    const persistedState = getConsentState();
-    if (!persistedState) return;
-
-    // Validate persisted state belongs to this notice and hasn't expired
-    if (persistedState.noticeId && persistedState.noticeId !== noticeId) {
-      clearConsentState();
-      return;
-    }
-    const REDIRECT_STATE_MAX_AGE_MS = 15 * 60 * 1000; // 15 minutes
-    if (persistedState.timestamp) {
-      const stateAge = Date.now() - new Date(persistedState.timestamp).getTime();
-      if (stateAge > REDIRECT_STATE_MAX_AGE_MS) {
-        clearConsentState();
-        return;
-      }
-    }
-
-    // Check if this is a redirect return
-    if (persistedState.flowState === "digilocker-pending" && persistedState.sessionToken) {
-      // Resume verification status polling
-      setShowVerificationScreen(true);
-      setShowGuardianForm(false);
-      setShowAgeVerification(false);
-
-      // Start polling for status
-      startStatusPolling(persistedState.sessionToken);
-    } else if (persistedState.verificationResult === "verified" && persistedState.verificationReference) {
-      // Verification completed during redirect, show success screen with Continue button
-      setVerificationReference(persistedState.verificationReference);
-      setShowVerificationScreen(true);
-      setIsVerificationComplete(true);
-      setShowGuardianForm(false);
-      setShowAgeVerification(false);
-      clearConsentState();
-    } else if (persistedState.verificationResult === "failed" || persistedState.verificationResult === "expired") {
-      // Verification failed during redirect, show error
-      setShowVerificationScreen(true);
-      setShowGuardianForm(false);
-      setShowAgeVerification(false);
-      setVerificationError(
-        persistedState.verificationResult === "expired"
-          ? "Verification session has expired. Please try again."
-          : "Verification failed. Please try again."
-      );
-      clearConsentState();
-    }
-  }, [startStatusPolling, noticeId]);
-
-  // =============================================================================
-  // RENDER
-  // =============================================================================
-
-  return (
-    <>
-      {hasAlreadyConsented ? null : (
-        <>
-          {blockUI && (
-            <div
-              style={styles.overlay}
-              aria-hidden="true"
-              role="presentation"
-            />
-          )}
-          <div
-            ref={modalRef}
-            style={{
-              ...styles.modal,
-              ...responsiveStyles.modal,
-              ...modalStyle,
-            }}
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="privacy-notice-title"
-            aria-describedby="privacy-notice-description"
-            tabIndex={-1}
-          >
-            {isLoading ? (
-              <div
-                role="status"
-                aria-live="polite"
-                aria-label="Loading consent notice"
-                style={styles.loadingContainer}
-              >
-                <div style={styles.loadingSpinner} aria-hidden="true"></div>
-                <p style={{ ...styles.privacyText, ...componentTextStyle }}>
-                  Loading...
-                </p>
-              </div>
-            ) : fetchError ? (
-              <div
-                role="alert"
-                aria-live="assertive"
-                aria-label="Error loading consent notice"
-                style={{
-                  ...styles.content,
-                  ...responsiveStyles.content,
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  textAlign: "center",
-                  padding: "40px 20px",
-                }}
-              >
-                <div
-                  style={{
-                    color: "#DC2626",
-                    padding: responsiveStyles.errorDialog.padding,
-                    borderRadius: "8px",
-                    marginBottom: responsiveStyles.errorDialog.marginBottom,
-                    width: "100%",
-                    maxWidth: responsiveStyles.errorDialog.maxWidth,
-                    position: "relative",
-                  }}
-                >
-                  <button
-                    onClick={handleDecline}
-                    style={{
-                      position: "absolute",
-                      top: responsiveStyles.closeButton.top,
-                      right: responsiveStyles.closeButton.right,
-                      background: "none",
-                      border: "none",
-                      color: "#DC2626",
-                      cursor: "pointer",
-                      padding: responsiveStyles.closeButton.padding,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                    }}
-                    aria-label="Close error message"
-                  >
-                    <svg
-                      width={isMobile ? "14" : "16"}
-                      height={isMobile ? "14" : "16"}
-                      viewBox="0 0 16 16"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                      aria-hidden="true"
-                    >
-                      <path
-                        d="M12 4L4 12M4 4L12 12"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </button>
-                  <h3
-                    style={{
-                      margin: responsiveStyles.errorTitle.margin,
-                      fontSize: responsiveStyles.errorTitle.fontSize,
-                      fontWeight: "600",
-                    }}
-                  >
-                    Error Loading Consent Notice
-                  </h3>
-                  <p
-                    style={{
-                      margin: responsiveStyles.errorMessage.margin,
-                      fontSize: responsiveStyles.errorMessage.fontSize,
-                      lineHeight: "1.5",
-                    }}
-                  >
-                    {fetchError.message ||
-                      "Failed to load consent notice. Please try again."}
-                  </p>
-                  <button
-                    onClick={fetchNotice}
-                    style={{
-                      backgroundColor: "#DC2626",
-                      color: "#FFFFFF",
-                      border: "none",
-                      padding: responsiveStyles.errorButton.padding,
-                      borderRadius: "6px",
-                      cursor: "pointer",
-                      fontSize: responsiveStyles.errorButton.fontSize,
-                      fontWeight: "500",
-                      transition: "background-color 0.2s",
-                    }}
-                    onMouseOver={(e) =>
-                      (e.currentTarget.style.backgroundColor = "#B91C1C")
-                    }
-                    onMouseOut={(e) =>
-                      (e.currentTarget.style.backgroundColor = "#DC2626")
-                    }
-                    aria-label="Refresh and retry loading consent notice"
-                  >
-                    Refresh
-                  </button>
-                </div>
-              </div>
-            ) : showAgeVerification ? (
-              <div style={{ ...styles.content, ...responsiveStyles.content }}>
-                <AgeVerification
-                  onYes={handleAgeVerificationYes}
-                  onNo={handleAgeVerificationNo}
-                  onClose={handleDecline}
-                  styles={styles}
-                  responsiveStyles={responsiveStyles}
-                  componentHeadingStyle={componentHeadingStyle}
-                  componentTextStyle={componentTextStyle}
-                  acceptButtonStyle={acceptButtonStyle}
-                  declineButtonStyle={declineButtonStyle}
-                  logoUrl={content?.logo_url || logo}
-                  isMobile={isMobile}
-                />
-              </div>
-            ) : showGuardianForm ? (
-              <div style={{ ...styles.content, ...responsiveStyles.content }}>
-                <GuardianForm
-                  formData={guardianFormData}
-                  errors={guardianFormErrors}
-                  isSubmitting={isSubmittingGuardian}
-                  onChange={handleGuardianFormChange}
-                  onNext={handleGuardianFormNext}
-                  onDecline={handleDecline}
-                  styles={styles}
-                  responsiveStyles={responsiveStyles}
-                  settings={settings}
-                  componentHeadingStyle={componentHeadingStyle}
-                  componentTextStyle={componentTextStyle}
-                  acceptButtonStyle={acceptButtonStyle}
-                  declineButtonStyle={declineButtonStyle}
-                  logoUrl={content?.logo_url || logo}
-                />
-              </div>
-            ) : showVerificationScreen ? (
-              <div style={{ ...styles.content, ...responsiveStyles.content }}>
-                <VerificationScreen
-                  onBack={handleBackToGuardianForm}
-                  onContinue={handleVerificationContinue}
-                  isInitiating={isInitiatingVerification}
-                  isPolling={isPollingStatus}
-                  isVerificationComplete={isVerificationComplete}
-                  isAutoTransitioning={isAutoTransitioning}
-                  error={verificationError}
-                  errorCode={verificationErrorCode}
-                  canRetry={canRetryVerification}
-                  styles={styles}
-                  responsiveStyles={responsiveStyles}
-                  settings={settings}
-                  componentHeadingStyle={componentHeadingStyle}
-                  componentTextStyle={componentTextStyle}
-                  acceptButtonStyle={acceptButtonStyle}
-                  declineButtonStyle={declineButtonStyle}
-                  logoUrl={content?.logo_url || logo}
-                />
-              </div>
-            ) : (
-              <div style={{ ...styles.content, ...responsiveStyles.content }}>
-                {errorMessage && (
-                  <div
-                    role="alert"
-                    style={{
-                      backgroundColor: "#FEE2E2",
-                      color: "#DC2626",
-                      padding: "12px",
-                      borderRadius: "6px",
-                      marginBottom: "16px",
-                      fontSize: "14px",
-                      border: "1px solid #FCA5A5",
-                      position: "relative",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                    }}
-                  >
-                    <span>{errorMessage}</span>
-                    <button
-                      type="button"
-                      onClick={handleCloseError}
-                      style={{
-                        background: "none",
-                        border: "none",
-                        color: "#DC2626",
-                        cursor: "pointer",
-                        padding: "4px",
-                        marginLeft: "8px",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                      }}
-                      aria-label="Close error message"
-                    >
-                      <svg
-                        width="16"
-                        height="16"
-                        viewBox="0 0 16 16"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        aria-hidden="true"
-                      >
-                        <path
-                          d="M12 4L4 12M4 4L12 12"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                )}
-                <div
-                  style={{
-                    ...styles.topSection,
-                    ...responsiveStyles.topSection,
-                    ...sectionStyle,
-                  }}
-                >
-                  {(() => {
-                    const logoNode = (
-                      <img
-                        style={{ ...styles.logo, ...responsiveStyles.logo }}
-                        src={content?.logo_url || logo}
-                        alt="Redacto Logo"
-                      />
-                    );
-                    const titleNode = (
-                      <h2
-                        key={`privacy-notice-title-${selectedLanguage}`}
-                        id="privacy-notice-title"
-                        style={{
-                          ...styles.title,
-                          ...responsiveStyles.title,
-                          ...componentHeadingStyle,
-                        }}
-                      >
-                        {getTranslatedText(
-                          "notice_banner_heading",
-                          content?.notice_banner_heading || "Privacy Notice"
-                        )}
-                      </h2>
-                    );
-                    const controlsBlock = (
-                      <div style={styles.languageSelectorContainer}>
-                        <div
-                          style={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "8px",
-                          }}
-                        >
-                          {/* Speaker icon button - only visible when TTS is available */}
-                          {isTTSAvailable && (
-                            <button
-                              onClick={toggleAudio}
-                              style={{
-                                ...styles.topRight,
-                                ...responsiveStyles.topRight,
-                                ...languageSelectorStyle,
-                                padding: "3px 9px",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                              }}
-                              aria-label={
-                                isPlaying && !isPaused
-                                  ? "Pause audio playback"
-                                  : isPaused
-                                    ? "Resume audio playback"
-                                    : "Start audio playback"
-                              }
-                              title={
-                                isPlaying && !isPaused
-                                  ? "Pause Talkback"
-                                  : isPaused
-                                    ? "Resume Talkback"
-                                    : "Start Talkback"
-                              }
-                            >
-                              {isPlaying && !isPaused ? (
-                                // Pause icon
-                                <svg
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  width="16"
-                                  height="16"
-                                  viewBox="0 0 24 24"
-                                  fill="none"
-                                  stroke={
-                                    settings?.button?.language?.textColor ||
-                                    "currentColor"
-                                  }
-                                  strokeWidth="2"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  aria-hidden="true"
-                                >
-                                  <rect x="6" y="4" width="4" height="16" />
-                                  <rect x="14" y="4" width="4" height="16" />
-                                </svg>
-                              ) : (
-                                // Play/Sound icon
-                                <svg
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  width="16"
-                                  height="16"
-                                  viewBox="0 0 24 24"
-                                  fill="none"
-                                  stroke={
-                                    settings?.button?.language?.textColor ||
-                                    "currentColor"
-                                  }
-                                  strokeWidth="2"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                  aria-hidden="true"
-                                >
-                                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
-                                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
-                                </svg>
-                              )}
-                            </button>
-                          )}
-                          <div>
-                            <button
-                              ref={firstFocusableRef}
-                              style={{
-                                ...styles.topRight,
-                                ...responsiveStyles.topRight,
-                                ...languageSelectorStyle,
-                              }}
-                              onClick={toggleLanguageDropdown}
-                              aria-expanded={isLanguageDropdownOpen}
-                              aria-haspopup="listbox"
-                              aria-controls="language-listbox"
-                              aria-label={`Select language. Current language: ${toNativeLabel(selectedLanguage)}`}
-                            >
-                              {toNativeLabel(selectedLanguage)}
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="16"
-                                height="16"
-                                viewBox="0 0 16 16"
-                                fill="none"
-                                stroke={
-                                  settings?.button?.language?.textColor ||
-                                  "currentColor"
-                                }
-                                strokeWidth="2"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                style={{ flexShrink: 0, marginLeft: "4px" }}
-                                aria-hidden="true"
-                              >
-                                <path d="M4 6l4 4 4-4" />
-                              </svg>
-                            </button>
-                          </div>
-                        </div>
-                        {isLanguageDropdownOpen && (
-                          <ul
-                            id="language-listbox"
-                            style={{
-                              ...styles.languageDropdown,
-                              ...languageSelectorStyle,
-                            }}
-                            role="listbox"
-                            aria-label="Select language"
-                          >
-                            {availableLanguages.map((lang: string) => (
-                              <li
-                                key={lang}
-                                style={{
-                                  ...styles.languageItem,
-                                  ...responsiveStyles.languageItem,
-                                  ...(selectedLanguage === lang
-                                    ? selectedLanguageItemStyle
-                                    : languageSelectorStyle),
-                                  listStyle: "none",
-                                }}
-                                onClick={() => handleLanguageSelect(lang)}
-                                role="option"
-                                aria-selected={selectedLanguage === lang}
-                                tabIndex={0}
-                                aria-label={`Select ${toNativeLabel(lang)} language`}
-                              >
-                                {toNativeLabel(lang)}
-                              </li>
-                            ))}
-                          </ul>
-                        )}
-                      </div>
-                    );
-                    return isMobile ? (
-                      <>
-                        <div
-                          style={{
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "10px",
-                            width: "100%",
-                          }}
-                        >
-                          {logoNode}
-                          <div
-                            style={{
-                              marginLeft: "auto",
-                              display: "flex",
-                              alignItems: "center",
-                              flexShrink: 0,
-                            }}
-                          >
-                            {controlsBlock}
-                          </div>
-                        </div>
-                        {titleNode}
-                      </>
-                    ) : (
-                      <>
-                        <div style={styles.topLeft}>
-                          {logoNode}
-                          {titleNode}
-                        </div>
-                        {controlsBlock}
-                      </>
-                    );
-                  })()}
-                </div>
-                <div
-                  id="privacy-notice-description"
-                  style={{
-                    ...styles.middleSection,
-                    ...responsiveStyles.middleSection,
-                    ...sectionStyle,
-                  }}
-                >
-                  <p
-                    key={`privacy-text-${selectedLanguage}`}
-                    style={{
-                      ...styles.privacyText,
-                      ...responsiveStyles.privacyText,
-                      ...componentTextStyle,
-                    }}
-                  >
-                    <span
-                      id="privacy-notice-text"
-                      key={`privacy-notice-text-${selectedLanguage}`}
-                    >
-                      {content
-                        ? getTranslatedText("notice_text", content.notice_text)
-                        : ""}
-                    </span>
-                    <br />
-                    <span
-                      id="privacy-policy-text"
-                      key={`privacy-policy-text-${selectedLanguage}`}
-                    >
-                      {getTranslatedText(
-                        "privacy_policy_prefix_text",
-                        content?.privacy_policy_prefix_text || ""
-                      )}{" "}
-                      <a
-                        id="privacy-policy-link"
-                        style={{ ...styles.link, ...linkStyle }}
-                        href={content?.privacy_policy_url || "#"}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        aria-label="Privacy Policy (opens in new tab)"
-                      >
-                        {getTranslatedText(
-                          "privacy_policy_anchor_text",
-                          content?.privacy_policy_anchor_text ||
-                          "Privacy Policy"
-                        )}
-                      </a>
-                    </span>
-                  </p>
-                  <h2
-                    key={`purpose-section-heading-${selectedLanguage}`}
-                    id="purpose-section-heading"
-                    style={{
-                      ...styles.subTitle,
-                      ...responsiveStyles.subTitle,
-                      ...componentHeadingStyle,
-                    }}
-                  >
-                    {getTranslatedText(
-                      "purpose_section_heading",
-                      "Manage What You Share"
-                    )}
-                  </h2>
-
-                  {/* Reconsent UI with visual indicators only */}
-                  {categorizedPurposes ? (
-                    <div style={styles.optionsContainer}>
-                      {/* Already Consented Purposes */}
-                      {categorizedPurposes.alreadyConsented.map((purpose) => (
-                        <PurposeItem
-                          key={`${purpose.uuid}-${selectedLanguage}`}
-                          purpose={purpose}
-                          selectedPurposes={selectedPurposes}
-                          collapsedPurposes={collapsedPurposes}
-                          selectedDataElements={selectedDataElements}
-                          settings={settings}
-                          styles={styles}
-                          responsiveStyles={responsiveStyles}
-                          onPurposeToggle={handlePurposeCheckboxChange}
-                          onPurposeCollapse={togglePurposeCollapse}
-                          onDataElementToggle={handleDataElementCheckboxChange}
-                          getTranslatedText={getTranslatedText}
-                          isAlreadyConsented={true}
-                          selectedLanguage={selectedLanguage}
-                          initialDataElementSelections={initialDataElementSelections}
-                        />
-                      ))}
-
-                      {/* Need Consent Purposes */}
-                      {categorizedPurposes.needsConsent.map((purpose) => (
-                        <PurposeItem
-                          key={`${purpose.uuid}-${selectedLanguage}`}
-                          purpose={purpose}
-                          selectedPurposes={selectedPurposes}
-                          collapsedPurposes={collapsedPurposes}
-                          selectedDataElements={selectedDataElements}
-                          settings={settings}
-                          styles={styles}
-                          responsiveStyles={responsiveStyles}
-                          onPurposeToggle={handlePurposeCheckboxChange}
-                          onPurposeCollapse={togglePurposeCollapse}
-                          onDataElementToggle={handleDataElementCheckboxChange}
-                          getTranslatedText={getTranslatedText}
-                          isAlreadyConsented={false}
-                          selectedLanguage={selectedLanguage}
-                        />
-                      ))}
-                    </div>
-                  ) : (
-                    /* Regular consent UI */
-                    <div style={styles.optionsContainer}>
-                      {content?.purposes?.map((purpose) => (
-                        <PurposeItem
-                          key={`${purpose.uuid}-${selectedLanguage}`}
-                          purpose={purpose}
-                          selectedPurposes={selectedPurposes}
-                          collapsedPurposes={collapsedPurposes}
-                          selectedDataElements={selectedDataElements}
-                          settings={settings}
-                          styles={styles}
-                          responsiveStyles={responsiveStyles}
-                          onPurposeToggle={handlePurposeCheckboxChange}
-                          onPurposeCollapse={togglePurposeCollapse}
-                          onDataElementToggle={handleDataElementCheckboxChange}
-                          getTranslatedText={getTranslatedText}
-                          isAlreadyConsented={isFullyConsentedReviewMode}
-                          selectedLanguage={selectedLanguage}
-                          initialDataElementSelections={initialDataElementSelections}
-                        />
-                      ))}
-                    </div>
-                  )}
-
-                  {(content?.privacy_center_url || content?.dpo_info) && (
-                    <div
-                      style={{
-                        ...styles.privacyText,
-                        ...responsiveStyles.privacyText,
-                        ...componentTextStyle,
-                        fontSize: isMobile ? "13px" : "14px",
-                        lineHeight: "1.4",
-                        borderTop: "1px solid rgba(152, 162, 179, 0.3)",
-                        paddingTop: "12px",
-                        marginTop: "12px",
-                      }}
-                    >
-                      <p style={{ margin: 0, opacity: 0.6 }}>
-                        {content.privacy_center_url && (
-                          <>
-                            {content.additional_text && (
-                              <span id="additional-text">
-                                {getTranslatedText(
-                                  "additional_text",
-                                  content.additional_text
-                                )}
-                              </span>
-                            )}{" "}
-                            <a
-                              id="privacy-center-link"
-                              style={{ ...styles.link, ...linkStyle }}
-                              href={content.privacy_center_url}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                            >
-                              {getTranslatedText(
-                                "privacy_center_anchor_text",
-                                content.privacy_center_anchor_text || "Privacy Center"
-                              )}
-                            </a>
-                            .
-                          </>
-                        )}
-                        {content.dpo_info && (
-                          <>
-                            {content.privacy_center_url && <br />}
-                            <span id="dpo-grievance-text">
-                              {getTranslatedDpoText(
-                                "grievance_text",
-                                content.dpo_info.grievance_text || ""
-                              )}
-                            </span>{" "}
-                            {content.dpo_info.grievance_url && (
-                              <a
-                                id="dpo-grievance-link"
-                                style={{ ...styles.link, ...linkStyle }}
-                                href={content.dpo_info.grievance_url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                {getTranslatedDpoText(
-                                  "grievance_anchor_text",
-                                  content.dpo_info.grievance_anchor_text || "click here"
-                                )}
-                              </a>
-                            )}
-                            {content.dpo_info.grievance_email && (
-                              <>
-                                {" "}
-                                <span id="dpo-grievance-email-connector">
-                                  {getTranslatedDpoText(
-                                    "grievance_email_connector_text",
-                                    content.dpo_info.grievance_email_connector_text || "or email to"
-                                  )}
-                                </span>
-                                {" "}
-                                <a
-                                  id="dpo-grievance-email"
-                                  style={{ ...styles.link, ...linkStyle }}
-                                  href={`mailto:${content.dpo_info.grievance_email}`}
-                                >
-                                  {content.dpo_info.grievance_email}
-                                </a>
-                              </>
-                            )}
-                            <br />
-                            <span id="dpo-dp-board-text">
-                              {getTranslatedDpoText(
-                                "dp_board_text",
-                                content.dpo_info.dp_board_text || ""
-                              )}
-                            </span>{" "}
-                            {content.dpo_info.dp_board_url && (
-                              <a
-                                id="dpo-dp-board-link"
-                                style={{ ...styles.link, ...linkStyle }}
-                                href={content.dpo_info.dp_board_url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                {getTranslatedDpoText(
-                                  "dp_board_anchor_text",
-                                  content.dpo_info.dp_board_anchor_text || "here"
-                                )}
-                              </a>
-                            )}
-                            <br />
-                            <span id="dpo-dpo-text">
-                              {getTranslatedDpoText(
-                                "dpo_text",
-                                content.dpo_info.dpo_text || ""
-                              )}
-                            </span>{" "}
-                            {content.dpo_info.dpo_email && (
-                              <a
-                                id="dpo-dpo-link"
-                                style={{ ...styles.link, ...linkStyle }}
-                                href={`mailto:${content.dpo_info.dpo_email}`}
-                              >
-                                {getTranslatedDpoText(
-                                  "dpo_anchor_text",
-                                  content.dpo_info.dpo_anchor_text || "Click here"
-                                )}
-                              </a>
-                            )}
-                          </>
-                        )}
-                      </p>
-                    </div>
-                  )}
-                </div>
-                <div
-                  style={{
-                    ...styles.bottomSection,
-                    ...responsiveStyles.bottomSection,
-                    ...sectionStyle,
-                  }}
-                >
-                  {isFullyConsentedReviewMode ? (
-                    <button
-                      ref={lastFocusableRef}
-                      id="review-mode-continue-button"
-                      style={{
-                        ...styles.button,
-                        ...responsiveStyles.button,
-                        ...styles.acceptButton,
-                        ...acceptButtonStyle,
-                      }}
-                      onClick={() => onAccept?.()}
-                      aria-label={reviewModeButtonText}
-                    >
-                      {reviewModeButtonText}
-                    </button>
-                  ) : (
-                    <>
-                      <button
-                        ref={lastFocusableRef}
-                        id="confirm-button-text"
-                        style={{
-                          ...styles.button,
-                          ...responsiveStyles.button,
-                          ...styles.acceptButton,
-                          ...acceptButtonStyle,
-                          opacity: acceptDisabled ? 0.5 : 1,
-                        }}
-                        onClick={handleAccept}
-                        disabled={acceptDisabled || isSubmittingDecline}
-                        aria-label={getTranslatedText(
-                          "confirm_button_text",
-                          content?.confirm_button_text || "Accept"
-                        )}
-                      >
-                        {isSubmittingAccept
-                          ? "Processing..."
-                          : getTranslatedText(
-                              "confirm_button_text",
-                              content?.confirm_button_text || "Accept"
-                            )}
-                      </button>
-                      <button
-                        id="decline-button-text"
-                        style={{
-                          ...styles.button,
-                          ...responsiveStyles.button,
-                          ...styles.cancelButton,
-                          ...declineButtonStyle,
-                          opacity: isSubmittingAccept ? 0.5 : 1,
-                        }}
-                        onClick={handleDecline}
-                        disabled={isSubmittingDecline || isSubmittingAccept}
-                        aria-label={getTranslatedText(
-                          "decline_button_text",
-                          content?.decline_button_text || "Decline"
-                        )}
-                      >
-                        {isSubmittingDecline
-                          ? "Processing..."
-                          : getTranslatedText(
-                              "decline_button_text",
-                              content?.decline_button_text || "Decline"
-                            )}
-                      </button>
-                    </>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </>
-      )}
-    </>
-  );
-};