/* sections.jsx — 다힘 v4 (브리프 v2 + 사용자 맥락) */

const { useState, useEffect, useRef } = React;

// ─── 공용 ────────────────────────────────────────────────
const Eyebrow = ({ children, orange }) => (
  <span className={"eyebrow" + (orange ? " eyebrow-orange" : "")}>
    <span className="eyebrow-dot"/>
    {children}
  </span>
);

const SectionHead = ({ tag, title, sub, orange, align = "left", mb = 56 }) => (
  <div style={{
    textAlign: align, marginBottom: mb,
    maxWidth: align === "center" ? 760 : "100%",
    marginLeft: align === "center" ? "auto" : 0,
    marginRight: align === "center" ? "auto" : 0,
  }}>
    <Eyebrow orange={orange}>{tag}</Eyebrow>
    <h2 className="sec-title">{title}</h2>
    {sub && <p className="sec-sub" style={{ marginLeft: align === "center" ? "auto" : 0, marginRight: align === "center" ? "auto" : 0 }}>{sub}</p>}
  </div>
);

// ═══════════════════════════════════════════════════════════
// 1. HERO
// ═══════════════════════════════════════════════════════════
const Hero = () => (
  <section style={{ position: "relative", paddingTop: 84, paddingBottom: 88, overflow: "hidden" }}>
    <div aria-hidden style={{
      position: "absolute", inset: 0, pointerEvents: "none",
      background: "radial-gradient(60% 40% at 75% 10%, rgba(37,99,235,0.07), transparent 70%), radial-gradient(40% 30% at 90% 70%, rgba(234,88,12,0.06), transparent 70%)",
    }}/>
    <div className="wrap" style={{ position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 60, alignItems: "center" }}>
        <div className="fade-up">
          <div className="chip" style={{ background: "white" }}>
            <span style={{ width: 6, height: 6, borderRadius: 6, background: "var(--green)" }} className="pulse-dot"/>
            <span>울산 입시 명문 · 20년+ · <span data-count-key="q_total_man">{(() => { const c = (typeof window !== 'undefined' && window.DAHIM_DATA && window.DAHIM_DATA.counts) || {}; const t = c.q_total || ((c.ebs_questions||33624) + (c.neasin_questions||27985)); const tenK = Math.round(t/10000); return tenK; })()}</span>만 문항 · 캠퍼스 2곳</span>
          </div>

          <h1 style={{
            fontSize: "clamp(44px, 5.4vw, 72px)",
            lineHeight: 1.05,
            letterSpacing: "-0.038em",
            fontWeight: 800,
            margin: "22px 0 0",
            textWrap: "balance",
          }}>
            잊지 않게 가르치고,<br/>
            매일 부모님께<br/>
            <span style={{ color: "var(--primary)" }}>보고합니다.</span>
          </h1>

          <p style={{
            marginTop: 24,
            fontSize: 17.5, lineHeight: 1.65,
            color: "var(--text-3)", maxWidth: "46ch",
          }}>
            1·3·7·30일 자동 복습 · 3회 연속 정답 시 ‘정복’ ·
            매일 18시 학부모 알림 · 매주 일요일 21시 주간 요약 · 매월 1일 월간 리포트.
            <strong style={{ color: "var(--text)" }}> 학원이 자동으로 합니다.</strong>
          </p>

          <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
            <a href="/free_diagnosis/" className="btn btn-primary">
              무료 5분 진단 받기<ArrowRight size={16}/>
            </a>
            <a href="/consultation.php" className="btn btn-ghost">
              상담 예약하기
            </a>
          </div>

          <div style={{ marginTop: 32, display: "flex", alignItems: "center", gap: 16, color: "var(--text-3)", fontSize: 13, flexWrap: "wrap" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <Check size={16} stroke="var(--green)"/> 원장 직강 100%
            </div>
            <div style={{ width: 1, height: 14, background: "var(--border)" }}/>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <Check size={16} stroke="var(--green)"/> 리드인(독서) + 입시·내신
            </div>
            <div style={{ width: 1, height: 14, background: "var(--border)" }}/>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <Check size={16} stroke="var(--green)"/> 출판사·학년·학교 매칭
            </div>
          </div>
        </div>

        <div className="fade-up delay-2" style={{ position: "relative", height: 580 }}>
          <HeroGrass/>
          <HeroDailyReport/>
          <HeroTimeCapsule/>
        </div>
      </div>
    </div>
  </section>
);

// 잔디 캘린더 (GitHub-style heatmap) + 1·3·7·30 highlights
const HeroGrass = () => {
  // 7 rows × 12 weeks
  const rows = 7;
  const cols = 12;
  // synthetic learning pattern
  const heat = Array.from({ length: rows * cols }).map((_, i) => {
    const r = i % rows;
    const c = Math.floor(i / rows);
    if (r === 6) return 0; // Sunday off
    // gradient pattern with some intensity
    const v = Math.max(0, Math.min(4, Math.round(((c + r * 0.3) % 5) + (Math.sin(i) > 0 ? 1 : 0))));
    return v;
  });
  // 1·3·7·30 highlighted markers
  const highlights = { 12: 1, 14: 3, 18: 7, 41: 30 };
  const palette = ["var(--surface-soft)", "#dbeafe", "#93c5fd", "#3b82f6", "#1d4ed8"];

  return (
    <div className="dh-glass-card" style={{
      position: "absolute", left: 0, top: 30,
      width: 420,
      borderRadius: "var(--r-xl)",
      padding: 22,
      zIndex: 2,
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", letterSpacing: "0.14em" }}>잔디 · 12주 학습 누적</div>
          <div style={{ fontWeight: 700, fontSize: 16, marginTop: 4 }}>오늘까지 67일 연속</div>
        </div>
        <div className="chip" style={{ background: "var(--primary-50)", color: "var(--primary)", border: "none", fontWeight: 700 }}>
          <Sprout size={12}/> +1
        </div>
      </div>

      {/* grass grid */}
      <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gridAutoFlow: "column", gridTemplateRows: `repeat(${rows}, 1fr)`, gap: 4 }}>
        {heat.map((v, i) => {
          const h = highlights[i];
          return (
            <div key={i} style={{
              aspectRatio: "1",
              borderRadius: 3,
              background: palette[v],
              position: "relative",
              border: h ? "2px solid var(--accent)" : "none",
              boxShadow: h ? "0 0 0 2px var(--surface), 0 2px 6px rgba(234,88,12,0.4)" : "none",
            }}>
              {h && (
                <span style={{
                  position: "absolute", top: -16, left: "50%", transform: "translateX(-50%)",
                  fontSize: 9, fontWeight: 700, color: "var(--accent)", whiteSpace: "nowrap",
                  fontFamily: "var(--mono)",
                }}>D+{h}</span>
              )}
            </div>
          );
        })}
      </div>

      {/* legend */}
      <div style={{ marginTop: 14, display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 11, color: "var(--text-4)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          적음
          <div style={{ display: "flex", gap: 2 }}>
            {palette.map((c, i) => <div key={i} style={{ width: 10, height: 10, borderRadius: 2, background: c }}/>)}
          </div>
          많음
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 8, height: 8, borderRadius: 2, background: "transparent", border: "1.5px solid var(--accent)" }}/>
          1·3·7·30일 자동 복습
        </div>
      </div>
    </div>
  );
};

// Daily Report 미리보기 (SMS)
const HeroDailyReport = () => (
  <div className="dh-glass-card-dark" style={{
    position: "absolute", right: 0, top: 0,
    width: 260,
    background: "rgba(15, 23, 42, 0.85)", color: "white",
    borderRadius: "var(--r-lg)",
    padding: 16,
    transform: "rotate(3deg)",
    zIndex: 3,
    border: "1px solid rgba(255, 255, 255, 0.15)",
    boxShadow: "0 20px 40px rgba(15, 23, 42, 0.3)",
  }}>
    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, opacity: 0.6 }}>
      <span className="mono">학부모 SMS · 매일 18시</span>
      <span className="mono">18:02</span>
    </div>
    <div style={{
      marginTop: 10, padding: 12,
      background: "rgba(255,255,255,0.08)",
      borderRadius: 12, borderTopLeftRadius: 4,
      fontSize: 11.5, lineHeight: 1.55,
    }}>
      <strong>[다힘국어]</strong><br/>
      김OO 학생 오늘 보고서<br/>
      <span style={{ opacity: 0.75 }}>입실 16:42 · 학습 5회 · 메타인지 82점 · 정복 1건</span><br/>
      <span style={{ color: "#93c5fd" }}>자세히 보기 →</span>
    </div>
  </div>
);

