'use client'

import { Button } from '@/components/Button'
import { Eyebrow, H3, P } from '@/components/Texts'

export function NodeHero() {
  return (
    <div className="">
      {/* Boxed container */}
      <div
        className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden"
      >
        {/* Inner padding */}
        <div className="px-6 py-16 lg:py-16">
          <div className="max-w-3xl mx-auto text-center">
            <Eyebrow>MYCELIUM NODES</Eyebrow>
            <H3 as="h1" className="mt-4">
              Host a Node. Power the Network.
            </H3>
            <P className="mt-6 text-gray-800">
              The Mycelium Network runs on nodes hosted by people and organizations around the world. Each node adds capacity, resilience, and sovereignty, expanding a global network for private, distributed compute and AI. 
            </P>
            
            <div className="mt-10 flex items-center justify-center gap-x-6">
              <Button href="/host" variant="solid" color="cyan">
                Host a Node
              </Button>
              <Button href="#" variant="outline">
                Learn More
              </Button>
            </div>
          </div>
        </div>
      </div>
      {/* ✅ Bottom horizontal line with spacing */}
      <div className="w-full border-b  border-gray-100" />
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
    </div>
  )
}