Author Spotlight

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  CalendarIcon, Clock3Icon, ArrowRightIcon, GlobeIcon } from 'lucide-react';
import { Linkedin, Twitter } from '@/components/ui/brand-icons';
import { Separator } from '@/components/ui/separator';

// Define types
interface Author {
  id: number;
  name: string;
  role: string;
  avatar: string;
  bio: string;
  socialLinks: {
    twitter?: string;
    linkedin?: string;
    website?: string;
  };
}

interface BlogPost {
  id: number;
  title: string;
  excerpt: string;
  category: string;
  date: string;
  readTime: string;
  imageUrl: string;
  authorId: number;
}

// Author data
const authors: Author[] = [
  {
    id: 1,
    name: 'Emma Johnson',
    role: 'Chief Marketing Officer',
    avatar:
      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    bio: 'Emma is a marketing executive with over 15 years of experience in digital strategy, brand development, and content marketing. She specializes in helping companies leverage data to create customer-centric marketing approaches.',
    socialLinks: {
      twitter: '#',
      linkedin: '#',
      website: '#',
    },
  },
  {
    id: 2,
    name: 'Michael Chen',
    role: 'SEO Specialist',
    avatar:
      'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    bio: 'Michael is an SEO expert with a passion for helping businesses improve their online visibility. With a background in data analytics, he combines technical expertise with content strategy to drive organic growth.',
    socialLinks: {
      twitter: '#',
      linkedin: '#',
    },
  },
  {
    id: 3,
    name: 'Sophia Martinez',
    role: 'Content Strategist',
    avatar:
      'https://images.unsplash.com/photo-1534751516642-a1af1ef26a56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
    bio: 'Sophia specializes in developing content strategies that align with business goals. Her expertise in storytelling and audience engagement helps brands create meaningful connections with their customers.',
    socialLinks: {
      twitter: '#',
      linkedin: '#',
      website: '#',
    },
  },
];

// Blog posts data
const blogPosts: BlogPost[] = [
  {
    id: 1,
    title:
      'Building a Cohesive Brand Strategy in a Fragmented Digital Landscape',
    excerpt:
      'Explore strategies for maintaining brand consistency across multiple platforms while adapting to the unique requirements of each channel.',
    category: 'Branding',
    date: 'April 15, 2023',
    readTime: '10 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1579532537598-459ecdaf39cc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    authorId: 1,
  },
  {
    id: 2,
    title: 'The Future of First-Party Data in a Cookieless World',
    excerpt:
      'Learn how marketers can prepare for the phasing out of third-party cookies by building valuable first-party data strategies.',
    category: 'Data & Analytics',
    date: 'April 10, 2023',
    readTime: '12 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    authorId: 1,
  },
  {
    id: 3,
    title: 'Advanced SEO Techniques for E-Commerce Websites',
    excerpt:
      'Discover technical SEO strategies specifically designed to improve the visibility and performance of online stores.',
    category: 'SEO',
    date: 'April 12, 2023',
    readTime: '9 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1562577309-4932fdd64cd1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    authorId: 2,
  },
  {
    id: 4,
    title: 'Maximizing ROI from Local Search Optimization',
    excerpt:
      'Learn practical strategies for small businesses to enhance their local search presence and drive qualified traffic to both digital and physical storefronts.',
    category: 'Local SEO',
    date: 'April 5, 2023',
    readTime: '7 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1596526131083-e8c633c948d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
    authorId: 2,
  },
  {
    id: 5,
    title: 'Storytelling in B2B Marketing: Breaking Through the Noise',
    excerpt:
      'Explore how narrative techniques can transform complex B2B messaging into compelling content that resonates with decision-makers.',
    category: 'Content Strategy',
    date: 'April 8, 2023',
    readTime: '8 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    authorId: 3,
  },
  {
    id: 6,
    title: 'Creating Content Ecosystems That Drive the Entire Marketing Funnel',
    excerpt:
      'Learn how to develop interconnected content pieces that guide prospects from awareness to decision while providing value at each stage.',
    category: 'Content Marketing',
    date: 'April 3, 2023',
    readTime: '11 min read',
    imageUrl:
      'https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    authorId: 3,
  },
];

