'use client'
import {
  Container,
  Typography,
  Box,
  Button,
  Paper,
  useTheme,
  Divider,
  Card,
  CardContent,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@mui/material'
import {
  MenuBook,
  Chat,
  Favorite,
  Search,
  Language,
  CloudOff,
  Security,
  AutoStories,
  Public,
  VolunteerActivism,
  CheckCircle,
} from '@mui/icons-material'
import { useRouter } from 'next/navigation'
import { useLocale } from 'next-intl'

export default function Home() {
  const theme = useTheme()
  const router = useRouter()
  const locale = useLocale()

  const features = [
    {
      icon: <Public sx={{ fontSize: 48 }} />,
      title: 'A Global Bible Library',
      description: '1,200+ versions, from ancient Hebrew to modern translations',
    },
    {
      icon: <Language sx={{ fontSize: 48 }} />,
      title: 'Multilingual Access',
      description: '7 languages today, 40+ tomorrow',
    },
    {
      icon: <Favorite sx={{ fontSize: 48 }} />,
      title: 'A Prayer Wall Without Borders',
      description: 'Believers praying for one another in real time',
    },
    {
      icon: <Chat sx={{ fontSize: 48 }} />,
      title: 'AI Bible Chat',
      description: 'Answers grounded in Scripture, not opinion',
    },
    {
      icon: <Security sx={{ fontSize: 48 }} />,
      title: 'Complete Privacy',
      description: 'No ads, no tracking, no data sale — ever',
    },
    {
      icon: <CloudOff sx={{ fontSize: 48 }} />,
      title: 'Offline Access',
      description: 'Because the Word should reach even where the internet cannot',
    },
  ]

  return (
    <Box>
      {/* Hero Section */}
      <Box
        sx={{
          background: 'linear-gradient(135deg, #009688 0%, #00796B 100%)',
          color: 'white',
          py: { xs: 12, md: 20 },
          textAlign: 'center',
          position: 'relative',
          overflow: 'hidden',
        }}
      >
        <Container maxWidth="md">
          <Typography
            variant="h1"
            sx={{
              fontSize: { xs: '2.5rem', sm: '3.5rem', md: '4.5rem' },
              fontWeight: 700,
              mb: 3,
              letterSpacing: '-0.02em',
            }}
          >
            Biblical Guide
          </Typography>
          <Typography
            variant="h4"
            sx={{
              fontSize: { xs: '1.25rem', sm: '1.75rem', md: '2rem' },
              fontWeight: 400,
              mb: 6,
              opacity: 0.95,
              letterSpacing: '-0.01em',
            }}
          >
            Every Scripture. Every Language. Forever Free.
          </Typography>
          <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button
              variant="contained"
              size="large"
              sx={{
                bgcolor: 'white',
                color: 'primary.main',
                px: 4,
                py: 1.5,
                fontSize: '1.1rem',
                fontWeight: 600,
                '&:hover': { bgcolor: 'grey.100' },
                textTransform: 'none',
              }}
              startIcon={<AutoStories />}
              onClick={() => router.push(`/${locale}/bible`)}
            >
              Read the Bible
            </Button>
            <Button
              variant="outlined"
              size="large"
              sx={{
                borderColor: 'white',
                color: 'white',
                px: 4,
                py: 1.5,
                fontSize: '1.1rem',
                fontWeight: 600,
                '&:hover': {
                  borderColor: 'white',
                  bgcolor: 'rgba(255,255,255,0.1)',
                },
                textTransform: 'none',
              }}
              onClick={() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })}
            >
              Support the Mission
            </Button>
          </Box>
        </Container>
      </Box>

      {/* Mission Section */}
      <Container maxWidth="md" sx={{ py: { xs: 10, md: 16 }, textAlign: 'center' }}>
        <Typography
          variant="h2"
          sx={{
            fontSize: { xs: '2rem', md: '3rem' },
            fontWeight: 700,
            mb: 4,
            letterSpacing: '-0.02em',
          }}
        >
          The Word Should Never Have a Price Tag
        </Typography>
        <Typography
          variant="h5"
          sx={{
            fontSize: { xs: '1.1rem', md: '1.5rem' },
            fontWeight: 400,
            lineHeight: 1.6,
            color: 'text.secondary',
            maxWidth: 700,
            mx: 'auto',
          }}
        >
          Most Bible apps today hide the Word of God behind ads, upgrades, or premium study tools.
        </Typography>
        <Typography
          variant="h5"
          sx={{
            fontSize: { xs: '1.1rem', md: '1.5rem' },
            fontWeight: 600,
            lineHeight: 1.6,
            mt: 3,
            maxWidth: 700,
            mx: 'auto',
          }}
        >
          Biblical Guide is different.
        </Typography>
        <Typography
          variant="h5"
          sx={{
            fontSize: { xs: '1.1rem', md: '1.5rem' },
            fontWeight: 400,
            lineHeight: 1.6,
            mt: 2,
            maxWidth: 700,
            mx: 'auto',
          }}
        >
          No subscriptions. No tracking. No paywalls.
        </Typography>
        <Typography
          variant="h5"
          sx={{
            fontSize: { xs: '1.1rem', md: '1.5rem' },
            fontWeight: 400,
            lineHeight: 1.6,
            mt: 2,
            color: 'text.secondary',
            maxWidth: 700,
            mx: 'auto',
          }}
        >
          Just Scripture — in every language, for every believer — free forever.
        </Typography>
      </Container>

      <Divider sx={{ maxWidth: 200, mx: 'auto', borderColor: 'grey.300' }} />

      {/* Donation Pitch Section */}
      <Container maxWidth="md" sx={{ py: { xs: 10, md: 16 }, textAlign: 'center' }}>
        <Typography
          variant="h2"
          sx={{
            fontSize: { xs: '2rem', md: '3rem' },
            fontWeight: 700,
            mb: 4,
            letterSpacing: '-0.02em',
          }}
        >
          Your Gift Keeps the Gospel Free
        </Typography>
        <Typography
          variant="h5"
          sx={{
            fontSize: { xs: '1.1rem', md: '1.5rem' },
            fontWeight: 400,
            lineHeight: 1.8,
            color: 'text.secondary',
            mb: 5,
            maxWidth: 700,
            mx: 'auto',
          }}
        >
          Every donation directly supports the servers, translations, and technology that make Biblical Guide possible.
        </Typography>
        <Typography
          variant="h5"
          sx={{
            fontSize: { xs: '1.1rem', md: '1.5rem' },
            fontWeight: 400,
            lineHeight: 1.8,
            color: 'text.secondary',
            mb: 5,
            maxWidth: 700,
            mx: 'auto',
          }}
        >
          When you give, you are not paying for access — you are keeping access open for millions who cannot afford to pay.
        </Typography>
        <Paper
          elevation={0}
          sx={{
            bgcolor: 'primary.light',
            color: 'white',
            py: 4,
            px: 3,
            borderRadius: 3,
            maxWidth: 600,
            mx: 'auto',
          }}
        >
          <Typography
            variant="h5"
            sx={{
              fontSize: { xs: '1.1rem', md: '1.3rem' },
              fontWeight: 500,
              fontStyle: 'italic',
              lineHeight: 1.6,
            }}
          >
            Freely you have received; freely give.
          </Typography>
          <Typography variant="h6" sx={{ mt: 2, fontWeight: 600 }}>
            — Matthew 10:8
          </Typography>
        </Paper>
      </Container>

      {/* Features Section */}
      <Box sx={{ bgcolor: 'grey.50', py: { xs: 10, md: 16 } }}>
        <Container maxWidth="lg">
          <Typography
            variant="h2"
            sx={{
              fontSize: { xs: '2rem', md: '3rem' },
              fontWeight: 700,
              mb: 3,
              textAlign: 'center',
              letterSpacing: '-0.02em',
            }}
          >
            What Your Support Sustains
          </Typography>
          <Typography
            variant="h6"
            sx={{
              textAlign: 'center',
              color: 'text.secondary',
              mb: 8,
              maxWidth: 700,
              mx: 'auto',
            }}
          >
            Your donation keeps every verse, every prayer, every word — free to all.
          </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(33.33% - 24px)' }, maxWidth: { xs: '100%', md: 400 } }}>
                <Card
                  elevation={0}
                  sx={{
                    height: '100%',
                    textAlign: 'center',
                    bgcolor: 'white',
                    border: '1px solid',
                    borderColor: 'grey.200',
                    transition: 'transform 0.2s, box-shadow 0.2s',
                    '&:hover': {
                      transform: 'translateY(-4px)',
                      boxShadow: 2,
                    },
                  }}
                >
                  <CardContent sx={{ p: 4 }}>
                    <Box sx={{ color: 'primary.main', mb: 2 }}>
                      {feature.icon}
                    </Box>
                    <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
                      {feature.title}
                    </Typography>
                    <Typography variant="body1" color="text.secondary" sx={{ lineHeight: 1.6 }}>
                      {feature.description}
                    </Typography>
                  </CardContent>
                </Card>
              </Box>
            ))}
          </Box>
        </Container>
      </Box>

      {/* Donation Options Section */}
      <Container maxWidth="md" sx={{ py: { xs: 10, md: 16 }, textAlign: 'center' }}>
        <Typography
          variant="h2"
          sx={{
            fontSize: { xs: '2rem', md: '3rem' },
            fontWeight: 700,
            mb: 6,
            letterSpacing: '-0.02em',
          }}
        >
          How You Can Support
        </Typography>

        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 500, mx: 'auto' }}>
          <Button
            variant="contained"
            size="large"
            sx={{
              py: 2,
              fontSize: '1.2rem',
              fontWeight: 600,
              textTransform: 'none',
              bgcolor: 'primary.main',
              '&:hover': { bgcolor: 'primary.dark' },
            }}
            startIcon={<span style={{ fontSize: '1.5rem' }}>💳</span>}
            href="https://paypal.me/biblicalguide"
            target="_blank"
          >
            Donate via PayPal
          </Button>

          <Button
            variant="outlined"
            size="large"
            sx={{
              py: 2,
              fontSize: '1.2rem',
              fontWeight: 600,
              textTransform: 'none',
              borderColor: 'primary.main',
              color: 'primary.main',
              '&:hover': {
                borderColor: 'primary.dark',
                bgcolor: 'rgba(0, 150, 136, 0.04)',
              },
            }}
            startIcon={<span style={{ fontSize: '1.5rem' }}>💰</span>}
            onClick={() => router.push(`/${locale}/donate`)}
          >
            Donate by Card
          </Button>

          <Box sx={{ py: 2 }}>
            <Typography variant="body1" color="text.secondary" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1 }}>
              <span style={{ fontSize: '1.5rem' }}>🎯</span>
              <span>Support us on Kickstarter (coming soon)</span>
            </Typography>
          </Box>
        </Box>

        <Typography variant="body1" color="text.secondary" sx={{ mt: 6, fontSize: '1.1rem' }}>
          Every contribution — big or small — helps keep Scripture open to everyone, everywhere.
        </Typography>
      </Container>

      {/* Why It Matters Section */}
      <Box sx={{ bgcolor: 'grey.900', color: 'white', py: { xs: 10, md: 16 } }}>
        <Container maxWidth="md" sx={{ textAlign: 'center' }}>
          <Typography
            variant="h2"
            sx={{
              fontSize: { xs: '2rem', md: '3rem' },
              fontWeight: 700,
              mb: 6,
              letterSpacing: '-0.02em',
            }}
          >
            Why It Matters
          </Typography>

          <List sx={{ maxWidth: 700, mx: 'auto' }}>
            <ListItem sx={{ py: 2, flexDirection: 'column', alignItems: 'flex-start' }}>
              <Typography variant="h6" sx={{ fontSize: '1.2rem', mb: 1, lineHeight: 1.6 }}>
                Each day, someone opens a Bible app and hits a paywall.
              </Typography>
            </ListItem>
            <ListItem sx={{ py: 2, flexDirection: 'column', alignItems: 'flex-start' }}>
              <Typography variant="h6" sx={{ fontSize: '1.2rem', mb: 1, lineHeight: 1.6 }}>
                Each day, a believer loses connection and can't read the Word offline.
              </Typography>
            </ListItem>
            <ListItem sx={{ py: 2, flexDirection: 'column', alignItems: 'flex-start' }}>
              <Typography variant="h6" sx={{ fontSize: '1.2rem', mb: 1, lineHeight: 1.6 }}>
                Each day, the Gospel becomes harder to reach for someone who needs it most.
              </Typography>
            </ListItem>
          </List>

          <Typography
            variant="h4"
            sx={{
              fontSize: { xs: '1.5rem', md: '2rem' },
              fontWeight: 700,
              mt: 6,
              mb: 3,
            }}
          >
            Together, we can change that.
          </Typography>

          <Typography
            variant="h5"
            sx={{
              fontSize: { xs: '1.1rem', md: '1.3rem' },
              fontWeight: 400,
              lineHeight: 1.6,
              opacity: 0.9,
            }}
          >
            Your donation ensures that God&apos;s Word remains freely accessible — without cost, without barriers, without end.
          </Typography>
        </Container>
      </Box>

      {/* Join the Mission Section */}
      <Container maxWidth="md" sx={{ py: { xs: 10, md: 16 }, textAlign: 'center' }}>
        <Typography
          variant="h2"
          sx={{
            fontSize: { xs: '2rem', md: '3rem' },
            fontWeight: 700,
            mb: 4,
            letterSpacing: '-0.02em',
          }}
        >
          Join the Mission
        </Typography>

        <Typography
          variant="h5"
          sx={{
            fontSize: { xs: '1.1rem', md: '1.5rem' },
            fontWeight: 400,
            lineHeight: 1.8,
            color: 'text.secondary',
            mb: 2,
          }}
        >
          Biblical Guide is built by one believer, sustained by many.
        </Typography>
        <Typography
          variant="h5"
          sx={{
            fontSize: { xs: '1.1rem', md: '1.5rem' },
            fontWeight: 400,
            lineHeight: 1.8,
            color: 'text.secondary',
            mb: 6,
          }}
        >
          No corporations. No investors. Just faith, code, and community.
        </Typography>

        <Typography
          variant="h5"
          sx={{
            fontSize: { xs: '1.1rem', md: '1.5rem' },
            fontWeight: 600,
            lineHeight: 1.8,
            mb: 6,
          }}
        >
          If this mission speaks to you — help keep the Bible free forever.
        </Typography>

        <Button
          variant="contained"
          size="large"
          sx={{
            py: 2.5,
            px: 5,
            fontSize: '1.4rem',
            fontWeight: 700,
            textTransform: 'none',
            bgcolor: 'primary.main',
            '&:hover': { bgcolor: 'primary.dark' },
            mb: 2,
          }}
          href="https://paypal.me/biblicalguide"
          target="_blank"
          startIcon={<VolunteerActivism sx={{ fontSize: '2rem' }} />}
        >
          Donate Now
        </Button>

        <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.95rem', fontStyle: 'italic' }}>
          Every verse you read today stays free tomorrow.
        </Typography>
      </Container>

      {/* Footer CTA */}
      <Box
        sx={{
          background: 'linear-gradient(135deg, #009688 0%, #00796B 100%)',
          color: 'white',
          py: 8,
          textAlign: 'center',
        }}
      >
        <Container maxWidth="md">
          <Typography
            variant="h3"
            sx={{
              fontSize: { xs: '1.75rem', md: '2.5rem' },
              fontWeight: 700,
              mb: 2,
              letterSpacing: '-0.02em',
            }}
          >
            Biblical-Guide.com
          </Typography>
          <Typography
            variant="h5"
            sx={{
              fontSize: { xs: '1.1rem', md: '1.5rem' },
              fontWeight: 400,
              opacity: 0.95,
            }}
          >
            Every Scripture. Every Language. Forever Free.
          </Typography>

          <Box sx={{ display: 'flex', gap: 3, justifyContent: 'center', mt: 6, flexWrap: 'wrap' }}>
            <Button
              variant="outlined"
              sx={{
                borderColor: 'white',
                color: 'white',
                '&:hover': {
                  borderColor: 'white',
                  bgcolor: 'rgba(255,255,255,0.1)',
                },
                textTransform: 'none',
              }}
              onClick={() => router.push(`/${locale}/bible`)}
            >
              Read Bible
            </Button>
            <Button
              variant="outlined"
              sx={{
                borderColor: 'white',
                color: 'white',
                '&:hover': {
                  borderColor: 'white',
                  bgcolor: 'rgba(255,255,255,0.1)',
                },
                textTransform: 'none',
              }}
              onClick={() => router.push(`/${locale}/prayers`)}
            >
              Prayer Wall
            </Button>
            <Button
              variant="outlined"
              sx={{
                borderColor: 'white',
                color: 'white',
                '&:hover': {
                  borderColor: 'white',
                  bgcolor: 'rgba(255,255,255,0.1)',
                },
                textTransform: 'none',
              }}
              onClick={() => window.dispatchEvent(new CustomEvent('floating-chat:open', { detail: { fullscreen: true } }))}
            >
              AI Chat
            </Button>
            <Button
              variant="outlined"
              sx={{
                borderColor: 'white',
                color: 'white',
                '&:hover': {
                  borderColor: 'white',
                  bgcolor: 'rgba(255,255,255,0.1)',
                },
                textTransform: 'none',
              }}
              onClick={() => router.push(`/${locale}/contact`)}
            >
              Contact
            </Button>
          </Box>
        </Container>
      </Box>
    </Box>
  )
}