// Arise Helix — Lab, Testimonials, Final CTA, Footer.

/* ──────────────── The Arise Lab (Creator Lab equivalent) ──────────────── */

function HolographicSculpture() {
  // ECG / heartbeat trace — replaces the old rotating DNA sculpture.
  // One ECG cycle is 200 units wide; we tile horizontally and scroll left
  // via the `helixEcg` keyframe so the trace appears to flow continuously.
  const oneCycle =
    "M 0 150 L 38 150 Q 44 132 50 150 L 80 150 L 86 156 L 92 60 L 98 168 L 130 150 Q 138 128 146 150 L 200 150";
  return (
    <div
      className="relative w-full overflow-hidden rounded-2xl"
      style={{
        aspectRatio: "1 / 1",
        maxWidth: 520,
        margin: "0 auto",
        background: "linear-gradient(180deg, rgba(14,14,16,0.55) 0%, rgba(8,8,10,0.7) 100%)",
        border: "1px solid rgba(216,195,165,0.18)",
        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.05), 0 22px 50px -22px rgba(0,0,0,0.65)",
      }}
    >
      {/* Ambient gold halo */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "radial-gradient(50% 50% at 50% 50%, rgba(176,141,87,0.22) 0%, transparent 70%)",
          filter: "blur(20px)",
        }}
      />

      {/* Monitor grid */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          backgroundImage:
            "linear-gradient(rgba(216,195,165,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(216,195,165,0.08) 1px, transparent 1px)",
          backgroundSize: "26px 26px",
          opacity: 0.55,
        }}
      />

      {/* ECG SVG */}
      <svg
        viewBox="0 0 800 300"
        preserveAspectRatio="xMidYMid meet"
        className="absolute inset-0 w-full h-full"
      >
        <defs>
          <filter id="ecgGlow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="3" />
          </filter>
        </defs>

        {/* Subtle baseline */}
        <line
          x1="0" y1="150" x2="800" y2="150"
          stroke="rgba(216,195,165,0.12)"
          strokeWidth="0.5"
          strokeDasharray="3 5"
        />

        {/* Scrolling trace — 6 cycles tiled across, animated leftward */}
        <g style={{ animation: "helixEcg 2.4s linear infinite" }}>
          {[0, 1, 2, 3, 4, 5].map((i) => (
            <g key={i} transform={`translate(${i * 200} 0)`}>
              <path d={oneCycle} stroke="rgba(216,195,165,0.45)" strokeWidth="5" fill="none" filter="url(#ecgGlow)" />
              <path d={oneCycle} stroke="#D8C3A5" strokeWidth="1.8" fill="none" strokeLinejoin="round" strokeLinecap="round" />
            </g>
          ))}
        </g>
      </svg>

      {/* Corner stats — gives the medical-monitor authenticity */}
      <div
        className="absolute top-4 left-4 text-[10px] tracking-[0.22em] uppercase font-mono"
        style={{ color: "rgba(216,195,165,0.85)" }}
      >
        ECG · LEAD II
      </div>
      <div
        className="absolute top-4 right-4 flex items-center gap-2 text-[10px] tracking-[0.22em] uppercase font-mono"
        style={{ color: "rgba(216,195,165,0.85)" }}
      >
        <span
          className="inline-block w-2 h-2 rounded-full"
          style={{
            background: "#D8C3A5",
            boxShadow: "0 0 10px rgba(216,195,165,0.9)",
            animation: "helixHeartBlip 0.95s ease-in-out infinite",
          }}
        />
        72 BPM
      </div>
      <div
        className="absolute bottom-4 left-4 text-[10px] tracking-[0.22em] uppercase font-mono"
        style={{ color: "rgba(216,195,165,0.6)" }}
      >
        SpO₂ 99% · BP 118/76
      </div>
      <div
        className="absolute bottom-4 right-4 text-[10px] tracking-[0.22em] uppercase font-mono"
        style={{ color: "rgba(216,195,165,0.6)" }}
      >
        ARISE LAB · LIVE
      </div>
    </div>
  );
}

