import {
  AutoAwesomeMosaicOutlined,
  AutoAwesomeRounded,
  CodeRounded,
  GroupRounded,
  HistoryRounded,
  Webhook,
} from '@mui/icons-material'
import Card from '@mui/joy/Card'
import Container from '@mui/joy/Container'
import Typography from '@mui/joy/Typography'
import { styled } from '@mui/system'

const FeatureIcon = styled('div')({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: '#f0f0f0', // Adjust the background color as needed
  borderRadius: '50%',
  minWidth: '60px',
  height: '60px',
  marginRight: '16px',
})

const CardData = [
  {
    title: 'Open Source & Transparent',
    headline: 'Built for the Community',
    description:
      'Donetick is a community-driven, open-source project. Contribute, customize, and make task management truly yours.',
    icon: CodeRounded,
  },
  {
    title: 'Circles: Your Task Hub',
    headline: 'Share & Conquer Together',
    description:
      'Create circles for your family, friends, or team. Easily share tasks and track progress within each group.',
    icon: GroupRounded,
  },
  {
    title: 'Track Your Progress',
    headline: "See Who's Done What",
    description:
      'View a history of task completion for each member of your circles. Celebrate successes and stay on top of your goals.',
    icon: HistoryRounded,
  },
  {
    title: 'Automated Chore Scheduling',
    headline: 'Fully Customizable Recurring Tasks',
    description:
      'Set up chores to repeat daily, weekly, or monthly. Donetick will automatically assign and track each task for you.',
    icon: AutoAwesomeMosaicOutlined,
  },
  {
    title: 'Automated Task Assignment',
    headline: 'Share Responsibilities Equally',
    description:
      'can automatically assigns tasks to each member of your circle. Randomly or based on past completion.',
    icon: AutoAwesomeRounded,
  },
  {
    title: 'Integrations & Webhooks',
    headline: 'API & 3rd Party Integrations',
    description:
      'Connect Donetick with your favorite apps and services. Trigger tasks based on events from other platforms.',
    icon: Webhook,
  },
]

function Feature2({ icon: Icon, title, headline, description, index }) {
  return (
    <Card
      variant='plain'
      sx={{ textAlign: 'left', p: 2 }}
      data-aos-delay={100 * index}
      data-aos-anchor='[data-aos-id-features2-blocks]'
      data-aos='fade-up'
    >
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <FeatureIcon>
          <Icon
            color='primary'
            style={{ Width: '30px', height: '30px' }}
            stroke={1.5}
          />
        </FeatureIcon>
        <div>
          {/* Changes are within this div */}
          <Typography level='h4' mt={1} mb={0.5}>
            {title}
          </Typography>
          <Typography level='body-sm' color='neutral' lineHeight={1.4}>
            {headline}
          </Typography>
        </div>
      </div>
      <Typography level='body-md' color='neutral' lineHeight={1.6}>
        {description}
      </Typography>
    </Card>
  )
}

function FeaturesSection() {
  const features = CardData.map((feature, index) => (
    <Feature2
      icon={feature.icon}
      title={feature.title}
      headline={feature.headline}
      description={feature.description}
      index={index}
      key={index}
    />
  ))

  return (
    <Container sx={{ textAlign: 'center' }}>
      <Typography level='h4' mt={2} mb={4}>
        Donetick
      </Typography>

      <Container maxWidth={'lg'} sx={{ mb: 8 }}>
        <Typography level='body-md' color='neutral'>
          Navigate personal growth with genuine insights, thoughtful privacy,
          and actionable steps tailored just for you.
        </Typography>
      </Container>

      <div
        className='align-center mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'
        data-aos-id-features2-blocks
      >
        {features}
      </div>
    </Container>
  )
}

export default FeaturesSection