import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export function MarketingUI() {
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold mb-4">Marketing Components</h2>
        <p className="text-muted-foreground mb-6">Showcase your product with these customized marketing components</p>
      </div>

      {/* Hero Section */}
      <div className="rounded-lg overflow-hidden border bg-card text-card-foreground">
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-r from-primary/20 to-primary/5 z-10"></div>
          <img src="/placeholder.svg?key=um59c" alt="Hero background" className="w-full h-64 object-cover" />
          <div className="absolute inset-0 flex items-center z-20 p-8">
            <div className="max-w-md">
              <h1 className="text-4xl font-bold tracking-tight text-white mb-4">Build beautiful interfaces</h1>
              <p className="text-lg text-white/90 mb-6">
                Our design system helps you create consistent, beautiful user experiences across all your products.
              </p>
              <div className="flex flex-wrap gap-4">
                <Button size="lg">Get Started</Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="bg-white/10 text-white border-white/20 hover:bg-white/20"
                >
                  Learn More
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Feature Cards */}
      <div className="grid gap-6 md:grid-cols-3">
        {[
          {
            title: "Customizable",
            description: "Tailor the components to match your brand identity with ease.",
            icon: "✨",
          },
          {
            title: "Responsive",
            description: "All components are fully responsive and work on any device.",
            icon: "📱",
          },
          {
            title: "Accessible",
            description: "Built with accessibility in mind to ensure everyone can use your product.",
            icon: "♿",
          },
        ].map((feature, index) => (
          <Card key={index}>
            <CardHeader>
              <div className="text-3xl mb-2">{feature.icon}</div>
              <CardTitle>{feature.title}</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">{feature.description}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Testimonials */}
      <div className="rounded-lg border bg-card text-card-foreground p-8 mt-8">
        <h2 className="text-2xl font-bold text-center mb-8">What Our Customers Say</h2>
        <div className="grid gap-6 md:grid-cols-2">
          {[
            {
              quote:
                "This design system has transformed how we build our products. The consistency and quality are outstanding.",
              author: "Sarah Johnson",
              role: "Product Manager",
              avatar: "/woman-portrait.png",
            },
            {
              quote:
                "The components are not only beautiful but also incredibly easy to customize. It's saved us countless hours of development time.",
              author: "Michael Chen",
              role: "Lead Developer",
              avatar: "/thoughtful-man-portrait.png",
            },
          ].map((testimonial, index) => (
            <Card key={index} className="border-0 shadow-none">
              <CardContent className="pt-6">
                <p className="italic text-muted-foreground mb-4">"{testimonial.quote}"</p>
                <div className="flex items-center gap-4">
                  <Avatar>
                    <AvatarImage src={testimonial.avatar || "/placeholder.svg"} />
                    <AvatarFallback>
                      {testimonial.author
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium">{testimonial.author}</p>
                    <p className="text-sm text-muted-foreground">{testimonial.role}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Pricing Section */}
      <div className="space-y-6">
        <h2 className="text-2xl font-bold text-center">Simple, Transparent Pricing</h2>
        <p className="text-muted-foreground text-center max-w-md mx-auto">
          Choose the plan that's right for you and start building better products today.
        </p>
        <div className="grid gap-6 md:grid-cols-3 mt-8">
          {[
            {
              title: "Starter",
              price: "$9",
              description: "Perfect for small projects and individuals",
              features: ["Up to 5 projects", "Basic components", "Community support"],
              cta: "Get Started",
              popular: false,
            },
            {
              title: "Pro",
              price: "$29",
              description: "Ideal for growing teams and businesses",
              features: ["Unlimited projects", "Advanced components", "Priority support", "Custom theming"],
              cta: "Get Started",
              popular: true,
            },
            {
              title: "Enterprise",
              price: "Custom",
              description: "For large organizations with specific needs",
              features: ["Unlimited everything", "Dedicated support", "Custom development", "SLA guarantees"],
              cta: "Contact Us",
              popular: false,
            },
          ].map((plan, index) => (
            <Card key={index} className={plan.popular ? "border-primary" : ""}>
              {plan.popular && (
                <div className="absolute top-0 right-0 transform translate-x-2 -translate-y-2">
                  <Badge className="bg-primary text-primary-foreground">Popular</Badge>
                </div>
              )}
              <CardHeader>
                <CardTitle>{plan.title}</CardTitle>
                <CardDescription>{plan.description}</CardDescription>
                <div className="mt-4">
                  <span className="text-4xl font-bold">{plan.price}</span>
                  {plan.price !== "Custom" && <span className="text-muted-foreground">/month</span>}
                </div>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2">
                  {plan.features.map((feature, i) => (
                    <li key={i} className="flex items-center">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="mr-2 h-4 w-4 text-primary"
                      >
                        <polyline points="20 6 9 17 4 12"></polyline>
                      </svg>
                      {feature}
                    </li>
                  ))}
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  className={plan.popular ? "w-full bg-primary" : "w-full"}
                  variant={plan.popular ? "default" : "outline"}
                >
                  {plan.cta}
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}