sui_blog/src/components/HeroSection.tsx

"use client";

import Link from "next/link";
import gsap from "gsap";
import { useGsapAnimation } from "./useGsapAnimation";

export default function HeroSection() {
  const ref = useGsapAnimation<HTMLElement>((scope, isReduced) => {
    if (isReduced) return;

    const tl = gsap.timeline({ delay: 0.2 });

    tl.from(".hero-subtitle", { y: 20, opacity: 0, duration: 0.6, ease: "power3.out" });

    const heading = scope.querySelector<HTMLElement>("[data-heading]");
    if (heading) {
      const spans = heading.querySelectorAll(".hero-char");
      tl.from(
        spans,
        {
          y: 40,
          opacity: 0,
          filter: "blur(6px)",
          duration: 0.6,
          stagger: 0.035,
          ease: "power3.out",
        },
        "-=0.3"
      );
    }

    tl.from(".hero-desc", { y: 20, opacity: 0, duration: 0.6, ease: "power3.out" }, "-=0.3");
    tl.from(".hero-btn", { y: 15, opacity: 0, duration: 0.5, stagger: 0.1, ease: "power3.out" }, "-=0.3");
    tl.from(".hero-divider", { scaleX: 0, opacity: 0, duration: 0.8, ease: "power2.inOut" });
  }, []);

  // 逐字拆分标题
  const headingChars = (text: string) =>
    [...text].map((char, i) => (
      <span key={i} className="hero-char inline-block" style={char === " " ? { width: "0.3em" } : undefined}>
        {char}
      </span>
    ));

  return (
    <section ref={ref as React.RefObject<HTMLElement>} className="px-page max-w-5xl mx-auto pt-20 pb-16 md:pt-28 md:pb-24">
      <div className="max-w-2xl">
        <p className="hero-subtitle font-sans text-sm tracking-widest text-ink-muted uppercase mb-6">
          一个来自于Sui的个人Blog
        </p>
        <h1
          data-heading
          className="font-display text-4xl md:text-6xl font-light text-ink leading-tight tracking-tight"
        >
          {headingChars("写字，")}
          <br />
          {/* 仅高亮关键词「思考」，避免整句赭红造成视觉重量过重 */}
          <span>
            {headingChars("是一种 ")}
            <span className="text-terracotta">{headingChars("思考")}</span>
            {headingChars(" 的方式")}
          </span>
        </h1>
        <p className="hero-desc mt-6 font-body text-lg text-ink-muted leading-relaxed max-w-lg">
          这里记录着技术探索中的发现、旅途中的风景、阅读时的感悟，以及一个小镇青年创业路上的点点滴滴。
        </p>
        <div className="mt-8 flex flex-wrap items-center gap-4">
          <Link
            href="/blog"
            className="hero-btn inline-flex items-center gap-2 px-6 py-3 rounded-full bg-ink text-cream font-sans text-sm tracking-wide hover:bg-terracotta transition-colors duration-300"
          >
            开始阅读
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M4 8h8M9 5l3 3-3 3" />
            </svg>
          </Link>
          <Link
            href="/about"
            className="hero-btn inline-flex items-center gap-2 px-6 py-3 rounded-full border border-warm-gray/30 text-ink-muted font-sans text-sm tracking-wide hover:border-terracotta/40 hover:text-terracotta transition-colors duration-300"
          >
            了解更多
          </Link>
        </div>
      </div>

      {/* 装饰分隔线 */}
      <div className="hero-divider mt-20 flex items-center gap-4 text-warm-gray origin-center">
        <div className="h-px flex-1 bg-gradient-to-r from-warm-gray/20 to-transparent" />
        <span className="font-display text-sm italic">精选文章</span>
        <div className="h-px flex-1 bg-gradient-to-l from-warm-gray/20 to-transparent" />
      </div>
    </section>
  );
}