function DNARing({ radius = 150, thickness = 1.5, opacity = 0.5, freq = 4, phaseOffset = 0 }) {
  // Render a horizontal helix-like band that wraps in a circle.
  const samples = 220;
  let pathA = "";
  let pathB = "";
  const rungs = [];
  for (let i = 0; i <= samples; i++) {
    const t = i / samples;
    const ang = t * Math.PI * 2;
    const wobble = Math.sin(t * freq * Math.PI * 2 + phaseOffset) * 20;
    const r1 = radius + wobble;
    const r2 = radius - wobble;
    const xa = Math.cos(ang) * r1;
    const ya = Math.sin(ang) * r1;
    const xb = Math.cos(ang) * r2;
    const yb = Math.sin(ang) * r2;
    pathA += (i === 0 ? "M " : "L ") + xa.toFixed(2) + " " + ya.toFixed(2) + " ";
    pathB += (i === 0 ? "M " : "L ") + xb.toFixed(2) + " " + yb.toFixed(2) + " ";
    if (i % 14 === 0) rungs.push({ x1: xa, y1: ya, x2: xb, y2: yb, t });
  }
  const size = (radius + 30) * 2;
  return (
    <svg width={size} height={size} viewBox={`-${size / 2} -${size / 2} ${size} ${size}`}>
      <defs>
        <linearGradient id={"g" + radius} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor={`rgba(176,141,87,${opacity})`} />
          <stop offset="100%" stopColor={`rgba(216,195,165,${opacity})`} />
        </linearGradient>
      </defs>
      <path d={pathA} stroke={`url(#g${radius})`} strokeWidth={thickness} fill="none" />
      <path d={pathB} stroke={`url(#g${radius})`} strokeWidth={thickness} fill="none" />
      {rungs.map((r, i) => (
        <line
          key={i}
          x1={r.x1}
          y1={r.y1}
          x2={r.x2}
          y2={r.y2}
          stroke={`rgba(176,141,87,${opacity * 0.7})`}
          strokeWidth={0.8}
        />
      ))}
    </svg>
  );
}

