'use client'

import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import Link from 'next/link'
import { ArrowRight, Calendar, Tag } from 'lucide-react'

// Mock Data for Briefings
const briefings = [
  {
    id: 1,
    title: 'The .AI Gold Rush: Analysis of 2024 Market Trends',
    excerpt: 'Deep dive into the explosion of AI domain valuations. Why 2-letter .ai domains are outperforming crypto, and what to watch next.',
    date: 'OCT 12, 2024',
    category: 'MARKET_INTEL',
    slug: 'ai-gold-rush-analysis'
  },
  {
    id: 2,
    title: 'Arbitrage Opportunities in Expiring .IO Domains',
    excerpt: 'With the Indian Ocean territory geopolitical shift, uncertainty creates opportunity. Here is our strategy for .io acquisitions.',
    date: 'SEP 28, 2024',
    category: 'STRATEGY',
    slug: 'io-domain-arbitrage'
  },
  {
    id: 3,
    title: 'SEO Impact of Exact Match Domains in 2025',
    excerpt: 'Google says EMDs dont matter. The data says otherwise. We analyzed 50,000 SERPs to find the truth.',
    date: 'SEP 15, 2024',
    category: 'SEO_DATA',
    slug: 'seo-emd-analysis-2025'
  },
  {
    id: 4,
    title: 'The Rise of "Micro-SaaS" Domain Flipping',
    excerpt: 'Buying domains not for the name, but for the starter-project attached to it. A new asset class emerges.',
    date: 'AUG 30, 2024',
    category: 'TRENDS',
    slug: 'micro-saas-flipping'
  }
]

export default function BriefingsPage() {
  return (
    <div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
      {/* Background Atmosphere */}
      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-accent/[0.02] rounded-full blur-[150px]" />
      </div>

      <Header />

      <main className="relative pt-32 sm:pt-40 pb-20 px-4 sm:px-6 flex-1">
        <div className="max-w-[1200px] mx-auto">
          {/* Hero */}
          <div className="text-center mb-20 animate-fade-in">
            <span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block flex items-center justify-center gap-2">
               <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
               Intelligence Feed
            </span>
            <h1 className="font-display text-[3.5rem] sm:text-[5rem] leading-[0.9] tracking-[-0.04em] text-white mb-6">
              Mission Briefings.
            </h1>
            <p className="text-lg text-white/50 max-w-xl mx-auto font-light">
              Tactical analysis, market trends, and operational updates from the Pounce HQ.
            </p>
          </div>

          {/* Briefings Grid */}
          <div className="grid md:grid-cols-2 gap-8">
             {briefings.map((briefing, i) => (
                <Link 
                    key={briefing.id} 
                    href={`/briefings/${briefing.slug}`}
                    className="group bg-[#050505] border border-white/10 p-8 hover:border-accent/30 transition-all animate-slide-up"
                    style={{ animationDelay: `${i * 100}ms` }}
                >
                    <div className="flex justify-between items-center mb-6">
                        <span className="inline-flex items-center gap-2 px-3 py-1 bg-white/5 text-[10px] font-mono text-white/60 uppercase tracking-widest border border-white/5">
                            <Tag className="w-3 h-3" />
                            {briefing.category}
                        </span>
                        <span className="flex items-center gap-2 text-[10px] font-mono text-white/30 uppercase tracking-widest">
                            <Calendar className="w-3 h-3" />
                            {briefing.date}
                        </span>
                    </div>
                    
                    <h3 className="font-display text-2xl text-white mb-4 group-hover:text-accent transition-colors">
                        {briefing.title}
                    </h3>
                    <p className="text-sm font-mono text-white/50 leading-relaxed mb-8">
                        {briefing.excerpt}
                    </p>
                    
                    <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-white group-hover:text-accent transition-colors">
                        Read Analysis <ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
                    </div>
                </Link>
             ))}
          </div>
          
          <div className="mt-20 text-center">
             <p className="font-mono text-xs text-white/30 uppercase tracking-widest">
                // End of Feed
             </p>
          </div>

        </div>
      </main>
      <Footer />
    </div>
  )
}

