'use client';

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

export default function CommunityPage() {
  const t = useT();
  const channels = [
    { icon: '\u{1F4AC}', titleKey: 'community_c1_title', descKey: 'community_c1_desc', link: '#' },
    { icon: '\u{1F426}', titleKey: 'community_c2_title', descKey: 'community_c2_desc', link: '#' },
    { icon: '\u{1F4E2}', titleKey: 'community_c3_title', descKey: 'community_c3_desc', link: '#' },
    { icon: '\u{1F310}', titleKey: 'community_c4_title', descKey: 'community_c4_desc', link: '#' },
    { icon: '\u{1F4F1}', titleKey: 'community_c5_title', descKey: 'community_c5_desc', link: '#' },
    { icon: '\u{1F3AE}', titleKey: 'community_c6_title', descKey: 'community_c6_desc', link: '#' },
  ];
  return (
    <>
      <section className={s.hero}>
        <h1 className={s.title}>{t('community_title')}</h1>
        <p className={s.subtitle}>{t('community_subtitle')}</p>
      </section>
      <div className={s.grid}>
        {channels.map((ch, i) => (
          <AnimateOnScroll key={ch.titleKey} delay={i * 0.1}>
            <div className={s.card}>
              <div className={s.cardIcon}>{ch.icon}</div>
              <h3 className={s.cardTitle}>{t(ch.titleKey)}</h3>
              <p className={s.cardDesc}>{t(ch.descKey)}</p>
            </div>
          </AnimateOnScroll>
        ))}
      </div>
    </>
  );
}
