// Hand-crafted SVG / CSS "3D" art for Capital Home Solutions
// Claymation-style soft rounded shapes. Navy + gold palette.

// Real photo house (Unsplash) — replaces the isometric SVG
const IsoHouse = ({ size = 360, variant = "rehabbed", fill = false, hero = false }) => {
  let src;
  const R = window.__resources || {};
  if (variant === "distressed") src = R.distressedHouse || "assets/distressed-house.jpg";
  else if (hero) src = R.heroHouse || "assets/hero-house.webp";
  else src = R.rehabbedHouse || "assets/rehabbed-house.png";
  if (fill) {
    return (
      <img src={src} alt={variant==="distressed"?"Distressed house":"Rehabbed house"}
        style={{position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover", display:"block"}}/>
    );
  }
  return (
    <div style={{
      width: size, height: size * 0.95,
      borderRadius: 24, overflow: "hidden",
      boxShadow: "0 24px 60px rgba(11,27,43,.22), 0 6px 18px rgba(11,27,43,.1)",
      position: "relative",
      background: variant === "distressed" ? "#3A3428" : "#2A4A68",
    }}>
      <img src={src} alt={variant==="distressed"?"Distressed house":"Rehabbed house"}
        style={{width:"100%", height:"100%", objectFit:"cover", display:"block"}}/>
      <div style={{
        position:"absolute", inset:0,
        background: variant==="distressed"
          ? "linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35))"
          : "linear-gradient(180deg, rgba(11,27,43,0) 50%, rgba(11,27,43,.2))",
      }}/>
    </div>
  );
};

// Keep the old SVG as a fallback (not used by default now)
const IsoHouseSVG = ({ size = 360, variant = "rehabbed" }) => {
  const isDist = variant === "distressed";
  return (
    <svg viewBox="0 0 400 380" width={size} height={size * 0.95} style={{overflow:"visible"}}>
      <defs>
        <linearGradient id={`roof-${variant}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={isDist ? "#5A3E2E" : "#2A4A68"}/>
          <stop offset="1" stopColor={isDist ? "#3A2819" : "#112637"}/>
        </linearGradient>
        <linearGradient id={`wall-${variant}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={isDist ? "#C9B9A0" : "#FBF7EE"}/>
          <stop offset="1" stopColor={isDist ? "#8A7760" : "#E8DEC5"}/>
        </linearGradient>
        <linearGradient id={`wall2-${variant}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={isDist ? "#A89680" : "#F5EEDF"}/>
          <stop offset="1" stopColor={isDist ? "#6B5A45" : "#D9CBA8"}/>
        </linearGradient>
        <radialGradient id={`ground-${variant}`} cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="rgba(11,27,43,.18)"/>
          <stop offset="1" stopColor="rgba(11,27,43,0)"/>
        </radialGradient>
      </defs>
      {/* ground shadow */}
      <ellipse cx="200" cy="340" rx="150" ry="18" fill={`url(#ground-${variant})`}/>

      {/* grass/yard */}
      <path d="M60 320 L200 370 L340 320 L200 270 Z" fill={isDist ? "#8A8562" : "#A8B982"} opacity=".55"/>
      {!isDist && (
        <>
          <circle cx="110" cy="310" r="3" fill="#2F5D4B"/>
          <circle cx="290" cy="310" r="3" fill="#2F5D4B"/>
          <circle cx="250" cy="345" r="2.5" fill="#2F5D4B"/>
        </>
      )}

      {/* right wall (side) */}
      <path d="M200 310 L330 245 L330 140 L200 205 Z" fill={`url(#wall2-${variant})`}/>
      {/* front wall */}
      <path d="M70 245 L200 310 L200 205 L70 140 Z" fill={`url(#wall-${variant})`}/>

      {/* roof */}
      <path d="M70 140 L200 75 L330 140 L200 205 Z" fill={`url(#roof-${variant})`}/>
      <path d="M200 75 L330 140 L200 205 Z" fill="rgba(0,0,0,.12)"/>

      {/* chimney */}
      <path d="M260 108 L260 138 L278 147 L278 117 Z" fill={isDist ? "#4A3424" : "#1B3750"}/>
      <path d="M260 108 L278 117 L278 117 L260 108 Z" fill="rgba(0,0,0,.2)"/>

      {/* door */}
      <path d="M118 215 L148 230 L148 278 L118 263 Z"
        fill={isDist ? "#5A3E2E" : "#D4A24C"}/>
      <circle cx="143" cy="252" r="1.6" fill={isDist ? "#3A2819" : "#0B1B2B"}/>

      {/* front window */}
      <path d="M162 228 L188 241 L188 270 L162 257 Z"
        fill={isDist ? "#3A3428" : "#7FB3D4"} stroke={isDist ? "#2A1F14" : "#112637"} strokeWidth="1.5"/>
      <path d="M175 234 L175 264" stroke={isDist ? "#2A1F14" : "#112637"} strokeWidth="1"/>
      <path d="M162 249 L188 262" stroke={isDist ? "#2A1F14" : "#112637"} strokeWidth="1"/>

      {/* side window */}
      <path d="M222 218 L260 199 L260 226 L222 245 Z"
        fill={isDist ? "#3A3428" : "#7FB3D4"} stroke={isDist ? "#2A1F14" : "#112637"} strokeWidth="1.5"/>
      <path d="M241 209 L241 236" stroke={isDist ? "#2A1F14" : "#112637"} strokeWidth="1"/>

      {/* distressed details: boards, cracks, broken bits */}
      {isDist && (
        <>
          <path d="M118 215 L148 230 L148 230 L128 220 L140 248 L118 238 Z" fill="#8B6F52" opacity=".6"/>
          <path d="M120 235 L146 248" stroke="#3A2819" strokeWidth="1.4" opacity=".6"/>
          <path d="M125 222 L142 240" stroke="#3A2819" strokeWidth="1.2" opacity=".5"/>
          {/* cracks on wall */}
          <path d="M80 170 L110 185 L105 205 L92 195" stroke="#5A4635" strokeWidth="1" fill="none" opacity=".5"/>
          {/* missing roof tiles */}
          <path d="M180 110 L195 118 L190 128 L175 120 Z" fill="#2A1F14" opacity=".6"/>
          <path d="M225 125 L238 132 L232 142 L219 135 Z" fill="#2A1F14" opacity=".5"/>
          {/* broken window lines */}
          <path d="M162 228 L188 270" stroke="#2A1F14" strokeWidth=".8" opacity=".6"/>
          {/* overgrown grass */}
          <path d="M95 308 L97 295 M105 315 L108 300 M285 305 L288 290" stroke="#5A6B3A" strokeWidth="1.5" opacity=".8"/>
        </>
      )}

      {/* rehabbed details: clean chimney smoke, planter */}
      {!isDist && (
        <>
          <circle cx="273" cy="95" r="4" fill="#FBF7EE" opacity=".7"/>
          <circle cx="278" cy="82" r="5" fill="#FBF7EE" opacity=".5"/>
          <circle cx="285" cy="68" r="6" fill="#FBF7EE" opacity=".35"/>
          {/* flower box */}
          <path d="M162 257 L188 270 L188 276 L162 263 Z" fill="#1B3750"/>
          <circle cx="168" cy="262" r="2" fill="#D4A24C"/>
          <circle cx="176" cy="266" r="2" fill="#B85C3C"/>
          <circle cx="184" cy="270" r="2" fill="#D4A24C"/>
          {/* path */}
          <path d="M120 290 L148 304 L148 310 L120 296 Z" fill="#C9B99A" opacity=".7"/>
        </>
      )}
    </svg>
  );
};

const CoinStack = ({ size = 220 }) => {
  // Photorealistic stack of $100 bills + gold coin
  const w = size;
  const h = size * 0.9;
  return (
    <svg width={w} height={h} viewBox="0 0 260 234" style={{overflow:"visible", filter:"drop-shadow(0 22px 40px rgba(11,27,43,.28))"}}>
      <defs>
        <linearGradient id="billFace" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#E2EDD6"/>
          <stop offset="1" stopColor="#BFCFAF"/>
        </linearGradient>
        <linearGradient id="billFaceTop" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#EEF3E3"/>
          <stop offset="1" stopColor="#C9D7B8"/>
        </linearGradient>
        <linearGradient id="billEdge" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#B6C7A4"/>
          <stop offset="1" stopColor="#8FA184"/>
        </linearGradient>
        <radialGradient id="coinFace" cx=".35" cy=".3" r=".85">
          <stop offset="0" stopColor="#FFF2C9"/>
          <stop offset=".45" stopColor="#E8BC5F"/>
          <stop offset=".85" stopColor="#B8862E"/>
          <stop offset="1" stopColor="#8B6220"/>
        </radialGradient>
        <radialGradient id="coinRim" cx=".5" cy=".5" r=".5">
          <stop offset=".85" stopColor="rgba(0,0,0,0)"/>
          <stop offset=".92" stopColor="rgba(184,134,46,.6)"/>
          <stop offset="1" stopColor="rgba(120,82,20,.9)"/>
        </radialGradient>
        <linearGradient id="strap" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#E8B560"/>
          <stop offset="1" stopColor="#B8862E"/>
        </linearGradient>
        <filter id="softshadow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="1.5"/>
        </filter>
      </defs>

      {/* ground shadow */}
      <ellipse cx="130" cy="220" rx="110" ry="9" fill="rgba(11,27,43,.25)"/>

      {/* Bill stack - 6 bills stacked with subtle offset */}
      {[0,1,2,3,4,5].map(i => {
        const offY = 168 - i*9;
        const offX = i*1.2;
        return (
          <g key={i} transform={`translate(${offX} ${offY})`}>
            {/* Bill edge depth */}
            <rect x="12" y="6" width="196" height="42" rx="2" fill="url(#billEdge)"/>
            {/* Bill face */}
            <rect x="10" y="2" width="196" height="42" rx="2" fill={i===5 ? "url(#billFaceTop)" : "url(#billFace)"}/>
            {/* Top bill only: full engraving */}
            {i === 5 && (
              <>
                {/* Ornamental border */}
                <rect x="14" y="6" width="188" height="34" rx="1" fill="none" stroke="#4A5C3F" strokeWidth="0.6" opacity="0.6"/>
                <rect x="16" y="8" width="184" height="30" rx="1" fill="none" stroke="#4A5C3F" strokeWidth="0.35" opacity="0.45"/>
                {/* Left numeral "100" */}
                <text x="24" y="22" fill="#2E3D24" fontSize="7" fontFamily="serif" fontWeight="700">100</text>
                <text x="24" y="35" fill="#2E3D24" fontSize="5.5" fontFamily="serif" fontWeight="400" fontStyle="italic">ONE HUNDRED</text>
                {/* Right numeral big */}
                <text x="165" y="32" fill="#2E3D24" fontSize="18" fontFamily="serif" fontWeight="700" opacity="0.55">100</text>
                {/* Portrait oval center-left */}
                <ellipse cx="108" cy="23" rx="14" ry="11" fill="#EDF1E1" stroke="#4A5C3F" strokeWidth="0.5"/>
                <ellipse cx="108" cy="23" rx="10.5" ry="8" fill="none" stroke="#4A5C3F" strokeWidth="0.3" opacity="0.6"/>
                {/* Portrait bust */}
                <circle cx="108" cy="20.5" r="2.6" fill="#6B7A55" opacity="0.8"/>
                <path d="M101 29 Q108 22 115 29 Z" fill="#6B7A55" opacity="0.8"/>
                {/* Engraving guilloché lines */}
                <path d="M58 18 Q70 14 80 18 Q90 22 88 26" stroke="#4A5C3F" strokeWidth="0.3" fill="none" opacity="0.4"/>
                <path d="M60 22 Q72 18 82 22 Q92 26 90 30" stroke="#4A5C3F" strokeWidth="0.3" fill="none" opacity="0.4"/>
                <path d="M128 18 Q140 14 150 18 Q160 22 158 26" stroke="#4A5C3F" strokeWidth="0.3" fill="none" opacity="0.4"/>
                <path d="M130 22 Q142 18 152 22 Q162 26 160 30" stroke="#4A5C3F" strokeWidth="0.3" fill="none" opacity="0.4"/>
                {/* Corner stars */}
                <circle cx="18" cy="10" r="1.2" fill="none" stroke="#4A5C3F" strokeWidth="0.4"/>
                <circle cx="198" cy="10" r="1.2" fill="none" stroke="#4A5C3F" strokeWidth="0.4"/>
                <circle cx="18" cy="36" r="1.2" fill="none" stroke="#4A5C3F" strokeWidth="0.4"/>
                <circle cx="198" cy="36" r="1.2" fill="none" stroke="#4A5C3F" strokeWidth="0.4"/>
                {/* Subtle highlight */}
                <rect x="10" y="2" width="196" height="8" rx="2" fill="url(#billFaceTop)" opacity="0.5"/>
              </>
            )}
            {/* For lower bills, faint texture */}
            {i < 5 && (
              <rect x="14" y="6" width="188" height="34" rx="1" fill="none" stroke="rgba(74,92,63,.25)" strokeWidth="0.4"/>
            )}
          </g>
        );
      })}

      {/* Gold strap around middle of stack */}
      <g transform="translate(0 155)">
        <rect x="70" y="0" width="80" height="46" fill="url(#strap)" opacity="0.95"/>
        <rect x="70" y="0" width="80" height="5" fill="rgba(255,255,255,.25)"/>
        <rect x="70" y="41" width="80" height="5" fill="rgba(0,0,0,.2)"/>
        <text x="110" y="27" fill="#0B1B2B" fontSize="9" fontFamily="serif" fontWeight="700" textAnchor="middle" opacity="0.85">$10,000</text>
      </g>

      {/* Gold coin, leaning on stack */}
      <g transform="translate(178 72) rotate(-18)">
        {/* Coin side edge */}
        <ellipse cx="0" cy="4" rx="36" ry="36" fill="#8B6220"/>
        <ellipse cx="0" cy="2" rx="36" ry="36" fill="#A0741E"/>
        {/* Coin face */}
        <circle r="36" fill="url(#coinFace)"/>
        <circle r="36" fill="url(#coinRim)"/>
        {/* Inner ring */}
        <circle r="30" fill="none" stroke="#8B6220" strokeWidth="1" opacity="0.7"/>
        <circle r="30" fill="none" stroke="rgba(255,242,201,.5)" strokeWidth="0.6" transform="translate(-0.5 -0.5)"/>
        {/* Laurel decoration */}
        <path d="M-20 -14 Q-14 -22 -6 -22 M-22 -8 Q-18 -16 -10 -18 M-22 0 Q-20 -10 -14 -12" stroke="#6B4A14" strokeWidth="1" fill="none" opacity="0.6"/>
        <path d="M20 -14 Q14 -22 6 -22 M22 -8 Q18 -16 10 -18 M22 0 Q20 -10 14 -12" stroke="#6B4A14" strokeWidth="1" fill="none" opacity="0.6"/>
        {/* Center $ */}
        <text x="0" y="8" fontSize="34" fontFamily="serif" fontWeight="700" fill="#6B4A14" textAnchor="middle" opacity="0.85">$</text>
        {/* Highlight */}
        <ellipse cx="-12" cy="-14" rx="12" ry="8" fill="rgba(255,255,255,.45)" transform="rotate(-20)"/>
        {/* Edge ridges on visible side */}
        <g opacity="0.5">
          {Array.from({length:24}).map((_,k) => {
            const a = (k/24) * Math.PI * 2;
            const x1 = Math.cos(a) * 35.5;
            const y1 = Math.sin(a) * 35.5;
            const x2 = Math.cos(a) * 37;
            const y2 = Math.sin(a) * 37;
            return <line key={k} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#6B4A14" strokeWidth="0.6"/>;
          })}
        </g>
      </g>

      {/* Smaller coin in front */}
      <g transform="translate(62 172) rotate(14)">
        <ellipse cx="0" cy="3" rx="22" ry="22" fill="#8B6220"/>
        <circle r="22" fill="url(#coinFace)"/>
        <circle r="22" fill="url(#coinRim)"/>
        <circle r="17" fill="none" stroke="#8B6220" strokeWidth="0.7" opacity="0.7"/>
        <text x="0" y="6" fontSize="20" fontFamily="serif" fontWeight="700" fill="#6B4A14" textAnchor="middle" opacity="0.85">$</text>
        <ellipse cx="-7" cy="-8" rx="7" ry="5" fill="rgba(255,255,255,.45)" transform="rotate(-20)"/>
      </g>
    </svg>
  );
};

// Real family photo (Unsplash) — replaces the illustrated scene
const FamilyScene = ({ width = 520 }) => {
  return (
    <div style={{
      width: "100%", height: "100%", minHeight: 440,
      position: "relative", overflow: "hidden", borderRadius: 24,
    }}>
      <img
        src={(window.__resources && window.__resources.familyPhoto) || "https://images.unsplash.com/photo-1511895426328-dc8714191300?w=1600&auto=format&fit=crop&q=90"}
        alt="Family outside their home"
        style={{width:"100%", height:"100%", objectFit:"cover", display:"block"}}
      />
      <div style={{
        position:"absolute", inset:0,
        background:"linear-gradient(180deg, rgba(11,27,43,0) 40%, rgba(11,27,43,.55))",
      }}/>
    </div>
  );
};

// Original illustrated fallback (unused)
const FamilySceneSVG = ({ width = 520 }) => {
  return (
    <svg viewBox="0 0 520 360" width={width} style={{display:"block", overflow:"visible"}}>
      <defs>
        <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#F5E1B0"/>
          <stop offset="1" stopColor="#FBF7EE"/>
        </linearGradient>
        <radialGradient id="sun" cx=".5" cy=".5" r=".5">
          <stop offset="0" stopColor="#EFCF89" stopOpacity="0.8"/>
          <stop offset="1" stopColor="#EFCF89" stopOpacity="0"/>
        </radialGradient>
        <linearGradient id="porch" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#1B3750"/>
          <stop offset="1" stopColor="#0B1B2B"/>
        </linearGradient>
      </defs>

      {/* sky */}
      <rect width="520" height="360" rx="16" fill="url(#sky)"/>
      <circle cx="420" cy="80" r="120" fill="url(#sun)"/>
      <circle cx="420" cy="80" r="34" fill="#F5E1B0"/>

      {/* distant hills */}
      <path d="M0 240 Q120 200 220 230 T520 220 L520 360 L0 360 Z" fill="#C7B88B" opacity=".5"/>
      <path d="M0 270 Q150 240 300 260 T520 255 L520 360 L0 360 Z" fill="#A8B982" opacity=".7"/>

      {/* house silhouette behind */}
      <path d="M330 180 L330 270 L470 270 L470 180 L400 130 Z" fill="#2A4A68" opacity=".9"/>
      <rect x="385" y="215" width="30" height="55" fill="#D4A24C"/>
      <rect x="345" y="200" width="22" height="22" fill="#F5E1B0" opacity=".85"/>
      <rect x="433" y="200" width="22" height="22" fill="#F5E1B0" opacity=".85"/>

      {/* porch / ground */}
      <rect x="0" y="290" width="520" height="70" fill="url(#porch)"/>
      <rect x="0" y="288" width="520" height="4" fill="#D4A24C"/>

      {/* Family (claymation silhouettes with warm highlights) */}
      {/* Dad */}
      <g transform="translate(110,170)">
        <ellipse cx="0" cy="130" rx="34" ry="6" fill="rgba(0,0,0,.2)"/>
        <path d="M-22 130 L-22 70 Q-22 50 0 50 Q22 50 22 70 L22 130 Z" fill="#1B3750"/>
        <circle cx="0" cy="30" r="22" fill="#D9A67A"/>
        <path d="M-20 25 Q-20 10 0 10 Q20 10 20 25 Q20 20 15 18 Q0 16 -15 18 Q-20 20 -20 25 Z" fill="#3A2819"/>
        {/* arm around kid */}
        <path d="M18 75 Q45 85 60 95" stroke="#1B3750" strokeWidth="14" strokeLinecap="round" fill="none"/>
      </g>
      {/* Mom */}
      <g transform="translate(205,178)">
        <ellipse cx="0" cy="122" rx="32" ry="6" fill="rgba(0,0,0,.2)"/>
        <path d="M-24 122 L-20 68 Q-18 50 0 50 Q18 50 20 68 L24 122 Z" fill="#B85C3C"/>
        <circle cx="0" cy="30" r="20" fill="#EFC9A8"/>
        <path d="M-19 30 Q-19 6 0 6 Q19 6 19 30 Q19 40 16 42 L14 20 Q0 14 -14 20 L-16 42 Q-19 40 -19 30 Z" fill="#3A2819"/>
      </g>
      {/* Kid */}
      <g transform="translate(162,220)">
        <ellipse cx="0" cy="80" rx="22" ry="5" fill="rgba(0,0,0,.2)"/>
        <path d="M-16 80 L-14 40 Q-12 28 0 28 Q12 28 14 40 L16 80 Z" fill="#D4A24C"/>
        <circle cx="0" cy="18" r="15" fill="#EAB78E"/>
        <path d="M-14 18 Q-14 2 0 2 Q14 2 14 18 Q10 10 0 10 Q-10 10 -14 18 Z" fill="#5A3E2E"/>
      </g>
      {/* Dog */}
      <g transform="translate(250,258)">
        <ellipse cx="0" cy="34" rx="24" ry="4" fill="rgba(0,0,0,.2)"/>
        <ellipse cx="0" cy="20" rx="22" ry="14" fill="#8B6F52"/>
        <circle cx="18" cy="12" r="10" fill="#8B6F52"/>
        <circle cx="22" cy="10" r="2" fill="#0B1B2B"/>
        <path d="M-22 18 Q-28 14 -26 22" stroke="#8B6F52" strokeWidth="4" strokeLinecap="round" fill="none"/>
        <rect x="-8" y="26" width="3" height="8" fill="#5A3E2E"/>
        <rect x="6" y="26" width="3" height="8" fill="#5A3E2E"/>
      </g>
      {/* Grandma in rocking chair (for reverse mortgage callout) */}
      <g transform="translate(60,215)" opacity=".95">
        <ellipse cx="0" cy="85" rx="28" ry="4" fill="rgba(0,0,0,.18)"/>
        {/* chair */}
        <path d="M-22 85 L-18 30 L18 30 L22 85" stroke="#5A3E2E" strokeWidth="4" fill="none"/>
        <path d="M-28 85 Q0 92 28 85" stroke="#5A3E2E" strokeWidth="3" fill="none"/>
        {/* body */}
        <path d="M-14 65 L-12 40 Q-10 28 0 28 Q10 28 12 40 L14 65 Z" fill="#2F5D4B"/>
        <circle cx="0" cy="18" r="14" fill="#E8C7A8"/>
        <path d="M-14 18 Q-14 4 0 4 Q14 4 14 18 Q14 14 10 12 Q0 10 -10 12 Q-14 14 -14 18 Z" fill="#D9D2C6"/>
      </g>
    </svg>
  );
};

// Mini floating key / cash / paperwork icons
const KeyIcon = ({size=24,color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="8" cy="12" r="4"/>
    <path d="M12 12 L22 12 M18 12 L18 16 M20 12 L20 15"/>
  </svg>
);
const CashIcon = ({size=24,color="currentColor"}) => {
  // Realistic US-bill inspired icon with portrait oval, corner numerals, and engraving lines
  return (
    <svg width={size} height={size*0.62} viewBox="0 0 40 25" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* bill body */}
      <rect x="0.75" y="0.75" width="38.5" height="23.5" rx="2" fill="#D8E3CF" stroke={color} strokeWidth="1"/>
      {/* inner ornamental border */}
      <rect x="2.5" y="2.5" width="35" height="20" rx="1" fill="none" stroke={color} strokeWidth="0.4" opacity="0.55"/>
      {/* left corner numeral */}
      <text x="5" y="9" fill={color} fontSize="5" fontFamily="serif" fontWeight="700">$</text>
      {/* right corner numeral */}
      <text x="32.5" y="21" fill={color} fontSize="5" fontFamily="serif" fontWeight="700">$</text>
      {/* center portrait oval */}
      <ellipse cx="20" cy="12.5" rx="6" ry="7.2" fill="#EBF0E2" stroke={color} strokeWidth="0.7"/>
      {/* portrait silhouette */}
      <circle cx="20" cy="10.8" r="1.7" fill={color} opacity="0.75"/>
      <path d="M15.6 17 Q20 13.5 24.4 17 Z" fill={color} opacity="0.75"/>
      {/* engraving lines left */}
      <path d="M4 12 h8 M4 13.5 h7 M4 15 h6" stroke={color} strokeWidth="0.3" opacity="0.45"/>
      {/* engraving lines right */}
      <path d="M28 10 h8 M29 11.5 h7 M30 13 h6" stroke={color} strokeWidth="0.3" opacity="0.45"/>
    </svg>
  );
};
const ClockIcon = ({size=24,color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
  </svg>
);
const HouseIcon = ({size=24,color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 11 L12 4 L21 11 L21 20 L14 20 L14 14 L10 14 L10 20 L3 20 Z"/>
  </svg>
);
const HandIcon = ({size=24,color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M7 11 V7 a2 2 0 0 1 4 0 v4 M11 11 V5 a2 2 0 0 1 4 0 v6 M15 11 V7 a2 2 0 0 1 4 0 v8 a6 6 0 0 1 -12 0 v-4 a2 2 0 0 1 4 0"/>
  </svg>
);
const DocIcon = ({size=24,color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M7 3 H15 L19 7 V21 H7 Z"/><path d="M14 3 V8 H19"/><path d="M10 13 H16 M10 17 H14"/>
  </svg>
);
const HeartIcon = ({size=24,color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/>
  </svg>
);
const ArrowRight = ({size=16}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12 H19 M13 6 L19 12 L13 18"/>
  </svg>
);
const CheckIcon = ({size=16,color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 12l5 5L20 6"/>
  </svg>
);
const XIcon = ({size=16,color="currentColor"}) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6 6 L18 18 M18 6 L6 18"/>
  </svg>
);

Object.assign(window, { IsoHouse, CoinStack, FamilyScene, KeyIcon, CashIcon, ClockIcon, HouseIcon, HandIcon, DocIcon, HeartIcon, ArrowRight, CheckIcon, XIcon });
