/**
* @license
* SPDX-License-Identifier: Apache-2.0
*/

/* global React, FramerMotion, lucide */

const { useState, useRef } = React;
const { motion, AnimatePresence } = FramerMotion;

const {
Search,
Loader2,
TrendingUp,
AlertTriangle,
ArrowRight,
Share2,
Info
} = lucide;

function App() {
const [query, setQuery] = useState(”);
const [isLoading, setIsLoading] = useState(false);
const [result, setResult] = useState(null);
const [error, setError] = useState(null);
const inputRef = useRef(null);

const handleSearch = async (e) => {
e.preventDefault();
if (!query.trim()) return;

setIsLoading(true);
setError(null);

try {
const data = await window.synthesizeFinancialInfo(query);
setResult(data);
} catch (err) {
setError(‘An error occurred while synthesizing financial data. Please try again.’);
console.error(err);
} finally {
setIsLoading(false);
}
};

const clearSearch = () => {
setQuery(”);
setResult(null);
setError(null);
inputRef.current?.focus();
};

return (
React.createElement(“div”, { className: “min-h-screen flex flex-col font-sans bg-[var(–bg-dark)]” },

/* Header */
React.createElement(“header”, {
className: “h-[60px] border-b border-[var(–border)] flex items-center justify-between px-8 bg-[var(–bg-dark)] sticky top-0 z-50”
},
React.createElement(“div”, {
className: “flex items-center gap-2 cursor-pointer”,
onClick: clearSearch
},
React.createElement(“div”, { className: “w-6 h-6 bg-[var(–accent)] rounded-sm” }),
React.createElement(“span”, { className: “font-extrabold text-lg tracking-tighter uppercase whitespace-nowrap” },
“ALPHASYNC “,
React.createElement(“span”, { className: “font-light opacity-60” }, “RESEARCH”)
)
)
),

/* Main */
React.createElement(“main”, { className: “flex-1 w-full max-w-7xl mx-auto p-8” },

React.createElement(AnimatePresence, { mode: “wait” },

!result
? React.createElement(motion.div, {
key: “search”,
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 }
},

React.createElement(“form”, { onSubmit: handleSearch },
React.createElement(“input”, {
ref: inputRef,
value: query,
onChange: (e) => setQuery(e.target.value),
placeholder: “Search industrial signals…”,
className: “geo-input”
}),

React.createElement(“button”, {
type: “submit”,
disabled: isLoading,
className: “geo-button”
},
isLoading
? React.createElement(Loader2, { className: “w-5 h-5 animate-spin” })
: React.createElement(React.Fragment, null,
“GENERATE “,
React.createElement(ArrowRight, { className: “w-4 h-4” })
)
)
)
)
: React.createElement(motion.div, {
key: “results”,
initial: { opacity: 0 },
animate: { opacity: 1 }
},

React.createElement(“h1”, null, query),

React.createElement(“div”, { className: “geo-card” },
React.createElement(“p”, null, result?.summary)
)
)
),

error && React.createElement(“div”, { className: “text-red-500 mt-4” }, error)
),

/* Footer */
React.createElement(“footer”, { className: “p-6 border-t” },
React.createElement(“button”, {
className: “geo-button”,
onClick: () => {
const url = window.location.href;
const iframe = ``;
navigator.clipboard.writeText(iframe);
alert(“Copied WordPress widget iframe”);
}
},
React.createElement(Info, { className: “w-3 h-3″ }),
” GET WIDGET”
)
)
)
);
}

/* Export for WordPress global usage */
window.AlphaSyncApp = App;