function LabSection() {
  return (
    <section
      id="helix-lab"
      data-screen-label="04 Lab"
      className="relative py-24 sm:py-32 md:py-44 overflow-hidden"
    >
      <HelixParticles count={26} />

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

        <div className="mt-10 md:mt-14 grid grid-cols-12 gap-8 md:gap-12 items-center">
          {/* Left — copy + floating UI panels */}
          <div className="col-span-12 lg:col-span-6 relative">
            <MixedHeading
              style={{
                fontSize: "clamp(36px, 5.4vw, 84px)",
                lineHeight: 0.96,
                letterSpacing: "-0.02em",
                color: "#1F1F1F",
              }}
              parts={[
                { text: "Where prep" },
                { text: "becomes practice.", italic: true },
              ]}
            />
            <FadeUp delay={0.2}>
              <p
                className="mt-6 text-base md:text-lg max-w-lg"
                style={{ color: "#1F1F1F", lineHeight: 1.55 }}
              >
                Inside the Arise Lab, every concept lives on a timeline —
                lectures, MCQs, mocks and mentor sessions stitched into one
                living curriculum that adapts as you do.
              </p>
            </FadeUp>

            <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-3">
              <LabPanel
                icon={<IconActivity size={18} />}
                t="Vitals dashboard"
                d="Track accuracy, recall and streaks across 19 subjects."
                delay={0.0}
              />
              <LabPanel
                icon={<IconWaveform size={18} />}
                t="Recall waveform"
                d="See your retention curve and the next interval to revisit."
                delay={0.1}
              />
              <LabPanel
                icon={<IconBeaker size={18} />}
                t="Adaptive drills"
                d="Daily MCQ sets tuned to your last 7 days of performance."
                delay={0.2}
              />
              <LabPanel
                icon={<IconSparkle size={18} />}
                t="Mentor pings"
                d="Get a 1:1 nudge when a topic plateau is detected."
                delay={0.3}
              />
            </div>
          </div>

          {/* Right — holographic sculpture */}
          <div className="col-span-12 lg:col-span-6 flex items-center justify-center">
            <HolographicSculpture />
          </div>
        </div>

        {/* Timeline bar */}
        <FadeUp delay={0.3}>
          <div
            className="mt-16 md:mt-24 rounded-2xl p-5 md:p-7 relative overflow-hidden"
            style={{
              background: "linear-gradient(180deg, rgba(22,22,24,0.62) 0%, rgba(14,14,16,0.55) 100%)",
              border: "1px solid rgba(216,195,165,0.18)",
              backdropFilter: "blur(14px) saturate(140%)",
              WebkitBackdropFilter: "blur(14px) saturate(140%)",
              boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06), 0 22px 50px -22px rgba(0,0,0,0.65)",
            }}
          >
            <div className="flex items-center justify-between mb-4">
              <span className="text-[11px] tracking-[0.22em] uppercase" style={{ color: "#5C5C5C" }}>
                6-month timeline · Regular Batch
              </span>
              <span className="text-[11px] tracking-[0.18em]" style={{ color: "#B08D57" }}>
                LIVE
              </span>
            </div>
            <Timeline />
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

function LabPanel({ icon, t, d, delay = 0 }) {
  return (
    <InViewScale delay={delay}>
      <div
        className="rounded-2xl p-5 h-full"
        style={{
          background: "linear-gradient(180deg, rgba(22,22,24,0.62) 0%, rgba(14,14,16,0.55) 100%)",
          border: "1px solid rgba(216,195,165,0.18)",
          backdropFilter: "blur(14px) saturate(140%)",
          WebkitBackdropFilter: "blur(14px) saturate(140%)",
          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06), 0 22px 50px -22px rgba(0,0,0,0.65)",
        }}
      >
        <div className="flex items-center gap-2.5">
          <span
            className="w-9 h-9 rounded-lg inline-flex items-center justify-center"
            style={{
              background: "linear-gradient(135deg, rgba(176,141,87,0.18) 0%, rgba(216,195,165,0.30) 100%)",
              color: "#1F1F1F",
            }}
          >
            {icon}
          </span>
          <div className="text-sm md:text-[15px] font-medium" style={{ color: "#1F1F1F" }}>{t}</div>
        </div>
        <p className="mt-2 text-xs md:text-[13px]" style={{ color: "#5C5C5C", lineHeight: 1.55 }}>{d}</p>
      </div>
    </InViewScale>
  );
}

function Timeline() {
  const phases = [
    { label: "Foundation", from: 0, to: 0.55, color: "#B08D57" },
    { label: "Application", from: 0.55, to: 0.85, color: "#D8C3A5" },
    { label: "Revision", from: 0.85, to: 1, color: "#1F1F1F" },
  ];
  return (
    <div>
      <div className="relative h-3 rounded-full overflow-hidden" style={{ background: "rgba(0,0,0,0.06)" }}>
        {phases.map((p, i) => (
          <div
            key={i}
            className="absolute top-0 h-full"
            style={{
              left: `${p.from * 100}%`,
              width: `${(p.to - p.from) * 100}%`,
              background: p.color,
              opacity: 0.85,
            }}
          />
        ))}
      </div>
      <div className="mt-3 flex justify-between text-[10px] tracking-[0.18em] uppercase" style={{ color: "#5C5C5C" }}>
        {phases.map((p, i) => (
          <span key={i} style={{ color: i === 0 ? "#1F1F1F" : "#5C5C5C" }}>{p.label}</span>
        ))}
      </div>
    </div>
  );
}

/* ──────────────── Testimonials ──────────────── */

