'use client';

import { useState, useEffect } from 'react';
import { StaticLink } from '@/components/ui/static-link';
import Image from 'next/image';
import { ArrowLeft, Phone } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { RippleButton } from '@/components/ui/ripple-button';

/**
 * 产品站专属 Header
 *
 * 与主站 Header 的区别：
 * - 无导航菜单（产品列表、关于我们等）
 * - 只保留 Logo + 返回主站按钮
 * - 始终浅色毛玻璃风格（适配产品页浅色主题）
 * - 更简洁的视觉层次，强化"独立产品站"感知
 */
function ProductHeaderContent() {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <motion.header
      className="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] }}
    >
      <div
        className={`transition-all duration-300 ${
          isScrolled
            ? 'bg-white/90 backdrop-blur-xl border-b border-[#E5E5E5] shadow-sm'
            : 'bg-transparent'
        }`}
      >
        <div className="container-wide">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center gap-3">
              {/* Logo */}
              <StaticLink href="/" className="flex items-center gap-3 group">
                <Image
                  src="/logo.svg"
                  alt="Novalon"
                  width={120}
                  height={32}
                  className="h-8 w-auto"
                  priority
                />
              </StaticLink>

              {/* 立即咨询 CTA */}
              <RippleButton
                href="/contact"
                className="bg-[#C41E3A] hover:bg-[#A01830] text-white px-5 py-2 rounded-lg text-sm font-semibold inline-flex items-center gap-2"
                rippleColor="rgba(255, 255, 255, 0.3)"
              >
                <Phone className="w-4 h-4" />
                <span className="hidden md:inline">联系我们</span>
              </RippleButton>
            </div>

            {/* 返回主站按钮 */}
            <StaticLink href="/">
              <Button
                variant="outline"
                size="sm"
                className="border-[#E5E5E5] text-[#5C5C5C] hover:text-[#1C1C1C] hover:bg-[#F5F5F5] hover:border-[#C41E3A]/30 transition-all duration-200 text-sm"
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                返回主站
              </Button>
            </StaticLink>
          </div>
        </div>
      </div>
    </motion.header>
  );
}

export function ProductHeader() {
  return (
    <AnimatePresence mode="wait">
      <ProductHeaderContent />
    </AnimatePresence>
  );
}