// kgb-layout.jsx — shared chrome (fonts, Wrap, Eyebrow, Nav, Footer) for all KGB pages
// Exposes window.KGBLayout
(function () {
  const { t, Ic } = window.KGB;
  const { useState, useEffect } = React;

  const MAXW = 1320;

  const fonts = (lang) => lang === 'fa'
    ? { head: "'Vazirmatn', sans-serif", body: "'Vazirmatn', sans-serif", label: "'Vazirmatn', sans-serif", num: "'Vazirmatn', sans-serif", ls: '0' }
    : { head: t.serif, body: t.sans, label: t.mono, num: t.serif, ls: '0.18em' };

  // page hrefs aligned to nav order: Home, About, Services, Fleet, Gallery, Awards, Contact
  const HREFS = [
    'index.html',
    'about.html',
    'services.html',
    'fleet.html',
    'gallery.html',
    'awards.html',
    'contact.html',
  ];
  const CONTACT_HREF = HREFS[6];
  const FLEET_HREF = HREFS[3];

  function Wrap({ children, style }) {
    return <div className="kgb-wrap" style={{ maxWidth: MAXW, margin: '0 auto', padding: '0 48px', ...style }}>{children}</div>;
  }

  function Eyebrow({ children, f, lang, color = t.goldLt, dot }) {
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: f.label, fontSize: lang === 'fa' ? 14 : 12, fontWeight: lang === 'fa' ? 600 : 700, letterSpacing: f.ls, textTransform: lang === 'fa' ? 'none' : 'uppercase', color }}>
        {dot && <span style={{ width: 8, height: 8, borderRadius: 9, background: '#5fbf8f', boxShadow: '0 0 0 4px rgba(95,191,143,0.18)' }} />}
        {children}
      </div>
    );
  }

  function Nav({ c, lang, setLang, f, current = 0, solidAlways }) {
    const [solid, setSolid] = useState(!!solidAlways);
    const [open, setOpen] = useState(false);
    useEffect(() => {
      if (solidAlways) return;
      const h = () => setSolid(window.scrollY > 40);
      window.addEventListener('scroll', h); return () => window.removeEventListener('scroll', h);
    }, [solidAlways]);
    return (
      <div style={{ position: 'sticky', top: 0, zIndex: 50, background: solid ? 'rgba(7,24,44,0.92)' : 'transparent', backdropFilter: solid ? 'blur(10px)' : 'none', borderBottom: `1px solid ${solid ? t.line : 'transparent'}`, transition: 'background .3s, border-color .3s' }}>
        <div style={{ borderBottom: `1px solid ${t.line}` }}>
          <Wrap style={{ height: 40, display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontFamily: f.label, fontSize: lang === 'fa' ? 12.5 : 11, letterSpacing: lang === 'fa' ? '0' : '0.08em', color: 'rgba(244,241,234,0.6)' }}>
            <span className="kgb-toploc">{c.top.loc}</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
              <span style={{ direction: 'ltr' }}>{c.top.phone}</span>
              <button onClick={() => setLang(lang === 'fa' ? 'en' : 'fa')} style={{ cursor: 'pointer', background: 'none', border: `1px solid ${t.line}`, borderRadius: 3, padding: '4px 10px', color: t.goldLt, fontFamily: f.label, fontSize: 12, fontWeight: 600 }}>{lang === 'fa' ? 'EN' : 'فا'}</button>
            </span>
          </Wrap>
        </div>
        <Wrap style={{ height: 76, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <a href={HREFS[0]} style={{ display: 'flex', alignItems: 'center', gap: 13, textDecoration: 'none' }}>
            <img src="assets/logo-mark-dark.png" alt="logo" style={{ height: 46, width: 'auto', display: 'block' }} />
            <div style={{ lineHeight: 1.18, whiteSpace: 'nowrap' }}>
              <div style={{ fontFamily: f.head, fontSize: 19, fontWeight: 700, color: t.cloud }}>{c.brand.name}</div>
              <div style={{ fontFamily: f.label, fontSize: lang === 'fa' ? 11 : 9, letterSpacing: lang === 'fa' ? '0' : '0.26em', color: t.gold, marginTop: 2, textTransform: lang === 'fa' ? 'none' : 'uppercase' }}>{c.brand.sub}</div>
            </div>
          </a>
          <div className="kgb-navlinks" style={{ display: 'flex', alignItems: 'center', gap: 30, fontFamily: f.body, fontSize: 15, fontWeight: 500 }}>
            {c.nav.map((n, i) => (
              <a key={i} href={HREFS[i]} style={{ cursor: 'pointer', textDecoration: 'none', position: 'relative', paddingBottom: 4, color: i === current ? t.cloud : 'rgba(244,241,234,0.78)' }}>
                {n}
                {i === current && <span style={{ position: 'absolute', insetInline: 0, bottom: -2, height: 2, background: t.gold, borderRadius: 2 }} />}
              </a>
            ))}
            <a href={CONTACT_HREF} style={{ textDecoration: 'none', background: t.gold, color: t.navy900, fontWeight: 700, fontSize: 14, padding: '11px 22px', borderRadius: 3, cursor: 'pointer', whiteSpace: 'nowrap' }}>{c.hero.cta1}</a>
          </div>
          <button className="kgb-burger" aria-label="menu" onClick={() => setOpen((o) => !o)} style={{ width: 44, height: 44, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 5, background: 'none', border: `1px solid ${t.line}`, borderRadius: 7, cursor: 'pointer' }}>
            <span style={{ width: 20, height: 2, background: t.cloud, borderRadius: 2, transition: 'transform .2s', transform: open ? 'translateY(7px) rotate(45deg)' : 'none' }} />
            <span style={{ width: 20, height: 2, background: t.cloud, borderRadius: 2, opacity: open ? 0 : 1, transition: 'opacity .15s' }} />
            <span style={{ width: 20, height: 2, background: t.cloud, borderRadius: 2, transition: 'transform .2s', transform: open ? 'translateY(-7px) rotate(-45deg)' : 'none' }} />
          </button>
        </Wrap>
        {open && (
          <div className="kgb-navmenu" style={{ borderTop: `1px solid ${t.line}`, background: 'rgba(7,24,44,0.98)', backdropFilter: 'blur(10px)' }}>
            <Wrap style={{ padding: '12px 48px 20px', display: 'flex', flexDirection: 'column' }}>
              {c.nav.map((n, i) => (
                <a key={i} href={HREFS[i]} style={{ textDecoration: 'none', fontFamily: f.body, fontSize: 16, fontWeight: 600, padding: '13px 2px', borderBottom: `1px solid ${t.line}`, color: i === current ? t.gold : 'rgba(244,241,234,0.85)' }}>{n}</a>
              ))}
              <a href={CONTACT_HREF} style={{ textDecoration: 'none', textAlign: 'center', background: t.gold, color: t.navy900, fontWeight: 700, fontSize: 15, padding: '13px 22px', borderRadius: 4, marginTop: 16 }}>{c.hero.cta1}</a>
            </Wrap>
          </div>
        )}
      </div>
    );
  }

  function Footer({ c, lang, f }) {
    const colHrefs = [
      [HREFS[2], HREFS[2], HREFS[2], HREFS[2]],
      [HREFS[1], HREFS[3], HREFS[5], HREFS[4]],
      [HREFS[6], null, null],
    ];
    return (
      <div style={{ background: t.navy900 }}>
        <Wrap style={{ padding: '64px 48px 40px', display: 'flex', gap: 56, flexWrap: 'wrap' }}>
          <div style={{ flex: '2 1 320px' }}>
            <img src="assets/logo-mark-dark.png" alt="logo" style={{ height: 56, width: 'auto', marginBottom: 18 }} />
            <div style={{ fontFamily: f.head, fontSize: 18, fontWeight: 700, color: t.cloud }}>{c.brand.name}</div>
            <p style={{ fontFamily: f.body, fontSize: 14.5, lineHeight: lang === 'fa' ? 2 : 1.7, color: 'rgba(244,241,234,0.6)', marginTop: 12, maxWidth: 400 }}>{c.footer.about}</p>
          </div>
          {c.footer.cols.map((col, i) => (
            <div key={i} style={{ flex: '1 1 150px' }}>
              <div style={{ fontFamily: f.label, fontSize: lang === 'fa' ? 14 : 11.5, fontWeight: 700, letterSpacing: f.ls, textTransform: lang === 'fa' ? 'none' : 'uppercase', color: t.gold, marginBottom: 18 }}>{c.footer.colTitles[i]}</div>
              {col.map((row, j) => {
                const isContact = i === 2 && (row.includes('+') || row.includes('@'));
                const href = colHrefs[i] && colHrefs[i][j];
                const baseStyle = { fontFamily: f.body, fontSize: 14, color: 'rgba(244,241,234,0.65)', padding: '7px 0', direction: isContact ? 'ltr' : 'inherit', textAlign: lang === 'fa' && !isContact ? 'right' : 'start', display: 'block', textDecoration: 'none' };
                return href
                  ? <a key={j} href={href} style={baseStyle}>{row}</a>
                  : <div key={j} style={baseStyle}>{row}</div>;
              })}
            </div>
          ))}
        </Wrap>
        <div style={{ borderTop: `1px solid ${t.line}` }}>
          <Wrap style={{ padding: '20px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10 }}>
            <span style={{ fontFamily: f.label, fontSize: 12, color: 'rgba(244,241,234,0.45)', letterSpacing: lang === 'fa' ? '0' : '0.06em' }}>{c.footer.rights}</span>
            <span style={{ fontFamily: f.label, fontSize: 12, color: 'rgba(244,241,234,0.45)', display: 'flex', alignItems: 'center', gap: 16 }}>
              <a href="https://goldenbm.ir" target="_blank" rel="noopener" style={{ color: 'rgba(244,241,234,0.45)', textDecoration: 'none', direction: 'ltr' }}>goldenbm.ir</a>
              <span style={{ width: 1, height: 12, background: t.line }} />
              <a href="https://kish-it.com" target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, color: 'rgba(244,241,234,0.55)', textDecoration: 'none', direction: 'ltr' }}>
                <span style={{ width: 6, height: 6, borderRadius: 6, background: t.gold }} />
                Powered by <span style={{ color: t.goldLt, fontWeight: 700 }}>kish-it.com</span>
              </a>
            </span>
          </Wrap>
        </div>
      </div>
    );
  }

  // Compact page hero used on inner pages
  function PageHead({ c, lang, f, eyebrow, title, sub, img, imgSrc, pos }) {
    return (
      <div style={{ position: 'relative', overflow: 'hidden', borderBottom: `1px solid ${t.line}` }}>
        <div style={{ position: 'absolute', inset: 0 }}>
          <window.KGB.Photo dark labelAlign="br" label={img} src={imgSrc} pos={pos} h="100%" style={{ position: 'absolute', inset: 0 }}
            accent="linear-gradient(180deg, rgba(7,24,44,0.82) 0%, rgba(7,24,44,0.88) 100%)" />
        </div>
        <Wrap style={{ position: 'relative', paddingTop: 70, paddingBottom: 56 }}>
          <Eyebrow f={f} lang={lang}>{eyebrow}</Eyebrow>
          <h1 style={{ fontFamily: f.head, fontSize: lang === 'fa' ? 46 : 54, fontWeight: lang === 'fa' ? 800 : 600, lineHeight: 1.1, margin: '16px 0 0', color: t.cloud, letterSpacing: '-0.01em' }}>{title}</h1>
          {sub && <p style={{ fontFamily: f.body, fontSize: 18, lineHeight: lang === 'fa' ? 2 : 1.6, color: 'rgba(244,241,234,0.78)', marginTop: 18, maxWidth: 620 }}>{sub}</p>}
        </Wrap>
      </div>
    );
  }

  // Wrapper that owns lang state + page shell; renders children(props)
  function Page({ current, render }) {
    const [lang, setLang] = useState(() => localStorage.getItem('kgb-lang') || 'fa');
    useEffect(() => { localStorage.setItem('kgb-lang', lang); }, [lang]);
    const c = window.KGBC[lang];
    const p = window.KGBP ? window.KGBP[lang] : {};
    const f = fonts(lang);
    const rtl = lang === 'fa';
    useEffect(() => { document.documentElement.setAttribute('dir', c.dir); document.documentElement.setAttribute('lang', lang); }, [c.dir, lang]);
    return (
      <div className="kgb" dir={c.dir} style={{ fontFamily: f.body, background: t.navy900, color: t.cloud, minHeight: '100vh' }}>
        <Nav c={c} lang={lang} setLang={setLang} f={f} current={current} solidAlways={current !== 0} />
        {render({ c, p, lang, f, rtl })}
        <Footer c={c} lang={lang} f={f} />
      </div>
    );
  }

  window.KGBLayout = { fonts, Wrap, Eyebrow, Nav, Footer, PageHead, Page, HREFS, MAXW };
})();