// Light variants — V3 的 DNA 转译到浅色底
// 三个 theme，共享同一组件：mint / paper / dim
// 保留 V3 的顶栏 Tab 切换、活体 Agent 视觉、对话流 demo

// 三个红调版本，顺应薪领航品牌色系
// V4 · 朱砂 / V5 · 锈红 / V6 · 红墨
const THEMES = {
  mint: {
    name:'V4 · 朱砂版',
    bg:'#FBF6F0',              // 暖白
    bg2:'#FFFFFF',
    panel:'#FFFFFF',
    line:'#ECE2D4',
    line2:'#D6C8B4',
    fg:'#1A130E',              // 墨色
    fgDim:'#574C42',
    fgMute:'#988A7A',
    accent:'#C5392E',          // 朱砂红 (vermillion)
    accentInk:'#FFFFFF',
    pop:'#E04E1A',             // 亮一点的朝阳红 / CTA
    popInk:'#FFFFFF',
    glow:'rgba(224,78,26,0.38)',
    coreA:'#E96B45',           // 核心球亮面
    coreB:'#8B1E14',           // 深夜酱阴面
    titleGradA:'#E04E1A',
    titleGradB:'#8B1E14',
    sans:'"DM Sans","Noto Sans SC",system-ui,sans-serif',
    mono:'"JetBrains Mono",ui-monospace,monospace',
  },
  paper: {
    name:'V5 · 锈红版',
    bg:'#F1ECDF',              // 米色纸感
    bg2:'#F9F4E8',
    panel:'#FCF8ED',
    line:'#E0D5BE',
    line2:'#BAA98A',
    fg:'#1F1812',
    fgDim:'#564C3F',
    fgMute:'#8A7E68',
    accent:'#A8341F',          // 锈红
    accentInk:'#F8F2E4',
    pop:'#C75A2E',             // 锈橙热点
    popInk:'#FBF6E8',
    glow:'rgba(199,90,46,0.42)',
    coreA:'#D27A4A',
    coreB:'#6E1F11',
    titleGradA:'#C75A2E',
    titleGradB:'#6E1F11',
    sans:'"DM Sans","Noto Sans SC",system-ui,sans-serif',
    mono:'"IBM Plex Mono",ui-monospace,monospace',
  },
  dim: {
    name:'V6 · 红墨版',
    bg:'#EEEAE3',              // 冷灰暖调
    bg2:'#F5F1E9',
    panel:'#F9F5EE',
    line:'#D9D2C3',
    line2:'#ADA493',
    fg:'#0E0A08',              // 深墨
    fgDim:'#3C342B',
    fgMute:'#7B7261',
    accent:'#0E0A08',          // 黑墨作主色 · 极简
    accentInk:'#E54530',
    pop:'#E54530',             // 唯一高亮色
    popInk:'#FFFFFF',
    glow:'rgba(229,69,48,0.5)',
    coreA:'#E54530',
    coreB:'#0E0A08',
    titleGradA:'#E54530',
    titleGradB:'#0E0A08',
    sans:'"DM Sans","Noto Sans SC",system-ui,sans-serif',
    mono:'"JetBrains Mono",ui-monospace,monospace',
  },
};

function LightHomepage({ themeKey='mint', tweaks }) {
  const C = THEMES[themeKey];
  const [tab, setTab] = React.useState(tweaks?.entryEmphasis==='hr'?'hr':'ent');
  React.useEffect(()=>{
    if(tweaks?.entryEmphasis==='hr') setTab('hr');
    else if(tweaks?.entryEmphasis==='client') setTab('ent');
  },[tweaks?.entryEmphasis]);

  const animId = `light-${themeKey}`;
  return (
    <div style={{background:C.bg,color:C.fg,minHeight:'100%',fontFamily:C.sans}}>
      <style>{`
        @keyframes ${animId}-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.045);opacity:0.96}}
        @keyframes ${animId}-spin{to{transform:rotate(360deg)}}
        @keyframes ${animId}-sway{0%,100%{transform:perspective(600px) rotateY(-12deg) scale(1)}50%{transform:perspective(600px) rotateY(12deg) scale(1.03)}}
        @keyframes ${animId}-twinkle{0%,100%{opacity:0;transform:scale(0.6)}50%{opacity:1;transform:scale(1)}}
        @keyframes ${animId}-shimmer{0%,100%{opacity:0.4}50%{opacity:0.9}}
        @keyframes ${animId}-headPulse{0%,100%{r:13}50%{r:13.6}}
        @keyframes ${animId}-petalL{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-4.25deg)}}
        @keyframes ${animId}-petalR{0%,100%{transform:rotate(0deg)}50%{transform:rotate(4.25deg)}}
      `}</style>
      <Hero C={C} tab={tab} animId={animId} tweaks={tweaks}/>
      <HowItWorks C={C}/>
      <Lifecycle C={C}/>
      <CTA C={C}/>
    </div>
  );
}

