// ATOM Center — Page: Home
const HomePage = ({ lang, navigate }) => {
  const [audience, setAudience] = useState("entreprise");
  const tr = (k) => t(lang, "hero." + k);
  const tp = (k) => t(lang, "pillars." + k);
  const tg = (k) => t(lang, "programs." + k);
  const ts = (k) => t(lang, "stats." + k);
  const tt = (k) => t(lang, "testi." + k);
  const tpos = (k) => t(lang, "poster." + k);

  const pillars = [
  { icon: "badge-check", title: tp("c1Title"), body: tp("c1Body") },
  { icon: "graduation-cap", title: tp("c2Title"), body: tp("c2Body") },
  { icon: "users-round", title: tp("c3Title"), body: tp("c3Body") },
  { icon: "award", title: tp("c4Title"), body: tp("c4Body") }];


  const programs = [
  { badge: tg("p1Badge"), title: tg("p1Title"), vendor: tg("p1Vendor"), items: tg("p1Items"), blue: true },
  { badge: tg("p2Badge"), title: tg("p2Title"), vendor: tg("p2Vendor"), items: tg("p2Items"), blue: false },
  { badge: tg("p3Badge"), title: tg("p3Title"), vendor: tg("p3Vendor"), items: tg("p3Items"), blue: false }];


  const stats = [
  { num: ts("s1Num"), label: ts("s1Label") },
  { num: ts("s2Num"), label: ts("s2Label") },
  { num: ts("s3Num"), label: ts("s3Label") },
  { num: ts("s4Num"), label: ts("s4Label") }];


  return (
    <>
      {/* HERO */}
      <section className="hero">
        <div className="container hero-grid">
          <div>
            <div className="hero-eyebrow animate-up">{tr("eyebrow")}</div>
            <div className="hero-audience animate-up d1">
              <button className={audience === "entreprise" ? "on" : ""} onClick={() => setAudience("entreprise")}>{tr("audEntreprise")}</button>
              <button className={audience === "individual" ? "on" : ""} onClick={() => setAudience("individual")}>{tr("audIndividual")}</button>
            </div>
            <h1 className="animate-up d1">
              {tr("titleA")}<br />
              {tr("titleB")} <span className="accent">{tr("titleC")}</span>
            </h1>
            <p className="hero-sub animate-up d2" style={{ whiteSpace: "pre-line" }}>{tr("sub")}</p>
            <div className="hero-cta-row animate-up d3">
              <a href="#contact" onClick={(e) => {e.preventDefault();navigate("contact");}} className="btn btn-primary btn-lg">
                <Icon name="download" size={14} /> {audience === "entreprise" ? tr("ctaPrimary") : tr("ctaPrimaryInd")}
              </a>
              <a href="#enterprise" onClick={(e) => {e.preventDefault();navigate(audience === "entreprise" ? "enterprise" : "programs");}} className="btn btn-ghost btn-lg">
                {audience === "entreprise" ? tr("ctaSecondary") : tr("ctaSecondaryInd")} <Icon name="arrow-right" size={16} />
              </a>
            </div>
            <div className="hero-meta animate-up d3">
              <div className="hero-meta-item"><div className="hero-meta-num">{tr("meta1Num")}</div><div className="hero-meta-label">{tr("meta1Label")}</div></div>
              <div className="hero-meta-item"><div className="hero-meta-num">{tr("meta2Num")}</div><div className="hero-meta-label">{tr("meta2Label")}</div></div>
              <div className="hero-meta-item"><div className="hero-meta-num">{tr("meta3Num")}</div><div className="hero-meta-label">{tr("meta3Label")}</div></div>
            </div>
          </div>
          <div className="hero-visual animate-up d2">
            <div className="hero-ribbon-2"></div>
            <div className="hero-ribbon"></div>
            <div className="hero-card-stack">
              <div className="hero-title-cap">{tr("cardTitle")}</div>
              <div className="hero-body-cap">
                <h3>{tr("cardHead")}</h3>
                <p>{tr("cardBody")}</p>
              </div>
            </div>
            <div className="hero-quote">"</div>
          </div>
        </div>
      </section>

      {/* PARTNERS STRIP */}
      <div className="partners">
        <div className="container">
          <div className="partners-label">{t(lang, "partners.label")}</div>
          <div className="partners-grid">
            {t(lang, "partners.list").map((p, i) => (
              <div key={i} className="partner-badge">
                <span className="dot" style={{ background: p.color }}></span>
                <strong>{p.name}</strong>
                <span style={{ color: "var(--fg-3)", marginLeft: 6, fontWeight: 500 }}>· {p.desc}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* PILLARS */}
      <section>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow eyebrow-blue">{tp("eyebrow")}</span>
            <h2 className="h-display-2">{tp("title")}<br /><span style={{ color: "var(--center-blue)" }}>{tp("titleAccent")}</span></h2>
            <p className="lead">{tp("sub")}</p>
          </div>
          <div className="cards-grid">
            {pillars.map((p, i) =>
            <div key={i} className="card">
                <div className="card-icon"><Icon name={p.icon} size={22} /></div>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
                <a href="#about" onClick={(e) => {e.preventDefault();navigate("about");}} className="card-link">
                  {tp("cardLink")} <Icon name="arrow-right" size={14} />
                </a>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* POSTER FEATURE — using existing TOSA poster */}
      <section className="poster-feature">
        <div className="container poster-grid">
          <div>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>{tpos("eyebrow")}</span>
            <h2 className="h-display-2" style={{ marginTop: 16, marginBottom: 24 }}>{tpos("title")}</h2>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: "rgba(255,255,255,0.85)", marginBottom: 32, maxWidth: "50ch" }}>{tpos("body")}</p>
            <a href="#programs" onClick={(e) => {e.preventDefault();navigate("programs");}} className="btn btn-light btn-lg">
              {tpos("cta")} <Icon name="arrow-right" size={16} />
            </a>
          </div>
          <div>
            <img src="assets/posters/center-poster-3.jpg" alt="Focus TOSA" />
          </div>
        </div>
      </section>

      {/* PROGRAMS PREVIEW */}
      <section className="section-grey">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow eyebrow-blue">{tg("eyebrow")}</span>
            <h2 className="h-display-2">{tg("title")}</h2>
            <p className="lead">{tg("sub")}</p>
          </div>
          <div className="programs-grid">
            {programs.map((p, i) =>
            <div key={i} className={"program-card" + (p.blue ? " blue" : "")}>
                <div className="program-card-head">
                  <span className="program-badge">{p.badge}</span>
                  <h3>{p.title}</h3>
                  <div className="program-vendor">{p.vendor}</div>
                </div>
                <div className="program-card-body">
                  <ul>
                    {p.items.map((it, j) => <li key={j}><Icon name="check" size={16} /><span>{it}</span></li>)}
                  </ul>
                </div>
                <div className="program-card-foot">
                  <div className="program-meta">
                    <span><Icon name="clock" size={13} />{tg("duration")}</span>
                    <span><Icon name="graduation-cap" size={13} />{tg("format")}</span>
                  </div>
                  <a href="#programs" onClick={(e) => {e.preventDefault();navigate("programs");}} style={{ color: "var(--center-blue)", fontWeight: 600 }}>
                    <Icon name="arrow-right" size={16} />
                  </a>
                </div>
              </div>
            )}
          </div>
          <div style={{ textAlign: "center", marginTop: 48 }}>
            <a href="#programs" onClick={(e) => {e.preventDefault();navigate("programs");}} className="btn btn-dark btn-lg">
              {tg("cta")} <Icon name="arrow-right" size={16} />
            </a>
          </div>
        </div>
      </section>

      {/* DIGITAL / LMS — third pillar */}
      <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>
              <a href="#enterprise" onClick={(e) => { e.preventDefault(); navigate("enterprise"); }} className="btn btn-primary btn-lg" style={{ marginTop: 32 }}>
                {t(lang, "digital.cta")} <Icon name="arrow-right" size={16} />
              </a>
            </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>

      {/* STATS */}
      <section className="stats">
        <div className="container">
          <div className="section-head" style={{ maxWidth: 760 }}>
            <h2 className="h-display-2" style={{ color: "white" }}>{ts("title")}</h2>
            <p style={{ color: "rgba(255,255,255,0.85)", fontSize: 18, lineHeight: 1.55 }}>{ts("sub")}</p>
          </div>
          <div className="stats-grid">
            {stats.map((s, i) =>
            <div key={i} className="stat">
                <div className="stat-num">{s.num}</div>
                <div className="stat-label">{s.label}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* TESTIMONIAL */}
      <section>
        <div className="container">
          <div className="section-head" style={{ textAlign: "center", margin: "0 auto 56px", alignItems: "center" }}>
            <span className="eyebrow eyebrow-blue">{tt("eyebrow")}</span>
          </div>
          <div className="testimonial-card" style={{ maxWidth: 880, margin: "0 auto" }}>
            <span className="quote-mark">"</span>
            <blockquote>{tt("quote")}</blockquote>
            <div className="testimonial-author">
              <div className="testimonial-avatar">DR</div>
              <div>
                <div className="testimonial-name">{tt("author")}</div>
                <div className="testimonial-role">{tt("role")}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

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

};

window.HomePage = HomePage;