import { PageHero } from "@/components/page-hero"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { Palette, MessageSquare, CheckCircle, Users } from "lucide-react"

export default function CustomCardsPage() {
  const features = [
    {
      icon: Palette,
      title: "Custom Design",
      description: "Our talented artists will work with you to create the perfect design",
    },
    {
      icon: MessageSquare,
      title: "Your Message",
      description: "Choose your font and style for a personalized message",
    },
    {
      icon: CheckCircle,
      title: "Digital Proof",
      description: "Review and approve before we send to manufacture",
    },
    {
      icon: Users,
      title: "Bulk Orders",
      description: "Wholesale discounts available for orders of 100+ cards",
    },
  ]

  return (
    <>
      <PageHero title="Custom Cards" breadcrumbs={[{ label: "Home", href: "/" }]} />

      <main className="flex-1">
        <section className="py-16">
          <div className="container mx-auto px-4 max-w-4xl">
            <div className="prose prose-lg max-w-none">
              <p className="text-lg leading-relaxed mb-6">
                If you are interested in customizing any of our cards for your personal events, our talented artists are
                happy to take on any challenge.
              </p>

              <p className="text-lg leading-relaxed mb-6">
                Whether you want a card for that special someone or a personalized invitation to your birthday, baby
                shower, graduation ceremony, or any other occasion to which you might invite your friends and family, we
                can accommodate any of your needs!
              </p>

              <p className="text-lg leading-relaxed mb-6">
                Our design staff will work with you to provide your customized message in a font and style of your
                choosing, which will be confirmed by digital proof before being sent to manufacture.
              </p>

              <p className="text-lg leading-relaxed mb-8">
                Due to set up and design costs, minimum orders of 50 cards must be placed for custom orders or
                additional design fees apply. Wholesale discounts apply on orders of 100 cards or more, ask for more
                details!
              </p>

              <div className="text-center">
                <Button size="lg" asChild>
                  <Link href="/contact">Ask Us</Link>
                </Button>
              </div>
            </div>
          </div>
        </section>

        {/* Features Grid */}
        <section className="py-16 bg-muted">
          <div className="container mx-auto px-4">
            <h3 className="text-3xl font-bold text-center mb-12">How Custom Cards Work</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {features.map((feature) => (
                <Card key={feature.title}>
                  <CardContent className="p-6 text-center">
                    <div className="bg-primary text-primary-foreground w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                      <feature.icon className="h-8 w-8" />
                    </div>
                    <h4 className="text-xl font-semibold mb-2">{feature.title}</h4>
                    <p className="text-muted-foreground text-sm">{feature.description}</p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Occasions Section */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <h3 className="text-3xl font-bold text-center mb-8">Perfect for Any Occasion</h3>
            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 max-w-5xl mx-auto">
              {[
                "Weddings",
                "Birthdays",
                "Baby Showers",
                "Graduations",
                "Anniversaries",
                "Corporate Events",
                "Holidays",
                "Thank You Cards",
                "Invitations",
                "Save the Dates",
                "Baptisms",
                "Realtors", // Changed from "Real Estate" to "Realtors"
              ].map((occasion) => (
                <div
                  key={occasion}
                  className="bg-card border rounded-lg p-4 text-center hover:shadow-md transition-shadow"
                >
                  <p className="font-medium text-sm">{occasion}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-16 bg-secondary text-secondary-foreground">
          <div className="container mx-auto px-4 text-center">
            <h3 className="text-3xl font-bold mb-4">Ready to Create Your Custom Card?</h3>
            <p className="text-lg mb-8 max-w-2xl mx-auto opacity-90">
              Contact us today to discuss your custom card needs and get started on your unique design
            </p>
            <div className="flex gap-4 justify-center flex-wrap">
              <Button
                size="lg"
                variant="outline"
                asChild
                className="bg-secondary-foreground/10 hover:bg-secondary-foreground/20 border-secondary-foreground/20"
              >
                <Link href="/contact">Contact Us</Link>
              </Button>
              <Button
                size="lg"
                variant="outline"
                asChild
                className="bg-secondary-foreground/10 hover:bg-secondary-foreground/20 border-secondary-foreground/20"
              >
                <Link href="/our-cards">Browse Our Cards</Link>
              </Button>
            </div>
          </div>
        </section>
      </main>
    </>
  )
}