// landscape.jsx — Houston claymation hero scene for the Today screen.
function Landscape({ mode = 'day' }) {
  const day = mode === 'day';
  const id = `houston-${mode}`;
  const stars = [[40,34,1.3],[150,26,1.5],[214,60,1],[256,38,1.2],[60,80,1],[120,92,1],[300,108,1],[336,150,1]];
  const towers = [[114,15,150],[133,21,116],[156,14,132],[177,27,90],[205,18,112],[227,22,100],[252,15,134],[269,16,150],[287,14,150]];
  const Pine = ({ x, y, h, c }) => (
    <g fill={c}>
      <polygon points={`${x},${y-h} ${x-h*0.42},${y} ${x+h*0.42},${y}`} />
      <polygon points={`${x},${y-h*1.28} ${x-h*0.3},${y-h*0.5} ${x+h*0.3},${y-h*0.5}`} />
    </g>
  );

  return (
    <svg viewBox="0 0 390 250" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" style={{ display: 'block' }} aria-hidden="true">
      <defs>
        <linearGradient id={`sky-${id}`} x1="0" y1="0" x2="0" y2="1">
          {day ? (<><stop offset="0" stopColor="#3FAEB6" /><stop offset="0.55" stopColor="#67C5BD" /><stop offset="1" stopColor="#B8E5DA" /></>)
               : (<><stop offset="0" stopColor="#15224A" /><stop offset="0.5" stopColor="#5B3F77" /><stop offset="1" stopColor="#E68A52" /></>)}
        </linearGradient>
        <radialGradient id={`glow-${id}`} cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor={day ? '#FCE8A6' : '#F4E3A4'} stopOpacity={day ? 0.95 : 0.85} />
          <stop offset="1" stopColor={day ? '#FCE8A6' : '#F4E3A4'} stopOpacity="0" />
        </radialGradient>
        <linearGradient id={`bld-${id}`} x1="0" y1="0" x2="0.5" y2="1">
          {day ? (<><stop offset="0" stopColor="#97B6C0" /><stop offset="1" stopColor="#6E929C" /></>)
               : (<><stop offset="0" stopColor="#2E3460" /><stop offset="1" stopColor="#1A2040" /></>)}
        </linearGradient>
        <linearGradient id={`hillF-${id}`} x1="0" y1="0" x2="0" y2="1">
          {day ? (<><stop offset="0" stopColor="#73B392" /><stop offset="1" stopColor="#5A977A" /></>)
               : (<><stop offset="0" stopColor="#2A3C54" /><stop offset="1" stopColor="#1E2C44" /></>)}
        </linearGradient>
        <linearGradient id={`hillM-${id}`} x1="0" y1="0" x2="0" y2="1">
          {day ? (<><stop offset="0" stopColor="#59A754" /><stop offset="1" stopColor="#458D43" /></>)
               : (<><stop offset="0" stopColor="#243C31" /><stop offset="1" stopColor="#16271F" /></>)}
        </linearGradient>
        <linearGradient id={`hillN-${id}`} x1="0" y1="0" x2="0" y2="1">
          {day ? (<><stop offset="0" stopColor="#3F8543" /><stop offset="1" stopColor="#2E6C32" /></>)
               : (<><stop offset="0" stopColor="#16251C" /><stop offset="1" stopColor="#0F1A14" /></>)}
        </linearGradient>
        <linearGradient id={`oak-${id}`} x1="0.3" y1="0" x2="0.7" y2="1">
          {day ? (<><stop offset="0" stopColor="#519338" /><stop offset="1" stopColor="#39702F" /></>)
               : (<><stop offset="0" stopColor="#1E2C44" /><stop offset="1" stopColor="#121F38" /></>)}
        </linearGradient>
        <linearGradient id={`water-${id}`} x1="0" y1="0" x2="0.85" y2="0.5">
          {day ? (<><stop offset="0" stopColor="#52BDAC" /><stop offset="1" stopColor="#3AA08E" /></>)
               : (<><stop offset="0" stopColor="#E89A5E" /><stop offset="0.55" stopColor="#8E6CA0" /><stop offset="1" stopColor="#4E4C86" /></>)}
        </linearGradient>
        <linearGradient id={`soil-${id}`} x1="0" y1="0" x2="0" y2="1">
          {day ? (<><stop offset="0" stopColor="#A85C3C" /><stop offset="1" stopColor="#7A3A26" /></>)
               : (<><stop offset="0" stopColor="#4A2E24" /><stop offset="1" stopColor="#2E1B14" /></>)}
        </linearGradient>
        <filter id={`soft-${id}`} x="-40%" y="-40%" width="180%" height="180%">
          <feDropShadow dx="0" dy="3" stdDeviation="3.5" floodColor="#10240e" floodOpacity={day ? 0.22 : 0.45} />
        </filter>
      </defs>

      <rect width="390" height="250" fill={`url(#sky-${id})`} />
      <circle cx="306" cy="62" r="52" fill={`url(#glow-${id})`} />
      <circle cx="306" cy="62" r="23" fill={day ? '#FBD060' : '#F1E6BE'} />
      {day && <ellipse cx="298" cy="54" rx="9" ry="6" fill="#FFF3BE" opacity="0.85" />}
      {!day && <circle cx="299" cy="56" r="7" fill="#E2D6AE" opacity="0.4" />}
      {!day && <g fill="#FFFFFF">{stars.map(([x,y,r],i) => <circle key={i} cx={x} cy={y} r={r} opacity="0.85" />)}</g>}

      {day && (<>
        <g filter={`url(#soft-${id})`}>
          <g fill="#FBFEFB"><ellipse cx="72" cy="48" rx="30" ry="14" /><ellipse cx="100" cy="42" rx="20" ry="12" /><ellipse cx="50" cy="44" rx="16" ry="10" /></g>
        </g>
        <g fill="#E7F5EF" opacity="0.8"><ellipse cx="216" cy="40" rx="22" ry="9" /><ellipse cx="234" cy="36" rx="13" ry="7" /></g>
        <g stroke="#356C72" strokeWidth="1.4" fill="none" strokeLinecap="round" opacity="0.5"><path d="M150 70 q4 -4 8 0 q4 -4 8 0" /><path d="M171 80 q3 -3 6 0 q3 -3 6 0" /></g>
      </>)}

      <g filter={`url(#soft-${id})`} fill={`url(#bld-${id})`}>
        {towers.map(([x,w,top],i) => (<rect key={i} x={x} y={top} width={w} height={188 - top} rx="2.5" />))}
        <polygon points="177,90 204,90 196,80 185,80" />
        <rect x="189" y="66" width="3" height="15" rx="1" />
        <polygon points="205,112 223,112 214,100" />
        <rect x="259" y="118" width="1.6" height="16" rx="0.8" />
        <polygon points="133,116 154,116 154,109 143.5,103 133,109" />
      </g>
      <g fill={day ? '#6E8E9A' : '#F6CC72'}>
        {towers.flatMap(([x,w,top],i) => {
          const cells = [];
          for (let yy = top + 6; yy < 186; yy += 9) for (let xx = x + 3; xx < x + w - 2; xx += 6) {
            const lit = ((xx * 3 + yy + i) % 4) === 0;
            if (day || lit) cells.push(<rect key={`${i}-${xx}-${yy}`} x={xx} y={yy} width="2.2" height="3" rx="0.5" opacity={day ? 0.26 : 0.95} />);
          }
          return cells;
        })}
      </g>

      <path d="M0 250 L0 162 C70 150 150 168 220 156 C290 146 342 162 390 156 L390 250 Z" fill={`url(#hillF-${id})`} />
      <path d="M0 162 C70 150 150 168 220 156 C290 146 342 162 390 156" fill="none" stroke={day ? '#9FD08A' : '#3C5068'} strokeWidth="2" opacity="0.5" />
      <g>{[8,20,31,42,54,66].map((x,i) => <Pine key={'pl'+i} x={x} y={161-(i%2)*2} h={13+(i%3)*3} c={day ? '#2F7A58' : '#19293A'} />)}{[316,328,340,352,364,376].map((x,i) => <Pine key={'pr'+i} x={x} y={159-(i%2)*2} h={12+(i%3)*3} c={day ? '#2F7A58' : '#19293A'} />)}</g>

      <path d="M0 250 L0 184 C90 172 180 192 270 182 C330 175 360 186 390 182 L390 250 Z" fill={`url(#hillM-${id})`} />
      <path d="M0 184 C90 172 180 192 270 182 C330 175 360 186 390 182" fill="none" stroke={day ? '#A6CB5B' : '#C98A5E'} strokeWidth="2" opacity={day ? 0.6 : 0.4} />

      <path d="M-12 200 C60 188 120 212 200 200 C272 190 332 210 402 196 L402 214 C332 228 272 208 200 218 C120 230 60 202 -12 218 Z" fill={`url(#water-${id})`} />
      <path d="M-12 201 C60 189 120 213 200 201 C272 191 332 211 402 197" fill="none" stroke={day ? '#CFF1E6' : '#F4C792'} strokeWidth="2" strokeLinecap="round" opacity="0.6" />

      <path d="M0 250 L0 210 C100 200 200 220 300 210 C340 206 370 214 390 212 L390 250 Z" fill={`url(#hillN-${id})`} />
      <path d="M0 210 C100 200 200 220 300 210 C340 206 370 214 390 212" fill="none" stroke={day ? '#7FB44E' : '#B97A4A'} strokeWidth="1.8" opacity={day ? 0.5 : 0.3} />

      <g filter={`url(#soft-${id})`}>
        <ellipse cx="50" cy="231" rx="30" ry="6" fill="#0a1408" opacity={day ? 0.14 : 0.34} />
        <path d="M46 233 C45 223 44 214 47 205 C50 214 51 223 50 233 Z" fill={day ? '#6E4A2E' : '#15111E'} />
        <path d="M47 214 L36 205 M47 210 L58 202" stroke={day ? '#6E4A2E' : '#15111E'} strokeWidth="2.4" strokeLinecap="round" />
        <g fill={`url(#oak-${id})`}>
          <ellipse cx="48" cy="196" rx="29" ry="20" /><ellipse cx="26" cy="202" rx="15" ry="13" /><ellipse cx="68" cy="202" rx="15" ry="13" /><ellipse cx="48" cy="185" rx="18" ry="13" />
        </g>
        {day ? (<g fill="#8ECB5F" opacity="0.85"><ellipse cx="40" cy="185" rx="13" ry="8" /><ellipse cx="58" cy="191" rx="9" ry="6" /></g>)
             : (<ellipse cx="42" cy="186" rx="12" ry="7" fill="#2E4258" opacity="0.8" />)}
      </g>
      <g filter={`url(#soft-${id})`}>
        <ellipse cx="340" cy="232" rx="24" ry="5" fill="#0a1408" opacity={day ? 0.14 : 0.34} />
        <path d="M337 233 C336 224 336 216 339 208 C342 216 342 224 341 233 Z" fill={day ? '#6E4A2E' : '#15111E'} />
        <g fill={`url(#oak-${id})`}>
          <ellipse cx="340" cy="200" rx="23" ry="16" /><ellipse cx="324" cy="205" rx="12" ry="10" /><ellipse cx="356" cy="205" rx="12" ry="10" />
        </g>
        {day && <ellipse cx="333" cy="192" rx="10" ry="6" fill="#8ECB5F" opacity="0.85" />}
      </g>

      <path d="M0 250 L0 240 C90 234 180 244 270 238 C330 234 362 242 390 239 L390 250 Z" fill={`url(#soil-${id})`} />
      <g stroke={day ? '#C77A52' : '#6E4332'} strokeWidth="1.6" fill="none" strokeLinecap="round" opacity="0.85">
        <path d="M60 240 C58 244 62 246 60 250" /><path d="M150 242 C148 246 152 247 150 250" /><path d="M250 239 C248 244 252 246 250 250" /><path d="M330 241 C328 245 332 247 330 250" /><path d="M105 241 C104 245 106 248 105 250" /><path d="M200 243 C199 246 201 248 200 250" />
      </g>
    </svg>
  );
}

Object.assign(window, { Landscape });