const TESTIMONIALS = [
  {
    name: "Dr. Jithu Sakariya",
    role: "FMG Alumnus",
    quote: "Arise Medical Academy simplifies the 19 subjects in a way that truly boosts confidence. The support system, from faculty guidance to the 24/7 reading room, made my first-attempt pass possible.",
    image: "assets/group-four-south-asian-men-s-posed-business-meeting-cafe-indians-together-sign-important-documents-contract-study-work.jpg",
  },
  {
    name: "Dr. Aarav Mehta",
    role: "Regular Batch · 6-month track",
    quote: "Mentors who actually re-explain until the concept lands. The 3-phase rhythm finally made revision feel structured.",
  },
  {
    name: "Dr. Priya Nair",
    role: "Super Revision · 45-day sprint",
    quote: "Forty-five days of pure high-yield work. By exam day I'd seen every shape an MCQ could take.",
  },
  {
    name: "Dr. Imran Sheikh",
    role: "Foundation Batch · in-university",
    quote: "Started in second year and never had to play catch-up. By the time FMGE arrived, it felt like home turf.",
  },
];

function TestimonialsSection() {
  return (
    <section
      id="helix-testimonials"
      data-screen-label="05 Voices"
      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="mb-12 md:mb-16">
          <SectionLabel>Voices from the Arise World</SectionLabel>
          <div className="mt-6">
            <MixedHeading
              style={{
                fontSize: "clamp(36px, 5.4vw, 84px)",
                lineHeight: 0.96,
                letterSpacing: "-0.02em",
                color: "#1F1F1F",
              }}
              parts={[
                { text: "Stories from medicos who" },
                { text: "rose with us.", italic: true },
              ]}
            />
          </div>
        </div>

        <div className="flex justify-center">
          <TestimonialCard t={TESTIMONIALS[0]} i={0} />
        </div>
      </div>
    </section>
  );
}

function TestimonialCard({ t, i }) {
  const [hover, setHover] = React.useState(false);
  return (
    <InViewScale delay={i * 0.06}>
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        className="helix-glass rounded-3xl p-5 sm:p-6 md:p-8 relative overflow-hidden w-full"
        style={{
          maxWidth: 520,
          transform: hover ? "translateY(-3px)" : "translateY(0)",
          transition: "transform 0.45s cubic-bezier(0.16, 1, 0.3, 1)",
        }}
      >
        {/* Hover glow */}
        <div
          className="pointer-events-none absolute inset-0 rounded-3xl"
          style={{
            opacity: hover ? 1 : 0,
            transition: "opacity 0.4s ease",
            background:
              "radial-gradient(60% 80% at 0% 0%, rgba(176,141,87,0.18) 0%, transparent 65%)",
          }}
        />

        <div
          className="rounded-2xl w-full mb-5 relative overflow-hidden"
          style={{
            aspectRatio: "16 / 10",
            background: "#0E0E10",
          }}
        >
          {t.image ? (
            <img
              src={encodeURI(t.image)}
              alt={`${t.name} — ${t.role}`}
              className="absolute inset-0 w-full h-full object-cover"
              style={{
                transform: hover ? "scale(1.05)" : "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.4) 0%, rgba(60,48,32,0.6) 60%, rgba(14,14,16,0.9) 100%)",
              }}
            />
          )}
          {/* Subtle dark gradient at bottom for label legibility */}
          <div
            className="absolute inset-x-0 bottom-0 h-20 pointer-events-none"
            style={{
              background: "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%)",
            }}
          />
        </div>

        <IconQuote size={22} style={{ color: "#B08D57" }} />
        <p
          className="mt-3 text-lg md:text-xl"
          style={{ color: "#1F1F1F", lineHeight: 1.4 }}
        >
          <span className="helix-serif">"{t.quote}"</span>
        </p>
        <div className="mt-6 flex items-center justify-between">
          <div>
            <div className="text-sm font-medium" style={{ color: "#1F1F1F" }}>{t.name}</div>
            <div className="text-[11px] tracking-[0.18em] uppercase mt-0.5" style={{ color: "#5C5C5C" }}>
              {t.role}
            </div>
          </div>
          <IconArrowUpRight size={16} style={{ color: "#1F1F1F" }} />
        </div>
      </div>
    </InViewScale>
  );
}

/* ──────────────── Final CTA ──────────────── */

