// illustrations.jsx - Abstract finance illustrations (SVG)
// Modern, editorial, matching cream/ink/yellow palette

const IllBarChart = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="48" width="10" height="28" fill="#181715"/>
    <rect x="26" y="38" width="10" height="38" fill="#181715"/>
    <rect x="42" y="26" width="10" height="50" fill="#FEBF2C"/>
    <rect x="58" y="32" width="10" height="44" fill="#181715"/>
    <rect x="74" y="14" width="10" height="62" fill="#181715"/>
    <rect x="90" y="22" width="10" height="54" fill="#181715"/>
    <line x1="0" y1="76" x2="120" y2="76" stroke="#181715" strokeWidth="1"/>
  </svg>
);

const IllLineGrowth = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 64 L20 58 L40 46 L60 42 L80 26 L100 18 L120 8" stroke="#181715" strokeWidth="1.5" fill="none"/>
    <path d="M0 64 L20 58 L40 46 L60 42 L80 26 L100 18 L120 8 L120 80 L0 80 Z" fill="#FEBF2C" fillOpacity="0.14"/>
    <circle cx="60" cy="42" r="3" fill="#FEBF2C"/>
    <circle cx="100" cy="18" r="3" fill="#FEBF2C"/>
    <line x1="0" y1="80" x2="120" y2="80" stroke="#181715" strokeWidth="0.8" opacity="0.3"/>
    <line x1="0" y1="60" x2="120" y2="60" stroke="#181715" strokeWidth="0.4" opacity="0.15"/>
    <line x1="0" y1="40" x2="120" y2="40" stroke="#181715" strokeWidth="0.4" opacity="0.15"/>
    <line x1="0" y1="20" x2="120" y2="20" stroke="#181715" strokeWidth="0.4" opacity="0.15"/>
  </svg>
);

const IllRingGauge = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="40" cy="40" r="32" stroke="#181715" strokeWidth="1" opacity="0.15"/>
    <circle cx="40" cy="40" r="32" stroke="#FEBF2C" strokeWidth="3" strokeDasharray="150 200" strokeDashoffset="50" strokeLinecap="round" transform="rotate(-90 40 40)"/>
    <circle cx="40" cy="40" r="24" stroke="#181715" strokeWidth="1"/>
    <circle cx="40" cy="40" r="2" fill="#181715"/>
    <line x1="40" y1="40" x2="56" y2="24" stroke="#181715" strokeWidth="2" strokeLinecap="round"/>
  </svg>
);

const IllFlowDiagram = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="4" y="30" width="22" height="20" stroke="#181715" strokeWidth="1" fill="none"/>
    <rect x="50" y="10" width="22" height="20" stroke="#181715" strokeWidth="1" fill="none"/>
    <rect x="50" y="50" width="22" height="20" stroke="#181715" strokeWidth="1" fill="none"/>
    <rect x="94" y="30" width="22" height="20" fill="#FEBF2C" stroke="#181715" strokeWidth="1"/>
    <path d="M26 40 L50 20" stroke="#181715" strokeWidth="1" strokeDasharray="2 2"/>
    <path d="M26 40 L50 60" stroke="#181715" strokeWidth="1" strokeDasharray="2 2"/>
    <path d="M72 20 L94 40" stroke="#181715" strokeWidth="1"/>
    <path d="M72 60 L94 40" stroke="#181715" strokeWidth="1"/>
    <circle cx="15" cy="40" r="3" fill="#181715"/>
    <circle cx="105" cy="40" r="3" fill="#FEBF2C"/>
  </svg>
);

const IllWave = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 50 Q15 35 30 45 T60 50 T90 44 T120 48" stroke="#181715" strokeWidth="1.5" fill="none"/>
    <path d="M0 58 Q15 45 30 54 T60 58 T90 52 T120 56" stroke="#FEBF2C" strokeWidth="2" fill="none"/>
    <path d="M0 66 Q15 56 30 62 T60 66 T90 60 T120 64" stroke="#181715" strokeWidth="1" fill="none" opacity="0.5"/>
    <line x1="0" y1="76" x2="120" y2="76" stroke="#181715" strokeWidth="0.8" opacity="0.3"/>
  </svg>
);

