function PortfolioSection() {
  const [images] = React.useState(() => {
    const categories = [
      { id: 'botanical', alt: 'Botanical watercolor artwork painted with Xochiatl palette' },
      { id: 'abstract', alt: 'Abstract watercolor wash showing the chromatic reveal effect' },
      { id: 'journal', alt: 'Travel journal sketch painted with the Xochiatl palette' },
      { id: 'minimalist', alt: 'Minimalist watercolor swatches with physical Xochiatl godets' }
    ];

    const shuffled = [...categories].sort(() => 0.5 - Math.random());
    const selected = shuffled.slice(0, 3);
    const isPatternA = Math.random() > 0.5; // True: 1x1, 3x4, 1x1 | False: 3x4, 1x1, 3x4
    const aspects = isPatternA ? ['1x1', '3x4', '1x1'] : ['3x4', '1x1', '3x4'];

    return selected.map((cat, i) => ({
      uid: cat.id,
      desktopSrc: `Images/Portfolio/${cat.id}-${aspects[i]}.jpeg`,
      mobileSrc: `Images/Portfolio/${cat.id}-1x1.jpeg`,
      desktopAspect: aspects[i] === '1x1' ? '1/1' : '3/4',
      alt: cat.alt
    }));
  });

  return (
    <section id="portfolio" style={{ background: 'rgba(47,143,168,0.08)', padding: 'clamp(3rem, 8vh, 6rem) clamp(1.5rem, 6vw, 6rem)' }}>
      <SectionReveal>
        <h2 style={{
          fontFamily: 'var(--font-identity)', fontWeight: 600, fontSize: 'clamp(36px, 4vw, 48px)',
          color: 'var(--ink-dark)', textAlign: 'center', marginBottom: 12,
        }}>The Results</h2>
        <p style={{
          fontFamily: 'var(--font-ui)', fontSize: 16, color: 'var(--ink-dark)',
          textAlign: 'center', maxWidth: 600, margin: '0 auto 48px', lineHeight: 1.7,
        }}>Real color on real paper. These pieces were painted exclusively using the Xochiatl palette, revealing the true nature of each botanical pigment.</p>
      </SectionReveal>

      <style>{`
        .portfolio-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 24px;
          max-width: 1000px;
          margin: 0 auto;
          align-items: center;
        }
        @keyframes portfolioShimmer {
          0% { background-position: -200% 0; }
          100% { background-position: 200% 0; }
        }
        .portfolio-loading {
          background: linear-gradient(90deg, rgba(34,34,51,0.04) 25%, rgba(34,34,51,0.08) 50%, rgba(34,34,51,0.04) 75%);
          background-size: 200% 100%;
          animation: portfolioShimmer 1.8s ease-in-out infinite;
        }
        .portfolio-frame {
          position: relative;
          overflow: hidden;
          border-radius: 4px;
          box-shadow: 0 8px 30px rgba(0,0,0,0.04);
          transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
        }
        .portfolio-frame:hover {
          transform: translateY(-4px);
          box-shadow: 0 16px 48px rgba(0,0,0,0.08);
        }
        @media (max-width: 768px) {
          .portfolio-grid {
            display: flex;
            grid-template-columns: none;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 16px;
            padding-bottom: 24px;
            padding-left: 24px;
            padding-right: 24px;
            scrollbar-width: none;
          }
          .portfolio-grid::-webkit-scrollbar {
            display: none;
          }
          .portfolio-item {
            flex: 0 0 85%;
            scroll-snap-align: center;
          }
          .portfolio-frame {
            aspect-ratio: 1 / 1 !important;
          }
        }
      `}</style>
      <div className="portfolio-grid">
        {images.map((img, i) => (
          <PortfolioImage key={img.uid} img={img} index={i} />
        ))}
      </div>
    </section>
  );
}

function PortfolioImage({ img, index }) {
  const [status, setStatus] = React.useState('loading'); // 'loading' | 'loaded' | 'error'

  return (
    <div className="portfolio-item">
      <SectionReveal delay={index * 100}>
        <div className={`portfolio-frame ${status === 'loading' ? 'portfolio-loading' : ''}`}
          style={{ width: '100%', aspectRatio: img.desktopAspect }}>

          {/* Fallback for failed loads - botanical-themed, not developer-facing */}
          {status === 'error' && (
            <div style={{
              position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', padding: 20, textAlign: 'center',
              background: 'rgba(34,34,51,0.03)',
            }}>
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--flower-pink)" strokeWidth="1.2" style={{ opacity: 0.5, marginBottom: 12 }}>
                <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z"/>
                <path d="M8 14c0 0 1.5 2 4 2s4-2 4-2"/>
                <circle cx="9" cy="10" r="0.5" fill="var(--flower-pink)"/>
                <circle cx="15" cy="10" r="0.5" fill="var(--flower-pink)"/>
              </svg>
              <span style={{ fontFamily: 'var(--font-identity)', fontStyle: 'italic', fontSize: 14, color: 'var(--ink-dark)', opacity: 0.4 }}>
                Artwork coming soon
              </span>
            </div>
          )}

          {/* The actual image using picture for mobile swapping */}
          <picture>
            <source media="(max-width: 768px)" srcSet={img.mobileSrc} />
            <img
              src={img.desktopSrc}
              alt={img.alt}
              loading="lazy"
              style={{
                width: '100%', height: '100%', objectFit: 'cover',
                position: 'relative', zIndex: 1,
                opacity: status === 'loaded' ? 1 : 0,
                transition: 'opacity 0.6s ease-in',
              }}
              onLoad={() => setStatus('loaded')}
              onError={() => setStatus('error')}
            />
          </picture>
        </div>
      </SectionReveal>
    </div>
  );
}

window.PortfolioSection = PortfolioSection;