// chart.jsx — 경량 SVG 차트 + 실시간 누적 성과 섹션

// ─── 단순 우상향 스파크라인 (점·툴팁·축 라벨 없음) ───
function Sparkline({ color }) {
  // 부드럽게 우상향하는 단일 곡선 (cubic bezier)
  const line = "M 0 86 C 24 80, 40 72, 56 58 C 70 46, 82 30, 100 8";
  const area = `${line} L 100 100 L 0 100 Z`;
  return (
    <div style={{ position: "relative", flex: 1, minHeight: 160, marginInline: -4 }}>
      <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block", overflow: "visible" }}>
        <defs><linearGradient id="ga" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={color} stopOpacity="0.18" /><stop offset="100%" stopColor={color} stopOpacity="0.02" /></linearGradient></defs>
        <path d={area} fill="url(#ga)" />
        <path d={line} fill="none" stroke={color} strokeWidth="2.5" vectorEffect="non-scaling-stroke" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <div style={{ position: "absolute", bottom: -22, left: 0, right: 0, display: "flex", justifyContent: "space-between" }}>
        <span style={{ fontSize: 10, color: "var(--text-3)" }}>서비스 시작</span>
        <span style={{ fontSize: 10, color: "var(--text-3)" }}>현재</span>
      </div>
    </div>
  );
}

// ─── 다중 라인 차트 (학원별 성장률) ───
// 양끝 두 점만 점으로, 세로로 길게, 끝으로 갈수록 가속하는 부드러운 곡선.
// yEnd만 다르게 두고 시작점·기울기 인상은 비슷하게 정렬 → "다 같이 가파르게" 인상.
function GrowthLines({ series }) {
  const Y0 = 90; // 공통 시작 높이
  return (
    <div style={{ position: "relative", paddingRight: 76 }}>
      <div style={{ position: "relative", height: 300, marginInline: -2 }}>
        <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style={{ display: "block", overflow: "visible" }}>
          <defs>
            {series.map((s, i) => (
              <linearGradient key={i} id={`gl${i}`} x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor={s.color} stopOpacity="0.12" />
                <stop offset="100%" stopColor={s.color} stopOpacity="0" />
              </linearGradient>
            ))}
          </defs>
          {series.map((s, i) => {
            // 끝으로 갈수록 위로 가속하는 cubic bezier
            const path = `M 0 ${Y0} C 42 ${Y0 - 1}, 72 ${s.yEnd + 30}, 100 ${s.yEnd}`;
            return (
              <React.Fragment key={s.label}>
                <path d={`${path} L 100 100 L 0 100 Z`} fill={`url(#gl${i})`} />
                <path d={path} fill="none" stroke={s.color} strokeWidth="2.5" vectorEffect="non-scaling-stroke" strokeLinecap="round" strokeLinejoin="round" />
              </React.Fragment>
            );
          })}
        </svg>

        {/* 양끝 점 + 오른쪽 끝 성장률 라벨 */}
        {series.map((s) => (
          <React.Fragment key={s.label}>
            <span style={{ position: "absolute", left: "0%", top: `${Y0}%`, width: 9, height: 9, borderRadius: "50%", background: "#fff", border: `2.5px solid ${s.color}`, transform: "translate(-50%,-50%)", zIndex: 2 }} />
            <span style={{ position: "absolute", left: "100%", top: `${s.yEnd}%`, width: 11, height: 11, borderRadius: "50%", background: s.color, border: "2.5px solid #fff", boxShadow: "var(--shadow-xs)", transform: "translate(-50%,-50%)", zIndex: 3 }} />
            <div style={{ position: "absolute", left: "100%", top: `${s.yEnd}%`, transform: "translateY(-50%)", paddingLeft: 14, zIndex: 3, lineHeight: 1 }}>
              <div className="tnum" style={{ fontSize: 22, fontWeight: 800, color: s.color, letterSpacing: "-0.01em" }}>{s.pct}</div>
              <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--text-3)", marginTop: 3 }}>{s.label}</div>
            </div>
          </React.Fragment>
        ))}
      </div>

      {/* x축: 두 시점만 */}
      <div style={{ position: "absolute", bottom: -22, left: -2, right: 76, display: "flex", justifyContent: "space-between" }}>
        <span style={{ fontSize: 10, color: "var(--text-3)" }}>도입 시점</span>
        <span style={{ fontSize: 10, color: "var(--text-3)" }}>6개월 후</span>
      </div>
    </div>
  );
}

