// ATOM Center — Shared Components (React + Babel)
const { useState, useEffect, useRef, useMemo } = React;

const t = (lang, path) => {
  const parts = path.split(".");
  let cur = window.I18N[lang];
  for (const p of parts) { cur = cur?.[p]; if (cur == null) return path; }
  return cur;
};

// Lucide icon helper (uses inline SVG paths to avoid CDN dependency)
const Icon = ({ name, size = 20, ...props }) => {
  const paths = {
    "arrow-right": <><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>,
    "arrow-up-right": <><path d="M7 17 17 7"/><path d="M7 7h10v10"/></>,
    "download": <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>,
    "check": <><polyline points="20 6 9 17 4 12"/></>,
    "menu": <><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></>,
    "x": <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    "map-pin": <><path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/></>,
    "phone": <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></>,
    "mail": <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,
    "globe": <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
    "message-circle": <><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></>,
    "badge-check": <><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></>,
    "award": <><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></>,
    "graduation-cap": <><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></>,
    "cloud": <><path d="M17.5 19a4.5 4.5 0 1 0-1.41-8.775 5.5 5.5 0 0 0-10.836 1.668A4 4 0 0 0 6 19h11.5z"/></>,
    "code-2": <><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></>,
    "users-round": <><path d="M18 21a8 8 0 0 0-16 0"/><circle cx="10" cy="8" r="5"/><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/></>,
    "rocket": <><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></>,
    "chevron-right": <><polyline points="9 18 15 12 9 6"/></>,
    "chevron-down": <><polyline points="6 9 12 15 18 9"/></>,
    "linkedin": <><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></>,
    "calendar": <><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
    "clock": <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    "send": <><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></>,
    "monitor": <><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></>,
    "library": <><path d="M16 6l4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/></>,
    "settings": <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    "layers": <><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" {...props}>
      {paths[name]}
    </svg>
  );
};

// ---------------- NAVBAR ----------------
const Navbar = ({ page, lang, setLang, navigate, density }) => {
  const [mobileOpen, setMobileOpen] = useState(false);
  const tr = (k) => t(lang, "nav." + k);
  const links = [
    { id: "home", label: tr("home") },
    { id: "about", label: tr("about") },
    { id: "programs", label: tr("programs") },
    { id: "enterprise", label: tr("enterprise") },
    { id: "blog", label: tr("blog") },
    { id: "contact", label: tr("contact") },
  ];
  return (
    <>
      <nav className="nav">
        <div className="container nav-inner">
          <a href="#home" onClick={(e) => { e.preventDefault(); navigate("home"); }} className="nav-logo">
            <img src="assets/logos/atom-center.png" alt="ATOM Center" />
            <div className="nav-logo-text">ATOM<small>CENTER</small></div>
          </a>
          <div className="nav-links">
            {links.map(l => (
              <a key={l.id} href={`#${l.id}`}
                 onClick={(e) => { e.preventDefault(); navigate(l.id); }}
                 className={"nav-link" + (page === l.id ? " active" : "")}>{l.label}</a>
            ))}
          </div>
          <div className="nav-actions">
            <div className="lang-toggle" role="group">
              <button className={lang === "fr" ? "on" : ""} onClick={() => setLang("fr")}>FR</button>
              <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
            </div>
            <a href="#contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }}
               className="btn btn-primary btn-sm" style={{ display: "inline-flex" }}>
              <Icon name="download" size={14} /> {tr("cta")}
            </a>
            <button className="nav-burger" onClick={() => setMobileOpen(true)} aria-label={tr("menu")}>
              <Icon name="menu" />
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile drawer — rendered as sibling of <nav> so it escapes the
          containing block created by .nav's backdrop-filter (which would
          otherwise constrain position:fixed children to the navbar height) */}
      <div className={"mobile-menu" + (mobileOpen ? " open" : "")} onClick={() => setMobileOpen(false)}>
        <div className="mobile-menu-panel" onClick={(e) => e.stopPropagation()}>
          <div className="mobile-menu-head">
            <div className="nav-logo-text">ATOM<small>CENTER</small></div>
            <button className="nav-burger" onClick={() => setMobileOpen(false)} style={{display:"flex"}}><Icon name="x" /></button>
          </div>
          <div className="mobile-menu-links">
            {links.map(l => (
              <a key={l.id} href={`#${l.id}`}
                 onClick={(e) => { e.preventDefault(); navigate(l.id); setMobileOpen(false); }}
                 className={page === l.id ? "active" : ""}>{l.label}</a>
            ))}
          </div>
          <div className="mobile-menu-lang">
            <span className="mobile-menu-lang-label">{tr("menu") === "Menu" ? "Langue" : "Language"}</span>
            <div className="lang-toggle" role="group">
              <button className={lang === "fr" ? "on" : ""} onClick={() => setLang("fr")}>FR</button>
              <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
            </div>
          </div>
          <a href="#contact" onClick={(e) => { e.preventDefault(); navigate("contact"); setMobileOpen(false); }}
             className="btn btn-primary btn-lg">
            <Icon name="download" size={14} /> {tr("cta")}
          </a>
        </div>
      </div>
    </>
  );
};

