novalon-website/src/app/(marketing)/news/news-detail-content-v3.tsx

'use client';

import { ScrollReveal } from '@/components/ui/scroll-reveal';
import { Badge } from '@/components/ui/badge';
import { Calendar, ArrowLeft, Newspaper, ArrowRight } from 'lucide-react';
import { SectionLabel, EASE_OUT } from '@/components/ui/page-decoration';
import { motion } from 'framer-motion';
import type { NewsItem } from '@/lib/constants/news';

function RelatedNewsCard({ news, index }: { news: NewsItem; index: number }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-80px' }}
      transition={{ duration: 0.5, delay: index * 0.1, ease: EASE_OUT }}
    >
      <a
        href={`/news/${news.id}`}
        className="group relative block border border-border-primary hover:border-brand/30 bg-white transition-all duration-500 hover:-translate-y-2 overflow-hidden h-full"
      >
        <div className="absolute top-0 left-0 bottom-0 w-1 bg-brand scale-y-0 group-hover:scale-y-100 transition-transform duration-500 origin-top" />

        <div className="aspect-video bg-bg-secondary overflow-hidden">
          {news.image ? (
            <img
              src={news.image}
              alt={news.title}
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
            />
          ) : (
            <div className="w-full h-full bg-gradient-to-br from-brand/[0.08] to-bg-secondary flex items-center justify-center">
              <Newspaper className="w-10 h-10 text-brand/30" />
            </div>
          )}
        </div>

        <div className="p-5 sm:p-6">
          <Badge variant="outline" className="mb-3 text-xs border-brand/30 text-brand">
            {news.category}
          </Badge>
          <h3 className="text-base font-semibold text-ink mb-2 line-clamp-2 group-hover:text-brand transition-colors duration-300 leading-snug">
            {news.title}
          </h3>
          <p className="text-sm text-text-secondary line-clamp-2 leading-relaxed">{news.excerpt}</p>
        </div>
      </a>
    </motion.div>
  );
}

interface NewsDetailContentV3Props {
  news: NewsItem;
  relatedNews?: NewsItem[];
}

export default function NewsDetailContentV3({ news, relatedNews = [] }: NewsDetailContentV3Props) {

  return (
    <div className="min-h-screen bg-white text-ink overflow-x-hidden">
      {/* Hero Section */}
      <section className="relative pt-28 sm:pt-32 md:pt-40 pb-16 sm:pb-20 md:pb-24 overflow-hidden">
        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
          <ScrollReveal>
            <nav className="flex items-center gap-2 text-sm text-text-muted mb-8 sm:mb-10">
              <a href="/news" className="hover:text-brand transition-colors duration-300">
                新闻动态
              </a>
              <span>/</span>
              <span className="text-text-secondary line-clamp-1">{news.title}</span>
            </nav>
          </ScrollReveal>

          <ScrollReveal delay={0.1} className="max-w-4xl">
            <Badge variant="outline" className="mb-6 border-brand/30 text-brand text-sm">
              {news.category}
            </Badge>

            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
              {news.title}
            </h1>

            <div className="flex items-center gap-6 mt-8 text-text-muted text-sm">
              <div className="flex items-center gap-2">
                <Calendar className="w-4 h-4" />
                {news.date}
              </div>
            </div>

            <div className="mt-10 h-px bg-gradient-to-r from-brand/50 via-border-primary to-transparent" />
          </ScrollReveal>
        </div>
      </section>

      {/* Article Body Section */}
      <section className="relative pb-20 sm:pb-28 md:pb-36 overflow-hidden bg-white">
        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
          <ScrollReveal className="max-w-4xl mx-auto">
            {/* Featured Image */}
            {news.image ? (
              <div className="aspect-video overflow-hidden mb-10 sm:mb-12 border border-border-primary">
                <img
                  src={news.image}
                  alt={news.title}
                  className="w-full h-full object-cover"
                />
              </div>
            ) : (
              <div className="aspect-video bg-gradient-to-br from-brand/[0.08] to-bg-secondary mb-10 sm:mb-12 flex items-center justify-center border border-border-primary">
                <Newspaper className="w-20 h-20 text-brand/20" />
              </div>
            )}

            {/* Excerpt */}
            <div className="mb-10 sm:mb-12 p-6 sm:p-8 border-t-2 border-brand bg-brand/[0.04]">
              <p className="text-base sm:text-lg text-text-secondary leading-relaxed italic">
                {news.excerpt}
              </p>
            </div>

            {/* Article Content */}
            <div className="text-text-secondary text-base sm:text-lg leading-[1.9] whitespace-pre-line">
              {news.content}
            </div>
          </ScrollReveal>

          {/* Related News */}
          {relatedNews.length > 0 && (
            <div className="mt-20 sm:mt-24 pt-16 sm:pt-20 border-t border-border-primary">
              <ScrollReveal className="mb-12 sm:mb-16">
                <SectionLabel>Related News</SectionLabel>
                <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight leading-tight">
                  相关新闻
                </h2>
              </ScrollReveal>

              <div className="grid md:grid-cols-3 gap-6 sm:gap-8">
                {relatedNews.map((related, idx) => (
                  <RelatedNewsCard key={related.id} news={related} index={idx} />
                ))}
              </div>
            </div>
          )}

          {/* Navigation */}
          <ScrollReveal>
            <div className="mt-16 sm:mt-20 flex flex-col sm:flex-row justify-center gap-4">
              <a
                href="/news"
                className="inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base text-ink border border-border-primary hover:border-border-secondary hover:bg-bg-secondary transition-all duration-300"
              >
                <ArrowLeft className="w-4 h-4" />
                返回新闻列表
              </a>
              <a
                href="/contact"
                className="group inline-flex items-center justify-center gap-2 px-8 py-4 font-medium text-base bg-brand text-white transition-all duration-300 hover:bg-brand/90"
              >
                联系我们
                <ArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
              </a>
            </div>
          </ScrollReveal>
        </div>
      </section>
    </div>
  );
}