/* ============================================
   SQUISHY SKIN — GALLERY PAGE
   ============================================ */

const GALLERY_ITEMS = [
  { label: 'Before/After: Legs', tall: true },
  { label: 'Treatment in Progress', tall: false },
  { label: 'Studio Interior', tall: false },
  { label: 'Before/After: Underarms', tall: true },
  { label: 'Client Result: Facial', tall: false },
  { label: 'Team Photo', tall: false },
  { label: 'Before/After: Face', tall: false },
  { label: 'Studio Detail', tall: true },
  { label: 'Client Result: Laser', tall: false },
  { label: 'Before/After: Brazilian', tall: true },
  { label: 'Treatment Setup', tall: false },
  { label: 'Happy Client', tall: false },
  { label: 'Before/After: Arms', tall: false },
  { label: 'Soprano ICE Platinum Device', tall: true },
  { label: 'Client Result: Peel', tall: false },
  { label: 'Studio Atmosphere', tall: false },
];

function GalleryPage() {
  return (
    <div>
      {/* Hero */}
      <div className="section bg-cream" style={{ paddingTop: 60, paddingBottom: 60, textAlign: 'center' }}>
        <BlobShape style={{ width: 300, height: 300, top: -60, right: -40 }} />
        <div className="container" style={{ position: 'relative', zIndex: 1 }}>
          <span className="label">GALLERY</span>
          <h1 style={{ fontSize: 56, marginBottom: 16 }}>See the Results</h1>
          <p style={{ fontSize: 18, color: '#666', maxWidth: 480, margin: '0 auto' }}>
            Before and after transformations, studio life, and happy skin.
          </p>
        </div>
      </div>

      {/* Gallery Grid */}
      <div className="section bg-white">
        <div className="container">
          <div className="gallery-masonry">
            {GALLERY_ITEMS.map((item, i) => (
              <AnimatedSection key={i} delay={i % 3 + 1}>
                <div className={`gallery-placeholder ${item.tall ? 'gallery-tall' : ''}`}
                  style={{ height: item.tall ? 340 : 240 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, position: 'relative', zIndex: 1 }}>
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#cbb8ae" strokeWidth="1.5">
                      <rect x="3" y="3" width="18" height="18" rx="3"/>
                      <circle cx="8.5" cy="8.5" r="1.5"/>
                      <path d="M21 15l-5-5L5 21"/>
                    </svg>
                    <span>{item.label}</span>
                  </div>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </div>

      {/* Instagram CTA */}
      <div className="section bg-pink" style={{ padding: '60px 0', textAlign: 'center' }}>
        <div className="container">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
            <h3 style={{ fontSize: 24, color: '#fff', fontWeight: 600 }}>Follow us for more results</h3>
            <a href="https://www.instagram.com/squishyskinwellness" target="_blank" rel="noopener noreferrer"
              className="btn btn-outline-white" style={{ padding: '12px 28px' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="#fff" style={{ marginRight: 6 }}>
                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
              </svg>
              @squishyskinwellness
            </a>
          </div>
        </div>
      </div>

      <style>{`
        .gallery-masonry {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
        }
        @media (max-width: 900px) {
          .gallery-masonry { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 500px) {
          .gallery-masonry { grid-template-columns: 1fr; }
          .gallery-tall { height: 240px !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { GalleryPage });