// Seção especial para o Dia das Mães (2º domingo de maio)

const MAES_FEATURED = [
  { id: 'c1',  name: 'Colar Lua Crescente', sub: 'Banhado a ouro 18k',    price: 459,  hue: 188 },
  { id: 'pl1', name: 'Pulseira Maré Alta',  sub: 'Aço Inox Legítimo',     price: 329,  hue: 175 },
  { id: 'b3',  name: 'Brinco Aurora',       sub: 'Banhado a ouro 18k',    price: 259,  hue: 170 },
  { id: 'ch1', name: 'Choker Onda',         sub: 'Edição limitada',        price: 379,  hue: 191 },
];

// 2º domingo de maio de 2027
const MAES_DATE = '2027-05-09T00:00:00-03:00';

function useMaesCountdown() {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const i = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(i);
  }, []);
  const target = new Date(MAES_DATE).getTime();
  const diff = Math.max(0, target - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  return { d, h, m, s, expired: diff === 0 };
}

function MaesCountPip({ n, label, rose }) {
  return (
    <div style={{ textAlign: 'center', minWidth: 52 }}>
      <div className="serif" style={{
        fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: 500, lineHeight: 1,
        color: rose,
        fontFeatureSettings: '"tnum" 1',
      }}>
        {String(n).padStart(2, '0')}
      </div>
      <div style={{
        fontSize: 10, fontFamily: 'var(--mono)',
        letterSpacing: '0.16em', textTransform: 'uppercase',
        color: 'var(--ink-3)', marginTop: 6,
      }}>{label}</div>
    </div>
  );
}

// Splashe aquarelado, igual ao de valentines mas com cor rosa
function MaesWatercolor({ pos = 'tl', color = '#c85b7a', size = 380, rotation = 0, opacity = 0.45 }) {
  const id = useMemo(() => 'mwc-' + Math.random().toString(36).slice(2), []);
  const posStyle = {
    tl: { top: -size * 0.35, left: -size * 0.25 },
    tr: { top: -size * 0.35, right: -size * 0.25 },
    bl: { bottom: -size * 0.35, left: -size * 0.25 },
    br: { bottom: -size * 0.35, right: -size * 0.25 },
  }[pos] || {};
  return (
    <svg width={size} height={size} viewBox="0 0 200 200"
      style={{ position: 'absolute', pointerEvents: 'none', transform: `rotate(${rotation}deg)`, opacity, ...posStyle }}>
      <defs>
        <filter id={`${id}-rough`} x="-20%" y="-20%" width="140%" height="140%">
          <feTurbulence type="fractalNoise" baseFrequency="0.022" numOctaves="3" seed="11"/>
          <feDisplacementMap in="SourceGraphic" scale="22"/>
        </filter>
        <radialGradient id={`${id}-g1`} cx="0.45" cy="0.5" r="0.55">
          <stop offset="0%"   stopColor={color} stopOpacity="0.0"/>
          <stop offset="55%"  stopColor={color} stopOpacity="0.35"/>
          <stop offset="100%" stopColor={color} stopOpacity="0.75"/>
        </radialGradient>
        <radialGradient id={`${id}-g2`} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%"   stopColor={color} stopOpacity="0.10"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </radialGradient>
      </defs>
      <g filter={`url(#${id}-rough)`}>
        <ellipse cx="100" cy="100" rx="78" ry="60" fill={`url(#${id}-g1)`}/>
        <ellipse cx="120" cy="80"  rx="48" ry="34" fill={color} opacity="0.18"/>
        <ellipse cx="80"  cy="120" rx="40" ry="28" fill={color} opacity="0.14"/>
      </g>
      <g fill={color} opacity="0.35">
        {[[30,40],[170,55],[20,150],[180,140],[160,170],[40,170],[160,30]].map(([x,y],i)=>(
          <circle key={i} cx={x} cy={y} r={1 + (i%3)*0.6}/>
        ))}
      </g>
      <ellipse cx="100" cy="100" rx="60" ry="46" fill={`url(#${id}-g2)`}/>
    </svg>
  );
}

