// ── ORNAMENTAL SVG DIVIDER ──────────────────────────────────────
const OrnamentDivider = ({ width = 320 }) => (
  <svg width={width} height="20" viewBox={`0 0 ${width} 20`} fill="none" style={{display:'block',margin:'0 auto'}} preserveAspectRatio="xMidYMid meet">
    <line x1="0" y1="10" x2={width/2 - 30} y2="10" stroke="#c9a84c" strokeWidth="0.75" strokeOpacity="0.6" vectorEffect="non-scaling-stroke"/>
    <path d={`M${width/2-22} 10 Q${width/2-14} 3 ${width/2} 10 Q${width/2+14} 17 ${width/2+22} 10`} stroke="#c9a84c" strokeWidth="0.75" fill="none" strokeOpacity="0.9" vectorEffect="non-scaling-stroke"/>
    <circle cx={width/2} cy="10" r="2.5" fill="#c9a84c" fillOpacity="0.9"/>
    <line x1={width/2 + 30} y1="10" x2={width} y2="10" stroke="#c9a84c" strokeWidth="0.75" strokeOpacity="0.6" vectorEffect="non-scaling-stroke"/>
  </svg>
);

// ── CORNER ORNAMENT ─────────────────────────────────────────────
const CornerOrnament = ({ size = 40 }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none" preserveAspectRatio="xMinYMin meet">
    <path d="M2 2 L2 18 M2 2 L18 2" stroke="#c9a84c" strokeWidth="1.5" strokeOpacity="0.7" strokeLinecap="square" vectorEffect="non-scaling-stroke"/>
    <circle cx="2" cy="2" r="2" fill="#c9a84c" fillOpacity="0.7"/>
  </svg>
);

// React hooks exposed globally for other scripts
const { useState, useEffect, useRef } = React;
Object.assign(window, { OrnamentDivider, CornerOrnament, useState, useEffect, useRef });
