/* About Section */
function AboutSection() {
  const text =
    "Software engineer with a founding track record. Shipped cross-platform mobile, web, and backend products from zero to real users. Co-founded UniTok (500+ users across Android, iOS, and Huawei) and contributed to EcoBill (1st place, national fintech competition). Valedictorian. GPA 3.994. Open to work.";

  return (
    <section
      id="about"
      className="relative min-h-screen flex flex-col items-center justify-center px-5 sm:px-8 md:px-10 py-20"
      style={{ overflowX: "clip" }}
    >
      {/* Corners */}
      {/* Top-left: Chain — rotated, partially off edge */}
      <FadeIn
        delay={0.1}
        x={-80}
        y={0}
        duration={0.9}
        className="absolute top-[2%] left-[5%] sm:left-[7%] md:left-[9%] w-[150px] sm:w-[200px] md:w-[260px] pointer-events-none"
      >
        <img
          src="assets/icons/chain.png"
          alt=""
          className="w-full h-auto"
          style={{ transform: "rotate(-25deg)" }}
        />
      </FadeIn>

      {/* Top-right: Cool Ball — tilted, dramatic */}
      <FadeIn
        delay={0.15}
        x={80}
        y={0}
        duration={0.9}
        className="absolute top-[0%] right-[5%] sm:right-[7%] md:right-[9%] w-[140px] sm:w-[190px] md:w-[240px] pointer-events-none"
      >
        <img
          src="assets/icons/ball-cool.png"
          alt=""
          className="w-full h-auto"
          style={{ transform: "rotate(15deg)" }}
        />
      </FadeIn>

      {/* Bottom-left: Pink Ball — soft, partially cropped */}
      <FadeIn
        delay={0.25}
        x={-80}
        y={0}
        duration={0.9}
        className="absolute bottom-[4%] left-[5%] sm:left-[8%] md:left-[11%] w-[130px] sm:w-[175px] md:w-[220px] pointer-events-none"
      >
        <img
          src="assets/icons/ball-pink.png"
          alt=""
          className="w-full h-auto"
          style={{ transform: "rotate(10deg)" }}
        />
      </FadeIn>

      {/* Bottom-right: Coin Toss — playful angle */}
      <FadeIn
        delay={0.3}
        x={80}
        y={0}
        duration={0.9}
        className="absolute bottom-[2%] right-[5%] sm:right-[8%] md:right-[11%] w-[160px] sm:w-[210px] md:w-[270px] pointer-events-none"
      >
        <img
          src="assets/icons/coin-toss.png"
          alt=""
          className="w-full h-auto"
          style={{ transform: "rotate(-12deg)" }}
        />
      </FadeIn>

      {/* Content */}
      <div className="flex flex-col items-center gap-10 sm:gap-14 md:gap-16 relative z-10">
        <FadeIn delay={0} y={40}>
          <h2
            className="hero-heading font-black uppercase leading-none tracking-tight text-center"
            style={{ fontSize: "clamp(3rem, 12vw, 160px)" }}
          >
            About me
          </h2>
        </FadeIn>

        <AnimatedText
          text={text}
          className="text-[#D7E2EA] font-medium text-center leading-relaxed max-w-[680px]"
          style={{ fontSize: "clamp(1rem, 2vw, 1.35rem)", wordBreak: "normal", overflowWrap: "normal", hyphens: "none" }}
        />
      </div>

      <div className="mt-16 sm:mt-20 md:mt-24 relative z-10">
        <FadeIn delay={0.1} y={20}>
          <ContactButton />
        </FadeIn>
      </div>
    </section>
  );
}

Object.assign(window, { AboutSection });