/* global React */
// Construction site illustration for the hero — dramatic wide-angle monochrome,
// column pour on an active Mysore site with RMC truck, workers + UltraTech bags.

const ConstructionSiteScene = () => (
  <svg viewBox="0 0 800 1100" preserveAspectRatio="xMidYMid slice"
       style={{ width: '100%', height: '100%', display: 'block' }}
       aria-label="Active construction site in Mysore — RMC truck, workers, columns being poured">

    {/* ==== SKY / DUST HAZE ==== */}
    <defs>
      <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#2A2825"/>
        <stop offset="45%" stopColor="#1E1C1A"/>
        <stop offset="100%" stopColor="#141311"/>
      </linearGradient>
      <linearGradient id="dust" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#3A3733" stopOpacity="0"/>
        <stop offset="60%" stopColor="#3A3733" stopOpacity="0.55"/>
        <stop offset="100%" stopColor="#1A1816" stopOpacity="0.9"/>
      </linearGradient>
      <pattern id="grain" width="3" height="3" patternUnits="userSpaceOnUse">
        <rect width="3" height="3" fill="#1A1816"/>
        <rect x="0" y="0" width="1" height="1" fill="#2A2724" opacity="0.4"/>
      </pattern>
    </defs>

    <rect width="800" height="1100" fill="url(#sky)"/>

    {/* sun disk low in the haze — Mysore morning */}
    <circle cx="560" cy="240" r="70" fill="#3A3630" opacity="0.55"/>
    <circle cx="560" cy="240" r="42" fill="#4A443A" opacity="0.7"/>

    {/* distant city skyline — Mysore Palace silhouette hint + low rises */}
    <g fill="#1A1816" opacity="0.95">
      <rect x="0"   y="430" width="80"  height="90"/>
      <rect x="72"  y="410" width="60"  height="110"/>
      {/* palace domes */}
      <rect x="132" y="420" width="70"  height="100"/>
      <path d="M155 420 Q167 395 179 420" fill="#1A1816"/>
      <circle cx="167" cy="402" r="4" fill="#2A2724"/>
      <rect x="202" y="440" width="40"  height="80"/>
      <rect x="242" y="425" width="70"  height="95"/>
      <path d="M260 425 Q277 405 294 425" fill="#1A1816"/>
      <rect x="312" y="445" width="55"  height="75"/>
      <rect x="420" y="435" width="80"  height="85"/>
      <rect x="500" y="450" width="45"  height="70"/>
      <rect x="545" y="420" width="65"  height="100"/>
      <rect x="610" y="445" width="50"  height="75"/>
      <rect x="660" y="430" width="70"  height="90"/>
      <rect x="730" y="450" width="70"  height="70"/>
    </g>
    {/* tiny pin lights on distant buildings */}
    <g fill="#F0C000" opacity="0.5">
      <rect x="42"  y="460" width="2" height="2"/>
      <rect x="90"  y="450" width="2" height="2"/>
      <rect x="160" y="455" width="2" height="2"/>
      <rect x="270" y="460" width="2" height="2"/>
      <rect x="450" y="470" width="2" height="2"/>
      <rect x="580" y="450" width="2" height="2"/>
      <rect x="690" y="460" width="2" height="2"/>
    </g>

    {/* dust haze over horizon */}
    <rect x="0" y="380" width="800" height="220" fill="url(#dust)"/>

    {/* ==== BACKGROUND: SCAFFOLDED HIGH-RISE SHELL ==== */}
    <g>
      {/* main concrete tower under construction (left bg) */}
      <rect x="40"  y="140" width="260" height="440" fill="#252220"/>
      <rect x="40"  y="140" width="260" height="440" fill="url(#grain)" opacity="0.4"/>
      {/* floor slabs */}
      {Array.from({length: 6}).map((_,i)=> (
        <rect key={i} x="36" y={180 + i*70} width="268" height="4" fill="#0E0D0C"/>
      ))}
      {/* vertical columns exposed */}
      {Array.from({length: 5}).map((_,i)=> (
        <rect key={i} x={60 + i*50} y="140" width="16" height="440" fill="#1A1816"/>
      ))}
      {/* scaffolding — horizontal & diagonal tubes */}
      <g stroke="#5A5650" strokeWidth="1.5" fill="none" opacity="0.85">
        {/* horizontals */}
        {Array.from({length: 9}).map((_,i)=> (
          <line key={'h'+i} x1="30" y1={160 + i*50} x2="310" y2={160 + i*50}/>
        ))}
        {/* verticals */}
        {Array.from({length: 7}).map((_,i)=> (
          <line key={'v'+i} x1={45 + i*44} y1="140" x2={45 + i*44} y2="580"/>
        ))}
        {/* diagonals */}
        {Array.from({length: 6}).map((_,i)=> (
          <line key={'d'+i} x1={45 + i*44} y1={160 + i*60} x2={89 + i*44} y2={210 + i*60}/>
        ))}
      </g>
      {/* mesh net on right side */}
      <g fill="#2E2B28" opacity="0.6">
        <rect x="280" y="150" width="28" height="420"/>
      </g>
      {/* crane jib sticking out at top */}
      <g stroke="#F0C000" strokeWidth="3" fill="none">
        <line x1="170" y1="140" x2="170" y2="40"/>
        <line x1="170" y1="50" x2="410" y2="80"/>
        <line x1="170" y1="60" x2="400" y2="80"/>
        {/* cable */}
        <line x1="340" y1="78" x2="340" y2="210" stroke="#C9BFB2" strokeWidth="1"/>
      </g>
      {/* hook hanging */}
      <rect x="332" y="210" width="16" height="10" fill="#1A1816" stroke="#C9BFB2" strokeWidth="1"/>
      {/* counterweight */}
      <rect x="150" y="45" width="40" height="20" fill="#F0C000"/>
    </g>

    {/* ==== MID: IN-PROGRESS COLUMNS BEING POURED ==== */}
    <g>
      {/* rebar cage column #1 (tall) */}
      <g transform="translate(400,340)">
        {/* concrete pour on bottom */}
        <rect x="-18" y="180" width="36" height="280" fill="#3A3631"/>
        <rect x="-18" y="180" width="36" height="280" fill="url(#grain)" opacity="0.5"/>
        {/* formwork stripes */}
        <line x1="-18" y1="220" x2="18" y2="220" stroke="#0E0D0C" strokeWidth="1.5"/>
        <line x1="-18" y1="280" x2="18" y2="280" stroke="#0E0D0C" strokeWidth="1.5"/>
        <line x1="-18" y1="340" x2="18" y2="340" stroke="#0E0D0C" strokeWidth="1.5"/>
        <line x1="-18" y1="400" x2="18" y2="400" stroke="#0E0D0C" strokeWidth="1.5"/>
        {/* exposed rebar cage at top */}
        <g stroke="#8A7A4A" strokeWidth="1.5" fill="none">
          <line x1="-14" y1="0"   x2="-14" y2="180"/>
          <line x1="-4"  y1="0"   x2="-4"  y2="180"/>
          <line x1="4"   y1="0"   x2="4"   y2="180"/>
          <line x1="14"  y1="0"   x2="14"  y2="180"/>
          {/* stirrups */}
          {Array.from({length: 9}).map((_,i)=> (
            <rect key={i} x="-16" y={i*22} width="32" height="3" fill="none" stroke="#8A7A4A"/>
          ))}
        </g>
      </g>

      {/* shorter column #2 */}
      <g transform="translate(260,460)">
        <rect x="-14" y="80" width="28" height="260" fill="#3A3631"/>
        <rect x="-14" y="80" width="28" height="260" fill="url(#grain)" opacity="0.4"/>
        {Array.from({length: 4}).map((_,i)=> (
          <line key={i} x1="-14" y1={120+i*50} x2="14" y2={120+i*50} stroke="#0E0D0C" strokeWidth="1"/>
        ))}
        <g stroke="#8A7A4A" strokeWidth="1.2" fill="none">
          <line x1="-10" y1="0" x2="-10" y2="80"/>
          <line x1="10"  y1="0" x2="10"  y2="80"/>
          {Array.from({length: 4}).map((_,i)=> (
            <rect key={i} x="-12" y={i*22} width="24" height="2" fill="none" stroke="#8A7A4A"/>
          ))}
        </g>
      </g>

      {/* column #3 right */}
      <g transform="translate(640,410)">
        <rect x="-20" y="130" width="40" height="330" fill="#3A3631"/>
        <rect x="-20" y="130" width="40" height="330" fill="url(#grain)" opacity="0.5"/>
        {Array.from({length: 5}).map((_,i)=> (
          <line key={i} x1="-20" y1={170+i*60} x2="20" y2={170+i*60} stroke="#0E0D0C" strokeWidth="1.5"/>
        ))}
        <g stroke="#8A7A4A" strokeWidth="1.5" fill="none">
          <line x1="-14" y1="0" x2="-14" y2="130"/>
          <line x1="-5"  y1="0" x2="-5"  y2="130"/>
          <line x1="5"   y1="0" x2="5"   y2="130"/>
          <line x1="14"  y1="0" x2="14"  y2="130"/>
          {Array.from({length: 6}).map((_,i)=> (
            <rect key={i} x="-16" y={i*22} width="32" height="2" fill="none" stroke="#8A7A4A"/>
          ))}
        </g>
      </g>
    </g>

    {/* ==== RMC MIXER TRUCK (center-right mid-ground) ==== */}
    <g transform="translate(440,650)">
      {/* chassis shadow */}
      <ellipse cx="130" cy="165" rx="170" ry="10" fill="#0A0A08" opacity="0.7"/>

      {/* rear drum (iconic RMC shape) */}
      <g>
        <ellipse cx="170" cy="92" rx="78" ry="48" fill="#F0C000"/>
        <ellipse cx="170" cy="92" rx="78" ry="48" fill="url(#grain)" opacity="0.15"/>
        {/* drum spiral bands */}
        <g stroke="#1A1816" strokeWidth="2" fill="none" opacity="0.85">
          <path d="M108 100 Q170 72 232 100"/>
          <path d="M102 92  Q170 60 238 92"/>
          <path d="M108 84  Q170 52 232 84"/>
        </g>
        {/* drum front cap */}
        <ellipse cx="240" cy="92" rx="12" ry="30" fill="#1A1816"/>
        {/* discharge chute */}
        <path d="M95 115 L60 160 L80 165 L110 122 Z" fill="#C9BFB2"/>
        <path d="M60 160 L52 170 L76 172 L80 165 Z" fill="#3A3631"/>
        {/* concrete pouring out of chute */}
        <path d="M62 165 Q66 185 60 210 L74 210 Q70 185 76 167 Z" fill="#5A554C"/>
        <ellipse cx="68" cy="210" rx="14" ry="4" fill="#5A554C"/>
        {/* drum label — UltraTech yellow block */}
        <rect x="140" y="82" width="60" height="22" fill="#1A1816"/>
        <text x="170" y="97" fill="#F0C000" fontFamily="Arial, sans-serif"
              fontSize="10" fontWeight="900" textAnchor="middle" letterSpacing="1">ULTRATECH</text>
        <text x="170" y="108" fill="#C9BFB2" fontFamily="Arial, sans-serif"
              fontSize="6" textAnchor="middle" letterSpacing="2">RMC · M35</text>
      </g>

      {/* cab */}
      <g>
        <rect x="260" y="70" width="70" height="90" fill="#1A1816"/>
        {/* windshield */}
        <path d="M268 80 L328 80 L322 120 L268 120 Z" fill="#3A3733"/>
        <path d="M268 80 L328 80 L322 100 L268 100 Z" fill="#4A453E"/>
        {/* bumper */}
        <rect x="258" y="145" width="74" height="18" fill="#0E0D0C"/>
        {/* headlight */}
        <rect x="322" y="125" width="10" height="8" fill="#F0C000"/>
        {/* door line */}
        <line x1="300" y1="100" x2="300" y2="160" stroke="#0A0A08" strokeWidth="1"/>
        {/* side mirror */}
        <rect x="254" y="88" width="6" height="14" fill="#0A0A08"/>
      </g>

      {/* chassis frame between cab and drum */}
      <rect x="100" y="140" width="170" height="14" fill="#1A1816"/>

      {/* wheels */}
      <g fill="#0A0A08">
        <circle cx="120" cy="165" r="18"/>
        <circle cx="160" cy="165" r="18"/>
        <circle cx="240" cy="165" r="18"/>
        <circle cx="295" cy="165" r="18"/>
      </g>
      <g fill="#3A3733">
        <circle cx="120" cy="165" r="8"/>
        <circle cx="160" cy="165" r="8"/>
        <circle cx="240" cy="165" r="8"/>
        <circle cx="295" cy="165" r="8"/>
      </g>
    </g>

    {/* ==== FOREGROUND GROUND PLANE ==== */}
    <g>
      {/* dusty concrete floor */}
      <rect x="0" y="820" width="800" height="280" fill="#1A1816"/>
      <rect x="0" y="820" width="800" height="280" fill="url(#grain)" opacity="0.6"/>
      {/* site puddles / concrete splash */}
      <ellipse cx="170" cy="880" rx="80" ry="8" fill="#0E0D0C"/>
      <ellipse cx="540" cy="910" rx="110" ry="10" fill="#0E0D0C"/>
      {/* tire tracks */}
      <g stroke="#2A2724" strokeWidth="4" fill="none" opacity="0.8">
        <line x1="0"   y1="960"  x2="800" y2="940"/>
        <line x1="0"   y1="980"  x2="800" y2="960"/>
      </g>
    </g>

    {/* ==== STACKED ULTRATECH CEMENT BAGS (foreground left) ==== */}
    <g transform="translate(40,820)">
      {/* pallet */}
      <rect x="-10" y="180" width="260" height="12" fill="#3A3631"/>
      <rect x="-10" y="192" width="260" height="4" fill="#0A0A08"/>

      {/* 3 rows of bags */}
      {Array.from({length: 3}).map((_, row) => (
        <g key={row} transform={`translate(${row*4}, ${-row*32})`}>
          {Array.from({length: 5}).map((_, col) => (
            <g key={col} transform={`translate(${col*50}, 148)`}>
              {/* bag body */}
              <path d="M0 0 L46 0 L48 32 L-2 32 Z" fill="#F0C000"/>
              <path d="M0 0 L46 0 L48 32 L-2 32 Z" fill="url(#grain)" opacity="0.18"/>
              {/* side shadow */}
              <path d="M44 1 L46 0 L48 32 L46 32 Z" fill="#B89200"/>
              {/* top flap */}
              <path d="M0 0 L46 0 L44 3 L2 3 Z" fill="#B89200"/>
              {/* label stripe */}
              <rect x="2" y="10" width="44" height="11" fill="#1A1816"/>
              <text x="24" y="18" fill="#F0C000"
                    fontFamily="Arial, sans-serif" fontSize="5.5" fontWeight="900"
                    textAnchor="middle" letterSpacing="0.4">ULTRATECH</text>
              <text x="24" y="25" fill="#C9BFB2"
                    fontFamily="Arial, sans-serif" fontSize="3.5"
                    textAnchor="middle" letterSpacing="1">OPC 53 · 50 KG</text>
            </g>
          ))}
        </g>
      ))}

      {/* one bag tipped forward at base */}
      <g transform="translate(-30, 188)">
        <path d="M0 0 L50 -4 L54 28 L4 30 Z" fill="#F0C000"/>
        <rect x="8" y="8" width="38" height="10" fill="#1A1816" transform="rotate(-4 27 13)"/>
      </g>
    </g>

    {/* ==== TWO WORKERS (foreground right) ==== */}
    {/* worker A — near RMC chute, guiding flow */}
    <g transform="translate(440,880)">
      {/* shadow */}
      <ellipse cx="18" cy="158" rx="26" ry="5" fill="#0A0A08" opacity="0.6"/>
      {/* legs */}
      <rect x="6"  y="100" width="10" height="58" fill="#1A1816"/>
      <rect x="20" y="100" width="10" height="58" fill="#1A1816"/>
      {/* boots */}
      <rect x="4"  y="152" width="14" height="6" fill="#0A0A08"/>
      <rect x="20" y="152" width="14" height="6" fill="#0A0A08"/>
      {/* torso — hi-vis gilet */}
      <path d="M2 52 L34 52 L38 108 L-2 108 Z" fill="#C9BFB2"/>
      <rect x="8" y="62" width="20" height="42" fill="#3A3631"/>
      {/* reflective bands */}
      <rect x="2" y="82" width="36" height="3" fill="#F0C000"/>
      <rect x="2" y="96" width="36" height="3" fill="#F0C000"/>
      {/* arms */}
      <rect x="-8" y="54" width="10" height="40" fill="#C9BFB2" transform="rotate(-14 -3 54)"/>
      <rect x="34" y="54" width="10" height="40" fill="#C9BFB2" transform="rotate(18 39 54)"/>
      {/* head */}
      <circle cx="18" cy="44" r="11" fill="#3A2E22"/>
      {/* hard hat — yellow */}
      <path d="M4 42 Q18 20 32 42 L32 46 L4 46 Z" fill="#F0C000"/>
      <rect x="4" y="44" width="28" height="3" fill="#B89200"/>
    </g>

    {/* worker B — carrying bag, walking */}
    <g transform="translate(640,870)">
      <ellipse cx="16" cy="168" rx="30" ry="5" fill="#0A0A08" opacity="0.6"/>
      {/* legs mid-stride */}
      <g>
        <rect x="4"  y="110" width="10" height="56" fill="#1A1816" transform="rotate(-8 9 138)"/>
        <rect x="20" y="110" width="10" height="56" fill="#1A1816" transform="rotate(10 25 138)"/>
      </g>
      <rect x="-2" y="160" width="16" height="6" fill="#0A0A08"/>
      <rect x="22" y="160" width="16" height="6" fill="#0A0A08"/>
      {/* torso */}
      <path d="M2 58 L34 58 L36 112 L0 112 Z" fill="#8A7A4A"/>
      <rect x="2" y="78" width="34" height="3" fill="#F0C000"/>
      <rect x="2" y="92" width="34" height="3" fill="#F0C000"/>
      {/* cement bag on shoulder */}
      <g transform="translate(4,28) rotate(-8)">
        <rect x="0" y="0" width="52" height="30" fill="#F0C000"/>
        <rect x="0" y="0" width="52" height="30" fill="url(#grain)" opacity="0.2"/>
        <rect x="4" y="10" width="44" height="10" fill="#1A1816"/>
        <text x="26" y="18" fill="#F0C000"
              fontFamily="Arial, sans-serif" fontSize="5.5" fontWeight="900"
              textAnchor="middle" letterSpacing="0.4">ULTRATECH</text>
      </g>
      {/* arms holding bag */}
      <rect x="-6" y="48" width="10" height="22" fill="#3A2E22" transform="rotate(-50 -1 58)"/>
      <rect x="36" y="48" width="10" height="22" fill="#3A2E22" transform="rotate(50 41 58)"/>
      {/* head */}
      <circle cx="17" cy="52" r="10" fill="#3A2E22"/>
      {/* yellow hard hat */}
      <path d="M5 50 Q17 30 29 50 L29 54 L5 54 Z" fill="#F0C000"/>
      <rect x="5" y="52" width="24" height="3" fill="#B89200"/>
    </g>

    {/* ==== ATMOSPHERIC DUST PARTICLES ==== */}
    <g fill="#5A554C" opacity="0.3">
      {Array.from({length: 50}).map((_,i)=>(
        <circle key={i}
          cx={(i*73) % 800}
          cy={400 + (i*47) % 400}
          r={(i%3)+1}/>
      ))}
    </g>

    {/* subtle vignette */}
    <radialGradient id="vig" cx="50%" cy="50%" r="75%">
      <stop offset="60%" stopColor="#000" stopOpacity="0"/>
      <stop offset="100%" stopColor="#000" stopOpacity="0.55"/>
    </radialGradient>
    <rect width="800" height="1100" fill="url(#vig)"/>
  </svg>
);

Object.assign(window, { ConstructionSiteScene });