/* =====================================================================
   Future Consulting — Legal pages renderer
   - Közös sablon a 4 jogi oldalhoz (privacy, terms, cookies, imprint)
   - A betöltő HTML beállítja: window.FCS_LEGAL_PAGE = 'privacy' | 'terms' | 'cookies' | 'imprint'
   - Tartalom: legal-data.js (Object.assign-olja az i18n szótárba)
   ===================================================================== */

const { useEffect } = React;

/* ── Blokk-renderer: az adatfájlban használt body-blokkokat HTML-be fordítja ── */
function LegalBlock({ block }) {
  if (block.p) return <p className="lg-p">{block.p}</p>;
  if (block.h3) return <h3 className="lg-h3">{block.h3}</h3>;
  if (block.ul) return (
    <ul className="lg-ul">
      {block.ul.map((li, i) => <li key={i}>{li}</li>)}
    </ul>
  );
  if (block.kv) return (
    <dl className="lg-kv">
      {block.kv.map((row, i) => (
        <div className="lg-kv-row" key={i}>
          <dt>{row.k}</dt>
          <dd>{row.v}</dd>
        </div>
      ))}
    </dl>
  );
  if (block.table) return (
    <div className="lg-table-wrap">
      <table className="lg-table">
        <thead>
          <tr>{block.table.head.map((h, i) => <th key={i}>{h}</th>)}</tr>
        </thead>
        <tbody>
          {block.table.rows.map((row, i) => (
            <tr key={i}>{row.map((cell, j) => <td key={j}>{cell}</td>)}</tr>
          ))}
        </tbody>
      </table>
    </div>
  );
  return null;
}

/* ── slug-generálás horgony-linkekhez ── */
function slugify(s, fallback) {
  if (!s) return fallback;
  return String(s).toLowerCase()
    .replace(/[áàâä]/g, 'a').replace(/[éèêë]/g, 'e').replace(/[íìîï]/g, 'i')
    .replace(/[óòôö]/g, 'o').replace(/[őū]/g, 'o').replace(/[úùûü]/g, 'u').replace(/[ű]/g, 'u')
    .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || fallback;
}

/* ── Egy jogi oldal sablonja ── */
function LegalPage() {
  const { t } = useI18n();
  const pageKey = (window.FCS_LEGAL_PAGE || 'privacy') + 'Page';
  const lp = t[pageKey];
  const lc = t.legalCommon || {};
  const navActive = (window.FCS_LEGAL_PAGE === 'imprint') ? 'imprint' : 'legal';

  // Az URL-ben érkező anchor-ra ugorjunk, ha érkezett
  useEffect(() => {
    const hash = window.location.hash;
    if (hash) {
      const el = document.querySelector(hash);
      if (el) setTimeout(() => el.scrollIntoView({ behavior: 'smooth', block: 'start' }), 100);
    }
  }, []);

  if (!lp) {
    return (
      <I18nProvider>
        <Nav active={navActive}/>
        <section className="page-hero">
          <div className="container">
            <h1>Tartalom nem érhető el</h1>
            <p className="lead">A jogi tartalom betöltése sikertelen. Kérjük, frissítse az oldalt.</p>
          </div>
        </section>
        <Footer/>
      <CookieBanner/>
      </I18nProvider>
    );
  }

  return (
    <I18nProvider>
      <Nav active={navActive}/>

      {/* HERO */}
      <section className="page-hero">
        <div className="ambient-glow"/>
        <div className="grid-bg"/>
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <span className="eyebrow">{lp.eyebrow}</span>
              <h1>{lp.title}</h1>
              <p className="lead">{lp.lead}</p>
            </div>
            <div className="page-hero-meta">
              {(lp.meta || []).map((m, i) => (
                <div className="row" key={i}><span>{m.k}</span><span>{m.v}</span></div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* TARTALOM + TOC */}
      <section className="section legal-section">
        <div className="container">
          <div className="legal-grid">
            <aside className="legal-toc" aria-label={lc.tocTitle || 'Tartalomjegyzék'}>
              <div className="legal-toc-sticky">
                <h4 className="legal-toc-title">{lc.tocTitle || 'Tartalomjegyzék'}</h4>
                <ol>
                  {lp.sections.map((s, i) => {
                    const id = 'sec-' + (i + 1) + '-' + slugify(s.title, String(i + 1));
                    return <li key={i}><a href={'#' + id}>{s.title}</a></li>;
                  })}
                </ol>
              </div>
            </aside>

            <article className="legal-body">
              {lp.sections.map((s, i) => {
                const id = 'sec-' + (i + 1) + '-' + slugify(s.title, String(i + 1));
                return (
                  <section className="legal-section-block" id={id} key={i}>
                    <h2 className="lg-h2">{s.title}</h2>
                    {(s.body || []).map((b, j) => <LegalBlock block={b} key={j}/>)}
                  </section>
                );
              })}

              <div className="legal-footer-note">
                <p className="meta">{lc.printNote}</p>
                <a href="#top" className="legal-back">{lc.backToTop || 'Vissza a tetejére'}</a>
              </div>
            </article>
          </div>
        </div>
      </section>

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

/* ── Reusable CTA (a többi page-*.jsx mintájára) ── */
function CTASection() {
  const { t } = useI18n();
  return (
    <section className="cta-section" id="contact">
      <div className="container">
        <div className="cta-card">
          <div className="eyebrow" style={{justifyContent:'center', display:'inline-flex'}}>{t.cta.eyebrow}</div>
          <h2 className="cta-title">{t.cta.title}</h2>
          <p className="cta-desc">{t.cta.desc}</p>
          <div className="cta-button-wrap">
            <a href="mailto:info@futureconsulting.hu" className="btn btn-primary btn-lg">
              {t.cta.button}<ArrowRight size={16}/>
            </a>
            <span className="meta">{t.cta.sub}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<LegalPage/>);