Promotional Popup

"use client"

import { useState } from "react"
import PromotionalPopup from "@/components/ui/promotional-popup"
import { CheckCircle2 } from "lucide-react"

export default function PromotionalPopupDemo() {
  const [isOpen, setIsOpen] = useState(true)
  const [selectedEvent, setSelectedEvent] = useState(true)

  const features = [
    {
      title: "Reach attendees with engaging email campaigns",
      description:
        'Promote upcoming events or reach out to say "thanks." We\'ll help you organize contacts and design custom emails',
    },
    {
      title: "Strategize your marketing game plan",
      description:
        "Schedule social posts or use our recommendations for better audience targeting and the best time to share",
    },
    {
      title: "Leverage event data to inform future goals",
      description:
        "Get insights on ad returns, email engagement, and ticket sales with our performance reporting tools",
    },
  ]

  return (
    <div className="min-h-screen w-full bg-slate-100 dark:bg-slate-950 flex items-center justify-center p-4">
      {/* Button to open modal */}
      <button
        onClick={() => setIsOpen(true)}
        className="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-300"
      >
        View Promotion
      </button>

      {/* Promotional Popup */}
      <PromotionalPopup
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onConfirm={() => {
          console.log("Started free trial")
          setIsOpen(false)
        }}
        onCancel={() => {
          console.log("Dismissed promotion")
          setIsOpen(false)
        }}
        title="Get more people to your events with a free trial of Eventbrite Boost"
        subtitle="Let's get together"
        description="Event hosts who used Boost marketing tools sold 63% more tickets per event*"
        features={features}
        ctaText="Start a free 14-day trial"
        cancelText="No thanks"
        rightContent={
          <div className="space-y-4">
            {/* Event Image */}
            <div className="relative rounded-lg overflow-hidden h-48 mb-6">
              <img
                src="https://cdn.21st.dev/assets/mirror/9b/9b0e53daea9fac2c3a7a090892e8d207b5a013388bbd0c1b8ee474f564aff33b.jpg"
                alt="Flow-fi Yoga event"
                className="w-full h-full object-cover"
              />
            </div>

            {/* Event Title */}
            <div>
              <p className="text-sm font-semibold text-orange-600 mb-1">Saturday, April 1</p>
              <h3 className="text-xl font-bold mb-1">Flow-fi Yoga</h3>
              <p className="text-sm text-muted-foreground">
                We're hosting a new event, and we'd love to see you there. Join us for Flow-fi Yoga on Saturday, April
                1.
              </p>
              <p className="text-xs text-muted-foreground mt-2">Register soon because space is limited.</p>
            </div>

            {/* Event Selection */}
            <div className="bg-muted rounded-lg p-4 mt-6">
              <div className="flex items-center gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  checked={selectedEvent}
                  onChange={(e) => setSelectedEvent(e.target.checked)}
                  className="w-5 h-5 rounded accent-orange-600"
                  aria-label="Select Flow-fi Yoga event"
                />
                <div className="flex-1 flex items-center gap-3">
                  <img
                    src="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-PHHSqK920jD9XiKESRiJDrx6Lyg82x.png&w=320&q=75"
                    alt="Event thumbnail"
                    className="w-12 h-12 rounded object-cover"
                  />
                  <div>
                    <p className="text-sm font-semibold">Flow-fi Yoga</p>
                    <p className="text-xs text-muted-foreground">Saturday, April 1</p>
                  </div>
                  {selectedEvent && <CheckCircle2 className="w-5 h-5 text-orange-600 ml-auto flex-shrink-0" />}
                </div>
              </div>
            </div>
          </div>
        }
      />
    </div>
  )
}