import {
  Avatar,   // Chakra UI component to display user profile image or avatar.
  Box,      // Box is a versatile container component with padding and margin options.
  Button,   // Button component from Chakra UI to render clickable buttons.
  Container,// Container component from Chakra UI to constrain the width of the page.
  Heading,  // Heading component for displaying headings like h1, h2, etc.
  HStack,   // Horizontal stack from Chakra UI to align items horizontally.
  Stack,    // Stack component to arrange elements either vertically or horizontally.
  Text,     // Text component for rendering basic text content.
  VStack,   // Vertical stack to align items vertically with Chakra UI.
} from '@chakra-ui/react'; // Importing UI components from Chakra UI library for styling and layout.

import React from 'react'; // Importing React.
import { RiSecurePaymentFill } from 'react-icons/ri'; // Importing a secure payment icon from react-icons.
import { Link } from 'react-router-dom'; // Importing Link for navigation between pages.
import introVideo from '../../assets/videos/intro.mp4'; // Importing an intro video from the assets folder.
import termsAndCondition from '../../assets/docs/termsAndCondition'; // Importing terms and conditions text from a document file.

// Founder Component: Displays the co-founder information.
const Founder = () => (
  <Stack direction={['column', 'row']} spacing={['4', '16']} padding={'8'}>
    {/* Avatar with an image from GitHub and text showing the founder's title */}
    <VStack>
      <Avatar
        src="https://avatars.githubusercontent.com/navnit73" // Avatar image source URL.
        boxSize={['40', '48']} // Size of the avatar, responsive for different screen sizes.
      />
      <Text children="Co-Founder" opacity={0.7} /> {/* Founder role text with reduced opacity */}
    </VStack>

    {/* Founder Name and Introduction */}
    <VStack justifyContent={'center'} alignItems={['center', 'flex-start']}>
      <Heading children="Navnit Rai" size={['md', 'xl']} /> {/* Founder Name */}
      <Text
        textAlign={['center', 'left']}  // Responsive text alignment.
        children={`Hi, I am Navnit Rai, a full-stack developer.`}  // Brief introduction text.
      />
    </VStack>
  </Stack>
);

// VideoPlayer Component: Displays a video player for the intro video.
const VideoPlayer = () => (
  <Box>
    <video
      autoPlay   // Automatically plays the video when the component loads.
      loop       // Loops the video playback.
      muted      // Mutes the video sound.
      controls   // Shows controls like play/pause, etc.
      controlsList="nodownload nofullscreen noremoteplayback"  // Disables downloading, fullscreen, and remote playback options.
      disablePictureInPicture  // Disables Picture-in-Picture mode.
      disableRemotePlayback    // Disables remote playback.
      src={introVideo}         // Source of the video file.
    ></video>
  </Box>
);

// TandC Component: Displays the terms and conditions text.
const TandC = ({ termsAndCondition }) => (
  <Box>
    <Heading
      size={'md'} // Size of the heading.
      children="Terms & Condition"  // Text for the heading.
      textAlign={['center', 'left']} // Responsive alignment for different screen sizes.
      my="4"  // Adds vertical margin (spacing) to the heading.
    />

    {/* Scrollable container for terms and conditions */}
    <Box h="sm" p="4" overflowY={'scroll'}>  
      <Text
        fontFamily={'heading'}  // Font style.
        letterSpacing={'widest'}  // Spacing between letters.
        textAlign={['center', 'left']} // Responsive text alignment.
      >
        {termsAndCondition}  // Displaying the imported terms and condition text.
      </Text>
      <Heading
        my="4"
        size={'xs'}  // Small size heading for a refund policy notice.
        children="Refund only applicable for cancellation within 7 days."
      />
    </Box>
  </Box>
);

// Main About Component: This combines the Founder, VideoPlayer, and TandC components into the full About Us page.
const About = () => {
  return (
    <Container maxW={'container.lg'} padding="16" boxShadow={'lg'}>
      {/* Page Title */}
      <Heading children="About Us" textAlign={['center', 'left']} /> 

      {/* Founder Section */}
      <Founder />

      {/* Brief description and link to the subscription plans */}
      <Stack m="8" direction={['column', 'row']} alignItems="center">
        <Text fontFamily={'cursive'} m="8" textAlign={['center', 'left']}>
          We are a video streaming platform with some premium courses available
          only for premium users.
        </Text>

        <Link to="/subscribe">
          <Button variant={'ghost'} colorScheme="yellow"> {/* Ghost button with yellow color scheme */}
            Checkout Our Plan
          </Button>
        </Link>
      </Stack>

      {/* Video Player Section */}
      <VideoPlayer />

      {/* Terms and Conditions Section */}
      <TandC termsAndCondition={termsAndCondition} />

      {/* Secure Payment Notice */}
      <HStack my="4" p={'4'}>
        <RiSecurePaymentFill />  {/* Secure Payment Icon */}
        <Heading
          size={'xs'}  // Small heading size.
          fontFamily="sans-serif"  // Font style.
          textTransform={'uppercase'}  // Uppercase text transformation.
          children={'Payment is secured by Razorpay'}  // Text content.
        />
      </HStack>
    </Container>
  );
};

export default About;  // Exporting the About component for use in the app.