// pages/about-us.tsx
import {
  Button,
  Container,
  Grid,
  Typography,
  Card,
  CardContent,
  List,
  ListItem,
  ListItemText,
} from "@mui/material";
import Wrapper from "../layout/Wrapper";
import Seo from "../components/common/Seo";
import LoginPopup from "../components/common/form/login/LoginPopup";
import DefaulHeader2 from "../components/header/DefaulHeader2";
import MobileMenu from "../components/header/MobileMenu";
import Breadcrumb from "../components/common/Breadcrumb";
import Link from "next/link";
import Footer from "../components/footer/Footer";

const AboutUs: React.FC = () => {
  return (
    <Wrapper>
      <Seo pageTitle="About Us" />

      <span className="header-span"></span>

      

      <DefaulHeader2 />

      <MobileMenu />

      <Breadcrumb title="" meta="About Us" />

      <div className="about-us ">
        {/* Hero Section */}
        <section
          className="hero py-5 sm:py-2"
          style={{ backgroundColor: "#f1f1f1" }}
        >
          <Container>
            <Typography
              variant="h3"
              align="center"
              gutterBottom
              style={{ marginBottom: "2rem" }}
            >
              Welcome to Jobrator
            </Typography>
            <Typography variant="h6" align="center" paragraph>
              At Jobrator, we revolutionize human capital recruitment by
              bridging the gap between job seekers and employers. Our innovative
              platform leverages AI technology to provide unparalleled insights
              into candidate skills, capacity, and potential.
            </Typography>
            <div style={{ textAlign: "center" }}>
              <button
                className="theme-btn btn-style-three rounded-pill"
                type="submit"
              >
                <Link href="/register">Explore Jobrator</Link>
              </button>
            </div>
          </Container>
        </section>

        {/* Our Mission, Vision and Story Section */}
        <Container sx={{ py: { xs: 4, md: 10 } }}>
          <Grid container spacing={4}>
            <Grid
              item
              xs={12}
              md={4}
              lg={4}
              sx={{
                borderRight: {
                  md: "1px solid #1976d2",
                  lg: "1px solid #1976d2",
                },
              }}
            >
              <Typography variant="h4" gutterBottom>
                Our Mission
              </Typography>
              <Typography variant="body1">
                To provide the most effective human capital recruitment
                solution, minimizing recruitment errors and empowering employers
                to make informed decisions
              </Typography>
            </Grid>
            <Grid
              item
              xs={12}
              md={4}
              lg={4}
              sx={{
                borderRight: {
                  md: "1px solid #1976d2",
                  lg: "1px solid #1976d2",
                },
              }}
            >
              <Typography variant="h4" gutterBottom>
                Our Vision
              </Typography>
              <Typography variant="body1">
                To become the go-to recruitment solution, transforming the human
                capital landscape with data-driven precision and accuracy using
                AI
              </Typography>
            </Grid>
            <Grid item xs={12} md={4} lg={4}>
              <Typography variant="h4" gutterBottom>
                Our Story
              </Typography>
              <Typography variant="body1">
                Founded by seasoned CEOs, HR managers, and IT experts, Jobrator
                combines expertise and passion to tackle recruitment challenges.
                Our platform supports HR managers, enhancing their effectiveness
                without replacing them
              </Typography>
            </Grid>
          </Grid>
        </Container>

        {/* How We Work Section */}
        <section
          style={{
            backgroundColor: "#055875",
            color: "white",
            padding: "20px 0",
            textAlign: "center",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <div>
            <h2>How Do We Work?</h2>
            <br />
            <h5>Jobrator offers...</h5>
          </div>
        </section>
        <Container sx={{ py: 6 }}>
          <Grid container spacing={4}>
            <Grid item xs={12} sm={6} md={4}>
              <Card
                sx={{
                  height: "100%",
                  border: "2px solid lightblue",
                  borderRadius: "12px",
                  display: "flex",
                  flexDirection: "column",
                  padding: "16px",
                  boxShadow: 3,
                }}
              >
                <CardContent sx={{ flexGrow: 1 }}>
                  <Typography variant="h6">
                    Direct vacancy publishing to targeted job seekers
                  </Typography>
                </CardContent>
              </Card>
            </Grid>

            <Grid item xs={12} sm={6} md={4}>
              <Card
                sx={{
                  height: "100%",
                  border: "2px solid lightblue",
                  borderRadius: "12px",
                  display: "flex",
                  flexDirection: "column",
                  padding: "16px",
                  boxShadow: 3,
                }}
              >
                <CardContent sx={{ flexGrow: 1 }}>
                  <Typography variant="h6">
                    Multi-index rating system for job seekers, streamlining
                    recruiter searches.
                  </Typography>
                </CardContent>
              </Card>
            </Grid>

            <Grid item xs={12} sm={6} md={4}>
              <Card
                sx={{
                  height: "100%",
                  border: "2px solid lightblue",
                  borderRadius: "12px",
                  display: "flex",
                  flexDirection: "column",
                  padding: "16px",
                  boxShadow: 3,
                }}
              >
                <CardContent sx={{ flexGrow: 1 }}>
                  <Typography variant="h6">
                    Comprehensive 360-degree employee appraisal and exit rating
                  </Typography>
                </CardContent>
              </Card>
            </Grid>

            <Grid item xs={12} sm={6} md={4}>
              <Card
                sx={{
                  height: "100%",
                  border: "2px solid lightblue",
                  borderRadius: "12px",
                  display: "flex",
                  flexDirection: "column",
                  padding: "16px",
                  boxShadow: 3,
                }}
              >
                <CardContent sx={{ flexGrow: 1 }}>
                  <Typography variant="h6">
                    Advanced Background Check:
                  </Typography>
                  <br />
                  <p>- Verify candidate credentials and work history. </p>
                  <p>
                    - Screen job seekers and their guarantors for potential
                    risks.
                  </p>
                  <p>
                    - Validate identity documents and educational certificates
                  </p>
                </CardContent>
              </Card>
            </Grid>

            <Grid item xs={12} sm={6} md={4}>
              <Card
                sx={{
                  height: "100%",
                  border: "2px solid lightblue",
                  borderRadius: "12px",
                  display: "flex",
                  flexDirection: "column",
                  padding: "16px",
                  boxShadow: 3,
                }}
              >
                <CardContent sx={{ flexGrow: 1 }}>
                  <Typography variant="h6">
                    Emotional Intelligence Assessment:
                  </Typography>
                  <br />
                  <p>
                    - Measure self-awareness, self-regulation, and motivation
                  </p>
                  <p>
                    - Evaluate empathy, social skills, and conflict resolution
                    abilities
                  </p>
                </CardContent>
              </Card>
            </Grid>

            <Grid item xs={12} sm={6} md={4}>
              <Card
                sx={{
                  height: "100%",
                  border: "2px solid lightblue",
                  borderRadius: "12px",
                  display: "flex",
                  flexDirection: "column",
                  padding: "16px",
                  boxShadow: 3,
                }}
              >
                <CardContent sx={{ flexGrow: 1 }}>
                  <Typography variant="h6">
                    AI-Powered Visual Interviews
                  </Typography>
                  <br />
                  <p>
                    - Engage with candidates through live or pre-recorded video
                    interviews
                  </p>
                  <p>
                    - Analyse candidate responses using AI-driven sentiment
                    analysis
                  </p>
                  <p>
                    - Assess facial expressions, body language, and tone of
                    voice
                  </p>
                </CardContent>
              </Card>
            </Grid>
          </Grid>
        </Container>

        <div style={{ backgroundColor: "#f7f7f7" }}>
          <Container sx={{ py: 8 }}>
            <Grid container spacing={4}>
              <Grid
                item
                xs={12}
                md={6}
                lg={6}
                sx={{
                  py: {
                    xs: 4,
                    sm: 6,
                    md: 8,
                    lg: 10,
                  },
                  display: "flex",
                  flexDirection: {
                    xs: "column",
                    sm: "column",
                    md: "row",
                    lg: "row",
                  },
                  justifyContent: "space-between",
                  borderRight: {
                    md: "1px solid #1976d2",
                    lg: "1px solid #1976d2",
                  },
                }}
              >
                <Typography variant="h4" gutterBottom>
                  Visual Interviews Platform Features
                </Typography>
                <Typography variant="body1">
                  <List dense>
                    {" "}
                    <ListItem>
                      <ListItemText primary="Live & pre-recorded video interviews" />
                    </ListItem>
                    <ListItem>
                      <ListItemText primary="AI sentiment analysis & emotional intelligence" />
                    </ListItem>
                    <ListItem>
                      <ListItemText primary="Facial recognition & body language analysis" />
                    </ListItem>
                    <ListItem>
                      <ListItemText primary="Automated candidate ranking & scoring" />
                    </ListItem>
                    <ListItem>
                      <ListItemText primary="Integrated scheduling & reminders" />
                    </ListItem>
                  </List>
                </Typography>
              </Grid>
              <Grid
                item
                xs={12}
                md={6}
                lg={6}
                sx={{
                  py: {
                    xs: 4,
                    sm: 6,
                    md: 8,
                    lg: 10,
                  },
                  display: "flex",
                  flexDirection: {
                    xs: "column",
                    sm: "column",
                    md: "row",
                    lg: "row",
                  },
                  justifyContent: "space-between",
                  // borderRight: {
                  //   md: "1px solid #1976d2",
                  //   lg: "1px solid #1976d2",
                  // },
                }}
              >
                <Typography variant="h4" gutterBottom>
                  Human Engagement Features
                </Typography>
                <Typography variant="body1">
                  <List dense>
                    {" "}
                    {/* 'dense' to reduce item spacing */}
                    <ListItem>
                      <ListItemText primary="Live chat & messaging with candidates" />
                    </ListItem>
                    <ListItem>
                      <ListItemText primary="Virtual meeting rooms for group interviews" />
                    </ListItem>
                    <ListItem>
                      <ListItemText primary="Personalized feedback & coaching" />
                    </ListItem>
                    <ListItem>
                      <ListItemText primary="Human-led interview support & guidance" />
                    </ListItem>
                  </List>
                </Typography>
              </Grid>
            </Grid>
          </Container>
        </div>

        {/* Recruitment Capacity Indices Section */}
        <section style={{ padding: "50px 0", backgroundColor: "#dfe4ea" }}>
          <Container>
            <Typography
              variant="h4"
              align="center"
              gutterBottom
              className="mb-5"
            >
              Recruitment Capacity Indices
            </Typography>
            <Grid container spacing={4}>
              {[
                "Cognitive Ability",
                "Technical Skills",
                "Emotional Intelligence",
                "Personality Traits",
                "Work Experience",
                "Education and Certifications",
              ].map((index, idx) => (
                <Grid item xs={12} sm={6} md={4} key={idx}>
                  <Card
                    sx={{
                      height: "100%",
                      border: "1px solid cyan",
                      borderRadius: "8px",
                      display: "flex",
                      flexDirection: "column",
                      alignItems: "center",
                      justifyContent: "center",
                      padding: "6px",
                      boxShadow: 3,
                    }}
                  >
                    <CardContent sx={{ flexGrow: 1 }}>
                      <Typography variant="h6">{index}</Typography>
                    </CardContent>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </Container>
        </section>
        {/* Core Values Section */}
        <section style={{ padding: "60px 0" }}>
          <Container>
            <Typography
              variant="h4"
              align="center"
              gutterBottom
              className="mb-5"
            >
              Core Values
            </Typography>
            <Grid container spacing={4}>
              {[
                {
                  value: "Innovation",
                  description:
                    "Harnessing cutting-edge technology for recruitment excellence",
                },
                {
                  value: "Efficiency",
                  description: "Streamlining processes for optimal results",
                },
                {
                  value: "Professionalism",
                  description:
                    "Maintaining highest standards in service delivery",
                },
                {
                  value: "Integrity",
                  description:
                    "Upholding transparency and ethics in all interactions",
                },
              ].map((coreValue, idx) => (
                <Grid item xs={12} sm={6} md={3} key={idx}>
                  <Card
                    sx={{
                      height: "100%",
                      border: "1px solid lightyellow",
                      backgroundColor: "#e9ecef",
                      borderRadius: "8px",
                      display: "flex",
                      flexDirection: "column",
                      padding: "6px",
                      boxShadow: 3,
                    }}
                  >
                    <CardContent sx={{ flexGrow: 1 }}>
                      <Typography variant="h6">{coreValue.value}</Typography>
                      <Typography variant="body2" color="text.secondary">
                        {coreValue.description}
                      </Typography>
                    </CardContent>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </Container>
        </section>

        {/* Benefits for Employers and Job Seekers Section */}
        <section style={{ padding: "60px 0", backgroundColor: "#eaf2f8" }}>
          <Container>
            <Grid container spacing={4}>
              <Grid item xs={12} sm={6} md={6}>
                <Card
                  sx={{
                    height: "100%",
                    backgroundColor: "#e0f7fa",
                    borderRadius: "8px",
                    display: "flex",
                    flexDirection: "column",
                    padding: "16px",
                    boxShadow: 3,
                  }}
                >
                  <CardContent sx={{ flexGrow: 1 }}>
                    <Typography variant="h5" align="center" gutterBottom>
                      Benefits for Employers
                    </Typography>
                    <List>
                      <ListItem>
                        <ListItemText primary="- Reduced recruitment risks" />
                      </ListItem>
                      <ListItem>
                        <ListItemText primary="- Improved candidate quality" />
                      </ListItem>
                      <ListItem>
                        <ListItemText primary="- Enhanced decision-making" />
                      </ListItem>
                      <ListItem>
                        <ListItemText primary="- Increased efficiency" />
                      </ListItem>
                      <ListItem>
                        <ListItemText primary="- Better team dynamics and collaboration" />
                      </ListItem>
                    </List>
                  </CardContent>
                </Card>
              </Grid>
              <Grid item xs={12} sm={6} md={6}>
                <Card
                  sx={{
                    height: "100%",
                    backgroundColor: "#e0f7fa",
                    borderRadius: "8px",
                    display: "flex",
                    flexDirection: "column",
                    padding: "16px",
                    boxShadow: 3,
                  }}
                >
                  <CardContent sx={{ flexGrow: 1 }}>
                    <Typography variant="h5" align="center" gutterBottom>
                      Benefits for Job Seekers
                    </Typography>
                    <List>
                      <ListItem>
                        <ListItemText primary="- Increased visibility to potential employers" />
                      </ListItem>
                      <ListItem>
                        <ListItemText primary="- Streamlined application process" />
                      </ListItem>
                      <ListItem>
                        <ListItemText primary="- Opportunities for skill development" />
                      </ListItem>
                      <ListItem>
                        <ListItemText primary="- Personalized career guidance" />
                      </ListItem>
                    </List>
                  </CardContent>
                </Card>
              </Grid>
            </Grid>
          </Container>
        </section>

        {/* Call to Action */}
        <section
          id="cta"
          style={{
            backgroundColor: "#055875",
            color: "white",
            padding: "60px 0",
          }}
        >
          <Container>
            <Typography variant="h4" align="center" gutterBottom>
              Join the Jobrator Community
            </Typography>
            <Typography variant="h6" align="center">
              Discover a smarter way to recruit and get hired. Explore our
              platform today!
            </Typography>
            <div className="mt-4" style={{ textAlign: "center" }}>
              <button
                className="theme-btn btn-style-three rounded-pill"
                type="submit"
              >
                <Link href="/register">Sign Up Now</Link>
              </button>
            </div>
            {/* <div style={{ textAlign: "center" }}>
              <Button variant="contained" color="secondary" href="#">
                Sign Up Now
              </Button>
            </div> */}
          </Container>
        </section>
      </div>

      <Footer />
    </Wrapper>
  );
};

export default AboutUs;