// illustrations.jsx — крупные SVG-иллюстрации в премиум-эко стиле

// Изометрическая ферма-сечение: 4-ярусная вермиферма-тумба
function WormFarmCutaway({ width = 360, height = 540 }) {
  return (
    <svg viewBox="0 0 360 540" width={width} height={height} className="illu-farm"
         preserveAspectRatio="xMidYMid meet"
         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Устройство вермифермы ЭкоКруг — разрез">
      <defs>
        <linearGradient id="lg-top" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--bg-card)"/>
          <stop offset="1" stopColor="var(--bg-soft)"/>
        </linearGradient>
        <linearGradient id="lg-soil" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0"   stopColor="#5a3a22"/>
          <stop offset="0.5" stopColor="#3d2614"/>
          <stop offset="1"   stopColor="#241509"/>
        </linearGradient>
        <linearGradient id="lg-mid" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#6e4b2c"/>
          <stop offset="1" stopColor="#3a2716"/>
        </linearGradient>
        <pattern id="dots" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="0.7" fill="var(--ink)" opacity="0.18"/>
        </pattern>
      </defs>

      {/* Узкая 4-ярусная тумба */}
      <g transform="translate(60 20)">
        {/* TIER 1 — верхний: свежие очистки */}
        <g className="farm-tier farm-tier-1">
          <path d="M 0 0 L 240 0 L 224 16 L 16 16 Z" fill="var(--bg-soft)" stroke="var(--ink)" strokeWidth="1.4"/>
          <rect x="16" y="16" width="208" height="86" rx="3" fill="url(#lg-top)" stroke="var(--ink)" strokeWidth="1.4"/>
          <g opacity="0.85">
            <ellipse cx="70"  cy="60" rx="20" ry="9" fill="#c4a44a"/>
            <ellipse cx="120" cy="74" rx="24" ry="7" fill="#8a6a2c" opacity="0.75"/>
            <ellipse cx="170" cy="62" rx="18" ry="8" fill="#d5a878"/>
            <ellipse cx="100" cy="84" rx="20" ry="6" fill="#9c5a30"/>
          </g>
        </g>

        <g transform="translate(120 112)" opacity="0.55">
          <path d="M 0 0 L 0 14 M -5 9 L 0 14 L 5 9" stroke="var(--accent)" strokeWidth="1.5"
                fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        </g>

        {/* TIER 2 — рабочий: черви активно */}
        <g transform="translate(0 132)" className="farm-tier farm-tier-2">
          <rect x="10" y="0" width="220" height="94" rx="3" fill="url(#lg-mid)" stroke="var(--ink)" strokeWidth="1.4"/>
          <rect x="10" y="0" width="220" height="94" rx="3" fill="url(#dots)"/>
          <g className="farm-worms">
            <path className="w w1" d="M 30 22 q 10 -7 22 0 q 12 7 24 0 q 10 -5 22 0"
                  stroke="#c44a1a" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
            <path className="w w2" d="M 100 50 q 12 -7 24 0 q 10 7 22 0"
                  stroke="#c44a1a" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
            <path className="w w3" d="M 50 78 q 10 -7 22 0 q 14 7 26 0"
                  stroke="#c44a1a" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
            <path className="w w4" d="M 160 70 q 10 -6 20 0 q 8 5 18 0"
                  stroke="#c44a1a" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          </g>
        </g>

        <g transform="translate(120 236)" opacity="0.55">
          <path d="M 0 0 L 0 14 M -5 9 L 0 14 L 5 9" stroke="var(--accent)" strokeWidth="1.5"
                fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        </g>

        {/* TIER 3 — нижний рабочий: зрелый биогумус */}
        <g transform="translate(0 256)" className="farm-tier farm-tier-3">
          <rect x="10" y="0" width="220" height="86" rx="3" fill="url(#lg-soil)" stroke="var(--ink)" strokeWidth="1.4"/>
          <rect x="10" y="0" width="220" height="86" rx="3" fill="url(#dots)"/>
          <g transform="translate(115 14)">
            <circle r="2.5" fill="#a8c97f"/>
            <path d="M 0 -2 q -3 -8 0 -16 q 3 10 0 16 Z" fill="#a8c97f"/>
          </g>
        </g>

        {/* TIER 4 — хозяйственный отсек со встроенным краником */}
        <g transform="translate(0 356)" className="farm-tier farm-tier-4">
          <rect x="10" y="0" width="220" height="110" rx="3" fill="var(--bg-soft)" stroke="var(--ink)" strokeWidth="1.4"/>
          <line x1="120" y1="14" x2="120" y2="92" stroke="var(--ink)" strokeWidth="0.8" opacity="0.4"/>
          <rect x="22"  y="14" width="92" height="78" rx="2" fill="none" stroke="var(--ink)" strokeWidth="0.8" opacity="0.35"/>
          <rect x="126" y="14" width="92" height="78" rx="2" fill="none" stroke="var(--ink)" strokeWidth="0.8" opacity="0.35"/>
          <circle cx="65"  cy="53" r="2" fill="var(--ink)" opacity="0.5"/>
          <circle cx="172" cy="53" r="2" fill="var(--ink)" opacity="0.5"/>

          {/* Краник на правой узкой стороне */}
          <g transform="translate(230 8)">
            <rect x="0" y="0" width="14" height="6" rx="1" fill="var(--ink)"/>
            <rect x="10" y="-2" width="6" height="10" rx="1" fill="var(--ink)"/>
            <g className="farm-drip">
              <ellipse cx="13" cy="20" rx="2.2" ry="3" fill="#3a2010"/>
            </g>
          </g>
          {/* Бутылочка под краном */}
          <g transform="translate(220 24)">
            <rect x="0" y="0" width="20" height="22" rx="3" fill="var(--bg-card)" stroke="var(--ink)" strokeWidth="0.8" opacity="0.85"/>
            <rect x="6" y="-4" width="8" height="5" rx="1" fill="var(--ink)" opacity="0.6"/>
            <rect x="2" y="14" width="16" height="6" fill="#3a2010" opacity="0.75"/>
          </g>

          {/* Ножки */}
          <rect x="22"  y="105" width="14" height="10" fill="var(--ink)" opacity="0.85"/>
          <rect x="204" y="105" width="14" height="10" fill="var(--ink)" opacity="0.85"/>
        </g>
      </g>

    </svg>
  );
}

