// Animated hero: speed/response-time story
// Large type, live ticking counter showing average response time,
// cycling "We have [x] covered" line, and a looping SVG speedline field.

const heroStyles = {
  wrap:{
    position:"relative", overflow:"hidden",
    background:"var(--ink)", color:"#fff",
    padding:"80px 40px 100px",
    borderRadius:"0 0 32px 32px",
  },
  inner:{
    maxWidth:1360, margin:"0 auto", position:"relative", zIndex:2,
    display:"grid", gridTemplateColumns:"1.25fr 1fr", gap:64, alignItems:"center",
  },
  eyebrow:{
    display:"inline-flex", alignItems:"center", gap:10,
    padding:"8px 14px", borderRadius:999,
    border:"1px solid rgba(255,255,255,0.18)",
    fontSize:12, fontFamily:'"JetBrains Mono",monospace', letterSpacing:"0.1em",
    textTransform:"uppercase", color:"rgba(255,255,255,0.85)", marginBottom:32
  },
  dot:{width:8,height:8,borderRadius:99,background:"var(--teal)",boxShadow:"0 0 12px var(--teal)"},
  h1:{
    fontSize:"clamp(56px, 8.2vw, 128px)",
    lineHeight:0.92, letterSpacing:"-0.04em",
    fontWeight:700, margin:"0 0 28px", textWrap:"balance"
  },
  accent:{color:"var(--accent)", fontStyle:"italic", fontWeight:700},
  sub:{fontSize:18, lineHeight:1.45, maxWidth:520, color:"rgba(255,255,255,0.72)", margin:"0 0 40px"},
  ctas:{display:"flex", gap:12, flexWrap:"wrap"},
  primary:{padding:"16px 26px", background:"#fff", color:"var(--ink)", borderRadius:999, fontWeight:700, fontSize:15, display:"inline-flex", alignItems:"center", gap:10, whiteSpace:"nowrap"},
  ghost:{padding:"16px 24px", color:"#fff", borderRadius:999, fontWeight:600, fontSize:15, border:"1px solid rgba(255,255,255,0.24)", whiteSpace:"nowrap", display:"inline-flex", alignItems:"center"},
  // Right panel - live response dashboard
  panel:{
    position:"relative",
    background:"linear-gradient(160deg, rgba(156,116,235,0.14) 0%, rgba(10,226,195,0.05) 100%)",
    border:"1px solid rgba(255,255,255,0.12)",
    borderRadius:24, padding:28,
    backdropFilter:"blur(8px)",
  },
  panelLabel:{fontFamily:'"JetBrains Mono",monospace', fontSize:11, letterSpacing:"0.16em", textTransform:"uppercase", color:"rgba(255,255,255,0.55)", marginBottom:14, display:"flex", justifyContent:"space-between", alignItems:"center"},
  bigNum:{fontSize:96, lineHeight:0.9, fontWeight:700, letterSpacing:"-0.04em", color:"#fff"},
  unit:{fontSize:28, color:"var(--teal)", fontWeight:500, marginLeft:8},
  sparkline:{display:"grid", gridTemplateColumns:"repeat(32,1fr)", gap:3, height:56, alignItems:"end", marginTop:18, marginBottom:18},
  bar:{background:"linear-gradient(180deg, var(--accent), rgba(156,116,235,0.3))", borderRadius:2, minHeight:4},
  row:{display:"flex", justifyContent:"space-between", fontSize:13, padding:"10px 0", borderTop:"1px solid rgba(255,255,255,0.08)"},
  trade:{display:"inline-block", color:"var(--teal)"}
};

