// scenes.jsx — SVG mountainscapes + wordmark for Voss Halal
// Three palettes: midnight (dramatic night), daybreak (editorial mist), stone (earthy luxury)

const PALETTES = {
  midnight: {
    name: 'Midnight',
    sky: ['#0b1118', '#141d27', '#1d2a37'],
    far:  '#27384a',
    mid:  '#1a2837',
    near: '#0c151e',
    water:'#3e5a78',
    accent:'#cfd9e3',
    ink:  '#f3efe6',
    inkSoft: 'rgba(243,239,230,0.62)',
    rule: 'rgba(243,239,230,0.18)',
    paper:'#0b1118',
    field:'rgba(255,255,255,0.06)',
    fieldBorder:'rgba(243,239,230,0.22)',
    btn:  '#f3efe6',
    btnInk:'#0b1118',
    mistOpacity: 0.55,
    sheep: '#e7dfd1',
  },
  daybreak: {
    name: 'Daybreak',
    sky: ['#f4ede2', '#ede2d0', '#dcd1bd'],
    far:  '#bcb9a8',
    mid:  '#8e9087',
    near: '#3f4540',
    water:'#a9b6b1',
    accent:'#3f4540',
    ink:  '#1f2520',
    inkSoft: 'rgba(31,37,32,0.62)',
    rule: 'rgba(31,37,32,0.16)',
    paper:'#f4ede2',
    field:'rgba(31,37,32,0.04)',
    fieldBorder:'rgba(31,37,32,0.22)',
    btn:  '#1f2520',
    btnInk:'#f4ede2',
    mistOpacity: 0.7,
    sheep: '#1f2520',
  },
  stone: {
    name: 'Stone',
    sky: ['#efe6d4', '#e3d6bd', '#cab79a'],
    far:  '#a89478',
    mid:  '#6f5b3f',
    near: '#3a2f22',
    water:'#8a8364',
    accent:'#3a2f22',
    ink:  '#2a2117',
    inkSoft: 'rgba(42,33,23,0.6)',
    rule: 'rgba(42,33,23,0.18)',
    paper:'#efe6d4',
    field:'rgba(42,33,23,0.04)',
    fieldBorder:'rgba(42,33,23,0.25)',
    btn:  '#2a2117',
    btnInk:'#efe6d4',
    mistOpacity: 0.55,
    sheep: '#2a2117',
  },
};

