function InteractiveFaq({ question, isOpen, onToggle }) { return /*#__PURE__*/ React.createElement("button", { className: "w-full text-left px-5 py-3 text-lg font-semibold text-[#1F2937]", onClick: onToggle, name: "question", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, question, /*#__PURE__*/ React.createElement("span", { className: "float-right text-[#6B7280]", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, isOpen ? '−' : '+')); } function InteractiveFaqStory() { const [selectedFaq, setSelectedFaq] = React.useState(null); const faqs = [ { question: "What is your return policy?" }, { question: "How do I track my order?" }, { question: "Can I purchase items again?" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, faqs.map((faq, index)=>/*#__PURE__*/ React.createElement(InteractiveFaq, { key: index, question: faq.question, isOpen: selectedFaq === index, onToggle: ()=>setSelectedFaq(selectedFaq === index ? null : index), __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [selectedFaq, setSelectedFaq] = React.useState(null); const faqs = [ { question: "What payment methods do you accept?", answer: "We accept all major credit cards, PayPal, and bank transfers." }, { question: "How can I track my order?", answer: "Once your order has shipped, you will receive an email with tracking information." }, { question: "Do you offer technical support?", answer: "Yes, we offer 24/7 technical support. Feel free to contact us anytime." } ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-3/4 lg:w-1/2 p-4 md:p-8 bg-[#F9FAFB] mx-auto", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#334155] mb-6", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Customer Support FAQs"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, faqs.map((faq, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `bg-white shadow ${selectedFaq === index ? 'rounded-t-lg' : 'rounded-lg'} overflow-hidden`, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full text-left px-5 py-3 text-lg font-semibold text-[#1F2937]", onClick: ()=>setSelectedFaq(selectedFaq === index ? null : index), __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, faq.question, /*#__PURE__*/ React.createElement("span", { className: "float-right text-[#6B7280]", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, selectedFaq === index ? '−' : '+')), selectedFaq === index && /*#__PURE__*/ React.createElement("p", { className: "px-5 py-3 text-[#6B7280]", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, faq.answer))))); }