function FootballButton({ text = "Click me", onClick }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "relative inline-block px-8 py-4 rounded-[50%] bg-[#8B4513] transform hover:scale-105 transition-transform duration-200 border-4 border-[#582C0C] overflow-hidden", style: { backgroundImage: "radial-gradient(circle at 30% 30%, #A0522D 0%, #8B4513 100%)", boxShadow: "inset 0 0 50px rgba(0,0,0,0.5)" }, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 h-full border-r-4 border-[#582C0C] transform -skew-y-[15deg]", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 h-full border-l-4 border-[#582C0C] transform skew-y-[15deg]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "relative z-10 font-bold text-[#E6D5AC] text-lg", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, text)); } function FootballButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FootballButton, { text: "Touchdown!", onClick: ()=>alert("Touchdown!"), __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FootballButton, { text: "Hut! Hut!", onClick: ()=>alert("Hike!"), __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FootballButton, { __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function PositionCard({ position, description, imageUrl }) { return /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] rounded-lg border-2 border-[#304f1f] overflow-hidden bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-t-2 border-white opacity-30 absolute top-1/4 w-full", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "border-t-2 border-white opacity-30 absolute top-2/4 w-full", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "border-t-2 border-white opacity-30 absolute top-3/4 w-full", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: `${position} player in action`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4 relative", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto text-[#304f1f] mb-2", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, position), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, description))); } function PositionCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 flex gap-4 flex-wrap", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PositionCard, { position: "Quarterback", description: "The leader of the offense, responsible for calling plays and passing the ball", imageUrl: "/qb-action.jpg", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PositionCard, { position: "Wide Receiver", description: "Catches passes and runs routes to gain yards downfield", imageUrl: "/wr-action.jpg", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PositionCard, { position: "Linebacker", description: "Defends against both the run and pass in the middle of the defense", imageUrl: "/lb-action.jpg", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); } function NavBar({ activeLink = "home" }) { const links = [ { name: "Home", href: "#", id: "home" }, { name: "Positions", href: "#", id: "positions" }, { name: "Training", href: "#", id: "training" }, { name: "Equipment", href: "#", id: "equipment" }, { name: "Get Custom Plan", href: "#", id: "plan" } ]; return /*#__PURE__*/ React.createElement("nav", { className: "w-full bg-[#8B4513] bg-[url('/football-texture.jpg')] bg-cover bg-center shadow-lg", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-16", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 md:space-x-8", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, links.map((link)=>/*#__PURE__*/ React.createElement("a", { key: link.id, href: link.href, className: `${activeLink === link.id ? "text-[#FFD700] font-bold" : "text-white hover:text-[#FFD700]"} px-3 py-2 rounded-md text-sm md:text-base font-inter transition-colors duration-200`, __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, link.name)))))); } function NavBarStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavBar, { activeLink: "home", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NavBar, { activeLink: "positions", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NavBar, { activeLink: "training", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NavBar, { activeLink: "equipment", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NavBar, { activeLink: "plan", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isLoading, setIsLoading] = useState(false); const [formData, setFormData] = useState({ height: "", weight: "", position: "", experience: "beginner", skills: [] }); const handleCheckbox = (skill)=>{ const updatedSkills = formData.skills.includes(skill) ? formData.skills.filter((s)=>s !== skill) : [ ...formData.skills, skill ]; setFormData({ ...formData, skills: updatedSkills }); }; const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); await new Promise((resolve)=>setTimeout(resolve, 2000)); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] p-6", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-[#2d3748] font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Player Profile"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Height (cm)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "height", value: formData.height, onChange: (e)=>setFormData({ ...formData, height: e.target.value }), className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none", required: true, __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "Weight (kg)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "weight", value: formData.weight, onChange: (e)=>setFormData({ ...formData, weight: e.target.value }), className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none", required: true, __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Position"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "position", value: formData.position, onChange: (e)=>setFormData({ ...formData, position: e.target.value }), className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none", required: true, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Experience Level"), /*#__PURE__*/ React.createElement("select", { name: "experience", value: formData.experience, onChange: (e)=>setFormData({ ...formData, experience: e.target.value }), className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "beginner", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Beginner"), /*#__PURE__*/ React.createElement("option", { value: "intermediate", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Intermediate"), /*#__PURE__*/ React.createElement("option", { value: "advanced", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "Advanced"), /*#__PURE__*/ React.createElement("option", { value: "professional", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Professional"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Skills to Improve"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, [ "Speed", "Strength", "Agility", "Ball Control", "Passing", "Shooting" ].map((skill)=>/*#__PURE__*/ React.createElement("label", { key: skill, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "skills", checked: formData.skills.includes(skill), onChange: ()=>handleCheckbox(skill), className: "rounded", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, skill))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(FootballButton, { text: "Generate Plan", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } `)); }