import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../../store/store';
import { updateVarrometerState } from '../../../store/varrometerSlice';
import { BeekeepingType, TimePerHive, HiveType } from '../../../types/varrometer';
import { beekeepingOptions, timeOptions, hiveOptions } from '../../../constants/introductionOptions';
import {
  Stack,
  Typography,
  Button,
  Box,
  Container,
  Grid,
  Card,
  CardContent,
  CardActionArea,
  Stepper,
  Step,
  StepLabel,
  Paper,
  alpha,
  TextField,
  InputAdornment,
  Slider,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  CardMedia,
  Checkbox,
  styled
} from '@mui/material';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import NatureIcon from '@mui/icons-material/Nature';
import HomeIcon from '@mui/icons-material/Home';
import AssignmentIcon from '@mui/icons-material/Assignment';
import LabelIcon from '@mui/icons-material/Label';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import ViewModuleIcon from '@mui/icons-material/ViewModule';
import ViewInArIcon from '@mui/icons-material/ViewInAr';
import MedicationIcon from '@mui/icons-material/Medication';

// Hero section styles
const HeroSection = styled(Box)(({ theme }) => ({
  position: 'relative',
  color: 'white',
  minHeight: '10vh',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center',
  overflow: 'hidden',
  marginTop: '0',
  marginBottom: theme.spacing(4),
  padding: theme.spacing(4, 0),
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: `linear-gradient(45deg, ${theme.palette.primary.main}dd 30%, ${theme.palette.secondary.main}dd 90%)`,
    zIndex: 1
  }
}));

const HeroContent = styled(Box)({
  position: 'relative',
  zIndex: 2,
  width: '100%',
  padding: '10px'
});

const MONTHS = ['Jan/Feb', 'Mar/Apr', 'May/Jun', 'Jul/Aug', 'Sep/Oct', 'Nov/Dec'];
const BOTTOM_BOARD_TYPES = ['With tubes', 'With a wire mesh', 'Without tubes/wire mesh'];
const VETERINARY_PRODUCTS = [
  'Aucun', 'Amicel Varroa', 'AMO Varroxal 85 %', 'Apibioxal®', 'ApiFor60®', 
  'Apiguard®', 'ApiLifeVar', 'Apistan®', 'Apitraz®', 'Apivar®', 'ApiWarol®',
  'Bayvarol®', 'Biowar®', 'Checkmite+®', 'Dany\'s BienenWohl', 'Ecostop-lamellae',
  'Ecoxal®', 'Formidol®', 'Gabon® PF', 'MAQS®', 'Oxuvar®', 'Oxybee', 'Perizin®',
  'PolyVar Yellow 275 mg', 'Thymovar®', 'Varachet forte', 'Varatraz®', 'Varidol®',
  'Varostop®', 'VarroMed', 'Varterminator'
];

interface State {
  frames: number;
  actionTime: string;
  bottomBoard: string;
  veterinaryProducts: string[];
}

const bottomBoardOptions = [
  {
    value: 'solid',
    label: 'Solid Bottom Board',
    description: 'Traditional solid bottom board',
    image: '/images/solid-bottom.png'
  },
  {
    value: 'screened',
    label: 'Screened Bottom Board',
    description: 'Ventilated bottom board with screen',
    image: '/images/screened-bottom.png'
  },
  {
    value: 'hybrid',
    label: 'Hybrid Bottom Board',
    description: 'Convertible bottom board (solid/screened)',
    image: '/images/hybrid-bottom.png'
  }
];

