# Direct HTML embedding in Nixi
let
  page = html {
    head {
      title "Nixi HTML Demo";
      meta { charset: "UTF-8" };
      link { 
        rel: "stylesheet";
        href: "styles.css"
      }
    };
    body {
      header {
        nav {
          ul {
            class: "nav-menu";
            children: [
              li { a { href: "#home"; text: "Home" } };
              li { a { href: "#about"; text: "About" } };
              li { a { href: "#contact"; text: "Contact" } }
            ]
          }
        }
      };
      main {
        section {
          class: "hero";
          h1 { text: "Welcome to Nixi HTML" };
          p { 
            text: "Full HTML5 support embedded directly in Nixi code";
            class: "subtitle"
          };
          button {
            class: "cta-button";
            text: "Get Started";
            onclick: "alert('Hello from Nixi HTML!')"
          }
        }
      };
      footer {
        class: "page-footer";
        p { text: "© 2024 Nixi Programming Language" }
      }
    }
  };
in
  saveHTML(page, "html-demo.html", "HTML Demo")

# HTML5 semantic elements
let
  article = article {
    class: "blog-post";
    children: [
      header {
        h1 { text: "Article Title" };
        time { datetime: "2024-01-01"; text: "January 1, 2024" }
      };
      section {
        class: "content";
        children: [
          p { text: "Article content goes here..." };
          figure {
            img { src: "image.jpg"; alt: "Description" };
            figcaption { text: "Image caption" }
          }
        ]
      };
      footer {
        p { text: "Article footer" }
      }
    ]
  };
in
  saveHTML(article, "article.html", "HTML5 Article")

# CSS with advanced features
css ".hero-section" {
  background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)";
  padding: "4rem 2rem";
  text-align: "center";
  color: "white";
  border-radius: "15px";
  box-shadow: "0 20px 40px rgba(0, 0, 0, 0.1)";
  transition: "transform 0.3s ease"
}

css ".hero-section:hover" {
  transform: "translateY(-5px)";
  box-shadow: "0 25px 50px rgba(0, 0, 0, 0.15)";
}

# Media queries for responsive design
css "@media (max-width: 768px)" {
  hero-section: {
    padding: "2rem 1rem";
    font-size: "0.9em"
  }
}

# CSS Grid and Flexbox
css ".grid-container" {
  display: "grid";
  grid-template-columns: "repeat(auto-fit, minmax(300px, 1fr))";
  gap: "2rem";
  padding: "2rem";
}

css ".flex-card" {
  display: "flex";
  flex-direction: "column";
  justify-content: "space-between";
  background: "white";
  border-radius: "10px";
  padding: "1.5rem";
  box-shadow: "0 4px 6px rgba(0, 0, 0, 0.1)";
  transition: "all 0.3s ease";
}

# Animations
css "@keyframes fadeInUp" {
  from: {
    opacity: "0";
    transform: "translateY(30px)"
  };
  to: {
    opacity: "1";
    transform: "translateY(0)"
  }
}

css ".animate-fade-in" {
  animation: "fadeInUp 0.6s ease-out";
}

# Dynamic CSS generation
let
  # Generate CSS dynamically
  generateCSS = selector: properties:
    let
      propString = map((key, value): "  " + key + ": " + value + ";") properties;
      cssRule = selector + " {" ++ concat propString ++ "}";
    in cssRule;
  
  # Apply dynamic styles
  buttonStyles = generateCSS ".btn" {
    background: "#007bff";
    color: "white";
    padding: "10px 20px";
    border-radius: "5px";
  };
  
  # Create styled component
  StyledButton = { text, onClick }: button {
    style: buttonStyles;
    text: text;
    onClick: onClick
  };
in
  saveHTML(StyledButton { 
    text: "Dynamic Button"; 
    onClick: echo "Clicked!" 
  }, "dynamic-styles.html", "Dynamic CSS Demo")

