/* Header + Footer chrome for ArchDaily Business. */

function Header({ route, onNav }) {
  const { Button, IconButton } = window.ArchDailyDesignSystem_788ad7;
  const links = [
    { id: "why", label: "Why ArchDaily" },
    { id: "audience", label: "Our Audience" },
    { id: "custom", label: "Curated Collaborations" },
    { id: "standard", label: "Standard Solutions" },
    { id: "awards", label: "Awards" },
    { id: "live", label: "ArchDaily LIVE" },
    { id: "mediakit", label: "Media Kit" },
  ];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50, background: "rgba(244,244,245,0.88)",
      backdropFilter: "saturate(140%) blur(8px)", borderBottom: "var(--hairline)",
    }}>
      <Container style={{ display: "flex", alignItems: "center", height: 64, gap: "var(--space-3)" }}>
        <a href={routeHref("home")} onClick={(e) => { e.preventDefault(); onNav("home"); }} style={{ display: "flex", alignItems: "center", flex: "none" }}>
          <img src="../../assets/logo/archdaily-logo-legacy.png" alt="ArchDaily" style={{ height: 32 }} />
        </a>
        <nav style={{ display: "flex", gap: "var(--space-4)", marginLeft: "var(--space-4)" }}>
          {links.map((l) => {
            const on = (route === l.id || (l.id === "custom" && route === "case"));
            return (
              <a key={l.id} href={routeHref(l.id)} onClick={(e) => { e.preventDefault(); onNav(l.id); }}
                style={{
                  fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)", textDecoration: "none", whiteSpace: "nowrap",
                  color: on ? "var(--ad-legacy)" : "var(--text-secondary)",
                  paddingBottom: 2, borderBottom: on ? "2px solid var(--ad-electric)" : "2px solid transparent",
                }}>{l.label}</a>
            );
          })}
        </nav>
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: "var(--space-3)", flex: "none" }}>
          <Button variant="primary" size="sm" href={routeHref("contact")} style={{ whiteSpace: "nowrap" }} onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Partner with us</Button>
        </div>
      </Container>
    </header>
  );
}

function Footer({ onNav }) {
  const socials = [
    { n: "instagram", label: "Instagram", href: "https://www.instagram.com/archdaily/" },
    { n: "linkedin", label: "LinkedIn", href: "https://www.linkedin.com/company/archdaily/" },
  ];
  const after = [
    { n: "youtube", label: "YouTube", href: "https://www.youtube.com/user/archdaily" },
    { n: "facebook", label: "Facebook", href: "https://www.facebook.com/ArchDaily/" },
  ];
  return (
    <footer style={{ background: "var(--ad-deep)", color: "var(--ad-grey-100)" }}>
      <Container style={{ padding: "var(--space-8) var(--space-6)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "var(--space-7)", flexWrap: "wrap" }}>
          <div style={{ maxWidth: 320 }}>
            <img src="../../assets/logo/archdaily-logo-lightgrey.png" alt="ArchDaily" style={{ height: 30 }} />
            <p style={{ marginTop: "var(--space-4)", color: "var(--ad-grey-100)", fontSize: "var(--fs-sm)" }}>
              The global reference for architecture.
            </p>
            <div style={{ display: "flex", gap: "var(--space-3)", marginTop: "var(--space-5)" }}>
              {socials.map((s) => (
                <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label}
                  style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 38, height: 38, borderRadius: "var(--radius-sm)", border: "1px solid rgba(244,244,245,0.3)", color: "var(--ad-grey-100)" }}>
                  <Icon n={s.n} size={18} />
                </a>
              ))}
              <a href="https://www.tiktok.com/@archdaily_" target="_blank" rel="noopener noreferrer" aria-label="TikTok"
                style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 38, height: 38, borderRadius: "var(--radius-sm)", border: "1px solid rgba(244,244,245,0.3)", color: "var(--ad-grey-100)" }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" /></svg>
              </a>
              {after.map((s) => (
                <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label}
                  style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 38, height: 38, borderRadius: "var(--radius-sm)", border: "1px solid rgba(244,244,245,0.3)", color: "var(--ad-grey-100)" }}>
                  <Icon n={s.n} size={18} />
                </a>
              ))}
              <a href="https://www.pinterest.com/archdaily/" target="_blank" rel="noopener noreferrer" aria-label="Pinterest"
                style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 38, height: 38, borderRadius: "var(--radius-sm)", border: "1px solid rgba(244,244,245,0.3)", color: "var(--ad-grey-100)" }}>
                <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345c-.091.378-.293 1.193-.333 1.36-.052.22-.174.266-.401.16-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.608 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12C24 5.372 18.627 0 12 0" /></svg>
              </a>
            </div>
          </div>
          <address style={{ fontStyle: "normal", fontSize: "var(--fs-sm)", lineHeight: "var(--lh-relaxed)", color: "var(--ad-grey-100)" }}>
            <div style={{ color: "var(--ad-grey-100)", fontWeight: "var(--fw-semibold)" }}>DAAily platforms AG</div>
            Falkenstrasse 11<br />
            CH 8008 Zurich<br />
            Switzerland<br />
            <span style={{ display: "inline-block", marginTop: 8 }}>T +41-(0)44-297 20 20</span>
          </address>
        </div>
        <div style={{ marginTop: "var(--space-7)", paddingTop: "var(--space-4)", fontSize: "var(--fs-xs)", color: "rgba(244,244,245,0.55)" }}>
          © 2026 ArchDaily
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Header, Footer });