import React from "react";
import { Box, Typography, Link } 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: "200px",
          height: "100px",
          display: "flex",
          justifyContent: "center",
          cursor: "pointer",
          margin: "0 auto",
          mb: 0,
          opacity: 0.9,
          transition: "opacity 0.3s ease",
          transform: "translateX(10px)",
          "&: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>
      <Typography
        variant="body2"
        sx={{ maxWidth: "800px", mx: "auto", mt: 2, opacity: 0.4 }}
      >
        Currently, this is an <b>extremely minimal demo</b>. <br />
        To <b>unlock the full capabilities</b>, please visit our{" "}
        <Link
          href="https://github.com/huggingface/yourbench"
          target="_blank"
          rel="noopener noreferrer"
          color="inherit"
        >
          <b>GitHub</b>
        </Link>
        !
      </Typography>
    </Box>
  );
};

export default Intro;