'use client';

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useT } from '@/i18n';
import s from './Footer.module.css';

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

  const columns = [
    {
      title: t('footer_product'),
      links: [
        { label: t('footer_mobile_app'), href: '/download' },
        { label: t('footer_miniapp'), href: '/download' },
        { label: t('footer_web_trade'), href: '/download' },
        { label: t('footer_api'), href: '/developers' },
      ],
    },
    {
      title: t('footer_company'),
      links: [
        { label: t('footer_about'), href: '/about' },
        { label: t('footer_careers'), href: '/careers' },
        { label: t('footer_blog'), href: '/blog' },
        { label: t('footer_press'), href: '/press' },
      ],
    },
    {
      title: t('footer_support'),
      links: [
        { label: t('footer_help'), href: '/help' },
        { label: t('footer_contact'), href: '/contact' },
        { label: t('footer_community'), href: '/community' },
        { label: t('footer_status'), href: '/status' },
      ],
    },
    {
      title: t('footer_legal'),
      links: [
        { label: t('footer_terms'), href: '/terms' },
        { label: t('footer_privacy'), href: '/privacy' },
        { label: t('footer_cookie'), href: '/cookie-policy' },
        { label: t('footer_risk'), href: '/risk' },
      ],
    },
  ];

  return (
    <footer className={s.footer}>
      <div className={s.top}>
        <div className={s.brandCol}>
          <div className={s.logoRow}>
            <Image src="/logo.svg" alt="Genex" width={32} height={32} />
            <span className={s.brandName}>Genex</span>
          </div>
          <p className={s.slogan}>{t('footer_slogan')}</p>
        </div>

        {columns.map((col) => (
          <div key={col.title}>
            <div className={s.colTitle}>{col.title}</div>
            <div className={s.colLinks}>
              {col.links.map((link) => (
                <Link key={link.label} href={link.href} className={s.colLink}>
                  {link.label}
                </Link>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className={s.divider} />

      <div className={s.bottom}>
        <span>{t('footer_copyright')}</span>
        <span>{t('footer_icp')}</span>
      </div>
    </footer>
  );
}
