{% extends "base.html" %}

{% block title %}Website Builder - Layout Analysis{% endblock %}

{% block content %}
<div x-data="websiteBuilder">
    <div class="card mb-8">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Website Builder</h1>
            <p class="text-lg text-gray-600">Analyze multiple websites to understand their layout structure for your build</p>
        </div>
        
        <!-- URL Input Form -->
        <div class="max-w-lg mx-auto mb-8">
            <div class="mb-4">
                <label for="url" class="block text-gray-700 font-medium mb-2">Website URL</label>
                <div class="flex">
                    <input 
                        type="text" 
                        x-model="urlInput"
                        id="url" 
                        placeholder="https://example.com" 
                        class="form-input flex-grow" 
                        @keyup.enter="analyzeWebsite()"
                        :disabled="isAnalyzing">
                    <button 
                        @click="analyzeWebsite()"
                        :disabled="isAnalyzing || !urlInput.trim()"
                        :class="isAnalyzing ? 'opacity-50 cursor-not-allowed' : ''"
                        class="btn-primary ml-2 whitespace-nowrap">
                        <i class="fas" :class="isAnalyzing ? 'fa-spinner fa-spin' : 'fa-plus'" class="mr-2"></i>
                        <span x-text="isAnalyzing ? 'Analyzing...' : 'Add Site'"></span>
                    </button>
                </div>
                <p class="text-sm text-gray-500 mt-2">Enter a complete URL including http:// or https://</p>
            </div>
            
            <!-- Progress for current analysis -->
            <div x-show="isAnalyzing" class="mb-4">
                <div class="bg-gray-200 rounded-full h-2">
                    <div class="bg-primary-600 h-2 rounded-full transition-all duration-300" 
                         :style="`width: ${currentProgress}%`"></div>
                </div>
                <p class="text-sm text-gray-600 mt-2" x-text="currentMessage"></p>
            </div>
        </div>
    </div>

    <!-- Analyzed Sites Grid -->
    <div x-show="analyzedSites.length > 0">
        <h2 class="text-2xl font-bold text-gray-900 mb-6">Layout Analysis Results</h2>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
            <template x-for="(site, index) in analyzedSites" :key="site.domain">
                <div class="card hover:shadow-lg transition-ease">
                    <!-- Site Header -->
                    <div class="mb-4 border-b border-gray-200 pb-4">
                        <h3 class="text-lg font-semibold text-gray-900 mb-1 truncate" x-text="site.title"></h3>
                        <a :href="site.url" target="_blank" class="text-sm text-primary-600 hover:underline truncate block">
                            <i class="fas fa-external-link-alt mr-1"></i>
                            <span x-text="site.url"></span>
                        </a>
                    </div>
                    
                    <!-- Layout Info -->
                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-desktop mr-1"></i>Dimensions
                        </h4>
                        <div class="text-sm text-gray-600">
                            <span x-text="`${site.layout.width} × ${site.layout.height}px`"></span>
                        </div>
                    </div>
                    
                    <!-- Layout Sections -->
                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-gray-700 mb-2">
                            <i class="fas fa-sitemap mr-1"></i>Layout Structure
                        </h4>
                        
                        <!-- ASR (OpenAI) Layout if available -->
                        <div x-show="site.asr && site.asr.template_structure">
                            <div class="text-xs text-blue-600 mb-2">
                                <i class="fas fa-robot mr-1"></i>AI-Generated Structure
                            </div>
                            <div class="bg-gray-50 rounded p-3">
                                <div class="font-mono text-xs space-y-1">
                                    <template x-for="(structure, i) in site.asr.template_structure" :key="i">
                                        <div class="flex items-start">
                                            <span class="text-blue-600 mr-2" x-text="i === site.asr.template_structure.length - 1 ? '└─' : '├─'"></span>
                                            <span class="text-gray-800" x-text="structure"></span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Fallback Layout Sections -->
                        <div x-show="!site.asr || !site.asr.template_structure">
                            <div class="text-xs text-gray-600 mb-2">
                                <i class="fas fa-code mr-1"></i>Detected Sections
                            </div>
                            <div class="space-y-2">
                                <template x-for="(section, i) in site.layout.sections.slice(0, 5)" :key="i">
                                    <div class="bg-gray-100 rounded p-2">
                                        <div class="flex items-center justify-between">
                                            <span class="text-xs font-medium text-gray-700" x-text="section.type"></span>
                                            <span x-show="section.pattern" 
                                                  class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded" 
                                                  x-text="section.pattern"></span>
                                        </div>
                                        <p class="text-xs text-gray-600 mt-1 line-clamp-2" x-text="section.content_preview"></p>
                                    </div>
                                </template>
                                <div x-show="site.layout.sections.length > 5" class="text-xs text-gray-500 text-center">
                                    <span x-text="`...and ${site.layout.sections.length - 5} more sections`"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Actions -->
                    <div class="flex space-x-2 mt-4 pt-4 border-t border-gray-200">
                        <a :href="`/results/${site.domain}`" class="btn-secondary flex-grow text-center text-sm">
                            <i class="fas fa-eye mr-1"></i> Full Analysis
                        </a>
                        <button 
                            @click="removeSite(index)"
                            class="px-3 py-2 text-xs bg-red-100 text-red-700 hover:bg-red-200 rounded transition-colors">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- Empty State -->
    <div x-show="analyzedSites.length === 0 && !isAnalyzing" class="text-center py-12">
        <i class="fas fa-globe-americas text-6xl text-gray-300 mb-4"></i>
        <h3 class="text-xl font-medium text-gray-700 mb-2">No sites analyzed yet</h3>
        <p class="text-gray-500">Add a website URL above to start analyzing layouts</p>
    </div>
</div>

