import { Button } from "@/components/ui/button"
import { Code, Cpu, DollarSign, Zap, ArrowRight, Box } from "lucide-react"

const MCPSection = () => {
  return (
    <section id="mcps" className="relative h-full pt-20 flex mt-10 items-center justify-center overflow-hidden hero-gradient bg-transparent grain">
      
      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <div className="inline-flex items-center space-x-2 border border-yellow-500/50 glassmorphic rounded-full px-4 py-2 mb-6">
            <Box className="h-4 w-4 text-yellow-500" />
            <span className="text-sm font-medium">Monetizable Code Packages</span>
          </div>
          
          <h2 className="text-2xl md:text-3xl mb-6">
            What is an <span className="text-foreground/70">MCP</span>?
          </h2>
          
          <p className="text-lg text-foreground/70 max-w-3xl mx-auto leading-relaxed">
            MCP = a wrapper on an API that works with LLMs. Think of it as a packaged AI behavior 
            ready to be deployed or sold. No complex infrastructure needed.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
          {/* Simple to Create */}
          <div className="glassmorphic rounded-2xl p-6 hover:scale-105 border border-foreground/20 transition-transform duration-300">
            <div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
              <Code className="h-6 w-6 text-foreground" />
            </div>
            <h3 className="text-xl font-semibold mb-4">Simple to Create</h3>
            <p className="text-sm text-foreground/70 mb-2">
              Use our visual builder or write custom code. MCPs wrap your logic into LLM-compatible packages.
            </p>
            <div className="glassmorphic bg-foreground/10 rounded-lg p-4 text-sm font-mono">
              <span className="text-green-800">// Example MCP</span><br/>
              <span className="text-red-500">function</span> <span className="text-foreground/80">weatherBot</span>()<br/>
              <span className="text-foreground/60">→ Returns: Live weather data</span>
            </div>
          </div>

          {/* Easy to Deploy */}
          <div className="glassmorphic rounded-2xl p-6 hover:scale-105 border border-foreground/20 transition-transform duration-300">
            <div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
              <Cpu className="h-6 w-6 text-foreground" />
            </div>
            <h3 className="text-xl font-semibold mb-4">Easy to Deploy</h3>
            <p className="text-sm text-foreground/70 mb-6">
              One-click deployment to our global network. Your MCP becomes instantly available to LLMs worldwide.
            </p>
            <div className="flex items-center space-x-2 text-xs">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
              <span className="text-foreground/70">Status: Live & Earning</span>
            </div>
          </div>

          {/* Ready to Monetize */}
          <div className="glassmorphic rounded-2xl p-6 hover:scale-105 border border-foreground/20 transition-transform duration-300">
            <div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
              <DollarSign className="h-6 w-6 text-foreground" />
            </div>
            <h3 className="text-xl font-semibold mb-4">Ready to Monetize</h3>
            <p className="text-sm text-foreground/70 mb-6">
              Set your pricing, track usage, and get paid automatically. Turn your AI ideas into recurring revenue.
            </p>
            <div className="space-y-2 text-xs mx-6 ml-auto">
              <div className="flex justify-between">
                <span className="text-foreground/70">Per-use pricing:</span>
                <span className="text-yellow-500">$0.01 - $10.00</span>
              </div>
              <div className="flex justify-between">
                <span className="text-foreground/70">Monthly revenue:</span>
                <span className="text-yellow-500">$500 - $5000+</span>
              </div>
            </div>
          </div>
        </div>

        {/* Example MCPs */}
        <div className="glassmorphic rounded-2xl p-8 mb-12">
          <h3 className="text-2xl mb-6 text-center">Popular MCP Examples</h3>
          <div className="grid md:grid-cols-3 gap-6">
            <div className="text-center p-6 rounded-xl bg-foreground/5">
              <div className="w-12 h-12 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-3">
                <Code className="h-6 w-6 text-foreground" />
              </div>
              <h4 className="font-semibold mb-2">Code Generator</h4>
              <p className="text-sm text-foreground/70">Generates clean, documented code in any language</p>
              <div className="text-xs text-foreground/60 mt-2">$2.50/use • 1.2k uses this month</div>
            </div>
            
            <div className="text-center p-6 rounded-xl bg-foreground/5">
              <div className="w-12 h-12 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-3">
                <Cpu className="h-6 w-6 text-foreground" />
              </div>
              <h4 className="font-semibold mb-2">Data Analyzer</h4>
              <p className="text-sm text-foreground/70">Converts raw data into actionable insights</p>
              <div className="text-xs text-foreground/60 mt-2">$5.00/use • 800 uses this month</div>
            </div>
            
            <div className="text-center p-6 rounded-xl bg-foreground/5">
              <div className="w-12 h-12 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-3">
                <DollarSign className="h-6 w-6 text-foreground" />
              </div>
              <h4 className="font-semibold mb-2">Content Creator</h4>
              <p className="text-sm text-foreground/70">Writes engaging content for any platform</p>
              <div className="text-xs text-foreground/60 mt-2">$1.00/use • 2.1k uses this month</div>
            </div>
          </div>
        </div>

        <div className="text-center">
          <Button
            size="lg"
            className="bg-foreground text-background hover:bg-foreground/90 px-8 py-4 text-md font-normal btn-hover-scale group"
          >
            <Zap className="h-5 w-5 mr-2" />
            Create Your First MCP
            <ArrowRight className="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" />
          </Button>
        </div>
      </div>
    </section>
  )
}

export default MCPSection