function Nav({C,tab,setTab}) {
  return (
    <div style={{position:'sticky',top:0,zIndex:20,background:`${C.bg}E0`,backdropFilter:'blur(12px)',borderBottom:`1px solid ${C.line}`,fontFamily:C.sans}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'16px 40px'}}>
        <div style={{display:'flex',alignItems:'center',gap:14}}>
          <svg width="34" height="34" viewBox="0 0 80 100" xmlns="http://www.w3.org/2000/svg" style={{filter:'drop-shadow(0 3px 6px rgba(140,20,30,0.45)) drop-shadow(0 0 8px rgba(229,69,48,0.35))'}}>
            <defs>
              <radialGradient id="navOrbDot" cx="35%" cy="30%" r="70%">
                <stop offset="0%" stopColor="#ff8e7a"/>
                <stop offset="55%" stopColor="#d63b4e"/>
                <stop offset="100%" stopColor="#7a1521"/>
              </radialGradient>
              <linearGradient id="navOrbPetal" x1="0%" y1="100%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#7a1521"/>
                <stop offset="100%" stopColor="#d63b4e"/>
              </linearGradient>
              <radialGradient id="navOrbSheen" cx="30%" cy="25%" r="55%">
                <stop offset="0%" stopColor="rgba(255,235,225,0.7)"/>
                <stop offset="100%" stopColor="rgba(255,235,225,0)"/>
              </radialGradient>
              <radialGradient id="navOrbDotHL" cx="30%" cy="22%" r="35%">
                <stop offset="0%" stopColor="rgba(255,255,255,0.95)"/>
                <stop offset="100%" stopColor="rgba(255,255,255,0)"/>
              </radialGradient>
            </defs>
            <g>
              <path d="M40,90 C8,80 -2,40 14,6 C22,28 30,58 40,90 Z" fill="url(#navOrbPetal)"/>
              <path d="M40,90 C8,80 -2,40 14,6 C22,28 30,58 40,90 Z" fill="url(#navOrbSheen)" style={{mixBlendMode:'screen'}}/>
              <path d="M40,90 C48,72 48,48 40,38 C32,48 32,72 40,90 Z" fill="url(#navOrbPetal)"/>
              <path d="M40,90 C48,72 48,48 40,38 C32,48 32,72 40,90 Z" fill="url(#navOrbSheen)" style={{mixBlendMode:'screen'}}/>
              <path d="M40,90 C68,80 76,46 62,16 C56,38 48,62 40,90 Z" fill="url(#navOrbPetal)"/>
              <path d="M40,90 C68,80 76,46 62,16 C56,38 48,62 40,90 Z" fill="url(#navOrbSheen)" style={{mixBlendMode:'screen'}}/>
            </g>
            <circle cx="40" cy="22" r="13" fill="url(#navOrbDot)"/>
            <circle cx="40" cy="22" r="13" fill="url(#navOrbDotHL)"/>
            <ellipse cx="35" cy="17" rx="4" ry="3" fill="rgba(255,255,255,0.85)"/>
          </svg>
          <span style={{color:C.fg,fontWeight:700,fontSize:18,letterSpacing:-0.3}}>AI HR Agent</span>
          <span style={{fontFamily:C.mono,fontSize:10,color:C.accent,padding:'3px 7px',background:C.bg2,border:`1px solid ${C.line2}`,borderRadius:4,letterSpacing:1}}>LIVE</span>
        </div>

        <div style={{display:'flex',gap:4,padding:4,background:C.bg2,border:`1px solid ${C.line}`,borderRadius:999}}>
          {[
            {id:'ent',label:'企 业 客户端',sub:'/employer'},
            {id:'hr',label:'HR 公司端',sub:'/operator'},
          ].map(o=>{
            const active = tab===o.id;
            return (
              <button key={o.id} onClick={()=>setTab(o.id)} style={{
                padding:'8px 16px',borderRadius:999,border:0,cursor:'pointer',
                background:active?C.accent:'transparent',
                color:active?C.accentInk:C.fgDim,
                fontFamily:C.sans,fontSize:13,fontWeight:600,letterSpacing:0.2,
                transition:'all .2s',display:'flex',alignItems:'center',gap:8,
                boxShadow:active?`0 2px 8px ${C.accent}55,0 0 0 1px ${C.accent}`:'none',
              }}>
                <span>{o.label}</span>
                <span style={{fontFamily:C.mono,fontSize:10,opacity:0.55}}>{o.sub}</span>
              </button>
            );
          })}
        </div>

        <div style={{display:'flex',gap:10,alignItems:'center'}}>
          <a href="https://ai.xlh1997.com" style={{textDecoration:'none'}}>
            <button style={{background:'transparent',border:0,color:C.fgDim,fontSize:14,cursor:'pointer'}}>登录</button>
          </a>
          <a href="https://ai.xlh1997.com" style={{textDecoration:'none'}}>
            <button style={{
              background:C.pop,color:C.popInk,border:0,padding:'10px 18px',borderRadius:999,
              fontFamily:C.sans,fontSize:14,fontWeight:700,cursor:'pointer',
              boxShadow:`0 1px 0 ${C.accent}33,0 6px 16px ${C.glow}`,
            }}>开始 14 天试运行</button>
          </a>
        </div>
      </div>
    </div>
  );
}

