import { ExternalLink, Mail } from 'lucide-react';
import { useI18n } from '../hooks/useI18n';
import { siteData } from '../data/siteData';

export default function AboutPage() {
  const { t, bi, biArray } = useI18n();
  const { about, brand } = siteData;

  return (
    <div className="container fade-in">
      <div className="page-header">
        <h1 className="page-title">{t('about.title')}</h1>
        <p className="page-subtitle">{t('about.subtitle')}</p>
      </div>

      <div className="about-header">
        <div className="about-avatar">
          <img src="/avatar.jpg" alt={brand.author} className="about-avatar-img" />
        </div>
        <div>
          <div className="about-name">{brand.author}</div>
          <div className="about-bio">{bi(about.bio)}</div>
        </div>
      </div>

      <div className="section">
        <div className="section-header">
          <h2 className="section-title">{t('about.focus')}</h2>
        </div>
        <div className="focus-grid">
          {biArray(about.focus).map((item) => (
            <div key={item} className="focus-item">
              {item}
            </div>
          ))}
        </div>
      </div>

      <div className="section">
        <div className="section-header">
          <h2 className="section-title">{t('about.techStack')}</h2>
        </div>
        <div className="techstack-grid">
          {about.techStack.map((tech) => (
            <span key={tech} className="tech-tag">
              {tech}
            </span>
          ))}
        </div>
      </div>

      <div className="section">
        <div className="section-header">
          <h2 className="section-title">{t('about.opensource')}</h2>
        </div>
        <p className="about-bio">{t('cta.subtitle')}</p>
      </div>

      <div className="section">
        <div className="section-header">
          <h2 className="section-title">{t('contact.title')}</h2>
        </div>
        <div className="contact-grid">
          <a href={`mailto:${brand.email}`} className="contact-card">
            <h3>
              <Mail size={18} />
              {t('contact.email')}
            </h3>
            <p>{t('contact.email.desc')}</p>
            <span className="contact-card-link">{brand.email}</span>
          </a>
          <a href={about.github} target="_blank" rel="noopener noreferrer" className="contact-card">
            <h3>
              <ExternalLink size={18} />
              {t('about.github')}
            </h3>
            <p>{t('about.links')}</p>
            <span className="contact-card-link">GitHub</span>
          </a>
        </div>
      </div>
    </div>
  );
}
