'use client';

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

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

  const features = [
    { icon: '\u{1F6D2}', titleKey: 'feat_buy_title', descKey: 'feat_buy_desc' },
    { icon: '\u{1F4C8}', titleKey: 'feat_market_title', descKey: 'feat_market_desc' },
    { icon: '\u{1F4DC}', titleKey: 'feat_contract_title', descKey: 'feat_contract_desc' },
    { icon: '\u{2B50}', titleKey: 'feat_rating_title', descKey: 'feat_rating_desc' },
    { icon: '\u{1F4F1}', titleKey: 'feat_multi_title', descKey: 'feat_multi_desc' },
    { icon: '\u{1F916}', titleKey: 'feat_ai_title', descKey: 'feat_ai_desc' },
  ];

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

      <div className={s.grid}>
        {features.map((f, i) => (
          <AnimateOnScroll key={f.titleKey} delay={i * 0.1}>
            <div className={s.card}>
              <div className={s.cardIcon}>{f.icon}</div>
              <h3 className={s.cardTitle}>{t(f.titleKey)}</h3>
              <p className={s.cardDesc}>{t(f.descKey)}</p>
            </div>
          </AnimateOnScroll>
        ))}
      </div>
    </>
  );
}