function Hero({C,tab,animId,tweaks={}}) {
  const punchy = tweaks.heroCopy === 'punchy';
  const ambient = tweaks.ambient || 'subtle';
  const glowOp = ambient==='none'?0:ambient==='strong'?1.5:1;
  const gridOp = ambient==='none'?0:ambient==='strong'?0.75:0.5;

  const conf = tab==='hr' ? (punchy ? {
    kicker:'FOR HR FIRMS · 把你的人放大 5 倍',
    title:<>一个 Agent，<span style={{color:C.accent}}>顶 5 个 HR</span>。</>,
    desc:'你的 HR 专家只做 20% 的关键决策——剩下 80% 的日常对话、流程、起单，全部交给 Agent。',
    bullets:['多租户统一管理','Agent 训练中心','SLA 工单分流','计费结算自动化'],
    cta1:'查看 Operator Console',cta2:'样板客户案例 →',
  } : {
    kicker:'FOR HR FIRMS · 你的客户都在这里',
    title:<>把你的 <span style={{color:C.accent}}>HR 专家</span> 放大 5 倍</>,
    desc:'AI Agent 处理 80% 的日常事务，把你的资深 HR 留给真正需要判断的 20% 复杂场景——薪酬谈判、劳动纠纷、组织设计。',
    bullets:['多租户统一管理','Agent 训练 / 策略中心','工单分流与 SLA 看板','计费 · 结算 · 续约自动化'],
    cta1:'查看 Operator Console',cta2:'看一份样板客户案例 →',
  }) : (punchy ? {
    kicker:'FOR EMPLOYERS · 不必再设 HR 岗位',
    title:<>不用养 HR。<br/><span style={{color:C.accent}}>问</span> 智能体就够了</>,
    desc:'招聘、入职、考勤、薪酬、离职——员工开口问，系统当场办。80% 自动闭环，20% 我们的专家接管。',
    bullets:['24/7 员工自助','流程一键发起','合规自动留痕','专家 HR 备援'],
    cta1:'打开员工工作台 →',cta2:'算一下我能省多少',
  } : {
    kicker:'FOR EMPLOYERS · 给没有 HR 的公司',
    title:<>员工有事，<span style={{color:C.accent}}>问</span> 智能体就够了</>,
    desc:'招聘、入职、考勤、薪酬、绩效、离职——员工每天通过对话获得答案与办事流程，80% 当场闭环。复杂的事，转给我们的人工专家。',
    bullets:['员工自助 24/7 问答','流程一键发起 / 审批','合规留痕 · 风险预警','一线 HR 专家备援'],
    cta1:'打开员工工作台 →',cta2:'我有多少员工？算一下',
  });

  return (
    <section style={{position:'relative',padding:'72px 40px 56px',overflow:'hidden'}}>
      <div style={{position:'absolute',top:-200,right:-100,width:700,height:700,borderRadius:'50%',background:`radial-gradient(circle,${C.glow},transparent 65%)`,filter:'blur(20px)',pointerEvents:'none',opacity:glowOp}}/>
      <div style={{position:'absolute',inset:0,backgroundImage:`radial-gradient(circle at 1px 1px,${C.line2}55 1px,transparent 0)`,backgroundSize:'24px 24px',opacity:gridOp,maskImage:'radial-gradient(ellipse 60% 70% at 70% 30%,#000,transparent 70%)'}}/>

      <div style={{display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:48,alignItems:'center',position:'relative',minHeight:600}}>
        <div>
          <div style={{
            display:'inline-flex',alignItems:'center',gap:8,fontFamily:C.mono,fontSize:11,color:C.accent,
            padding:'5px 11px',background:C.bg2,border:`1px solid ${C.line2}`,borderRadius:999,marginBottom:28,letterSpacing:1,
          }}>
            <span style={{width:6,height:6,borderRadius:'50%',background:C.pop,boxShadow:`0 0 6px ${C.pop}`}}/>
            {conf.kicker}
          </div>
          <h1 style={{margin:0,fontSize:84,lineHeight:1,letterSpacing:-3,color:C.fg,fontWeight:700}}>{conf.title}</h1>
          <p style={{color:C.fgDim,fontSize:19,lineHeight:1.6,marginTop:24,maxWidth:560}}>{conf.desc}</p>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginTop:32,maxWidth:560}}>
            {conf.bullets.map(b=>(
              <div key={b} style={{display:'flex',alignItems:'center',gap:10,fontSize:14,color:C.fg,padding:'10px 12px',background:C.bg2,border:`1px solid ${C.line}`,borderRadius:8}}>
                <span style={{width:6,height:6,background:C.pop,borderRadius:'50%',boxShadow:`0 0 8px ${C.pop}`}}/>
                {b}
              </div>
            ))}
          </div>

          <div style={{display:'flex',gap:12,marginTop:36,alignItems:'center'}}>
            <a href="https://ai.xlh1997.com" style={{textDecoration:'none'}}>
              <button style={{background:C.pop,color:C.popInk,border:0,padding:'14px 22px',borderRadius:999,fontFamily:C.sans,fontSize:15,fontWeight:700,cursor:'pointer',boxShadow:`0 8px 24px ${C.glow}`}}>{conf.cta1}</button>
            </a>
            <button style={{background:'transparent',color:C.fg,border:`1px solid ${C.line2}`,padding:'14px 22px',borderRadius:999,fontSize:14,cursor:'pointer'}}>{conf.cta2}</button>
          </div>
        </div>

        <LiveAgent C={C} animId={animId}/>
      </div>

      <div style={{
        marginTop:64,padding:'24px 28px',background:C.bg2,border:`1px solid ${C.line}`,borderRadius:14,
        display:'grid',gridTemplateColumns:'1.6fr 1fr 1fr 1fr 1fr',gap:32,alignItems:'center',
        boxShadow:`0 1px 0 ${C.line},0 10px 30px ${C.line}55`,
      }}>
        <div style={{fontFamily:C.mono,fontSize:11,color:C.accent,letterSpacing:1.5}}>
          ▎当前在线 · 实时数据<br/>
          <span style={{color:C.fgMute,letterSpacing:0.5}}>从 1,247 家企业聚合 · 更新于 14:08</span>
        </div>
        {[
          ['对话','7,492','本小时'],
          ['闭环','5,994','由 Agent'],
          ['转人工','1,498','20% SLA'],
          ['平均响应','1:43','分:秒'],
        ].map(([k,v,s])=>(
          <div key={k} style={{borderLeft:`1px solid ${C.line}`,paddingLeft:20}}>
            <div style={{fontFamily:C.mono,fontSize:11,color:C.fgMute,letterSpacing:1}}>{k.toUpperCase()}</div>
            <div style={{fontSize:28,color:C.fg,fontWeight:700,letterSpacing:-0.5,marginTop:2,fontFamily:C.mono}}>{v}</div>
            <div style={{fontSize:11,color:C.fgMute,fontFamily:C.mono,marginTop:2}}>{s}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function LiveAgent({C,animId}) {
  return (
    <div style={{position:'relative',width:'100%',aspectRatio:'1/1',maxWidth:520,marginLeft:'auto'}}>
      {[300,220,140].map((s,i)=>(
        <div key={s} style={{
          position:'absolute',left:'50%',top:'50%',width:s+200,height:s+200,marginLeft:-(s+200)/2,marginTop:-(s+200)/2,
          border:`1px dashed ${C.line2}`,borderRadius:'50%',animation:`${animId}-spin ${30+i*15}s linear infinite ${i%2?'reverse':''}`,
        }}>
          {[0,120,240].map(deg=>(
            <div key={deg} style={{
              position:'absolute',left:'50%',top:0,marginLeft:-4,width:8,height:8,
              background:i===0?C.pop:C.accent,borderRadius:'50%',
              transform:`rotate(${deg}deg) translateY(0)`,boxShadow:`0 0 10px ${C.glow}`,
            }}/>
          ))}
        </div>
      ))}

      {[
        {label:'招聘',deg:30,r:260},{label:'入职',deg:80,r:280},{label:'考勤',deg:130,r:260},
        {label:'薪酬',deg:180,r:280},{label:'绩效',deg:230,r:260},{label:'离职',deg:280,r:280},{label:'合规',deg:330,r:260},
      ].map(o=>{
        const x = Math.cos(o.deg*Math.PI/180)*o.r;
        const y = Math.sin(o.deg*Math.PI/180)*o.r;
        return (
          <div key={o.label} style={{
            position:'absolute',left:`calc(50% + ${x}px)`,top:`calc(50% + ${y}px)`,transform:'translate(-50%,-50%)',
            padding:'4px 10px',background:C.bg2,border:`1px solid ${C.line2}`,borderRadius:999,
            fontFamily:C.mono,fontSize:11,color:C.fgDim,letterSpacing:1,whiteSpace:'nowrap',
            boxShadow:`0 2px 8px ${C.line}88`,
          }}>{o.label}</div>
        );
      })}

      <div style={{
        position:'absolute',left:'50%',top:'50%',width:216,height:297,marginLeft:-108,marginTop:-175,
        animation:`${animId}-sway 4.5s ease-in-out infinite`,
        transformOrigin:'50% 90%',
        filter:'drop-shadow(0 22px 50px rgba(140,20,30,0.42)) drop-shadow(0 0 80px rgba(229,69,48,0.4))',
      }}>
        <svg viewBox="0 0 80 100" xmlns="http://www.w3.org/2000/svg" width="216" height="270">
          <defs>
            <radialGradient id={`${animId}-dot`} cx="35%" cy="30%" r="70%">
              <stop offset="0%" stopColor="#ff8e7a"/>
              <stop offset="55%" stopColor="#d63b4e"/>
              <stop offset="100%" stopColor="#7a1521"/>
            </radialGradient>
            <linearGradient id={`${animId}-petal`} x1="0%" y1="100%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#7a1521"/>
              <stop offset="100%" stopColor="#d63b4e"/>
            </linearGradient>
            <radialGradient id={`${animId}-petalSheen`} cx="30%" cy="25%" r="55%">
              <stop offset="0%" stopColor="rgba(255,235,225,0.7)"/>
              <stop offset="40%" stopColor="rgba(255,235,225,0.15)"/>
              <stop offset="100%" stopColor="rgba(255,235,225,0)"/>
            </radialGradient>
            <radialGradient id={`${animId}-dotHL`} cx="30%" cy="22%" r="35%">
              <stop offset="0%" stopColor="rgba(255,255,255,0.95)"/>
              <stop offset="60%" stopColor="rgba(255,255,255,0.3)"/>
              <stop offset="100%" stopColor="rgba(255,255,255,0)"/>
            </radialGradient>
            <filter id={`${animId}-glow`} x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="0.6" result="blur"/>
              <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
            </filter>
          </defs>
          <g>
            <g style={{animation:`${animId}-petalL 4.2s ease-in-out infinite`,transformOrigin:'40px 90px'}}>
              <path d="M40,90 C8,80 -2,40 14,6 C22,28 30,58 40,90 Z" fill={`url(#${animId}-petal)`}/>
              <path d="M40,90 C8,80 -2,40 14,6 C22,28 30,58 40,90 Z" fill={`url(#${animId}-petalSheen)`} style={{mixBlendMode:'screen'}}/>
            </g>
            <path d="M40,90 C48,72 48,48 40,38 C32,48 32,72 40,90 Z" fill={`url(#${animId}-petal)`}/>
            <path d="M40,90 C48,72 48,48 40,38 C32,48 32,72 40,90 Z" fill={`url(#${animId}-petalSheen)`} style={{mixBlendMode:'screen'}}/>
            <g style={{animation:`${animId}-petalR 4.2s ease-in-out infinite`,transformOrigin:'40px 90px'}}>
              <path d="M40,90 C68,80 76,46 62,16 C56,38 48,62 40,90 Z" fill={`url(#${animId}-petal)`}/>
              <path d="M40,90 C68,80 76,46 62,16 C56,38 48,62 40,90 Z" fill={`url(#${animId}-petalSheen)`} style={{mixBlendMode:'screen'}}/>
            </g>
          </g>
          <circle cx="40" cy="22" r="13" fill={`url(#${animId}-dot)`} style={{animation:`${animId}-headPulse 2.4s ease-in-out infinite`,transformOrigin:'40px 22px'}}/>
          <circle cx="40" cy="22" r="13" fill={`url(#${animId}-dotHL)`}/>
          <ellipse cx="35" cy="17" rx="4" ry="3" fill="rgba(255,255,255,0.9)" style={{animation:`${animId}-shimmer 2.4s ease-in-out infinite`}}/>
          {/* sparkle stars */}
          <g fill="#fff">
            <circle cx="20" cy="30" r="0.9" style={{animation:`${animId}-twinkle 2.2s ease-in-out infinite`,transformOrigin:'20px 30px'}}/>
            <circle cx="62" cy="45" r="1.1" style={{animation:`${animId}-twinkle 2.8s ease-in-out 0.5s infinite`,transformOrigin:'62px 45px'}}/>
            <circle cx="30" cy="60" r="0.8" style={{animation:`${animId}-twinkle 3s ease-in-out 1s infinite`,transformOrigin:'30px 60px'}}/>
            <circle cx="54" cy="70" r="1" style={{animation:`${animId}-twinkle 2.5s ease-in-out 1.4s infinite`,transformOrigin:'54px 70px'}}/>
            <circle cx="48" cy="12" r="0.7" style={{animation:`${animId}-twinkle 2s ease-in-out 0.8s infinite`,transformOrigin:'48px 12px'}}/>
          </g>
        </svg>
        <div style={{position:'absolute',bottom:0,left:'50%',transform:'translateX(-50%)',textAlign:'center'}}>
          <div style={{display:'inline-flex',flexDirection:'column',alignItems:'center',gap:2,padding:'8px 18px',background:'linear-gradient(135deg,#7a1521,#d63b4e)',borderRadius:99,boxShadow:'0 8px 22px rgba(140,20,30,0.45),0 0 0 2px rgba(255,255,255,0.15) inset',color:'#fff'}}>
            <div style={{fontFamily:C.mono,fontSize:11,letterSpacing:3,opacity:0.95,fontWeight:700}}>薪AI</div>
            <div style={{fontSize:32,fontWeight:900,fontFamily:C.sans,letterSpacing:-1,lineHeight:0.95,textShadow:'0 2px 6px rgba(0,0,0,0.35)'}}>80<span style={{fontSize:18,marginLeft:2}}>%</span></div>
          </div>
        </div>
      </div>

      <svg style={{position:'absolute',inset:0,width:'100%',height:'100%',pointerEvents:'none'}} viewBox="0 0 520 520">
        <defs>
          <linearGradient id={`${animId}-line`} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor={C.accent} stopOpacity="0"/>
            <stop offset="1" stopColor={C.accent} stopOpacity="0.5"/>
          </linearGradient>
        </defs>
        {[20,80,150,220,290,340].map((deg,i)=>{
          const r1=110,r2=240;
          const x1=260+Math.cos(deg*Math.PI/180)*r1, y1=260+Math.sin(deg*Math.PI/180)*r1;
          const x2=260+Math.cos(deg*Math.PI/180)*r2, y2=260+Math.sin(deg*Math.PI/180)*r2;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={`url(#${animId}-line)`} strokeWidth="1"/>;
        })}
      </svg>
    </div>
  );
}

function HowItWorks({C}) {
  return (
    <section style={{padding:'80px 40px',borderTop:`1px solid ${C.line}`,position:'relative',background:C.bg2}}>
      <SectionHeader C={C} code="// agent_at_work" title="一次对话，三层动作。" sub="员工只说一句话，系统在背后做了三件事：调取知识、判断政策、起单执行。"/>

      <div style={{marginTop:48,display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:0,border:`1px solid ${C.line2}`,borderRadius:14,overflow:'hidden',background:C.panel}}>
        {[
          {n:'01',k:'员工提问',body:'"下周三我老婆预产期，陪产假能休多久？需要什么材料？"',hint:'员工微信 / 飞书 / 钉钉 / 网页，任意入口。'},
          {n:'02',k:'Agent 思考',body:'检索员工手册 v3.2 · §7 → 上海地区男方 → 入职 412 天 → 满足。引用条目可追溯到段落。',hint:'12 + 8 + 4 ms · 知识级溯源 · 政策实时同步。'},
          {n:'03',k:'自动闭环',body:'生成请假单 #LV-887731 · 通知主管 · 同步飞书日历 · 留痕至合规档案。',hint:'平均闭环 1.5 小时 · 全过程可审计。'},
        ].map((s,i)=>(
          <div key={s.n} style={{padding:32,borderRight:i<2?`1px solid ${C.line}`:0,position:'relative'}}>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:18}}>
              <div style={{fontFamily:C.mono,fontSize:11,padding:'3px 8px',background:C.pop,color:C.popInk,borderRadius:4,letterSpacing:1,fontWeight:700}}>{s.n}</div>
              <div style={{fontFamily:C.mono,fontSize:11,color:C.fgMute,letterSpacing:1}}>STEP_{i+1}</div>
            </div>
            <h3 style={{margin:'0 0 14px',fontSize:24,color:C.fg,letterSpacing:-0.5,fontWeight:700}}>{s.k}</h3>
            <div style={{
              padding:14,background:C.bg,borderRadius:10,border:`1px solid ${C.line}`,
              fontSize:14,color:C.fg,lineHeight:1.55,minHeight:90,
            }}>{s.body}</div>
            <div style={{fontFamily:C.mono,fontSize:11,color:C.fgMute,marginTop:14,lineHeight:1.5}}>{s.hint}</div>
          </div>
        ))}
      </div>

      <div style={{marginTop:36,padding:28,background:C.panel,border:`1px solid ${C.line2}`,borderRadius:14,display:'grid',gridTemplateColumns:'auto 1fr',gap:32,alignItems:'center'}}>
        <div style={{display:'flex',alignItems:'center',gap:14}}>
          <div style={{display:'flex',width:280,height:14,borderRadius:99,overflow:'hidden',background:C.bg}}>
            <div style={{width:'80%',background:`linear-gradient(90deg,${C.pop},${C.accent})`}}/>
            <div style={{width:'20%',background:C.fgMute}}/>
          </div>
        </div>
        <div style={{display:'flex',alignItems:'baseline',gap:20,flexWrap:'wrap'}}>
          <div>
            <span style={{fontFamily:C.mono,fontSize:24,color:C.accent,fontWeight:700}}>80%</span>
            <span style={{color:C.fg,fontSize:15,marginLeft:8}}>Agent 自主</span>
          </div>
          <div style={{color:C.fgMute,fontFamily:C.mono,fontSize:13}}>+</div>
          <div>
            <span style={{fontFamily:C.mono,fontSize:24,color:C.fg,fontWeight:700}}>20%</span>
            <span style={{color:C.fg,fontSize:15,marginLeft:8}}>我们的 HR 专家接手</span>
          </div>
          <div style={{color:C.fgDim,fontSize:14,marginLeft:'auto'}}>= 1 套不会请假、不会离职、永远在线的"HR 部门"</div>
        </div>
      </div>
    </section>
  );
}

function Lifecycle({C}) {
  return (
    <section style={{padding:'80px 40px',borderTop:`1px solid ${C.line}`}}>
      <SectionHeader C={C} code="// lifecycle" title="员工的三段路，我们陪走完。"/>
      <div style={{marginTop:48,position:'relative'}}>
        <div style={{position:'absolute',left:'50%',top:30,bottom:30,width:2,background:`linear-gradient(180deg,${C.pop},${C.accent},${C.fgMute})`,opacity:0.5}}/>

        {[
          {n:'01',k:'招聘 / 入职',side:'left',
           items:[
             'JD 智能撰写 → 渠道分发 → 简历筛选',
             'AI 初面 → 面评结构化 → 推荐评级',
             'Offer / 合同自动生成 · 按地区适配',
             '背调 · 报到 · 装备 · 培训一键发起',
           ]},
          {n:'02',k:'在 职',side:'right',
           items:[
             '考勤 · 请假 · 调岗 · 报销 自助完成',
             '薪酬核算 · 个税 · 五险一金按城市规则',
             'OKR / KPI · 季度复盘 · 360 反馈',
             '24/7 员工问答 · 政策实时溯源',
           ]},
          {n:'03',k:'离 职',side:'left',
           items:[
             '离职面谈结构化 · AI 情感分析',
             '工作交接清单 · 工资结算 · 社保减员',
             '离职证明 / 档案归档全部留痕',
             '离职原因看板 · 流失预警回路',
           ]},
        ].map((s,i)=>{
          const left = s.side==='left';
          return (
            <div key={s.n} style={{
              display:'grid',gridTemplateColumns:'1fr 60px 1fr',gap:0,
              marginBottom:i<2?40:0,alignItems:'center',
            }}>
              <div style={{
                gridColumn:left?'1':'3',
                background:C.panel,border:`1px solid ${C.line2}`,borderRadius:14,padding:28,
                boxShadow:`0 1px 0 ${C.line},0 8px 20px ${C.line}66`,
              }}>
                <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',marginBottom:14}}>
                  <h3 style={{margin:0,fontSize:28,color:C.fg,fontWeight:700,letterSpacing:-0.5}}>{s.k}</h3>
                  <div style={{fontFamily:C.mono,fontSize:11,color:C.accent,letterSpacing:1}}>STAGE.{s.n}</div>
                </div>
                <div style={{display:'grid',gap:8}}>
                  {s.items.map(it=>(
                    <div key={it} style={{display:'flex',gap:10,alignItems:'flex-start',fontSize:14,color:C.fgDim,lineHeight:1.5}}>
                      <span style={{color:C.accent,fontFamily:C.mono,fontWeight:700}}>›</span>{it}
                    </div>
                  ))}
                </div>
              </div>
              <div style={{gridColumn:'2',display:'flex',justifyContent:'center',alignItems:'center'}}>
                <div style={{
                  width:48,height:48,borderRadius:'50%',background:C.bg,border:`2px solid ${C.accent}`,
                  display:'flex',alignItems:'center',justifyContent:'center',
                  fontFamily:C.mono,fontSize:13,color:C.accent,fontWeight:700,
                  boxShadow:`0 0 18px ${C.glow}`,
                }}>{s.n}</div>
              </div>
              <div style={{gridColumn:left?'3':'1'}}/>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function CTA({C}) {
  return (
    <section style={{padding:'100px 40px',position:'relative',overflow:'hidden',borderTop:`1px solid ${C.line}`,background:C.bg2}}>
      <div style={{position:'absolute',inset:0,background:`radial-gradient(ellipse 80% 100% at 50% 100%,${C.glow},transparent 70%)`,filter:'blur(20px)'}}/>
      <div style={{position:'relative',textAlign:'center',maxWidth:900,margin:'0 auto'}}>
        <div style={{fontFamily:C.mono,fontSize:11,color:C.accent,letterSpacing:2,marginBottom:18}}>● 准备好上线 Agent 了</div>
        <h2 style={{margin:0,fontSize:72,letterSpacing:-2.5,color:C.fg,fontWeight:700,lineHeight:1}}>
          让 HR 变成<br/>
          <span style={{color:C.accent}}>每天都在跑的</span><span style={{
            background:`linear-gradient(120deg,${C.titleGradA},${C.titleGradB})`,
            WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',
          }}> 程序</span>。
        </h2>
        <p style={{color:C.fgDim,fontSize:18,marginTop:24,lineHeight:1.6}}>14 天免费试运行 · 资深 HR 协助接入 · 不满意全额退</p>
        <div style={{display:'flex',gap:12,justifyContent:'center',marginTop:36}}>
          <button style={{background:C.pop,color:C.popInk,border:0,padding:'16px 32px',borderRadius:999,fontSize:16,fontWeight:700,cursor:'pointer',boxShadow:`0 10px 30px ${C.glow}`}}>启动我的 Agent →</button>
          <button style={{background:'transparent',color:C.fg,border:`1px solid ${C.line2}`,padding:'16px 28px',borderRadius:999,fontSize:14,cursor:'pointer'}}>看一份样本报告</button>
        </div>
      </div>
      <div style={{marginTop:80,paddingTop:24,borderTop:`1px solid ${C.line}`,display:'flex',justifyContent:'space-between',color:C.fgMute,fontFamily:C.mono,fontSize:11,letterSpacing:1}}>
        <span>© 2026 · AI HR Agent · 系统正常 ●</span>
        <span style={{display:'flex',gap:24}}><a>API</a><a>状态</a><a>隐私</a><a>条款</a></span>
      </div>
    </section>
  );
}

function SectionHeader({C,code,title,sub}) {
  return (
    <div style={{maxWidth:780}}>
      <div style={{fontFamily:C.mono,fontSize:11,color:C.accent,letterSpacing:1.5,marginBottom:14}}>{code}</div>
      <h2 style={{margin:0,fontSize:48,color:C.fg,letterSpacing:-1.4,fontWeight:700,lineHeight:1.05}}>{title}</h2>
      {sub && <p style={{color:C.fgDim,fontSize:17,marginTop:14,lineHeight:1.55}}>{sub}</p>}
    </div>
  );
}

Object.assign(window, { LightHomepage, LIGHT_THEMES: THEMES });