import React from "react";
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { AboutHero } from "@/components/heroes/AboutHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { FloatingDelivery } from "@/components/about/FloatingDelivery";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "About Us",
  description: "Discover Nearle, India's first hyperlocal neighborhood living platform connecting residents with local convenience, grocery delivery, and home services.",
};

const STRATEGY_CARDS = [
  {
    title: "Our Mission",
    descr: "To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.",
    icon: "target",
    iconClass: "bg-[#6330D6]/[0.07] text-[#6330D6] border-[#6330D6]/10",
    image: "/images/nearle-how/how-storefront.webp",
    imageAlt: "3D local store storefront with purple awning",
    imgFit: "object-contain object-bottom"
  },
  {
    title: "Our Vision",
    descr: "Our vision is to make every neighbourhood more connected by helping people discover, support, and shop from the local businesses around them.",
    icon: "visibility",
    iconClass: "bg-secondary/[0.07] text-secondary border-secondary/10",
    image: "/images/nearle-merchant/local-map.webp",
    imageAlt: "Nearle local neighbourhood map",
    imgFit: "object-cover object-center"
  },
  {
    title: "Why Nearle",
    descr: "Nearle is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for consumers to take advantage of what their neighbourhood has to offer.",
    icon: "help_outline",
    iconClass: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20",
    image: "/images/app-mockup.webp",
    imageAlt: "Nearle app on a smartphone",
    imgFit: "object-contain object-bottom"
  }
];

const LOCAL_COUNTERS = [
  { count: "Local", label: "Customer First Always", icon: "people" },
  { count: "Verified", label: "Business Partners", icon: "store" },
  { count: "Growing", label: "Neighbourhood Reach", icon: "location_city" }
];


export default function AboutPage() {
  return (
    <PremiumPageShell>
      {/* ─── Hero Section ─── */}
      <AboutHero />

      {/* ─── Intro Description Block ─── */}
      <AnimatedSection>
        <section id="story-section" className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-white border-b border-[#6330D6]/10">
          <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
            Our Platform
          </span>
          <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mt-4 mb-4">
            Nearle Neighbourhood Commerce
          </h2>
          <p className="mx-auto max-w-3xl text-sm md:text-base text-[#5E5866] leading-relaxed font-semibold">
            We are redefining modern urban living by providing never before convenience. By linking local physical stores to an integrated digital framework, Nearle boosts merchant sales and delivers products instantly, fostering closer, cleaner, and faster local economies.
          </p>
        </section>
      </AnimatedSection>

      {/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
      <section
        className="bg-[#FAF7FD] border-b border-[#6330D6]/10"
        style={{ paddingTop: "clamp(40px, 4.5vw, 64px)", paddingBottom: "clamp(40px, 4.5vw, 64px)" }}
      >
        <div
          className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
          style={{ maxWidth: 1800 }}
        >
          <AnimatedGrid
            className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3"
            style={{ gap: "clamp(24px, 2.5vw, 36px)" }}
          >
            {STRATEGY_CARDS.map((card) => (
              <AnimatedCard
                key={card.title}
                className="bg-white border border-[#6330D6]/[0.10] shadow-[0_4px_28px_rgba(99,48,214,0.07)] flex flex-col overflow-hidden min-h-[480px] md:min-h-[520px] xl:min-h-[540px] 2xl:min-h-[560px]"
                style={{ borderRadius: 32 }}
              >
                {/* Content: icon, heading, description */}
                <div
                  className="flex-none"
                  style={{ padding: "clamp(28px, 2.8vw, 44px)", paddingBottom: 0 }}
                >
                  <div
                    className={`flex items-center justify-center rounded-full border shrink-0 ${card.iconClass}`}
                    style={{ width: 72, height: 72 }}
                  >
                    <MaterialIcon icon={card.icon} size={28} />
                  </div>
                  <h3
                    className="font-display font-black text-[#16001D]"
                    style={{ fontSize: "clamp(22px, 1.8vw, 30px)", marginTop: 24, marginBottom: 14, lineHeight: 1.2 }}
                  >
                    {card.title}
                  </h3>
                  <p
                    className="text-[#5E5866]"
                    style={{ fontSize: "clamp(15px, 1.1vw, 18px)", lineHeight: 1.65 }}
                  >
                    {card.descr}
                  </p>
                </div>
                {/* Image: inner rounded container with consistent spacing on all sides */}
                <div
                  className="flex-1 relative overflow-hidden bg-[#F4ECFA]/40"
                  style={{
                    margin: "clamp(20px, 2vw, 32px) clamp(24px, 2.2vw, 36px) clamp(20px, 2vw, 28px)",
                    borderRadius: 24,
                    minHeight: 200
                  }}
                >
                  <Image
                    src={card.image}
                    alt={card.imageAlt}
                    fill
                    sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
                    className={card.imgFit}
                  />
                </div>
              </AnimatedCard>
            ))}
          </AnimatedGrid>
        </div>
      </section>

      {/* ─── Global Stats counters ─── */}
      <section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-white border-b border-[#6330D6]/10">
        <AnimatedGrid className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {LOCAL_COUNTERS.map((c) => (
            <AnimatedCard key={c.label} className="flex flex-col items-center text-center">
              <div className="w-12 h-12 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
                <MaterialIcon icon={c.icon} size={22} />
              </div>
              <h4 className="text-4xl font-display font-black text-[#16001D]">{c.count}</h4>
              <p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
                {c.label}
              </p>
            </AnimatedCard>
          ))}
        </AnimatedGrid>
      </section>

      {/* ─── Brand Building Banner ─── */}
      <AnimatedSection>
        <section className="relative overflow-hidden py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
          <FloatingDelivery />
          <div className="max-w-4xl mx-auto relative z-10">
            <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
              Don&apos;t miss the opportunity
            </span>
            <h2 className="font-display text-3xl font-black text-[#16001D] mt-4 mb-4">
              Build Your Brand with Nearle
            </h2>
            <p className="text-xs md:text-sm text-[#5E5866] max-w-2xl mx-auto mb-8 leading-relaxed font-semibold">
              Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <Link
                href="/businesses"
                className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-lg transition-all duration-200 active:scale-95 flex items-center gap-2"
              >
                <MaterialIcon icon="bolt" size={18} />
                <span>Register Merchant</span>
              </Link>
              <Link
                href="/people"
                className="bg-white hover:bg-white/95 border border-[#6330D6]/10 text-[#16001D] font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
              >
                <MaterialIcon icon="download" size={18} />
                <span>Explore Nearle</span>
              </Link>
            </div>
          </div>
        </section>
      </AnimatedSection>
    </PremiumPageShell>
  );
}