/* =====================================================================
   FusionSuite — product family page (i18n-ready)
   ===================================================================== */

const { useState: fUseState } = React;

/* ---------- ICONS for platform 6-grid ---------- */
const PIcon = ({i}) => {
  const items = [
    <path d="M21 12c0-5-4-9-9-9s-9 4-9 9 4 9 9 9c2 0 4-.7 5.5-1.8M16 12h6M19 9l3 3-3 3"/>,
    <path d="M12 2l8 4v6c0 5-3 9-8 10-5-1-8-5-8-10V6l8-4zM9 12l2 2 4-4"/>,
    <><path d="M3 6h18M3 12h18M3 18h12"/><circle cx="19" cy="18" r="2"/></>,
    <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>,
    <><path d="M12 2v20M2 12h20"/><circle cx="12" cy="12" r="9"/></>,
    <path d="M3 12c4-7 14-7 18 0M5 12c3-5 11-5 14 0M12 12v6M9 18h6"/>,
  ];
  return <Icon size={20}>{items[i]}</Icon>;
};

/* ---------- FAQ accordion ---------- */
function FaqItem({ q, a, isOpen, onToggle }) {
  return (
    <div className={"fs-faq-item " + (isOpen ? 'open' : '')}>
      <button className="fs-faq-q" onClick={onToggle} aria-expanded={isOpen}>
        <span>{q}</span>
        <span className="fs-faq-q-icon"><Plus size={14}/></span>
      </button>
      <div className="fs-faq-a"><p>{a}</p></div>
    </div>
  );
}

function FusionPage() {
  return (
    <I18nProvider>
      <FusionPageBody/>
    </I18nProvider>
  );
}

