// Speak Up Istanbul — marketing refactor.
// Sections (in order): Nav · Hero · Marquee · Path (wizard) · Standards ·
// Founder · Programs · Seasons (+ chart) · Mentorship · Reviews · FAQ ·
// Final CTA · Footer.

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA, useMemo: useMemoA } = React;

// >>>>>> CONFIG: Set this to your Web3Forms access key once.
// Sign up free at https://web3forms.com/ → paste your access key here.
// If left empty, the form falls back to opening the user's mail client.
const WEB3FORMS_KEY = "32ab16d0-524c-4823-a022-dfc2f14dbe4c";
const FALLBACK_EMAIL = "speak.up.istanbull@gmail.com";

// ============ NAVIGATE TO PATH WIZARD WITH PRE-FILLS ============
function goToPath(params = {}) {
  const qs = new URLSearchParams(params).toString();
  const newHash = qs ? `#path?${qs}` : "#path";
  // Always set hash so the wizard's hashchange listener pre-fills the dropdowns
  if (window.location.hash !== newHash) window.location.hash = newHash;
  // Scroll inside the custom scrolling container .va-root
  const scroll = () => {
    const root = document.querySelector(".va-root");
    const target = document.getElementById("path");
    if (!root || !target) return;
    const top = target.offsetTop - 8;
    root.scrollTo({ top, behavior: "smooth" });
  };
  setTimeout(scroll, 40);
}

// ============ LUCIDE-STYLE ICON (stroke SVG) ============
function LucideIcon({ name, size = 28, color = "currentColor", strokeWidth = 2, style = {} }) {
  const paths = {
    "graduation-cap": <><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></>,
    "cpu": <><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></>,
    "globe": <><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/></>,
    "smile": <><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></>,
    "book-open": <><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></>,
    "briefcase": <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    "sparkles": <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></>,
    "languages": <><path d="m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6"/></>,
    "rocket": <><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09zM12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2zM9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></>,
    "calendar": <><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="m9 16 2 2 4-4"/></>,
    "folder": <><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><path d="m9 13 2 2 4-4"/></>,
    "exam": <><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M9 7h6M9 12h6M9 17h4"/></>,
    "trophy": <><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></>,
    "arrow-right": <><path d="M5 12h14M13 5l7 7-7 7"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name]}
    </svg>
  );
}

// ============ AGE-GROUP ILLUSTRATIONS ============
const PROGRAM_ILLUSTRATION_SRC = {
  kids: "assets/kids_academy_illlustration.png",
  teens: "assets/teens_academy_illlustration.png",
  adults: "assets/adults_academy_illlustration.png",
  "adults-general": "assets/adults_academic_illlustration.png",
  "adults-academic": "assets/adults_general_illlustration.png",
};
function ProgramIllustration({ kind, size = 160 }) {
  const src = PROGRAM_ILLUSTRATION_SRC[kind] || PROGRAM_ILLUSTRATION_SRC.adults;
  return (
    <img
      src={src}
      alt={`${kind} illustration`}
      width={size}
      height={size}
      style={{ width: size, height: size, objectFit: "contain", display: "block" }}
    />
  );
}

// ============ STANDARDS LOGOS (inline SVG wordmarks) ============
const STANDARDS_LOGOS = {
  "Oxford University Press":   { color: "#002147", text: "OXFORD", sub: "University Press", serif: true },
  "Cambridge":                 { color: "#A5132E", text: "CAMBRIDGE", sub: "ASSESSMENT", serif: true },
  "British Council":           { color: "#1F2A44", text: "British", sub: "Council", serif: true, mixedCase: true },
  "IELTS":                     { color: "#A4123F", text: "IELTS", round: true },
  "TOEFL iBT":                 { color: "#0079B7", text: "TOEFL", sub: "iBT" },
  "PTE":                       { color: "#FAA61A", text: "PTE", sub: "ACADEMIC" },
  "Duolingo English Test":     { color: "#58CC02", text: "duolingo", sub: "English Test", lower: true },
  "Digital SAT":               { color: "#0033A0", text: "SAT", sub: "Digital" },
  "University Proficiency Exams": { color: "#5A2A82", text: "ÜYS", sub: "Yeterlik", serif: true },
  "اختبارات الكفاءة الجامعية": { color: "#5A2A82", text: "ÜYS", sub: "Proficiency", serif: true },
};

const STANDARDS_LOGO_IMAGES = {
  "Oxford University Press": "assets/oxford.png",
  "Cambridge": "assets/cambridge.png",
  "British Council": "assets/british_council.png",
  "IELTS": "assets/ielts.jpg",
  "TOEFL iBT": "assets/toefl.png",
  "PTE": "assets/pte.png",
  "Duolingo English Test": "assets/doulingo.jpg",
  "Digital SAT": "assets/sat.png",
  "University Proficiency Exams": "assets/itep.png",
};

const STANDARDS_LOGO_SIZE_BOOST = {
  "Duolingo English Test": 12,
};

// Per-brand multiplier applied only to the inner <img>, leaving the
// container tile at its default size. Lets a logo render larger inside
// a normal-sized tile (and overflow visually if needed).
const STANDARDS_LOGO_IMG_SCALE = {
  "Cambridge": 2,
  "British Council": 2,
};

const STANDARDS_LOGO_LAYOUT = {};

function BrandLogo({ name, height = 38 }) {
  const src = STANDARDS_LOGO_IMAGES[name];
  if (src) {
    const layout = STANDARDS_LOGO_LAYOUT[name];
    if (layout) {
      return (
        <div style={{
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          padding: `${layout.padY}px ${layout.padX}px`, borderRadius: 12, background: "#fff",
          minWidth: layout.width, height: layout.height,
          border: `1px solid ${layout.borderColor || "#0A0A0A11"}`,
        }}>
          <img src={src} alt={name} style={{
            maxHeight: layout.imgMaxH, maxWidth: layout.imgMaxW,
            objectFit: "contain", display: "block",
          }}/>
        </div>
      );
    }
    const boost = STANDARDS_LOGO_SIZE_BOOST[name] || 0;
    const h = height + boost;
    const imgScale = STANDARDS_LOGO_IMG_SCALE[name] || 1;
    return (
      <div style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        padding: "8px 14px", borderRadius: 12, background: "#fff",
        minWidth: 110, height: height + 16 + boost,
        border: "1.5px solid #0A0A0A22", overflow: "visible",
      }}>
        <img src={src} alt={name} style={{
          maxHeight: h * imgScale, maxWidth: (130 + boost) * imgScale,
          objectFit: "contain", display: "block",
        }}/>
      </div>
    );
  }
  const cfg = STANDARDS_LOGOS[name] || { color: "#666", text: name };
  const fontFamily = cfg.serif ? "'Fraunces', Georgia, serif" : "Inter, system-ui";
  return (
    <div style={{
      display: "inline-flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      padding: "8px 14px", borderRadius: 12, background: "#fff",
      minWidth: 110, height,
      border: `1.5px solid ${cfg.color}22`,
    }}>
      <span style={{
        fontFamily, color: cfg.color, fontWeight: 900, fontSize: cfg.lower ? 16 : 15,
        letterSpacing: cfg.serif ? 0.5 : cfg.round ? 1.5 : 0.8,
        textTransform: cfg.lower ? "lowercase" : cfg.mixedCase ? "none" : "uppercase",
        lineHeight: 1,
      }}>{cfg.text}</span>
      {cfg.sub && (
        <span style={{
          fontFamily: "Inter, system-ui", color: cfg.color, fontWeight: 600, fontSize: 8,
          letterSpacing: 1.2, textTransform: "uppercase", marginTop: 3, opacity: 0.85,
        }}>{cfg.sub}</span>
      )}
    </div>
  );
}

// ============ SOCIAL ICONS ============
function SocialIcon({ name, size = 20, color = "#fff" }) {
  const paths = {
    whatsapp: <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0 0 20.464 3.488"/>,
    telegram: <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.464.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>,
    facebook: <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>,
    instagram: <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/>,
    tiktok: <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>,
    youtube: <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg">
      {paths[name]}
    </svg>
  );
}

// ============ RESPONSIVE CSS ============
const VA_RESPONSIVE_CSS = `
@keyframes va-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes va-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes va-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes va-spotlight-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes va-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes va-acq-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* "language acquisition" sentence — animated color highlight that sweeps
   from the first letter to the last after the sentence appears. The card
   passes its own colour via --va-acq-color. */
.va-acq-highlight {
  background-image: linear-gradient(var(--va-acq-color, #FF4D4D), var(--va-acq-color, #FF4D4D));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  animation: va-acq-sweep 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.75s forwards;
  padding: 2px 4px;
  margin: 0 -2px;
  border-radius: 3px;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.va-root[dir="rtl"] .va-acq-highlight {
  background-position: 100% 0;
}

.va-typing::after {
  content: "|"; display: inline-block; margin-left: 4px;
  animation: va-blink 0.9s steps(1) infinite; color: currentColor; font-weight: 400;
}

/* RTL adjustments */
.va-root[dir="rtl"] { font-family: 'Cairo', 'Inter', system-ui; }
.va-root[dir="rtl"] .va-hero-h1 em,
.va-root[dir="rtl"] .va-section-h2 em { font-style: normal; }

/* Force LTR layout on marquee wrappers so RTL pages don't break translateX positioning */
.va-marquee-wrap { direction: ltr; }

/* Seasonal program CTA — color is set inline per season; this class adds the
   shared 3D press behavior used across primary buttons. On hover, the button
   pushes into its drop shadow (arrow still nudges forward). The shadow color
   is read from the --va-cta-shadow custom property so this class can be
   reused by any 3D button (defaults to black). */
.va-season-cta {
  --va-cta-shadow: #0A0A0A;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.18s ease;
}
.va-season-cta:hover {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--va-cta-shadow);
  filter: brightness(1.05);
}
.va-season-cta:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--va-cta-shadow);
}

/* Shared arrow fly-loop used by va-season-cta, va-plan-cta, and any other
   3D CTA. The arrow shoots out, then re-enters from the opposite side, giving
   a clear "go" cue while the button is hovered. Mirrored for RTL so the
   arrow always exits in its reading-forward direction. */
.va-season-cta-arrow {
  display: inline-block;
  will-change: transform, opacity;
}
@keyframes va-cta-arrow-fly-ltr {
  0%, 100% { transform: translateX(0);     opacity: 1; }
  45%      { transform: translateX(12px);  opacity: 0; }
  55%      { transform: translateX(-12px); opacity: 0; }
}
@keyframes va-cta-arrow-fly-rtl {
  0%, 100% { transform: translateX(0);     opacity: 1; }
  45%      { transform: translateX(-12px); opacity: 0; }
  55%      { transform: translateX(12px);  opacity: 0; }
}
.va-season-cta:hover .va-season-cta-arrow,
.va-plan-cta:hover .va-season-cta-arrow {
  animation: va-cta-arrow-fly-ltr 1.1s ease-in-out infinite;
}
.va-root[dir="rtl"] .va-season-cta:hover .va-season-cta-arrow,
.va-root[dir="rtl"] .va-plan-cta:hover .va-season-cta-arrow {
  animation: va-cta-arrow-fly-rtl 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .va-season-cta:hover .va-season-cta-arrow,
  .va-plan-cta:hover .va-season-cta-arrow,
  .va-root[dir="rtl"] .va-season-cta:hover .va-season-cta-arrow,
  .va-root[dir="rtl"] .va-plan-cta:hover .va-season-cta-arrow {
    animation: none;
  }
}

/* Founder credential cards — lift + tint shadow to the card's accent color
   on hover, and gently wiggle the icon. */
.va-founder-card {
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: default;
}
.va-founder-card:hover {
  transform: translate(-3px, -4px);
  box-shadow: 10px 12px 0 var(--va-founder-card-accent, #0A0A0A);
}
.va-founder-card-icon {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.va-founder-card:hover .va-founder-card-icon {
  transform: rotate(-6deg) scale(1.08);
}

@media (max-width: 980px) {
  .va-founder-grid    { grid-template-columns: 1fr !important; }
  .va-path-grid       { grid-template-columns: 1fr !important; }
  .va-programs-row    { flex-direction: column !important; }
  .va-program-card    { width: 100% !important; opacity: 1 !important; pointer-events: auto !important; }
  .va-seasons-grid    { grid-template-columns: 1fr !important; }
  .va-eval-grid       { grid-template-columns: 1fr !important; }
  .va-eval-stages     { grid-template-columns: 1fr !important; }
  .va-eval-pipeline   { gap: 8px !important; }
  .va-eval-pipeline-step { font-size: 12px !important; padding: 8px 10px !important; }
}
@media (max-width: 768px) {
  .va-section          { padding-left: 20px !important; padding-right: 20px !important; }

  .va-nav-inner        { padding: 14px 16px !important; gap: 8px !important; }
  .va-nav-links        { display: none !important; }
  .va-nav-cta          { padding: 9px 14px !important; font-size: 12px !important; }
  .va-lang-toggle      { padding: 2px !important; }
  .va-lang-toggle button { padding: 5px 9px !important; font-size: 10px !important; }

  .va-hero-section     { padding-top: 40px !important; padding-bottom: 60px !important; }
  .va-hero-grid        { grid-template-columns: 1fr !important; gap: 40px !important; }
  .va-hero-aside       { display: none !important; }
  .va-hero-bubble      { display: none !important; }
  .va-hero-h1          { font-size: clamp(40px, 11vw, 64px) !important; letter-spacing: -1.5px !important; }
  .va-hero-bg-blob     { width: 320px !important; height: 320px !important; right: -120px !important; top: -60px !important; }

  .va-marquee-inner    { font-size: 18px !important; gap: 28px !important; }

  .va-section-py       { padding-top: 64px !important; padding-bottom: 64px !important; }
  .va-grid-3           { grid-template-columns: 1fr !important; gap: 16px !important; }
  .va-grid-2           { grid-template-columns: 1fr !important; gap: 16px !important; }
  .va-section-h2       { font-size: clamp(28px, 7vw, 44px) !important; letter-spacing: -1px !important; }

  .va-path-card        { padding: 24px !important; }
  .va-path-fields      { grid-template-columns: 1fr !important; }

  .va-standards-grid   { grid-template-columns: 1fr !important; }

  .va-founder-portrait { max-width: 100% !important; }
  .va-founder-badges   { justify-content: flex-start !important; }

  .va-programs-row     { flex-direction: column !important; gap: 16px !important; }
  .va-program-card     { width: 100% !important; opacity: 1 !important; }

  .va-wheel-wrap       { width: 280px !important; height: 280px !important; }
  .va-wheel-label      { font-size: 10px !important; padding: 6px !important; letter-spacing: 0 !important; }
  .va-season-details   { padding: 24px !important; }
  .va-chart-svg        { height: 220px !important; }

  .va-mentor-card      { padding: 32px !important; }

  .va-eval-pipeline    { flex-wrap: wrap !important; gap: 8px !important; }
  .va-eval-pipeline-step { font-size: 11px !important; padding: 7px 12px !important; }
  .va-eval-pipeline-arrow { display: none !important; }
  .va-eval-stage-card  { padding: 22px !important; }
  .va-eval-value       { padding: 28px !important; }

  .va-review-card      { grid-template-columns: 1fr !important; padding: 28px !important; gap: 20px !important; text-align: center; }
  .va-review-avatar    { margin: 0 auto !important; width: 140px !important; height: 140px !important; }
  .va-review-quote     { font-size: 19px !important; }

  .va-faq-q            { padding: 16px 18px !important; font-size: 16px !important; }
  .va-faq-a            { padding: 0 18px 18px !important; }

  .va-footer           { padding: 56px 20px 32px !important; }
  .va-footer-grid      { grid-template-columns: 1fr 1fr !important; gap: 28px !important; margin-bottom: 32px !important; }
  .va-footer-tagline   { font-size: 18px !important; }
}
@media (max-width: 480px) {
  .va-logo-text        { display: none !important; }
  .va-footer-grid      { grid-template-columns: 1fr !important; }
  .va-marquee-inner    { font-size: 16px !important; gap: 22px !important; }
  .va-hero-cta         { width: 100%; justify-content: center; }
  .va-wheel-wrap       { width: 240px !important; height: 240px !important; }
  .va-wheel-label      { font-size: 9px !important; padding: 4px !important; line-height: 1.15 !important; }
  .va-chart-svg        { height: 200px !important; }
}
`;

