// reel-kit.jsx — shared brand atoms + content for the ApplyMagik hero reels.
// Loads AFTER animations.jsx. Exports everything to window for the variant
// scene scripts to destructure. No global `styles` object (inline only) to
// avoid cross-script collisions.

const { useSprite, useTime, useTimeline, Easing, clamp, interpolate, animate } = window;

/* ---------------- BRAND ---------------- */
const BRAND = {
  violet:'#b45cff', violetBright:'#c77dff', magenta:'#ff4dd8', cyan:'#3de8ff', cyanDeep:'#18c6e6',
  grad:'linear-gradient(110deg,#b45cff 0%,#ff4dd8 48%,#3de8ff 100%)',
  gradSoft:'linear-gradient(110deg,#b45cff 0%,#7c5cff 50%,#3de8ff 100%)',
  bg:'#08080d', bg2:'#0c0c14', surface:'#121120', surface2:'#181830', surface3:'#20203a',
  border:'rgba(255,255,255,0.10)', borderStrong:'rgba(255,255,255,0.18)',
  text:'#f4f2fb', dim:'#a6a3c0', faint:'#6f6c8a',
  glowViolet:'rgba(180,92,255,0.45)', glowCyan:'rgba(61,232,255,0.40)', glowMagenta:'rgba(255,77,216,0.40)',
  display:"'Space Grotesk',system-ui,sans-serif", body:"'Manrope',system-ui,sans-serif", mono:"'Space Mono',ui-monospace,monospace",
};

/* ---------------- CONTENT ---------------- */
const REEL = {
  roles: [
    { title:'Senior Security Engineer', co:'Cipherworks', ats:'Greenhouse', tint:BRAND.violet },
    { title:'Staff Data Engineer',      co:'Northwind',   ats:'Lever',      tint:BRAND.cyan },
    { title:'Product Designer',         co:'Lumen & Co',  ats:'Ashby',      tint:BRAND.magenta },
  ],
  bulletBefore:'Worked on internal security projects and helped the team.',
  bulletAfter:'Led zero-trust migration across 9 AWS accounts — cut lateral-movement risk 60%.',
  fitFrom:84, fitTo:92,
  fields:[
    { label:'Full name', value:'Jordan Lee' },
    { label:'Email', value:'jordan.lee@hey.com' },
    { label:'Résumé', value:'jordan-lee · tailored.pdf' },
    { label:'Work authorization', value:'US citizen' },
    { label:'Years of experience', value:'9' },
  ],
  cover:[
    'Dear Cipherworks team,',
    'Your zero-trust platform is exactly the problem',
    "space I've lived in for three years. I led a",
    'similar migration and would love to bring it here.',
  ],
  pipeline:{
    Applied:[ {role:'Senior Security Engineer', co:'Cipherworks', tint:BRAND.violet} ,
              {role:'Staff Data Engineer', co:'Northwind', tint:BRAND.cyan} ],
    Screening:[ {role:'Platform Engineer', co:'Vantapoint', tint:BRAND.cyan} ],
    Interview:[ {role:'Product Designer', co:'Lumen & Co', tint:BRAND.magenta} ],
  },
  tagline:'Stop spraying. Start landing.',
  cta:'Start free',
  wordmark:'ApplyMagik',
};

/* ---------------- low-level helpers ---------------- */
// deterministic pseudo-random for sparkle fields
function rng(seed){ let s = seed % 2147483647; if (s<=0) s+=2147483646; return ()=> (s = s*16807 % 2147483647) / 2147483647; }

function fadeInOut(localTime, duration, inDur=0.5, outDur=0.5){
  const inT = clamp(localTime/inDur,0,1);
  const outStart = Math.max(0, duration-outDur);
  const outT = localTime>outStart ? clamp((localTime-outStart)/outDur,0,1) : 0;
  return clamp(Math.min(inT, 1-outT),0,1);
}

/* ---------------- Glow orb ---------------- */
function Glow({x,y,size=420,color=BRAND.glowViolet,opacity=1}){
  return <div style={{position:'absolute',left:x,top:y,width:size,height:size,borderRadius:'50%',
    background:`radial-gradient(circle, ${color} 0%, transparent 68%)`,
    transform:'translate(-50%,-50%)',opacity,filter:'blur(18px)',pointerEvents:'none'}}/>;
}

