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

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

/**
 * Home page component for @worktif/runtime application
 */
const HomePage: 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' }}>Welcome to <span style={{ color: '#063846' }}>Runtime
        Web</span></h1>
      <p>
        A unified serverless framework for building full-stack TypeScript applications on AWS.
      </p>

      <div style={{ marginTop: '2rem' }}>
        <h2>Key Features</h2>
        <ul style={{ paddingInlineStart: '30px', lineHeight: '1.5rem' }}>
          <li>Unified Codebase – Frontend (React), Backend (Lambda), Infrastructure (CDK) in one project</li>
          <li>Type-Safe Lambda DI – Access services via <code>event.ties.serviceName</code> with full TypeScript support
          </li>
          <li>Declarative Microservices – Define services with <code>ties</code> (DI config)
            + <code>lambdas</code> (endpoints)
          </li>
          <li>Context-Aware Execution – Single <code>runtime()</code> entry point works in Browser, Lambda, and CDK</li>
          <li>Zero-Config AWS Deployment – CDK constructs create API Gateway, Lambda, S3, CloudFront, DynamoDB</li>
          <li>Built-in Dev Server – Local development with HMR and Lambda emulation</li>
          <li>React SSR Support – Optional server-side rendering with streaming and S3 caching</li>
        </ul>
      </div>

      <div style={{ marginTop: '2rem', lineHeight: '1.5rem' }}>
        <Link to="/about" style={{ color: '#0066cc', textDecoration: 'none' }}>
          Learn more about this project →
        </Link>
        <br/>
        <Link to="/users" style={{ color: '#0066cc', textDecoration: 'none' }}>
          Users API Example →
        </Link>
      </div>

      <footer style={{ marginTop: '4rem', color: '#666', fontSize: '0.875rem' }}>
        <p>Built with @worktif/runtime © 2025</p>
      </footer>
    </div>
  );
};

export default HomePage;