const IllStackedBars = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="8" y="40" width="18" height="36" fill="#181715"/>
    <rect x="8" y="28" width="18" height="12" fill="#FEBF2C"/>
    <rect x="32" y="48" width="18" height="28" fill="#181715"/>
    <rect x="32" y="32" width="18" height="16" fill="#FEBF2C"/>
    <rect x="56" y="36" width="18" height="40" fill="#181715"/>
    <rect x="56" y="20" width="18" height="16" fill="#FEBF2C"/>
    <rect x="80" y="44" width="18" height="32" fill="#181715"/>
    <rect x="80" y="24" width="18" height="20" fill="#FEBF2C"/>
    <line x1="0" y1="76" x2="120" y2="76" stroke="#181715" strokeWidth="1"/>
  </svg>
);

// --- Large hero-chart variant (for metrics card) ---
const HeroChart = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 280 80" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="heroGrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#FEBF2C" stopOpacity="0.35"/>
        <stop offset="100%" stopColor="#FEBF2C" stopOpacity="0"/>
      </linearGradient>
    </defs>
    <path d="M0 62 L20 56 L40 58 L60 48 L80 50 L100 40 L120 42 L140 34 L160 30 L180 32 L200 22 L220 24 L240 14 L260 12 L280 6" stroke="#FEBF2C" strokeWidth="2" fill="none" strokeLinecap="round"/>
    <path d="M0 62 L20 56 L40 58 L60 48 L80 50 L100 40 L120 42 L140 34 L160 30 L180 32 L200 22 L220 24 L240 14 L260 12 L280 6 L280 80 L0 80 Z" fill="url(#heroGrad)"/>
    <line x1="0" y1="78" x2="280" y2="78" stroke="#F4F0E8" strokeWidth="0.5" opacity="0.15"/>
    <line x1="0" y1="60" x2="280" y2="60" stroke="#F4F0E8" strokeWidth="0.5" opacity="0.08"/>
    <line x1="0" y1="40" x2="280" y2="40" stroke="#F4F0E8" strokeWidth="0.5" opacity="0.08"/>
    <line x1="0" y1="20" x2="280" y2="20" stroke="#F4F0E8" strokeWidth="0.5" opacity="0.08"/>
  </svg>
);

// --- Large case-art backgrounds ---
const CaseArtGrid = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 600 400" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="grid1" width="40" height="40" patternUnits="userSpaceOnUse">
        <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#FEBF2C" strokeWidth="0.5" strokeOpacity="0.15"/>
      </pattern>
    </defs>
    <rect width="600" height="400" fill="url(#grid1)"/>
    <path d="M0 280 Q75 240 150 260 T300 240 T450 200 T600 160" stroke="#FEBF2C" strokeWidth="1.5" fill="none" strokeOpacity="0.45"/>
    <path d="M0 280 Q75 240 150 260 T300 240 T450 200 T600 160 L600 400 L0 400 Z" fill="#FEBF2C" fillOpacity="0.05"/>
    <circle cx="150" cy="260" r="3" fill="#FEBF2C"/>
    <circle cx="300" cy="240" r="3" fill="#FEBF2C"/>
    <circle cx="450" cy="200" r="3" fill="#FEBF2C"/>
  </svg>
);

const CaseArtRings = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 600 400" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="420" cy="200" r="140" stroke="#FEBF2C" strokeWidth="0.5" strokeOpacity="0.2" fill="none"/>
    <circle cx="420" cy="200" r="110" stroke="#FEBF2C" strokeWidth="0.5" strokeOpacity="0.3" fill="none"/>
    <circle cx="420" cy="200" r="80" stroke="#FEBF2C" strokeWidth="0.5" strokeOpacity="0.4" fill="none"/>
    <circle cx="420" cy="200" r="140" stroke="#FEBF2C" strokeWidth="2" strokeDasharray="220 900" strokeLinecap="round" fill="none" transform="rotate(-90 420 200)"/>
    <circle cx="420" cy="200" r="110" stroke="#F4F0E8" strokeWidth="1" strokeDasharray="150 900" strokeLinecap="round" fill="none" transform="rotate(-90 420 200)" opacity="0.5"/>
  </svg>
);

const CaseArtWaves = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 600 400" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 180 Q100 140 200 160 T400 150 T600 120" stroke="#FEBF2C" strokeWidth="1.5" fill="none" strokeOpacity="0.5"/>
    <path d="M0 220 Q100 180 200 200 T400 190 T600 160" stroke="#FEBF2C" strokeWidth="1" fill="none" strokeOpacity="0.3"/>
    <path d="M0 260 Q100 220 200 240 T400 230 T600 200" stroke="#F4F0E8" strokeWidth="1" fill="none" strokeOpacity="0.2"/>
    <path d="M0 300 Q100 260 200 280 T400 270 T600 240" stroke="#F4F0E8" strokeWidth="0.8" fill="none" strokeOpacity="0.15"/>
  </svg>
);