# JavaScript code execution and DOM manipulation
let
  # Define JavaScript functions
  jsCode = "
    // Interactive counter function
    function createCounter(initialValue = 0) {
      let count = initialValue;
      
      return {
        increment: () => ++count,
        decrement: () => --count,
        getValue: () => count,
        reset: () => count = initialValue
      };
    }
    
    // DOM utility functions
    function createElement(tag, attributes = {}, children = []) {
      const element = document.createElement(tag);
      
      Object.entries(attributes).forEach(([key, value]) => {
        if (key === 'className') {
          element.className = value;
        } else if (key === 'textContent') {
          element.textContent = value;
        } else {
          element.setAttribute(key, value);
        }
      });
      
      children.forEach(child => {
        if (typeof child === 'string') {
          element.appendChild(document.createTextNode(child));
        } else {
          element.appendChild(child);
        }
      });
      
      return element;
    }
    
    // Event handling utility
    function addEventListeners(element, events) {
      Object.entries(events).forEach(([event, handler]) => {
        element.addEventListener(event, handler);
      });
    }
    
    // Initialize app
    const app = {
      counter: createCounter(0),
      init: function() {
        const container = document.getElementById('interactive-demo');
        if (!container) return;
        
        const counterDisplay = createElement('div', {
          className: 'counter-display',
          textContent: 'Count: ' + this.counter.getValue()
        });
        
        const incrementBtn = createElement('button', {
          className: 'btn btn-primary',
          textContent: 'Increment'
        });
        
        const decrementBtn = createElement('button', {
          className: 'btn btn-secondary',
          textContent: 'Decrement'
        });
        
        const resetBtn = createElement('button', {
          className: 'btn btn-warning',
          textContent: 'Reset'
        });
        
        addEventListeners(incrementBtn, {
          click: () => {
            this.counter.increment();
            counterDisplay.textContent = 'Count: ' + this.counter.getValue();
          }
        });
        
        addEventListeners(decrementBtn, {
          click: () => {
            this.counter.decrement();
            counterDisplay.textContent = 'Count: ' + this.counter.getValue();
          }
        });
        
        addEventListeners(resetBtn, {
          click: () => {
            this.counter.reset();
            counterDisplay.textContent = 'Count: ' + this.counter.getValue();
          }
        });
        
        container.appendChild(counterDisplay);
        container.appendChild(incrementBtn);
        container.appendChild(decrementBtn);
        container.appendChild(resetBtn);
      }
    };
    
    // Auto-initialize when DOM is ready
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => app.init());
    } else {
      app.init();
    }
  ";
  
  # Execute JavaScript code
  _ = js(jsCode);
  
  # JavaScript evaluation examples
  mathResult = js "Math.sqrt(144) + Math.pow(2, 4)";  # 12 + 16 = 28
  arrayResult = js "[1, 2, 3, 4, 5].reduce((a, b) => a + b, 0)";  # 15
  
  # DOM manipulation with Nixi
  createInteractiveDemo = tag "div" {
    id: "interactive-demo";
    class: "interactive-section"
  } [];
  
  # Event handling
  setupClickHandler = let
    button = querySelector "#demo-button";
    handler = js "(event) => console.log('Button clicked!', event)";
  in
    addEventListener button "click" handler;
    
  # Fetch API example
  fetchData = js "
    fetch('https://api.github.com/repos/ijadux2/nixi')
      .then(response => response.json())
      .then(data => {
        console.log('Nixi repo data:', data);
        return data.stargazers_count;
      })
      .catch(error => console.error('Error:', error));
  ";
in
  html [
    h2 { text: "JavaScript Integration Demo" };
    p { text: "Math result: " + toString(mathResult) };
    p { text: "Array sum: " + toString(arrayResult) };
    createInteractiveDemo;
    button {
      id: "demo-button";
      class: "demo-button";
      text: "Click Me!"
    }
  ]

# Web APIs and browser features
let
  # LocalStorage API
  saveToLocalStorage = key: value:
    js "localStorage.setItem('nixi_' + key, JSON.stringify(value))";
  
  getFromLocalStorage = key:
    js "JSON.parse(localStorage.getItem('nixi_' + key) || 'null')";
  
  # SessionStorage API
  saveToSessionStorage = key: value:
    js "sessionStorage.setItem('nixi_' + key, JSON.stringify(value))";
  
  # History API
  navigateToPage = url:
    js "history.pushState({}, '', url)";
  
  # Geolocation API
  getCurrentLocation = js "
    navigator.geolocation.getCurrentPosition(
      position => {
        console.log('Latitude:', position.coords.latitude);
        console.log('Longitude:', position.coords.longitude);
      },
      error => console.error('Geolocation error:', error)
    );
  ";
  
  # Notification API
  showNotification = title: body:
    js "
    if ('Notification' in window) {
      new Notification(title, {
        body: body,
        icon: '/icon.png'
      });
    }
  ";
  
  # Web Workers
  runInWorker = code:
    js "
    const worker = new Worker('worker.js');
    worker.postMessage({ code: code });
    return worker;
  ";
  
  # Canvas API
  drawOnCanvas = js "
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    // Draw a rectangle
    ctx.fillStyle = '#007bff';
    ctx.fillRect(10, 10, 100, 50);
    
    // Draw text
    ctx.fillStyle = '#333';
    ctx.font = '16px Arial';
    ctx.fillText('Hello from Nixi!', 10, 80);
  ";
  
  # Create interactive demo
  webApp = div {
    class: "web-app";
    children: [
      button {
        text: "Save Data";
        onClick: saveToLocalStorage "user" { name: "Alice"; email: "alice@example.com" }
      };
      button {
        text: "Get Location";
        onClick: getCurrentLocation
      };
      button {
        text: "Show Notification";
        onClick: showNotification "Hello from Nixi!" "Web integration demo"
      };
      canvas {
        id: "myCanvas";
        width: "200";
        height: "100";
        style: "border: 1px solid #ccc;"
      }
    ]
  };
