{steps.map((s,i)=>( ); } // ─── SEO Results Panel ──────────────────────────────────────────────────────── function SEOPanel({ data }) { const [tab, setTab] = useState(“keywords”); const tabs = [ {id:”keywords”, label:`Keywords (${data.keywords?.length||0})`}, {id:”meta”, label:”Meta & RankMath”}, {id:”brief”, label:”Content Brief”}, ]; const diffColor = d => d<=30?"green":d<=60?"amber":"red"; const intentColor = i => ({informational:”blue”,commercial:”purple”,transactional:”green”,navigational:”gray”})[i]||”gray”; return ( ); } // ─── Main App ───────────────────────────────────────────────────────────────── export default function PageBuilder() { const [stage, setStage] = useState(STAGES.INPUT); // Form state const [topic, setTopic] = useState(“”); const [industry, setIndustry] = useState(“”); const [location, setLocation] = useState(“”); const [customLoc, setCustomLoc] = useState(“”); const [pageType, setPageType] = useState(“”); const [tone, setTone] = useState(“”); const [extra, setExtra] = useState(“”); // Results state const [seoData, setSeoData] = useState(null); const [htmlOut, setHtmlOut] = useState(“”); const [error, setError] = useState(“”); const [loadMsg, setLoadMsg] = useState(“”); const [htmlLoading, setHtmlLoading] = useState(false); const [htmlLoadMsg, setHtmlLoadMsg] = useState(“”); const [copied, setCopied] = useState(false); const seoMsgs = [ “Analysing search intent and landscape…”, “Mining high-value keyword clusters…”, “Scoring difficulty and opportunity…”, “Crafting RankMath-ready meta tags…”, “Building People Also Ask targets…”, “Finalising LSI semantic keywords…”, ]; const htmlMsgs = [ “Applying keywords to page structure…”, “Writing SEO-optimised body copy…”, “Embedding LSI terms naturally…”, “Structuring FAQ section from PAA questions…”, “Adding RankMath comment block…”, “Styling for Elementor HTML widget…”, “Finalising and polishing…”, ]; const loc = location === “Custom…” ? customLoc : location; // ── Step 1: Run SEO Research ────────────────────────────────────────────── const runSEO = useCallback(async () => { if (!topic.trim()) { setError(“Please enter a page topic.”); return; } if (!industry) { setError(“Please select an industry.”); return; } if (!pageType) { setError(“Please select a page type.”); return; } setError(“”); setStage(STAGES.SEO); setSeoData(null); let i=0; setLoadMsg(seoMsgs[0]); const t = setInterval(()=>{ i=(i+1)%seoMsgs.length; setLoadMsg(seoMsgs[i]); }, 2000); const prompt = `You are a UK SEO expert for Galaxy Website Design agency. Generate a comprehensive SEO package. Return ONLY valid JSON, no markdown, no explanation. TOPIC: ${topic} INDUSTRY: ${industry} PAGE TYPE: ${pageType} LOCATION: ${loc||”National UK”} TONE: ${tone||”Professional & Authoritative”} EXTRA NOTES: ${extra||”none”} JSON structure: { “keywords”: [ {“keyword”:””,”intent”:”informational|commercial|transactional|navigational”,”difficulty”:0,”volume”:0,”reason”:””} ], “meta”: { “title”:”under 60 chars with primary keyword”, “description”:”140-155 chars with CTA and primary keyword”, “h1″:”keyword-rich H1 heading, different from title”, “slug”:”kebab-case-url-slug”, “focusKW”:”single focus keyword for RankMath”, “schemaType”:”Schema.org type”, “rankMathTips”:[“tip1″,”tip2″,”tip3″,”tip4”] }, “brief”: { “sections”:[{“heading”:””,”tip”:””}], “lsiKeywords”:[“”], “questions”:[“”,””,””,””,””], “contentTips”:[“”,””,””] } } Rules: – Exactly 12 keywords: 2-3 head terms (KD 55-80), 4-5 long-tail (KD 15-45), 2-3 local (KD 20-50), 2-3 questions (KD 10-30) – Realistic UK search volumes – Meta title MUST be under 60 chars – Meta description MUST be 140-155 chars – British spelling throughout – Sections should map to logical Elementor page layout order – 5 People Also Ask questions targeting featured snippets – 12-15 LSI keywords`; try { const res = await fetch(“https://api.anthropic.com/v1/messages”,{ method:”POST”, headers:{“Content-Type”:”application/json”}, body:JSON.stringify({ model:”claude-sonnet-4-20250514″, max_tokens:2000, messages:[{role:”user”,content:prompt}] }) }); const d = await res.json(); const raw = d.content?.find(b=>b.type===”text”)?.text||””; const clean = raw.replace(/“`json|“`/g,””).trim(); setSeoData(JSON.parse(clean)); } catch(e) { setError(“SEO research failed. Please try again.”); setStage(STAGES.INPUT); } finally { clearInterval(t); } }, [topic, industry, pageType, loc, tone, extra]); // ── Step 2: Approve & Build HTML ────────────────────────────────────────── const buildHTML = useCallback(async () => { if (!seoData) return; setStage(STAGES.BUILDING); setHtmlLoading(true); setHtmlOut(“”); let i=0; setHtmlLoadMsg(htmlMsgs[0]); const t = setInterval(()=>{ i=(i+1)%htmlMsgs.length; setHtmlLoadMsg(htmlMsgs[i]); }, 2500); const kws = seoData.keywords?.map(k=>`• ${k.keyword} (${k.intent}, KD${k.difficulty})`).join(“\n”)||””; const lsi = seoData.brief?.lsiKeywords?.join(“, “)||””; const paas = seoData.brief?.questions?.map((q,i)=>`${i+1}. ${q}`).join(“\n”)||””; const secs = seoData.brief?.sections?.map((s,i)=>`${i+1}. ${s.heading}: ${s.tip}`).join(“\n”)||””; const prompt = `You are an expert web developer and SEO copywriter for Galaxy Website Design. Build a complete, production-ready Elementor HTML widget for this page. PAGE DETAILS: Topic: ${topic} Industry: ${industry} Page Type: ${pageType} Location: ${loc||”National UK”} Tone: ${tone||”Professional & Authoritative”} Extra notes: ${extra||”none”} SEO PACKAGE TO USE: Focus Keyword: ${seoData.meta?.focusKW||””} H1: ${seoData.meta?.h1||””} Meta Title: ${seoData.meta?.title||””} Meta Description: ${seoData.meta?.description||””} URL Slug: ${seoData.meta?.slug||””} Schema Type: ${seoData.meta?.schemaType||””} PRIMARY KEYWORDS (use these throughout): ${kws} LSI KEYWORDS (weave naturally into copy): ${lsi} PEOPLE ALSO ASK (use as FAQ headings): ${paas} PAGE SECTIONS (build in this order): ${secs} CONTENT TIPS: ${seoData.brief?.contentTips?.join(“\n”)||””} STRICT REQUIREMENTS: 1. Output ONLY raw HTML — no markdown fences, no explanation before or after 2. Start with an HTML comment block containing the RankMath settings (title, desc, slug, focus KW, schema) 3. NO , , , or tags — this goes in an Elementor HTML widget 4. Include {/* Header */}