// SVG ornaments & Greek visuals
const { useRef, useEffect, useState } = React;

// Ionic column SVG - ornate, detailed
const IonicColumn = ({ height = 400, variant = 'full', className = '', style = {} }) => {
  const w = height * 0.28;
  return (
    <svg viewBox={`0 0 100 400`} width={w} height={height}
      preserveAspectRatio="xMidYMax meet" className={className} style={style}>
      <defs>
        <linearGradient id={`col-grad-${variant}`} x1="0" x2="1" y1="0" y2="0">
          <stop offset="0" stopColor="#E6C987"/>
          <stop offset="0.25" stopColor="#C9A449"/>
          <stop offset="0.5" stopColor="#F3EAD4"/>
          <stop offset="0.75" stopColor="#C9A449"/>
          <stop offset="1" stopColor="#A07F2E"/>
        </linearGradient>
        <linearGradient id={`col-shadow-${variant}`} x1="0" x2="1" y1="0" y2="0">
          <stop offset="0" stopColor="rgba(0,0,0,0.1)"/>
          <stop offset="0.5" stopColor="rgba(0,0,0,0)"/>
          <stop offset="1" stopColor="rgba(0,0,0,0.2)"/>
        </linearGradient>
      </defs>
      {/* Capital (top) - Ionic with volutes */}
      <g>
        {/* abacus */}
        <rect x="10" y="40" width="80" height="8" fill={`url(#col-grad-${variant})`} stroke="#A07F2E" strokeWidth="0.5"/>
        {/* volutes */}
        <path d="M 15 48 Q 10 60 20 62 Q 30 62 28 52" fill={`url(#col-grad-${variant})`} stroke="#A07F2E" strokeWidth="0.5"/>
        <path d="M 85 48 Q 90 60 80 62 Q 70 62 72 52" fill={`url(#col-grad-${variant})`} stroke="#A07F2E" strokeWidth="0.5"/>
        <circle cx="18" cy="57" r="2.5" fill="#A07F2E"/>
        <circle cx="82" cy="57" r="2.5" fill="#A07F2E"/>
        {/* echinus with egg-and-dart */}
        <rect x="20" y="55" width="60" height="8" fill={`url(#col-grad-${variant})`} stroke="#A07F2E" strokeWidth="0.5"/>
        <rect x="18" y="63" width="64" height="4" fill={`url(#col-grad-${variant})`} stroke="#A07F2E" strokeWidth="0.3"/>
      </g>
      {/* Shaft with fluting */}
      <g>
        <rect x="22" y="67" width="56" height="290" fill={`url(#col-grad-${variant})`}/>
        {/* flutes */}
        {[0,1,2,3,4,5,6,7].map(i => (
          <line key={i} x1={24 + i*7} y1="67" x2={24 + i*7} y2="357"
            stroke="#A07F2E" strokeWidth="0.4" opacity="0.5"/>
        ))}
        <rect x="22" y="67" width="56" height="290" fill={`url(#col-shadow-${variant})`} opacity="0.6"/>
      </g>
      {/* Base */}
      <g>
        <rect x="18" y="357" width="64" height="6" fill={`url(#col-grad-${variant})`} stroke="#A07F2E" strokeWidth="0.4"/>
        <ellipse cx="50" cy="367" rx="34" ry="4" fill={`url(#col-grad-${variant})`} stroke="#A07F2E" strokeWidth="0.4"/>
        <rect x="14" y="370" width="72" height="8" fill={`url(#col-grad-${variant})`} stroke="#A07F2E" strokeWidth="0.4"/>
        <rect x="10" y="378" width="80" height="10" fill={`url(#col-grad-${variant})`} stroke="#A07F2E" strokeWidth="0.5"/>
      </g>
    </svg>
  );
};

