'use client';

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

export default function HelpPage() {
  const t = useT();
  const topics = [
    { icon: '\u{1F6D2}', titleKey: 'help_t1_title', descKey: 'help_t1_desc' },
    { icon: '\u{1F4B1}', titleKey: 'help_t2_title', descKey: 'help_t2_desc' },
    { icon: '\u{1F4B3}', titleKey: 'help_t3_title', descKey: 'help_t3_desc' },
    { icon: '\u{1F512}', titleKey: 'help_t4_title', descKey: 'help_t4_desc' },
    { icon: '\u{1F4F1}', titleKey: 'help_t5_title', descKey: 'help_t5_desc' },
    { icon: '\u{2753}', titleKey: 'help_t6_title', descKey: 'help_t6_desc' },
  ];
  return (
    <>
      <section className={s.hero}>
        <h1 className={s.title}>{t('help_title')}</h1>
        <p className={s.subtitle}>{t('help_subtitle')}</p>
      </section>
      <div className={s.grid}>
        {topics.map((tp, i) => (
          <AnimateOnScroll key={tp.titleKey} delay={i * 0.1}>
            <div className={s.card}>
              <div className={s.cardIcon}>{tp.icon}</div>
              <h3 className={s.cardTitle}>{t(tp.titleKey)}</h3>
              <p className={s.cardDesc}>{t(tp.descKey)}</p>
            </div>
          </AnimateOnScroll>
        ))}
      </div>
      <div style={{ textAlign: 'center', padding: '0 24px 80px' }}>
        <p style={{ fontSize: 16, color: 'var(--color-text-secondary)', marginBottom: 16 }}>{t('help_contact_hint')}</p>
        <Link href="/contact" style={{ fontSize: 16, fontWeight: 600, color: 'var(--color-primary)' }}>{t('help_contact_link')} &rarr;</Link>
      </div>
    </>
  );
}