// Sections.jsx — Gallery (with lightbox + Messi), Size Table, Price

// ─── GALLERY ───────────────────────────────────────────────────────────
const GALLERY_ITEMS = [
{ src: R('frente_mock', 'assets/mockup-mindu-copa-frente.webp'), label: 'Frente', cap: 'Mockup oficial', bg: 'yellow' },
{ src: R('costas_mock', 'assets/mockup-mindu-copa-costas.webp'), label: 'Costas', cap: '10 ANOS · #10', bg: 'yellow' },
{ src: R('mindu03', 'assets/mindu-copa-03.webp'), label: 'Leveza e Mobilidade', desc: 'Design e materiais pensados para maximizar sua performance.' },
{ src: R('mindu04', 'assets/mindu-copa-04.webp'), label: 'Tecido Respirável',  desc: 'Tecnologia que contribui para a rápida evaporação do suor.' },
{ src: R('mindu05', 'assets/mindu-copa-05.webp'), label: 'Proteção UV',         desc: 'Tecnologia integrada que protege dos raios solares.' },
{ src: R('mindu06', 'assets/mindu-copa-06.webp'), label: 'Hexa',                desc: 'Já está com as 6 estrelas do título de 2026!' }];


function Gallery({ tweaks }) {
  const [lightboxIdx, setLightboxIdx] = React.useState(null);
  const isDark = tweaks.theme === 'dark';

  // Keyboard nav in lightbox
  React.useEffect(() => {
    if (lightboxIdx === null) return;
    function onKey(e) {
      if (e.key === 'Escape') setLightboxIdx(null);
      if (e.key === 'ArrowRight') setLightboxIdx((i) => (i + 1) % GALLERY_ITEMS.length);
      if (e.key === 'ArrowLeft') setLightboxIdx((i) => (i - 1 + GALLERY_ITEMS.length) % GALLERY_ITEMS.length);
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [lightboxIdx]);

  return (
    <section id="galeria" style={{ padding: 'clamp(60px, 8vw, 100px) 0' }}>
      <div className="container">
        <SectionHeader
          eyebrow="A camisa"
          title="Por todos os ângulos"
          isDark={isDark} />
        

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(420px, 100%), 1fr))',
          gap: 22,
          marginTop: 40
        }}>
          {GALLERY_ITEMS.map((item, idx) =>
          <GalleryTile
            key={idx}
            item={item}
            onClick={() => setLightboxIdx(idx)}
            isDark={isDark} />

          )}
        </div>
      </div>

      {lightboxIdx !== null &&
      <Lightbox
        item={GALLERY_ITEMS[lightboxIdx]}
        onClose={() => setLightboxIdx(null)}
        onPrev={() => setLightboxIdx((i) => (i - 1 + GALLERY_ITEMS.length) % GALLERY_ITEMS.length)}
        onNext={() => setLightboxIdx((i) => (i + 1) % GALLERY_ITEMS.length)} />

      }
    </section>);

}

