/* sections-timetable.jsx — 깔끔한 카드형 시간표 (v4)
   - 3개 프로그램 카드를 세로로 나열 (리드인 / 중등 / 고등)
   - 표 없이, 각 카드 안에 운영 시간 + 반 구성 + 커리큘럼 */

const TimetableSection = () => {
  const programs = [
    {
      tag: "READING & LITERACY",
      name: "리드인",
      desc: "초1~고3 통합 독서·문해력 프로그램",
      schedule: { days: "월·화·수·목·금", hours: "오후 2시 ~ 9시", note: "수업은 개별 선택 가능" },
      color: "var(--accent)",
      bg: "var(--accent-50)",
      light: "#fff7ed",
      border: "#fed7aa",
      icon: <Books size={28}/>,
      mode: "single",
      curriculum: {
        title: "리드인 커리큘럼",
        items: [
          { t: "교과 도서지수 테스트", d: "어휘·사실·추론·비판 4대 영역 평가" },
          { t: "1:1 맞춤 도서 매칭",   d: "1~10단계 레벨 기반 추천" },
          { t: "집중 독서 + AI 진단",   d: "읽기 속도·집중도·이해도 추적" },
          { t: "독서 노트 + 1:1 첨삭", d: "글쓰기·토론으로 사고력 확장" },
        ],
      },
    },
    {
      tag: "MIDDLE SCHOOL",
      name: "중등",
      desc: "월·수 = 내신반 / 화·목 = 수능기초반 / 금 = 통합 보충",
      schedule: { days: "월·화·수·목·금", hours: "오후 4시 ~ 10시", note: "2시간씩 · 주 2회 수업" },
      color: "var(--primary)",
      bg: "var(--primary-50)",
      light: "#eff6ff",
      border: "#bfdbfe",
      icon: <Target size={28}/>,
      classes: [
        {
          tag: "월·수",
          title: "내신반",
          color: "var(--primary)", bg: "var(--primary-50)",
          items: ["비문학 정밀 독해", "문학 작품 감상", "서술형 집중 훈련", "학교 기출 분석"],
        },
        {
          tag: "화·목",
          title: "수능기초반",
          color: "#1e40af", bg: "#dbeafe",
          items: ["어휘·문해력 다지기", "비문학 입문 독해", "기초 문법 정리", "모의고사 감각 익히기"],
        },
        {
          tag: "금",
          title: "통합 보충",
          color: "#6366f1", bg: "#e0e7ff",
          items: ["시험 직전 대비", "중3 모의·서술형 완성", "고입 마무리"],
        },
      ],
    },
    {
      tag: "HIGH SCHOOL",
      name: "고등",
      desc: "월·수 = 내신반 / 화·목 = 수능반 / 토·일 = 입시 강화",
      schedule: { days: "월~일 (주 7일 운영)", hours: "오후 6시 ~ 11시", note: "2시간씩 · 주 2회 수업" },
      color: "#6f42c1",
      bg: "rgba(111,66,193,0.08)",
      light: "rgba(111,66,193,0.04)",
      border: "rgba(111,66,193,0.28)",
      icon: <Trophy size={28}/>,
      classes: [
        {
          tag: "월·수",
          title: "내신반",
          color: "#6f42c1", bg: "rgba(111,66,193,0.08)",
          items: ["출판사·작품 단위 정밀 매칭", "서술형 감점 방지", "고난도 내신 문항", "1등급 사수 전략"],
        },
        {
          tag: "화·목",
          title: "수능반",
          color: "#4c1d95", bg: "#ede9fe",
          items: ["모의고사·기출 완벽 분석", "고난도 장문 독해", "봉투 모의 + 실전 연습", "고난도 문법·비문학"],
        },
        {
          tag: "토·일",
          title: "입시 강화반",
          color: "var(--accent)", bg: "var(--accent-50)",
          items: ["80분 실전 모의고사", "수시·정시·학종 컨설팅", "1:1 면접 준비", "오답·자율 정리"],
        },
      ],
    },
  ];

  return (
    <section id="timetable" style={{ padding: "100px 0", background: "var(--surface)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="wrap">
        <SectionHead
          tag="TIMETABLE · 수업 시간표"
          title={<>한 주의 흐름을<br/>한 화면으로</>}
          sub="리드인은 초1부터 고3까지 통합 운영, 중·고등부는 격일 지그재그(내신반·수능반)로 운영됩니다. 모든 수업은 2시간씩 주 2회입니다."
        />

        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          {programs.map((p) => (
            <div key={p.name} style={{
              background: "var(--surface)",
              border: `1px solid ${p.border}`,
              borderRadius: 20,
              overflow: "hidden",
              boxShadow: "var(--shadow-card)",
            }}>
              <div style={{
                display: "grid",
                gridTemplateColumns: "300px 1fr",
                gap: 0,
              }}>
                {/* 좌측: 프로그램 정체성 + 운영 시간 */}
                <div style={{
                  padding: "30px 28px",
                  background: p.light,
                  borderRight: `1px solid ${p.border}`,
                  display: "flex", flexDirection: "column", gap: 18,
                }}>
                  <div>
                    <div style={{ fontSize: 11, color: p.color, fontWeight: 800, letterSpacing: "0.12em" }}>{p.tag}</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 10 }}>
                      <span style={{
                        width: 52, height: 52, borderRadius: 14,
                        background: "white", color: p.color,
                        display: "flex", alignItems: "center", justifyContent: "center",
                        border: `1px solid ${p.border}`,
                      }}>{p.icon}</span>
                      <h3 style={{ fontSize: 32, fontWeight: 800, color: p.color, letterSpacing: "-0.03em", margin: 0 }}>{p.name}</h3>
                    </div>
                    <p style={{ fontSize: 13.5, color: "var(--text-2)", margin: "14px 0 0", lineHeight: 1.55, wordBreak: "keep-all", fontWeight: 500 }}>{p.desc}</p>
                  </div>

                  {/* 운영 시간 박스 */}
                  <div style={{
                    background: "white",
                    border: `1px solid ${p.border}`,
                    borderRadius: 12,
                    padding: 16,
                    display: "flex", flexDirection: "column", gap: 8,
                  }}>
                    <div style={{ fontSize: 11, color: p.color, fontWeight: 800, letterSpacing: "0.1em" }}>운영 시간</div>
                    <div style={{ fontSize: 15, fontWeight: 800, color: "var(--text)", letterSpacing: "-0.01em" }}>{p.schedule.days}</div>
                    <div style={{ fontSize: 18, fontWeight: 800, color: p.color, letterSpacing: "-0.02em" }}>{p.schedule.hours}</div>
                    <div style={{ fontSize: 12.5, color: "var(--text-2)", fontWeight: 600, marginTop: 2 }}>{p.schedule.note}</div>
                  </div>
                </div>

                {/* 우측: 커리큘럼 / 반 구성 */}
                <div style={{ padding: "30px 28px" }}>
                  {p.mode === "single" ? (
                    <div>
                      <div style={{ fontSize: 13, color: p.color, fontWeight: 800, letterSpacing: "0.08em", marginBottom: 14 }}>{p.curriculum.title.toUpperCase()}</div>
                      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
                        {p.curriculum.items.map((it, i) => (
                          <div key={i} style={{
                            background: p.bg,
                            border: `1px solid ${p.border}`,
                            borderLeft: `3px solid ${p.color}`,
                            borderRadius: 10,
                            padding: "14px 14px",
                          }}>
                            <div style={{ fontSize: 11, color: p.color, fontWeight: 800, letterSpacing: "0.04em" }}>STEP {i + 1}</div>
                            <div style={{ fontSize: 15, fontWeight: 800, color: "var(--text)", letterSpacing: "-0.015em", marginTop: 4, lineHeight: 1.3 }}>{it.t}</div>
                            <div style={{ fontSize: 12, color: "var(--text-2)", marginTop: 4, lineHeight: 1.45, fontWeight: 500, wordBreak: "keep-all" }}>{it.d}</div>
                          </div>
                        ))}
                      </div>
                    </div>
                  ) : (
                    <div>
                      <div style={{ fontSize: 13, color: p.color, fontWeight: 800, letterSpacing: "0.08em", marginBottom: 14 }}>반 구성 · CLASS LINE-UP</div>
                      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
                        {p.classes.map((c, i) => (
                          <div key={i} style={{
                            background: c.bg,
                            border: `1px solid ${p.border}`,
                            borderLeft: `4px solid ${c.color}`,
                            borderRadius: 12,
                            padding: "18px 18px",
                            display: "flex", flexDirection: "column", gap: 12,
                          }}>
                            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                              <span style={{
                                display: "inline-flex", alignItems: "center", gap: 4,
                                padding: "3px 10px", borderRadius: 999,
                                background: c.color, color: "#ffffff",
                                fontSize: 11, fontWeight: 800, letterSpacing: "0",
                                textShadow: "0 1px 2px rgba(0,0,0,0.18)",
                                whiteSpace: "nowrap",
                                flexShrink: 0,
                              }}>{c.tag}</span>
                              <span style={{ fontSize: 15, fontWeight: 800, color: c.color, letterSpacing: "-0.02em", whiteSpace: "nowrap" }}>{c.title}</span>
                            </div>
                            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                              {c.items.map((it, ii) => (
                                <li key={ii} style={{
                                  fontSize: 13.5, lineHeight: 1.5,
                                  color: "var(--text)",
                                  display: "flex", gap: 8, alignItems: "flex-start",
                                  wordBreak: "keep-all",
                                  fontWeight: 600,
                                }}>
                                  <span style={{
                                    width: 6, height: 6, borderRadius: 6,
                                    background: c.color,
                                    marginTop: 7, flexShrink: 0,
                                  }}/>
                                  <span>{it}</span>
                                </li>
                              ))}
                            </ul>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 안내 */}
        <div style={{
          marginTop: 22, padding: "18px 24px",
          background: "var(--primary-50)",
          border: "1px solid var(--primary)",
          borderRadius: 12,
          display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap",
          fontSize: 14, color: "var(--text)",
          fontWeight: 500,
        }}>
          <ArrowRight size={18} stroke="var(--primary)"/>
          <span>
            <strong style={{ color: "var(--primary)" }}>중·고등부는 모두 2시간씩 주 2회 수업</strong>으로 진행됩니다.
            반 편성과 수업 시간은 진단 결과를 기반으로 학생에게 맞춰 조정됩니다.
          </span>
          <a href="consultation.php" style={{ marginLeft: "auto", color: "var(--primary)", fontWeight: 800, display: "inline-flex", alignItems: "center", gap: 4, fontSize: 14 }}>
            반 편성 상담 <ArrowRight size={14}/>
          </a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TimetableSection });