const HeroTimeCapsule = () => (
  <div className="dh-glass-card" style={{
    position: "absolute", right: -10, bottom: 0,
    width: 280,
    borderRadius: "var(--r-lg)",
    padding: 18,
    transform: "rotate(-2deg)",
    zIndex: 3,
  }}>
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <div style={{ width: 24, height: 24, borderRadius: 6, background: "var(--accent-50)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Hourglass size={14}/>
      </div>
      <span className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", letterSpacing: "0.14em" }}>30일 시간 캡슐</span>
    </div>
    <div style={{ display: "flex", marginTop: 12 }}>
      <div style={{ flex: 1, paddingRight: 12, borderRight: "1px dashed var(--border)" }}>
        <div style={{ fontSize: 10.5, color: "var(--text-4)" }}>한 달 전</div>
        <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: "-0.03em", marginTop: 2 }}>30<span style={{ fontSize: 13, color: "var(--text-4)" }}>%</span></div>
        <div style={{ fontSize: 11, color: "var(--text-4)" }}>이해도</div>
      </div>
      <div style={{ flex: 1, paddingLeft: 14 }}>
        <div style={{ fontSize: 10.5, color: "var(--accent)" }}>지금</div>
        <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: "-0.03em", marginTop: 2, color: "var(--accent)" }}>85<span style={{ fontSize: 13, color: "var(--accent)", opacity: 0.6 }}>%</span></div>
        <div style={{ fontSize: 11, color: "var(--accent)", opacity: 0.7 }}>이해도</div>
      </div>
    </div>
    <div style={{ marginTop: 10, height: 4, borderRadius: 4, background: "var(--surface-soft)" }}>
      <div style={{ height: "100%", width: "85%", background: "linear-gradient(90deg, var(--primary), var(--accent))", borderRadius: 4 }}/>
    </div>
  </div>
);