function FinalCTASection() {
  return (
    <section
      id="helix-cta"
      data-screen-label="06 CTA"
      className="relative py-24 sm:py-32 md:py-44 overflow-hidden"
    >
      <div className="relative max-w-5xl mx-auto px-5 sm:px-8 md:px-12 text-center">
        <SectionLabel>Ready to clear FMGE / NExT?</SectionLabel>

        <div className="mt-10 md:mt-14">
          <MixedHeading
            style={{
              fontSize: "clamp(44px, 7vw, 120px)",
              lineHeight: 0.95,
              letterSpacing: "-0.03em",
              color: "#1F1F1F",
            }}
            parts={[
              { text: "Your medicine deserves" },
              { text: "a new dimension.", italic: true },
            ]}
          />
        </div>

        <FadeUp delay={0.25}>
          <p
            className="mt-8 text-lg md:text-xl max-w-2xl mx-auto"
            style={{ color: "#5C5C5C", lineHeight: 1.5 }}
          >
            Join the next generation of clinicians — across Hyderabad, Chennai, Kerala, Delhi and Jaipur.
          </p>
        </FadeUp>

        <FadeUp delay={0.4}>
          <div className="mt-12 flex items-center justify-center">
            <ApplyButton />
          </div>
        </FadeUp>

        {/* Contact strip */}
        <FadeUp delay={0.55}>
          <div className="mt-16 grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-3xl mx-auto">
            <ContactTile
              icon={<IconPhone size={14} />}
              label="Phone"
              value={["+91 89779 41723", "+91 89779 42723"]}
              href="tel:+918977941723"
            />
            <ContactTile
              icon={<IconMail size={14} />}
              label="Email"
              value="info@arisemedicalacademy.com"
              href="mailto:info@arisemedicalacademy.com"
            />
            <ContactTile
              icon={<IconGlobe size={14} />}
              label="Website"
              value="www.arisemedicalacademy.com"
              href="https://www.arisemedicalacademy.com"
              className="sm:col-span-2"
            />
          </div>
        </FadeUp>

        <FadeUp delay={0.7}>
          <div className="mt-8 flex flex-wrap justify-center gap-2">
            {["Hyderabad", "Chennai", "Kerala", "Delhi", "Jaipur"].map((c) => (
              <span
                key={c}
                className="helix-glass inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs"
                style={{ border: "1px solid rgba(0,0,0,0.08)", color: "#1F1F1F" }}
              >
                <IconMapPin size={11} />
                {c}
              </span>
            ))}
          </div>
        </FadeUp>
      </div>

      {/* Footer */}
      <div className="relative max-w-7xl mx-auto px-5 sm:px-8 md:px-12 mt-24">
        <div
          className="pt-10 flex flex-col md:flex-row md:items-end justify-between gap-8"
          style={{ borderTop: "1px solid rgba(0,0,0,0.08)" }}
        >
          <div>
            <div
              style={{
                color: "#1F1F1F",
                fontWeight: 500,
                fontSize: "clamp(40px, 8vw, 96px)",
                lineHeight: 0.9,
                letterSpacing: "-0.04em",
              }}
            >
              Arise
              <span className="helix-serif" style={{ fontSize: "0.42em", marginLeft: "0.1em", color: "#5C5C5C" }}>
                Medical Academy
              </span>
            </div>
            <p className="mt-3 text-xs sm:text-sm max-w-md" style={{ color: "#5C5C5C", lineHeight: 1.45 }}>
              Bridging the gap for global medicos — across Hyderabad, Chennai, Kerala, Delhi and Jaipur.
            </p>
          </div>
          <div
            className="flex flex-col sm:flex-row gap-3 sm:gap-8 text-[11px] uppercase tracking-[0.2em]"
            style={{ color: "#5C5C5C" }}
          >
            <a href="#helix-programs">Programs</a>
            <a href="#helix-about">Faculty</a>
            <a href="#helix-lab">Labs</a>
            <a href="#helix-testimonials">Voices</a>
            <a href="#helix-cta">Contact</a>
          </div>
        </div>
        <div
          className="mt-8 flex flex-col sm:flex-row justify-between gap-3 text-[11px]"
          style={{ color: "#5C5C5C" }}
        >
          <span>© 2026 Arise Medical Academy.</span>
        </div>
      </div>
    </section>
  );
}

