"use client"

import { Icon } from "@iconify/react"
import { LandingReveal } from "@/components/landing/landing-reveal"
import { ProductSectionHeading } from "@/components/landing/product/product-section-heading"
import type { ProductFeatureGroup } from "@/components/landing/product/product-data"
import { cn } from "@/lib/utils"

export function ProductFeatureGrid({
  groups,
  accent,
}: {
  groups: ProductFeatureGroup[]
  accent: string
}) {
  return (
    <>
      {groups.map((group) => (
        <section
          key={group.eyebrow}
          id={group.eyebrow.toLowerCase().replace(/\s+/g, "-")}
          className="scroll-mt-20 px-4 py-20 sm:px-6"
        >
          <div className="mx-auto flex w-full max-w-6xl flex-col gap-12">
            <ProductSectionHeading
              eyebrow={group.eyebrow}
              title={group.title}
              description={group.description}
              accent={accent}
            />

            <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
              {group.features.map((feature, index) => (
                <LandingReveal
                  as="li"
                  key={feature.title}
                  delay={(index % 4) * 0.07}
                  className={cn(feature.wide && "sm:col-span-2")}
                >
                  <div className="landing-glass landing-halo-card flex h-full flex-col gap-3 rounded-2xl p-6">
                    <span
                      className="flex size-11 items-center justify-center rounded-xl"
                      style={{
                        backgroundColor: `${accent}14`,
                        color: accent,
                      }}
                    >
                      <Icon icon={feature.icon} className="size-6" aria-hidden />
                    </span>
                    <h3 className="text-lg font-semibold tracking-tight">
                      {feature.title}
                    </h3>
                    <p className="text-sm leading-relaxed text-[var(--landing-muted)]">
                      {feature.description}
                    </p>
                  </div>
                </LandingReveal>
              ))}
            </ul>
          </div>
        </section>
      ))}
    </>
  )
}