function LeenaFinleyTicketPurchase({ step, handleSelectChange, nextPage, previousPage, tickets }) { const glowStyle = { textShadow: '0 0 8px #fff, 0 0 10px #fff, 0 0 12px #DAA520, 0 0 14px #DAA520, 0 0 16px #DAA520, 0 0 18px #DAA520, 0 0 20px #DAA520' }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#F3E9DD] min-h-screen py-10 px-4", __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-6 text-[#DAA520]", style: glowStyle, __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, "Concert Tickets by Leena & Finley"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-center text-[#78716C] mb-8", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, "Get your tickets for the most awaited concerts!"), step === 1 && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-lg mb-4 text-[#DAA520] animate-pulse", style: glowStyle, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Ticket Price: $10,000"), /*#__PURE__*/ React.createElement("select", { name: "quantity", className: "mb-4 py-2 px-3 rounded-md border-2 border-gray-300", onChange: handleSelectChange, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, "1 Ticket"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "2 Tickets"), /*#__PURE__*/ React.createElement("option", { value: "3", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "3 Tickets"), /*#__PURE__*/ React.createElement("option", { value: "4", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "4 Tickets")), /*#__PURE__*/ React.createElement("button", { onClick: nextPage, className: "bg-[#DAA520] hover:bg-[#b98c1e] text-white font-semibold py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Next")), step === 2 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "ccn", placeholder: "Credit Card Number", className: "mb-4 py-2 px-3 rounded-md border-2 border-gray-300", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "exp", placeholder: "Expiration Date (MM/YY)", className: "mb-4 py-2 px-3 rounded-md border-2 border-gray-300", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cvv", placeholder: "CVV", className: "mb-4 py-2 px-3 rounded-md border-2 border-gray-300", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: nextPage, className: "bg-[#DAA520] hover:bg-[#b98c1e] text-white font-semibold py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Submit")), /*#__PURE__*/ React.createElement("button", { onClick: previousPage, className: "mt-4 bg-[#78716C] hover:bg-[#5e5a56] text-white font-semibold py-3 px-10 rounded-lg w-full text-3xl", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Back")), step === 3 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center my-8", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-lg mb-4 text-[#DAA520] animate-pulse", style: glowStyle, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Thank you for your purchase!"), /*#__PURE__*/ React.createElement("button", { onClick: previousPage, className: "bg-[#78716C] hover:bg-[#5e5a56] text-white font-semibold py-3 px-10 rounded-lg w-full text-3xl", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Back")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, tickets.map((ticket)=>/*#__PURE__*/ React.createElement("div", { key: ticket.id, className: "bg-white p-4 rounded-lg shadow-md text-center", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "Leena & Finley Ticket"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, `Number: ${ticket.number}`))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, ` body { background-image: url('/festive-lights.jpg'), url('/festive-confetti.jpg'), url('/concert-crowd.jpg'), url('/fireworks.jpg'), linear-gradient(45deg, #F72585, #7209B7, #3A0CA3, #4361EE, #4CC9F0); background-size: cover, cover, cover, cover; background-position: center; background-blend-mode: overlay, darken, lighten, screen; animation: festiveBackground 10s infinite alternate; } @keyframes festiveBackground { 0% { background-position: left top, right top, center, left top; } 50% { background-position: right top, left bottom, center, right bottom; } 100% { background-position: left bottom, right bottom, center, left bottom; } } `)); } function LeenaFinleyTicketPurchaseStory() { // Replace these with actual state management logic in your app const [step, setStep] = React.useState(1); const [tickets, setTickets] = React.useState([ { id: 1, number: '12345' }, { id: 2, number: '23456' } ]); const handleSelectChange = (event)=>{ // Placeholder for the select change handler }; const nextPage = ()=>{ setStep((prevStep)=>prevStep + 1); }; const previousPage = ()=>{ setStep((prevStep)=>Math.max(1, prevStep - 1)); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LeenaFinleyTicketPurchase, { step: step, handleSelectChange: handleSelectChange, nextPage: nextPage, previousPage: previousPage, tickets: tickets, __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this })); } function MainComponent() { const [step, setStep] = React.useState(1); const [quantity, setQuantity] = React.useState(1); const nextPage = ()=>setStep(step + 1); const previousPage = ()=>setStep(step - 1); const handleSelectChange = (event)=>{ setQuantity(Number(event.target.value)); }; const tickets = Array.from({ length: quantity }, (_, index)=>({ id: index, number: Math.floor(Math.random() * 10000) })); return /*#__PURE__*/ React.createElement(LeenaFinleyTicketPurchase, { step: step, handleSelectChange: handleSelectChange, nextPage: nextPage, previousPage: previousPage, tickets: tickets, __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }); }