'use client';

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

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

  const resources = [
    { icon: '\u{1F4E1}', titleKey: 'dev_api_title', descKey: 'dev_api_desc', link: '#', linkKey: 'dev_doc_link' },
    { icon: '\u{1F4E6}', titleKey: 'dev_sdk_title', descKey: 'dev_sdk_desc', link: '#', linkKey: 'dev_doc_link' },
    { icon: '\u{1F50D}', titleKey: 'dev_explorer_title', descKey: 'dev_explorer_desc', link: '#', linkKey: 'dev_explorer_link' },
    { icon: '\u{1F9EA}', titleKey: 'dev_sandbox_title', descKey: 'dev_sandbox_desc', link: '#', linkKey: 'dev_doc_link' },
  ];

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

      <div className={s.grid}>
        {resources.map((r, i) => (
          <AnimateOnScroll key={r.titleKey} delay={i * 0.1}>
            <div className={s.card}>
              <div className={s.cardIcon}>{r.icon}</div>
              <h3 className={s.cardTitle}>{t(r.titleKey)}</h3>
              <p className={s.cardDesc}>{t(r.descKey)}</p>
              <a href={r.link} className={s.cardLink}>{t(r.linkKey)} &rarr;</a>
            </div>
          </AnimateOnScroll>
        ))}
      </div>

      <section className={s.quickstart}>
        <AnimateOnScroll>
          <h2 className={s.qsTitle}>{t('dev_quickstart')}</h2>
          <div className={s.codeBlock}>
            <pre>{`// Install the Genex SDK\nnpm install @genex/sdk\n\n// Initialize the client\nimport { GenexClient } from '@genex/sdk';\n\nconst client = new GenexClient({\n  apiKey: 'your-api-key',\n  network: 'mainnet',\n});\n\n// Query available coupons\nconst coupons = await client.coupons.list({\n  category: 'dining',\n  maxPrice: 100,\n});\n\nconsole.log(coupons);`}</pre>
          </div>
        </AnimateOnScroll>
      </section>
    </>
  );
}
