/* sections-diagnose.jsx — 정밀 진단: 같은 교실, 다른 시작점 */

const Diagnose = () => (
  <section id="diagnose" style={{ padding: "100px 0", position: "relative", overflow: "hidden" }}>
    <div aria-hidden style={{
      position: "absolute", inset: 0, pointerEvents: "none",
      background: "radial-gradient(50% 35% at 20% 30%, rgba(37,99,235,0.06), transparent 70%)",
    }}/>
    <div className="wrap" style={{ position: "relative" }}>
      <SectionHead
        tag="DIAGNOSE · 입학 시 정밀 진단"
        title={<>같은 교실에서<br/>같은 수업을 듣지만,<br/><span style={{ color: "var(--primary)" }}>출발점은 모두 다릅니다.</span></>}
        sub="다힘은 입학하는 모든 학생을 ‘의사가 진단하듯’ 정밀하게 살펴봅니다. 그냥 시험 한 번 치고 끝이 아니라, 학년·컨디션·최근 성적·영역별 강약까지 통합해 개별 출발점을 설계합니다."
      />

      {/* HERO ROW — 비교 비주얼 + 진단 카드 */}
      <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 56, alignItems: "stretch" }}>
        {/* LEFT — 같은 교실, 다른 출발점 */}
        <SameRoomDifferentStart/>

        {/* RIGHT — 진단 입력 모형 */}
        <DiagnoseForm/>
      </div>

      {/* WORKFLOW — 진단이 어떻게 출발점이 되는가 */}
      <div style={{ marginTop: 64 }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 16 }}>
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 10px", borderRadius: 999, background: "var(--surface-soft)", color: "var(--text-3)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.12em" }}>
              <span style={{ width: 5, height: 5, borderRadius: 5, background: "var(--text-3)" }}/> WORKFLOW
            </div>
            <h3 style={{ fontSize: 24, fontWeight: 800, letterSpacing: "-0.025em", margin: "10px 0 0" }}>
              48분 진단이 첫 회차가 됩니다.
            </h3>
          </div>
          <div style={{ fontSize: 12, color: "var(--text-2)", letterSpacing: "0.08em", fontWeight: 700 }}>4 STEPS</div>
        </div>

        <DiagnoseFlow/>
      </div>

      {/* DOMAINS — 진단이 측정하는 영역 */}
      <div style={{ marginTop: 56 }}>
        <DomainsRow/>
      </div>
    </div>
  </section>
);