// Laurel wreath / branch
const LaurelBranch = ({ mirror = false, size = 140, color = '#A07F2E' }) => (
  <svg viewBox="0 0 200 80" width={size} height={size * 0.4}
    style={{ transform: mirror ? 'scaleX(-1)' : 'none' }}>
    <g fill="none" stroke={color} strokeWidth="1.2">
      <path d="M 10 40 Q 100 30 190 40" strokeWidth="1.5"/>
      {[...Array(9)].map((_, i) => {
        const x = 25 + i * 20;
        const y1 = 40 - 8 - Math.sin(i) * 3;
        return (
          <g key={i}>
            <ellipse cx={x} cy={y1} rx="9" ry="4"
              fill={color} fillOpacity="0.7"
              transform={`rotate(${-30 - i*2} ${x} ${y1})`}/>
            <ellipse cx={x+6} cy={40 + 8 + Math.sin(i+2)*2} rx="9" ry="4"
              fill={color} fillOpacity="0.7"
              transform={`rotate(${30 + i*2} ${x+6} ${40 + 8 + Math.sin(i+2)*2})`}/>
          </g>
        );
      })}
    </g>
  </svg>
);

// Meander / greek key decorative strip
const MeanderStrip = ({ color = '#C9A449', height = 20 }) => (
  <div style={{
    height,
    backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'><path d='M0 2 H22 V18 H8 V8 H16 V12 H38 V2 H60 V18 H46 V8 H54 V12 H80' fill='none' stroke='${encodeURIComponent(color)}' stroke-width='1.5'/></svg>")`,
    backgroundRepeat: 'repeat-x',
    backgroundSize: `${height * 4}px ${height}px`,
    opacity: 0.85,
  }}/>
);

// Caduceus / asclepius rod (medicine symbol)
const AsclepiusRod = ({ size = 60, color = '#C9A449' }) => (
  <svg viewBox="0 0 40 100" width={size * 0.4} height={size}>
    <g stroke={color} strokeWidth="1.5" fill="none">
      <line x1="20" y1="5" x2="20" y2="95" strokeWidth="2.5"/>
      <path d="M 20 15 Q 12 22 20 32 Q 28 42 20 52 Q 12 62 20 72 Q 28 82 20 90"/>
      <path d="M 15 14 L 20 10 L 25 14 Q 22 17 20 16 Q 18 17 15 14 Z" fill={color}/>
      <circle cx="17" cy="15" r="1" fill="#6B1A2E"/>
    </g>
  </svg>
);

// Ornate divider with diamond
const Divider = ({ color = '#C9A449', width = 240 }) => (
  <svg viewBox="0 0 240 20" width={width} height="20">
    <g stroke={color} fill={color}>
      <line x1="10" y1="10" x2="95" y2="10" strokeWidth="1"/>
      <line x1="145" y1="10" x2="230" y2="10" strokeWidth="1"/>
      <circle cx="100" cy="10" r="2"/>
      <circle cx="140" cy="10" r="2"/>
      <path d="M 120 3 L 127 10 L 120 17 L 113 10 Z"/>
      <circle cx="120" cy="10" r="2" fill="#6B1A2E"/>
    </g>
  </svg>
);

// Greek temple/parthenon silhouette
const ParthenonSilhouette = ({ width = 600, opacity = 0.12, color = '#6B1A2E' }) => (
  <svg viewBox="0 0 600 240" width={width} height={width * 0.4} style={{ opacity }}>
    <g fill={color}>
      {/* Pediment */}
      <polygon points="60,60 300,10 540,60 540,80 60,80"/>
      {/* Entablature */}
      <rect x="50" y="80" width="500" height="18"/>
      <rect x="50" y="98" width="500" height="6"/>
      {/* Columns */}
      {[0,1,2,3,4,5,6,7].map(i => (
        <g key={i}>
          <rect x={70 + i * 60} y="104" width="30" height="4"/>
          <rect x={74 + i * 60} y="108" width="22" height="110"/>
          <rect x={70 + i * 60} y="218" width="30" height="6"/>
        </g>
      ))}
      {/* Stylobate */}
      <rect x="40" y="224" width="520" height="8"/>
      <rect x="30" y="232" width="540" height="6"/>
    </g>
  </svg>
);

Object.assign(window, { IonicColumn, LaurelBranch, MeanderStrip, AsclepiusRod, Divider, ParthenonSilhouette });