// ─── LumiSkin landing — main app ────────────────────────────────────────
const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "accent": "#6B0F1A",
  "bg": "#F7F1E6",
  "showAriaTrace": true,
  "denseBench": false,
  "showStamp": true,
  "showConsole": true,
  "consoleSpeed": 1800
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useS(tweaks.lang || 'en');

  // Keep lang in sync with tweaks panel
  useE(() => { if (tweaks.lang && tweaks.lang !== lang) setLang(tweaks.lang); }, [tweaks.lang]);

  const t = window.COPY[lang];
  const dir = t.dir;

  useE(() => {
    document.body.dir = dir;
    document.documentElement.lang = lang;
  }, [dir, lang]);

  // Live accent + bg
  useE(() => {
    document.documentElement.style.setProperty('--wine', tweaks.accent);
    document.documentElement.style.setProperty('--ivory', tweaks.bg);
  }, [tweaks.accent, tweaks.bg]);

  const switchLang = (l) => { setLang(l); setTweak('lang', l); };

  return (
    <>
      <TopBar t={t} lang={lang} dir={dir} switchLang={switchLang} />
      <Nav t={t} />
      <Hero t={t} dir={dir} lang={lang} showStamp={tweaks.showStamp} showConsole={tweaks.showConsole} consoleSpeed={tweaks.consoleSpeed} />
      <Channels t={t} />
      <Bench t={t} lang={lang} dir={dir} dense={tweaks.denseBench} showTrace={tweaks.showAriaTrace} accent={tweaks.accent} />
      <Stats t={t} />
      <Compliance t={t} />
      <Connect t={t} lang={lang} />
      <FinalCTA t={t} dir={dir} />
      <Footer t={t} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Language">
          <window.TweakRadio
            label="Locale"
            value={tweaks.lang}
            onChange={(v) => { setTweak('lang', v); setLang(v); }}
            options={[
              { value: 'en', label: 'EN' },
              { value: 'fr', label: 'FR' },
              { value: 'ar', label: 'AR' },
            ]}
          />
        </window.TweakSection>
        <window.TweakSection label="Palette">
          <window.TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#6B0F1A', '#3E0810', '#8B1F2A', '#C42A36', '#1F4039']}
          />
          <window.TweakColor
            label="Background"
            value={tweaks.bg}
            onChange={(v) => setTweak('bg', v)}
            options={['#F7F1E6', '#FBF7EE', '#F4ECDA', '#EDE4D2', '#FFFFFF']}
          />
        </window.TweakSection>
        <window.TweakSection label="ARIA Bench">
          <window.TweakToggle
            label="Show 90-day traces"
            value={tweaks.showAriaTrace}
            onChange={(v) => setTweak('showAriaTrace', v)}
          />
          <window.TweakToggle
            label="Dense 4-up grid"
            value={tweaks.denseBench}
            onChange={(v) => setTweak('denseBench', v)}
          />
        </window.TweakSection>
        <window.TweakSection label="Hero">
          <window.TweakToggle
            label="Live ARIA console"
            value={tweaks.showConsole}
            onChange={(v) => setTweak('showConsole', v)}
          />
          <window.TweakSlider
            label="Console speed"
            value={tweaks.consoleSpeed}
            min={900} max={3200} step={100} unit="ms"
            onChange={(v) => setTweak('consoleSpeed', v)}
          />
          <window.TweakToggle
            label="Show stamp line"
            value={tweaks.showStamp}
            onChange={(v) => setTweak('showStamp', v)}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

// ─── Top utility ───────────────────────────────────────────────────
function TopBar({ t, lang, switchLang }) {
  return (
    <div className="lk-util">
      <div className="lk-shell">
        <div className="lk-util-row">
          <div className="lk-util-left">
            <span className="lk-util-dot" />
            <span>{t.util.callLine} · +1 873 446 6611</span>
          </div>
          <div className="lk-util-right">
            <span className="lk-util-phone">Montréal · Dubai · Paris</span>
            <span className="lk-lang">
              {['en', 'fr', 'ar'].map(l => (
                <button key={l} onClick={() => switchLang(l)} className={lang === l ? 'is-active' : ''}>{l}</button>
              ))}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Nav ───────────────────────────────────────────────────────────
function Nav({ t }) {
  return (
    <div className="lk-shell">
      <div className="lk-nav-row">
        <div className="lk-brand">
          <div className="lk-brand-mark" />
          <div>
            <div className="lk-brand-name">LUMISKIN</div>
            <div className="lk-brand-tag">Since 2000</div>
          </div>
        </div>
        <nav className="lk-nav">
          <a href="#agency">{t.nav.agency}</a>
          <a href="#bench">{t.nav.bench}</a>
          <a href="#channels">{t.nav.channels}</a>
          <a href="#compliance">{t.nav.compliance}</a>
        </nav>
        <button className="lk-nav-cta">{t.util.book}</button>
      </div>
    </div>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────
function Hero({ t, dir, lang, showStamp, consoleSpeed, showConsole }) {
  return (
    <section className="lk-hero" id="agency">
      <div className="lk-shell">
        <div className={'lk-hero-grid ' + (showConsole ? 'has-console' : '')}>
          <div className="lk-hero-left">
            <div className="lk-hero-status">
              <span className="lk-hero-status-dot" />
              <span className="lk-hero-status-text">
                <strong>ARIA Orchestration</strong> online · 7/7 agents on the bench · 9 channels routed
              </span>
            </div>
            <div className="lk-hero-greet serif">
              {t.greeting.map((g, i) => <span key={i}>{g}</span>)}
            </div>
            <div className="eyebrow lk-section-eyebrow" style={{ marginBottom: 18 }}>{t.hero.eyebrow}</div>
            <h1 className="lk-hero-title">{t.hero.title}</h1>
            <p className="lk-hero-lede">{t.hero.lede}</p>
            <div className="lk-hero-ctas">
              <a className="lk-btn lk-btn-primary" href="tel:+18734466611">{t.hero.ctaPrimary} →</a>
              <a className="lk-btn lk-btn-ghost" href="#contact">{t.hero.ctaSecondary}</a>
            </div>
            {showStamp && (
              <div className="lk-hero-stamp">
                <span><strong>26</strong> years</span>
                <span><strong>9</strong> channels</span>
                <span><strong>3</strong> languages</span>
                <span><strong>35</strong> personas</span>
              </div>
            )}
          </div>

          {showConsole ? (
            <window.LiveConsole t={t} lang={lang} dir={dir} speed={consoleSpeed} />
          ) : (
            <aside className="lk-hero-card">
              <div className="lk-hero-card-tag">{t.hero.lineLabel}</div>
              <div className="lk-hero-card-phone tnum">+1 873 446 6611</div>
              <div className="lk-hero-card-note">{t.hero.lineNote}</div>
              <div className="lk-hero-card-divider" />
              <div className="lk-hero-card-langs">
                <span className="lk-hero-card-lang is-new">FR-CA · {dir === 'rtl' ? 'جديد' : 'New'}</span>
                <span className="lk-hero-card-lang">EN</span>
                <span className="lk-hero-card-lang">AR</span>
              </div>
              <div className="lk-hero-card-hours">
                Mar – Sam · 9h – 18h ET<br/>
                After hours → ARIA triage + slot booking
              </div>
            </aside>
          )}
        </div>
      </div>
    </section>
  );
}

// ─── Channels ──────────────────────────────────────────────────────
function Channels({ t }) {
  return (
    <section className="lk-section" id="channels">
      <div className="lk-shell">
        <div className="lk-section-head">
          <div>
            <div className="eyebrow lk-section-eyebrow">{t.channels.eyebrow}</div>
          </div>
          <h2 className="lk-section-title">{t.channels.title}</h2>
        </div>
        <div className="lk-channels-grid">
          {t.channels.list.map(c => (
            <window.ChannelChip key={c.k} k={c.k} name={c.name} note={c.note} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── ARIA Bench ────────────────────────────────────────────────────
function Bench({ t, lang, dir, dense, showTrace, accent }) {
  const gridStyle = dense
    ? { gridTemplateColumns: 'repeat(4, 1fr)' }
    : { gridTemplateColumns: 'repeat(3, 1fr)' };
  return (
    <section className="lk-section lk-bench" id="bench">
      <div className="lk-shell">
        <div className="lk-section-head">
          <div>
            <div className="eyebrow lk-section-eyebrow">{t.bench.eyebrow}</div>
            <h2 className="lk-section-title">{t.bench.title}</h2>
          </div>
          <p className="lk-section-sub">{t.bench.sub}</p>
        </div>
        <div className="lk-bench-grid" style={gridStyle}>
          {window.ARIA_AGENTS.map((a, i) => (
            <window.AgentCard
              key={a.id} agent={a} t={t} lang={lang} dir={dir} idx={i} accent={accent}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Stats ─────────────────────────────────────────────────────────
function Stats({ t }) {
  return (
    <section style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="lk-stats">
        {t.stats.items.map((s, i) => (
          <div key={i} className="lk-stat">
            <div className="lk-stat-n tnum">{s.n}</div>
            <div className="lk-stat-l">{s.l}</div>
            <div className="lk-stat-s">{s.s}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Compliance ────────────────────────────────────────────────────
function Compliance({ t }) {
  return (
    <section className="lk-section" id="compliance">
      <div className="lk-shell">
        <div className="lk-comp-grid">
          <div>
            <div className="eyebrow lk-section-eyebrow">{t.compliance.eyebrow}</div>
            <h2 className="lk-section-title" style={{ marginBottom: 24 }}>{t.compliance.title}</h2>
            <p className="lk-comp-body">{t.compliance.body}</p>
          </div>
          <div className="lk-comp-badges">
            <div className="lk-comp-badge">
              <div className="lk-comp-badge-mark"><window.Mark size={22} /></div>
              <div>
                <div className="lk-comp-badge-name">{t.compliance.pdpl}</div>
                <div className="lk-comp-badge-sub">Federal Decree-Law No. 45 of 2021</div>
              </div>
            </div>
            <div className="lk-comp-badge">
              <div className="lk-comp-badge-mark"><window.Mark size={22} /></div>
              <div>
                <div className="lk-comp-badge-name">{t.compliance.gdpr}</div>
                <div className="lk-comp-badge-sub">Regulation (EU) 2016/679</div>
              </div>
            </div>
            <div className="lk-comp-badge">
              <div className="lk-comp-badge-mark"><window.Mark size={22} /></div>
              <div>
                <div className="lk-comp-badge-name">{t.compliance.inc}</div>
                <div className="lk-comp-badge-sub">CRA Business № 78451 2204 RC0001</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Connect (all 9 channels) ──────────────────────────────
function Connect({ t, lang }) {
  const links = window.CHANNEL_LINKS;
  return (
    <section className="lk-section lk-connect" id="connect">
      <div className="lk-shell">
        <div className="lk-section-head">
          <div>
            <div className="eyebrow lk-section-eyebrow">{t.connect.eyebrow}</div>
            <h2 className="lk-section-title">{t.connect.title}</h2>
          </div>
          <p className="lk-section-sub">{t.connect.sub}</p>
        </div>
        <div className="lk-connect-grid">
          {t.channels.list.map(c => {
            const link = links[c.k];
            const cta = (link.cta[lang] || link.cta.en);
            const isExternal = link.href.startsWith('http');
            return (
              <a
                key={c.k}
                className="lk-connect-btn"
                href={link.href}
                target={isExternal ? '_blank' : undefined}
                rel={isExternal ? 'noopener noreferrer' : undefined}
              >
                <span className="lk-connect-glyph" aria-hidden="true">{window.CHANNEL_ICONS[c.k]}</span>
                <span className="lk-connect-body">
                  <span className="lk-connect-name">{c.name}</span>
                  <span className="lk-connect-handle tnum">{link.handle}</span>
                </span>
                <span className="lk-connect-cta">{cta} <span className="lk-connect-arrow" aria-hidden="true">→</span></span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Final CTA ─────────────────────────────────────────────────────
function FinalCTA({ t, dir }) {
  return (
    <section className="lk-cta" id="contact">
      <div className="lk-shell lk-cta-inner">
        <div className="eyebrow lk-cta-eyebrow">{t.cta.eyebrow}</div>
        <h2 className="lk-cta-title">{t.cta.title}</h2>
        <p className="lk-cta-sub">{t.cta.sub}</p>
        <div className="lk-cta-row">
          <a className="lk-cta-phone tnum" href="tel:+18734466611">
            <span aria-hidden="true" style={{ fontSize: '0.6em', opacity: 0.6 }}>☎</span>
            {t.cta.phone}
          </a>
          <a className="lk-cta-wa" href="https://wa.me/18734466611">{t.cta.whatsapp} →</a>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ────────────────────────────────────────────────────────
function Footer({ t }) {
  return (
    <footer className="lk-footer">
      <div className="lk-shell lk-footer-row">
        <span>{t.footer.rights}</span>
        <span>{t.footer.based}</span>
      </div>
    </footer>
  );
}

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