// ── 같은 교실, 다른 출발점 ────────────────────────────────────
const SameRoomDifferentStart = () => {
  const students = [
    { name: "김OO", weak: "현대시 · 화자", start: "회차 12 · 시 집중", color: "var(--accent)", at: 25 },
    { name: "이OO", weak: "비문학 · 과학",  start: "회차 18 · 추론",   color: "var(--primary)", at: 50 },
    { name: "박OO", weak: "문법 · 안긴문장", start: "회차 7 · 문법",   color: "var(--green)", at: 75 },
  ];

  return (
    <div className="dh-glass-card" style={{
      padding: 28, position: "relative", overflow: "hidden",
    }}>
      <div style={{ fontSize: 12.5, color: "var(--primary)", letterSpacing: "0.12em", fontWeight: 700 }}>SAME ROOM · DIFFERENT START</div>
      <h4 style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.025em", margin: "10px 0 0" }}>
        한 교실에 앉은 세 학생,<br/>
        각자 다른 회차에서 시작합니다.
      </h4>

      {/* room visual */}
      <div style={{
        marginTop: 24, padding: "20px 18px",
        background: "rgba(255, 255, 255, 0.4)",
        border: "1px solid rgba(255, 255, 255, 0.5)",
        borderRadius: 14,
        position: "relative",
        boxShadow: "inset 0 2px 4px rgba(0,0,0,0.02)",
      }}>
        {/* room label */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
          <div style={{ fontSize: 12.5, color: "var(--text-2)", letterSpacing: "0.04em", fontWeight: 700 }}>3관 · 화 16:30 그룹</div>
          <span className="chip" style={{ fontSize: 10, padding: "3px 8px" }}>같은 수업</span>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {students.map((s) => (
            <div key={s.name} style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 999,
                background: `color-mix(in oklab, ${s.color} 12%, white)`,
                color: s.color,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontWeight: 800, fontSize: 11, flexShrink: 0,
              }}>{s.name.slice(0, 1)}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
                  <span style={{ fontSize: 13, fontWeight: 700 }}>{s.name}</span>
                  <span style={{ fontSize: 12.5, color: s.color, fontWeight: 800, letterSpacing: "-0.005em" }}>{s.start}</span>
                </div>
                <div style={{ marginTop: 6, position: "relative", height: 6, background: "rgba(0,0,0,0.06)", borderRadius: 4 }}>
                  {/* dotted full path */}
                  <div style={{
                    position: "absolute", inset: 0,
                    backgroundImage: "linear-gradient(90deg, var(--border) 50%, transparent 0)",
                    backgroundSize: "6px 1px", backgroundRepeat: "repeat-x",
                    backgroundPosition: "0 50%",
                    borderRadius: 4,
                  }}/>
                  {/* student marker */}
                  <div style={{
                    position: "absolute", left: `${s.at}%`, top: -3,
                    transform: "translateX(-50%)",
                    width: 12, height: 12, borderRadius: 12,
                    background: s.color,
                    boxShadow: `0 0 0 3px white, 0 2px 8px -2px ${s.color}`,
                  }}/>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, fontSize: 11.5, color: "var(--text-2)", fontWeight: 600 }}>
                  <span>약점 · {s.weak}</span>
                  <span style={{ color: "var(--text-2)", fontWeight: 800, fontSize: 11.5, letterSpacing: "0.02em" }}>D+1</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginTop: 18, fontSize: 14, color: "var(--text-2)", lineHeight: 1.65, fontWeight: 500 }}>
        같은 강의를 듣더라도, 각자의 ‘오늘 할 일’ 큐는 진단 결과에 따라 다르게 채워집니다.
      </div>
    </div>
  );
};

