\n {/* Header */}\n

\n PDF Lead Magnet Generator\n

\n Transform your product into compelling lead magnets with AI\n

\n {state.step !== 'upload' && (\n \n Start Over\n \n )}\n

\n\n {/* Progress Steps */}\n

\n {[\n { key: 'upload', label: 'Upload PDF', icon: '📄' },\n { key: 'analyze', label: 'Analyze Content', icon: '🔍' },\n { key: 'generate', label: 'Generate Lead Magnet', icon: '✨' },\n { key: 'complete', label: 'Download & Share', icon: '🎉' }\n ].map((step, index) => {\n const isActive = state.step === step.key;\n const isCompleted = ['upload', 'analyze', 'generate', 'complete'].indexOf(state.step) > index;\n const isAccessible = ['upload', 'analyze', 'generate', 'complete'].indexOf(state.step) >= index;\n \n return (\n \n \n {isCompleted ? '✓' : step.icon}\n

\n \n {step.label}\n \n

\n );\n })}\n

\n\n {/* Main Content */}\n

\n {state.error && (\n

\n ⚠️\n

{state.error}

\n updateState({ error: undefined })}\n className=\"mt-2 text-sm text-red-600 hover:text-red-800 underline\"\n >\n Dismiss\n \n

\n )}\n\n

\n {state.step === 'upload' && (\n \n )}\n {state.step === 'analyze' && (\n \n )}\n {state.step === 'generate' && (\n \n )}\n {state.step === 'complete' && (\n \n )}\n

\n \n\n {/* Footer */}\n \n \n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/andiebuk/Leadmagmagic/code/frontend/components/App.tsx","extension","actionData","errors"]