// ─────────────────────────────────────────────
// Mountainscape — fixed 1600x1080 viewBox; scales to parent
// ─────────────────────────────────────────────
function Mountainscape({ palette, withSheep = true, scene = 'pool', id = 'm' }) {
  const p = PALETTES[palette];
  const gid = `grad-${id}`;
  const mid = `mist-${id}`;
  const mistFilter = `${gid}-mistblur`;
  return (
    <svg viewBox="0 0 1600 1080" preserveAspectRatio="xMidYMid slice"
         style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p.sky[0]} />
          <stop offset="55%" stopColor={p.sky[1]} />
          <stop offset="100%" stopColor={p.sky[2]} />
        </linearGradient>
        <linearGradient id={`${gid}-mist`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p.sky[1]} stopOpacity="0" />
          <stop offset="60%" stopColor={p.sky[1]} stopOpacity={p.mistOpacity} />
          <stop offset="100%" stopColor={p.sky[2]} stopOpacity={p.mistOpacity * 0.4} />
        </linearGradient>
        <linearGradient id={`${gid}-water`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p.water} stopOpacity="0.95" />
          <stop offset="100%" stopColor={p.near} stopOpacity="1" />
        </linearGradient>
        <linearGradient id={`${gid}-fall`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p.accent} stopOpacity="0.0" />
          <stop offset="20%" stopColor={p.accent} stopOpacity="0.85" />
          <stop offset="100%" stopColor={p.water} stopOpacity="0.95" />
        </linearGradient>
        <radialGradient id={`${gid}-glow`} cx="0.72" cy="0.28" r="0.55">
          <stop offset="0%" stopColor={palette === 'midnight' ? '#e8d9b8' : '#fff5e0'} stopOpacity={palette === 'midnight' ? 0.18 : 0.45} />
          <stop offset="100%" stopColor={p.sky[0]} stopOpacity="0" />
        </radialGradient>
        <filter id={mid} x="-10%" y="-10%" width="120%" height="120%">
          <feGaussianBlur stdDeviation="6" />
        </filter>
        <filter id={mistFilter} x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="14" />
        </filter>
      </defs>

      {/* sky */}
      <rect width="1600" height="1080" fill={`url(#${gid})`} />
      {/* sun/moon glow */}
      <rect width="1600" height="1080" fill={`url(#${gid}-glow)`} />

      {/* far ridge */}
      <path d="M0,640 L80,610 L180,635 L260,590 L360,615 L460,560 L560,590 L660,540 L780,580 L900,545 L1020,575 L1140,535 L1260,565 L1380,520 L1500,560 L1600,540 L1600,1080 L0,1080 Z"
            fill={p.far} opacity="0.85" />

      {/* mist band */}
      <rect x="0" y="540" width="1600" height="260" fill={`url(#${gid}-mist)`} filter={`url(#${mid})`} />

      {/* mid ridge */}
      <path d="M0,720 L120,680 L240,710 L360,650 L480,690 L600,620 L720,665 L840,610 L960,660 L1080,615 L1200,665 L1320,635 L1440,680 L1560,650 L1600,665 L1600,1080 L0,1080 Z"
            fill={p.mid} opacity="0.95" />

      {scene === 'waterfall-tall' && <WaterfallTall p={p} gid={gid} mistFilter={mistFilter} />}
      {scene === 'waterfall-twin' && <WaterfallTwin p={p} gid={gid} mistFilter={mistFilter} />}
      {scene === 'waterfall-veil' && <WaterfallVeil p={p} gid={gid} mistFilter={mistFilter} />}

      {/* near ridge with valley */}
      {scene === 'pool' && (
        <path d="M0,860 L100,820 L220,855 L340,795 L460,835 L560,810 L640,850 L720,890 L760,910 L800,890 L840,850 L920,810 L1020,835 L1140,795 L1260,855 L1380,820 L1500,860 L1600,840 L1600,1080 L0,1080 Z"
              fill={p.near} />
      )}
      {scene !== 'pool' && (
        <path d="M0,920 L120,880 L240,915 L360,860 L460,895 L560,870 L660,900 L760,920 L860,900 L960,870 L1080,895 L1200,860 L1320,895 L1440,880 L1560,910 L1600,895 L1600,1080 L0,1080 Z"
              fill={p.near} />
      )}

      {scene === 'pool' && (
        <>
          <path d="M760,910 C 758,940 762,970 760,1000 L800,1000 C 798,970 802,940 800,910 Z"
                fill={`url(#${gid}-water)`} opacity="0.85" />
          <ellipse cx="780" cy="1010" rx="58" ry="9" fill={p.water} opacity="0.6" />
          <path d="M735,1012 Q 760,1006 785,1012 M780,1018 Q 805,1012 830,1018"
                stroke={p.accent} strokeWidth="1" fill="none" opacity="0.45" />
          {withSheep && (
            <g fill={p.sheep} opacity={palette === 'midnight' ? 0.85 : 0.78}>
              <Lamb x={702} y={998} s={1} />
              <Lamb x={742} y={1006} s={0.85} flip />
              <Lamb x={830} y={1002} s={0.95} />
              <Lamb x={870} y={1010} s={0.78} flip />
            </g>
          )}
        </>
      )}

      {/* horned ram silhouettes — placement varies per scene */}
      {scene === 'waterfall-tall' && withSheep && (
        <g fill={p.sheep} color={p.sheep} opacity={palette === 'midnight' ? 0.92 : 0.85}>
          <Ram x={1100} y={930} s={1.6} flip />
        </g>
      )}
      {scene === 'waterfall-twin' && withSheep && (
        <g fill={p.sheep} color={p.sheep} opacity={palette === 'midnight' ? 0.92 : 0.85}>
          <Ram x={800} y={950} s={2.0} />
        </g>
      )}
      {scene === 'waterfall-veil' && withSheep && (
        <g fill={p.sheep} color={p.sheep} opacity={palette === 'midnight' ? 0.92 : 0.85}>
          <Ram x={420} y={945} s={1.4} />
          <Ram x={1180} y={955} s={1.2} flip />
        </g>
      )}

      {/* grain — tiny noise dots for premium texture */}
      <g opacity="0.07">
        {Array.from({ length: 200 }).map((_, i) => (
          <circle key={i}
                  cx={(i * 173) % 1600}
                  cy={(i * 91) % 1080}
                  r="0.6"
                  fill={p.ink} />
        ))}
      </g>
    </svg>
  );
}