// Rosa esboçada à mão
function DrawnRose({ size = 44, color = '#c85b7a', style = {} }) {
  const id = useMemo(() => 'dr-' + Math.random().toString(36).slice(2), []);
  return (
    <svg width={size} height={size} viewBox="0 0 100 100"
      style={{ position: 'absolute', pointerEvents: 'none', ...style }}>
      <defs>
        <filter id={`${id}-shake`} x="-10%" y="-10%" width="120%" height="120%">
          <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" seed="5"/>
          <feDisplacementMap in="SourceGraphic" scale="1.8"/>
        </filter>
      </defs>
      <g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" filter={`url(#${id}-shake)`}>
        {/* pétalas externas */}
        <ellipse cx="50" cy="38" rx="9" ry="15" strokeWidth="1.5" opacity="0.7"/>
        <ellipse cx="50" cy="38" rx="9" ry="15" strokeWidth="1.5" opacity="0.7"
          transform="rotate(45 50 50)"/>
        <ellipse cx="50" cy="38" rx="9" ry="15" strokeWidth="1.5" opacity="0.7"
          transform="rotate(90 50 50)"/>
        <ellipse cx="50" cy="38" rx="9" ry="15" strokeWidth="1.5" opacity="0.7"
          transform="rotate(135 50 50)"/>
        <ellipse cx="50" cy="38" rx="9" ry="15" strokeWidth="1.5" opacity="0.7"
          transform="rotate(180 50 50)"/>
        <ellipse cx="50" cy="38" rx="9" ry="15" strokeWidth="1.5" opacity="0.7"
          transform="rotate(225 50 50)"/>
        <ellipse cx="50" cy="38" rx="9" ry="15" strokeWidth="1.5" opacity="0.7"
          transform="rotate(270 50 50)"/>
        <ellipse cx="50" cy="38" rx="9" ry="15" strokeWidth="1.5" opacity="0.7"
          transform="rotate(315 50 50)"/>
        {/* centro */}
        <circle cx="50" cy="50" r="9" strokeWidth="2" fill={color} fillOpacity="0.25"/>
        {/* espiral interna */}
        <path d="M50 50 C 52 47, 55 46, 55 50 S 52 55, 50 54 S 46 52, 47 50 S 50 46, 52 47"
          strokeWidth="1.2" opacity="0.8"/>
        {/* caule */}
        <path d="M50 68 C 48 74, 46 80, 44 88" strokeWidth="1.5" opacity="0.6"/>
        {/* folhinha */}
        <path d="M47 76 C 38 72, 36 78, 44 80" strokeWidth="1.2" opacity="0.6"/>
      </g>
    </svg>
  );
}