const veterinaryProductOptions = [
  { value: 'none', label: 'Aucun', description: 'No treatment used' },
  { value: 'amicel', label: 'Amicel Varroa', description: 'Amitraz-based treatment' },
  { value: 'amo-varroxal', label: 'AMO Varroxal 85 %', description: 'Oxalic acid treatment' },
  { value: 'apibioxal', label: 'Apibioxal®', description: 'Oxalic acid treatment' },
  { value: 'apifor60', label: 'ApiFor60®', description: 'Formic acid treatment' },
  { value: 'apiguard', label: 'Apiguard®', description: 'Thymol-based treatment' },
  { value: 'apilife-var', label: 'ApiLifeVar', description: 'Essential oil treatment' },
  { value: 'apistan', label: 'Apistan®', description: 'Tau-fluvalinate treatment' },
  { value: 'apitraz', label: 'Apitraz®', description: 'Amitraz-based treatment' },
  { value: 'apivar', label: 'Apivar®', description: 'Amitraz-based treatment' },
  { value: 'apiwarol', label: 'ApiWarol®', description: 'Amitraz-based treatment' },
  { value: 'bayvarol', label: 'Bayvarol®', description: 'Flumethrin treatment' },
  { value: 'biowar', label: 'Biowar®', description: 'Organic treatment' },
  { value: 'checkmite', label: 'Checkmite+®', description: 'Coumaphos treatment' },
  { value: 'danys', label: 'Dany\'s BienenWohl', description: 'Oxalic acid treatment' },
  { value: 'ecostop', label: 'Ecostop-lamellae', description: 'Natural treatment' },
  { value: 'ecoxal', label: 'Ecoxal®', description: 'Oxalic acid treatment' },
  { value: 'formidol', label: 'Formidol®', description: 'Formic acid treatment' },
  { value: 'gabon', label: 'Gabon® PF', description: 'Synthetic treatment' },
  { value: 'maqs', label: 'MAQS®', description: 'Formic acid treatment' },
  { value: 'oxuvar', label: 'Oxuvar®', description: 'Oxalic acid treatment' },
  { value: 'oxybee', label: 'Oxybee', description: 'Oxalic acid treatment' },
  { value: 'perizin', label: 'Perizin®', description: 'Coumaphos treatment' },
  { value: 'polyvar', label: 'PolyVar Yellow 275 mg', description: 'Flumethrin treatment' },
  { value: 'thymovar', label: 'Thymovar®', description: 'Thymol-based treatment' },
  { value: 'varachet', label: 'Varachet forte', description: 'Synthetic treatment' },
  { value: 'varatraz', label: 'Varatraz®', description: 'Amitraz-based treatment' },
  { value: 'varidol', label: 'Varidol®', description: 'Synthetic treatment' },
  { value: 'varostop', label: 'Varostop®', description: 'Synthetic treatment' },
  { value: 'varromed', label: 'VarroMed', description: 'Organic acid treatment' },
  { value: 'varterminator', label: 'Varterminator', description: 'Synthetic treatment' }
];

const frameOptions = Array.from({ length: 15 }, (_, i) => ({
  value: i + 1,
  label: `${i + 1} Frames`,
  description: `${i + 1} frames of production colony fully covered with bees`
}));

const actionTimeOptions = MONTHS.map(month => ({
  value: month,
  label: month,
  description: `Perform the action during ${month}`
}));