// ─────────────────────────────────────────────
// Waterfalls
// ─────────────────────────────────────────────
function WaterfallTall({ p, gid, mistFilter }) {
  // single tall central foss spilling over a notch in the mid ridge
  return (
    <g>
      {/* dark cliff face behind for contrast */}
      <path d="M740,610 L740,920 L880,920 L880,610 Q 870,560 810,545 Q 750,560 740,610 Z"
            fill={p.near} opacity="0.7" />
      {/* main fall column */}
      <rect x="788" y="600" width="44" height="320" fill={`url(#${gid}-fall)`} opacity="0.95" />
      {/* feathered edges */}
      <rect x="780" y="610" width="60" height="310" fill={p.accent} opacity="0.18" filter={`url(#${mistFilter})`} />
      {/* hairline streaks */}
      <line x1="795" y1="610" x2="795" y2="918" stroke={p.accent} strokeWidth="0.6" opacity="0.7" />
      <line x1="810" y1="608" x2="810" y2="920" stroke={p.accent} strokeWidth="0.5" opacity="0.55" />
      <line x1="822" y1="612" x2="822" y2="918" stroke={p.accent} strokeWidth="0.6" opacity="0.65" />
      {/* spray pool */}
      <ellipse cx="810" cy="930" rx="70" ry="12" fill={p.accent} opacity="0.45" filter={`url(#${mistFilter})`} />
      <ellipse cx="810" cy="935" rx="48" ry="6" fill={p.water} opacity="0.7" />
    </g>
  );
}

function WaterfallTwin({ p, gid, mistFilter }) {
  // two parallel falls down a far cliff
  return (
    <g>
      <path d="M520,560 L520,930 L1080,930 L1080,560 Q 1060,500 800,480 Q 540,500 520,560 Z"
            fill={p.near} opacity="0.55" />
      {/* left fall */}
      <rect x="640" y="540" width="22" height="380" fill={`url(#${gid}-fall)`} opacity="0.9" />
      <rect x="630" y="550" width="42" height="370" fill={p.accent} opacity="0.12" filter={`url(#${mistFilter})`} />
      {/* right fall */}
      <rect x="940" y="555" width="22" height="365" fill={`url(#${gid}-fall)`} opacity="0.9" />
      <rect x="930" y="565" width="42" height="355" fill={p.accent} opacity="0.12" filter={`url(#${mistFilter})`} />
      {/* mist at base */}
      <ellipse cx="800" cy="930" rx="320" ry="22" fill={p.accent} opacity="0.35" filter={`url(#${mistFilter})`} />
    </g>
  );
}

function WaterfallVeil({ p, gid, mistFilter }) {
  // wide veil-style fall covering a cliff face
  return (
    <g>
      <path d="M300,500 L300,940 L1300,940 L1300,500 Q 1260,440 800,420 Q 340,440 300,500 Z"
            fill={p.near} opacity="0.5" />
      {/* veil */}
      <rect x="380" y="500" width="840" height="430" fill={`url(#${gid}-fall)`} opacity="0.55" />
      {/* vertical streaks */}
      {Array.from({ length: 22 }).map((_, i) => (
        <line key={i}
              x1={400 + i * 38} y1="510"
              x2={400 + i * 38} y2="930"
              stroke={p.accent}
              strokeWidth={i % 3 === 0 ? 0.9 : 0.5}
              opacity={0.45 + (i % 4) * 0.08} />
      ))}
      {/* heavy mist */}
      <ellipse cx="800" cy="940" rx="520" ry="34" fill={p.accent} opacity="0.4" filter={`url(#${mistFilter})`} />
    </g>
  );
}

