// Technical Skills section

function SkillsSection({ dark, accent, font }) {
  const fg = dark ? '#f0eef9' : '#0c0a14';
  const muted = dark ? 'rgba(240,238,249,0.65)' : 'rgba(20,18,30,0.65)';
  const cardBg = dark ? 'rgba(255,255,255,0.03)' : '#ffffff';
  const cardBorder = dark ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(0,0,0,0.05)';
  const cardShadow = dark ? 'none' : '0 10px 40px -10px rgba(0,0,0,0.04)';
  const mob = window.useIsMobile();

  // Theme colors
  const c1 = accent;
  const c2 = '#b48aff'; // Violet
  const c3 = '#63b3ed'; // Sky
  const c4 = '#ff6b9e'; // Rose
  
  const skillCategories = [
    {
      title: "Languages",
      icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c3} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>,
      skills: ["Java", "Python", "JavaScript", "TypeScript"]
    },
    {
      title: "Frontend",
      icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c4} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>,
      skills: ["React.js", "HTML5", "CSS3", "Tailwind CSS"]
    },
    {
      title: "Backend & APIs",
      icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c2} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>,
      skills: ["FastAPI", "REST APIs", "WebSockets", "JWT Authentication"]
    },
    {
      title: "Databases",
      icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c3} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>,
      skills: ["MongoDB", "SQLite", "MySQL"]
    },
    {
      title: "Cloud & DevOps",
      icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c1} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>,
      skills: ["Docker", "Linux", "Render", "Vercel"]
    },
    {
      title: "Core CS",
      icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c2} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>,
      skills: ["Data Structures & Algorithms", "OOP", "DBMS", "Operating Systems"]
    },
    {
      title: "AI/ML",
      icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={c4} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>,
      skills: ["OpenCV", "DeepFace", "TensorFlow", "Computer Vision", "Neural Networks", "Genetic Algorithms"]
    }
  ];

  return (
    <section id="skills" style={{
      position: 'relative', padding: mob ? '80px 16px 60px' : '120px 60px 80px', zIndex: 2,
      maxWidth: 1400, margin: '0 auto'
    }}>
      <div style={{ marginBottom: 40 }}>
        <div style={{ color: c1, fontSize: 14, fontFamily: 'monospace', marginBottom: 12 }}>02</div>
        <h2 style={{
          fontFamily: font.display, fontSize: mob ? 36 : 48, fontWeight: 700,
          color: fg, margin: 0, display: 'flex', alignItems: 'center', letterSpacing: '-0.02em'
        }}>
          Technical Skills
        </h2>
        <div style={{ width: 80, height: 2, background: `linear-gradient(90deg, ${c1}, ${c2}, transparent)`, marginTop: 16 }} />
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: mob ? '1fr' : 'repeat(auto-fit, minmax(340px, 1fr))',
        gap: mob ? 20 : 24,
      }}>
        {skillCategories.map((category, idx) => (
          <window.FadeInSection key={idx} delay={idx * 50}>
            <SkillCard
              category={category}
              dark={dark}
              fg={fg}
              cardBg={cardBg}
              cardBorder={cardBorder}
              cardShadow={cardShadow}
            />
          </window.FadeInSection>
        ))}
      </div>
    </section>
  );
}

function SkillCard({ category, dark, fg, cardBg, cardBorder, cardShadow }) {
  const [hover, setHover] = React.useState(false);

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: cardBg,
        border: cardBorder,
        boxShadow: hover ? '0 10px 40px -10px rgba(0,0,0,0.4)' : cardShadow,
        borderRadius: 16,
        padding: '24px',
        height: '100%',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'all 0.3s ease',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24 }}>
          {category.icon}
        </div>
        <div style={{ fontSize: 17, fontWeight: 700, color: fg }}>{category.title}</div>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
        {category.skills.map(skill => (
          <span key={skill} style={{
            padding: '6px 14px',
            background: dark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.03)',
            border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}`,
            borderRadius: 999,
            fontSize: 12.5,
            fontWeight: 500,
            color: dark ? 'rgba(240,238,249,0.85)' : 'rgba(20,18,30,0.85)',
          }}>
            {skill}
          </span>
        ))}
      </div>
    </div>
  );
}

window.SkillsSection = SkillsSection;