User: "I need a purchase form with item details in 2 columns, then full-width description, and file uploads side by side"

AI analyzes:
- "2 columns" → desktop: 2, tablet: 2, mobile: 1
- "full-width description" → span: 2 (full width)
- "side by side" → file uploads in 2-column grid

form_definition:
  id: "advanced_purchase_request"
  title: "Purchase Request"
  
  # Layout system
  layout:
    type: "responsive_grid"
    maxWidth: "1200px"
    spacing: "md"
    
    sections:
      # Header section - 2 columns on desktop
      - id: "basic_info"
        title: "Basic Information"
        columns:
          desktop: 2
          tablet: 2  
          mobile: 1
        fields: ["item_name", "amount", "department", "priority"]
        
      # Full-width section
      - id: "description"
        title: "Details"
        columns:
          desktop: 1
          tablet: 1
          mobile: 1
        fields: ["description", "justification"]
        
      # File uploads - side by side
      - id: "attachments"
        title: "Attachments"
        columns:
          desktop: 3
          tablet: 2
          mobile: 1
        fields: ["receipt", "quote", "specs"]

  # Individual field layout overrides
  fields:
    - id: "item_name"
      type: "text"
      label: "Item Name"
      layout:
        span: 
          desktop: 1  # Takes 1 of 2 columns
          tablet: 1
          mobile: 1
        order: 1
        
    - id: "amount"
      type: "currency"
      label: "Amount"
      layout:
        span:
          desktop: 1  # Takes 1 of 2 columns
          tablet: 1
          mobile: 1
        order: 2
        
    - id: "description"
      type: "textarea"
      label: "Description"
      layout:
        span:
          desktop: 1  # Full width (section has 1 column)
          tablet: 1
          mobile: 1
        order: 5
        
    - id: "receipt"
      type: "file"
      label: "Receipt"
      layout:
        span:
          desktop: 1  # 1 of 3 columns
          tablet: 1   # 1 of 2 columns  
          mobile: 1   # Full width
        order: 7

  # Responsive breakpoints
  breakpoints:
    mobile: "640px"
    tablet: "768px"
    desktop: "1024px"
    
  # Styling system
  styling:
    theme: "professional"
    colors:
      primary: "#2563eb"
      secondary: "#64748b"
    spacing:
      xs: "0.5rem"
      sm: "0.75rem"
      md: "1rem"
      lg: "1.5rem"

# User: "Create an employee onboarding form with personal info in 3 columns, 
#        address in 2 columns, and emergency contact in 2 columns"

form_definition:
  id: "employee_onboarding"
  
  layout:
    sections:
      - id: "personal_info"
        title: "Personal Information"
        description: "Basic employee details"
        columns:
          desktop: 3
          tablet: 2
          mobile: 1
        fields: ["first_name", "last_name", "email", "phone", "start_date", "position"]
        
      - id: "address"
        title: "Address Information"
        columns:
          desktop: 2
          tablet: 2
          mobile: 1
        fields: ["street_address", "city", "state", "zip_code"]
        
      - id: "emergency_contact"
        title: "Emergency Contact"
        columns:
          desktop: 2
          tablet: 1
          mobile: 1
        fields: ["emergency_name", "emergency_phone", "relationship", "emergency_address"]

  fields:
    # Personal info fields
    - id: "first_name"
      type: "text"
      label: "First Name"
      layout: { span: { desktop: 1, tablet: 1, mobile: 1 }, order: 1 }
      
    - id: "last_name" 
      type: "text"
      label: "Last Name"
      layout: { span: { desktop: 1, tablet: 1, mobile: 1 }, order: 2 }
      
    - id: "email"
      type: "email"
      label: "Email"
      layout: { span: { desktop: 1, tablet: 2, mobile: 1 }, order: 3 }
      
    # Address with smart spanning
    - id: "street_address"
      type: "text"
      label: "Street Address"
      layout: { span: { desktop: 2, tablet: 2, mobile: 1 }, order: 7 }  # Full width
      
    - id: "city"
      type: "text"
      label: "City"
      layout: { span: { desktop: 1, tablet: 1, mobile: 1 }, order: 8 }
      
    - id: "state"
      type: "select"
      label: "State"
      layout: { span: { desktop: 1, tablet: 1, mobile: 1 }, order: 9 }

# AI can generate conditional layouts that change based on user input

form_definition:
  layout:
    sections:
      - id: "request_type"
        title: "Request Type"
        columns: { desktop: 1, tablet: 1, mobile: 1 }
        fields: ["request_type"]
        
      - id: "purchase_details"
        title: "Purchase Details"
        columns: { desktop: 2, tablet: 1, mobile: 1 }
        fields: ["item", "amount", "vendor", "urgency"]
        conditional:
          show_if: "request_type == 'purchase'"
          
      - id: "travel_details"
        title: "Travel Details"  
        columns: { desktop: 3, tablet: 2, mobile: 1 }
        fields: ["destination", "departure", "return", "purpose", "budget", "accommodation"]
        conditional:
          show_if: "request_type == 'travel'"

  fields:
    - id: "request_type"
      type: "select"
      label: "Type of Request"
      options:
        - { value: "purchase", label: "Purchase Request" }
        - { value: "travel", label: "Travel Request" }
        - { value: "expense", label: "Expense Reimbursement" }

# AI groups related fields automatically
sections:
  - title: "Contact Information"  # Email, phone fields
    fields: ["email", "phone", "address"]
    
  - title: "Financial Details"    # Money-related fields  
    fields: ["amount", "budget_code", "cost_center"]
    
  - title: "Attachments"          # File upload fields
    fields: ["receipt", "invoice", "contract"]

styling:
  theme: "modern"  # AI selects from: minimal, professional, modern, corporate
  
  # AI customizes based on company branding
  colors:
    primary: "#company-primary-color"
    accent: "#company-accent-color"
    
  # Typography matching company style
  typography:
    fontFamily: "Inter, sans-serif"  # Professional
    # OR "Roboto, sans-serif"       # Modern
    # OR "Georgia, serif"           # Traditional

fields:
  - id: "amount"
    type: "currency"
    styling:
      highlight: true           # Emphasize important fields
      size: "large"            # Larger input for key fields
      helpText: "Enter amount in USD"
      
  - id: "description"
    type: "textarea"
    styling:
      rows: 4
      resize: "vertical"
      characterCount: true     # Show character counter

styling:
  conditionalStyles:
    - condition: "amount > 1000"
      apply:
        borderColor: "#f59e0b"  # Orange border for high amounts
        backgroundColor: "#fef3c7"  # Light yellow background
        
    - condition: "urgency == 'high'"
      apply:
        borderColor: "#dc2626"  # Red border for urgent
        animation: "pulse"      # Subtle animation

// Runtime CSS generation from YAML
const generateGridCSS = (section, breakpoint) => {
  const columns = section.columns[breakpoint];
  return {
    display: 'grid',
    gridTemplateColumns: `repeat(${columns}, 1fr)`,
    gap: formDef.styling.spacing.md,
    marginBottom: formDef.styling.spacing.lg
  };
};

// Field spanning
const getFieldStyle = (field, breakpoint) => {
  const span = field.layout?.span?.[breakpoint] || 1;
  return {
    gridColumn: `span ${span}`,
    order: field.layout?.order || 0
  };
};

const ResponsiveField = ({ field, breakpoint }) => {
  const style = getFieldStyle(field, breakpoint);
  const shouldShow = evaluateConditional(field.conditional, formData);
  
  if (!shouldShow) return null;
  
  return (
    <div style={style} className={getFieldClasses(field)}>
      <FieldRenderer field={field} />
    </div>
  );
};