function Button({ text, icon, onClick, className }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "bg-gray-100 text-gray-800 font-semibold py-2 px-4 rounded-[8px] hover:bg-gray-200 transition-colors duration-200 " + className, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, icon && /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} ${text ? "mr-2" : ""}`, __source: { fileName: "", lineNumber: 11, columnNumber: 18 }, __self: this }), text)); } function ButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 p-4", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { text: "Sign in", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { icon: "fa-shopping-cart", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [headline, setHeadline] = React.useState(""); const [analysis, setAnalysis] = React.useState(null); const analyzeHeadline = ()=>{ const wordCount = headline.trim().split(/\s+/).length; const charCount = headline.length; let sentiment = "Neutral"; if (headline.toLowerCase().includes("great") || headline.toLowerCase().includes("amazing")) { sentiment = "Positive"; } else if (headline.toLowerCase().includes("bad") || headline.toLowerCase().includes("terrible")) { sentiment = "Negative"; } let emotionalAppeal = "Moderate"; const powerWords = [ "incredible", "essential", "effortless", "secret", "guaranteed" ]; if (powerWords.some((word)=>headline.toLowerCase().includes(word))) { emotionalAppeal = "Strong"; } else if (headline.length < 20) { emotionalAppeal = "Weak"; } setAnalysis({ wordCount, charCount, sentiment, emotionalAppeal }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white text-black p-8 md:p-16", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Headline Analyzer"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "headline", className: "block text-xl mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Enter your headline:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "headline", name: "headline", className: "w-full p-3 border border-gray-300 rounded-lg text-lg", placeholder: "Type your headline here...", value: headline, onChange: (e)=>setHeadline(e.target.value), __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(Button, { text: "Analyze", icon: "fa-regular fa-chart-bar", className: "w-full md:w-auto", onClick: analyzeHeadline, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this })), analysis && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-6 rounded-lg space-y-6", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Analysis Results"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "Word Count"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, analysis.wordCount)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "Character Count"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, analysis.charCount)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "Sentiment"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, analysis.sentiment)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "Emotional Appeal"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `far fa-${analysis.emotionalAppeal === 'Strong' ? 'grin' : analysis.emotionalAppeal === 'Weak' ? 'frown' : 'meh'} text-3xl`, __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xl", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, analysis.emotionalAppeal))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-6 rounded-lg", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Suggestions"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside space-y-2", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "Use power words to increase emotional appeal"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Keep your headline concise (50-60 characters)"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Include numbers or statistics if relevant"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Consider using a question format"))))); }