import { AieroButton } from "@/components/shared/AieroButton";
import { Counter } from "@/components/shared/Counter";
import { IconBox } from "@/components/shared/IconBox";
import { OrbitIcon, FanIcon, CirclesIcon, ExpandIcon } from "@/components/shared/icons/PossibilityIcons";

export function PossibilitiesSection() {
  return (
    <section className="px-[20px] py-[60px] md:py-[100px]">
      <div className="mx-auto grid max-w-[1260px] grid-cols-1 gap-[50px] lg:grid-cols-[1fr_1fr]">
        
        {/* Left Column */}
        <div className="flex flex-col items-start pr-[10%] pt-[20px]">
          <span
            className="aiero-subheading mb-[16px] text-white"
            style={{ fontFamily: "var(--font-sora)" }}
          >
            Possibilities
          </span>
          
          <h2
            className="mb-[24px] max-w-[500px] tracking-[-0.03em] text-white"
            style={{
              fontFamily: "var(--font-dm-sans)",
              fontSize: "clamp(32px, 4vw, 56px)",
              fontWeight: 500,
              lineHeight: 1.1,
            }}
          >
            Explore limitless possibilities with Aiero AI
          </h2>
          
          <p className="mb-[40px] max-w-[480px] text-[16px] text-[#87899B]">
            Guppy siamese fighting fish, round stingray roach, sand tiger yellow weaver fish. Longnose lancetfish mooneye opah ghost fish.
          </p>
          
          <AieroButton
            variant="gradient-fill"
            className="rounded-[25px] px-[35px] py-[15px] text-[15px] font-medium"
            showArrow={false}
          >
            Explore more
          </AieroButton>

          <div className="mt-[80px]">
            <Counter
              target={270}
              suffix="k"
              numberClassName="text-[60px] md:text-[80px] font-bold leading-none font-[var(--font-manrope)] gradient-text-purple"
              title="Global satisfied customers"
              titleClassName="font-[var(--font-manrope)] text-[16px] font-medium leading-[1.4] text-[#87899B] max-w-[120px]"
              layout="row-reverse"
              gap="30px"
            />
          </div>
        </div>

        {/* Right Column */}
        <div className="flex flex-col gap-[30px] lg:pl-[10%]">
          <IconBox
            icon={<OrbitIcon className="h-full w-full" />}
            title="Cutting-edge technology"
            description="Integration of state-of-the-art AI algorithms, including deep learning, natural language processing."
            hasBorder={true}
          />
          <IconBox
            icon={<FanIcon className="h-full w-full" />}
            title="Tailored solutions"
            description="Custom design and development of neural network architectures tailored to specific business needs."
            hasBorder={true}
          />
          <IconBox
            icon={<CirclesIcon className="h-full w-full" />}
            title="Training and workshops"
            description="Custom design and development of neural network architectures tailored to specific business needs and objectives."
            hasBorder={true}
          />
          <IconBox
            icon={<ExpandIcon className="h-full w-full" />}
            title="AI-powered design"
            description="Integration of state-of-the-art AI algorithms, including deep learning, natural language processing."
            hasBorder={false}
          />
        </div>
        
      </div>
    </section>
  );
}