import { SectionContainer } from "@/components/shared/SectionContainer";
import { PageContainer } from "@/components/shared/PageContainer";
import { RevealOnView } from "@/components/shared/RevealOnView";
import { Icon } from "@/components/shared/Icon";
import { whoWeAre } from "@/data/about";

/** WhoWeAre — balanced two-column: positioning statement + what/who/why. */
export function WhoWeAre() {
  return (
    <SectionContainer paddingY="lg" className="bg-white px-[20px]">
      <PageContainer>
        <div className="grid grid-cols-1 gap-[50px] lg:grid-cols-2 lg:gap-[80px]">
          {/* Left */}
          <RevealOnView>
            <span className="tenext-subheading mb-[16px] text-tenext-teal" style={{ fontFamily: "var(--font-sora)" }}>
              {whoWeAre.eyebrow}
            </span>
            <h2
              className="max-w-[480px] tracking-[-0.03em] text-tenext-dark"
              style={{
                fontFamily: "var(--font-dm-sans)",
                fontSize: "clamp(30px, 3.6vw, 48px)",
                fontWeight: 500,
                lineHeight: 1.12,
              }}
            >
              {whoWeAre.title}
            </h2>
            <p className="mt-[24px] max-w-[460px] text-[17px] leading-[1.75] text-tenext-text-muted">
              {whoWeAre.lead}
            </p>
          </RevealOnView>

          {/* Right */}
          <div className="flex flex-col gap-[24px]">
            {whoWeAre.points.map((point, index) => (
              <RevealOnView key={point.title} delay={index * 90}>
                <div className="flex gap-[22px] rounded-[25px] border border-tenext-card-border p-[30px] transition-transform duration-300 hover:-translate-y-1">
                  <span className="flex h-[54px] w-[54px] shrink-0 items-center justify-center rounded-[15px] bg-tenext-teal/10 text-tenext-teal">
                    <Icon name={point.icon} className="h-[26px] w-[26px]" />
                  </span>
                  <div>
                    <h3 className="mb-[8px] font-[var(--font-sora)] text-[19px] font-bold text-tenext-dark">
                      {point.title}
                    </h3>
                    <p className="text-[15px] leading-[1.7] text-tenext-text-muted">
                      {point.description}
                    </p>
                  </div>
                </div>
              </RevealOnView>
            ))}
          </div>
        </div>
      </PageContainer>
    </SectionContainer>
  );
}