import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowRight, Shield, TrendingUp, Users, CheckCircle, Globe, Award, Target, Briefcase } from "lucide-react"

export default function ZarbLandingPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between">
            <div className="flex items-center space-x-4">
              <div className="text-2xl font-bold text-primary">ZARB</div>
            </div>
            <nav className="hidden md:flex items-center space-x-8">
              <a href="#about" className="text-muted-foreground hover:text-foreground transition-colors">
                About
              </a>
              <a href="#portfolio" className="text-muted-foreground hover:text-foreground transition-colors">
                Portfolio
              </a>
              <a href="#membership" className="text-muted-foreground hover:text-foreground transition-colors">
                Membership
              </a>
              <a href="#faq" className="text-muted-foreground hover:text-foreground transition-colors">
                FAQ
              </a>
            </nav>
            <Button className="bg-accent hover:bg-accent/90">Join ZARB</Button>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative py-20 lg:py-32 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-accent/5 to-background"></div>
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative">
          <div className="max-w-4xl mx-auto text-center">
            <Badge className="mb-6 bg-accent/10 text-accent border-accent/20">Exclusive Investment Community</Badge>
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-foreground mb-6 text-balance">ZARB</h1>
            <p className="text-xl md:text-2xl text-muted-foreground mb-8 text-pretty">
              An exclusive community for investors and entrepreneurs shaping the capital of the future
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-primary hover:bg-primary/90 text-lg px-8">
                Become a ZARB Member
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
              <Button size="lg" variant="outline" className="text-lg px-8 bg-transparent">
                Get the Presentation
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Core Value Proposition */}
      <section className="py-16 bg-muted/30">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <Card className="text-center">
              <CardContent className="pt-6">
                <TrendingUp className="h-12 w-12 text-accent mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-foreground mb-2">55%</h3>
                <p className="text-muted-foreground">Average Portfolio Return (2024)</p>
              </CardContent>
            </Card>
            <Card className="text-center">
              <CardContent className="pt-6">
                <Shield className="h-12 w-12 text-accent mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-foreground mb-2">$400M+</h3>
                <p className="text-muted-foreground">Community Capital</p>
              </CardContent>
            </Card>
            <Card className="text-center">
              <CardContent className="pt-6">
                <Users className="h-12 w-12 text-accent mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-foreground mb-2">$500K+</h3>
                <p className="text-muted-foreground">Minimum Investment</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* What Membership Gives You */}
      <section id="membership" className="py-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6 text-balance">
              What Membership in ZARB Gives You
            </h2>
            <p className="text-lg text-muted-foreground text-pretty">
              Build a diversified, profitable portfolio independent of health, business, or country
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
            <Card>
              <CardHeader>
                <Target className="h-8 w-8 text-accent mb-2" />
                <CardTitle>Exclusive Investment Deals</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">
                  Access to closed investment opportunities not available to the public
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <Shield className="h-8 w-8 text-accent mb-2" />
                <CardTitle>Full Deal Support</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">
                  Legal due diligence, equity structuring, and exit strategies at every stage
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <Users className="h-8 w-8 text-accent mb-2" />
                <CardTitle>Direct Networking</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">Co-investments and networking with community leaders and peers</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <Award className="h-8 w-8 text-accent mb-2" />
                <CardTitle>Proprietary Training</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">
                  Learn our exclusive portfolio investment methodology and strategies
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <Globe className="h-8 w-8 text-accent mb-2" />
                <CardTitle>Investment Events</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">
                  Participation in investment breakfasts and international meetings
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <Briefcase className="h-8 w-8 text-accent mb-2" />
                <CardTitle>Risk Management</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground">Expert analytics and comprehensive risk management support</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* The 4 Portfolio Strategy */}
      <section id="portfolio" className="py-20 bg-muted/30">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6 text-balance">
              The 4 Portfolio Strategy
            </h2>
            <p className="text-lg text-muted-foreground text-pretty">
              A comprehensive approach to wealth building across all risk levels
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
            <Card>
              <CardHeader>
                <Badge className="w-fit mb-2 bg-green-100 text-green-800 border-green-200">Conservative</Badge>
                <CardTitle className="text-lg">Capital Preservation</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">Gold, bonds, insurance products</p>
                <div className="text-2xl font-bold text-accent">Low Risk</div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <Badge className="w-fit mb-2 bg-blue-100 text-blue-800 border-blue-200">Balanced</Badge>
                <CardTitle className="text-lg">Steady Growth</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">Real estate, moderate-yield funds</p>
                <div className="text-2xl font-bold text-accent">Med Risk</div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <Badge className="w-fit mb-2 bg-orange-100 text-orange-800 border-orange-200">Growth</Badge>
                <CardTitle className="text-lg">Market Leaders</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">
                  Blue chips, emerging markets, high-potential public companies
                </p>
                <div className="text-2xl font-bold text-accent">High Risk</div>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <Badge className="w-fit mb-2 bg-red-100 text-red-800 border-red-200">Aggressive</Badge>
                <CardTitle className="text-lg">Venture Deals</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">AI, Web3, SaaS, EdTech, Late Seed, Series A</p>
                <div className="text-2xl font-bold text-accent">Max Risk</div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* How ZARB Works */}
      <section className="py-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6 text-balance">
                How ZARB Works (GP/LP Model)
              </h2>
              <p className="text-lg text-muted-foreground text-pretty">
                We provide tools, expertise, and exclusive deals — the allocation of capital always remains your
                decision
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="text-center">
                <div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <CheckCircle className="h-8 w-8 text-accent" />
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-2">No Hidden Fees</h3>
                <p className="text-muted-foreground">Transparent investment structure with no hidden investment fees</p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Users className="h-8 w-8 text-accent" />
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-2">Founder Alignment</h3>
                <p className="text-muted-foreground">
                  The founder invests alongside participants, sharing risks and validating project selection
                </p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Shield className="h-8 w-8 text-accent" />
                </div>
                <h3 className="text-xl font-semibold text-foreground mb-2">Your Control</h3>
                <p className="text-muted-foreground">
                  You maintain full control over your capital allocation decisions
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Key Facts */}
      <section className="py-20 bg-muted/30">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-12 text-balance">Key Facts About ZARB</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <Card>
                <CardContent className="pt-6">
                  <div className="text-3xl font-bold text-accent mb-2">30+</div>
                  <p className="text-muted-foreground">
                    Years of combined team experience in investments, finance, and law
                  </p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-3xl font-bold text-accent mb-2">$25M → $400M</div>
                  <p className="text-muted-foreground">Community capital growth in just 3 years</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-3xl font-bold text-accent mb-2">200M+</div>
                  <p className="text-muted-foreground">Minimum market size for all investment projects</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-3xl font-bold text-accent mb-2">AI, SaaS, Web3</div>
                  <p className="text-muted-foreground">Focus areas: AI, SaaS, EdTech, Web3, online gaming</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* How to Join */}
      <section className="py-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6 text-balance">How to Join ZARB</h2>
              <p className="text-lg text-muted-foreground text-pretty">
                A simple 5-step process to become part of our exclusive community
              </p>
            </div>
            <div className="space-y-6">
              {[
                {
                  step: 1,
                  title: "Apply on the website",
                  description: "Submit your initial application through our secure portal",
                },
                {
                  step: 2,
                  title: "Interview and capital confirmation",
                  description: "Complete our screening process and confirm $500,000 minimum investment capacity",
                },
                {
                  step: 3,
                  title: "Pay annual membership fee",
                  description: "Secure your membership with our annual fee structure",
                },
                {
                  step: 4,
                  title: "Get access to deals and community",
                  description: "Gain immediate access to exclusive deals, analytics, and our investor network",
                },
                {
                  step: 5,
                  title: "Grow with co-investments",
                  description: "Start investing alongside our community with full support and exclusive opportunities",
                },
              ].map((item) => (
                <Card key={item.step} className="p-6">
                  <div className="flex items-start space-x-4">
                    <div className="w-8 h-8 bg-accent text-white rounded-full flex items-center justify-center font-bold text-sm">
                      {item.step}
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-foreground mb-1">{item.title}</h3>
                      <p className="text-muted-foreground">{item.description}</p>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="py-20 bg-muted/30">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6 text-balance">
                Frequently Asked Questions
              </h2>
            </div>
            <div className="space-y-6">
              {[
                {
                  question: "What kind of returns can I expect?",
                  answer:
                    "Our community achieved an average portfolio return of 55% in 2024. However, past performance doesn't guarantee future results, and all investments carry risk.",
                },
                {
                  question: "How are startups selected?",
                  answer:
                    "We use a proprietary 7-step project selection system, focusing on markets with 200M+ users, proven Product-Market Fit, and strong growth potential in AI, SaaS, EdTech, and Web3.",
                },
                {
                  question: "Can I invest remotely?",
                  answer:
                    "Yes, our platform is designed for global investors. You can participate in deals, access analytics, and engage with the community entirely online.",
                },
                {
                  question: "Is there full deal support?",
                  answer:
                    "Absolutely. We provide comprehensive support including legal due diligence, equity structuring, risk management, and exit strategies for every investment opportunity.",
                },
              ].map((faq, index) => (
                <Card key={index}>
                  <CardHeader>
                    <CardTitle className="text-lg">{faq.question}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-muted-foreground">{faq.answer}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6 text-balance">
              Join the ZARB Investors' Network Today
            </h2>
            <p className="text-lg text-muted-foreground mb-8 text-pretty">
              Strong community, new partners, and exclusive investment opportunities await
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-primary hover:bg-primary/90 text-lg px-8">
                Become a ZARB Member
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
              <Button size="lg" variant="outline" className="text-lg px-8 bg-transparent">
                Get the Presentation
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-border bg-muted/30">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <div className="text-2xl font-bold text-primary mb-4">ZARB</div>
              <p className="text-muted-foreground text-sm">
                Exclusive investment community for high-net-worth individuals and entrepreneurs.
              </p>
            </div>
            <div>
              <h3 className="font-semibold text-foreground mb-4">Legal</h3>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>
                  <a href="#" className="hover:text-foreground transition-colors">
                    Privacy Policy
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-foreground transition-colors">
                    Terms of Service
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-foreground transition-colors">
                    Investment Disclaimer
                  </a>
                </li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold text-foreground mb-4">Contact</h3>
              <ul className="space-y-2 text-sm text-muted-foreground">
                <li>hello@zarb.com</li>
                <li>+1 (555) 123-4567</li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold text-foreground mb-4">Follow Us</h3>
              <div className="flex space-x-4">
                <a href="#" className="text-muted-foreground hover:text-accent transition-colors">
                  LinkedIn
                </a>
                <a href="#" className="text-muted-foreground hover:text-accent transition-colors">
                  Twitter
                </a>
              </div>
            </div>
          </div>
          <div className="border-t border-border mt-8 pt-8 text-center text-sm text-muted-foreground">
            <p>&copy; 2024 ZARB. All rights reserved. Investment opportunities are limited to accredited investors.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}