function Results({ seasonDetails }) { const coloursToAvoidFormatted = seasonDetails.coloursToAvoid.map((colour)=>({ name: colour.name, hex: colour.thumbnail })); return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen flex flex-col items-start pt-4 bg-white mb-12 p-4", style: { marginBottom: '50px', padding: '15px' }, __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-vidaloka text-3xl text-[#121212]", style: { marginBottom: '50px' }, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, "Your Colour Season: ", seasonDetails.season), /*#__PURE__*/ React.createElement("div", { className: "text-left font-roboto", style: { marginBottom: '50px' }, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-vidaloka text-xl text-[#121212]", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, "Your Hair"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, seasonDetails.hairDescription), /*#__PURE__*/ React.createElement("h3", { className: "font-vidaloka text-xl text-[#121212]", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "Your Skin"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, seasonDetails.skinDescription)), /*#__PURE__*/ React.createElement("h3", { className: "font-vidaloka text-2xl text-[#121212]", style: { marginBottom: '50px' }, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Your Colours"), /*#__PURE__*/ React.createElement(ColourPalettw, { colours: seasonDetails.mainColours, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-vidaloka text-2xl text-[#121212]", style: { marginBottom: '50px' }, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Colours to Avoid"), /*#__PURE__*/ React.createElement(ColourPalettw, { colours: coloursToAvoidFormatted, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-left font-roboto", style: { marginBottom: '50px' }, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-vidaloka text-xl text-[#121212]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Your Bling"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, seasonDetails.jewelleryTip)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-vidaloka text-2xl text-[#121212]", style: { marginBottom: '50px' }, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Recommended Clothing Pieces"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, seasonDetails.productSearchResults.map((product, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: product.product_page_url, target: "_blank", rel: "noopener noreferrer", className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.product_photos[0], alt: `${product.product_title} for ${seasonDetails.season} season`, className: "w-48 h-48 object-cover", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto mt-2", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, product.product_title)))))); } function ResultsStory() { const seasonDetailsAutumn = { season: "Autumn", hairDescription: "Rich auburns, warm chestnuts, and deep brown hair colours with golden or caramel highlights.", skinDescription: "Warm undertones with golden, olive, or dark peach tones. Skin may have a radiant, golden glow.", mainColours: [ { name: "Burnt Orange", hex: "#CC5500" }, { name: "Olive Green", hex: "#808000" }, { name: "Mustard Yellow", hex: "#FFDB58" }, { name: "Carmine Red", hex: "#960018" }, { name: "Chocolate Brown", hex: "#7B3F00" }, { name: "Teal", hex: "#008080" }, { name: "Rich Ivory", hex: "#FFFFF0" }, { name: "Dark Tan", hex: "#918151" }, { name: "Burgundy", hex: "#800020" }, { name: "Deep Teal", hex: "#005357" }, { name: "Rust", hex: "#B7410E" }, { name: "Hunter Green", hex: "#355E3B" }, { name: "Moss Green", hex: "#8A9A5B" }, { name: "Mocha", hex: "#3B2F2F" }, { name: "Pumpkin", hex: "#FF7518" } ], coloursToAvoid: [ { name: "Pastel Blue", thumbnail: "#AEC6CF" }, { name: "Bright White", thumbnail: "#FFFFFF" }, { name: "Neon Yellow", thumbnail: "#CCFF00" }, { name: "Light Grey", thumbnail: "#D3D3D3" }, { name: "Sky Blue", thumbnail: "#87CEEB" } ], jewelleryTip: "Favor warm metals like gold and copper, and gemstones such as garnet, amber, and citrine.", productSearchResults: [ { product_id: "1895888000104236047", product_title: "Warm Tone Autumn Scarf", product_photos: [ "https://example.com/autumn-scarf.jpg" ], product_page_url: "https://example.com/autumn-scarf" } ] }; return /*#__PURE__*/ React.createElement(Results, { seasonDetails: seasonDetailsAutumn, __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }); } function Questions({ step, question, options, onSelectOption }) { const stepStyles = [ "bg-[#333333]", "bg-[#444444]", "bg-[#555555]" ]; return /*#__PURE__*/ React.createElement("div", { className: `${stepStyles[step - 1]} h-screen flex flex-col justify-center items-center`, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-4 text-white", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, question), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, options.map((option)=>/*#__PURE__*/ React.createElement("button", { key: option, onClick: ()=>onSelectOption(option), className: "px-4 py-2 bg-white text-gray-800 font-semibold rounded outline-none hover:bg-gray-100 focus:outline-none", style: { boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)', transform: 'translateY(-2px)', willChange: 'transform', transition: 'transform 0.3s ease' }, __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, option))))); } function QuestionsStory() { const questionsData = [ { id: 1, question: "What is the colour of your hair?", options: [ "Ash Blonde", "Platinum Blonde", "Golden Brown", "Jet Black", "Auburn Red" ] }, { id: 2, question: "What is your skin undertone?", options: [ "Warm", "Cool", "Neutral" ] }, { id: 3, question: "What is the colour of your eyes?", options: [ "Deep Brown", "Hazel Green", "Steel Blue", "Green", "Grey" ] } ]; const [step, setStep] = React.useState(1); const [selectedOptions, setSelectedOptions] = React.useState([]); const onSelectOption = (option)=>{ const newSelectedOptions = [ ...selectedOptions, option ]; setSelectedOptions(newSelectedOptions); if (step <= questionsData.length) { setStep(step + 1); } else { console.log('Submission', newSelectedOptions); } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, step <= questionsData.length ? /*#__PURE__*/ React.createElement(Questions, { step: step, question: questionsData[step - 1].question, options: questionsData[step - 1].options, onSelectOption: onSelectOption, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "h-screen flex flex-col justify-center items-center bg-[#222222]", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg mb-4 text-white", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Submission Complete"), /*#__PURE__*/ React.createElement("ul", { className: "text-white", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, selectedOptions.map((option, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, option)))))); } function ColourPalettw({ colours }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-5 gap-3", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, colours.slice(0, 15).map((colour, index)=>/*#__PURE__*/ React.createElement("div", { key: index, style: { backgroundColor: colour.hex, height: '200px' }, className: "flex items-center justify-center p-2.5", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, colour.name))))); } function ColourPalettwStory() { const colours = [ { name: "Tangerine", hex: "#F28500" }, { name: "Peach", hex: "#FFE5B4" }, { name: "Turquoise", hex: "#30D5C8" }, { name: "Mint Green", hex: "#98FF98" }, { name: "Lemon Yellow", hex: "#FFF44F" }, { name: "Coral", hex: "#FF7F50" }, { name: "Lavender", hex: "#E6E6FA" }, { name: "Beige", hex: "#F5F5DC" }, { name: "Ivory", hex: "#FFFFF0" }, { name: "Sand", hex: "#C2B280" }, { name: "Khaki", hex: "#F0E68C" }, { name: "Olive", hex: "#808000" }, { name: "Navy", hex: "#000080" }, { name: "Teal", hex: "#008080" }, { name: "Plum", hex: "#8E4585" } ]; return /*#__PURE__*/ React.createElement(ColourPalettw, { colours: colours, __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }); } function MainComponent({ step, questionData, onSelectOption }) { if (step <= questionData.length) { return /*#__PURE__*/ React.createElement(Questions, { step: step, question: questionData[step - 1].question, options: questionData[step - 1].options, onSelectOption: ()=>onSelectOption(), __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }); } else { return /*#__PURE__*/ React.createElement(Results, { seasonDetails: questionData[questionData.length - 1].resultData, __source: { fileName: "", lineNumber: 12, columnNumber: 12 }, __self: this }); } } function StoryComponent() { const questionData = [ { id: 1, question: "What is the colour of your hair?", options: [ "Ash Blonde", "Platinum Blonde", "Golden Brown", "Jet Black", "Auburn Red" ] }, { id: 2, question: "What is your skin undertone?", options: [ "Warm", "Cool", "Neutral" ] }, { id: 3, question: "What is the colour of your eyes?", options: [ "Deep Brown", "Hazel Green", "Steel Blue", "Green", "Grey" ] }, { id: 4, resultData: { season: "Winter", hairDescription: "Rich browns, ashy blondes, and deep blacks.", skinDescription: "Cool undertones with pink or rosy red hues.", jewelleryTip: "Opt for shimmering metals and bold gemstones like silver and sapphire.", mainColours: [ { name: "Emerald", hex: "#50C878" }, { name: "Sapphire", hex: "#0F52BA" }, { name: "Ruby", hex: "#9B111E" }, { name: "Midnight Blue", hex: "#191970" }, { name: "Frost", hex: "#E6E6FA" } ], coloursToAvoid: [ { name: "Orange", hex: "#FFA500" }, { name: "Gold", hex: "#FFD700" } ], productSearchResults: [ { product_id: "123456789", product_title: "Elegant Winter Jacket", product_photos: [ "https://example.com/winter_jacket.jpg" ], product_page_url: "https://example.com/winter_jacket" } ] } } ]; const [step, setStep] = React.useState(1); const onSelectOption = ()=>{ if (step < questionData.length) { setStep(step + 1); } else { console.log('Quiz Completed'); } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { step: step, questionData: questionData, onSelectOption: onSelectOption, __source: { fileName: "", lineNumber: 60, columnNumber: 16 }, __self: this })); }