import * as React from 'react';
import Box from '@mui/material/Box';
import { useEffect,useRef  } from "react";
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import WhatsAppIcon from '@mui/icons-material/WhatsApp';
import MenuIcon from '@mui/icons-material/Menu';
import Container from '@mui/material/Container';
import WorkspacePremiumIcon from '@mui/icons-material/WorkspacePremium';
import Avatar from '@mui/material/Avatar';
import BusinessIcon from '@mui/icons-material/Business';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import ChatIcon from '@mui/icons-material/Chat';
import MenuItem from '@mui/material/MenuItem';
import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive';
import LiveHelpIcon from '@mui/icons-material/LiveHelp';
import SupportAgentTwoToneIcon from '@mui/icons-material/SupportAgentTwoTone';
import CheckCircleTwoToneIcon from '@mui/icons-material/CheckCircleTwoTone';
import { useNavigate } from "react-router-dom";
import Divider from '@mui/material/Divider';

import { AppBar, Typography, Toolbar,Grid ,CardContent,Card } from '@mui/material';

import { useDispatch, useSelector, useState } from "react-redux";

import "./css/header.css";


import ContentJSON from "./mocks/Content/content.json";

let contentjson="";

contentjson=[...ContentJSON];


function Pricing() {

    const userInfo = useSelector((state) => state.userInfo);
     const navigate = useNavigate();
  useEffect(() => {


    document.getElementById('pricing').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

    if (userInfo.result)
      navigate("/billing")


  }, []);


  return (

     <Box sx={{mb:10,px:3,mx:2,opacity:0.8,backgroundColor: "#ffffff!important",color:"#d0efff!important", border: '2px  solid grey' }}>
     <div id="pricing"/>

       <Card id="silver" style={{ width: 200, margin: "20px", borderRadius: "20px", display: 'inline-block', overflow: "hidden"  }}>
         <CardContent>
           <Grid container gap={1}>
             <Grid item xs={12}>
               <center><WorkspacePremiumIcon sx={{color:"silver",  fontWeight: 700}} fontSize="large"/></center>
            </Grid>
             <Grid item xs={12}><Typography  sx={{letterSpacing: '.1rem'}} variant="h6">{`Early Flyer`}</Typography> </Grid>
              <Grid item xs={12}><Typography sx={{ fontWeight: 700}} variant="subtitle">{`10 Alerts`}</Typography> </Grid>
              <Grid item xs={12}> <s><Typography color="red" variant="subtitle">{`$2.49`}</Typography></s></Grid>
              <Grid item xs={12}> <Typography color="green" variant="subtitle">{`$1.99`}</Typography></Grid>
              <Grid item xs={12}>
             </Grid>


           </Grid>
         </CardContent>
       </Card>

       <Card id="gold"  style={{ width: 200, margin: "20px", borderRadius: "20px", display: 'inline-block', overflow: "hidden"  }}>
         <CardContent>
           <Grid container gap={1}>
           <Grid item xs={12}>
              <Typography sx={{ color:"black",backgroundColor:"gold"  ,border: '2px  solid grey',letterSpacing: '.1rem'}} variant="h6">{`POPULAR`}</Typography>
          </Grid>
             <Grid item xs={12}>
               <center><WorkspacePremiumIcon sx={{color:"gold",  fontWeight: 700}} fontSize="large"/></center>
            </Grid>
             <Grid item xs={12}><Typography sx={{letterSpacing: '.1rem'}} variant="h6">{`Frequent Flyer`}</Typography> </Grid>
              <Grid item xs={12}><Typography   sx={{ fontWeight: 700}} variant="subtitle">{`50 Alerts`}</Typography> </Grid>
              <Grid item xs={12}> <s><Typography  color="red" variant="subtitle">{`$12.49`}</Typography></s></Grid>
              <Grid item xs={12}> <Typography  color="green" variant="subtitle">{`$9.99`}</Typography></Grid>
              <Grid item xs={12}>
             </Grid>


           </Grid>
         </CardContent>
       </Card>

       <Card  id="platinum" style={{ width: 200, margin: "20px", borderRadius: "20px", display: 'inline-block', overflow: "hidden"  }}>
         <CardContent>
           <Grid container gap={1}>
             <Grid item xs={12}>
               <center><WorkspacePremiumIcon sx={{color:"platinum",  fontWeight: 700}} fontSize="large"/></center>
            </Grid>
             <Grid item xs={12}><Typography sx={{letterSpacing: '.1rem'}} variant="h6">{`Globetrotter`}</Typography> </Grid>
              <Grid item xs={12}><Typography  sx={{ fontWeight: 700}} variant="subtitle">{`100 Alerts`}</Typography> </Grid>
              <Grid item xs={12}> <s><Typography  color="red" variant="subtitle">{`$24.99`}</Typography></s></Grid>
              <Grid item xs={12}> <Typography  color="green" variant="subtitle">{`$14.99`}</Typography></Grid>
              <Grid item xs={12}>
             </Grid>

           </Grid>
         </CardContent>
       </Card>
       <Divider/>


        {<Grid xs={12} md={12} sx={{mb:2}} >  <Typography variant="caption" sx={{ mr: 2, flexGrow: 1, fontSize: 10,fontWeight: 0, letterSpacing: '.0rem', color: 'black', textDecoration: 'none',}}>{`* A flight normally will send you 5 alerts, take-off , cruise altitude, landing descent, final landing, sometimes when delay or special events happen additional alerts can be sent  `}</Typography></Grid>}
        <Grid item  sx={{backgroundColor:"black", mb:2}} xs={12} alignItems="center"  justify="center">
              <img
              width="250px"

              src={`https://www.alertair.net/payment.png`}
              alt={`Paymnet Methods`}
            loading="lazy"
        />
        </Grid>
    </Box>
  );

};



export default Pricing;