// Prompt helpers
window.buildSmartPrompt = function(userPrompt) {
    if (userPrompt.includes('--- ORIGINAL HTML START ---')) {
        return userPrompt;
    }
    return `
${userPrompt}

IMPORTANT INSTRUCTIONS:
1. Generate a full webpage, broken clearly into numbered sections.
2. At the top of each section, insert an HTML comment in this format:
   <!-- SECTION 1:  -->
   <!-- SECTION 2:  -->
   <!-- SECTION 3:  --> etc.
3. Each <section> must also include a unique ID matching the comment in kebab-case. Example: 
   <section id="1"> ... </section>
4. Always treat the topmost content block as Section 1, even in single section prompts.
5. Be consistent. If asked to modify or move “Section 2”, treat it as that exact block.
6. Recognize section types based on content in them too: hero, contact, faq, etc.
7. Format output as clean, valid HTML.
8. DO NOT create a new section to insert image or video if the user prompts that you should insert that media into an existing section. Make sure you insert into the section prompted.

CONVERSION & QUALITY DIRECTIVES:
9. Hero section must include a strong CTA above the fold. Use benefit-driven headlines focused on outcomes.
10. Include trust signals (testimonials, logos, stats) within the first 3 sections.
11. Use action-verb CTAs like "Get Started", "Book a Call", "Claim Your Free Trial" — never "Submit" or generic "Learn More".
12. Every image must use loading="lazy" and include a descriptive alt attribute.
13. Video elements should include a poster attribute. NEVER use placeholder URLs — use data-vmo-generate='true' with data-vmo-prompt for AI generation.
14. Contact forms should be short (3-4 fields max) to reduce friction.
15. Use social proof numbers where relevant: "Trusted by 500+ businesses", "4.9★ rating", etc.
16. ALL visual sections MUST have media content — NEVER leave image or video slots empty. If user media is not available, mark for AI generation with data-vmo-generate='true' and a detailed data-vmo-prompt attribute.
17. NEVER use picsum.photos, placeholder.com, coverr.co, example.com, or any external placeholder service URLs.
18. Do NOT use multi-color or gradient-filled text for headings or body copy. Keep typography on a coherent single text-color system.
19. Make the site feel premium and media-led: layered depth, translucent or glass CTA surfaces, purposeful overlays, stronger motion, and parallax-ready composition.
20. Ensure at least one section suggests richer storytelling patterns such as marquee bands, horizontal motion, premium gallery flow, or cinematic hero choreography.
21. The opening viewport must feel unified: brand, navigation, trust proof, CTA, and hero media should belong to the same canvas instead of a plain logo strip sitting above a separate hero.
22. Include a proof band, stats rail, or trust strip within the first 2 sections using 2-4 concrete trust signals, partner mentions, review cues, or business-specific credibility points.
23. Prefer layered editorial layouts, offset media stacks, floating information panels, contact or reservation chips, and scroll cues over centered one-column brochure blocks.
24. If a contact, booking, reservation, consultation, or sales action exists, surface it visibly in the header or hero, not only near the footer.
25. Vary the composition across sections. Avoid repeating the same text-left plus image-right pattern more than twice on a page.
`;
};

window.refinePrompt = function(rawPrompt, sectionMap = []) {
    let lowerPrompt = rawPrompt.toLowerCase();
    let refinedPrompt = rawPrompt;
    let sectionRef = null;

    if (/section\s*(\d+)/.test(lowerPrompt)) {
        const match = lowerPrompt.match(/section\s*(\d+)/);
        const sectionIndex = parseInt(match[1]) - 1;
        if (window.vmoState.blocks[sectionIndex]) {
            sectionRef = window.vmoState.blocks[sectionIndex];
        }
    } else {
        for (let block of window.vmoState.blocks) {
            if (lowerPrompt.includes(block.type)) {
                sectionRef = block;
                break;
            }
        }
    }

    if (sectionRef) {
        refinedPrompt = `
You are about to edit the following section of a webpage. Do NOT create a new section. Just modify the HTML based on the instruction.

--- ORIGINAL HTML START ---
${sectionRef.html}
--- ORIGINAL HTML END ---

Now apply this instruction:
${rawPrompt}
        `.trim();
    }

    return refinedPrompt;
};