// Sexy Geek é marca única — taxonomia de projeto com uma entrada só (ver Badge.jsx).
const PROJECT_CFGS = {
  geek: { label: 'SEXY GEEK', color: '#33CFFF', bg: 'rgba(0,194,255,0.12)', border: 'rgba(0,194,255,0.3)' },
};

const TYPE_CORNER = {
  video:     { bg: 'rgba(8,118,201,0.85)',  color: '#fff' },
  galeria:   { bg: 'rgba(98,216,255,0.85)', color: '#04182b' },
  exclusivo: { bg: 'rgba(10,10,15,0.75)',   color: '#62D8FF', border: '1px solid rgba(8,118,201,0.5)' },
  projeto:   { bg: 'rgba(0,194,255,0.18)',  color: '#33CFFF', border: '1px solid rgba(0,194,255,0.4)' },
  editorial: { bg: 'rgba(10,10,15,0.6)',    color: 'rgba(255,255,255,0.5)' },
};

const TYPE_GLYPH = {
  video:     <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3" /></svg>,
  galeria:   <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /></svg>,
  exclusivo: <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>,
  projeto:   <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polygon points="12 2 2 7 12 12 22 7 12 2" /></svg>,
  editorial: <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 20h9" /><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z" /></svg>,
};

function ProjectTag({ project }) {
  const pc = PROJECT_CFGS[project];
  if (!pc) return null;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap', fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 9999, background: pc.bg, color: pc.color, border: `1px solid ${pc.border}`, fontFamily: "'Inter', sans-serif", lineHeight: 1 }}>
      {pc.label}
    </span>
  );
}

function TypeCorner({ type }) {
  if (!type || !TYPE_CORNER[type]) return null;
  const c = TYPE_CORNER[type];
  return (
    <div style={{ position: 'absolute', top: 10, right: 10, zIndex: 3, display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 8, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '4px 8px', borderRadius: 9999, background: c.bg, color: c.color, border: c.border || 'none', backdropFilter: 'blur(6px)', fontFamily: "'Inter', sans-serif", lineHeight: 1 }}>
      {TYPE_GLYPH[type]}{type}
    </div>
  );
}

/** Sexy Geek DS — content card — image-forward matéria card com taxonomia de projeto + tipo. */
function ContentCard({ title, meta, project, category, imgSrc, gradient, orientation = 'landscape', onClick }) {
  const [hov, setHov] = React.useState(false);
  const isPortrait = orientation === 'portrait';

  if (isPortrait) {
    return (
      <div onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
        className="gx-pixel-corners-sm"
        style={{ position: 'relative', overflow: 'hidden', aspectRatio: '3/4', cursor: 'pointer',
          border: `1px solid ${hov ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.06)'}`,
          boxShadow: hov ? '0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(8,118,201,0.28)' : '0 4px 20px rgba(0,0,0,0.45)',
          transform: hov ? 'translateY(-3px)' : 'none', transition: 'transform 0.25s, box-shadow 0.25s, border-color 0.25s', background: '#14141C' }}>
        {imgSrc ? <img src={imgSrc} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
                : <div style={{ position: 'absolute', inset: 0, background: gradient || 'linear-gradient(135deg,#062a40,#0f0f1e)' }} />}
        <TypeCorner type={category} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.1) 55%, transparent 100%)' }} />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '16px 16px 18px' }}>
          <div style={{ marginBottom: 8 }}><ProjectTag project={project} /></div>
          <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 14, color: '#EFEFEF', lineHeight: 1.25, textTransform: 'uppercase', letterSpacing: '0.02em' }}>{title}</div>
          {meta && <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.45)', marginTop: 6, fontFamily: "'Inter', sans-serif" }}>{meta}</div>}
        </div>
      </div>
    );
  }

  // Full-bleed — a foto ocupa o card inteiro (era uma tira de 160px fixos + painel de texto
  // separado embaixo; a foto ficava pequena e cortada independente do tamanho do card). Mesmo
  // tratamento da variante portrait: overlay em gradiente, texto sobreposto na base.
  return (
    <div onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      className="gx-pixel-corners-sm"
      style={{ position: 'relative', overflow: 'hidden', aspectRatio: '4/3', cursor: 'pointer',
        border: `1px solid ${hov ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.06)'}`,
        boxShadow: hov ? '0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(8,118,201,0.32)' : '0 4px 20px rgba(0,0,0,0.45)',
        transform: hov ? 'translateY(-3px)' : 'none', transition: 'transform 0.25s, box-shadow 0.25s, border-color 0.25s', background: '#14141C' }}>
      {imgSrc ? <img src={imgSrc} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
              : <div style={{ position: 'absolute', inset: 0, background: gradient || 'linear-gradient(135deg,#04182b,#0f0f1e)' }} />}
      <TypeCorner type={category} />
      {category === 'video' && (
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 2 }}>
          <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'rgba(8,118,201,0.25)', border: '1.5px solid rgba(98,216,255,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 20px rgba(8,118,201,0.35)', backdropFilter: 'blur(4px)' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="#62D8FF"><polygon points="6 3 20 12 6 21 6 3" /></svg>
          </div>
        </div>
      )}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(10,10,15,0.92) 0%, rgba(10,10,15,0.15) 55%, transparent 100%)' }} />
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '14px 14px 16px' }}>
        <div style={{ marginBottom: 8 }}><ProjectTag project={project} /></div>
        <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 14, color: '#EFEFEF', lineHeight: 1.25, textTransform: 'uppercase', letterSpacing: '0.02em' }}>{title}</div>
        {meta && <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', marginTop: 5, fontFamily: "'Inter', sans-serif" }}>{meta}</div>}
      </div>
    </div>
  );
}

window.SexyGeekDS = window.SexyGeekDS || {};
window.SexyGeekDS.ContentCard = ContentCard;