/* sections-product.jsx — 실제 학생 화면 미리보기 (Product Showcase) */

// ═══════════════════════════════════════════════════════════
// ProductShowcase — 실제 운영 중인 4가지 시스템
// ═══════════════════════════════════════════════════════════
const ProductShowcase = () => (
  <section id="screens" style={{ padding: "100px 0", background: "var(--surface)" }}>
    <div className="wrap">
      <SectionHead
        tag="SCREENS · 실제 학생 화면"
        title={<>이미 갖춰진 시스템,<br/>그대로 보여드립니다.</>}
        sub={(() => { const c = (typeof window !== 'undefined' && window.DAHIM_DATA && window.DAHIM_DATA.counts) || {}; const m = c.ebs_questions || 33624; const n = c.neasin_questions || 27985; const v = c.videos || 3112; const tot = (m + n)/10000; return <>모의 <span data-count-key="ebs_questions">{m.toLocaleString()}</span>문항 + 내신 <span data-count-key="neasin_questions">{n.toLocaleString()}</span>문항 = <strong style={{ color: "var(--text)" }}>약 {tot.toFixed(1)}만 문항의 문제은행</strong>, 그리고 <strong style={{ color: "var(--text)" }}><span data-count-key="videos">{v.toLocaleString()}</span>강의 동영상 강의</strong>. 요점 정리·문제 풀이·입시 컨설팅까지 한 시스템에서 작동합니다.</>; })()}
      />

      <div style={{ display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 20, marginBottom: 20 }}>
        <MockLecture/>
        <MockMockExam/>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 20 }}>
        <MockInternal/>
        <MockIpsi/>
      </div>
    </div>
  </section>
);

// ── 공용 shell ───────────────────────────────────────────
const Frame = ({ tag, title, stat, children, accent = "var(--primary)" }) => (
  <div className="card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
    <div style={{
      padding: "18px 22px",
      borderBottom: "1px solid var(--border)",
      display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12,
    }}>
      <div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "3px 10px", borderRadius: 999, background: `color-mix(in oklab, ${accent} 12%, white)`, color: accent, fontSize: 10.5, fontWeight: 700, letterSpacing: "0.08em" }}>
          <span style={{ width: 5, height: 5, borderRadius: 5, background: accent }}/> {tag}
        </div>
        <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: "-0.02em", marginTop: 8 }}>{title}</div>
      </div>
      {stat && (
        <div style={{ textAlign: "right" }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--text-4)", letterSpacing: "0.14em" }}>{stat.l}</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: accent, letterSpacing: "-0.02em" }}>{stat.v}</div>
        </div>
      )}
    </div>
    <div style={{ padding: 22, background: "var(--surface-soft)", flex: 1 }}>{children}</div>
  </div>
);

