/* global React, ReactDOM, ChromeWindow, Nav, Footer, FloatingCTAs, COPY, Home, TreatmentsHub, TreatmentDetail, Experts, LocationPage, ContactPage, BookingModal, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle */

const { useState, useEffect, useRef } = React;

// =======================================================================
//  TWEAK DEFAULTS — persisted via the host editor
// =======================================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "palette": "olive",
  "hero": "fullbleed",
  "locale": "en"
}/*EDITMODE-END*/;

// =======================================================================
//  About page (small — kept in App file)
// =======================================================================
function About({ locale }) {
  const ar = locale === 'ar';
  return (
    <main style={{ background: 'var(--bone)' }}>
      <section style={{ padding: '160px 0 100px' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 18 }}>φ &nbsp; {ar ? 'عن أورونيكس' : 'About Ouronyx'}</div>
          <h1 className="serif" style={{ fontSize: 'clamp(3.5rem, 6vw, 5.5rem)', lineHeight: 0.98, fontWeight: 300, maxWidth: 1000, marginBottom: 56 }}>
            {ar ? <>الصحة قبل <em className="ital">الجمال</em>. السلامة قبل <em className="ital">الصیحات</em>.</> : <>Health over <em className="ital">beauty</em>. Safety over <em className="ital">trends</em>.</>}
          </h1>
        </div>
      </section>

      <section style={{ paddingBottom: 100 }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80 }}>
          <Reveal>
            <p className="serif" style={{ fontSize: '1.6rem', lineHeight: 1.4, color: 'var(--ink)', fontWeight: 300, fontStyle: 'italic', marginBottom: 32 }}>
              Ouronyx was founded by senior executives in psychology and healthcare. The clinic’s philosophy is captured in a single number: ten clients per doctor, per day. Never more.
            </p>
            <p style={{ color: 'var(--ink-soft)', fontSize: '1rem', lineHeight: 1.7, marginBottom: 24 }}>
              <strong>Ida Banek</strong>, co-founder, comes from a psychology background — the foundation of the mindful-aesthetics voice. <strong>Marc Princen</strong>, co-founder and former Executive Vice President at Allergan, brings the clinical-industry experience. They built Ouronyx as an alternative to a sector that increasingly mistakes volume for quality.
            </p>
            <p style={{ color: 'var(--ink-soft)', fontSize: '1rem', lineHeight: 1.7 }}>
              Dubai opened in 2022 at The Opus by Omniyat — the brand’s first destination outside London. The brief was simple: keep the philosophy intact. Ten clients per day, 3D imaging first, no procedure ever started without a written plan.
            </p>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ aspectRatio: '0.78 / 1', overflow: 'hidden' }}>
              <img src="media/story-experience-01.webp" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </Reveal>
        </div>
      </section>

      <section style={{ background: 'var(--porcelain)', padding: '100px 0', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 32, color: 'var(--muted)' }}>{ar ? 'القيم' : 'Our values'}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--line)' }}>
            {[
              ['Ethical', 'No procedures recommended without need. No prices quoted before consultation. No promises we cannot keep.'],
              ['Sustainable', 'Aesthetic plans designed for long-term health — not immediate dramatic change. Conservative dosing. Staged review.'],
              ['Personal', 'One doctor, one room, one plan. Every patient is met by their physician. There is no production line.'],
            ].map(([h, b], i) => (
              <Reveal key={h} delay={i * 100}>
                <div style={{ padding: '48px 32px 48px 0', borderRight: i < 2 ? '1px solid var(--line)' : 0, paddingLeft: i > 0 ? 32 : 0 }}>
                  <div className="serif" style={{ fontSize: '3rem', color: 'var(--champagne)', fontStyle: 'italic', marginBottom: 16, lineHeight: 1, fontWeight: 300 }}>0{i+1}</div>
                  <h3 className="serif" style={{ fontSize: '2rem', marginBottom: 14, lineHeight: 1.05 }}>{h}</h3>
                  <p style={{ color: 'var(--ink-soft)', fontSize: '0.94rem', lineHeight: 1.6 }}>{b}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// =======================================================================
//  PRIMARY APP
// =======================================================================
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState('home');
  const [bookOpen, setBookOpen] = useState(false);
  const scrollRef = useRef(null);

  const locale = t.locale || 'en';
  const ar = locale === 'ar';

  // Apply theme + direction
  useEffect(() => {
    document.documentElement.dir = ar ? 'rtl' : 'ltr';
  }, [ar]);

  // Reset scroll on route change
  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTo(0, 0);
    else window.scrollTo(0, 0);
    setBookOpen(false);
  }, [route]);

  const onNav = (r) => { setRoute(r); };

  // Determine which page
  let page;
  if (route === 'home') page = <Home locale={locale} onNav={onNav} onBook={() => setBookOpen(true)} heroVariant={t.hero || 'fullbleed'} />;
  else if (route === 'treatments') page = <TreatmentsHub locale={locale} onNav={onNav} onBook={() => setBookOpen(true)} />;
  else if (route.startsWith('treatment:')) page = <TreatmentDetail slug={route.split(':')[1]} locale={locale} onNav={onNav} onBook={() => setBookOpen(true)} />;
  else if (route === 'experts') page = <Experts locale={locale} onNav={onNav} onBook={() => setBookOpen(true)} />;
  else if (route === 'location') page = <LocationPage locale={locale} onBook={() => setBookOpen(true)} />;
  else if (route === 'contact') page = <ContactPage locale={locale} onBook={() => setBookOpen(true)} />;
  else if (route === 'about') page = <About locale={locale} />;
  else page = <Home locale={locale} onNav={onNav} onBook={() => setBookOpen(true)} heroVariant={t.hero || 'fullbleed'} />;

  // Theme classes on the surface
  const themeClass = `${t.theme === 'dark' ? 'theme-dark' : ''} ${t.palette === 'stone' ? 'theme-stone' : t.palette === 'sand' ? 'theme-sand' : ''}`.trim();

  return (
    <div className={`app-surface ${themeClass}`} dir={ar ? 'rtl' : 'ltr'} data-screen-label={`Ouronyx Dubai — ${route}`}>
      <Nav
        route={route}
        onNav={onNav}
        onBook={() => setBookOpen(true)}
        locale={locale}
        onLocale={(l) => setTweak('locale', l)}
        dark={t.theme === 'dark'}
        onDarkToggle={() => setTweak('theme', t.theme === 'dark' ? 'light' : 'dark')}
      />
      {page}
      <Footer locale={locale} onNav={onNav} />
      <FloatingCTAs />
      <BookingModal open={bookOpen} onClose={() => setBookOpen(false)} locale={locale} />

      {/* Tweaks panel */}
      <Tweaks t={t} setTweak={setTweak} />
    </div>
  );
}

// =======================================================================
//  TWEAKS PANEL
// =======================================================================

function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Editorial mode">
        <TweakRadio label="Theme" value={t.theme} options={[
          { value: 'light', label: 'Light' },
          { value: 'dark', label: 'Dark' },
        ]} onChange={(v) => setTweak('theme', v)} />
      </TweakSection>

      <TweakSection label="Palette">
        <TweakRadio label="Accent" value={t.palette} options={[
          { value: 'olive', label: 'Olive' },
          { value: 'stone', label: 'Stone' },
          { value: 'sand', label: 'Sand' },
        ]} onChange={(v) => setTweak('palette', v)} />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakRadio label="Variant" value={t.hero} options={[
          { value: 'fullbleed', label: 'Image' },
          { value: 'editorial', label: 'Editorial' },
        ]} onChange={(v) => setTweak('hero', v)} />
      </TweakSection>

      <TweakSection label="Locale">
        <TweakRadio label="Language" value={t.locale} options={[
          { value: 'en', label: 'EN' },
          { value: 'ar', label: 'العربية' },
        ]} onChange={(v) => setTweak('locale', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

// =======================================================================
//  MOUNT
// =======================================================================

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