'use client';

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

export default function DownloadPage() {
  const t = useT();
  const platforms = [
    { icon: '\u{1F4F1}', titleKey: 'download_ios_title', descKey: 'download_ios_desc', btnKey: 'download_ios_btn' },
    { icon: '\u{1F4F2}', titleKey: 'download_android_title', descKey: 'download_android_desc', btnKey: 'download_android_btn' },
    { icon: '\u{1F4BB}', titleKey: 'download_web_title', descKey: 'download_web_desc', btnKey: 'download_web_btn' },
    { icon: '\u{2B50}', titleKey: 'download_miniapp_title', descKey: 'download_miniapp_desc', btnKey: 'download_miniapp_btn' },
  ];
  return (
    <>
      <section className={s.hero}>
        <h1 className={s.title}>{t('download_title')}</h1>
        <p className={s.subtitle}>{t('download_subtitle')}</p>
      </section>
      <div className={s.grid} style={{ gridTemplateColumns: 'repeat(2, 1fr)', maxWidth: 800 }}>
        {platforms.map((p, i) => (
          <AnimateOnScroll key={p.titleKey} delay={i * 0.1}>
            <div className={s.card} style={{ textAlign: 'center' }}>
              <div className={s.cardIcon}>{p.icon}</div>
              <h3 className={s.cardTitle}>{t(p.titleKey)}</h3>
              <p className={s.cardDesc}>{t(p.descKey)}</p>
              <span className={s.cardLink}>{t(p.btnKey)} &rarr;</span>
            </div>
          </AnimateOnScroll>
        ))}
      </div>
    </>
  );
}
