import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";

import aboutImage from "../../../assets/images/robot32.png";
import VideoSGPT from "../../../assets/sgpt.mp4";
import MysteriousText from "../animated/MysteriousText";
import TypingText from "../animated/TypingText";
type Props = {};

const AboutSection = (props: Props) => {
  const { t } = useTranslation("aboutSection");

  const copyToClipboard = (address: string) => {
    navigator.clipboard.writeText(address);
  };

  return (
    <div
      className="container mx-auto text-white py-2 lg:flex-row flex-col flex relative scroll-mt-16 "
      id="about"
      style={{
        backgroundImage: `url(https://awv3node-homepage.surge.sh/build/assets/stars.svg)}`,
      }}
    >
      <div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full  px-8 pt-2 order-1">
        <div className="flex flex-col gap-8">
          <h4 className="text-3xl uppercase font-bold hover:text-orange-400">
            {t("title1")}
          </h4>
          <p className="text-gray-100 w-full md:w-full lg:w-4/5 text-lg min-h-[255px] text-justify">
            <TypingText>{t("content1")}</TypingText>
          </p>
        </div>

        <div className="flex flex-col gap-4">
          <h4 className="text-3xl uppercase font-bold hover:text-orange-400">
            {t("title2")}
          </h4>
          <p className="text-gray-100 w-full md:w-full lg:w-4/5   text-lg min-h-[225px] text-justify">
            {/* <h1>{typedText}</h1> */}
            <TypingText>{t("content2")}</TypingText>
            {/* <MysteriousText>
              
            </MysteriousText> */}
          </p>
        </div>
      </div>
      <div className="lg:w-1/2 md:flex hidden justify-center items-center h-[660px] lg:order-1 w-full">
        <video controls className="rounded-md" muted autoPlay>
          <source src={VideoSGPT} type="video/mp4" />
        </video>
      </div>
    </div>
  );
};

export default AboutSection;