function Hero({heroVariant="dashboard"}){
  // Animated avg response time — lerps between 58-74 mins
  const [mins, setMins] = React.useState(54);
  const [tradeIdx, setTradeIdx] = React.useState(0);
  const [bars, setBars] = React.useState(() => Array.from({length:32}, () => 20 + Math.random()*80));

  React.useEffect(() => {
    const id = setInterval(() => {
      setMins(m => {
        const target = 50 + Math.round(Math.random()*9);
        return Math.round(m + (target-m)*0.35);
      });
      setBars(prev => [...prev.slice(1), 20 + Math.random()*80]);
    }, 1400);
    return () => clearInterval(id);
  },[]);

  React.useEffect(() => {
    const id = setInterval(() => setTradeIdx(i => (i+1) % window.IUW.QUIRKY_TRADES.length), 2200);
    return () => clearInterval(id);
  },[]);

  return (
    <section style={heroStyles.wrap} data-screen-label="Hero">
      {/* Speedlines */}
      <SpeedLines/>
      <div style={heroStyles.inner}>
        <div>
          <span style={heroStyles.eyebrow}>
            <span style={heroStyles.dot}></span>
            Coverholder at Lloyd's · MGAA member
          </span>
          <h1 style={heroStyles.h1}>
            The faster<br/>
            way to <span style={heroStyles.accent}>better</span><br/>
            broking.
          </h1>
          <p style={heroStyles.sub}>
            Instant Underwriting is an MGA built for commercial brokers.
            An instant quote 9 times out of 10 — and when we need a referral,
            our underwriters respond in under 60 minutes. No guesswork. No waiting.
          </p>
          <div style={heroStyles.ctas}>
            <a href="#signup" style={heroStyles.primary}>
              Sign up to trade
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 8h11M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a href="#login" style={heroStyles.ghost}>Log in</a>
          </div>
          <div style={{marginTop:40, fontSize:14, color:"rgba(255,255,255,0.6)"}}>
            Calling all <span style={{...heroStyles.trade, fontWeight:600, textDecoration:"underline", textDecorationColor:"rgba(10,226,195,0.4)", textUnderlineOffset:4}} key={tradeIdx}>{window.IUW.QUIRKY_TRADES[tradeIdx]}</span>. We have you covered.
          </div>
        </div>

        {/* Live response-time panel */}
        <div style={heroStyles.panel}>
          <div style={heroStyles.panelLabel}>
            <span>◉ Live — average response time</span>
            <span style={{color:"var(--teal)"}}>UK</span>
          </div>
          <div>
            <span style={heroStyles.bigNum}>{mins}</span>
            <span style={heroStyles.unit}>min</span>
          </div>
          <div style={heroStyles.sparkline} aria-hidden>
            {bars.map((h,i) => (
              <div key={i} style={{...heroStyles.bar, height:`${h}%`, opacity: 0.3 + (i/32)*0.7}}/>
            ))}
          </div>
          <div style={{fontSize:12, fontFamily:'"JetBrains Mono",monospace', color:"rgba(255,255,255,0.5)", letterSpacing:"0.08em", marginBottom:8}}>
            LAST 32 REFERRALS · ROLLING
          </div>
          <div style={heroStyles.row}><span style={{color:"rgba(255,255,255,0.6)"}}>Instant quotes</span><span style={{color:"#fff", fontWeight:600}}>9 in 10</span></div>
          <div style={heroStyles.row}><span style={{color:"rgba(255,255,255,0.6)"}}>Trades covered</span><span style={{color:"#fff", fontWeight:600}}>3,900+</span></div>
          <div style={heroStyles.row}><span style={{color:"rgba(255,255,255,0.6)"}}>Commission</span><span style={{color:"#fff", fontWeight:600}}>Up to 25%</span></div>
          <div style={{...heroStyles.row, borderBottom:"1px solid rgba(255,255,255,0.08)"}}><span style={{color:"rgba(255,255,255,0.6)"}}>Total sum insured</span><span style={{color:"#fff", fontWeight:600}}>Up to £10m</span></div>
        </div>
      </div>
    </section>
  );
}

// Subtle animated speed-line background
function SpeedLines(){
  const lines = React.useMemo(() => Array.from({length:14}, (_,i) => ({
    top: 8 + i*7 + Math.random()*3,
    delay: Math.random()*8,
    dur: 6 + Math.random()*8,
    op: 0.04 + Math.random()*0.12,
    w: 30 + Math.random()*50
  })), []);
  return (
    <>
      <style>{`
        @keyframes iuwSpeed { from{transform:translateX(-30vw)} to{transform:translateX(130vw)} }
        .iuw-line{position:absolute; height:1px; background:linear-gradient(90deg, transparent, var(--lilac), transparent); animation:iuwSpeed linear infinite;}
      `}</style>
      <div style={{position:"absolute", inset:0, zIndex:1, pointerEvents:"none"}}>
        {lines.map((l,i)=>(
          <div key={i} className="iuw-line" style={{
            top:`${l.top}%`, width:`${l.w}%`, opacity:l.op,
            animationDelay:`-${l.delay}s`, animationDuration:`${l.dur}s`
          }}/>
        ))}
      </div>
    </>
  );
}

window.Hero = Hero;