// Сцена «кухня» — стилизованная иллюстрация в духе риcографии
function SceneKitchen() {
  return (
    <svg viewBox="0 0 400 300" className="scene-svg" aria-label="На кухне">
      <rect width="400" height="300" fill="var(--bg-soft)"/>
      {/* стена */}
      <rect y="0" width="400" height="180" fill="color-mix(in oklab, var(--bg-soft) 70%, var(--accent) 8%)"/>
      {/* столешница */}
      <rect y="180" width="400" height="6" fill="var(--ink)" opacity="0.5"/>
      {/* окно */}
      <rect x="40" y="30" width="120" height="100" fill="color-mix(in oklab, var(--bg-card) 80%, white 20%)" stroke="var(--ink)" strokeWidth="1.5"/>
      <line x1="100" y1="30" x2="100" y2="130" stroke="var(--ink)" strokeWidth="1.5"/>
      <line x1="40"  y1="80" x2="160" y2="80" stroke="var(--ink)" strokeWidth="1.5"/>
      {/* растение в горшке */}
      <g transform="translate(260 90)">
        <rect x="0" y="60" width="60" height="40" fill="var(--accent)" stroke="var(--ink)" strokeWidth="1.5"/>
        <path d="M 30 60 q -20 -30 -10 -55 q 12 8 10 35 z" fill="var(--accent-2)" opacity="0.85"/>
        <path d="M 30 60 q  20 -30  15 -55 q -16 5 -15 35 z" fill="var(--accent-2)" opacity="0.85"/>
        <path d="M 30 60 q  -5 -40   5 -60 q 10 25  -5  50 z" fill="var(--accent-2)"/>
      </g>
      {/* доска и нож + очистки */}
      <g transform="translate(180 165)">
        <rect x="0" y="0" width="120" height="14" fill="var(--bg-card)" stroke="var(--ink)" strokeWidth="1.2"/>
        <rect x="120" y="2" width="2" height="10" fill="var(--ink)"/>
        {/* очистки */}
        <ellipse cx="25" cy="-2" rx="9" ry="3" fill="#c4a44a"/>
        <ellipse cx="50" cy="-3" rx="11" ry="3" fill="#9c5a30"/>
        <ellipse cx="80" cy="-2" rx="8" ry="2.5" fill="#8a6a2c"/>
      </g>
      {/* вермиферма у стола */}
      <g transform="translate(60 200)" className="scene-farm">
        <rect x="0" y="0" width="80" height="80" rx="3" fill="var(--ink)" opacity="0.85"/>
        <line x1="0" y1="25" x2="80" y2="25" stroke="var(--bg)" strokeWidth="1"/>
        <line x1="0" y1="50" x2="80" y2="50" stroke="var(--bg)" strokeWidth="1"/>
        <text x="40" y="68" textAnchor="middle" style={{ font: "500 8px var(--f-mono)", fill: "var(--accent)", letterSpacing: "0.1em" }}>
          ЭкоКруг
        </text>
      </g>
    </svg>
  );
}

