import React, { forwardRef } from "react"
import Link from "next/link"

import { useIsMobile } from "@/hooks/use-is-mobile"
import { useThemeContext } from "@/providers/themeProvider"
import {
  Button,
  FlexContainer,
  Typography,
} from "@/components/shared/components"
import { BRAHMA_CONSOLE_KIT_GITHUB_LINK } from "@/components/shared/constants"

const StartBuildingSection = forwardRef<HTMLDivElement>((props, ref) => {
  const { theme } = useThemeContext()
  const isMobile = useIsMobile()

  return (
    <FlexContainer
      ref={ref}
      width={100}
      justifyContent="center"
      alignItems="center"
      padding={isMobile ? "4rem 4rem 4rem 4rem" : "4.4rem 12rem 12rem 12rem"}
      flexDirection="column"
      gap={isMobile ? 1.6 : 2.4}
    >
      <FlexContainer
        flexDirection="column"
        alignItems="center"
        justifyContent="center"
        gap={isMobile ? 0.8 : 1.6}
      >
        <Typography
          type="TITLE_XXL"
          textAlign="center"
          color={theme.colors.white}
          style={{
            fontSize: isMobile ? "2.8rem" : "4.4rem",
            fontWeight: "500",
            lineHeight: isMobile ? "3.6rem" : "4.8rem",
          }}
        >
          Empower Any AI to Act On-Chain
        </Typography>

        <Typography
          type={isMobile ? "BODY_S" : "BODY_MEDIUM_L"}
          textAlign="center"
          color={theme.colors.gray200}
          style={{
            maxWidth: "60rem",
          }}
        >
          Turn any AI model into an autonomous agent to manage assets and
          execute transactions. ConsoleKit handles wallets, policies, and
          cross-chain ops—while users keep full custody.
        </Typography>
      </FlexContainer>
      <Link href={BRAHMA_CONSOLE_KIT_GITHUB_LINK} target="_blank">
        <Button buttonType="white" buttonSize="M">
          Start Building
        </Button>
      </Link>
    </FlexContainer>
  )
})

StartBuildingSection.displayName = "StartBuildingSection"

export default StartBuildingSection