/* global React */

const FOOTER_COLS = [
  { h: "Company", links: ["Story", "Directors", "Values", "Press", "CSR"] },
  { h: "Services", links: ["Election Campaigns", "Digital Marketing", "Social Media", "Ground Outreach", "Research & Strategy"] },
  { h: "Contact", links: ["Pune, Maharashtra", "92708 42423", "88889 99433", "pravahsolution@gmail.com"] },
];

const Footer = () => (
  <footer style={{ background: "var(--ink)", color: "var(--cream)", padding: "96px 32px 32px" }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
      <div className="grid-footer" style={{
        display: "grid", gridTemplateColumns: "1.4fr repeat(4, 1fr)", gap: 48, marginBottom: 64
      }}>
        {/* Brand column */}
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20 }}>
            <img
              src="./assets/logo-pravah-mark-transparent.png"
              alt="Pravah Solution logo mark"
              style={{ height: 52, width: "auto", display: "block" }}
            />
            <span style={{
              fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28,
              letterSpacing: "-0.03em", color: "var(--cream)"
            }}>
              Pravah Solution
            </span>
          </div>
          <p style={{
            fontSize: 14, color: "rgba(244,239,224,0.65)", lineHeight: 1.6,
            margin: "0 0 24px", maxWidth: 320
          }}>
            Pravah Solution.<br/>
            Political & Election Consultancy.<br/>
            Digital Marketing.<br/>
            Pune, Maharashtra, India.
          </p>
          <div style={{ display: "flex", gap: 12 }}>
            <a key="instagram" href="https://www.instagram.com/pravah_solution" target="_blank" rel="noopener noreferrer" style={{
                width: 36, height: 36, display: "inline-flex",
                alignItems: "center", justifyContent: "center",
                border: "1px solid rgba(244,239,224,0.25)", borderRadius: 2,
                color: "var(--cream)", textDecoration: "none",
                transition: "border-color 200ms var(--ease-out)"
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--gold)"}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = "rgba(244,239,224,0.25)"}
              >
                <Icon name="instagram" size={18}/>
              </a>
            <a key="linkedin" href="https://www.linkedin.com/in/pravah-solution-55209234a/" target="_blank" rel="noopener noreferrer" style={{
                width: 36, height: 36, display: "inline-flex",
                alignItems: "center", justifyContent: "center",
                border: "1px solid rgba(244,239,224,0.25)", borderRadius: 2,
                color: "var(--cream)", textDecoration: "none",
                transition: "border-color 200ms var(--ease-out)"
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--gold)"}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = "rgba(244,239,224,0.25)"}
              >
                <Icon name="linkedin" size={18}/>
              </a>
            <a key="mail" href="mailto:pravahsolution@gmail.com" style={{
                width: 36, height: 36, display: "inline-flex",
                alignItems: "center", justifyContent: "center",
                border: "1px solid rgba(244,239,224,0.25)", borderRadius: 2,
                color: "var(--cream)", textDecoration: "none",
                transition: "border-color 200ms var(--ease-out)"
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--gold)"}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = "rgba(244,239,224,0.25)"}
              >
                <Icon name="mail" size={18}/>
              </a>
          </div>
        </div>

        {/* Nav columns */}
        {FOOTER_COLS.map(c => (
          <div key={c.h}>
            <div style={{
              fontSize: 12, fontWeight: 600, letterSpacing: "0.12em",
              textTransform: "uppercase", color: "var(--gold)", marginBottom: 16
            }}>
              {c.h}
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {c.links.map(l => (
                <li key={l}>
                  <a href="#" style={{
                    color: "rgba(244,239,224,0.85)", textDecoration: "none", fontSize: 14,
                    transition: "color 200ms var(--ease-out)"
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.color = "var(--cream)"}
                  onMouseLeave={(e) => e.currentTarget.style.color = "rgba(244,239,224,0.85)"}
                  >
                    {l}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Bottom bar */}
      <div style={{
        paddingTop: 24, borderTop: "1px solid rgba(244,239,224,0.18)",
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
        fontSize: 12, color: "rgba(244,239,224,0.55)",
        fontFamily: "var(--font-mono)", letterSpacing: "0.04em"
      }}>
        <span>© 2026 PRAVAH SOLUTION</span>
        <span>PRIVACY · TERMS · CSR</span>
      </div>
    </div>
  </footer>
);

window.Footer = Footer;