// Projetos / Cases — dark editorial showcase
function Projetos() {
  const projects = [
    {
      year: '2025',
      tags: ['UI/UX', 'Website'],
      title: 'Plataforma de Análise de Dados',
      client: 'DataLayer · SaaS',
      metric: '+340% engajamento',
      color: '#5B47F5',
    },
    {
      year: '2025',
      tags: ['Branding', 'Marketing'],
      title: 'Identidade Visual para Startup',
      client: 'NorteFin · Fintech',
      metric: 'Captou R$ 4M seed',
      color: '#FFB020',
    },
    {
      year: '2024',
      tags: ['Desenvolvimento', 'E-commerce'],
      title: 'Loja Virtual de Alta Conversão',
      client: 'Lina Atelier · Fashion',
      metric: '6.8% taxa conversão',
      color: '#00D27A',
    },
    {
      year: '2024',
      tags: ['App', 'SaaS'],
      title: 'Aplicativo de Produtividade',
      client: 'Foco · iOS/Android',
      metric: '12k downloads / 4.8★',
      color: '#FF6B9C',
    },
  ];

  return (
    <section className="section" id="projetos" style={{ background: 'var(--ink)', color: '#fff' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 64 }}>
          <div>
            <span className="eyebrow" style={{ color: '#9a9aaa' }}>
              <style>{`#projetos .eyebrow::before{background:#9a9aaa}`}</style>
              CASES · selecionados
            </span>
            <h2 className="h-section" style={{ color: '#fff' }}>
              Projetos que <span className="accent" style={{ color: 'var(--primary)' }}>impulsionam.</span>
            </h2>
          </div>
          <p style={{ maxWidth: 360, color: '#9a9aaa', margin: 0 }}>
            Trabalho real, com clientes reais, gerando resultados que dá pra medir.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }} className="proj-grid">
          {projects.map((p, i) => (
            <a key={i} href="#" className="proj-card" style={{
              background: '#16161d',
              border: '1px solid #2a2a35',
              borderRadius: 18,
              overflow: 'hidden',
              transition: 'transform .25s ease, border-color .25s ease',
              display: 'flex', flexDirection: 'column',
            }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.borderColor = p.color; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.borderColor = '#2a2a35'; }}
            >
              {/* Visual / cover */}
              <div style={{
                aspectRatio: '16/9', background: `linear-gradient(135deg, ${p.color}22 0%, #0e0e12 70%)`,
                position: 'relative', overflow: 'hidden',
                borderBottom: '1px solid #2a2a35',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
                  backgroundSize: '32px 32px',
                }}></div>
                <div style={{ position: 'absolute', inset: 24, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                  <span className="mono" style={{ fontSize: 12, color: '#9a9aaa' }}>// {p.client}</span>
                  <span className="display" style={{
                    fontSize: 38, fontWeight: 700, lineHeight: 1.1,
                    background: `linear-gradient(135deg, #fff 0%, ${p.color} 100%)`,
                    WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                    letterSpacing: '-0.02em',
                  }}>
                    {p.metric}
                  </span>
                </div>
              </div>

              <div style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{ display: 'flex', gap: 6 }}>
                    {p.tags.map(t => (
                      <span key={t} className="mono" style={{
                        fontSize: 11, padding: '4px 10px', borderRadius: 999,
                        background: 'rgba(91,71,245,0.15)', color: '#a89eff',
                      }}>{t}</span>
                    ))}
                  </div>
                  <span className="mono" style={{ fontSize: 12, color: '#666' }}>{p.year}</span>
                </div>
                <h3 className="display" style={{ fontSize: 22, fontWeight: 600, margin: 0, letterSpacing: '-0.01em' }}>
                  {p.title}
                </h3>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#9a9aaa', fontSize: 14, fontWeight: 500 }}>
                  Ver projeto <span style={{ color: p.color }}>→</span>
                </span>
              </div>
            </a>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 800px){ .proj-grid{ grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

window.Projetos = Projetos;