import { RevealOnView } from "@/components/shared/RevealOnView";

export function BenefitsGridSection() {
  return (
    <section className="relative overflow-hidden bg-white px-[20px] pb-[60px] md:pb-[100px]">
      <div className="mx-auto max-w-[1260px]">
        <div className="grid grid-cols-1 gap-[30px] md:grid-cols-3">
          {/* Card 1 */}
          <RevealOnView className="flex flex-col gap-[20px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
            <h4 className="text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
              Predictable outcomes from your IT investments
            </h4>
            <ul className="flex flex-col gap-[15px] mt-[10px]">
              <li className="flex items-start gap-[10px] text-[16px] text-tenext-text-muted">
                <span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-tenext-accent-teal shrink-0"></span>
                Lowest total cost of ownership
              </li>
              <li className="flex items-start gap-[10px] text-[16px] text-tenext-text-muted">
                <span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-tenext-accent-teal shrink-0"></span>
                Accelerated time to value
              </li>
            </ul>
          </RevealOnView>

          {/* Card 2 */}
          <RevealOnView delay={110} className="flex flex-col gap-[20px] rounded-[25px] border border-tenext-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
            <h4 className="text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
              Built to fit your existing business processes
            </h4>
            <p className="text-[16px] leading-[1.6] text-tenext-text-muted mt-[10px]">
              Seamless integration with existing systems and platforms, on a
              scalable and flexible architecture engineered for the long term.
            </p>
          </RevealOnView>

          {/* Card 3 */}
          <RevealOnView delay={220} className="flex flex-col gap-[20px] rounded-[25px] border border-tenext-card-border bg-[#F8F9FA] p-[40px] transition-transform duration-300 hover:-translate-y-2">
            <h4 className="text-[22px] font-bold leading-[1.3] text-tenext-dark font-[var(--font-sora)]">
              Security and governance built in
            </h4>
            <p className="text-[16px] leading-[1.6] text-tenext-text-muted mt-[10px]">
              Access control, data governance, and compliance-ready handling are
              designed in from the first sprint — not retrofitted later.
            </p>
          </RevealOnView>
        </div>
      </div>
    </section>
  );
}