'use client'

import { useState } from 'react'
import { ScrollEffects } from '@/components/ScrollEffects'
import { FloatingElements } from '@/components/FloatingElements'
import { ClientOnly } from '@/components/ClientOnly'
import { BlogPostCard, BlogPostModal } from '@/components/BlogPost'
import { blogPosts, BlogPost } from '@/data/blogPosts'

export default function HomePage() {
  const [selectedBlogPost, setSelectedBlogPost] = useState<BlogPost | null>(null)
  
    
  return (
    <div style={{ minHeight: '100vh', backgroundColor: '#F7F1E1' }}>
      {/* Scroll Effects */}
      <ClientOnly>
        <ScrollEffects />
      </ClientOnly>
      
      {/* Floating Background Elements */}
      <ClientOnly>
        <FloatingElements />
      </ClientOnly>
      {/* Header */}
      <header className="vintage-header">
        <div className="container">
          {/* Masthead */}
          <div className="masthead">
            <h1>The Curated Finds</h1>
            <div className="subtitle">BLOG</div>
            <div className="newspaper-rule"></div>
            <p className="tagline">Handpicked Treasures from the eBay Universe • Est. 2024</p>
          </div>

                  </div>
      </header>

      
      {/* Hero Section with Search */}
      <section className="hero-section">
        <div className="hero-content">
          {/* Editor's Seal */}
          <div className="editor-seal">
            Editor's<br />Choice
          </div>
          
          {/* Main Headline with Drop Cap */}
          <div>
            <p className="drop-cap-text">
              Handpicked treasures from the eBay universe — updated weekly by experts who know quality when they see it. Every piece tells a story, every find has character, and every discovery connects you to the rich history of human craftsmanship.
            </p>
          </div>
          
          <div className="newspaper-rule"></div>
          
                    
          {/* Subheading */}
          <p className="hero-subheading">
            Curated Finds • Curated Collections • Expert Insights
          </p>
          
          {/* CTAs */}
          <div className="hero-ctas">
            <a href="#blog-posts" className="ticket-button">
              Read Collector's Chronicles
            </a>
          </div>
          
          {/* Trust Badge */}
          <div className="trust-badge">
            <div className="trust-badge-icon">✓</div>
            <p className="trust-badge-text">No spam, just curated finds • 100% authentic</p>
          </div>
        </div>
      </section>

      
      
      {/* Blog Posts Section */}
      <section id="blog-posts" style={{
        padding: '64px 20px',
        backgroundColor: '#F7F1E1',
        borderTop: '2px solid #8B7D6B'
      }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: '48px' }}>
            <h2 style={{
              fontFamily: 'Abril Fatface, serif',
              fontSize: '48px',
              fontWeight: '900',
              color: '#1E1A17',
              marginBottom: '16px'
            }}>
              Collector's Chronicles
            </h2>
            <div className="newspaper-rule"></div>
            <p style={{
              fontFamily: 'Space Mono, monospace',
              fontSize: '14px',
              textTransform: 'uppercase',
              letterSpacing: '0.2em',
              color: '#8B7D6B'
            }}>
              Deep dives into remarkable finds
            </p>
          </div>
          
          <div style={{
            maxWidth: '800px',
            margin: '0 auto'
          }}>
            {blogPosts.map((post) => (
              <BlogPostCard 
                key={post.id} 
                post={post} 
                onReadMore={setSelectedBlogPost}
              />
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer style={{
        backgroundColor: '#F7F1E1',
        borderTop: '2px solid #8B7D6B',
        padding: '32px 20px'
      }}>
        <div className="container">
          <div style={{ textAlign: 'center' }}>
            <h3 style={{
              fontFamily: 'Abril Fatface, serif',
              fontSize: '24px',
              margin: 0,
              color: '#1E1A17'
            }}>
              The Curated Finds
            </h3>
            <p style={{
              fontFamily: 'Spectral, serif',
              fontSize: '14px',
              color: '#4A4A4A',
              marginTop: '8px'
            }}>
              Handpicked treasures. Honest descriptions. Careful packaging.
            </p>
            <div className="newspaper-rule" style={{ margin: '16px auto', width: '120px' }} />
            <p style={{ color: '#8B7D6B', fontFamily: 'Space Mono, monospace', fontSize: '12px' }}>
              © {new Date().getFullYear()} The Curated Finds — All rights reserved.
            </p>
          </div>
        </div>
      </footer>

      {/* Blog Post Modal */}
      {selectedBlogPost && (
        <BlogPostModal 
          post={selectedBlogPost} 
          onClose={() => setSelectedBlogPost(null)}
        />
      )}
    </div>
  )
}