import React from 'react';
import MainLayout from '../components/layout/MainLayout';
import { Box, Container, Heading, Text, Stack, Image, SimpleGrid, Divider } from '@chakra-ui/react';
import { usePublicSettings } from '../hooks/usePublicSettings';
import { assetUrl } from '../utils/url';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';

const ClubPage: React.FC = () => {
  const { data: settings } = usePublicSettings();

  return (
    <MainLayout>
      <Container maxW="7xl" py={{ base: 6, md: 10 }}>
        <Stack spacing={8}>
          <Stack direction={{ base: 'column', md: 'row' }} align={{ base: 'flex-start', md: 'center' }} spacing={6}>
            {settings?.club_logo_url && (
              <Image src={assetUrl(settings.club_logo_url)} alt={settings?.club_name || 'Logo'} boxSize={{ base: '64px', md: '80px' }} objectFit="contain" />
            )}
            <Box>
              <Heading as="h1" size="xl">{settings?.club_name || 'O klubu'}</Heading>
              <Text color="gray.600">Oficiální informace o klubu</Text>
            </Box>
          </Stack>

          {settings?.about_html ? (
            <Box>
              <Box className="prose" color="gray.800" dangerouslySetInnerHTML={{ __html: settings.about_html as any }} />
            </Box>
          ) : (
            <Box>
              <Heading as="h2" size="md" mb={3}>Značka a identita</Heading>
              <Text color="gray.700">
                Zde může být popis historie, vize a hodnot klubu. Doplníme dle potřeby v další iteraci.
              </Text>
            </Box>
          )}

          <Divider />

          <Box>
            <Heading as="h2" size="md" mb={3}>Stadion</Heading>
            <Text color="gray.700">Informace o stadionu, adresa, kapacita a fotografie (volitelné).</Text>
          </Box>
        </Stack>
      </Container>
      
      {/* Newsletter CTA */}
      <NewsletterCTA />
      
      {/* Sponsors Section */}
      <SponsorsSection />
    </MainLayout>
  );
};

export default ClubPage;
