import { PageLayout } from "@/components/layout/PageLayout";
import { useQuery } from "@tanstack/react-query";
import { useParams, Link } from "wouter";
import { AuthorWithWorks, WorkWithAuthor } from "@/lib/types";
import { WorkCard } from "@/components/common/WorkCard";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { AuthorTimeline } from "@/components/authors/AuthorTimeline";
import { Skeleton } from "@/components/ui/skeleton";
import { useState, useRef } from "react";
import { 
  Award, 
  Book, 
  BookOpen, 
  Calendar, 
  Clock, 
  Download, 
  ExternalLink, 
  Eye, 
  FileText, 
  Filter, 
  Flag, 
  GraduationCap, 
  Grid3X3, 
  Heart, 
  HeartHandshake, 
  Highlighter, 
  History, 
  Languages, 
  List, 
  MapPin, 
  MessageSquare, 
  PenTool, 
  Search, 
  Share2, 
  Star, 
  SunMoon, 
  Tag, 
  Bookmark, 
  Users, 
  Zap
} from "lucide-react";
import { AuthorChip } from "@/components/common/AuthorChip";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { useToast } from "@/hooks/use-toast";
import { useSeason } from "@/hooks/use-season";

export default function AuthorProfile() {
  const { slug } = useParams();
  const { season } = useSeason();
  const { toast } = useToast();
  const [view, setView] = useState<'list' | 'grid'>('list');
  const [selectedGenre, setSelectedGenre] = useState<string | null>(null);
  const [selectedYear, setSelectedYear] = useState<string | null>(null);
  const [selectedWorkType, setSelectedWorkType] = useState<string | null>(null);
  const [selectedLanguage, setSelectedLanguage] = useState<string | null>(null);
  const bioRef = useRef<HTMLDivElement>(null);

  // Get author data
  const { data: author, isLoading: authorLoading } = useQuery<AuthorWithWorks>({
    queryKey: [`/api/authors/${slug}`],
  });

  // Get works for the author
  const { data: works, isLoading: worksLoading } = useQuery<WorkWithAuthor[]>({
    queryKey: [`/api/authors/${slug}/works`],
    enabled: !!author,
  });

  // Get timeline events
  const { data: timeline, isLoading: timelineLoading } = useQuery({
    queryKey: [`/api/authors/${slug}/timeline`],
    enabled: !!author,
  });

  const [following, setFollowing] = useState(false);
  const [followCount, setFollowCount] = useState(Math.floor(Math.random() * 2000));

  // Simulate stats data
  const worksCount = works?.length || 0;
  const translationsCount = works?.reduce((acc, work) => acc + (Math.floor(Math.random() * 5)), 0) || 0;
  const readingCount = Math.floor(Math.random() * 10000);
  const citationCount = Math.floor(Math.random() * 1000);
  const annotationCount = Math.floor(Math.random() * 500);
  
  // Get unique years, genres, languages from works
  const years = Array.from(new Set(works?.map(work => work.year?.toString()).filter(Boolean)));
  const genres = Array.from(new Set(works?.flatMap(work => work.tags?.map(tag => tag.name) || []).filter(Boolean)));
  const languages = Array.from(new Set(works?.map(work => work.language).filter(Boolean)));
  const workTypes = Array.from(new Set(works?.map(work => work.type).filter(Boolean)));

  // Filter works based on selected filters
  const filteredWorks = works?.filter(work => {
    if (selectedGenre && (!work.tags || !work.tags.some(tag => tag.name === selectedGenre))) {
      return false;
    }
    if (selectedYear && work.year?.toString() !== selectedYear) {
      return false;
    }
    if (selectedWorkType && work.type !== selectedWorkType) {
      return false;
    }
    if (selectedLanguage && work.language !== selectedLanguage) {
      return false;
    }
    return true;
  });

  // Group works by year
  const worksByYear = filteredWorks?.reduce<Record<string, WorkWithAuthor[]>>((acc, work) => {
    const year = work.year?.toString() || 'Unknown';
    if (!acc[year]) {
      acc[year] = [];
    }
    acc[year].push(work);
    return acc;
  }, {});

  // Group works by type
  const worksByType = filteredWorks?.reduce<Record<string, WorkWithAuthor[]>>((acc, work) => {
    const type = work.type || 'Other';
    if (!acc[type]) {
      acc[type] = [];
    }
    acc[type].push(work);
    return acc;
  }, {});

  // Handle follow button click
  const handleFollow = () => {
    if (following) {
      setFollowCount(followCount - 1);
    } else {
      setFollowCount(followCount + 1);
    }
    setFollowing(!following);
    
    toast({
      title: following ? "Unfollowed" : "Following",
      description: following 
        ? `You are no longer following ${author?.name}` 
        : `You are now following ${author?.name}. You'll receive updates when new works are added.`,
      variant: "default",
    });
  };

  // Handle share
  const handleShare = () => {
    navigator.clipboard.writeText(window.location.href);
    toast({
      title: "Link copied",
      description: "The link to this author has been copied to your clipboard.",
      variant: "default",
    });
  };

  // Clear all filters
  const clearFilters = () => {
    setSelectedGenre(null);
    setSelectedYear(null);
    setSelectedWorkType(null);
    setSelectedLanguage(null);
  };

  // Format type name
  const formatTypeName = (type: string): string => {
    switch (type) {
      case 'poem': return 'Poems';
      case 'story': return 'Short Stories';
      case 'novel': return 'Novels';
      case 'play': return 'Plays';
      case 'essay': return 'Essays';
      default: return 'Other Works';
    }
  };

  // Get season-based color class for buttons
  const getSeasonColorClass = (): string => {
    switch (season) {
      case 'spring': return 'bg-green-600 hover:bg-green-700 text-white';
      case 'summer': return 'bg-amber-600 hover:bg-amber-700 text-white';
      case 'autumn': return 'bg-russet hover:bg-russet/90 text-white';
      case 'winter': return 'bg-blue-600 hover:bg-blue-700 text-white';
      default: return 'bg-russet hover:bg-russet/90 text-white';
    }
  };

  return (
    <PageLayout>
      {/* Hero section with author info */}
      <section className={`py-10 md:py-12 ${
        season === 'spring' ? 'bg-gradient-to-b from-green-50 to-paper dark:from-green-950/20 dark:to-dark-paper' : 
        season === 'summer' ? 'bg-gradient-to-b from-amber-50 to-paper dark:from-amber-950/20 dark:to-dark-paper' : 
        season === 'autumn' ? 'bg-gradient-to-b from-russet/10 to-paper dark:from-russet/10 dark:to-dark-paper' : 
        'bg-gradient-to-b from-blue-50 to-paper dark:from-blue-950/20 dark:to-dark-paper'
      }`}>
        <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
          {authorLoading ? (
            <div className="flex flex-col md:flex-row gap-6 md:gap-8">
              <Skeleton className="flex-shrink-0 w-28 h-28 md:w-36 md:h-36 rounded-full" />
              <div className="flex-1">
                <Skeleton className="h-10 w-1/3 mb-2" />
                <Skeleton className="h-5 w-1/4 mb-2" />
                <Skeleton className="h-20 w-full mb-4" />
                <div className="flex gap-2">
                  <Skeleton className="h-10 w-40" />
                  <Skeleton className="h-10 w-40" />
                </div>
              </div>
            </div>
          ) : author ? (
            <div className="flex flex-col md:flex-row gap-6 md:gap-8">
              <div className="flex flex-col items-center md:items-start">
                <div className="flex-shrink-0 w-28 h-28 md:w-36 md:h-36 rounded-full bg-navy/10 dark:bg-navy/20 overflow-hidden border-4 border-white dark:border-gray-800 shadow-md">
                  <img 
                    src={author.portrait || "https://via.placeholder.com/300"} 
                    alt={`Photo of ${author.name}`} 
                    className="w-full h-full object-cover" 
                  />
                </div>
                <div className="mt-4 flex flex-col items-center md:items-start">
                  <div className="flex gap-1.5 mb-2">
                    <Badge className="bg-navy/10 dark:bg-navy/20 text-navy/80 dark:text-cream/80 text-xs">
                      {worksCount} Works
                    </Badge>
                    <Badge className="bg-navy/10 dark:bg-navy/20 text-navy/80 dark:text-cream/80 text-xs">
                      {followCount.toLocaleString()} Followers
                    </Badge>
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      variant="default"
                      className={`flex items-center gap-1.5 py-1.5 px-3 rounded-full ${
                        following ? 'bg-navy/20 dark:bg-navy/30 text-navy dark:text-cream' : getSeasonColorClass()
                      } font-sans font-medium text-sm transition-colors`}
                      onClick={handleFollow}
                    >
                      <Heart className={`h-4 w-4 ${following ? 'fill-navy dark:fill-cream' : 'fill-white'}`} />
                      <span>{following ? 'Following' : 'Follow'}</span>
                    </Button>
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Button
                            variant="outline"
                            className="py-1.5 px-3 rounded-full bg-navy/10 hover:bg-navy/20 dark:bg-navy/20 dark:hover:bg-navy/30 text-navy dark:text-cream/90 font-sans font-medium text-sm transition-colors h-8"
                            onClick={handleShare}
                          >
                            <Share2 className="h-4 w-4" />
                          </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>Share this author</p>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </div>
                </div>
              </div>
              
              <div className="flex-1">
                <div className="flex flex-wrap items-center gap-3 mb-2">
                  <h1 className="font-serif text-2xl md:text-4xl font-bold text-navy dark:text-cream">{author.name}</h1>
                  {author.country && (
                    <div className="flex items-center gap-2 px-2.5 py-1 bg-navy/5 dark:bg-navy/10 rounded-full">
                      <img 
                        src={`https://flagcdn.com/w20/${author.country.toLowerCase()}.png`} 
                        alt={author.country} 
                        className="w-5 h-auto rounded-sm" 
                      />
                      <span className="text-xs font-medium text-navy/70 dark:text-cream/70">
                        {author.country}
                      </span>
                    </div>
                  )}
                </div>
                
                <div className="flex items-center gap-x-4 gap-y-1 flex-wrap mb-4 text-sm text-navy/70 dark:text-cream/70">
                  <div className="flex items-center gap-1.5">
                    <Calendar className="h-4 w-4" />
                    <span>{author.birthYear}–{author.deathYear || 'present'}</span>
                  </div>
                  
                  {genres.length > 0 && (
                    <div className="flex items-center gap-1.5">
                      <Tag className="h-4 w-4" />
                      <span>{genres.slice(0, 2).join(', ')}{genres.length > 2 ? '...' : ''}</span>
                    </div>
                  )}
                  
                  {languages.length > 0 && (
                    <div className="flex items-center gap-1.5">
                      <Languages className="h-4 w-4" />
                      <span>{languages.slice(0, 2).join(', ')}{languages.length > 2 ? '...' : ''}</span>
                    </div>
                  )}
                </div>
                
                <div ref={bioRef} className="prose dark:prose-invert max-w-3xl mb-5 text-navy/90 dark:text-cream/90 line-clamp-3">
                  <p>{author.biography}</p>
                </div>
                
                <div className="flex flex-wrap gap-2 items-center">
                  <div className="flex flex-wrap items-center gap-5">
                    <div className="flex flex-col items-center">
                      <span className="text-lg font-bold text-navy dark:text-cream">{worksCount}</span>
                      <span className="text-xs text-navy/70 dark:text-cream/70">Works</span>
                    </div>
                    <div className="flex flex-col items-center">
                      <span className="text-lg font-bold text-navy dark:text-cream">{translationsCount}</span>
                      <span className="text-xs text-navy/70 dark:text-cream/70">Translations</span>
                    </div>
                    <div className="flex flex-col items-center">
                      <span className="text-lg font-bold text-navy dark:text-cream">{citationCount}</span>
                      <span className="text-xs text-navy/70 dark:text-cream/70">Citations</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div className="text-center py-8">
              <h1 className="text-2xl font-bold mb-4">Author not found</h1>
              <Link href="/authors">
                <Button>Back to Authors</Button>
              </Link>
            </div>
          )}
        </div>
      </section>

      {/* Stats cards section */}
      {author && (
        <section className="py-6 border-b border-sage/10 dark:border-sage/5">
          <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              <Card className="bg-navy/5 dark:bg-navy/10 border-none shadow-sm">
                <CardContent className="p-4 flex items-center gap-4">
                  <div className="p-3 rounded-full bg-blue-500/10 text-blue-500 dark:bg-blue-400/20 dark:text-blue-400">
                    <BookOpen className="h-6 w-6" />
                  </div>
                  <div>
                    <p className="text-sm text-navy/70 dark:text-cream/70">Total Readers</p>
                    <p className="text-2xl font-bold text-navy dark:text-cream">{readingCount.toLocaleString()}</p>
                  </div>
                </CardContent>
              </Card>
              
              <Card className="bg-navy/5 dark:bg-navy/10 border-none shadow-sm">
                <CardContent className="p-4 flex items-center gap-4">
                  <div className="p-3 rounded-full bg-amber-500/10 text-amber-500 dark:bg-amber-400/20 dark:text-amber-400">
                    <Star className="h-6 w-6" />
                  </div>
                  <div>
                    <p className="text-sm text-navy/70 dark:text-cream/70">User Rating</p>
                    <p className="text-2xl font-bold text-navy dark:text-cream">4.8/5</p>
                  </div>
                </CardContent>
              </Card>
              
              <Card className="bg-navy/5 dark:bg-navy/10 border-none shadow-sm">
                <CardContent className="p-4 flex items-center gap-4">
                  <div className="p-3 rounded-full bg-green-500/10 text-green-500 dark:bg-green-400/20 dark:text-green-400">
                    <MessageSquare className="h-6 w-6" />
                  </div>
                  <div>
                    <p className="text-sm text-navy/70 dark:text-cream/70">Annotations</p>
                    <p className="text-2xl font-bold text-navy dark:text-cream">{annotationCount.toLocaleString()}</p>
                  </div>
                </CardContent>
              </Card>
              
              <Card className="bg-navy/5 dark:bg-navy/10 border-none shadow-sm">
                <CardContent className="p-4 flex items-center gap-4">
                  <div className="p-3 rounded-full bg-purple-500/10 text-purple-500 dark:bg-purple-400/20 dark:text-purple-400">
                    <GraduationCap className="h-6 w-6" />
                  </div>
                  <div>
                    <p className="text-sm text-navy/70 dark:text-cream/70">Academic Citations</p>
                    <p className="text-2xl font-bold text-navy dark:text-cream">{citationCount.toLocaleString()}</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>
      )}

      {/* Main content with tabs */}
      {author && (
        <section className="py-8">
          <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
            <Tabs defaultValue="works" className="w-full">
              <TabsList className="grid grid-cols-5 mb-8">
                <TabsTrigger 
                  value="works"
                  className="text-sm md:text-base"
                >
                  Works
                </TabsTrigger>
                <TabsTrigger 
                  value="timeline"
                  className="text-sm md:text-base"
                >
                  Timeline
                </TabsTrigger>
                <TabsTrigger 
                  value="related"
                  className="text-sm md:text-base"
                >
                  Related Authors
                </TabsTrigger>
                <TabsTrigger 
                  value="about"
                  className="text-sm md:text-base"
                >
                  Biography
                </TabsTrigger>
                <TabsTrigger 
                  value="discussions"
                  className="text-sm md:text-base"
                >
                  Discussions
                </TabsTrigger>
              </TabsList>

              {/* Works tab content */}
              <TabsContent value="works" className="w-full space-y-6">
                {/* Controls row */}
                <div className="flex flex-col sm:flex-row justify-between gap-4 items-start sm:items-center bg-navy/5 dark:bg-navy/10 p-4 rounded-lg">
                  {/* Work type filters */}
                  <div className="flex items-center gap-3 flex-wrap">
                    <Select value={selectedWorkType || "all_types"} onValueChange={(value) => setSelectedWorkType(value === "all_types" ? null : value)}>
                      <SelectTrigger className="w-[130px] text-sm h-9">
                        <SelectValue placeholder="Work Type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all_types">All Types</SelectItem>
                        {workTypes.map(type => (
                          <SelectItem key={type} value={type}>
                            {formatTypeName(type)}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    
                    <Select value={selectedYear || "all_years"} onValueChange={(value) => setSelectedYear(value === "all_years" ? null : value)}>
                      <SelectTrigger className="w-[130px] text-sm h-9">
                        <SelectValue placeholder="Year" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all_years">All Years</SelectItem>
                        {years.sort((a, b) => parseInt(a) - parseInt(b)).map(year => (
                          <SelectItem key={year} value={year}>
                            {year}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    
                    <Select value={selectedLanguage || "all_languages"} onValueChange={(value) => setSelectedLanguage(value === "all_languages" ? null : value)}>
                      <SelectTrigger className="w-[130px] text-sm h-9">
                        <SelectValue placeholder="Language" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all_languages">All Languages</SelectItem>
                        {languages.map(language => (
                          <SelectItem key={language} value={language}>
                            {language}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    
                    <Select value={selectedGenre || "all_genres"} onValueChange={(value) => setSelectedGenre(value === "all_genres" ? null : value)}>
                      <SelectTrigger className="w-[130px] text-sm h-9">
                        <SelectValue placeholder="Genre" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all_genres">All Genres</SelectItem>
                        {genres.map(genre => (
                          <SelectItem key={genre} value={genre}>
                            {genre}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    
                    {(selectedWorkType || selectedYear || selectedLanguage || selectedGenre) && (
                      <Button 
                        variant="ghost" 
                        size="sm" 
                        className="h-9"
                        onClick={clearFilters}
                      >
                        Clear
                      </Button>
                    )}
                  </div>
                  
                  {/* View options */}
                  <div className="flex items-center gap-2 ml-auto">
                    <span className="text-sm text-navy/70 dark:text-cream/70">View:</span>
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Button
                            variant={view === 'list' ? 'default' : 'ghost'}
                            size="icon"
                            className="h-9 w-9"
                            onClick={() => setView('list')}
                          >
                            <List className="h-4 w-4" />
                          </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>List view</p>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                    
                    <TooltipProvider>
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Button
                            variant={view === 'grid' ? 'default' : 'ghost'}
                            size="icon"
                            className="h-9 w-9"
                            onClick={() => setView('grid')}
                          >
                            <Grid3X3 className="h-4 w-4" />
                          </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                          <p>Grid view</p>
                        </TooltipContent>
                      </Tooltip>
                    </TooltipProvider>
                  </div>
                </div>
                
                {/* Works display */}
                {worksLoading ? (
                  <div className="space-y-4">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Skeleton key={i} className="h-40" />
                    ))}
                  </div>
                ) : filteredWorks?.length ? (
                  <>
                    {(selectedWorkType || selectedYear) ? (
                      // By filter results
                      <div>
                        {view === 'list' ? (
                          <div className="space-y-3">
                            {filteredWorks.map(work => (
                              <WorkCard key={work.id} work={work} />
                            ))}
                          </div>
                        ) : (
                          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                            {filteredWorks.map(work => (
                              <WorkCard key={work.id} work={work} grid />
                            ))}
                          </div>
                        )}
                      </div>
                    ) : (
                      // By type grouping (default)
                      <div className="space-y-10">
                        {Object.entries(worksByType || {}).map(([type, typeWorks]) => (
                          <div key={type} className="space-y-4">
                            <h3 className="text-xl font-serif font-semibold text-navy dark:text-cream border-b border-sage/10 dark:border-sage/5 pb-2">
                              {formatTypeName(type)} <span className="text-navy/60 dark:text-cream/60 text-base">({typeWorks.length})</span>
                            </h3>
                            
                            {view === 'list' ? (
                              <div className="space-y-3">
                                {typeWorks.map(work => (
                                  <WorkCard key={work.id} work={work} />
                                ))}
                              </div>
                            ) : (
                              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                                {typeWorks.map(work => (
                                  <WorkCard key={work.id} work={work} grid />
                                ))}
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    )}
                  </>
                ) : (
                  <div className="text-center py-12 bg-navy/5 dark:bg-navy/10 rounded-lg">
                    <div className="flex flex-col items-center">
                      <Search className="h-12 w-12 text-navy/30 dark:text-cream/30 mb-4" />
                      <h3 className="text-lg font-medium text-navy dark:text-cream mb-2">No works found</h3>
                      <p className="text-navy/70 dark:text-cream/70 max-w-md mb-6">
                        We couldn't find any works matching your current filters.
                      </p>
                      <Button variant="outline" onClick={clearFilters}>
                        Clear Filters
                      </Button>
                    </div>
                  </div>
                )}
                
                {/* Additional features */}
                <div className="bg-navy/5 dark:bg-navy/10 rounded-lg p-6 mt-8">
                  <h3 className="text-lg font-medium text-navy dark:text-cream mb-4">Reading Statistics</h3>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                      <div className="flex items-center justify-between mb-1">
                        <span className="text-sm text-navy/70 dark:text-cream/70">Most Read</span>
                        <span className="text-sm font-medium text-navy dark:text-cream">
                          {works?.[0]?.title || "N/A"}
                        </span>
                      </div>
                      <Progress value={85} className="h-2" />
                    </div>
                    <div>
                      <div className="flex items-center justify-between mb-1">
                        <span className="text-sm text-navy/70 dark:text-cream/70">Most Translated</span>
                        <span className="text-sm font-medium text-navy dark:text-cream">
                          {works?.[1]?.title || "N/A"}
                        </span>
                      </div>
                      <Progress value={70} className="h-2" />
                    </div>
                    <div>
                      <div className="flex items-center justify-between mb-1">
                        <span className="text-sm text-navy/70 dark:text-cream/70">Most Annotated</span>
                        <span className="text-sm font-medium text-navy dark:text-cream">
                          {works?.[2]?.title || "N/A"}
                        </span>
                      </div>
                      <Progress value={60} className="h-2" />
                    </div>
                  </div>
                </div>
              </TabsContent>

              {/* Timeline tab content */}
              <TabsContent value="timeline" className="w-full space-y-6">
                <div className="flex items-center justify-between mb-6">
                  <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream">
                    Life & Works Timeline
                  </h2>
                  <Button variant="outline" size="sm" className="text-xs">
                    <Download className="h-3.5 w-3.5 mr-1.5" /> Export
                  </Button>
                </div>
                
                {timelineLoading ? (
                  <div className="space-y-4 py-8">
                    {Array.from({ length: 4 }).map((_, i) => (
                      <Skeleton key={i} className="h-16" />
                    ))}
                  </div>
                ) : timeline && timeline.length > 0 ? (
                  <AuthorTimeline events={timeline} />
                ) : (
                  <div className="text-center py-12 bg-navy/5 dark:bg-navy/10 rounded-lg">
                    <div className="flex flex-col items-center">
                      <History className="h-12 w-12 text-navy/30 dark:text-cream/30 mb-4" />
                      <h3 className="text-lg font-medium text-navy dark:text-cream mb-2">No timeline available</h3>
                      <p className="text-navy/70 dark:text-cream/70 max-w-md">
                        We're working on gathering timeline events for {author?.name}.
                        Check back soon for updates on their life and work milestones.
                      </p>
                    </div>
                  </div>
                )}
                
                {/* Literary period context */}
                <div className="bg-navy/5 dark:bg-navy/10 rounded-lg p-6 mt-8">
                  <h3 className="text-lg font-medium text-navy dark:text-cream mb-4">Historical Context</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <h4 className="text-sm font-medium text-navy dark:text-cream mb-2">Literary Movements</h4>
                      <div className="flex flex-wrap gap-2">
                        {['Romanticism', 'Realism', 'Modernism'].map(movement => (
                          <Badge 
                            key={movement} 
                            variant="outline"
                            className="bg-navy/10 dark:bg-navy/20 text-navy/70 dark:text-cream/70 text-xs"
                          >
                            {movement}
                          </Badge>
                        ))}
                      </div>
                      <p className="text-sm text-navy/70 dark:text-cream/70 mt-3">
                        {author?.name} lived during a time of significant literary change, 
                        with movements evolving from Romanticism to early Modernist approaches.
                      </p>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium text-navy dark:text-cream mb-2">Key Historical Events</h4>
                      <ul className="text-sm text-navy/70 dark:text-cream/70 space-y-1">
                        <li className="flex items-center gap-2">
                          <span className="w-1.5 h-1.5 rounded-full bg-russet/70 dark:bg-russet/60 inline-block"></span>
                          Industrial Revolution (1760-1840)
                        </li>
                        <li className="flex items-center gap-2">
                          <span className="w-1.5 h-1.5 rounded-full bg-russet/70 dark:bg-russet/60 inline-block"></span>
                          Napoleonic Wars (1803-1815)
                        </li>
                        <li className="flex items-center gap-2">
                          <span className="w-1.5 h-1.5 rounded-full bg-russet/70 dark:bg-russet/60 inline-block"></span>
                          Reform movements across Europe (1830s-1840s)
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </TabsContent>

              {/* Related Authors tab content */}
              <TabsContent value="related" className="w-full space-y-6">
                <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-6">
                  Related Authors
                </h2>
                
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
                  {/* We'll mock a few related authors */}
                  {[1, 2, 3, 4, 5, 6].map((_, i) => {
                    // Create a mock author
                    const mockRelatedAuthor = {
                      id: i + 1000,
                      name: ['Leo Tolstoy', 'Fyodor Dostoevsky', 'Ivan Turgenev', 'Anton Chekhov', 'Nikolai Gogol', 'Anna Akhmatova'][i],
                      slug: ['leo-tolstoy', 'fyodor-dostoevsky', 'ivan-turgenev', 'anton-chekhov', 'nikolai-gogol', 'anna-akhmatova'][i],
                      birthYear: [1828, 1821, 1818, 1860, 1809, 1889][i],
                      deathYear: [1910, 1881, 1883, 1904, 1852, 1966][i],
                      country: 'Russia',
                      portrait: `https://via.placeholder.com/300?text=${i+1}`,
                      biography: 'A prominent author who influenced literary traditions...'
                    };
                    
                    return (
                      <Card key={i} className="overflow-hidden bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow">
                        <div className="pt-4 px-4 flex items-center gap-3 pb-3 border-b border-sage/10 dark:border-sage/5">
                          <div className="w-12 h-12 rounded-full bg-navy/10 dark:bg-navy/20 overflow-hidden">
                            <img 
                              src={mockRelatedAuthor.portrait} 
                              alt={mockRelatedAuthor.name} 
                              className="w-full h-full object-cover" 
                            />
                          </div>
                          <div>
                            <Link href={`/authors/${mockRelatedAuthor.slug}`}>
                              <h3 className="text-base font-medium hover:text-russet dark:hover:text-russet/90 transition-colors">
                                {mockRelatedAuthor.name}
                              </h3>
                            </Link>
                            <p className="text-xs text-navy/70 dark:text-cream/70">
                              {mockRelatedAuthor.birthYear}–{mockRelatedAuthor.deathYear}
                            </p>
                          </div>
                        </div>
                        <CardContent className="p-4 text-sm text-navy/80 dark:text-cream/80">
                          <div className="flex items-center gap-1 mb-2">
                            <Badge variant="outline" className="text-xs bg-navy/10 dark:bg-navy/20 border-none">
                              {['Contemporary', 'Predecessor', 'Influence', 'Influenced By', 'Friend', 'Rival'][i]}
                            </Badge>
                          </div>
                          <p className="line-clamp-3 text-xs">
                            {i === 0 && "Fellow Russian novelist and contemporary of the author. Both explored similar themes and wrote during the same period."}
                            {i === 1 && "Major influence on the author's work, particularly in psychological characterization and thematic explorations."}
                            {i === 2 && "Shared literary circles and philosophical ideas that shaped Russian literature of the period."}
                            {i === 3 && "Continued and evolved the literary tradition established by the author and their contemporaries."}
                            {i === 4 && "Early influence whose satirical and realistic portrayals set foundations for later Russian literature."}
                            {i === 5 && "Poetic voice who carried forward literary traditions while evolving new forms of expression."}
                          </p>
                        </CardContent>
                        <CardFooter className="p-4 pt-0 flex justify-between">
                          <Badge variant="outline" className="text-xs bg-transparent">
                            {['Realism', 'Psychological', 'Naturalism', 'Social Commentary', 'Satire', 'Symbolism'][i]}
                          </Badge>
                          <Link href={`/authors/${mockRelatedAuthor.slug}`}>
                            <Button variant="ghost" size="sm" className="text-xs h-8 px-2 text-russet hover:text-russet/90">
                              View Profile
                            </Button>
                          </Link>
                        </CardFooter>
                      </Card>
                    );
                  })}
                </div>
                
                {/* Influence network visualization */}
                <div className="bg-navy/5 dark:bg-navy/10 rounded-lg p-6 mt-6">
                  <div className="flex items-center justify-between mb-4">
                    <h3 className="text-lg font-medium text-navy dark:text-cream">Literary Influence Network</h3>
                    <Button variant="outline" size="sm" className="text-xs">
                      <ExternalLink className="h-3.5 w-3.5 mr-1.5" /> View Full Network
                    </Button>
                  </div>
                  <div className="aspect-video bg-cream dark:bg-dark-surface rounded-md flex items-center justify-center border border-sage/10 dark:border-sage/5">
                    <div className="text-center px-6 py-12">
                      <Users className="h-12 w-12 text-navy/30 dark:text-cream/30 mx-auto mb-4" />
                      <p className="text-navy/70 dark:text-cream/70 max-w-md">
                        Our interactive literary network visualization shows connections between
                        {author?.name} and other authors through influence, collaboration, and shared themes.
                      </p>
                    </div>
                  </div>
                </div>
              </TabsContent>

              {/* Biography tab content */}
              <TabsContent value="about" className="w-full">
                <div className="flex flex-col md:flex-row gap-8">
                  <div className="md:w-3/4">
                    <div className="prose dark:prose-invert max-w-none mb-8">
                      <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream mb-4">
                        Biography of {author?.name}
                      </h2>
                      <p className="text-navy/90 dark:text-cream/90">{author?.biography}</p>
                      
                      {/* Extended biography sections */}
                      <h3 className="text-lg font-medium text-navy dark:text-cream mt-6">Early Life</h3>
                      <p>
                        Born in {author?.birthYear} in {author?.country || 'their home country'}, 
                        {author?.name} grew up during a transformative period in history. 
                        Their early education and experiences would profoundly shape their literary voice and perspectives.
                      </p>
                      
                      <h3 className="text-lg font-medium text-navy dark:text-cream mt-6">Literary Career</h3>
                      <p>
                        Their first works appeared in the literary journals of the time, quickly establishing them as a voice to watch.
                        Over the course of their career, they published numerous works that explored themes of human psychology,
                        social conditions, and the philosophical questions of their era.
                      </p>
                      
                      <h3 className="text-lg font-medium text-navy dark:text-cream mt-6">Legacy and Influence</h3>
                      <p>
                        {author?.name}'s contributions to literature extend far beyond their lifetime. Their innovative approaches
                        to characterization, narrative structure, and thematic exploration influenced generations of writers that followed.
                        Their work continues to be studied, translated, and adapted worldwide.
                      </p>
                    </div>
                    
                    {/* Linguistic analysis */}
                    <div className="bg-navy/5 dark:bg-navy/10 rounded-lg p-6 mb-8">
                      <h3 className="text-lg font-medium text-navy dark:text-cream mb-4">Literary Style Analysis</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                          <h4 className="text-sm font-medium text-navy dark:text-cream mb-2">Stylistic Features</h4>
                          <div className="space-y-3">
                            <div>
                              <div className="flex items-center justify-between mb-1">
                                <span className="text-sm text-navy/70 dark:text-cream/70">Descriptive Language</span>
                                <span className="text-xs font-medium text-navy dark:text-cream">High</span>
                              </div>
                              <Progress value={85} className="h-1.5" />
                            </div>
                            <div>
                              <div className="flex items-center justify-between mb-1">
                                <span className="text-sm text-navy/70 dark:text-cream/70">Dialogue Usage</span>
                                <span className="text-xs font-medium text-navy dark:text-cream">Medium</span>
                              </div>
                              <Progress value={60} className="h-1.5" />
                            </div>
                            <div>
                              <div className="flex items-center justify-between mb-1">
                                <span className="text-sm text-navy/70 dark:text-cream/70">Metaphorical Language</span>
                                <span className="text-xs font-medium text-navy dark:text-cream">Very High</span>
                              </div>
                              <Progress value={90} className="h-1.5" />
                            </div>
                          </div>
                        </div>
                        <div>
                          <h4 className="text-sm font-medium text-navy dark:text-cream mb-2">Recurring Themes</h4>
                          <div className="flex flex-wrap gap-2">
                            {['Nature', 'Love', 'Death', 'Society', 'Freedom', 'Identity', 'Alienation'].map(theme => (
                              <Badge 
                                key={theme} 
                                className={`
                                  ${theme === 'Love' || theme === 'Nature' ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-300' : 
                                  theme === 'Death' || theme === 'Alienation' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300' : 
                                  'bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300'}
                                `}
                              >
                                {theme}
                              </Badge>
                            ))}
                          </div>
                          <p className="text-sm text-navy/70 dark:text-cream/70 mt-3">
                            {author?.name}'s work consistently explores the tension between individual desires
                            and societal expectations, often using natural imagery as metaphors for human experience.
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  {/* Sidebar */}
                  <div className="md:w-1/4">
                    <div className="sticky top-24">
                      {/* Key facts */}
                      <Card className="mb-4 bg-cream dark:bg-dark-surface">
                        <CardHeader className="pb-2">
                          <CardTitle className="text-base">Key Facts</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-3 text-sm">
                          <div className="flex justify-between">
                            <span className="text-navy/70 dark:text-cream/70">Born</span>
                            <span className="font-medium">{author?.birthYear}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-navy/70 dark:text-cream/70">Died</span>
                            <span className="font-medium">{author?.deathYear || 'N/A'}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-navy/70 dark:text-cream/70">Nationality</span>
                            <span className="font-medium">{author?.country || 'Unknown'}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-navy/70 dark:text-cream/70">Literary Period</span>
                            <span className="font-medium">Romanticism</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-navy/70 dark:text-cream/70">Notable Works</span>
                            <span className="font-medium">{works?.length || 0}</span>
                          </div>
                        </CardContent>
                      </Card>
                      
                      {/* Resources */}
                      <Card className="mb-4 bg-cream dark:bg-dark-surface">
                        <CardHeader className="pb-2">
                          <CardTitle className="text-base">Resources</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-2 text-sm">
                          <Button variant="ghost" size="sm" className="w-full justify-start text-xs">
                            <FileText className="mr-2 h-4 w-4" />
                            Complete Bibliography
                          </Button>
                          <Button variant="ghost" size="sm" className="w-full justify-start text-xs">
                            <Book className="mr-2 h-4 w-4" />
                            Academic Resources
                          </Button>
                          <Button variant="ghost" size="sm" className="w-full justify-start text-xs">
                            <PenTool className="mr-2 h-4 w-4" />
                            Writing Style Guide
                          </Button>
                          <Button variant="ghost" size="sm" className="w-full justify-start text-xs">
                            <Award className="mr-2 h-4 w-4" />
                            Awards & Recognition
                          </Button>
                        </CardContent>
                      </Card>
                      
                      {/* Similar authors */}
                      <Card className="bg-cream dark:bg-dark-surface">
                        <CardHeader className="pb-2">
                          <CardTitle className="text-base">Similar Authors</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-3">
                          {['Leo Tolstoy', 'Fyodor Dostoevsky', 'Ivan Turgenev'].map((name, i) => (
                            <div key={i} className="flex items-center gap-2">
                              <div className="w-8 h-8 rounded-full bg-navy/10 dark:bg-navy/20 overflow-hidden">
                                <img src={`https://via.placeholder.com/100?text=${i+1}`} alt={name} className="w-full h-full object-cover" />
                              </div>
                              <span className="text-sm">{name}</span>
                            </div>
                          ))}
                        </CardContent>
                      </Card>
                    </div>
                  </div>
                </div>
              </TabsContent>

              {/* Discussions tab content */}
              <TabsContent value="discussions" className="w-full">
                <div className="flex items-center justify-between mb-6">
                  <h2 className="text-xl font-serif font-semibold text-navy dark:text-cream">
                    Discussions about {author?.name}
                  </h2>
                  <Button className={getSeasonColorClass()}>
                    Start New Discussion
                  </Button>
                </div>
                
                <div className="mb-6 p-4 bg-navy/5 dark:bg-navy/10 rounded-lg">
                  <div className="flex items-center gap-3 mb-4">
                    <Select defaultValue="recent">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Sort by" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="recent">Most Recent</SelectItem>
                        <SelectItem value="popular">Most Popular</SelectItem>
                        <SelectItem value="activity">Recent Activity</SelectItem>
                      </SelectContent>
                    </Select>
                    
                    <Select defaultValue="all">
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Discussion Type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Discussions</SelectItem>
                        <SelectItem value="literary">Literary Analysis</SelectItem>
                        <SelectItem value="themes">Thematic Studies</SelectItem>
                        <SelectItem value="questions">Questions</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
                
                {/* Sample discussions */}
                <div className="space-y-4">
                  {[
                    {
                      title: "Themes of isolation in the author's early works",
                      user: "LiteraryScholar",
                      replies: 24,
                      views: 342,
                      lastActive: "2 hours ago",
                      tags: ["Literary Analysis", "Themes"]
                    },
                    {
                      title: "Comparing translation styles across different editions",
                      user: "TranslationEnthusiast",
                      replies: 18,
                      views: 256,
                      lastActive: "1 day ago",
                      tags: ["Translations", "Comparison"]
                    },
                    {
                      title: "Historical context affecting literary style",
                      user: "HistoricalContext",
                      replies: 32,
                      views: 420,
                      lastActive: "3 days ago",
                      tags: ["Historical", "Context"]
                    }
                  ].map((discussion, i) => (
                    <Card key={i} className="bg-cream dark:bg-dark-surface hover:shadow-sm transition-shadow">
                      <CardContent className="p-4">
                        <div className="flex items-start gap-4">
                          <div className="w-10 h-10 rounded-full bg-navy/10 dark:bg-navy/20 overflow-hidden flex-shrink-0">
                            <img src={`https://via.placeholder.com/100?text=U${i+1}`} alt={discussion.user} className="w-full h-full object-cover" />
                          </div>
                          <div className="flex-1">
                            <h3 className="text-lg font-medium text-navy dark:text-cream hover:text-russet dark:hover:text-russet/90 transition-colors cursor-pointer">
                              {discussion.title}
                            </h3>
                            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-navy/70 dark:text-cream/70 mt-1 mb-2">
                              <span>Started by {discussion.user}</span>
                              <span>•</span>
                              <span>{discussion.replies} replies</span>
                              <span>•</span>
                              <span>{discussion.views} views</span>
                              <span>•</span>
                              <span>Last active {discussion.lastActive}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              {discussion.tags.map(tag => (
                                <Badge 
                                  key={tag} 
                                  variant="outline" 
                                  className="text-xs bg-navy/10 dark:bg-navy/20 border-none"
                                >
                                  {tag}
                                </Badge>
                              ))}
                            </div>
                          </div>
                          <div className="flex-shrink-0 flex flex-col items-end gap-2">
                            <Badge 
                              variant="outline" 
                              className={`${i === 0 ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300' : ''} text-xs`}
                            >
                              {i === 0 ? 'Active' : 'Open'}
                            </Badge>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
                
                {/* Community stats */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
                  <Card className="bg-navy/5 dark:bg-navy/10 border-none">
                    <CardContent className="p-4 flex items-center gap-4">
                      <MessageSquare className="h-5 w-5 text-navy/70 dark:text-cream/70" />
                      <div>
                        <p className="text-sm text-navy/70 dark:text-cream/70">Discussions</p>
                        <p className="text-xl font-bold text-navy dark:text-cream">74</p>
                      </div>
                    </CardContent>
                  </Card>
                  
                  <Card className="bg-navy/5 dark:bg-navy/10 border-none">
                    <CardContent className="p-4 flex items-center gap-4">
                      <Users className="h-5 w-5 text-navy/70 dark:text-cream/70" />
                      <div>
                        <p className="text-sm text-navy/70 dark:text-cream/70">Contributors</p>
                        <p className="text-xl font-bold text-navy dark:text-cream">132</p>
                      </div>
                    </CardContent>
                  </Card>
                  
                  <Card className="bg-navy/5 dark:bg-navy/10 border-none">
                    <CardContent className="p-4 flex items-center gap-4">
                      <Highlighter className="h-5 w-5 text-navy/70 dark:text-cream/70" />
                      <div>
                        <p className="text-sm text-navy/70 dark:text-cream/70">Annotations</p>
                        <p className="text-xl font-bold text-navy dark:text-cream">486</p>
                      </div>
                    </CardContent>
                  </Card>
                  
                  <Card className="bg-navy/5 dark:bg-navy/10 border-none">
                    <CardContent className="p-4 flex items-center gap-4">
                      <Zap className="h-5 w-5 text-navy/70 dark:text-cream/70" />
                      <div>
                        <p className="text-sm text-navy/70 dark:text-cream/70">Activity</p>
                        <p className="text-xl font-bold text-navy dark:text-cream">High</p>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </TabsContent>
            </Tabs>
          </div>
        </section>
      )}
      
      {/* Further exploration section */}
      {author && (
        <section className={`py-10 ${
          season === 'spring' ? 'bg-green-50 dark:bg-green-950/10' : 
          season === 'summer' ? 'bg-amber-50 dark:bg-amber-950/10' : 
          season === 'autumn' ? 'bg-russet/5 dark:bg-russet/10' : 
          'bg-blue-50 dark:bg-blue-950/10'
        }`}>
          <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
            <div className="text-center mb-8">
              <h2 className="text-2xl font-serif font-bold text-navy dark:text-cream mb-2">
                Continue Exploring {author.name}'s World
              </h2>
              <p className="text-navy/70 dark:text-cream/70 max-w-2xl mx-auto">
                Discover more ways to engage with {author.name}'s literary legacy
                through our interactive features and community resources.
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card className="bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow border-none">
                <CardContent className="p-6 flex flex-col items-center text-center">
                  <div className={`p-3 rounded-full ${
                    season === 'spring' ? 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400' : 
                    season === 'summer' ? 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400' : 
                    season === 'autumn' ? 'bg-russet/10 text-russet dark:bg-russet/20 dark:text-russet/90' : 
                    'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
                  } mb-4`}>
                    <Book className="h-8 w-8" />
                  </div>
                  <h3 className="text-lg font-semibold text-navy dark:text-cream mb-2">
                    Reading Guides
                  </h3>
                  <p className="text-navy/70 dark:text-cream/70 text-sm mb-4">
                    Access in-depth reading guides for all major works,
                    with historical context, analysis, and discussion questions.
                  </p>
                  <Button 
                    variant="outline"
                    className="mt-auto"
                  >
                    Explore Guides
                  </Button>
                </CardContent>
              </Card>
              
              <Card className="bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow border-none">
                <CardContent className="p-6 flex flex-col items-center text-center">
                  <div className={`p-3 rounded-full ${
                    season === 'spring' ? 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400' : 
                    season === 'summer' ? 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400' : 
                    season === 'autumn' ? 'bg-russet/10 text-russet dark:bg-russet/20 dark:text-russet/90' : 
                    'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
                  } mb-4`}>
                    <HeartHandshake className="h-8 w-8" />
                  </div>
                  <h3 className="text-lg font-semibold text-navy dark:text-cream mb-2">
                    Community Discussions
                  </h3>
                  <p className="text-navy/70 dark:text-cream/70 text-sm mb-4">
                    Join active discussions with fellow readers,
                    scholars, and enthusiasts about the author's works.
                  </p>
                  <Button 
                    variant="outline"
                    className="mt-auto"
                  >
                    Join Conversations
                  </Button>
                </CardContent>
              </Card>
              
              <Card className="bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow border-none">
                <CardContent className="p-6 flex flex-col items-center text-center">
                  <div className={`p-3 rounded-full ${
                    season === 'spring' ? 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400' : 
                    season === 'summer' ? 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400' : 
                    season === 'autumn' ? 'bg-russet/10 text-russet dark:bg-russet/20 dark:text-russet/90' : 
                    'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
                  } mb-4`}>
                    <SunMoon className="h-8 w-8" />
                  </div>
                  <h3 className="text-lg font-semibold text-navy dark:text-cream mb-2">
                    Literary Analysis
                  </h3>
                  <p className="text-navy/70 dark:text-cream/70 text-sm mb-4">
                    Explore thematic studies, stylistic analyses,
                    and comparative literary criticism of the author's body of work.
                  </p>
                  <Button 
                    variant="outline"
                    className="mt-auto"
                  >
                    Read Analysis
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>
      )}
    </PageLayout>
  );
}
