import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";

export function AboutIntroSection() {
  return (
    <SectionContainer paddingY="lg">
      <PageContainer className="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_1fr] lg:gap-[60px] xl:gap-[100px]">
        {/* Left: Text Content */}
        <div className="flex flex-col items-start justify-center pt-5">
          <span
            className="tenext-subheading mb-4 text-tenext-teal"
            style={{ fontFamily: "var(--font-sora)" }}
          >
            about
          </span>
          <h2
            className="mb-6 tracking-[-0.03em] text-white"
            style={{
              fontFamily: "var(--font-dm-sans)",
              fontSize: "clamp(32px, 4vw, 56px)",
              fontWeight: 500,
              lineHeight: 1.1,
            }}
          >
            Awesome things in working with tenext WordPress theme
          </h2>
          <p className="mb-8 text-base leading-relaxed text-tenext-text-muted">
            At XXLando, we are a leading AI services provider dedicated to
            delivering innovative solutions that leverage artificial
            intelligence to transform businesses.
          </p>
          <p className="text-base leading-relaxed text-tenext-text-muted">
            Our team of experts specializes in developing cutting-edge AI
            technologies, such as machine learning, natural language processing,
            and computer vision, to help our clients streamline operations,
            enhance decision-making.
          </p>
        </div>

        {/* Right: Images */}
        <div className="relative">
          <div className="relative aspect-[4/5] w-full overflow-hidden rounded-[25px] bg-tenext-card-dark">
            <div
              className="absolute inset-0 bg-cover bg-center"
              style={{
                backgroundImage: "url(/images/tenext/home-9-img.png)",
              }}
            />
          </div>
        </div>
      </PageContainer>
    </SectionContainer>
  );
}