const footStyles = {
  wrap:{background:"var(--ink)", color:"rgba(255,255,255,0.7)", padding:"80px 40px 40px", borderRadius:"32px 32px 0 0"},
  inner:{maxWidth:1360, margin:"0 auto"},
  top:{display:"grid", gridTemplateColumns:"1.4fr 1fr 1fr 1fr", gap:48, paddingBottom:56, borderBottom:"1px solid rgba(255,255,255,0.1)"},
  logo:{color:"#fff", display:"flex", alignItems:"center", gap:10, marginBottom:20, fontWeight:700, letterSpacing:"0.02em"},
  blurb:{fontSize:14, lineHeight:1.55, maxWidth:360},
  h4:{color:"#fff", fontSize:13, fontFamily:'"JetBrains Mono",monospace', letterSpacing:"0.14em", textTransform:"uppercase", marginBottom:18, fontWeight:500},
  list:{listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:10, fontSize:14},
  a:{opacity:0.7, transition:"opacity .15s"},
  bottom:{paddingTop:28, display:"flex", justifyContent:"space-between", gap:24, fontSize:12, flexWrap:"wrap", color:"rgba(255,255,255,0.4)"}
};

function Footer(){
  const groups = [
    {h:"Lines", items:[
      {label:"Property", href:"#"},
      {label:"Liability", href:"#"},
      {label:"Commercial Combined", href:"#"},
      {label:"Construction", href:"#"},
      {label:"Package SME", href:"#"},
      {label:"Leisure", href:"#"},
      {label:"Schemes", href:"#"},
    ]},
    {h:"Company", items:[
      {label:"About", href:"About Us.html"},
      {label:"Trade Live", href:"Trade Live.html"},
      {label:"Instant Broking", href:"Instant Broking.html"},
      {label:"Press", href:"Contact Us.html#dept-general"},
      {label:"Careers", href:"https://www.linkedin.com/company/instant-underwriting/jobs", external:true},
    ]},
    {h:"Contact", items:[
      {label:"New business", href:"Contact Us.html#dept-newbiz"},
      {label:"Renewals", href:"Contact Us.html#dept-renewals"},
      {label:"Agency", href:"Contact Us.html#dept-accounts"},
      {label:"Claims", href:"Contact Us.html#dept-claims"},
      {label:"LinkedIn", href:"https://www.linkedin.com/company/instant-underwriting/", external:true},
    ]},
  ];
  return (
    <footer style={footStyles.wrap}>
      <div style={footStyles.inner}>
        <div style={footStyles.top}>
          <div>
            <div style={footStyles.logo}>
              <Logomark/>
              <span>INSTANT <span style={{fontWeight:400, opacity:0.7}}>UNDERWRITING</span></span>
            </div>
            <p style={footStyles.blurb}>The faster way to better broking. An MGA built around the broker — backed by A-rated paper and a team who'd rather pick up the phone.</p>
            <div style={{marginTop:28, fontSize:13, lineHeight:1.6}}>
              3 Lloyd's Avenue<br/>London EC3N 3DS
            </div>
          </div>
          {groups.map(g => (
            <div key={g.h}>
              <div style={footStyles.h4}>{g.h}</div>
              <ul style={footStyles.list}>
                {g.items.map(i => <li key={i.label}><a href={i.href} style={footStyles.a} {...(i.external ? {target:"_blank", rel:"noopener noreferrer"} : {})}>{i.label}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={footStyles.bottom}>
          <span>© 2026 Instant Underwriting. Instant Underwriting is a trading style of I.M.S. (London) Limited, authorised and regulated by the Financial Conduct Authority FRN 300186.</span>
          <span style={{display:"flex", gap:14}}>
            <a href="Terms.html" style={footStyles.a} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=0.7}>Terms</a>
            <span style={{opacity:0.3}}>·</span>
            <a href="Privacy.html" style={footStyles.a} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=0.7}>Privacy</a>
            <span style={{opacity:0.3}}>·</span>
            <a href="Cookies.html" style={footStyles.a} onMouseEnter={e=>e.currentTarget.style.opacity=1} onMouseLeave={e=>e.currentTarget.style.opacity=0.7}>Cookies</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;