/* global React */
// Shared site footer. Used by index.html and 10x.html.
const FOOTER_YOUTUBE_URL = "https://www.youtube.com/@TheDailyTraderPierre";

function SiteFooter() {
  return (
    <footer style={footStyles.foot}>
      <div style={footStyles.inner}>
        <div style={footStyles.grid}>
          <div>
            <a href="/" style={footStyles.brand}>
              <svg width="48" height="32" viewBox="0 0 60 40" style={{ display: "block" }}>
                <text x="30" y="28" textAnchor="middle"
                  fontFamily='"Inter", -apple-system, sans-serif' fontSize="26" fontWeight="900"
                  fontStyle="italic" fill="#0a2540" letterSpacing="-0.04em">TAI</text>
                <line x1="8" y1="34" x2="52" y2="31"
                  stroke="#5b8db8" strokeWidth="2.5" strokeLinecap="round" />
              </svg>
              <span style={footStyles.name}>The Trend-Aware Investor</span>
            </a>
            <div style={footStyles.tagline}>Don't try to predict. Follow.</div>
          </div>
          <div style={footStyles.cols}>
            <div style={footStyles.col}>
              <div style={footStyles.colHead}>Content</div>
              <a href={FOOTER_YOUTUBE_URL} target="_blank" rel="noopener noreferrer" style={footStyles.link}>YouTube channel</a>
              <a href={FOOTER_YOUTUBE_URL + "/videos"} target="_blank" rel="noopener noreferrer" style={footStyles.link}>Latest videos</a>
              <a href={FOOTER_YOUTUBE_URL + "/playlists"} target="_blank" rel="noopener noreferrer" style={footStyles.link}>Playlists</a>
            </div>
            <div style={footStyles.col}>
              <div style={footStyles.colHead}>Site</div>
              <a href="/10x" style={footStyles.link}>The 10x Index</a>
              <a href="/#memberships" style={footStyles.link}>Memberships</a>
              <a href={FOOTER_YOUTUBE_URL + "/membership"} target="_blank" rel="noopener noreferrer" style={footStyles.link}>Join</a>
              <a href="/privacy" style={footStyles.link}>Privacy policy</a>
              <a href="/terms" style={footStyles.link}>Terms of service</a>
            </div>
          </div>
        </div>
        <div style={footStyles.bottom}>
          <span>© {new Date().getFullYear()} The Trend-Aware Investor. Educational content — not financial advice.</span>
          <span>Built with care.</span>
        </div>
      </div>
    </footer>
  );
}

const footStyles = {
  foot: { padding: "56px 0 32px", background: "#fafbfc", borderTop: "1px solid #e3e8ee" },
  inner: { maxWidth: 1200, margin: "0 auto", padding: "0 32px" },
  grid: {
    display: "grid",
    gridTemplateColumns: "1.5fr 1fr",
    gap: 64,
    paddingBottom: 32,
    borderBottom: "1px solid #e3e8ee",
  },
  brand: {
    display: "flex", alignItems: "center", gap: 10,
    textDecoration: "none", color: "#0a2540",
  },
  name: { fontSize: 15, fontWeight: 700, letterSpacing: "-0.01em" },
  tagline: {
    fontSize: 14, color: "#697386",
    marginTop: 12, fontStyle: "italic",
  },
  cols: {
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: 32,
  },
  col: { display: "flex", flexDirection: "column", gap: 10 },
  colHead: {
    fontSize: 11, fontWeight: 700, color: "#0a2540",
    letterSpacing: "0.08em", textTransform: "uppercase",
    marginBottom: 4,
  },
  link: {
    fontSize: 13, color: "#425466",
    textDecoration: "none",
  },
  bottom: {
    display: "flex",
    justifyContent: "space-between",
    fontSize: 12, color: "#8898aa",
    paddingTop: 24,
    flexWrap: "wrap",
    gap: 12,
  },
};

window.SiteFooter = SiteFooter;