'use client';

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

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

  const consumerSolutions = [
    { icon: '\u{1F4B0}', titleKey: 'sol_c_save_title', descKey: 'sol_c_save_desc' },
    { icon: '\u{1F4C8}', titleKey: 'sol_c_invest_title', descKey: 'sol_c_invest_desc' },
    { icon: '\u{1F381}', titleKey: 'sol_c_gift_title', descKey: 'sol_c_gift_desc' },
  ];

  const merchantSolutions = [
    { icon: '\u{1F3AF}', titleKey: 'sol_m_acquire_title', descKey: 'sol_m_acquire_desc' },
    { icon: '\u{1F4B5}', titleKey: 'sol_m_finance_title', descKey: 'sol_m_finance_desc' },
    { icon: '\u{1F4CA}', titleKey: 'sol_m_loyalty_title', descKey: 'sol_m_loyalty_desc' },
  ];

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

      {/* Consumer */}
      <section className={s.block}>
        <AnimateOnScroll>
          <div className={s.blockHeader}>
            <h2 className={s.blockTitle}>{t('sol_consumer_title')}</h2>
            <p className={s.blockSubtitle}>{t('sol_consumer_subtitle')}</p>
          </div>
        </AnimateOnScroll>
        <div className={s.solGrid}>
          {consumerSolutions.map((sol, i) => (
            <AnimateOnScroll key={sol.titleKey} delay={i * 0.1}>
              <div className={s.solCard}>
                <div className={s.solIcon}>{sol.icon}</div>
                <h3 className={s.solTitle}>{t(sol.titleKey)}</h3>
                <p className={s.solDesc}>{t(sol.descKey)}</p>
              </div>
            </AnimateOnScroll>
          ))}
        </div>
      </section>

      {/* Merchant */}
      <section className={s.blockAlt}>
        <AnimateOnScroll>
          <div className={s.blockHeader}>
            <h2 className={s.blockTitle}>{t('sol_merchant_title')}</h2>
            <p className={s.blockSubtitle}>{t('sol_merchant_subtitle')}</p>
          </div>
        </AnimateOnScroll>
        <div className={s.solGrid}>
          {merchantSolutions.map((sol, i) => (
            <AnimateOnScroll key={sol.titleKey} delay={i * 0.1}>
              <div className={s.solCard}>
                <div className={s.solIcon}>{sol.icon}</div>
                <h3 className={s.solTitle}>{t(sol.titleKey)}</h3>
                <p className={s.solDesc}>{t(sol.descKey)}</p>
              </div>
            </AnimateOnScroll>
          ))}
        </div>
      </section>
    </>
  );
}
