/* global React, ReactDOM, Nav, Footer, HomePage, AboutPage, ProductsPage, IRPage, ContactPage,
 TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor,
 useState, useEffect */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
 "theme": "light",
 "accent": "#1a1a1a",
 "density": "default"
}/*EDITMODE-END*/;

// Monochrome — accents are quiet, used only for italic emphasis
const ACCENT_PRESETS = ["#1a1a1a", "#1e3a8a", "#0c8a7a", "#a3431f"];

function App() {
 const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
 const [page, setPage] = useState("home");

 useEffect(() => {
 document.documentElement.setAttribute("data-theme", tweaks.theme);
 }, [tweaks.theme]);

 // Sync accent → direct hsl() color values
 useEffect(() => {
 const [h, s, l] = hexToHsl(tweaks.accent);
 const root = document.documentElement.style;
 root.setProperty("--accent", `hsl(${h} ${s}% ${l}%)`);
 const softL = tweaks.theme === "dark" ? Math.max(12, l - 30) : Math.min(96, l + 45);
 const inkL = tweaks.theme === "dark" ? Math.min(85, l + 15) : Math.max(25, l - 15);
 root.setProperty("--accent-soft", `hsl(${h} ${Math.min(s, 30)}% ${softL}%)`);
 root.setProperty("--accent-ink", `hsl(${h} ${s}% ${inkL}%)`);
 }, [tweaks.accent, tweaks.theme]);

 useEffect(() => {
 const root = document.documentElement.style;
 if (tweaks.density === "compact") root.setProperty("--gutter", "clamp(16px, 3vw, 40px)");
 else if (tweaks.density === "roomy") root.setProperty("--gutter", "clamp(28px, 5vw, 80px)");
 else root.setProperty("--gutter", "clamp(20px, 4vw, 64px)");
 }, [tweaks.density]);

 useEffect(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, [page]);

 const renderPage = () => {
 switch (page) {
 case "home": return <HomePage onNavigate={setPage} />;
 case "about": return <AboutPage onNavigate={setPage} />;
 case "products": return <ProductsPage onNavigate={setPage} />;
 case "ir": return <IRPage onNavigate={setPage} />;
 case "contact": return <ContactPage />;
 default: return <HomePage onNavigate={setPage} />;
 }
 };

 return (
 <div className="page">
 <Nav current={page} onNavigate={setPage} />
 <main key={page}>{renderPage()}</main>
 <Footer onNavigate={setPage} />

 <TweaksPanel title="Tweaks">
 <TweakSection label="테마">
 <TweakRadio
 label="모드"
 value={tweaks.theme}
 onChange={(v) => setTweak("theme", v)}
 options={[{ value: "light", label: "라이트" }, { value: "dark", label: "다크" }]}
 />
 </TweakSection>

 <TweakSection label="강조 컬러">
 <TweakColor
 label="이탤릭 포인트"
 value={tweaks.accent}
 onChange={(v) => setTweak("accent", v)}
 options={ACCENT_PRESETS}
 />
 </TweakSection>

 <TweakSection label="여백">
 <TweakRadio
 label="밀도"
 value={tweaks.density}
 onChange={(v) => setTweak("density", v)}
 options={[
 { value: "compact", label: "컴팩트" },
 { value: "default", label: "기본" },
 { value: "roomy", label: "여유" },
 ]}
 />
 </TweakSection>
 </TweaksPanel>
 </div>
 );
}

/* hex → [h, s, l] components */
function hexToHsl(hex) {
 const s = hex.replace("#", "");
 const v = s.length === 3 ? s.split("").map((c) => c + c).join("") : s;
 const r = parseInt(v.substring(0, 2), 16) / 255;
 const g = parseInt(v.substring(2, 4), 16) / 255;
 const b = parseInt(v.substring(4, 6), 16) / 255;
 const max = Math.max(r, g, b), min = Math.min(r, g, b);
 let h = 0, sat = 0;
 const l = (max + min) / 2;
 if (max !== min) {
 const d = max - min;
 sat = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 switch (max) {
 case r: h = (g - b) / d + (g < b ? 6 : 0); break;
 case g: h = (b - r) / d + 2; break;
 case b: h = (r - g) / d + 4; break;
 }
 h *= 60;
 }
 return [Math.round(h), Math.round(sat * 100), Math.round(l * 100)];
}

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