// =========================================================================
//  capas-especiais / dia-do-amigo / banner.jsx
//  🤝 Dia do Amigo — verde + azul, informal e caloroso
//  Exporta: AmigoBanner, AmigoStrip
// =========================================================================

(() => {
  const { useMemo } = React;
  const COLORS = {
    ink: '#102e2a',
    accent: '#2e8b6f',          // verde
    accentDark: '#1f5e4c',
    accentSoft: '#dff0e7',
    blue: '#3a8db8',
    bg: 'linear-gradient(180deg, #e8f4ec 0%, #ecf3f1 50%, #e6f0f5 100%)',
  };
  const TARGET = '2026-07-20T00:00:00-03:00';
  const FEATURED = [
    { id:'pl-duo',   name:'Pulseira Duo',   sub:'Aço Inox Legítimo',  price:42.90, hue:160 },
    { id:'br-laco',  name:'Brinco Laço',    sub:'Banhado a ouro 18K', price:37.90, hue:140 },
    { id:'co-vinco', name:'Colar Vínculo',  sub:'Banhado a ouro 18K', price:54.90, hue:200 },
  ];

  // bolha de chat
  function ChatBubble({ size = 56, color = '#2e8b6f', text = '♥', x, y, rotate = 0, opacity = 0.85 }) {
    return (
      <div style={{
        position:'absolute', top:y, left:x,
        transform:`rotate(${rotate}deg)`, pointerEvents:'none', opacity,
      }}>
        <svg width={size} height={size} viewBox="0 0 80 80">
          <path d="M 12 12 H 68 Q 76 12 76 22 V 50 Q 76 60 68 60 H 32 L 18 70 V 60 H 12 Q 6 60 6 50 V 22 Q 6 12 12 12 Z"
            fill={color} opacity="0.92"/>
          <text x="40" y="44" fontSize="22" textAnchor="middle" fill="white" fontWeight="600">{text}</text>
        </svg>
      </div>
    );
  }

  // dois círculos sobrepostos (símbolo de união)
  function FriendCircle({ size = 60, c1 = '#2e8b6f', c2 = '#3a8db8', x, y, opacity = 0.5 }) {
    return (
      <svg width={size} height={size*0.7} viewBox="0 0 100 70"
        style={{ position:'absolute', top:y, left:x, pointerEvents:'none', opacity }}>
        <circle cx="35" cy="35" r="22" fill="none" stroke={c1} strokeWidth="2.5"/>
        <circle cx="65" cy="35" r="22" fill="none" stroke={c2} strokeWidth="2.5"/>
      </svg>
    );
  }

  function AmigoBanner() {
    const decorations = () => (
      <>
        <WatercolorSplash pos="tl" color={COLORS.accent}  size={420} rotation={-10} opacity={0.36}/>
        <WatercolorSplash pos="tr" color={COLORS.blue}    size={340} rotation={28}  opacity={0.36}/>
        <WatercolorSplash pos="bl" color="#8fc1a5"        size={360} rotation={40}  opacity={0.32}/>
        <WatercolorSplash pos="br" color={COLORS.blue}    size={300} rotation={-22} opacity={0.24}/>
        <ChatBubble x="6%"  y={40}  size={62} color={COLORS.accent} text="♥"/>
        <ChatBubble x="14%" y={130} size={44} color={COLORS.blue}   text="☺" rotate={6}/>
        <ChatBubble x="86%" y={50}  size={52} color={COLORS.accentDark} text="☆" rotate={-4}/>
        <ChatBubble x="80%" y={150} size={38} color={COLORS.blue}   text="♥" rotate={10} opacity={0.7}/>
        <FriendCircle x="42%" y={'88%'} size={80} c1={COLORS.accent} c2={COLORS.blue}/>
        <FriendCircle x="3%"  y={'76%'} size={60} c1={COLORS.blue} c2={COLORS.accent} opacity={0.35}/>
      </>
    );

    const hero = (
      <>
        <div style={{
          position:'absolute', inset:'8% 6%', borderRadius:'50%',
          background:'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0%, rgba(232,244,236,0) 70%)',
          filter:'blur(4px)', zIndex:0,
        }}/>
        <FloatingCard item={FEATURED[0]} big accent={COLORS.ink}
          style={{ position:'absolute', top:'4%', left:'18%', width:'64%',
                   zIndex:3, animation:'cap-float-y 7s ease-in-out infinite' }}/>
        <FloatingCard item={FEATURED[1]} accent={COLORS.ink}
          style={{ position:'absolute', top:'40%', left:'-2%', width:'44%',
                   zIndex:2, transform:'rotate(-6deg)',
                   animation:'cap-float-y 8s ease-in-out infinite', animationDelay:'0.4s' }}/>
        <FloatingCard item={FEATURED[2]} accent={COLORS.ink}
          style={{ position:'absolute', bottom:'2%', right:'-2%', width:'44%',
                   zIndex:2, transform:'rotate(5deg)',
                   animation:'cap-float-y 9s ease-in-out infinite', animationDelay:'0.8s' }}/>
        <ChatBubble x="-2%" y={20} size={90} color={COLORS.accent} text="♥"/>
      </>
    );

    return (
      <BannerShell
        bg={COLORS.bg}
        accent={COLORS.accent}
        accentSoft={COLORS.accentSoft}
        ink={COLORS.ink}
        chip={<ThemeChip icon="♥" color={COLORS.accent} soft={COLORS.accentSoft}>
          Dia do Amigo · 20 . 07
        </ThemeChip>}
        headline={<>Para celebrar<br/>quem </>}
        italicWord="está junto"
        italicColor={COLORS.accentDark}
        copy="Peças combináveis pra você e quem caminha do seu lado — pulseiras, colares e brincos que ficam ainda melhores quando vêm em dupla."
        targetIso={TARGET}
        ctaPrimary={{ label:'Ver combinados', href:'#amigo-grid', dark:COLORS.accentDark }}
        ctaSecondary={{ label:'Ajuda no WhatsApp', icon:'💬',
          href:'https://wa.me/5571999181376?text=Quero%20combinar%20pulseiras%20com%20um%20amigo' }}
        perks={[
          { icon:'♥', label:'Pra dividir com alguém' },
          { icon:'☺', label:'Embalagem em dupla' },
          { icon:'★', label:'Frete grátis acima de R$120' },
        ]}
        decorations={decorations}
        hero={hero}
      />
    );
  }

  function AmigoStrip() {
    return (
      <AnnouncementStrip
        gradient={`linear-gradient(90deg, ${COLORS.accent} 0%, ${COLORS.blue} 100%)`}
        icon={<span style={{fontSize:14}}>♥</span>}>
        Dia do Amigo · 20.07 · Peças combináveis pra você e quem caminha do seu lado
      </AnnouncementStrip>
    );
  }

  Object.assign(window, { AmigoBanner, AmigoStrip });
  (window.CAPAS = window.CAPAS || {}).amigo = {
    Banner: AmigoBanner, Strip: AmigoStrip,
    accent: '#a16207',
    gridLabel: 'Dia do Amigo',
    gridTitle: 'Para presentear quem importa',
  };
})();