'use client';

import { useEffect, useRef, useState } from 'react';
import { motion } from 'framer-motion';
import dynamic from 'next/dynamic';
import { ChevronDown } from 'lucide-react';
import { InkReveal, SealStamp, FloatingElement } from '@/lib/animations';
import type { Product } from '@/lib/constants/products';

const InkBackground = dynamic(
  () => import('@/components/ui/ink-decoration').then(mod => ({ default: mod.InkBackground })),
  { ssr: false }
);

const DataParticleFlow = dynamic(
  () => import('@/components/effects/data-particle-flow').then(mod => ({ default: mod.DataParticleFlow })),
  { ssr: false }
);

interface ProductHeroSectionProps {
  product: Product;
}

export function ProductHeroSection({ product }: ProductHeroSectionProps) {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry?.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.1 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <section
      ref={sectionRef}
      className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-white to-[#F8F8F8]"
    >
      {/* 背景特效 */}
      <InkBackground />
      <DataParticleFlow
        particleCount={80}
        color="var(--color-brand-primary)"
        intensity="subtle"
        shape="square"
        effect="pulse"
      />

      {/* 内容 */}
      <div className="container-wide relative z-10 py-32 md:py-40">
        <div className="max-w-4xl mx-auto text-center">
          {/* 分类标签 - 印章按压效果 */}
          <SealStamp
            delay={0.1}
            className="inline-block px-4 py-2 bg-[var(--color-brand-primary)]/20 rounded-full text-[var(--color-brand-primary)] text-sm mb-6"
          >
            即将上市
          </SealStamp>

          {/* 产品名称 - 模糊揭示入场 */}
          <InkReveal delay={0.2}>
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-[#1C1C1C] mb-6">
              {product.title}
            </h1>
          </InkReveal>

          {/* 价值主张 - 模糊揭示入场 */}
          <InkReveal delay={0.4}>
            <p className="text-lg md:text-xl text-[#5C5C5C] leading-relaxed mb-10 max-w-2xl mx-auto">
              {product.description}
            </p>
          </InkReveal>

          {/* CTA 按钮 */}
          <InkReveal delay={0.6}>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <span className="border-2 border-[#D9D9D9] text-[#999999] px-8 py-4 rounded-lg text-lg font-semibold inline-flex items-center justify-center cursor-not-allowed select-none">
                敬请期待
              </span>
            </div>
          </InkReveal>

        </div>
      </div>

      {/* 滚动指示器 - 浮动元素包裹 */}
      <FloatingElement
        amplitude={10}
        duration={1.5}
        delay={1}
        className="absolute bottom-8 left-1/2 -translate-x-1/2"
      >
        <motion.div
          initial={{ opacity: 0 }}
          animate={isVisible ? { opacity: 1 } : {}}
          transition={{ duration: 0.6, delay: 1 }}
        >
          <div className="text-[#999999]">
            <ChevronDown className="w-8 h-8" />
          </div>
        </motion.div>
      </FloatingElement>
    </section>
  );
}