const portfolioItems = [
  {
    num: '01',
    title: 'Unbreakable Black November',
    client: 'Hotmart',
    year: '2025',
    tags: ['Campanha', 'Design', 'Promo'],
    img: './imgs/hotmart-black-november.jpg',
  },
  {
    num: '02',
    title: 'Campanhas de produto Hotmart',
    client: 'Hotmart',
    year: '2025',
    tags: ['Campanha', 'Filmes'],
    img: 'uploads/hotmart-produto-cover.jpg',
  },
  {
    num: '03',
    title: 'Conta Para Menores PicPay',
    client: 'PicPay',
    year: '2024',
    tags: ['Campanha', 'Game', 'Social'],
    img: './imgs/picpay-fortnite.png',
  },
  {
    num: '04',
    title: 'Brand Refresh PicPay',
    client: 'PicPay',
    year: '2023',
    tags: ['Branding', 'Key Visual'],
    img: './imgs/picpay-id-visual.jpg',
  },
  {
    num: '05',
    title: 'League of Legends + PicPay Card',
    client: 'PicPay · Mastercard',
    year: '2022',
    tags: ['Campanha', 'Promo', 'Design'],
    img: 'uploads/picpay_thumb_lol.png',
  },
  {
    num: '06',
    title: 'Conta que Rende PicPay',
    client: 'PicPay',
    year: '2022',
    tags: ['Campanha', 'Ads', 'Performance'],
    img: 'uploads/rendimento.png',
  },
  {
    num: '07',
    title: 'Dia dos Namorados Pizza Hut',
    client: 'Pizza Hut',
    year: '2017',
    tags: ['Campanha', 'Promo'],
    img: 'uploads/pizza_hut.png',
  },
  {
    num: '08',
    title: 'Curiosidade Salva',
    client: 'Disque Denúncia',
    year: '2015',
    tags: ['Campanha', 'PR Stunt', 'Social Media'],
    img: 'uploads/thumb_curiosidade.jpg',
  },
  {
    num: '09',
    title: 'Life Tracks',
    client: 'Personal Work',
    year: '2020',
    tags: ['Design', 'Posters', 'Interactive'],
    img: 'uploads/life_tracks.jpg',
  },
  {
    num: '10',
    title: 'Campanhas SumUp',
    client: 'SumUp',
    year: '2020 - 2022',
    tags: ['Campanha', 'Social Media'],
    img: 'uploads/sumup.jpg',
  },
  {
    num: '11',
    title: 'Te Joga Sprite',
    client: 'Sprite',
    year: '2016',
    tags: ['Campanha', 'Promo'],
    img: 'uploads/sprite-1dc9774a.jpg',
  },
  {
    num: '12',
    title: 'Pikes Peak XP Yamaha',
    client: 'Yamaha',
    year: '2018',
    tags: ['Experiência interativa', 'Campanha', 'UX Design'],
    img: 'uploads/yamaha.jpg',
  },
  {
    num: '13',
    title: 'Disturbing ASMR Teto',
    client: 'Teto',
    year: '2019',
    tags: ['Campanha', 'Social Media'],
    img: 'uploads/teto.jpg',
  }
];


