// Arise Helix — Hero + About + Programs sections.

/* ──────────────── Navbar ──────────────── */

function HelixNav() {
  const links = [
    { label: "Home", href: "#helix-hero" },
    { label: "Programs", href: "#helix-programs" },
    { label: "Faculty", href: "#helix-about" },
    { label: "Labs", href: "#helix-lab" },
    { label: "Contact", href: "#helix-cta" },
  ];
  // Smart-hide nav: hide on scroll down, show on scroll up.
  const [hidden, setHidden] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const lastY = React.useRef(0);
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const goingDown = y > lastY.current;
      // Keep nav visible while the mobile menu is open.
      if (menuOpen) { lastY.current = y; return; }
      if (y < 80) {
        setHidden(false);
      } else if (goingDown && y - lastY.current > 4) {
        setHidden(true);
      } else if (!goingDown && lastY.current - y > 4) {
        setHidden(false);
      }
      lastY.current = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [menuOpen]);

  // Close mobile menu when viewport goes desktop-sized.
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth >= 768) setMenuOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  // Lock body scroll while mobile menu is open.
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  return (
    <>
      <div
        className="px-4 sm:px-8 pt-4 sm:pt-6 fixed top-0 left-0 right-0 z-40"
        style={{
          transform: hidden ? "translateY(-110%)" : "translateY(0)",
          transition: "transform 0.45s cubic-bezier(0.16, 1, 0.3, 1)",
        }}
      >
        <nav
          className="helix-glass mx-auto max-w-3xl rounded-full pl-4 sm:pl-5 pr-1.5 py-1.5 flex items-center justify-between"
        >
          <a
            href="#"
            className="font-medium text-[14px] sm:text-[15px] tracking-tight flex items-center gap-2 sm:gap-2.5"
            style={{ color: "#F2EAD8" }}
          >
            <img
              src="assets/CHENNAI%20LOGO.png"
              alt="Arise Chennai logo"
              className="h-6 sm:h-7 w-auto object-contain"
              style={{ display: "block", filter: "drop-shadow(0 1px 4px rgba(0,0,0,0.45))" }}
            />
            Arise
          </a>

          {/* Desktop links */}
          <ul className="hidden md:flex items-center gap-7 text-[13px]">
            {links.map((l) => (
              <li key={l.href}>
                <a
                  href={l.href}
                  className="transition-colors"
                  style={{ color: "rgba(242,234,216,0.7)" }}
                  onMouseEnter={(e) => (e.currentTarget.style.color = "#F2EAD8")}
                  onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(242,234,216,0.7)")}
                >
                  {l.label}
                </a>
              </li>
            ))}
          </ul>

          {/* Right side: Apply (desktop) / Hamburger (mobile) */}
          <div className="flex items-center gap-2">
            <a
              href="#helix-cta"
              className="hidden md:inline-flex rounded-full px-4 py-2 text-[13px] font-medium"
              style={{
                background: "linear-gradient(135deg, #B08D57 0%, #D8C3A5 100%)",
                color: "#1F1F1F",
              }}
            >
              Apply Now
            </a>
            <button
              type="button"
              onClick={() => setMenuOpen((v) => !v)}
              aria-label={menuOpen ? "Close menu" : "Open menu"}
              aria-expanded={menuOpen}
              className="md:hidden w-9 h-9 rounded-full inline-flex items-center justify-center"
              style={{
                background: "linear-gradient(135deg, rgba(176,141,87,0.28) 0%, rgba(216,195,165,0.45) 100%)",
                border: "1px solid rgba(216,195,165,0.25)",
                color: "#D8C3A5",
              }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                {menuOpen ? (
                  <>
                    <line x1="18" y1="6" x2="6" y2="18" />
                    <line x1="6" y1="6" x2="18" y2="18" />
                  </>
                ) : (
                  <>
                    <line x1="3" y1="7" x2="21" y2="7" />
                    <line x1="3" y1="12" x2="21" y2="12" />
                    <line x1="3" y1="17" x2="21" y2="17" />
                  </>
                )}
              </svg>
            </button>
          </div>
        </nav>
      </div>

      {/* Mobile drawer */}
      <div
        className="md:hidden fixed inset-0 z-30"
        style={{
          pointerEvents: menuOpen ? "auto" : "none",
          opacity: menuOpen ? 1 : 0,
          transition: "opacity 0.3s ease",
          background: "rgba(8,8,10,0.94)",
          backdropFilter: "blur(18px)",
          WebkitBackdropFilter: "blur(18px)",
        }}
        onClick={() => setMenuOpen(false)}
      >
        <div
          className="absolute inset-0 flex flex-col items-center justify-center gap-7 px-6"
          style={{
            transform: menuOpen ? "translateY(0)" : "translateY(-12px)",
            transition: "transform 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
          }}
          onClick={(e) => e.stopPropagation()}
        >
          {links.map((l, i) => (
            <a
              key={l.href}
              href={l.href}
              onClick={() => setMenuOpen(false)}
              className="text-2xl font-medium tracking-tight"
              style={{
                color: "#F2EAD8",
                opacity: menuOpen ? 1 : 0,
                transform: menuOpen ? "translateY(0)" : "translateY(10px)",
                transition: `opacity 0.4s ease ${0.05 + i * 0.05}s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) ${0.05 + i * 0.05}s`,
              }}
            >
              {l.label}
            </a>
          ))}
          <a
            href="#helix-cta"
            onClick={() => setMenuOpen(false)}
            className="mt-4 rounded-full px-7 py-3 text-base font-medium"
            style={{
              background: "linear-gradient(135deg, #B08D57 0%, #D8C3A5 100%)",
              color: "#1F1F1F",
              opacity: menuOpen ? 1 : 0,
              transform: menuOpen ? "translateY(0)" : "translateY(10px)",
              transition: `opacity 0.4s ease ${0.05 + links.length * 0.05}s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) ${0.05 + links.length * 0.05}s`,
            }}
          >
            Apply Now
          </a>
        </div>
      </div>
    </>
  );
}

