/* ============================================================
   footer.jsx — Shared site footer (used by / + /analysis)
   ============================================================ */

function Footer() {
  return (
    <footer style={{
      background: "#070707",
      borderTop: "1px solid rgba(255,250,238,0.10)",
      paddingTop: 36,
      paddingBottom: 18,
      color: window.CREAM,
    }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr 1.2fr",
          gap: 56,
          alignItems: "stretch",
        }} className="footer-grid">
          {/* Brand */}
          <div className="f-brand">
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <img src={(window.__resources && window.__resources.logoHorizontal) || "assets/logo-horizontal-cream.svg"} alt="The Long Investor"
                style={{ display: "block", height: 24, width: "auto" }}/>
            </div>
            <p style={{
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              color: window.CREAM_DIM,
              fontSize: 15.5, lineHeight: 1.55,
              maxWidth: "32ch",
              marginBottom: 24,
            }}>
              Disciplined research for retail investors who want to outgrow the noise.
            </p>
            <a href="/join?src=footer" target="_blank" rel="noopener"
              className="btn btn-gold" style={{ height: 38, padding: "0 18px", fontSize: 11.5 }}>
              Join on Patreon →
            </a>
          </div>

          {/* Navigate */}
          <div className="f-nav">
            <FCol title="NAVIGATE" items={[
              ["Analysis", "/analysis"],
              ["Research", "/research"],
              ["Community", "/community"],
              ["Education", "/education"],
              ["Shop", "https://thelonginvestortli.store/"],
              ["About", "/about"],
            ]}/>
          </div>

          {/* Legal */}
          <div className="f-legal">
            <FCol title="LEGAL" items={[
              ["Privacy Policy", "/privacy-policy"],
              ["Terms of Service", "/terms-of-service"],
              ["Cookie Policy", "/cookie-policy"],
              ["Risk Disclosure", "/risk-disclosure"],
              ["Disclaimer", "/disclaimer"],
            ]}/>
          </div>

          {/* Contact */}
          <div className="f-contact" style={{ display: "flex", flexDirection: "column" }}>
            <a href="/#contact" className="footer-contact-cta f-form"
              style={{
                display: "flex",
                flexDirection: "column",
                background: "rgba(255,250,238,0.025)",
                border: "1px solid rgba(255,250,238,0.10)",
                borderRadius: 6,
                padding: "14px 16px 14px",
                textDecoration: "none",
                transition: "background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out)",
                position: "relative",
                overflow: "hidden",
              }}
              aria-label="Open contact form"
              onMouseEnter={(e) => {
                e.currentTarget.style.background = "rgba(255,250,238,0.05)";
                e.currentTarget.style.borderColor = "rgba(255,250,238,0.22)";
                e.currentTarget.style.transform = "translateY(-2px)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = "rgba(255,250,238,0.025)";
                e.currentTarget.style.borderColor = "rgba(255,250,238,0.10)";
                e.currentTarget.style.transform = "none";
              }}
            >
              {/* Eyebrow — matches Navigate / Legal column titles */}
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                marginBottom: 12,
              }}>
                <span style={{ width: 2, height: "0.95em", background: window.GOLD, display: "inline-block" }}/>
                <span style={{
                  fontWeight: 700,
                  fontSize: 11.5,
                  letterSpacing: "0.28em",
                  color: window.CREAM,
                }}>CONTACT</span>
              </div>

              {/* Mini "form" preview — three placeholder rows */}
              <div aria-hidden="true" style={{
                display: "flex", flexDirection: "column", gap: 7,
                marginBottom: 12,
              }}>
                {["Name", "Email", "Message"].map((label, i) => (
                  <div key={label} style={{ display: "flex", flexDirection: "column", gap: 3 }}>
                    <div style={{
                      fontSize: 8, letterSpacing: "0.22em",
                      textTransform: "uppercase",
                      color: window.CREAM_FAINT, fontWeight: 600,
                    }}>{label}</div>
                    <div style={{
                      height: 1, background: "rgba(255,250,238,0.18)",
                    }}/>
                    {label === "Message" && (
                      <div style={{ height: 1, background: "rgba(255,250,238,0.12)", width: "75%" }}/>
                    )}
                  </div>
                ))}
              </div>

              {/* "Send message →" — matches the real contact-form submit */}
              <div style={{
                marginTop: "auto",
                alignSelf: "flex-start",
                display: "inline-flex", alignItems: "center",
                gap: 8,
                color: window.CREAM,
                fontFamily: "var(--font-text)",
                fontWeight: 700,
                fontSize: 10.5,
                letterSpacing: "0.2em",
                textTransform: "uppercase",
                borderBottom: "1px solid rgba(255,250,238,0.22)",
                paddingBottom: 4,
              }}>
                Send message
                <span aria-hidden="true" style={{
                  color: window.GOLD,
                  fontSize: 13,
                  lineHeight: 1,
                  fontWeight: 400,
                }}>→</span>
              </div>
            </a>

            <div className="f-follow" style={{ marginTop: "auto", paddingTop: 18 }}>
              <div style={{
                fontSize: 10, letterSpacing: "0.22em",
                textTransform: "uppercase", color: window.CREAM_FAINT,
                fontWeight: 600, marginBottom: 8,
              }}>Follow</div>
              <div style={{ display: "flex", gap: 8 }}>
                {[
                  { l: "X on X",         href: "https://x.com/TheLongInvest",         icon: (
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zM17.083 19.77h1.833L7.084 4.126H5.117z"/>
                    </svg>
                  ) },
                  { l: "Instagram",      href: "https://instagram.com/thelonginvestor", icon: (
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" aria-hidden="true">
                      <rect x="3" y="3" width="18" height="18" rx="5"/>
                      <circle cx="12" cy="12" r="4"/>
                      <circle cx="17.4" cy="6.6" r="1" fill="currentColor" stroke="none"/>
                    </svg>
                  ) },
                  { l: "YouTube",        href: "https://youtube.com/@thelonginvestor",  icon: (
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                      <path d="M23.5 6.5a3 3 0 0 0-2.1-2.1C19.5 4 12 4 12 4s-7.5 0-9.4.4A3 3 0 0 0 .5 6.5 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.5 3 3 0 0 0 2.1 2.1C4.5 20 12 20 12 20s7.5 0 9.4-.4a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.5zM9.6 15.5v-7L15.8 12z"/>
                    </svg>
                  ) },
                  { l: "Patreon",        href: "/join?src=footer_social",   icon: (
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                      <circle cx="15.4" cy="9.2" r="6.2"/>
                      <rect x="2.2" y="3" width="3.8" height="18"/>
                    </svg>
                  ) },
                ].map(s => (
                  <a key={s.l} href={s.href} target="_blank" rel="noopener" aria-label={s.l}
                    style={{
                      width: 30, height: 30,
                      border: "1px solid rgba(255,250,238,0.18)",
                      borderRadius: 4,
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      color: window.CREAM_DIM,
                      transition: "color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 150ms var(--ease-out)",
                    }}
                    onMouseEnter={(e) => { e.currentTarget.style.color = window.GOLD; e.currentTarget.style.borderColor = window.GOLD; e.currentTarget.style.transform = "translateY(-2px)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.color = window.CREAM_DIM; e.currentTarget.style.borderColor = "rgba(255,250,238,0.18)"; e.currentTarget.style.transform = "none"; }}
                  >{s.icon}</a>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 32,
          paddingTop: 16,
          borderTop: "1px solid rgba(255,250,238,0.08)",
          display: "flex", justifyContent: "space-between", gap: 24,
          flexWrap: "wrap",
        }}>
          <div className="legal">
            © 2026 The Long Investor  ·  <a href="/privacy-policy" style={{ borderBottom: "1px solid transparent" }}>Privacy</a>  ·  <a href="/terms-of-service" style={{ borderBottom: "1px solid transparent" }}>Terms</a>
          </div>
          <div className="legal" style={{ color: window.CREAM_FAINT }}>
            Not financial advice — educational content only.
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
        }
        @media (max-width: 560px) {
          .footer-grid { grid-template-columns: 1fr !important; }
          /* Mobile only: lift the contact form up — directly under the
             "Join on Patreon" button and above the Navigate column.
             display:contents promotes the form + follow block into the
             single-column grid so they can be reordered independently. */
          .footer-grid .f-contact { display: contents !important; }
          .footer-grid .f-brand  { order: 1; }
          .footer-grid .f-form   { order: 2; }
          .footer-grid .f-nav    { order: 3; }
          .footer-grid .f-legal  { order: 4; }
          .footer-grid .f-follow { order: 5; margin-top: 0 !important; }
        }
      `}</style>
    </footer>
  );
}

function FCol({ title, items }) {
  return (
    <div>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        marginBottom: 18,
      }}>
        <span style={{ width: 2, height: "0.95em", background: window.GOLD, display: "inline-block" }}/>
        <span style={{
          fontWeight: 700, fontSize: 11.5,
          letterSpacing: "0.28em",
        }}>{title}</span>
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 11 }}>
        {items.map(([label, href]) => (
          <li key={label}>
            <a href={href} style={{
              color: window.CREAM_DIM, fontSize: 13.5,
              transition: "color 150ms var(--ease-out)",
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = window.GOLD}
            onMouseLeave={(e) => e.currentTarget.style.color = window.CREAM_DIM}
            >{label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Footer = Footer;
window.FCol = FCol;