function Portfolio() {
  const [hovered, setHovered] = React.useState(null);
  const { isMobile } = useViewport();

  return (
    <section id="portfolio" style={{ background: '#F6F3F0', padding: isMobile ? '0 20px 64px' : '0 56px 100px', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>

        {/* Section header */}
        <div data-reveal style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          borderTop: '1px solid #DDD9D4', paddingTop: 20, marginBottom: 0,
        }}>
          <span style={{ fontFamily: 'Helvetica,Arial,sans-serif', fontWeight: 400, fontSize: 13, color: '#9A9A97', letterSpacing: '.12em', textTransform: 'uppercase' }}>Portfólio</span>
          <span style={{ fontFamily: 'Helvetica,Arial,sans-serif', fontWeight: 400, fontSize: 13, color: '#9A9A97' }}>Trabalhos selecionados</span>
        </div>

        {/* Grid */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 16, marginTop: 20 }}>
          {portfolioItems.map(function(item, i) {
            const active = hovered === i;
            const dimmed = hovered !== null && hovered !== i;

            return (
              <a
                key={item.num}
                href={'project.html?id=' + item.num}
                data-cursor={isMobile ? undefined : 'Ver'}
                onMouseEnter={isMobile ? undefined : function() { setHovered(i); }}
                onMouseLeave={isMobile ? undefined : function() { setHovered(null); }}
                style={{
                  textDecoration: 'none',
                  display: 'block',
                  position: 'relative',
                  aspectRatio: '4/3',
                  borderRadius: 16,
                  overflow: 'hidden',
                  background: '#1D1D1B',
                  cursor: 'pointer',
                  opacity: dimmed ? 0.42 : 1,
                  transform: active ? 'scale(1.015) translateY(-5px)' : 'scale(1) translateY(0)',
                  boxShadow: active ? '0 32px 80px rgba(0,0,0,0.28)' : '0 2px 8px rgba(0,0,0,0.1)',
                  transition: 'transform 500ms cubic-bezier(.19,1,.22,1), box-shadow 500ms cubic-bezier(.19,1,.22,1), opacity 350ms ease',
                  animation: 'cardEntry 0.75s cubic-bezier(.19,1,.22,1) both',
                  animationDelay: (i * 0.07) + 's',
                }}>

                {/* Background image */}
                {item.img && (
                  <div style={{
                    position: 'absolute', inset: 0, zIndex: 0,
                    transform: active ? 'scale(1.05)' : 'scale(1)',
                    transition: 'transform 650ms cubic-bezier(.19,1,.22,1)',
                    overflow: 'hidden',
                  }}>
                    <img src={item.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  </div>
                )}

                {/* Dark overlay */}
                <div style={{
                  position: 'absolute', inset: 0, zIndex: 1,
                  background: active
                    ? 'linear-gradient(to bottom, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.82) 100%)'
                    : 'linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.72) 100%)',
                  transition: 'background 400ms ease',
                  pointerEvents: 'none',
                }}></div>

                {/* Content overlay */}
                <div style={{
                  position: 'absolute', inset: 0, zIndex: 2,
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  padding: isMobile ? 18 : 24,
                }}>
                  {/* Top: number */}
                  <span style={{
                    fontFamily: 'Helvetica,Arial,sans-serif', fontWeight: 400, fontSize: 11,
                    color: 'rgba(255,255,255,0.4)', letterSpacing: '.12em',
                  }}>{item.num}</span>

                  {/* Bottom: tags + title + client */}
                  <div>
                    {/* Tags */}
                    <div style={{ display: 'flex', gap: 6, marginBottom: 10, flexWrap: 'wrap' }}>
                      {item.tags.map(function(t) {
                        return (
                          <span key={t} style={{
                            fontFamily: 'Helvetica,Arial,sans-serif', fontWeight: 700, fontSize: 9,
                            letterSpacing: '.13em', textTransform: 'uppercase',
                            color: 'rgba(255,255,255,0.6)',
                            background: 'rgba(255,255,255,0.1)',
                            backdropFilter: 'blur(6px)',
                            padding: '3px 8px', borderRadius: 999,
                          }}>{t}</span>
                        );
                      })}
                    </div>

                    {/* Title */}
                    <h3 style={{
                      fontFamily: 'HelveticaCompressed,"Arial Narrow",Arial,sans-serif',
                      fontWeight: 700,
                      fontSize: isMobile ? 26 : 'clamp(24px,2.4vw,34px)',
                      textTransform: 'uppercase',
                      lineHeight: .92,
                      margin: '0 0 6px',
                      color: '#F6F3F0',
                      textShadow: '0 1px 12px rgba(0,0,0,0.4)',
                    }}>{item.title}</h3>

                    {/* Client · Year */}
                    <p style={{
                      fontFamily: 'Helvetica,Arial,sans-serif', fontWeight: 400, fontSize: 12,
                      color: 'rgba(255,255,255,0.5)', margin: 0, letterSpacing: '.04em',
                    }}>{item.client} · {item.year}</p>
                  </div>
                </div>
              </a>
            );
          })}
        </div>

        <div className="lsq-grain" aria-hidden="true" style={{ position: 'absolute', left: -207, top: 249 }}></div>
      </div>
    </section>
  );
}

Object.assign(window, { Portfolio });