// ATOM Center — Page: Enterprise
const EnterprisePage = ({ lang, navigate }) => {
  const tr = (k) => t(lang, "enterprise." + k);

  const steps = [
    { title: tr("step1Title"), body: tr("step1Body") },
    { title: tr("step2Title"), body: tr("step2Body") },
    { title: tr("step3Title"), body: tr("step3Body") },
    { title: tr("step4Title"), body: tr("step4Body") },
  ];

  const formulas = [
    { tag: tr("f1Tag"), title: tr("f1Title"), body: tr("f1Body"), items: tr("f1Items"), featured: false },
    { tag: tr("f2Tag"), title: tr("f2Title"), body: tr("f2Body"), items: tr("f2Items"), featured: true },
    { tag: tr("f3Tag"), title: tr("f3Title"), body: tr("f3Body"), items: tr("f3Items"), featured: false },
  ];

  return (
    <>
      <header className="page-header">
        <div className="container">
          <div className="breadcrumb">{t(lang,"nav.home")} <span>/</span> {tr("breadcrumb")}</div>
          <h1>{tr("titleA")} <span className="accent">{tr("titleB")}</span> {tr("titleC")}</h1>
          <p className="page-sub">{tr("sub")}</p>
        </div>
      </header>

      {/* PROCESS */}
      <section>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow eyebrow-blue">{tr("processEyebrow")}</span>
            <h2 className="h-display-2">{tr("processTitle")}</h2>
          </div>
          <div className="process-grid">
            {steps.map((s, i) => (
              <div key={i} className="process-step">
                <div className="step-num">0{i+1}</div>
                <h4>{s.title}</h4>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DIGITAL ACADEMY / LMS */}
      <section className="digital-section">
        <div className="container">
          <div className="digital-grid">
            <div className="digital-intro">
              <span className="eyebrow eyebrow-blue">{t(lang, "digital.eyebrow")}</span>
              <h2 className="h-display-2">
                {t(lang, "digital.title")}<br />
                <span style={{ color: "var(--center-blue)" }}>{t(lang, "digital.titleAccent")}</span>
              </h2>
              <p className="lead" style={{ marginTop: 16 }}>{t(lang, "digital.sub")}</p>
              <div className="digital-stats">
                <div><div className="digital-stat-num">{t(lang, "digital.stat1Num")}</div><div className="digital-stat-label">{t(lang, "digital.stat1Label")}</div></div>
                <div><div className="digital-stat-num">{t(lang, "digital.stat2Num")}</div><div className="digital-stat-label">{t(lang, "digital.stat2Label")}</div></div>
                <div><div className="digital-stat-num">{t(lang, "digital.stat3Num")}</div><div className="digital-stat-label">{t(lang, "digital.stat3Label")}</div></div>
              </div>
            </div>
            <div className="digital-features">
              {[
                { icon: "monitor", titleK: "f1Title", bodyK: "f1Body" },
                { icon: "library", titleK: "f2Title", bodyK: "f2Body" },
                { icon: "users-round", titleK: "f3Title", bodyK: "f3Body" },
                { icon: "settings", titleK: "f4Title", bodyK: "f4Body" },
              ].map((f, i) => (
                <div key={i} className="digital-feature">
                  <div className="digital-feature-icon"><Icon name={f.icon} size={20} /></div>
                  <h4>{t(lang, "digital." + f.titleK)}</h4>
                  <p>{t(lang, "digital." + f.bodyK)}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FORMULAS */}
      <section className="section-grey">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow eyebrow-blue">{tr("formulasEyebrow")}</span>
            <h2 className="h-display-2">{tr("formulasTitle")}</h2>
            <p className="lead">{tr("formulasSub")}</p>
          </div>
          <div className="formula-grid">
            {formulas.map((f, i) => (
              <div key={i} className={"formula-card" + (f.featured ? " featured" : "")}>
                <span className="formula-tag">{f.tag}</span>
                <h3>{f.title}</h3>
                <p>{f.body}</p>
                <ul>
                  {f.items.map((it, j) => (<li key={j}><Icon name="check" size={16}/><span>{it}</span></li>))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CONTACT CTA */}
      <section className="section-poster">
        <div className="container" style={{textAlign:"center"}}>
          <h2 className="h-display-2" style={{color:"white", maxWidth:24, margin:"0 auto 16px", maxWidth:"22ch"}}>{tr("ctaTitle")}</h2>
          <p style={{fontSize:18, color:"rgba(255,255,255,0.85)", maxWidth:"50ch", margin:"0 auto 32px"}}>{tr("ctaSub")}</p>
          <a href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact");}} className="btn btn-light btn-lg">
            {tr("ctaBtn")} <Icon name="arrow-right" size={16}/>
          </a>
        </div>
      </section>

      <EcosystemSection lang={lang}/>
    </>
  );
};

window.EnterprisePage = EnterprisePage;