/* 10 hybrid heroes = HX02 (split copy+right panel) × HX16 (floating finding cards).
   Copy + CTAs left, dynamic finding cards right. Reuses helpers from heroes-1.jsx. */

const FC = ({ sev, name, sub, score, w = 360, style }) => (
  <div style={{ width: w, ...style }}><Find sev={sev} name={name} sub={sub} score={score} /></div>
);
const ROWS = [
  ['CRIT', 'XZ Utils backdoor → sshd RCE', 'CVE-2024-3094 · api-staging.target.com', '10.0'],
  ['CRIT', 'Subdomain takeover · dangling CNAME', 'old-cdn.target.com', '9.6'],
  ['HIGH', 'Default credentials on admin panel', 'jenkins.target.com', '8.8'],
  ['HIGH', 'SQL injection in /api/v2/users', 'api.target.com', '8.6'],
  ['MED', 'TLS 1.0 enabled on edge LB', 'lb-01.target.com', '5.3'],
];

const Copy = ({ badge, eyebrow, h, sub, ctaB }) => (
  <div>
    {badge && <BetaBadge />}
    {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
    <h1 style={{ fontSize: 44, fontWeight: 800, lineHeight: 1.06, letterSpacing: '-0.03em', color: L.text, margin: badge ? '18px 0 16px' : '0 0 16px' }}>{h}</h1>
    <p style={{ fontSize: 16, lineHeight: 1.6, color: L.textDim, margin: '0 0 26px', maxWidth: 450 }}>{sub}</p>
    {ctaB ? <CTAsB /> : <CTAs />}
  </div>
);

const Shell = ({ children, bg }) => (
  <div><Nav /><div style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 40, alignItems: 'center', padding: '56px 36px 62px', position: 'relative', background: bg }}>{children}</div></div>
);

/* HC01 · classic tilted stack */
const HC01 = () => (
  <Shell bg={`radial-gradient(600px 400px at 78% 50%, rgba(245,181,68,0.07), transparent 70%)`}>
    <Copy badge h={HEAD} sub={SUB_SHORT} />
    <div style={{ position: 'relative', height: 300 }}>
      {ROWS.slice(0,4).map((r,i)=>(<FC key={i} sev={r[0]} name={r[1]} sub={r[2]} score={r[3]} style={{ position:'absolute', top: 8+i*72, right: i%2?28:0, transform:`rotate(${[2,-2,1.5,-1][i]}deg)` }} />))}
    </div>
  </Shell>
);

/* HC02 · cards under a live scan header strip */
const HC02 = () => (
  <Shell>
    <Copy eyebrow="Evidence-backed findings only" h="Real findings. Real evidence." sub={SUB_SHORT} />
    <div>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 14px', background:L.surface, border:`1px solid ${L.borderHi}`, borderRadius:'10px 10px 0 0', borderBottom:'none' }}>
        <span style={{ fontSize:11.5, fontFamily:L.mono, color:L.text, fontWeight:600 }}>findings · target.com</span>
        <span style={{ fontSize:10.5, fontFamily:L.mono, color:L.crit, fontWeight:700, letterSpacing:'0.1em' }}>● 12 CRITICAL</span>
      </div>
      <div style={{ padding:14, background:'#070B11', border:`1px solid ${L.borderHi}`, borderRadius:'0 0 10px 10px' }}>
        {ROWS.slice(0,4).map((r,i)=><Find key={i} sev={r[0]} name={r[1]} sub={r[2]} score={r[3]} />)}
      </div>
    </div>
  </Shell>
);

/* HC03 · fanned cards + severity chip row */
const HC03 = () => (
  <Shell bg={`radial-gradient(600px 380px at 75% 40%, rgba(245,181,68,0.06), transparent 70%)`}>
    <div>
      <Copy h={HEAD} sub={SUB_SHORT} />
      <div style={{ display:'flex', gap:8, marginTop:18 }}>
        {[['12','crit',L.crit],['47','high',L.high],['184','med',L.med]].map(([n,l,c])=>(<span key={l} style={{ fontSize:11, fontFamily:L.mono, fontWeight:700, color:c, background:`${c}1f`, border:`1px solid ${c}44`, padding:'4px 9px', borderRadius:6 }}>{n} {l}</span>))}
      </div>
    </div>
    <div style={{ position:'relative', height:290 }}>
      {ROWS.slice(0,4).map((r,i)=>(<FC key={i} sev={r[0]} name={r[1]} sub={r[2]} score={r[3]} w={350} style={{ position:'absolute', top:6+i*70, right:i*14, transform:`rotate(${[-3,-1,1,3][i]}deg)` }} />))}
    </div>
  </Shell>
);

/* HC04 · neat overlapping deck + glow */
const HC04 = () => (
  <Shell>
    <Copy badge h="Find what attackers see before they do." sub={SUB_SHORT} />
    <div style={{ position:'relative', height:300 }}>
      <div style={{ position:'absolute', inset:'10% 0 0 6%', background:`radial-gradient(circle, rgba(245,181,68,0.12), transparent 70%)`, filter:'blur(20px)' }} />
      {ROWS.slice(0,5).map((r,i)=>(<FC key={i} sev={r[0]} name={r[1]} sub={r[2]} score={r[3]} w={360} style={{ position:'absolute', top:i*58, right:i*10, boxShadow:'0 8px 24px rgba(0,0,0,0.4)' }} />))}
    </div>
  </Shell>
);