// ─── 카드 셸 ───
const StatCard = ({ children, delay, visible }) => (
  <div style={{
    background: "#fff", borderRadius: "var(--r-lg)", padding: 32, border: "1px solid var(--border)",
    boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column", gap: 24,
    opacity: visible ? 1 : 0, transform: visible ? "none" : "translateY(24px)",
    transition: `opacity .7s ease-out ${delay}ms, transform .7s ease-out ${delay}ms`,
  }}>{children}</div>
);

// 좌측: 시간
function TimeCard({ visible }) {
  return (
    <StatCard delay={0} visible={visible}>
      <div>
        <h3 style={{ fontSize: 17, fontWeight: 700, color: "var(--text-1)", margin: "0 0 4px" }}>반복 업무 대신 아이들에게 돌아간 시간</h3>
        <p style={{ fontSize: 13, color: "var(--text-3)", margin: 0, wordBreak: "keep-all" }}>선생님은 수업 품질과 학생 지도에 집중하고, 아이들은 더 깊이 배워요.</p>
      </div>
      <div>
        <div style={{ display: "flex", alignItems: "flex-end", gap: 8, flexWrap: "wrap" }}>
          <span className="tnum" style={{ fontSize: "clamp(2rem,4vw,2.8rem)", fontWeight: 800, color: "var(--text-1)", lineHeight: 1 }}>{HOURS_DISPLAY}</span>
          <span style={{ fontSize: 18, fontWeight: 700, color: "var(--text-2)", marginBottom: 4 }}>시간</span>
        </div>
      </div>
      <div style={{ paddingBottom: 22, flex: 1, display: "flex" }}>
        <Sparkline color="#10B9A7" />
      </div>
    </StatCard>
  );
}

// 우측: 학원 성장
function GrowthCard({ visible }) {
  return (
    <StatCard delay={120} visible={visible}>
      <div>
        <h3 style={{ fontSize: 17, fontWeight: 700, color: "var(--text-1)", margin: "0 0 4px" }}>원아워 도입 이후, 늘어난 학생 수</h3>
        <p style={{ fontSize: 13, color: "var(--text-3)", margin: 0, wordBreak: "keep-all" }}>도입 학원 재학생 수 성장률 · 6개월 기준</p>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {GROWTH.map((s) => (
          <div key={s.label} style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 9, height: 9, borderRadius: "50%", background: s.color, flexShrink: 0 }} />
            <span style={{ fontSize: 13, fontWeight: 600, color: "var(--text-1)", minWidth: 52 }}>{s.label}</span>
            <span style={{ fontSize: 13, color: "var(--text-2)" }}>
              학생수 <span className="tnum" style={{ fontWeight: 800, color: s.color }}>{s.pct.replace("+", "")}</span> 증가
            </span>
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 8, paddingBottom: 22 }}>
        <GrowthLines series={GROWTH} />
      </div>
    </StatCard>
  );
}

function RealtimeDataSection() {
  const { ref, inView } = useInView();
  return (
    <section ref={ref} style={{ background: "var(--bg-page)", padding: "80px 0" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <p className="eyebrow" style={{ marginBottom: 12 }}>PROVEN RESULTS</p>
          <h2 style={{ fontSize: "clamp(1.75rem,3.2vw,2.5rem)", fontWeight: 800, color: "var(--text-1)", letterSpacing: "-0.02em", margin: 0 }}>지금도 쌓이고 있는 변화</h2>
        </div>
        <div className="grid-2">
          <TimeCard visible={inView} />
          <GrowthCard visible={inView} />
        </div>
        {/* ① 면책 문구 */}
        <p style={{ textAlign: "center", fontSize: 12, color: "var(--text-3)", margin: "20px 0 0", wordBreak: "keep-all" }}>
          * 원아워 도입 학원의 실제 사례 · 학원 상황에 따라 결과에 차이가 있을 수 있습니다
        </p>
        {/* ② 부각 문구 */}
        <p style={{ textAlign: "center", fontSize: "clamp(1.05rem,2vw,1.35rem)", fontWeight: 700, color: "var(--text-1)", margin: "20px auto 0", maxWidth: 720, lineHeight: 1.5, wordBreak: "keep-all" }}>
          이외에도 <span className="tnum" style={{ color: "var(--primary)", fontWeight: 800 }}>2,000</span><span style={{ color: "var(--primary)" }}>개</span> 이상의 학원·학교가 원아워와 함께 성장하고 있습니다
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { RealtimeDataSection });