
<div class="wrap">
    <h1>📝 AI Content Generator</h1>
    <p class="tagline">Blog posts, social copy, email campaigns, and product descriptions from templates — or your choice of live AI provider.</p>

    <div class="grid">
        <div class="panel">
            <label for="providerSelect">AI Provider</label>
            <select id="providerSelect" onchange="onProviderChange()">
                <option value="mock">Mock (free, no key needed)</option>
                <option value="openai">OpenAI</option>
                <option value="claude">Anthropic Claude</option>
                <option value="gemini">Google Gemini</option>
                <option value="huggingface-gpt2">Hugging Face — GPT-2</option>
                <option value="huggingface-flan-t5">Hugging Face — Flan-T5</option>
            </select>

            <div id="apiKeyGroup" style="display:none;">
                <label for="apiKey" id="apiKeyLabel">API Key</label>
                <input type="password" id="apiKey" placeholder="Enter your API key">
                <p class="hint" id="apiKeyHint"></p>
            </div>

            <label for="templateSelect">Content Type</label>
            <select id="templateSelect" onchange="onTemplateChange()">
                <option value="Blog Post">Blog Post</option>
                <option value="Social Media">Social Media</option>
                <option value="Email Marketing">Email Marketing</option>
                <option value="Product Description">Product Description</option>
            </select>
            <p class="template-desc" id="templateDesc"></p>

            <div id="dynamicInputs"></div>

            <button class="generate" id="generateBtn" onclick="generateContent()">🎯 Generate Content</button>
            <div class="status" id="status"></div>
        </div>

        <div class="panel">
            <h3 style="font-size:1rem; margin-bottom:12px;">📄 Generated Content</h3>
            <div id="output"></div>
            <button class="copy-btn" id="copyBtn" style="display:none;" onclick="copyOutput()">📋 Copy</button>
            <div class="output-meta" id="outputMeta" style="display:none;">
                <strong>What just happened:</strong>
                <code id="whatHappened"></code>
            </div>
        </div>
    </div>
</div>


