{% extends "base.html" %}

{% block content %}
<!-- SDK Hero -->
<section class="sdk-hero bg-gradient-dark text-white py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-4">
                    <i class="fas fa-code" aria-hidden="true"></i>
                    Developer SDK
                </h1>
                <p class="lead mb-4">
                    Build accessible mobile applications with the PrismaOS SDK. 
                    Create inclusive experiences that work for everyone.
                </p>
                <div class="hero-actions">
                    <a href="#download" class="btn btn-primary btn-lg me-3">
                        <i class="fas fa-download" aria-hidden="true"></i>
                        Download SDK
                    </a>
                    <a href="#documentation" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-book" aria-hidden="true"></i>
                        Documentation
                    </a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="code-preview bg-dark p-4 rounded-3">
                    <div class="code-header mb-3">
                        <div class="d-flex align-items-center">
                            <div class="code-dots me-3">
                                <span class="dot bg-danger"></span>
                                <span class="dot bg-warning"></span>
                                <span class="dot bg-success"></span>
                            </div>
                            <span class="text-muted small">hello_world.js</span>
                        </div>
                    </div>
                    <pre class="text-light mb-0"><code>import { PrismaOS } from '@prismaos/sdk';

// Initialize accessibility-first app
const app = new PrismaOS.App({
  name: 'Hello World',
  accessibility: {
    screenReader: true,
    voiceCommands: true,
    highContrast: true
  }
});

// Create accessible UI elements
const button = app.createElement('button', {
  text: 'Hello World',
  ariaLabel: 'Say hello to the world',
  onClick: () => {
    app.tts.speak('Hello, accessible world!');
  }
});

app.render();</code></pre>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- SDK Features -->
<section class="sdk-features py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">SDK Features</h2>
                <p class="lead text-muted">Everything you need to build accessible mobile applications</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-4">
                <div class="feature-card h-100 p-4 border rounded-3">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-universal-access fa-3x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Accessibility-First APIs</h3>
                    <p class="text-muted">Built-in accessibility features that work out of the box, ensuring your apps are inclusive by default.</p>
                    <ul class="list-unstyled small text-muted">
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Screen reader integration</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Voice command support</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Gesture recognition</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="feature-card h-100 p-4 border rounded-3">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-palette fa-3x text-success" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Adaptive UI Components</h3>
                    <p class="text-muted">Pre-built UI components that automatically adapt to user accessibility preferences and needs.</p>
                    <ul class="list-unstyled small text-muted">
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Responsive layouts</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> High contrast themes</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Scalable text and icons</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="feature-card h-100 p-4 border rounded-3">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-brain fa-3x text-warning" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">AI-Powered Assistance</h3>
                    <p class="text-muted">Integrate machine learning capabilities for enhanced accessibility and user assistance features.</p>
                    <ul class="list-unstyled small text-muted">
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Natural language processing</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Image description</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Predictive text input</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="feature-card h-100 p-4 border rounded-3">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-plug fa-3x text-info" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Cross-Platform Support</h3>
                    <p class="text-muted">Develop once, deploy everywhere with compatibility layers for other mobile platforms.</p>
                    <ul class="list-unstyled small text-muted">
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Android compatibility</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Web app support</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Progressive enhancement</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="feature-card h-100 p-4 border rounded-3">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-tools fa-3x text-danger" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Development Tools</h3>
                    <p class="text-muted">Comprehensive toolchain for building, testing, and debugging accessible applications.</p>
                    <ul class="list-unstyled small text-muted">
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Accessibility debugger</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Emulator with assistive tech</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Compliance validation</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="feature-card h-100 p-4 border rounded-3">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-graduation-cap fa-3x text-secondary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Learning Resources</h3>
                    <p class="text-muted">Extensive documentation, tutorials, and community support to help you build better accessible apps.</p>
                    <ul class="list-unstyled small text-muted">
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Interactive tutorials</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Best practices guide</li>
                        <li><i class="fas fa-check text-success" aria-hidden="true"></i> Community forums</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Getting Started -->
