import React from "react";
import { Box, Typography } from "@mui/material";
import HFLogo from "./Logo/HFLogo";

const Intro = () => {
  const handleLogoClick = () => {
    window.history.replaceState(null, "", "/");
    window.location.reload();
  };

  return (
    <Box sx={{ textAlign: "center", mb: 4 }}>
      <Box
        sx={{
          width: "60px",
          height: "60px",
          display: "flex",
          justifyContent: "center",
          cursor: "pointer",
          margin: "0 auto",
          mb: 4,
          opacity: 0.9,
          transition: "opacity 0.3s ease",
          "&:hover": {
            opacity: 1,
          },
        }}
        onClick={handleLogoClick}
      >
        <HFLogo />
      </Box>
      <Typography
        variant="h4"
        component="h1"
        gutterBottom
        sx={{ fontWeight: 800 }}
      >
        Yourbench Demo
      </Typography>
      <Typography variant="body1" sx={{ maxWidth: "800px", mx: "auto" }}>
        YourBench is an <b>open-source framework</b> for generating{" "}
        <b>domain-specific benchmarks</b> in a <b>zero-shot</b> manner. It aims
        to keep your large language models on their toes—even as new data
        sources, domains, and knowledge demands evolve.
      </Typography>
    </Box>
  );
};

export default Intro;