/* EntecPower corporate site — shared shell
   Provides: <SiteNav>, <SiteFooter>, <CtaBand>, <TweaksPanel host>
   Loaded by every page after react + babel.

   Page identifies itself via window.__EP_PAGE = 'home' | 'about' | ...
   Initial tweak state lives in <body data-theme> etc. and is persisted via
   the __edit_mode_set_keys postMessage protocol. */

const NAV_ITEMS = [
  ['home',       'index.html',        'nav_home'],
  ['about',      'about.html',        'nav_about'],
  ['products',   'products.html',     'nav_products'],
  ['industries', 'industries.html',   'nav_industries'],
  ['partners',   'partners.html',     'nav_partners'],
  ['news',       'news.html',         'nav_news'],
  ['contact',    'contact.html',      'nav_contact'],
];

function SiteNav({ page, lang, setLang }) {
  const [open, setOpen] = React.useState(false);
  return (
    <nav className="site-nav">
      <div className="site-nav-bar">
        <a href="index.html" className="site-nav-brand">
          <img src="company/assets/logos/enteclogo.png" alt="ENTEC POWER"/>
        </a>
        <ul className={`site-nav-links ${open ? 'open' : ''}`} style={{listStyle:'none',padding:0,margin:0}}>
          {NAV_ITEMS.map(([k, href, i18n]) => (
            <li key={k}><a href={href} className={page===k ? 'active' : ''} data-i18n={i18n}/></li>
          ))}
        </ul>
        <div className="site-nav-right">
          <select className="site-nav-lang" value={lang} onChange={e => setLang(e.target.value)} aria-label="Language">
            {window.EP_LANGS.map(([k, n]) => <option key={k} value={k}>{n}</option>)}
          </select>
          <a href="contact.html" className="site-nav-cta" data-i18n="nav_cta"/>
          <button className="site-nav-burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </nav>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="site-container">
        <div className="site-footer-grid">
          <div className="site-footer-brand">
            <img src="company/assets/logos/enteclogo.png" alt="ENTEC POWER"/>
            <p data-i18n="foot_tagline"/>
            <div style={{marginTop:18,fontSize:13,lineHeight:1.65}}>
              <div style={{color:'var(--ep-ink)',fontWeight:600,marginBottom:4}} data-i18n="foot_addr_label"/>
              <div style={{whiteSpace:'pre-line'}} data-i18n="foot_addr"/>
            </div>
          </div>
          <div>
            <h4 data-i18n="foot_company"/>
            <a className="site-footer-link" href="about.html" data-i18n="nav_about"/>
            <a className="site-footer-link" href="partners.html" data-i18n="nav_partners"/>
            <a className="site-footer-link" href="news.html" data-i18n="nav_news"/>
          </div>
          <div>
            <h4 data-i18n="foot_products"/>
            <a className="site-footer-link" href="products.html" data-i18n="nav_products"/>
            <a className="site-footer-link" href="products-md1000.html">MD-1000</a>
            <a className="site-footer-link" href="products-hd6g.html">HD-6G</a>
            <a className="site-footer-link" href="industries.html" data-i18n="nav_industries"/>
          </div>
          <div>
            <h4 data-i18n="foot_contact"/>
            <a className="site-footer-link" href="mailto:entec@entecpower.com" data-i18n="foot_email"/>
            <a className="site-footer-link" href="tel:+82315224019" data-i18n="foot_tel"/>
            <a className="site-footer-link" href="contact.html" data-i18n="cta_demo"/>
          </div>
        </div>
        <div className="site-footer-bottom">
          <span data-i18n="foot_rights"/>
          <div style={{display:'flex',gap:18,fontSize:12.5}}>
            <a href="#" className="site-footer-link" data-i18n="foot_privacy"/>
            <a href="#" className="site-footer-link" data-i18n="foot_terms"/>
            <a href="#" className="site-footer-link" data-i18n="foot_sitemap"/>
          </div>
          <div className="site-footer-social">
            <a href="#" aria-label="LinkedIn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>
            </a>
            <a href="#" aria-label="YouTube">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.02 3.02 0 00-2.122-2.136C19.505 3.55 12 3.55 12 3.55s-7.505 0-9.377.5A3.02 3.02 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 002.122 2.136c1.871.5 9.376.5 9.376.5s7.505 0 9.376-.5a3.02 3.02 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.546 15.568V8.432l6.286 3.568z"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function CtaBand() {
  return (
    <section className="site-section" style={{background:'linear-gradient(135deg, var(--site-brand) 0%, var(--site-brand-dark) 100%)', padding:'72px 0', position:'relative', overflow:'hidden'}}>
      <div className="site-container" style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:32,alignItems:'center',position:'relative',zIndex:1}}>
        <div>
          <h2 style={{fontFamily:'var(--site-display)',color:'#fff',fontSize:'clamp(26px,3.4vw,40px)',fontWeight:800,letterSpacing:'-.014em',lineHeight:1.1,margin:'0 0 12px'}} data-i18n="home_cta_band_title"/>
          <p style={{color:'rgba(255,255,255,.85)',fontSize:'clamp(15px,1.6vw,18px)',lineHeight:1.6,margin:0,maxWidth:'52ch'}} data-i18n="home_cta_band_sub"/>
        </div>
        <div style={{display:'flex',gap:10,justifyContent:'flex-end',flexWrap:'wrap'}}>
          <a href="contact.html" className="site-btn site-btn-lg" style={{background:'#fff',color:'var(--site-brand-dark)'}} data-i18n="cta_demo"/>
          <a href="products.html" className="site-btn site-btn-lg" style={{background:'transparent',color:'#fff',border:'1px solid rgba(255,255,255,.5)'}} data-i18n="cta_explore"/>
        </div>
      </div>
      <div style={{position:'absolute',right:-100,top:-80,width:400,height:400,borderRadius:'50%',background:'radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 60%)',pointerEvents:'none'}}></div>
    </section>
  );
}