<section class="getting-started bg-light py-5" id="getting-started">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Getting Started</h2>
                <p class="lead text-muted">Set up your development environment in minutes</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="getting-started-steps">
                    <!-- Step 1 -->
                    <div class="step-card mb-4 p-4 bg-white border rounded-3">
                        <div class="d-flex align-items-start">
                            <div class="step-number me-4">
                                <span class="badge bg-primary rounded-circle p-3">1</span>
                            </div>
                            <div class="step-content flex-grow-1">
                                <h3 class="h5 fw-bold mb-3">Install the SDK</h3>
                                <p class="text-muted mb-3">Download and install the PrismaOS SDK using your preferred package manager.</p>
                                <div class="code-example">
                                    <pre class="bg-dark text-light p-3 rounded"><code># Using npm
npm install -g @prismaos/sdk

# Using yarn  
yarn global add @prismaos/sdk

# Using pip (Python bindings)
pip install prismaos-sdk</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 2 -->
                    <div class="step-card mb-4 p-4 bg-white border rounded-3">
                        <div class="d-flex align-items-start">
                            <div class="step-number me-4">
                                <span class="badge bg-success rounded-circle p-3">2</span>
                            </div>
                            <div class="step-content flex-grow-1">
                                <h3 class="h5 fw-bold mb-3">Create Your First Project</h3>
                                <p class="text-muted mb-3">Use the CLI tool to generate a new accessible application project.</p>
                                <div class="code-example">
                                    <pre class="bg-dark text-light p-3 rounded"><code># Create a new project
prismaos create my-accessible-app

# Navigate to project directory
cd my-accessible-app

# Start development server
prismaos dev</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 3 -->
                    <div class="step-card mb-4 p-4 bg-white border rounded-3">
                        <div class="d-flex align-items-start">
                            <div class="step-number me-4">
                                <span class="badge bg-warning rounded-circle p-3">3</span>
                            </div>
                            <div class="step-content flex-grow-1">
                                <h3 class="h5 fw-bold mb-3">Build Accessible Components</h3>
                                <p class="text-muted mb-3">Use our pre-built components or create custom accessible UI elements.</p>
                                <div class="code-example">
                                    <pre class="bg-dark text-light p-3 rounded"><code>import { Button, Screen, TTS } from '@prismaos/sdk';

const AccessibleButton = () => (
  &lt;Button
    text="Click me"
    ariaLabel="Accessible button example"
    onPress={() => TTS.speak('Button pressed!')}
    accessible={true}
    accessibilityRole="button"
  /&gt;
);</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 4 -->
                    <div class="step-card p-4 bg-white border rounded-3">
                        <div class="d-flex align-items-start">
                            <div class="step-number me-4">
                                <span class="badge bg-info rounded-circle p-3">4</span>
                            </div>
                            <div class="step-content flex-grow-1">
                                <h3 class="h5 fw-bold mb-3">Test and Deploy</h3>
                                <p class="text-muted mb-3">Test your app with accessibility tools and deploy to the PrismaOS app store.</p>
                                <div class="code-example">
                                    <pre class="bg-dark text-light p-3 rounded"><code># Run accessibility tests
prismaos test --accessibility

# Build for production
prismaos build

# Deploy to app store
prismaos deploy</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Documentation -->
<section class="documentation py-5" id="documentation">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Documentation</h2>
                <p class="lead text-muted">Comprehensive guides and API references</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="doc-card h-100 text-center p-4 border rounded-3">
                    <div class="doc-icon mb-3">
                        <i class="fas fa-rocket fa-3x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h6 fw-bold">Quick Start Guide</h3>
                    <p class="text-muted small mb-3">Get up and running with PrismaOS development in 15 minutes</p>
                    <a href="#" class="btn btn-outline-primary btn-sm">Read Guide</a>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="doc-card h-100 text-center p-4 border rounded-3">
                    <div class="doc-icon mb-3">
                        <i class="fas fa-book fa-3x text-success" aria-hidden="true"></i>
                    </div>
                    <h3 class="h6 fw-bold">API Reference</h3>
                    <p class="text-muted small mb-3">Complete API documentation with examples and code samples</p>
                    <a href="#" class="btn btn-outline-success btn-sm">Browse API</a>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="doc-card h-100 text-center p-4 border rounded-3">
                    <div class="doc-icon mb-3">
                        <i class="fas fa-graduation-cap fa-3x text-warning" aria-hidden="true"></i>
                    </div>
                    <h3 class="h6 fw-bold">Tutorials</h3>
                    <p class="text-muted small mb-3">Step-by-step tutorials for building accessible mobile apps</p>
                    <a href="#" class="btn btn-outline-warning btn-sm">Start Learning</a>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="doc-card h-100 text-center p-4 border rounded-3">
                    <div class="doc-icon mb-3">
                        <i class="fas fa-lightbulb fa-3x text-info" aria-hidden="true"></i>
                    </div>
                    <h3 class="h6 fw-bold">Best Practices</h3>
                    <p class="text-muted small mb-3">Guidelines for creating outstanding accessible user experiences</p>
                    <a href="#" class="btn btn-outline-info btn-sm">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Code Examples -->
