'use client';

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

export default function AboutPage() {
  const t = useT();

  const values = [
    { icon: '\u{1F465}', nameKey: 'about_value_1', descKey: 'about_value_1_desc' },
    { icon: '\u{1F50D}', nameKey: 'about_value_2', descKey: 'about_value_2_desc' },
    { icon: '\u{1F680}', nameKey: 'about_value_3', descKey: 'about_value_3_desc' },
    { icon: '\u{1F3DB}', nameKey: 'about_value_4', descKey: 'about_value_4_desc' },
  ];

  const milestones = [
    { date: '2025 Q1', key: 'about_milestone_2025_q1' },
    { date: '2025 Q2', key: 'about_milestone_2025_q2' },
    { date: '2025 Q3', key: 'about_milestone_2025_q3' },
    { date: '2025 Q4', key: 'about_milestone_2025_q4' },
    { date: '2026 Q1', key: 'about_milestone_2026_q1' },
    { date: '2026 Q2', key: 'about_milestone_2026_q2' },
  ];

  return (
    <>
      <section className={s.hero}>
        <AnimateOnScroll direction="none">
          <h1 className={s.title}>{t('about_title')}</h1>
          <p className={s.subtitle}>{t('about_subtitle')}</p>
        </AnimateOnScroll>
      </section>

      <div className={s.visionSection}>
        <AnimateOnScroll direction="left">
          <div className={s.visionCard}>
            <h2 className={s.visionTitle}>{t('about_vision_title')}</h2>
            <p className={s.visionDesc}>{t('about_vision_desc')}</p>
          </div>
        </AnimateOnScroll>
        <AnimateOnScroll direction="right">
          <div className={s.visionCard}>
            <h2 className={s.visionTitle}>{t('about_mission_title')}</h2>
            <p className={s.visionDesc}>{t('about_mission_desc')}</p>
          </div>
        </AnimateOnScroll>
      </div>

      <section className={s.values}>
        <h2 className={s.valuesTitle}>{t('about_value_title')}</h2>
        <div className={s.valuesGrid}>
          {values.map((v, i) => (
            <AnimateOnScroll key={v.nameKey} delay={i * 0.1}>
              <div className={s.valueCard}>
                <div className={s.valueIcon}>{v.icon}</div>
                <h3 className={s.valueName}>{t(v.nameKey)}</h3>
                <p className={s.valueDesc}>{t(v.descKey)}</p>
              </div>
            </AnimateOnScroll>
          ))}
        </div>
      </section>

      <section className={s.timeline}>
        <h2 className={s.timelineTitle}>{t('about_milestone_title')}</h2>
        <div className={s.timelineTrack}>
          {milestones.map((m, i) => (
            <AnimateOnScroll key={m.key} delay={i * 0.1} direction="left">
              <div className={s.timelineItem}>
                <div className={s.timelineDot} />
                <div className={s.timelineDate}>{m.date}</div>
                <div className={s.timelineText}>{t(m.key)}</div>
              </div>
            </AnimateOnScroll>
          ))}
        </div>
      </section>
    </>
  );
}
