/* =====================================================================
   Future Consulting — Közbeszerzési tanácsadás aloldal
   Szövegek: i18n.js → procurementPage (HU/EN)
   ===================================================================== */
const { useState: pUseState } = React;

function ProcurementPage() {
  return <I18nProvider><ProcurementPageBody/></I18nProvider>;
}

function PpFaq({ items }) {
  const [open, setOpen] = pUseState(0);
  return (
    <div className="fs-faq">
      {items.map(([q, a], i) => {
        const isOpen = open === i;
        return (
          <div className={'fs-faq-item ' + (isOpen ? 'open' : '')} key={i}>
            <button className="fs-faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen} aria-controls={'pp-faq-' + i} id={'pp-faq-q-' + i}>
              <span>{q}</span><span className="fs-faq-q-icon"><Plus size={14}/></span>
            </button>
            <div className="fs-faq-a" id={'pp-faq-' + i} role="region" aria-labelledby={'pp-faq-q-' + i}><p>{a}</p></div>
          </div>
        );
      })}
    </div>
  );
}

function PpCard({ c, event }) {
  return (
    <article className="pp-card">
      <span className="eyebrow">{c.eyebrow}</span>
      <h3>{c.title}</h3>
      <p>{c.desc}</p>
      <ul>{c.items.map((it, i) => <li key={i}><Check size={14}/><span>{it}</span></li>)}</ul>
      <a href="kapcsolat.html" className="btn btn-primary" data-fcs-event={event}>{c.cta}<ArrowRight size={14}/></a>
    </article>
  );
}

function ProcurementPageBody() {
  const { t } = useI18n();
  const pp = t.procurementPage;
  const r1 = useReveal(), r2 = useReveal(), r3 = useReveal();
  return (
    <>
      <Nav active="procurement"/>
      <section className="page-hero">
        <div className="ambient-glow"/>
        <div className="grid-bg"/>
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <span className="eyebrow">{pp.eyebrow}</span>
              <h1>{pp.title}</h1>
              <p className="lead">{pp.lead}</p>
            </div>
            <div className="page-hero-meta">
              {pp.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>

      {/* Két oldal */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{pp.twoEyebrow}</div>
            <h2 className="h-2">{pp.twoTitle}</h2>
          </div>
          <div className="pp-two reveal-stagger" ref={r1}>
            <PpCard c={pp.bidder} event="procurement_bidder"/>
            <PpCard c={pp.authority} event="procurement_authority"/>
          </div>
        </div>
      </section>

      {/* Eljárás-típusok */}
      <section className="section" style={{background:'var(--bg-1)', borderTop:'1px solid var(--line-1)', borderBottom:'1px solid var(--line-1)'}}>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{pp.typesEyebrow}</div>
            <h2 className="h-2">{pp.typesTitle}</h2>
            <p className="lead">{pp.typesLead}</p>
          </div>
          <div className="pp-types reveal-stagger" ref={r2}>
            {pp.types.map(([n, title, desc, tags]) => (
              <article className="pp-type" key={n}>
                <span className="pp-type-num">{n}</span>
                <h3>{title}</h3>
                <p>{desc}</p>
                <div className="pp-type-tags">{tags.map((tg, i) => <span key={i}>{tg}</span>)}</div>
              </article>
            ))}
          </div>
          <div className="pp-kv">
            {pp.kv.map(([k, v], i) => <div key={i}><div className="k">{k}</div><div className="v">{v}</div></div>)}
          </div>
        </div>
      </section>

      {/* Lépések */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow">{pp.stepsEyebrow}</div>
            <h2 className="h-2">{pp.stepsTitle}</h2>
          </div>
          <ol className="pp-steps reveal-stagger" ref={r3} style={{listStyle:'none', padding:0, margin:0}}>
            {pp.steps.map(([n, title, text]) => (
              <li className="pp-step" key={n}><span className="pp-step-num">{n}</span><h3>{title}</h3><p>{text}</p></li>
            ))}
          </ol>
        </div>
      </section>

      {/* FAQ */}
      <section className="section" style={{paddingTop: 0}}>
        <div className="container" style={{maxWidth: 880}}>
          <div className="section-head">
            <div className="eyebrow">{pp.faqEyebrow}</div>
            <h2 className="h-2">{pp.faqTitle}</h2>
          </div>
          <PpFaq items={pp.faq}/>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-section" id="contact">
        <div className="container">
          <div className="cta-card">
            <div className="eyebrow" style={{justifyContent:'center', display:'inline-flex'}}>{pp.ctaEyebrow}</div>
            <h2 className="cta-title">{pp.ctaTitle}</h2>
            <p className="cta-desc">{pp.ctaDesc}</p>
            <div className="cta-button-wrap">
              <a href="kapcsolat.html" className="btn btn-primary btn-lg" data-fcs-event="procurement_cta">{pp.ctaPrimary}<ArrowRight size={16}/></a>
              <a href="referenciak.html" className="btn btn-ghost btn-lg">{pp.ctaSecondary}<ArrowRight size={16}/></a>
            </div>
          </div>
        </div>
      </section>

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

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