'use client';

import React from 'react';
import { useT } from '@/i18n';
import AnimateOnScroll from '@/components/AnimateOnScroll';
import s from '../content.module.css';

export default function StatusPage() {
  const t = useT();
  const services = [
    { nameKey: 'status_s1_name', statusKey: 'status_s1_status' },
    { nameKey: 'status_s2_name', statusKey: 'status_s2_status' },
    { nameKey: 'status_s3_name', statusKey: 'status_s3_status' },
    { nameKey: 'status_s4_name', statusKey: 'status_s4_status' },
    { nameKey: 'status_s5_name', statusKey: 'status_s5_status' },
    { nameKey: 'status_s6_name', statusKey: 'status_s6_status' },
  ];
  return (
    <>
      <section className={s.hero}>
        <h1 className={s.title}>{t('status_title')}</h1>
        <p className={s.subtitle}>{t('status_subtitle')}</p>
      </section>
      <div className={s.body}>
        <AnimateOnScroll>
          <div style={{ background: 'var(--color-success-surface, #e8f5e9)', borderRadius: 'var(--radius-lg)', padding: '24px 32px', marginBottom: 40, display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className={s.statusDot} />
            <span style={{ fontSize: 18, fontWeight: 600, color: 'var(--color-success)' }}>{t('status_all_ok')}</span>
          </div>
        </AnimateOnScroll>
        {services.map((svc, i) => (
          <AnimateOnScroll key={svc.nameKey} delay={i * 0.05}>
            <div className={s.statusRow}>
              <div className={s.statusLabel}>
                <span className={s.statusDot} />
                <span>{t(svc.nameKey)}</span>
              </div>
              <span className={s.statusBadge}>{t(svc.statusKey)}</span>
            </div>
          </AnimateOnScroll>
        ))}
        <p style={{ fontSize: 13, color: 'var(--color-text-tertiary)', marginTop: 32, textAlign: 'center' }}>{t('status_updated')}</p>
      </div>
    </>
  );
}
