// Skills.jsx — Delvecore Website UI Kit (responsive)
const SKILL_GROUPS = [
  { title: 'Web & Frontend', icon: 'code-window.svg', skills: ['HTML / CSS', 'JavaScript', 'Google Maps API', 'Vercel', 'GitHub'] },
  { title: 'Data', icon: 'chart.svg', skills: ['データ可視化', 'データ分析', 'ルート最適化', 'ダッシュボード設計'] },
  { title: 'Generative AI', icon: 'network.svg', skills: ['Claude / ChatGPT', 'プロンプト設計', 'AI業務自動化', 'ワークフロー構築'] },
];

function SkillTag({ label }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <span onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      style={{ fontSize: 12, letterSpacing: '0.06em', padding: '8px 16px', border: '1px solid #E0DFD8', background: hovered ? '#0C0C0A' : 'transparent', color: hovered ? '#F8F7F5' : '#0C0C0A', transition: 'background 0.2s, color 0.2s', cursor: 'default' }}>
      {label}
    </span>
  );
}

window.Skills = function Skills() {
  const mobile = useIsMobile();
  return (
    <section id="skills" style={{ padding: mobile ? '80px 24px' : '120px 48px' }}>
      <SectionHeader num="08" title="Skills" ja="できること" />
      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3,1fr)', gap: mobile ? 40 : 60, marginTop: 80 }}>
        {SKILL_GROUPS.map(g => (
          <div key={g.title}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20, paddingBottom: 12, borderBottom: '1px solid #E0DFD8' }}>
              <img src={`assets/icons/${g.icon}`} alt="" width="14" height="14" style={{ filter: 'brightness(0)', opacity: 0.3, flexShrink: 0 }} />
              <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 13, letterSpacing: '0.15em', textTransform: 'uppercase', color: '#888884', margin: 0 }}>{g.title}</h3>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {g.skills.map(s => <SkillTag key={s} label={s} />)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};