// =====================================================================
// ============================== ROOT =================================
// =====================================================================
function VariantA({ tweaks, lang, setLang }) {
  const t = window.COPY[lang];
  const reviews = lang === "tr" ? window.REVIEWS_TR : lang === "ar" ? window.REVIEWS_AR : window.REVIEWS_EN;
  const D = window.DENSITY[tweaks.density];
  const scopeRef = useRefA(null);

  useEffectA(() => { window.__activeLang = lang; }, [lang]);

  const [scrolled, setScrolled] = useStateA(false);
  const [scrollY, setScrollY] = useStateA(0);
  useEffectA(() => {
    const el = scopeRef.current;
    if (!el) return;
    const onS = () => { setScrolled(el.scrollTop > 60); setScrollY(el.scrollTop); };
    el.addEventListener("scroll", onS, { passive: true });
    return () => el.removeEventListener("scroll", onS);
  }, []);

  return (
    <div ref={scopeRef} id="top" dir={lang === "ar" ? "rtl" : "ltr"} className="va-root" style={{
      width: "100%", height: "100%", overflowY: "auto", overflowX: "hidden",
      background: "#FFE7CF", color: "#0A0A0A",
      fontFamily: lang === "ar" ? "'Cairo', 'Inter', system-ui" : "Inter, system-ui",
      scrollBehavior: "smooth",
    }}>
      <style>{VA_RESPONSIVE_CSS}</style>
      <NavA scrolled={scrolled} t={t} lang={lang} setLang={setLang} />
      <HeroA t={t} D={D} layout={tweaks.heroLayout} scrollY={scrollY} lang={lang}/>
      <MarqueeA t={t}/>
      <StandardsA t={t} D={D}/>
      <FounderA t={t} D={D}/>
      <ProgramsA t={t} D={D} lang={lang}/>
      <SeasonsA t={t} D={D} lang={lang}/>
      <EvaluationA t={t} D={D} lang={lang}/>
      <MentorshipA t={t} D={D}/>
      <ReviewsA t={t} D={D} reviews={reviews}/>
      <FaqA t={t} D={D} lang={lang}/>
      <PathA t={t} D={D} scopeRef={scopeRef} lang={lang}/>
      <FooterA t={t} lang={lang} setLang={setLang}/>
    </div>
  );
}

// =====================================================================
// ============================== NAV ==================================
// =====================================================================
function NavA({ scrolled, t, lang, setLang }) {
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(255,255,255,0.95)" : "transparent",
      backdropFilter: scrolled ? "blur(10px)" : "none",
      boxShadow: scrolled ? "0 4px 20px rgba(0,0,0,0.06)" : "none",
      transition: "all 0.25s",
      borderBottom: scrolled ? "1px solid rgba(0,0,0,0.05)" : "none",
    }}>
      <div className="va-nav-inner" style={{
        maxWidth: 1280, margin: "0 auto", padding: "16px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 12,
      }}>
        <window.LogoMark size={42}/>
        <nav className="va-nav-links" style={{ display: "flex", gap: 22, fontSize: 14, fontWeight: 600 }}>
          {[["path","#path"],["programs","#programs"],["seasons","#seasons"],["founder","#founder"],["faq","#faq"]].map(([k, h]) => (
            <a key={k} href={h} style={{ color: "#0A0A0A", textDecoration: "none" }}
              onMouseEnter={(e) => e.currentTarget.style.color = "#FF4D4D"}
              onMouseLeave={(e) => e.currentTarget.style.color = "#0A0A0A"}
            >{t.nav[k]}</a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <LangToggle3 lang={lang} setLang={setLang}/>
          <a href="#path" className="va-nav-cta" style={{
            background: "#0A0A0A", color: "#fff", padding: "11px 18px", borderRadius: 999,
            fontSize: 13, fontWeight: 700, textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 8, whiteSpace: "nowrap",
            transition: "transform 0.15s, background 0.15s",
          }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "#FF4D4D"; e.currentTarget.style.transform = "translateY(-1px)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "#0A0A0A"; e.currentTarget.style.transform = "translateY(0)"; }}
          >
            {t.nav.cta}
            <span>{lang === "ar" ? "←" : "→"}</span>
          </a>
        </div>
      </div>
    </header>
  );
}

function LangToggle3({ lang, setLang }) {
  const langs = [["en","EN"],["tr","TR"],["ar","AR"]];
  return (
    <div className="va-lang-toggle" style={{
      display: "inline-flex", background: "rgba(0,0,0,0.06)", borderRadius: 999,
      padding: 3, fontSize: 11, fontWeight: 700,
    }}>
      {langs.map(([l, label]) => (
        <button key={l} onClick={() => setLang(l)} style={{
          padding: "6px 11px", border: "none", borderRadius: 999, cursor: "pointer",
          background: lang === l ? "#0A0A0A" : "transparent",
          color: lang === l ? "#fff" : "#0A0A0A",
          textTransform: "uppercase", letterSpacing: 1,
        }}>{label}</button>
      ))}
    </div>
  );
}

// =====================================================================
// ============================== HERO =================================
// =====================================================================
function HeroA({ t, D, scrollY, lang }) {
  const parallax = scrollY * 0.15;
  return (
    <section className="va-section va-hero-section" style={{ position: "relative", padding: `${D.sec * 0.7}px 32px ${D.sec}px`, overflow: "hidden" }}>
      <div className="va-hero-bg-blob" style={{
        position: "absolute", right: -200, top: -100, width: 560, height: 560,
        background: "#FFB3B3", borderRadius: "50%", opacity: 0.6,
        transform: `translateY(${-parallax}px)`,
      }}/>
      <div className="va-hero-grid" style={{
        maxWidth: 1280, margin: "0 auto", display: "grid",
        gridTemplateColumns: "minmax(0, 1.15fr) minmax(0, 0.85fr)",
        gap: 56, alignItems: "center", position: "relative", zIndex: 2,
      }}>
        <div>
          <window.SpeechBubble color="#1FB6B0" tail="br" style={{ marginBottom: 24, fontSize: 11, letterSpacing: 1 }}>
            {t.hero.aiChip}
          </window.SpeechBubble>
          <h1 className="va-hero-h1" style={{
            fontFamily: "'Archivo Black', system-ui", fontSize: `clamp(42px, 5.8vw, 88px)`,
            lineHeight: 0.98, letterSpacing: -2, margin: "0 0 24px",
          }}>
            {t.hero.h1_a}{" "}
            <em style={{ fontStyle: "italic", color: "#FF4D4D", fontFamily: "'Fraunces', serif", fontWeight: 900 }}>
              {t.hero.h1_b}
            </em>
            {t.hero.h1_c}
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.55, maxWidth: 560, opacity: 0.78, margin: "0 0 32px" }}>
            {t.hero.sub}
          </p>
          <CtaA href="#path" label={t.hero.cta} sub={t.hero.ctaSub} lang={lang}/>
          <TrustA text={t.hero.trust}/>
        </div>
        <div className="va-hero-aside" style={{ position: "relative", transform: `translateY(${-parallax * 0.5}px)` }}>
          <window.VideoCallMock teacher={{ name: "Rauf", origin: "Istanbul", flag: "🇹🇷", color: "#FF4D4D", initials: "RA" }} image="assets/tv.jpeg"/>
          <div className="va-hero-bubble" style={{ position: "absolute", top: -20, left: -30, transform: "rotate(-8deg)" }}>
            <window.SpeechBubble color="#1FB6B0" tail="br" style={{ fontSize: 12 }}>
              {t.hero.stickerHi}
            </window.SpeechBubble>
          </div>
          <div className="va-hero-bubble" style={{ position: "absolute", bottom: 40, right: -40, transform: "rotate(6deg)" }}>
            <window.SpeechBubble color="#F4B92E" textColor="#0A0A0A" tail="bl" style={{ fontSize: 12 }}>
              {t.hero.stickerWow}
            </window.SpeechBubble>
          </div>
        </div>
      </div>
    </section>
  );
}

