/* =====================================================================
   Future Consulting — Partnerek és referenciák (logófelhő)
   Adat: scripts/references-data.js (window.FCS_REFERENCES)
   ===================================================================== */

function RefTile({ r }) {
  return (
    <div className={'ref-tile' + (r.logo ? (r.dark ? ' light' : '') : ' word')} title={r.full}>
      {r.logo
        ? <img src={r.logo} alt={r.name} loading="lazy"/>
        : <span className="ref-word">{r.name}</span>}
    </div>
  );
}
window.RefTile = RefTile;

function ReferencesPage() {
  return <I18nProvider><ReferencesPageBody/></I18nProvider>;
}

function ReferencesPageBody() {
  const { t } = useI18n();
  const rp = t.referencesPage;
  const refs = window.FCS_REFERENCES || [];
  const cloudRef = useReveal();
  return (
    <>
      <Nav active="references"/>
      <section className="page-hero">
        <div className="ambient-glow"/>
        <div className="grid-bg"/>
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <span className="eyebrow">{rp.eyebrow}</span>
              <h1>{rp.title}</h1>
              <p className="lead">{rp.lead}</p>
            </div>
            <div className="page-hero-meta">
              {rp.meta.map((row, i) => (
                <div className="row" key={i}>
                  <span>{row.k}</span>
                  <span style={row.highlight ? {color:'var(--mint)'} : undefined}>{row.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop: 48}}>
        <div className="container">
          <div className="ref-stats">
            {rp.stats.map(([n, l], i) => (
              <div className="ref-stat" key={i}><div className="ref-stat-num">{n}</div><div className="ref-stat-label">{l}</div></div>
            ))}
          </div>
          <div className="section-head">
            <div className="eyebrow">{rp.cloudEyebrow}</div>
            <h2 className="h-2">{rp.cloudTitle}</h2>
          </div>
          <div className="ref-sectors" aria-label="Szektorok">
            {rp.sectors.map((s, i) => <span key={i}>{s}</span>)}
          </div>
          <div className="ref-cloud reveal" ref={cloudRef}>
            {refs.map((r) => <RefTile r={r} key={r.id}/>)}
          </div>
          <p className="ref-note">{rp.note}</p>
        </div>
      </section>

      <section className="cta-section" id="kozbeszerzes">
        <div className="container">
          <div className="cta-card">
            <div className="eyebrow" style={{justifyContent:'center', display:'inline-flex'}}>{rp.procurementEyebrow}</div>
            <h2 className="cta-title">{rp.procurementTitle}</h2>
            <p className="cta-desc">{rp.procurementDesc}</p>
            <div className="cta-button-wrap">
              <a href="kozbeszerzes.html" className="btn btn-primary btn-lg">{rp.procurementCta}<ArrowRight size={16}/></a>
              <a href="kapcsolat.html" className="btn btn-ghost btn-lg">{rp.contactCta}<ArrowRight size={16}/></a>
            </div>
          </div>
        </div>
      </section>

      <Footer/>
      <CookieBanner/>
    </>
  );
}

if (document.getElementById('root') && document.body.dataset.page === 'references') {
  ReactDOM.createRoot(document.getElementById('root')).render(<ReferencesPage/>);
}