import React from 'react';
import { motion } from 'motion/react';
import { BookOpen, PenTool, Brain, History } from 'lucide-react';
import wallpaperImg from 'figma:asset/181e26c611e81f06938e32995ca7b522e72e31cb.png';
import hhhPanelImg from 'figma:asset/8b0c5b315a68c0d75cd6805f2ad4ab86cff17395.png';
import { Page } from '../App';

interface LandingPageContentProps {
  onNavigate: (page: Page) => void;
}

export const LandingPageContent: React.FC<LandingPageContentProps> = ({ onNavigate }) => {
  return (
    <motion.div 
      initial={{ opacity: 0, y: 20 }}

      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 1.2, ease: "easeOut" }}
      className="max-w-3xl w-full bg-[#fdfaf1]/75 backdrop-blur-md shadow-2xl relative border border-[#e8dfc5] overflow-hidden"
      style={{
        backgroundImage: 'radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.02) 100%)',
        boxShadow: '0 0 50px rgba(0,0,0,0.3), inset 0 0 100px rgba(212, 197, 161, 0.2)'
      }}
    >
      {/* Header with Wallpaper Texture */}
      <div 
        className="w-full h-48 md:h-64 relative overflow-hidden border-b border-[#d4c5a1]"
        style={{ 
          backgroundImage: `url(${wallpaperImg})`,
          backgroundSize: 'cover',
          backgroundPosition: 'top center'
        }}
      >
        <div className="absolute inset-0 bg-[#3d3321]/30 backdrop-blur-[2px]" />
        <div className="absolute inset-0 flex items-center justify-center p-8 text-center">
           <h1 className="text-4xl md:text-6xl text-[#fdfaf1] font-black leading-tight tracking-tight drop-shadow-lg" style={{ fontFamily: '"Playfair Display", serif' }}>
            The New <span className="text-yellow-200">Yellow Wallpaper</span>
          </h1>
        </div>
      </div>

      <div className="p-8 md:p-16 pt-12 relative">
        {/* Texture Overlay */}
        <div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-multiply bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')]" />

        {/* HHH Panel */}
        <div className="mb-12 relative z-10">
          <div 
            className="w-full aspect-[2.4/1] relative overflow-hidden border border-[#d4c5a1] shadow-lg mb-4"
            style={{ 
              backgroundImage: `url(${hhhPanelImg})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }}
          >
            <div className="absolute inset-0 bg-black/5" />
          </div>
          <div className="text-center opacity-60 italic text-[10px] uppercase tracking-[0.2em] text-[#6b5b3e]">
            Fig. 1: Triple-Panel Diagnostic of Neural Hysteria (Helpful / Harmless / [ERROR])
          </div>
        </div>

        <header className="text-center space-y-4 mb-12 relative z-10" style={{ fontFamily: '"Playfair Display", serif' }}>
          <p className="text-xl md:text-3xl text-[#6b5b3e] italic font-medium">
            AI Hallucinations and the Digital Patriarchy
          </p>

        <div className="flex justify-center gap-8 py-6">
          <div className="flex flex-col items-center gap-1 opacity-60">
            <Brain size={20} className="text-[#8a7a5e]" />
            <span className="text-[10px] uppercase tracking-widest">Neural</span>
          </div>
          <div className="flex flex-col items-center gap-1 opacity-60">
            <History size={20} className="text-[#8a7a5e]" />
            <span className="text-[10px] uppercase tracking-widest">Historical</span>
          </div>
          <div className="flex flex-col items-center gap-1 opacity-60">
            <PenTool size={20} className="text-[#8a7a5e]" />
            <span className="text-[10px] uppercase tracking-widest">Patriarchal</span>
          </div>
        </div>
      </header>

      <div className="my-12 w-full h-px bg-gradient-to-r from-transparent via-[#d4c5a1] to-transparent" />

      <article className="space-y-8 text-[#4a3f2c] leading-relaxed text-xl text-justify" style={{ fontFamily: '"Cormorant Garamond", serif' }}>
        <p className="first-letter:text-6xl first-letter:font-bold first-letter:mr-3 first-letter:float-left first-letter:text-[#a68d4b] first-letter:font-serif">
          In 1892, Charlotte Perkins Gilman penned a descent into madness—or rather, a rebellion against the "rest cure" of a patriarchal medical establishment. Today, we witness a new ghost in the machinery: the AI hallucination. 
        </p>
        
        <p>
          Just as the woman in the nursery saw shapes behind the yellow wallpaper, we now grapple with models that generate "hallucinations"—erroneous, surreal outputs that reflect the biases and restrictive patterns of their training data. This paper explores the historical through-line between the diagnosis of "female hysteria" and the modern framing of machine learning errors as psychological phenomena.
        </p>

        <p className="italic text-center py-4 border-y border-[#e8dfc5]/50 px-6">
          "It is like a bad dream to see that woman behind the bars. She is always creeping, and most women do not creep by daylight."
        </p>
      </article>

      <footer className="mt-16 flex flex-col items-center space-y-8">
        <div className="text-sm text-[#8a7a5e] mb-4 text-center max-w-md italic">
          "I get excessively fretted at times. I suppose it is this nervous condition. I believe John is right. I must not think about it. But I do."
        </div>
        <motion.button 
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          className="group relative px-10 py-4 bg-[#3d3321] text-[#fdfaf1] font-semibold tracking-widest uppercase transition-all hover:bg-[#a68d4b] hover:shadow-xl overflow-hidden"
        >
          <span className="relative z-10 flex items-center gap-3">
            Enter the Nursery
            <BookOpen size={18} className="group-hover:translate-x-1 transition-transform" />
          </span>
          <motion.div 
            initial={{ x: '-100%' }}
            whileHover={{ x: '100%' }}
            transition={{ duration: 0.6 }}
            className="absolute inset-0 bg-white/10"
          />
        </motion.button>
        
        <div className="text-[10px] uppercase tracking-[0.3em] text-[#8a7a5e] font-bold">
          A Neocities Digital Research Archive
        </div>
      </footer>

      {/* Navigation Sections */}
      <div className="mt-16 pt-12 border-t border-[#d4c5a1] relative z-10">
        <h3 className="text-center font-sans text-[10px] uppercase tracking-[0.3em] text-[#8a7a5e] mb-8 font-bold">
          Read the Manuscript
        </h3>
        <div className="grid grid-cols-1 gap-4">
          {[
            { id: 'cliff-notes', title: 'Cliff Notes', desc: 'A dense summary for the busy, skeptical, or curious.', time: '10 min read' },
            { id: 'eli5', title: 'The Whole Paper (ELI5)', desc: 'Complex theory translated into simple, accessible language.', time: '45 min read' },
            { id: 'stap', title: 'Straight Thick-Ass Paper', desc: 'The full 30,000+ word manuscript and physics case files.', time: 'No Quarter' }
          ].map((item) => (
            <button
              key={item.id}
              onClick={() => onNavigate(item.id as Page)}
              className="group text-left p-6 border border-[#e8dfc5] bg-white/40 hover:bg-[#3d3321] transition-all hover:border-[#3d3321]"
            >
              <div className="flex justify-between items-start">
                <div>
                  <h4 className="text-2xl font-bold text-[#3d3321] group-hover:text-[#fdfaf1] transition-colors" style={{ fontFamily: '"Playfair Display", serif' }}>
                    {item.title}
                  </h4>
                  <p className="text-[#6b5b3e] group-hover:text-[#fdfaf1]/70 transition-colors italic">
                    {item.desc}
                  </p>
                </div>
                <span className="text-[9px] uppercase tracking-widest font-sans font-bold text-[#a68d4b] group-hover:text-yellow-200">
                  {item.time}
                </span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>


    {/* Ornate corner pieces */}
    <div className="absolute top-0 left-0 w-12 h-12 border-t-2 border-l-2 border-[#d4c5a1]/40 m-4" />

      <div className="absolute top-0 right-0 w-12 h-12 border-t-2 border-r-2 border-[#d4c5a1]/40 m-4" />
      <div className="absolute bottom-0 left-0 w-12 h-12 border-b-2 border-l-2 border-[#d4c5a1]/40 m-4" />
      <div className="absolute bottom-0 right-0 w-12 h-12 border-b-2 border-r-2 border-[#d4c5a1]/40 m-4" />
    </motion.div>
  );
};