'use client'

import React, { useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import { H2, P, CT, CP } from '@/components/Texts'
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'

const features = [
  {
    name: 'Choose Your Intelligence',
    description: 'Explore a library of leading LLMs and agentic functions. Pick the ones that fit your use case, from general assistants to specialized reasoning models.',
    icon: TbCircleNumber1Filled,
  },
  {
    name: 'Add Your Knowledge',
    description:
      'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
    icon: TbCircleNumber2Filled,
  },
  {
    name: 'Define Your Network',
    description:
      'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
    icon: TbCircleNumber3Filled,
  },
]

export function Steps() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });

  return (
    <section id="benefits" ref={ref} className="relative bg-cover bg-center py-32 -top-20 text-white" style={{ backgroundImage: "url('/images/deployment.webp')" }}>
      <div className="absolute inset-0 bg-black/60" />
      <div className="relative px-6 lg:px-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
          transition={{ duration: 0.8, delay: 0.1 }}
          className="mx-auto max-w-5xl lg:mx-0"
        >
          <H2 className="text-3xl font-medium tracking-tight" color="light">
            Deploy Scalable LLMs and AI Agents in Seconds
          </H2>
          <P className="mt-6 text-lg" color="light">
            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
          </P>
        </motion.div>
        <motion.ul
          initial={{ opacity: 0 }}
          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
          className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-3"
        >
          {features.map((feature, index) => (
            <motion.li
              key={feature.name}
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
              className="rounded-2xl border border-white/20 bg-black/20 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40"
            >
              <feature.icon className="h-8 w-8 mb-4 text-white" />
              <CT as="span" className="font-semibold" color="light">{feature.name}</CT>
              <CP className="mt-2 text-sm" color="light">{feature.description}</CP>
            </motion.li>
          ))}
        </motion.ul>
      </div>
    </section>
  )
}
