www_projectmycelium_com/src/pages/nodes/NodeBenefits.tsx

"use client";

import { motion } from "framer-motion";
import { H3, P, Eyebrow, CT, CP } from "@/components/Texts";
import type { ComponentPropsWithoutRef } from "react";

type CircleIconProps = ComponentPropsWithoutRef<"svg">;

const CircleNumber1Icon = (props: CircleIconProps) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm.994 5.886c-.83-.777-1.755-.394-1.701.404l-.006.114v8l.007.117a1 1 0 001.986 0l.007-.117V9l-.006-.114z" />
  </svg>
);

const CircleNumber2Icon = (props: CircleIconProps) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M12 2a10 10 0 110 20 10 10 0 010-20zm1 5h-3a1 1 0 100 2h3v2h-2a2 2 0 00-2 2v2a2 2 0 002 2h3a1 1 0 100-2h-3v-2h2a2 2 0 002-2V9a2 2 0 00-2-2z" />
  </svg>
);

const CircleNumber3Icon = (props: CircleIconProps) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M12 2a10 10 0 110 20 10 10 0 010-20zm1 5h-2a2 2 0 00-2 2 1 1 0 102 0h2v2h-2c-1.39 0-2.103 1.67-1.11 2.588l.11.098h3v2h-2a1 1 0 100 2h2a2 2 0 002-2v-2a2 2 0 00-.25-.97l-.068-.115.068-.115A1.99 1.99 0 0015 11V9a2 2 0 00-2-2z" />
  </svg>
);

const features = [
  {
    name: "Build Your Private Setup",
    description:
      "Run a node in your home or office and use it to host private workloads, models, and data. Experiment, deploy, or tinker locally, then offset your costs by sharing unused capacity with the network.",
    icon: CircleNumber1Icon,
  },
  {
    name: "Strengthen the Network",
    description:
      "Every node adds bandwidth, compute, and resilience to the Mycelium Grid. Together, hosts form the physical foundation for decentralized communication, storage, and AI.",
    icon: CircleNumber2Icon,
  },
  {
    name: "Earn Rewards",
    description:
      "Share storage, CPU, GPU, and bandwidth. When your resources are used, you earn network rewards based on real demand.",
    icon: CircleNumber3Icon,
  },
];

export function NodeBenefits() {
  return (
    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
      {/* Top spacing + border */}
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
      <div className="w-full border-t border-l border-r border-gray-800" />

      <div className="relative px-6 lg:px-6 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
          className="mx-auto max-w-5xl text-center"
        >
          <Eyebrow color="accent">Host</Eyebrow>
          <H3
            className="mt-2 text-white"
          >
            Benefits of Hosting Nodes
          </H3>

          <P className="mt-6 text-gray-200">
            Hosting a node gives you private compute, contributes to the global
            Mycelium infrastructure, and unlocks ways to earn from real network
            usage, all while keeping sovereignty and control.
          </P>
        </motion.div>

        {/* Features */}
        <motion.ul
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true, amount: 0.2 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="mx-auto 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-12 lg:mt-12 lg:max-w-7xl lg:grid-cols-3"
        >
          {features.map((feature, index) => (
            <motion.li
              key={feature.name}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, amount: 0.2 }}
              transition={{
                duration: 0.45,
                delay: 0.3 + index * 0.15,
                ease: "easeOut",
              }}
              className="rounded-md border border-gray-300 bg-white/5 lg:p-8 p-6 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
            >
              <feature.icon className="mb-4 h-8 w-8 text-white" />
              <CT as="span" className="text-left font-semibold" color="light">
                {feature.name}
              </CT>
              <CP className="mt-2 text-left font-light text-gray-300">
                {feature.description}
              </CP>
            </motion.li>
          ))}
        </motion.ul>
      </div>
{/* Bottom spacing line */}
      <div className="w-full border-b border-gray-800 bg-[#121212]" />
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
    </section>
    
  );
}