function App5() {
  const [tw, setTw] = useState(() => {
    try { const s = localStorage.getItem('tseng-v5'); return s ? { ...V4_DEFAULTS, ...JSON.parse(s) } : { ...V4_DEFAULTS }; }
    catch { return { ...V4_DEFAULTS }; }
  });
  useEffect(() => { localStorage.setItem('tseng-v5', JSON.stringify(tw)); }, [tw]);

  const [panel, setPanel] = useState(false);
  useEffect(() => {
    const h = e => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === '__activate_edit_mode') setPanel(true);
      if (e.data.type === '__deactivate_edit_mode') setPanel(false);
    };
    window.addEventListener('message', h);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', h);
  }, []);

  const setLang = v => {
    setTw(p => ({ ...p, lang: v }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { lang: v } }, '*');
  };

  return (
    <V4Ctx.Provider value={{ ...tw, setLang }}>
      <Progress5/>
      <Nav5/>
      <Hero5/>
      <Marquee5/>
      <Company5/>
      <Pillars5/>
      <Capability5/>
      <Catalogue5/>
      <Faq5/>
      <Contact5/>
      <Location5/>
      <Footer5/>
      {panel && <Panel5 tw={tw} setLang={setLang}/>}
      <MobileBar5 ko={tw.lang !== 'en'}/>
    </V4Ctx.Provider>
  );
}

// ── Sticky bottom action bar (mobile only; shown via .mobile-bar media query) ──
function MobileBar5({ ko }) {
  return (
    <div className="mobile-bar" style={{
      position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 150,
      gridTemplateColumns: '1fr 1fr', gap: 1,
      background: D.line, borderTop: `1px solid ${D.line}`,
      paddingBottom: 'env(safe-area-inset-bottom)',
    }}>
      <a href="tel:0319623951" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
        minHeight: 56, background: D.base2, color: D.bone,
        fontSize: 15, fontWeight: 600, letterSpacing: '-0.02em',
      }}>
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.2-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.8 2.1z"/>
        </svg>
        {ko ? '전화 걸기' : 'Call'}
      </a>
      <a href="#contact" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
        minHeight: 56, background: D.steel, color: '#fff',
        fontSize: 15, fontWeight: 600, letterSpacing: '-0.02em',
      }}>
        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/>
        </svg>
        {ko ? '견적 문의' : 'Get a quote'}
      </a>
    </div>
  );
}

function Progress5() {
  const [p, setP] = useState(0);
  useEffect(() => {
    const f = () => {
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setP(h > 0 ? window.scrollY / h : 0);
    };
    window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);
  return <div style={{ position: 'fixed', top: 0, left: 0, zIndex: 120, height: 2, width: `${p * 100}%`, background: D.steel, transition: 'width .1s linear' }}/>;
}

function Panel5({ tw, setLang }) {
  return (
    <div style={{
      position: 'fixed', bottom: 16, right: 16, zIndex: 300, width: 250,
      background: D.base2, border: `1px solid ${D.line}`, padding: 18,
      boxShadow: '0 24px 60px rgba(0,0,0,.5)',
    }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: D.bone28, marginBottom: 14 }}>Tweaks</div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: D.bone45, marginBottom: 8 }}>Language</div>
      <div style={{ display: 'flex', gap: 6 }}>
        {[['ko', '한국어'], ['en', 'English']].map(([v, l]) => (
          <button key={v} onClick={() => setLang(v)} style={{
            flex: 1, padding: '9px 10px', cursor: 'pointer', fontSize: 12, fontWeight: 600,
            background: tw.lang === v ? D.steel : 'transparent',
            color: tw.lang === v ? '#fff' : D.bone45,
            border: `1px solid ${tw.lang === v ? D.steel : D.line}`, transition: 'all .3s',
          }}>{l}</button>
        ))}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App5/>);