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

export function MissionSection() {
  return (
    <SectionContainer paddingY="lg">
      <PageContainer className="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_1.2fr] lg:gap-[60px] xl:gap-[100px]">
        {/* Left: Images */}
        <div className="relative aspect-square w-full md:aspect-[4/3] lg:aspect-square">
          <div className="absolute bottom-0 left-0 h-[85%] w-[85%] 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 className="absolute right-0 top-0 h-[50%] w-[50%] overflow-hidden rounded-[25px] border-[8px] border-tenext-dark bg-tenext-card-purple">
            <div
              className="absolute inset-0 bg-cover bg-center"
              style={{
                backgroundImage: "url(/images/tenext/home-9-img.png)",
              }}
            />
          </div>
        </div>

        {/* Right: Text and Stats */}
        <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)" }}
          >
            Mission
          </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,
            }}
          >
            we create a professional product using artificial intelligence
          </h2>
          <p className="mb-10 text-base leading-relaxed text-tenext-text-muted">
            Certainly, crafting a clear and inspiring mission statement is
            essential for a development company. It should reflect your
            company&apos;s values, purpose, and commitment to innovation.
          </p>

          <div className="w-full rounded-[25px] border border-tenext-card-border bg-tenext-card-dark p-8 md:p-10">
            <Counter
              target={1250}
              suffix="+"
              numberClassName="text-[60px] md:text-[80px] font-bold leading-none font-[var(--font-manrope)] gradient-text-purple"
              title="Created projects"
              titleClassName="font-[var(--font-sora)] text-[11px] font-semibold tracking-[0.18em] uppercase text-tenext-text-muted mt-2"
            />
          </div>
        </div>
      </PageContainer>
    </SectionContainer>
  );
}