// Partners / fund houses we work with
const PARTNERS = [
  "HDFC", "ICICI Pru", "Axis MF", "SBI MF", "Nippon",
  "Kotak", "Mirae Asset", "DSP", "Aditya Birla", "UTI",
  "Edelweiss", "PPFAS", "Quant", "Bandhan", "Tata"
];

const Partners = () => {
  return (
    <section id="partners" className="block" style={{ background: "var(--cream-2)", paddingTop: 96, paddingBottom: 96 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }} className="prt-grid">
          <div>
            <Marker index={5} total={7} label="Our partners"/>
            <h2 className="display" style={{ fontSize: "clamp(30px, 3.1vw, 37px)", marginTop: 24, lineHeight: 1.05, color: "var(--green-900)" }}>
              We work with India's most&nbsp;trusted financial institutions.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--muted)", marginTop: 24, maxWidth: 440 }}>
              We're an independent practice — AMFI-registered and a Certified Financial Planner (FPSB), with direct relationships across 40+ AMCs, 14 banks and 8 insurance carriers. No product-pushing, no commission bias.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              {["40+ Mutual fund houses", "14 Banks & NBFCs", "8 Insurance carriers", "6 PMS / AIF managers"].map(t => (
                <span key={t} style={{
                  padding: "8px 14px", border: "1px solid var(--hairline)",
                  borderRadius: 999, fontSize: 12, fontWeight: 500,
                  background: "var(--cream)"
                }}>{t}</span>
              ))}
            </div>
          </div>
          <div>
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
              border: "1px solid var(--hairline)", background: "var(--cream)"
            }} className="prt-tiles">
              {PARTNERS.map((p, i) => (
                <div key={p} style={{
                  padding: "32px 16px",
                  borderRight: (i + 1) % 5 === 0 ? "none" : "1px solid var(--hairline)",
                  borderBottom: i < PARTNERS.length - 5 ? "1px solid var(--hairline)" : "none",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  minHeight: 110,
                  transition: "background .25s"
                }}
                  onMouseEnter={e => { e.currentTarget.style.background = "var(--green-900)"; e.currentTarget.querySelector("span").style.color = "var(--gold-400)"; }}
                  onMouseLeave={e => { e.currentTarget.style.background = "var(--cream)"; e.currentTarget.querySelector("span").style.color = "var(--green-900)"; }}>
                  <span style={{
                    fontFamily: "Poppins", fontWeight: 700, fontSize: 18,
                    letterSpacing: "-0.02em", color: "var(--green-900)",
                    transition: "color .25s", textAlign: "center"
                  }}>{p}</span>
                </div>
              ))}
            </div>
            <p className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.12em", marginTop: 16 }}>
              ✱ LOGOS USED FOR IDENTIFICATION ONLY. NO ENDORSEMENT IMPLIED.
            </p>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .prt-grid{ grid-template-columns: 1fr !important; gap: 48px !important }
          .prt-tiles{ grid-template-columns: repeat(3, 1fr) !important }
          .prt-tiles > div{ border-right: 1px solid var(--hairline) !important; border-bottom: 1px solid var(--hairline) !important }
        }
      `}</style>
    </section>
  );
};

window.Partners = Partners;