// ── 진단 입력 폼 모형 ─────────────────────────────────────────
const DiagnoseForm = () => (
  <div className="dh-glass-card-dark" style={{
    padding: 0, overflow: "hidden",
    background: "linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%)", color: "white",
    border: "1px solid rgba(255, 255, 255, 0.15)",
    boxShadow: "0 20px 40px rgba(15, 23, 42, 0.3)",
  }}>
    <div style={{
      padding: "20px 28px",
      borderBottom: "1px solid rgba(255,255,255,0.1)",
      display: "flex", alignItems: "center", justifyContent: "space-between",
    }}>
      <div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "3px 9px", borderRadius: 999, background: "rgba(59,130,246,0.18)", color: "#93c5fd", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.14em" }}>
          <span style={{ width: 5, height: 5, borderRadius: 5, background: "#3b82f6" }} className="pulse-dot"/>
          INITIAL ASSESSMENT
        </div>
        <div style={{ fontSize: 18, fontWeight: 800, marginTop: 8, letterSpacing: "-0.02em" }}>초진 정밀 진단</div>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", marginTop: 2 }}>학생 한 명을 의사가 진단하듯 살펴봅니다</div>
      </div>
      <div style={{ fontSize: 12, color: "rgba(255,255,255,0.85)", letterSpacing: "0.08em", fontWeight: 700 }}>48 MIN</div>
    </div>

    <div style={{ padding: "26px 28px" }}>
      {/* Step header */}
      <StepRow n="1" title="학생 정보">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          <FieldMock label="이름" value="김OO"/>
          <FieldMock label="학교" value="외솔중"/>
        </div>
        <div style={{ marginTop: 12 }}>
          <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.85)", letterSpacing: "0.02em", fontWeight: 600, marginTop: 4 }}>실제 학년 · 평가 레벨 자동 배정</div>
          <div style={{ marginTop: 8, display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 6 }}>
            {[
              { g: "초5", code: "E3" }, { g: "초6", code: "E3" },
              { g: "중1", code: "M1" }, { g: "중2", code: "M2", active: true },
              { g: "중3", code: "M3" },
              { g: "고1", code: "H1" }, { g: "고2", code: "H2" }, { g: "고3", code: "H3" },
            ].map((b) => (
              <div key={b.g} style={{
                textAlign: "center", padding: "8px 4px", borderRadius: 8,
                background: b.active ? "linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #1d4ed8 100%)" : "rgba(255,255,255,0.05)",
                border: b.active ? "none" : "1px solid rgba(255,255,255,0.1)",
                color: b.active ? "white" : "rgba(255,255,255,0.7)",
                fontSize: 11.5, fontWeight: 700,
                boxShadow: b.active ? "0 4px 12px rgba(37,99,235,0.35)" : "none",
              }}>
                {b.g}
                <div style={{ fontSize: 8.5, opacity: 0.7, marginTop: 1, fontFamily: "var(--mono)" }}>→ {b.code}</div>
              </div>
            ))}
          </div>
        </div>
      </StepRow>

      <div style={{ height: 1, background: "rgba(255,255,255,0.08)", margin: "20px 0" }}/>

      <StepRow n="2" title="오늘 컨디션 · 최근 성적">
        <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.85)", letterSpacing: "0.02em", fontWeight: 600 }}>Q1 · 오늘 컨디션</div>
        <div style={{ marginTop: 8, display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }}>
          {[
            { v: 1, l: "매우 나쁨" },
            { v: 2, l: "나쁨" },
            { v: 3, l: "보통" },
            { v: 4, l: "좋음", active: true },
            { v: 5, l: "매우 좋음" },
          ].map((m) => (
            <div key={m.v} style={{
              textAlign: "center", padding: "8px 4px", borderRadius: 8,
              background: m.active ? "linear-gradient(135deg, #4f46e5 0%, #3b82f6 50%, #06b6d4 100%)" : "rgba(255,255,255,0.05)",
              border: m.active ? "none" : "1px solid rgba(255,255,255,0.1)",
              color: m.active ? "white" : "rgba(255,255,255,0.7)",
              fontSize: 14, fontWeight: 800,
              boxShadow: m.active ? "0 4px 12px rgba(79,70,229,0.35)" : "none",
            }}>
              {m.v}
              <div style={{ fontSize: 8.5, opacity: 0.7, marginTop: 1, fontFamily: "var(--ui)", fontWeight: 600 }}>{m.l}</div>
            </div>
          ))}
        </div>

        <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.85)", letterSpacing: "0.02em", fontWeight: 600, marginTop: 14 }}>Q2 · 최근 국어 성적</div>
        <div style={{ marginTop: 8, display: "flex", gap: 6, flexWrap: "wrap" }}>
          {["100점", "95점", "90점", "85점", "80점", "80점 이하", "해당없음"].map((s, i) => (
            <span key={s} style={{
              padding: "6px 10px", borderRadius: 8,
              background: i === 4 ? "linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #1d4ed8 100%)" : "rgba(255,255,255,0.05)",
              border: i === 4 ? "none" : "1px solid rgba(255,255,255,0.1)",
              color: i === 4 ? "white" : "rgba(255,255,255,0.7)",
              fontSize: 11.5, fontWeight: 700,
              boxShadow: i === 4 ? "0 4px 12px rgba(37,99,235,0.35)" : "none",
            }}>{s}</span>
          ))}
        </div>
      </StepRow>

      <button style={{
        marginTop: 24, width: "100%",
        padding: "14px 16px",
        background: "linear-gradient(135deg, #4f46e5 0%, #3b82f6 50%, #06b6d4 100%)",
        color: "white", border: "none", borderRadius: 12,
        fontWeight: 800, fontSize: 14.5,
        display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
        boxShadow: "0 8px 24px -6px rgba(79, 70, 229, 0.5)",
        transition: "transform 0.2s, box-shadow 0.2s",
      }} className="dh-btn-hover">
        진단 평가 시작하기 <ArrowRight size={16}/>
      </button>
      <div style={{ marginTop: 10, fontSize: 11, color: "rgba(255,255,255,0.45)", textAlign: "center" }}>
        검사 시간 약 48분 · 중간 이탈 시 결과 무효
      </div>
    </div>
  </div>
);