// Card flutuante (colagem direita)
function MaesFeaturedCard({ item, style, big = false, onAdd }) {
  const [hover, setHover] = useState(false);
  const img1 = item.image || (item.images && item.images[0] && item.images[0].url);
  const img2 = (item.images && item.images[1] && item.images[1].url) || img1;
  const href = item.slug ? `/produto?slug=${item.slug}` : '#';
  const rose = '#c85b7a';
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: 'white', borderRadius: 22, overflow: 'hidden',
        boxShadow: hover
          ? '0 30px 60px -16px rgba(11,46,54,0.32)'
          : '0 20px 40px -16px rgba(11,46,54,0.22)',
        transition: 'box-shadow .25s ease',
        ...style,
      }}
    >
      <a href={href} style={{ display: 'block', aspectRatio: '1/1', background: '#fdf2f8', position: 'relative', overflow: 'hidden' }}>
        {img1
          ? <>
              <img src={img1} alt={item.name} style={{ position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',transition:'opacity .35s ease',opacity:hover?0:1 }}/>
              <img src={img2} alt={item.name} style={{ position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',transition:'opacity .35s ease',opacity:hover?1:0 }}/>
            </>
          : <JewelArt cat={item.cat || 'Colares'} hue={item.hue || 350} tone="soft"/>
        }
      </a>
      <div style={{ padding: big ? '16px 18px' : '12px 14px' }}>
        <div className="serif" style={{ fontSize: big ? 20 : 15, fontWeight: 500, color: 'var(--blue-900)' }}>
          {item.name}
        </div>
        <div style={{ fontSize: big ? 12 : 11, color: 'var(--ink-3)', fontFamily: 'var(--mono)', letterSpacing: '0.06em', marginTop: 2 }}>
          {item.sub}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: big ? 10 : 8 }}>
          <span className="serif" style={{ fontSize: big ? 22 : 17, fontWeight: 600, color: rose }}>
            R$ {item.price.toFixed(2).replace('.', ',')}
          </span>
          <button onClick={onAdd} aria-label="Adicionar" style={{
            width: big ? 36 : 30, height: big ? 36 : 30, borderRadius: '50%',
            background: `linear-gradient(135deg, ${rose}, #a84462)`,
            color: 'white', border: 'none',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
            boxShadow: `0 6px 14px -4px ${rose}80`,
          }}>
            <Icon name="plus" size={big ? 16 : 14}/>
          </button>
        </div>
      </div>
    </div>
  );
}