export default function BlogSectionAuthorSpotlight() {
  // Group posts by author
  const postsByAuthor = authors.map((author) => ({
    author,
    posts: blogPosts.filter((post) => post.authorId === author.id),
  }));

  return (
    <section className="container mx-auto space-y-16 px-4 py-24 md:px-6 2xl:max-w-[1400px]">
      <div className="space-y-4 text-center">
        <h2 className="text-3xl font-bold tracking-tight">Expert Insights</h2>
        <p className="text-muted-foreground mx-auto max-w-2xl">
          Learn from our team of industry experts sharing their knowledge and
          experience.
        </p>
      </div>

      <Tabs defaultValue={authors[0]!.id.toString()} className="w-full">
        <div className="mb-8 flex justify-center overflow-x-auto">
          <TabsList className="grid h-fit w-full max-w-2xl justify-normal gap-2 md:grid-cols-3">
            {authors.map((author) => (
              <TabsTrigger
                key={author.id}
                value={author.id.toString()}
                className="flex items-center gap-2 px-4 py-3 whitespace-nowrap"
              >
                <div className="relative h-8 w-8 flex-shrink-0 overflow-hidden rounded-full">
                  <img
                    src={author.avatar}
                    alt={author.name}
                    className="object-cover"
                  />
                </div>
                <span className="truncate">{author.name}</span>
              </TabsTrigger>
            ))}
          </TabsList>
        </div>

        {postsByAuthor.map(({ author, posts }) => (
          <TabsContent
            key={author.id}
            value={author.id.toString()}
            className="space-y-12"
          >
            {/* Author Bio */}
            <div className="bg-muted flex flex-col items-center gap-8 rounded-lg p-6 md:flex-row">
              <div className="border-background relative h-36 w-36 overflow-hidden rounded-full border-4">
                <img
                  src={author.avatar}
                  alt={author.name}
                  className="object-cover"
                />
              </div>

              <div className="flex-1 text-center md:text-left">
                <h3 className="text-xl font-semibold">{author.name}</h3>
                <p className="text-muted-foreground mb-3">{author.role}</p>
                <p className="mb-4">{author.bio}</p>

                <div className="flex justify-center gap-3 md:justify-start">
                  {author.socialLinks.twitter && (
                    <Button variant="outline" size="icon" asChild>
                      <a href={author.socialLinks.twitter}>
                        <Twitter className="h-4 w-4" />
                      </a>
                    </Button>
                  )}
                  {author.socialLinks.linkedin && (
                    <Button variant="outline" size="icon" asChild>
                      <a href={author.socialLinks.linkedin}>
                        <Linkedin className="h-4 w-4" />
                      </a>
                    </Button>
                  )}
                  {author.socialLinks.website && (
                    <Button variant="outline" size="icon" asChild>
                      <a href={author.socialLinks.website}>
                        <GlobeIcon className="h-4 w-4" />
                      </a>
                    </Button>
                  )}
                </div>
              </div>
            </div>

            {/* Articles by this author */}
            <div>
              <div className="mb-6 flex items-center gap-4">
                <h3 className="text-xl font-semibold whitespace-nowrap">
                  Articles by {author.name}
                </h3>
                <Separator className="ml-2 flex-grow" />
              </div>

              <div className="grid gap-8 md:grid-cols-2">
                {posts.map((post) => (
                  <Card key={post.id} className="h-full overflow-hidden p-0">
                    <div className="grid h-full gap-6 sm:grid-cols-5">
                      <div className="relative aspect-square sm:col-span-2 sm:aspect-auto">
                        <img
                          src={post.imageUrl}
                          alt={post.title}
                          className="object-cover"
                        />
                      </div>

                      <div className="flex flex-col p-4 sm:col-span-3 sm:p-6">
                        <div className="flex-grow space-y-2">
                          <Badge className="mb-2">{post.category}</Badge>
                          <h4 className="line-clamp-2 text-lg font-semibold">
                            {post.title}
                          </h4>
                          <p className="text-muted-foreground line-clamp-3 text-sm">
                            {post.excerpt}
                          </p>
                        </div>

                        <div className="mt-4">
                          <div className="text-muted-foreground mb-2 flex items-center text-sm">
                            <CalendarIcon className="mr-1 h-3 w-3" />
                            <span>{post.date}</span>
                            <span className="mx-2">•</span>
                            <Clock3Icon className="mr-1 h-3 w-3" />
                            <span>{post.readTime}</span>
                          </div>

                          <Button variant="link" className="px-0" asChild>
                            <a href="#">
                              Read Article{' '}
                              <ArrowRightIcon className="ml-1 h-4 w-4" />
                            </a>
                          </Button>
                        </div>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            </div>
          </TabsContent>
        ))}
      </Tabs>

      <div className="flex justify-center pt-8">
        <Button className="gap-2">
          <a href="#">Meet Our Full Team</a>
          <ArrowRightIcon className="h-4 w-4" />
        </Button>
      </div>
    </section>
  );
}