const StepRow = ({ n, title, children }) => (
  <div>
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{
        width: 22, height: 22, borderRadius: 6,
        background: "var(--primary)", color: "white",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 11, fontWeight: 800,
      }}>{n}</span>
      <span style={{ fontSize: 14.5, fontWeight: 700 }}>{title}</span>
    </div>
    <div style={{ marginTop: 14, paddingLeft: 0 }}>{children}</div>
  </div>
);

const FieldMock = ({ label, value }) => (
  <div>
    <div style={{ fontSize: 11.5, color: "rgba(255,255,255,0.78)", letterSpacing: "0.02em", fontWeight: 600 }}>{label}</div>
    <div style={{
      marginTop: 6, padding: "10px 12px",
      background: "rgba(255,255,255,0.05)",
      border: "1px solid rgba(255,255,255,0.1)",
      borderRadius: 10, fontSize: 13, fontWeight: 700, color: "white",
    }}>{value}</div>
  </div>
);

// ── WORKFLOW · 4 steps ─────────────────────────────────────────
const DiagnoseFlow = () => {
  const steps = [
    {
      n: "01", title: "정보 수집", body: "이름·학교·학년·컨디션·최근 국어 성적까지. 그날의 상태도 결과 해석에 반영합니다.",
      icon: <Document size={20}/>, color: "var(--primary)",
    },
    {
      n: "02", title: "정밀 평가 48분", body: "학년 자동 매핑된 레벨로 어휘·독해·문법·문학·비문학·메타인지를 통합 측정. 영역별 강약을 정확하게 분리해냅니다.",
      icon: <Brain size={20}/>, color: "var(--accent)",
      highlight: true,
    },
    {
      n: "03", title: "강약점 리포트", body: "단순 점수가 아니라 ‘어디서 막혔는지’, ‘무엇이 강한지’를 영역별 그래프로. 학부모께도 그대로 전달됩니다.",
      icon: <Signal size={20}/>, color: "var(--green)",
    },
    {
      n: "04", title: "개별 출발점 설계", body: "같은 교실, 다른 회차. 약점은 1·3·7·30 자동 복습 큐의 첫 카드로 등록되어 그날부터 회차 학습이 시작됩니다.",
      icon: <Target size={20}/>, color: "var(--primary)",
    },
  ];

  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, position: "relative" }}>
      {/* connecting line */}
      <div aria-hidden style={{
        position: "absolute", top: 42, left: "12%", right: "12%", height: 1,
        backgroundImage: "linear-gradient(90deg, var(--border) 50%, transparent 0)",
        backgroundSize: "8px 1px", backgroundRepeat: "repeat-x",
      }}/>

      {steps.map((s) => (
        <div key={s.n} className="dh-glass-card" style={{
          padding: 22, position: "relative",
          background: s.highlight ? `linear-gradient(180deg, rgba(255,255,255,0.9) 0%, color-mix(in oklab, ${s.color} 8%, white) 100%)` : "var(--glass-bg)",
          border: s.highlight ? `1.5px solid ${s.color}` : "1px solid var(--glass-border)",
        }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span style={{
              width: 36, height: 36, borderRadius: 10,
              background: `color-mix(in oklab, ${s.color} 12%, white)`,
              color: s.color,
              display: "flex", alignItems: "center", justifyContent: "center",
              border: "3px solid var(--bg)",
            }}>{s.icon}</span>
            <span style={{ fontSize: 12, color: "var(--text-2)", letterSpacing: "0.06em", fontWeight: 800 }}>{s.n}</span>
          </div>
          <h4 style={{ fontSize: 17, fontWeight: 800, letterSpacing: "-0.02em", margin: "16px 0 8px" }}>{s.title}</h4>
          <p style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--text-2)", margin: 0, fontWeight: 500 }}>{s.body}</p>
        </div>
      ))}
    </div>
  );
};