in
  saveHTML(webApp, "web-apis.html", "Web APIs Demo")

# Full-stack web app with HTML, CSS, and JavaScript
let
  # Define styles
  _ = css ".app-container" {
    max-width: "800px";
    margin: "0 auto";
    padding: "2rem";
    font-family: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
  };
  
  _ = css ".todo-item" {
    display: "flex";
    align-items: "center";
    padding: "1rem";
    margin: "0.5rem 0";
    background: "#f8f9fa";
    border-radius: "8px";
    border-left: "4px solid #007bff";
    transition: "all 0.2s ease";
  };
  
  _ = css ".todo-item:hover" {
    background: "#e9ecef";
    transform: "translateX(5px)";
  };
  
  # JavaScript application logic
  appLogic = "
    class TodoApp {
      constructor() {
        this.todos = [
          { id: 1, text: 'Learn Nixi HTML support', completed: true },
          { id: 2, text: 'Master CSS integration', completed: false },
          { id: 3, text: 'Build JavaScript apps', completed: false }
        ];
        this.nextId = 4;
        this.init();
      }
      
      init() {
        this.render();
        this.setupEventListeners();
      }
      
      render() {
        const container = document.getElementById('todo-app');
        if (!container) return;
        
        container.innerHTML = '';
        
        const header = document.createElement('div');
        header.className = 'app-header';
        header.innerHTML = '
📝 Nixi Todo App
Powered by HTML, CSS & JavaScript integration
';
        container.appendChild(header);
        
        const inputContainer = document.createElement('div');
        inputContainer.className = 'input-container';
        inputContainer.innerHTML = \`
          
          Add Todo
        \`;
        container.appendChild(inputContainer);
        
        const todoList = document.createElement('div');
        todoList.className = 'todo-list';
        
        this.todos.forEach(todo => {
          const todoItem = document.createElement('div');
          todoItem.className = 'todo-item';
          todoItem.innerHTML = \`
            
            \${todo.text}
            Delete
          \`;
          todoList.appendChild(todoItem);
        });
        
        container.appendChild(todoList);
        
        const stats = document.createElement('div');
        stats.className = 'app-stats';
        const completed = this.todos.filter(t => t.completed).length;
        const total = this.todos.length;
        stats.innerHTML = \`
Completed: \${completed}/\${total} todos
\`;
        container.appendChild(stats);
      }
      
      setupEventListeners() {
        const input = document.getElementById('todo-input');
        const addButton = document.getElementById('add-todo');
        
        if (addButton) {
          addButton.addEventListener('click', () => this.addTodo());
        }
        
        if (input) {
          input.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') this.addTodo();
          });
        }
      }
      
      addTodo() {
        const input = document.getElementById('todo-input');
        const text = input.value.trim();
        
        if (text) {
          this.todos.push({
            id: this.nextId++,
            text: text,
            completed: false
          });
          input.value = '';
          this.render();
        }
      }
      
      toggleTodo(id) {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
          todo.completed = !todo.completed;
          this.render();
        }
      }
      
      deleteTodo(id) {
        this.todos = this.todos.filter(t => t.id !== id);
        this.render();
      }
    }
    
    // Global instance for event handlers
    let todoApp;
    
    // Initialize when DOM is ready
    document.addEventListener('DOMContentLoaded', () => {
      todoApp = new TodoApp();
    });
  ";
  
  # Execute application
  _ = js(appLogic);
  
  # HTML structure
  todoApp = html {
    head {
      title "Nixi Todo App";
      meta { charset: "UTF-8" };
      meta { 
        name: "viewport";
        content: "width=device-width, initial-scale=1.0"
      }
    };
    body {
      div {
        id: "todo-app";
        class: "app-container"
      }
    }
  };
in
  saveHTML(todoApp, "todo-app.html", "Nixi Todo Application")