Benefits Features

Please build a React component that perfectly replicates a specific "Benefits" section. Use Tailwind CSS for styling, motion/react for animations, and lucide-react for icons.

1. Typography and Global Styles

• Use the Inter font everywhere (import via Google Fonts).
• The section background should be #F4F6FA and the base text color #111.
• Heavily utilize tracking-tight for headings and tracking-wide for small eyebrow tags.

2. Main Wrapper Layout

• Create a <section> with py-20 lg:py-32 bg-[#F4F6FA] overflow-hidden.
• Inside, create a container with w-[90%] md:w-[85%] max-w-[1600px] mx-auto.
• Use a 12-column grid layout on large screens: grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-12 items-start.

3. Left Column (Takes up lg:col-span-5)

This column should contain staggered elements wrapped in motion.div. Use initial={{ opacity: 0, y: 20 }}, whileInView={{ opacity: 1, y: 0 }}, viewport={{ once: true, amount: 0.3 }} with a duration: 0.6 and incrementing delays.

1. Eyebrow Tag: A flex container with a solid blue dot (w-2 h-2 rounded-full bg-[#3b82f6]) and the text "The benefit" (text-[15px] font-medium tracking-wide).
2. Main Heading:
   • Text size: text-[clamp(1.7rem,5.5vw,4.5rem)] leading-[1.05] tracking-tight font-medium mb-8.
   • The first line is "Explore [INLINE_IMAGE] our"
   • The inline image must use exactly this URL: https://res.cloudinary.com/dsdhxhhqh/image/upload/v1777202844/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82_26-04-2026_134245-removebg-preview_jju5ww.png. Style it as an inline block: w-[1.2em] scale-[1.15] h-[0.8em] object-contain rounded-full align-middle mx-[-0.1em] -translate-y-[0.1em].
   • The second line is "flexible of activity."
3. Pills Row (Flex wrap, gap 3, mb-12): Two white rounded-full pills with slight shadows (shadow-[0_2px_8px_rgba(0,0,0,0.04)]), padding px-5 py-2.5, flex items centered.
   • First Pill: Contains a <Soup className="w-[18px] h-[18px] text-gray-700"/> and text "Eating After the Game".
   • Second Pill: Contains a <Shirt className="w-[18px] h-[18px] text-gray-700"/> and text "Game Jersey".
4. Accordion/Tabs List:
   • Manage state for activeTab (defaulting to 'connections').
   • Create two tabs: "Connections" and "Sport Pacakge" (keep exact spelling).
   • Wrapper styling for each tab: rounded-[24px] overflow-hidden transition-all duration-300.
   • State styling: If active, apply bg-white shadow-[0_4px_24px_rgba(0,0,0,0.03)]. If inactive, apply hover:bg-black/5 cursor-pointer.
   • In the tab header (padding p-7 md:p-8), map the title (text-[22px] font-medium). On the right, include an animated icon toggle. Use framer-motion to cross-fade and rotate between a <Plus /> and <Minus /> icon depending on whether the tab is active.
   • Add a smooth expand/collapse AnimatePresence revealing content below the header.
   • Connections content: "Built to connect — with people, purpose, and the momentum that moves you forward."
   • Sport Package content: "A comprehensive collection of sporting goods, tailored for maximum performance and everyday agility."

4. Right Column (Takes up lg:col-span-7 h-full)

Fade this entire side in from the right (x: 20 to 0).

• Container: bg-white rounded-[2.5rem] p-6 md:p-8 xl:p-12 shadow-[0_8px_30px_rgba(0,0,0,0.04)]. Use flex flex-col xl:flex-row gap-8 h-full min-h-[560px].

Left Side of Card (Text & Button):

• Flex column, flex-1, justify-between.
• Top section: A flex label <Target className="w-5 h-5 text-[#ea580c]"/> with text EST — 1997 (font-bold text-[15px] tracking-wide). Below it, paragraph text: "Smart features designed to move with you — fast, flexible, and built for everyday action." (max-w-[280px] text-gray-500 text-[18px] leading-[1.6]).
• Bottom section: A stacked heading: "Visionary" over "Precision Play" (text-[clamp(1.7rem,5vw,46px)] leading-[1.1] font-medium tracking-tight mb-8).
• Button: 100% width on mobile, rounded-full bg-black text-white px-7 py-4 flex items-center justify-between text-[15px] font-medium hover:bg-gray-800. Text "Join Now!" with an <ArrowRight /> icon.

Right Side of Card (Media and Floating Badges):

• Container: w-full xl:w-[320px] 2xl:w-[410px] h-[360px] md:h-[450px] xl:h-auto rounded-[2.5rem] relative overflow-hidden flex-shrink-0.
• The Video Layer: Use a <video> tag filling exactly the absolute shape (absolute inset-0 w-full h-full object-cover z-0). Props: autoPlay loop muted playsInline.
  • SRC MUST BE EXACTLY: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260426_105815_d66e9c4c-a1f8-4011-9ee5-f0cace24e642.mp4
• Top-Right Pill (Absolute Z-10): Positioned top-6 right-6 lg:top-8 lg:right-8. bg-white text-[#111] px-5 py-2.5 rounded-full flex shadow-md gap-2.5 text-[15px] font-medium. Contains a <Gift className="w-5 h-5 text-gray-700" /> and the text "February Sale". Pop this in with framer motion scale.
• Bottom-Left Card (Absolute Z-10): Positioned bottom-6 left-6 lg:bottom-8 lg:left-8. bg-white text-[#111] rounded-[28px] overflow-hidden w-[190px] shadow-lg. Pop this in with x: -20 to 0.
  • Counter interaction & logic: Attach onViewportEnter={handleStartCount} to this motion div. State countValue should animate from 0 to 86 seamlessly over 2000 duration using performance.now() in requestAnimationFrame and an ease-out calculation.
  • Top half (white): Padding pt-6 px-6 pb-4. Contains text "Tenis Outdor" in text-gray-600 text-[15px] font-medium mb-1.5. Below it, map the counter: {countValue}% styled text-[42px] font-medium tracking-tight leading-none.
  • Bottom half (blue): bg-[#3585A5] text-white px-6 py-4 flex items-center gap-2.5. Contains <Zap className="w-5 h-5 fill-white text-white"/> and text "Boost" (font-medium text-[16px]).