// Shared header + footer, brand mark

function BrandMark() {
  return (
    <a href="index.html" className="brand">
      <div>
        <div className="mark">
          AMARENC<span className="sun">●</span>
        </div>
        <div className="tagline">Invest in RE.Generation</div>
      </div>
    </a>
  );
}

function SiteHeader({ active, lang, setLang }) {
  const items = [
    { key: "groupe", href: "#" },
    { key: "solutions", href: "#" },
    { key: "projets", href: "index.html" },
    { key: "engagements", href: "#" },
    { key: "talents", href: "#" },
    { key: "actus", href: "#" },
    { key: "contact", href: "#" },
  ];
  return (
    <header className="site-header">
      <BrandMark />
      <nav className="site-nav">
        {items.map(it => (
          <a key={it.key} href={it.href} className={active === it.key ? "active" : ""}>
            {t(lang, `nav.${it.key}`)}
          </a>
        ))}
      </nav>
      <div className="header-right">
        <button className="icon-btn" aria-label="Search">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
        </button>
        <div className="lang-toggle">
          <button className={lang === "fr" ? "active" : ""} onClick={() => setLang("fr")}>FR</button>
          <span className="sep">|</span>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
      </div>
    </header>
  );
}

function SiteFooter({ lang }) {
  const cols = [
    { title: t(lang, "footer.col1"), items: ["Histoire", "Gouvernance", "Chiffres-clés", "Presse"] },
    { title: t(lang, "footer.col2"), items: ["Agrivoltaïsme", "Toitures", "Stockage", "Autoconsommation"] },
    { title: t(lang, "footer.col3"), items: ["Biodiversité", "Territoires", "Fondation", "RSE"] },
    { title: t(lang, "footer.col4"), items: ["Rapports", "Publications", "FAQ", "Contact"] },
  ];
  return (
    <footer className="site-footer">
      <div style={{ maxWidth: 1400, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 48 }}>
        <div>
          <div style={{ color: "white", marginBottom: 20 }}>
            <div style={{ fontWeight: 700, fontSize: 22, letterSpacing: "0.02em" }}>
              AMARENC<span style={{ color: "var(--am-orange)" }}>●</span>
            </div>
            <div style={{ fontSize: 10, letterSpacing: "0.04em", marginTop: 4, color: "rgba(255,255,255,0.6)" }}>Invest in RE.Generation</div>
          </div>
          <p style={{ fontSize: 13, lineHeight: 1.6, color: "rgba(255,255,255,0.6)", maxWidth: 280 }}>
            {lang === "fr"
              ? "Producteur indépendant d'énergies renouvelables. Nous concevons, finançons, construisons et exploitons des centrales solaires au service des territoires."
              : "Independent renewable energy producer. We design, finance, build and operate solar plants at the service of local territories."}
          </p>
          <div style={{ marginTop: 24, fontSize: 12, color: "rgba(255,255,255,0.5)" }}>{t(lang, "footer.addr")}</div>
        </div>
        {cols.map(c => (
          <div key={c.title}>
            <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--am-orange)", fontWeight: 600, marginBottom: 18 }}>{c.title}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {c.items.map(i => <li key={i}><a href="#" style={{ color: "rgba(255,255,255,0.75)", fontSize: 13.5 }}>{i}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1400, margin: "48px auto 0", paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.1)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "rgba(255,255,255,0.45)" }}>
        <div>{t(lang, "footer.rights")}</div>
        <div style={{ display: "flex", gap: 24 }}>
          <a href="#">Mentions légales</a>
          <a href="#">Confidentialité</a>
          <a href="#">Cookies</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { BrandMark, SiteHeader, SiteFooter });