/*
 * For any questions, contact us at: raman@worktif.com
 */

import * as React from 'react';
import { Link } from 'react-router';

/**
 * About page component
 */
const AboutPage: React.FC = () => {
  return (
    <div style={{ padding: '2rem', fontFamily: 'system-ui, sans-serif', lineHeight: '1.5rem' }}>
      <style>{`.pageTitle {font-size:2.5rem;margin-block-start:0} @media (max-width: 768px) { .pageTitle { text-align: center; }}`}</style>
      <h1 className={'pageTitle'} style={{ lineHeight: '3rem' }}>About <span style={{ color: '#063846' }}>Runtime Web</span></h1>

      <div style={{ marginTop: '2rem' }}>
        <h2>What is Runtime Web?</h2>
        <p>
          Runtime Web is a unified serverless framework for building full-stack TypeScript applications on AWS.
          Define microservices with type-safe dependency injection, write Lambda handlers with auto-injected
          services, build React frontends, and deploy everything with a single command.
        </p>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <h2>Microservice Architecture</h2>
        <p>
          Runtime Web organizes backend logic into microservices – logical groupings of related Lambda functions
          sharing a DI container:
        </p>
        <ul style={{ paddingInlineStart: '30px', lineHeight: '1.5rem' }}>
          <li>Each microservice gets isolated DI container</li>
          <li>Lambda functions within a microservice share dependencies</li>
          <li>Microservices are deployed as separate Lambda functions</li>
          <li>API Gateway routes are auto-generated from <code>http</code> definitions</li>
        </ul>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <h2>Provisioned Resources</h2>
        <ul style={{ paddingInlineStart: '30px', lineHeight: '1.5rem' }}>
          <li><strong>API Gateway:</strong> HTTP API with Lambda integrations</li>
          <li><strong>Lambda Functions:</strong> One per handler definition</li>
          <li><strong>Lambda Layer:</strong> Shared dependencies (node_modules)</li>
          <li><strong>S3 Buckets:</strong> Static assets, SSR cache</li>
          <li><strong>CloudFront:</strong> CDN distribution with edge caching</li>
          <li><strong>DynamoDB:</strong> SEO metadata (optional)</li>
        </ul>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <h2>Type-Safe Dependency Injection</h2>
        <p>
          Runtime Web provides compile-time type safety for Lambda dependencies.
          Access services via <code>event.ties.serviceName</code> with full IntelliSense and type checking.
        </p>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <Link to="/" style={{ color: '#0066cc', textDecoration: 'none' }}>
          ← Back to Home
        </Link>
      </div>
    </div>
  );
};

export default AboutPage;
