// App — production wiring (no Tweaks panel).
// Theme + language preferences persist to localStorage so the site behaves like
// a real product rather than a prototype.

const SF_PREFS_KEY = 'sfl.prefs.v1';
const SF_DEFAULTS = { accent: '#E36918', cardStyle: 'spec', dark: false, lang: 'en' };

const loadPrefs = () => {
  try {
    const raw = localStorage.getItem(SF_PREFS_KEY);
    if (!raw) return SF_DEFAULTS;
    return { ...SF_DEFAULTS, ...JSON.parse(raw) };
  } catch (_) { return SF_DEFAULTS; }
};

const SFApp = () => {
  const [prefs, setPrefs] = React.useState(loadPrefs);
  const setPref = (k, v) => setPrefs(p => {
    const next = { ...p, [k]: v };
    try { localStorage.setItem(SF_PREFS_KEY, JSON.stringify(next)); } catch (_) {}
    return next;
  });

  const [page, setPage] = React.useState('home');

  React.useEffect(() => { document.documentElement.dataset.theme = prefs.dark ? 'dark' : 'light'; }, [prefs.dark]);
  React.useEffect(() => { document.documentElement.lang = prefs.lang === 'zh' ? 'zh-Hant' : 'en'; }, [prefs.lang]);
  React.useEffect(() => { window.scrollTo(0, 0); }, [page]);

  const { lang, accent, cardStyle, dark } = prefs;

  return (
    <div>
      <SFHeader
        lang={lang} setLang={(v)=>setPref('lang', v)}
        dark={dark} setDark={(v)=>setPref('dark', v)}
        accent={accent} page={page} setPage={setPage}
      />

      {page === 'home' && (
        <main>
          <SFHero lang={lang} accent={accent} setPage={setPage}/>
          <SFServices lang={lang} accent={accent} cardStyle={cardStyle}/>
          <SFFeatured lang={lang} accent={accent} setPage={setPage}/>
          <SFWhyUs lang={lang} accent={accent}/>
          <SFContact lang={lang} accent={accent} setPage={setPage}/>
        </main>
      )}

      {page === 'services' && (
        <main>
          <section style={{ paddingTop:64, paddingBottom:8, position:'relative', overflow:'hidden' }}>
            <SFNetworkCanvas accent={accent} opacity={0.5}/>
            <div className="container" style={{ position:'relative', zIndex:1 }}>
              <div className="eyebrow">{lang==='en'?'All services':'所有服務'}</div>
              <h1 style={{ maxWidth:800 }}>
                {lang==='en' ? 'One team. Ten capabilities.' : '一個團隊，十項能力。'}
              </h1>
              <p className="lede" style={{ fontSize:18, maxWidth:760, marginTop:16 }}>
                {lang==='en'
                  ? 'Every project we run sits in one of these ten capabilities — usually a few, working together.'
                  : '每個項目都屬於以下十項能力之一 — 通常是幾項組合運作。'}
              </p>
            </div>
          </section>
          <section className="section" style={{ position:'relative', overflow:'hidden' }}>
            <SFNetworkCanvas accent={accent} opacity={0.5}/>
            <div className="container" style={{ position:'relative', zIndex:1 }}>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:0,
                border:'1px solid var(--border-subtle)' }}>
                {SF_PILLAR_LIST.map((id, i) => {
                  const pp = SF_PILLARS[id]; const pt = lang==='en'?pp.en:pp.zh;
                  return (
                    <a key={id} onClick={()=>setPage(`pillar:${id}`)} style={{
                      padding:'28px', cursor:'pointer', background:'var(--bg-card)',
                      borderRight: i%2===0 ? '1px solid var(--border-subtle)' : 'none',
                      borderBottom: i < SF_PILLAR_LIST.length-2 ? '1px solid var(--border-subtle)' : 'none',
                      transition:'background 180ms',
                    }}
                    onMouseEnter={e=>e.currentTarget.style.background='var(--bg-fill-1)'}
                    onMouseLeave={e=>e.currentTarget.style.background='var(--bg-card)'}>
                      <div className="mono" style={{ fontSize:11, color:accent, letterSpacing:'.08em', marginBottom:10 }}>
                        {String(i+1).padStart(2,'0')} · {pp.cat?.toUpperCase()}
                      </div>
                      <h3 style={{ fontSize:22, marginBottom:8 }}>{pt.kicker}</h3>
                      <p style={{ fontSize:14, color:'var(--fg-body)', lineHeight:1.5, margin:0 }}>{pt.title}</p>
                    </a>
                  );
                })}
              </div>
            </div>
          </section>
          <SFContact lang={lang} accent={accent} setPage={setPage}/>
        </main>
      )}

      {page.startsWith('pillar:') && (
        <SFPillarPage pillarId={page.split(':')[1]} lang={lang} accent={accent} setPage={setPage}/>
      )}

      {page === 'industries' && (
        <SFIndustriesHub lang={lang} accent={accent} setPage={setPage}/>
      )}

      {page.startsWith('industry:') && (
        <SFIndustryPage industryId={page.split(':')[1]} lang={lang} accent={accent} setPage={setPage}/>
      )}

      {page === 'contact' && (
        <main style={{ paddingTop:32 }}>
          <SFContact lang={lang} accent={accent} setPage={setPage}/>
        </main>
      )}

      <SFFooter lang={lang} accent={accent}/>

      {/* WhatsApp FAB */}
      <a href="https://wa.me/85265520772" aria-label="WhatsApp" style={{
        position:'fixed', right:20, bottom:20, width:52, height:52,
        background:accent, display:'flex', alignItems:'center', justifyContent:'center',
        color:'#fff', boxShadow:'var(--shadow-md)', zIndex:60, transition:'transform 180ms',
      }}
      onMouseEnter={e=>e.currentTarget.style.transform='translateY(-2px)'}
      onMouseLeave={e=>e.currentTarget.style.transform='translateY(0)'}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.7-1.5-3.8-3.4-.3-.5.3-.5.8-1.5.1-.2 0-.4 0-.5s-.7-1.7-1-2.3c-.3-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3 4.8 4.2 1.8.7 2.5.8 3.4.7.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.3c1.4.8 3.1 1.3 4.8 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
      </a>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SFApp/>);