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

const focusAreas = [
  { icon: "code", label: "Engineering" },
  { icon: "cloud", label: "Cloud" },
  { icon: "cpu", label: "AI" },
  { icon: "database", label: "Data" },
  { icon: "workflow", label: "Digital Transformation" },
  { icon: "chart", label: "Business Outcomes" },
];

/** OurStory — company narrative with a focus-area rail. */
export function OurStory() {
  return (
    <SectionContainer paddingY="lg" className="bg-tenext-surface-muted px-[20px]">
      <PageContainer>
        <div className="grid grid-cols-1 gap-[50px] lg:grid-cols-[0.85fr_1.15fr] lg:gap-[80px]">
          <RevealOnView>
            <SectionHeading
              tag={ourStory.eyebrow}
              title={ourStory.title}
              titleClassName="text-tenext-dark"
            />
            <div className="mt-[36px] grid grid-cols-2 gap-[14px]">
              {focusAreas.map((area) => (
                <div
                  key={area.label}
                  className="flex items-center gap-[12px] rounded-[15px] border border-tenext-card-border bg-white px-[18px] py-[14px]"
                >
                  <span className="text-tenext-teal">
                    <Icon name={area.icon} className="h-[20px] w-[20px]" />
                  </span>
                  <span className="text-[14px] font-semibold text-tenext-dark font-[var(--font-sora)]">
                    {area.label}
                  </span>
                </div>
              ))}
            </div>
          </RevealOnView>

          <RevealOnView delay={120} className="flex flex-col gap-[24px]">
            {ourStory.paragraphs.map((paragraph, i) => (
              <p
                key={i}
                className={`leading-[1.85] text-tenext-text-muted ${i === 0 ? "text-[19px] text-tenext-dark" : "text-[16px]"}`}
              >
                {paragraph}
              </p>
            ))}
          </RevealOnView>
        </div>
      </PageContainer>
    </SectionContainer>
  );
}