/* ──────────────── Hero ──────────────── */

function HeroSection() {
  const scrollY = useScrollY();
  return (
    <section
      id="helix-hero"
      data-screen-label="01 Hero"
      className="relative w-full min-h-screen overflow-hidden"
      style={{ paddingTop: "120px", paddingBottom: "60px" }}
    >
      {/* Soft radial glows */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "radial-gradient(60% 50% at 18% 30%, rgba(216,195,165,0.55) 0%, transparent 70%), radial-gradient(45% 45% at 85% 80%, rgba(176,141,87,0.18) 0%, transparent 70%)",
          transform: `translateY(${scrollY * 0.12}px)`,
        }}
      />
      <div className="absolute inset-0 helix-grain pointer-events-none" />
      <HelixParticles count={20} />

      <div className="relative max-w-7xl mx-auto px-5 sm:px-8 md:px-12 pt-12 md:pt-16">
        <FadeUp delay={0.2}>
          <SectionLabel>FMGE · NExT · Foundation Programs</SectionLabel>
        </FadeUp>

        <div className="mt-10 md:mt-14 grid grid-cols-12 gap-6 md:gap-10 items-end">
          <div className="col-span-12 lg:col-span-8">
            <MixedHeading
              className="font-normal"
              style={{
                fontSize: "clamp(48px, 11vw, 168px)",
                lineHeight: 0.92,
                letterSpacing: "-0.04em",
                color: "#1F1F1F",
              }}
              parts={[
                { text: "Bridging the gap" },
                { text: "for global", italic: true },
                { text: "medicos." },
              ]}
            />
          </div>

          <div className="col-span-12 lg:col-span-4 lg:pb-2 flex flex-col gap-5">
            <FadeUp delay={0.55}>
              <p
                className="text-base md:text-[17px]"
                style={{ color: "#5C5C5C", lineHeight: 1.45, maxWidth: "30rem" }}
              >
                A mentor-led path through FMGE and NExT, founded by{" "}
                <span className="helix-serif" style={{ color: "#1F1F1F" }}>Dr. Khaleel</span> —
                built on a 3-phase preparation model. 30,000+ medicos. 74% pass rate.
              </p>
            </FadeUp>
            <FadeUp delay={0.75}>
              <div className="flex flex-wrap items-center gap-3">
                <MagneticButton
                  className="rounded-full px-6 py-3 text-sm font-medium"
                  style={{
                    background: "linear-gradient(135deg, #1F1F1F 0%, #3a3a3a 100%)",
                    color: "#fff",
                  }}
                >
                  Explore Programs
                </MagneticButton>
                <MagneticButton
                  className="helix-glass rounded-full px-5 py-3 text-sm font-medium inline-flex items-center gap-2"
                  style={{
                    border: "1px solid rgba(0,0,0,0.12)",
                    color: "#1F1F1F",
                  }}
                >
                  <IconPlay size={14} />
                  Watch Showreel
                </MagneticButton>
              </div>
            </FadeUp>
          </div>
        </div>

        {/* Stats strip */}
        <div className="mt-16 md:mt-24 grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-2">
          {[
            { v: 30000, suf: "+", l: "Medicos empowered" },
            { v: 74, suf: "%", l: "FMGE pass rate" },
            { v: 19, suf: "", l: "Subjects covered" },
            { v: 5, suf: "", l: "City centres" },
          ].map((s, i) => (
            <InViewScale key={i} delay={i * 0.08} from={0.97}>
              <div
                className="helix-glass rounded-2xl p-5 md:p-6 h-full"
                style={{ border: "1px solid rgba(0,0,0,0.08)" }}
              >
                <div
                  className="text-3xl sm:text-4xl md:text-5xl"
                  style={{
                    color: "#1F1F1F",
                    fontWeight: 500,
                    letterSpacing: "-0.03em",
                    lineHeight: 0.95,
                  }}
                >
                  <StatCounter to={s.v} suffix={s.suf} />
                </div>
                <div
                  className="mt-2 text-[11px] tracking-[0.16em] uppercase"
                  style={{ color: "#5C5C5C" }}
                >
                  {s.l}
                </div>
              </div>
            </InViewScale>
          ))}
        </div>

        {/* Locations strip */}
        <FadeUp delay={0.9}>
          <div
            className="mt-14 md:mt-20 flex flex-wrap items-center gap-x-6 gap-y-2 text-[11px] tracking-[0.22em] uppercase"
            style={{ color: "#5C5C5C" }}
          >
            <span style={{ color: "#1F1F1F", fontWeight: 500 }}>Centres</span>
            <span>·</span>
            <span>Hyderabad</span>
            <span>Chennai</span>
            <span>Kerala</span>
            <span>Delhi</span>
            <span>Jaipur</span>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

/* ──────────────── About ──────────────── */

function AboutSection() {
  return (
    <section
      id="helix-about"
      data-screen-label="02 About"
      className="relative py-24 sm:py-32 md:py-40"
    >
      <div className="absolute inset-0 helix-grain pointer-events-none opacity-60" />
      <HelixParticles count={14} />

      <div className="relative max-w-7xl mx-auto px-5 sm:px-8 md:px-12">
        <SectionLabel>The Arise Story</SectionLabel>

        <div className="mt-12 md:mt-16 grid grid-cols-12 gap-8 md:gap-12 items-start">
          {/* Left — sticky portrait */}
          <div className="col-span-12 lg:col-span-5">
            <div className="lg:sticky lg:top-32">
              <FadeUp delay={0.1}>
                <PortraitFrame
                  label="Dr. Khaleel · Founder"
                  src="assets/ChatGPT%20Image%20May%2014,%202026,%2003_45_32%20PM.png"
                />
              </FadeUp>
              <FadeUp delay={0.25}>
                <div
                  className="mt-6 helix-glass rounded-2xl p-5 md:p-6 relative"
                  style={{ border: "1px solid rgba(0,0,0,0.08)" }}
                >
                  <IconQuote size={22} style={{ color: "#B08D57" }} />
                  <p
                    className="mt-3 text-lg md:text-xl"
                    style={{ color: "#1F1F1F", lineHeight: 1.35 }}
                  >
                    <span className="helix-serif">
                      We don't just teach you to pass; we teach you to be an excellent physician.
                    </span>
                  </p>
                  <div className="mt-4 text-[10px] tracking-[0.22em] uppercase" style={{ color: "#5C5C5C" }}>
                    — Dr. Khaleel, Founder
                  </div>
                </div>
              </FadeUp>
            </div>
          </div>

          {/* Right — headline + paragraph + 3-phase model */}
          <div className="col-span-12 lg:col-span-7">
            <MixedHeading
              className=""
              style={{
                fontSize: "clamp(36px, 5.4vw, 88px)",
                lineHeight: 0.96,
                letterSpacing: "-0.02em",
                color: "#1F1F1F",
              }}
              parts={[
                { text: "We teach clinicians to think" },
                { text: "beyond the exam.", italic: true },
              ]}
            />

            <div className="mt-8 md:mt-10 max-w-2xl">
              <AnimatedLetters
                text="Founded by Dr. Khaleel and built on a 3-phase model — fundamentals, application, and high-yield revision. Every batch runs the same architecture; only the tempo changes. Some need 6 months. Some 45 days. Some begin before MBBS even ends."
                className="text-base sm:text-lg"
                style={{ color: "#1F1F1F", lineHeight: 1.55 }}
              />
            </div>

            {/* 3-phase */}
            <div className="mt-12 md:mt-16 grid grid-cols-1 sm:grid-cols-3 gap-3">
              {[
                { n: "01", t: "Foundation", d: "Build conceptual depth across all 19 subjects with mentor-led classes and digital notes." },
                { n: "02", t: "Application", d: "Translate concepts into exam reasoning through subject-wise MCQ drills and case discussion." },
                { n: "03", t: "Revision", d: "Super Revision in 45 days. High-yield recalls and rapid mocks to peak before the exam." },
              ].map((p, i) => (
                <InViewScale key={i} delay={i * 0.08}>
                  <div
                    className="helix-glass rounded-2xl p-5 md:p-6 h-full"
                  >
                    <span className="text-[11px] tracking-[0.22em]" style={{ color: "#D8C3A5" }}>{p.n}</span>
                    <h4
                      className="mt-3 text-xl md:text-2xl"
                      style={{ color: "#F2EAD8", letterSpacing: "-0.02em" }}
                    >
                      {p.t}
                    </h4>
                    <p className="mt-2 text-sm" style={{ color: "#B8B0A4", lineHeight: 1.55 }}>
                      {p.d}
                    </p>
                  </div>
                </InViewScale>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PortraitFrame({ label, src }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="relative rounded-3xl overflow-hidden"
      style={{
        aspectRatio: "3 / 4",
        background: "#0E0E10",
        border: "1px solid rgba(216,195,165,0.22)",
        boxShadow: "0 30px 60px -28px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05)",
      }}
    >
      {src ? (
        <img
          src={src}
          alt={label}
          className="absolute inset-0 w-full h-full object-cover"
          style={{
            transform: hover ? "scale(1.06)" : "scale(1.0)",
            transition: "transform 0.9s cubic-bezier(0.16, 1, 0.3, 1)",
          }}
        />
      ) : (
        <div
          className="absolute inset-0"
          style={{
            background:
              "linear-gradient(135deg, rgba(176,141,87,0.45) 0%, rgba(60,48,32,0.55) 55%, rgba(14,14,16,0.95) 100%)",
            transform: hover ? "scale(1.06)" : "scale(1.0)",
            transition: "transform 0.9s cubic-bezier(0.16, 1, 0.3, 1)",
          }}
        />
      )}
      {/* Bottom gradient for label legibility on top of the photo */}
      <div
        className="absolute inset-x-0 bottom-0 h-32 pointer-events-none"
        style={{
          background: "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.65) 100%)",
        }}
      />
      <div className="absolute inset-x-0 bottom-0 p-4 sm:p-5 flex justify-between items-end">
        <span className="text-[10px] tracking-[0.22em] uppercase font-mono" style={{ color: "rgba(242,234,216,0.85)" }}>
          {label}
        </span>
        <IconArrowUpRight size={14} style={{ color: "#D8C3A5" }} />
      </div>
    </div>
  );
}

/* ──────────────── Programs ──────────────── */

const PROGRAM_LIST = [
  {
    icon: <IconStethoscope size={22} />,
    n: "01",
    title: "Regular Batch",
    duration: "6 months",
    desc: "Daily live classes, subject-wise depth and complete digital notes — built for first-attempt clarity.",
  },
  {
    icon: <IconCalendar size={22} />,
    n: "02",
    title: "Semi-Regular",
    duration: "3 months",
    desc: "Accelerated coverage for candidates with a foundation in place. Compressed schedule, full coverage.",
  },
  {
    icon: <IconLayers size={22} />,
    n: "03",
    title: "Super Revision",
    duration: "45 days",
    desc: "High-yield recall sprints to peak right before the exam — pure revision, no padding.",
  },
  {
    icon: <IconBookOpen size={22} />,
    n: "04",
    title: "Abhyas Test Series",
    duration: "7,000+ MCQs",
    desc: "A full MCQ universe modelled on FMGE and NExT — tested, analysed, ranked.",
  },
  {
    icon: <IconGlobe size={22} />,
    n: "05",
    title: "Foundation Batch",
    duration: "Long-form · hybrid",
    desc: "Early integration for students studying abroad — concept building from MBBS year one.",
  },
  {
    icon: <IconSmartphone size={22} />,
    n: "06",
    title: "Online App",
    duration: "Always-on",
    desc: "The full Arise classroom in your pocket — live, recorded, MCQs and notes.",
  },
];

function ProgramCard({ p, i }) {
  const [hover, setHover] = React.useState(false);
  return (
    <InViewScale delay={i * 0.06}>
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        className="helix-glass rounded-2xl p-6 md:p-7 h-full relative overflow-hidden"
        style={{
          border: "1px solid rgba(0,0,0,0.08)",
          transform: hover ? "translateY(-4px)" : "translateY(0)",
          transition: "transform 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
        }}
      >
        {/* Animated glow border */}
        <div
          className="pointer-events-none absolute inset-0 rounded-2xl"
          style={{
            opacity: hover ? 1 : 0,
            transition: "opacity 0.5s ease",
            background:
              "radial-gradient(60% 80% at 0% 0%, rgba(176,141,87,0.18) 0%, transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(216,195,165,0.28) 0%, transparent 60%)",
          }}
        />

        <div className="flex items-start justify-between relative z-10">
          <div
            className="w-12 h-12 rounded-xl flex items-center justify-center"
            style={{
              background: "linear-gradient(135deg, rgba(176,141,87,0.15) 0%, rgba(216,195,165,0.25) 100%)",
              color: "#1F1F1F",
              border: "1px solid rgba(0,0,0,0.06)",
            }}
          >
            {p.icon}
          </div>
          <span className="text-xs tracking-[0.22em]" style={{ color: "#B08D57" }}>{p.n}</span>
        </div>

        <h3
          className="mt-6 text-2xl md:text-[28px]"
          style={{ color: "#1F1F1F", letterSpacing: "-0.02em", lineHeight: 1.1, fontWeight: 500 }}
        >
          {p.title}
        </h3>
        <div
          className="mt-2 text-[11px] tracking-[0.18em] uppercase"
          style={{ color: "#B08D57" }}
        >
          {p.duration}
        </div>
        <p className="mt-4 text-sm md:text-[15px]" style={{ color: "#5C5C5C", lineHeight: 1.55 }}>
          {p.desc}
        </p>

        <a
          href="#"
          className="mt-6 inline-flex items-center gap-2 text-sm font-medium relative z-10"
          style={{ color: "#1F1F1F" }}
        >
          <span>Learn more</span>
          <span
            className="inline-flex items-center justify-center w-7 h-7 rounded-full"
            style={{
              background: "linear-gradient(135deg, #B08D57 0%, #D8C3A5 100%)",
              color: "#fff",
              transform: hover ? "translate(3px, -3px)" : "translate(0, 0)",
              transition: "transform 0.3s ease",
            }}
          >
            <IconArrowRight size={12} style={{ transform: "rotate(-45deg)" }} />
          </span>
        </a>
      </div>
    </InViewScale>
  );
}

function ProgramsSection() {
  return (
    <section
      id="helix-programs"
      data-screen-label="03 Programs"
      className="relative py-24 sm:py-32 md:py-40"
    >
      <div className="relative max-w-7xl mx-auto px-5 sm:px-8 md:px-12">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12 md:mb-16">
          <div>
            <SectionLabel>Programs</SectionLabel>
            <div className="mt-6">
              <MixedHeading
                style={{
                  fontSize: "clamp(36px, 5.4vw, 88px)",
                  lineHeight: 0.96,
                  letterSpacing: "-0.02em",
                  color: "#1F1F1F",
                }}
                parts={[
                  { text: "Six paths through" },
                  { text: "FMGE & NExT.", italic: true },
                ]}
              />
            </div>
          </div>
          <FadeUp delay={0.2}>
            <p className="text-sm sm:text-base max-w-sm" style={{ color: "#5C5C5C", lineHeight: 1.5 }}>
              Every batch runs on the same 3-phase model — only the cadence changes. Some need 6 months, some 45 days, some start before MBBS even ends.
            </p>
          </FadeUp>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-2">
          {PROGRAM_LIST.map((p, i) => <ProgramCard key={i} p={p} i={i} />)}
        </div>
      </div>
    </section>
  );
}

/* ──────────────── Why Choose Arise ──────────────── */

const WHY_LIST = [
  {
    icon: <IconStethoscope size={22} />,
    title: "Expert Faculty",
    desc: "Learn from national-level mentors who specialize in all 19 subjects of the Indian medical curriculum.",
  },
  {
    icon: <IconBookOpen size={22} />,
    title: "Updated Material",
    desc: "Cutting-edge study notes and MCQs designed specifically for the latest FMGE & NExT patterns.",
  },
  {
    icon: <IconActivity size={22} />,
    title: "Proven Results",
    desc: "Consistent track record of producing toppers and the highest passing percentages in India.",
  },
];

function WhyChooseSection() {
  return (
    <section
      id="helix-why"
      data-screen-label="03 Why Arise"
      className="relative py-24 sm:py-32 md:py-40"
    >
      <div className="relative max-w-7xl mx-auto px-5 sm:px-8 md:px-12">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12 md:mb-16">
          <div>
            <SectionLabel>Why Choose Arise</SectionLabel>
            <div className="mt-6">
              <MixedHeading
                style={{
                  fontSize: "clamp(36px, 5.4vw, 84px)",
                  lineHeight: 0.96,
                  letterSpacing: "-0.02em",
                  color: "#1F1F1F",
                }}
                parts={[
                  { text: "Reasons medicos" },
                  { text: "rise with us.", italic: true },
                ]}
              />
            </div>
          </div>
          <FadeUp delay={0.2}>
            <p className="text-sm sm:text-base max-w-sm" style={{ color: "#5C5C5C", lineHeight: 1.5 }}>
              Three pillars behind every first-attempt pass — faculty, material and outcomes that medicos can stake their preparation on.
            </p>
          </FadeUp>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5">
          {WHY_LIST.map((w, i) => (
            <InViewScale key={i} delay={i * 0.08}>
              <div className="helix-glass rounded-2xl p-6 md:p-7 h-full">
                <span
                  className="w-11 h-11 rounded-xl inline-flex items-center justify-center"
                  style={{
                    background: "linear-gradient(135deg, rgba(176,141,87,0.28) 0%, rgba(216,195,165,0.45) 100%)",
                    color: "#D8C3A5",
                    border: "1px solid rgba(216,195,165,0.25)",
                  }}
                >
                  {w.icon}
                </span>
                <h4
                  className="mt-5 text-xl md:text-2xl"
                  style={{ color: "#F2EAD8", letterSpacing: "-0.01em" }}
                >
                  {w.title}
                </h4>
                <p
                  className="mt-3 text-sm md:text-[15px]"
                  style={{ color: "rgba(242,234,216,0.78)", lineHeight: 1.6 }}
                >
                  {w.desc}
                </p>
              </div>
            </InViewScale>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HelixNav, HeroSection, AboutSection, ProgramsSection, WhyChooseSection });