"use client";

import { m, useReducedMotion } from "motion/react";

import { capabilities } from "@/lib/portfolio";

export function CapabilityRows() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <section
      id="capabilities"
      aria-labelledby="capabilities-heading"
      className="mx-auto max-w-7xl px-4 py-20 text-blacksite-text sm:px-6 sm:py-28 lg:px-8"
    >
      <div className="mb-10 flex items-end justify-between gap-6">
        <div>
          <p className="section-label mb-3">CAPABILITIES</p>
          <h2
            id="capabilities-heading"
            className="font-display text-3xl font-semibold tracking-[-0.05em] text-blacksite-text sm:text-5xl"
          >
            Built for hostile constraints.
          </h2>
        </div>
        <p className="section-label hidden text-right sm:block">/.01—/.05</p>
      </div>

      <div className="border-t border-blacksite-line">
        {capabilities.map((capability, index) => (
          <m.div
            key={capability.index}
            className="grid gap-5 border-b border-blacksite-line py-6 sm:grid-cols-[1fr_auto] sm:items-center sm:py-8"
            initial={shouldReduceMotion ? false : { opacity: 0, y: 14 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-12%" }}
            transition={{
              duration: shouldReduceMotion ? 0 : 0.45,
              delay: shouldReduceMotion ? 0 : index * 0.07,
              ease: "easeOut",
            }}
          >
            <p className="font-display text-[clamp(28px,4.5vw,64px)] font-semibold leading-[0.95] tracking-[-0.06em] text-blacksite-text">
              {capability.text}
            </p>
            <p className="section-label text-left text-blacksite-faint sm:text-right">
              /.{capability.index}
            </p>
          </m.div>
        ))}
      </div>
    </section>
  );
}