'use client';

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

export default function PressPage() {
  const t = useT();
  const items = [
    { dateKey: 'press_p1_date', titleKey: 'press_p1_title', descKey: 'press_p1_desc' },
    { dateKey: 'press_p2_date', titleKey: 'press_p2_title', descKey: 'press_p2_desc' },
    { dateKey: 'press_p3_date', titleKey: 'press_p3_title', descKey: 'press_p3_desc' },
  ];
  return (
    <>
      <section className={s.hero}>
        <h1 className={s.title}>{t('press_title')}</h1>
        <p className={s.subtitle}>{t('press_subtitle')}</p>
      </section>
      <div className={s.body}>
        {items.map((item, i) => (
          <AnimateOnScroll key={item.titleKey} delay={i * 0.1}>
            <div style={{ marginBottom: 40, paddingBottom: 40, borderBottom: '1px solid var(--color-border-light)' }}>
              <div style={{ fontSize: 13, color: 'var(--color-text-tertiary)', marginBottom: 8 }}>{t(item.dateKey)}</div>
              <h3 style={{ fontSize: 20, fontWeight: 600, marginBottom: 10 }}>{t(item.titleKey)}</h3>
              <p style={{ fontSize: 15, color: 'var(--color-text-secondary)', lineHeight: 1.7 }}>{t(item.descKey)}</p>
            </div>
          </AnimateOnScroll>
        ))}
      </div>
    </>
  );
}