// Сцена «дача» — грядка, растения, лопата
function SceneGarden() {
  return (
    <svg viewBox="0 0 400 300" className="scene-svg" aria-label="На даче">
      <rect width="400" height="300" fill="color-mix(in oklab, var(--bg-soft) 75%, var(--accent-2) 15%)"/>
      {/* небо */}
      <rect width="400" height="170" fill="color-mix(in oklab, var(--bg-card) 70%, var(--accent-2) 10%)"/>
      {/* солнце */}
      <circle cx="320" cy="60" r="28" fill="var(--accent)" opacity="0.85"/>
      {/* облако */}
      <ellipse cx="100" cy="50" rx="42" ry="10" fill="var(--bg-card)" opacity="0.7"/>
      <ellipse cx="130" cy="40" rx="32" ry="8"  fill="var(--bg-card)" opacity="0.7"/>
      {/* холм-горизонт */}
      <path d="M 0 170 q 100 -30 200 -10 q 100 20 200 0 L 400 200 L 0 200 Z" fill="color-mix(in oklab, var(--accent-2) 70%, var(--ink))"/>
      {/* грядка */}
      <rect y="200" width="400" height="100" fill="#3d2614"/>
      <path d="M 0 200 q 50 8 100 0 q 50 -8 100 0 q 50 8 100 0 q 50 -8 100 0" stroke="var(--ink)" strokeWidth="1" fill="none" opacity="0.5"/>
      {/* томаты ряд */}
      {[60, 140, 220, 300].map((x, i) => (
        <g key={i} transform={`translate(${x} 175)`}>
          <line x1="10" y1="25" x2="10" y2="0" stroke="#3a4a1a" strokeWidth="2"/>
          <circle cx="10" cy="5"  r="6" fill="var(--accent)"/>
          <circle cx="2"  cy="12" r="5" fill="var(--accent)"/>
          <circle cx="16" cy="14" r="4" fill="var(--accent)"/>
          <path d="M 10 -2 q -4 -6 -10 -5 q 6 -2 10 4 q 4 -6 10 -4 q -6 -1 -10 5 z" fill="#3a4a1a"/>
        </g>
      ))}
      {/* лопата */}
      <g transform="translate(340 220)">
        <rect x="0" y="0" width="3" height="50" fill="var(--ink)"/>
        <path d="M -8 50 L 12 50 L 8 70 L -4 70 Z" fill="var(--ink)"/>
      </g>
    </svg>
  );
}

// Сцена «семья» — родитель + ребёнок у фермы
function SceneFamily() {
  return (
    <svg viewBox="0 0 400 300" className="scene-svg" aria-label="Семья и эко-ритуал">
      <rect width="400" height="300" fill="color-mix(in oklab, var(--bg-soft) 65%, var(--accent) 12%)"/>
      {/* пол */}
      <rect y="240" width="400" height="60" fill="var(--bg-soft)"/>
      <line x1="0" y1="240" x2="400" y2="240" stroke="var(--ink)" strokeWidth="1.2"/>

      {/* родитель */}
      <g transform="translate(110 110)">
        <circle cx="0" cy="0"  r="22" fill="var(--ink)"/>
        <path d="M -28 30 L 28 30 L 40 130 L -40 130 Z" fill="var(--accent-2)"/>
        <rect x="-40" y="130" width="35" height="6" fill="var(--ink)"/>
        <rect x="5"   y="130" width="35" height="6" fill="var(--ink)"/>
      </g>

      {/* ребёнок */}
      <g transform="translate(190 145)">
        <circle cx="0" cy="0"  r="16" fill="var(--ink)"/>
        <path d="M -20 22 L 20 22 L 28 95 L -28 95 Z" fill="var(--accent)"/>
        <rect x="-28" y="95" width="25" height="5" fill="var(--ink)"/>
        <rect x="3"   y="95" width="25" height="5" fill="var(--ink)"/>
      </g>

      {/* ферма */}
      <g transform="translate(255 145)">
        <rect x="0" y="0" width="90" height="95" rx="3" fill="var(--ink)" opacity="0.92"/>
        <line x1="0" y1="30" x2="90" y2="30" stroke="var(--bg)" strokeWidth="1"/>
        <line x1="0" y1="60" x2="90" y2="60" stroke="var(--bg)" strokeWidth="1"/>
        {/* росток сверху */}
        <g transform="translate(45 -8)">
          <line x1="0" y1="0" x2="0" y2="8" stroke="var(--accent-2)" strokeWidth="2"/>
          <ellipse cx="-4" cy="-2" rx="4" ry="2" fill="var(--accent-2)"/>
          <ellipse cx="4"  cy="-2" rx="4" ry="2" fill="var(--accent-2)"/>
        </g>
      </g>

    </svg>
  );
}