<section class="code-examples bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Code Examples</h2>
                <p class="lead text-muted">Real-world examples of accessible app development</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="example-card p-4 bg-white border rounded-3 h-100">
                    <h3 class="h5 fw-bold mb-3">
                        <i class="fas fa-volume-up text-primary" aria-hidden="true"></i>
                        Text-to-Speech Integration
                    </h3>
                    <p class="text-muted mb-3">Add voice output to your application content</p>
                    <div class="code-example">
                        <pre class="bg-dark text-light p-3 rounded small"><code>import { TTS, Button } from '@prismaos/sdk';

const SpeakButton = ({ text, children }) => {
  const handleSpeak = async () => {
    try {
      await TTS.speak(text, {
        rate: 1.0,
        pitch: 1.0,
        voice: 'natural'
      });
    } catch (error) {
      console.error('TTS Error:', error);
    }
  };

  return (
    &lt;Button
      onPress={handleSpeak}
      ariaLabel={`Speak: ${text}`}
      accessible={true}
    &gt;
      {children}
    &lt;/Button&gt;
  );
};</code></pre>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6 mb-4">
                <div class="example-card p-4 bg-white border rounded-3 h-100">
                    <h3 class="h5 fw-bold mb-3">
                        <i class="fas fa-microphone text-success" aria-hidden="true"></i>
                        Voice Commands
                    </h3>
                    <p class="text-muted mb-3">Enable hands-free navigation and control</p>
                    <div class="code-example">
                        <pre class="bg-dark text-light p-3 rounded small"><code>import { VoiceCommands, Navigation } from '@prismaos/sdk';

const setupVoiceCommands = () => {
  VoiceCommands.addCommand({
    phrases: ['go home', 'navigate home'],
    action: () => Navigation.navigate('Home'),
    description: 'Navigate to home screen'
  });

  VoiceCommands.addCommand({
    phrases: ['read this', 'read content'],
    action: () => TTS.readPageContent(),
    description: 'Read current page content'
  });

  VoiceCommands.start();
};

// Initialize voice commands when app starts
setupVoiceCommands();</code></pre>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6 mb-4">
                <div class="example-card p-4 bg-white border rounded-3 h-100">
                    <h3 class="h5 fw-bold mb-3">
                        <i class="fas fa-eye text-warning" aria-hidden="true"></i>
                        High Contrast Theme
                    </h3>
                    <p class="text-muted mb-3">Implement adaptive theming for better visibility</p>
                    <div class="code-example">
                        <pre class="bg-dark text-light p-3 rounded small"><code>import { Theme, Settings } from '@prismaos/sdk';

const AccessibleTheme = () => {
  const [highContrast, setHighContrast] = useState(
    Settings.get('highContrast', false)
  );

  useEffect(() => {
    Theme.apply(highContrast ? 'high-contrast' : 'default');
  }, [highContrast]);

  return (
    &lt;Switch
      value={highContrast}
      onValueChange={setHighContrast}
      ariaLabel="Toggle high contrast mode"
      accessibilityHint="Improves visibility for low vision users"
    /&gt;
  );
};</code></pre>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6 mb-4">
                <div class="example-card p-4 bg-white border rounded-3 h-100">
                    <h3 class="h5 fw-bold mb-3">
                        <i class="fas fa-hand-paper text-info" aria-hidden="true"></i>
                        Gesture Navigation
                    </h3>
                    <p class="text-muted mb-3">Implement accessible gesture controls</p>
                    <div class="code-example">
                        <pre class="bg-dark text-light p-3 rounded small"><code>import { GestureHandler, Haptics } from '@prismaos/sdk';