// ---------------- FOOTER ----------------
const Footer = ({ lang, navigate }) => {
  const tr = (k) => t(lang, "footer." + k);
  const ecoBrands = [
    { id: "code", color: "#6848A8", label: "C" },
    { id: "campus", color: "#F87808", label: "C" },
    { id: "leaders", color: "#980818", label: "L" },
    { id: "pioneer", color: "#284838", label: "P" },
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <img src="assets/logos/atom-center.png" alt="ATOM Center" style={{ height: 56, filter: "invert(1)" }} />
            <div className="footer-brand-text">ATOM<small>CENTER</small></div>
            <p>{tr("tagline")}</p>
          </div>
          <div>
            <h5>{tr("navigation")}</h5>
            <ul>
              <li><a href="#home" onClick={(e)=>{e.preventDefault();navigate("home");}}>{t(lang,"nav.home")}</a></li>
              <li><a href="#about" onClick={(e)=>{e.preventDefault();navigate("about");}}>{t(lang,"nav.about")}</a></li>
              <li><a href="#programs" onClick={(e)=>{e.preventDefault();navigate("programs");}}>{t(lang,"nav.programs")}</a></li>
              <li><a href="#enterprise" onClick={(e)=>{e.preventDefault();navigate("enterprise");}}>{t(lang,"nav.enterprise")}</a></li>
              <li><a href="#blog" onClick={(e)=>{e.preventDefault();navigate("blog");}}>{t(lang,"nav.blog")}</a></li>
              <li><a href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact");}}>{t(lang,"nav.contact")}</a></li>
            </ul>
          </div>
          <div>
            <h5>{tr("ecosystem")}</h5>
            <ul>
              <li><a href="https://www.atom-code.com/" target="_blank" rel="noreferrer">ATOM Code ↗</a></li>
              <li><a href="https://www.atom-campus.com/" target="_blank" rel="noreferrer">ATOM Campus ↗</a></li>
              <li><a href="https://www.atom-leaders.com/" target="_blank" rel="noreferrer">ATOM Leaders ↗</a></li>
              <li><a href="https://www.atom-pioneer.com/" target="_blank" rel="noreferrer">ATOM Pioneer ↗</a></li>
            </ul>
          </div>
          <div>
            <h5>{tr("contact")}</h5>
            <div className="footer-contact-line"><Icon name="map-pin" size={16}/><span style={{whiteSpace:"pre-line"}}>{tr("address")}</span></div>
            <div className="footer-contact-line"><Icon name="phone" size={16}/><span>+242 05 684 94 24</span></div>
            <div className="footer-contact-line"><Icon name="mail" size={16}/><span>contact@atom-center.com</span></div>
          </div>
        </div>
        <div className="footer-bottom">
          <small>{tr("legal")}</small>
          <div className="footer-eco-strip">
            <span style={{ fontSize: 11, color: "var(--neutral-500)", marginRight: 8, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>ATOM Group</span>
            {ecoBrands.map(b => (
              <a key={b.id} href={`https://www.atom-${b.id}.com/`} target="_blank" rel="noreferrer"
                 style={{ background: b.color }} title={`ATOM ${b.id}`}>{b.label}</a>
            ))}
          </div>
          <div style={{ display: "flex", gap: 16 }}>
            <small><a href="#" onClick={(e)=>{e.preventDefault(); window.dispatchEvent(new CustomEvent("atom:open-cookie-prefs"));}} style={{ color: "var(--neutral-400)" }}>{tr("privacy")}</a></small>
            <small><a href="#" onClick={(e)=>e.preventDefault()} style={{ color: "var(--neutral-400)" }}>{tr("terms")}</a></small>
          </div>
        </div>
      </div>
    </footer>
  );
};

// ---------------- ECOSYSTEM SECTION (shared) ----------------
const EcosystemSection = ({ lang }) => {
  const tr = (k) => t(lang, "ecosystem." + k);
  const items = [
    { id: "code", color: "#6848A8", url: "https://www.atom-code.com/", name: tr("codeName"), desc: tr("codeDesc"), tag: "Software · Cloud · Cyber" },
    { id: "campus", color: "#F87808", url: "https://www.atom-campus.com/", name: tr("campusName"), desc: tr("campusDesc"), tag: "Bootcamps · Talents" },
    { id: "leaders", color: "#980818", url: "https://www.atom-leaders.com/", name: tr("leadersName"), desc: tr("leadersDesc"), tag: "Coaching · Executives" },
    { id: "pioneer", color: "#284838", url: "https://www.atom-pioneer.com/", name: tr("pioneerName"), desc: tr("pioneerDesc"), tag: "Venture · Studio" },
  ];
  return (
    <section className="ecosystem">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow" style={{ color: "rgba(255,255,255,0.6)" }}>{tr("eyebrow")}</span>
          <h2 className="h-display-2">{tr("title")}</h2>
          <p style={{ color: "var(--neutral-300)", fontSize: 18, lineHeight: 1.55 }}>{tr("sub")}</p>
        </div>
        <div className="ecosystem-grid">
          {items.map(it => (
            <a key={it.id} href={it.url} target="_blank" rel="noreferrer"
               className="eco-card" style={{ "--accent": it.color }}>
              <div className="eco-card-head">
                <div>
                  <div className="eco-name">ATOM <span>{it.name}</span></div>
                  <div className="eco-card-footer">{it.tag}</div>
                </div>
                <div className="eco-arrow"><Icon name="arrow-up-right" size={14} /></div>
              </div>
              <p>{it.desc}</p>
              <div style={{ fontSize: 12, fontFamily: "var(--font-display)", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700, color: "white", display: "inline-flex", alignItems: "center", gap: 6, marginTop: "auto" }}>
                {tr("visit")} <Icon name="chevron-right" size={12} />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ---------------- CTA SECTION (shared) ----------------
const CtaSection = ({ lang, navigate }) => {
  const tr = (k) => t(lang, "cta." + k);
  return (
    <section className="cta-section">
      <div className="container cta-inner">
        <div>
          <h2 className="h-display-2">{tr("title")}</h2>
          <p style={{ fontSize: 18, lineHeight: 1.55 }}>{tr("sub")}</p>
        </div>
        <div className="cta-actions">
          <a className="btn btn-primary btn-lg" href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact");}}>
            {tr("btnPrimary")} <Icon name="arrow-right" size={16}/>
          </a>
          <a className="btn btn-light btn-lg" href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact");}}>
            <Icon name="download" size={14}/> {tr("btnSecondary")}
          </a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Icon, Navbar, Footer, EcosystemSection, CtaSection, t });