function MainComponent() { const [transcript, setTranscript] = React.useState([]); const [isCallActive, setIsCallActive] = React.useState(false); const [showVideoSection, setShowVideoSection] = React.useState(false); React.useEffect(()=>{ const script = document.createElement("script"); script.src = "https://elevenlabs.io/convai-widget/index.js"; script.async = true; document.body.appendChild(script); const handleTranscriptUpdate = (event)=>{ if (event.detail) { setTranscript((prev)=>[ ...prev, event.detail ]); } }; document.addEventListener("convai-transcript", handleTranscriptUpdate); return ()=>{ document.body.removeChild(script); document.removeEventListener("convai-transcript", handleTranscriptUpdate); }; }, []); const startCall = ()=>{ const convaiElement = document.querySelector("elevenlabs-convai"); if (convaiElement) { convaiElement.startCall(); setIsCallActive(true); setTranscript([]); // Start microphone input navigator.mediaDevices.getUserMedia({ audio: true }).then((stream)=>{ convaiElement.setAttribute("stream", stream); }).catch((err)=>{ console.error("Error accessing microphone:", err); }); } }; const endCall = ()=>{ const convaiElement = document.querySelector("elevenlabs-convai"); if (convaiElement) { convaiElement.endCall(); setIsCallActive(false); // Stop microphone input const stream = convaiElement.getAttribute("stream"); if (stream) { stream.getTracks().forEach((track)=>track.stop()); } } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1B2631]", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#E74C3C] text-white p-4", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold cursor-pointer", onClick: ()=>setShowVideoSection(false), __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "🎅 Santa Calls"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-6", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowVideoSection(!showVideoSection), className: "hover:text-[#F1C40F] transition-colors", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, showVideoSection ? "Live Call" : "Create Video")))), showVideoSection ? /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto p-8 flex flex-col items-center justify-center min-h-[calc(100vh-80px)]", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-10", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[48px] md:text-[94px] font-bold text-[#E74C3C] font-crimson-text mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "SANTA VIDEO"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-[#F1C40F] text-xl md:text-2xl", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg md:text-xl", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Create a Custom Video from Santa!"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-[#F1C40F] text-xl md:text-2xl", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full max-w-2xl rounded-2xl p-8 shadow-2xl", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, "Child's Name"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-4 text-lg border-2 border-gray-200 rounded-xl focus:outline-none focus:border-[#E74C3C]", placeholder: "Enter child's name...", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, "Custom Message (Optional)"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-4 text-lg border-2 border-gray-200 rounded-xl focus:outline-none focus:border-[#E74C3C] h-32", placeholder: "Add a personal message from Santa...", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full p-4 bg-[#E74C3C] text-white text-xl font-bold rounded-xl hover:bg-[#C0392B] transition-colors flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic", __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }), "Generate Video")))) : /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto p-8 flex flex-col items-center justify-center min-h-[calc(100vh-80px)]", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-10", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[48px] md:text-[94px] font-bold text-[#E74C3C] font-crimson-text mb-2", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "SANTA CALLS"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-[#F1C40F] text-xl md:text-2xl", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg md:text-xl", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, "Talk to Santa Live!"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-[#F1C40F] text-xl md:text-2xl", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "relative w-[320px] h-[640px] bg-black rounded-[40px] p-3 shadow-2xl", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-1/2 -translate-x-1/2 w-[120px] h-[30px] bg-black rounded-b-[20px]", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full h-full rounded-[32px] overflow-hidden relative", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/44ae1e58-f282-4c44-90b3-aca12cd6075b/-/format/auto/", alt: "Santa smiling warmly at the camera", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const widget = document.createElement("elevenlabs-convai"); widget.setAttribute("agent-id", "YWFoXPkKqTbtsvOJRxRt"); document.body.appendChild(widget); const script = document.createElement("script"); script.src = "https://elevenlabs.io/convai-widget/index.js"; script.async = true; document.body.appendChild(script); }, className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 bg-[#4CAF50] rounded-full flex items-center justify-center text-white hover:bg-[#45a049] transition-colors shadow-lg border-4 border-white", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone text-3xl", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, ` elevenlabs-convai::part(button) { content: 'Talk to Santa'; } `), /*#__PURE__*/ React.createElement("elevenlabs-convai", { "agent-id": "YWFoXPkKqTbtsvOJRxRt", "hide-branding": "true", "hide-widget": "true", className: "hidden", __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this })); }