// SiteShell.jsx — global Nav, Footer, and the Website root component
const Nav = ({ t, lang, setLang, navigate, current, theme }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', h, { passive: true }); h();
    return () => window.removeEventListener('scroll', h);
  }, []);
  const items = [
    ['home', t.nav.home], ['services', t.nav.services], ['portfolio', t.nav.portfolio],
    ['about', t.nav.about], ['contact', t.nav.contact],
  ];
  const txt = theme==='light' ? '#0A0A0F' : 'white';
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: '14px clamp(24px, 5vw, 80px)',
      background: scrolled ? (theme==='light' ? 'rgba(255,255,255,0.85)' : 'rgba(10,10,15,0.75)') : 'transparent',
      backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--ssl-stroke-1)' : '1px solid transparent',
      transition: 'all 240ms var(--ssl-ease-out)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <a onClick={(e) => { e.preventDefault(); navigate('home'); }} href="#home" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', cursor: 'pointer' }}>
          <img src="assets/logo-original.png" alt="Show Solutions Latam" style={{ width: 44, height: 44, objectFit: 'contain', display: 'block' }}/>
          <span style={{ fontFamily: 'var(--ssl-font-display)', fontWeight: 600, fontSize: 15, letterSpacing: '-0.01em', color: txt }}>Show Solutions <span style={{ color: 'var(--ssl-accent)' }}>Latam</span></span>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }} className="ssl-nav-items">
          {items.map(([k, label]) => (
            <a key={k} onClick={(e) => { e.preventDefault(); navigate(k); }} href={'#' + k} style={{
              fontFamily: 'var(--ssl-font-body)', fontSize: 13, fontWeight: 500,
              padding: '8px 14px', borderRadius: 8, textDecoration: 'none',
              color: current === k ? 'var(--ssl-accent)' : (theme==='light' ? 'rgba(10,10,15,0.7)' : 'rgba(255,255,255,0.72)'),
              background: current === k ? (theme==='light' ? 'rgba(224,36,123,0.08)' : 'rgba(224,36,123,0.12)') : 'transparent',
              cursor: 'pointer', transition: 'all 160ms var(--ssl-ease-out)',
            }}>{label}</a>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button onClick={() => setLang(lang === 'en' ? 'es' : 'en')} style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontFamily: 'var(--ssl-font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase',
            padding: '8px 12px', borderRadius: 8, cursor: 'pointer',
            background: 'transparent', color: txt,
            border: '1px solid ' + (theme==='light'?'rgba(0,0,0,0.14)':'rgba(255,255,255,0.14)'),
          }}>
            <Icon name="globe" size={13}/>
            <span>{lang === 'en' ? 'EN · ES' : 'ES · EN'}</span>
          </button>
          <button onClick={() => navigate('contact')} style={{
            background: 'var(--ssl-gradient-stage)', color: 'white',
            fontFamily: 'var(--ssl-font-body)', fontWeight: 600, fontSize: 13,
            padding: '10px 16px', borderRadius: 8, border: 0, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>{t.nav.cta} <Icon name="arrow-right" size={14}/></button>
        </div>
      </div>
    </nav>
  );
};

const Footer = ({ t, theme }) => (
  <footer style={{ padding: '80px clamp(24px, 5vw, 80px) 32px', borderTop: '1px solid var(--ssl-stroke-1)', background: theme==='light' ? 'rgba(0,0,0,0.02)' : 'rgba(0,0,0,0.4)', position: 'relative' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) repeat(3, minmax(0, 1fr))', gap: 'clamp(24px, 4vw, 64px)' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <img src="assets/logo-original.png" alt="Show Solutions Latam" style={{ width: 40, height: 40, objectFit: 'contain', display: 'block' }}/>
            <span style={{ fontFamily: 'var(--ssl-font-display)', fontWeight: 600, fontSize: 15, color: theme==='light'?'#0A0A0F':'white' }}>Show Solutions Latam</span>
          </div>
          <p style={{ fontFamily: 'var(--ssl-font-body)', fontSize: 14, lineHeight: 1.55, color: theme==='light'?'rgba(10,10,15,0.6)':'rgba(255,255,255,0.6)', marginTop: 16, maxWidth: 320 }}>{t.footer.tagline}</p>
        </div>
        {Object.values(t.footer.cols).map((col, i) => (
          <div key={i}>
            <div style={{ fontFamily: 'var(--ssl-font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ssl-accent)', marginBottom: 16 }}>{col.title}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.items.map(item => (
                <li key={item} style={{ fontFamily: 'var(--ssl-font-body)', fontSize: 14, color: theme==='light'?'rgba(10,10,15,0.7)':'rgba(255,255,255,0.7)' }}>{item}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 64, paddingTop: 24, borderTop: '1px solid var(--ssl-stroke-1)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontFamily: 'var(--ssl-font-mono)', fontSize: 11, color: theme==='light'?'rgba(10,10,15,0.5)':'rgba(255,255,255,0.5)', letterSpacing: '0.04em' }}>
        <span>{t.footer.copy}</span>
        <span>{t.footer.place} 🇨🇷</span>
      </div>
    </div>
  </footer>
);

// ─── SITE ROOT ────────────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#E0247B",
  "portfolio": "mosaic",
  "motion": "full"
}/*EDITMODE-END*/;

const ACCENTS = {
  '#E0247B': { grad: 'linear-gradient(135deg, #E0247B 0%, #6E2EA5 100%)', glow: '0 0 0 1px rgba(224,36,123,0.4), 0 0 60px -20px rgba(224,36,123,0.5)' },
  '#3C81BD': { grad: 'linear-gradient(135deg, #3C81BD 0%, #1E3A8A 100%)', glow: '0 0 0 1px rgba(60,129,189,0.4), 0 0 60px -20px rgba(60,129,189,0.5)' },
  '#F5A524': { grad: 'linear-gradient(135deg, #F5A524 0%, #C2410C 100%)', glow: '0 0 0 1px rgba(245,165,36,0.4), 0 0 60px -20px rgba(245,165,36,0.5)' },
};

const Website = () => {
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const [lang, setLang] = React.useState('en');
  const [page, setPage] = React.useState('home');

  const t = window.i18nContent[lang];
  const accent = ACCENTS[tweaks.accent] || ACCENTS['#E0247B'];
  const accentHex = ACCENTS[tweaks.accent] ? tweaks.accent : '#E0247B';
  const theme = tweaks.theme;

  // hash routing
  React.useEffect(() => {
    const onHash = () => {
      const h = (window.location.hash || '#home').slice(1);
      setPage(['home','services','portfolio','about','contact'].includes(h) ? h : 'home');
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash); onHash();
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (p) => { window.location.hash = p; };

  // dynamic CSS variables for theme + accent
  React.useEffect(() => {
    const r = document.documentElement;
    if (theme === 'light') {
      r.style.setProperty('--ssl-bg', '#F8F6F2');
      r.style.setProperty('--ssl-bg-2', '#FFFFFF');
      r.style.setProperty('--ssl-surface-1', '#FFFFFF');
      r.style.setProperty('--ssl-surface-2', '#F4F1EB');
      r.style.setProperty('--ssl-text-primary', '#0A0A0F');
      r.style.setProperty('--ssl-text-secondary', 'rgba(10,10,15,0.65)');
      r.style.setProperty('--ssl-stroke-1', 'rgba(10,10,15,0.08)');
      r.style.setProperty('--ssl-stroke-2', 'rgba(10,10,15,0.14)');
    } else {
      r.style.setProperty('--ssl-bg', '#0A0A0F');
      r.style.setProperty('--ssl-bg-2', '#13131A');
      r.style.setProperty('--ssl-surface-1', '#1A1A22');
      r.style.setProperty('--ssl-surface-2', '#22222C');
      r.style.setProperty('--ssl-text-primary', '#FFFFFF');
      r.style.setProperty('--ssl-text-secondary', 'rgba(255,255,255,0.65)');
      r.style.setProperty('--ssl-stroke-1', 'rgba(255,255,255,0.08)');
      r.style.setProperty('--ssl-stroke-2', 'rgba(255,255,255,0.14)');
    }
    r.style.setProperty('--ssl-accent', accentHex);
    r.style.setProperty('--ssl-gradient-stage', accent.grad);
    r.style.setProperty('--ssl-glow-stage', accent.glow);
    document.body.style.background = 'var(--ssl-bg)';
    document.body.style.color = 'var(--ssl-text-primary)';
  }, [theme, accent]);

  const portfolioTreatment = tweaks.portfolio || 'mosaic';

  const renderPage = () => {
    if (page === 'home') return (
      <React.Fragment>
        <HomeHero t={t} accent={accent} motion={tweaks.motion} theme={theme} navigate={navigate}/>
        <StatsStrip t={t} theme={theme}/>
        <Capabilities t={t} theme={theme}/>
        <Services t={t} theme={theme}/>
        <Portfolio t={t} theme={theme} treatment={portfolioTreatment}/>
        <Contact t={t} theme={theme} locale={lang}/>
      </React.Fragment>
    );
    if (page === 'services') return <div style={{ paddingTop: 80 }}><Services t={t} theme={theme}/><Capabilities t={t} theme={theme}/></div>;
    if (page === 'portfolio') return <div style={{ paddingTop: 80 }}><Portfolio t={t} theme={theme} treatment={portfolioTreatment}/></div>;
    if (page === 'about') return <div style={{ paddingTop: 80 }}><About t={t} theme={theme}/></div>;
    if (page === 'contact') return <div style={{ paddingTop: 80 }}><Contact t={t} theme={theme} locale={lang}/></div>;
    return null;
  };

  // ── Tweaks panel
  const TweakBits = window.TweaksPanel ? (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Theme">
        <window.TweakRadio label="Mode" value={tweaks.theme} options={[{value:'dark',label:'Dark'},{value:'light',label:'Light'}]} onChange={v => setTweak('theme', v)}/>
        <window.TweakColor label="Accent" value={tweaks.accent}
          options={['#E0247B', '#3C81BD', '#F5A524']}
          onChange={v => setTweak('accent', v)}/>
      </window.TweakSection>
      <window.TweakSection label="Portfolio layout">
        <window.TweakSelect label="Treatment" value={tweaks.portfolio}
          options={[
            {value:'grid', label:'Grid (uniform)'},
            {value:'mosaic', label:'Mosaic (varied)'},
            {value:'scroll', label:'Horizontal scroll'},
            {value:'fullbleed', label:'Full-bleed cases'},
          ]}
          onChange={v => setTweak('portfolio', v)}/>
      </window.TweakSection>
      <window.TweakSection label="Motion">
        <window.TweakRadio label="Intensity" value={tweaks.motion}
          options={[{value:'full',label:'Full'},{value:'reduced',label:'Reduced'},{value:'off',label:'Off'}]}
          onChange={v => setTweak('motion', v)}/>
      </window.TweakSection>
    </window.TweaksPanel>
  ) : null;

  return (
    <React.Fragment>
      <Nav t={t} lang={lang} setLang={setLang} navigate={navigate} current={page} theme={theme}/>
      <main>{renderPage()}</main>
      <Footer t={t} theme={theme}/>
      {TweakBits}
    </React.Fragment>
  );
};

window.Website = Website;