function ApplyButton() {
  const ref = React.useRef(null);
  const [t, setT] = React.useState({ x: 0, y: 0 });
  const [hover, setHover] = React.useState(false);
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;
    setT({ x: (e.clientX - cx) * 0.35, y: (e.clientY - cy) * 0.35 });
  };
  return (
    <button
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={() => { setT({ x: 0, y: 0 }); setHover(false); }}
      onMouseEnter={() => setHover(true)}
      className="relative inline-flex items-center gap-3 rounded-full pl-8 pr-2 py-2"
      style={{
        background: "linear-gradient(135deg, #1F1F1F 0%, #3a3a3a 100%)",
        color: "#fff",
        transform: `translate3d(${t.x}px, ${t.y}px, 0)`,
        transition: "transform 0.28s cubic-bezier(0.16, 1, 0.3, 1)",
        boxShadow: hover
          ? "0 18px 60px -10px rgba(176,141,87,0.6), 0 0 0 1px rgba(176,141,87,0.45)"
          : "0 10px 40px -10px rgba(31,31,31,0.4)",
      }}
    >
      {/* Pulse ring */}
      <span
        className="absolute inset-0 rounded-full pointer-events-none"
        style={{
          animation: "helixPulseRing 2.4s ease-out infinite",
          border: "1px solid rgba(176,141,87,0.6)",
        }}
      />
      <span className="text-lg md:text-xl font-medium tracking-tight">Apply Now</span>
      <span
        className="inline-flex items-center justify-center rounded-full"
        style={{
          width: 48,
          height: 48,
          background: "linear-gradient(135deg, #B08D57 0%, #D8C3A5 100%)",
          color: "#1F1F1F",
          transform: hover ? "translateX(4px) scale(1.05)" : "translateX(0)",
          transition: "transform 0.3s ease",
        }}
      >
        <IconArrowRight size={18} />
      </span>
    </button>
  );
}

function ContactTile({ icon, label, value, href, className = "" }) {
  const [hover, setHover] = React.useState(false);
  const values = Array.isArray(value) ? value : [value];
  const Wrapper = href ? "a" : "div";
  const wrapperProps = href
    ? { href, target: href.startsWith("http") ? "_blank" : undefined, rel: href.startsWith("http") ? "noopener noreferrer" : undefined }
    : {};
  return (
    <Wrapper
      {...wrapperProps}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className={`helix-glass rounded-2xl px-5 py-4 text-left flex items-center justify-between gap-4 w-full ${className}`}
      style={{
        transform: hover ? "translateY(-2px)" : "translateY(0)",
        transition: "transform 0.3s ease, border-color 0.35s ease, box-shadow 0.35s ease",
        textDecoration: "none",
      }}
    >
      <div className="flex items-center gap-3 min-w-0 flex-1">
        <span
          className="w-9 h-9 rounded-lg inline-flex items-center justify-center shrink-0"
          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)",
          }}
        >
          {icon}
        </span>
        <div className="min-w-0 flex-1">
          <div className="text-[10px] tracking-[0.22em] uppercase" style={{ color: "rgba(216,195,165,0.85)" }}>{label}</div>
          <div className="mt-1 flex flex-col gap-0.5">
            {values.map((v, idx) => (
              <span
                key={idx}
                className="text-sm md:text-[15px] truncate"
                style={{ color: "#F2EAD8", letterSpacing: "0.01em" }}
                title={v}
              >
                {v}
              </span>
            ))}
          </div>
        </div>
      </div>
      <IconArrowUpRight
        size={14}
        style={{
          color: "#D8C3A5",
          opacity: hover ? 1 : 0.55,
          transform: hover ? "translate(2px,-2px)" : "translate(0,0)",
          transition: "transform 0.3s ease, opacity 0.3s ease",
          flexShrink: 0,
        }}
      />
    </Wrapper>
  );
}

Object.assign(window, { LabSection, TestimonialsSection, FinalCTASection });