import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

class AppErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { error: null } }
  static getDerivedStateFromError(error) { return { error } }
  componentDidCatch(error) { console.error('MY PYJAMA runtime error:', error) }
  render() {
    if (this.state.error) return (
      <div dir="rtl" style={{minHeight:'100vh',display:'grid',placeItems:'center',padding:24,background:'#FBF6F2',color:'#2A2326',fontFamily:'system-ui,sans-serif',textAlign:'center'}}>
        <div style={{maxWidth:440}}>
          <h1 style={{fontSize:24,marginBottom:12}}>تعذّر تحميل المتجر</h1>
          <p style={{lineHeight:1.9}}>حدث خطأ أثناء تشغيل الموقع. حدّث الصفحة، وإذا استمر المشكل أرسل صورة الخطأ من سجل البناء.</p>
          <button onClick={() => location.reload()} style={{marginTop:12,padding:'12px 22px',border:0,borderRadius:12,background:'#2A2326',color:'#fff',fontWeight:700}}>إعادة المحاولة</button>
        </div>
      </div>
    )
    return this.props.children
  }
}
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode><AppErrorBoundary><App /></AppErrorBoundary></React.StrictMode>
)