/**
 * ThinkSchool Public Website — Feature Bento Grid Component
 * Curated product outcomes grouping verified modules into structured editorial cards.
 */
function FeatureGrid() {
  const featuresConfig = window.FEATURES_CONFIG || {};
  const categories = featuresConfig.categories || [];
  const featureList = featuresConfig.featureList || [];

  return (
    <section id="features" className="py-24 md:py-32 bg-zinc-950 border-t border-white/10 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Architected for Excellence"
          title="The connected workflows modern schools need."
          description="Every workflow is purpose-built for real educational institutions. From high-speed roll call to multi-head fee reconciliation."
          align="center"
          className="mb-16"
        />

        {/* Bento Grid Layout */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {categories.map((cat, index) => {
            const isFeatured = index === 0 || index === 3;
            return (
              <div
                key={cat.id}
                className={`group rounded-3xl border border-white/10 bg-black/60 hover:bg-zinc-900/60 transition-all duration-300 p-8 flex flex-col justify-between relative overflow-hidden ${
                  isFeatured ? "md:col-span-2 lg:col-span-2 bg-gradient-to-br from-zinc-900/80 via-black to-zinc-950" : ""
                }`}
              >
                {/* Ambient glow on hover */}
                <div className="absolute top-0 right-0 w-64 h-64 bg-amber-500/5 group-hover:bg-amber-500/10 rounded-full blur-3xl transition-colors duration-500 pointer-events-none" />

                <div>
                  <div className="flex items-center justify-between mb-6">
                    <div className="w-12 h-12 rounded-2xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center group-hover:scale-110 transition-transform">
                      <Icon name={cat.icon || "zap"} size={24} />
                    </div>
                    <Badge variant="zinc">{cat.eyebrow}</Badge>
                  </div>

                  <h3 className="text-xl sm:text-2xl font-heading italic text-white mb-3">
                    {cat.title}
                  </h3>

                  <p className="text-sm text-zinc-400 font-body leading-relaxed mb-6">
                    {cat.description}
                  </p>
                </div>

                {/* Sub-feature chips */}
                <div className="pt-6 border-t border-white/5 flex flex-wrap gap-2">
                  {featureList
                    .filter((f) => f.category === cat.id)
                    .map((item) => (
                      <span
                        key={item.id}
                        className="px-3 py-1 rounded-full bg-zinc-900/80 border border-white/5 text-xs text-zinc-300 font-body flex items-center gap-1.5"
                      >
                        <span className="w-1 h-1 rounded-full bg-amber-400" />
                        {item.title}
                      </span>
                    ))}
                </div>
              </div>
            );
          })}
        </div>

        {/* Bottom Link to Full Feature Breakdown */}
        <div className="mt-14 text-center">
          <Button href="/features/" size="lg" variant="secondary" iconAfter={<Icon name="arrow-right" size={16} />}>
            Explore Comprehensive Module Specifications
          </Button>
        </div>
      </div>
    </section>
  );
}

window.FeatureGrid = FeatureGrid;