const AccessibleList = ({ items }) => {
  const gestureHandler = GestureHandler.create({
    onSwipeRight: (index) => {
      // Navigate to next item
      setSelectedIndex((prev) => 
        Math.min(prev + 1, items.length - 1)
      );
      Haptics.selection();
    },
    onSwipeLeft: (index) => {
      // Navigate to previous item  
      setSelectedIndex((prev) => Math.max(prev - 1, 0));
      Haptics.selection();
    },
    onDoubleTap: (index) => {
      // Activate item
      onItemSelect(items[index]);
      Haptics.success();
    }
  });

  return gestureHandler.wrap(&lt;ListView items={items} /&gt;);
};</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Download SDK -->
<section class="download-sdk py-5" id="download">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Download SDK</h2>
                <p class="lead text-muted">Choose your preferred development platform</p>
            </div>
        </div>
        
        <div class="row g-4 justify-content-center">
            <div class="col-md-6 col-lg-4">
                <div class="download-card h-100 text-center p-4 border rounded-3">
                    <div class="download-icon mb-3">
                        <i class="fab fa-js-square fa-4x text-warning" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">JavaScript SDK</h3>
                    <p class="text-muted mb-4">For React Native and web-based applications</p>
                    <div class="version-info mb-3">
                        <span class="badge bg-primary">v1.0.0-alpha</span>
                        <span class="badge bg-success ms-2">Latest</span>
                    </div>
                    <a href="#" class="btn btn-primary btn-lg">
                        <i class="fas fa-download" aria-hidden="true"></i>
                        Download JS SDK
                    </a>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="download-card h-100 text-center p-4 border rounded-3">
                    <div class="download-icon mb-3">
                        <i class="fab fa-python fa-4x text-info" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Python SDK</h3>
                    <p class="text-muted mb-4">For AI-powered accessibility applications</p>
                    <div class="version-info mb-3">
                        <span class="badge bg-primary">v1.0.0-alpha</span>
                        <span class="badge bg-success ms-2">Latest</span>
                    </div>
                    <a href="#" class="btn btn-info btn-lg">
                        <i class="fas fa-download" aria-hidden="true"></i>
                        Download Python SDK
                    </a>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="download-card h-100 text-center p-4 border rounded-3">
                    <div class="download-icon mb-3">
                        <i class="fas fa-mobile-alt fa-4x text-success" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Native SDK</h3>
                    <p class="text-muted mb-4">For native PrismaOS application development</p>
                    <div class="version-info mb-3">
                        <span class="badge bg-primary">v1.0.0-alpha</span>
                        <span class="badge bg-warning">Preview</span>
                    </div>
                    <a href="#" class="btn btn-success btn-lg">
                        <i class="fas fa-download" aria-hidden="true"></i>
                        Download Native SDK
                    </a>
                </div>
            </div>
        </div>
        
        <div class="row mt-5">
            <div class="col-12 text-center">
                <div class="system-requirements p-4 bg-light rounded-3">
                    <h3 class="h5 fw-bold mb-3">System Requirements</h3>
                    <div class="row text-start">
                        <div class="col-md-4">
                            <strong>Operating System:</strong><br>
                            <small class="text-muted">
                                • Linux (Ubuntu 20.04+)<br>
                                • macOS 11.0+<br>
                                • Windows 10/11
                            </small>
                        </div>
                        <div class="col-md-4">
                            <strong>Development Environment:</strong><br>
                            <small class="text-muted">
                                • Node.js 16.0+<br>
                                • Python 3.8+<br>
                                • Git 2.0+
                            </small>
                        </div>
                        <div class="col-md-4">
                            <strong>Hardware:</strong><br>
                            <small class="text-muted">
                                • 8GB RAM minimum<br>
                                • 20GB free disk space<br>
                                • Internet connection
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
