"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import type { Variants } from "framer-motion";
import {
  fadeInSlow,
  fadeUp,
  staggerSlow,
  viewport,
} from "@/lib/animations";

const HERO_STATS = [
  { title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
  { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
  { title: "Happy Customers", icon: "mood", desc: "Neighbourhood community" },
  { title: "Coimbatore & Beyond", icon: "location_city", desc: "Growing neighbourhood reach" },
];

const COLLAGE_CARDS = [
  { text: "Local First", icon: "store" },
  { text: "Trusted Network", icon: "verified" },
  { text: "Connected Communities", icon: "groups" },
];

// Choreography: deliberate, slow-stagger sequence — thoughtful and purposeful
// badge fades in (opacity only) → h1 sweeps from left → p fades up → CTAs fade up
// The collage scales up softly, reinforcing the "built carefully" feeling
const badgeVariant = fadeInSlow;
const titleVariant = {
  hidden: { opacity: 0, x: -30 },
  visible: {
    opacity: 1,
    x: 0,
    transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
  },
};
const descVariant = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
  },
};
const ctaVariant = fadeUp;

const collageVariant = {
  hidden: { opacity: 0, scale: 0.92 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: { duration: 0.95, ease: [0.22, 1, 0.36, 1] as [number, number, number, number], delay: 0.2 },
  },
};

// Trust-feeling card variant: no spring bounce, deliberate easing
const trustCardVariant: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
  },
};

export function AboutHero() {
  return (
    <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
      <div className="border-b border-[#6330D6]/10">
        <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 max-w-[1600px] mx-auto">

          {/* Left Column: slow, deliberate stagger — thoughtful pacing */}
          <motion.div
            className="flex flex-col text-left max-w-xl"
            variants={staggerSlow}
            initial="hidden"
            animate="visible"
          >
            <motion.span
              variants={badgeVariant}
              className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit"
            >
              About Nearle
            </motion.span>

            <motion.h1
              variants={titleVariant}
              className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight"
            >
              Built for Every
              <br />
              <span className="text-[#6330D6]">Neighbourhood.</span>
            </motion.h1>

            <motion.p
              variants={descVariant}
              className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed"
            >
              Nearle is India&apos;s first hyper-local managed &ldquo;Neighbourhood living platform&rdquo; which brings all the amenities and requirements of residents to their fingertips.
            </motion.p>

            <motion.div
              variants={ctaVariant}
              className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto"
            >
              <a
                href="#story-section"
                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
              >
                Our Story
              </a>
              <Link
                href="/contact"
                className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
              >
                Join Our Journey
              </Link>
            </motion.div>
          </motion.div>

          {/* Right Column: soft scale-up — gentle and community-first */}
          <motion.div
            className="w-full"
            variants={collageVariant}
            initial="hidden"
            animate="visible"
          >
            <HeroVisualCollage
              centerImage="/nearlenewlogo.png"
              leftImage="/Nearle Business.png"
              rightImage="/nearle people.png"
              glassCards={COLLAGE_CARDS}
              isPhoneCenter={false}
              cardVariant={trustCardVariant}
            />
          </motion.div>
        </div>
      </div>

      <div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
        <div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
          <FeatureStatsRow items={HERO_STATS} />
        </div>
      </div>
    </section>
  );
}