const Introduction: React.FC = () => {
  const dispatch = useDispatch();
  const { beekeepingType, timePerHive, hiveType, reference, assessmentDate } = useSelector((state: RootState) => state.varrometer);
  const [activeStep, setActiveStep] = React.useState(0);
  const [state, setState] = useState<State>({
    frames: 1,
    actionTime: '',
    bottomBoard: '',
    veterinaryProducts: []
  });

  // Get today's date in YYYY-MM-DD format for the default assessment date
  const today = new Date().toISOString().split('T')[0];

  // Initialize assessment date with today's date when component mounts if not already set
  useEffect(() => {
    if (!assessmentDate) {
      dispatch(updateVarrometerState({ assessmentDate: today }));
    }
  }, [dispatch, assessmentDate]);

  const handleDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedDate = event.target.value;
    dispatch(updateVarrometerState({ assessmentDate: selectedDate }));
  };

  const steps = [
    { label: 'Assessment Info', icon: <AssignmentIcon /> },
    { label: 'Beekeeping Type', icon: <NatureIcon /> },
    { label: 'Time Available', icon: <AccessTimeIcon /> },
    { label: 'Hive Type', icon: <HomeIcon /> },
    { label: 'Number of Frames', icon: <ViewModuleIcon /> },
    { label: 'Action Time', icon: <CalendarTodayIcon /> },
    { label: 'Bottom Board Type', icon: <ViewInArIcon /> },
    { label: 'Previous Treatment', icon: <MedicationIcon /> }
  ];

  const handleReferenceChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    dispatch(updateVarrometerState({ reference: event.target.value }));
  };

  const handleBeekeepingTypeSelect = (value: BeekeepingType) => {
    dispatch(updateVarrometerState({ beekeepingType: value }));
    setActiveStep(2);
  };

  const handleTimeSelect = (value: TimePerHive) => {
    dispatch(updateVarrometerState({ timePerHive: value }));
    setActiveStep(3);
  };

  const handleHiveTypeSelect = (value: HiveType) => {
    dispatch(updateVarrometerState({ hiveType: value }));
    setActiveStep(4);
  };

  const handleInputChange = (field: keyof State, value: any) => {
    setState({ ...state, [field]: value });
  };

  const handleVeterinaryProductToggle = (value: string) => {
    const currentProducts = state.veterinaryProducts;
    const newProducts = currentProducts.includes(value)
      ? currentProducts.filter(product => product !== value)
      : [...currentProducts, value];
    setState({ ...state, veterinaryProducts: newProducts });
  };

  const canContinue = () => {
    switch (activeStep) {
      case 0: return !!reference && !!assessmentDate;
      case 1: return !!beekeepingType;
      case 2: return !!timePerHive;
      case 3: return !!hiveType;
      case 4: return typeof state.frames === 'number';
      case 5: return !!state.actionTime;
      case 6: return !!state.bottomBoard;
      case 7: return state.veterinaryProducts.length > 0;
      default: return false;
    }
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleNext = () => {
    if (activeStep === 7) {
      dispatch(updateVarrometerState({
        frames: state.frames,
        actionTime: state.actionTime,
        bottomBoard: state.bottomBoard,
        veterinaryProducts: state.veterinaryProducts,
        currentPhase: 'surveillance'
      }));
    } else {
      setActiveStep((prevActiveStep) => prevActiveStep + 1);
    }
  };

  const renderStep = () => {
    switch (activeStep) {
      case 0:
        return (
          <Paper 
            elevation={2} 
            sx={{ 
              p: 3,
              backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8),
              backdropFilter: 'blur(8px)'
            }}
          >
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <Typography variant="h6" color="primary" gutterBottom>
                  Assessment Details
                </Typography>
                <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
                  Please provide the details for this varroa assessment session
                </Typography>
              </Grid>
              
              <Grid item xs={12} md={6}>
                <TextField
                  label="Assessment Reference"
                  value={reference || ''}
                  onChange={handleReferenceChange}
                  placeholder="e.g., Spring Check 2025"
                  helperText="A unique identifier for this assessment"
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <LabelIcon color="primary" />
                      </InputAdornment>
                    ),
                  }}
                  fullWidth
                  size="medium"
                  sx={{
                    '& .MuiOutlinedInput-root': {
                      backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.9),
                    }
                  }}
                />
              </Grid>
              
              <Grid item xs={12} md={6}>
                <TextField
                  label="Assessment Date"
                  type="date"
                  value={assessmentDate || today}
                  onChange={handleDateChange}
                  InputLabelProps={{
                    shrink: true,
                  }}
                  fullWidth
                  size="medium"
                  sx={{
                    '& .MuiOutlinedInput-root': {
                      backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.9),
                    }
                  }}
                />
              </Grid>
            </Grid>
          </Paper>
        );
      case 1:
        return (
          <Grid container spacing={2}>
            {beekeepingOptions.map((option) => (
              <Grid item xs={12} sm={6} md={4} key={option.value}>
                <Card 
                  sx={{ 
                    height: '100%',
                    transition: '0.3s',
                    '&:hover': {
                      transform: 'translateY(-4px)',
                      boxShadow: 6
                    },
                    ...(beekeepingType === option.value && {
                      outline: '2px solid',
                      outlineColor: 'primary.main',
                      bgcolor: (theme) => alpha(theme.palette.primary.main, 0.05)
                    })
                  }}
                >
                  <CardActionArea 
                    onClick={() => handleBeekeepingTypeSelect(option.value as BeekeepingType)}
                    sx={{ height: '100%' }}
                  >
                    <CardMedia
                      component="img"
                      height="200"
                      width="250"
                      image={option.image}
                      alt={option.label}
                      sx={{
                        objectFit: 'contain',
                        width: '100px',
                        margin: '0 auto',
                        p: 4
                      }}
                    />
                    <CardContent>
                      <Typography gutterBottom variant="h6" component="div">
                        {option.label}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {option.description}
                      </Typography>
                    </CardContent>
                  </CardActionArea>
                </Card>
              </Grid>
            ))}
          </Grid>
        );
      case 2:
        return (
          <Grid container spacing={2}>
            {timeOptions.map((option) => (
              <Grid item xs={12} sm={6} key={option.value}>
                <Card 
                  sx={{ 
                    height: '100%',
                    transition: '0.3s',
                    '&:hover': {
                      transform: 'translateY(-4px)',
                      boxShadow: 6
                    },
                    ...(timePerHive === option.value && {
                      outline: '2px solid',
                      outlineColor: 'primary.main',
                      bgcolor: (theme) => alpha(theme.palette.primary.main, 0.05)
                    })
                  }}
                >
                  <CardActionArea 
                    onClick={() => handleTimeSelect(option.value as TimePerHive)}
                    sx={{ height: '100%' }}
                  >
                    <CardMedia
                      component="img"
                      height="200"
                      width="250"
                      image={option.image}
                      alt={option.label}
                      sx={{
                        objectFit: 'contain',
                        width: '100px',
                        margin: '0 auto',
                        p: 4
                      }}
                    />
                    <CardContent>
                      <Typography gutterBottom variant="h6" component="div">
                        {option.label}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {option.description}
                      </Typography>
                    </CardContent>
                  </CardActionArea>
                </Card>
              </Grid>
            ))}
          </Grid>
        );
      case 3:
        return (
          <Grid container spacing={2}>
            {hiveOptions.map((option) => (
              <Grid item xs={12} sm={6} md={4} key={option.value}>
                <Card 
                  sx={{ 
                    height: '100%',
                    transition: '0.3s',
                    '&:hover': {
                      transform: 'translateY(-4px)',
                      boxShadow: 6
                    },
                    ...(hiveType === option.value && {
                      outline: '2px solid',
                      outlineColor: 'primary.main',
                      bgcolor: (theme) => alpha(theme.palette.primary.main, 0.05)
                    })
                  }}
                >
                  <CardActionArea 
                    onClick={() => handleHiveTypeSelect(option.value as HiveType)}
                    sx={{ height: '100%' }}
                  >
                    <CardMedia
                      component="img"
                      height="200"
                      width="250"
                      image={option.image}
                      alt={option.label}
                      sx={{
                        objectFit: 'contain',
                        width: '100px',
                        margin: '0 auto',
                        p: 4
                      }}
                    />
                    <CardContent>
                      <Typography gutterBottom variant="h6" component="div">
                        {option.label}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {option.description}
                      </Typography>
                    </CardContent>
                  </CardActionArea>
                </Card>
              </Grid>
            ))}
          </Grid>
        );
      case 4:
        return (
          <Box>
            <Typography variant="h6" gutterBottom>
              Number of Frames
            </Typography>
            <Typography color="text.secondary" gutterBottom sx={{ mb: 3 }}>
              How many frames of production colony fully covered with bees are there on average per colony?
            </Typography>
            <Grid container spacing={2}>
              {frameOptions.map((option) => (
                <Grid item xs={12} sm={6} md={4} lg={3} key={option.value}>
                  <Card 
                    sx={{ 
                      height: '100%',
                      transition: '0.3s',
                      cursor: 'pointer',
                      '&:hover': {
                        transform: 'translateY(-4px)',
                        boxShadow: 6
                      },
                      ...(state.frames === option.value && {
                        outline: '2px solid',
                        outlineColor: 'primary.main',
                        bgcolor: (theme) => alpha(theme.palette.primary.main, 0.05)
                      })
                    }}
                    onClick={() => {
                      handleInputChange('frames', option.value);
                      setActiveStep((prev) => prev + 1);
                    }}
                  >
                    <CardContent sx={{ p: 3 }}>
                      <Typography variant="h6" gutterBottom>
                        {option.label}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {option.description}
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </Box>
        );
      case 5:
        return (
          <Box>
            <Typography variant="h6" gutterBottom>
              Action Time
            </Typography>
            <Typography color="text.secondary" gutterBottom sx={{ mb: 3 }}>
              When would you like to do the action?
            </Typography>
            <Grid container spacing={2}>
              {actionTimeOptions.map((option) => (
                <Grid item xs={12} sm={6} md={4} lg={3} key={option.value}>
                  <Card 
                    sx={{ 
                      height: '100%',
                      transition: '0.3s',
                      cursor: 'pointer',
                      '&:hover': {
                        transform: 'translateY(-4px)',
                        boxShadow: 6
                      },
                      ...(state.actionTime === option.value && {
                        outline: '2px solid',
                        outlineColor: 'primary.main',
                        bgcolor: (theme) => alpha(theme.palette.primary.main, 0.05)
                      })
                    }}
                    onClick={() => {
                      handleInputChange('actionTime', option.value);
                      setActiveStep((prev) => prev + 1);
                    }}
                  >
                    <CardContent sx={{ p: 3 }}>
                      <Typography variant="h6" gutterBottom>
                        {option.label}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {option.description}
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </Box>
        );
      case 6:
        return (
          <Box>
            <Typography variant="h6" gutterBottom>
              Bottom Board Type
            </Typography>
            <Typography color="text.secondary" gutterBottom sx={{ mb: 3 }}>
              What type of bottom board do your hives have?
            </Typography>
            <Grid container spacing={2}>
              {bottomBoardOptions.map((option) => (
                <Grid item xs={12} sm={6} md={4} key={option.value}>
                  <Card 
                    sx={{ 
                      height: '100%',
                      transition: '0.3s',
                      cursor: 'pointer',
                      '&:hover': {
                        transform: 'translateY(-4px)',
                        boxShadow: 6
                      },
                      ...(state.bottomBoard === option.value && {
                        outline: '2px solid',
                        outlineColor: 'primary.main',
                        bgcolor: (theme) => alpha(theme.palette.primary.main, 0.05)
                      })
                    }}
                    onClick={() => {
                      handleInputChange('bottomBoard', option.value);
                      setActiveStep((prev) => prev + 1);
                    }}
                  >
                    <CardMedia
                      component="img"
                      height="200"
                      image={option.image}
                      alt={option.label}
                      sx={{
                        objectFit: 'contain',
                        p: 2
                      }}
                    />
                    <CardContent sx={{ p: 3 }}>
                      <Typography variant="h6" gutterBottom>
                        {option.label}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {option.description}
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </Box>
        );
      case 7:
        return (
          <Box sx={{ width: '100%' }}>
            <Typography variant="h6" gutterBottom>
              Previous Treatment
            </Typography>
            <Typography color="text.secondary" gutterBottom sx={{ mb: 3 }}>
              Which veterinary products did you use last year? (You can select multiple)
            </Typography>
            <Grid container spacing={2}>
              {veterinaryProductOptions.map((option) => (
                <Grid item xs={12} sm={6} md={4} lg={3} key={option.value}>
                  <Card 
                    sx={{ 
                      height: '100%',
                      transition: '0.3s',
                      position: 'relative',
                      '&:hover': {
                        transform: 'translateY(-4px)',
                        boxShadow: 6
                      },
                      ...(state.veterinaryProducts.includes(option.value) && {
                        outline: '2px solid',
                        outlineColor: 'primary.main',
                        bgcolor: (theme) => alpha(theme.palette.primary.main, 0.05)
                      })
                    }}
                  >
                    <CardActionArea 
                      onClick={() => handleVeterinaryProductToggle(option.value)}
                      sx={{ height: '100%', p: 2 }}
                    >
                      <Box sx={{ position: 'absolute', right: 8, top: 8 }}>
                        <Checkbox
                          checked={state.veterinaryProducts.includes(option.value)}
                          onChange={() => handleVeterinaryProductToggle(option.value)}
                          onClick={(e) => e.stopPropagation()}
                          sx={{
                            color: 'primary.main',
                            '&.Mui-checked': {
                              color: 'primary.main',
                            },
                          }}
                        />
                      </Box>
                      <CardContent>
                        <Typography 
                          variant="h6" 
                          component="div" 
                          gutterBottom
                          sx={{
                            fontWeight: 'bold',
                            mb: 1
                          }}
                        >
                          {option.label}
                        </Typography>
                        <Typography 
                          variant="body2" 
                          color="text.secondary"
                          sx={{ 
                            fontSize: '0.875rem',
                            lineHeight: 1.4
                          }}
                        >
                          {option.description}
                        </Typography>
                      </CardContent>
                    </CardActionArea>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </Box>
        );
      default:
        return null;
    }
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', margin: 0, padding: 0, pb: 12 }}>
      <HeroSection>
        <HeroContent>
          <Container maxWidth="md">
            <Typography variant="h2" component="h1" gutterBottom>
              Virtual Varrometer
            </Typography>
            <Typography variant="h5" paragraph>
              Your Advanced Diagnostic Tool for Varroa Control
            </Typography>
            <Typography variant="body1" sx={{ mb: 4, maxWidth: '800px', mx: 'auto' }}>
              Follow our step-by-step guide to assess your colony's health and receive 
              personalized treatment recommendations.
            </Typography>
          </Container>
        </HeroContent>
      </HeroSection>

      <Container maxWidth="lg" sx={{ p: 0 }}>
        <Stack spacing={3}>
          <Typography variant="h5" gutterBottom>
            Varrometer Initial Test
          </Typography>
          
          <Typography variant="body1" color="text.secondary" paragraph>
            Let's customize your experience based on your beekeeping practices. This will help us provide you with the most appropriate recommendations.
          </Typography>

          <Stepper activeStep={activeStep} alternativeLabel>
            {steps.map((step) => (
              <Step key={step.label}>
                <StepLabel
                  StepIconComponent={() => (
                    <Box sx={{ 
                      width: 40, 
                      height: 40, 
                      borderRadius: '50%',
                      bgcolor: activeStep === steps.indexOf(step) ? 'primary.main' : 'grey.300',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      color: activeStep === steps.indexOf(step) ? 'white' : 'grey.700'
                    }}>
                      {step.icon}
                    </Box>
                  )}
                >
                  {step.label}
                </StepLabel>
              </Step>
            ))}
          </Stepper>

          {renderStep()}

          <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
            <Button
              onClick={handleBack}
              disabled={activeStep === 0}
            >
              Back
            </Button>
            <Button
              variant="contained"
              onClick={handleNext}
              disabled={!canContinue()}
            >
              {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
            </Button>
          </Box>
        </Stack>
      </Container>
    </Box>
  );
};

export default Introduction;