function CtaA({ href, label, sub, lang, color = "#FF4D4D", onClick }) {
  const arrow = lang === "ar" ? "←" : "→";
  const inner = (
    <>
      {label} <span>{arrow}</span>
    </>
  );
  const style = {
    display: "inline-flex", alignItems: "center", gap: 12,
    background: color, color: "#fff", padding: "18px 28px", borderRadius: 999,
    fontSize: 16, fontWeight: 700, textDecoration: "none", border: "none", cursor: "pointer",
    boxShadow: "0 8px 0 #0A0A0A, 0 12px 24px rgba(0,0,0,0.15)",
    transition: "transform 0.15s, box-shadow 0.15s",
  };
  const onEnter = (e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 10px 0 #0A0A0A, 0 14px 28px rgba(0,0,0,0.2)"; };
  const onLeave = (e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 8px 0 #0A0A0A, 0 12px 24px rgba(0,0,0,0.15)"; };
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
      {onClick ? (
        <button onClick={onClick} style={style} onMouseEnter={onEnter} onMouseLeave={onLeave}>{inner}</button>
      ) : (
        <a href={href} style={style} onMouseEnter={onEnter} onMouseLeave={onLeave}>{inner}</a>
      )}
      {sub && <span style={{ fontSize: 13, opacity: 0.6, fontFamily: "'JetBrains Mono', monospace" }}>{sub}</span>}
    </div>
  );
}

function TrustA({ text }) {
  return (
    <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
      <div style={{ display: "flex", gap: 2, fontSize: 14 }}>
        {"★★★★★".split("").map((s, i) => <span key={i} style={{ color: "#F4B92E" }}>{s}</span>)}
      </div>
      <span style={{ fontSize: 13, fontWeight: 600, opacity: 0.75 }}>{text}</span>
    </div>
  );
}

// =====================================================================
// ============================ MARQUEE ===============================
// =====================================================================
function MarqueeA({ t }) {
  const items = t.marquee.concat(t.marquee);
  return (
    <div className="va-marquee-wrap" style={{ background: "#0A0A0A", color: "#fff", padding: "20px 0", overflow: "hidden", borderTop: "1px solid #FF4D4D", borderBottom: "1px solid #FF4D4D" }}>
      <div className="va-marquee-inner" style={{
        display: "inline-flex", gap: 48, whiteSpace: "nowrap",
        animation: "va-marquee 45s linear infinite",
        fontFamily: "'Archivo Black', system-ui", fontSize: 26, letterSpacing: -0.5,
      }}>
        {items.map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 48 }}>
            {it}
            <span style={{ color: "#FF4D4D" }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// =====================================================================
// =========================== SECTION HEADER ==========================
// =====================================================================
function SectionHeaderA({ kicker, title, sub, accent = "#FF4D4D", center = false, chip }) {
  return (
    <div style={{ maxWidth: 820, margin: center ? "0 auto" : 0, textAlign: center ? "center" : "start" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, justifyContent: center ? "center" : "flex-start", marginBottom: 16, flexWrap: "wrap" }}>
        <span style={{
          display: "inline-block", padding: "6px 12px", borderRadius: 999,
          background: accent, color: "#fff", fontSize: 11, fontWeight: 800, letterSpacing: 1.5,
          textTransform: "uppercase", fontFamily: "'JetBrains Mono', monospace",
        }}>{kicker}</span>
        {chip && (
          <span style={{
            display: "inline-block", padding: "6px 12px", borderRadius: 999,
            background: "#0A0A0A", color: "#fff", fontSize: 11, fontWeight: 800, letterSpacing: 1.5,
            textTransform: "uppercase", fontFamily: "'JetBrains Mono', monospace",
          }}>{chip}</span>
        )}
      </div>
      <h2 className="va-section-h2" style={{
        fontFamily: "'Archivo Black', system-ui", fontSize: `clamp(32px, 4.4vw, 56px)`,
        lineHeight: 1.05, letterSpacing: -1.5, margin: 0,
      }}>{title}</h2>
      {sub && <p style={{ fontSize: 17, lineHeight: 1.55, opacity: 0.75, marginTop: 16, marginBottom: 0, maxWidth: 680, marginLeft: center ? "auto" : 0, marginRight: center ? "auto" : 0 }}>{sub}</p>}
    </div>
  );
}

// =====================================================================
// ====================== PATH (the conversion wizard) =================
// =====================================================================
function PathA({ t, D, scopeRef, lang }) {
  const [answers, setAnswers] = useStateA({ who: "", goal: "", pace: "", level: "" });
  const [phase, setPhase] = useStateA("quiz"); // quiz | contact | sending | success | error
  const [form, setForm] = useStateA({ name: "", email: "", phone: "", notes: "" });
  const [formErr, setFormErr] = useStateA({});

  // Pre-fill from URL hash (#path?who=kids)
  useEffectA(() => {
    const apply = () => {
      const h = window.location.hash || "";
      const qIdx = h.indexOf("?");
      if (qIdx === -1) return;
      const qs = new URLSearchParams(h.slice(qIdx + 1));
      const next = { ...answers };
      ["who", "goal", "pace", "level"].forEach(k => {
        const v = qs.get(k);
        if (v && t.path.opts[k] && t.path.opts[k][v]) next[k] = v;
      });
      setAnswers(next);
    };
    apply();
    window.addEventListener("hashchange", apply);
    return () => window.removeEventListener("hashchange", apply);
  }, []);

  const allAnswered = answers.who && answers.goal && answers.pace && answers.level;

  const recommendation = useMemoA(() => {
    if (!allAnswered) return null;
    const { who, goal, pace, level } = answers;
    const trackByWho = { kids: "Kids Academy", teens: "Teens Leadership Track", adults: "Adults English Programs" };
    const goalLine = {
      everyday: { en: "General English focus", tr: "Genel İngilizce odağı", ar: "تركيز على الإنجليزية العامة" },
      exams: { en: "IELTS / TOEFL / PTE / DET prep", tr: "IELTS / TOEFL / PTE / DET hazırlığı", ar: "تحضير IELTS / TOEFL / PTE / DET" },
      university: { en: "Digital SAT + University Proficiency prep", tr: "Digital SAT + Üniversite Yeterlik hazırlığı", ar: "تحضير Digital SAT + الكفاءة الجامعية" },
    };
    const paceLine = {
      seasonal: { en: "Seasonal group track", tr: "Sezonluk grup yolu", ar: "مسار مجموعة موسمية" },
      private: { en: "1-on-1 Private Mentorship", tr: "Birebir Özel Mentörlük", ar: "إرشاد فردي خاص" },
    };
    const levelLine = level === "unsure"
      ? { en: "Starts with a placement interview", tr: "Seviye tespiti görüşmesiyle başlar", ar: "يبدأ بمقابلة تقييم المستوى" }
      : { en: `Starting level ${level.toUpperCase()}`, tr: `Başlangıç seviyesi ${level.toUpperCase()}`, ar: `مستوى البداية ${level.toUpperCase()}` };
    return {
      track: trackByWho[who],
      lines: [goalLine[goal][lang] || goalLine[goal].en, paceLine[pace][lang] || paceLine[pace].en, levelLine[lang] || levelLine.en],
    };
  }, [answers, lang]);

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = true;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = true;
    if (!/^[+\d\s()-]{7,}$/.test(form.phone)) e.phone = true;
    setFormErr(e);
    return Object.keys(e).length === 0;
  };

  const submit = async () => {
    if (!validate()) return;
    setPhase("sending");
    const payload = {
      access_key: WEB3FORMS_KEY,
      subject: "New Speak Up Istanbul plan request",
      from_name: form.name,
      email: form.email,
      phone: form.phone,
      notes: form.notes,
      who: t.path.opts.who[answers.who],
      goal: t.path.opts.goal[answers.goal],
      pace: t.path.opts.pace[answers.pace],
      level: t.path.opts.level[answers.level],
      language: lang,
      recommendation: recommendation ? `${recommendation.track} — ${recommendation.lines.join(" · ")}` : "",
    };
    if (!WEB3FORMS_KEY) {
      mailtoSubmit(payload);
      setPhase("success");
      return;
    }
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await res.json();
      if (data && data.success) setPhase("success");
      else setPhase("error");
    } catch (err) {
      setPhase("error");
    }
  };

  const mailtoSubmit = (p) => {
    const body = [
      `Name: ${p.from_name}`, `Email: ${p.email}`, `Phone: ${p.phone}`,
      `Who: ${p.who}`, `Goal: ${p.goal}`, `Pace: ${p.pace}`, `Level: ${p.level}`,
      `Recommended: ${p.recommendation}`, `Notes: ${p.notes}`, `Language: ${p.language}`,
    ].join("\n");
    window.location.href = `mailto:${FALLBACK_EMAIL}?subject=${encodeURIComponent(p.subject)}&body=${encodeURIComponent(body)}`;
  };

  return (
    <section id="path" className="va-section va-section-py" style={{ padding: `${D.sec}px 32px`, background: "#E7F8F7" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <SectionHeaderA kicker={t.path.kicker} title={t.path.h2} sub={t.path.sub} accent="#1FB6B0" center/>
        <div className="va-path-card" style={{
          marginTop: D.gap * 1.4,
          background: "#fff", borderRadius: 24, padding: 40, border: "2px solid #0A0A0A",
          boxShadow: "10px 12px 0 #0A0A0A",
        }}>
          {phase === "success" ? (
            <SuccessCardA t={t} lang={lang}/>
          ) : (
            <div className="va-path-grid" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 40, alignItems: "start" }}>
              <div>
                {phase !== "contact" && (
                  <>
                    <div className="va-path-fields" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                      <PathSelect label={t.path.qWho} value={answers.who} placeholder={t.path.placeholder}
                        options={t.path.opts.who} onChange={(v) => setAnswers({ ...answers, who: v })}/>
                      <PathSelect label={t.path.qGoal} value={answers.goal} placeholder={t.path.placeholder}
                        options={t.path.opts.goal} onChange={(v) => setAnswers({ ...answers, goal: v })}/>
                      <PathSelect label={t.path.qPace} value={answers.pace} placeholder={t.path.placeholder}
                        options={t.path.opts.pace} onChange={(v) => setAnswers({ ...answers, pace: v })}/>
                      <PathSelect label={t.path.qLevel} value={answers.level} placeholder={t.path.placeholder}
                        options={t.path.opts.level} onChange={(v) => setAnswers({ ...answers, level: v })}/>
                    </div>
                    {allAnswered && (
                      <div style={{ marginTop: 28 }}>
                        <CtaA label={t.path.continueLabel} lang={lang} onClick={() => setPhase("contact")}/>
                      </div>
                    )}
                  </>
                )}
                {phase === "contact" && (
                  <ContactFormA t={t} form={form} setForm={setForm} formErr={formErr}
                    onBack={() => setPhase("quiz")} onSubmit={submit} sending={phase === "sending"} lang={lang}/>
                )}
                {phase === "error" && (
                  <div style={{ marginTop: 16, padding: 16, background: "#FFF0F0", borderRadius: 12, fontSize: 14, color: "#A00" }}>
                    {t.path.errorMsg}{" "}
                    <button onClick={() => mailtoSubmit({
                      from_name: form.name, email: form.email, phone: form.phone, notes: form.notes,
                      who: t.path.opts.who[answers.who], goal: t.path.opts.goal[answers.goal],
                      pace: t.path.opts.pace[answers.pace], level: t.path.opts.level[answers.level],
                      recommendation: recommendation ? `${recommendation.track} — ${recommendation.lines.join(" · ")}` : "",
                      subject: "New Speak Up Istanbul plan request", language: lang,
                    })} style={{ marginInlineStart: 8, color: "#FF4D4D", fontWeight: 700, background: "none", border: "none", cursor: "pointer", textDecoration: "underline" }}>
                      {t.path.mailtoFallback}
                    </button>
                  </div>
                )}
              </div>
              <RecommendationPanelA t={t} reco={recommendation}/>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function PathSelect({ label, value, placeholder, options, onChange }) {
  const [open, setOpen] = useStateA(false);
  const wrapRef = useRefA(null);

  useEffectA(() => {
    if (!open) return;
    const onDown = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    };
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const entries = Object.entries(options);
  const selectedLabel = value ? options[value] : placeholder;
  const hasValue = !!value;

  return (
    <label htmlFor="__va_path_no_assoc__" style={{ display: "block" }}>
      <span style={{ display: "block", fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: 1, marginBottom: 8, color: "#0A0A0A", fontFamily: "'JetBrains Mono', monospace" }}>
        {label}
      </span>
      <div ref={wrapRef} className="va-path-select" style={{ position: "relative" }}>
        <button
          type="button"
          aria-haspopup="listbox"
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}
          style={{
            width: "100%", padding: "14px 16px", fontSize: 15, fontWeight: 600,
            border: "2px solid #0A0A0A", borderRadius: 12,
            background: hasValue ? "#FFF7E5" : "#fff",
            color: hasValue ? "#0A0A0A" : "#888",
            fontFamily: "Inter, system-ui", cursor: "pointer", textAlign: "start",
            boxShadow: hasValue ? "0 4px 0 #0A0A0A" : "0 2px 0 rgba(0,0,0,0.15)",
            transition: "box-shadow 0.15s, transform 0.15s",
            display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
          }}
        >
          <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
            {selectedLabel}
          </span>
          <span aria-hidden="true" style={{
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            color: "#0A0A0A", transform: open ? "rotate(180deg)" : "rotate(0)",
            transition: "transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1)",
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="6 9 12 15 18 9"/>
            </svg>
          </span>
        </button>
        {open && (
          <ul role="listbox" style={{
            position: "absolute", insetInlineStart: 0, insetInlineEnd: 0, top: "calc(100% + 6px)",
            margin: 0, padding: 6, listStyle: "none",
            background: "#fff", border: "2px solid #0A0A0A", borderRadius: 12,
            boxShadow: "6px 8px 0 #0A0A0A",
            zIndex: 40, maxHeight: 280, overflowY: "auto",
            animation: "va-fade-in 0.18s ease",
          }}>
            {entries.map(([k, lbl]) => {
              const isSel = k === value;
              return (
                <li
                  key={k}
                  role="option"
                  aria-selected={isSel}
                  onClick={() => { onChange(k); setOpen(false); }}
                  onMouseEnter={(e) => { if (!isSel) e.currentTarget.style.background = "#FFF7E5"; }}
                  onMouseLeave={(e) => { if (!isSel) e.currentTarget.style.background = "transparent"; }}
                  style={{
                    padding: "10px 12px", borderRadius: 8, cursor: "pointer",
                    fontSize: 14, fontWeight: 600, fontFamily: "Inter, system-ui",
                    color: "#0A0A0A",
                    background: isSel ? "#0A0A0A" : "transparent",
                    color: isSel ? "#fff" : "#0A0A0A",
                    display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10,
                    transition: "background 0.12s",
                  }}
                >
                  <span>{lbl}</span>
                  {isSel && (
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12"/>
                    </svg>
                  )}
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </label>
  );
}

function RecommendationPanelA({ t, reco }) {
  return (
    <div style={{
      background: reco ? "#0A0A0A" : "#F5F5F5", color: reco ? "#fff" : "#888",
      borderRadius: 18, padding: 28, minHeight: 200, position: "relative",
      border: "2px solid #0A0A0A",
      boxShadow: reco ? "6px 8px 0 #FF4D4D" : "none",
      transition: "all 0.25s",
    }}>
      <div style={{ fontSize: 11, fontWeight: 800, textTransform: "uppercase", letterSpacing: 1.5, opacity: 0.7, marginBottom: 12, fontFamily: "'JetBrains Mono', monospace" }}>
        {t.path.recoLabel}
      </div>
      {reco ? (
        <>
          <div style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 26, lineHeight: 1.1, letterSpacing: -1, marginBottom: 16 }}>
            {reco.track}
          </div>
          {reco.lines.map((line, i) => (
            <div key={i} style={{ fontSize: 14, lineHeight: 1.5, marginBottom: 8, display: "flex", alignItems: "flex-start", gap: 10 }}>
              <span style={{ color: "#FF4D4D", fontWeight: 800 }}>✦</span>
              <span>{line}</span>
            </div>
          ))}
        </>
      ) : (
        <div style={{ fontSize: 14, fontStyle: "italic" }}>{t.path.recoFallback}</div>
      )}
    </div>
  );
}

function ContactFormA({ t, form, setForm, formErr, onBack, onSubmit, sending, lang }) {
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  return (
    <div style={{ animation: "va-fade-in 0.3s ease" }}>
      <h3 style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 26, margin: "0 0 20px", letterSpacing: -1 }}>
        {t.path.formH2}
      </h3>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <FormField label={t.path.name} value={form.name} onChange={upd("name")} err={formErr.name}/>
        <FormField label={t.path.email} value={form.email} onChange={upd("email")} err={formErr.email} type="email"/>
        <FormField label={t.path.phone} value={form.phone} onChange={upd("phone")} err={formErr.phone} style={{ gridColumn: "1 / -1" }}/>
        <FormField label={t.path.notes} value={form.notes} onChange={upd("notes")} multiline style={{ gridColumn: "1 / -1" }}/>
      </div>
      <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
        <CtaA label={sending ? t.path.sending : t.path.submit} lang={lang} onClick={sending ? null : onSubmit}/>
        <button onClick={onBack} style={{ background: "none", border: "none", cursor: "pointer", fontSize: 13, fontWeight: 600, color: "#888", textDecoration: "underline" }}>
          ← Edit answers
        </button>
      </div>
      <p style={{ fontSize: 12, opacity: 0.6, marginTop: 12, fontFamily: "'JetBrains Mono', monospace" }}>
        {t.path.trustLine}
      </p>
    </div>
  );
}

function FormField({ label, value, onChange, err, type = "text", multiline = false, style = {} }) {
  const sharedStyle = {
    width: "100%", padding: "12px 14px", fontSize: 15, fontFamily: "Inter, system-ui",
    border: `2px solid ${err ? "#FF4D4D" : "#0A0A0A"}`, borderRadius: 10, background: "#fff",
  };
  return (
    <label style={{ display: "block", ...style }}>
      <span style={{ display: "block", fontSize: 11, fontWeight: 800, textTransform: "uppercase", letterSpacing: 1, marginBottom: 6, color: "#0A0A0A", fontFamily: "'JetBrains Mono', monospace" }}>
        {label}
      </span>
      {multiline
        ? <textarea value={value} onChange={onChange} rows={3} style={{ ...sharedStyle, resize: "vertical" }}/>
        : <input type={type} value={value} onChange={onChange} style={sharedStyle}/>
      }
    </label>
  );
}

function SuccessCardA({ t, lang }) {
  return (
    <div style={{ textAlign: "center", padding: "40px 20px" }}>
      <div style={{
        width: 80, height: 80, margin: "0 auto 24px", borderRadius: "50%",
        background: "#1FB6B0", display: "flex", alignItems: "center", justifyContent: "center",
        boxShadow: "0 8px 0 #0A0A0A",
      }}>
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      </div>
      <h3 style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 32, margin: "0 0 12px", letterSpacing: -1 }}>
        {t.path.successH2}
      </h3>
      <p style={{ fontSize: 16, opacity: 0.75, maxWidth: 480, margin: "0 auto", lineHeight: 1.5 }}>
        {t.path.successSub}
      </p>
    </div>
  );
}

// =====================================================================
// ============================ STANDARDS ==============================
// =====================================================================
function StandardsA({ t, D }) {
  const groups = [
    { title: t.standards.group1Title, sub: t.standards.group1Sub, items: t.standards.group1Items, accent: "#1FB6B0" },
    { title: t.standards.group2Title, sub: t.standards.group2Sub, items: t.standards.group2Items, accent: "#F4B92E" },
    { title: t.standards.group3Title, sub: t.standards.group3Sub, items: t.standards.group3Items, accent: "#D946A6" },
  ];
  return (
    <section id="standards" className="va-section va-section-py" style={{ padding: `${D.sec}px 32px` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeaderA kicker={t.standards.kicker} title={t.standards.h2} sub={t.standards.sub} accent="#0A0A0A" center/>
        <div className="va-standards-grid" style={{ marginTop: D.gap * 1.4, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {groups.map((g, i) => <StandardsCardA key={i} g={g} tooltips={t.standards.tooltips}/>)}
        </div>
        <StandardsBeltA items={[...groups[0].items, ...groups[1].items, ...groups[2].items]}/>
      </div>
    </section>
  );
}

function StandardsCardA({ g, tooltips }) {
  const [hover, setHover] = useStateA(null);
  return (
    <div style={{
      background: `linear-gradient(180deg, ${g.accent} 0, ${g.accent} 6px, #fff 6px, #fff 100%)`,
      borderRadius: 18,
      border: "2px solid #0A0A0A", boxShadow: "6px 8px 0 #0A0A0A",
      display: "flex", flexDirection: "column", position: "relative",
      overflow: "visible",
    }}>
      <div style={{ padding: "30px 24px 24px" }}>
        <h3 style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 20, letterSpacing: -0.5, margin: "0 0 8px" }}>{g.title}</h3>
        <p style={{ fontSize: 13, opacity: 0.7, margin: "0 0 18px", lineHeight: 1.5 }}>{g.sub}</p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
          {g.items.map((it) => (
            <div key={it} onMouseEnter={() => setHover(it)} onMouseLeave={() => setHover(null)} style={{ position: "relative" }}>
              <div style={{
                filter: hover === it ? "none" : "grayscale(1) opacity(0.75)",
                transition: "transform 0.2s, filter 0.2s",
                transform: hover === it ? "translateY(-2px)" : "translateY(0)",
                cursor: "default",
              }}>
                <BrandLogo name={it}/>
              </div>
              {hover === it && tooltips[it] && (
                <div style={{
                  position: "absolute", bottom: "calc(100% + 12px)", left: "50%",
                  transform: "translateX(-50%)", zIndex: 20,
                  background: "#fff", color: "#0A0A0A", padding: "12px 14px", borderRadius: 12,
                  border: "2px solid #0A0A0A", boxShadow: "4px 5px 0 #0A0A0A",
                  fontSize: 12, lineHeight: 1.5, width: 260, fontWeight: 500,
                  pointerEvents: "none",
                }}>
                  {tooltips[it]}
                  <span style={{
                    position: "absolute", top: "100%", left: "50%", transform: "translateX(-50%)",
                    width: 0, height: 0, borderInline: "7px solid transparent", borderTop: "9px solid #0A0A0A",
                  }}/>
                  <span style={{
                    position: "absolute", top: "100%", left: "50%", transform: "translateX(-50%) translateY(-2.5px)",
                    width: 0, height: 0, borderInline: "6px solid transparent", borderTop: "8px solid #fff",
                  }}/>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function StandardsBeltA({ items }) {
  const doubled = items.concat(items);
  return (
    <div className="va-marquee-wrap" style={{ marginTop: 40, overflow: "hidden", background: "#fff", border: "2px solid #0A0A0A", borderRadius: 14, padding: "18px 0" }}>
      <div className="va-marquee-inner" style={{
        display: "inline-flex", gap: 32, whiteSpace: "nowrap", alignItems: "center",
        animation: "va-marquee 55s linear infinite",
      }}>
        {doubled.map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 32 }}>
            <span style={{ display: "inline-block" }}>
              <BrandLogo name={it} height={34}/>
            </span>
            <span style={{ color: "#FF4D4D" }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// =====================================================================
// ============================== FOUNDER ==============================
// =====================================================================
function FounderA({ t, D }) {
  return (
    <section id="founder" className="va-section va-section-py" style={{ padding: `${D.sec}px 32px`, background: "#FFE7CF" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div className="va-founder-grid" style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 56, alignItems: "center" }}>
          <FounderPortraitA t={t}/>
          <div>
            <SectionHeaderA kicker={t.founder.kicker} title={t.founder.h2} accent="#FF4D4D"/>
            <p style={{ fontSize: 17, lineHeight: 1.6, marginTop: 24, marginBottom: 24, opacity: 0.85 }}>
              {t.founder.intro}
            </p>
            <div className="va-founder-badges" style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 28 }}>
              {t.founder.badges.map((b, i) => (
                <span key={i} style={{
                  display: "inline-block", padding: "8px 14px", borderRadius: 999,
                  background: "#0A0A0A", color: "#fff", fontSize: 12, fontWeight: 700, letterSpacing: 0.3,
                }}>{b}</span>
              ))}
            </div>
            <FounderQuoteA quote={t.founder.quote} name={t.founder.name}/>
          </div>
        </div>
        <div className="va-grid-3" style={{ marginTop: D.gap * 1.5, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {t.founder.cards.map((c, i) => {
            const colors = ["#FF4D4D", "#1FB6B0", "#F4B92E"];
            const icons = ["graduation-cap", "cpu", "globe"];
            return (
              <div key={i} className="va-founder-card" style={{
                background: "#fff", borderRadius: 18, padding: 24, border: "2px solid #0A0A0A",
                boxShadow: "6px 8px 0 #0A0A0A",
                ["--va-founder-card-accent"]: colors[i],
              }}>
                <div className="va-founder-card-icon" style={{
                  width: 48, height: 48, borderRadius: 12, background: colors[i], marginBottom: 16,
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  <LucideIcon name={icons[i]} size={26} color="#fff" strokeWidth={2.2}/>
                </div>
                <h4 style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 18, margin: "0 0 8px", letterSpacing: -0.3 }}>{c.title}</h4>
                <p style={{ fontSize: 14, lineHeight: 1.55, margin: 0, opacity: 0.75 }}>{c.body}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FounderPortraitA({ t }) {
  const [imgError, setImgError] = useStateA(false);
  return (
    <div className="va-founder-portrait" style={{
      background: "#FF4D4D", borderRadius: 28, padding: 28, border: "2px solid #0A0A0A",
      boxShadow: "12px 14px 0 #0A0A0A", maxWidth: 560, width: "100%", margin: "0 auto",
    }}>
      <div style={{ borderRadius: 18, overflow: "hidden", background: "#0A0A0A", aspectRatio: "3/4", marginBottom: 22, position: "relative" }}>
        {!imgError ? (
          <img src="assets/founder.png" alt={t.founder.name}
            onError={() => setImgError(true)}
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }}/>
        ) : (
          <div style={{
            position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "'Archivo Black', system-ui", fontSize: 140, color: "#fff", letterSpacing: -6,
          }}>RA</div>
        )}
      </div>
      <div style={{ textAlign: "center", color: "#fff" }}>
        <div style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 28, letterSpacing: -0.6 }}>{t.founder.name}</div>
        <div style={{ fontSize: 14, opacity: 0.9, fontWeight: 600, marginTop: 6, letterSpacing: 0.3 }}>{t.founder.title}</div>
      </div>
    </div>
  );
}

function FounderQuoteA({ quote, name }) {
  return (
    <div style={{
      background: "#fff", borderRadius: 18, padding: 24, border: "2px solid #0A0A0A",
      boxShadow: "6px 8px 0 #FF4D4D", position: "relative",
    }}>
      <div style={{ position: "absolute", top: -16, insetInlineStart: 20, fontFamily: "'Fraunces', serif", fontSize: 56, lineHeight: 1, color: "#FF4D4D", fontWeight: 900 }}>“</div>
      <p style={{ fontFamily: "'Fraunces', serif", fontStyle: "italic", fontSize: 19, lineHeight: 1.5, margin: 0, fontWeight: 500 }}>
        {quote}
      </p>
      <div style={{ marginTop: 14, fontSize: 13, fontWeight: 700, opacity: 0.7, fontFamily: "'JetBrains Mono', monospace" }}>— {name}</div>
    </div>
  );
}

// =====================================================================
// ============================= PROGRAMS ==============================
// =====================================================================
function ProgramsA({ t, D, lang }) {
  const [active, setActive] = useStateA(null); // null | "kids" | "teens" | "adults-general" | "adults-academic"
  const colors = {
    kids: "#1FB6B0",
    teens: "#F4B92E",
    adults: "#D946A6",
    "adults-general": "#D946A6",
    "adults-academic": "#7C3AED",
  };
  const totalCards = t.programs.cards.length;
  return (
    <section id="programs" className="va-section va-section-py" style={{ padding: `${D.sec}px 32px` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeaderA kicker={t.programs.kicker} title={t.programs.h2} sub={t.programs.sub} accent="#FF4D4D" center/>
        <div className="va-programs-row" style={{ marginTop: D.gap * 1.5, display: "flex", gap: 14, alignItems: "stretch", minHeight: 480 }}>
          {t.programs.cards.map((card) => (
            <ProgramCardA key={card.key} card={card} active={active} setActive={setActive}
              color={colors[card.key]} lang={lang} totalCards={totalCards}
              levels={card.key === "kids" ? window.LEVELS_KIDS : card.key === "teens" ? window.LEVELS_TEENS : window.LEVELS_ADULTS}/>
          ))}
        </div>
      </div>
    </section>
  );
}

// Per-language key phrase used to detect the "language acquisition" highlight sentence.
const ACQUISITION_PHRASES = [
  "language acquisition",      // EN
  "dil edinimine",              // TR
  "اكتساب اللغة",                // AR
];
function isAcquisitionBenefit(text) {
  if (!text) return false;
  return ACQUISITION_PHRASES.some((p) => text.indexOf(p) !== -1);
}

function ProgramCardA({ card, active, setActive, color, lang, levels, totalCards = 3 }) {
  const isActive = active === card.key;
  const isOther = active && !isActive;
  const [hover, setHover] = useStateA(false);
  const [typedLen, setTypedLen] = useStateA(0);
  const [showBody, setShowBody] = useStateA(false);

  // Letter-by-letter typewriter
  useEffectA(() => {
    if (!isActive) { setTypedLen(0); setShowBody(false); return; }
    setTypedLen(0); setShowBody(false);
    const text = card.headline;
    let i = 0;
    const id = setInterval(() => {
      i += 1;
      setTypedLen(i);
      if (i >= text.length) {
        clearInterval(id);
        setTimeout(() => setShowBody(true), 250);
      }
    }, 38);
    return () => clearInterval(id);
  }, [isActive, card.headline]);

  // Width adapts to total number of cards so the row still fits with 4 cards.
  let width;
  if (totalCards >= 4) {
    // 4 cards: active 50%, each other 16.6%, default 25%.
    width = isActive ? "50%" : isOther ? `${50 / (totalCards - 1)}%` : `${100 / totalCards}%`;
  } else {
    width = isActive ? "60%" : isOther ? "20%" : "33.333%";
  }
  const typedText = card.headline.slice(0, typedLen);
  // For goToPath/wizard navigation, collapse adults-general/-academic back to "adults".
  const whoKey = card.key.indexOf("adults") === 0 ? "adults" : card.key;

  return (
    <div className="va-program-card"
      onClick={(e) => { e.stopPropagation(); setActive(card.key); }}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        width, opacity: isOther ? 0.55 : 1, pointerEvents: "auto",
        background: "#fff", borderRadius: 22, border: "2px solid #0A0A0A",
        boxShadow: hover && !isActive ? "10px 12px 0 #0A0A0A" : "6px 8px 0 #0A0A0A",
        transform: hover && !isActive ? "translateY(-3px)" : "translateY(0)",
        transition: "all 0.45s cubic-bezier(0.2, 0.8, 0.2, 1)",
        cursor: "pointer", overflow: "hidden", display: "flex", flexDirection: "column",
      }}>
      <div style={{ height: 8, background: color }}/>
      <div style={{ padding: 28, flex: 1, display: "flex", flexDirection: "column", position: "relative", minHeight: 420 }}>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.5, textTransform: "uppercase", color, marginBottom: 10, fontFamily: "'JetBrains Mono', monospace" }}>{card.age}</div>

        {/* Title — default vs active */}
        {!isActive ? (
          <h3 style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 22, lineHeight: 1.1, letterSpacing: -0.5, margin: "0 0 14px" }}>
            {card.tag}
          </h3>
        ) : (
          <h3 style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 28, lineHeight: 1.1, letterSpacing: -0.5, margin: "0 0 14px", minHeight: 64 }}>
            <span style={{ display: "inline" }}>{typedText}</span>
            <span style={{
              display: "inline-block", marginInlineStart: 4, width: 3, height: 24, background: color,
              verticalAlign: "middle", animation: "va-blink 0.9s steps(1) infinite",
            }}/>
          </h3>
        )}

        {/* Default state: illustration + sub headline at bottom */}
        {!isActive && (
          <>
            <div style={{
              flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
              transition: "opacity 0.3s", opacity: 1,
            }}>
              <ProgramIllustration kind={card.key} size={Math.min(180, isOther ? 80 : 160)}/>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.55, opacity: 0.7, margin: "12px 0 0", fontWeight: 500 }}>{card.headline}</p>
          </>
        )}

        {/* Active state: body + benefits + levels + CTA */}
        {isActive && showBody && (
          <div style={{ animation: "va-fade-in 0.45s ease" }}>
            <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.8, margin: "0 0 14px" }}>{card.desc}</p>
            <p style={{ fontSize: 13, fontWeight: 700, color, margin: "0 0 18px" }}>{card.bestFor}</p>
            <ul style={{ margin: "0 0 22px", paddingInlineStart: 18, fontSize: 14, lineHeight: 1.7 }}>
              {card.benefits.map((b, i) => {
                const isHL = isAcquisitionBenefit(b);
                return (
                  <li key={i} style={{ marginBottom: 4 }}>
                    {isHL ? (
                      <span className="va-acq-highlight" style={{ "--va-acq-color": color }}>{b}</span>
                    ) : b}
                  </li>
                );
              })}
            </ul>
            <ProgramLevelsA title={card.levelsTitle} levels={levels} kind={card.key} color={color}/>
            <div style={{ marginTop: 22, display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
              <button onClick={(e) => { e.stopPropagation(); goToPath({ who: whoKey }); }} style={{
                display: "inline-flex", alignItems: "center", gap: 10, border: "none", cursor: "pointer",
                background: "#0A0A0A", color: "#fff", padding: "14px 22px", borderRadius: 999,
                fontSize: 14, fontWeight: 700, fontFamily: "Inter, system-ui",
                boxShadow: "0 6px 0 " + color,
              }}>
                {card.cta} <span>{lang === "ar" ? "←" : "→"}</span>
              </button>
              <a href={`assets/${whoKey}_report.pdf`} target="_blank" rel="noopener noreferrer"
                onClick={(e) => e.stopPropagation()} style={{
                display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer",
                background: "#fff", color: "#0A0A0A", padding: "12px 18px", borderRadius: 999,
                fontSize: 13, fontWeight: 700, fontFamily: "Inter, system-ui", textDecoration: "none",
                border: "2px solid #0A0A0A",
              }}>
                {lang === "tr" ? "Raporu görüntüle" : lang === "ar" ? "عرض التقرير" : "View report"} <span>↗</span>
              </a>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function ProgramLevelsA({ title, levels, kind, color }) {
  const [open, setOpen] = useStateA(false);
  return (
    <div style={{ background: "#FAFAFA", borderRadius: 12, padding: 14, border: "1px solid #EEE" }}>
      <button onClick={(e) => { e.stopPropagation(); setOpen(!open); }} style={{
        background: "none", border: "none", cursor: "pointer", width: "100%", textAlign: "start",
        fontSize: 13, fontWeight: 800, letterSpacing: 0.3, color: "#0A0A0A", fontFamily: "Inter, system-ui",
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <span>{title}</span>
        <span style={{ color, fontSize: 16 }}>{open ? "−" : "+"}</span>
      </button>
      {open && (
        <div style={{ marginTop: 12, animation: "va-fade-in 0.25s" }}>
          {kind === "kids" ? (
            <table style={{ width: "100%", fontSize: 12, borderCollapse: "collapse" }}>
              <thead>
                <tr style={{ textAlign: "start", color: "#888" }}>
                  <th style={{ padding: "6px 4px", fontWeight: 700, textAlign: "start" }}>Level</th>
                  <th style={{ padding: "6px 4px", fontWeight: 700, textAlign: "start" }}>CEFR</th>
                  <th style={{ padding: "6px 4px", fontWeight: 700, textAlign: "start" }}>Cambridge YLE</th>
                </tr>
              </thead>
              <tbody>
                {levels.map((l) => (
                  <tr key={l.name} style={{ borderTop: "1px solid #EEE" }}>
                    <td style={{ padding: "8px 4px", fontWeight: 800, color }}>{l.name}</td>
                    <td style={{ padding: "8px 4px", fontWeight: 600 }}>{l.cefr}</td>
                    <td style={{ padding: "8px 4px" }}>{l.yle}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {levels.map((l) => (
                <span key={l} style={{
                  display: "inline-block", padding: "6px 10px", borderRadius: 999,
                  background: "#fff", border: "1px solid #DDD", fontSize: 12, fontWeight: 700,
                }}>{l}</span>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// =====================================================================
// ====================== SEASONS (wheel + chart) ======================
// =====================================================================
const SEASON_COLORS = { summer: "#FF4D4D", winter: "#3B82F6", spring: "#22C55E" };

function defaultSeason() {
  const m = new Date().getMonth(); // 0=Jan
  // Summer course: Jun-Sep (5-8). Winter: Nov-Feb (10,11,0,1). Spring: Apr-May (3,4).
  if (m >= 5 && m <= 8) return "summer";
  if (m === 10 || m === 11 || m === 0 || m === 1) return "winter";
  return "spring";
}

function SeasonsA({ t, D, lang }) {
  const [selected, setSelected] = useStateA(defaultSeason());
  return (
    <section id="seasons" className="va-section va-section-py" style={{ padding: `${D.sec}px 32px`, background: "#FFF6E8", position: "relative", zIndex: 5 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeaderA kicker={t.seasons.kicker} title={t.seasons.h2} sub={t.seasons.sub} accent="#0A0A0A" center/>
        <div className="va-seasons-grid" style={{ marginTop: D.gap * 1.5, display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 40, alignItems: "center" }}>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <SeasonWheelA selected={selected} setSelected={setSelected} centerLabel={t.seasons.centerLabel}/>
          </div>
          <SeasonDetailsA t={t} selected={selected} lang={lang}/>
        </div>
        <GrowthChartA t={t} lang={lang}/>
      </div>
    </section>
  );
}

function SeasonWheelA({ selected, setSelected, centerLabel }) {
  const order = ["summer", "winter", "spring"];
  const angleFor = (idx) => idx * 120; // 0, 120, 240
  const selectedIdx = order.indexOf(selected);
  // We want selected to sit at top (angle 0 visually). Wheel rotation = -angleFor(selectedIdx).
  const rotation = -angleFor(selectedIdx);

  const segments = order.map((name, i) => {
    const a0 = angleFor(i) - 90; // start at top
    const a1 = a0 + 120;
    const r = 140;
    const cx = 150, cy = 150;
    const x0 = cx + r * Math.cos(a0 * Math.PI / 180);
    const y0 = cy + r * Math.sin(a0 * Math.PI / 180);
    const x1 = cx + r * Math.cos(a1 * Math.PI / 180);
    const y1 = cy + r * Math.sin(a1 * Math.PI / 180);
    const path = `M${cx},${cy} L${x0},${y0} A${r},${r} 0 0 1 ${x1},${y1} Z`;
    // Label position
    const labelA = (a0 + 60) * Math.PI / 180;
    const lx = cx + (r * 0.62) * Math.cos(labelA);
    const ly = cy + (r * 0.62) * Math.sin(labelA);
    return { name, path, lx, ly, color: SEASON_COLORS[name] };
  });

  return (
    <div className="va-wheel-wrap" style={{ position: "relative", width: 360, height: 360 }}>
      <svg width="100%" height="100%" viewBox="0 0 300 300" style={{
        transform: `rotate(${rotation}deg)`, transition: "transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)",
        filter: "drop-shadow(0 12px 24px rgba(0,0,0,0.18))",
      }}>
        {segments.map((s) => (
          <g key={s.name} onClick={() => setSelected(s.name)} style={{ cursor: "pointer" }}>
            <path d={s.path} fill={s.color} stroke="#0A0A0A" strokeWidth="3"
              style={{ opacity: selected === s.name ? 1 : 0.85, transition: "opacity 0.3s" }}/>
            <text x={s.lx} y={s.ly} fill="#fff"
              style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 14, letterSpacing: 0.3, textTransform: "uppercase" }}
              textAnchor="middle" dominantBaseline="middle"
              transform={`rotate(${-rotation} ${s.lx} ${s.ly})`}>
              {s.name}
            </text>
          </g>
        ))}
        <circle cx="150" cy="150" r="55" fill="#0A0A0A" stroke="#fff" strokeWidth="4"/>
      </svg>
      <div style={{
        position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
        pointerEvents: "none",
      }}>
        <div className="va-wheel-label" style={{
          width: "36%", height: "36%", display: "flex", alignItems: "center", justifyContent: "center",
          textAlign: "center", color: "#fff", fontFamily: "'Archivo Black', system-ui",
          fontSize: 12, lineHeight: 1.2, padding: 8, letterSpacing: 0.2,
        }}>
          {centerLabel}
        </div>
      </div>
    </div>
  );
}

function SeasonDetailsA({ t, selected, lang }) {
  const s = t.seasons.seasons[selected];
  const color = SEASON_COLORS[selected];
  return (
    <div className="va-season-details" style={{
      background: "#fff", borderRadius: 24, padding: 36, border: "2px solid #0A0A0A",
      boxShadow: `8px 10px 0 ${color}`, animation: "va-fade-in 0.4s",
    }} key={selected}>
      <div style={{ display: "inline-block", padding: "6px 14px", borderRadius: 999, background: color, color: "#fff", fontSize: 11, fontWeight: 800, letterSpacing: 1.5, textTransform: "uppercase", marginBottom: 14, fontFamily: "'JetBrains Mono', monospace" }}>
        {s.tag}
      </div>
      <h3 style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 32, letterSpacing: -1, margin: "0 0 6px", lineHeight: 1.05 }}>{s.name}</h3>
      <p style={{ fontSize: 17, fontWeight: 600, margin: "0 0 18px", color }}>{s.headline}</p>
      <p style={{ fontSize: 15, opacity: 0.75, lineHeight: 1.55, margin: "0 0 22px" }}>{s.sub}</p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 24, fontSize: 13 }}>
        <DetailRow label={s.regOpens}/>
        <DetailRow label={s.courseRuns}/>
        <DetailRow label={s.levels}/>
        <DetailRow label={s.lessons}/>
        <DetailRow label={s.schedule} span/>
        <DetailRow label={s.openFor} span/>
      </div>
      <button onClick={() => goToPath({ pace: "seasonal" })} className="va-season-cta" style={{
        display: "inline-flex", alignItems: "center", gap: 10, border: "none", cursor: "pointer",
        background: color, color: "#fff", padding: "14px 22px", borderRadius: 999,
        fontSize: 14, fontWeight: 700, fontFamily: "Inter, system-ui",
        boxShadow: "0 6px 0 #0A0A0A",
      }}>
        {s.cta} <span className="va-season-cta-arrow">{lang === "ar" ? "←" : "→"}</span>
      </button>
    </div>
  );
}

function DetailRow({ label, span }) {
  return (
    <div style={{ display: "flex", gap: 8, alignItems: "flex-start", gridColumn: span ? "1 / -1" : "auto" }}>
      <span style={{ color: "#FF4D4D", fontWeight: 800, lineHeight: 1.4 }}>✦</span>
      <span style={{ fontWeight: 600, lineHeight: 1.4 }}>{label}</span>
    </div>
  );
}

// =====================================================================
// ========================= GROWTH CHART ==============================
// =====================================================================
const LEVEL_ORDER = ["A1", "A1+", "A2", "A2+", "B1", "B1+", "B2", "B2+", "C1", "C1+"];
const BREAK_MONTHS = [4, 9, 2]; // May, Oct, Mar (0-indexed)
// Season completion months: Sep = Summer Boost, Feb = Winter Power-Up, Apr = Spring Speaking Bloom.
// (April is the only Spring teaching month, so it doubles as the spring checkpoint.)
const SEASON_END_MONTHS = { 8: "summer", 1: "winter", 3: "spring" };

function monthSeasonGrowth(monthIdx) {
  // returns: { growth, color, isBreak, isEnd, season }
  const isBreak = BREAK_MONTHS.includes(monthIdx);
  if (isBreak) return { growth: 0, color: "#CCC", isBreak: true, isEnd: false, season: null };
  let season = null;
  if (monthIdx >= 5 && monthIdx <= 8) season = "summer";          // Jun–Sep
  else if (monthIdx === 10 || monthIdx === 11 || monthIdx === 0 || monthIdx === 1) season = "winter"; // Nov–Feb
  else if (monthIdx === 3) season = "spring";                      // April only
  else season = "winter";
  const isEnd = SEASON_END_MONTHS[monthIdx] === season;
  return {
    growth: isEnd ? 0.30 : 0.20,
    color: SEASON_COLORS[season],
    isBreak: false, isEnd, season,
  };
}

// --- helpers ---
// Catmull-Rom-style smoothed cubic bezier path through a list of {x,y} points.
function smoothPath(points) {
  if (!points || points.length < 2) return "";
  if (points.length === 2) return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
  const t = 0.5;
  let d = `M ${points[0].x} ${points[0].y}`;
  for (let i = 0; i < points.length - 1; i++) {
    const p0 = points[i - 1] || points[i];
    const p1 = points[i];
    const p2 = points[i + 1];
    const p3 = points[i + 2] || p2;
    const c1x = p1.x + (p2.x - p0.x) * t / 3;
    const c1y = p1.y + (p2.y - p0.y) * t / 3;
    const c2x = p2.x - (p3.x - p1.x) * t / 3;
    const c2y = p2.y - (p3.y - p1.y) * t / 3;
    d += ` C ${c1x} ${c1y}, ${c2x} ${c2y}, ${p2.x} ${p2.y}`;
  }
  return d;
}
function approxPathLength(points) {
  let L = 0;
  for (let i = 1; i < points.length; i++) {
    L += Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
  }
  return Math.max(60, L * 1.18);
}

function GrowthChartA({ t, lang }) {
  const [startLevel, setStartLevel] = useStateA("A1");
  const wrapRef = useRefA(null);
  const [animated, setAnimated] = useStateA(false);
  // Runs counter — bumped every time the user changes start level. Used as a
  // key suffix on animated SVG elements so React remounts them and the
  // entrance animation re-runs.
  const [runId, setRunId] = useStateA(0);
  // Hovered point index (the column the mouse is over), null when none.
  const [hoverIdx, setHoverIdx] = useStateA(null);
  const isRTL = lang === "ar";

  useEffectA(() => {
    if (!wrapRef.current) return;
    // The page scrolls inside .va-root, not the viewport. We use BOTH:
    //   1. An IntersectionObserver (works in normal browsers)
    //   2. A scroll listener on .va-root as a fallback (works everywhere,
    //      including environments where IO is throttled or unreliable).
    const wrapEl = wrapRef.current;
    const rootEl = wrapEl.closest(".va-root") || null;
    let done = false;

    const tryTrigger = () => {
      if (done) return;
      const r = wrapEl.getBoundingClientRect();
      const vH = (rootEl ? rootEl.clientHeight : window.innerHeight);
      // Fire when ~15% of the wrap (or 80 px, whichever is smaller) is in view.
      const enterPoint = vH - Math.min(80, r.height * 0.15);
      if (r.top < enterPoint && r.bottom > 0) {
        done = true;
        setAnimated(true);
        cleanup();
      }
    };

    const io = (typeof IntersectionObserver !== "undefined")
      ? new IntersectionObserver((entries) => {
          entries.forEach(e => { if (e.isIntersecting) tryTrigger(); });
        }, { root: rootEl, threshold: [0, 0.15, 0.3] })
      : null;
    if (io) io.observe(wrapEl);

    const scrollTarget = rootEl || window;
    scrollTarget.addEventListener("scroll", tryTrigger, { passive: true });
    window.addEventListener("resize", tryTrigger);

    // Initial check (handles deep-links and any case where the chart is
    // already in view on mount).
    tryTrigger();

    function cleanup() {
      if (io) io.disconnect();
      scrollTarget.removeEventListener("scroll", tryTrigger);
      window.removeEventListener("resize", tryTrigger);
    }
    return cleanup;
  }, []);

  // Re-run the chart's entrance animation when the user changes start level.
  // We skip the very first render (initial mount) so we don't double-animate.
  // The pattern: bump runId (forces a key change → React remounts the animated
  // SVG nodes) AND flip animated → false for one frame so the new nodes mount
  // in their "before" state, then back to true on the next tick so the CSS
  // transition kicks in.
  const firstRunRef = useRefA(true);
  useEffectA(() => {
    if (firstRunRef.current) { firstRunRef.current = false; return; }
    setRunId(n => n + 1);
    setAnimated(false);
    // We use BOTH rAF (for normal foreground tabs — gives the browser time to
    // paint the "before" frame) AND a setTimeout fallback (for backgrounded /
    // hidden tabs where rAF is throttled or paused).
    let rafId = 0, toId = 0, fired = false;
    const fire = () => { if (fired) return; fired = true; setAnimated(true); };
    rafId = requestAnimationFrame(() => {
      rafId = requestAnimationFrame(fire);
    });
    toId = setTimeout(fire, 50);
    return () => { cancelAnimationFrame(rafId); clearTimeout(toId); };
  }, [startLevel]);

  const months = useMemoA(() => {
    const out = [];
    const now = new Date();
    for (let i = 0; i < 12; i++) {
      const d = new Date(now.getFullYear(), now.getMonth() + i, 1);
      out.push({
        idx: d.getMonth(),
        year: d.getFullYear(),
        label: d.toLocaleDateString(lang === "ar" ? "ar-EG" : lang === "tr" ? "tr-TR" : "en-US", { month: "short" }),
      });
    }
    return out;
  }, [lang]);

  const { points, finalLevelLabel, midLevelLabel, levelForCur } = useMemoA(() => {
    let cur = 0;
    const pts = [];
    const startIdx = LEVEL_ORDER.indexOf(startLevel);
    months.forEach((m) => {
      const info = monthSeasonGrowth(m.idx);
      cur += info.growth;
      pts.push({ ...m, cur, info });
    });
    const totalCur = pts[pts.length - 1].cur;
    const finalIdx = Math.min(LEVEL_ORDER.length - 1, startIdx + Math.round(totalCur));
    // Intermediate marker — half-way through the projected journey.
    const midIdx = Math.min(LEVEL_ORDER.length - 1, startIdx + Math.round(totalCur / 2));
    // For tooltips: convert a cur value to a level label.
    const levelForCur = (c) =>
      LEVEL_ORDER[Math.min(LEVEL_ORDER.length - 1, startIdx + Math.round(c))];
    return {
      points: pts,
      finalLevelLabel: LEVEL_ORDER[finalIdx],
      midLevelLabel: midIdx !== startIdx && midIdx !== finalIdx ? LEVEL_ORDER[midIdx] : null,
      levelForCur,
    };
  }, [months, startLevel]);

  // SVG coordinates
  const W = 960, H = 360, pad = { l: 64, r: 84, t: 70, b: 64 };
  const maxGrowth = Math.max(2.0, points[points.length - 1].cur);
  const x = (i) => pad.l + i * ((W - pad.l - pad.r) / 11);
  const y = (g) => pad.t + (1 - g / maxGrowth) * (H - pad.t - pad.b);
  const baselineY = y(0);

  // Build seasonal segments. Each non-break run becomes one segment.
  // To make every line (including the single-month spring) visually depart from
  // the prior level, we prepend a "phantom" anchor sitting on the previous
  // value at the X of the most recent break/month. This is the trick that
  // makes the Spring line visible.
  const segments = [];
  let activeSeg = null;
  let prevValue = 0;
  let prevX = x(0);
  points.forEach((p, i) => {
    if (p.info.isBreak) {
      if (activeSeg) { segments.push(activeSeg); activeSeg = null; }
      prevValue = p.cur;
      prevX = x(i);
      return;
    }
    if (!activeSeg) {
      activeSeg = {
        color: p.info.color,
        season: p.info.season,
        pts: [{ x: prevX, y: y(prevValue), phantom: true }],
      };
    }
    activeSeg.pts.push({ x: x(i), y: y(p.cur), idx: i, info: p.info });
    prevValue = p.cur;
    prevX = x(i);
  });
  if (activeSeg) segments.push(activeSeg);

  // Break months for visual bands
  const breaks = points.map((p, i) => ({ p, i })).filter(o => o.p.info.isBreak);

  // Friendly level labels for the dropdown — keyed object matches PathSelect API
  const levelOptionsObj = {
    A1: `A1 · ${t.seasons.chartLevels.A1}`,
    A2: `A2 · ${t.seasons.chartLevels.A2}`,
    B1: `B1 · ${t.seasons.chartLevels.B1}`,
    B2: `B2 · ${t.seasons.chartLevels.B2}`,
  };

  // Animation timing constants (seconds)
  const tTitle = 0.05;
  const tSub = 0.20;
  const tSelector = 0.35;
  const tLabels = 0.55;
  const tSegmentBase = 0.85;
  const tSegmentEach = 0.55;        // gap between seasonal lines drawing
  const tSegmentDraw = 1.2;          // single segment draw duration
  const tCheckpointDelay = 0.4;     // after its segment finishes
  const totalSegmentsTime = tSegmentBase + (segments.length - 1) * tSegmentEach + tSegmentDraw;
  const tBadge = totalSegmentsTime + 0.15;
  const tCta = tBadge + 0.25;

  return (
    <div ref={wrapRef} className={`va-growth-wrap${animated ? " is-on" : ""}`} style={{ marginTop: 56 }}>
      <style>{`
        @keyframes va-growth-fade-in {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: var(--va-final-op, 1); transform: translateY(0); }
        }
        .va-growth-wrap .va-card { background: linear-gradient(180deg, #ffffff 0%, #fdfaf3 100%);
          border-radius: 26px; padding: 28px; border: 2px solid #0A0A0A;
          box-shadow: 10px 12px 0 #0A0A0A; position: relative; overflow: hidden; }
        .va-growth-wrap .va-card::before { content: ""; position: absolute; inset: 0;
          background: radial-gradient(circle at 12% 0%, rgba(255,77,77,.08), transparent 45%),
                      radial-gradient(circle at 88% 100%, rgba(59,130,246,.07), transparent 45%);
          pointer-events: none; }
        .va-growth-wrap .va-pill-select { display: inline-flex; align-items: center; gap: 10px;
          background: #fff; border: 2px solid #0A0A0A; border-radius: 999px;
          padding: 10px 18px; box-shadow: 4px 4px 0 #0A0A0A;
          transition: transform .15s ease, box-shadow .15s ease; }
        .va-growth-wrap .va-pill-select:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #0A0A0A; }
        .va-growth-wrap .va-pill-select select { border: none; background: none; font-size: 14px;
          font-weight: 800; font-family: Inter, system-ui; cursor: pointer; padding: 2px 6px; outline: none; }
        .va-growth-wrap .va-legend { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
          margin-top: 22px; padding-top: 18px; border-top: 1px dashed rgba(10,10,10,.12); }
        .va-growth-wrap .va-legend-item { display: inline-flex; align-items: center; gap: 8px;
          font-size: 12px; font-weight: 700; color: #444; font-family: Inter, system-ui; }
        .va-growth-wrap .va-legend-dot { width: 22px; height: 8px; border-radius: 999px; display: inline-block; }
        .va-growth-wrap .va-legend-dot.break { background: repeating-linear-gradient(45deg, #D8D8D8 0 4px, #EFEFEF 4px 8px); height: 8px; }
        .va-growth-wrap .va-plan-cta { display: inline-flex; align-items: center; gap: 10px; border: none;
          cursor: pointer; background: #FF4D4D; color: #fff; padding: 16px 26px; border-radius: 999px;
          font-size: 15px; font-weight: 800; font-family: Inter, system-ui;
          box-shadow: 0 6px 0 #0A0A0A; transition: transform .15s ease, box-shadow .15s ease; }
        .va-growth-wrap .va-plan-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #0A0A0A; }
        .va-growth-wrap .va-plan-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 #0A0A0A; }
        @media (max-width: 720px) {
          .va-growth-wrap .va-card { padding: 18px; border-radius: 20px; box-shadow: 6px 8px 0 #0A0A0A; }
          .va-growth-wrap .va-legend { gap: 12px; }
        }
      `}</style>

      {(() => {
        // When `animated` is true we apply a keyframe animation with a per-element
        // delay. When false the element stays at its starting state (opacity 0).
        // Keyframe animations don't reset on React re-render, unlike transitions.
        const fade = (delay, finalOpacity = 1) => animated ? {
          animation: `va-growth-fade-in .6s ease ${delay}s both`,
          "--va-final-op": finalOpacity,
        } : {
          opacity: 0,
          transform: "translateY(8px)",
        };
        return (
          <div style={{ textAlign: "center", marginBottom: 26 }}>
            <h3 style={{ fontFamily: "'Archivo Black', system-ui",
              fontSize: "clamp(26px, 3.4vw, 34px)", letterSpacing: -1, margin: "0 0 10px",
              ...fade(tTitle) }}>
              {t.seasons.chartTitle}
            </h3>
            <p style={{ fontSize: 15, maxWidth: 660,
              margin: "0 auto 20px", lineHeight: 1.55, ...fade(tSub, 0.72) }}>
              {t.seasons.chartSub}
            </p>
            <div style={{ maxWidth: 360, margin: "0 auto", textAlign: "start", position: "relative", zIndex: 50, ...fade(tSelector) }}>
              <PathSelect
                label={t.seasons.chartIam}
                value={startLevel}
                placeholder=""
                options={levelOptionsObj}
                onChange={setStartLevel}
              />
            </div>
          </div>
        );
      })()}

      <div className="va-card">
        <svg className="va-chart-svg" viewBox={`0 0 ${W} ${H}`} width="100%"
          preserveAspectRatio="xMidYMid meet"
          onMouseLeave={() => setHoverIdx(null)}
          style={{ display: "block", overflow: "visible" }}>
          <defs>
            {/* Per-season gradient under the line */}
            {Object.entries(SEASON_COLORS).map(([name, c]) => (
              <linearGradient key={name} id={`grad-${name}`} x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={c} stopOpacity="0.32"/>
                <stop offset="60%" stopColor={c} stopOpacity="0.10"/>
                <stop offset="100%" stopColor={c} stopOpacity="0"/>
              </linearGradient>
            ))}
            {/* Soft glow filter */}
            <filter id="va-line-glow" x="-20%" y="-50%" width="140%" height="200%">
              <feGaussianBlur stdDeviation="3" result="b"/>
              <feMerge>
                <feMergeNode in="b"/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
            {/* Break band hatch pattern */}
            <pattern id="va-break-hatch" patternUnits="userSpaceOnUse" width="8" height="8" patternTransform="rotate(45)">
              <rect width="8" height="8" fill="rgba(10,10,10,0.025)"/>
              <line x1="0" y1="0" x2="0" y2="8" stroke="rgba(10,10,10,0.07)" strokeWidth="1"/>
            </pattern>
          </defs>

          {/* Soft horizontal level gridlines */}
          {[0, 0.5, 1].map((f, gi) => {
            const yv = pad.t + (1 - f) * (H - pad.t - pad.b);
            return (
              <line key={gi} x1={pad.l} y1={yv} x2={W - pad.r} y2={yv}
                stroke="#0A0A0A" strokeOpacity={gi === 0 ? 0.18 : 0.06}
                strokeDasharray={gi === 0 ? "0" : "2 6"} strokeWidth="1"/>
            );
          })}

          {/* Y-axis level markers — start, mid (optional), final. Re-keyed by
              runId so they re-animate when the user changes their level. */}
          <g key={`y-${runId}`} style={{ opacity: animated ? 1 : 0,
            transition: `opacity .5s ease ${tLabels}s` }}>
            <text x={pad.l - 14} y={y(maxGrowth) + 4} textAnchor="end"
              style={{ fontSize: 11, fontFamily: "'JetBrains Mono', monospace",
                fontWeight: 800, fill: SEASON_COLORS.spring, letterSpacing: 0.5 }}>
              {finalLevelLabel}
            </text>
            {midLevelLabel && (
              <text x={pad.l - 14} y={pad.t + 0.5 * (H - pad.t - pad.b) + 4} textAnchor="end"
                style={{ fontSize: 10, fontFamily: "'JetBrains Mono', monospace",
                  fontWeight: 700, fill: "#AAA", letterSpacing: 0.5 }}>
                {midLevelLabel}
              </text>
            )}
            <text x={pad.l - 14} y={baselineY + 4} textAnchor="end"
              style={{ fontSize: 11, fontFamily: "'JetBrains Mono', monospace",
                fontWeight: 700, fill: "#888", letterSpacing: 0.5 }}>
              {startLevel}
            </text>
          </g>

          {/* Break bands — subtle vertical shaded columns with 'Registration' tag */}
          {breaks.map(({ p, i }) => {
            const bandW = (W - pad.l - pad.r) / 11 * 0.78;
            const bx = x(i) - bandW / 2;
            return (
              <g key={`b-${i}`} style={{ opacity: animated ? 1 : 0,
                transition: `opacity .5s ease ${tLabels + i * 0.03}s` }}>
                <rect x={bx} y={pad.t - 8} width={bandW} height={H - pad.t - pad.b + 16}
                  rx="10" fill="url(#va-break-hatch)"/>
                <rect x={bx} y={pad.t - 8} width={bandW} height={H - pad.t - pad.b + 16}
                  rx="10" fill="none" stroke="rgba(10,10,10,0.08)" strokeDasharray="3 4"/>
                {(() => {
                  const tag = t.seasons.chartBreakTag;
                  const tagW = Math.max(64, tag.length * 7 + 24);
                  const tagH = 20;
                  return (
                    <g transform={`translate(${x(i)}, ${pad.t - 18})`}>
                      <rect x={-tagW / 2} y={-tagH / 2} width={tagW} height={tagH} rx={tagH / 2}
                        fill="#fff" stroke="rgba(10,10,10,0.18)"/>
                      <text x="0" y="4" textAnchor="middle"
                        style={{ fontSize: 9, fontFamily: "'JetBrains Mono', monospace",
                          fontWeight: 800, letterSpacing: 0.6, fill: "#888",
                          textTransform: "uppercase" }}>
                        {tag}
                      </text>
                    </g>
                  );
                })()}
              </g>
            );
          })}

          {/* Month labels */}
          {points.map((p, i) => (
            <text key={`m-${i}`} x={x(i)} y={H - pad.b + 22} textAnchor="middle"
              style={{
                fontSize: 11, fontFamily: "'JetBrains Mono', monospace",
                fontWeight: p.info.isBreak ? 600 : 800,
                fill: p.info.isBreak ? "#BBB" : "#444",
                letterSpacing: 0.4,
                opacity: animated ? 1 : 0,
                transition: `opacity .4s ease ${tLabels + i * 0.04}s`,
              }}>
              {p.label}
            </text>
          ))}

          {/* Seasonal area fills + smoothed line strokes. Re-keyed on runId so
              the stroke-dashoffset transition replays on level change. */}
          {segments.map((seg, si) => {
            const linePath = smoothPath(seg.pts);
            const len = approxPathLength(seg.pts);
            const last = seg.pts[seg.pts.length - 1];
            const first = seg.pts[0];
            const areaPath = `${linePath} L ${last.x} ${baselineY} L ${first.x} ${baselineY} Z`;
            const drawDelay = tSegmentBase + si * tSegmentEach;
            return (
              <g key={`seg-${si}-${runId}`}>
                {/* Area glow */}
                <path d={areaPath} fill={`url(#grad-${seg.season})`}
                  style={{
                    opacity: animated ? 1 : 0,
                    transition: `opacity .8s ease ${drawDelay + tSegmentDraw * 0.55}s`,
                  }}/>
                {/* Soft outer halo */}
                <path d={linePath} fill="none" stroke={seg.color}
                  strokeOpacity="0.18" strokeWidth="10" strokeLinecap="round"
                  strokeLinejoin="round"
                  style={{
                    strokeDasharray: len,
                    strokeDashoffset: animated ? 0 : len,
                    transition: `stroke-dashoffset ${tSegmentDraw}s ease ${drawDelay}s`,
                  }}/>
                {/* Main line */}
                <path d={linePath} fill="none" stroke={seg.color}
                  strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round"
                  style={{
                    strokeDasharray: len,
                    strokeDashoffset: animated ? 0 : len,
                    transition: `stroke-dashoffset ${tSegmentDraw}s ease ${drawDelay}s`,
                    filter: `drop-shadow(0 2px 6px ${seg.color}55)`,
                  }}/>
              </g>
            );
          })}

          {/* Active-month tick dots — grow on hover */}
          {points.map((p, i) => {
            if (p.info.isBreak || p.info.isEnd) return null;
            const isHover = hoverIdx === i;
            return (
              <circle key={`tick-${i}-${runId}`} cx={x(i)} cy={y(p.cur)}
                r={isHover ? 6 : 3.5}
                fill="#fff" stroke={p.info.color} strokeWidth={isHover ? 3 : 2}
                style={{
                  opacity: animated ? 1 : 0,
                  filter: isHover ? `drop-shadow(0 0 8px ${p.info.color})` : "none",
                  transition: `opacity .3s ease ${tSegmentBase + tSegmentDraw + i * 0.04}s,
                               r .2s ease, stroke-width .2s ease, filter .2s ease`,
                  pointerEvents: "none",
                }}/>
            );
          })}

          {/* Season-completion checkpoints with pill label. Pill width is
              estimated from label length × 8 px (Archivo Black average) plus
              padding, then clamped within the chart's drawable bounds. */}
          {segments.map((seg, si) => {
            const endPt = seg.pts[seg.pts.length - 1];
            const endInfo = endPt.info;
            if (!endInfo || !endInfo.isEnd) return null;
            const label = t.seasons.chartCheckpoints[seg.season];
            const popDelay = tSegmentBase + si * tSegmentEach + tSegmentDraw + tCheckpointDelay - 0.2;
            const pillW = Math.max(isRTL ? 132 : 112, Array.from(label).length * (isRTL ? 9 : 8) + 44);
            const pillH = 28;
            // Ideal pill center is over the checkpoint dot. We clamp the
            // non-final pills inside the viewBox, but allow the last (spring)
            // pill to sit directly above its dot — the SVG has overflow:visible
            // and the surrounding card padding absorbs the spillover.
            const idealLeft = endPt.x - pillW / 2;
            const minLeft = 6;
            const maxLeft = W - pillW - 6;
            const isLastSeg = si === segments.length - 1;
            const pillLeft = isLastSeg
              ? idealLeft
              : Math.max(minLeft, Math.min(maxLeft, idealLeft));
            const pillRight = pillLeft + pillW;
            const pillCenterX = pillLeft + pillW / 2;
            // Spring sits at the very top of the chart, so endPt.y - 44 can
            // collide with the SVG edge. We allow the pill to climb past
            // pad.t (SVG overflow is visible) so it ends up directly above
            // the dot, matching the Winter pill's layout.
            const pillY = endPt.y - 44;
            // Keep the marker on the reading edge of the pill.
            const bulletX = isRTL ? pillRight - 14 : pillLeft + 14;
            const textCenterX = isRTL
              ? pillLeft + (pillW - 28) / 2
              : pillLeft + (28 + pillW - 14) / 2;
            const isHovered = hoverIdx === endPt.idx;
            return (
              <g key={`chk-${si}-${runId}`} style={{
                opacity: animated ? 1 : 0,
                transform: animated ? "scale(1)" : "scale(0.4)",
                transformOrigin: `${endPt.x}px ${endPt.y}px`,
                transition: `opacity .35s ease ${popDelay}s, transform .45s cubic-bezier(.34,1.56,.64,1) ${popDelay}s`,
              }}>
                {/* Pill (label + connector) — only visible when the checkpoint dot is hovered */}
                <g style={{
                  opacity: isHovered ? 1 : 0,
                  transform: isHovered ? "translateY(0)" : "translateY(4px)",
                  transformOrigin: `${endPt.x}px ${endPt.y}px`,
                  transition: "opacity .2s ease, transform .2s ease",
                  pointerEvents: "none",
                }}>
                  <line x1={pillCenterX} y1={pillY + pillH}
                    x2={endPt.x} y2={endPt.y - 12}
                    stroke={seg.color} strokeWidth="1.5" strokeDasharray="2 3" opacity="0.6"/>
                  <rect x={pillLeft} y={pillY} width={pillW} height={pillH} rx={pillH / 2}
                    fill="#0A0A0A"/>
                  <circle cx={bulletX} cy={pillY + pillH / 2} r="7" fill={seg.color}/>
                  <circle cx={bulletX} cy={pillY + pillH / 2} r="2.5" fill="#fff"/>
                  <text x={textCenterX} y={pillY + pillH / 2 + 4} textAnchor="middle"
                    direction={isRTL ? "rtl" : "ltr"}
                    style={{ fontSize: 11, fontFamily: isRTL ? "'Cairo', system-ui" : "'Archivo Black', system-ui",
                      fontWeight: isRTL ? 800 : undefined, fill: "#fff", letterSpacing: 0.2 }}>
                    {label}
                  </text>
                </g>
                {/* Big outer halo */}
                <circle cx={endPt.x} cy={endPt.y} r="14" fill={seg.color} opacity="0.18"/>
                {/* Checkpoint dot */}
                <circle cx={endPt.x} cy={endPt.y} r={isHovered ? 10 : 8.5}
                  fill={seg.color} stroke="#fff" strokeWidth="3"
                  style={{ transition: "r .2s ease" }}/>
                <circle cx={endPt.x} cy={endPt.y} r="3" fill="#fff"/>
              </g>
            );
          })}

          {/* Final projected level badge — pinned to the spring line's tip,
              clamped inside the SVG so it never gets clipped by the card. */}
          {(() => {
            const lastSeg = segments[segments.length - 1];
            if (!lastSeg) return null;
            const tip = lastSeg.pts[lastSeg.pts.length - 1];
            const badgeW = Math.max(56, finalLevelLabel.length * 9 + 20);
            const badgeH = 26;
            // Place the A2 badge BELOW the spring tip (centered on tip.x),
            // clear of both the checkpoint dot+halo (r=14) and the
            // "Spring Speaking Bloom" pill that appears above the tip on
            // hover. This stops the badge from covering the dot and from
            // colliding with the hover tooltip at the chart's right edge.
            const haloR = 14;
            const gap = 8;
            const idealLeft = tip.x - badgeW / 2;
            const bx = Math.min(W - badgeW - 4, Math.max(4, idealLeft));
            const idealBy = tip.y + haloR + gap + badgeH / 2;
            const by = Math.min(H - pad.b - badgeH / 2, idealBy);
            return (
              <g key={`badge-${runId}`} style={{
                opacity: animated ? 1 : 0,
                transform: animated ? "translateY(0)" : "translateY(-6px)",
                transition: `opacity .5s ease ${tBadge}s, transform .5s ease ${tBadge}s`,
              }}>
                <rect x={bx} y={by - badgeH / 2} width={badgeW} height={badgeH} rx={badgeH / 2}
                  fill="#0A0A0A" stroke={SEASON_COLORS.spring} strokeWidth="2"/>
                <text x={bx + badgeW / 2} y={by + 4} textAnchor="middle"
                  style={{ fontFamily: "'Archivo Black', system-ui",
                    fontSize: 12, fill: "#fff", letterSpacing: 0.4 }}>
                  {finalLevelLabel}
                </text>
              </g>
            );
          })()}

          {/* Hover hit-areas (transparent rects, one per month column) +
              tooltip rendered above the currently-hovered point. */}
          {points.map((p, i) => {
            const colW = (W - pad.l - pad.r) / 11;
            return (
              <rect key={`hit-${i}`}
                x={x(i) - colW / 2} y={pad.t - 8}
                width={colW} height={H - pad.t - pad.b + 24}
                fill="transparent"
                onMouseEnter={() => setHoverIdx(i)}
                onMouseMove={() => setHoverIdx(i)}
                style={{ cursor: p.info.isBreak ? "default" : "pointer" }}/>
            );
          })}
          {hoverIdx !== null && (() => {
            const p = points[hoverIdx];
            // Skip the rectangular hover tooltip at every season endpoint —
            // each endpoint already shows its own circular checkpoint
            // (pill label for summer/winter, A2 badge for spring), so the
            // duplicate tooltip would be redundant on hover.
            if (p.info.isEnd) return null;
            const cx = x(hoverIdx);
            const py = p.info.isBreak ? pad.t + (H - pad.t - pad.b) / 2 : y(p.cur);
            const isBreak = p.info.isBreak;
            const seasonColor = p.info.color;
            const title = isBreak
              ? t.seasons.chartLegend.break
              : p.info.isEnd
                ? t.seasons.chartCheckpoints[p.info.season]
                : t.seasons.chartLegend[p.info.season];
            const sub = isBreak ? p.label : `${p.label} · ${levelForCur(p.cur)}`;
            const ttLen = Math.max(Array.from(title).length, Array.from(sub).length);
            const ttW = Math.min(220, Math.max(isRTL ? 150 : 120, ttLen * (isRTL ? 8.5 : 7) + 32));
            const ttH = isRTL ? 48 : 40;
            const ttLeft = Math.max(6, Math.min(W - ttW - 6, cx - ttW / 2));
            const ttTop = Math.max(6, py - ttH - 18);
            const ttTextX = isRTL ? ttLeft + ttW - 12 : ttLeft + 12;
            // With direction="rtl", text-anchor="start" anchors the right edge
            // (logical start of Arabic) at x — using "end" would put the left
            // edge there, overflowing the tooltip card to the right.
            const ttTextAnchor = "start";
            const ttDirection = isRTL ? "rtl" : "ltr";
            return (
              <g style={{ pointerEvents: "none" }}>
                {/* Vertical guide line */}
                <line x1={cx} y1={pad.t} x2={cx} y2={H - pad.b}
                  stroke={isBreak ? "#999" : seasonColor}
                  strokeOpacity="0.35" strokeWidth="1" strokeDasharray="3 4"/>
                {/* Tooltip card */}
                <rect x={ttLeft} y={ttTop} width={ttW} height={ttH} rx="10"
                  fill="#0A0A0A" stroke={isBreak ? "#444" : seasonColor} strokeWidth="1.5"/>
                <text x={ttTextX} y={ttTop + (isRTL ? 19 : 17)}
                  textAnchor={ttTextAnchor} direction={ttDirection}
                  style={{ fontSize: 11, fontFamily: isRTL ? "'Cairo', system-ui" : "'Archivo Black', system-ui",
                    fontWeight: isRTL ? 800 : undefined, fill: "#fff", letterSpacing: 0.2 }}>
                  {title}
                </text>
                <text x={ttTextX} y={ttTop + (isRTL ? 36 : 32)}
                  textAnchor={ttTextAnchor} direction={ttDirection}
                  style={{ fontSize: 10, fontFamily: isRTL ? "'Cairo', system-ui" : "'JetBrains Mono', monospace",
                    fontWeight: 600, fill: "#BBB", letterSpacing: 0.4 }}>
                  {sub}
                </text>
              </g>
            );
          })()}
        </svg>

        {/* Legend */}
        <div className="va-legend">
          {[["summer", SEASON_COLORS.summer], ["winter", SEASON_COLORS.winter], ["spring", SEASON_COLORS.spring]].map(([k, c]) => (
            <div key={k} className="va-legend-item">
              <span className="va-legend-dot" style={{ background: `linear-gradient(90deg, ${c}aa, ${c})` }}/>
              <span>{t.seasons.chartLegend[k]}</span>
            </div>
          ))}
          <div className="va-legend-item">
            <span className="va-legend-dot break"/>
            <span>{t.seasons.chartLegend.break}</span>
          </div>
        </div>
      </div>

      {/* CTA */}
      <div style={animated ? {
        marginTop: 36, textAlign: "center",
        animation: `va-growth-fade-in .6s ease ${tCta}s both`,
      } : {
        marginTop: 36, textAlign: "center", opacity: 0, transform: "translateY(8px)",
      }}>
        <h4 style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 22,
          letterSpacing: -0.5, margin: "0 0 8px" }}>
          {t.seasons.yearCtaTitle}
        </h4>
        <p style={{ fontSize: 14, opacity: 0.7, margin: "0 0 22px", maxWidth: 540,
          marginLeft: "auto", marginRight: "auto", lineHeight: 1.55 }}>
          {t.seasons.yearCtaSub}
        </p>
        <button onClick={() => goToPath({ pace: "seasonal" })} className="va-plan-cta">
          {t.seasons.yearCta1} <span className="va-season-cta-arrow">{lang === "ar" ? "←" : "→"}</span>
        </button>
      </div>
    </div>
  );
}

// =====================================================================
// ============================ EVALUATION =============================
// =====================================================================
const EVAL_STAGE_COLORS = ["#1FB6B0", "#FF8A3D", "#7A6BFF", "#FF4D4D"];

function EvaluationA({ t, D, lang }) {
  const [activeIdx, setActiveIdx] = useStateA(null);
  const stages = t.evaluation.stages;
  const pipeline = t.evaluation.pipeline;
  const isRTL = lang === "ar";

  return (
    <section id="evaluation" className="va-section va-section-py" style={{
      padding: `${D.sec}px 32px`,
      background: "#EFEFE6",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Subtle background grid */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, opacity: 0.06, pointerEvents: "none",
        backgroundImage: "linear-gradient(#0A0A0A 1px, transparent 1px), linear-gradient(90deg, #0A0A0A 1px, transparent 1px)",
        backgroundSize: "48px 48px",
      }}/>

      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <SectionHeaderA
          kicker={t.evaluation.kicker}
          title={t.evaluation.h2}
          sub={t.evaluation.tagline}
          accent="#0A0A0A"
          center
        />

        {/* Intro paragraph below header */}
        <p style={{
          maxWidth: 820, margin: "20px auto 0", textAlign: "center",
          fontSize: 16, lineHeight: 1.65, opacity: 0.78,
        }}>
          {t.evaluation.sub}
        </p>

        {/* Progress Pipeline visual */}
        <div className="va-eval-pipeline" style={{
          marginTop: 44,
          display: "flex", flexWrap: "nowrap", alignItems: "center", justifyContent: "center",
          gap: 14,
        }}>
          {pipeline.map((label, i) => (
            <React.Fragment key={i}>
              <div className="va-eval-pipeline-step" style={{
                padding: "10px 18px",
                background: "#fff",
                border: "2px solid #0A0A0A",
                borderRadius: 999,
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 13, fontWeight: 800, letterSpacing: 0.8,
                textTransform: "uppercase",
                boxShadow: `4px 4px 0 ${EVAL_STAGE_COLORS[i]}`,
                color: "#0A0A0A",
              }}>
                {label}
              </div>
              {i < pipeline.length - 1 && (
                <span className="va-eval-pipeline-arrow" style={{
                  display: "inline-flex", alignItems: "center",
                  color: "#0A0A0A", opacity: 0.7,
                  transform: isRTL ? "scaleX(-1)" : "none",
                }}>
                  <LucideIcon name="arrow-right" size={22} strokeWidth={2.5}/>
                </span>
              )}
            </React.Fragment>
          ))}
        </div>

        {/* Main two-column grid */}
        <div className="va-eval-grid" style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 40,
          alignItems: "start",
        }}>
          {/* Left: value message */}
          <div className="va-eval-value" style={{
            background: "#0A0A0A", color: "#fff",
            borderRadius: 24, padding: 36,
            border: "2px solid #0A0A0A",
            boxShadow: "8px 10px 0 #FF4D4D",
            position: "sticky", top: 24,
          }}>
            <div style={{
              display: "inline-block", padding: "5px 11px", borderRadius: 999,
              background: "#FF4D4D", color: "#fff",
              fontSize: 10, fontWeight: 800, letterSpacing: 1.5, textTransform: "uppercase",
              fontFamily: "'JetBrains Mono', monospace", marginBottom: 16,
            }}>
              {t.evaluation.kicker}
            </div>
            <h3 style={{
              fontFamily: "'Archivo Black', system-ui",
              fontSize: 28, lineHeight: 1.15, letterSpacing: -0.8, margin: "0 0 18px",
            }}>
              {t.evaluation.valueTitle}
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.65, opacity: 0.85, margin: "0 0 14px" }}>
              {t.evaluation.valueBody}
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.65, opacity: 0.85, margin: 0 }}>
              {t.evaluation.valueBody2}
            </p>
            <div style={{
              marginTop: 22, paddingTop: 18, borderTop: "1px solid rgba(255,255,255,0.15)",
              display: "flex", alignItems: "center", gap: 10,
              fontSize: 12, opacity: 0.6, fontFamily: "'JetBrains Mono', monospace",
              letterSpacing: 0.5,
            }}>
              <span style={{
                display: "inline-block", width: 6, height: 6, borderRadius: 999,
                background: "#1FB6B0",
              }}/>
              {t.evaluation.hoverHint}
            </div>
          </div>

          {/* Right: 4 stage cards */}
          <div className="va-eval-stages" style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18,
          }}>
            {stages.map((stage, i) => (
              <EvalStageCardA
                key={i}
                stage={stage}
                color={EVAL_STAGE_COLORS[i]}
                active={activeIdx === i}
                onEnter={() => setActiveIdx(i)}
                onLeave={() => setActiveIdx(null)}
              />
            ))}
          </div>
        </div>

        {/* CTA at the bottom */}
        <div style={{
          marginTop: 56,
          background: "#fff",
          border: "2px solid #0A0A0A",
          borderRadius: 22,
          padding: "28px 32px",
          boxShadow: "6px 8px 0 #0A0A0A",
          display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between",
          gap: 20,
        }}>
          <div style={{ flex: "1 1 280px", minWidth: 0 }}>
            <h4 style={{
              fontFamily: "'Archivo Black', system-ui",
              fontSize: 22, letterSpacing: -0.5, margin: "0 0 6px",
            }}>
              {t.evaluation.ctaTitle}
            </h4>
            <p style={{ fontSize: 14, opacity: 0.7, margin: 0, lineHeight: 1.55 }}>
              {t.evaluation.ctaSub}
            </p>
          </div>
          <button onClick={() => goToPath()} className="va-season-cta" style={{
            display: "inline-flex", alignItems: "center", gap: 10, border: "none", cursor: "pointer",
            background: "#0A0A0A", color: "#fff", padding: "16px 26px", borderRadius: 999,
            fontSize: 14, fontWeight: 700, fontFamily: "Inter, system-ui",
            boxShadow: "0 6px 0 #FF4D4D",
            "--va-cta-shadow": "#FF4D4D",
          }}>
            {t.evaluation.cta} <span className="va-season-cta-arrow">{isRTL ? "←" : "→"}</span>
          </button>
        </div>
      </div>
    </section>
  );
}

function EvalStageCardA({ stage, color, active, onEnter, onLeave }) {
  return (
    <div
      className="va-eval-stage-card"
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      style={{
        background: "#fff",
        border: "2px solid #0A0A0A",
        borderRadius: 20,
        padding: 26,
        boxShadow: active ? `10px 12px 0 ${color}` : "5px 7px 0 #0A0A0A",
        // Use translate3d (not translateY) so the card sits on a permanent
        // GPU layer — otherwise text inside renders blurry until the
        // translateY animation settles.
        transform: active ? "translate3d(0, -3px, 0)" : "translate3d(0, 0, 0)",
        transition: "all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1)",
        willChange: "transform",
        backfaceVisibility: "hidden",
        WebkitFontSmoothing: "antialiased",
        MozOsxFontSmoothing: "grayscale",
        position: "relative",
        overflow: "hidden",
        display: "flex", flexDirection: "column",
        minHeight: 280,
      }}
    >
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0, height: 6, background: color,
      }}/>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14, marginTop: 6 }}>
        <div style={{
          width: 48, height: 48, borderRadius: 12,
          background: color, color: "#fff",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
        }}>
          <LucideIcon name={stage.icon} size={24} strokeWidth={2.2}/>
        </div>
        <span style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 28, fontWeight: 800, color: "#0A0A0A", opacity: 0.12, letterSpacing: -1,
        }}>
          {stage.step}
        </span>
      </div>
      <h4 style={{
        fontFamily: "'Archivo Black', system-ui",
        fontSize: 18, lineHeight: 1.2, letterSpacing: -0.4, margin: "0 0 6px",
      }}>
        {stage.title}
      </h4>
      <p style={{ fontSize: 13, fontWeight: 700, color, margin: "0 0 14px" }}>
        {stage.headline}
      </p>
      <ul style={{
        margin: 0, paddingInlineStart: 18,
        fontSize: 13, lineHeight: 1.65, opacity: 0.82,
      }}>
        {stage.items.map((item, i) => (
          <li key={i} style={{ marginBottom: 3 }}>{item}</li>
        ))}
      </ul>
      <div style={{
        marginTop: "auto", paddingTop: 14,
        maxHeight: active ? 200 : 0,
        opacity: active ? 1 : 0,
        overflow: "hidden",
        transition: "max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s",
      }}>
        <div style={{
          padding: "12px 14px", borderRadius: 12,
          background: "#FAFAF6", border: `1px dashed ${color}`,
          fontSize: 13, lineHeight: 1.5, color: "#0A0A0A",
        }}>
          {stage.value}
        </div>
      </div>
    </div>
  );
}

// =====================================================================
// ============================ MENTORSHIP =============================
// =====================================================================
function MentorshipA({ t, D }) {
  const cardRef = useRefA(null);
  const [openIdx, setOpenIdx] = useStateA(null);

  const onMove = (e) => {
    if (!cardRef.current) return;
    const r = cardRef.current.getBoundingClientRect();
    cardRef.current.style.setProperty("--mx", `${e.clientX - r.left}px`);
    cardRef.current.style.setProperty("--my", `${e.clientY - r.top}px`);
  };

  return (
    <section id="mentorship" className="va-section va-section-py" style={{
      padding: `${D.sec}px 32px`, background: "#0A0A0A", color: "#fff", position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 70% 30%, rgba(255,77,77,0.15), transparent 60%)",
        pointerEvents: "none",
      }}/>
      <div style={{ maxWidth: 980, margin: "0 auto", position: "relative" }}>
        <div style={{ textAlign: "center", marginBottom: 36 }}>
          <span style={{
            display: "inline-block", padding: "6px 12px", borderRadius: 999,
            background: "#FF4D4D", color: "#fff", fontSize: 11, fontWeight: 800, letterSpacing: 1.5,
            textTransform: "uppercase", marginBottom: 16, fontFamily: "'JetBrains Mono', monospace",
          }}>{t.mentorship.kicker}</span>
          <h2 className="va-section-h2" style={{ fontFamily: "'Archivo Black', system-ui", fontSize: `clamp(34px, 4.6vw, 56px)`, lineHeight: 1.05, letterSpacing: -1.5, margin: "0 0 12px" }}>{t.mentorship.h2}</h2>
          <p style={{ fontSize: 17, opacity: 0.7, margin: 0 }}>{t.mentorship.sub}</p>
        </div>
        <div ref={cardRef} onMouseMove={onMove} className="va-mentor-card" style={{
          background: "rgba(255,255,255,0.04)", backdropFilter: "blur(20px)",
          border: "1px solid rgba(255,255,255,0.12)", borderRadius: 28, padding: 48, position: "relative", overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", inset: 0, pointerEvents: "none",
            background: "radial-gradient(circle 320px at var(--mx, 50%) var(--my, 50%), rgba(255,77,77,0.18), transparent 70%)",
          }}/>
          <div style={{ position: "relative" }}>
            {t.mentorship.benefits.map((b, i) => (
              <MentorBenefitA key={i} b={b} idx={i} open={openIdx === i} setOpen={() => setOpenIdx(openIdx === i ? null : i)}/>
            ))}
            <div style={{ marginTop: 36, textAlign: "center" }}>
              <button onClick={() => goToPath({ pace: "private" })} style={{
                display: "inline-flex", alignItems: "center", gap: 12, border: "none", cursor: "pointer",
                background: "#FF4D4D", color: "#fff", padding: "18px 32px", borderRadius: 999,
                fontSize: 16, fontWeight: 700, fontFamily: "Inter, system-ui",
                boxShadow: "0 0 0 1px rgba(255,255,255,0.2), 0 12px 32px rgba(255,77,77,0.4)",
                transition: "transform 0.2s",
              }}
                onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-2px)"}
                onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}
              >{t.mentorship.cta}</button>
              <p style={{ fontSize: 12, opacity: 0.6, marginTop: 14, fontFamily: "'JetBrains Mono', monospace", letterSpacing: 0.3 }}>{t.mentorship.ctaSub}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function MentorBenefitA({ b, idx, open, setOpen }) {
  return (
    <div onClick={setOpen} style={{
      padding: "22px 0", borderBottom: "1px solid rgba(255,255,255,0.1)",
      cursor: "pointer", transition: "padding 0.25s",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <span style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 14, color: "#FF4D4D", opacity: 0.6, minWidth: 30 }}>0{idx + 1}</span>
        <h4 style={{ fontFamily: "'Archivo Black', system-ui", fontSize: 22, margin: 0, letterSpacing: -0.5, flex: 1, color: open ? "#fff" : "rgba(255,255,255,0.85)", transition: "color 0.2s" }}>{b.title}</h4>
        {b.ai && (
          <span style={{ display: "inline-block", padding: "4px 10px", borderRadius: 999, background: "#1FB6B0", color: "#fff", fontSize: 10, fontWeight: 800, letterSpacing: 1, fontFamily: "'JetBrains Mono', monospace" }}>AI</span>
        )}
        <span style={{ fontSize: 22, opacity: 0.5 }}>{open ? "−" : "+"}</span>
      </div>
      {open && (
        <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.75, margin: "12px 0 0", paddingInlineStart: 46, animation: "va-fade-in 0.3s" }}>
          {b.body}
        </p>
      )}
    </div>
  );
}

// =====================================================================
// ============================== REVIEWS ==============================
// =====================================================================
function ReviewsA({ t, D, reviews }) {
  const loop = reviews.concat(reviews);
  return (
    <section id="reviews" className="va-section va-section-py" style={{ padding: `${D.sec}px 0` }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", padding: "0 32px" }}>
        <SectionHeaderA kicker={t.reviews.kicker} title={t.reviews.h2} accent="#F4B92E" center/>
      </div>
      <div
        className="va-marquee-wrap va-reviews-scroll"
        style={{ marginTop: D.gap * 1.5, overflow: "hidden", padding: "12px 0 24px" }}
        onMouseEnter={(e) => { e.currentTarget.querySelector(".va-reviews-track").style.animationPlayState = "paused"; }}
        onMouseLeave={(e) => { e.currentTarget.querySelector(".va-reviews-track").style.animationPlayState = "running"; }}
      >
        <div className="va-reviews-track" style={{
          display: "inline-flex", gap: 32, whiteSpace: "normal",
          animation: "va-marquee 60s linear infinite",
        }}>
          {loop.map((r, i) => (
            <div key={i} className="va-review-card" style={{
              flex: "0 0 auto", width: 480, background: "#fff", borderRadius: 24, padding: 32,
              border: "2px solid #0A0A0A", boxShadow: "8px 10px 0 #0A0A0A",
              display: "grid", gridTemplateColumns: "96px 1fr", gap: 24, alignItems: "center",
            }}>
              <div className="va-review-avatar" style={{
                width: 96, height: 96, borderRadius: "50%", background: r.color,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontFamily: "'Archivo Black', system-ui", fontSize: 32, color: "#fff", letterSpacing: -1,
                border: "3px solid #0A0A0A",
              }}>{r.name.split(" ").map(s => s[0]).join("").slice(0, 2)}</div>
              <div style={{ minWidth: 0 }}>
                <p className="va-review-quote" style={{ fontFamily: "'Fraunces', serif", fontStyle: "italic", fontSize: 16, lineHeight: 1.45, margin: "0 0 12px", fontWeight: 500, whiteSpace: "normal" }}>
                  “{r.quote}”
                </p>
                <div style={{ fontWeight: 800, fontSize: 13 }}>{r.name}</div>
                <div style={{ fontSize: 11, opacity: 0.65, fontFamily: "'JetBrains Mono', monospace", marginTop: 2 }}>{r.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =====================================================================
// ============================== FAQ ===================================
// =====================================================================
// Aligned with SpeakUp neo-brutalist palette (FF4D4D / F4B92E / 1FB6B0 / 3B82F6 / 6D28D9 / D946A6)
// `level` = 1..6 → drives the proficiency-bar fill so each row is visually scannable.
const CEFR_ROWS = [
  { cefr: "C2", level: 6, color: "#D946A6", toeflNew: "5.5–6.0", toeflLegacy: "114–120", ielts: "8.5–9.0", ctx: { en: "Near-native, elite programs", tr: "Anadile yakın, seçkin programlar", ar: "قريب من الناطق الأصلي، برامج النخبة" } },
  { cefr: "C1", level: 5, color: "#6D28D9", toeflNew: "4.5–5.0", toeflLegacy: "95–113",  ielts: "7.0–8.0", ctx: { en: "Top universities, postgrad, professional", tr: "En iyi üniversiteler, yüksek lisans, profesyonel", ar: "أفضل الجامعات، الدراسات العليا، المهني" } },
  { cefr: "B2", level: 4, color: "#3B82F6", toeflNew: "3.5–4.0", toeflLegacy: "72–94",   ielts: "5.5–6.5", ctx: { en: "Most undergrad admissions, work visas", tr: "Çoğu lisans kabulleri, çalışma vizeleri", ar: "معظم القبول الجامعي، تأشيرات العمل" } },
  { cefr: "B1", level: 3, color: "#1FB6B0", toeflNew: "2.5–3.0", toeflLegacy: "42–71",   ielts: "4.0–5.0", ctx: { en: "Pre-sessional, some vocational entry", tr: "Hazırlık, bazı mesleki giriş", ar: "تمهيدي، بعض الالتحاق المهني" } },
  { cefr: "A2", level: 2, color: "#F4B92E", toeflNew: "1.5–2.0", toeflLegacy: "~0–41",   ielts: "3.0–3.5", ctx: { en: "Basic communication only", tr: "Sadece temel iletişim", ar: "تواصل أساسي فقط" } },
  { cefr: "A1", level: 1, color: "#FF4D4D", toeflNew: "1.0",     toeflLegacy: { en: "Below range", tr: "Aralığın altında", ar: "أقل من النطاق" }, ielts: "1.0–2.5", ctx: { en: "Complete beginner", tr: "Tam başlangıç", ar: "مبتدئ كامل" } },
];

const CEFR_LABELS = {
  en: { cefr: "CEFR", toeflNew: "TOEFL 1–6", toeflNewTag: "new", toeflLegacy: "TOEFL 0–120", toeflLegacyTag: "legacy", ielts: "IELTS", ctx: "Typical context", proficiency: "Proficiency" },
  tr: { cefr: "CEFR", toeflNew: "TOEFL 1–6", toeflNewTag: "yeni", toeflLegacy: "TOEFL 0–120", toeflLegacyTag: "eski", ielts: "IELTS", ctx: "Tipik bağlam", proficiency: "Yeterlik" },
  ar: { cefr: "CEFR", toeflNew: "TOEFL 1–6", toeflNewTag: "جديد", toeflLegacy: "TOEFL 0–120", toeflLegacyTag: "قديم", ielts: "IELTS", ctx: "السياق النموذجي", proficiency: "الكفاءة" },
};

function CefrChart({ lang }) {
  const L = CEFR_LABELS[lang] || CEFR_LABELS.en;
  const [hoverIdx, setHoverIdx] = useStateA(null);
  const pickText = (v) => (typeof v === "string" ? v : (v[lang] || v.en));

  const headerCell = {
    padding: "14px 14px", textAlign: "start", borderBottom: "2px solid #0A0A0A",
    fontFamily: "'Archivo Black', system-ui", fontSize: 11, letterSpacing: 0.6,
    textTransform: "uppercase", color: "#0A0A0A", verticalAlign: "middle",
    background: "#FAFAFA",
  };
  const cell = {
    padding: "16px 14px", borderBottom: "1px solid #EAEAEA", verticalAlign: "middle",
    fontFamily: "Inter, system-ui",
  };
  const tag = (bg, fg) => ({
    display: "inline-block", marginInlineStart: 8, padding: "2px 8px", borderRadius: 999,
    background: bg, color: fg, fontSize: 9, fontWeight: 800, letterSpacing: 0.6,
    textTransform: "uppercase", fontFamily: "'JetBrains Mono', monospace",
    verticalAlign: "middle",
  });

  return (
    <div className="va-cefr-chart" style={{
      marginTop: 18, background: "#fff", borderRadius: 16,
      border: "2px solid #0A0A0A", boxShadow: "5px 6px 0 #0A0A0A",
      overflow: "hidden",
    }}>
      <div style={{ overflowX: "auto" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 720 }}>
          <thead>
            <tr>
              <th style={headerCell}>{L.cefr}</th>
              <th style={headerCell}>{L.proficiency}</th>
              <th style={headerCell}>{L.toeflNew}<span style={tag("#0A0A0A", "#F4B92E")}>{L.toeflNewTag}</span></th>
              <th style={headerCell}>{L.toeflLegacy}<span style={tag("#EAEAEA", "#0A0A0A")}>{L.toeflLegacyTag}</span></th>
              <th style={headerCell}>{L.ielts}</th>
              <th style={headerCell}>{L.ctx}</th>
            </tr>
          </thead>
          <tbody>
            {CEFR_ROWS.map((r, i) => {
              const isHover = hoverIdx === i;
              const fillPct = (r.level / 6) * 100;
              return (
                <tr key={r.cefr}
                  onMouseEnter={() => setHoverIdx(i)}
                  onMouseLeave={() => setHoverIdx(null)}
                  style={{
                    background: isHover ? `${r.color}10` : "transparent",
                    transition: "background 0.2s",
                  }}>
                  {/* CEFR badge */}
                  <td style={cell}>
                    <span style={{
                      display: "inline-block", padding: "6px 14px", borderRadius: 999,
                      background: r.color, color: "#fff",
                      fontFamily: "'Archivo Black', system-ui", fontSize: 13, letterSpacing: 0.5,
                      border: "2px solid #0A0A0A",
                      boxShadow: isHover ? `3px 3px 0 #0A0A0A` : `2px 2px 0 #0A0A0A`,
                      transition: "box-shadow 0.2s, transform 0.2s",
                      transform: isHover ? "translate(-1px,-1px)" : "translate(0,0)",
                    }}>{r.cefr}</span>
                  </td>
                  {/* Proficiency bar — the "chart" part */}
                  <td style={{ ...cell, minWidth: 120 }}>
                    <div style={{
                      position: "relative", height: 14, borderRadius: 999,
                      background: "#F3F3F3", border: "1.5px solid #0A0A0A", overflow: "hidden",
                    }}>
                      <div style={{
                        position: "absolute", insetInlineStart: 0, top: 0, bottom: 0,
                        width: `${fillPct}%`, background: r.color,
                        transition: "width 0.4s cubic-bezier(0.2,0.8,0.2,1)",
                      }}/>
                    </div>
                    <div style={{
                      marginTop: 4, fontSize: 10, fontFamily: "'JetBrains Mono', monospace",
                      letterSpacing: 0.5, color: "#0A0A0A", opacity: 0.55, fontWeight: 700,
                    }}>{r.level}/6</div>
                  </td>
                  {/* TOEFL new */}
                  <td style={{ ...cell, fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, fontSize: 14, color: "#0A0A0A" }}>
                    {r.toeflNew}
                  </td>
                  {/* TOEFL legacy */}
                  <td style={{ ...cell, fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: "#0A0A0A", opacity: 0.6 }}>
                    {pickText(r.toeflLegacy)}
                  </td>
                  {/* IELTS */}
                  <td style={{ ...cell, fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, fontSize: 14, color: "#0A0A0A" }}>
                    {r.ielts}
                  </td>
                  {/* Context */}
                  <td style={{ ...cell, fontSize: 13, fontWeight: 600, color: "#0A0A0A", opacity: 0.85, maxWidth: 220, lineHeight: 1.4 }}>
                    {pickText(r.ctx)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function FaqA({ t, D, lang }) {
  const [open, setOpen] = useStateA(0);
  return (
    <section id="faq" className="va-section va-section-py" style={{ padding: `${D.sec}px 32px` }}>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>
        <SectionHeaderA kicker={t.faq.kicker} title={t.faq.h2} accent="#D946A6" center/>
        <div style={{ marginTop: D.gap * 1.4 }}>
          {t.faq.items.map((item, i) => (
            <div key={i} style={{
              background: "#fff", marginBottom: 12, borderRadius: 14,
              border: "2px solid #0A0A0A", boxShadow: open === i ? "6px 8px 0 #0A0A0A" : "3px 4px 0 #0A0A0A",
              transition: "all 0.2s", overflow: "hidden",
            }}>
              <button onClick={() => setOpen(open === i ? null : i)} className="va-faq-q" style={{
                width: "100%", padding: "20px 24px", background: "none", border: "none", cursor: "pointer",
                textAlign: "start", fontSize: 17, fontWeight: 700, fontFamily: "Inter, system-ui",
                display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
              }}>
                <span>{item.q}</span>
                <span style={{ fontSize: 22, color: "#FF4D4D", flexShrink: 0 }}>{open === i ? "−" : "+"}</span>
              </button>
              {open === i && (
                <div className="va-faq-a" style={{ padding: "0 24px 22px", fontSize: 15, lineHeight: 1.6, opacity: 0.78, animation: "va-fade-in 0.25s" }}>
                  {item.a}
                  {item.chart === "cefr" && <CefrChart lang={lang}/>}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =====================================================================
// ============================ FINAL CTA ==============================
// =====================================================================
function FinalCtaA({ t, D }) {
  return (
    <section className="va-section" style={{ padding: `${D.sec * 0.8}px 32px ${D.sec * 0.6}px`, textAlign: "center" }}>
      <div style={{ maxWidth: 820, margin: "0 auto" }}>
        <h2 className="va-section-h2" style={{ fontFamily: "'Archivo Black', system-ui", fontSize: `clamp(34px, 5vw, 64px)`, lineHeight: 1.05, letterSpacing: -1.5, margin: "0 0 18px" }}>
          {t.finalCta.h2}
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.55, opacity: 0.75, marginTop: 0, marginBottom: 32, maxWidth: 640, marginLeft: "auto", marginRight: "auto" }}>
          {t.finalCta.sub}
        </p>
        <a href="#path" style={{
          display: "inline-flex", alignItems: "center", gap: 12,
          background: "#FF4D4D", color: "#fff", padding: "20px 36px", borderRadius: 999,
          fontSize: 17, fontWeight: 700, textDecoration: "none",
          boxShadow: "0 10px 0 #0A0A0A, 0 14px 28px rgba(0,0,0,0.18)",
          transition: "transform 0.15s, box-shadow 0.15s",
        }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 12px 0 #0A0A0A, 0 16px 32px rgba(0,0,0,0.22)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 10px 0 #0A0A0A, 0 14px 28px rgba(0,0,0,0.18)"; }}
        >{t.finalCta.cta} <span>→</span></a>
      </div>
    </section>
  );
}

// =====================================================================
// ============================== FOOTER ===============================
// =====================================================================
function FooterA({ t, lang, setLang }) {
  const S = window.SOCIALS;
  const socialBtns = [
    { name: "whatsapp", href: S.whatsapp.url, label: "WhatsApp", color: "#25D366" },
    { name: "telegram", href: S.telegram, label: "Telegram", color: "#26A5E4" },
    { name: "instagram", href: S.instagram, label: "Instagram", color: "#E4405F" },
    { name: "facebook", href: S.facebook, label: "Facebook", color: "#1877F2" },
    { name: "tiktok", href: S.tiktok, label: "TikTok", color: "#FE2C55" },
    { name: "youtube", href: S.youtube, label: "YouTube", color: "#FF0000" },
  ];
  return (
    <footer className="va-footer" style={{ background: "#0A0A0A", color: "#fff", padding: "80px 32px 32px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div className="va-footer-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1.2fr", gap: 40, marginBottom: 48 }}>
          <div>
            <window.LogoMark size={48} dark/>
            <p className="va-footer-tagline" style={{ marginTop: 18, fontSize: 16, lineHeight: 1.5, opacity: 0.7, maxWidth: 320 }}>{t.footer.tagline}</p>
            <div style={{ marginTop: 20 }}><LangToggle3 lang={lang} setLang={setLang}/></div>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 1.5, textTransform: "uppercase", opacity: 0.5, marginBottom: 14, fontFamily: "'JetBrains Mono', monospace" }}>{t.footer.contact}</div>
            <a href="mailto:speak.up.istanbull@gmail.com" style={{ color: "#fff", textDecoration: "none", display: "block", fontSize: 14, marginBottom: 8, opacity: 0.85 }}>speak.up.istanbull@gmail.com</a>
            <a href={`tel:${S.whatsapp.phone.replace(/\s/g, "")}`} style={{ color: "#fff", textDecoration: "none", display: "block", fontSize: 14, opacity: 0.85 }}>
              {S.whatsapp.phone}
            </a>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 1.5, textTransform: "uppercase", opacity: 0.5, marginBottom: 14, fontFamily: "'JetBrains Mono', monospace" }}>{t.footer.visit}</div>
            <div style={{ fontSize: 14, opacity: 0.85, lineHeight: 1.5 }}>{t.footer.address}</div>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 1.5, textTransform: "uppercase", opacity: 0.5, marginBottom: 14, fontFamily: "'JetBrains Mono', monospace" }}>{t.footer.follow}</div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
              {socialBtns.map(s => (
                <a key={s.name} href={s.href} target="_blank" rel="noopener" aria-label={s.label} title={s.label}
                  style={{
                    width: 40, height: 40, borderRadius: 10,
                    background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.12)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    color: "#fff", transition: "all 0.2s",
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = s.color; e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.borderColor = s.color; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.07)"; e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.borderColor = "rgba(255,255,255,0.12)"; }}
                >
                  <SocialIcon name={s.name} size={18}/>
                </a>
              ))}
            </div>
          </div>
        </div>
        <div style={{ paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.1)", display: "flex", gap: 20, fontSize: 12, opacity: 0.5, flexWrap: "wrap" }}>
          {t.footer.legal.map((l, i) => <span key={i}>{l}</span>)}
        </div>
      </div>
    </footer>
  );
}

window.VariantA = VariantA;