/* app.jsx — 다힘 홈페이지 v2 */
const { useEffect: useEffect2, useState: useStateA, useRef: useRefA } = React;

const NAV = [
  { href: "greetings.php", label: "원장 인사말" },
  { href: "results.php", label: "학원 실적" },
  { href: "curriculum.php", label: "시스템 소개" },
  { href: "ai_system.php", label: "다힘AI 시스템", ai: true },
  {
    label: "커리큘럼",
    children: [
      { href: "curriculum_elem.php", title: "초등부", sub: "독서·문해력 기초 · 초1~초6", icon: "elem" },
      { href: "curriculum_middle.php", title: "중등부", sub: "3-Step · 중1~중3", icon: "mid" },
      { href: "curriculum_high.php", title: "고등부", sub: "1등급 사수 + 입시 · 고1~고3", icon: "high" },
    ],
  },
  { href: "notice.php", label: "공지사항" },
  { href: "contact.php", label: "오시는 길" },
];

const DDIcon = ({ kind }) => {
  if (kind === "elem") return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/><path d="M10 6h6"/></svg>;
  if (kind === "mid") return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12l2-2 4 4 6-6 4 4 2-2"/><path d="M3 18h18"/></svg>;
  if (kind === "high") return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M8 21h8M12 17v4M6 4h12v3a6 6 0 0 1-12 0V4z"/><path d="M6 4H4a2 2 0 0 0 0 4h2M18 4h2a2 2 0 0 1 0 4h-2"/></svg>;
  return null;
};

const Nav = () => {
  const [openIdx, setOpenIdx] = useStateA(-1);
  const [scrolled, setScrolled] = useStateA(false);
  const closeTimer = useRefA(null);

  useEffect2(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  const enter = (i) => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    setOpenIdx(i);
  };
  const leave = () => {
    closeTimer.current = setTimeout(() => setOpenIdx(-1), 160);
  };

  return (
    <header className={"nav-bar" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <a href="index.php" className="brand">
          <div className="brand-mark">다</div>
          <div className="brand-name">
            <span className="ko">다힘국어논술</span>
            <span className="en">DAHIM ACADEMY</span>
          </div>
        </a>

        <nav className="nav-links">
          {NAV.map((n, i) => (
            n.children ? (
              <div key={i}
                style={{ position: "relative" }}
                onMouseEnter={() => enter(i)}
                onMouseLeave={leave}
              >
                <a href="#" onClick={(e) => e.preventDefault()}>
                  {n.label}
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{
                    marginLeft: 2,
                    transition: "transform .2s ease",
                    transform: openIdx === i ? "rotate(180deg)" : "none",
                  }}>
                    <polyline points="6 9 12 15 18 9"/>
                  </svg>
                </a>
                {openIdx === i && (
                  <div className="nav-dropdown" onMouseEnter={() => enter(i)} onMouseLeave={leave}>
                    {n.children.map((c) => (
                      <a key={c.href} href={c.href} className="nav-dd-item">
                        <div className="nav-dd-icon"><DDIcon kind={c.icon}/></div>
                        <div className="nav-dd-text">
                          <span className="nav-dd-title">{c.title}</span>
                          <span className="nav-dd-sub">{c.sub}</span>
                        </div>
                      </a>
                    ))}
                  </div>
                )}
              </div>
            ) : (
              <a key={n.href} href={n.href} className={n.ai ? "nav-ai" : ""}>
                {n.label}
              </a>
            )
          ))}
        </nav>

        <div className="nav-cta">
          <a href="admin_login.php" aria-label="관리자 로그인" className="nav-gear" title="관리자">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="3"/>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
            </svg>
          </a>
          <a href="consultation.php" className="btn btn-accent btn-sm">
            상담 예약
            <ArrowRight size={14}/>
          </a>
        </div>
      </div>
    </header>
  );
};

