import { useEffect } from "react";
import {
  BsDiscord,
  BsFacebook,
  BsInstagram,
  BsTelegram,
  BsTwitter,
} from "react-icons/bs";
import Button from "../Button";
import MysteriousText from "./MysteriousText";

type Props = {};

const Introduction = (props: Props) => {
  // create animate when user scroll to this section
  useEffect(() => {
    const section = document.getElementById("section1");
    if (section) {
      section.addEventListener("scroll", () => {
        console.log("scroll");
      });
    }
  }, []);

  return (
    <div
      className="flex flex-col gap-10 items-center text-white p-10 lg:p-0 lg:w-3/4 max-w-4xl"
      id="section1"
    >
      <h4 className="lg:text-8xl md:text-7xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
        <MysteriousText>
          A digital currency payment for SGPT chat bot services
        </MysteriousText>
      </h4>
      <p className="w-full font-body text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-purple-300">
        <MysteriousText>
          The SGPT Token is a digital currency designed to facilitate payments
          for services provided by the SGPT chat bot. The chat bot is a powerful
          tool that utilizes artificial intelligence to communicate with users
          and provide valuable information and services.
        </MysteriousText>
      </p>

      <div className="flex flex-col justify-center mt-[15vh] z-50">
        <h2 className="text-3xl mb-4 font-bold text-center">
          Join Our Community
        </h2>
        <div className="flex flex-wrap gap-4">
          <Button bgColor="bg-telegram">
            <div className="flex items-center gap-2">
              <BsTelegram size={18} />
              Telegram
            </div>
          </Button>
          <Button bgColor="bg-discord">
            <div className="flex items-center gap-2">
              <BsDiscord size={18} />
              Discord
            </div>
          </Button>
          <Button bgColor="bg-facebook">
            <div className="flex items-center gap-2">
              <BsFacebook size={18} />
              Facebook
            </div>
          </Button>
          <Button bgColor="bg-twitter">
            <div className="flex items-center gap-2">
              <BsTwitter size={18} />
              Twitter
            </div>
          </Button>
          <Button bgColor="bg-instagram">
            <div className="flex items-center gap-2">
              <BsInstagram size={18} />
              Instagram
            </div>
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Introduction;