import React, { useState } from "react";
import { Container, Grid, Typography, Box, Button } from "@mui/material";
import { styled } from "@mui/system";
import { useTranslations } from "next-intl";

const AboutOffice = () => {
  const t = useTranslations("about_office");

  const Section = styled("section")(({ theme }) => ({
    backgroundColor: "#071520",
    color: "#fff",
    padding: "60px 0",
    fontFamily: '"DM Serif Text", serif',
  }));

  const Title = styled(Typography)(({ theme }) => ({
    textAlign: "center",
    marginBottom: "40px",
    color: "#FFFFFF",
    fontSize: "2.7rem",
  }));

  const Description = styled(Typography)(({ theme }) => ({
    textAlign: "center",
    marginBottom: "40px",
    fontSize: "1.4rem",
    maxWidth: "800px",
    margin: "0 auto",
    color: "#ccc",
    padding: "20px",
  }));

  const Advisor = styled(Box)(({ theme }) => ({
    background: "#253a4b",
    padding: "20px",
    borderRadius: "8px",
    transition: "transform 0.3s ease",
    height: "100%",
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    "&:hover": {
      transform: "scale(1.05)",
    },
  }));

  const AdvisorTitle = styled(Typography)(({ theme }) => ({
    fontSize: "1.7rem",
    marginBottom: "15px",
    color: "#FFFFFF",
  }));

  const AdvisorList = styled("ul")({
    listStyle: "none",
    padding: 0,
    color: "#bbb",
    flex: 1,
    fontSize: "1.3rem",
  });

  const Services = styled(Box)(({ theme }) => ({
    background: "#253a4b",
    padding: "20px",
    borderRadius: "8px",
    transition: "transform 0.3s ease",
    height: "100%",
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    "&:hover": {
      transform: "scale(1.05)",
    },
  }));

  const ServicesLink = styled("a")({
    color: "#c09c75",
    textDecoration: "none",
    display: "block",
    "&:hover": {
      textDecoration: "underline",
    },
  });

  const [showMore1, setShowMore1] = useState(false);
  const [showMore2, setShowMore2] = useState(false);
  const [showMore3, setShowMore3] = useState(false);

  return (
    <Section>
      <Container maxWidth="xl">
        <div style={{ border: "1px solid", padding: "2rem" }}>
          <Title variant="h2">{t("about_office_title")}</Title>
          <Description variant="body1">
            {t("about_office_description")}
          </Description>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6} md={4}>
              <Advisor
                style={{
                  height: showMore1 ? "auto" : "535px",
                  overflow: "hidden",
                }}
              >
                <div>
                  <AdvisorTitle variant="h3">
                    {t("about_office_p_one_name")}
                  </AdvisorTitle>
                  <AdvisorList>
                    <li>{t("about_office_p_one_role")}</li>
                    <li>{t("about_office_p_1_1")}</li>
                    <li>{t("about_office_p_1_2")}</li>
                    <li>{t("about_office_p_1_9")}</li>
                    <li>{t("about_office_p_1_3")}</li>
                    <li>{t("about_office_p_1_4")}</li>
                    <li>{t("about_office_p_1_5")}</li>
                    <li>{t("about_office_p_1_6")}</li>
                    <li>{t("about_office_p_1_7")}</li>
                    <li>{t("about_office_p_1_8")}</li>
                  </AdvisorList>
                </div>
                {/* <Button onClick={() => setShowMore1(!showMore1)}>
                  {showMore1 ? "Show Less" : "Show More"}
                </Button> */}
              </Advisor>
            </Grid>
            <Grid item xs={12} sm={6} md={4}>
              <Advisor>
                <div>
                  <AdvisorTitle variant="h3">
                    {t("about_office_p_tow_name")}
                  </AdvisorTitle>
                  <AdvisorList>
                    <li>{t("about_office_p_two_role")}</li>
                    <li>{t("about_office_p_tow_p_2_1")}</li>
                    <li>{t("about_office_p_tow_p_2_2")}</li>
                    <li>{t("about_office_p_tow_p_2_3")}</li>
                    <li>{t("about_office_p_tow_p_2_4")}</li>
                    <li>{t("about_office_p_tow_p_2_5")}</li>
                    <li>{t("about_office_p_tow_p_2_6")}</li>
                    <li>{t("about_office_p_tow_p_2_7")}</li>
                    <span
                      style={{
                        height: showMore2 ? "auto" : "535px",
                        overflow: "hidden",
                      }}
                    >
                      {showMore2 && (
                        <>
                          <li>{t("about_office_p_tow_p_2_8")}</li>
                          <li>{t("about_office_p_tow_p_2_9")}</li>
                          <li>{t("about_office_p_tow_p_2_10")}</li>
                          <li>{t("about_office_p_tow_p_2_11")}</li>
                          <li>{t("about_office_p_tow_p_2_12")}</li>
                          <li>{t("about_office_p_tow_p_2_13")}</li>
                          <li>{t("about_office_p_tow_p_2_14")}</li>
                          <li>{t("about_office_p_tow_p_2_15")}</li>
                        </>
                      )}
                    </span>
                  </AdvisorList>
                </div>
                <Button onClick={() => setShowMore2(!showMore2)}>
                  {showMore2 ? "Show Less" : "Show More"}
                </Button>
              </Advisor>
            </Grid>
            <Grid item xs={12} sm={12} md={4}>
              <Services
                style={{
                  height: showMore3 ? "auto" : "535px",
                  overflow: "hidden",
                }}
              >
                <div>
                  <AdvisorTitle variant="h3">
                    {t("about_office_More_Services")}
                  </AdvisorTitle>
                  <Typography
                    style={{ fontSize: "17px" }}
                    variant="body1"
                    component="p"
                    color="#bbb"
                  >
                    {t("about_office_More_Services_description")}
                  </Typography>
                  <AdvisorList>
                    <li>
                      {t("about_office_Financial_audit_sector")}:{" "}
                      <ServicesLink href="mailto:Audit@Dokkaneldraib.com">
                        {t("about_office_financial_audit_sector_url")}
                      </ServicesLink>
                    </li>
                    <li>
                      {t("about_office_Tax_consulting_sector")}:{" "}
                      <ServicesLink href="mailto:Tax@Dokkaneldraib.com">
                        {t("about_office_tax_consulting_sector_url")}
                      </ServicesLink>
                    </li>
                    <li>
                      {t(
                        "about_office_Procedures_and_corporate_affairs_sector"
                      )}
                      :{" "}
                      <ServicesLink href="mailto:Legal@Dokkaneldraib.com">
                        {t(
                          "about_office_procedures_and_corporate_affairs_sector_url"
                        )}
                      </ServicesLink>
                    </li>
                  </AdvisorList>
                  <Typography variant="body1" component="p" color="#bbb">
                    {t("about_office_Honer_word")}
                  </Typography>
                  <Typography variant="body1" component="p" color="#bbb">
                    {t("about_office_The_Head_office_center")}:{" "}
                    <ServicesLink href="mailto:Info@Dokkaneldraib.com">
                      {t("about_office_head_office_center_url")}
                    </ServicesLink>
                  </Typography>
                </div>
                {/* <Button onClick={() => setShowMore3(!showMore3)}>
                  {showMore3 ? "Show Less" : "Show More"}
                </Button> */}
              </Services>
            </Grid>
          </Grid>
        </div>
      </Container>
    </Section>
  );
};

export default AboutOffice;