/* HC05 · floating callout badge over cards */
const HC05 = () => (
  <Shell>
    <Copy eyebrow="External attack surface scanner" h="Signal, not noise." sub={SUB} />
    <div style={{ position:'relative', height:300 }}>
      {ROWS.slice(0,4).map((r,i)=>(<FC key={i} sev={r[0]} name={r[1]} sub={r[2]} score={r[3]} style={{ position:'absolute', top:18+i*70, right:0, transform:`rotate(${[1.5,-1.5,1,-1][i]}deg)` }} />))}
      <div style={{ position:'absolute', top:-6, left:-10, background:L.accent, color:'#0A0E14', fontFamily:L.mono, fontWeight:700, fontSize:13, padding:'8px 14px', borderRadius:10, boxShadow:`0 8px 24px ${L.accent}55` }}>10.0 found in 14 min</div>
    </div>
  </Shell>
);

/* HC06 · 5 cards, reverse tilt, gradient */
const HC06 = () => (
  <Shell bg={`radial-gradient(700px 420px at 80% 50%, rgba(245,181,68,0.08), transparent 70%)`}>
    <Copy badge h="Continuous exposure scanning" sub={SUB_SHORT} />
    <div style={{ position:'relative', height:330 }}>
      {ROWS.map((r,i)=>(<FC key={i} sev={r[0]} name={r[1]} sub={r[2]} score={r[3]} w={350} style={{ position:'absolute', top:i*60, right:i%2?22:0, transform:`rotate(${[-2,2,-1.5,1.5,-1][i]}deg)` }} />))}
    </div>
  </Shell>
);

/* HC07 · copy + mini terminal line under CTAs, cards right */
const HC07 = () => (
  <Shell>
    <div>
      <Copy h={HEAD} sub={SUB_SHORT} />
      <div style={{ marginTop:18, fontFamily:L.mono, fontSize:12.5, color:L.textMute }}><span style={{ color:L.accent }}>$</span> scan target.com <span style={{ color:L.ok }}>✓ 644 findings</span></div>
    </div>
    <div style={{ position:'relative', height:290 }}>
      {ROWS.slice(0,4).map((r,i)=>(<FC key={i} sev={r[0]} name={r[1]} sub={r[2]} score={r[3]} style={{ position:'absolute', top:8+i*70, right:i%2?20:0, transform:`rotate(${[2,-2,1.5,-1][i]}deg)` }} />))}
    </div>
  </Shell>
);

/* HC08 · cards in a clean panel (less tilt) */
const HC08 = () => (
  <Shell>
    <Copy badge h="Exposure intelligence, ranked by real risk" sub={SUB_SHORT} />
    <div style={{ background:L.surface, border:`1px solid ${L.borderHi}`, borderRadius:12, padding:16, boxShadow:'0 24px 60px rgba(0,0,0,0.5)' }}>
      <div style={{ fontSize:9.5, fontFamily:L.mono, color:L.textMute, letterSpacing:'0.14em', fontWeight:700, marginBottom:12 }}>TOP FINDINGS · TARGET.COM</div>
      {ROWS.slice(0,5).map((r,i)=><Find key={i} sev={r[0]} name={r[1]} sub={r[2]} score={r[3]} />)}
    </div>
  </Shell>
);

/* HC09 · mini terminal + 2 floating cards below */
const HC09 = () => (
  <Shell>
    <Copy eyebrow="Signal, not noise" h="Watch it hunt, then read the proof" sub={SUB_SHORT} />
    <div>
      <T h={70} status="LIVE" sc={L.ok}><ScanLines /></T>
      <div style={{ position:'relative', height:160, marginTop:12 }}>
        {ROWS.slice(0,2).map((r,i)=>(<FC key={i} sev={r[0]} name={r[1]} sub={r[2]} score={r[3]} style={{ position:'absolute', top:i*72, right:i%2?20:0, transform:`rotate(${i?-1.5:1.5}deg)` }} />))}
      </div>
    </div>
  </Shell>
);

/* HC10 · big headline, cards with scan-line accent */
const HC10 = () => (
  <div><Nav /><div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'center', padding:'52px 36px 60px' }}>
    <div>
      <h1 style={{ fontSize:54, fontWeight:800, lineHeight:1.0, letterSpacing:'-0.035em', color:L.text, margin:'0 0 16px' }}>See the<br/><span style={{ color:L.accent }}>unseen</span> perimeter.</h1>
      <p style={{ fontSize:16, color:L.textDim, margin:'0 0 26px', maxWidth:430, lineHeight:1.6 }}>{SUB_SHORT}</p>
      <CTAs />
    </div>
    <div style={{ position:'relative', height:300, paddingLeft:18 }}>
      <div style={{ position:'absolute', left:0, top:10, bottom:10, width:2, background:`linear-gradient(${L.crit}, ${L.high}, ${L.med})`, borderRadius:2 }} />
      {ROWS.slice(0,4).map((r,i)=>(<FC key={i} sev={r[0]} name={r[1]} sub={r[2]} score={r[3]} w={360} style={{ position:'absolute', top:i*72, left:18, transform:`rotate(${[1,-1,1,-1][i]}deg)` }} />))}
    </div>
  </div></div>
);

Object.assign(window, { HC01, HC02, HC03, HC04, HC05, HC06, HC07, HC08, HC09, HC10 });