// ── Tweaks ─────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "orange",
  "radius": "soft",
  "density": "comfy",
  "cardStyle": "outline"
}/*EDITMODE-END*/;

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // accent (warm tones only — brief mandates warm accent)
  useEffect2(() => {
    const map = {
      orange: { a: "#ea580c", h: "#c2410c", soft: "#fff7ed" },
      coral:  { a: "#e11d48", h: "#be123c", soft: "#fff1f2" },
      amber:  { a: "#d97706", h: "#b45309", soft: "#fffbeb" },
    };
    const c = map[t.accent] || map.orange;
    const r = document.documentElement;
    r.style.setProperty("--accent", c.a);
    r.style.setProperty("--accent-700", c.h);
    r.style.setProperty("--accent-50", c.soft);
  }, [t.accent]);

  // radius
  useEffect2(() => {
    const map = {
      sharp: { sm: "4px", md: "8px", lg: "10px", xl: "14px" },
      soft:  { sm: "8px", md: "14px", lg: "20px", xl: "28px" },
      round: { sm: "12px", md: "20px", lg: "28px", xl: "36px" },
    };
    const r = map[t.radius] || map.soft;
    const root = document.documentElement;
    root.style.setProperty("--r-sm", r.sm);
    root.style.setProperty("--r-md", r.md);
    root.style.setProperty("--r-lg", r.lg);
    root.style.setProperty("--r-xl", r.xl);
  }, [t.radius]);

  // density — adjusts section padding via class
  useEffect2(() => {
    document.documentElement.setAttribute("data-density", t.density);
    const style = document.getElementById("__density-style") || document.createElement("style");
    style.id = "__density-style";
    const map = {
      tight: { sec: "72px" },
      comfy: { sec: "100px" },
      airy: { sec: "140px" },
    };
    const m = map[t.density] || map.comfy;
    style.textContent = `section { padding-top: ${m.sec} !important; padding-bottom: ${m.sec} !important; } section:first-of-type, section[data-density-skip] { padding-top: unset !important; padding-bottom: unset !important; }`;
    if (!style.parentNode) document.head.appendChild(style);
  }, [t.density]);

  // card style
  useEffect2(() => {
    const style = document.getElementById("__cardstyle-style") || document.createElement("style");
    style.id = "__cardstyle-style";
    if (t.cardStyle === "filled") {
      style.textContent = `.card { background: var(--surface-soft) !important; border-color: transparent !important; box-shadow: none !important; } .card:hover { background: var(--surface) !important; border-color: var(--border) !important; }`;
    } else if (t.cardStyle === "shadow") {
      style.textContent = `.card { background: var(--surface) !important; border-color: transparent !important; box-shadow: 0 6px 24px -8px rgba(15,23,42,0.12), 0 2px 4px rgba(15,23,42,0.04) !important; }`;
    } else {
      style.textContent = `.card { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }`;
    }
    if (!style.parentNode) document.head.appendChild(style);
  }, [t.cardStyle]);

  return (
    <div data-screen-label="다힘국어 홈페이지">
      {/* Nav 는 header.php 가 PHP 단에서 렌더링 (다른 페이지와 통일) */}
      <main>
        <HeroCarousel />
        <Anxieties />
        <DahimSystem />
        <Results />
        <Diagnose />
        <ParentAutomation />
        <TimetableSection />
        <ProofBoard />
        <Testimonials />
        <FinalCTA />
        <TuitionTable />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="컬러 & 스타일">
          <TweakRadio
            label="강조색"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "orange", label: "오렌지" },
              { value: "coral", label: "코랄" },
              { value: "amber", label: "앰버" },
            ]}
          />
          <TweakRadio
            label="카드 스타일"
            value={t.cardStyle}
            onChange={(v) => setTweak("cardStyle", v)}
            options={[
              { value: "outline", label: "라인" },
              { value: "filled", label: "면" },
              { value: "shadow", label: "그림자" },
            ]}
          />
        </TweakSection>
        <TweakSection label="레이아웃">
          <TweakRadio
            label="코너 둥글기"
            value={t.radius}
            onChange={(v) => setTweak("radius", v)}
            options={[
              { value: "sharp", label: "각진" },
              { value: "soft", label: "기본" },
              { value: "round", label: "둥근" },
            ]}
          />
          <TweakRadio
            label="여백 밀도"
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "tight", label: "빽빽" },
              { value: "comfy", label: "기본" },
              { value: "airy", label: "여유" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);