const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "caseStyle": "poster",
  "accent": "#1F5BD8"
}/*EDITMODE-END*/;

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

  // Allow swapping the brand color via Tweaks. We bind a CSS variable on :root
  // and override the brand utility via inline style.
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    // Sync Tailwind 'brand' usages by writing CSS rules into a style tag
    let s = document.getElementById('__brand_override');
    if (!s) { s = document.createElement('style'); s.id = '__brand_override'; document.head.appendChild(s); }
    s.textContent = `
      .bg-brand { background-color: ${t.accent} !important; }
      .text-brand { color: ${t.accent} !important; }
      .border-brand\\/30 { border-color: ${t.accent}55 !important; }
      .btn-brand { background: ${t.accent} !important; }
      .btn-brand:hover { background: ${shade(t.accent, -10)} !important; }
      .input:focus { border-color: ${t.accent} !important; box-shadow: 0 0 0 4px ${hexA(t.accent, 0.10)} !important; }
    `;
  }, [t.accent]);

  return (
    <div>
      <Nav />
      <Hero />
      <TrustStrip />
      <AboutStrip />
      <Services4 />
      <PolicyDetail />
      <CasesSection caseStyle={t.caseStyle} />
      <YoutubeSection />
      <YoutubeSection
        videos={YT_RENTAL_VIDEOS}
        channel={YT_RENTAL_CHANNEL}
        eyebrow="YouTube · 렌탈박스"
        headline={<>렌탈로 풀어내는,<br/>장비 자금의 실전 해법.</>}
        intro={<>제조·중소기업·병원 창업까지 — <span className="font-semibold text-ink">『렌탈박스』</span> 채널이 산업기계 렌탈로<br/>초기 자본 부담을 줄이고 예비비를 자산으로 남기는 방법을 정리해 드립니다.</>}
        bgClass="bg-soft"
      />
      <ProcessSection />
      <FAQSection />
      <ContactForm />
      <Footer />
      <FloatingConsult />

      <TweaksPanel>
        <TweakSection label="승인사례 카드 스타일" />
        <TweakRadio
          label="카드 디자인"
          value={t.caseStyle}
          options={[
            { value: 'poster', label: '포스터' },
            { value: 'split',  label: '분할' },
            { value: 'side',   label: '가로형' },
          ]}
          onChange={(v) => setTweak('caseStyle', v)}
        />
        <TweakSection label="브랜드 컬러" />
        <TweakColor
          label="포인트"
          value={t.accent}
          options={['#1F5BD8', '#0B5FFF', '#1B4FB8', '#0B1F3A', '#2A6FDB']}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweaksPanel>
    </div>
  );
}

function hexA(hex, a) {
  const h = hex.replace('#','');
  const r = parseInt(h.slice(0,2),16), g=parseInt(h.slice(2,4),16), b=parseInt(h.slice(4,6),16);
  return `rgba(${r},${g},${b},${a})`;
}
function shade(hex, pct) {
  const h = hex.replace('#','');
  let r=parseInt(h.slice(0,2),16), g=parseInt(h.slice(2,4),16), b=parseInt(h.slice(4,6),16);
  const f = (c)=>Math.max(0,Math.min(255, Math.round(c + (pct/100)*255)));
  return `#${[f(r),f(g),f(b)].map(x=>x.toString(16).padStart(2,'0')).join('')}`;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);