'use client';

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

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

  return (
    <>
      {/* ===== Hero ===== */}
      <section className={s.hero}>
        <div className={s.heroBg} />
        <div className={s.heroContent}>
          <AnimateOnScroll direction="none">
            <h1 className={s.heroTitle}>{t('hero_title')}</h1>
            <p className={s.heroSubtitle}>{t('hero_subtitle')}</p>
            <div className={s.heroBtns}>
              <button className={s.btnPrimary}>{t('hero_cta_download')}</button>
              <button className={s.btnOutline}>{t('hero_cta_register')}</button>
            </div>
          </AnimateOnScroll>
        </div>
      </section>

      {/* ===== Stats ===== */}
      <section className={s.stats}>
        <div className={s.statsGrid}>
          <StatsCounter end={12.8} suffix={t('stats_unit_yi')} label={t('stats_volume')} decimals={1} />
          <StatsCounter end={56} suffix={t('stats_unit_wan')} label={t('stats_users')} />
          <StatsCounter end={3200} suffix={t('stats_unit_ge')} label={t('stats_coupons')} />
          <StatsCounter end={860} suffix={t('stats_unit_ge')} label={t('stats_merchants')} />
        </div>
      </section>

      {/* ===== Advantages ===== */}
      <section className={s.section}>
        <h2 className={s.sectionTitle}>{t('adv_title')}</h2>
        <div className={s.sectionSubtitle} />
        <div className={s.advGrid}>
          {[
            { icon: '\u{1F3F7}', titleKey: 'adv_discount_title', descKey: 'adv_discount_desc' },
            { icon: '\u{1F4C8}', titleKey: 'adv_trade_title', descKey: 'adv_trade_desc' },
            { icon: '\u{1F6E1}', titleKey: 'adv_secure_title', descKey: 'adv_secure_desc' },
          ].map((item, i) => (
            <AnimateOnScroll key={item.titleKey} delay={i * 0.15}>
              <div className={s.advCard}>
                <div className={s.advIcon}>{item.icon}</div>
                <h3 className={s.advTitle}>{t(item.titleKey)}</h3>
                <p className={s.advDesc}>{t(item.descKey)}</p>
              </div>
            </AnimateOnScroll>
          ))}
        </div>
      </section>

      {/* ===== Product Showcase ===== */}
      <section className={s.sectionDark}>
        <h2 className={s.sectionTitle}>{t('prod_title')}</h2>
        <p className={s.sectionSubtitle}>{t('prod_subtitle')}</p>
        <div className={s.prodGrid}>
          {[
            { icon: '\u{1F6D2}', titleKey: 'prod_buy', descKey: 'prod_buy_desc' },
            { icon: '\u{1F4B1}', titleKey: 'prod_trade', descKey: 'prod_trade_desc' },
            { icon: '\u{1F4F1}', titleKey: 'prod_use', descKey: 'prod_use_desc' },
            { icon: '\u{1F4CA}', titleKey: 'prod_earn', descKey: 'prod_earn_desc' },
          ].map((item, i) => (
            <AnimateOnScroll key={item.titleKey} delay={i * 0.1}>
              <div className={s.prodCard}>
                <div className={s.prodIcon}>{item.icon}</div>
                <div>
                  <h3 className={s.prodTitle}>{t(item.titleKey)}</h3>
                  <p className={s.prodDesc}>{t(item.descKey)}</p>
                </div>
              </div>
            </AnimateOnScroll>
          ))}
        </div>
      </section>

      {/* ===== Trust ===== */}
      <section className={s.section}>
        <h2 className={s.sectionTitle}>{t('trust_title')}</h2>
        <div className={s.sectionSubtitle} />
        <div className={s.trustGrid}>
          {[
            { icon: '\u{26D3}', titleKey: 'trust_blockchain', descKey: 'trust_blockchain_desc' },
            { icon: '\u{2705}', titleKey: 'trust_compliance', descKey: 'trust_compliance_desc' },
            { icon: '\u{2B50}', titleKey: 'trust_rating', descKey: 'trust_rating_desc' },
            { icon: '\u{1F512}', titleKey: 'trust_insurance', descKey: 'trust_insurance_desc' },
          ].map((item, i) => (
            <AnimateOnScroll key={item.titleKey} delay={i * 0.1}>
              <div className={s.trustCard}>
                <div className={s.trustIcon}>{item.icon}</div>
                <h3 className={s.trustTitle}>{t(item.titleKey)}</h3>
                <p className={s.trustDesc}>{t(item.descKey)}</p>
              </div>
            </AnimateOnScroll>
          ))}
        </div>
      </section>

      {/* ===== CTA ===== */}
      <section className={s.cta}>
        <AnimateOnScroll>
          <h2 className={s.ctaTitle}>{t('cta_title')}</h2>
          <p className={s.ctaSubtitle}>{t('cta_subtitle')}</p>
          <div className={s.ctaBtns}>
            <button className={s.ctaBtn}>{t('cta_ios')}</button>
            <button className={s.ctaBtn}>{t('cta_android')}</button>
            <button className={s.ctaBtn}>{t('cta_miniapp')}</button>
          </div>
        </AnimateOnScroll>
      </section>
    </>
  );
}