// 1. 동영상 강의 + 시험직전요점정리
const MockLecture = () => (
  <Frame
    tag="LECTURE · 학습"
    title="동영상 강의 + 시험직전요점정리"
    stat={{ l: "전체 강의 수", v: ((typeof window !== 'undefined' && window.DAHIM_DATA?.counts?.videos) || 3112).toLocaleString() + "강", _ck: "videos" }}
  >
    <div style={{ display: "grid", gridTemplateColumns: "1fr 0.42fr", gap: 12 }}>
      {/* video player area */}
      <div style={{
        background: "var(--emph)", borderRadius: 12,
        aspectRatio: "16/10", position: "relative",
        display: "flex", alignItems: "center", justifyContent: "center",
        overflow: "hidden",
      }}>
        {/* play btn */}
        <div style={{
          width: 56, height: 56, borderRadius: 999,
          background: "rgba(255,255,255,0.15)", border: "2px solid rgba(255,255,255,0.4)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><polygon points="6,4 20,12 6,20"/></svg>
        </div>
        {/* timer chip */}
        <div style={{ position: "absolute", bottom: 10, left: 10, display: "flex", gap: 6 }}>
          {["10초", "1x", "1.25x"].map((b, i) => (
            <div key={b} style={{ padding: "3px 8px", borderRadius: 6, background: i === 1 ? "var(--accent)" : "rgba(255,255,255,0.12)", color: "var(--text)", fontSize: 9, fontWeight: 600 }}>{b}</div>
          ))}
        </div>
        {/* mini overlay = 시험직전요점 */}
        <div style={{
          position: "absolute", right: 8, top: 8,
          background: "var(--surface)", color: "var(--text)",
          borderRadius: 8, padding: "6px 10px",
          fontSize: 9.5, fontWeight: 600,
          display: "flex", alignItems: "center", gap: 4,
          boxShadow: "0 4px 14px rgba(0,0,0,0.25)",
        }}>
          <Document size={11} stroke="var(--accent)"/>
          시험직전요점
        </div>
      </div>

      {/* chapter list */}
      <div style={{ background: "white", border: "1px solid var(--border)", borderRadius: 12, padding: 10 }}>
        <div className="mono" style={{ fontSize: 9, color: "var(--text-4)", letterSpacing: "0.12em" }}>강의 목차 · 80강</div>
        <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 5 }}>
          {[
            { n: 1, t: "중간고사 요점 정리1", active: true },
            { n: 2, t: "중간고사 요점 정리2" },
            { n: 3, t: "갈래와의 만남" },
            { n: 4, t: "공감하며 소통" },
            { n: 5, t: "논증 글쓰기" },
          ].map((c) => (
            <div key={c.n} style={{
              display: "flex", alignItems: "center", gap: 6,
              padding: "5px 7px", borderRadius: 5,
              background: c.active ? "var(--primary-50)" : "transparent",
              fontSize: 10, color: c.active ? "var(--primary)" : "var(--text-2)",
              fontWeight: c.active ? 700 : 500,
            }}>
              <span style={{ width: 14, fontSize: 9, color: "var(--text-4)" }}>{c.n}</span>
              <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.t}</span>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* tabs */}
    <div style={{ marginTop: 12, display: "flex", gap: 14, fontSize: 10.5, color: "var(--text-4)", borderBottom: "1px solid var(--border)", paddingBottom: 6 }}>
      {[
        { t: "챕터", c: 0 },
        { t: "관련 문제", c: 12 },
        { t: "교사용 PDF", c: null },
        { t: "시험직전요약", c: 2, active: true },
        { t: "내 메모", c: 0 },
        { t: "퀴즈 관리", c: null },
      ].map((tab) => (
        <span key={tab.t} style={{
          display: "inline-flex", alignItems: "center", gap: 4,
          paddingBottom: 6,
          color: tab.active ? "var(--text)" : "var(--text-4)",
          fontWeight: tab.active ? 700 : 500,
          borderBottom: tab.active ? "2px solid var(--accent)" : "2px solid transparent",
          marginBottom: -7,
        }}>
          {tab.t} {tab.c != null && <span className="mono" style={{ fontSize: 9 }}>{tab.c}</span>}
        </span>
      ))}
    </div>
  </Frame>
);

// 2. 모의고사 문제은행
const MockMockExam = () => (
  <Frame
    tag="MOCK · 모의고사 문제은행"
    title="등급·과목·유형 정밀 필터"
    stat={{ l: "지문 · 문항", v: ((typeof window !== 'undefined' && window.DAHIM_DATA?.counts?.ebs_questions) || 33624).toLocaleString(), _ck: "ebs_questions" }}
    accent="var(--primary)"
  >
    {/* search bar */}
    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
      <div style={{
        flex: 1, padding: "8px 12px",
        background: "white", border: "1px solid var(--border)", borderRadius: 999,
        fontSize: 11, color: "var(--text-4)",
        display: "flex", alignItems: "center", gap: 8,
      }}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        지문 제목 · 키워드 검색
      </div>
      <button style={{ padding: "8px 14px", background: "var(--primary)", color: "var(--text)", borderRadius: 999, fontSize: 11.5, fontWeight: 700 }}>검색</button>
    </div>

    {/* filter rows */}
    <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 8 }}>
      {[
        { k: "등급", chips: [{ t: "전체", on: true }, { t: "상" }, { t: "중" }, { t: "하" }] },
        { k: "과목", chips: [{ t: "전체", on: true }, { t: "독서" }, { t: "문학" }, { t: "문법" }, { t: "화법" }, { t: "작문" }] },
        { k: "유형", chips: [{ t: "추론적 이해 1,238" }, { t: "사실적 확인 1,113" }, { t: "작품 이해 934" }, { t: "외적 준거 862" }] },
      ].map((row) => (
        <div key={row.k} style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 32, fontSize: 10.5, color: "var(--text-4)", fontWeight: 600 }}>{row.k}</span>
          <div style={{ display: "flex", gap: 5, flexWrap: "wrap" }}>
            {row.chips.map((c) => (
              <span key={c.t} className="chip" style={{
                fontSize: 10, padding: "3px 8px",
                background: c.on ? "var(--primary)" : "white",
                color: c.on ? "white" : "var(--text-3)",
                border: c.on ? "1px solid var(--primary)" : "1px solid var(--border)",
                fontWeight: c.on ? 700 : 500,
              }}>{c.t}</span>
            ))}
          </div>
        </div>
      ))}
    </div>

    {/* practice band */}
    <div style={{
      marginTop: 14, background: "white", border: "1px solid var(--border)",
      borderRadius: 10, padding: "10px 14px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
    }}>
      <div>
        <div style={{ fontSize: 11.5, fontWeight: 700 }}>연습 세트 만들기</div>
        <div style={{ fontSize: 10, color: "var(--text-3)", marginTop: 2 }}>7,103 지문에서 맞춤 연습</div>
      </div>
      <button style={{ padding: "6px 12px", background: "var(--primary)", color: "var(--text)", borderRadius: 8, fontSize: 11, fontWeight: 700 }}>▶ 시작</button>
    </div>
  </Frame>
);

