// ornament.jsx — Turkish/Seljuk-style geometric ornaments + photo placeholders.
// Loaded after React. Components exposed via window.* for cross-file scope.

// ── Logo / wordmark mark ───────────────────────────────────────────────────
function BrandMark({ size = 34, color = "#c9a55a" }) {
  return (
    <svg viewBox="0 0 60 60" width={size} height={size} fill="none"
         stroke={color} strokeWidth="1.2" aria-hidden="true">
      {/* outer 8-point star */}
      <path d="M30 4 L36 18 L52 24 L36 30 L30 44 L24 30 L8 24 L24 18 Z" />
      <path d="M30 16 L34 22 L40 24 L34 26 L30 32 L26 26 L20 24 L26 22 Z" />
      <circle cx="30" cy="24" r="2" fill={color} stroke="none" />
      {/* lower scroll/ribbon */}
      <path d="M14 50 Q30 56 46 50" />
      <path d="M22 53 L22 49 M30 54 L30 50 M38 53 L38 49" strokeWidth="0.8" />
    </svg>
  );
}

// ── The big ornamental medallion behind hero / about ──────────────────────
function Medallion({ className, color = "currentColor" }) {
  return (
    <svg viewBox="0 0 600 600" className={className} fill="none"
         stroke={color} strokeWidth="0.7" aria-hidden="true">
      <g transform="translate(300 300)">
        {[0,1,2,3,4,5,6,7].map(i => (
          <g key={i} transform={`rotate(${i * 45})`}>
            <path d="M0 -260 L60 -180 L0 -100 L-60 -180 Z" />
            <path d="M0 -200 L40 -160 L0 -120 L-40 -160 Z" />
          </g>
        ))}
        <circle r="260" />
        <circle r="220" />
        <circle r="180" />
        <circle r="100" />
        <circle r="60" />
        {[0,1,2,3,4,5,6,7,8,9,10,11].map(i => (
          <line key={i} x1="0" y1="0" x2="0" y2="-260"
                transform={`rotate(${i * 30})`} strokeWidth="0.4" />
        ))}
        {/* inner 8-point star */}
        <path d="M0 -100 L25 -25 L100 0 L25 25 L0 100 L-25 25 L-100 0 L-25 -25 Z" />
        <path d="M0 -60 L20 -20 L60 0 L20 20 L0 60 L-20 20 L-60 0 L-20 -20 Z" />
        <circle r="14" fill={color} stroke="none" />
      </g>
    </svg>
  );
}

// ── Inline divider ornament (rule with center diamond) ────────────────────
function DividerOrnament({ color = "currentColor", width = 220 }) {
  return (
    <svg viewBox="0 0 220 16" width={width} height="16" aria-hidden="true">
      <line x1="0" y1="8" x2="90" y2="8" stroke={color} strokeWidth="0.6" />
      <line x1="130" y1="8" x2="220" y2="8" stroke={color} strokeWidth="0.6" />
      <g transform="translate(110 8)">
        <path d="M0 -6 L6 0 L0 6 L-6 0 Z" fill="none" stroke={color} strokeWidth="0.8" />
        <circle r="1.4" fill={color} />
      </g>
    </svg>
  );
}

// ── Photo placeholder with optional category label ────────────────────────
function Photo({ label, caption, variant = "dark", icon, corner, br, className = "", style = {} }) {
  const cls = `ph${variant === "light" ? " ph--light" : ""}${variant === "bone" ? " ph--bone" : ""} ${className}`;
  return (
    <div className={cls} style={style}>
      {corner && <div className="ph__corner">{corner}</div>}
      {br && <div className="ph__corner ph__corner--br">{br}</div>}
      <div className="ph__lbl">
        {icon && <div className="ph__icon">{icon}</div>}
        {label && <div>{label}</div>}
        {caption && <div className="ph__cap">{caption}</div>}
      </div>
    </div>
  );
}

// ── Tiny utility icons ────────────────────────────────────────────────────
const Icon = {
  Phone: ({ s = 16 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.19 12.9a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
    </svg>
  ),
  Pin: ({ s = 16 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
      <circle cx="12" cy="10" r="3"/>
    </svg>
  ),
  Star: ({ s = 14, outline = false }) => (
    <svg viewBox="0 0 24 24" width={s} height={s}
         fill={outline ? "none" : "currentColor"}
         stroke={outline ? "currentColor" : "none"}
         strokeWidth={outline ? "1.5" : "0"}
         aria-hidden="true">
      <path d="M12 2 14.9 8.6 22 9.3l-5.4 4.9 1.6 7L12 17.8 5.8 21.2l1.6-7L2 9.3l7.1-.7Z"/>
    </svg>
  ),
  Calendar: ({ s = 16 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="5" width="18" height="16" rx="1.5"/>
      <path d="M3 10h18M8 3v4M16 3v4"/>
    </svg>
  ),
  Arrow: ({ s = 14 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  Instagram: ({ s = 16 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="4"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor"/>
    </svg>
  ),
  Scissors: ({ s = 32 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="6" cy="6" r="3"/>
      <circle cx="6" cy="18" r="3"/>
      <path d="M20 4 8.12 15.88M14.47 14.47 20 20M8.12 8.12 12 12"/>
    </svg>
  ),
  Razor: ({ s = 32 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M3 18 18 3M14 7l3 3M7 14l3 3"/>
      <path d="M5 16l3 3-2 2-3-3z" />
    </svg>
  ),
  Shield: ({ s = 16 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
      <path d="M9 12l2 2 4-4"/>
    </svg>
  ),
  Clock: ({ s = 16 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="10"/>
      <path d="M12 6v6l4 2"/>
    </svg>
  ),
  Users: ({ s = 16 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
      <circle cx="9" cy="7" r="4"/>
      <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
      <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
    </svg>
  ),
  GradCap: ({ s = 16 }) => (
    <svg viewBox="0 0 24 24" width={s} height={s} fill="none" stroke="currentColor"
         strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
      <path d="M6 12v5c0 2 2 3 6 3s6-1 6-3v-5"/>
    </svg>
  ),
};

Object.assign(window, { BrandMark, Medallion, DividerOrnament, Photo, Icon });