nearle_web_nextjs/src/components/home/HyperlocalFeatures.tsx

"use client";

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

const FEATURES = [
  {
    title: "Trusted Nearby Stores",
    icon: "store",
    desc: "Connect directly with the local merchants you already know.",
  },
  {
    title: "Short-Distance Delivery",
    icon: "local_shipping",
    desc: "Delivered quickly from nearby shops to keep items fresh.",
  },
  {
    title: "Easy Reorders",
    icon: "replay",
    desc: "Save your favourite stores and reorder in seconds.",
  },
  {
    title: "Support Local Businesses",
    icon: "favorite",
    desc: "Help local neighbourhood stores thrive digitally.",
  },
];

export function HyperlocalFeatures() {
  return (
    <section className="relative bg-white w-full py-1 lg:py-1">
      {/* Subtle background radial glows */}
      <div className="absolute left-[15%] top-1/2 -translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-brand-accent/[0.03] blur-[130px] pointer-events-none z-0" />
      <div className="absolute right-[15%] top-1/2 translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-primary/[0.03] blur-[130px] pointer-events-none z-0" />

      {/* Inner container */}
     <div className="relative z-10 mx-auto w-full max-w-[2200px] px-2 md:px-4 lg:px-5 xl:px-6">
        <div className="grid grid-cols-1 lg:grid-cols-[0.95fr_1.05fr] gap-8 lg:gap-10 items-center">

          {/* Left Column: Visual Storytelling */}
          <motion.div
            className="w-full max-w-[880px] justify-self-center relative rounded-[2rem] border border-outline-variant/25 bg-[#F8F3FC] z-10 overflow-hidden aspect-[10/11] lg:h-[580px] shadow-[0_24px_80px_rgba(101,20,154,0.10)]"
            variants={slideInLeft}
            initial="hidden"
            whileInView="visible"
            viewport={viewport}
          >
            <Image
              src="/map1.webp"
              alt="Map Background"
              fill
              className="object-cover"
              sizes="(max-width: 768px) 100vw, 50vw"
              priority
            />
          </motion.div>

          {/* Right Column: Feature Panel directly on page background */}
          <div className="w-full py-6 md:py-8 lg:py-10 pl-4 md:pl-8 lg:pl-12 xl:pl-44 relative z-10 text-[#16001D]">
            <motion.span
              className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3.5 py-1.5 rounded-full border border-primary/20"
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              Community & Trust
            </motion.span>

            <motion.h2
              className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-4 mb-6 leading-tight tracking-tight"
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              Built Around Your<br />
              <span className="text-primary font-black">Neighbourhood</span>
            </motion.h2>

            <motion.p
              className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed"
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              Nearle brings the convenience of an app to the stores you already know and trust, making it easy to support local shops.
            </motion.p>

            {/* Features List with vertical connector line */}
            <motion.div
              className="relative space-y-8"
              variants={staggerContainer}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              {/* Vertical connector line */}
              <div className="absolute left-6 top-6 bottom-6 w-0.5 bg-primary/20 -translate-x-1/2 z-0" />

              {FEATURES.map((item) => (
                <motion.div key={item.title} variants={fadeUp} className="flex gap-5 group relative z-10">

                  {/* Icon circle */}
                  <div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
                    <MaterialIcon
                      icon={item.icon}
                      className="text-white"
                      size={22}
                    />
                  </div>

                  <div>
                    <h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
                      {item.title}
                    </h3>
                    <p className="text-sm md:text-base text-on-surface-variant mt-1 leading-relaxed">
                      {item.desc}
                    </p>
                  </div>
                </motion.div>
              ))}
            </motion.div>

            {/* Divider Line above CTA Area */}
            <hr className="border-t border-[#EEE7F4] my-6 relative z-10" />

            {/* Onboarding Call to Action */}
            <motion.div
              className="mt-2 flex flex-wrap gap-6 items-center relative z-10"
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewport}
            >
              <Link
                href="/#download"
                className="bg-primary hover:bg-primary-container text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
              >
                Get Nearle App
              </Link>
              <Link
                href="/businesses"
                className="text-[#6D28D9] hover:text-[#5225b8] font-black text-sm md:text-base flex items-center gap-1 group py-2"
              >
                <span>Learn How to Partner</span>
                <MaterialIcon
                  icon="arrow_forward"
                  size={16}
                  className="transition-transform group-hover:translate-x-1"
                />
              </Link>
            </motion.div>

          </div>
        </div>

      </div>
    </section>
  );
}