// 3. 내신대비 문제은행
const MockInternal = () => (
  <Frame
    tag="INTERNAL · 내신대비 문제은행"
    title="학교·출판사·작품 단위 매칭"
    stat={{ l: "문항", v: ((typeof window !== 'undefined' && window.DAHIM_DATA?.counts?.neasin_questions) || 27985).toLocaleString(), _ck: "neasin_questions" }}
    accent="var(--accent)"
  >
    {/* school/publisher selectors */}
    <div style={{ background: "white", border: "1px solid var(--border)", borderRadius: 10, padding: "10px 12px", display: "flex", alignItems: "center", gap: 8, fontSize: 11 }}>
      <span style={{ color: "var(--text-4)" }}>학교</span>
      <div style={{ padding: "4px 8px", background: "var(--surface-soft)", borderRadius: 6, fontWeight: 600 }}>대현고 ▾</div>
      <span style={{ color: "var(--text-4)", marginLeft: 4 }}>출판사</span>
      <div style={{ padding: "4px 8px", background: "var(--surface-soft)", borderRadius: 6, fontWeight: 600 }}>미래엔 ▾</div>
      <button style={{ marginLeft: "auto", padding: "4px 10px", background: "var(--accent)", color: "var(--text)", borderRadius: 6, fontSize: 10.5, fontWeight: 700 }}>적용</button>
    </div>

    {/* grade chips */}
    <div style={{ marginTop: 10, display: "flex", gap: 6, flexWrap: "wrap" }}>
      {["고1", "고2", "고3", "중1", "중2", "중3"].map((g, i) => (
        <span key={g} className="chip" style={{ fontSize: 10, padding: "3px 8px", background: i === 1 ? "var(--accent)" : "white", color: i === 1 ? "white" : "var(--text-3)", border: i === 1 ? "1px solid var(--accent)" : "1px solid var(--border)", fontWeight: i === 1 ? 700 : 500 }}>{g}</span>
      ))}
    </div>

    {/* work-level card */}
    <div style={{ marginTop: 12, background: "white", border: "1px solid var(--border)", borderRadius: 10, padding: "12px 14px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <span style={{ width: 16, height: 16, borderRadius: 4, background: "var(--accent-50)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center" }}><Books size={10}/></span>
        <span style={{ fontSize: 12, fontWeight: 700 }}>이강백, &lt;결혼&gt;</span>
        <span className="mono" style={{ fontSize: 10, color: "var(--text-4)" }}>(2지문 묶음)</span>
      </div>
      <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 5 }}>
        {[
          { tags: ["비상", "고2", "기타"], t: "이강백, <결혼>" },
          { tags: ["미래엔", "고1", "방민호"], t: "스노우맨" },
        ].map((q, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, padding: "5px 8px", background: "var(--surface-soft)", borderRadius: 6 }}>
            {q.tags.map((tg) => <span key={tg} style={{ fontSize: 9, padding: "1px 5px", background: "white", border: "1px solid var(--border)", borderRadius: 3, color: "var(--text-3)" }}>{tg}</span>)}
            <span style={{ fontSize: 11, flex: 1 }}>{q.t}</span>
            <button style={{ fontSize: 9.5, padding: "2px 6px", background: "var(--accent)", color: "var(--text)", borderRadius: 4, fontWeight: 700 }}>풀기</button>
          </div>
        ))}
      </div>
    </div>
  </Frame>
);

