import { Button } from "@/components/ui/button"
import { DollarSign, TrendingUp, Zap, Globe, ArrowRight, BarChart3 } from "lucide-react"

const MonetizeSection = () => {
  return (
    <section id="monetize" className="py-24 relative overflow-hidden">
      {/* Background grid pattern */}
      <div className="absolute inset-0 grid-glow opacity-20"></div>
      
      <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">
            <DollarSign className="h-4 w-4 text-yellow-500" />
            <span className="text-sm font-medium">Revenue Streams</span>
          </div>
          
          <h2 className="text-4xl md:text-5xl mb-6">
            <span className="text-foreground/70">Monetize</span> Your Creations
          </h2>
          
          <p className="text-xl text-foreground/70 max-w-3xl mx-auto leading-relaxed">
            Turn your MCPs into profitable APIs. Create disposable apps that live and die per use. 
            Build the future of AI-powered commerce.
          </p>
        </div>

        {/* Revenue Models */}
        <div className="grid md:grid-cols-3 gap-8 mb-16">
          <div className="glassmorphic rounded-2xl p-8 hover-lift">
            <div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
              <Zap className="h-6 w-6 text-foreground" />
            </div>
            <h3 className="text-xl mb-4">Per-Use Pricing</h3>
            <p className="text-sm text-foreground/70 mb-6">
              Charge users each time they access your MCP. Perfect for high-value, specialized tools.
            </p>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-foreground/60">Typical range:</span>
                <span className="font-semibold">$0.01 - $50</span>
              </div>
              <div className="flex justify-between">
                <span className="text-foreground/60">Revenue share:</span>
                <span className="font-semibold text-foreground">85% to you</span>
              </div>
            </div>
          </div>

          <div className="glassmorphic rounded-2xl p-8 hover-lift">
            <div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
              <BarChart3 className="h-6 w-6 text-foreground" />
            </div>
            <h3 className="text-xl mb-4">Subscription Series</h3>
            <p className="text-sm text-foreground/70 mb-6">
              Monthly recurring revenue from your Everyday Series. Build loyal audiences that pay regularly.
            </p>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-foreground/60">Monthly pricing:</span>
                <span className="font-semibold">$2.99 - $99</span>
              </div>
              <div className="flex justify-between">
                <span className="text-foreground/60">Revenue share:</span>
                <span className="font-semibold text-foreground">90% to you</span>
              </div>
            </div>
          </div>

          <div className="glassmorphic rounded-2xl p-8 hover-lift">
            <div className="w-12 h-12 bg-foreground/10 rounded-xl flex items-center justify-center mb-6">
              <Globe className="h-6 w-6 text-foreground" />
            </div>
            <h3 className="text-xl mb-4">Disposable Apps</h3>
            <p className="text-sm text-foreground/70 mb-6">
              Lightweight apps that serve one purpose, then disappear. Zero maintenance, pure profit.
            </p>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-foreground/60">App lifespan:</span>
                <span className="font-semibold">1 use - 24 hours</span>
              </div>
              <div className="flex justify-between">
                <span className="text-foreground/60">Revenue share:</span>
                <span className="font-semibold text-foreground">85% to you</span>
              </div>
            </div>
          </div>
        </div>

        {/* Network Effect Visualization */}
        <div className="glassmorphic rounded-3xl p-8 mb-16">
          <h3 className="text-2xl text-center mb-8">The MCP Network Effect</h3>
          
          <div className="relative max-w-4xl mx-auto">
            {/* Central hub */}
            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-foreground/10 rounded-full flex items-center justify-center z-10">
              <span className="text-foreground font-bold text-sm">YOU</span>
            </div>

            {/* Connection lines */}
            <div className="absolute inset-0 flex items-center justify-center z-1">
              <div className="w-96 h-96 relative z-1">
                {/* Animated connection lines */}
                {[0, 45, 90, 135, 180, 225, 270, 315].map((angle, index) => (
                  <div
                    key={angle}
                    className="absolute w-40 h-0.5 bg-gradient-to-r from-foreground/20 to-transparent origin-left"
                    style={{
                      transform: `rotate(${angle}deg)`,
                      top: '50%',
                      left: '50%',
                      animationDelay: `${index * 0.2}s`
                    }}
                  ></div>
                ))}
              </div>
            </div>

            {/* Network nodes */}
            <div className="grid grid-cols-4 gap-8 items-center justify-items-center py-8">
              <div className="glassmorphic rounded-xl p-4 text-center hover-lift">
                <div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
                  <Zap className="h-4 w-4 text-foreground" />
                </div>
                <div className="text-sm font-medium">AI Agents</div>
                <div className="text-xs text-foreground/60">+$2.4k/mo</div>
              </div>
              
              <div className="glassmorphic rounded-xl p-4 text-center hover-lift">
                <div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
                  <Globe className="h-4 w-4 text-foreground" />
                </div>
                <div className="text-sm font-medium">Users</div>
                <div className="text-xs text-foreground/60">8.2k active</div>
              </div>
              
              <div className="glassmorphic rounded-xl p-4 text-center hover-lift">
                <div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
                  <BarChart3 className="h-4 w-4 text-foreground" />
                </div>
                <div className="text-sm font-medium">Apps</div>
                <div className="text-xs text-foreground/60">150+ deployed</div>
              </div>
              
              <div className="glassmorphic rounded-xl p-4 text-center hover-lift">
                <div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
                  <DollarSign className="h-4 w-4 text-foreground" />
                </div>
                <div className="text-sm font-medium">Revenue</div>
                <div className="text-xs text-foreground/60">$45k total</div>
              </div>
              
              <div className="glassmorphic rounded-xl p-4 text-center hover-lift">
                <div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
                  <TrendingUp className="h-4 w-4 text-foreground" />
                </div>
                <div className="text-sm font-medium">APIs</div>
                <div className="text-xs text-foreground/60">24/7 uptime</div>
              </div>
              
              <div className="glassmorphic rounded-xl p-4 text-center hover-lift">
                <div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
                  <ArrowRight className="h-4 w-4 text-foreground" />
                </div>
                <div className="text-sm font-medium">Analytics</div>
                <div className="text-xs text-foreground/60">Real-time</div>
              </div>
              
              <div className="glassmorphic rounded-xl p-4 text-center hover-lift">
                <div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
                  <Globe className="h-4 w-4 text-foreground" />
                </div>
                <div className="text-sm font-medium">Global CDN</div>
                <div className="text-xs text-foreground/60">Edge compute</div>
              </div>
              
              <div className="glassmorphic rounded-xl p-4 text-center hover-lift">
                <div className="w-8 h-8 bg-foreground/10 rounded-full flex items-center justify-center mx-auto mb-2">
                  <ArrowRight className="h-4 w-4 text-foreground" />
                </div>
                <div className="text-sm font-medium">Scaling</div>
                <div className="text-xs text-foreground/60">Auto-scale</div>
              </div>
            </div>
          </div>
          
          <p className="text-center text-foreground/70 mt-8 max-w-2xl mx-auto">
            Your MCPs become nodes in a global AI network. Every connection multiplies your earning potential.
            Build once, earn everywhere.
          </p>
        </div>

        <div className="text-center">
          <Button
            size="lg"
            className="bg-foreground text-background hover:bg-foreground/90 px-8 py-4 text-lg font-semibold hover-lift group"
          >
            <TrendingUp className="h-5 w-5 mr-2 text-green-300 dark:text-green-700" />
            Start Earning Today
            <ArrowRight className="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform" />
          </Button>
        </div>
      </div>
    </section>
  )
}

export default MonetizeSection
