"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { fadeUp, fadeIn, staggerContainer, viewport } from "@/lib/animations";

const CARDS = [
  {
    title: "Shops You Know",
    desc: "Order from familiar neighbourhood stores near you.",
    icon: "store",
    color: "bg-primary/5 text-primary border-primary/10",
    image: "/images/nearle-redesign/shops-you-know.webp",
    alt: "Friendly local grocery shop owner inside a kirana store",
  },
  {
    title: "Better Local Value",
    desc: "Discover local offers and daily savings nearby.",
    icon: "local_offer",
    color: "bg-secondary/5 text-secondary border-secondary/10",
    image: "/images/nearle-redesign/better-local-value.webp",
    alt: "Fresh local vegetables and fruits with a local offers sign",
  },
  {
    title: "Easy Reordering",
    desc: "Save your favourite stores for quick reordering.",
    icon: "history",
    color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
    image: "/images/nearle-redesign/easy-reordering.webp",
    alt: "Hand holding a smartphone with a simple grocery ordering app",
  },
  {
    title: "Support Local Business",
    desc: "Every order directly supports nearby shopkeepers.",
    icon: "favorite",
    color: "bg-rose-500/5 text-rose-700 border-rose-100",
    image: "/images/nearle-redesign/support-local-business.webp",
    alt: "Local shop owner and customer shaking hands inside a store",
  },
];

export function WhyNearle() {
  return (
    <section className="section section-soft w-full overflow-hidden">
      <div className="page-container relative">
        {/* Header Section */}
        <motion.div
          className="relative text-center mb-8 md:mb-10"
          variants={fadeUp}
          initial="hidden"
          whileInView="visible"
          viewport={viewport}
        >
          <div className="pointer-events-none absolute -left-2 top-0 hidden h-36 w-36 overflow-hidden rounded-[2rem] bg-primary/5 shadow-[0_18px_45px_rgba(101,20,154,0.12)] md:block lg:-left-4 lg:h-44 lg:w-44">
            <Image
              src="/images/nearle-redesign/heading-shopper.webp"
              alt=""
              fill
              sizes="176px"
              className="object-cover"
            />
          </div>
          <div className="pointer-events-none absolute -right-2 top-1 hidden h-32 w-40 overflow-hidden rounded-[2rem] bg-secondary/5 shadow-[0_18px_45px_rgba(22,0,29,0.10)] md:block lg:-right-4 lg:h-40 lg:w-52">
            <Image
              src="/images/nearle-redesign/heading-store.webp"
              alt=""
              fill
              sizes="208px"
              className="object-cover"
            />
          </div>
          <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full">
            Our Philosophy
          </span>
          <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-3 leading-tight tracking-tight">
            Why Nearle <span className="text-primary font-normal">Feels Different</span>
          </h2>
          <p className="text-body-lg text-on-surface-variant mt-2.5 max-w-xl mx-auto leading-relaxed">
            Nearle brings the convenience of an app to the stores you already know and trust.
          </p>
        </motion.div>

        {/* Cards Grid */}
        <motion.div
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-7"
          variants={staggerContainer}
          initial="hidden"
          whileInView="visible"
          viewport={viewport}
        >
          {CARDS.map((card) => (
            <motion.div
              key={card.title}
              variants={fadeIn}
              className="premium-card bg-white rounded-3xl p-5 md:p-6 border border-outline-variant/15 shadow-lg flex flex-col h-full"
              whileHover={{ y: -4, scale: 1.02, transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] } }}
              whileTap={{ scale: 0.98, transition: { duration: 0.1 } }}
            >
              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-5 shrink-0 ${card.color}`}>
                <MaterialIcon icon={card.icon} size={27} />
              </div>
              <h3 className="font-display text-xl font-black text-brand-dark mb-3">
                {card.title}
              </h3>
              <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
                {card.desc}
              </p>
              <div className="relative mt-6 aspect-[4/3] w-full overflow-hidden rounded-[1.35rem] bg-brand-accent-light shadow-[inset_0_0_0_1px_rgba(255,255,255,0.55)]">
                <Image
                  src={card.image}
                  alt={card.alt}
                  fill
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                  className="object-cover"
                />
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}