// 4. 입시 컨설팅 — 수시·정시·학종
const MockIpsi = () => {
  const bands = [
    { l: "안정", v: 4260, c: "var(--green)" },
    { l: "적정", v: 1255, c: "var(--primary)" },
    { l: "소신", v: 1202, c: "var(--amber)" },
    { l: "상향", v: 2174, c: "var(--red)" },
  ];
  const total = 8891;
  return (
    <Frame
      tag="ADMISSIONS · 수시·정시·학종"
      title="입시 컨설팅 · 전형 8,891개 분석"
      stat={{ l: "AI 등급 예측", v: "3.51" }}
      accent="var(--primary)"
    >
      {/* band */}
      <div>
        <div style={{ display: "flex", height: 26, borderRadius: 8, overflow: "hidden", boxShadow: "0 1px 0 var(--border)" }}>
          {bands.map((b) => (
            <div key={b.l} style={{
              flex: b.v,
              background: b.c,
              display: "flex", alignItems: "center", justifyContent: "center",
              color: "var(--text)", fontSize: 11, fontWeight: 700,
              fontFamily: "var(--mono)",
            }}>{b.v.toLocaleString()}</div>
          ))}
        </div>
        <div style={{ marginTop: 8, display: "flex", gap: 12, fontSize: 10.5, color: "var(--text-3)", flexWrap: "wrap" }}>
          {bands.map((b) => (
            <span key={b.l} style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
              <span style={{ width: 6, height: 6, borderRadius: 6, background: b.c }}/>
              {b.l} <strong style={{ color: "var(--text)" }}>{b.v.toLocaleString()}</strong>
            </span>
          ))}
          <span style={{ marginLeft: "auto" }}>총 분석 <strong style={{ color: "var(--text)" }}>{total.toLocaleString()}</strong> 전형</span>
        </div>
      </div>

      {/* mode tabs */}
      <div style={{ marginTop: 14, display: "flex", gap: 6, flexWrap: "wrap" }}>
        {[
          { t: "수시", on: true }, { t: "정시" }, { t: "학종 전략" }, { t: "AI 등급 예측" }, { t: "입시 분석" },
        ].map((m) => (
          <span key={m.t} style={{
            padding: "5px 10px", borderRadius: 999,
            background: m.on ? "var(--primary)" : "white",
            color: m.on ? "white" : "var(--text-3)",
            border: m.on ? "1px solid var(--primary)" : "1px solid var(--border)",
            fontSize: 11, fontWeight: m.on ? 700 : 500,
          }}>{m.t}</span>
        ))}
      </div>

      {/* univ rows */}
      <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
        {[
          { u: "단국대(천안)", d: "유럽중남미학부" },
          { u: "한양대(ERICA)", d: "경영학부" },
          { u: "부경대", d: "디지털금융학과" },
          { u: "순천향대", d: "유아교육과" },
        ].map((r) => (
          <div key={r.u} style={{ background: "white", border: "1px solid var(--border)", borderRadius: 8, padding: "8px 10px" }}>
            <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: "-0.01em" }}>{r.u}</div>
            <div style={{ fontSize: 10, color: "var(--text-3)", marginTop: 1 }}>{r.d}</div>
          </div>
        ))}
      </div>

      {/* AI prediction */}
      <div style={{
        marginTop: 12, padding: "10px 14px",
        background: "var(--accent-50)", border: "1px solid color-mix(in oklab, var(--accent) 30%, transparent)",
        borderRadius: 10,
        display: "flex", alignItems: "center", gap: 10,
      }}>
        <span style={{ width: 28, height: 28, borderRadius: 8, background: "var(--accent)", color: "var(--text)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Sparkle size={14}/>
        </span>
        <div style={{ flex: 1 }}>
          <div className="mono" style={{ fontSize: 9.5, color: "var(--accent)", letterSpacing: "0.14em" }}>AI 예측</div>
          <div style={{ fontSize: 11.5, color: "var(--text-2)", marginTop: 1 }}>현재 추세로 3-2학기 예상 등급은 <strong style={{ color: "var(--accent)" }}>3.51</strong>등급입니다.</div>
        </div>
      </div>
    </Frame>
  );
};

Object.assign(window, { ProductShowcase });