// Background — Colleen × Sam — coastal Florida
// Sunset (default) or Midday. Soft horizon, gentle light, drifting motes.

function CoastBg({ t, mood = 'sunset', motionLevel = 1, offline }) {
  const sunset = mood === 'sunset';

  // Caribbean-turquoise water dominates; pale khaki/white sand only at the very bottom
  const sky = sunset
    ? 'linear-gradient(180deg, #06324c 0%, #0a6f96 20%, #1494bc 38%, #2bbdd6 54%, #57d6e2 66%, #9fe4dd 76%, #cdcfa2 88%, #e6dcc0 95%, #f1ead6 100%)'
    : 'linear-gradient(180deg, #075a78 0%, #0a86aa 20%, #15a8cc 38%, #34c8de 54%, #62d9e6 66%, #9fe6dd 78%, #d2cdaa 90%, #efe7d2 100%)';

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: '#06201f' }}>
      {/* Sky / sea gradient */}
      <div style={{ position: 'absolute', inset: 0, background: sky, opacity: offline ? 0.5 : 0.9 }} />

      {/* Sun glow low on the horizon */}
      <div style={{
        position: 'absolute', left: '50%', bottom: '20%',
        width: 420, height: 420, transform: 'translate(-50%, 50%)',
        borderRadius: '50%',
        background: sunset
          ? `radial-gradient(circle, ${COAST.goldHi}cc 0%, ${COAST.gold}66 25%, ${COAST.goldLo}22 45%, transparent 70%)`
          : `radial-gradient(circle, #ffffffcc 0%, ${COAST.aqua}66 30%, ${COAST.tealHi}22 50%, transparent 72%)`,
        filter: 'blur(8px)',
        opacity: offline ? 0.35 : (0.8 + Math.sin(t * 0.4) * 0.05),
      }} />

      {/* Horizon line shimmer */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: '28%', height: 2,
        background: sunset
          ? `linear-gradient(90deg, transparent, ${COAST.goldHi}aa 50%, transparent)`
          : `linear-gradient(90deg, transparent, #ffffffaa 50%, transparent)`,
        filter: 'blur(1px)', opacity: 0.7,
      }} />

      {/* Water reflection — shimmering bands below horizon */}
      <svg style={{ position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height: '32%' }}
           viewBox="0 0 100 30" preserveAspectRatio="none">
        {Array.from({ length: 9 }, (_, i) => {
          const y = 2 + i * 3.2;
          const w = 18 + Math.sin(t * 1.2 + i) * 10;
          const x = 50 - w / 2;
          const op = (0.18 - i * 0.015) * (offline ? 0.4 : 1);
          return <rect key={i} x={x} y={y} width={w} height={0.7} rx={0.35}
            fill={sunset ? COAST.goldHi : '#ffffff'} opacity={Math.max(0, op)} />;
        })}
      </svg>

      {/* Soft drifting light motes — like sun sparkles / dust */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
           viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
        {React.useMemo(() => {
          const rand = clSeedRand(19);
          return Array.from({ length: 36 }, () => ({
            x: rand() * 100, y: rand() * 70, r: 0.3 + rand() * 0.8,
            sp: 0.6 + rand() * 1.2, ph: rand() * Math.PI * 2,
          }));
        }, []).map((m, i) => {
          const op = (0.15 + Math.abs(Math.sin(t * m.sp + m.ph)) * 0.35) * (offline ? 0.4 : 1);
          const yy = (m.y + Math.sin(t * 0.2 + m.ph) * 2);
          return <circle key={i} cx={m.x} cy={yy} r={m.r * 0.5}
            fill={sunset ? COAST.goldHi : '#ffffff'} opacity={op} />;
        })}
      </svg>

      {/* Top vignette for text legibility */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: '30%',
        background: 'linear-gradient(180deg, rgba(4,24,23,0.7) 0%, transparent 100%)',
        pointerEvents: 'none',
      }} />
      {/* Bottom vignette for dock legibility */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, height: '28%',
        background: 'linear-gradient(0deg, rgba(4,24,23,0.7) 0%, transparent 100%)',
        pointerEvents: 'none',
      }} />
    </div>
  );
}

window.CoastBg = CoastBg;