"use client";

import Image from "next/image";
import { useEffect, useState } from "react";

export default function ParallaxHero() {
  const [y, setY] = useState(0);
  useEffect(() => {
    const onScroll = () => setY(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const maxH = 420;
  const minH = 140;
  const delta = Math.max(0, Math.min(maxH - minH, y));
  const height = maxH - delta;
  const overlayOpacity = 0.25 + delta / (maxH - minH) * 0.15;
  const titleScale = 1 - delta / (maxH - minH) * 0.2;

  return (
    <div className="relative" style={{ height: maxH }}>
      <div className="sticky top-0 z-40">
        <div className="relative w-full" style={{ height }}>
          <Image src="/placeholder.svg" alt="投资者关系" fill className="object-cover" priority />
          <div className="absolute inset-0" style={{ backgroundColor: `rgba(0,0,0,${overlayOpacity})` }} />
          <div className="absolute left-6 md:left-12 bottom-6 md:bottom-10 text-white" style={{ transform: `scale(${titleScale})`, transformOrigin: "left bottom" }}>
            <div className="text-2xl md:text-4xl font-semibold">投资者关系</div>
            <div className="text-lg md:text-2xl mt-1 opacity-90">Investor</div>
          </div>
        </div>
      </div>
    </div>
  );
}