import React from 'react';

export default function EventTicket() {
  const handleFlip = () => {
    document.getElementById('ticket').classList.toggle('flipped');
  };

  const handleDownload = () => {
    window.print();
  };

  return (
    <>
      <style jsx global>{`
        /* Global styles */
        .ticket-page {
            min-height: 100vh;
            background: linear-gradient(135deg, #4f46e5, #a855f7);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .controls {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            z-index: 100;
        }

        .control-btn {
            background: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .control-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        .download-btn {
            background: #22c55e !important;
            color: white;
        }

        .ticket-wrapper {
            width: 100%;
            max-width: 400px;
            min-height: 600px;
            perspective: 2000px;
        }

        .ticket-container {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .ticket-container.flipped {
            transform: rotateY(180deg);
        }

        .ticket-front,
        .ticket-back {
            position: absolute;
            width: 100%;
            min-height: 600px;
            backface-visibility: hidden;
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .ticket-back {
            transform: rotateY(180deg);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px 20px;
            background: linear-gradient(145deg, #ffffff, #f3f4f6);
            text-align: center;
        }

        .event-banner {
            width: 100%;
            height: 160px;
            background-image: url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .event-banner::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
        }

        .ticket-header {
            background: linear-gradient(to right, #ec4899, #f97316);
            padding: 20px;
            color: white;
        }

        .date-time-info {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
        }

        .ticket-body {
            padding: 20px;
            position: relative;
        }

        .detail-group {
            margin-bottom: 20px;
        }

        .detail-label {
            font-size: 0.8rem;
            color: #6b7280;
            margin-bottom: 4px;
        }

        .detail-value {
            font-weight: 600;
            color: #1f2937;
        }

        .flex-row {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .qr-section {
            padding: 20px 0;
            margin-top: 20px;
            border-top: 1px dashed #d1d5db;
            text-align: center;
        }

        .ticket-footer {
            background: #f3f4f6;
            padding: 15px;
            text-align: center;
            border-top: 1px solid #e5e7eb;
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        .fine-print {
            font-size: 0.75rem;
            color: #6b7280;
            text-align: center;
            margin: 20px 0;
            line-height: 1.4;
        }

        .social-links {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }

        .social-links svg {
            width: 24px;
            height: 24px;
            color: #6b7280;
            transition: color 0.3s ease;
            cursor: pointer;
        }

        @media (max-width: 480px) {
            .ticket-wrapper {
                max-width: 100%;
            }

            .flex-row {
                flex-direction: column;
                gap: 10px;
            }

            .detail-group {
                margin-bottom: 15px;
            }
        }
      `}</style>

      <div className="ticket-page">
        <div className="controls">
          <button className="control-btn" onClick={handleFlip}>Flip Ticket</button>
          <button className="control-btn download-btn" onClick={handleDownload}>Download Ticket</button>
        </div>

        <div className="ticket-wrapper">
          <div className="ticket-container" id="ticket">
            {/* Front Side */}
            <div className="ticket-front">
              <div className="event-banner"></div>
              
              <div className="ticket-header">
                <h1 className="text-2xl font-bold text-center mb-4">ANNUAL MUSIC FESTIVAL</h1>
                <div className="date-time-info">
                  <div>
                    <p className="opacity-80">DATE</p>
                    <p className="font-semibold">AUGUST 15, 2024</p>
                  </div>
                  <div>
                    <p className="opacity-80">TIME</p>
                    <p className="font-semibold">DOORS OPEN 6:00 PM</p>
                  </div>
                </div>
              </div>

              <div className="ticket-body">
                <div className="detail-group">
                  <p className="detail-label">VENUE</p>
                  <p className="detail-value">CENTRAL PARK AMPHITHEATER</p>
                </div>

                <div className="detail-group">
                  <p className="detail-label">TICKET HOLDER</p>
                  <p className="detail-value">ALEX JOHNSON</p>
                </div>

                <div className="flex-row">
                  <div className="detail-group">
                    <p className="detail-label">TICKET TYPE</p>
                    <p className="detail-value">VIP ACCESS</p>
                  </div>
                  <div className="detail-group">
                    <p className="detail-label">TICKET #</p>
                    <p className="detail-value">A-23871</p>
                  </div>
                </div>

                <div className="flex-row">
                  <div className="detail-group">
                    <p className="detail-label">SEATING</p>
                    <p className="detail-value">SECTION A, ROW 5, SEAT 12</p>
                  </div>
                  <div className="detail-group">
                    <p className="detail-label">PRICE</p>
                    <p className="detail-value">$150.00</p>
                  </div>
                </div>

                <div className="qr-section">
                  <svg className="w-24 h-24 mb-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <rect width="5" height="5" x="3" y="3" rx="1"/>
                    <rect width="5" height="5" x="16" y="3" rx="1"/>
                    <rect width="5" height="5" x="3" y="16" rx="1"/>
                    <path d="M21 16h-3a2 2 0 0 0-2 2v3"/>
                    <path d="M21 21v.01"/>
                    <path d="M12 7v3a2 2 0 0 1-2 2H7"/>
                    <path d="M3 12h.01"/>
                    <path d="M12 3h.01"/>
                    <path d="M12 16h.01"/>
                    <path d="M16 12h.01"/>
                    <path d="M21 12h.01"/>
                    <path d="M12 21h.01"/>
                  </svg>
                  <p className="text-sm text-gray-600">SCAN FOR ENTRY</p>
                </div>

                <div className="fine-print">
                  <p>This ticket is non-refundable. No re-entry allowed.</p>
                  <p>Event will proceed rain or shine.</p>
                </div>
              </div>

              <div className="ticket-footer">
                <p className="font-semibold text-gray-700">Presented by EVENTSCAPE PRODUCTIONS</p>
                <p className="text-sm text-gray-500 mt-1">www.eventscapeproductions.com</p>
              </div>
            </div>

            {/* Back Side */}
            <div className="ticket-back">
              <div className="mb-6">
                <svg className="w-16 h-16 text-gray-600 mb-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <circle cx="12" cy="12" r="10"/>
                  <path d="M12 16v-4"/>
                  <path d="M12 8h.01"/>
                </svg>
              </div>

              <div className="text-center mb-8">
                <h2 className="text-2xl font-bold text-gray-800 mb-4">About The Festival</h2>
                <p className="text-gray-600 mb-4">Join us for an unforgettable night of music featuring top artists from around the world. Experience amazing performances, food vendors, and interactive art installations.</p>
                <p className="text-gray-600">Don't forget to visit our merchandise booth for exclusive festival memorabilia!</p>
              </div>

              <div className="social-links">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                </svg>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <rect width="20" height="20" x="2" y="2" rx="5" ry="5"/>
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                </svg>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}