import React from 'react';

export const BannerGraphic: React.FC = () => {
  return (
    <div className="w-full relative overflow-hidden bg-[#e8f4f5] border-b-4 border-[#3d9ca8] shadow-md select-none">
      <svg
        viewBox="0 0 1200 420"
        className="w-full h-auto max-h-[440px] object-cover block"
        preserveAspectRatio="xMidYMid slice"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#a7d8de" />
            <stop offset="70%" stopColor="#dff0f3" />
            <stop offset="100%" stopColor="#f5fafb" />
          </linearGradient>
          <linearGradient id="seaGrad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#43a6b2" />
            <stop offset="50%" stopColor="#2b818d" />
            <stop offset="100%" stopColor="#1a555e" />
          </linearGradient>
          <linearGradient id="sandGrad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#eedcae" />
            <stop offset="60%" stopColor="#e2c88f" />
            <stop offset="100%" stopColor="#cead67" />
          </linearGradient>
          <linearGradient id="emblemSky" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#b4e2e8" />
            <stop offset="100%" stopColor="#eaf7f8" />
          </linearGradient>
          <linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#dfb76c" />
            <stop offset="100%" stopColor="#c39745" />
          </linearGradient>
          <clipPath id="emblemClip">
            <circle cx="0" cy="0" r="148" />
          </clipPath>
        </defs>

        {/* 1. Sky Background */}
        <rect width="1200" height="260" fill="url(#skyGrad)" />

        {/* 2. Sun & Radiant Rays */}
        <g transform="translate(540, 75)">
          <circle cx="0" cy="0" r="26" fill="#fffbe8" stroke="#d8a050" strokeWidth="3" />
          {[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((angle, i) => (
            <line
              key={i}
              x1={Math.cos((angle * Math.PI) / 180) * 32}
              y1={Math.sin((angle * Math.PI) / 180) * 32}
              x2={Math.cos((angle * Math.PI) / 180) * 44}
              y2={Math.sin((angle * Math.PI) / 180) * 44}
              stroke="#d8a050"
              strokeWidth="2.5"
              strokeLinecap="round"
            />
          ))}
        </g>

        {/* 3. Soft Clouds */}
        <path d="M 190 75 Q 205 60 225 65 Q 240 45 265 55 Q 285 45 305 60 Q 320 75 300 88 L 190 88 Z" fill="#ffffff" opacity="0.9" />
        <path d="M 440 90 Q 455 78 475 82 Q 490 68 510 76 Q 525 88 510 98 L 440 98 Z" fill="#ffffff" opacity="0.85" />
        <path d="M 870 65 Q 885 50 905 55 Q 920 40 940 50 Q 960 40 980 55 Q 995 70 975 80 L 870 80 Z" fill="#ffffff" opacity="0.9" />

        {/* 4. Distant Birds in Flight */}
        <g stroke="#1b4247" strokeWidth="2" fill="none" strokeLinecap="round">
          <path d="M 270 95 Q 275 90 280 95 Q 285 90 290 95" />
          <path d="M 295 105 Q 299 100 303 105 Q 307 100 311 105" />
          <path d="M 830 85 Q 835 80 840 85 Q 845 80 850 85" />
        </g>

        {/* 5. Sea & Breaking Surf */}
        <path d="M 0 180 Q 300 165 600 180 T 1200 170 L 1200 270 L 0 270 Z" fill="url(#seaGrad)" />
        {/* Wave Foam Highlights */}
        <path d="M 0 195 Q 150 185 300 195 T 600 195 T 900 190 T 1200 195" fill="none" stroke="#ffffff" strokeWidth="3" opacity="0.85" />
        <path d="M 0 215 Q 200 205 400 215 T 800 210 T 1200 215" fill="none" stroke="#a2d9e0" strokeWidth="2.5" opacity="0.85" />
        <path d="M 0 235 Q 250 220 500 235 T 1000 230 T 1200 235" fill="none" stroke="#ffffff" strokeWidth="2" opacity="0.75" />

        {/* 6. Distant Island with 3 Palm Trees */}
        <g transform="translate(470, 175)">
          <path d="M 0 5 Q 30 -5 60 5 Z" fill="#cead67" stroke="#1b4247" strokeWidth="1.5" />
          {/* 3 mini palms */}
          <path d="M 18 3 Q 20 -10 24 -18 M 24 -18 Q 15 -25 5 -20 M 24 -18 Q 30 -26 40 -20 M 24 -18 Q 15 -14 10 -8 M 24 -18 Q 32 -14 38 -8" stroke="#1b4247" strokeWidth="2" fill="none" strokeLinecap="round" />
          <path d="M 38 4 Q 40 -8 44 -15 M 44 -15 Q 35 -20 28 -16 M 44 -15 Q 48 -22 56 -16" stroke="#1b4247" strokeWidth="1.8" fill="none" strokeLinecap="round" />
        </g>

        {/* 7. Distant Sailboats */}
        <g transform="translate(405, 172)">
          <path d="M 0 0 L 10 -20 L 16 0 Z" fill="#1b4247" />
          <path d="M -4 2 L 18 2 L 14 5 L -1 5 Z" fill="#1b4247" />
        </g>
        <g transform="translate(850, 168)">
          <path d="M 0 0 L 9 -18 L 14 0 Z" fill="#1b4247" />
          <path d="M -3 2 L 16 2 L 13 4 L -1 4 Z" fill="#1b4247" />
        </g>

        {/* 8. Sand Dunes Beach Foreground */}
        <path d="M 0 235 Q 350 205 700 240 T 1200 225 L 1200 420 L 0 420 Z" fill="url(#sandGrad)" />

        {/* 9. Connected Gear Cluster on Left Beach */}
        <g transform="translate(65, 205)">
          {/* Main Gear 1 */}
          <circle cx="0" cy="0" r="16" fill="#3d9ca8" stroke="#1b4247" strokeWidth="3" />
          <circle cx="0" cy="0" r="6" fill="#eedcae" stroke="#1b4247" strokeWidth="1.5" />
          {/* Linked Gear 2 */}
          <circle cx="32" cy="-14" r="13" fill="#d8a050" stroke="#1b4247" strokeWidth="2.5" />
          <circle cx="32" cy="-14" r="5" fill="#ffffff" stroke="#1b4247" strokeWidth="1.5" />
          {/* Linked Gear 3 */}
          <circle cx="30" cy="18" r="10" fill="#3d9ca8" stroke="#1b4247" strokeWidth="2" />
          <circle cx="30" cy="18" r="3.5" fill="#eedcae" />
        </g>

        {/* 10. Left Satellite Dish & Broadcast Waves */}
        <g transform="translate(85, 280)">
          {/* Tripod Stand */}
          <path d="M -16 45 L 0 10 L 16 45 M -26 45 L 26 45" stroke="#1b4247" strokeWidth="4" strokeLinecap="round" />
          {/* Parabolic Dish */}
          <path d="M -38 -10 Q 0 38 38 -10 Z" fill="#3d9ca8" stroke="#1b4247" strokeWidth="3.5" transform="rotate(-28)" />
          {/* LNB Receiver Arm */}
          <line x1="-12" y1="6" x2="16" y2="-22" stroke="#1b4247" strokeWidth="3" />
          <circle cx="18" cy="-24" r="4.5" fill="#d8a050" stroke="#1b4247" strokeWidth="2" />
          {/* Broadcast Radio Waves */}
          <path d="M 28 -34 Q 38 -38 42 -22" stroke="#1b4247" strokeWidth="3" fill="none" strokeLinecap="round" />
          <path d="M 36 -42 Q 52 -48 56 -26" stroke="#1b4247" strokeWidth="3" fill="none" strokeLinecap="round" />
          <path d="M 44 -50 Q 66 -58 70 -30" stroke="#1b4247" strokeWidth="3" fill="none" strokeLinecap="round" />
        </g>

        {/* 11. Coiled Cables, UK 3-Pin Plug & Connectors on Sand */}
        <g transform="translate(135, 305)">
          {/* Cable Looping */}
          <path d="M 0 25 Q 30 -5 55 20 T 95 20 T 140 15" fill="none" stroke="#1b4247" strokeWidth="4.5" strokeLinecap="round" />
          {/* Cable Spool / Wire Reel */}
          <g transform="translate(425, 60)">
            <ellipse cx="0" cy="0" rx="20" ry="8" fill="#cead67" stroke="#1b4247" strokeWidth="2.5" />
            <rect x="-20" y="0" width="40" height="16" fill="#d8a050" stroke="#1b4247" strokeWidth="2.5" />
            <ellipse cx="0" cy="16" rx="20" ry="8" fill="#cead67" stroke="#1b4247" strokeWidth="2.5" />
            <circle cx="0" cy="0" r="5" fill="#1b4247" />
          </g>
          {/* UK 3-Pin Plug on Beach */}
          <g transform="translate(180, 48) rotate(-15)">
            <rect x="-12" y="-10" width="24" height="20" rx="4" fill="#3d9ca8" stroke="#1b4247" strokeWidth="2.5" />
            <rect x="-8" y="-17" width="4" height="8" fill="#d8a050" stroke="#1b4247" strokeWidth="1.5" />
            <rect x="4" y="-17" width="4" height="8" fill="#d8a050" stroke="#1b4247" strokeWidth="1.5" />
            <rect x="-2" y="-22" width="4" height="10" fill="#d8a050" stroke="#1b4247" strokeWidth="1.5" />
          </g>
          {/* 2-Pin Plug on Beach */}
          <g transform="translate(85, 35)">
            <rect x="0" y="0" width="20" height="14" rx="3" fill="#d8a050" stroke="#1b4247" strokeWidth="2.5" />
            <line x1="20" y1="4" x2="26" y2="4" stroke="#1b4247" strokeWidth="2.5" strokeLinecap="round" />
            <line x1="20" y1="10" x2="26" y2="10" stroke="#1b4247" strokeWidth="2.5" strokeLinecap="round" />
          </g>
        </g>

        {/* 12. Left Palm Trees */}
        <g transform="translate(60, 95)">
          {/* Main Curved Trunk */}
          <path d="M 40 155 Q 65 85 90 20" fill="none" stroke="#1b4247" strokeWidth="10" strokeLinecap="round" />
          {/* Secondary Trunk */}
          <path d="M 115 165 Q 125 105 138 40" fill="none" stroke="#1b4247" strokeWidth="8.5" strokeLinecap="round" />
          {/* Lush Green/Teal Fronds */}
          <g stroke="#1a555e" strokeWidth="6" fill="none" strokeLinecap="round">
            <path d="M 90 20 Q 45 -10 5 12" />
            <path d="M 90 20 Q 135 -10 175 12" />
            <path d="M 90 20 Q 35 35 0 52" />
            <path d="M 90 20 Q 145 35 180 52" />
            <path d="M 90 20 Q 90 -30 90 -40" />
            <path d="M 138 40 Q 100 18 70 32" />
            <path d="M 138 40 Q 175 18 205 32" />
            <path d="M 138 40 Q 100 55 75 70" />
            <path d="M 138 40 Q 175 55 200 70" />
          </g>
        </g>

        {/* 13. Beach Lounge Chairs & Gear Umbrella */}
        <g transform="translate(210, 180)">
          {/* Umbrella Pole */}
          <line x1="80" y1="125" x2="80" y2="15" stroke="#1b4247" strokeWidth="5.5" strokeLinecap="round" />
          {/* Umbrella Canopy */}
          <path d="M 15 28 Q 80 -25 145 28 Z" fill="#3d9ca8" stroke="#1b4247" strokeWidth="3.5" />
          {/* Gears on Umbrella Canopy */}
          <circle cx="50" cy="14" r="7" fill="#d8a050" stroke="#1b4247" strokeWidth="2" />
          <circle cx="110" cy="14" r="7" fill="#d8a050" stroke="#1b4247" strokeWidth="2" />
          <circle cx="80" cy="-20" r="9" fill="#d8a050" stroke="#1b4247" strokeWidth="2.5" />
          {/* Wooden / Teal Lounge Chairs */}
          {/* Chair 1 (Left - Striped / Sand) */}
          <path d="M 10 115 L 38 65 L 68 115 M 26 82 L 76 98" stroke="#1b4247" strokeWidth="4.5" strokeLinecap="round" fill="none" />
          <path d="M 28 80 L 65 95" stroke="#eedcae" strokeWidth="6" strokeLinecap="round" />
          {/* Chair 2 (Right - Teal) */}
          <path d="M 90 115 L 118 65 L 148 115 M 106 82 L 156 98" stroke="#1b4247" strokeWidth="4.5" strokeLinecap="round" fill="none" />
          <path d="M 108 80 L 145 95" stroke="#3d9ca8" strokeWidth="6" strokeLinecap="round" />
        </g>

        {/* 14. Sandcastle with Battlements & Embedded Gear */}
        <g transform="translate(420, 265)">
          {/* Main Castle Block */}
          <rect x="15" y="30" width="80" height="55" rx="4" fill="#cead67" stroke="#1b4247" strokeWidth="3.5" />
          {/* Castle Doorway */}
          <path d="M 45 85 L 45 62 Q 55 52 65 62 L 65 85 Z" fill="#1b4247" />
          {/* Castle Battlements / Merlons */}
          <rect x="15" y="20" width="16" height="12" fill="#cead67" stroke="#1b4247" strokeWidth="3" />
          <rect x="47" y="20" width="16" height="12" fill="#cead67" stroke="#1b4247" strokeWidth="3" />
          <rect x="79" y="20" width="16" height="12" fill="#cead67" stroke="#1b4247" strokeWidth="3" />
          {/* Center Tower */}
          <rect x="38" y="0" width="34" height="22" rx="3" fill="#cead67" stroke="#1b4247" strokeWidth="3" />
          {/* Mini Flag */}
          <line x1="55" y1="0" x2="55" y2="-16" stroke="#1b4247" strokeWidth="2.5" />
          <path d="M 55 -16 L 72 -9 L 55 -2 Z" fill="#3d9ca8" stroke="#1b4247" strokeWidth="2" />
          {/* Gear in Castle Tower */}
          <circle cx="55" cy="42" r="12" fill="#3d9ca8" stroke="#1b4247" strokeWidth="2.5" />
          <circle cx="55" cy="42" r="5" fill="#ffffff" />
        </g>

        {/* 15. Server Rack Sandcastle & Bus Cables on Right */}
        <g transform="translate(980, 225)">
          {/* Server Tower */}
          <rect x="20" y="20" width="65" height="95" rx="5" fill="#cead67" stroke="#1b4247" strokeWidth="3.5" />
          {/* Server Unit 1 */}
          <line x1="28" y1="38" x2="77" y2="38" stroke="#1b4247" strokeWidth="3" />
          <circle cx="34" cy="38" r="2.5" fill="#3d9ca8" />
          <circle cx="42" cy="38" r="2" fill="#4ade80" />
          {/* Server Unit 2 */}
          <line x1="28" y1="56" x2="77" y2="56" stroke="#1b4247" strokeWidth="3" />
          <circle cx="34" cy="56" r="2.5" fill="#3d9ca8" />
          <circle cx="42" cy="56" r="2" fill="#4ade80" />
          {/* Server Unit 3 */}
          <line x1="28" y1="74" x2="77" y2="74" stroke="#1b4247" strokeWidth="3" />
          <circle cx="34" cy="74" r="2.5" fill="#3d9ca8" />
          <circle cx="42" cy="74" r="2" fill="#4ade80" />
          {/* Server Unit 4 */}
          <line x1="28" y1="92" x2="77" y2="92" stroke="#1b4247" strokeWidth="3" />
          <circle cx="34" cy="92" r="2.5" fill="#3d9ca8" />
          <circle cx="42" cy="92" r="2" fill="#4ade80" />
          {/* Tower Castle Roof */}
          <path d="M 20 20 L 52.5 -8 L 85 20 Z" fill="#d8a050" stroke="#1b4247" strokeWidth="3.5" />

          {/* Network Bus Ribbon Cables going from server to tool tote bag */}
          <path d="M 20 60 Q -30 60 -30 95 Q -30 130 20 130" fill="none" stroke="#1b4247" strokeWidth="5" strokeLinecap="round" />
          <path d="M 20 75 Q -15 75 -15 105 Q -15 135 20 135" fill="none" stroke="#3d9ca8" strokeWidth="4" strokeLinecap="round" />
        </g>

        {/* 16. Tech Tool Tote Bag & Soldering Iron on Right Beach */}
        <g transform="translate(1005, 305)">
          {/* Tote Bag */}
          <rect x="0" y="20" width="105" height="65" rx="8" fill="#3d9ca8" stroke="#1b4247" strokeWidth="3.5" />
          {/* Bag Handles */}
          <path d="M 28 20 L 28 6 Q 52.5 -4 77 6 L 77 20" fill="none" stroke="#1b4247" strokeWidth="4.5" />
          {/* Tools sticking out (Chargers, Adapters, Screwdrivers) */}
          <rect x="15" y="32" width="28" height="24" rx="3" fill="#d8a050" stroke="#1b4247" strokeWidth="2.5" />
          <rect x="58" y="36" width="32" height="24" rx="3" fill="#ffffff" stroke="#1b4247" strokeWidth="2.5" />
          {/* Soldering Iron lying on sand */}
          <line x1="-38" y1="72" x2="6" y2="44" stroke="#1b4247" strokeWidth="4.5" strokeLinecap="round" />
          <circle cx="-42" cy="74" r="5" fill="#d8a050" stroke="#1b4247" strokeWidth="1.5" />
        </g>

        {/* 17. Right Palm Trees */}
        <g transform="translate(1070, 95)">
          <path d="M 75 160 Q 55 95 30 25" fill="none" stroke="#1b4247" strokeWidth="9" strokeLinecap="round" />
          <g stroke="#1a555e" strokeWidth="5.5" fill="none" strokeLinecap="round">
            <path d="M 30 25 Q -5 -2 -40 20" />
            <path d="M 30 25 Q 70 -2 100 20" />
            <path d="M 30 25 Q -15 48 -45 60" />
            <path d="M 30 25 Q 75 48 105 60" />
          </g>
        </g>

        {/* ==================== 18. THE LARGE CIRCULAR VINTAGE EMBLEM ==================== */}
        <g transform="translate(730, 205)">
          {/* Outer Teal Ring */}
          <circle cx="0" cy="0" r="172" fill="#ffffff" stroke="#3d9ca8" strokeWidth="10" />
          {/* Inner Sand/Gold Ring */}
          <circle cx="0" cy="0" r="158" fill="none" stroke="#d8a050" strokeWidth="4.5" />
          {/* Inner Teal Ring */}
          <circle cx="0" cy="0" r="148" fill="url(#emblemSky)" stroke="#3d9ca8" strokeWidth="3" />

          {/* Gears along the perimeter of the emblem */}
          {[-130, -100, -70, -40, 40, 70, 100, 130].map((angle, idx) => {
            const rad = (angle * Math.PI) / 180;
            const x = Math.sin(rad) * 165;
            const y = -Math.cos(rad) * 165;
            return (
              <g key={idx} transform={`translate(${x}, ${y})`}>
                <circle cx="0" cy="0" r="9" fill="#3d9ca8" stroke="#1b4247" strokeWidth="2" />
                <circle cx="0" cy="0" r="3.5" fill="#ffffff" />
              </g>
            );
          })}

          {/* Top Gear Anchor at 12 o'clock */}
          <g transform="translate(0, -165)">
            <circle cx="0" cy="0" r="12" fill="#3d9ca8" stroke="#1b4247" strokeWidth="2.5" />
            <circle cx="0" cy="0" r="5" fill="#d8a050" />
          </g>

          {/* Inside Emblem Scene (Clipped) */}
          <g clipPath="url(#emblemClip)">
            {/* Sun inside Emblem */}
            <circle cx="50" cy="-85" r="12" fill="#fffbe8" stroke="#d8a050" strokeWidth="2" />
            {/* Ocean Inside Emblem */}
            <path d="M -150 15 Q -50 -10 50 10 T 150 15 L 150 150 L -150 150 Z" fill="#3d9ca8" opacity="0.3" />

            {/* Big Cresting Wave on Left of Emblem */}
            <path
              d="M -145 35 Q -90 -40 -30 -30 Q -50 -10 -40 35 Z"
              fill="#2b818d"
              stroke="#1b4247"
              strokeWidth="3.5"
            />
            {/* Wave Foamy Splash */}
            <path
              d="M -30 -30 Q -20 -40 -15 -25 Q -10 -45 0 -30"
              fill="none"
              stroke="#ffffff"
              strokeWidth="3"
              strokeLinecap="round"
            />

            {/* Distant Sailboat inside Emblem */}
            <g transform="translate(-10, -45)">
              <path d="M 0 0 L 8 -16 L 12 0 Z" fill="#1b4247" />
            </g>

            {/* Wi-Fi Icon inside Emblem */}
            <g transform="translate(45, -60)">
              <path d="M -22 0 Q 0 -18 22 0" stroke="#1b4247" strokeWidth="3.5" fill="none" strokeLinecap="round" />
              <path d="M -14 8 Q 0 -5 14 8" stroke="#1b4247" strokeWidth="3" fill="none" strokeLinecap="round" />
              <circle cx="0" cy="16" r="3" fill="#1b4247" />
            </g>

            {/* Central Devices: Monitor with Gear, Tablet, Phone */}
            <g transform="translate(0, -10)">
              {/* Computer Monitor */}
              <rect x="-46" y="-32" width="92" height="58" rx="6" fill="#ffffff" stroke="#1b4247" strokeWidth="3.5" />
              {/* Monitor Stand */}
              <path d="M -58 26 L 58 26 L 50 33 L -50 33 Z" fill="#3d9ca8" stroke="#1b4247" strokeWidth="2.5" />
              {/* Gear on Monitor Screen */}
              <circle cx="0" cy="-3" r="15" fill="#3d9ca8" stroke="#1b4247" strokeWidth="3" />
              <circle cx="0" cy="-3" r="6" fill="#ffffff" />

              {/* Tablet (Left) */}
              <rect x="-84" y="-16" width="30" height="48" rx="4" fill="#ffffff" stroke="#1b4247" strokeWidth="3" />
              <circle cx="-69" cy="25" r="2.5" fill="#1b4247" />

              {/* Phone (Right) */}
              <rect x="56" y="-2" width="24" height="38" rx="4" fill="#ffffff" stroke="#1b4247" strokeWidth="3" />
              <circle cx="68" cy="29" r="2" fill="#1b4247" />

              {/* Palm Tree on Right side of Emblem */}
              <g transform="translate(105, -5)">
                <path d="M 0 40 Q -10 15 5 -18" fill="none" stroke="#1b4247" strokeWidth="4" strokeLinecap="round" />
                <path d="M 5 -18 Q -15 -28 -30 -12 M 5 -18 Q 20 -32 35 -12 M 5 -18 Q -20 -2 -25 15 M 5 -18 Q 25 -2 30 15" stroke="#1a555e" strokeWidth="3" fill="none" strokeLinecap="round" />
              </g>
            </g>
          </g>

          {/* Lower Curved Ribbon / White Banner Box for SIMPLY SORTED TECH */}
          <g transform="translate(0, 80)">
            <rect x="-142" y="-38" width="284" height="72" rx="14" fill="#ffffff" stroke="#3d9ca8" strokeWidth="5.5" />

            {/* Text: SIMPLY SORTED */}
            <text
              x="0"
              y="-3"
              textAnchor="middle"
              fill="#1b4247"
              fontFamily="Montserrat, sans-serif"
              fontWeight="900"
              fontSize="26"
              letterSpacing="0.8"
            >
              SIMPLY SORTED
            </text>

            {/* Decorative Flairs */}
            <path d="M -90 18 Q -70 10 -50 18 Q -35 24 -20 18" fill="none" stroke="#3d9ca8" strokeWidth="2.5" strokeLinecap="round" />
            <path d="M 90 18 Q 70 10 50 18 Q 35 24 20 18" fill="none" stroke="#3d9ca8" strokeWidth="2.5" strokeLinecap="round" />

            {/* Text: TECH */}
            <text
              x="0"
              y="22"
              textAnchor="middle"
              fill="#d8a050"
              fontFamily="Montserrat, sans-serif"
              fontWeight="900"
              fontSize="17"
              letterSpacing="4.5"
            >
              TECH
            </text>
          </g>
        </g>

        {/* 19. Outer Vintage Corner Frame Borders & Corner Gears */}
        <rect x="12" y="12" width="1176" height="396" rx="14" fill="none" stroke="#3d9ca8" strokeWidth="5" />
        <rect x="18" y="18" width="1164" height="384" rx="10" fill="none" stroke="#d8a050" strokeWidth="2.5" strokeDasharray="8 5" />

        {/* Top-Left Corner Gear */}
        <g transform="translate(30, 30)">
          <circle cx="0" cy="0" r="13" fill="#3d9ca8" stroke="#1b4247" strokeWidth="2.5" />
          <circle cx="0" cy="0" r="5" fill="#ffffff" />
        </g>
        {/* Top-Right Corner Gear */}
        <g transform="translate(1170, 30)">
          <circle cx="0" cy="0" r="13" fill="#3d9ca8" stroke="#1b4247" strokeWidth="2.5" />
          <circle cx="0" cy="0" r="5" fill="#ffffff" />
        </g>
        {/* Bottom-Left Corner Gear */}
        <g transform="translate(30, 390)">
          <circle cx="0" cy="0" r="13" fill="#d8a050" stroke="#1b4247" strokeWidth="2.5" />
          <circle cx="0" cy="0" r="5" fill="#ffffff" />
        </g>
        {/* Bottom-Right Corner Gear */}
        <g transform="translate(1170, 390)">
          <circle cx="0" cy="0" r="13" fill="#d8a050" stroke="#1b4247" strokeWidth="2.5" />
          <circle cx="0" cy="0" r="5" fill="#ffffff" />
        </g>
      </svg>
    </div>
  );
};