// sections-c.jsx — Anatomy: круговорот ЭкоКруг (вместо разреза)

function Anatomy({ visible = true }) {
  if (!visible) return null;
  const [ref, seen] = useInView(0.1);

  // 4 этапа круговорота, разнесены по окружности
  const stages = [
    { angle: -90,  label: "Отходы",   sub: "0,5–1 кг / сутки",      color: "var(--accent)" },
    { angle: 0,    label: "Черви",    sub: "Eisenia fetida, 500 г", color: "var(--accent-2)" },
    { angle: 90,   label: "Биогумус", sub: "0,3–0,6 кг / месяц",     color: "var(--accent)" },
    { angle: 180,  label: "Урожай",   sub: "+25–40 % к норме",      color: "var(--accent-2)" },
  ];

  return (
    <section id="anatomy">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">круговорот</div>
            <h2 className="display h2" style={{ marginTop: 16 }}>
              Замкнутый цикл в <span style={{ color: "var(--accent)" }}>одной тумбе</span>
            </h2>
          </div>
          <p className="lead">
            Отходы становятся кормом, корм — биогумусом, биогумус — урожаем,
            а то, что остаётся от урожая, снова идёт в верхний ярус.
            Маленький домашний круг, который замыкает большой.
          </p>
        </div>

        <div ref={ref} className={`cycle-section reveal ${seen ? "in" : ""}`}>
          <div className="cycle-visual">
            <svg viewBox="-200 -200 400 400" className="cycle-big" aria-hidden="true">
              <defs>
                <marker id="cyc-arrow" viewBox="0 0 10 10" refX="6" refY="5"
                        markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                  <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--accent)" />
                </marker>
                <linearGradient id="cyc-ring" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0" stopColor="var(--accent)"/>
                  <stop offset="1" stopColor="var(--accent-2)"/>
                </linearGradient>
              </defs>

              {/* Внешний пунктирный круг */}
              <circle r="170" fill="none" stroke="currentColor" strokeWidth="0.6"
                      strokeDasharray="2 6" opacity="0.35" className="cyc-ring-outer"/>

              {/* Основной круг — анимированная стрелка по дуге */}
              <g className="cyc-arc">
                <circle r="140" fill="none" stroke="url(#cyc-ring)" strokeWidth="2" opacity="0.85"/>
                {/* Маленькая «бегущая» стрелка */}
                <path d="M 140 0 A 140 140 0 0 1 138.9 8.4"
                      fill="none" stroke="var(--accent)" strokeWidth="3"
                      strokeLinecap="round" markerEnd="url(#cyc-arrow)"/>
              </g>

              {/* 4 направляющие стрелки между этапами */}
              {[0, 90, 180, 270].map((deg, i) => (
                <g key={i} transform={`rotate(${deg})`} className="cyc-arrow-sm">
                  <path
                    d="M 110 -25 A 100 100 0 0 1 110 25"
                    fill="none" stroke="var(--accent)" strokeWidth="1.6"
                    strokeLinecap="round" opacity="0.55"
                    markerEnd="url(#cyc-arrow)"
                  />
                </g>
              ))}

              {/* Центральная плашка */}
              <circle r="58" fill="var(--bg-card)" stroke="var(--line)" strokeWidth="1.2"/>
              <text x="0" y="-8" textAnchor="middle"
                    style={{ font: "500 9px var(--f-mono)", fill: "var(--ink-mute)", letterSpacing: "0.14em", textTransform: "uppercase" }}>
                ЦИКЛ
              </text>
              <text x="0" y="14" textAnchor="middle"
                    style={{ font: "500 22px var(--f-display)", fill: "var(--ink)", letterSpacing: "-0.01em" }}>
                ЭкоКруг
              </text>
            </svg>

            {/* HTML-узлы поверх SVG для нормальной типографики */}
            {stages.map((s, i) => {
              const rad = (s.angle * Math.PI) / 180;
              const x = 50 + 44 * Math.cos(rad);
              const y = 50 + 44 * Math.sin(rad);
              return (
                <div
                  key={s.label}
                  className="cyc-node"
                  style={{
                    left: `${x}%`,
                    top: `${y}%`,
                    animationDelay: `${i * 0.18}s`,
                  }}
                >
                  <div className="cyc-dot" style={{ background: s.color }}/>
                  <div className="cyc-label">{s.label}</div>
                  <div className="cyc-sub">{s.sub}</div>
                </div>
              );
            })}
          </div>

          <div className="cycle-side">
            <div className="cyc-row">
              <div className="cyc-num">↑</div>
              <div>
                <div className="cyc-row-label">Что входит</div>
                <p>Картофельные очистки, шкурки овощей и фруктов, кофейная гуща, чайный спитой, яичная скорлупа, кусочки картона.</p>
              </div>
            </div>
            <div className="cyc-row">
              <div className="cyc-num">○</div>
              <div>
                <div className="cyc-row-label">Что происходит</div>
                <p>500 г красных калифорнийских червей переваривают органику и выделяют биогумус и жидкий вермичай.</p>
              </div>
            </div>
            <div className="cyc-row">
              <div className="cyc-num">↓</div>
              <div>
                <div className="cyc-row-label">Что выходит</div>
                <p>0,3–0,6 кг готового биогумуса в месяц и литры вермичая — для грядок, теплицы и дачной земли. Урожай в среднем выше на 25–40 %.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Anatomy = Anatomy;