// --- Insight art ---
const InsightArtA = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 300 140" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="300" height="140" fill="#E3DCCB"/>
    <path d="M0 100 Q50 70 100 80 T200 70 T300 50" stroke="#181715" strokeWidth="1.5" fill="none"/>
    <path d="M0 100 Q50 70 100 80 T200 70 T300 50 L300 140 L0 140 Z" fill="#FEBF2C" fillOpacity="0.3"/>
    <circle cx="100" cy="80" r="3" fill="#181715"/>
    <circle cx="200" cy="70" r="3" fill="#181715"/>
    <circle cx="300" cy="50" r="3" fill="#FEBF2C" stroke="#181715" strokeWidth="1"/>
  </svg>
);

const InsightArtB = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 300 140" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="300" height="140" fill="#E3DCCB"/>
    <rect x="20" y="80" width="30" height="48" fill="#181715"/>
    <rect x="60" y="50" width="30" height="78" fill="#181715"/>
    <rect x="100" y="60" width="30" height="68" fill="#FEBF2C"/>
    <rect x="140" y="70" width="30" height="58" fill="#181715"/>
    <rect x="180" y="40" width="30" height="88" fill="#181715"/>
    <rect x="220" y="30" width="30" height="98" fill="#FEBF2C"/>
    <rect x="260" y="20" width="30" height="108" fill="#181715"/>
  </svg>
);

const InsightArtC = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 300 140" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="300" height="140" fill="#E3DCCB"/>
    <circle cx="150" cy="70" r="50" stroke="#181715" strokeWidth="1" fill="none"/>
    <circle cx="150" cy="70" r="50" stroke="#FEBF2C" strokeWidth="8" strokeDasharray="140 400" transform="rotate(-90 150 70)" fill="none"/>
    <line x1="30" y1="110" x2="270" y2="110" stroke="#181715" strokeWidth="0.5" opacity="0.3"/>
    <line x1="30" y1="30" x2="270" y2="30" stroke="#181715" strokeWidth="0.5" opacity="0.3"/>
    <circle cx="150" cy="70" r="4" fill="#181715"/>
  </svg>
);

const InsightArtD = ({ className = '' }) => (
  <svg className={className} viewBox="0 0 300 220" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="300" height="220" fill="#E3DCCB"/>
    <path d="M0 160 Q40 120 80 140 T160 120 T240 90 T300 60" stroke="#181715" strokeWidth="2" fill="none"/>
    <path d="M0 160 Q40 120 80 140 T160 120 T240 90 T300 60 L300 220 L0 220 Z" fill="#FEBF2C" fillOpacity="0.3"/>
    <g opacity="0.4">
      <line x1="0" y1="180" x2="300" y2="180" stroke="#181715" strokeWidth="0.5"/>
      <line x1="0" y1="140" x2="300" y2="140" stroke="#181715" strokeWidth="0.5"/>
      <line x1="0" y1="100" x2="300" y2="100" stroke="#181715" strokeWidth="0.5"/>
      <line x1="0" y1="60" x2="300" y2="60" stroke="#181715" strokeWidth="0.5"/>
    </g>
    <circle cx="80" cy="140" r="4" fill="#FEBF2C" stroke="#181715" strokeWidth="1"/>
    <circle cx="160" cy="120" r="4" fill="#FEBF2C" stroke="#181715" strokeWidth="1"/>
    <circle cx="240" cy="90" r="4" fill="#FEBF2C" stroke="#181715" strokeWidth="1"/>
  </svg>
);

// service icon variants (compact)
const SvcIcon01 = () => <IllBarChart/>;
const SvcIcon02 = () => <IllFlowDiagram/>;
const SvcIcon03 = () => <IllRingGauge/>;
const SvcIcon04 = () => <IllLineGrowth/>;
const SvcIcon05 = () => <IllStackedBars/>;
const SvcIcon06 = () => <IllWave/>;

Object.assign(window, {
  IllBarChart, IllLineGrowth, IllRingGauge, IllFlowDiagram, IllWave, IllStackedBars,
  HeroChart,
  CaseArtGrid, CaseArtRings, CaseArtWaves,
  InsightArtA, InsightArtB, InsightArtC, InsightArtD,
  SvcIcon01, SvcIcon02, SvcIcon03, SvcIcon04, SvcIcon05, SvcIcon06,
});
