'use client'
import {
  Container,
  Card,
  CardContent,
  Typography,
  Box,
  Button,
  Paper,
  useTheme,
  Accordion,
  AccordionSummary,
  AccordionDetails,
  TextField,
  Chip,
  Avatar,
  Divider,
  IconButton,
  Tooltip,
} from '@mui/material'
import {
  MenuBook,
  Chat,
  Favorite as Prayer,
  Search,
  AutoStories,
  Favorite,
  ExpandMore,
  PlayArrow,
  Share,
  Bookmark,
  TrendingUp,
  QuestionAnswer,
  Facebook,
  Twitter,
  Instagram,
  YouTube,
} from '@mui/icons-material'
import { useRouter } from 'next/navigation'
import { useTranslations, useLocale } from 'next-intl'
import { useState, useEffect } from 'react'

export default function Home() {
  const theme = useTheme()
  const router = useRouter()
  const t = useTranslations('home')
  const tSeo = useTranslations('seo')
  const locale = useLocale()
  const [userCount, setUserCount] = useState(2847)
  const [expandedFaq, setExpandedFaq] = useState<string | false>(false)
  const [email, setEmail] = useState('')

  // Simulate live user counter
  useEffect(() => {
    const interval = setInterval(() => {
      setUserCount(prev => prev + Math.floor(Math.random() * 3))
    }, 5000)
    return () => clearInterval(interval)
  }, [])

  // Generate current date and year
  const getCurrentDate = () => {
    const now = new Date()
    if (locale === 'ro') {
      return now.toLocaleDateString('ro-RO', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    } else {
      return now.toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    }
  }

  const getCurrentYear = () => {
    return new Date().getFullYear()
  }

  const features = [
    {
      title: t('features.bible.title'),
      description: t('features.bible.description'),
      icon: <MenuBook sx={{ fontSize: 40, color: 'primary.main' }} />,
      path: '/bible',
      color: theme.palette.primary.main,
    },
    {
      title: t('features.chat.title'),
      description: t('features.chat.description'),
      icon: <Chat sx={{ fontSize: 40, color: 'secondary.main' }} />,
      path: '/__open-chat__',
      color: theme.palette.secondary.main,
    },
    {
      title: t('features.prayers.title'),
      description: t('features.prayers.description'),
      icon: <Prayer sx={{ fontSize: 40, color: 'success.main' }} />,
      path: '/prayers',
      color: theme.palette.success.main,
    },
    {
      title: t('features.search.title'),
      description: t('features.search.description'),
      icon: <Search sx={{ fontSize: 40, color: 'info.main' }} />,
      path: '/search',
      color: theme.palette.info.main,
    },
  ]

  return (
    <Box>
      {/* Hero Section */}
      <Box
        sx={{
          background: 'linear-gradient(135deg, #009688 0%, #00796B 100%)',
          color: 'white',
          py: 8,
          mb: 6,
        }}
      >
        <Container maxWidth="lg">
          <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', alignItems: 'center' }}>
            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 60%' } }}>
              <Typography variant="h2" component="h1" gutterBottom>
                {t('hero.title')}
              </Typography>
              <Typography variant="h5" component="h2" sx={{ mb: 3, opacity: 0.9 }}>
                {t('hero.subtitle')}
              </Typography>
              <Typography variant="body1" sx={{ mb: 3, opacity: 0.8, maxWidth: 600 }}>
                {t('hero.description')}
              </Typography>
              <Box sx={{ mb: 4, p: 2, bgcolor: 'rgba(255,255,255,0.1)', borderRadius: 2 }}>
                <Typography variant="body2" sx={{ opacity: 0.9 }}>
                  {t('hero.liveCounter')}
                </Typography>
              </Box>
              <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
                <Button
                  variant="contained"
                  size="large"
                  sx={{
                    bgcolor: 'secondary.main',
                    '&:hover': { bgcolor: 'secondary.dark' },
                  }}
                  startIcon={<AutoStories />}
                  onClick={() => router.push(`/${locale}/bible`)}
                >
                  {t('hero.cta.readBible')}
                </Button>
                <Button
                  variant="outlined"
                  size="large"
                  sx={{
                    borderColor: 'white',
                    color: 'white',
                    '&:hover': {
                      borderColor: 'white',
                      bgcolor: 'rgba(255,255,255,0.1)',
                    },
                  }}
                  startIcon={<Chat />}
                  onClick={() => {
                    window.dispatchEvent(new CustomEvent('floating-chat:open', { detail: { fullscreen: true } }))
                  }}
                >
                  {t('hero.cta.askAI')}
                </Button>
              </Box>
            </Box>
            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 40%' } }}>
              <Box sx={{ textAlign: 'center' }}>
                <MenuBook sx={{ fontSize: 120, opacity: 0.8 }} />
              </Box>
            </Box>
          </Box>
        </Container>
      </Box>

      {/* Interactive Demo Section */}
      <Container maxWidth="lg" sx={{ mb: 8 }}>
        <Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 2 }}>
          {t('demo.title')}
        </Typography>
        <Typography variant="body1" textAlign="center" color="text.secondary" sx={{ mb: 6 }}>
          {t('demo.subtitle')}
        </Typography>

        <Paper elevation={3} sx={{ p: 4, maxWidth: 600, mx: 'auto', borderRadius: 3 }}>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, minHeight: 200 }}>
            <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
              <Avatar sx={{ bgcolor: 'primary.main' }}>
                <Chat />
              </Avatar>
              <Paper sx={{ p: 2, bgcolor: 'grey.100', borderRadius: 2, flex: 1 }}>
                <Typography variant="body2">{t('demo.userQuestion')}</Typography>
              </Paper>
            </Box>
            <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start', justifyContent: 'flex-end' }}>
              <Paper sx={{ p: 2, bgcolor: 'primary.light', color: 'white', borderRadius: 2, flex: 1, maxWidth: '80%' }}>
                <Typography variant="body2">{t('demo.aiResponse')}</Typography>
              </Paper>
              <Avatar sx={{ bgcolor: 'secondary.main' }}>
                <AutoStories />
              </Avatar>
            </Box>
          </Box>
          <Box sx={{ textAlign: 'center', mt: 3 }}>
            <Button
              variant="contained"
              size="large"
              startIcon={<PlayArrow />}
              onClick={() => window.dispatchEvent(new CustomEvent('floating-chat:open', { detail: { fullscreen: true } }))}
            >
              {t('demo.tryButton')}
            </Button>
          </Box>
        </Paper>
      </Container>

      {/* Daily Verse Section */}
      <Paper sx={{ bgcolor: 'primary.light', color: 'white', py: 6, mb: 8 }}>
        <Container maxWidth="md">
          <Typography variant="h4" component="h2" textAlign="center" sx={{ mb: 1 }}>
            {t('dailyVerse.title')}
          </Typography>
          <Typography variant="body2" textAlign="center" sx={{ mb: 4, opacity: 0.9 }}>
            {getCurrentDate()}
          </Typography>

          <Paper sx={{ p: 4, textAlign: 'center', bgcolor: 'rgba(255,255,255,0.95)', color: 'text.primary', borderRadius: 3 }}>
            <Typography variant="h5" sx={{ mb: 3, fontStyle: 'italic', lineHeight: 1.6 }}>
              {t('dailyVerse.verse')}
            </Typography>
            <Typography variant="h6" color="primary" sx={{ fontWeight: 600 }}>
              {t('dailyVerse.reference')}
            </Typography>

            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center', mt: 3 }}>
              <Tooltip title={t('dailyVerse.discuss')}>
                <IconButton
                  color="primary"
                  onClick={() => {
                    const verseText = t('dailyVerse.verse')
                    const reference = t('dailyVerse.reference')
                    const discussMessage = locale === 'ro'
                      ? `Poți să îmi explici mai mult despre acest verset: "${verseText}" (${reference})?`
                      : `Can you explain more about this verse: "${verseText}" (${reference})?`

                    window.dispatchEvent(new CustomEvent('floating-chat:open', {
                      detail: {
                        fullscreen: true,
                        initialMessage: discussMessage
                      }
                    }))
                  }}
                >
                  <QuestionAnswer />
                </IconButton>
              </Tooltip>
              <Tooltip title={t('dailyVerse.save')}>
                <IconButton color="primary">
                  <Bookmark />
                </IconButton>
              </Tooltip>
              <Tooltip title={t('dailyVerse.share')}>
                <IconButton color="primary">
                  <Share />
                </IconButton>
              </Tooltip>
            </Box>
          </Paper>

          <Box sx={{ textAlign: 'center', mt: 4 }}>
            <Typography variant="body2" sx={{ mb: 2, opacity: 0.9 }}>
              {t('dailyVerse.tomorrow')}
            </Typography>
            <Button variant="outlined" sx={{ color: 'white', borderColor: 'white' }}>
              {t('dailyVerse.subscribe')}
            </Button>
          </Box>
        </Container>
      </Paper>

      {/* How It Works Section */}
      <Container maxWidth="lg" sx={{ mb: 8 }}>
        <Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 2 }}>
          {t('howItWorks.title')}
        </Typography>
        <Typography variant="body1" textAlign="center" color="text.secondary" sx={{ mb: 6 }}>
          {t('howItWorks.subtitle')}
        </Typography>

        <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
          {[
            { icon: <Chat sx={{ fontSize: 60 }} />, title: t('howItWorks.step1.title'), description: t('howItWorks.step1.description') },
            { icon: <MenuBook sx={{ fontSize: 60 }} />, title: t('howItWorks.step2.title'), description: t('howItWorks.step2.description') },
            { icon: <TrendingUp sx={{ fontSize: 60 }} />, title: t('howItWorks.step3.title'), description: t('howItWorks.step3.description') },
          ].map((step, index) => (
            <Box key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(33.33% - 24px)' }, textAlign: 'center', maxWidth: 300 }}>
              <Box sx={{ mb: 3, color: 'primary.main' }}>
                {step.icon}
              </Box>
              <Typography variant="h5" sx={{ mb: 2, fontWeight: 600 }}>
                {step.title}
              </Typography>
              <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
                {step.description}
              </Typography>
              <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: 40, height: 40, borderRadius: '50%', bgcolor: 'primary.main', color: 'white', mx: 'auto', fontSize: '1.2rem', fontWeight: 600 }}>
                {index + 1}
              </Box>
            </Box>
          ))}
        </Box>

        <Box sx={{ textAlign: 'center', mt: 6 }}>
          <Button variant="contained" size="large" onClick={() => router.push(`/${locale}/bible`)}>
            {t('howItWorks.getStarted')}
          </Button>
        </Box>
      </Container>

      {/* Community Prayer Wall */}
      <Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
        <Container maxWidth="lg">
          <Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 6 }}>
            {t('prayerWall.title')}
          </Typography>

          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap', justifyContent: 'center' }}>
            {[
              { text: t('prayerWall.prayer1'), time: t('prayerWall.time1'), count: 32 },
              { text: t('prayerWall.prayer2'), time: t('prayerWall.time2'), count: 47 },
              { text: t('prayerWall.prayer3'), time: t('prayerWall.time3'), count: 89, type: 'celebration' },
            ].map((prayer, index) => (
              <Card key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(33.33% - 16px)' }, maxWidth: 350 }}>
                <CardContent>
                  <Typography variant="body1" sx={{ mb: 2 }}>
                    {prayer.text}
                  </Typography>
                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Typography variant="caption" color="text.secondary">
                      {prayer.time}
                    </Typography>
                    <Chip
                      label={prayer.type === 'celebration' ? `❤️ ${prayer.count} ${t('prayerWall.celebrating')}` : `🙏 ${prayer.count} ${t('prayerWall.praying')}`}
                      size="small"
                      color={prayer.type === 'celebration' ? 'success' : 'primary'}
                      variant="outlined"
                    />
                  </Box>
                </CardContent>
              </Card>
            ))}
          </Box>

          <Box sx={{ textAlign: 'center', mt: 4, display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="contained" onClick={() => router.push(`/${locale}/prayers`)}>
              {t('prayerWall.shareRequest')}
            </Button>
            <Button variant="outlined" onClick={() => router.push(`/${locale}/prayers`)}>
              {t('prayerWall.viewAll')}
            </Button>
          </Box>
        </Container>
      </Paper>

      {/* Features Section */}
      <Container maxWidth="lg" sx={{ mb: 8 }}>
        <Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 2 }}>
          {t('features.title')}
        </Typography>
        <Typography
          variant="body1"
          textAlign="center"
          color="text.secondary"
          sx={{ mb: 6, maxWidth: 600, mx: 'auto' }}
        >
          {t('features.subtitle')}
        </Typography>

        <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
          {features.map((feature, index) => (
            <Box key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 16px)' }, display: 'flex', justifyContent: 'center' }}>
              <Card
                sx={{
                  height: '100%',
                  width: '100%',
                  maxWidth: 400,
                  display: 'flex',
                  flexDirection: 'column',
                  transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
                  cursor: 'pointer',
                  '&:hover': {
                    transform: 'translateY(-4px)',
                    boxShadow: 4,
                  },
                }}
                onClick={() => {
                  if (feature.path === '/__open-chat__') {
                    window.dispatchEvent(new CustomEvent('floating-chat:open', { detail: { fullscreen: true } }))
                  } else {
                    router.push(`/${locale}${feature.path}`)
                  }
                }}
              >
                <CardContent sx={{
                  flexGrow: 1,
                  textAlign: 'center',
                  p: 4,
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  height: 280,
                  width: '100%'
                }}>
                  <Box>
                    <Box sx={{ mb: 2 }}>
                      {feature.icon}
                    </Box>
                    <Typography variant="h5" component="h3" sx={{ fontWeight: 600, mb: 2 }}>
                      {feature.title}
                    </Typography>
                    <Typography
                      variant="body1"
                      color="text.secondary"
                      sx={{
                        lineHeight: 1.6,
                        overflow: 'hidden',
                        display: '-webkit-box',
                        WebkitLineClamp: 3,
                        WebkitBoxOrient: 'vertical',
                      }}
                    >
                      {feature.description}
                    </Typography>
                  </Box>
                </CardContent>
              </Card>
            </Box>
          ))}
        </Box>
      </Container>

      {/* Testimonials Section */}
      <Container maxWidth="lg" sx={{ mb: 8 }}>
        <Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 2 }}>
          {t('testimonials.title')}
        </Typography>
        <Typography variant="body1" textAlign="center" color="text.secondary" sx={{ mb: 6 }}>
          {t('testimonials.subtitle')}
        </Typography>

        <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
          {[
            { name: t('testimonials.testimonial1.name'), role: t('testimonials.testimonial1.role'), text: t('testimonials.testimonial1.text'), avatar: '👩' },
            { name: t('testimonials.testimonial2.name'), role: t('testimonials.testimonial2.role'), text: t('testimonials.testimonial2.text'), avatar: '👨‍💼' },
            { name: t('testimonials.testimonial3.name'), role: t('testimonials.testimonial3.role'), text: t('testimonials.testimonial3.text'), avatar: '👨' },
            { name: t('testimonials.testimonial4.name'), role: t('testimonials.testimonial4.role'), text: t('testimonials.testimonial4.text'), avatar: '👩‍🏫' },
          ].map((testimonial, index) => (
            <Card key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 16px)' }, maxWidth: 500 }}>
              <CardContent sx={{ p: 3 }}>
                <Typography variant="body1" sx={{ mb: 3, fontStyle: 'italic', lineHeight: 1.6 }}>
                  "{testimonial.text}"
                </Typography>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                  <Avatar sx={{ bgcolor: 'primary.main' }}>
                    {testimonial.avatar}
                  </Avatar>
                  <Box>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                      {testimonial.name}
                    </Typography>
                    <Typography variant="caption" color="text.secondary">
                      {testimonial.role}
                    </Typography>
                  </Box>
                </Box>
              </CardContent>
            </Card>
          ))}
        </Box>

        <Box sx={{ textAlign: 'center', mt: 4 }}>
          <Button variant="outlined">
            {t('testimonials.shareStory')}
          </Button>
        </Box>
      </Container>

      {/* FAQ Section */}
      <Container maxWidth="md" sx={{ mb: 8 }}>
        <Typography variant="h3" component="h2" textAlign="center" sx={{ mb: 6 }}>
          {t('faq.title')}
        </Typography>

        <Box>
          {[
            { id: 'accurate', question: t('faq.questions.accurate'), answer: t('faq.answers.accurate') },
            { id: 'free', question: t('faq.questions.free'), answer: t('faq.answers.free') },
            { id: 'languages', question: t('faq.questions.languages'), answer: t('faq.answers.languages') },
            { id: 'offline', question: t('faq.questions.offline'), answer: t('faq.answers.offline') },
            { id: 'privacy', question: t('faq.questions.privacy'), answer: t('faq.answers.privacy') },
            { id: 'versions', question: t('faq.questions.versions'), answer: t('faq.answers.versions') },
          ].map((faq) => (
            <Accordion
              key={faq.id}
              expanded={expandedFaq === faq.id}
              onChange={(_, isExpanded) => setExpandedFaq(isExpanded ? faq.id : false)}
              sx={{ mb: 1 }}
            >
              <AccordionSummary expandIcon={<ExpandMore />}>
                <Typography variant="h6">{faq.question}</Typography>
              </AccordionSummary>
              <AccordionDetails>
                <Typography variant="body1" color="text.secondary">
                  {faq.answer}
                </Typography>
              </AccordionDetails>
            </Accordion>
          ))}
        </Box>

        <Box sx={{ textAlign: 'center', mt: 4, display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="outlined">
            {t('faq.contactSupport')}
          </Button>
          <Button variant="text">
            {t('faq.viewAllFaqs')}
          </Button>
        </Box>
      </Container>

      {/* Stats Section */}
      <Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
        <Container maxWidth="lg">
          <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', textAlign: 'center', justifyContent: 'center' }}>
            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
              <Typography variant="h3" color="primary.main" gutterBottom>
                66
              </Typography>
              <Typography variant="h6">{t('stats.books')}</Typography>
            </Box>
            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
              <Typography variant="h3" color="secondary.main" gutterBottom>
                31,000+
              </Typography>
              <Typography variant="h6">{t('stats.verses')}</Typography>
            </Box>
            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
              <Typography variant="h3" color="success.main" gutterBottom>
                24/7
              </Typography>
              <Typography variant="h6">{t('stats.aiAvailable')}</Typography>
            </Box>
          </Box>
        </Container>
      </Paper>

      {/* Newsletter CTA Section */}
      <Paper sx={{ bgcolor: 'grey.50', py: 6, mb: 8 }}>
        <Container maxWidth="md" sx={{ textAlign: 'center' }}>
          <Typography variant="h4" component="h2" gutterBottom>
            {t('newsletter.title')}
          </Typography>
          <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
            {t('newsletter.description')}
          </Typography>
          <Box sx={{ display: 'flex', gap: 2, maxWidth: 400, mx: 'auto', flexWrap: 'wrap' }}>
            <TextField
              fullWidth
              placeholder={t('newsletter.placeholder')}
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              sx={{ flex: 1, minWidth: 250 }}
            />
            <Button variant="contained" size="large">
              {t('newsletter.subscribe')}
            </Button>
          </Box>
        </Container>
      </Paper>

      {/* Enhanced Footer */}
      <Paper component="footer" sx={{ bgcolor: 'grey.900', color: 'white', py: 6 }}>
        <Container maxWidth="lg">
          <Box sx={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'space-between', mb: 4 }}>
            {/* Brand */}
            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 auto' } }}>
              <Typography variant="h5" sx={{ mb: 2, fontWeight: 600 }}>
                {t('footer.brand')}
              </Typography>
              <Typography variant="body2" color="grey.400" sx={{ maxWidth: 300 }}>
                {tSeo('footer')}
              </Typography>
            </Box>

            {/* Quick Links */}
            <Box sx={{ flex: { xs: '1 1 50%', md: '1 1 auto' } }}>
              <Typography variant="h6" sx={{ mb: 2 }}>
                {t('footer.quickLinks.title')}
              </Typography>
              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                <Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
                  {t('footer.quickLinks.about')}
                </Button>
                <Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
                  {t('footer.quickLinks.blog')}
                </Button>
                <Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
                  {t('footer.quickLinks.support')}
                </Button>
                <Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
                  {t('footer.quickLinks.api')}
                </Button>
              </Box>
            </Box>

            {/* Legal */}
            <Box sx={{ flex: { xs: '1 1 50%', md: '1 1 auto' } }}>
              <Typography variant="h6" sx={{ mb: 2 }}>
                {t('footer.legal.title')}
              </Typography>
              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                <Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
                  {t('footer.legal.terms')}
                </Button>
                <Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
                  {t('footer.legal.privacy')}
                </Button>
                <Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
                  {t('footer.legal.cookies')}
                </Button>
                <Button color="inherit" sx={{ justifyContent: 'flex-start', p: 0 }}>
                  {t('footer.legal.gdpr')}
                </Button>
              </Box>
            </Box>

            {/* Social */}
            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 auto' } }}>
              <Typography variant="h6" sx={{ mb: 2 }}>
                {t('footer.social.title')}
              </Typography>
              <Box sx={{ display: 'flex', gap: 1 }}>
                <IconButton color="inherit" size="small">
                  <Facebook />
                </IconButton>
                <IconButton color="inherit" size="small">
                  <Twitter />
                </IconButton>
                <IconButton color="inherit" size="small">
                  <Instagram />
                </IconButton>
                <IconButton color="inherit" size="small">
                  <YouTube />
                </IconButton>
              </Box>
            </Box>
          </Box>

          <Divider sx={{ bgcolor: 'grey.700', mb: 3 }} />

          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 2 }}>
            <Typography variant="body2" color="grey.400">
              © {getCurrentYear()} {locale === 'ro' ? 'Ghid Biblic - Făcut cu ❤️ și 🙏' : 'Biblical Guide - Made with ❤️ and 🙏'}
            </Typography>
            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
              <Chip label="🇷🇴 Română" size="small" variant="outlined" sx={{ color: 'white', borderColor: 'grey.600' }} />
              <Chip label="🇺🇸 English" size="small" variant="outlined" sx={{ color: 'white', borderColor: 'grey.600' }} />
              <Chip label="+20 more" size="small" variant="outlined" sx={{ color: 'white', borderColor: 'grey.600' }} />
            </Box>
          </Box>
        </Container>
      </Paper>
    </Box>
  )
}