/* ── Tweaks panel (shared across pages) ────────────────────────────────── */
const HERO_OPTIONS = [
  {value:'photo',   label:'Photo'},
  {value:'video',   label:'Video'},
  {value:'graphic', label:'Graphic'},
];
const FONT_OPTIONS = [
  {value:'pretendard',    label:'Pretendard'},
  {value:'space-grotesk', label:'Space Grotesk'},
  {value:'nanum-gothic',  label:'Nanum Gothic'},
];
const TONE_OPTIONS = [
  ['cobalt','#2563EB'],
  ['orange','#f7941d'],
  ['amber','#f59e0b'],
  ['emerald','#10b981'],
];

function SiteTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme">
        <TweakRadio label="Mode" value={tweaks.theme} options={[{value:'dark',label:'Dark'},{value:'light',label:'Light'}]} onChange={v => setTweak('theme', v)}/>
        <TweakColor label="Brand" value={TONE_OPTIONS.find(([k]) => k === tweaks.tone)?.[1]} options={TONE_OPTIONS.map(([k,c]) => c)} onChange={v => {
          const tone = TONE_OPTIONS.find(([k,c]) => c === v); if (tone) setTweak('tone', tone[0]);
        }}/>
      </TweakSection>
      <TweakSection label="Typography">
        <TweakSelect label="Display" value={tweaks.font} options={FONT_OPTIONS} onChange={v => setTweak('font', v)}/>
      </TweakSection>
      <TweakSection label="Hero">
        <TweakRadio label="Treatment" value={tweaks.hero} options={HERO_OPTIONS} onChange={v => setTweak('hero', v)}/>
      </TweakSection>
    </TweaksPanel>
  );
}

/* ── Top-level Shell that wires Nav + Footer + i18n + tweaks ───────────── */
function Shell({ page, children, hideCtaBand }) {
  const defaults = window.__EP_TWEAK_DEFAULTS;
  const [tweaks, setTweak] = useTweaks(defaults);
  const [lang, setLangState] = React.useState(() => window.epDetectDefaultLang ? window.epDetectDefaultLang() : 'ko');
  const setLang = React.useCallback((next) => {
    const l = next === 'ko' ? 'ko' : 'en';
    setLangState(l);
  }, []);

  // Translate when lang changes
  React.useEffect(() => { window.epTranslate(lang); }, [lang]);

  // Pick lookup for current language so children can read strings
  const t = window.EP_I18N[lang] || window.EP_I18N.en;
  // Bridge tweaks + lang to children
  const ctx = { tweaks, setTweak, lang, setLang, t };
  return (
    <SiteCtx.Provider value={ctx}>
      <SiteNav page={page} lang={lang} setLang={setLang}/>
      {children}
      {!hideCtaBand && <CtaBand/>}
      <SiteFooter/>
      <SiteTweaks tweaks={tweaks} setTweak={setTweak}/>
    </SiteCtx.Provider>
  );
}

const SiteCtx = React.createContext({});
window.useSite = () => React.useContext(SiteCtx);

Object.assign(window, { SiteNav, SiteFooter, CtaBand, SiteTweaks, Shell, NAV_ITEMS });
