// Certifications & Internships section

function CertificationsSection({ 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();

  const c1 = accent;
  const c2 = '#b48aff';
  const c3 = '#63b3ed';
  const c4 = '#ff6b9e';

  const certs = window.PORTFOLIO_CERTIFICATIONS || [];

  const orgAccents = {
    'EduSkills': c2,
    'AWS': c3,
  };

  return (
    <section id="certifications" style={{
      position: 'relative', padding: mob ? '80px 16px 60px' : '120px 60px 80px', zIndex: 2,
      maxWidth: 1400, margin: '0 auto'
    }}>
      <window.FadeInSection>
        <div style={{ marginBottom: 40 }}>
          <div style={{ color: c1, fontSize: 14, fontFamily: 'monospace', marginBottom: 12 }}>03</div>
          <h2 style={{
            fontFamily: font.display, fontSize: mob ? 36 : 48, fontWeight: 700,
            color: fg, margin: 0, display: 'flex', alignItems: 'center', letterSpacing: '-0.02em'
          }}>
            Certifications & Internships
          </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(320px, 1fr))',
          gap: mob ? 16 : 20,
        }}>
          {certs.map((cert, idx) => {
            const accentColor = orgAccents[cert.org] || c1;
            const hasFile = cert.file && cert.file !== '#';
            return (
              <window.FadeInSection key={cert.id} delay={idx * 60}>
                <CertCard
                  cert={cert}
                  accentColor={accentColor}
                  dark={dark}
                  fg={fg}
                  muted={muted}
                  cardBg={cardBg}
                  cardBorder={cardBorder}
                  cardShadow={cardShadow}
                  font={font}
                  hasFile={hasFile}
                />
              </window.FadeInSection>
            );
          })}
        </div>
      </window.FadeInSection>
    </section>
  );
}

function CertCard({ cert, accentColor, dark, fg, muted, cardBg, cardBorder, cardShadow, font, hasFile }) {
  const [hover, setHover] = React.useState(false);
  const hasVerify = cert.verify && cert.verify !== '#';

  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%',
        display: 'flex',
        flexDirection: 'column',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'all 0.3s ease',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, marginBottom: 16 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 12,
          background: `${accentColor}1A`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={accentColor} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
            <path d="M6 12v5c3 3 9 3 12 0v-5" />
          </svg>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: accentColor, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>
            {cert.org}
          </div>
          <div style={{ fontSize: 15, fontWeight: 700, color: fg, lineHeight: 1.3 }}>
            {cert.title}
          </div>
          {cert.date && (
            <div style={{ fontSize: 12.5, color: muted, marginTop: 6, fontWeight: 500 }}>
              {cert.date}
            </div>
          )}
        </div>
      </div>

      <div style={{ flex: 1 }} />

      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        {hasFile ? (
          <a href={cert.file} target="_blank" rel="noreferrer" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '10px 18px',
            fontSize: 12.5, fontWeight: 600,
            background: 'transparent',
            color: fg,
            border: `1px solid ${dark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'}`,
            borderRadius: 999,
            textDecoration: 'none',
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={e => {
            e.currentTarget.style.borderColor = accentColor;
            e.currentTarget.style.color = accentColor;
            e.currentTarget.style.background = `${accentColor}10`;
          }}
          onMouseLeave={e => {
            e.currentTarget.style.borderColor = dark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)';
            e.currentTarget.style.color = fg;
            e.currentTarget.style.background = 'transparent';
          }}>
            View Certificate
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
              <polyline points="14 2 14 8 20 8" />
              <line x1="16" y1="13" x2="8" y2="13" />
              <line x1="16" y1="17" x2="8" y2="17" />
              <polyline points="10 9 9 9 8 9" />
            </svg>
          </a>
        ) : (
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '10px 18px',
            fontSize: 12.5, fontWeight: 600,
            color: muted,
            border: `1px dashed ${dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.12)'}`,
            borderRadius: 999,
          }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: muted }} />
            Add file
          </span>
        )}

        {hasVerify && (
          <a href={cert.verify} target="_blank" rel="noreferrer" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '10px 18px',
            fontSize: 12.5, fontWeight: 600,
            background: 'transparent',
            color: muted,
            border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}`,
            borderRadius: 999,
            textDecoration: 'none',
            transition: 'all 0.2s ease',
          }}
          onMouseEnter={e => {
            e.currentTarget.style.borderColor = accentColor;
            e.currentTarget.style.color = accentColor;
            e.currentTarget.style.background = `${accentColor}08`;
          }}
          onMouseLeave={e => {
            e.currentTarget.style.borderColor = dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';
            e.currentTarget.style.color = muted;
            e.currentTarget.style.background = 'transparent';
          }}>
            Verify
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
              <polyline points="15 3 21 3 21 9" />
              <line x1="10" y1="14" x2="21" y2="3" />
            </svg>
          </a>
        )}
      </div>
    </div>
  );
}

window.CertificationsSection = CertificationsSection;