/* sections-tuition.jsx — 교습비 안내 (인덱스 톤) */

const TUITION_GROUPS = [
  {
    heading: "단과",
    note: "원하는 한 과목만",
    accent: "var(--text)",
    items: [
      { name: "단과", desc: "문학 · 독서 · 문법 中 한 과목", price: 50000 },
      { name: "초등 단과", desc: "초등 학년 단과 수업", price: 140000 },
    ],
  },
  {
    heading: "리드인 독서",
    note: "단계별 정규 과정",
    accent: "var(--primary)",
    items: [
      { name: "독서 1단계", desc: "2회 수업", price: 140000 },
      { name: "독서 2단계", desc: "3회 수업", price: 180000 },
      { name: "독서 3단계", desc: "4회 수업", price: 220000 },
      { name: "독서 4단계", desc: "5회 수업", price: 250000 },
    ],
  },
  {
    heading: "정규반",
    note: "중·고등 입시 대비",
    accent: "var(--accent)",
    items: [
      { name: "중등반", desc: "내신·서술형·문해력 종합", price: 170000 },
      { name: "고등반", desc: "내신·모의·입시 종합", price: 200000 },
    ],
  },
];

const fmtPrice = (won) => (won / 10000).toLocaleString() + "만원";

const TuitionTable = () => (
  <section id="tuition" style={{ padding: "100px 0", background: "var(--surface-soft)", borderTop: "1px solid var(--border)" }}>
    <div className="wrap">
      <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
        <span className="eyebrow"><span className="eyebrow-dot"></span>TUITION · 교습비 안내</span>
        <h2 className="sec-title" style={{ marginLeft: "auto", marginRight: "auto" }}>
          다힘국어논술학원 <span style={{ color: "var(--primary)" }}>수강료</span>
        </h2>
        <p className="sec-sub" style={{ marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
          모든 수업은 원장 직강 100%. 표시 금액 외 추가비 없습니다. (교재비 별도)
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        {TUITION_GROUPS.map((g) => (
          <div key={g.heading} className="card" style={{
            padding: "28px 26px",
            display: "flex", flexDirection: "column", gap: 14,
          }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }}>
              <span className="chip" style={{
                background: `color-mix(in oklab, ${g.accent} 12%, white)`,
                color: g.accent, border: "none",
                fontWeight: 700,
              }}>{g.heading}</span>
              <span className="mono" style={{ fontSize: 11, color: "var(--text-4)", letterSpacing: "0.1em" }}>{g.note}</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {g.items.map((it, idx) => (
                <div key={it.name} style={{
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                  gap: 14, padding: "16px 0",
                  borderBottom: idx === g.items.length - 1 ? "none" : "1px dashed var(--border)",
                }}>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 15.5, fontWeight: 700, color: "var(--text)", letterSpacing: "-0.015em" }}>{it.name}</div>
                    <div style={{ fontSize: 12.5, color: "var(--text-3)", marginTop: 3, lineHeight: 1.5 }}>{it.desc}</div>
                  </div>
                  <div style={{
                    whiteSpace: "nowrap", fontWeight: 800, fontSize: 19,
                    color: g.accent, fontFeatureSettings: "'tnum'",
                    letterSpacing: "-0.02em",
                  }}>
                    {fmtPrice(it.price)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 28, padding: "18px 22px",
        background: "var(--surface)", border: "1px solid var(--border)", borderRadius: "var(--r-md)",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
        flexWrap: "wrap",
        boxShadow: "var(--shadow-card)",
      }}>
        <div style={{ fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.6 }}>
          정확한 시간표·교재 정보는 상담 시 안내드립니다. 형제 할인 / 장기 등록 할인 별도 문의.
        </div>
        <a href="consultation.php" className="btn btn-primary" style={{ flexShrink: 0 }}>
          상담 예약하기
        </a>
      </div>
    </div>
  </section>
);

window.TuitionTable = TuitionTable;