/* Skills — primary tech, soft skills, tools & platforms (flat, editorial style) */

const PRIMARY = [
  { name: 'TypeScript' },
  { name: 'React' },
  { name: 'Vue' },
  { name: 'AdonisJS' },
  { name: 'Langchain' },
  { name: 'PostgreSQL' },
  { name: 'GraphDB' },
  { name: 'HTML/CSS' },
  { name: 'Tailwind CSS' },
  { name: 'Python' },
  { name: 'Django' },
  { name: 'JavaScript' },
  { name: 'Rust', favorite: true },
  { name: 'C' },
  { name: 'C++' },
];

const SOFT_KEYS = [
  'fastLearner',
  'creativity',
  'problemSolving',
  'communication',
  'optimization',
  'adaptability',
  'teamwork',
];

const TOOLS = [
  'Vercel', 'Railway', 'Stripe', 'Git', 'GitHub',
  'Sentry', 'Resend', 'Slack', 'Notion', 'Discord', 'Teams',
];

function Skills() {
  const t = window.t;
  const title = t('skills.sectionTitle');

  return (
    <section className="section" id="skills">
      <div className="container">

        <div className="section-label reveal">
          <span className="num">03</span>
          <span>{t('skills.label')}</span>
          <span className="bar" />
          <span>{t('skills.tagline')}</span>
        </div>

        <h2 className="section-title reveal">
          {title.before}<em>{title.em}</em>{title.after}
        </h2>
        <p className="section-lede reveal delay-1">{t('skills.lede')}</p>

        <div className="skills-group reveal">
          <div className="skills-group-label">{t('skills.technicalGroup')}</div>
          <div className="skills-group-sub">{t('skills.technicalSub')}</div>
          <div className="skill-pills">
            {PRIMARY.map(s => (
              <span className={`skill-pill${s.favorite ? ' fav' : ''}`} key={s.name}>
                <span>{s.name}</span>
                {s.favorite && (
                  <span className="fav-heart" title={t('skills.favoriteHint')} aria-label={t('skills.favoriteHint')}>♥</span>
                )}
              </span>
            ))}
          </div>
        </div>

        <div className="skills-group reveal delay-1">
          <div className="skills-group-label">{t('skills.softGroup')}</div>
          <div className="skills-group-sub">{t('skills.softSub')}</div>
          <div className="skill-pills">
            {SOFT_KEYS.map(k => (
              <span className="skill-pill soft" key={k}>
                <span>{t(`skills.soft.${k}`)}</span>
              </span>
            ))}
          </div>
        </div>

        <div className="skills-group reveal delay-2">
          <div className="skills-group-label">{t('skills.toolsGroup')}</div>
          <div className="skills-group-sub">{t('skills.toolsSub')}</div>
          <div className="tool-grid">
            {TOOLS.map(name => (
              <div className="tool-chip" key={name}>
                <span>{name}</span>
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
}

window.Skills = Skills;