// ── 진단 측정 영역 ─────────────────────────────────────────────
const DomainsRow = () => {
  const domains = [
    { name: "어휘력",     score: 72, level: "M2 · 평균 상위" },
    { name: "독해 속도",  score: 58, level: "M2 · 평균",    weak: true },
    { name: "문법",        score: 88, level: "M3 · 최상위" },
    { name: "문학 (시·소설)", score: 64, level: "M2 · 평균" },
    { name: "비문학 (과학)", score: 42, level: "M1 · 보충 필요", weak: true },
    { name: "메타인지",   score: 75, level: "M2 · 상위" },
  ];
  return (
    <div className="dh-glass-card" style={{ padding: 32 }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginBottom: 22 }}>
        <div>
          <div style={{ fontSize: 12.5, color: "var(--primary)", letterSpacing: "0.06em", fontWeight: 700 }}>SAMPLE REPORT · 김OO · 중2</div>
          <h4 style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.025em", margin: "8px 0 0" }}>진단이 측정하는 6개 영역</h4>
          <p style={{ fontSize: 14, color: "var(--text-2)", margin: "6px 0 0", fontWeight: 500 }}>점수만 보는 다른 학원과 달리, 영역별 강약을 분리해 ‘약점 카드’로 등록합니다.</p>
        </div>
        <div style={{ display: "flex", gap: 14, fontSize: 12.5, color: "var(--text-2)", fontWeight: 600 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: 3, background: "var(--primary)" }}/>강점
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: 3, background: "var(--accent)" }}/>약점 → 첫 회차 큐 등록
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 16 }}>
        {domains.map((d) => (
          <div key={d.name} style={{
            background: d.weak ? "linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(234,88,12,0.08) 100%)" : "rgba(255, 255, 255, 0.4)",
            border: `1.5px solid ${d.weak ? "var(--accent)" : "var(--glass-border)"}`,
            borderRadius: 12, padding: "16px 14px",
            display: "flex", flexDirection: "column", gap: 10,
            boxShadow: d.weak ? "0 8px 20px -6px rgba(234,88,12,0.15)" : "var(--glass-shadow)",
            backdropFilter: "blur(6px)",
          }}>
            <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: "-0.01em" }}>{d.name}</div>

            {/* ring/score */}
            <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
              <span style={{
                fontSize: 32, fontWeight: 800, letterSpacing: "-0.03em",
                color: d.weak ? "var(--accent)" : "var(--primary)",
              }}>{d.score}</span>
              <span style={{ fontSize: 13, color: "var(--text-2)", fontWeight: 700 }}>/100</span>
            </div>

            <div style={{ height: 5, background: "rgba(0,0,0,0.06)", borderRadius: 3, overflow: "hidden" }}>
              <div style={{
                height: "100%", width: `${d.score}%`,
                background: d.weak ? "linear-gradient(135deg, #ea580c 0%, #ff782e 50%, #c2410c 100%)" : "linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #1d4ed8 100%)",
                borderRadius: 3,
              }}/>
            </div>
            <div style={{ fontSize: 11.5, color: "var(--text-2)", fontWeight: 700 }}>{d.level}</div>
            {d.weak && (
              <div style={{ marginTop: 2, fontSize: 9.5, color: "var(--accent)", fontWeight: 700, letterSpacing: "0.04em" }}>
                → 첫 회차 큐 등록
              </div>
            )}
          </div>
        ))}
      </div>

      {/* result note */}
      <div style={{
        marginTop: 22, padding: "16px 18px",
        background: "rgba(37,99,235,0.05)", borderRadius: 10,
        borderLeft: "4px solid var(--primary)",
        borderTop: "1px solid rgba(37,99,235,0.1)",
        borderRight: "1px solid rgba(37,99,235,0.1)",
        borderBottom: "1px solid rgba(37,99,235,0.1)",
        display: "flex", gap: 14, alignItems: "flex-start",
        boxShadow: "0 4px 15px rgba(37,99,235,0.03)",
      }}>
        <Target size={18} stroke="var(--primary)"/>
        <div>
          <div style={{ fontSize: 11.5, color: "var(--primary)", letterSpacing: "0.06em", fontWeight: 700 }}>OUTCOME · 진단 결과 → 첫 회차</div>
          <p style={{ fontSize: 13.5, lineHeight: 1.6, margin: "4px 0 0", color: "var(--text-2)", fontWeight: 500 }}>
            <strong>김OO 학생의 첫 회차</strong>는 비문학(과학) 회차 7번부터 시작합니다. 독해 속도 영역은 매주 1회 추적, 4주 뒤 시간 캡슐로 비교됩니다. — 이상헌
          </p>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Diagnose });
