// scene.jsx — illustrated cottage-country festival-poster scene
// Built from flat geometric primitives only.

const Scene = ({ height = 520, variant = "lake" }) => {
  // Full poster-scene with sun, pines, lake, dock, canoe, stars
  return (
    <svg
      className="scene"
      viewBox="0 0 1200 520"
      preserveAspectRatio="xMidYMid meet"
      style={{ height, maxHeight: height, width: "100%", display: "block" }}
    >
      {/* outer poster border */}
      <rect x="0" y="0" width="1200" height="520" fill="#f5ede0" />
      <rect x="6" y="6" width="1188" height="508" fill="none" stroke="#1a1a1a" strokeWidth="4" />

      {/* sky band */}
      <rect x="10" y="10" width="1180" height="290" fill="#f0a830" />
      {/* sun */}
      <circle cx="600" cy="280" r="220" fill="#e8621a" stroke="#1a1a1a" strokeWidth="4" />
      <circle cx="600" cy="280" r="220" fill="none" stroke="#1a1a1a" strokeWidth="0" />
      {/* sun stripes (lighter slices) */}
      <g clipPath="url(#sunclip)">
        <rect x="380" y="190" width="440" height="14" fill="#f0a830" />
        <rect x="380" y="226" width="440" height="14" fill="#f0a830" />
        <rect x="380" y="262" width="440" height="14" fill="#f0a830" />
        <rect x="380" y="298" width="440" height="14" fill="#f0a830" />
      </g>
      <defs>
        <clipPath id="sunclip">
          <circle cx="600" cy="280" r="216" />
        </clipPath>
      </defs>

      {/* clouds */}
      <g stroke="#1a1a1a" strokeWidth="4" fill="#f5ede0">
        <rect x="120" y="110" width="160" height="34" rx="17" />
        <rect x="170" y="80" width="100" height="30" rx="15" />
      </g>
      <g stroke="#1a1a1a" strokeWidth="4" fill="#f5ede0">
        <rect x="920" y="140" width="180" height="34" rx="17" />
        <rect x="960" y="110" width="100" height="30" rx="15" />
      </g>

      {/* 4-point stars in sky */}
      <Star cx={150} cy={210} s={14} fill="#d4506a" />
      <Star cx={1050} cy={220} s={14} fill="#d4506a" />
      <Star cx={80} cy={260} s={9} fill="#1a1a1a" />
      <Star cx={1130} cy={70} s={9} fill="#1a1a1a" />

      {/* distant hills */}
      <path d="M 10 320 L 200 240 L 340 310 L 500 250 L 660 320 L 820 250 L 980 320 L 1190 250 L 1190 360 L 10 360 Z"
            fill="#3a8fa0" stroke="#1a1a1a" strokeWidth="4" strokeLinejoin="round" />

      {/* lake — horizontal stripes */}
      <rect x="10" y="356" width="1180" height="158" fill="#3a8fa0" />
      <g fill="#2a6f7e">
        <rect x="10" y="370" width="1180" height="6" />
        <rect x="10" y="392" width="1180" height="4" />
        <rect x="10" y="414" width="1180" height="6" />
        <rect x="10" y="438" width="1180" height="4" />
        <rect x="10" y="464" width="1180" height="6" />
        <rect x="10" y="490" width="1180" height="4" />
      </g>
      {/* sun reflection on lake */}
      <g fill="#f0a830" opacity="0.85">
        <rect x="540" y="364" width="120" height="6" />
        <rect x="560" y="384" width="80" height="5" />
        <rect x="555" y="404" width="90" height="4" />
        <rect x="570" y="424" width="60" height="4" />
        <rect x="580" y="446" width="40" height="3" />
      </g>

      {/* left pines */}
      <Pine x={60}  y={350} w={120} h={210} fill="#4a8a3a" />
      <Pine x={140} y={350} w={90}  h={170} fill="#3a6f2c" />
      <Pine x={195} y={350} w={70}  h={130} fill="#4a8a3a" />

      {/* right pines */}
      <Pine x={1020} y={350} w={120} h={210} fill="#4a8a3a" />
      <Pine x={970}  y={350} w={90}  h={170} fill="#3a6f2c" />
      <Pine x={935}  y={350} w={70}  h={130} fill="#4a8a3a" />

      {/* dock */}
      <g stroke="#1a1a1a" strokeWidth="4">
        <rect x="380" y="346" width="220" height="14" fill="#1a1a1a" />
        <line x1="410" y1="360" x2="410" y2="430" />
        <line x1="470" y1="360" x2="470" y2="430" />
        <line x1="530" y1="360" x2="530" y2="430" />
        <line x1="585" y1="360" x2="585" y2="430" />
      </g>

      {/* canoe */}
      <g stroke="#1a1a1a" strokeWidth="4" fill="#d4506a">
        <path d="M 680 400 Q 760 432, 860 400 L 850 414 Q 760 446, 690 414 Z" />
      </g>
      {/* paddler silhouette */}
      <g fill="#1a1a1a">
        <circle cx="770" cy="384" r="9" />
        <rect x="763" y="394" width="14" height="18" />
        <line x1="755" y1="395" x2="800" y2="385" stroke="#1a1a1a" strokeWidth="4" />
      </g>

      {/* ground/sand strip */}
      <rect x="10" y="508" width="1180" height="6" fill="#1a1a1a" />
    </svg>
  );
};

