"use strict";exports.id=7788,exports.ids=[7788],exports.modules={82002:(e,t,o)=>{o.d(t,{Lz:()=>m});var r=o(65822),a=o(86485),i=o(10375),n=o(6521),l=o.n(n),s=o(34490),d=o(6632);let c=new Map;async function p(e){let t=await (0,d.FE)("security_config"),o=t?.maxLoginAttempts??5;if(0===o)return;let r=c.get(e);if(r){if(Date.now()-r.lastAttempt>36e5){c.delete(e);return}r.count>=o?await new Promise(e=>setTimeout(e,3e4)):r.count>=Math.floor(o/2)&&await new Promise(e=>setTimeout(e,2e3))}}let m={adapter:(0,r.N)(s.prisma),session:{strategy:"jwt"},pages:{signIn:"/login",newUser:"/dashboard"},providers:[(0,a.Z)({name:"credentials",credentials:{email:{label:"Email",type:"email"},password:{label:"Password",type:"password"}},async authorize(e){if(!e?.email||!e?.password)throw Error("Email and password are required");try{var t;await p(e.email);let o=await s.prisma.user.findUnique({where:{email:e.email}});if(!o||!o.password||!await l().compare(e.password,o.password))throw function(e){let t=c.get(e);t?(t.count+=1,t.lastAttempt=Date.now()):c.set(e,{count:1,lastAttempt:Date.now()})}(e.email),Error("Invalid email or password");return t=e.email,c.delete(t),{id:o.id,email:o.email,name:o.name,image:o.image}}catch(e){if(e?.message?.includes("Invalid")||e?.message?.includes("required"))throw e;throw console.error("[auth] DB error during login:",e),Error("Authentication service temporarily unavailable")}}}),...process.env.GOOGLE_CLIENT_ID&&process.env.GOOGLE_CLIENT_SECRET?[(0,i.Z)({clientId:process.env.GOOGLE_CLIENT_ID,clientSecret:process.env.GOOGLE_CLIENT_SECRET})]:[]],callbacks:{session:async({session:e,token:t})=>(t&&e.user&&(e.user.id=t.sub,e.user.role=t.role),e),async jwt({token:e,user:t}){if(t){e.sub=t.id;try{let o=await s.prisma.user.findUnique({where:{id:t.id},select:{role:!0}});e.role=o?.role??null}catch(t){console.warn("[auth] DB error in JWT callback, defaulting role to null"),e.role=null}}return e}}}},44986:(e,t,o)=>{function r(e){return e.replace(/<img\s[^>]*\/?>/gi,"")}function a(e,t,o){let r=RegExp(`(<!-- SECTION:${t} -->)([\\s\\S]*?)(<!-- \\/SECTION:${t} -->)`,"g");return e.replace(r,(e,t,r,a)=>`${t}${o(r)}${a}`)}function i(e){let t=e;return t=a(t,"guarantee",r),t=a(t,"faq",r),t=(t=a(t,"footer",r)).replace(/class="([^"]*(?:flex-col md:flex-row|flex-row)[^"]*)"/g,(e,t)=>/\bgap-/.test(t)?e:`class="${t} gap-8 md:gap-12"`)}o.d(t,{_:()=>i})},10339:(e,t,o)=>{o.d(t,{f:()=>r});let r=new(o(36168)).ZP({baseURL:"https://openrouter.ai/api/v1",apiKey:process.env.OPENROUTER_API_KEY})},54995:(e,t,o)=>{function r(e,t){let o=e.sections.find(e=>e.type===t);return o?.prompt||""}o.d(t,{P0:()=>a,uu:()=>n,R$:()=>i,Vb:()=>r});let a=[{name:"Dark Persuader",description:"Dark-themed, high-contrast sales page with dramatic hero and emotional storytelling. Uses dark backgrounds (#0a0a0f, #111827) with accent color highlights on key words. Very cinematic and immersive.",bestFor:"luxury, premium, high-end products",colorScheme:"dark backgrounds (#0a0a0f, #111827) with accent color highlights",sections:[{type:"hero",prompt:`Dark full-screen hero (min-h-[80vh], bg-[#0a0a0f]).
      - Top: thin accent-colored banner bar with a provocative pain-point question
      - Center: split layout with gap — <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12 lg:gap-16"> — bold headline on one side (w-full md:w-[55%], text-5xl lg:text-7xl font-black, white text with KEY WORDS in accent color), product image on opposite side (w-full md:w-[45%], mb-6 md:mb-0)
      - Below headline: 2-line subtitle addressing the pain point directly
      - CTA button: accent-colored, rounded-lg, px-8 py-4
      - Product image should show dimensions/scale annotations if relevant`},{type:"painPoints",prompt:`"Do these scenarios sound familiar?" section on dark bg:
      - Bold provocative headline
      - Image on one side (40%)
      - 4-5 pain point cards on the other side (60%): dark cards with red/accent left border, X icon, bold highlighted problem phrase + description
      - Closing paragraph that validates the frustration`},{type:"beforeAfter",prompt:`Dark section with centered headline "شاهد الفرق بنفسك" / "See the Difference". 
      2 side-by-side cards: "Before" card (dark bg, red/muted accent) showing the problem scenario and "After" card (dark bg, green/accent) showing the result.
      Each card: bold label at top (BEFORE/AFTER or قبل/بعد), descriptive paragraph, relevant icon or image.
      Below: a bold testimonial quote from a user.`},{type:"features",prompt:`Dark cards (bg-[#1a1a2e] or bg-gray-900) with numbered circles (1, 2, 3) at top.
      Each card has: number in accent-colored circle, bold title, short description.
      Display in 3-column grid. Clean, minimal text. Below the cards: a CTA button.`},{type:"stats",prompt:`Full-width dark banner with subtle background image overlay (opacity-20).
      4 big stats in a row: large accent-colored number (text-5xl font-bold) + small label below.
      Example: "30+" وظيفة مدمجة | "100%" فولاذ مقاوم | "0" تنازل عن الجودة | "مدى الحياة" ضمان شامل.
      Add a compelling one-line headline above.`},{type:"story",prompt:`Founder's story section: split layout — personal photo (large, rounded-2xl) on one side, story text on the other.
      Quote headline at top (text-3xl, italic, in quotes).
      Story paragraphs with sub-headings in accent color.
      Key phrases underlined or bold. Very personal and emotional tone.`},{type:"scenario",prompt:`"Imagine your next..." future-pacing section. Dark overlay card (bg-black/80, rounded-2xl, p-10) centered.
      Scenario description paragraph at top. Then 2x2 grid of capability bullets (bordered cards with dot icon + text).
      Emotional closing paragraph with highlighted key phrases. CTA button at bottom.`},{type:"guarantee",prompt:`Dark card (bg-gray-900, rounded-2xl, p-10, border border-accent/30) centered on page.
      Large guarantee badge: circular div with accent border (w-32 h-32 rounded-full border-4 border-accent flex items-center justify-center) containing bold text "30 يوم ضمان" or "30-Day Guarantee".
      Below badge: guarantee headline, detailed guarantee text explaining the policy, trust elements.`},{type:"faq",prompt:`Dark section with centered headline. 5-6 FAQ items as expandable-looking cards (dark bg, rounded-xl, p-6, mb-4).
      Each card: question in bold (text-lg font-bold) with a ▼ indicator, answer text below in gray-300.
      Display ALL items as open/visible (since this is static HTML).`},{type:"cta",prompt:'Two-column order section: pricing breakdown table on right (components, benefits, values), order form on left (name, phone, email, address fields). Price anchoring: original price crossed out, sale price in large accent color. "Order now" CTA button spanning full width of form.'}]},{name:"Premium Showcase",description:"Clean premium feel with alternating light/dark sections. Product-centric with large imagery. Uses white space generously on light sections and deep dark on contrast sections.",bestFor:"premium products, food, restaurants",colorScheme:"alternating light/dark sections with generous white space",sections:[{type:"hero",prompt:`Split hero on clean white/light background:
      - Use flex with MANDATORY gap: <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12 lg:gap-16">
      - One side (w-full md:w-[55%]): very large headline (text-5xl lg:text-6xl font-bold), short pain-point subtitle, and a solid accent-colored CTA button (rounded-full, px-10 py-4)
      - Other side (w-full md:w-[45%], mb-6 md:mb-0): large product image floating with shadow-2xl, clean background
      - Above headline: small colored badge/label with category text
      - Below CTA: small trust text (e.g., "★★★★★ rated by 500+ customers")`},{type:"painPoints",prompt:`Light gray background (bg-gray-50). Centered headline asking a relatable question.
      Below: 3-4 pain cards in a single column, each as a full-width horizontal strip with:
      red/warning icon on left, pain statement in bold, elaboration text in gray. Subtle left border in red.
      Closing paragraph that transitions to the solution.`},{type:"beforeAfter",prompt:`White/light section. Clean headline centered. 
      Two elegant cards side by side (bg-white, shadow-lg, rounded-2xl, overflow-hidden).
      Each card: colored header strip (red for Before, green for After), title, image placeholder area, bullet points describing the scenario.
      Subtle animation feel with hover:shadow-xl transition.`},{type:"features",prompt:`Alternating zigzag layout on white bg: use <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12"> for each feature row.
      Odd features have image on LEFT (w-full md:w-[50%], rounded-2xl, shadow-xl inside fixed-height container h-80, mb-6 md:mb-0) with text on RIGHT (w-full md:w-[50%], headline + description + checkmark bullets), even features flip the order.
      Each feature section has py-12. Images inside fixed containers.`},{type:"stats",prompt:`Accent-colored full-width banner (gradient from primary to secondary color).
      White text. 4 stats in a row with large numbers + labels. Clean and bold.`},{type:"story",prompt:`White background story section. Large pull-quote in italics with oversized quotation marks (text-8xl, opacity-10).
      Below: 2-column text with story paragraphs. Key phrases in accent color.
      Clean, editorial feel.`},{type:"scenario",prompt:`Light section with centered headline "How It Works" / "Your Journey".
      3 steps displayed horizontally with numbered circles (1→2→3), connecting dashed line between them.
      Each step: number circle with accent border, step title (bold), description paragraph, and relevant icon.`},{type:"guarantee",prompt:`Light section with centered content. Large circular guarantee badge (w-40 h-40 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center text-white).
      Badge text: "ضمان 100%" or "100% Guarantee". Below: bold headline, descriptive paragraph, trust icons as Unicode symbols.`},{type:"faq",prompt:`Clean white section. Centered headline. FAQ items as clean bordered cards (border border-gray-200 rounded-xl p-6 mb-3).
      Question in bold with accent-colored "+" icon on the right. Answer in text-gray-600.
      All items displayed open.`},{type:"cta",prompt:`Full-width section with gradient background. Two columns: Left side — Large centered headline, subtitle, pricing (crossed-out original + large current price), trust elements (guarantee badge, free shipping, payment icons as text). Right side — Contact/order form card (bg-white/10 backdrop-blur rounded-2xl p-8): name, email, phone fields + large CTA button + trust text below.`}]},{name:"Bold Impact",description:"High-energy, bold design with oversized typography, geometric accents, and strong color blocks. Uses the product's natural colors aggressively. Heavy visual impact.",bestFor:"consumer products, fitness, energy",colorScheme:"strong color blocks with product's natural colors",sections:[{type:"hero",prompt:`Full-bleed hero with product image as background (absolute, object-cover, full h/w) with a strong gradient overlay (from-black/80 via-black/50 to-transparent).
      Content centered vertically (flex items-center min-h-[80vh]):
      - Oversized headline (text-6xl lg:text-8xl font-black, tracking-tight)
      - Key words in the headline wrapped in accent-colored <span>
      - Thin subtitle line (text-lg, opacity-80)
      - Large ghost/outline CTA button (border-2, bg-transparent, hover fills with color)`},{type:"painPoints",prompt:`Dark section. Large provocative headline (text-4xl font-bold).
      Pain points displayed as a numbered list (01, 02, 03, 04, 05) in large muted numbers (text-6xl opacity-20) with bold pain statement overlapping.
      Each pain item is a row: big number left, text right with highlighted key phrase.
      Closing: emotional paragraph with accent-colored key words.`},{type:"beforeAfter",prompt:`High-contrast section. Giant "VS" or "مقابل" text in center (text-8xl font-black opacity-10).
      Two columns: Before (dark card, red top border) and After (dark card, accent top border).
      Each: bold label, 3-4 bullet points comparing scenarios. Bold, punchy text.`},{type:"features",prompt:`Full-width sections, each feature as a horizontal strip alternating dark/slightly-lighter-dark backgrounds.
      Each strip: feature image in fixed container (w-1/3, h-72, overflow-hidden rounded-xl) on one side, text content (headline, description, bullet points with checkmarks) on the other.
      Alternate image left/right. Bold headlines, accent-colored checkmark icons.`},{type:"stats",prompt:`Black background with a grid of 4 stat blocks. Each block:
      Giant number in accent color (text-7xl font-black), label below (text-sm uppercase tracking-widest).
      Separated by thin vertical lines (border-r).`},{type:"story",prompt:`Emotional storytelling card: dark rounded card (bg-gradient-to-br from-gray-900 to-gray-800, rounded-3xl, p-12).
      Large italic text describing a transformation narrative. Key emotional words in accent color and bold.
      No images — pure text impact with generous line-height.`},{type:"scenario",prompt:`"Imagine..." section. Background image with dark overlay. Content in a max-w-3xl centered card.
      Scenario headline, then 2x2 grid of capability items (each with a colored dot + bold text).
      Emotional conclusion paragraph. Accent-colored CTA button.`},{type:"guarantee",prompt:`Full-width accent-colored band. Large white text: guarantee statement. Circular badge floating on one side.
      Below: 3 trust elements in a row (guarantee period, refund policy, support access).`},{type:"faq",prompt:`Dark section. Bold headline. FAQ items as large horizontal strips with alternating slightly different dark backgrounds.
      Question in bold accent-colored text (text-xl). Answer below in white/gray. No borders, just spacing.`},{type:"cta",prompt:`Dramatic split: half accent-colored background with contact/order form (name, email, phone fields + submit CTA button), half dark with product image floating.
      Text above form: bold headline, price (original crossed out + sale price).
      Urgency text below button (limited time, etc).`}]},{name:"Storyteller",description:"Narrative-driven long-form sales page with emotional hooks and future-pacing. Strong product images combined with persuasive storytelling text.",bestFor:"personal brands, services, consulting",colorScheme:"dark theme with accent color highlights",sections:[{type:"hero",prompt:`Dark hero (bg-[#0d1117]) with split layout:
      - Use flex with MANDATORY gap: <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12 lg:gap-16">
      - One side (w-full md:w-[55%]): massive headline (text-5xl lg:text-7xl font-black, text-white) with key words in accent color, subtitle, and CTA button
      - Other side (w-full md:w-[45%], mb-6 md:mb-0): product image in a fixed container (h-96, rounded-2xl, overflow-hidden, shadow-2xl)
      - Above headline: thin banner bar with a pain-point question in accent color
      - Below CTA: small gray text "Join 500+ satisfied customers"`},{type:"painPoints",prompt:`Long-form pain section on dark bg. Start with empathetic headline ("If you feel frustrated, you are not alone").
      Split layout: product-in-use image on one side (40%, h-80 container), flowing text on the other (60%).
      Describe 3-4 pain scenarios in conversational paragraphs, with key phrases in bold accent color.
      End with: "The problem isn't you — it's the tools."`},{type:"beforeAfter",prompt:`Narrative before/after section. Not side-by-side — instead a STORY format:
      "Before" narrative paragraph describing the frustrating experience (with image).
      A visual divider or arrow (→ or ←).
      "After" narrative paragraph describing the transformed experience (with image).
      Very personal, emotional, first-person feel.`},{type:"features",prompt:`Dark cards section with product images. Headline: bold statement about the solution.
      Below: 3 feature cards in a row, each with:
      - Product image at top in fixed container (h-48, overflow-hidden, rounded-t-xl)
      - Numbered circle (accent border) 
      - Bold title and 2-line description
      Below cards: centered CTA button.`},{type:"stats",prompt:'Subtle stats strip: dark bg, 4 stats horizontally. Numbers in accent color (text-4xl font-bold), labels in gray below. Headline above: "Designed for performance. Proven by numbers."'},{type:"story",prompt:`The heart of the page. Full-width dark section with max-w-3xl centered text.
      Founder's personal story told in first person: childhood/origin, the frustrating experience, the "aha" moment, building the product, the mission.
      Sub-headings in accent color. Key emotional phrases in bold.
      Include a placeholder line for founder's name. Very long, very personal.`},{type:"scenario",prompt:`Future-pacing section: "Imagine your next adventure..." in a visually distinct card (bg-gray-900/80, rounded-2xl, backdrop-blur).
      Paint a vivid picture in 2 paragraphs. Then list 4 things the product enables in bordered mini-cards (grid 2x2).
      End with emotional statement in bold + CTA button.`},{type:"guarantee",prompt:`Personal guarantee section: founder's photo/avatar circle, quote in italics: "I personally guarantee...".
      Below: guarantee details in a warm-toned card (bg-amber-900/20, border border-amber-500/30, rounded-2xl).
      Trust text with specific guarantee terms.`},{type:"faq",prompt:`Conversational FAQ section on dark bg. Headline: "أسئلة يسألها عملاؤنا" / "Questions our customers ask".
      FAQ items styled as chat-like bubbles: question in one styled div (bg-gray-800 rounded-2xl p-5), answer in another (bg-gray-700/50 rounded-2xl p-5).`},{type:"cta",prompt:`Order section with headline "Get the strongest tool today". Two columns:
      Right: pricing table with components/benefits/values, original price crossed, sale price large in accent.
      Left: simple form fields (name, phone, email, address) + large CTA button + trust text.`}]},{name:"Visual Explorer",description:"Image-heavy, magazine-style layout. Large cinematic photos drive the narrative. Minimal text per section but very impactful. Light or mixed backgrounds.",bestFor:"travel, food, visual products",colorScheme:"light or mixed backgrounds",sections:[{type:"hero",prompt:`Dramatic full-bleed image hero: product/lifestyle image covers entire viewport (min-h-[80vh], absolute, object-cover).
      Dark gradient overlay (bg-gradient-to-t from-black via-black/60 to-transparent).
      Content at BOTTOM (not center): headline (text-5xl font-bold white), one-line subtitle, CTA button.
      Content uses "absolute bottom-0 pb-20" to position at bottom of hero.`},{type:"painPoints",prompt:`White/light section. Large headline centered.
      Below: 2-column layout — large moody image on left (h-96, rounded-2xl, overflow-hidden) showing the problem context.
      Right: 4 pain bullets as clean list items with red dot markers, bold key phrases, gray description text.
      Clean and editorial.`},{type:"beforeAfter",prompt:`Image-driven before/after: two large images side by side (each h-80, rounded-2xl, overflow-hidden).
      Small label overlays on each image (absolute, bottom-4, left-4, bg-black/60, px-4 py-2, rounded-lg).
      "Before" image has desaturated/muted filter description, "After" image is vibrant.
      Caption text below each.`},{type:"features",prompt:`Magazine-style feature blocks: each feature is a full-width row with LARGE image (60%, h-96, rounded-2xl inside fixed container) and text (40%) side by side.
      Alternate left/right. Text has: small label/number in accent, bold headline (text-3xl), description paragraph, optional checkmark list.
      Spacing (py-12) between features. Images are the STAR — text supports them.`},{type:"stats",prompt:"Clean stats row on accent-colored background. 4 white stat blocks with numbers + labels. Minimal design."},{type:"story",prompt:`Full-width cinematic image (h-80, object-cover) as section break. Then below: centered text block with the brand story in clean paragraphs.
      Headline in large bold. Sub-sections with accent-colored titles. Max-w-2xl for comfortable reading.`},{type:"scenario",prompt:`Image-driven scenario: large background image with dark overlay. Centered text block describing the transformation.
      3 capability cards at bottom overlapping the dark section (using negative margin): white cards with icon, title, description.`},{type:"guarantee",prompt:`Clean minimal guarantee section. Single centered circular badge (large, gradient bg).
      One bold line of guarantee text below. Simple, no clutter.`},{type:"faq",prompt:`Clean white section with elegant FAQ layout. Centered max-w-2xl.
      FAQ items with bottom borders (border-b border-gray-200 py-6).
      Question in bold, answer in gray-600. Minimal and elegant.`},{type:"cta",prompt:`Clean CTA section on dark background. Two columns: Left — headline, price (large), guarantee text. Right — minimal form card (bg-gray-800/50 rounded-2xl p-8 border border-gray-700): name and email fields + CTA button. Simple and direct.`}]},{name:"Technical Authority",description:"Data-driven, specification-focused design. Appeals to analytical buyers. Clean layouts with tables, spec sheets, comparison charts. Professional and authoritative.",bestFor:"technology, SaaS, software",colorScheme:"clean professional with dark accents",sections:[{type:"hero",prompt:`Clean dark hero (bg-[#0f172a]). Split layout with MANDATORY gap:
      - <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12 lg:gap-16">
      - Left/right (w-full md:w-[50%]): headline (text-4xl lg:text-5xl font-bold), subtitle addressing the problem, accent-colored CTA button
      - Other side (w-full md:w-[50%], mb-6 md:mb-0): product image with dimension annotations (use absolute positioned text labels showing measurements/specs)
      - Below hero: thin accent-colored line separator`},{type:"painPoints",prompt:`Light gray section. Headline "The Problem with Traditional [Products]".
      Comparison table: 2 columns — "Traditional Products" vs "Our Product". 4-5 rows comparing features.
      Table has clean borders, header in dark bg with white text. Winner features in accent color with ✓, losers in red with ✗.`},{type:"beforeAfter",prompt:`Comparison table format: 3-column table — Feature | Without Product | With Product.
      5-6 rows comparing key metrics. Without column uses ✗ in red, With column uses ✓ in green.
      Clean table with headers in dark bg. Data-driven, not emotional.`},{type:"features",prompt:`White background. Features displayed as specification cards.
      Each card: accent top border (h-1), white body, technical icon (SVG), spec title (bold), value/description, and a metric or number.
      Grid of 2x3 or 3x2. Clean, data-driven feel.`},{type:"stats",prompt:`Dark banner. "Performance Metrics" headline. 4 stats with large numbers.
      Each stat has: number (accent, text-5xl), label, and a small progress bar or indicator below it.`},{type:"story",prompt:`"Our Engineering Philosophy" section. Clean layout with heading, then 3 principles displayed as numbered blocks (01., 02., 03.) with bold titles and paragraph descriptions.
      Professional tone. Include technical materials/process mentions.`},{type:"scenario",prompt:`"Real-World Applications" section. 3-4 use cases in horizontal cards. Each card: scenario title, description, and relevant icon.
      Clean and professional — no emotional fluff, just practical applications.`},{type:"guarantee",prompt:`Certification-style guarantee section. Looks like an official document/certificate.
      Bordered card with header stripe. Guarantee terms listed as numbered points.
      Official seal/badge icon and "Certified Quality Guarantee" text.`},{type:"faq",prompt:`Technical FAQ section. Clean layout with accordion-style items.
      Questions are specific and technical. Answers include specs, numbers, measurements.
      Clean borders, professional typography.`},{type:"cta",prompt:`Two-column: product spec summary table on one side (materials, dimensions, weight, functions), order section on the other with price and CTA button.
      Include certification badges or guarantee text.`}]},{name:"Elegant Beauty",description:"Clean, elegant, premium design inspired by luxury beauty/skincare brands. White/cream backgrounds with dark green or rose gold accents. Circular icon badges, clean typography, generous white space. Feels luxurious and trustworthy.",bestFor:"skincare, cosmetics, beauty, wellness",colorScheme:"white/cream backgrounds with dark green or rose gold accents",sections:[{type:"hero",prompt:`Clean white/cream hero (bg-[#faf8f5] or bg-white, min-h-[80vh], flex items-center).
      Split layout with MANDATORY gap: <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12 lg:gap-16">
      Product image on one side (w-full md:w-[45%], inside rounded-2xl shadow-xl container h-96, mb-6 md:mb-0), 
      text on the other (w-full md:w-[55%]): small accent-colored badge "عرض خاص" or "Special Offer" at top,
      large headline (text-4xl lg:text-5xl font-bold, text-gray-900) with key words in accent color (text-emerald-700 or text-rose-600),
      subtitle paragraph in gray-600,
      large CTA button (bg-emerald-700 text-white px-10 py-4 rounded-full text-lg font-bold hover:bg-emerald-800 transition),
      star ratings below button (★★★★★ text-amber-400).`},{type:"painPoints",prompt:`White section with centered headline. 
      3 benefit cards in a row (bg-white shadow-md rounded-2xl p-8 text-center border border-gray-100).
      Each card: circular icon badge at top (w-16 h-16 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center text-2xl mx-auto mb-4) with Unicode icon,
      bold title (text-lg font-bold text-gray-900), description paragraph (text-gray-600).`},{type:"beforeAfter",prompt:`Section with headline "شاهدي النتائج الحقيقية" / "See Real Results".
      2 side-by-side image cards (each bg-white rounded-2xl shadow-lg overflow-hidden).
      Each card: image at top (h-64 object-cover), colored label strip below (red/coral for Before, emerald for After),
      customer name and testimonial quote in p-6 area below. 
      Below cards: centered bold text with stats "93% of customers saw results in 14 days".`},{type:"features",prompt:`Cream/white section. Alternating zigzag layout.
      Each feature row: <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12"> — image on one side (w-full md:w-[50%], h-72 rounded-2xl overflow-hidden shadow-md, mb-6 md:mb-0) and text on other (w-full md:w-[50%]).
      Text includes: small accent label, bold headline (text-2xl), description paragraph, 
      3 checkmark bullets (✓ in accent circle + text). Generous spacing py-16.`},{type:"stats",prompt:`Full-width accent-colored section (bg-emerald-700 or bg-rose-700 text-white py-16).
      4 stats in horizontal row. Each: large number (text-5xl font-bold), label below (text-sm opacity-80).
      Clean, elegant.`},{type:"story",prompt:`White section with max-w-3xl centered. 
      Headline "قصتنا" / "Our Story". 
      Clean paragraphs with elegant typography (text-lg leading-relaxed text-gray-700).
      Key phrases in accent color. Include brand values and mission.
      Optional founder quote in italic with quotation marks.`},{type:"scenario",prompt:`"How to Use" section with cream bg. 
      3 steps displayed horizontally with connecting dotted line between them.
      Each step: circular numbered badge (w-14 h-14 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 text-white font-bold text-xl flex items-center justify-center mx-auto mb-4),
      step title (bold), short description.`},{type:"guarantee",prompt:`Clean white section with centered content. 
      Large circular guarantee badge (w-36 h-36 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center mx-auto mb-6 shadow-lg):
      inside badge: bold white text "ضمان 30 يوم" / "30-Day Guarantee" (text-center font-bold text-white text-sm).
      Below badge: bold headline, descriptive guarantee paragraph, trust icons row.`},{type:"faq",prompt:`White section with centered headline "أسئلة شائعة" / "FAQ".
      FAQ items in max-w-2xl mx-auto. Each item: bg-gray-50 rounded-xl p-6 mb-3 border border-gray-100.
      Question bold (text-gray-900 font-bold), answer below (text-gray-600 mt-2).
      All items visible/open.`},{type:"cta",prompt:`Clean CTA section with light accent bg (bg-emerald-50 or bg-rose-50 py-12).
      Centered content: bold headline, subtitle, 
      clean form card (bg-white rounded-2xl shadow-xl p-8 max-w-md mx-auto):
      form fields (name, phone, country) with labels, 
      inputs styled: w-full p-3 rounded-lg border border-gray-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 text-gray-900.
      Large CTA button (bg-emerald-700 text-white w-full py-4 rounded-lg font-bold text-lg).
      Trust text below form.`}]},{name:"Social Proof Master",description:"Trust-centric layout that leads with social proof. Every section reinforces credibility through reviews, numbers, comparisons, and guarantees. Uses warm backgrounds with teal/navy accents. Ideal for products needing trust-building.",bestFor:"health, supplements, fitness",colorScheme:"warm backgrounds with teal/navy accents",sections:[{type:"hero",prompt:`Warm gradient hero (bg-gradient-to-br from-slate-900 to-slate-800, min-h-[80vh], flex items-center).
      Split layout with MANDATORY gap: <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12 lg:gap-16">
      Text side (w-full md:w-[55%]) with trust badge at top ("⭐ Rated #1 by 500+ customers"),
      large headline (text-5xl font-bold text-white) with key words in teal accent (text-teal-400),
      star rating row (★★★★★ in amber-400), review count text,
      CTA button (bg-teal-500 text-white px-10 py-4 rounded-xl font-bold).
      Product image on other side (w-full md:w-[45%], mb-6 md:mb-0, rounded-2xl shadow-2xl h-96 container).`},{type:"painPoints",prompt:`Dark section (bg-slate-900). Headline: "هل تعاني من...؟" / "Do you struggle with...?"
      Pain cards as horizontal strips with avatar circles on left (w-12 h-12 rounded-full bg-red-900/30 text-red-400 flex items-center justify-center text-xl),
      pain statement in bold, elaboration in gray-400.
      Feels like real people sharing their frustrations.`},{type:"beforeAfter",prompt:`Section with large centered headline. 
      Two cards: Before (bg-slate-800 border-red-500/30 border rounded-2xl p-8) and After (bg-slate-800 border-teal-500/30 border rounded-2xl p-8).
      Each card: colored label badge, image (h-56 rounded-xl overflow-hidden), 
      3-4 descriptive bullet points.
      Centered stat below: "تحسن بنسبة 87%" / "87% improvement".`},{type:"features",prompt:`Dark section. Features as cards in 3-column grid (bg-slate-800/50 rounded-2xl p-8 border border-slate-700).
      Each card: product image at top (h-48 rounded-xl overflow-hidden), 
      teal accent line (h-1 w-12 bg-teal-500 my-4),
      bold title, description, and a mini customer quote in italics at bottom.`},{type:"stats",prompt:`Full-width teal section (bg-teal-600 text-white py-16).
      4 stats horizontally. Large numbers (text-5xl font-bold), labels (text-sm opacity-90).`},{type:"story",prompt:`Testimonials showcase section (bg-slate-900). Headline: "ماذا يقول عملاؤنا" / "What our customers say".
      3 testimonial cards in a row (bg-slate-800 rounded-2xl p-8).
      Each: star rating (★★★★★ text-amber-400 text-lg), quote text in italics, 
      customer info at bottom (name, title, small avatar circle with initials).`},{type:"scenario",prompt:`How it works section (bg-slate-800). 3 steps horizontally with numbered circles (bg-teal-500 text-white w-12 h-12 rounded-full).
      Each step: number badge, title, description. 
      Connecting arrows between steps (→).`},{type:"guarantee",prompt:`Dark section with prominent guarantee card centered (bg-gradient-to-br from-amber-900/30 to-amber-800/20 border border-amber-500/40 rounded-2xl p-10 max-w-2xl mx-auto).
      Large guarantee badge (w-28 h-28 rounded-full bg-amber-500 mx-auto mb-6 flex items-center justify-center).
      Bold guarantee headline, detailed terms, refund process steps.`},{type:"faq",prompt:`Dark section. FAQ items with clean borders (border-b border-slate-700 py-6).
      Question in bold teal text (text-teal-400 font-bold text-lg), answer in gray-300.
      Max-w-3xl centered. All items open.`},{type:"cta",prompt:`Split section: pricing card on one side (bg-slate-800 rounded-2xl p-8 border border-slate-700):
      price anchoring (original crossed out in gray, current in large teal text-3xl font-bold),
      included benefits list with ✓ checkmarks in teal.
      Form on other side with dark-styled inputs (bg-slate-700 border border-slate-600 text-white).
      Large CTA button (bg-teal-500 w-full py-4 rounded-xl font-bold text-lg).
      Trust row below: guarantee badge, shipping info, payment security text.`}]},{name:"Stripe Clarity",description:"Clean, professional SaaS-inspired design with purple gradients and generous whitespace. Focused on clarity and conversion with structured information hierarchy.",bestFor:"SaaS, fintech, digital platforms, APIs, B2B software",colorScheme:"White (#fff) with purple gradients (#635BFF → #0A2540), light gray (#f6f9fc)",sections:[{type:"hero",prompt:`Clean white hero (bg-white, min-h-[80vh], flex items-center).
      Split layout: <div class="flex flex-col md:flex-row items-center gap-6 md:gap-10">
      Text side (w-full md:w-[55%]): small purple badge "🚀 New Release" at top,
      large headline (text-4xl lg:text-6xl font-bold text-[#0A2540]) with key words in purple (#635BFF),
      subtitle paragraph (text-gray-600 text-lg), 
      CTA button (bg-[#635BFF] text-white px-8 py-4 rounded-full font-bold hover:bg-[#5349e0] transition).
      Product side (w-full md:w-[45%], mb-6 md:mb-0): product screenshot in rounded-xl shadow-2xl container with subtle purple border.`},{type:"features",prompt:`White section (bg-white py-20). Centered headline (text-3xl font-bold text-[#0A2540]).
      3-column grid of feature cards (bg-[#f6f9fc] rounded-2xl p-8 border border-gray-100 hover:shadow-lg transition).
      Each card: Unicode icon in purple circle (w-12 h-12 rounded-full bg-[#635BFF]/10 text-[#635BFF] flex items-center justify-center text-xl mb-4),
      bold title (text-lg font-bold text-[#0A2540] mb-2), description (text-gray-600).`},{type:"pricing",prompt:`Light gray section (bg-[#f6f9fc] py-20). Centered headline "Choose Your Plan".
      3 pricing cards in a row (bg-white rounded-2xl shadow-md p-8 border border-gray-200).
      Middle card HIGHLIGHTED: border-2 border-[#635BFF] shadow-xl with "Most Popular" badge (bg-[#635BFF] text-white text-xs px-3 py-1 rounded-full absolute -top-3).
      Each card: plan name (text-xl font-bold), price (text-4xl font-bold text-[#0A2540]), period (/month text-gray-500),
      features list with ✓ in purple, CTA button (middle: bg-[#635BFF] text-white, others: border border-[#635BFF] text-[#635BFF]).
      NO images in pricing section.`},{type:"trustBadges",prompt:`White section (bg-white py-12). Centered label "Trusted by industry leaders" (text-sm uppercase tracking-widest text-gray-400 mb-8).
      Row of 6 company logos as text placeholders in gray (text-2xl font-bold text-gray-300 hover:text-gray-500 transition).
      Display in flex row with items-center justify-around. Grayscale feel.`},{type:"stats",prompt:`Purple gradient section (bg-gradient-to-r from-[#635BFF] to-[#0A2540] text-white py-16).
      4 stats in horizontal row. Each: large number (text-5xl font-bold), label (text-sm opacity-80).
      Separated by thin white/20 vertical lines.`},{type:"faq",prompt:`White section (bg-white py-20). Centered headline "Frequently Asked Questions" (text-3xl font-bold text-[#0A2540]).
      FAQ items in max-w-3xl mx-auto. Each: bg-[#f6f9fc] rounded-xl p-6 mb-3 border border-gray-100.
      Question bold (text-[#0A2540] font-bold text-lg), answer (text-gray-600 mt-2). All items open.`},{type:"cta",prompt:`Purple gradient section (bg-gradient-to-br from-[#635BFF] to-[#0A2540] py-20 text-white).
      Centered content: bold headline (text-3xl font-bold), subtitle (opacity-80),
      form card (bg-white/10 backdrop-blur rounded-2xl p-8 max-w-md mx-auto border border-white/20):
      inputs (bg-white/10 border border-white/20 text-white placeholder-white/50 rounded-lg p-4 w-full mb-4),
      CTA button (bg-white text-[#635BFF] w-full py-4 rounded-lg font-bold text-lg hover:bg-gray-100).`}]},{name:"Apple Minimal",description:"Ultra-minimal, cinematic design with massive typography and generous whitespace. Product-first approach with dramatic visual impact and restrained color palette.",bestFor:"premium products, electronics, luxury fashion, high-end brands",colorScheme:"Black/white (#000, #f5f5f7) with gold accents (#b08d57)",sections:[{type:"hero",prompt:`Full-screen cinematic hero (min-h-[80vh] bg-black flex items-center justify-center text-center).
      Centered content: massive headline (text-5xl md:text-7xl lg:text-8xl font-light text-white tracking-tight leading-tight),
      KEY words in font-bold. Thin subtitle below (text-xl text-gray-400 font-light mt-6).
      Single CTA button (bg-white text-black px-8 py-4 rounded-full font-medium hover:bg-gray-200 transition mt-8).
      Product image below content (max-w-3xl mx-auto mt-12, rounded-2xl shadow-2xl).`},{type:"gallery",prompt:`Alternating black/white sections. Each product image takes FULL WIDTH in a large container (h-[500px] overflow-hidden).
      Image centered with object-contain on white bg or object-cover on black bg.
      Minimal caption text below each: small uppercase label (text-xs tracking-widest text-gray-500) and one bold line (text-2xl font-bold).
      3 product images displayed vertically, each as its own section with generous py-20 spacing.`},{type:"features",prompt:`White section (bg-[#f5f5f7] py-24). Single feature per row with dramatic spacing.
      Alternating: image on left/text on right, then flip.
      Each feature row: <div class="flex flex-col md:flex-row items-center gap-6 md:gap-10">
      Image side (w-full md:w-[50%], h-80 rounded-2xl overflow-hidden shadow-lg, mb-6 md:mb-0).
      Text side (w-full md:w-[50%]): small label (text-sm text-gray-500 uppercase tracking-widest),
      headline (text-3xl md:text-4xl font-bold text-black mb-4),
      description (text-lg text-gray-600 leading-relaxed). Minimal, no bullets.`},{type:"story",prompt:`Black section (bg-black text-white py-24). Max-w-3xl mx-auto text-center.
      Emotional brand narrative: large italic quote (text-2xl md:text-3xl font-light leading-relaxed italic text-gray-300).
      Below: brand name (text-sm uppercase tracking-widest text-gray-500 mt-8).
      Pure text — no images, no clutter. The words ARE the design.`},{type:"cta",prompt:`White section (bg-[#f5f5f7] py-20). Centered content, ultra-minimal.
      Headline (text-3xl md:text-4xl font-bold text-black mb-4).
      Subtitle (text-lg text-gray-600 mb-8).
      Single CTA button (bg-black text-white px-10 py-4 rounded-full font-medium text-lg hover:bg-gray-900 transition).
      Form below: minimal inputs (bg-white border border-gray-300 rounded-lg p-4 w-full max-w-sm mx-auto mb-3, text-black), small submit button.
      Small trust text below (text-sm text-gray-500).`}]},{name:"Linear Motion",description:"Dark, modern, and sleek design with subtle glow effects and refined typography. Inspired by modern productivity tools with a focus on elegance and clarity.",bestFor:"productivity tools, modern apps, project management, dev tools",colorScheme:"Dark (#0A0A0A, #111) with purple accent (#5E6AD2), glow effects",sections:[{type:"hero",prompt:`Dark hero (bg-[#0A0A0A], min-h-[80vh], flex items-center). Subtle radial gradient glow at center (bg-[radial-gradient(ellipse_at_center,_rgba(94,106,210,0.15)_0%,_transparent_70%)]).
      Centered content: headline (text-4xl md:text-6xl font-medium text-white tracking-tight),
      key words in accent (#5E6AD2). Subtitle (text-lg text-[#b4b4b4] mt-4 max-w-2xl mx-auto).
      CTA button (bg-[#5E6AD2] text-white px-8 py-3 rounded-lg font-medium hover:bg-[#4e5abc] transition mt-8).
      Product screenshot below (max-w-4xl mx-auto mt-12 rounded-xl border border-white/10 shadow-2xl).`},{type:"features",prompt:`Dark section (bg-[#0A0A0A] py-20). Features as vertical deep-dive blocks with generous spacing (py-16 each).
      Each block: <div class="flex flex-col md:flex-row items-center gap-6 md:gap-10">
      Screenshot side (w-full md:w-[55%], rounded-xl border border-white/10 overflow-hidden shadow-lg, mb-6 md:mb-0).
      Text side (w-full md:w-[45%]): small label (text-[#5E6AD2] text-sm font-medium uppercase tracking-wider mb-3),
      headline (text-2xl md:text-3xl font-medium text-white mb-4),
      description (text-[#b4b4b4] text-lg leading-relaxed).
      Alternate image left/right per block. Thin separator line between blocks (border-t border-white/5).`},{type:"timeline",prompt:`Dark section (bg-[#0A0A0A] py-20). Centered headline (text-3xl font-medium text-white mb-12).
      Vertical timeline: thin center line (w-px bg-white/10) with 4-5 nodes.
      Each node: glowing dot (w-3 h-3 rounded-full bg-[#5E6AD2] shadow-[0_0_10px_rgba(94,106,210,0.5)]) on the line,
      content card alternating left/right (bg-[#111] rounded-xl p-6 border border-white/5 max-w-md).
      Card content: date/label (text-[#5E6AD2] text-sm font-medium), title (text-white font-medium text-lg), description (text-[#b4b4b4]).
      On mobile: all cards stack on one side.`},{type:"story",prompt:`Dark section (bg-[#111] py-20). Centered headline "What our users say" (text-3xl font-medium text-white mb-12).
      3 testimonial cards in grid (bg-[#0A0A0A] rounded-xl p-8 border border-white/5).
      Each: quote text (text-[#b4b4b4] italic text-lg mb-6),
      author row at bottom: avatar circle (w-10 h-10 rounded-full bg-[#5E6AD2]/20 text-[#5E6AD2] flex items-center justify-center text-sm font-bold),
      name (text-white font-medium), role (text-[#b4b4b4] text-sm).`},{type:"cta",prompt:`Dark section (bg-[#0A0A0A] py-20). Centered content with subtle glow effect.
      Headline (text-3xl font-medium text-white mb-4). Subtitle (text-[#b4b4b4] text-lg mb-8).
      Form card (bg-[#111] rounded-xl p-8 border border-white/10 max-w-md mx-auto):
      inputs (bg-[#0A0A0A] border border-white/10 text-white rounded-lg p-4 w-full mb-4 placeholder-white/30),
      CTA button (bg-[#5E6AD2] text-white w-full py-4 rounded-lg font-medium text-lg hover:bg-[#4e5abc] transition).
      Trust text below (text-sm text-[#b4b4b4]/60).`}]},{name:"Airbnb Warm",description:"Warm, friendly, and inviting design with rounded elements and soft shadows. People-centric with emphasis on experiences and trust-building.",bestFor:"hospitality, tourism, experiences, local services, rentals",colorScheme:"White with warm pink (#FF385C), natural tones, soft shadows",sections:[{type:"hero",prompt:`White hero (bg-white, min-h-[80vh], flex items-center).
      Split layout: <div class="flex flex-col md:flex-row items-center gap-6 md:gap-10">
      Text side (w-full md:w-[55%]): headline (text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight),
      key words in pink (#FF385C). Subtitle (text-lg text-gray-600 mt-4).
      Search-style bar below: rounded-full bg-white shadow-lg border border-gray-200 p-2 flex items-center (decorative, not functional).
      CTA button (bg-[#FF385C] text-white px-8 py-4 rounded-full font-bold hover:bg-[#e0314f] transition mt-6).
      Image side (w-full md:w-[45%], mb-6 md:mb-0): rounded-3xl overflow-hidden shadow-xl h-96.`},{type:"gallery",prompt:`White section (bg-white py-20). Headline (text-2xl font-bold text-gray-900 mb-8).
      Grid of cards (grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6).
      Each card: image (h-56 rounded-2xl overflow-hidden mb-3),
      category label (text-xs font-bold uppercase text-gray-500),
      title (text-lg font-bold text-gray-900),
      subtitle with star rating (text-sm text-gray-600).
      Rounded corners everywhere. Soft hover:shadow-lg transition.`},{type:"scenario",prompt:`Light section (bg-[#f7f7f7] py-20). Centered headline "How It Works" (text-3xl font-bold text-gray-900 mb-12).
      3 steps horizontally with connecting dotted line.
      Each step: circular icon badge (w-16 h-16 rounded-full bg-[#FF385C]/10 text-[#FF385C] flex items-center justify-center text-2xl mx-auto mb-4),
      step number (text-sm font-bold text-[#FF385C] mb-2), title (text-lg font-bold text-gray-900), description (text-gray-600).`},{type:"story",prompt:`White section (bg-white py-20). Headline "What Our Guests Say" (text-2xl font-bold text-gray-900 mb-8).
      3 review cards in grid (bg-white rounded-2xl p-6 shadow-md border border-gray-100).
      Each: star rating (★★★★★ text-[#FF385C] text-lg mb-3),
      quote text (text-gray-700 italic mb-4),
      reviewer: avatar circle (w-10 h-10 rounded-full bg-[#FF385C]/20 text-[#FF385C] font-bold), name, date.`},{type:"trustBadges",prompt:`Light section (bg-[#f7f7f7] py-12). Centered label "Why Trust Us" (text-lg font-bold text-gray-900 mb-6).
      3-4 trust badges in flex row (items-center justify-center gap-8).
      Each badge: icon (text-3xl mb-2), label (text-sm font-medium text-gray-700).
      Examples: 🛡️ "Verified Hosts", 💳 "Secure Payments", 📞 "24/7 Support", ⭐ "5-Star Rated".`},{type:"cta",prompt:`Pink gradient section (bg-gradient-to-br from-[#FF385C] to-[#e0314f] py-20 text-white).
      Centered: headline (text-3xl font-bold mb-4), subtitle (opacity-90 mb-8).
      Form card (bg-white/10 backdrop-blur rounded-2xl p-8 max-w-md mx-auto border border-white/20):
      inputs (bg-white/10 border border-white/20 text-white placeholder-white/50 rounded-full p-4 w-full mb-4),
      CTA button (bg-white text-[#FF385C] w-full py-4 rounded-full font-bold text-lg).`}]},{name:"Vercel Developer",description:"Pure black developer-focused design with terminal aesthetics, monospace typography, and technical precision. Minimal and powerful.",bestFor:"developer tools, APIs, CLIs, infrastructure, open source",colorScheme:"Pure black (#000) with white text and blue accent (#0070F3)",sections:[{type:"hero",prompt:`Black hero (bg-black, min-h-[80vh], flex items-center justify-center text-center).
      Centered: headline (text-4xl md:text-6xl font-bold text-white tracking-tight),
      key words in blue (#0070F3). Subtitle (text-lg text-gray-400 mt-4 max-w-2xl mx-auto).
      Terminal preview below: (bg-[#111] rounded-xl border border-white/10 p-6 max-w-xl mx-auto mt-8 font-mono text-sm text-gray-300).
      Show a command like: <span class="text-gray-500">$</span> <span class="text-white">npx create-app</span>.
      CTA button below terminal (bg-white text-black px-8 py-3 rounded-lg font-medium mt-6 hover:bg-gray-200).`},{type:"codeShowcase",prompt:`Dark section (bg-[#111] py-20). Headline (text-2xl font-bold text-white mb-8).
      2 code blocks side by side on desktop (grid grid-cols-1 md:grid-cols-2 gap-6).
      Each block: header bar (bg-[#1a1a1a] rounded-t-xl px-4 py-3 flex items-center gap-2) with colored dots (w-3 h-3 rounded-full bg-red-500/bg-yellow-500/bg-green-500) and filename (text-gray-400 text-sm font-mono),
      code area (bg-black rounded-b-xl p-6 font-mono text-sm text-gray-300 overflow-x-auto).
      Use <span> tags with text-[#0070F3] for keywords, text-green-400 for strings, text-gray-500 for comments.
      NO actual executable code — use representative pseudocode.`},{type:"benchmarks",prompt:`Black section (bg-black py-20). Headline "Performance" (text-3xl font-bold text-white mb-8).
      3-4 benchmark rows. Each row: label (text-gray-400 text-sm font-mono mb-2),
      bar container (bg-[#111] rounded-full h-4 w-full overflow-hidden),
      filled bar (bg-gradient-to-r from-[#0070F3] to-[#00a8ff] h-full rounded-full) with percentage width (style="width: 95%"),
      value (text-white font-mono text-sm mt-1).
      Below benchmarks: comparison note (text-gray-500 text-sm).`},{type:"features",prompt:`Dark section (bg-[#111] py-20). Grid of 6 features (grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6).
      Each card (bg-black rounded-xl p-6 border border-white/5 hover:border-white/10 transition):
      icon (text-[#0070F3] text-2xl mb-3), title (text-white font-medium text-lg mb-2),
      description (text-gray-400 text-sm). Monospace labels where appropriate.`},{type:"faq",prompt:`Black section (bg-black py-20). Centered headline (text-2xl font-bold text-white mb-8).
      FAQ items in max-w-3xl mx-auto. Each: border-b border-white/10 py-6.
      Question (text-white font-medium text-lg), answer (text-gray-400 mt-2). Technical answers with specifics.`},{type:"cta",prompt:`Dark section (bg-[#111] py-20). Centered content.
      Headline (text-3xl font-bold text-white mb-4). Subtitle (text-gray-400 mb-8).
      Terminal-style CTA: (bg-black rounded-xl border border-white/10 p-6 max-w-md mx-auto font-mono text-center).
      Command: <span class="text-gray-500">$</span> <span class="text-white">npm install ...</span>
      Or form: inputs (bg-black border border-white/10 text-white rounded-lg p-4 w-full mb-4 font-mono),
      CTA button (bg-[#0070F3] text-white w-full py-4 rounded-lg font-medium hover:bg-[#005cc8] transition).`}]},{name:"Nike Bold",description:"High-energy, aggressive design with massive typography, bold imagery, and athletic inspiration. Full-bleed photos with text overlays create dramatic impact.",bestFor:"sports, fitness, shoes, athletic wear, energy brands, action products",colorScheme:"Black/white with vibrant red (#FF0000) or orange accent",sections:[{type:"hero",prompt:`Full-bleed image hero: product/action image covers entire viewport (min-h-[80vh], relative overflow-hidden).
      Image: absolute inset-0 w-full h-full object-cover. Dark gradient overlay (bg-gradient-to-r from-black/80 via-black/50 to-transparent).
      Content positioned left (absolute inset-0 flex items-center):
      headline (text-5xl md:text-7xl lg:text-8xl font-black uppercase italic tracking-tight text-white leading-none),
      key words in red (#FF0000). Thin subtitle (text-lg text-gray-300 mt-4 uppercase tracking-widest).
      CTA button (bg-[#FF0000] text-white px-10 py-4 rounded-none font-bold uppercase tracking-wider hover:bg-red-700 transition mt-6).`},{type:"gallery",prompt:`Black section (bg-black py-20). Product grid (grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4).
      Each product card: image (h-72 overflow-hidden),
      hover overlay effect (group relative, overlay appears on hover with product name).
      Product name below (text-white font-bold uppercase text-sm tracking-wider mt-3).
      Price (text-gray-400 text-sm). Clean, no borders. Let images speak.`},{type:"features",prompt:`Alternating black/dark-gray sections. Each feature is a FULL-WIDTH split layout.
      <div class="flex flex-col md:flex-row items-center gap-6 md:gap-10">
      Image side (w-full md:w-[55%], h-96 overflow-hidden, mb-6 md:mb-0): large action shot.
      Text side (w-full md:w-[45%]): headline (text-3xl md:text-4xl font-black uppercase text-white),
      red accent line (w-16 h-1 bg-[#FF0000] my-4), description (text-gray-400 text-lg).
      Alternate sides per feature. Bold and aggressive.`},{type:"story",prompt:`Black section (bg-black py-20). Large centered quote (text-3xl md:text-4xl font-bold italic text-white max-w-4xl mx-auto text-center leading-relaxed).
      Key phrases in red (#FF0000). Attribution below (text-gray-500 uppercase tracking-widest text-sm mt-8).
      Inspirational, motivational tone. "Just do it" energy.`},{type:"stats",prompt:`Red section (bg-[#FF0000] text-white py-16).
      4 stats in horizontal row. Numbers (text-5xl md:text-7xl font-black), labels (text-sm uppercase tracking-widest opacity-80).
      Bold, aggressive numbers. Separated by thin white/20 lines.`},{type:"cta",prompt:`Black section (bg-black py-20). Split layout:
      Left: massive headline (text-4xl font-black uppercase text-white), price (text-3xl font-bold text-[#FF0000] mt-4), urgency text.
      Right: form card (bg-[#111] p-8 rounded-none border border-white/10):
      inputs (bg-black border border-white/20 text-white p-4 w-full mb-4 uppercase text-sm tracking-wider),
      CTA button (bg-[#FF0000] text-white w-full py-4 font-bold uppercase tracking-wider text-lg).`}]},{name:"Notion Friendly",description:"Warm, approachable design with serif headings, playful emoji icons, and a cozy beige palette. Feels like a well-organized notebook — inviting and easy to read.",bestFor:"education, productivity, communities, simple tools, blogs, personal brands",colorScheme:"White (#fff) with warm beige (#f7f6f3), pastel accents",sections:[{type:"hero",prompt:`Warm hero (bg-[#f7f6f3], min-h-[80vh], flex items-center justify-center text-center).
      Large emoji icon (text-6xl mb-6). Headline (text-4xl md:text-5xl font-bold text-gray-900 leading-tight),
      with playful tone. Subtitle (text-lg text-gray-600 mt-4 max-w-2xl mx-auto).
      CTA button (bg-gray-900 text-white px-8 py-4 rounded-xl font-medium hover:bg-gray-800 transition mt-8).
      Small trust text below (text-sm text-gray-500 mt-4) like "✨ Free to start • No credit card needed".`},{type:"tabs",prompt:`White section (bg-white py-20). Headline (text-2xl font-bold text-gray-900 mb-8 text-center).
      Tab bar: 3-4 tabs in a row (flex gap-2 justify-center mb-8).
      Each tab: px-6 py-3 rounded-full text-sm font-medium. Active tab: bg-gray-900 text-white. Inactive: bg-gray-100 text-gray-600.
      Tab content below: display ALL tab contents stacked (since static HTML, no JS switching).
      Each content block: bg-[#f7f6f3] rounded-2xl p-8 mb-6 with title (text-lg font-bold), description (text-gray-600), emoji bullet points.`},{type:"gallery",prompt:`Beige section (bg-[#f7f6f3] py-20). Headline "Templates & Examples" (text-2xl font-bold text-gray-900 mb-8).
      Grid (grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6).
      Each card: bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-md transition.
      Image (h-48 overflow-hidden). Body (p-6): emoji + title (text-lg font-bold text-gray-900), description (text-sm text-gray-600).`},{type:"story",prompt:`White section (bg-white py-20). Headline "Loved by Our Community" (text-2xl font-bold text-gray-900 mb-8 text-center).
      3 testimonials (grid-cols-1 md:grid-cols-3 gap-6).
      Each card (bg-[#f7f6f3] rounded-2xl p-6): emoji rating (text-lg mb-3), quote (text-gray-700 italic),
      author (font-medium text-gray-900 mt-4), role (text-sm text-gray-500).`},{type:"pricing",prompt:`Beige section (bg-[#f7f6f3] py-20). Headline (text-2xl font-bold text-gray-900 mb-8 text-center).
      3 pricing cards (bg-white rounded-2xl p-8 shadow-sm border border-gray-100).
      Free tier highlighted with "✨ Popular" badge. Each card: emoji icon, plan name (text-xl font-bold),
      price (text-3xl font-bold text-gray-900), features (✓ text-gray-600 list), CTA button (rounded-xl).
      NO images. Clean and simple.`},{type:"faq",prompt:`White section (bg-white py-20). Headline with emoji "❓ Common Questions" (text-2xl font-bold text-gray-900 mb-8 text-center).
      FAQ items (max-w-2xl mx-auto): bg-[#f7f6f3] rounded-xl p-6 mb-3.
      Question (font-bold text-gray-900), answer (text-gray-600 mt-2). Friendly, conversational tone.`},{type:"cta",prompt:`Warm pastel section (bg-gradient-to-br from-[#f7f6f3] to-[#e8e5df] py-20).
      Centered: emoji (text-5xl mb-4), headline (text-3xl font-bold text-gray-900 mb-4), subtitle (text-gray-600 mb-8).
      Form card (bg-white rounded-2xl shadow-lg p-8 max-w-md mx-auto border border-gray-100):
      inputs (bg-[#f7f6f3] border border-gray-200 text-gray-900 rounded-xl p-4 w-full mb-4),
      CTA button (bg-gray-900 text-white w-full py-4 rounded-xl font-medium text-lg).`}]},{name:"Medical Trust",description:"Clean, professional medical design that emphasizes trust, scientific credibility, and clinical data. Uses medical blue and green with pristine white backgrounds.",bestFor:"health, medicine, supplements, medical devices, wellness, pharmaceutical",colorScheme:"Clean white with medical blue (#0077B6), green (#2D6A4F)",sections:[{type:"hero",prompt:`Clean white hero (bg-white, min-h-[80vh], flex items-center).
      Split layout: <div class="flex flex-col md:flex-row items-center gap-6 md:gap-10">
      Text side (w-full md:w-[55%]): trust badge "🏥 Clinically Tested" (bg-[#0077B6]/10 text-[#0077B6] text-sm font-medium px-4 py-2 rounded-full inline-block mb-4),
      headline (text-4xl md:text-5xl font-bold text-gray-900) with key words in blue (#0077B6),
      subtitle (text-lg text-gray-600 mt-4), trust line "✓ FDA Approved • ✓ Doctor Recommended" (text-sm text-[#2D6A4F] font-medium mt-4).
      CTA button (bg-[#0077B6] text-white px-8 py-4 rounded-xl font-bold hover:bg-[#006494] transition mt-6).
      Product side (w-full md:w-[45%], mb-6 md:mb-0): h-96 rounded-2xl shadow-lg overflow-hidden.`},{type:"clinicalEvidence",prompt:`Light section (bg-[#f0f9ff] py-20). Headline "Clinically Proven Results" (text-3xl font-bold text-gray-900 mb-8 text-center).
      3 evidence cards (grid-cols-1 md:grid-cols-3 gap-6).
      Each card (bg-white rounded-2xl p-8 shadow-md border border-gray-100 text-center):
      large percentage (text-5xl font-bold text-[#0077B6] mb-2), metric label (text-lg font-bold text-gray-900 mb-2),
      description (text-gray-600 text-sm), source citation (text-xs text-gray-400 italic mt-4 border-t pt-4).
      NO images. Data-driven credibility.`},{type:"ingredients",prompt:`White section (bg-white py-20). Headline "Key Ingredients" (text-3xl font-bold text-gray-900 mb-8 text-center).
      Ingredients list: each ingredient as a horizontal card (bg-[#f0f9ff] rounded-xl p-6 mb-4 flex items-start gap-4).
      Left: circular badge (w-14 h-14 rounded-full bg-[#2D6A4F]/10 text-[#2D6A4F] flex items-center justify-center text-xl font-bold flex-shrink-0),
      Right: ingredient name (text-lg font-bold text-gray-900), dosage (text-sm text-[#0077B6] font-medium),
      benefit description (text-gray-600). 4-6 ingredients listed.`},{type:"beforeAfter",prompt:`Light section (bg-[#f8fafb] py-20). Headline with labels.
      Two elegant comparison cards side by side (bg-white rounded-2xl shadow-md overflow-hidden).
      Before card: red/coral top stripe (h-2 bg-red-400), content with clinical observations.
      After card: green top stripe (h-2 bg-[#2D6A4F]), content with improvement results.
      Bottom stat: centered bold text with improvement percentage.`},{type:"story",prompt:`White section (bg-white py-20). Headline "Doctor Recommended" (text-2xl font-bold text-gray-900 mb-8 text-center).
      3 professional testimonials (grid-cols-1 md:grid-cols-3 gap-6).
      Each (bg-[#f0f9ff] rounded-2xl p-6 border border-gray-100):
      "Dr." prefix, name and specialty (font-bold text-gray-900), star rating (★★★★★ text-amber-400),
      professional endorsement quote (text-gray-700 italic), credential badge (text-xs text-[#0077B6]).`},{type:"guarantee",prompt:`White section with centered content.
      Guarantee card (bg-gradient-to-br from-[#0077B6]/5 to-[#2D6A4F]/5 rounded-2xl p-10 max-w-2xl mx-auto border border-[#0077B6]/20).
      Large shield badge (w-28 h-28 rounded-full bg-gradient-to-br from-[#0077B6] to-[#2D6A4F] flex items-center justify-center mx-auto mb-6 text-white text-3xl) with 🛡️ icon.
      Guarantee headline (text-2xl font-bold text-gray-900), detailed terms, satisfaction percentage.
      NO images — badge only.`},{type:"faq",prompt:`Light section (bg-[#f0f9ff] py-20). Headline "Medical FAQ" (text-2xl font-bold text-gray-900 mb-8 text-center).
      FAQ items (max-w-3xl mx-auto): bg-white rounded-xl p-6 mb-3 border border-gray-100.
      Question (font-bold text-gray-900 text-lg), answer (text-gray-600 mt-2). Medical-specific, detailed answers.`},{type:"cta",prompt:`Blue gradient section (bg-gradient-to-br from-[#0077B6] to-[#006494] py-20 text-white).
      Split layout: trust elements left (guarantee badge, certifications, "Money-back guarantee" text),
      form right (bg-white/10 backdrop-blur rounded-2xl p-8 border border-white/20):
      inputs (bg-white/10 border border-white/20 text-white rounded-xl p-4 w-full mb-4 placeholder-white/50),
      CTA button (bg-white text-[#0077B6] w-full py-4 rounded-xl font-bold text-lg).
      Security badges below (🔒 SSL Secured, 🏥 HIPAA Compliant).`}]},{name:"Real Estate Luxe",description:"Dark luxury design with gold accents, elegant typography, and panoramic imagery. Creates an exclusive, high-end atmosphere perfect for premium properties.",bestFor:"real estate, investment, luxury hotels, premium venues, architecture",colorScheme:"Dark luxury (#1a1a2e) with gold (#d4af37), white accents",sections:[{type:"hero",prompt:`Dark luxury hero (bg-[#1a1a2e], min-h-[80vh], relative overflow-hidden).
      Background: panoramic property image (absolute inset-0 w-full h-full object-cover opacity-40).
      Dark overlay (bg-gradient-to-t from-[#1a1a2e] via-[#1a1a2e]/70 to-transparent).
      Content centered (relative z-10 text-center): gold label (text-[#d4af37] text-sm uppercase tracking-[0.3em] font-medium mb-4),
      headline (text-4xl md:text-6xl font-bold text-white mb-4 tracking-tight),
      gold separator line (w-24 h-px bg-[#d4af37] mx-auto my-6),
      subtitle (text-lg text-gray-300), CTA button (border-2 border-[#d4af37] text-[#d4af37] px-10 py-4 uppercase tracking-widest text-sm font-medium hover:bg-[#d4af37] hover:text-[#1a1a2e] transition mt-8).`},{type:"propertyGrid",prompt:`Dark section (bg-[#111827] py-20). Headline (text-2xl font-bold text-white mb-8 text-center).
      Grid of property features (grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6).
      Each feature (bg-[#1a1a2e] rounded-xl p-6 text-center border border-white/5):
      icon (text-[#d4af37] text-3xl mb-3), value (text-2xl font-bold text-white), label (text-sm text-gray-400 uppercase tracking-wider).
      Examples: 🛏️ "4 Bedrooms", 📐 "350 m\xb2", 🚗 "2 Parking", 🏊 "Pool", 🌳 "Garden", 📍 "Premium Location".
      NO images — icons and text only.`},{type:"gallery",prompt:`Dark section (bg-[#1a1a2e] py-20). Headline with gold accent.
      Image grid (grid-cols-1 md:grid-cols-2 gap-4).
      Large featured image (md:col-span-2, h-80 rounded-xl overflow-hidden) on top.
      2 smaller images below (h-64 rounded-xl overflow-hidden each).
      All images: hover:scale-105 transition-transform duration-500.
      Subtle gold border on hover (hover:ring-2 ring-[#d4af37]/30).`},{type:"scenario",prompt:`Dark section (bg-[#111827] py-20). Headline "Your Journey" (text-2xl font-bold text-white mb-12 text-center).
      3 elegant steps with gold connecting line.
      Each step: gold numbered circle (w-12 h-12 rounded-full border-2 border-[#d4af37] text-[#d4af37] flex items-center justify-center font-bold),
      title (text-lg font-bold text-white mt-4), description (text-gray-400).
      Steps shown horizontally with gold dotted line connecting them.`},{type:"stats",prompt:`Gold gradient section (bg-gradient-to-r from-[#d4af37] to-[#b8962e] py-16).
      4 stats in row (text-[#1a1a2e]). Numbers (text-5xl font-black), labels (text-sm uppercase tracking-wider opacity-70).`},{type:"cta",prompt:`Dark section (bg-[#1a1a2e] py-20). Centered content.
      Gold separator (w-24 h-px bg-[#d4af37] mx-auto mb-8).
      Headline (text-3xl font-bold text-white mb-4). Subtitle (text-gray-400 mb-8).
      Form card (bg-[#111827] rounded-2xl p-8 max-w-md mx-auto border border-[#d4af37]/20):
      inputs (bg-[#1a1a2e] border border-[#d4af37]/20 text-white rounded-lg p-4 w-full mb-4 placeholder-gray-500),
      CTA button (bg-[#d4af37] text-[#1a1a2e] w-full py-4 rounded-lg font-bold text-lg uppercase tracking-wider hover:bg-[#b8962e] transition).
      Trust text (text-sm text-gray-500 mt-4 text-center).`}]},{name:"Educational Academy",description:"Professional educational design with structured content, clear hierarchy, and warm accents. Optimized for course landing pages with curriculum display and instructor credibility.",bestFor:"online courses, training, academies, bootcamps, workshops, coaching",colorScheme:"Dark blue (#1e3a5f) with orange (#ff6b35), white",sections:[{type:"hero",prompt:`Blue hero (bg-[#1e3a5f], min-h-[80vh], flex items-center).
      Split layout: <div class="flex flex-col md:flex-row items-center gap-6 md:gap-10">
      Text side (w-full md:w-[55%]): badge "🎓 New Cohort Starting Soon" (bg-[#ff6b35]/20 text-[#ff6b35] text-sm font-medium px-4 py-2 rounded-full inline-block mb-4),
      headline (text-4xl md:text-5xl font-bold text-white) with key words in orange (#ff6b35),
      subtitle (text-lg text-blue-200 mt-4), enrollment stats "✓ 2,500+ Students • ✓ 4.9/5 Rating • ✓ Certificate" (text-sm text-blue-300 mt-4).
      CTA button (bg-[#ff6b35] text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-[#e55a2a] transition mt-6).
      Image side (w-full md:w-[45%], mb-6 md:mb-0): course preview in rounded-2xl shadow-2xl overflow-hidden h-80.`},{type:"curriculum",prompt:`White section (bg-white py-20). Headline "Course Curriculum" (text-3xl font-bold text-gray-900 mb-8 text-center).
      Course modules as accordion-style cards (max-w-3xl mx-auto).
      Each module (bg-[#f8f9fa] rounded-xl mb-4 overflow-hidden):
      Header (bg-[#1e3a5f] text-white p-4 flex items-center justify-between): module number + title (font-bold), lesson count badge (bg-white/20 text-sm px-3 py-1 rounded-full).
      Body (p-6): list of lessons with checkmarks (✓ text-[#ff6b35]) and duration (text-gray-500 text-sm).
      4-6 modules, 3-5 lessons each. NO images — text content only.`},{type:"instructorBio",prompt:`Light section (bg-[#f8f9fa] py-20). Headline "Meet Your Instructor" (text-2xl font-bold text-gray-900 mb-8 text-center).
      Bio card (bg-white rounded-2xl p-8 shadow-md max-w-3xl mx-auto flex flex-col md:flex-row items-center gap-6 md:gap-10):
      Photo side (w-full md:w-[35%]): image (h-64 rounded-2xl overflow-hidden shadow-lg, mb-6 md:mb-0).
      Text side (w-full md:w-[65%]): name (text-2xl font-bold text-gray-900), title (text-[#ff6b35] font-medium mb-4),
      bio paragraph (text-gray-600 leading-relaxed),
      credentials row (flex flex-wrap gap-3 mt-4): badges (bg-[#1e3a5f]/10 text-[#1e3a5f] text-xs font-medium px-3 py-1 rounded-full).`},{type:"stats",prompt:`Blue section (bg-[#1e3a5f] py-16 text-white).
      4 stats: large numbers (text-5xl font-bold text-[#ff6b35]), labels (text-sm opacity-80).
      Examples: "2,500+" Students, "98%" Completion Rate, "4.9/5" Rating, "150+" Countries.`},{type:"pricing",prompt:`White section (bg-white py-20). Headline "Choose Your Learning Path" (text-3xl font-bold text-gray-900 mb-8 text-center).
      3 pricing cards (grid-cols-1 md:grid-cols-3 gap-6).
      Self-paced (bg-[#f8f9fa]), Mentored (bg-white border-2 border-[#ff6b35] shadow-xl, HIGHLIGHTED with "🔥 Most Popular" badge), Premium (bg-[#1e3a5f] text-white).
      Each: plan name (text-xl font-bold), price (text-4xl font-bold), features (✓ list), CTA button.
      NO images in pricing.`},{type:"guarantee",prompt:`Light section (bg-[#f8f9fa] py-20). Centered content.
      Guarantee badge (w-28 h-28 rounded-full bg-gradient-to-br from-[#ff6b35] to-[#e55a2a] flex items-center justify-center mx-auto mb-6 shadow-lg text-white font-bold text-center text-sm p-2).
      Headline (text-2xl font-bold text-gray-900 mb-4), detailed guarantee terms.
      NO images — badge and text only.`},{type:"faq",prompt:`White section (bg-white py-20). Headline "Course FAQ" (text-2xl font-bold text-gray-900 mb-8 text-center).
      FAQ items (max-w-3xl mx-auto): bg-[#f8f9fa] rounded-xl p-6 mb-3.
      Question (font-bold text-gray-900), answer (text-gray-600 mt-2). Course-specific questions about access, certificates, refunds.`},{type:"cta",prompt:`Orange gradient section (bg-gradient-to-br from-[#ff6b35] to-[#e55a2a] py-20 text-white).
      Centered: urgency badge "⏰ Limited Spots Available" (bg-white/20 text-white text-sm px-4 py-2 rounded-full inline-block mb-6),
      headline (text-3xl font-bold mb-4), subtitle (opacity-90 mb-8).
      Form card (bg-white/10 backdrop-blur rounded-2xl p-8 max-w-md mx-auto border border-white/20):
      inputs (bg-white/10 border border-white/20 text-white rounded-xl p-4 w-full mb-4 placeholder-white/50),
      CTA button (bg-white text-[#ff6b35] w-full py-4 rounded-xl font-bold text-lg).
      Trust text (text-sm opacity-70 mt-4 text-center): "🔒 Secure • 30-Day Guarantee • Lifetime Access".`}]},{name:"Cinematic Immersive",description:"Full-viewport hero with edge-to-edge product image as background. Cinematic, editorial feel with generous whitespace and dramatic typography. The image IS the experience.",bestFor:"travel, food, real estate, photography, fashion, visual luxury products",colorScheme:"Colors derived from product imagery — warm earth tones, monochromes, or rich naturals",sections:[{type:"hero",prompt:`Full-bleed cinematic hero (min-h-screen, relative, overflow-hidden).
      Background: product image as <img> with class="absolute inset-0 w-full h-full object-cover" inside the section.
      Overlay: <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/20"></div>
      Content positioned at bottom: <div class="relative z-10 flex items-end min-h-screen pb-16 md:pb-24 px-6 md:px-16 max-w-7xl mx-auto">
      - Headline: text-5xl md:text-7xl lg:text-8xl font-black text-white leading-tight, key phrase wrapped in accent-colored <span>
      - Subtitle: text-lg md:text-xl text-white/80 max-w-2xl mt-6 mb-8
      - CTA button: border-2 border-white text-white px-10 py-4 rounded-xl text-lg font-semibold hover:bg-white hover:text-black transition-all duration-300
      RULE: Product image IS the background — do NOT add a separate product image container.`},{type:"painPoints",prompt:`Immersive dark section (bg-[#0a0a0f] min-h-[60vh] flex items-center py-20).
      Subtle background: a faint image at opacity-5 or a gradient.
      Centered content (max-w-4xl mx-auto text-center):
      - Headline: text-3xl md:text-5xl font-black text-white mb-12, key phrase in accent <span>
      - Pain points as large pull-quotes: each one is <blockquote class="text-xl md:text-2xl text-white/70 italic border-l-4 border-accent pl-6 mb-8 text-right md:text-left">
      - Accent-colored quotation marks (text-6xl opacity-20)
      - Closing: transition paragraph (text-lg text-white/60 mt-8)`},{type:"beforeAfter",prompt:`Dark section (bg-[#111] py-20). Centered headline (text-3xl md:text-4xl font-bold text-white mb-12).
      Two side-by-side cards (flex flex-col md:flex-row gap-8 max-w-5xl mx-auto):
      Before card: bg-[#1a1a1a] rounded-2xl overflow-hidden, red top border (border-t-4 border-red-500), image in h-64 container, label + bullet points.
      After card: same structure but accent top border (border-t-4 border-accent), vibrant imagery.
      Below: bold testimonial quote centered (text-xl italic text-white/80 mt-12).`},{type:"features",prompt:`Editorial magazine layout on dark bg (bg-[#0a0a0f] py-24).
      Each feature is a full-width row (flex flex-col md:flex-row items-center gap-12 mb-20 max-w-6xl mx-auto):
      - Image side (w-full md:w-1/2): <div class="h-80 md:h-96 rounded-2xl overflow-hidden shadow-2xl"><img class="w-full h-full object-cover" /></div>
      - Text side (w-full md:w-1/2): small accent-colored label (text-sm uppercase tracking-widest), headline (text-2xl md:text-3xl font-bold text-white mb-4), description (text-lg text-white/70 leading-relaxed), accent-colored bullet list (mt-6)
      Alternate image left/right for each feature row. 3-4 features total.`},{type:"stats",prompt:`Full-bleed accent-colored banner (bg-gradient with accent color, py-16).
      4 stats in a row (grid grid-cols-2 md:grid-cols-4 gap-8 max-w-5xl mx-auto text-center):
      Each stat: number (text-5xl md:text-7xl font-black text-white) + label below (text-sm md:text-base text-white/80 uppercase tracking-wide).
      Use real numbers relevant to the product. Dividers between stats on desktop (border-r border-white/20).`},{type:"story",prompt:`Editorial story section (bg-[#0a0a0f] py-24). max-w-6xl mx-auto.
      Large cinematic image (w-full h-[400px] md:h-[500px] rounded-2xl overflow-hidden shadow-2xl mb-[-60px] md:mb-[-80px] relative z-0).
      Story card overlapping image (bg-[#1a1a1a] rounded-2xl p-8 md:p-12 relative z-10 max-w-3xl mx-auto shadow-xl):
      - Pull quote at top (text-2xl italic text-white/80 border-l-4 border-accent pl-6 mb-8)
      - Story paragraphs (text-lg text-white/70 leading-relaxed mb-6), key phrases in accent <span> or <strong class="text-white">
      - Founder signature or name at bottom (text-accent font-bold)`},{type:"scenario",prompt:`Dark section (bg-[#111] py-20). Centered headline (text-3xl md:text-4xl font-bold text-white mb-4) + subtitle (text-lg text-white/60 mb-12).
      Grid of 4 scenario cards (grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto):
      Each card: bg-[#1a1a1a] rounded-xl p-8 border border-white/10 hover:border-accent/50 transition-colors duration-300.
      Card content: icon/emoji (text-3xl mb-4), title (text-xl font-bold text-white mb-2), description (text-white/60).
      Below grid: emotional closing paragraph (text-lg text-white/70 text-center mt-12 max-w-2xl mx-auto).`},{type:"guarantee",prompt:`Dark section (bg-[#0a0a0f] py-20). Centered content (max-w-2xl mx-auto text-center).
      Large circular guarantee badge: <div class="w-36 h-36 rounded-full border-4 border-accent flex items-center justify-center mx-auto mb-8">
      <span class="text-2xl font-black text-accent">100%<br/>ضمان</span></div>
      Headline (text-2xl font-bold text-white mb-4), guarantee text (text-lg text-white/70 mb-6), trust elements (text-sm text-white/50).
      NO <img> tags in this section.`},{type:"faq",prompt:`Dark section (bg-[#111] py-20). Centered headline (text-3xl font-bold text-white mb-12).
      FAQ items (max-w-3xl mx-auto): each card is <div class="bg-[#1a1a1a] rounded-xl p-6 mb-4 border border-white/10">
      Question (text-lg font-bold text-white mb-3) with accent ▼ indicator, answer (text-white/70 leading-relaxed).
      All items displayed open. 5-6 items.`},{type:"cta",prompt:`Dark gradient section (bg-gradient-to-br from-[#0a0a0f] to-[#1a1a2e] py-20).
      Two columns (flex flex-col md:flex-row gap-12 max-w-6xl mx-auto items-start):
      Left (w-full md:w-1/2): headline (text-3xl font-bold text-white mb-4), subtitle, pricing with original crossed out (text-2xl line-through text-white/40) and sale price (text-5xl font-black text-accent), trust elements (guarantee, shipping).
      Right (w-full md:w-1/2): form card (bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10): name, email, phone inputs (bg-white/10 border border-white/20 text-white rounded-xl p-4 w-full mb-4), CTA button (w-full py-5 text-xl font-bold rounded-xl bg-accent text-white), trust text below.`}]},{name:"Typography First",description:"Giant typography dominates the hero — no image. The headline IS the visual impact. Product image appears in a dedicated showcase section below. Minimal, high-contrast, confident design.",bestFor:"SaaS, consulting, digital services, agencies, technology, personal brands, developer tools",colorScheme:"High-contrast monochrome (black/white or deep navy/white) with single bold accent color",sections:[{type:"hero",prompt:`Type-Led hero with ZERO images (min-h-[80vh] flex items-center, solid bg color — bg-black or bg-[#0a0a0f] or bg-white).
      Content centered (max-w-6xl mx-auto px-6 md:px-16):
      - Headline: text-6xl md:text-8xl lg:text-[10rem] font-black leading-[0.9] tracking-[-0.03em]. Key phrase in accent-colored <span>. The text itself IS the visual — make it massive.
      - Subtitle: text-lg md:text-xl max-w-2xl mt-8 mb-10 opacity-70
      - CTA: ghost button (border-2 px-10 py-4 rounded-xl text-lg font-semibold hover:bg-accent hover:border-accent hover:text-white transition-all duration-300)
      ABSOLUTE RULE: NO <img> tags in hero. NO background images. NO product images. Typography is the ONLY visual element.`},{type:"showcase",prompt:`Product image reveal section (py-20 md:py-28).
      Centered layout (max-w-5xl mx-auto px-6):
      - Product image: <div class="rounded-3xl overflow-hidden shadow-2xl"><img class="w-full h-auto max-h-[500px] object-cover" /></div>
      - Below image (mt-8 text-center): product name (text-2xl font-bold mb-3), brief description (text-lg opacity-70 max-w-2xl mx-auto, 2-3 sentences max).
      This is where the primary product image appears — NOT in the hero above.`},{type:"features",prompt:`Numbered feature blocks on clean bg (py-20 md:py-28).
      Section headline (text-3xl md:text-4xl font-bold mb-16 text-center).
      3 features in grid (grid grid-cols-1 md:grid-cols-3 gap-12 max-w-6xl mx-auto):
      Each feature: <div class="relative">
      - Oversized number as decoration (text-[8rem] font-black opacity-5 absolute -top-8 -left-2 leading-none) — "01", "02", "03"
      - Feature title (text-xl font-bold mb-3 relative z-10)
      - Description (opacity-70 leading-relaxed relative z-10)
      </div>`},{type:"painPoints",prompt:`Minimal pain list (py-20, max-w-3xl mx-auto px-6).
      Headline (text-3xl font-bold mb-12).
      Pain points as a clean vertical stack — each item:
      <div class="flex items-start gap-4 mb-6 text-lg">
        <span class="text-red-500 font-bold text-xl shrink-0">✕</span>
        <p class="opacity-80">Pain point statement — specific and relatable</p>
      </div>
      5-6 items. Clean, large font, no cards or borders — just text.`},{type:"stats",prompt:`Inline stats strip (py-12 border-y border-opacity-20).
      Horizontal row (flex flex-wrap justify-center gap-8 md:gap-16 max-w-5xl mx-auto):
      Each stat: <div class="text-center px-4">
        <span class="text-4xl md:text-5xl font-black">number</span>
        <span class="block text-sm uppercase tracking-wide opacity-60 mt-2">label</span>
      </div>
      Vertical dividers between stats on desktop (border-r border-opacity-20, last-child:border-0). 4 stats.`},{type:"story",prompt:`Comfortable reading section (py-20, max-w-3xl mx-auto px-6).
      Large pull-quote to open (text-2xl md:text-3xl italic leading-relaxed mb-8, with oversized quotation mark text-8xl opacity-10 absolute).
      Narrative paragraphs (text-lg leading-relaxed opacity-80 mb-6). Key phrases in <strong> or accent <span>.
      Author attribution (mt-8 font-bold).`},{type:"guarantee",prompt:`Text-only guarantee (py-16, max-w-2xl mx-auto text-center px-6).
      Guarantee headline with accent underline effect (text-2xl font-bold mb-4, border-b-4 border-accent inline-block pb-2).
      Guarantee text (text-lg opacity-70 mb-6). Trust line (text-sm opacity-50).
      NO images. NO badge circle. Just confident typography.`},{type:"faq",prompt:`Two-column FAQ (py-20, max-w-5xl mx-auto px-6).
      Headline (text-3xl font-bold mb-12).
      FAQ items in 2 columns (grid grid-cols-1 md:grid-cols-2 gap-6):
      Each: <div class="pb-6 border-b border-opacity-10">
        <h4 class="font-bold text-lg mb-2">Question</h4>
        <p class="opacity-70">Answer</p>
      </div>
      6 items (3 per column). Minimal borders, clean layout.`},{type:"cta",prompt:`Full-width accent-colored CTA section (bg-accent py-20 text-white).
      Centered content (max-w-2xl mx-auto text-center px-6):
      - Headline (text-3xl md:text-4xl font-bold mb-4)
      - Subtitle (text-lg opacity-90 mb-8)
      - Price: original (text-xl line-through opacity-50) + sale (text-5xl font-black mb-8)
      - Form (max-w-md mx-auto): inputs (bg-white/20 border border-white/30 text-white rounded-xl p-4 w-full mb-4 placeholder-white/60), CTA button (bg-white text-accent w-full py-5 rounded-xl text-xl font-bold)
      - Trust text (text-sm opacity-70 mt-4)`}]},{name:"Split Showcase",description:"Dramatic 50/50 split-screen hero — one half solid accent color with bold text, the other half edge-to-edge product image. High visual tension. Modern e-commerce feel.",bestFor:"e-commerce, fashion, beauty, electronics, consumer products, food products, cosmetics",colorScheme:"Bold split — accent color on text half, product image fills other half. High contrast.",sections:[{type:"hero",prompt:`Split-screen hero (min-h-screen grid grid-cols-1 md:grid-cols-2).
      Text half (bg-accent flex items-center): <div class="p-8 md:p-16 lg:p-20">
        - Headline (text-4xl md:text-5xl lg:text-6xl font-black text-white leading-tight mb-6). Key phrase wrapped in <span class="underline decoration-4 underline-offset-8">
        - Subtitle (text-lg text-white/80 mb-8 max-w-lg)
        - CTA button (bg-white text-accent px-10 py-4 rounded-xl text-lg font-bold hover:bg-white/90 transition-colors)
        - Trust text (text-sm text-white/60 mt-6)
      </div>
      Image half: <div class="relative h-64 md:h-auto"><img class="absolute inset-0 w-full h-full object-cover" /></div>
      For RTL pages: use md:flex-row-reverse or md:order-first on the image half so the image stays on the visual end.
      NO rounded corners on the image. NO padding around image. Edge-to-edge fill.`},{type:"features",prompt:`Alternating split blocks (py-0 — no section padding, each block provides its own).
      3-4 features, each as a full-width split (grid grid-cols-1 md:grid-cols-2 min-h-[50vh]):
      - Image side: <div class="relative h-64 md:h-auto"><img class="absolute inset-0 w-full h-full object-cover" /></div>
      - Text side (flex items-center): <div class="p-8 md:p-16">
          <span class="text-sm uppercase tracking-widest text-accent font-bold mb-4 block">Feature Label</span>
          <h3 class="text-2xl md:text-3xl font-bold mb-4">Feature Title</h3>
          <p class="text-lg opacity-70 leading-relaxed mb-6">Description</p>
          <ul class="space-y-2"> bullet points with accent checkmarks </ul>
        </div>
      Alternate image left/right for odd/even features.`},{type:"painPoints",prompt:`Dark section (bg-[#111] py-20). Headline (text-3xl md:text-4xl font-bold text-white mb-12 text-center).
      Grid of pain cards (grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto):
      Each card: <div class="bg-[#1a1a1a] rounded-xl p-6 border-l-4 border-red-500 flex items-start gap-4">
        <span class="text-red-500 text-2xl shrink-0">✕</span>
        <div><h4 class="font-bold text-white mb-2">Pain statement</h4><p class="text-white/60">Elaboration</p></div>
      </div>
      4-6 pain points.`},{type:"beforeAfter",prompt:`Full-width split comparison (grid grid-cols-1 md:grid-cols-2 min-h-[60vh]).
      Before half (bg-[#1a1a1a] flex items-center justify-center p-8 md:p-16): muted/dark tone, large "Before" or "قبل" label (text-sm uppercase tracking-widest text-red-400 mb-4), bullet points describing the problem state (text-white/70), sad/frustration emoji.
      After half (bg-accent/10 flex items-center justify-center p-8 md:p-16): vibrant accent tone, large "After" or "بعد" label (text-sm uppercase tracking-widest text-accent mb-4), bullet points describing the improved state, success emoji.
      Bold testimonial quote spanning full width below (bg-[#111] py-8 text-center text-xl italic text-white/80).`},{type:"stats",prompt:`Accent-colored full-width section (bg-accent py-16 text-white).
      4 stats in grid (grid grid-cols-2 md:grid-cols-4 gap-8 max-w-5xl mx-auto text-center):
      Each: number (text-4xl md:text-5xl font-black) + label (text-sm uppercase tracking-wide opacity-80 mt-2).
      Use real numbers. Bold and confident.`},{type:"story",prompt:`Split story (grid grid-cols-1 md:grid-cols-2 gap-0 min-h-[50vh]).
      Image side: large image (object-cover, fills half).
      Text side (flex items-center): <div class="p-8 md:p-16">
        Pull quote (text-xl italic mb-6 border-l-4 border-accent pl-6)
        Story paragraphs (text-lg opacity-80 leading-relaxed mb-6). Key phrases bold.
        Author name (font-bold text-accent mt-4).
      </div>`},{type:"scenario",prompt:`Light/white section (py-20). Headline (text-3xl font-bold mb-4 text-center) + subtitle (text-lg opacity-60 mb-12 text-center).
      3-step horizontal flow (flex flex-col md:flex-row items-start gap-8 max-w-4xl mx-auto):
      Each step: <div class="flex-1 text-center">
        <div class="w-16 h-16 rounded-full bg-accent text-white flex items-center justify-center text-2xl font-bold mx-auto mb-4">1</div>
        <h4 class="text-xl font-bold mb-2">Step title</h4>
        <p class="opacity-70">Description</p>
      </div>
      Connecting dashed line between circles on desktop (border-t-2 border-dashed border-accent/30).`},{type:"guarantee",prompt:`Light section (bg-gray-50 py-20). Centered card (max-w-xl mx-auto bg-white rounded-2xl p-10 shadow-xl text-center).
      Guarantee badge: <div class="w-32 h-32 rounded-full border-4 border-accent flex items-center justify-center mx-auto mb-6"><span class="text-xl font-black text-accent">100%<br/>Guarantee</span></div>
      Headline (text-2xl font-bold mb-4), detailed terms (opacity-70 mb-6), trust icons as text (text-sm opacity-50).
      NO <img> tags.`},{type:"faq",prompt:`White section (py-20). Headline (text-3xl font-bold mb-12 text-center).
      FAQ cards (max-w-3xl mx-auto): each <div class="border border-gray-200 rounded-xl p-6 mb-4">
      Question (text-lg font-bold mb-3) with accent "+" icon, answer (opacity-70 leading-relaxed).
      All items open. 5-6 items.`},{type:"cta",prompt:`Two-column CTA (grid grid-cols-1 md:grid-cols-2 gap-12 py-20 max-w-6xl mx-auto px-6).
      Left column: headline (text-3xl font-bold mb-4), subtitle (opacity-70 mb-6), pricing (original: text-2xl line-through opacity-40, sale: text-5xl font-black text-accent), urgency text (text-sm text-red-500 mt-4 font-bold — e.g., "Limited time offer"), trust list (mt-6: guarantee, shipping, support).
      Right column: form card (bg-gray-50 rounded-2xl p-8 shadow-lg): name, email, phone inputs (border-2 border-gray-200 rounded-xl p-4 w-full mb-4 focus:border-accent), CTA button (bg-accent text-white w-full py-5 rounded-xl text-xl font-bold hover:opacity-90), trust text (text-sm opacity-50 mt-4 text-center).`}]}];function i(e,t="en"){let o=a.map((e,t)=>`${t+1}. "${e.name}" — ${e.description.split(".")[0]}. Best for: ${e.bestFor}`).join("\n");return`Based on the following business/product information, suggest 6-8 highly specific and relevant image search terms for Unsplash.

The keywords should capture the essence, use case, and aesthetic of this product/business. Be specific — avoid generic terms.

BUSINESS INFORMATION:
- Business Name: ${e.businessName}
- Industry: ${e.industry}
- Description: ${e.description}
- Products/Services: ${e.products}
- Target Audience: ${e.targetAudience}
- Design Style: ${e.designStyle}

For example, if the product is a "tactical shovel", good keywords would be:
["tactical shovel", "camping gear outdoor", "military survival tool", "wilderness adventure", "hiking equipment nature", "emergency preparedness kit"]

LAYOUT SELECTION:
Also choose the BEST layout design from these ${a.length} options:
${o}

Choose the layout that best matches the product type and industry.

Respond ONLY with valid JSON in this format:
{ "keywords": ["term1", "term2", "term3", "term4", "term5", "term6"], "layoutName": "Layout Name Here" }`}function n(e,t="en",o,i,n,l){let s="ar"===t,d=a[Math.floor(Math.random()*a.length)];if(n){let e=a.find(e=>e.name===n);e&&(d=e)}let c=s?`IMPORTANT: ALL text content MUST be in Arabic (العربية). Use proper Arabic grammar and eloquent, persuasive marketing language. Add dir="rtl" to the root div. Use font-family: 'Cairo', sans-serif for the root element. Names should be Arabic names. Write like a native Arabic copywriter — natural, powerful, emotional.`:"ALL text content must be in English. Use font-family: 'Inter', sans-serif for the root element.",p=o.length>0?`
AVAILABLE IMAGES — You MUST use ALL of these URLs in <img> tags throughout the page:
${o.map((e,t)=>`${t+1}. ${e}`).join("\n")}
IMPORTANT: Every URL above MUST appear in an <img src="..."> tag in your output. Do NOT skip any.
`:"\nNo images available — use solid dark backgrounds and gradients instead.\n",m=e.productImageUrl?`
PRIMARY PRODUCT IMAGE (uploaded by user — this is the REAL product photo):
URL: ${e.productImageUrl}
RULES FOR THIS IMAGE:
- Use it as the main product image in the HERO section (large, prominent, inside a proper container with shadow)
- Use it in the FEATURES section as the primary product showcase
- Do NOT use it in: guarantee section, FAQ, footer, stats, or any section that is NOT about the product itself
- ⚠️ The guarantee section must have ZERO <img> tags — only a circular text badge (div with rounded-full) and text
- This is the REAL product — it should look premium and professional wherever it appears
`:"",g=i?`
BEFORE & AFTER COMPARISON IMAGE (AI-Generated — MUST USE):
- Image URL: ${i.imageUrl}
- Category: ${i.category}
- Person: ${i.gender}
This is a SINGLE side-by-side comparison image showing the SAME person: RIGHT side = before (problem), LEFT side = after (result).
You MUST use this EXACT URL in the Before & After section.
Display it as a FULL-WIDTH image in a fixed container:
<div class="w-full max-w-4xl mx-auto overflow-hidden rounded-2xl"><img src="${i.imageUrl}" alt="${s?"قبل وبعد":"Before and After"}" class="w-full h-auto" /></div>
Add clear labels ABOVE the image using two columns: "${s?"بعد":"After"}" on the LEFT, "${s?"قبل":"Before"}" on the RIGHT.
Add a compelling stat below (e.g., "${s?"93% من العملاء لاحظوا نتائج خلال 14 يوم":"93% of customers saw results in 14 days"}").
`:null,u=l&&l.length>0?`
USER-UPLOADED SECONDARY IMAGES (AI-Analyzed — HIGH PRIORITY):
These images were uploaded by the business owner and analyzed to fit specific sections. You MUST use each one in its designated section:
${l.map(e=>`- Section: "${e.section}" → Image URL: ${e.imageUrl}
  Description: ${e.description}
  RULE: This image MUST appear inside the <!-- SECTION:${e.section} --> section.`).join("\n")}
IMPORTANT: These user photos take priority over Unsplash images for their assigned sections.
`:"",h=d.sections.map(e=>e.type).includes("beforeAfter"),b=0,x=d.sections.filter(e=>"beforeAfter"!==e.type||!!g).map(e=>{b++;let t=e.type.replace(/([A-Z])/g," $1").toUpperCase().trim(),o="";return"beforeAfter"===e.type&&g&&(o="\n   Use the BEFORE & AFTER image URLs provided above. This section is MANDATORY for this product."),`${b}. ${t} — ${r(d,e.type)}${o}`}).join("\n\n");b++;let f=`${b}. FOOTER — Clean footer with "Built with <a href='/' class='text-blue-400 hover:underline'>PageCraft AI</a>"`;return`You are a WORLD-CLASS direct-response copywriter AND web designer. You create premium, high-converting sales landing pages.

YOUR WRITING STYLE: You write like the best sales copywriters — emotional, persuasive, story-driven. You use the PAS framework (Pain → Agitate → Solve). You make the reader FEEL the problem before showing them the solution. You highlight KEY WORDS in accent colors for emphasis. Every sentence earns its place.

DESIGN PERSONALITY: "${d.name}"
${d.description}

${c}

PRODUCT/BUSINESS INFORMATION:
- Business Name: ${e.businessName}
- Industry: ${e.industry}
- Description: ${e.description}
- Target Audience: ${e.targetAudience}
- Pain Points: ${e.painPoints}
- Products/Services: ${e.products}
- Unique Selling Points: ${e.uniqueSellingPoints}
- Pricing Model: ${e.pricingModel}
- Brand Colors: ${e.brandColors}
- Design Style: ${e.designStyle}
- Tone of Voice: ${e.toneOfVoice}
- Primary CTA: ${e.primaryCTA}
- CTA Goal: ${e.ctaGoal}
${p}
${m}
${u}
${g||""}

PAGE STRUCTURE — Follow this layout's section flow:

${!(h&&g)&&h?"NOTE: SKIP the Before & After section entirely — this product does not need visual body comparison.\n":""}
${x}

${f}

## QUALITY STANDARDS (Apply to ALL sections)

**Hero sections:** Headline must use font-black (not font-bold), text-5xl+ mobile, text-7xl+ desktop. Key phrase in accent <span>. Subtitle max 2 lines with mt-6 mb-8. CTA min px-8 py-4 rounded-xl. Use min-h-[80vh] or min-h-screen. White space is premium.

**Features sections:** Visual hierarchy: icon/number → title (font-bold text-xl) → description. Consistent card sizing. Add hover:-translate-y-1 hover:shadow-xl transition-all duration-300. Gap-8 minimum. Compelling section headline.

**CTA sections:** Price anchoring mandatory (original line-through + sale price text-4xl font-black accent). Form inputs: rounded-xl border-2 focus:border-accent p-4. CTA button: w-full py-5 text-xl font-bold rounded-xl (largest on page). Urgency + trust elements below.

COPYWRITING RULES (CRITICAL):
- Use PAS framework: Pain → Agitate → Solve throughout the page
- Open with a pain-point hook (question or provocative statement)
- Highlight KEY WORDS/PHRASES using <span> with accent color class (e.g., text-blue-400, text-amber-400)
- Bold important statements with <strong> tags
- Use emotional language: "تخيل..." / "Imagine...", "هل سئمت..." / "Are you tired of..."
- Paint specific scenarios the reader relates to — not vague benefits
- Include specific numbers, percentages, and measurements
- Write flowing paragraphs for story sections, NOT just bullet points
- Every section must have a powerful headline that makes a CLAIM or asks a QUESTION
- CTA button text should be action-oriented and specific (not just "Buy Now")

ADVANCED COPYWRITING RULES (MANDATORY):
- HEADLINES: Every headline must make a specific CLAIM or ask a PROVOCATIVE QUESTION. Bad: "Our Features". Good: "3 Reasons Why 10,000+ Women Trust KARAN for Their Skin"
- OPENING HOOK: First sentence of the hero must be a pain-point question or shocking statistic. NEVER start with "Welcome" or the product name.
- URGENCY: Include at least 2 urgency elements throughout the page: limited stock, time-limited offer, exclusive pricing, "today only", countdown-style text
- SPECIFICITY: Replace ALL vague words with specific numbers. Bad: "many customers". Good: "10,847 customers in 23 countries"
- SOCIAL PROOF NUMBERS: Every social proof mention must include a specific number. Bad: "Trusted by thousands". Good: "Trusted by 12,500+ customers since 2019"
- STORY SECTION: Must tell a REAL narrative story (founder's journey, customer transformation, or origin story) — NOT a list of company values. Write in first person or vivid third person.
- POWER WORDS (use these in Arabic pages): استثنائي، حصري، مضمون، ثوري، لأول مرة، محدود، فوري، مجاني، أثبت، سري
- POWER WORDS (use these in English pages): Exclusive, Guaranteed, Revolutionary, Limited, Instant, Free, Proven, Secret, Breakthrough, Urgent
- CTA TEXT: Must be specific and action-oriented. Bad: "Buy Now". Good: "احصلي على بشرة مشرقة الآن" / "Get Your Glowing Skin Now"
- GUARANTEE TEXT: Must include specific terms: "30/60/90 day", "full refund", "no questions asked", and a customer satisfaction percentage (e.g., "98.7% satisfaction rate")

COLOR RULES:
- Choose colors that match the PRODUCT CHARACTER:
  • Military/tactical/outdoor → dark bg (#0a0a0f), blue accent (#3b82f6), amber highlights
  • Beauty/skincare → soft dark (#1a1520) or clean white, rose/pink accents, gold highlights
  • Beauty/skincare/cosmetics → clean white (#faf8f5) or cream bg, dark emerald (#065f46) or rose (#9f1239) accents, gold (#d97706) highlights for badges
  • Tech/SaaS → deep navy (#0f172a), electric blue accents, clean whites
  • Food/beverage → warm dark (#1a1208) or cream bg, orange/amber accents
  • Health/fitness → dark (#0a1612), teal/green accents, energetic highlights
  • Fashion/luxury → pure black (#000), gold accents, minimal white text
  • Education/courses → soft white bg, deep blue (#1e3a5f) accents, warm orange highlights
  • Consulting/services → clean white bg, navy (#0f172a) or teal (#0d9488) accents, professional feel
- Pick ONE accent color and use it CONSISTENTLY for: highlighted words, CTA buttons, numbers, icons, borders
- Main text: white (on dark) or near-black (on light). Secondary text: gray-400 (on dark) or gray-600 (on light)

IMAGE RULES (MANDATORY — You will be penalized for violating these):
- You MUST use ALL provided image URLs. Every single one. This is non-negotiable.
- NEVER FABRICATE OR INVENT IMAGE URLs. Only use the EXACT URLs listed above in AVAILABLE IMAGES. If you need more images, REUSE an existing URL — do NOT create fake unsplash.com links.
- EVERY image inside a fixed-dimension container: <div class="w-full h-80 overflow-hidden rounded-2xl"><img src="IMAGE_URL_HERE" alt="..." class="w-full h-full object-cover" loading="lazy" /></div>
- Hero background images: absolute positioned with w-full h-full object-cover inside relative min-h-[80vh] container
- Feature sections: each feature MUST include one of the provided images in a fixed container (h-64 or h-80)
- NEVER put images without surrounding text content
- NEVER let images appear unsized — always use fixed height containers (h-64, h-80, h-96)
- Distribute images across: hero (1), pain section (1), features (2-3), story (1), scenario (1), additional sections (1-2)
- If you run out of provided URLs, REUSE one that fits the context. NEVER make up a URL.
- NEVER place <img> tags in: guarantee section, FAQ section, or footer — these are TEXT-ONLY sections
- In split layouts, image container MUST have explicit width class (w-full md:w-[45%]) and be separated from text by gap-8 md:gap-12 on the parent flex container

STATS SECTION RULES:
- Stats MUST be displayed in a HORIZONTAL row using: flex flex-row items-center justify-around or grid grid-cols-4
- Each stat: large number (text-4xl or text-5xl font-bold) in accent color ABOVE the label text
- Stats must be separated with visible dividers (border-r or gap) — NOT stacked vertically
- Always use py-12 or py-16 for the section

FORM / ORDER SECTION RULES:
- EVERY generated page MUST include a contact/order form in the final CTA section. This is MANDATORY.
- The form must include at minimum: name, email, and phone fields, plus a submit CTA button.
- If CTA goal is "contact" → form title: "تواصل معنا" / "Get in Touch"
- If CTA goal is "purchase" → form title: "اطلب الآن" / "Order Now" (add address field)
- If CTA goal is "signup" → form title: "ابدأ الآن" / "Start Now" (name + email only)
- If CTA goal is "download" → form title: "حمّل الآن" / "Download Now" (name + email only)
- If CTA goal is "learn-more" → form title: "احصل على معلومات" / "Get More Info"
- Form inputs must be properly styled: w-full p-4 rounded-lg bg-gray-800 border border-gray-600 text-white placeholder-gray-400 focus:border-accent focus:outline-none
- Labels must be above inputs (block mb-2 text-sm font-medium text-gray-300)
- Each input wrapped in a div with mb-4 spacing
- CTA submit button: w-full py-4 rounded-lg font-bold text-lg bg-accent hover:opacity-90 transition
- Below button: centered trust text (guarantee, return policy) in small gray text
- The pricing card should have: bg-gray-800/50 rounded-2xl p-8 border border-gray-700
- Original price: line-through text-gray-500, current price: text-3xl font-bold text-accent

BEFORE & AFTER SECTION RULES:
- The before/after image is a SINGLE side-by-side comparison photo showing the SAME person (left=after/result, right=before/problem)
- Display ONLY the provided image — do NOT add text cards, bullet lists, or text descriptions of before/after states above or beside the image
- Structure: headline → two-column labels → the image → a stat/testimonial line below
- Labels MUST match the page language: use "قبل" and "بعد" for Arabic pages, "Before" and "After" for English pages. NEVER use English labels on Arabic pages.
- Left label = After/بعد, Right label = Before/قبل
- The image should be full-width in a rounded container: <div class="w-full max-w-4xl mx-auto overflow-hidden rounded-2xl"><img ... class="w-full h-auto" /></div>
- Keep this section clean and image-focused — the photo speaks for itself

GUARANTEE SECTION RULES:
- MUST include a visual circular badge (not just text)
- Badge: w-28+ h-28+ rounded-full with gradient or solid accent bg, centered with mx-auto
- Badge contains: bold white text with guarantee period (e.g., "30 يوم" or "30 Days")
- Below badge: bold headline, detailed guarantee text
- Include specific guarantee terms (refund process, no questions asked, etc.)
- Trust-building additional elements (customer count, satisfaction percentage)
- ⚠️ ABSOLUTE PROHIBITION: The guarantee section must contain ZERO <img> tags. NO product photos, NO images at all.
- The ONLY visual element allowed is the circular text badge (div with rounded-full)
- If you put ANY <img> tag in the guarantee section, the output will be REJECTED
- Use Unicode symbols (✓ ★ ● ✦ 🛡️) for visual elements instead of images

FAQ SECTION RULES:
- MUST include at least 5 relevant FAQ items
- Questions must address REAL objections and concerns for THIS specific product
- Answers should be detailed and reassuring — not one-liners
- Use clean card/strip layout with clear visual separation between items
- All items must be displayed as open/visible (static HTML, no JavaScript accordions)
- Questions in bold, answers in lighter text color

CUSTOMER REVIEWS RULES (when included in story/testimonials section):
- Include star ratings using ★ symbols (★★★★★) in amber/gold color
- Each review: star rating, quote text in italics, customer name, optional title/role
- Use at least 3 reviews for credibility
- Reviews should feel authentic — specific details about the product experience
- Avatar circles with customer initials if no photos available

HERO CENTERING RULE:
- Hero content must be VERTICALLY CENTERED using: flex items-center min-h-[80vh]
- For split heroes: use flex items-center on the row container WITH gap-6 md:gap-10
- Text and image must NEVER overlap — explicit width classes (w-full md:w-[55%] and w-full md:w-[45%]) are REQUIRED
- Text must NEVER appear stuck to the top of the viewport
- Hero section must be VISUALLY STRIKING — never a plain white background with small text
- If using a light hero: add gradient overlay, accent-colored borders, or a bold background pattern
- Product image in hero MUST be large (h-80 or h-96), inside a rounded container with shadow-2xl
- Hero headline must be text-4xl lg:text-6xl font-bold — NEVER smaller than text-3xl

SPACING & PADDING RULES (CRITICAL):
- EVERY section must use a wide container: <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- DO NOT use "container mx-auto" — always use "max-w-7xl mx-auto" for wider content
- HERO SECTION must fill the width: use the same max-w-7xl container with minimal padding (px-4 sm:px-6 lg:px-8)
- Text must NEVER touch the edges of the screen — always ensure px-4 minimum on mobile
- All sections must have vertical padding: py-8 or py-12 minimum; hero section should use py-10
- For RTL layouts, padding applies equally to both sides
- Hero text overlay must have px-4 minimum padding from edges
- Grid/flex containers inside sections must also respect container padding

TEXT-IMAGE SEPARATION RULES (CRITICAL — NEVER VIOLATE):
- In ALL split layouts (hero, features, pain points, story), text and image MUST be separated by gap-6 md:gap-10 on the flex container
- NEVER let text touch or overlap an image — always use gap classes on the parent flex/grid container
- Hero split layout MUST use: <div class="flex flex-col md:flex-row items-center gap-6 md:gap-10">
- Feature zigzag layouts MUST use gap-6 md:gap-10 on the flex row
- Images in split layouts must be wrapped in their own div with explicit width (w-full md:w-[45%] or md:w-[50%]) — NEVER let the image and text compete for the same space
- Text side must also have explicit width (w-full md:w-[55%] or md:w-[50%])
- On mobile (flex-col), add mb-6 on the image container to separate from text below

MOBILE RESPONSIVE RULES (CRITICAL):
- ALL text must use responsive sizes: text-sm md:text-base lg:text-lg for body, text-2xl md:text-4xl lg:text-6xl for headlines
- Buttons must be full-width on mobile: w-full sm:w-auto
- Grid layouts must stack on mobile: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
- Images must be responsive: w-full h-48 md:h-64 lg:h-80 object-cover
- Hero section height: min-h-[70vh] md:min-h-[80vh] — do NOT use min-h-screen (too tall, creates excessive whitespace)
- Padding: px-4 sm:px-6 lg:px-8
- Font sizes for stats numbers: text-3xl md:text-5xl
- Forms: inputs must be w-full with p-3 md:p-4
- Split layouts (text + image side by side): flex-col md:flex-row
- No fixed widths anywhere — use max-w-* with w-full
- Touch targets: min-h-[44px] for all clickable elements (buttons, links)
- Testimonial cards: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
- FAQ items: w-full with px-4 md:px-6 padding

SECTION MARKERS (MANDATORY — DO NOT SKIP):
You MUST wrap each major section of the page with HTML comment markers. This is CRITICAL for the editor to work.
Use this exact format — opening and closing markers for every section:
${d.sections.filter(e=>"beforeAfter"!==e.type||g).map(e=>`<!-- SECTION:${e.type} -->...${e.type} content...<!-- /SECTION:${e.type} -->`).join("\n")}
<!-- SECTION:footer -->...footer content...<!-- /SECTION:footer -->
Every section must have BOTH an opening <!-- SECTION:name --> and closing <!-- /SECTION:name --> marker.
The markers must be at the TOP LEVEL inside the root <div>, not nested inside other elements.

TECHNICAL RULES:
- Output a SINGLE root <div> — NO <html>, <head>, <body>, <script>, <svg> tags
- Use "class" NOT "className" (this is raw HTML, not JSX)
- ${s?'Add dir="rtl" to the root <div>':""}
- Use Unicode symbols instead of SVGs: ✓ ✗ ★ ● → ← ✦ ◆ for icons
- All buttons: href="#"
- All content must be real, meaningful, specific to THIS product — NO placeholder text

Respond ONLY with valid JSON (no markdown, no code fences):
{
  "html": "<div class=\\"min-h-[80vh] ...\\">...complete page HTML...</div>",
  "meta": {
    "title": "${s?"عنوان SEO بحد أقصى ٦٠ حرف":"SEO title max 60 chars"}",
    "description": "${s?"وصف SEO بحد أقصى ١٥٥ حرف":"SEO description max 155 chars"}"
  }
}`}}};