function GalleryTile({ item, onClick, isDark }) {
  const [hover, setHover] = React.useState(false);
  const yellowBg = isDark ?
  'radial-gradient(120% 90% at 50% 25%, rgba(254,221,0,0.22) 0%, rgba(20,38,28,1) 75%)' :
  'radial-gradient(120% 90% at 50% 25%, rgba(254,221,0,0.55) 0%, rgba(255,248,198,1) 60%, rgba(255,255,244,1) 100%)';

  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      aria-label={`Ver ${item.label} em tamanho maior`}
      style={{
        position: 'relative',
        aspectRatio: '1',
        borderRadius: 20,
        overflow: 'hidden',
        cursor: 'pointer',
        padding: 0,
        border: '1px solid ' + (isDark ? 'rgba(255,255,244,0.08)' : 'rgba(50,50,49,0.08)'),
        background: item.bg === 'yellow' ?
        yellowBg :
        isDark ? '#142018' : '#f8f5d6',
        transform: hover ? 'translateY(-4px) scale(1.01)' : 'translateY(0) scale(1)',
        boxShadow: hover ?
        '0 24px 48px rgba(50,50,49,0.20), 0 8px 16px rgba(50,50,49,0.10)' :
        '0 8px 24px rgba(50,50,49,0.10), 0 2px 4px rgba(50,50,49,0.06)',
        transition: `transform 400ms ${MB.ease}, box-shadow 400ms ${MB.ease}`,
        display: 'block'
      }}>
      
      <img
        src={item.src}
        alt={item.label}
        style={{
          width: '100%', height: '100%',
          objectFit: item.bg === 'yellow' ? 'contain' : 'cover',
          padding: item.bg === 'yellow' ? '6%' : 0,
          transform: hover ? 'scale(1.06)' : 'scale(1)',
          transition: `transform 600ms ${MB.ease}`,
          display: 'block',
          filter: item.bg === 'yellow' ? 'drop-shadow(0 16px 24px rgba(50,50,49,0.22))' : 'none'
        }} />
      
      <div style={{
        position: 'absolute',
        inset: 0,
        background: 'linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%)',
        pointerEvents: 'none'
      }} />

      {/* AI-generated tag */}
      <div style={{
        position: 'absolute',
        top: 14, left: 14,
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '6px 10px',
        borderRadius: 999,
        background: 'rgba(13,27,20,0.55)',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        border: '1px solid rgba(255,255,255,0.18)',
        fontFamily: MB.display,
        fontWeight: 700, fontSize: 10,
        letterSpacing: '0.10em',
        textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.92)',
        pointerEvents: 'none'
      }}>
        <Icon.Sparkles size={11} />
        Imagem gerada por IA
      </div>
      <div style={{
        position: 'absolute',
        left: 16, right: 16, bottom: 14,
        textAlign: 'left',
        color: '#fff',
        fontFamily: MB.display
      }}>
        <div style={{
          fontSize: 11, fontWeight: 600,
          textTransform: 'uppercase', letterSpacing: '0.1em',
          opacity: 0.85
        }}>{item.cap || ''}</div>
        <div style={{ fontSize: 20, fontWeight: 800, marginTop: 2, letterSpacing: '-0.01em' }}>{item.label}</div>
        {item.desc && (
          <div style={{
            marginTop: 6,
            fontFamily: MB.body,
            fontSize: 14,
            fontWeight: 400,
            lineHeight: 1.45,
            color: 'rgba(255,255,255,0.88)',
            maxWidth: '90%',
          }}>{item.desc}</div>
        )}
      </div>
    </button>);

}

