// kgb-site.jsx — Kish Golden Bridge · bilingual (FA-RTL default / EN) homepage (function () { const { t, Photo, Ic, HormuzMap } = window.KGB; const { useState, useEffect } = React; const { fonts, Wrap, Eyebrow, Nav, Footer } = window.KGBLayout; // ---------- Route map (graphical) ---------- function RouteMap({ nodes, lang, f }) { return ( ); } // ---------- Hero (image-embedded) ---------- function Hero({ c, lang, f, rtl }) { return (

{/* bg image */}

{c.hero.live}

{c.hero.h1a}
{c.hero.h1b}

{c.hero.sub}

{c.hero.cta1} {c.hero.cta2}

{/* glass tracker */}

{c.hero.track}

{c.hero.trackPh}

{c.hero.trackBtn}

); } // ---------- Live ops + route map ---------- function Ops({ c, lang, f }) { const o = c.ops; return (

{o.tag}

{o.title}

{o.desc}

{/* status card */}

{o.vessel} {o.status}

{o.rows.map(([a, b], i) => (

{a}{b}

))}

{/* live badge */}

{o.mapBadge}

{/* AIS legend */}

{o.legend.map(([lbl, clr], i) => ( {lbl} ))}

); } // ---------- Stats ---------- function Stats({ c, lang, f }) { return ( {c.stats.map(([a, b], i) => (

{a}

{b}

))} ); } // ---------- Services (image-embedded cards) ---------- function Services({ c, lang, f, rtl }) { const s = c.services; const svcPhotos = ['assets/img/profile-bow.jpg', 'assets/img/deck-cargo.jpg', 'assets/img/kish-vessel.jpg', 'assets/img/deck-bow.jpg', 'assets/img/profile-stern.jpg', 'assets/img/bridge-crew.jpg']; return (

{s.tag}

{s.title}

{s.all}

{s.items.map((it, i) => (

{it.t}

{it.d}

))}

); } // ---------- Fleet feature + cards ---------- function Fleet({ c, lang, f, rtl }) { const fl = c.fleet; return (

{fl.tag}

{fl.title}

{fl.desc}

{fl.specs.map(([a, b], i) => (

{a}

{b}

))}

{fl.more}

{/* other vessels */}

{fl.othersTitle}

{fl.cards.map((v, i) => (

{v.n}

{v.t}

))}

); } // ---------- Full-bleed quote band ---------- function QuoteBand({ c, lang, f }) { return (

{c.quote.text}

{c.quote.by}

); } // ---------- Gallery ---------- function Gallery({ c, lang, f, rtl }) { const g = c.gallery; const spans = [[2, 2], [1, 1], [1, 1], [1, 1], [1, 1], [2, 1]]; const galPhotos = ['assets/img/deck-cargo.jpg', 'assets/img/bridge-logo.jpg', 'assets/img/profile-stern.jpg', 'assets/img/profile-bow.jpg', 'assets/img/hanis-kish.jpg', 'assets/img/bridge-crew.jpg']; const galPos = ['center', 'center', 'center', 'center', 'center 55%', 'center']; return (

{g.tag}

{g.title}

{g.view}

{g.labels.map((l, i) => (

))}

); } // ---------- Clients + testimonial ---------- function Clients({ c, lang, f }) { return (

{c.clients.tag}

{c.clients.items.map((n, i) => (

{n}

))}

{c.testimonial.q}

{c.testimonial.who}

); } // ---------- Contact CTA ---------- function Contact({ c, lang, f, rtl }) { const k = c.contact; const inp = { height: 50, borderRadius: 4, background: 'rgba(7,24,44,0.5)', border: `1px solid ${t.line}`, padding: '0 16px', color: t.cloud, fontFamily: f.body, fontSize: 14.5, outline: 'none' }; return (

{k.title}

{k.sub}

{k.or} · {c.top.phone}

<span style={{ background: t.gold, color: t.navy900, fontFamily: f.body, fontWeight: 700, fontSize: 15.5, padding: '15px 0', borderRadius: 4, textAlign: 'center', cursor: 'pointer', display: 'inline-flex', justifyContent: 'center', alignItems: 'center', gap: 9 }}>{k.send}<Ic name="arrow" size={18} style={rtl ? { transform: 'scaleX(-1)' } : null} /></span>
          </div>
        </Wrap>
      </div>
    );
  }

// ---------- App ----------
  function App() {
    const [lang, setLang] = useState(() => localStorage.getItem('kgb-lang') || 'fa');
    useEffect(() => { localStorage.setItem('kgb-lang', lang); }, [lang]);
    const c = window.KGBC[lang];
    const f = fonts(lang);
    const rtl = lang === 'fa';
    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={0} />
        <Hero c={c} lang={lang} f={f} rtl={rtl} />
        <Ops c={c} lang={lang} f={f} />
        <Stats c={c} lang={lang} f={f} />
        <Services c={c} lang={lang} f={f} rtl={rtl} />
        <Fleet c={c} lang={lang} f={f} rtl={rtl} />
        <QuoteBand c={c} lang={lang} f={f} />
        <Gallery c={c} lang={lang} f={f} rtl={rtl} />
        <Clients c={c} lang={lang} f={f} />
        <Contact c={c} lang={lang} f={f} rtl={rtl} />
        <Footer c={c} lang={lang} f={f} />
      </div>
    );
  }

window.KGBApp = App;
})();