function FusionPageBody() {
  const { t } = useI18n();
  const fp = t.fusionSuitePage;
  const [openFaq, setOpenFaq] = fUseState(0);

  return (
    <>
      <Nav active="fusion"/>

      {/* ===== HERO ===== */}
      <section className="fs-hero">
        <div className="container">
          <div className="fs-hero-grid">
            <div>
              <span className="eyebrow">{fp.hero.eyebrow}</span>
              <h1>{fp.hero.h1Part1}<em>{fp.hero.h1Em}</em>{fp.hero.h1Part2}</h1>
              <p className="fs-hero-lead">{fp.hero.lead}</p>
              <div className="fs-hero-ctas">
                <a href="kapcsolat.html" className="btn btn-primary">{fp.hero.ctaPrimary} <ArrowRight size={14}/></a>
                <a href="https://fusion.futureconsulting.hu" target="_blank" rel="noopener" className="btn btn-ghost">{fp.hero.ctaSecondary} <ArrowUpRight size={14}/></a>
              </div>
              <div className="fs-trust">
                {fp.trust.map((label, i) => (
                  <span key={i} className="fs-trust-chip"><Check size={12}/> {label}</span>
                ))}
              </div>
            </div>
            <div className="fs-hero-vis">
              <div className="fs-hero-vis-modules">
                {fp.hero.tiles.map(([n, name, desc]) => (
                  <a href={"#" + name.toLowerCase()} key={n} className="fs-hero-tile">
                    <span className="fs-hero-tile-num">{n}</span>
                    <span className="fs-hero-tile-name">{name}</span>
                    <p className="fs-hero-tile-desc">{desc}</p>
                  </a>
                ))}
              </div>
              <div className="fs-hero-platform">
                <div className="fs-hero-platform-label">{fp.hero.commonLabel}</div>
                <div className="fs-hero-platform-tags">
                  {fp.hero.commonTags.map((tag, i) => <span key={i}>{tag}</span>)}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== INTRO + 3 CLAIMS ===== */}
      <section className="fs-section">
        <div className="container">
          <div className="fs-section-head">
            <div className="eyebrow">{fp.intro.eyebrow}</div>
            <h2 className="h-2">{fp.intro.h2}</h2>
            <p className="lead">{fp.intro.lead}</p>
          </div>
          <div className="fs-claims">
            {fp.intro.claims.map(([n, ti, d]) => (
              <div className="fs-claim" key={n}>
                <div className="fs-claim-num">{n}</div>
                <h3 className="fs-claim-title">{ti}</h3>
                <p className="fs-claim-desc">{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FOUR MODULES ===== */}
      <section className="fs-section" id="modules">
        <div className="container">
          <div className="fs-section-head">
            <div className="eyebrow">{fp.modulesSection.eyebrow}</div>
            <h2 className="h-2">{fp.modulesSection.h2}</h2>
          </div>
          <nav className="fs-modnav" aria-label="Module jump">
            {fp.modnav.map(([href, label]) => (
              <a href={href} key={href}>{label}</a>
            ))}
          </nav>
          <div className="fs-modules">
            {fp.modules.map((m) => (
              <div className="fs-module" data-mod={m.id} id={m.id} key={m.id}>
                <div className="fs-module-side">
                  {m.logo
                    ? <img className="fs-module-logo" src={m.logo} alt={m.eyebrow}/>
                    : (
                      <div className="fs-module-logo" style={{background:'#fff', height:120, display:'flex', alignItems:'center', justifyContent:'center', color:'#38bdf8', fontWeight:700, fontSize:24, letterSpacing:'-0.02em'}}>
                        <span style={{color:'#1e3a8a'}}>fusion</span><span style={{marginLeft:8, color:'#38bdf8'}}>{(m.badge || '').toUpperCase()}</span>
                      </div>
                    )}
                  <div className="fs-module-eyebrow">{m.eyebrow}</div>
                  <h3 className="fs-module-title">{m.title}</h3>
                  <p className="fs-module-lead">{m.lead}</p>
                  <div className="fs-module-for">
                    <span className="fs-module-for-k">{fp.rowLabels.forK}</span>
                    <span className="fs-module-for-v">{m.forV}</span>
                  </div>
                </div>
                <div>
                  <div className="fs-features">
                    {m.features.map(([ti, d], i) => (
                      <div className="fs-feature" key={i}>
                        <div className="fs-feature-dot">{String(i + 1).padStart(2, '0')}</div>
                        <div className="fs-feature-body">
                          <strong>{ti}</strong>
                          <span>{d}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                  <div className="fs-module-value">{m.value}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== TRY IT NOW — FusionSuite live ===== */}
      <section className="fs-try-section">
        <div className="container">
          <div className="fs-try-card">
            <div className="fs-try-eyebrow"><span className="eyebrow">{fp.try.eyebrow}</span></div>
            <h2 className="fs-try-h2">{fp.try.h2}</h2>
            <p className="fs-try-lead">{fp.try.lead}</p>
            <div className="fs-try-ctas">
              <a href="https://fusion.futureconsulting.hu" target="_blank" rel="noopener" className="btn btn-primary btn-lg">
                {fp.try.ctaPrimary} <ArrowUpRight size={16}/>
              </a>
              <a href="kapcsolat.html" className="btn btn-ghost btn-lg">
                {fp.try.ctaSecondary} <ArrowRight size={16}/>
              </a>
            </div>
            <p className="fs-try-meta">
              <code>{fp.try.metaCode}</code> — {fp.try.metaText}
            </p>
          </div>
        </div>
      </section>

      {/* ===== PLATFORM ===== */}
      <section className="fs-section" id="architecture" style={{background:'var(--bg-1)'}}>
        <div className="container">
          <div className="fs-section-head">
            <div className="eyebrow">{fp.platformSection.eyebrow}</div>
            <h2 className="h-2">{fp.platformSection.h2}</h2>
            <p className="lead">{fp.platformSection.lead}</p>
          </div>
          <div className="fs-platform-grid">
            {fp.platformSection.items.map(([ti, d], i) => (
              <div className="fs-platform-cell" key={i}>
                <div className="fs-platform-icon"><PIcon i={i}/></div>
                <h3>{ti}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== USE CASES ===== */}
      <section className="fs-section">
        <div className="container">
          <div className="fs-section-head">
            <div className="eyebrow">{fp.cases.eyebrow}</div>
            <h2 className="h-2">{fp.cases.h2}</h2>
          </div>
          <div className="fs-cases">
            {fp.cases.items.map((c) => (
              <div className="fs-case" key={c.num}>
                <div className="fs-case-num">{c.num}</div>
                <h3>{c.title}</h3>
                <div className="fs-case-row">
                  <span className="fs-case-row-k">{fp.cases.rowLabels.situation}</span>
                  <span className="fs-case-row-v">{c.situation}</span>
                </div>
                <div className="fs-case-row">
                  <span className="fs-case-row-k">{fp.cases.rowLabels.modulMix}</span>
                  <span className="fs-case-row-v">{c.modulMix}</span>
                </div>
                <div className="fs-case-row">
                  <span className="fs-case-row-k">{fp.cases.rowLabels.result}</span>
                  <span className="fs-case-row-v">{c.result}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== PHASES ===== */}
      <section className="fs-section" style={{background:'var(--bg-1)'}}>
        <div className="container">
          <div className="fs-section-head">
            <div className="eyebrow">{fp.phases.eyebrow}</div>
            <h2 className="h-2">{fp.phases.h2}</h2>
          </div>
          <div className="fs-phases">
            {fp.phases.items.map(([n, w, ti, d]) => (
              <div className="fs-phase" key={n}>
                <div className="fs-phase-num">{n}</div>
                <div className="fs-phase-weeks">{w}</div>
                <h3>{ti}</h3>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FAQ ===== */}
      <section className="fs-section">
        <div className="container" style={{maxWidth: 920}}>
          <div className="fs-section-head">
            <div className="eyebrow">{fp.faq.eyebrow}</div>
            <h2 className="h-2">{fp.faq.h2}</h2>
          </div>
          <div className="fs-faq">
            {fp.faq.items.map(([q, a], i) => (
              <FaqItem
                key={i}
                q={q}
                a={a}
                isOpen={openFaq === i}
                onToggle={() => setOpenFaq(openFaq === i ? -1 : i)}
              />
            ))}
          </div>
        </div>
      </section>

      {/* ===== FINAL CTA ===== */}
      <section className="fs-final" id="contact">
        <div className="container">
          <div className="fs-final-card">
            <div className="eyebrow" style={{justifyContent:'center', display:'inline-flex'}}>{fp.finalCta.eyebrow}</div>
            <h2>{fp.finalCta.h2}</h2>
            <p>{fp.finalCta.lead}</p>
            <div className="fs-final-ctas">
              <a href="kapcsolat.html" className="btn btn-primary btn-lg">{fp.finalCta.ctaPrimary} <ArrowRight size={16}/></a>
              <a href="https://fusion.futureconsulting.hu" target="_blank" rel="noopener" className="btn btn-ghost btn-lg">{fp.finalCta.ctaSecondary} <ArrowUpRight size={16}/></a>
            </div>
            <div className="fs-final-meta">
              {fp.finalCta.meta.map(([k, v], i) => (
                <div className="fs-final-meta-cell" key={i}>
                  <span className="fs-final-meta-k">{k}</span>
                  <span className="fs-final-meta-v">{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

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

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