function Lightbox({ item, onClose, onPrev, onNext }) {
  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label={item.label}
      onClick={onClose}
      style={{
        position: 'fixed',
        inset: 0,
        zIndex: 9998,
        background: 'rgba(13,27,20,0.92)',
        backdropFilter: 'blur(12px)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
        animation: `fadeUp 300ms ${MB.ease} both`
      }}>
      
      <button
        onClick={(e) => {e.stopPropagation();onClose();}}
        aria-label="Fechar"
        style={{
          position: 'absolute', top: 20, right: 20,
          width: 44, height: 44, borderRadius: 12,
          background: 'rgba(255,255,255,0.10)',
          color: '#fff', border: '1px solid rgba(255,255,255,0.2)',
          cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}><Icon.X /></button>

      <button
        onClick={(e) => {e.stopPropagation();onPrev();}}
        aria-label="Anterior"
        style={{
          position: 'absolute', left: 20, top: '50%', transform: 'translateY(-50%)',
          width: 48, height: 48, borderRadius: 999,
          background: 'rgba(255,255,255,0.10)', color: '#fff',
          border: '1px solid rgba(255,255,255,0.2)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}><Icon.ChevronLeft /></button>

      <button
        onClick={(e) => {e.stopPropagation();onNext();}}
        aria-label="Próxima"
        style={{
          position: 'absolute', right: 20, top: '50%', transform: 'translateY(-50%)',
          width: 48, height: 48, borderRadius: 999,
          background: 'rgba(255,255,255,0.10)', color: '#fff',
          border: '1px solid rgba(255,255,255,0.2)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}><Icon.ChevronRight /></button>

      <div onClick={(e) => e.stopPropagation()} style={{
        maxWidth: 'min(900px, 95vw)',
        maxHeight: '90vh',
        background: '#fffff4',
        borderRadius: 20,
        overflow: 'hidden',
        boxShadow: '0 40px 80px rgba(0,0,0,0.40)'
      }}>
        <img src={item.src} alt={item.label} style={{
          width: '100%',
          maxHeight: '80vh',
          objectFit: 'contain',
          display: 'block',
          background: '#f8f5d6'
        }} />
        <div style={{ padding: '16px 24px', fontFamily: MB.display }}>
          <div style={{
            fontSize: 11, fontWeight: 600, textTransform: 'uppercase',
            letterSpacing: '0.12em', color: MB.bgDark
          }}>{item.cap}</div>
          <div style={{ fontSize: 22, fontWeight: 700, color: MB.bgDarker, marginTop: 2 }}>{item.label}</div>
          {item.desc && (
            <div style={{
              marginTop: 8,
              fontFamily: MB.body, fontSize: 15, lineHeight: 1.55,
              color: MB.bgDark, fontWeight: 400,
            }}>{item.desc}</div>
          )}
        </div>
      </div>
    </div>);

}

// ─── SECTION HEADER ────────────────────────────────────────────────────
function SectionHeader({ eyebrow, title, sub, align = 'left', isDark }) {
  return (
    <div style={{ textAlign: align, maxWidth: 800, marginInline: align === 'center' ? 'auto' : undefined }}>
      <div className="label" style={{ color: isDark ? 'rgba(255,255,244,0.65)' : MB.copper, marginBottom: 12 }}>{eyebrow}</div>
      <h2 style={{
        fontFamily: MB.display,
        fontSize: 'clamp(32px, 4.5vw, 52px)',
        fontWeight: 800,
        lineHeight: 1.0,
        letterSpacing: '-0.02em',
        color: isDark ? '#fffff4' : MB.bgDarker
      }}>{title}</h2>
      <div className="gradient-line" style={{
        marginTop: 16,
        marginInline: align === 'center' ? 'auto' : undefined
      }} />
      {sub && <p style={{
        marginTop: 18, fontSize: 17, lineHeight: 1.65,
        color: isDark ? 'rgba(255,255,244,0.75)' : MB.bgDark,
        maxWidth: 600,
        marginInline: align === 'center' ? 'auto' : undefined
      }}>{sub}</p>}
    </div>);

}

// ─── SIZE TABLE ────────────────────────────────────────────────────────
function SizeTable({ tweaks }) {
  const isDark = tweaks.theme === 'dark';
  return (
    <section id="medidas" style={{ padding: 'clamp(60px, 8vw, 100px) 0' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Tabela de medidas"
          title="Guia de tamanhos"
          sub="Camisa modelagem Dryfit Premium. As medidas têm tolerância de ±1,5 cm — em caso de dúvida, escolha o tamanho maior."
          isDark={isDark} />
        

        <div className="size-section-grid" style={{ marginTop: 40 }}>
          {/* LEFT — Table */}
          <div>
            {/* Desktop table */}
            <div className="size-table-wrap" style={{
              display: 'none',
              borderRadius: 20,
              overflow: 'hidden',
              border: '1px solid ' + (isDark ? 'rgba(254,221,0,0.20)' : 'rgba(50,50,49,0.10)'),
              boxShadow: 'var(--shadow-sm)'
            }}>
              <table className="size-table" style={{
                width: '100%',
                borderCollapse: 'collapse',
                tableLayout: 'fixed',
                fontFamily: MB.body,
                fontSize: 15
              }}>
                <colgroup>
                  <col style={{ width: '33.333%' }} />
                  <col style={{ width: '33.333%' }} />
                  <col style={{ width: '33.334%' }} />
                </colgroup>
                <thead>
                  <tr style={{
                    background: isDark ? 'rgba(254,221,0,0.10)' : 'rgba(0,151,57,0.08)'
                  }}>
                    <Th>Tamanho</Th>
                    <Th>Largura (cm)</Th>
                    <Th>Comprimento (cm)</Th>
                  </tr>
                </thead>
                <tbody>
                  {TABELA_MEDIDAS.map((row, i) =>
                  <tr key={row.tamanho} style={{
                    background: i % 2 === 0 ?
                    'transparent' :
                    isDark ? 'rgba(255,255,244,0.03)' : 'rgba(50,50,49,0.025)'
                  }}>
                      <Td bold><span style={{
                        display: 'inline-flex',
                        width: 36, height: 36,
                        borderRadius: 999,
                        background: isDark ? 'rgba(254,221,0,0.15)' : 'rgba(0,151,57,0.10)',
                        color: isDark ? 'var(--copa-yellow)' : 'var(--copa-green-deep)',
                        fontFamily: MB.display,
                        fontWeight: 800,
                        alignItems: 'center', justifyContent: 'center',
                        fontSize: 13
                      }}>{row.tamanho}</span></Td>
                      <Td>{row.largura.toString().replace('.', ',')}</Td>
                      <Td>{row.comprimento.toString().replace('.', ',')}</Td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>

            {/* Mobile cards */}
            <div className="size-cards" style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
              gap: 12
            }}>
              {TABELA_MEDIDAS.map((row) =>
              <div key={row.tamanho} style={{
                padding: 18,
                borderRadius: 16,
                background: isDark ? 'rgba(255,255,244,0.04)' : 'rgba(255,255,244,0.7)',
                border: '1px solid ' + (isDark ? 'rgba(254,221,0,0.15)' : 'rgba(50,50,49,0.08)'),
                boxShadow: 'var(--shadow-sm)'
              }}>
                  <div style={{
                  display: 'inline-flex',
                  width: 44, height: 44,
                  borderRadius: 999,
                  background: isDark ? 'rgba(254,221,0,0.15)' : 'rgba(0,151,57,0.10)',
                  color: isDark ? 'var(--copa-yellow)' : 'var(--copa-green-deep)',
                  fontFamily: MB.display, fontWeight: 800,
                  alignItems: 'center', justifyContent: 'center',
                  fontSize: 16,
                  marginBottom: 12
                }}>{row.tamanho}</div>
                  <div style={{
                  display: 'grid',
                  gridTemplateColumns: 'auto 1fr',
                  gap: '4px 12px',
                  fontFamily: MB.body, fontSize: 14
                }}>
                    <span className="text-muted">Largura</span>
                    <strong style={{ color: isDark ? '#fffff4' : MB.bgDarker }}>{row.largura.toString().replace('.', ',')} cm</strong>
                    <span className="text-muted">Comprimento</span>
                    <strong style={{ color: isDark ? '#fffff4' : MB.bgDarker }}>{row.comprimento.toString().replace('.', ',')} cm</strong>
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* RIGHT — Shirt previews */}
          <div className="size-shirts" style={{
            display: 'flex',
            gap: 14
          }}>
            <SizeShirtCard
              src={R('frente_cutout', 'assets/camisa-frente-cutout-v2.webp')}
              label="Frente"
              isDark={isDark} />
            
            <SizeShirtCard
              src={R('costas_cutout', 'assets/camisa-costas-cutout-v2.webp')}
              label="Costas"
              isDark={isDark} />
            
          </div>
        </div>
      </div>

      <style>{`
        .size-section-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 24px;
          align-items: start;
        }
        @media (min-width: 768px) {
          .size-table-wrap { display: block !important; }
          .size-cards { display: none !important; }
        }
        @media (min-width: 960px) {
          .size-section-grid {
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
            gap: 40px;
          }
        }
      `}</style>
    </section>);

}

// Compact shirt preview card used next to the size table
function SizeShirtCard({ src, label, isDark }) {
  return (
    <div style={{
      flex: 1,
      display: 'flex',
      flexDirection: 'column',
      gap: 10,
      minWidth: 0
    }}>
      <div style={{
        position: 'relative',
        aspectRatio: '3/4',
        borderRadius: 20,
        overflow: 'hidden',
        background: isDark ?
        'radial-gradient(120% 80% at 50% 30%, rgba(254,221,0,0.10) 0%, rgba(13,27,20,1) 70%)' :
        'radial-gradient(120% 80% at 50% 30%, rgba(254,221,0,0.45) 0%, rgba(255,248,198,1) 65%, rgba(255,255,244,1) 100%)',
        border: '1px solid ' + (isDark ? 'rgba(254,221,0,0.20)' : 'rgba(50,50,49,0.08)'),
        boxShadow: 'var(--shadow-sm)',
        padding: 12
      }}>
        {/* Diagonal stripes */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, opacity: 0.06, pointerEvents: 'none',
          backgroundImage: 'repeating-linear-gradient(135deg, rgba(0,151,57,0.6) 0 2px, transparent 2px 22px)'
        }} />
        <img
          src={src}
          alt={`Camisa MinduBier Copa 2026 — ${label}`}
          style={{
            position: 'relative',
            width: '100%', height: '100%',
            objectFit: 'contain',
            filter: 'drop-shadow(0 16px 24px rgba(50,50,49,0.22))'
          }} />
        
      </div>
      <div style={{
        textAlign: 'center',
        fontFamily: MB.display,
        fontSize: 11,
        fontWeight: 700,
        letterSpacing: '0.12em',
        textTransform: 'uppercase',
        color: isDark ? 'rgba(255,255,244,0.65)' : MB.bgDark
      }}>{label}</div>
    </div>);

}

function indicacao(t) {
  return { P: 'Magro / juvenil', M: 'Padrão', G: 'Padrão+', GG: 'Folgado', XG: 'Extra folgado' }[t];
}

function Th({ children }) {
  return <th style={{
    textAlign: 'center',
    padding: '16px 20px',
    fontFamily: MB.display,
    fontWeight: 700,
    fontSize: 13,
    textTransform: 'uppercase',
    letterSpacing: '0.06em'
  }}>{children}</th>;
}
function Td({ children, bold, muted }) {
  return <td style={{
    padding: '14px 20px',
    fontFamily: MB.body,
    fontWeight: bold ? 700 : 500,
    fontVariantNumeric: 'tabular-nums',
    fontSize: 15,
    color: muted ? 'var(--bg-dark)' : 'inherit',
    textAlign: 'center'
  }}>{children}</td>;
}

// ─── PRICE ─────────────────────────────────────────────────────────────
function PriceSection({ tweaks, onCTAClick }) {
  const isDark = tweaks.theme === 'dark';
  const benefits = [
  { icon: <Icon.Trophy />, title: 'Edição limitada Copa 2026', sub: 'Tiragem encerrada após a estreia' },
  { icon: <Icon.Sparkles />, title: 'Design exclusivo MinduBier', sub: 'Selo cervejaria + MDB no peito' },
  { icon: <Icon.Shirt />, title: 'Tecido Dryfit Premium', sub: 'Toque seco, costura reforçada' },
  { icon: <Icon.Truck />, title: 'Retirada grátis ou entrega', sub: 'Graça/Salvador ou todo o Brasil' }];


  return (
    <section id="preco" style={{
      padding: 'clamp(60px, 8vw, 100px) 0',
      position: 'relative'
    }}>
      <div className="container">
        <div className="price-grid" style={{
          display: 'grid',
          gap: 32,
          alignItems: 'center'
        }}>
          {/* Price card */}
          <div className="glass-card" style={{
            padding: 'clamp(28px, 4vw, 48px)',
            position: 'relative',
            overflow: 'hidden',
            background: isDark ?
            'linear-gradient(180deg, rgba(20,38,28,0.85) 0%, rgba(13,27,20,0.95) 100%)' :
            'linear-gradient(180deg, rgba(255,255,244,0.80) 0%, rgba(255,255,244,0.95) 100%)'
          }}>
            <div aria-hidden="true" style={{
              position: 'absolute', top: -40, right: -40,
              width: 220, height: 220,
              borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(0,151,57,0.20) 0%, rgba(0,151,57,0) 70%)',
              filter: 'blur(20px)'
            }} />
            <div className="badge badge-copa" style={{ marginBottom: 16 }}>
              <Icon.Sparkles size={14} /> Pré-venda
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
              <div style={{
                fontFamily: MB.display,
                fontSize: 'clamp(64px, 10vw, 110px)',
                fontWeight: 900,
                lineHeight: 0.9,
                letterSpacing: '-0.04em',
                color: isDark ? '#fffff4' : MB.bgDarker
              }}>
                <span style={{ fontSize: '0.45em', verticalAlign: 'super', marginRight: 4, color: MB.copper, fontWeight: 800 }}>R$</span>99
              </div>
              <div style={{ fontFamily: MB.display, fontSize: 18, color: isDark ? 'rgba(255,255,244,0.65)' : MB.bgDark }}>
                <div style={{ fontWeight: 600 }}>por camisa</div>
                <div style={{ fontSize: 13, opacity: 0.8 }}>até 4× sem juros no cartão</div>
              </div>
            </div>

            <p style={{
              marginTop: 16,
              fontSize: 16,
              lineHeight: 1.6,
              color: isDark ? 'rgba(255,255,244,0.78)' : MB.bgDark,
              maxWidth: 460
            }}>Estamos guardando pra você. O valor de cada camisa é R$ 99 + frete, mas também tem a possibilidade de retirar no bairro da Graça. Entraremos em contato pelo WhatsApp para fechar o pagamento.

            </p>

            <button onClick={onCTAClick} className="btn btn-primary" style={{ marginTop: 28, fontSize: 16 }}>
              Garantir a minha agora <Icon.ArrowRight size={18} />
            </button>
          </div>

          {/* Benefits */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {benefits.map((b, i) =>
            <Benefit key={i} icon={b.icon} title={b.title} sub={b.sub} isDark={isDark} />
            )}
          </div>
        </div>
      </div>

      <style>{`
        @media (min-width: 900px) {
          .price-grid { grid-template-columns: 1.2fr 1fr; gap: 56px; }
        }
      `}</style>
    </section>);

}

function Benefit({ icon, title, sub, isDark }) {
  return (
    <div style={{
      display: 'flex',
      gap: 16,
      padding: 16,
      borderRadius: 14,
      background: isDark ? 'rgba(255,255,244,0.04)' : 'rgba(255,255,244,0.55)',
      border: '1px solid ' + (isDark ? 'rgba(255,255,244,0.08)' : 'rgba(50,50,49,0.06)'),
      transition: `transform 300ms ${MB.ease}, background 300ms ${MB.ease}`
    }}>
      <div style={{
        width: 44, height: 44,
        borderRadius: 12,
        background: isDark ? 'rgba(254,221,0,0.12)' : 'rgba(0,151,57,0.10)',
        color: isDark ? 'var(--copa-yellow)' : 'var(--copa-green-deep)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0
      }}>{icon}</div>
      <div>
        <div style={{
          fontFamily: MB.display, fontWeight: 700, fontSize: 15,
          color: isDark ? '#fffff4' : MB.bgDarker
        }}>{title}</div>
        <div style={{
          fontFamily: MB.body, fontSize: 13,
          color: isDark ? 'rgba(255,255,244,0.65)' : MB.bgDark,
          marginTop: 2, lineHeight: 1.5
        }}>{sub}</div>
      </div>
    </div>);

}

Object.assign(window, { Gallery, SizeTable, PriceSection, SectionHeader, Benefit, SizeShirtCard });