<!-- Preset Templates Section -->
<div class="mt-12">
    <h2 class="text-2xl font-bold text-gray-900 mb-6">Preset Template Structures</h2>
    <p class="text-gray-600 mb-8">Copy these generic template structures for common website types. Click any template to copy to clipboard.</p>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" x-data="{ 
        activeTemplate: null,
        templates: {
            saas: `Template Structure:
- Header
Type: Fixed/Sticky Navigation with Glass Effect
Overlay Behavior: Stays visible during scroll, becomes solid background
Contents:
  Company logo with wordmark (top-left, 180px width)
  Navigation menu: Product, Pricing, Resources, About, Login (center, 16px font)
  Sign In button (ghost style, top-right)
  CTA button "Start Free Trial" (primary color, top-right)
  Progress indicator for trial users (conditional)

- Hero Section
Type: Full Height (100vh) with Animated Background
Background: Gradient mesh animation (purple to blue) with floating geometric shapes
Content:
  Eyebrow text: "Trusted by 50,000+ teams worldwide"
  Main headline: "Transform Your Business with [Product Name]" (72px, bold)
  Subheading: "Streamline workflows, boost productivity, and scale faster with our all-in-one platform" (24px, light)
  Feature highlight badges: "AI-Powered", "Real-time Sync", "Enterprise Ready"
  Primary CTA: "Start Free Trial - No Credit Card Required" (prominent button)
  Secondary CTA: "Watch 2-Min Demo" (ghost button with play icon)
  Product hero image: Dashboard screenshot with subtle animation
  Trust indicators: "SOC 2 Compliant", "99.9% Uptime", customer logos row

- Navigation
Location: Inside Header, persistent
Style: Horizontally aligned, 16px font weight 500, hover animations
Sticky/Visible During Scroll: Yes, with backdrop blur effect

Main Content
- Section 1: Features Overview
Title: "Everything you need to scale your business"
Subtitle: "Powerful features designed for modern teams"
Format: 3-column feature grid with interactive hover states
Features:
  1. "Automated Workflows" - Icon: gear, Description: "Save 10+ hours per week with smart automation", Supporting image: workflow diagram
  2. "Real-time Analytics" - Icon: chart, Description: "Make data-driven decisions with live insights", Supporting image: dashboard preview
  3. "Team Collaboration" - Icon: users, Description: "Connect teams across departments seamlessly", Supporting image: collaboration interface
Each feature includes: 64px icon, 24px title, 16px description, "Learn More" link
Background: Light gray section with subtle pattern

- Section 2: Social Proof
Title: "Trusted by teams at companies like these"
Customer logo grid: 12 recognizable company logos in grayscale
Testimonial spotlight:
  Featured quote: "This platform increased our team productivity by 300%" 
  Customer: Sarah Chen, VP Operations at TechCorp
  Customer photo: Professional headshot
  Company logo: TechCorp logo
Metrics display:
  "2M+ tasks completed", "150+ countries", "99.9% customer satisfaction"
Format: Dark background section with white text and accent highlights

- Section 3: Pricing
Title: "Simple, transparent pricing that grows with you"
Subtitle: "Start free, upgrade when you're ready"
Format: 3-tier pricing cards with featured middle tier
Tiers:
  Basic ($0/month): "Perfect for getting started", 5 users, Core features, Email support, "Start Free" button
  Pro ($29/month): "Most Popular" badge, 25 users, Advanced features, Priority support, Integrations, "Start Trial" button (primary)
  Enterprise ($99/month): "For growing teams", Unlimited users, Custom features, Dedicated success manager, "Contact Sales" button
Additional elements: "No setup fees", "Cancel anytime", "30-day money-back guarantee"
Toggle: Monthly/Annual billing with "Save 20%" indicator

Footer
- Content Blocks:
  Product section: Features, Integrations, API, Pricing, Changelog
  Company section: About, Careers, Press, Blog, Contact
  Resources section: Help Center, Community, Webinars, Templates
  Legal section: Privacy Policy, Terms of Service, Security, GDPR
  Newsletter signup: "Get product updates and tips" with email input
  Social links: Twitter, LinkedIn, YouTube, GitHub with follower counts
  Trust indicators: SOC 2, GDPR, ISO certifications

Assets
Logo: Primary logo (color), Secondary logo (white), Favicon, Social media variants
Screenshots: Dashboard overview, Feature closeups, Mobile app interface, Admin panel
Videos: Product demo (2 minutes), Customer testimonials, Feature spotlights
Icons: 50+ feature icons, Social media icons, UI element icons
Backgrounds: Hero gradient, Section patterns, Texture overlays`,

            ecommerce: `Template Structure:
- Header
Type: Multi-level navigation with mega menu
Overlay Behavior: Fixed header with promotional banner and search prominence
Contents:
  Promotional banner: "Free shipping on orders over $75 - Shop now!" (dismissible)
  Store logo with tagline (top-left, 200px width)
  Search bar with autocomplete (center, 500px width, "Search products...")
  Account dropdown: "Sign In", "My Account", "Wishlist" (top-right)
  Shopping cart icon with item count badge (top-right)
  Main navigation with mega menus: Women, Men, Kids, Home, Sale, Brands
  Secondary navigation: Customer Service, Track Order, Store Locator

- Hero Section
Type: Large banner carousel with 3-4 rotating slides
Background: High-quality lifestyle photography with models
Content:
  Slide 1: "New Spring Collection" - "Fresh styles for the season ahead", "Shop Women's" + "Shop Men's" buttons
  Slide 2: "Up to 50% Off Sale" - "Limited time on select items", "Shop Sale" button
  Slide 3: "Free Shipping Weekend" - "No minimum purchase required", "Shop Now" button
  Carousel controls: Dots navigation, auto-advance timer, pause on hover
  Overlay: Semi-transparent dark overlay for text readability

- Navigation
Location: Below header search area
Style: Category-focused horizontal menu with dropdown mega menus
Sticky/Visible During Scroll: Header stays, category nav scrolls away

Main Content
- Section 1: Featured Categories
Title: "Shop by Category"
Subtitle: "Discover what's trending this season"
Format: 2x3 grid layout with large category images
Categories: 
  Women's Fashion: Model in spring dress, "New Arrivals" badge, "Shop Women's" overlay
  Men's Style: Male model in casual wear, "Trending Now" badge, "Shop Men's" overlay  
  Kids Collection: Children playing outdoors, "Back to School" badge, "Shop Kids" overlay
  Home Decor: Styled room interior, "Home Refresh" badge, "Shop Home" overlay
  Accessories: Jewelry and bags flat lay, "Complete the Look" badge, "Shop Accessories" overlay
  Athletic Wear: Fitness lifestyle image, "Performance Gear" badge, "Shop Athletic" overlay
Each category: Hover zoom effect, category name overlay, product count display

- Section 2: Product Showcase
Title: "Trending Products"
Subtitle: "What everyone's buying right now"
Format: 4-column product grid with pagination
Product display includes:
  High-res product image with hover for alternate view
  Quick shop button overlay on hover
  Product name (16px, medium weight)
  Price display with sale pricing highlighted
  Color swatches for available variants
  Star rating with review count
  "Add to Cart" and "Add to Wishlist" buttons
  Stock status indicator ("Only 3 left!", "In Stock", etc.)
Filter sidebar: Price range, Size, Color, Brand, Customer rating, Availability
Sort options: Featured, Best Selling, Price Low to High, Price High to Low, Newest

- Section 3: Brand Promise/USP
Title: "Why Shop With [Store Name]"
Format: 4-column benefits with animated icons
Benefits:
  1. "Free Shipping & Returns" - Truck icon, "On orders over $75, hassle-free returns within 30 days"
  2. "24/7 Customer Support" - Headset icon, "Chat, call, or email us anytime for personalized help"
  3. "Size & Fit Guarantee" - Ruler icon, "Free exchanges if the fit isn't perfect"
  4. "Loyalty Rewards" - Star icon, "Earn points on every purchase, unlock exclusive perks"
Customer reviews section: 4.8/5 stars, "Based on 10,247 reviews", featured review with customer photo
Trust badges: Better Business Bureau, SSL Secure, satisfaction guarantee emblems

Footer
- Content Blocks:
  Customer Care: Size Guide, Shipping Info, Returns & Exchanges, Contact Us, FAQ
  Company Info: About Us, Careers, Press, Investor Relations, Sustainability
  Quick Links: New Arrivals, Best Sellers, Sale Items, Gift Cards, Store Locator  
  Follow Us: Instagram feed widget, Social media links with follower counts
  Newsletter: "Get 15% off your first order" email signup with fashion tips promise
  Payment methods: Visa, Mastercard, PayPal, Apple Pay, Google Pay, Afterpay logos
  Security badges: Norton Secured, SSL certificate, BBB accredited business

Assets
Logo: Primary wordmark, Secondary mark, Favicon, Social media profile images
Product Photography: Hero shots, Alternate angles, Lifestyle shots, Size guide images
Model Photography: Diverse models, Lifestyle scenarios, Seasonal campaigns
Videos: Product 360° views, Styling tips, Brand story, Customer testimonials
Icons: Category icons, Feature benefits, Social media, Payment methods
Graphics: Sale badges, New arrival tags, Seasonal banners, Size charts`,

            portfolio: `Template Structure:
- Header
Type: Minimal, clean navigation with smooth scroll transitions
Overlay Behavior: Transparent over hero, becomes frosted glass on scroll
Contents:
  Personal logo/monogram (top-left, 48px, custom typography)
  Navigation menu: Work, About, Services, Journal, Contact (center, 18px, spacing)
  Social icons cluster: Behance, Dribbble, LinkedIn, Instagram (top-right, subtle)
  Language toggle: EN/ES (small, top-right corner)
  Menu hamburger for mobile (animated three-line icon)

- Hero Section
Type: Full viewport height with parallax scrolling
Background: Abstract geometric video loop or high-res creative visual
Content:
  Greeting animation: "Hello, I'm [Full Name]" (typewriter effect, 24px)
  Professional title: "Senior UX/UI Designer & Creative Director" (64px, bold, gradient text)
  Location subtitle: "Based in San Francisco, Working Worldwide" (18px, light)
  Brief value proposition: "I craft digital experiences that delight users and drive business results"
  Primary CTA: "Explore My Work" (smooth scroll to portfolio)
  Secondary CTA: "Download Resume" (PDF link with download icon)
  Scroll indicator: Animated down arrow with "Scroll to discover" text
  Floating elements: Subtle UI component animations (cards, buttons, icons)

- Navigation
Location: Fixed header, minimal presence
Style: Clean typography, generous spacing, hover underline animations
Sticky/Visible During Scroll: Transforms from transparent to translucent background

Main Content
- Section 1: Portfolio Showcase
Title: "Selected Work"
Subtitle: "Solving complex problems through thoughtful design"
Format: Masonry grid layout with filter categories
Project categories: "Mobile Apps", "Web Design", "Branding", "UX Research"
Featured projects (6-8 total):
  1. "FinTech Mobile App" - Hover reveals: "Increased user engagement by 340%", View Case Study button
  2. "E-commerce Redesign" - Hover reveals: "Boosted conversion rate by 127%", View Project button  
  3. "SaaS Dashboard" - Hover reveals: "Reduced task completion time by 60%", See Details button
  4. "Brand Identity System" - Hover reveals: "Complete visual identity overhaul", View Process button
Each project card: High-quality mockup image, Project title, Client name, Role, Year, Tech stack tags
Interaction: Smooth hover animations, category filtering, lightbox modal previews

- Section 2: About & Expertise
Title: "About Me"
Personal narrative: "With 8+ years of experience in digital design, I've helped startups and Fortune 500 companies create user-centered solutions that drive business growth."
Professional photo: High-quality headshot in creative workspace setting
Skills visualization:
  Design: UX/UI Design (95%), Prototyping (90%), User Research (85%), Information Architecture (80%)
  Tools: Figma (Expert), Sketch (Advanced), Adobe Creative Suite (Expert), Principle (Advanced)
  Code: HTML/CSS (75%), React basics (60%), Design Systems (90%)
Experience timeline:
  2023-Present: Senior UX Designer at TechCorp, "Leading design for B2B platform serving 100K+ users"
  2020-2023: Product Designer at StartupXYZ, "Designed mobile app from 0 to 1M downloads"
  2018-2020: Freelance Designer, "Worked with 25+ clients across various industries"
Awards section: "UX Design Awards 2023 Winner", "99designs Contest Winner", "Dribbble Featured Designer"

- Section 3: Services & Process
Title: "What I Do"
Subtitle: "End-to-end design services for digital products"
Service offerings (detailed breakdown):
  1. "UX Strategy & Research" - Discovery workshops, User interviews, Competitive analysis, Journey mapping
     Starting at $5,000, Timeline: 2-3 weeks
  2. "UI/UX Design" - Wireframing, Visual design, Prototyping, Design systems
     Starting at $8,000, Timeline: 4-6 weeks  
  3. "Design Systems" - Component libraries, Documentation, Style guides, Team training
     Starting at $10,000, Timeline: 3-4 weeks
  4. "Usability Testing" - Test planning, User sessions, Analysis & recommendations
     Starting at $3,000, Timeline: 1-2 weeks
Design process visualization:
  Step 1: "Discovery" - Understanding goals, users, and constraints
  Step 2: "Research" - User interviews, market analysis, requirements gathering
  Step 3: "Design" - Wireframes, prototypes, visual design, iterations
  Step 4: "Testing" - Usability testing, feedback incorporation, refinement
  Step 5: "Delivery" - Design handoff, documentation, developer support
Client testimonials: 3 detailed testimonials with client photos, company logos, project outcomes

Footer
- Content Blocks:
  Call-to-action: "Ready to start your project?" with "Let's Talk" button and calendar booking link
  Contact methods: Email (hello@[name].com), LinkedIn profile, Behance portfolio
  Location availability: "Available for freelance projects worldwide, San Francisco meetups"
  Newsletter signup: "Design insights delivered monthly" with curated content promise
  Copyright: "© 2024 [Full Name]. All rights reserved." with made with love indicator
  Quick links: Privacy Policy, Terms of Use, Site Credits

Assets
Logo/Branding: Personal monogram, Business cards, Email signature, Social media headers
Portfolio Photography: Project mockups, Process documentation, Behind-the-scenes shots
Professional Photos: Headshots, Workspace photos, Speaking event photos, Team photos  
Case Study Assets: User journey maps, Wireframes, Design system documentation, Before/after comparisons
Videos: Design process timelapse, Client testimonials, Speaking clips, Tool tutorials
Icons: Skill badges, Process steps, Social media, Contact methods, Tool logos`,

            restaurant: `Template Structure:
- Header
Type: Traditional hospitality-focused header with reservation prominence
Overlay Behavior: Standard fixed positioning with warm color scheme
Contents:
  Restaurant logo with established date (center, "Est. 1987", 220px width)
  Phone number with call icon: "(555) 123-4567" (top-left, clickable)
  Address with location pin: "123 Main Street, Downtown" (top-left)
  Primary navigation: Menu, Reservations, About, Events, Contact (below logo)
  Reservation CTA: "Book a Table" button (prominent, top-right, warm color)
  Hours display: "Open Today: 5:00 PM - 10:00 PM" (top-right)
  Special announcements banner: "Live Jazz Every Friday Night!" (dismissible)

- Hero Section
Type: Large image banner with warm overlay
Background: Signature dish close-up (wood-fired pizza or pasta) with shallow depth of field
Content:
  Restaurant name overlay: "Nonna's Kitchen" (elegant script font, 72px)
  Tagline: "Authentic Italian Cuisine Since 1987" (24px, gold accent)
  Atmosphere description: "Where family traditions meet modern Italian flavors"
  Key highlights: "Hand-made pasta", "Wood-fired oven", "Local ingredients"
  Primary CTA: "Make Reservation" (leads to booking system)
  Secondary CTA: "View Tonight's Menu" (PDF or menu page)
  Operating hours prominent display
  "Winner: Best Italian Restaurant 2023" award badge

- Navigation
Location: Below header logo area
Style: Traditional horizontal menu with warm hover states
Sticky/Visible During Scroll: Optional, header may scroll away

Main Content
- Section 1: Restaurant Story & Atmosphere
Title: "Our Story"
Subtitle: "Three generations of authentic Italian cooking"
Content narrative: "Founded by Nonna Maria in 1987, our family restaurant brings the warmth of traditional Italian hospitality to the heart of downtown. Using recipes passed down through generations and the finest imported ingredients..."
Supporting imagery:
  Historical photo: Original Nonna Maria in the kitchen (sepia tone)
  Current photo: Third-generation chef preparing signature dish
  Restaurant interior: Warm lighting, rustic décor, wine wall display
  Kitchen shot: Wood-fired oven in action, fresh pasta making
Ambiance highlights: "Intimate lighting", "Live piano weekends", "Private dining available"
Recognition: "Featured in Food & Wine Magazine", "Zagat Rated", "Local's Choice Award"

- Section 2: Menu Highlights & Specialties
Title: "Signature Dishes"
Subtitle: "House favorites crafted with love and tradition"
Featured dishes layout (6 items in 2x3 grid):
  1. "Nonna's Ragu Bolognese" - House-made pasta, 24-hour slow-cooked sauce, aged parmesan
     Price: $28, "Customer favorite since 1987"
  2. "Wood-Fired Margherita Pizza" - San Marzano tomatoes, fresh mozzarella, basil
     Price: $24, "Authentic Neapolitan style" 
  3. "Osso Buco Milanese" - Braised veal shank, saffron risotto, gremolata
     Price: $42, "Chef's signature dish"
  4. "Fresh Burrata Antipasto" - Imported burrata, prosciutto, grilled vegetables
     Price: $18, "Perfect for sharing"
  5. "Tiramisu della Casa" - Traditional recipe, espresso-soaked ladyfingers
     Price: $12, "Made fresh daily"
  6. "Wine Pairing Experience" - Curated Italian wines with 5-course tasting
     Price: $85, "Sommelier selected"
Each dish: Professional food photography, Description, Price, Dietary indicators (GF, V, etc.)
Menu sections teaser: "Full Menu Available", "Wine List", "Dessert Menu", "Kids Menu"

- Section 3: Location, Hours & Reservations
Title: "Visit Us"
Subtitle: "Located in the heart of downtown's historic district"
Location details:
  Address: "123 Main Street, Historic Downtown District" 
  Neighborhood description: "Easy parking, walkable from hotels, near theater district"
  Landmark reference: "Across from Central Park, next to Heritage Museum"
Operating hours detailed:
  Monday-Thursday: 5:00 PM - 9:30 PM, "Quiet, intimate dining"
  Friday-Saturday: 5:00 PM - 10:30 PM, "Live jazz starts at 8 PM"  
  Sunday: 4:00 PM - 9:00 PM, "Family dinner special"
  Closed Tuesdays for "family day"
Reservation information:
  Online booking widget: OpenTable integration with real-time availability
  Party size options: 2-8 guests, "Call for larger parties"
  Special requests: "Dietary restrictions", "Celebration notes", "Seating preferences"
Additional services:
  "Private dining room for 12-20 guests"
  "Catering available for off-site events"  
  "Take-out and delivery through DoorDash"
  "Gift certificates available online"
Interactive map: Google Maps embed with parking locations marked

Footer
- Content Blocks:
  Contact information: Phone, Email, Address with driving directions link
  Operating hours: Full weekly schedule with holiday hour variations
  Social media: Instagram food photos, Facebook events, Yelp reviews showcase
  Newsletter signup: "Monthly specials and events" with wine pairing tips
  Special events: "Wine dinners", "Cooking classes", "Holiday celebrations"
  Policies: "Reservation policy", "Cancellation terms", "Large party information"
  Partnerships: "Local suppliers", "Wine importers", "Community supporters"

Assets
Logo/Branding: Primary logo with established date, Social media versions, Menu headers
Food Photography: Signature dishes, Wine pairings, Dessert close-ups, Kitchen action shots
Restaurant Photography: Dining room ambiance, Bar area, Private dining, Exterior facade
Historical Photos: Founder photos, Restaurant evolution, Award ceremonies, Celebrity visits
Videos: Chef cooking signature dish, Restaurant atmosphere, Customer testimonials
Printed Materials: Menu designs, Wine list, Business cards, Gift certificate templates
Icons: Cuisine types, Dietary restrictions, Payment methods, Social media, Awards`,

            blog: `Template Structure:
- Header
Type: Content-focused editorial header with robust search functionality
Overlay Behavior: Fixed with search expansion and category mega-menu
Contents:
  Blog publication name: "The Design Journal" (center, editorial typography, 32px)
  Tagline: "Insights, trends, and inspiration for creative professionals" (16px, below name)
  Search bar with advanced filters (prominent, "Search articles, authors, topics...")
  Primary navigation: Latest, Categories, Authors, Resources, Newsletter, About
  Secondary navigation: Popular This Week, Trending Topics, Guest Posts
  Social proof: "Join 45,000+ subscribers" with newsletter signup
  Theme toggle: Light/Dark mode switch (top-right)

- Hero Section
Type: Featured article banner with editorial focus
Background: Featured article's hero image with editorial overlay
Content:
  "Featured Article" label with publication date
  Article category: "UX Design" (colored tag)
  Headline: "The Future of Design Systems: 2024 Trends and Predictions" (48px, bold)
  Author byline: "By Sarah Chen" with author photo and follow button
  Publish date: "March 15, 2024" with estimated read time "8 min read"
  Article excerpt: "Exploring how AI, collaboration tools, and new frameworks are reshaping how design teams build and maintain design systems in modern organizations..."
  Engagement metrics: "1.2K views", "89 comments", "156 shares"
  Primary CTA: "Read Full Article" 
  Secondary actions: Save to reading list, Share article, Subscribe to author
  Related topics: #DesignSystems #UX #Productivity #Tools (clickable tags)

- Navigation
Location: Below header, persistent during scroll
Style: Editorial-style with category organization and search prominence
Sticky/Visible During Scroll: Yes, with condensed search bar

Main Content
- Section 1: Latest Articles
Title: "Latest Articles"
Subtitle: "Fresh insights from our community of designers and developers"
Format: Mixed layout - featured post + article grid
Article display includes:
  Featured article (large): High-res featured image, headline, author, excerpt, read time, category tag
  Standard articles (grid): Thumbnail, headline, author with photo, publish date, category, read time
  Author information: Photo, name, title, follower count, "Follow" button
  Engagement indicators: View count, comment count, bookmark count
  Social sharing: Twitter, LinkedIn, Facebook, Copy link
Filter options: 
  Categories: "Design", "Development", "Career", "Tools", "Inspiration", "Tutorials"
  Content type: "Articles", "Case Studies", "Interviews", "Resources"
  Read time: "Quick reads (< 5 min)", "Medium (5-15 min)", "Deep dives (15+ min)"
Sort options: "Most Recent", "Most Popular", "Most Discussed", "Editor's Picks"

- Section 2: Trending & Popular Content
Title: "What's Trending"
Subtitle: "Most popular articles from the past week"
Popular articles carousel (horizontal scroll):
  1. "Complete Guide to Figma Auto Layout" - 15K views, 234 comments
  2. "Design Career Roadmap for 2024" - 12K views, 189 comments  
  3. "AI Tools Every Designer Should Know" - 10K views, 156 comments
  4. "Portfolio Review: Before & After" - 8K views, 98 comments
  5. "Remote Design Team Best Practices" - 7K views, 87 comments
Weekly highlights section:
  "Most Bookmarked": Top 3 articles saved by readers this week
  "Most Discussed": Articles with highest comment engagement
  "Rising Stars": New authors getting attention
  "Community Picks": Reader-recommended content
Author spotlight: "Featured Author of the Week" with bio, recent articles, social links

- Section 3: Categories & Community
Title: "Explore by Topic"
Subtitle: "Dive deep into subjects that matter to you"
Category grid with rich previews:
  "UX/UI Design": 145 articles, Latest: "Accessibility in Design Systems", Top author: Sarah Chen
  "Frontend Development": 98 articles, Latest: "CSS Grid vs Flexbox in 2024", Top author: Mike Rodriguez  
  "Career Growth": 76 articles, Latest: "Salary Negotiation for Designers", Top author: Lisa Park
  "Design Tools": 89 articles, Latest: "Figma vs Sketch Comparison", Top author: David Kim
  "Inspiration": 234 articles, Latest: "Award-Winning Portfolio Designs", Top author: Emma Stone
  "Tutorials": 156 articles, Latest: "Advanced Prototyping Techniques", Top author: Alex Chen
Community features:
  "Discussion Forum": Active conversations, recent topics, expert moderators
  "Job Board": Remote opportunities, company profiles, salary ranges
  "Events Calendar": Webinars, conferences, local meetups, workshops
  "Resource Library": Templates, tools, checklists, guides
Newsletter sections: "Weekly Digest", "Career Tips", "Tool Updates", "Design Inspiration"

Footer
- Content Blocks:
  About section: Mission statement, team bios, contact information, media kit
  Content organization: Archives by date, Popular tags, Author directory, Content guidelines
  Community links: Slack group, Discord server, Twitter community, LinkedIn group
  Resources: Style guide, Writing guidelines, Guest post submissions, Partnership opportunities
  Newsletter options: "Weekly roundup", "Breaking news", "Career tips", "Tool reviews"
  Legal pages: Privacy policy, Terms of use, Cookie policy, Content licensing
  Support: Contact form, FAQ, Technical issues, Content suggestions

Assets
Editorial Branding: Publication logo, Social media headers, Newsletter templates, Author badges
Photography: Author headshots, Featured article images, Event photography, Office/workspace shots
Graphics: Category icons, Social media templates, Infographic templates, Newsletter graphics
Video Assets: Author introductions, Tutorial screencasts, Event recordings, Behind-the-scenes content
Templates: Article layouts, Author profile templates, Newsletter designs, Social media posts`,

            landing: `Template Structure:
- Header
Type: Minimal conversion-focused header with trust indicators
Overlay Behavior: Clean, distraction-free design focused on conversion
Contents:
  Company logo with credibility indicator (top-left, "Trusted by 10,000+ businesses")
  Minimal navigation: About, Pricing (if any), Contact (small, unobtrusive)
  Trust badge: "SOC 2 Certified" or industry certification (top-right)
  Phone number with click-to-call: "Questions? Call (800) 555-0199" (top-right)
  No competing CTAs or distracting elements

- Hero Section  
Type: Above-the-fold conversion zone with psychological triggers
Background: Relevant lifestyle or results imagery showing desired outcome
Content:
  Urgency indicator: "Limited Time: 50% Off Through Friday" (countdown timer)
  Pain point headline: "Stop Losing Customers to Slow Website Loading Times" (48px, bold)
  Solution headline: "Get Lightning-Fast Website Performance in 24 Hours" (36px)
  Benefit-driven subheading: "Our optimization service increases page speed by 300% and boosts conversions by up to 40% - without changing your existing design"
  Social proof bullets:
    • "Trusted by 10,000+ website owners"
    • "Average speed improvement: 3.2x faster"  
    • "98% customer satisfaction rate"
    • "Money-back guarantee included"
  Primary CTA: "Get My Free Speed Analysis" (large, contrasting button)
  Secondary CTA: "See Live Demo" (ghost button with play icon)
  Risk reversal: "No commitment required - see results first"
  Trust indicators: Customer logos, testimonial avatars, security badges

- Navigation
Location: Minimal header presence only
Style: Single-page focused, smooth scroll anchors
Sticky/Visible During Scroll: Only conversion CTA button follows scroll

Main Content
- Section 1: Problem Agitation & Solution
Title: "Why Website Speed Matters More Than Ever"
Problem identification (with statistics):
  "73% of mobile users leave if a page takes longer than 3 seconds to load"
  "A 1-second delay reduces conversions by 7%"
  "Slow sites lose $2.6 billion in revenue annually"
Visual element: Before/after speed test comparison showing dramatic improvement
Solution presentation:
  "Our proven 3-step optimization process"
  Step 1: "Complete Performance Audit" - "We analyze 47+ speed factors"
  Step 2: "Advanced Optimization" - "Apply enterprise-grade improvements"  
  Step 3: "Ongoing Monitoring" - "Ensure sustained fast performance"
Results visualization: Speed test scores, loading time comparisons, conversion rate improvements
Guarantee statement: "We guarantee at least 50% speed improvement or your money back"

- Section 2: Benefits & Features Deep Dive
Title: "What You Get with Our Optimization Service"
Feature breakdown with benefit focus:
  1. "Image Optimization" 
     Benefit: "Reduce image file sizes by 80% without quality loss"
     Technical detail: "Advanced compression, WebP conversion, lazy loading"
     Result: "Faster loading, better user experience, improved SEO"
  
  2. "Code Minification & Compression"
     Benefit: "Eliminate unnecessary code bloat slowing your site"  
     Technical detail: "CSS/JS minification, GZIP compression, file combining"
     Result: "Up to 60% smaller file sizes, dramatically faster downloads"
  
  3. "CDN Setup & Configuration"
     Benefit: "Serve content from servers closest to your visitors"
     Technical detail: "Global edge locations, automatic failover, smart routing"
     Result: "50-90% faster loading times worldwide"
  
  4. "Database Optimization" 
     Benefit: "Speed up dynamic content and page generation"
     Technical detail: "Query optimization, indexing, cache configuration"
     Result: "Faster page loads, reduced server load, better scalability"
  
  5. "Mobile Performance Boost"
     Benefit: "Optimize specifically for mobile users"
     Technical detail: "AMP pages, touch optimization, mobile-first loading"
     Result: "3x faster mobile performance, better mobile conversions"

Performance metrics display: Before/after comparison charts, GTMetrix scores, PageSpeed Insights results

- Section 3: Social Proof & Credibility
Title: "Join Thousands of Happy Customers"
Customer success stories (detailed case studies):
  Case Study 1: "E-commerce Store Increases Sales 40%"
    Customer: "Jennifer's Boutique"
    Problem: "3.8 second load times causing cart abandonment"
    Solution: "Complete optimization package"
    Results: "1.2 second load times, 40% more sales, 60% less bounce rate"
    Quote: "The speed improvement was immediate and dramatic. Our customers notice the difference and our sales prove it."
    
  Case Study 2: "SaaS Company Reduces Churn 25%"
    Customer: "ProductivityApp Pro"  
    Problem: "Slow dashboard loading frustrated users"
    Solution: "Database and code optimization"
    Results: "70% faster dashboard, 25% reduced churn, improved user satisfaction"
    Quote: "Our users love how snappy the app feels now. It's like we have a completely new product."

Testimonial grid: 12 customer photos with quotes, names, companies, and specific results
Trust indicators section:
  "A+ BBB Rating" with badge
  "Google Partner Certified" with verification
  "99.9% Uptime Guarantee" with monitoring proof
  "256-bit SSL Secured" with security badge
Industry recognition: "Featured in TechCrunch", "Recommended by WP Engine", "Shopify Plus Partner"
Money-back guarantee: "60-day 100% satisfaction guarantee - if you're not thrilled with results, we refund everything"

Footer
- Content Blocks:
  Final conversion push: "Ready to 3x Your Website Speed?" with prominent CTA button
  Contact information: Phone, email, business address with "Real company, real results" emphasis
  Service guarantee restatement: "We guarantee results or your money back"
  Privacy assurance: "Your information is secure and never shared"
  Company credentials: Years in business, team size, certifications earned
  Legal compliance: Privacy policy, Terms of service, Refund policy
  Emergency contact: "Need help? Call our support team 24/7"

Assets
Brand Assets: Company logo variations, Trust badges, Certification logos, Award emblems
Before/After Visuals: Speed test comparisons, Performance score improvements, Loading time charts
Customer Photos: Testimonial headshots, Business owner photos, Team celebration images
Screenshots: Tool interfaces, Performance dashboards, Analytics improvements, Mobile comparisons
Videos: Customer testimonial recordings, Service demonstration, Before/after speed tests
Graphics: Process flow diagrams, Benefit illustrations, Statistical infographics, Guarantee badges`
        }
    }">
        
        <!-- SaaS/Tech Template -->
        <div class="card cursor-pointer hover:shadow-xl transition-ease" 
             @click="copyTemplate('saas')"
             :class="activeTemplate === 'saas' ? 'ring-2 ring-primary-500' : ''">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-laptop-code text-primary-600 mr-2"></i>
                    SaaS/Tech Company
                </h3>
                <i class="fas fa-copy text-gray-400 hover:text-primary-600"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">Modern software company with feature highlights, pricing tiers, and social proof sections.</p>
            <div class="bg-gray-50 rounded p-3 font-mono text-xs text-gray-700">
                <div>Header (Fixed Navigation)</div>
                <div>Hero (Product Demo)</div>
                <div>Features (3-Column Grid)</div>
                <div>Social Proof (Testimonials)</div>
                <div>Pricing (3-Tier Table)</div>
                <div>Footer (Resources)</div>
            </div>
        </div>

        <!-- E-commerce Template -->
        <div class="card cursor-pointer hover:shadow-xl transition-ease" 
             @click="copyTemplate('ecommerce')"
             :class="activeTemplate === 'ecommerce' ? 'ring-2 ring-primary-500' : ''">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-shopping-cart text-primary-600 mr-2"></i>
                    E-commerce Store
                </h3>
                <i class="fas fa-copy text-gray-400 hover:text-primary-600"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">Online retail layout with product showcase, categories, and shopping features.</p>
            <div class="bg-gray-50 rounded p-3 font-mono text-xs text-gray-700">
                <div>Header (Search + Cart)</div>
                <div>Hero (Product Carousel)</div>
                <div>Categories (Grid Layout)</div>
                <div>Featured Products</div>
                <div>Brand Story/USP</div>
                <div>Footer (Customer Service)</div>
            </div>
        </div>

        <!-- Portfolio/Agency Template -->
        <div class="card cursor-pointer hover:shadow-xl transition-ease" 
             @click="copyTemplate('portfolio')"
             :class="activeTemplate === 'portfolio' ? 'ring-2 ring-primary-500' : ''">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-paint-brush text-primary-600 mr-2"></i>
                    Portfolio/Agency
                </h3>
                <i class="fas fa-copy text-gray-400 hover:text-primary-600"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">Creative showcase with portfolio grid, about section, and service offerings.</p>
            <div class="bg-gray-50 rounded p-3 font-mono text-xs text-gray-700">
                <div>Header (Minimal Navigation)</div>
                <div>Hero (Creative Visual)</div>
                <div>Portfolio (Masonry Grid)</div>
                <div>About/Skills</div>
                <div>Services</div>
                <div>Footer (Contact CTA)</div>
            </div>
        </div>

        <!-- Restaurant/Local Business Template -->
        <div class="card cursor-pointer hover:shadow-xl transition-ease" 
             @click="copyTemplate('restaurant')"
             :class="activeTemplate === 'restaurant' ? 'ring-2 ring-primary-500' : ''">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-utensils text-primary-600 mr-2"></i>
                    Restaurant/Local Business
                </h3>
                <i class="fas fa-copy text-gray-400 hover:text-primary-600"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">Local business layout with menu highlights, location info, and contact details.</p>
            <div class="bg-gray-50 rounded p-3 font-mono text-xs text-gray-700">
                <div>Header (Contact Info)</div>
                <div>Hero (Signature Dish)</div>
                <div>About/Story</div>
                <div>Menu Highlights</div>
                <div>Location/Hours</div>
                <div>Footer (Contact)</div>
            </div>
        </div>

        <!-- Blog/Content Template -->
        <div class="card cursor-pointer hover:shadow-xl transition-ease" 
             @click="copyTemplate('blog')"
             :class="activeTemplate === 'blog' ? 'ring-2 ring-primary-500' : ''">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-blog text-primary-600 mr-2"></i>
                    Blog/Content Site
                </h3>
                <i class="fas fa-copy text-gray-400 hover:text-primary-600"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">Content-focused design with article grid, categories, and author information.</p>
            <div class="bg-gray-50 rounded p-3 font-mono text-xs text-gray-700">
                <div>Header (Search + Categories)</div>
                <div>Hero (Featured Post)</div>
                <div>Recent Posts (Grid)</div>
                <div>Popular Articles</div>
                <div>Categories/Topics</div>
                <div>Footer (Newsletter)</div>
            </div>
        </div>

        <!-- Landing Page Template -->
        <div class="card cursor-pointer hover:shadow-xl transition-ease" 
             @click="copyTemplate('landing')"
             :class="activeTemplate === 'landing' ? 'ring-2 ring-primary-500' : ''">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-bullseye text-primary-600 mr-2"></i>
                    Landing Page
                </h3>
                <i class="fas fa-copy text-gray-400 hover:text-primary-600"></i>
            </div>
            <p class="text-gray-600 text-sm mb-4">Conversion-focused single page with clear value proposition and strong CTAs.</p>
            <div class="bg-gray-50 rounded p-3 font-mono text-xs text-gray-700">
                <div>Header (Minimal)</div>
                <div>Hero (Value Proposition)</div>
                <div>Problem/Solution</div>
                <div>Benefits/Features</div>
                <div>Social Proof</div>
                <div>Footer (Final CTA)</div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('websiteBuilder', () => ({
        urlInput: '',
        isAnalyzing: false,
        currentProgress: 0,
        currentMessage: '',
        currentSessionId: null,
        analyzedSites: JSON.parse(localStorage.getItem('websiteBuilderSites') || '[]'),
        
        async analyzeWebsite() {
            if (!this.urlInput.trim() || this.isAnalyzing) return;
            
            this.isAnalyzing = true;
            this.currentProgress = 0;
            this.currentMessage = 'Starting analysis...';
            
            try {
                // Send URL for analysis
                const formData = new FormData();
                formData.append('url', this.urlInput.trim());
                
                const response = await fetch('/website_builder/analyze', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.status === 'success') {
                    // Already analyzed - add immediately
                    this.addSite(result.data);
                    this.urlInput = '';
                    this.isAnalyzing = false;
                    showToast('Site layout loaded!');
                    
                } else if (result.status === 'analyzing') {
                    // New analysis started - track progress
                    this.currentSessionId = result.session_id;
                    this.trackProgress();
                    
                } else {
                    // Error
                    showToast(result.message || 'Failed to analyze website', 'error');
                    this.isAnalyzing = false;
                }
                
            } catch (error) {
                console.error('Analysis error:', error);
                showToast('Failed to analyze website', 'error');
                this.isAnalyzing = false;
            }
        },
        
        async trackProgress() {
            if (!this.currentSessionId) return;
            
            const checkProgress = async () => {
                try {
                    const response = await fetch(`/api/website_builder_progress/${this.currentSessionId}`);
                    const result = await response.json();
                    
                    this.currentProgress = result.progress || 0;
                    this.currentMessage = result.message || 'Analyzing...';
                    
                    if (result.status === 'completed') {
                        // Analysis complete
                        this.addSite(result.data);
                        this.urlInput = '';
                        this.isAnalyzing = false;
                        this.currentSessionId = null;
                        showToast('Site layout analyzed!');
                        
                    } else if (result.status === 'failed') {
                        // Analysis failed
                        showToast(result.message || 'Analysis failed', 'error');
                        this.isAnalyzing = false;
                        this.currentSessionId = null;
                        
                    } else {
                        // Still in progress
                        setTimeout(checkProgress, 2000);
                    }
                    
                } catch (error) {
                    console.error('Progress check error:', error);
                    showToast('Failed to check analysis progress', 'error');
                    this.isAnalyzing = false;
                    this.currentSessionId = null;
                }
            };
            
            checkProgress();
        },
        
        addSite(siteData) {
            // Check if site already exists (by domain)
            const existingIndex = this.analyzedSites.findIndex(site => site.domain === siteData.domain);
            
            if (existingIndex >= 0) {
                // Update existing site
                this.analyzedSites[existingIndex] = siteData;
                showToast('Site data updated!', 'info');
            } else {
                // Add new site
                this.analyzedSites.push(siteData);
                showToast(`Added ${siteData.title}`);
            }
            
            // Save to localStorage
            localStorage.setItem('websiteBuilderSites', JSON.stringify(this.analyzedSites));
        },
        
        removeSite(index) {
            const site = this.analyzedSites[index];
            this.analyzedSites.splice(index, 1);
            localStorage.setItem('websiteBuilderSites', JSON.stringify(this.analyzedSites));
            showToast(`Removed ${site.title}`, 'info');
        }
    }))
});