// Иконы 36px для блока преимуществ
function BIcon({ kind }) {
  const props = { width: 36, height: 36, viewBox: "0 0 36 36", fill: "none",
                  stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "nose": return (
      <svg {...props}>
        <path d="M 6 12 q 3 -3 6 0 t 6 0 t 6 0" />
        <path d="M 6 18 q 3 -3 6 0 t 6 0 t 6 0" opacity="0.65"/>
        <path d="M 6 24 q 3 -3 6 0 t 6 0 t 6 0" opacity="0.4"/>
        <line x1="7" y1="7" x2="29" y2="29" strokeWidth="2"/>
      </svg>
    );
    case "trash": return (
      <svg {...props}>
        <path d="M 8 12 L 28 12 L 26 30 L 10 30 Z"/>
        <line x1="6" y1="12" x2="30" y2="12"/>
        <line x1="14" y1="6" x2="22" y2="6"/>
        <path d="M 18 18 L 18 24 M 14 22 L 22 22" opacity="0.6"/>
      </svg>
    );
    case "kid": return (
      <svg {...props}>
        <circle cx="18" cy="11" r="5"/>
        <path d="M 10 30 q 0 -10 8 -10 q 8 0 8 10"/>
        <path d="M 14 26 L 22 26" opacity="0.5"/>
      </svg>
    );
    case "coin": return (
      <svg {...props}>
        <circle cx="18" cy="18" r="12"/>
        <path d="M 13 11 L 13 25"/>
        <path d="M 13 11 L 18 11 q 3.5 0 3.5 3.5 t -3.5 3.5 L 13 18"/>
        <line x1="10" y1="21" x2="21" y2="21"/>
      </svg>
    );
    case "leaf": return (
      <svg {...props}>
        <path d="M 8 28 q 0 -18 20 -20 q 0 18 -20 20 Z"/>
        <line x1="8" y1="28" x2="22" y2="14"/>
      </svg>
    );
    case "pin": return (
      <svg {...props}>
        <path d="M 18 4 q 9 0 9 10 q 0 8 -9 18 q -9 -10 -9 -18 q 0 -10 9 -10 Z"/>
        <circle cx="18" cy="14" r="3"/>
      </svg>
    );
    default: return <svg {...props}><circle cx="18" cy="18" r="10"/></svg>;
  }
}

// Декоративный плавающий «листок» — фоновая анимация
function FloatingShape({ delay = 0, top = "10%", left = "10%", size = 80, opacity = 0.08 }) {
  return (
    <div className="float-shape" style={{
      top, left, width: size, height: size,
      animationDelay: `${delay}s`, opacity
    }}>
      <svg viewBox="0 0 100 100" width="100%" height="100%">
        <circle cx="50" cy="50" r="48" fill="none" stroke="var(--accent)" strokeWidth="0.8" strokeDasharray="2 4"/>
        <circle cx="50" cy="50" r="32" fill="none" stroke="var(--accent)" strokeWidth="0.6"/>
        <circle cx="50" cy="50" r="6" fill="var(--accent)"/>
      </svg>
    </div>
  );
}

Object.assign(window, {
  WormFarmCutaway, SceneKitchen, SceneGarden, SceneFamily, BIcon, FloatingShape
});
