"use client";

import React from "react";
import { motion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { fadeUp, scaleIn, staggerContainer, staggerSlow, viewport } from "@/lib/animations";

// ─── Feature SVG Illustrations ───────────────────────────────────────────────
// Flat vector style · Nearle brand palette · no text inside SVGs

function DirectAccessSVG() {
  return (
    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {/* Location pin top-center */}
      <path d="M68 4C64.1 4 60 7.4 60 12.6C60 18.6 68 28 68 28C68 28 76 18.6 76 12.6C76 7.4 71.9 4 68 4Z" fill="#6330D6"/>
      <circle cx="68" cy="12.6" r="3.5" fill="white"/>
      {/* Left person – customer (purple) */}
      <circle cx="34" cy="44" r="12" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
      <circle cx="34" cy="40" r="5" fill="#6330D6" opacity="0.55"/>
      <path d="M20 76Q20 60 34 60Q48 60 48 76" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
      {/* Right person – merchant (green) */}
      <circle cx="102" cy="44" r="12" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.5"/>
      <circle cx="102" cy="40" r="5" fill="#22C55E" opacity="0.55"/>
      {/* Green apron shape */}
      <rect x="96" y="54" width="12" height="14" rx="3" fill="#22C55E" opacity="0.6"/>
      <path d="M88 76Q88 60 102 60Q116 60 116 76" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.5"/>
      {/* Handshake connector */}
      <circle cx="58" cy="64" r="6" fill="#6330D6" opacity="0.85"/>
      <circle cx="78" cy="64" r="6" fill="#22C55E" opacity="0.85"/>
      <path d="M58 64Q68 59 78 64" stroke="#16001D" strokeWidth="1.5" strokeLinecap="round" opacity="0.25"/>
    </svg>
  );
}

function PartnerSVG() {
  return (
    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {/* Puzzle piece 1 – purple */}
      <path d="M14 40L14 78L58 78L58 66Q70 66 70 58Q70 50 58 50L58 40Z" fill="#6330D6" opacity="0.88"/>
      <path d="M58 50Q64 50 64 58Q64 66 58 66" fill="#F5F3FF"/>
      {/* Puzzle piece 2 – lavender */}
      <path d="M78 40L78 50Q66 50 66 58Q66 66 78 66L78 78L122 78L122 40Z" fill="#A78BFA" opacity="0.82"/>
      <path d="M78 50Q72 50 72 58Q72 66 78 66" fill="#F5F3FF"/>
      {/* Top-left avatar */}
      <circle cx="34" cy="24" r="12" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
      <circle cx="34" cy="20" r="4.5" fill="#6330D6" opacity="0.45"/>
      <path d="M25 33Q25 28 34 28Q43 28 43 33" fill="#6330D6" opacity="0.35"/>
      {/* Top-right avatar */}
      <circle cx="100" cy="24" r="12" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.5"/>
      <circle cx="100" cy="20" r="4.5" fill="#22C55E" opacity="0.45"/>
      <path d="M91 33Q91 28 100 28Q109 28 109 33" fill="#22C55E" opacity="0.35"/>
    </svg>
  );
}

function BrandSVG() {
  return (
    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {/* Storefront body */}
      <rect x="20" y="42" width="76" height="48" rx="3" fill="white" stroke="#E9D5FF" strokeWidth="1.5"/>
      {/* Purple awning */}
      <rect x="14" y="34" width="88" height="14" rx="4" fill="#6330D6"/>
      <rect x="22" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
      <rect x="36" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
      <rect x="50" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
      <rect x="64" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
      <rect x="78" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
      {/* Roof line */}
      <path d="M12 36L58 16L104 36" stroke="#6330D6" strokeWidth="1.5" fill="none" opacity="0.45"/>
      {/* Door */}
      <rect x="49" y="64" width="18" height="26" rx="3" fill="#EDE9FE"/>
      <circle cx="64" cy="77" r="1.5" fill="#6330D6" opacity="0.5"/>
      {/* Windows */}
      <rect x="24" y="52" width="16" height="12" rx="2" fill="#DBEAFE"/>
      <rect x="76" y="52" width="16" height="12" rx="2" fill="#DBEAFE"/>
      {/* Megaphone right */}
      <path d="M108 30L118 24L118 50L108 44Z" fill="#F59E0B" opacity="0.82"/>
      <rect x="104" y="34" width="6" height="8" rx="2" fill="#F59E0B"/>
      {/* Signal arcs */}
      <path d="M118 32Q126 30 128 37Q126 44 118 42" stroke="#F59E0B" strokeWidth="1.5" fill="none" strokeDasharray="2.5 2" opacity="0.7"/>
    </svg>
  );
}

function OpportunitySVG() {
  return (
    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {/* Ascending bars */}
      <rect x="10" y="62" width="20" height="26" rx="3" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1"/>
      <rect x="38" y="48" width="20" height="40" rx="3" fill="#A78BFA"/>
      <rect x="66" y="32" width="20" height="56" rx="3" fill="#6330D6"/>
      {/* Curved green arrow */}
      <path d="M10 62Q52 20 100 10" stroke="#22C55E" strokeWidth="2.5" strokeLinecap="round"/>
      <path d="M91 6L103 10L95 20" fill="#22C55E"/>
      {/* Gold coin */}
      <circle cx="116" cy="72" r="17" fill="#FEF3C7"/>
      <circle cx="116" cy="72" r="12" fill="#FDE68A"/>
      <circle cx="116" cy="72" r="9" fill="#FCD34D"/>
      <text x="116" y="77" textAnchor="middle" fontSize="11" fontWeight="bold" fill="#78350F">₹</text>
      {/* Baseline */}
      <line x1="8" y1="88" x2="90" y2="88" stroke="#D1D5DB" strokeWidth="1" strokeDasharray="3 2"/>
    </svg>
  );
}

function DelightSVG() {
  return (
    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {/* Person body */}
      <circle cx="44" cy="26" r="13" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
      <circle cx="44" cy="22" r="5" fill="#6330D6" opacity="0.5"/>
      <path d="M28 76Q28 56 44 56Q60 56 60 76" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
      {/* Phone in hand */}
      <rect x="53" y="44" width="14" height="22" rx="3" fill="#6330D6" opacity="0.82"/>
      <rect x="55" y="46" width="10" height="16" rx="2" fill="white" opacity="0.55"/>
      {/* Shopping bag */}
      <rect x="76" y="52" width="32" height="28" rx="4" fill="#F5F3FF" stroke="#6330D6" strokeWidth="1.5"/>
      <path d="M82 52Q82 45 92 45Q102 45 102 52" stroke="#6330D6" strokeWidth="1.5" fill="none"/>
      <line x1="76" y1="63" x2="108" y2="63" stroke="#6330D6" strokeWidth="1" opacity="0.3"/>
      {/* Heart bubble */}
      <circle cx="98" cy="24" r="14" fill="white" stroke="#EDE9FE" strokeWidth="1.5"/>
      <path d="M98 31L90 23Q90 17 95 17Q98 17 98 20Q98 17 101 17Q106 17 106 23Z" fill="#EF4444" opacity="0.82"/>
      {/* Star row */}
      <text x="62" y="94" fontSize="11" fill="#F59E0B">★★★★★</text>
    </svg>
  );
}

function UniqueModelSVG() {
  return (
    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {/* Map area */}
      <rect x="10" y="8" width="116" height="78" rx="8" fill="#DBEAFE" opacity="0.5"/>
      {/* Main roads */}
      <path d="M10 48L126 48" stroke="white" strokeWidth="7"/>
      <path d="M68 8L68 86" stroke="white" strokeWidth="7"/>
      {/* Secondary roads */}
      <path d="M10 28Q40 28 40 48" stroke="white" strokeWidth="5"/>
      <path d="M96 48Q96 68 126 72" stroke="white" strokeWidth="5"/>
      {/* Purple pin (top-left block) */}
      <path d="M36 34C33 34 30 36.7 30 40.2C30 45 36 53 36 53C36 53 42 45 42 40.2C42 36.7 39 34 36 34Z" fill="#6330D6"/>
      <circle cx="36" cy="40" r="3" fill="white"/>
      {/* Green pin (bottom-right block) */}
      <path d="M96 58C93 58 90 60.7 90 64.2C90 69 96 77 96 77C96 77 102 69 102 64.2C102 60.7 99 58 96 58Z" fill="#22C55E"/>
      <circle cx="96" cy="64" r="3" fill="white"/>
      {/* Store badge at purple pin */}
      <rect x="50" y="16" width="34" height="24" rx="3" fill="white" stroke="#6330D6" strokeWidth="1.2"/>
      <rect x="50" y="15" width="34" height="9" rx="2" fill="#6330D6"/>
      <rect x="60" y="26" width="14" height="14" rx="2" fill="#EDE9FE"/>
    </svg>
  );
}

function AudienceSVG() {
  return (
    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {/* Bullseye rings */}
      <circle cx="68" cy="52" r="40" fill="#EDE9FE" opacity="0.3"/>
      <circle cx="68" cy="52" r="28" fill="#EDE9FE" opacity="0.55"/>
      <circle cx="68" cy="52" r="17" fill="#A78BFA" opacity="0.5"/>
      <circle cx="68" cy="52" r="9" fill="#6330D6"/>
      <circle cx="68" cy="52" r="3.5" fill="white"/>
      {/* Green arrow */}
      <path d="M110 8L70 49" stroke="#22C55E" strokeWidth="2.5" strokeLinecap="round"/>
      <path d="M103 4L114 8L109 19" fill="#22C55E"/>
      {/* Four corner avatars */}
      <circle cx="14" cy="22" r="11" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.2"/>
      <circle cx="14" cy="18" r="4" fill="#6330D6" opacity="0.4"/>
      <circle cx="122" cy="20" r="11" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.2"/>
      <circle cx="122" cy="16" r="4" fill="#22C55E" opacity="0.4"/>
      <circle cx="12" cy="80" r="11" fill="#FEF3C7" stroke="#F59E0B" strokeWidth="1.2"/>
      <circle cx="12" cy="76" r="4" fill="#F59E0B" opacity="0.4"/>
      <circle cx="122" cy="80" r="11" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.2"/>
      <circle cx="122" cy="76" r="4" fill="#6330D6" opacity="0.4"/>
    </svg>
  );
}

function IncreaseSVG() {
  return (
    <svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      {/* Small figure */}
      <circle cx="22" cy="52" r="10" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
      <circle cx="22" cy="48" r="4" fill="#6330D6" opacity="0.4"/>
      <path d="M12 80Q12 66 22 66Q32 66 32 80" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
      {/* Medium figure */}
      <circle cx="60" cy="44" r="13" fill="#A78BFA" opacity="0.72"/>
      <circle cx="60" cy="39" r="5.5" fill="#7C3AED" opacity="0.55"/>
      <path d="M46 80Q46 62 60 62Q74 62 74 80" fill="#A78BFA" opacity="0.72"/>
      {/* Large figure */}
      <circle cx="106" cy="34" r="17" fill="#6330D6" opacity="0.78"/>
      <circle cx="106" cy="28" r="7" fill="#4C1D95" opacity="0.55"/>
      <path d="M86 80Q86 54 106 54Q126 54 126 80" fill="#6330D6" opacity="0.78"/>
      {/* Growth arc */}
      <path d="M16 44Q52 14 106 18" stroke="#22C55E" strokeWidth="2" strokeLinecap="round" strokeDasharray="4 3"/>
      {/* Plus badge */}
      <rect x="124" y="16" width="10" height="2.5" rx="1.2" fill="#22C55E"/>
      <rect x="127.75" y="12.25" width="2.5" height="10" rx="1.2" fill="#22C55E"/>
    </svg>
  );
}

// ─── Card SVG Illustrations ───────────────────────────────────────────────────

function MoreCardSVG() {
  return (
    <svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
      {/* Rising bars */}
      <rect x="14" y="110" width="32" height="64" rx="5" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
      <rect x="58" y="86" width="32" height="88" rx="5" fill="#A78BFA"/>
      <rect x="102" y="56" width="32" height="118" rx="5" fill="#6330D6"/>
      {/* Curved green arrow */}
      <path d="M14 108Q72 42 152 22" stroke="#22C55E" strokeWidth="3" strokeLinecap="round"/>
      <path d="M143 16L157 22L147 34" fill="#22C55E"/>
      {/* Gold coin */}
      <circle cx="182" cy="134" r="32" fill="#FEF3C7"/>
      <circle cx="182" cy="134" r="25" fill="#FDE68A"/>
      <circle cx="182" cy="134" r="18" fill="#FCD34D"/>
      <text x="182" y="141" textAnchor="middle" fontSize="18" fontWeight="bold" fill="#78350F">₹</text>
      {/* Decorative leaves */}
      <ellipse cx="16" cy="162" rx="9" ry="14" fill="#22C55E" opacity="0.32" transform="rotate(-20 16 162)"/>
      <ellipse cx="5" cy="158" rx="7" ry="11" fill="#22C55E" opacity="0.22" transform="rotate(-36 5 158)"/>
      <line x1="8" y1="174" x2="138" y2="174" stroke="#D1D5DB" strokeWidth="1" strokeDasharray="3 2"/>
    </svg>
  );
}

function FastCardSVG() {
  return (
    <svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
      {/* Speed lines */}
      <line x1="4" y1="72" x2="52" y2="72" stroke="white" strokeWidth="2.5" opacity="0.22" strokeLinecap="round"/>
      <line x1="2" y1="90" x2="46" y2="90" stroke="white" strokeWidth="2" opacity="0.16" strokeLinecap="round"/>
      <line x1="4" y1="108" x2="50" y2="108" stroke="white" strokeWidth="2.5" opacity="0.22" strokeLinecap="round"/>
      {/* Clipboard body */}
      <rect x="52" y="14" width="96" height="114" rx="10" fill="white" opacity="0.96"/>
      <rect x="74" y="8" width="52" height="18" rx="8" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.5"/>
      <circle cx="100" cy="8" r="5.5" fill="#7C3AED"/>
      {/* Checklist row 1 – done */}
      <circle cx="68" cy="48" r="6.5" fill="#22C55E"/>
      <path d="M65 48L67.5 50.5L72.5 44.5" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      <rect x="80" y="42" width="58" height="12" rx="4" fill="#EDE9FE"/>
      <rect x="80" y="42" width="40" height="12" rx="4" fill="#22C55E" opacity="0.55"/>
      {/* Row 2 – done */}
      <circle cx="68" cy="70" r="6.5" fill="#22C55E"/>
      <path d="M65 70L67.5 72.5L72.5 66.5" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      <rect x="80" y="64" width="58" height="12" rx="4" fill="#EDE9FE"/>
      <rect x="80" y="64" width="48" height="12" rx="4" fill="#22C55E" opacity="0.55"/>
      {/* Row 3 – pending */}
      <circle cx="68" cy="92" r="6.5" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.2"/>
      <rect x="80" y="86" width="58" height="12" rx="4" fill="#EDE9FE"/>
      <rect x="80" y="86" width="26" height="12" rx="4" fill="#A78BFA" opacity="0.4"/>
      {/* Delivery boxes */}
      <rect x="112" y="106" width="54" height="44" rx="6" fill="#FEF3C7" stroke="#F59E0B" strokeWidth="1.5"/>
      <rect x="122" y="88" width="50" height="36" rx="6" fill="#FDE68A" stroke="#F59E0B" strokeWidth="1.5"/>
      <line x1="112" y1="128" x2="166" y2="128" stroke="#F59E0B" strokeWidth="1" opacity="0.45"/>
      <line x1="139" y1="106" x2="139" y2="150" stroke="#F59E0B" strokeWidth="1" opacity="0.45"/>
      <circle cx="147" cy="120" r="9" fill="#6330D6" opacity="0.82"/>
      <text x="147" y="123.5" textAnchor="middle" fontSize="9.5" fontWeight="bold" fill="white">N</text>
    </svg>
  );
}

function EasyCardSVG() {
  return (
    <svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
      {/* Laptop shell */}
      <rect x="14" y="22" width="162" height="108" rx="9" fill="#F1F5F9" stroke="#E2E8F0" strokeWidth="1.5"/>
      <rect x="22" y="30" width="146" height="92" rx="5" fill="white"/>
      {/* Bottom base */}
      <rect x="4" y="128" width="182" height="13" rx="6" fill="#E2E8F0"/>
      <rect x="72" y="141" width="46" height="6" rx="3" fill="#D1D5DB"/>
      {/* Screen rows */}
      <rect x="34" y="44" width="126" height="10" rx="3" fill="#EDE9FE"/>
      <rect x="34" y="44" width="90" height="10" rx="3" fill="#A78BFA" opacity="0.58"/>
      <rect x="34" y="62" width="126" height="10" rx="3" fill="#EDE9FE"/>
      <rect x="34" y="62" width="58" height="10" rx="3" fill="#6330D6" opacity="0.65"/>
      <rect x="34" y="80" width="126" height="10" rx="3" fill="#EDE9FE"/>
      <rect x="34" y="80" width="76" height="10" rx="3" fill="#A78BFA" opacity="0.45"/>
      <rect x="34" y="98" width="126" height="10" rx="3" fill="#EDE9FE"/>
      <rect x="34" y="98" width="44" height="10" rx="3" fill="#6330D6" opacity="0.38"/>
      {/* Big green check badge */}
      <circle cx="162" cy="108" r="36" fill="#DCFCE7" stroke="#22C55E" strokeWidth="2"/>
      <circle cx="162" cy="108" r="27" fill="#22C55E"/>
      <path d="M149 108L159 118L177 96" stroke="white" strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round"/>
      {/* Small plant */}
      <ellipse cx="20" cy="170" rx="8" ry="12" fill="#22C55E" opacity="0.32" transform="rotate(-15 20 170)"/>
      <ellipse cx="9" cy="172" rx="6" ry="9" fill="#22C55E" opacity="0.22" transform="rotate(-30 9 172)"/>
      <rect x="18" y="164" width="3" height="14" rx="1.5" fill="#16A34A" opacity="0.28"/>
    </svg>
  );
}

function SupportCardSVG() {
  return (
    <svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
      {/* Headset arc */}
      <path d="M42 108Q42 46 110 46Q178 46 178 108" stroke="#6330D6" strokeWidth="13" fill="none" strokeLinecap="round"/>
      {/* Left ear cup */}
      <rect x="24" y="96" width="34" height="56" rx="15" fill="#7C3AED"/>
      <rect x="30" y="102" width="22" height="44" rx="11" fill="#A78BFA"/>
      {/* Right ear cup */}
      <rect x="162" y="96" width="34" height="56" rx="15" fill="#7C3AED"/>
      <rect x="168" y="102" width="22" height="44" rx="11" fill="#A78BFA"/>
      {/* Mic arm */}
      <path d="M162 138Q186 138 190 164" stroke="#6330D6" strokeWidth="8" strokeLinecap="round" fill="none"/>
      <circle cx="190" cy="166" r="10" fill="#6330D6"/>
      {/* Chat bubble */}
      <rect x="58" y="50" width="104" height="56" rx="14" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.5"/>
      <path d="M86 106L80 120L104 106" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.5" strokeLinejoin="round"/>
      {/* 24/7 label in bubble */}
      <text x="110" y="87" textAnchor="middle" fontSize="26" fontWeight="900" fill="#6330D6">24/7</text>
      {/* Three chat dots below */}
      <circle cx="90" cy="160" r="7" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1"/>
      <circle cx="110" cy="160" r="7" fill="#8B5CF6" opacity="0.55"/>
      <circle cx="130" cy="160" r="7" fill="#6330D6" opacity="0.38"/>
    </svg>
  );
}

// ─── Section Data ──────────────────────────────────────────────────────────────

const FEATURES = [
  {
    title: "Direct Customer Access",
    descr: "Build direct relationships and trust with residents in your immediate vicinity.",
    Illus: DirectAccessSVG,
  },
  {
    title: "Become a Partner",
    descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs.",
    Illus: PartnerSVG,
  },
  {
    title: "Build Your Brand",
    descr: "Brand your business on Nearle and reach out to your community with ease.",
    Illus: BrandSVG,
  },
  {
    title: "Huge Opportunity",
    descr: "Unlock revenue opportunities and marketing strategies that will take your business further.",
    Illus: OpportunitySVG,
  },
  {
    title: "Delight Your Customers",
    descr: "Delight customers in the neighborhood with a personalized online shopping experience.",
    Illus: DelightSVG,
  },
  {
    title: "Unique Model",
    descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs.",
    Illus: UniqueModelSVG,
  },
  {
    title: "Reach Right Audience",
    descr: "We target your ideal customers — people in your neighborhood search for what you offer.",
    Illus: AudienceSVG,
  },
  {
    title: "Increase Your Customers",
    descr: "Increase walk-in and online customers by targeting local demand.",
    Illus: IncreaseSVG,
  },
];

const CARDS = [
  {
    title: "More",
    subtitle: "REVENUE FROM LOCAL REACH",
    bg: "bg-white",
    titleColor: "text-[#16001D]",
    subtitleColor: "text-[#6330D6]/55",
    iconName: "trending_up",
    iconBg: "bg-[#6330D6]/8 text-[#6330D6]",
    CardIllus: MoreCardSVG,
    stagger: false,
  },
  {
    title: "Fast",
    subtitle: "RELIABLE ORDER FULFILLMENT",
    bg: "bg-gradient-to-br from-[#5B21B6] to-[#6330D6]",
    titleColor: "text-white",
    subtitleColor: "text-white/65",
    iconName: "groups",
    iconBg: "bg-white/15 text-white",
    CardIllus: FastCardSVG,
    stagger: true,
  },
  {
    title: "Easy",
    subtitle: "SIMPLE TO START & MANAGE",
    bg: "bg-white",
    titleColor: "text-[#16001D]",
    subtitleColor: "text-[#6330D6]/55",
    iconName: "storefront",
    iconBg: "bg-[#6330D6]/8 text-[#6330D6]",
    CardIllus: EasyCardSVG,
    stagger: false,
  },
  {
    title: "24/7",
    subtitle: "MERCHANT SUPPORT",
    bg: "bg-white",
    titleColor: "text-[#16001D]",
    subtitleColor: "text-[#6330D6]/55",
    iconName: "support_agent",
    iconBg: "bg-[#6330D6]/8 text-[#6330D6]",
    CardIllus: SupportCardSVG,
    stagger: true,
  },
];

// ─── Main component ───────────────────────────────────────────────────────────

export function BusinessFeaturesGrid() {
  return (
    <section
      className="bg-[#FAF7FD] border-b border-[#6330D6]/10 overflow-hidden"
      style={{ paddingTop: "clamp(44px, 4.5vw, 64px)", paddingBottom: "clamp(44px, 4.5vw, 64px)" }}
    >
      {/* Centered page container */}
      <div
        className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
        style={{ maxWidth: 1800 }}
      >
        {/* Main two-column grid */}
        <div
          className="grid items-start xl:grid-cols-[minmax(0,1.58fr)_minmax(500px,0.92fr)]"
          style={{ gap: "clamp(48px, 5vw, 72px)" }}
        >

          {/* ── LEFT — clean text feature grid, no illustrations ── */}
          <motion.div
            variants={staggerContainer}
            initial="hidden"
            whileInView="visible"
            viewport={viewport}
          >
            {/* Badge + Heading */}
            <motion.div variants={fadeUp}>
              <span className="inline-flex items-center rounded-full bg-[#6330D6]/[0.08] px-3.5 py-1 text-xs font-black uppercase tracking-widest text-[#6330D6]">
                Our features
              </span>
              <h2
                className="font-display font-black text-[#16001D] mt-4"
                style={{
                  fontSize: "clamp(36px, 3.4vw, 60px)",
                  lineHeight: 1.08,
                  letterSpacing: "-0.04em",
                  maxWidth: 780,
                  marginBottom: 0,
                }}
              >
                Move Your Business Forward
              </h2>
              <p
                className="text-[#5E5866]"
                style={{ fontSize: 18, lineHeight: 1.65, maxWidth: 760, marginTop: 16, marginBottom: 36 }}
              >
                Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
              </p>
            </motion.div>

            {/* Feature list */}
            <motion.div
              className="grid grid-cols-1 md:grid-cols-2"
              style={{ columnGap: 48, rowGap: 32 }}
              variants={staggerSlow}
            >
              {FEATURES.map((feat) => (
                <motion.div
                  key={feat.title}
                  variants={fadeUp}
                  className="grid items-start"
                  style={{ gridTemplateColumns: "30px 1fr", columnGap: 16 }}
                >
                  <div
                    className="rounded-full bg-[#DCFCE7] flex items-center justify-center shrink-0"
                    style={{ width: 30, height: 30, marginTop: 3 }}
                  >
                    <svg viewBox="0 0 16 16" fill="none" style={{ width: 15, height: 15 }} aria-hidden="true">
                      <path d="M3.5 8.5L6.5 11.5L12.5 5" stroke="#16A34A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </div>
                  <div className="min-w-0">
                    <h4
                      className="font-display font-black text-[#16001D]"
                      style={{ fontSize: 18, lineHeight: 1.25, marginBottom: 8 }}
                    >
                      {feat.title}
                    </h4>
                    <p className="text-[#5E5866]" style={{ fontSize: 15, lineHeight: 1.55 }}>
                      {feat.descr}
                    </p>
                  </div>
                </motion.div>
              ))}
            </motion.div>
          </motion.div>

          {/* ── RIGHT — 2×2 feature benefit cards ─────── */}
          <motion.div
            className="self-start flex flex-col"
            style={{ gap: 28 }}
            variants={staggerSlow}
            initial="hidden"
            whileInView="visible"
            viewport={viewport}
          >
            <div className="grid grid-cols-2" style={{ gap: 28 }}>
              {CARDS.map((card) => {
                const { CardIllus } = card;
                return (
                  <motion.div
                    key={card.title}
                    variants={scaleIn}
                    className={`relative flex flex-col overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_28px_rgba(99,48,214,0.09)] ${card.bg}`}
                    style={{ borderRadius: 34, padding: 28, minHeight: 330 }}
                  >
                    <div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 ${card.iconBg}`}>
                      <MaterialIcon icon={card.iconName} size={18} />
                    </div>
                    <div
                      className="flex-1 flex items-center justify-center overflow-hidden"
                      style={{ margin: "8px 0" }}
                    >
                      <div className="w-full" style={{ height: 160 }}>
                        <CardIllus />
                      </div>
                    </div>
                    <div className="mt-auto shrink-0">
                      <p
                        className={`font-display font-black leading-none tracking-tight ${card.titleColor}`}
                        style={{ fontSize: "clamp(26px, 2.2vw, 42px)" }}
                      >
                        {card.title}
                      </p>
                      <p
                        className={`font-black tracking-widest uppercase ${card.subtitleColor}`}
                        style={{ fontSize: 10, marginTop: 6 }}
                      >
                        {card.subtitle}
                      </p>
                    </div>
                  </motion.div>
                );
              })}
            </div>
          </motion.div>

        </div>
      </div>
    </section>
  );
}
