const HERO_PARTNERS = [
  "HDFC", "ICICI Pru", "Axis MF", "SBI MF", "Nippon", "Kotak",
  "Mirae Asset", "DSP", "Aditya Birla", "UTI", "Edelweiss", "PPFAS",
  "Quant", "Bandhan", "Tata", "Motilal Oswal"
];

const Hero = () => {
  const thread = [...HERO_PARTNERS, ...HERO_PARTNERS];
  return (
    <section id="top" style={{
      position: "relative",
      background: "var(--cream)",
      minHeight: "calc(100vh - 116px)",
      paddingTop: 40,
      paddingBottom: 0,
      display: "flex",
      flexDirection: "column",
      overflow: "hidden"
    }}>
      <div className="container" style={{ position: "relative", zIndex: 2, flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", gap: 40, paddingTop: 24, paddingBottom: 48 }}>
        {/* Tagline */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 16 }}>
          <span className="eyebrow" style={{ color: "var(--green-700)", fontWeight: 600 }}>Building Wealth · Securing Futures</span>
          <span className="eyebrow">Est. 2007 · Mohali, Punjab</span>
        </div>

        {/* Headline */}
        <h1 className="display hero-h1" style={{
          fontSize: "clamp(39px, 5.6vw, 72px)",
          lineHeight: 0.98,
          color: "var(--green-900)",
          maxWidth: "15ch",
        }}>
          A dedicated partner for your <span style={{ position: "relative", display: "inline-block" }}>
            financial journey
            <span style={{ position: "absolute", left: 0, right: 0, bottom: 4, height: 12, background: "var(--gold-400)", zIndex: -1, opacity: 0.55 }}/>
          </span><span style={{ color: "var(--gold-500)" }}>.</span>
        </h1>

        {/* Sub paragraph */}
        <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink)", maxWidth: 660 }}>
          Bespoke wealth architecture, treasury management, NRI services, alternative investments and estate readiness — engineered into a single, resilient framework for families and businesses who think in <strong style={{ fontWeight: 600 }}>decades</strong>, not quarters.
        </p>
      </div>

      {/* Partner moving thread */}
      <div style={{ borderTop: "1px solid var(--hairline)", background: "var(--cream-2)", padding: "22px 0", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", left: 48, top: 0, bottom: 0, display: "flex", alignItems: "center", zIndex: 3 }} className="thread-label">
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--muted)", background: "var(--cream-2)", paddingRight: 20, textTransform: "uppercase" }}>Our partners</span>
        </div>
        <div style={{ display: "flex", gap: 56, whiteSpace: "nowrap", animation: "heroThread 38s linear infinite", paddingLeft: 160, alignItems: "center" }} className="thread-track">
          {thread.map((p, i) => (
            <span key={i} className="display" style={{ fontSize: 26, fontWeight: 700, color: "var(--green-900)", opacity: 0.42, letterSpacing: "-0.02em", flexShrink: 0 }}>{p}</span>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes heroThread { from { transform: translateX(0) } to { transform: translateX(-50%) } }
        @media (max-width: 1100px){
          .hero-h1{ font-size: clamp(36px, 5.3vw, 56px) !important }
        }
        @media (max-width: 760px){
          #top{ min-height: 0 !important; padding-top: 24px !important }
          .thread-label{ display: none !important }
          .thread-track{ padding-left: 22px !important }
        }
      `}</style>
    </section>
  );
};

window.Hero = Hero;