const Pine = ({ x, y, w, h, fill }) => (
  <g stroke="#1a1a1a" strokeWidth="4" strokeLinejoin="round">
    {/* three stacked triangles */}
    <polygon
      points={`${x + w/2},${y - h} ${x},${y - h*0.30} ${x + w},${y - h*0.30}`}
      fill={fill}
    />
    <polygon
      points={`${x + w/2},${y - h*0.70} ${x - w*0.08},${y - h*0.10} ${x + w + w*0.08},${y - h*0.10}`}
      fill={fill}
    />
    <polygon
      points={`${x + w/2},${y - h*0.40} ${x - w*0.16},${y + h*0.04} ${x + w + w*0.16},${y + h*0.04}`}
      fill={fill}
    />
    {/* trunk */}
    <rect
      x={x + w/2 - 6}
      y={y - h*0.05}
      width="12"
      height={h*0.10}
      fill="#1a1a1a"
    />
  </g>
);

const Star = ({ cx, cy, s = 12, fill = "#1a1a1a" }) => {
  // 4-point star
  const pts = [
    [cx, cy - s*2],
    [cx + s*0.4, cy - s*0.4],
    [cx + s*2, cy],
    [cx + s*0.4, cy + s*0.4],
    [cx, cy + s*2],
    [cx - s*0.4, cy + s*0.4],
    [cx - s*2, cy],
    [cx - s*0.4, cy - s*0.4],
  ].map(p => p.join(",")).join(" ");
  return <polygon points={pts} fill={fill} stroke="#1a1a1a" strokeWidth="3" strokeLinejoin="round" />;
};

// Small decorative scene used in hero (mini sun horizon)
const MiniHorizon = ({ height = 220 }) => (
  <svg
    viewBox="0 0 1200 220"
    preserveAspectRatio="xMidYMid slice"
    style={{ width: "100%", height, display: "block" }}
  >
    <rect x="0" y="0" width="1200" height="220" fill="#f0a830" />
    <circle cx="600" cy="220" r="180" fill="#e8621a" stroke="#1a1a1a" strokeWidth="4" />
    {/* clouds */}
    <g stroke="#1a1a1a" strokeWidth="4" fill="#f5ede0">
      <rect x="120" y="70" width="140" height="28" rx="14" />
      <rect x="940" y="80" width="160" height="28" rx="14" />
    </g>
    {/* stars */}
    <Star cx={200} cy={140} s={9} fill="#d4506a" />
    <Star cx={1000} cy={150} s={9} fill="#d4506a" />
    {/* horizon line */}
    <rect x="0" y="216" width="1200" height="4" fill="#1a1a1a" />
  </svg>
);

Object.assign(window, { Scene, MiniHorizon, Pine, Star });