import { whyChoose } from "@/lib/home-content";
import ScrollReveal from "@/components/ScrollReveal";
import SectionBackdrop from "@/components/ui/SectionBackdrop";
import SectionHeader, { Highlight } from "@/components/ui/SectionHeader";

export default function WhyChoose({ tinted = false }: { tinted?: boolean }) {
  return (
    <section id="why" className="relative scroll-mt-24 overflow-x-clip py-20 sm:py-24 lg:py-28">
      <SectionBackdrop glow="right" tinted={tinted} />

      <div className="container">
        <SectionHeader
          eyebrow="Why Choose Us"
          title={
            <>
              Why teams choose <Highlight>Vasundhara.</Highlight>
            </>
          }
          description="Product-focused principles that guide how we build, design and continuously improve our applications."
        />

        <ol className="mt-14 grid gap-5 sm:grid-cols-2 lg:mt-16 lg:grid-cols-3 lg:gap-6">
          {whyChoose.map((item, i) => {
            const Icon = item.icon;
            return (
              <li key={item.title}>
                <ScrollReveal delay={(i % 3) * 90 + Math.floor(i / 3) * 80} variant="scale" className="h-full">
                  <article className="group flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-7 transition-all duration-300 ease-out hover:-translate-y-1 hover:border-accent/40 hover:shadow-card motion-reduce:transition-none motion-reduce:hover:translate-y-0">
                    <div className="flex items-start justify-between">
                      <span
                        aria-hidden="true"
                        className="font-display text-5xl font-bold leading-none tracking-tighter text-accent-100 transition-colors duration-300 group-hover:text-accent-200"
                      >
                        {String(i + 1).padStart(2, "0")}
                      </span>
                      <span className="flex h-10 w-10 items-center justify-center rounded-full border border-accent/25 text-accent transition-colors duration-300 group-hover:border-accent group-hover:bg-accent group-hover:text-white">
                        <Icon className="h-5 w-5" strokeWidth={1.75} aria-hidden />
                      </span>
                    </div>

                    <h3 className="mt-8 font-display text-xl font-semibold tracking-tight text-[#0F172A]">
                      {item.title}
                    </h3>
                    <p className="mt-2 flex-1 text-[0.95rem] leading-[1.7] text-ink-300">{item.description}</p>

                    <span
                      aria-hidden="true"
                      className="mt-6 block h-px w-10 bg-slate-300 transition-all duration-300 group-hover:w-full group-hover:bg-accent motion-reduce:transition-none"
                    />
                  </article>
                </ScrollReveal>
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}