// Card da grade de 4
function MaesCard({ item, onAdd }) {
  const [hover, setHover] = useState(false);
  const img1 = item.image || (item.images && item.images[0] && item.images[0].url);
  const img2 = (item.images && item.images[1] && item.images[1].url) || img1;
  const href = item.slug ? `/produto?slug=${encodeURIComponent(item.slug)}` : '#';
  const rose = '#c85b7a';
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: 'white', borderRadius: 18, overflow: 'hidden',
        border: '1px solid var(--line)',
        transition: 'all .2s ease',
        transform: hover ? 'translateY(-4px)' : 'none',
        boxShadow: hover ? '0 24px 48px -16px rgba(11,46,54,0.18)' : '0 4px 12px -6px rgba(11,46,54,0.08)',
        position: 'relative',
      }}
    >
      <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 2 }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          background: 'white', color: rose,
          padding: '5px 10px 5px 7px', borderRadius: 999,
          fontSize: 10, fontFamily: 'var(--mono)',
          letterSpacing: '0.12em', textTransform: 'uppercase',
          fontWeight: 600,
          boxShadow: '0 6px 14px -6px rgba(11,46,54,0.18)',
        }}>
          👩 Mães
        </span>
      </div>
      <a href={href} style={{ display: 'block', aspectRatio: '1/1', background: '#fdf2f8', position: 'relative', overflow: 'hidden' }}>
        {img1
          ? <>
              <img src={img1} alt={item.name} style={{ position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',transition:'opacity .35s ease,transform .5s ease',transform:hover?'scale(1.04)':'scale(1)',opacity:hover&&img2?0:1 }}/>
              {img2 && <img src={img2} alt={item.name} style={{ position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',transition:'opacity .35s ease',opacity:hover?1:0 }}/>}
            </>
          : <JewelArt cat={item.cat || 'Colares'} hue={item.hue || 350} tone="soft"/>
        }
      </a>
      <div style={{ padding: '16px 18px 18px' }}>
        <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          {item.cat || item.sub || ''}
        </div>
        <div className="serif" style={{ fontSize: 19, fontWeight: 500, marginTop: 4 }}>{item.name}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
          <span style={{ fontSize: 17, fontWeight: 600, color: rose }}>{brl(item.price)}</span>
          {item.old && <span style={{ fontSize: 13, color: 'var(--ink-3)', textDecoration: 'line-through' }}>{brl(item.old)}</span>}
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <button
            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onAdd(); }}
            className="btn btn-ghost"
            style={{ flex: 1, height: 42, fontSize: 13, color: rose, borderColor: rose + '44' }}
          >
            <Icon name="bag" size={14}/> Sacola
          </button>
          <button
            onClick={(e) => { e.preventDefault(); e.stopPropagation(); location.href = href; }}
            className="btn"
            style={{ flex: 1, height: 42, fontSize: 13, background: `linear-gradient(135deg, ${rose}, #a84462)`, color: 'white', border: 'none' }}
          >
            Ver peça
          </button>
        </div>
      </div>
    </div>
  );
}

// ====== BANNER PRINCIPAL ======
function MaesBanner() {
  const { d, h, m, s } = useMaesCountdown();
  const cart = useCart();
  const [items, setItems] = useState(MAES_FEATURED);

  useEffect(() => {
    fetch('/api/products?special=maes&_=' + Date.now(), { cache: 'no-store' })
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (data && data.products && data.products.length > 0) {
          const mapped = data.products.slice(0, 4).map(p => ({
            id: p.id || p.slug,
            slug: p.slug,
            name: p.name,
            cat: p.cat,
            sub: p.short || p.cat || '',
            price: p.price,
            old: p.old,
            hue: p.hue || 350,
            image: p.image,
            images: p.images,
          }));
          setItems(mapped);
        }
      })
      .catch(() => {});
  }, []);

  const rose = '#c85b7a';
  const roseBlush = '#fde8ef';
  const gold = '#c4972a';

  return (
    <section id="maes" style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(180deg, #fdf2f8 0%, #fef6f0 50%, #fdfcfd 100%)',
      padding: '64px 0 72px',
      borderBottom: '1px solid var(--line)',
    }}>
      {/* manchas aquareladas */}
      <MaesWatercolor pos="tl" color="#c85b7a" size={420} rotation={-15} opacity={0.45}/>
      <MaesWatercolor pos="tr" color="#d4597a" size={340} rotation={30} opacity={0.38}/>
      <MaesWatercolor pos="bl" color="#e0897a" size={360} rotation={48} opacity={0.35}/>
      <MaesWatercolor pos="br" color="#9b4a6e" size={300} rotation={-20} opacity={0.3}/>

      {/* rosas flutuantes */}
      <DrawnRose size={52} color="#c85b7a" style={{ top: 44, right: '13%', transform: 'rotate(-14deg)' }}/>
      <DrawnRose size={36} color="#d4597a" style={{ top: 120, right: '7%', transform: 'rotate(10deg)' }}/>
      <DrawnRose size={28} color="#e0897a" style={{ top: 200, right: '19%', transform: 'rotate(-20deg)' }}/>
      <DrawnRose size={46} color={rose}    style={{ bottom: 60, left: '9%', transform: 'rotate(12deg)', opacity: 0.8 }}/>
      <DrawnRose size={28} color={rose}    style={{ bottom: 28, left: '17%', transform: 'rotate(-8deg)', opacity: 0.7 }}/>
      <DrawnRose size={22} color="#c85b7a" style={{ top: 60, left: '5%', transform: 'rotate(22deg)' }}/>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        {/* grid 2 colunas: copy | produtos flutuantes */}
        <div className="two-up" style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'center' }}>

          {/* ESQUERDA — copy */}
          <div className="reveal">
            {/* badge */}
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: 'white', border: `1px solid ${roseBlush}`,
              padding: '8px 14px 8px 10px', borderRadius: 999,
              boxShadow: `0 6px 20px -10px ${rose}55`,
              marginBottom: 22,
            }}>
              <span style={{
                width: 26, height: 26, borderRadius: '50%',
                background: roseBlush, color: rose,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14,
              }}>👩</span>
              <span style={{
                fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: rose, fontWeight: 600,
              }}>Dia das Mães · 2º domingo de maio</span>
            </div>

            {/* título */}
            <h2 className="serif" style={{
              fontSize: 'clamp(42px, 5vw, 74px)', lineHeight: 1.0,
              margin: 0, fontWeight: 400, letterSpacing: '-0.02em',
              color: 'var(--blue-900)',
            }}>
              Para a mulher<br/>
              mais importante<br/>
              da sua <em style={{
                fontStyle: 'italic', color: rose,
                position: 'relative', display: 'inline-block',
              }}>
                vida
                <svg width="100" height="14" viewBox="0 0 100 14" style={{
                  position: 'absolute', left: -2, bottom: -4, width: '106%', height: 14,
                }}>
                  <path d="M2 9 C 16 3, 34 12, 52 6 S 84 10, 98 5" fill="none" stroke={rose} strokeWidth="2" strokeLinecap="round" opacity="0.65"/>
                </svg>
              </em>.
            </h2>

            <p style={{
              fontSize: 17, lineHeight: 1.6, color: 'var(--ink-2)',
              margin: '24px 0 0', maxWidth: 480,
            }}>
              Joias feitas à mão em Salvador. Embalagem de presente <em>cortesia</em> em todo pedido — ela merece o melhor.
            </p>

            {/* contagem regressiva */}
            <div style={{
              marginTop: 32, padding: '18px 22px',
              background: 'rgba(255,255,255,0.72)',
              backdropFilter: 'blur(8px)',
              border: '1px solid rgba(255,255,255,0.9)',
              borderRadius: 18,
              boxShadow: '0 12px 32px -16px rgba(200,91,122,0.2)',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <div style={{
                fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: 'var(--ink-3)',
                writingMode: 'vertical-rl', transform: 'rotate(180deg)',
                paddingRight: 8, borderRight: '1px solid var(--line)', marginRight: 6,
              }}>
                Faltam
              </div>
              <MaesCountPip n={d} label="Dias" rose={rose}/>
              <span style={{ color: 'var(--ink-3)', fontSize: 22, fontWeight: 300 }}>:</span>
              <MaesCountPip n={h} label="Horas" rose={rose}/>
              <span style={{ color: 'var(--ink-3)', fontSize: 22, fontWeight: 300 }}>:</span>
              <MaesCountPip n={m} label="Min" rose={rose}/>
              <span style={{ color: 'var(--ink-3)', fontSize: 22, fontWeight: 300 }}>:</span>
              <MaesCountPip n={s} label="Seg" rose={rose}/>
            </div>

            {/* CTAs */}
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 28 }}>
              <a href="#maes-grid" className="btn" style={{
                height: 54, padding: '0 28px', fontSize: 15,
                background: `linear-gradient(135deg, ${rose}, #a84462)`,
                color: 'white',
                boxShadow: `0 14px 28px -8px ${rose}80`,
              }}>
                Ver presentes <Icon name="arrow" size={16}/>
              </a>
              <a href="https://wa.me/5571999181376?text=Quero%20ajuda%20com%20um%20presente%20de%20Dia%20das%20M%C3%A3es"
                 target="_blank" rel="noreferrer" className="btn btn-ghost"
                 style={{ height: 54, padding: '0 22px', fontSize: 14 }}>
                <Icon name="whatsapp" size={16}/> Ajuda no WhatsApp
              </a>
            </div>

            {/* perks */}
            <div style={{
              display: 'flex', flexWrap: 'wrap', gap: 18,
              marginTop: 28, paddingTop: 24,
              borderTop: '1px dashed var(--line)',
              fontSize: 12, fontFamily: 'var(--mono)',
              textTransform: 'uppercase', letterSpacing: '0.1em',
              color: 'var(--ink-2)',
            }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Icon name="sparkle" size={14}/> Embalagem presente grátis
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Icon name="truck" size={14}/> Entrega para todo Brasil
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <Icon name="heart" size={14}/> Parcele em 6x
              </span>
            </div>
          </div>

          {/* DIREITA — colagem de produtos flutuantes */}
          <div style={{ position: 'relative', minHeight: 520 }}>
            {/* halo atrás */}
            <div style={{
              position: 'absolute', inset: '8% 6%', borderRadius: '50%',
              background: 'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(253,226,239,0) 70%)',
              filter: 'blur(4px)', zIndex: 0,
            }}/>
            {/* card central */}
            {items[1] && <MaesFeaturedCard
              item={items[1]}
              style={{
                position: 'absolute', top: '6%', left: '18%', width: '64%',
                zIndex: 3, animation: 'float-y 7s ease-in-out infinite',
              }}
              big
              onAdd={() => cart && cart.add({ ...items[1], cat: items[1].cat || 'Colares' })}
            />}
            {/* card esquerda */}
            {items[0] && <MaesFeaturedCard
              item={items[0]}
              style={{
                position: 'absolute', top: '38%', left: '-2%', width: '44%',
                zIndex: 2, transform: 'rotate(-6deg)',
                animation: 'float-y 8s ease-in-out infinite', animationDelay: '0.4s',
              }}
              onAdd={() => cart && cart.add({ ...items[0], cat: items[0].cat || 'Colares' })}
            />}
            {/* card direita */}
            {items[2] && <MaesFeaturedCard
              item={items[2]}
              style={{
                position: 'absolute', bottom: '4%', right: '-2%', width: '44%',
                zIndex: 2, transform: 'rotate(5deg)',
                animation: 'float-y 9s ease-in-out infinite', animationDelay: '0.8s',
              }}
              onAdd={() => cart && cart.add({ ...items[2], cat: items[2].cat || 'Colares' })}
            />}
            {/* lua central */}
            <div style={{
              position: 'absolute', top: '0', right: '4%',
              width: 52, height: 52, borderRadius: '50%',
              background: `radial-gradient(circle at 35% 30%, #ffffff, ${roseBlush} 70%, ${rose}66 100%)`,
              boxShadow: `0 8px 24px -10px ${rose}44`,
              zIndex: 4,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: rose,
              animation: 'spin-slow 40s linear infinite',
            }}>
              <Icon name="moon" size={20}/>
            </div>
          </div>
        </div>

        {/* ====== GRADE de 4 produtos ====== */}
        <div id="maes-grid" style={{ marginTop: 80, position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, marginBottom: 28 }}>
            <div>
              <div className="eyebrow" style={{ color: rose, marginBottom: 8 }}>Presentes especiais</div>
              <h3 className="serif" style={{ margin: 0, fontSize: 'clamp(28px, 3vw, 42px)', fontWeight: 400, letterSpacing: '-0.01em' }}>
                Joias que toda mãe merece
              </h3>
            </div>
            <a href="categoria.html?cat=maes" style={{
              fontSize: 13, color: rose,
              display: 'inline-flex', alignItems: 'center', gap: 6,
              borderBottom: `1px solid ${rose}44`, paddingBottom: 2,
            }}>
              Ver coleção completa <Icon name="arrow" size={14}/>
            </a>
          </div>

          <div className="four-up" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
            {items.map(item => (
              <MaesCard
                key={item.id} item={item}
                onAdd={() => cart && cart.add({ ...item, cat: item.cat || 'Colares' })}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ====== STRIP DO TOPO ======
function MaesStrip() {
  return (
    <div style={{
      background: 'linear-gradient(90deg, #c85b7a 0%, #a84462 50%, #2d5b8a 100%)',
      color: 'white', textAlign: 'center',
      fontSize: 12, letterSpacing: '0.08em', padding: '9px 12px',
      fontFamily: 'var(--mono)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      textTransform: 'uppercase',
    }}>
      <span>👩</span>
      Dia das Mães · Embalagem de presente grátis & entrega para todo Brasil
      <span>👩</span>
    </div>
  );
}

Object.assign(window, { MaesBanner, MaesStrip });