// Tiny lamb silhouette — body + head + 4 legs, drinking pose
function Lamb({ x, y, s = 1, flip }) {
  const t = `translate(${x} ${y}) scale(${flip ? -s : s} ${s})`;
  return (
    <g transform={t}>
      {/* body */}
      <ellipse cx="0" cy="-6" rx="11" ry="7" />
      {/* head down (drinking) */}
      <ellipse cx="11" cy="-1" rx="4" ry="3.2" />
      {/* legs */}
      <rect x="-7" y="-2" width="1.6" height="6" />
      <rect x="-2" y="-2" width="1.6" height="6" />
      <rect x="3" y="-2" width="1.6" height="6" />
      <rect x="7" y="-2" width="1.6" height="6" />
    </g>
  );
}

// ─────────────────────────────────────────────
// Wordmark — VOSS HALAL serif with subtle ornament
// ─────────────────────────────────────────────
function Wordmark({ color = '#fff', size = 1, layout = 'stack', tagline }) {
  // stack: VOSS over HALAL, ornament between
  // inline: VOSS · HALAL on one line
  if (layout === 'inline') {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 * size, color, lineHeight: 1 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 22 * size, letterSpacing: '0.32em', fontWeight: 500 }}>VOSS</span>
        <Ornament color={color} size={size} />
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 22 * size, letterSpacing: '0.32em', fontWeight: 500 }}>HALAL</span>
      </div>
    );
  }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 * size, color, lineHeight: 1 }}>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 28 * size, letterSpacing: '0.42em', fontWeight: 500 }}>VOSS</span>
      <Ornament color={color} size={size} wide />
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 14 * size, letterSpacing: '0.62em', fontWeight: 400 }}>HALAL</span>
      {tagline && (
        <span style={{ fontFamily: 'var(--font-ui)', fontSize: 9 * size, letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.7, marginTop: 4 * size }}>
          {tagline}
        </span>
      )}
    </div>
  );
}

function Ornament({ color, size = 1, wide }) {
  // A water-drop with two flanking hairlines — alludes to the Voss source
  const w = wide ? 92 : 56;
  return (
    <svg width={w * size} height={10 * size} viewBox={`0 0 ${w} 10`} fill="none">
      <line x1="0" y1="5" x2={w/2 - 8} y2="5" stroke={color} strokeWidth="0.6" opacity="0.7" />
      <path d={`M${w/2},1 C${w/2 - 2.5},4 ${w/2 - 2.5},6.5 ${w/2},8 C${w/2 + 2.5},6.5 ${w/2 + 2.5},4 ${w/2},1 Z`}
            fill={color} opacity="0.85" />
      <line x1={w/2 + 8} y1="5" x2={w} y2="5" stroke={color} strokeWidth="0.6" opacity="0.7" />
    </svg>
  );
}

// Ram silhouette with curled horns — proud profile, head up
function Ram({ x, y, s = 1, flip }) {
  const t = `translate(${x} ${y}) scale(${flip ? -s : s} ${s})`;
  return (
    <g transform={t}>
      {/* body — a fuller, woolly oval */}
      <ellipse cx="0" cy="-9" rx="14" ry="9" />
      {/* a little tail tuft at back */}
      <circle cx="-13" cy="-10" r="3" />
      {/* head, raised and forward */}
      <ellipse cx="14" cy="-10" rx="5.5" ry="4.2" />
      {/* muzzle */}
      <ellipse cx="19" cy="-8.5" rx="2" ry="1.6" />
      {/* curled horn — single spiral starting at top of head */}
      <path d="M14,-14 C 18,-18 22,-16 22,-12 C 22,-9 18,-9 17,-11 C 16,-13 19,-14 20,-12"
            fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"
            style={{ stroke: 'inherit' }} />
      {/* second horn hint behind */}
      <path d="M12,-13 C 16,-17 20,-15 20,-12"
            fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"
            opacity="0.6" />
      {/* legs */}
      <rect x="-9" y="-3" width="2" height="9" />
      <rect x="-3" y="-3" width="2" height="9" />
      <rect x="3" y="-3" width="2" height="9" />
      <rect x="9" y="-3" width="2" height="9" />
    </g>
  );
}

// SVG can't inherit currentColor on a stroke from a parent fill — give horns
// the same color as the parent <g fill> by passing it through.
function RamHorned(props) { return <Ram {...props} />; }

window.PALETTES = PALETTES;
window.Mountainscape = Mountainscape;
window.Wordmark = Wordmark;