// Icons + the Socializare S-mark (drawn from primitives — two split circles)

const ArrowRight = ({ size = 14, stroke = 1.6 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14" /><path d="M13 5l7 7-7 7" />
  </svg>;


const ArrowDown = ({ size = 14 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 5v14" /><path d="M5 13l7 7 7-7" />
  </svg>;


const Plus = ({ size = 18 }) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
    <path d="M12 5v14M5 12h14" />
  </svg>;


// The S-mark, redrawn with SVG so it scales crisp.
// Two semicircle wedges that interlock — top indigo facing right, bottom pink facing left.
const SMark = ({ size = 64, indigo = 'var(--indigo)', pink = 'var(--pink)' }) =>
<svg width={size} height={size} viewBox="0 0 100 100" aria-label="Socializare">
    {/* top half: indigo half-disc opening at bottom-right */}
    <path d="M50 8
             a 34 34 0 1 1 0 68
             L 50 42
             Z"


  fill={indigo} />
    {/* bottom half: pink half-disc opening at top-left */}
    <path d="M50 92
             a 34 34 0 1 1 0 -68
             L 50 58
             Z"


  fill={pink} />
    {/* dot accents */}
    <circle cx="76" cy="34" r="4" fill={pink} />
    <circle cx="24" cy="66" r="4" fill={indigo} />
  </svg>;


// Decorative S-shape used as a background motif — uses logo png.
const SLogoImg = ({ size = 64, className = "" }) =>
<img src="assets/socializare-logo.png" alt="Socializare" width={size} height={size}
className={className}
style={{ display: 'block', objectFit: 'contain', width: `${size}px`, height: `${size}px` }} />;


window.Icons = { ArrowRight, ArrowDown, Plus, SMark, SLogoImg };