// Toast notification function
function showToast(message, type = "success") {
    // Remove any existing toasts
    const existingToasts = document.querySelectorAll('.toast-notification');
    existingToasts.forEach(toast => toast.remove());
    
    // Create a new toast
    const toast = document.createElement('div');
    toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded shadow-lg z-50 toast-notification transition-all duration-300 ${
        type === "error" ? "bg-red-600" : 
        type === "info" ? "bg-blue-600" : 
        "bg-green-600"
    } text-white`;
    toast.innerHTML = `<i class="fas ${
        type === "error" ? "fa-exclamation-circle" : 
        type === "info" ? "fa-info-circle" : 
        "fa-check"
    } mr-2"></i>${message}`;
    document.body.appendChild(toast);
    
    // Add entrance animation
    setTimeout(() => {
        toast.style.transform = 'translateX(0)';
        toast.style.opacity = '1';
    }, 10);
    
    // Remove the toast after 3 seconds
    setTimeout(() => {
        toast.style.transform = 'translateX(100%)';
        toast.style.opacity = '0';
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

// Add the copyTemplate function to the global scope
function copyTemplate(templateKey) {
    const templates = {
        saas: `Template Structure:
- Header
Type: Fixed/Sticky Navigation with Glass Effect
Overlay Behavior: Stays visible during scroll, becomes solid background
Contents:
  Company logo with wordmark (top-left, 180px width)
  Navigation menu: Product, Pricing, Resources, About, Login (center, 16px font)
  Sign In button (ghost style, top-right)
  CTA button "Start Free Trial" (primary color, top-right)
  Progress indicator for trial users (conditional)

- Hero Section
Type: Full Height (100vh) with Animated Background
Background: Gradient mesh animation (purple to blue) with floating geometric shapes
Content:
  Eyebrow text: "Trusted by 50,000+ teams worldwide"
  Main headline: "Transform Your Business with [Product Name]" (72px, bold)
  Subheading: "Streamline workflows, boost productivity, and scale faster with our all-in-one platform" (24px, light)
  Feature highlight badges: "AI-Powered", "Real-time Sync", "Enterprise Ready"
  Primary CTA: "Start Free Trial - No Credit Card Required" (prominent button)
  Secondary CTA: "Watch 2-Min Demo" (ghost button with play icon)
  Product hero image: Dashboard screenshot with subtle animation
  Trust indicators: "SOC 2 Compliant", "99.9% Uptime", customer logos row

- Navigation
Location: Inside Header, persistent
Style: Horizontally aligned, 16px font weight 500, hover animations
Sticky/Visible During Scroll: Yes, with backdrop blur effect

Main Content
- Section 1: Features Overview
Title: "Everything you need to scale your business"
Subtitle: "Powerful features designed for modern teams"
Format: 3-column feature grid with interactive hover states
Features:
  1. "Automated Workflows" - Icon: gear, Description: "Save 10+ hours per week with smart automation", Supporting image: workflow diagram
  2. "Real-time Analytics" - Icon: chart, Description: "Make data-driven decisions with live insights", Supporting image: dashboard preview
  3. "Team Collaboration" - Icon: users, Description: "Connect teams across departments seamlessly", Supporting image: collaboration interface
Each feature includes: 64px icon, 24px title, 16px description, "Learn More" link
Background: Light gray section with subtle pattern

- Section 2: Social Proof
Title: "Trusted by teams at companies like these"
Customer logo grid: 12 recognizable company logos in grayscale
Testimonial spotlight:
  Featured quote: "This platform increased our team productivity by 300%" 
  Customer: Sarah Chen, VP Operations at TechCorp
  Customer photo: Professional headshot
  Company logo: TechCorp logo
Metrics display:
  "2M+ tasks completed", "150+ countries", "99.9% customer satisfaction"
Format: Dark background section with white text and accent highlights

- Section 3: Pricing
Title: "Simple, transparent pricing that grows with you"
Subtitle: "Start free, upgrade when you're ready"
Format: 3-tier pricing cards with featured middle tier
Tiers:
  Basic ($0/month): "Perfect for getting started", 5 users, Core features, Email support, "Start Free" button
  Pro ($29/month): "Most Popular" badge, 25 users, Advanced features, Priority support, Integrations, "Start Trial" button (primary)
  Enterprise ($99/month): "For growing teams", Unlimited users, Custom features, Dedicated success manager, "Contact Sales" button
Additional elements: "No setup fees", "Cancel anytime", "30-day money-back guarantee"
Toggle: Monthly/Annual billing with "Save 20%" indicator

Footer
- Content Blocks:
  Product section: Features, Integrations, API, Pricing, Changelog
  Company section: About, Careers, Press, Blog, Contact
  Resources section: Help Center, Community, Webinars, Templates
  Legal section: Privacy Policy, Terms of Service, Security, GDPR
  Newsletter signup: "Get product updates and tips" with email input
  Social links: Twitter, LinkedIn, YouTube, GitHub with follower counts
  Trust indicators: SOC 2, GDPR, ISO certifications

Assets
Logo: Primary logo (color), Secondary logo (white), Favicon, Social media variants
Screenshots: Dashboard overview, Feature closeups, Mobile app interface, Admin panel
Videos: Product demo (2 minutes), Customer testimonials, Feature spotlights
Icons: 50+ feature icons, Social media icons, UI element icons
Backgrounds: Hero gradient, Section patterns, Texture overlays`,

        ecommerce: `Template Structure:
- Header
Type: Multi-level navigation with mega menu
Overlay Behavior: Fixed header with promotional banner and search prominence
Contents:
  Promotional banner: "Free shipping on orders over $75 - Shop now!" (dismissible)
  Store logo with tagline (top-left, 200px width)
  Search bar with autocomplete (center, 500px width, "Search products...")
  Account dropdown: "Sign In", "My Account", "Wishlist" (top-right)
  Shopping cart icon with item count badge (top-right)
  Main navigation with mega menus: Women, Men, Kids, Home, Sale, Brands
  Secondary navigation: Customer Service, Track Order, Store Locator

- Hero Section
Type: Large banner carousel with 3-4 rotating slides
Background: High-quality lifestyle photography with models
Content:
  Slide 1: "New Spring Collection" - "Fresh styles for the season ahead", "Shop Women's" + "Shop Men's" buttons
  Slide 2: "Up to 50% Off Sale" - "Limited time on select items", "Shop Sale" button
  Slide 3: "Free Shipping Weekend" - "No minimum purchase required", "Shop Now" button
  Carousel controls: Dots navigation, auto-advance timer, pause on hover
  Overlay: Semi-transparent dark overlay for text readability

- Navigation
Location: Below header search area
Style: Category-focused horizontal menu with dropdown mega menus
Sticky/Visible During Scroll: Header stays, category nav scrolls away

Main Content
- Section 1: Featured Categories
Title: "Shop by Category"
Subtitle: "Discover what's trending this season"
Format: 2x3 grid layout with large category images
Categories: 
  Women's Fashion: Model in spring dress, "New Arrivals" badge, "Shop Women's" overlay
  Men's Style: Male model in casual wear, "Trending Now" badge, "Shop Men's" overlay  
  Kids Collection: Children playing outdoors, "Back to School" badge, "Shop Kids" overlay
  Home Decor: Styled room interior, "Home Refresh" badge, "Shop Home" overlay
  Accessories: Jewelry and bags flat lay, "Complete the Look" badge, "Shop Accessories" overlay
  Athletic Wear: Fitness lifestyle image, "Performance Gear" badge, "Shop Athletic" overlay
Each category: Hover zoom effect, category name overlay, product count display

- Section 2: Product Showcase
Title: "Trending Products"
Subtitle: "What everyone's buying right now"
Format: 4-column product grid with pagination
Product display includes:
  High-res product image with hover for alternate view
  Quick shop button overlay on hover
  Product name (16px, medium weight)
  Price display with sale pricing highlighted
  Color swatches for available variants
  Star rating with review count
  "Add to Cart" and "Add to Wishlist" buttons
  Stock status indicator ("Only 3 left!", "In Stock", etc.)
Filter sidebar: Price range, Size, Color, Brand, Customer rating, Availability
Sort options: Featured, Best Selling, Price Low to High, Price High to Low, Newest

- Section 3: Brand Promise/USP
Title: "Why Shop With [Store Name]"
Format: 4-column benefits with animated icons
Benefits:
  1. "Free Shipping & Returns" - Truck icon, "On orders over $75, hassle-free returns within 30 days"
  2. "24/7 Customer Support" - Headset icon, "Chat, call, or email us anytime for personalized help"
  3. "Size & Fit Guarantee" - Ruler icon, "Free exchanges if the fit isn't perfect"
  4. "Loyalty Rewards" - Star icon, "Earn points on every purchase, unlock exclusive perks"
Customer reviews section: 4.8/5 stars, "Based on 10,247 reviews", featured review with customer photo
Trust badges: Better Business Bureau, SSL Secure, satisfaction guarantee emblems

Footer
- Content Blocks:
  Customer Care: Size Guide, Shipping Info, Returns & Exchanges, Contact Us, FAQ
  Company Info: About Us, Careers, Press, Investor Relations, Sustainability
  Quick Links: New Arrivals, Best Sellers, Sale Items, Gift Cards, Store Locator  
  Follow Us: Instagram feed widget, Social media links with follower counts
  Newsletter: "Get 15% off your first order" email signup with fashion tips promise
  Payment methods: Visa, Mastercard, PayPal, Apple Pay, Google Pay, Afterpay logos
  Security badges: Norton Secured, SSL certificate, BBB accredited business

Assets
Logo: Primary wordmark, Secondary mark, Favicon, Social media profile images
Product Photography: Hero shots, Alternate angles, Lifestyle shots, Size guide images
Model Photography: Diverse models, Lifestyle scenarios, Seasonal campaigns
Videos: Product 360° views, Styling tips, Brand story, Customer testimonials
Icons: Category icons, Feature benefits, Social media, Payment methods
Graphics: Sale badges, New arrival tags, Seasonal banners, Size charts`,

        portfolio: `Template Structure:
- Header
Type: Minimal, clean navigation with smooth scroll transitions
Overlay Behavior: Transparent over hero, becomes frosted glass on scroll
Contents:
  Personal logo/monogram (top-left, 48px, custom typography)
  Navigation menu: Work, About, Services, Journal, Contact (center, 18px, spacing)
  Social icons cluster: Behance, Dribbble, LinkedIn, Instagram (top-right, subtle)
  Language toggle: EN/ES (small, top-right corner)
  Menu hamburger for mobile (animated three-line icon)

- Hero Section
Type: Full viewport height with parallax scrolling
Background: Abstract geometric video loop or high-res creative visual
Content:
  Greeting animation: "Hello, I'm [Full Name]" (typewriter effect, 24px)
  Professional title: "Senior UX/UI Designer & Creative Director" (64px, bold, gradient text)
  Location subtitle: "Based in San Francisco, Working Worldwide" (18px, light)
  Brief value proposition: "I craft digital experiences that delight users and drive business results"
  Primary CTA: "Explore My Work" (smooth scroll to portfolio)
  Secondary CTA: "Download Resume" (PDF link with download icon)
  Scroll indicator: Animated down arrow with "Scroll to discover" text
  Floating elements: Subtle UI component animations (cards, buttons, icons)

- Navigation
Location: Fixed header, minimal presence
Style: Clean typography, generous spacing, hover underline animations
Sticky/Visible During Scroll: Transforms from transparent to translucent background

Main Content
- Section 1: Portfolio Showcase
Title: "Selected Work"
Subtitle: "Solving complex problems through thoughtful design"
Format: Masonry grid layout with filter categories
Project categories: "Mobile Apps", "Web Design", "Branding", "UX Research"
Featured projects (6-8 total):
  1. "FinTech Mobile App" - Hover reveals: "Increased user engagement by 340%", View Case Study button
  2. "E-commerce Redesign" - Hover reveals: "Boosted conversion rate by 127%", View Project button  
  3. "SaaS Dashboard" - Hover reveals: "Reduced task completion time by 60%", See Details button
  4. "Brand Identity System" - Hover reveals: "Complete visual identity overhaul", View Process button
Each project card: High-quality mockup image, Project title, Client name, Role, Year, Tech stack tags
Interaction: Smooth hover animations, category filtering, lightbox modal previews

- Section 2: About & Expertise
Title: "About Me"
Personal narrative: "With 8+ years of experience in digital design, I've helped startups and Fortune 500 companies create user-centered solutions that drive business growth."
Professional photo: High-quality headshot in creative workspace setting
Skills visualization:
  Design: UX/UI Design (95%), Prototyping (90%), User Research (85%), Information Architecture (80%)
  Tools: Figma (Expert), Sketch (Advanced), Adobe Creative Suite (Expert), Principle (Advanced)
  Code: HTML/CSS (75%), React basics (60%), Design Systems (90%)
Experience timeline:
  2023-Present: Senior UX Designer at TechCorp, "Leading design for B2B platform serving 100K+ users"
  2020-2023: Product Designer at StartupXYZ, "Designed mobile app from 0 to 1M downloads"
  2018-2020: Freelance Designer, "Worked with 25+ clients across various industries"
Awards section: "UX Design Awards 2023 Winner", "99designs Contest Winner", "Dribbble Featured Designer"

- Section 3: Services & Process
Title: "What I Do"
Subtitle: "End-to-end design services for digital products"
Service offerings (detailed breakdown):
  1. "UX Strategy & Research" - Discovery workshops, User interviews, Competitive analysis, Journey mapping
     Starting at $5,000, Timeline: 2-3 weeks
  2. "UI/UX Design" - Wireframing, Visual design, Prototyping, Design systems
     Starting at $8,000, Timeline: 4-6 weeks  
  3. "Design Systems" - Component libraries, Documentation, Style guides, Team training
     Starting at $10,000, Timeline: 3-4 weeks
  4. "Usability Testing" - Test planning, User sessions, Analysis & recommendations
     Starting at $3,000, Timeline: 1-2 weeks
Design process visualization:
  Step 1: "Discovery" - Understanding goals, users, and constraints
  Step 2: "Research" - User interviews, market analysis, requirements gathering
  Step 3: "Design" - Wireframes, prototypes, visual design, iterations
  Step 4: "Testing" - Usability testing, feedback incorporation, refinement
  Step 5: "Delivery" - Design handoff, documentation, developer support
Client testimonials: 3 detailed testimonials with client photos, company logos, project outcomes

Footer
- Content Blocks:
  Call-to-action: "Ready to start your project?" with "Let's Talk" button and calendar booking link
  Contact methods: Email (hello@[name].com), LinkedIn profile, Behance portfolio
  Location availability: "Available for freelance projects worldwide, San Francisco meetups"
  Newsletter signup: "Design insights delivered monthly" with curated content promise
  Copyright: "© 2024 [Full Name]. All rights reserved." with made with love indicator
  Quick links: Privacy Policy, Terms of Use, Site Credits

Assets
Logo/Branding: Personal monogram, Business cards, Email signature, Social media headers
Portfolio Photography: Project mockups, Process documentation, Behind-the-scenes shots
Professional Photos: Headshots, Workspace photos, Speaking event photos, Team photos  
Case Study Assets: User journey maps, Wireframes, Design system documentation, Before/after comparisons
Videos: Design process timelapse, Client testimonials, Speaking clips, Tool tutorials
Icons: Skill badges, Process steps, Social media, Contact methods, Tool logos`,

        restaurant: `Template Structure:
- Header
Type: Traditional hospitality-focused header with reservation prominence
Overlay Behavior: Standard fixed positioning with warm color scheme
Contents:
  Restaurant logo with established date (center, "Est. 1987", 220px width)
  Phone number with call icon: "(555) 123-4567" (top-left, clickable)
  Address with location pin: "123 Main Street, Downtown" (top-left)
  Primary navigation: Menu, Reservations, About, Events, Contact (below logo)
  Reservation CTA: "Book a Table" button (prominent, top-right, warm color)
  Hours display: "Open Today: 5:00 PM - 10:00 PM" (top-right)
  Special announcements banner: "Live Jazz Every Friday Night!" (dismissible)

- Hero Section
Type: Large image banner with warm overlay
Background: Signature dish close-up (wood-fired pizza or pasta) with shallow depth of field
Content:
  Restaurant name overlay: "Nonna's Kitchen" (elegant script font, 72px)
  Tagline: "Authentic Italian Cuisine Since 1987" (24px, gold accent)
  Atmosphere description: "Where family traditions meet modern Italian flavors"
  Key highlights: "Hand-made pasta", "Wood-fired oven", "Local ingredients"
  Primary CTA: "Make Reservation" (leads to booking system)
  Secondary CTA: "View Tonight's Menu" (PDF or menu page)
  Operating hours prominent display
  "Winner: Best Italian Restaurant 2023" award badge

- Navigation
Location: Below header logo area
Style: Traditional horizontal menu with warm hover states
Sticky/Visible During Scroll: Optional, header may scroll away

Main Content
- Section 1: Restaurant Story & Atmosphere
Title: "Our Story"
Subtitle: "Three generations of authentic Italian cooking"
Content narrative: "Founded by Nonna Maria in 1987, our family restaurant brings the warmth of traditional Italian hospitality to the heart of downtown. Using recipes passed down through generations and the finest imported ingredients..."
Supporting imagery:
  Historical photo: Original Nonna Maria in the kitchen (sepia tone)
  Current photo: Third-generation chef preparing signature dish
  Restaurant interior: Warm lighting, rustic décor, wine wall display
  Kitchen shot: Wood-fired oven in action, fresh pasta making
Ambiance highlights: "Intimate lighting", "Live piano weekends", "Private dining available"
Recognition: "Featured in Food & Wine Magazine", "Zagat Rated", "Local's Choice Award"

- Section 2: Menu Highlights & Specialties
Title: "Signature Dishes"
Subtitle: "House favorites crafted with love and tradition"
Featured dishes layout (6 items in 2x3 grid):
  1. "Nonna's Ragu Bolognese" - House-made pasta, 24-hour slow-cooked sauce, aged parmesan
     Price: $28, "Customer favorite since 1987"
  2. "Wood-Fired Margherita Pizza" - San Marzano tomatoes, fresh mozzarella, basil
     Price: $24, "Authentic Neapolitan style" 
  3. "Osso Buco Milanese" - Braised veal shank, saffron risotto, gremolata
     Price: $42, "Chef's signature dish"
  4. "Fresh Burrata Antipasto" - Imported burrata, prosciutto, grilled vegetables
     Price: $18, "Perfect for sharing"
  5. "Tiramisu della Casa" - Traditional recipe, espresso-soaked ladyfingers
     Price: $12, "Made fresh daily"
  6. "Wine Pairing Experience" - Curated Italian wines with 5-course tasting
     Price: $85, "Sommelier selected"
Each dish: Professional food photography, Description, Price, Dietary indicators (GF, V, etc.)
Menu sections teaser: "Full Menu Available", "Wine List", "Dessert Menu", "Kids Menu"

- Section 3: Location, Hours & Reservations
Title: "Visit Us"
Subtitle: "Located in the heart of downtown's historic district"
Location details:
  Address: "123 Main Street, Historic Downtown District" 
  Neighborhood description: "Easy parking, walkable from hotels, near theater district"
  Landmark reference: "Across from Central Park, next to Heritage Museum"
Operating hours detailed:
  Monday-Thursday: 5:00 PM - 9:30 PM, "Quiet, intimate dining"
  Friday-Saturday: 5:00 PM - 10:30 PM, "Live jazz starts at 8 PM"  
  Sunday: 4:00 PM - 9:00 PM, "Family dinner special"
  Closed Tuesdays for "family day"
Reservation information:
  Online booking widget: OpenTable integration with real-time availability
  Party size options: 2-8 guests, "Call for larger parties"
  Special requests: "Dietary restrictions", "Celebration notes", "Seating preferences"
Additional services:
  "Private dining room for 12-20 guests"
  "Catering available for off-site events"  
  "Take-out and delivery through DoorDash"
  "Gift certificates available online"
Interactive map: Google Maps embed with parking locations marked

Footer
- Content Blocks:
  Contact information: Phone, Email, Address with driving directions link
  Operating hours: Full weekly schedule with holiday hour variations
  Social media: Instagram food photos, Facebook events, Yelp reviews showcase
  Newsletter signup: "Monthly specials and events" with wine pairing tips
  Special events: "Wine dinners", "Cooking classes", "Holiday celebrations"
  Policies: "Reservation policy", "Cancellation terms", "Large party information"
  Partnerships: "Local suppliers", "Wine importers", "Community supporters"

Assets
Logo/Branding: Primary logo with established date, Social media versions, Menu headers
Food Photography: Signature dishes, Wine pairings, Dessert close-ups, Kitchen action shots
Restaurant Photography: Dining room ambiance, Bar area, Private dining, Exterior facade
Historical Photos: Founder photos, Restaurant evolution, Award ceremonies, Celebrity visits
Videos: Chef cooking signature dish, Restaurant atmosphere, Customer testimonials
Printed Materials: Menu designs, Wine list, Business cards, Gift certificate templates
Icons: Cuisine types, Dietary restrictions, Payment methods, Social media, Awards`,

        blog: `Template Structure:
- Header
Type: Content-focused editorial header with robust search functionality
Overlay Behavior: Fixed with search expansion and category mega-menu
Contents:
  Blog publication name: "The Design Journal" (center, editorial typography, 32px)
  Tagline: "Insights, trends, and inspiration for creative professionals" (16px, below name)
  Search bar with advanced filters (prominent, "Search articles, authors, topics...")
  Primary navigation: Latest, Categories, Authors, Resources, Newsletter, About
  Secondary navigation: Popular This Week, Trending Topics, Guest Posts
  Social proof: "Join 45,000+ subscribers" with newsletter signup
  Theme toggle: Light/Dark mode switch (top-right)

- Hero Section
Type: Featured article banner with editorial focus
Background: Featured article's hero image with editorial overlay
Content:
  "Featured Article" label with publication date
  Article category: "UX Design" (colored tag)
  Headline: "The Future of Design Systems: 2024 Trends and Predictions" (48px, bold)
  Author byline: "By Sarah Chen" with author photo and follow button
  Publish date: "March 15, 2024" with estimated read time "8 min read"
  Article excerpt: "Exploring how AI, collaboration tools, and new frameworks are reshaping how design teams build and maintain design systems in modern organizations..."
  Engagement metrics: "1.2K views", "89 comments", "156 shares"
  Primary CTA: "Read Full Article" 
  Secondary actions: Save to reading list, Share article, Subscribe to author
  Related topics: #DesignSystems #UX #Productivity #Tools (clickable tags)

- Navigation
Location: Below header, persistent during scroll
Style: Editorial-style with category organization and search prominence
Sticky/Visible During Scroll: Yes, with condensed search bar

Main Content
- Section 1: Latest Articles
Title: "Latest Articles"
Subtitle: "Fresh insights from our community of designers and developers"
Format: Mixed layout - featured post + article grid
Article display includes:
  Featured article (large): High-res featured image, headline, author, excerpt, read time, category tag
  Standard articles (grid): Thumbnail, headline, author with photo, publish date, category, read time
  Author information: Photo, name, title, follower count, "Follow" button
  Engagement indicators: View count, comment count, bookmark count
  Social sharing: Twitter, LinkedIn, Facebook, Copy link
Filter options: 
  Categories: "Design", "Development", "Career", "Tools", "Inspiration", "Tutorials"
  Content type: "Articles", "Case Studies", "Interviews", "Resources"
  Read time: "Quick reads (< 5 min)", "Medium (5-15 min)", "Deep dives (15+ min)"
Sort options: "Most Recent", "Most Popular", "Most Discussed", "Editor's Picks"

- Section 2: Trending & Popular Content
Title: "What's Trending"
Subtitle: "Most popular articles from the past week"
Popular articles carousel (horizontal scroll):
  1. "Complete Guide to Figma Auto Layout" - 15K views, 234 comments
  2. "Design Career Roadmap for 2024" - 12K views, 189 comments  
  3. "AI Tools Every Designer Should Know" - 10K views, 156 comments
  4. "Portfolio Review: Before & After" - 8K views, 98 comments
  5. "Remote Design Team Best Practices" - 7K views, 87 comments
Weekly highlights section:
  "Most Bookmarked": Top 3 articles saved by readers this week
  "Most Discussed": Articles with highest comment engagement
  "Rising Stars": New authors getting attention
  "Community Picks": Reader-recommended content
Author spotlight: "Featured Author of the Week" with bio, recent articles, social links

- Section 3: Categories & Community
Title: "Explore by Topic"
Subtitle: "Dive deep into subjects that matter to you"
Category grid with rich previews:
  "UX/UI Design": 145 articles, Latest: "Accessibility in Design Systems", Top author: Sarah Chen
  "Frontend Development": 98 articles, Latest: "CSS Grid vs Flexbox in 2024", Top author: Mike Rodriguez  
  "Career Growth": 76 articles, Latest: "Salary Negotiation for Designers", Top author: Lisa Park
  "Design Tools": 89 articles, Latest: "Figma vs Sketch Comparison", Top author: David Kim
  "Inspiration": 234 articles, Latest: "Award-Winning Portfolio Designs", Top author: Emma Stone
  "Tutorials": 156 articles, Latest: "Advanced Prototyping Techniques", Top author: Alex Chen
Community features:
  "Discussion Forum": Active conversations, recent topics, expert moderators
  "Job Board": Remote opportunities, company profiles, salary ranges
  "Events Calendar": Webinars, conferences, local meetups, workshops
  "Resource Library": Templates, tools, checklists, guides
Newsletter sections: "Weekly Digest", "Career Tips", "Tool Updates", "Design Inspiration"

Footer
- Content Blocks:
  About section: Mission statement, team bios, contact information, media kit
  Content organization: Archives by date, Popular tags, Author directory, Content guidelines
  Community links: Slack group, Discord server, Twitter community, LinkedIn group
  Resources: Style guide, Writing guidelines, Guest post submissions, Partnership opportunities
  Newsletter options: "Weekly roundup", "Breaking news", "Career tips", "Tool reviews"
  Legal pages: Privacy policy, Terms of use, Cookie policy, Content licensing
  Support: Contact form, FAQ, Technical issues, Content suggestions

Assets
Editorial Branding: Publication logo, Social media headers, Newsletter templates, Author badges
Photography: Author headshots, Featured article images, Event photography, Office/workspace shots
Graphics: Category icons, Social media templates, Infographic templates, Newsletter graphics
Video Assets: Author introductions, Tutorial screencasts, Event recordings, Behind-the-scenes content
Templates: Article layouts, Author profile templates, Newsletter designs, Social media posts`,

        landing: `Template Structure:
- Header
Type: Minimal conversion-focused header with trust indicators
Overlay Behavior: Clean, distraction-free design focused on conversion
Contents:
  Company logo with credibility indicator (top-left, "Trusted by 10,000+ businesses")
  Minimal navigation: About, Pricing (if any), Contact (small, unobtrusive)
  Trust badge: "SOC 2 Certified" or industry certification (top-right)
  Phone number with click-to-call: "Questions? Call (800) 555-0199" (top-right)
  No competing CTAs or distracting elements

- Hero Section  
Type: Above-the-fold conversion zone with psychological triggers
Background: Relevant lifestyle or results imagery showing desired outcome
Content:
  Urgency indicator: "Limited Time: 50% Off Through Friday" (countdown timer)
  Pain point headline: "Stop Losing Customers to Slow Website Loading Times" (48px, bold)
  Solution headline: "Get Lightning-Fast Website Performance in 24 Hours" (36px)
  Benefit-driven subheading: "Our optimization service increases page speed by 300% and boosts conversions by up to 40% - without changing your existing design"
  Social proof bullets:
    • "Trusted by 10,000+ website owners"
    • "Average speed improvement: 3.2x faster"  
    • "98% customer satisfaction rate"
    • "Money-back guarantee included"
  Primary CTA: "Get My Free Speed Analysis" (large, contrasting button)
  Secondary CTA: "See Live Demo" (ghost button with play icon)
  Risk reversal: "No commitment required - see results first"
  Trust indicators: Customer logos, testimonial avatars, security badges

- Navigation
Location: Minimal header presence only
Style: Single-page focused, smooth scroll anchors
Sticky/Visible During Scroll: Only conversion CTA button follows scroll

Main Content
- Section 1: Problem Agitation & Solution
Title: "Why Website Speed Matters More Than Ever"
Problem identification (with statistics):
  "73% of mobile users leave if a page takes longer than 3 seconds to load"
  "A 1-second delay reduces conversions by 7%"
  "Slow sites lose $2.6 billion in revenue annually"
Visual element: Before/after speed test comparison showing dramatic improvement
Solution presentation:
  "Our proven 3-step optimization process"
  Step 1: "Complete Performance Audit" - "We analyze 47+ speed factors"
  Step 2: "Advanced Optimization" - "Apply enterprise-grade improvements"  
  Step 3: "Ongoing Monitoring" - "Ensure sustained fast performance"
Results visualization: Speed test scores, loading time comparisons, conversion rate improvements
Guarantee statement: "We guarantee at least 50% speed improvement or your money back"

- Section 2: Benefits & Features Deep Dive
Title: "What You Get with Our Optimization Service"
Feature breakdown with benefit focus:
  1. "Image Optimization" 
     Benefit: "Reduce image file sizes by 80% without quality loss"
     Technical detail: "Advanced compression, WebP conversion, lazy loading"
     Result: "Faster loading, better user experience, improved SEO"
  
  2. "Code Minification & Compression"
     Benefit: "Eliminate unnecessary code bloat slowing your site"  
     Technical detail: "CSS/JS minification, GZIP compression, file combining"
     Result: "Up to 60% smaller file sizes, dramatically faster downloads"
  
  3. "CDN Setup & Configuration"
     Benefit: "Serve content from servers closest to your visitors"
     Technical detail: "Global edge locations, automatic failover, smart routing"
     Result: "50-90% faster loading times worldwide"
  
  4. "Database Optimization" 
     Benefit: "Speed up dynamic content and page generation"
     Technical detail: "Query optimization, indexing, cache configuration"
     Result: "Faster page loads, reduced server load, better scalability"
  
  5. "Mobile Performance Boost"
     Benefit: "Optimize specifically for mobile users"
     Technical detail: "AMP pages, touch optimization, mobile-first loading"
     Result: "3x faster mobile performance, better mobile conversions"

Performance metrics display: Before/after comparison charts, GTMetrix scores, PageSpeed Insights results

- Section 3: Social Proof & Credibility
Title: "Join Thousands of Happy Customers"
Customer success stories (detailed case studies):
  Case Study 1: "E-commerce Store Increases Sales 40%"
    Customer: "Jennifer's Boutique"
    Problem: "3.8 second load times causing cart abandonment"
    Solution: "Complete optimization package"
    Results: "1.2 second load times, 40% more sales, 60% less bounce rate"
    Quote: "The speed improvement was immediate and dramatic. Our customers notice the difference and our sales prove it."
    
  Case Study 2: "SaaS Company Reduces Churn 25%"
    Customer: "ProductivityApp Pro"  
    Problem: "Slow dashboard loading frustrated users"
    Solution: "Database and code optimization"
    Results: "70% faster dashboard, 25% reduced churn, improved user satisfaction"
    Quote: "Our users love how snappy the app feels now. It's like we have a completely new product."

Testimonial grid: 12 customer photos with quotes, names, companies, and specific results
Trust indicators section:
  "A+ BBB Rating" with badge
  "Google Partner Certified" with verification
  "99.9% Uptime Guarantee" with monitoring proof
  "256-bit SSL Secured" with security badge
Industry recognition: "Featured in TechCrunch", "Recommended by WP Engine", "Shopify Plus Partner"
Money-back guarantee: "60-day 100% satisfaction guarantee - if you're not thrilled with results, we refund everything"

Footer
- Content Blocks:
  Final conversion push: "Ready to 3x Your Website Speed?" with prominent CTA button
  Contact information: Phone, email, business address with "Real company, real results" emphasis
  Service guarantee restatement: "We guarantee results or your money back"
  Privacy assurance: "Your information is secure and never shared"
  Company credentials: Years in business, team size, certifications earned
  Legal compliance: Privacy policy, Terms of service, Refund policy
  Emergency contact: "Need help? Call our support team 24/7"

Assets
Brand Assets: Company logo variations, Trust badges, Certification logos, Award emblems
Before/After Visuals: Speed test comparisons, Performance score improvements, Loading time charts
Customer Photos: Testimonial headshots, Business owner photos, Team celebration images
Screenshots: Tool interfaces, Performance dashboards, Analytics improvements, Mobile comparisons
Videos: Customer testimonial recordings, Service demonstration, Before/after speed tests
Graphics: Process flow diagrams, Benefit illustrations, Statistical infographics, Guarantee badges`
    }

    if (templates[templateKey]) {
        navigator.clipboard.writeText(templates[templateKey]).then(() => {
            // Visual feedback
            const event = new CustomEvent('template-copied', { 
                detail: { template: templateKey } 
            });
            window.dispatchEvent(event);
            
            showToast(`${templateKey.toUpperCase()} template copied to clipboard!`);
        }).catch(err => {
            console.error('Failed to copy template: ', err);
            showToast('Failed to copy template', 'error');
        });
    }
}
</script>
{% endblock %}