// ═══════════════════════════════════════════════════════════
// 2. 학부모 3대 불안 → 다힘의 답
// ═══════════════════════════════════════════════════════════
const Anxieties = () => {
  const data = [
    {
      qTop: "“우리 아이가 진짜",
      qBot: "공부하고 있는 건가?”",
      sys: "키오스크 입실 + 회차별 학습 로그",
      icon: <QR size={22}/>,
      body: "학원 자체 키오스크로 입퇴실 시각·관(room)·학생을 3중 기록합니다. 정독 시간이 초 단위로 추적되고, 입실 즉시 학부모께 자동 통보됩니다.",
    },
    {
      qTop: "“한 번 틀린 걸 또",
      qBot: "틀리지 않을까?”",
      sys: "약점 자동 반복 보완 시스템",
      icon: <Refresh size={22}/>,
      body: "틀린 문제는 자동으로 오답 데이터베이스에 모입니다. 변형 출제와 반복학습을 통해 같은 약점을 두 번 틀리지 않게 만들고, 졸업할 때 한 권의 약점 노트로 정리해 드립니다.",
      accent: true,
    },
    {
      qTop: "“3개월 보냈는데 진짜",
      qBot: "나아진 게 맞나?”",
      sys: "30일 성장판 · 월간 비교 리포트",
      icon: <Hourglass size={22}/>,
      body: "한 달 전 점수·풀이 속도·문해력 지표와 오늘을 나란히 비교합니다. 매월 자동 그래프로 보내드립니다. 막연한 느낌이 아닌 데이터로 확인하세요.",
    },
  ];
  return (
    <section id="anxieties" style={{ padding: "100px 0" }}>
      <div className="wrap">
        <SectionHead
          tag="PARENT · 부모님의 궁금증"
          title={<>가장 궁금한 세 가지에<br/><span style={{ color: "var(--primary)" }}>시스템이 답합니다.</span></>}
          sub="학원이 매일 자동으로 추적하고, 학부모가 매일 알림으로 확인합니다."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {data.map((d, i) => (
            <div key={i} className="dh-glass-card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
              {/* 큰 질문 헤더 — 배경에 흐릿한 Q + 위 왼쪽/아래 오른쪽 정렬 */}
              <div style={{
                position: "relative",
                padding: "32px 30px",
                background: d.accent ? "linear-gradient(135deg, #ea580c 0%, #ff782e 50%, #c2410c 100%)" : "linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%)",
                color: "white",
                minHeight: 168,
                overflow: "hidden",
              }}>
                {/* 큰 Q&A 워터마크 */}
                <div aria-hidden style={{
                  position: "absolute",
                  right: -10, top: -42,
                  fontSize: 180, fontWeight: 900,
                  lineHeight: 1,
                  letterSpacing: "-0.06em",
                  color: d.accent ? "rgba(255,255,255,0.12)" : "rgba(255,255,255,0.08)",
                  fontFamily: "Georgia, serif",
                  fontStyle: "italic",
                  pointerEvents: "none",
                  userSelect: "none",
                  whiteSpace: "nowrap",
                }}>Q&amp;A</div>

                {/* 질문 두 줄 (위=좌, 아래=우) */}
                <div style={{
                  position: "relative",
                  display: "flex", flexDirection: "column",
                  gap: 4,
                  fontWeight: 800,
                  letterSpacing: "-0.025em",
                  lineHeight: 1.35,
                  wordBreak: "keep-all",
                  fontSize: 26,
                }}>
                  <div style={{ textAlign: "left" }}>{d.qTop}</div>
                  <div style={{ textAlign: "right" }}>{d.qBot}</div>
                </div>
              </div>
              <div style={{ padding: "26px 28px 30px", flex: 1, display: "flex", flexDirection: "column" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <span style={{
                    width: 44, height: 44, borderRadius: 12,
                    background: d.accent ? "var(--accent-50)" : "var(--primary-50)",
                    color: d.accent ? "var(--accent)" : "var(--primary)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    flexShrink: 0,
                  }}>{d.icon}</span>
                  <div>
                    <div style={{
                      display: "inline-flex", alignItems: "center", gap: 4,
                      fontSize: 11, color: d.accent ? "var(--accent)" : "var(--primary)",
                      letterSpacing: "0.14em", fontWeight: 800,
                    }}>
                      <span style={{ width: 4, height: 4, borderRadius: 4, background: "currentColor" }}/>
                      다힘의 답
                    </div>
                    <div style={{ fontSize: 16.5, fontWeight: 800, letterSpacing: "-0.015em", marginTop: 4, lineHeight: 1.3 }}>{d.sys}</div>
                  </div>
                </div>
                <p style={{
                  fontSize: 15, lineHeight: 1.7,
                  color: "var(--text-2)",
                  marginTop: 20, marginBottom: 0,
                  wordBreak: "keep-all",
                  fontWeight: 500,
                }}>{d.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════
// 2-B. 다힘의 학습 동선 — 첫 등원부터 졸업까지 한 톱니바퀴처럼
// ═══════════════════════════════════════════════════════════
const DahimSystem = () => {
  const steps = [
    {
      n: "01", title: "메타인지 진단",
      lead: "아는 것과 모르는 것을 철저히 분리",
      icon: <Brain size={22}/>, color: "var(--primary)", bg: "var(--primary-50)",
      items: [
        "메타인지 시험으로 학생의 실제 실력을 정확히 측정",
        "읽기 속도와 문해력을 모두 수치화",
        "강·약점이 데이터로 명확히 도출됩니다",
      ],
    },
    {
      n: "02", title: "맞춤형 자동 처방",
      lead: "약점은 그 자리에서 처방됩니다",
      icon: <Sparkle size={22}/>, color: "var(--accent)", bg: "var(--accent-50)",
      highlight: true,
      items: [
        "읽기 속도 느린 학생 → 자동 읽기 훈련 즉시 시작",
        "문해력 약한 학생 → 비문학 짧은 문장부터 긴 글까지 단계별 요약 정리 습관화",
        "집중력 훈련으로 글을 읽어내는 힘을 키웁니다",
      ],
    },
    {
      n: "03", title: "1·3·7·30일 반복학습",
      lead: "그날 배운 내용을 완전히 자기 것으로",
      icon: <Refresh size={22}/>, color: "var(--primary)", bg: "var(--primary-50)",
      items: [
        "수업과 별개로 메타인지 시스템 작동",
        "배운 내용을 1일·3일·7일·30일 자동 반복",
        "동영상 강의로 부족한 부분을 매번 보완",
      ],
    },
    {
      n: "04", title: "개별 약점 자기학습",
      lead: "약한 부분은 따로, 끝까지",
      icon: <Books size={22}/>, color: "#6f42c1", bg: "rgba(111,66,193,0.08)",
      items: [
        "문법이 약한 학생 → 학원 시스템 문법 강좌 자기학습",
        "개념이 약한 학생 → 개념어 강좌 자기학습",
        "학생 본인의 페이스로 부족한 부분을 끝까지 채워줍니다",
      ],
    },
    {
      n: "05", title: ((() => { const c = (typeof window !== 'undefined' && window.DAHIM_DATA && window.DAHIM_DATA.counts) || {}; const t = c.q_total || ((c.ebs_questions||33624) + (c.neasin_questions||27985)); return t.toLocaleString() + '+ 문제 시험 대비'; })()),
      lead: "방대한 양으로 실전을 압도",
      icon: <Document size={22}/>, color: "var(--accent)", bg: "var(--accent-50)",
      items: [
        ((() => { const c = (typeof window !== 'undefined' && window.DAHIM_DATA && window.DAHIM_DATA.counts) || {}; const t = c.q_total || ((c.ebs_questions||33624) + (c.neasin_questions||27985)); return '내신·모의 ' + t.toLocaleString() + '문항 자체 문제은행'; })()),
        "틀린 문제는 자동으로 오답 데이터베이스에 수집",
        "오답노트로 변환되어 반복학습으로 약점 정복",
      ],
    },
    {
      n: "06", title: "수시·정시·학종 컨설팅",
      lead: "학생부 한 장이면 모든 입시 전략",
      icon: <Trophy size={22}/>, color: "var(--green)", bg: "var(--green-50)",
      items: [
        "학생부 기록 기반으로 목표 대학 정밀 분석",
        "수시·정시·학종 통합 전략과 최저등급 관리",
        "면접 준비까지 끝까지 동행합니다",
      ],
    },
  ];

  return (
    <section id="system-flow" style={{ padding: "100px 0", background: "var(--surface)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
      <div className="wrap">
        <SectionHead
          tag="PIPELINE · 첫 등원부터 졸업까지"
          title={<>다힘은 등원 첫날부터<br/><span style={{ color: "var(--primary)" }}>한 톱니바퀴처럼</span> 움직입니다.</>}
          sub="학생을 평가하는 기준부터 기존 학원들과 완전히 다릅니다. 진단 → 처방 → 반복 → 개별 보충 → 시험 대비 → 입시 컨설팅까지, 여섯 단계가 끊김 없이 자동으로 이어집니다."
        />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {steps.map((s) => (
            <div key={s.n} className="dh-glass-card" style={{
              padding: 28, position: "relative", overflow: "hidden",
              background: s.highlight ? `linear-gradient(180deg, rgba(255,255,255,0.9) 0%, ${s.bg} 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: 52, height: 52, borderRadius: 14,
                  background: s.bg, color: s.color,
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>{s.icon}</span>
                <span className="mono" style={{ fontSize: 13, color: s.color, letterSpacing: "0.16em", fontWeight: 800 }}>STEP {s.n}</span>
              </div>
              <div style={{ fontSize: 12.5, color: s.color, fontWeight: 700, marginTop: 20, letterSpacing: "-0.01em" }}>{s.lead}</div>
              <h3 style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-0.025em", margin: "6px 0 18px", color: "var(--text)" }}>{s.title}</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {s.items.map((it, i) => (
                  <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, lineHeight: 1.6, color: "var(--text-2)", wordBreak: "keep-all", fontWeight: 500 }}>
                    <span style={{
                      width: 20, height: 20, borderRadius: 6,
                      background: s.bg, color: s.color,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      flexShrink: 0, marginTop: 1,
                    }}>
                      <Check size={12}/>
                    </span>
                    {it}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* closing — 학원 지향점 */}
        <div style={{
          marginTop: 28,
          background: "linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%)", color: "white",
          borderRadius: "var(--r-xl)",
          padding: "40px 48px",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 24, flexWrap: "wrap",
          position: "relative", overflow: "hidden",
          boxShadow: "0 10px 30px rgba(15, 23, 42, 0.15)",
        }}>
          <div aria-hidden style={{
            position: "absolute", inset: 0,
            backgroundImage: "linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)",
            backgroundSize: "28px 28px",
            WebkitMaskImage: "radial-gradient(60% 80% at 90% 50%, black, transparent)",
            maskImage: "radial-gradient(60% 80% at 90% 50%, black, transparent)",
          }}/>
          <div style={{ position: "relative" }}>
            <div className="mono" style={{ fontSize: 11, color: "#fdba74", letterSpacing: "0.18em", fontWeight: 800 }}>OUR COMMITMENT · 다힘의 지향점</div>
            <h3 style={{ fontSize: 28, fontWeight: 800, letterSpacing: "-0.028em", margin: "10px 0 0", lineHeight: 1.3, color: "white", textWrap: "balance", wordBreak: "keep-all" }}>
              처음부터 끝까지, <span style={{ color: "#fdba74" }}>게으름은 허락하지 않습니다.</span><br/>
              학생의 성적, 우리가 반드시 잡아냅니다.
            </h3>
          </div>
          <a href="consultation.php" className="btn btn-accent" style={{ position: "relative", flexShrink: 0 }}>
            지금 진단 받기 <ArrowRight size={16}/>
          </a>
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════
// 3. WHY DAHIM 5 + 원장 직강
// ═══════════════════════════════════════════════════════════
const WhyFive = () => (
  <section id="why" style={{ padding: "100px 0", background: "var(--surface-soft)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
    <div className="wrap">
      <SectionHead
        tag="WHY · 학부모 결정타 5"
        title={<>“최고”라고 말하지 않습니다.<br/><span style={{ color: "var(--primary)" }}>시스템으로</span> 보여드립니다.</>}
        sub="20년 노하우 · 데이터로 증명하는 학습. 다섯 가지를 한 화면에 정리했습니다."
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gridAutoRows: "minmax(0, auto)", gap: 18 }}>
        {/* 1. Director card (large, 2x2) — 원장 직강 */}
        <div className="card" style={{
          gridColumn: "span 2", gridRow: "span 2",
          padding: 28, position: "relative", overflow: "hidden",
          background: "linear-gradient(180deg, var(--surface) 0%, var(--primary-50) 100%)",
          display: "flex", flexDirection: "column",
        }}>
          <Eyebrow>FOUNDER · 원장 직강</Eyebrow>
          <h3 style={{ fontSize: 26, fontWeight: 800, letterSpacing: "-0.025em", margin: "14px 0 0", textWrap: "balance" }}>
            20년 동안 한 권도<br/>외주에 맡기지 않았습니다.
          </h3>
          <p style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--text-3)", margin: "12px 0 0" }}>
            모든 수업은 원장이 직접. AI 출제 문제도 학생 화면 그대로 미리보기로 검수한 뒤에만 공개합니다.
          </p>

          <div style={{ marginTop: "auto", paddingTop: 24, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
            {[
              { k: "20년+", v: "교육 경력" },
              { k: "100%", v: "원장 직강" },
              { k: "전수", v: "AI 문항 검수" },
              { k: "1:1", v: "출결 흔들리면 직접 상담" },
            ].map((c) => (
              <div key={c.k} style={{ background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, padding: "10px 12px" }}>
                <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: "-0.02em" }}>{c.k}</div>
                <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 2 }}>{c.v}</div>
              </div>
            ))}
          </div>

          {/* portrait stamp */}
          <div style={{
            position: "absolute", right: 24, top: 22,
            width: 76, height: 76, borderRadius: "50%",
            background: "var(--surface)", border: "1px dashed var(--border-strong)",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "var(--text-4)", fontSize: 9, letterSpacing: "0.1em",
          }}>이상헌</div>
        </div>

        {/* 4 small punch cards */}
        {[
          {
            n: "01", title: "매일 자동으로 보고",
            body: "18시 학습 알림 · 일요일 21시 주간 요약 · 매월 1일 월간 리포트. 안 물어봐도 학원이 먼저 알립니다.",
            icon: <Bell size={20}/>, color: "var(--primary)",
          },
          {
            n: "02", title: "3번 틀린 문제는 안 넘어갑니다",
            body: "Conquer가 변형 출제 → 3회 연속 정답까지 추적 → 졸업할 때 ‘정복 책’ PDF.",
            icon: <Books size={20}/>, color: "var(--accent)",
          },
          {
            n: "03", title: "한 달 전 나 vs 지금 나",
            body: "Time Capsule이 점수·풀이 속도·문장 길이까지 비교. 성장은 막연한 느낌이 아닌 그래프.",
            icon: <Hourglass size={20}/>, color: "var(--green)",
          },
          {
            n: "04", title: "출판사·학교 정밀 매칭",
            body: "미래엔·비상·천재 출판사별, 작품 단위까지. 진짜 시험과 같은 형식·범위로",
            icon: <Target size={20}/>, color: "var(--primary)",
          },
        ].map((c) => (
          <div key={c.n} className="card" style={{
            gridColumn: "span 2", padding: 24,
            display: "flex", flexDirection: "column",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{
                width: 36, height: 36, borderRadius: 10,
                background: `color-mix(in oklab, ${c.color} 12%, white)`,
                color: c.color,
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>{c.icon}</span>
              <span className="mono" style={{ fontSize: 11, color: "var(--text-4)", letterSpacing: "0.14em" }}>{c.n}</span>
            </div>
            <h4 style={{ fontSize: 17, fontWeight: 800, letterSpacing: "-0.02em", margin: "16px 0 8px" }}>{c.title}</h4>
            <p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--text-3)", margin: 0 }}>{c.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════
// 4. SYSTEM — 7 cards (refined)
// ═══════════════════════════════════════════════════════════
const System = () => {
  const items = [
    {
      n: "01", title: "1·3·7·30일 자동 예약 학습", primary: true, span: 2,
      body: "수업을 들으면 시스템이 자동으로 다음 학습 일정을 잡아 큐에 넣습니다. 호기심→정독→인출→확신도→자기설명 5단계로 진행되며 정독 시간이 초 단위로 추적됩니다.",
      icon: <Calendar137 size={20}/>, visual: <VisSpaced/>,
    },
    {
      n: "02", title: "AI 출제 + 원장 검수 게이트",
      body: "교과서 PDF에서 회차별 문제 세트가 자동 생성됩니다. 모든 문제는 원장이 학생 화면 그대로 미리보기 후 공개합니다.",
      icon: <Sparkle size={20}/>, visual: <VisAI/>,
    },
    {
      n: "03", title: "Conquer — 3회 연속 정답이면 정복",
      body: "오답이 다른 회차에서 변형되어 다시 만납니다. 3번 연속 정답이면 ‘정복’. 졸업할 때 책으로 묶입니다.",
      icon: <Books size={20}/>, visual: <VisConquer/>,
    },
    {
      n: "04", title: "30일 Time Capsule",
      body: "1·3·7·30일 라운드를 끝낸 단원은 한 달 전과 지금이 나란히 비교됩니다. ‘처음 30% → 지금 85%’ 같은 시각화.",
      icon: <Hourglass size={20}/>, visual: <VisCapsule/>,
    },
    {
      n: "05", title: "Signals — 학습 신호등",
      body: "메타인지 제출률·정확성, 영상 집중도, 플래너 실행률을 신호등(녹·황·적)으로. 부모도 학생도 한눈에.",
      icon: <Signal size={20}/>, visual: <VisSignals/>,
    },
    {
      n: "06", title: "출판사·학교 정밀 매칭",
      body: "미래엔·비상·천재 출판사별, 작품 단위(예: 미래엔 ‘스노우맨’, 비상 ‘흰 바람벽이 있어’)까지",
      icon: <Target size={20}/>, visual: <VisMatch/>,
    },
    {
      n: "07", title: "시험직전요약",
      body: "시험 1주일 전, 회차별 핵심만 한 페이지로. 동영상 강의에서도 즉시 호출, 풀스크린 모달.",
      icon: <Document size={20}/>, visual: <VisSummary/>,
    },
  ];

  return (
    <section id="system" style={{ padding: "100px 0" }}>
      <div className="wrap">
        <SectionHead
          tag="SYSTEM · 시스템이 학생을 돕는 방식"
          title={<>가르치는 일과<br/>가르친 뒤의 일을 한 시스템으로</>}
          sub="학생은 ‘오늘 할 일’만 보면 됩니다. 잊지 않게 만드는 일은 시스템이 합니다."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {items.map((it) => <SystemCard key={it.n} item={it}/>)}
        </div>
      </div>
    </section>
  );
};

const SystemCard = ({ item }) => (
  <div className="card" style={{
    gridColumn: item.span === 2 ? "span 2" : "auto",
    padding: 0, overflow: "hidden",
    display: "flex", flexDirection: "column",
    background: item.primary ? "linear-gradient(180deg, var(--surface) 0%, var(--primary-50) 100%)" : "var(--surface)",
  }}>
    <div style={{ padding: 26, flex: 1 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{
          width: 38, height: 38, borderRadius: 10,
          background: item.primary ? "var(--primary)" : "var(--primary-50)",
          color: item.primary ? "white" : "var(--primary)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>{item.icon}</span>
        <span className="mono" style={{ fontSize: 11, color: "var(--text-4)", letterSpacing: "0.14em" }}>{item.n}</span>
      </div>
      <h3 style={{ fontSize: item.span === 2 ? 22 : 18, fontWeight: 800, letterSpacing: "-0.02em", margin: "16px 0 10px" }}>{item.title}</h3>
      <p style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--text-3)", margin: 0 }}>{item.body}</p>
    </div>
    {item.visual && <div style={{ padding: "0 26px 26px" }}>{item.visual}</div>}
  </div>
);

// ── 시스템 카드 시각 ─────────────────────────────────
const VisSpaced = () => (
  <div style={{ background: "white", border: "1px solid var(--border)", borderRadius: 12, padding: 16 }}>
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
      <span className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", letterSpacing: "0.14em" }}>오늘 푼 한 문제의 일정</span>
      <span style={{ fontSize: 11, color: "var(--text-3)" }}>5단계 · 메타인지</span>
    </div>
    <div style={{ position: "relative", padding: "8px 0 24px" }}>
      <div style={{ position: "absolute", left: 18, right: 18, top: 22, height: 2, background: "var(--border)" }}/>
      <div style={{ display: "flex", justifyContent: "space-between", position: "relative" }}>
        {[
          { d: "D+1", label: "학습", c: "var(--accent)" },
          { d: "D+3", label: "1차 복습", c: "var(--primary)" },
          { d: "D+7", label: "2차 복습", c: "var(--primary)" },
          { d: "D+30", label: "확신", c: "var(--green)" },
        ].map((s, i) => (
          <div key={s.d} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
            <div style={{
              width: 28, height: 28, borderRadius: "50%",
              background: s.c, color: "white",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 10.5, fontWeight: 700,
              boxShadow: "0 4px 10px -2px rgba(0,0,0,0.15)",
            }}>{i === 0 ? <Check size={14}/> : i + 1}</div>
            <div style={{ fontSize: 10.5, color: "var(--text-3)", fontWeight: 600 }}>{s.d}</div>
            <div style={{ fontSize: 9.5, color: "var(--text-4)" }}>{s.label}</div>
          </div>
        ))}
      </div>
    </div>
    <div style={{ display: "flex", gap: 4, marginTop: 4 }}>
      {["호기심", "정독", "인출", "확신도", "자기설명"].map((s, i) => (
        <div key={s} style={{ flex: 1, padding: "5px 4px", textAlign: "center", background: "var(--surface-soft)", borderRadius: 5, fontSize: 9.5, color: "var(--text-3)", fontWeight: 600 }}>{s}</div>
      ))}
    </div>
  </div>
);

const VisAI = () => (
  <div style={{ background: "var(--surface-soft)", border: "1px solid var(--border)", borderRadius: 12, padding: 14 }}>
    <div style={{ fontSize: 11.5, lineHeight: 1.5, color: "var(--text-2)" }}>
      <div style={{ padding: "8px 10px", background: "white", borderRadius: 6, borderLeft: "3px solid var(--primary)" }}>
        PDF → AI 문항 32개 생성
      </div>
      <div style={{ marginTop: 6, padding: "8px 10px", background: "white", borderRadius: 6, borderLeft: "3px solid var(--accent)" }}>
        <strong style={{ color: "var(--accent)" }}>원장 학생화면 검수</strong>
      </div>
      <div style={{ marginTop: 6, padding: "8px 10px", background: "white", borderRadius: 6, borderLeft: "3px solid var(--green)" }}>
        is_active=1 · 공개
      </div>
    </div>
  </div>
);

const VisConquer = () => (
  <div style={{ background: "white", border: "1px solid var(--border)", borderRadius: 12, padding: 14 }}>
    <div className="mono" style={{ fontSize: 10, color: "var(--text-4)", letterSpacing: "0.14em" }}>같은 약점 3회 정답까지</div>
    <div style={{ display: "flex", gap: 6, marginTop: 10, alignItems: "center", flexWrap: "wrap" }}>
      {[true, true, false, true, true, true].map((ok, i) => (
        <div key={i} style={{
          width: 26, height: 26, borderRadius: 6,
          background: ok ? "var(--green-50)" : "var(--accent-50)",
          color: ok ? "var(--green)" : "var(--accent)",
          display: "flex", alignItems: "center", justifyContent: "center",
          border: `1px solid ${ok ? "var(--green)" : "var(--accent)"}`,
        }}>{ok ? <Check size={13}/> : <X size={11}/>}</div>
      ))}
      <span style={{ fontSize: 11, marginLeft: "auto", color: "var(--green)", fontWeight: 600 }}>3연속 → 정복</span>
    </div>
  </div>
);

const VisCapsule = () => (
  <div style={{ background: "white", border: "1px solid var(--border)", borderRadius: 12, padding: 14, display: "flex" }}>
    <div style={{ flex: 1, paddingRight: 12, borderRight: "1px dashed var(--border)" }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--text-4)", letterSpacing: "0.14em" }}>30일 전</div>
      <div style={{ fontSize: 22, fontWeight: 800, marginTop: 4 }}>30<span style={{ fontSize: 11, color: "var(--text-4)" }}>%</span></div>
      <div style={{ fontSize: 11, color: "var(--text-4)" }}>이해도</div>
    </div>
    <div style={{ flex: 1, paddingLeft: 14 }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.14em" }}>지금</div>
      <div style={{ fontSize: 22, fontWeight: 800, marginTop: 4, color: "var(--accent)" }}>85<span style={{ fontSize: 11, opacity: 0.6 }}>%</span></div>
      <div style={{ fontSize: 11, color: "var(--accent)", opacity: 0.7 }}>이해도</div>
    </div>
  </div>
);

const VisSignals = () => (
  <div style={{ background: "white", border: "1px solid var(--border)", borderRadius: 12, padding: 14 }}>
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {[
        { k: "메타인지 제출", v: "녹", c: "var(--green)", bg: "var(--green-50)" },
        { k: "영상 집중도", v: "황", c: "var(--amber)", bg: "var(--amber-50)" },
        { k: "플래너 실행", v: "녹", c: "var(--green)", bg: "var(--green-50)" },
      ].map((s) => (
        <div key={s.k} style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ flex: 1, fontSize: 11.5, color: "var(--text-2)" }}>{s.k}</span>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 5,
            padding: "3px 8px", borderRadius: 999,
            background: s.bg, color: s.c, fontSize: 10.5, fontWeight: 700,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 6, background: s.c }}/> {s.v}
          </span>
        </div>
      ))}
    </div>
  </div>
);

const VisMatch = () => (
  <div style={{ background: "white", border: "1px solid var(--border)", borderRadius: 12, padding: 12 }}>
    <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
      {["미래엔", "고2", "방민호 ‘스노우맨’", "2026 1학기"].map((c, i) => (
        <span key={c} className="chip" style={{ fontSize: 10.5, padding: "4px 8px", background: i === 0 ? "var(--primary-50)" : "white", color: i === 0 ? "var(--primary)" : "var(--text-3)" }}>{c}</span>
      ))}
    </div>
    <div style={{ marginTop: 10, fontSize: 11.5, color: "var(--text-3)" }}>
      → <strong style={{ color: "var(--text)" }}>맞춤 문제 124개</strong> · 작품 단위 정밀 매핑
    </div>
  </div>
);

const VisSummary = () => (
  <div style={{ background: "white", border: "1px solid var(--border)", borderRadius: 12, padding: 12 }}>
    <div className="mono" style={{ fontSize: 10, color: "var(--text-4)", letterSpacing: "0.14em" }}>시험 1주 전 · 회차 12-18</div>
    <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 4 }}>
      {["화자 정서 정리", "고전운문 표현법 ×4", "안긴문장 5종"].map((t) => (
        <div key={t} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11.5 }}>
          <span style={{ width: 4, height: 4, borderRadius: 4, background: "var(--accent)" }}/>{t}
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { Eyebrow, SectionHead, Hero, Anxieties, DahimSystem, WhyFive, System });