/* ---------------- Sparkles (deterministic) ---------------- */
function Sparkles({seed=7,count=18,w=1280,h=720,t=0,color=BRAND.violetBright,size=14}){
  const rand = React.useMemo(()=>{ const r=rng(seed); return Array.from({length:count},()=>({x:r()*w,y:r()*h,p:r(),s:0.5+r()*0.9,sp:0.6+r()*0.8})); },[seed,count,w,h]);
  return <>{rand.map((d,i)=>{ const ph=(t*d.sp+d.p)%1; const op=Math.sin(ph*Math.PI); const sc=d.s*(0.5+op*0.7);
    return <div key={i} style={{position:'absolute',left:d.x,top:d.y,width:size,height:size,transform:`translate(-50%,-50%) scale(${sc})`,opacity:op*0.9,pointerEvents:'none'}}>
      <svg viewBox="0 0 24 24" width={size} height={size} fill={color}><path d="M12 0c.7 5.5 2.8 7.6 12 12-9.2 4.4-11.3 6.5-12 12-.7-5.5-2.8-7.6-12-12C9.2 7.6 11.3 5.5 12 0Z"/></svg>
    </div>; })}</>;
}

/* ---------------- Cursor ---------------- */
function Cursor({x,y,clicking=false,scale=1,wand=false}){
  return <div style={{position:'absolute',left:x,top:y,transform:`scale(${scale})`,transformOrigin:'top left',zIndex:60,pointerEvents:'none',filter:'drop-shadow(0 4px 10px rgba(0,0,0,.5))'}}>
    {clicking && <div style={{position:'absolute',left:-6,top:-6,width:34,height:34,borderRadius:'50%',border:`2px solid ${BRAND.cyan}`,opacity:.8,transform:'translate(-2px,-2px)'}}/>}
    {wand
      ? <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M3 21 14 10" stroke={BRAND.violetBright} strokeWidth="2.4" strokeLinecap="round"/><path d="M16 4c.4 2.4 1.3 3.3 4 4-2.7.7-3.6 1.6-4 4-.4-2.4-1.3-3.3-4-4 2.7-.7 3.6-1.6 4-4Z" fill={BRAND.cyan}/></svg>
      : <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff"><path d="M5 2.5 19 12l-6.2 1.1L16 20l-2.7 1.2-3.2-6.9L5 18.7V2.5Z" stroke="#0a0a0a" strokeWidth="1.1" strokeLinejoin="round"/></svg>}
  </div>;
}

/* ---------------- Caption (silent lower-third) ---------------- */
function Caption({kicker,text,accent=BRAND.cyan,w=1280,bottom=46,maxw=820}){
  const {localTime,duration} = useSprite();
  const op = fadeInOut(localTime,duration,0.55,0.5);
  const ty = (1-Easing.easeOutCubic(clamp(localTime/0.55,0,1)))*18;
  return <div style={{position:'absolute',left:w/2,bottom,transform:`translate(-50%, ${ty}px)`,opacity:op,
    textAlign:'center',maxWidth:maxw,pointerEvents:'none',zIndex:55}}>
    {kicker && <div style={{fontFamily:BRAND.mono,fontSize:14,letterSpacing:'0.22em',textTransform:'uppercase',color:accent,marginBottom:10}}>{kicker}</div>}
    <div style={{fontFamily:BRAND.display,fontSize:34,fontWeight:600,color:BRAND.text,lineHeight:1.18,letterSpacing:'-0.01em',
      textShadow:'0 2px 30px rgba(0,0,0,.6)'}}>{text}</div>
  </div>;
}

/* ---------------- Browser chrome ---------------- */
function BrowserChrome({title='applymagik.com',w=980,h=560,accent=BRAND.violet,children,style}){
  return <div style={{width:w,height:h,borderRadius:18,overflow:'hidden',background:BRAND.surface,
    border:`1px solid ${BRAND.borderStrong}`,boxShadow:'0 40px 100px -30px rgba(0,0,0,.85)',display:'flex',flexDirection:'column',...style}}>
    <div style={{display:'flex',alignItems:'center',gap:9,padding:'13px 16px',background:BRAND.surface2,borderBottom:`1px solid ${BRAND.border}`,flex:'none'}}>
      <span style={{display:'flex',gap:7}}>{['#ff5f57','#febc2e','#28c840'].map(c=><i key={c} style={{width:11,height:11,borderRadius:'50%',background:c,opacity:.85}}/>)}</span>
      <div style={{flex:1,margin:'0 10px',background:BRAND.bg2,border:`1px solid ${BRAND.border}`,borderRadius:8,padding:'6px 13px',
        fontFamily:BRAND.mono,fontSize:12.5,color:BRAND.faint,display:'flex',alignItems:'center',gap:8}}>
        <span style={{width:7,height:7,borderRadius:'50%',background:accent,boxShadow:`0 0 8px ${accent}`}}/>{title}</div>
    </div>
    <div style={{flex:1,position:'relative',overflow:'hidden'}}>{children}</div>
  </div>;
}

/* ---------------- Fit meter ---------------- */
function FitMeter({value,w=300,showNum=true}){
  const pct = clamp((value-40)/60,0,1)*100;
  return <div style={{display:'flex',alignItems:'center',gap:14}}>
    <div style={{flex:1,height:10,borderRadius:6,background:BRAND.surface3,overflow:'hidden',minWidth:w}}>
      <div style={{height:'100%',width:`${pct}%`,background:BRAND.grad,borderRadius:6,boxShadow:`0 0 16px ${BRAND.glowCyan}`,transition:'none'}}/>
    </div>
    {showNum && <div style={{fontFamily:BRAND.display,fontWeight:700,fontSize:30,color:BRAND.text,fontVariantNumeric:'tabular-nums',minWidth:54,textAlign:'right'}}>{Math.round(value)}</div>}
  </div>;
}

/* ---------------- Form field ---------------- */
function Field({label,value,filled=1,accent=BRAND.cyan,h=46}){
  // filled: 0..1, controls value reveal + check
  const chars = Math.round(value.length*clamp(filled,0,1));
  const done = filled>=1;
  return <div style={{display:'flex',alignItems:'center',gap:14,padding:'0 16px',height:h,borderBottom:`1px solid ${BRAND.border}`}}>
    <span style={{width:160,flex:'none',fontFamily:BRAND.body,fontSize:14.5,color:BRAND.faint}}>{label}</span>
    <div style={{flex:1,height:32,borderRadius:8,background:BRAND.surface2,border:`1px solid ${done?'color-mix(in srgb,'+accent+' 40%,transparent)':BRAND.border}`,
      display:'flex',alignItems:'center',padding:'0 12px',fontFamily:BRAND.body,fontSize:14,color:BRAND.text}}>
      {value.slice(0,chars)}{filled>0&&filled<1&&<span style={{width:1.5,height:16,background:accent,marginLeft:1,display:'inline-block'}}/>}
    </div>
    <span style={{width:22,flex:'none',color:done?accent:BRAND.faint,opacity:done?1:.25}}>
      <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
    </span>
  </div>;
}

/* ---------------- Pipeline card ---------------- */
function PipeCard({role,co,tint=BRAND.violet,style}){
  return <div style={{background:BRAND.surface2,border:`1px solid ${BRAND.border}`,borderLeft:`3px solid ${tint}`,borderRadius:10,padding:'11px 13px',...style}}>
    <div style={{fontFamily:BRAND.display,fontWeight:600,fontSize:14.5,color:BRAND.text,lineHeight:1.25}}>{role}</div>
    <div style={{fontFamily:BRAND.mono,fontSize:11,color:BRAND.faint,marginTop:4}}>{co}</div>
  </div>;
}

/* ---------------- Pill button ---------------- */
function PillBtn({label,primary=true,accent,style}){
  return <div style={{display:'inline-flex',alignItems:'center',gap:9,padding:'12px 22px',borderRadius:12,
    fontFamily:BRAND.display,fontWeight:600,fontSize:16,
    background:primary?BRAND.grad:'transparent',color:primary?'#0b0712':BRAND.text,
    border:primary?'none':`1px solid ${BRAND.borderStrong}`,boxShadow:primary?`0 14px 36px -12px ${BRAND.glowViolet}`:'none',...style}}>
    {label}{primary&&<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>}
  </div>;
}

/* ---------------- Wordmark ---------------- */
function Wordmark({size=46}){
  return <div style={{display:'inline-flex',alignItems:'center',gap:12,fontFamily:BRAND.display,fontWeight:700,fontSize:size,letterSpacing:'-0.02em'}}>
    <span style={{width:size*0.92,height:size*0.92,borderRadius:size*0.26,background:BRAND.grad,display:'grid',placeItems:'center',boxShadow:`0 8px 28px -8px ${BRAND.glowViolet}`}}>
      <svg viewBox="0 0 24 24" width={size*0.5} height={size*0.5} fill="#0b0712"><path d="M12 2c.6 4.4 2.4 6.4 9 9-6.6 2.6-8.4 4.6-9 9-.6-4.4-2.4-6.4-9-9 6.6-2.6 8.4-4.6 9-9Z"/></svg>
    </span>
    <span style={{background:BRAND.grad,WebkitBackgroundClip:'text',backgroundClip:'text',color:'transparent'}}>{REEL.wordmark}</span>
  </div>;
}

Object.assign(window, {
  BRAND, REEL, rng, fadeInOut,
  Glow, Sparkles, Cursor, Caption, BrowserChrome, FitMeter, Field, PipeCard, PillBtn, Wordmark,
});