/* Hard4Tech — ERP & Partners pages. Exports to window. */

/* ---------- ERP page ---------- */
function ErpPage({ t, go }) {
  const e = t.erp;
  return (
    <div className="page">
      <PageHero t={t} go={go} crumb={t.nav[2].label} title={e.hero.title} desc={e.hero.sub} />

      {/* intro + mockup */}
      <section className="section">
        <div className="container erp-intro">
          <div className="reveal">
            <span className="eyebrow">{e.hero.kicker}</span>
            <h2 className="display h2" style={{ margin: "16px 0 18px", fontSize: "clamp(1.7rem,3vw,2.4rem)" }}>{e.introTitle}</h2>
            <p className="lead">{e.introBody}</p>
            <div style={{ marginTop: 30 }}>
              <button className="btn btn--primary btn--arrow" onClick={() => go("contact")}>{e.cta.btn}<Icon name="arrow" size={16} className="arr" /></button>
            </div>
          </div>
          <div className="reveal erp-mock">
            <div className="erp-mock__bar">
              <span className="erp-mock__dot" /><span className="erp-mock__dot" /><span className="erp-mock__dot" />
              <span className="erp-mock__title">Hard4Tech ERP — Dashboard</span>
            </div>
            <div className="erp-mock__body">
              <div className="erp-mock__kpis">
                {[["Revenue","\u00a0"],["Orders","\u00a0"],["Stock","\u00a0"]].map((k, i) => (
                  <div className="erp-mock__kpi" key={i}><span className="erp-mock__klabel">{k[0]}</span><span className="erp-mock__kval gradient-text"><Counter value={[1240,318,94][i]} suffix={["K","","%"][i]} /></span></div>
                ))}
              </div>
              <div className="erp-mock__chart">
                {[42,68,55,80,61,90,72,84].map((h, i) => <span key={i} style={{ height: h + "%" }} />)}
              </div>
              <div className="erp-mock__rows">
                {[0,1,2,3].map((r) => <div className="erp-mock__row" key={r}><span /><span /><span /></div>)}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* modules */}
      <section className="section--tight">
        <div className="container">
          <SectionHead eyebrow={e.modulesHead.eyebrow} title={e.modulesHead.title} desc={e.modulesHead.desc} center />
          <div className="grid erp-mods">
            {e.modules.map((m, i) => (
              <article className="card erp-mod reveal" key={i}>
                <div className="erp-mod__ic"><Icon name={m.icon} size={24} /></div>
                <h3>{m.title}</h3>
                <p>{m.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* features */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow={e.featuresHead.eyebrow} title={e.featuresHead.title} center />
          <div className="grid erp-feats">
            {e.features.map((f, i) => (
              <div className="erp-feat reveal" key={i}>
                <div className="erp-feat__ic"><Icon name={f.icon} size={22} /></div>
                <div><h4>{f.title}</h4><p>{f.desc}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* industries */}
      <section className="section--tight">
        <div className="container">
          <SectionHead eyebrow={e.industriesHead.eyebrow} title={e.industriesHead.title} center />
          <div className="erp-inds reveal">
            {e.industries.map((n, i) => <span className="pill erp-ind" key={i}><span className="dot" />{n}</span>)}
          </div>
        </div>
      </section>

      <section className="section ctaband">
        <div className="container">
          <div className="ctaband__box reveal">
            <div className="grid-bg" />
            <div className="glow-orb ctaband__glow" />
            <h2 className="display h2 gradient-text">{e.cta.title}</h2>
            <p className="lead">{e.cta.desc}</p>
            <button className="btn btn--primary btn--arrow" onClick={() => go("contact")}>{e.cta.btn}<Icon name="arrow" size={16} className="arr" /></button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Partners page ---------- */
function PartnersPage({ t, go }) {
  const p = t.partnersPage;
  const clients = p.clients || [];
  return (
    <div className="page">
      <PageHero t={t} go={go} crumb={t.nav[4].label} title={p.hero.title} desc={p.hero.sub} />

      {/* clients */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow={p.clientsHead.eyebrow} title={p.clientsHead.title} desc={p.clientsHead.desc} center />
          <div className="grid logo-grid">
            {clients.map((c, i) => (
              <div className="card logo-tile reveal" key={i} title={c.name}>
                <img src={c.logo} alt={c.name} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* tech partners */}
      <section className="section--tight statband">
        <div className="container">
          <SectionHead eyebrow={p.techHead.eyebrow} title={p.techHead.title} desc={p.techHead.desc} center />
          <div className="grid tech-grid">
            {t.partners.map((name, i) => (
              <div className="tech reveal" key={i}><span className="tech__name">{name}</span></div>
            ))}
          </div>
        </div>
      </section>

      {/* how we partner */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow={p.tiersHead.eyebrow} title={p.tiersHead.title} center />
          <div className="grid why-grid" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
            {p.tiers.map((w, i) => (
              <div className="card why reveal" key={i}>
                <div className="why__icon"><Icon name={w.icon} size={24} /></div>
                <h3 className="why__title">{w.title}</h3>
                <p className="why__desc">{w.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section ctaband">
        <div className="container">
          <div className="ctaband__box reveal">
            <div className="grid-bg" />
            <div className="glow-orb ctaband__glow" />
            <h2 className="display h2 gradient-text">{p.becomeTitle}</h2>
            <p className="lead">{p.becomeDesc}</p>
            <button className="btn btn--primary btn--arrow" onClick={() => go("contact")}>{p.becomeBtn}<Icon name="arrow" size={16} className="arr" /></button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ErpPage, PartnersPage });