// wizard-scene.jsx — Simple-mode wizard, matched to the real full-width app (English, Segoe UI).
const { T, UI_FONT, MONO, Logo, Cursor, Field, Caret, Btn, Seg, Chip, Card, ease, clamp01, seg } = window;
const { useSprite, Easing, interpolate } = window;

const CARD = { x:36, y:24, w:1528, h:852 };
const MAIN_X = 420, MAIN_W = 1100;          // wide main column
const COL_W = 525, COL2 = 575;               // two-column grid

function typed(full, lt, s, dur){
  const p = clamp01((lt - s) / dur);
  return full.slice(0, Math.ceil(full.length * p));
}

const RAIL = [['1','Access key'], ['2','Phone number'], ['3','Business'], ['4','Details']];
function RailStep({ n, label, active, top }) {
  return <div style={{ position:'absolute', left:0, top, width:300, height:56,
    display:'flex', alignItems:'center', gap:15, padding:'0 16px', borderRadius:12,
    background: active?T.surface2:'transparent',
    border:`1px solid ${active?T.border2:'transparent'}` }}>
    <div style={{ width:32, height:32, borderRadius:'50%', flex:'none',
      display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:15,
      background: active?T.accent:T.surface3, color: active?'#fff':T.muted }}>{n}</div>
    <span style={{ fontSize:16, fontWeight:600, color: active?T.text:T.muted }}>{label}</span>
  </div>;
}

function StepLabel({ children, link }) {
  return <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:18 }}>
    <span style={{ fontSize:19, fontWeight:600, color:T.text }}>{children}</span>
    <span style={{ width:18, height:18, borderRadius:'50%', background:T.surface3, color:T.muted,
      fontSize:11, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>?</span>
    {link && <span style={{ color:T.accent2, fontSize:13, marginLeft:6 }}>{link}</span>}
  </div>;
}

// ── Step 1 — Access key ──────────────────────────────────────────────────────
function Step1({ lt }) {
  const key = typed('hanc_sk_8f3a09c4e7b21d65f0a9c8', lt, 2.0, 2.0).replace(/./g,'•');
  const focus = lt>1.7 && lt<5.4;
  return <div>
    <StepLabel link="Where to get the key?">Paste your HANC access key</StepLabel>
    <div style={{ width:760, height:48, borderRadius:8, background:T.surface2,
      border:`1px solid ${focus?T.accent:T.border}`, display:'flex', alignItems:'center',
      padding:'0 14px', fontSize:16, letterSpacing:'2px', color:T.text }}>
      {key || <span style={{ color:T.faint, letterSpacing:0, fontSize:15 }}>key from app.hanc.me → Integration → API Keys</span>}
      {focus && <Caret />}
    </div>
    <div style={{ marginTop:16, fontSize:14, color:T.muted, maxWidth:760 }}>
      The agent is created in <b style={{color:T.text}}>your</b> HANC account. The key is stored only on your side.
    </div>
  </div>;
}

// ── Step 2 — Phone number ────────────────────────────────────────────────────
const NUMBERS = [['+34 911 23 45 67','Madrid · primary'], ['+34 611 88 90 12','mobile'], ['+49 30 5557 0420','Berlin']];
function Step2({ lt }) {
  const sel = lt>8.6 ? 0 : -1;
  return <div>
    <StepLabel>Your phone number for calls</StepLabel>
    <div style={{ fontSize:14, color:T.muted, marginTop:-10, marginBottom:18, maxWidth:820 }}>
      Pick a number you bought in HANC — human-transfer calls go to it.</div>
    <div style={{ display:'flex', flexDirection:'column', gap:10, width:820 }}>
      {NUMBERS.map(([num,tag],i)=>(
        <div key={i} style={{ height:62, borderRadius:11, padding:'0 18px', display:'flex',
          alignItems:'center', gap:14,
          background: i===sel?'rgba(255,106,26,.10)':T.surface2,
          border:`1px solid ${i===sel?T.accent:T.border}` }}>
          <div style={{ width:20, height:20, borderRadius:'50%', flex:'none',
            border:`2px solid ${i===sel?T.accent:T.border2}`, background:i===sel?T.accent:'transparent',
            display:'flex', alignItems:'center', justifyContent:'center' }}>
            {i===sel && <div style={{ width:7, height:7, borderRadius:'50%', background:'#fff' }} />}</div>
          <span style={{ fontSize:17, fontWeight:600, color:T.text, fontFamily:MONO }}>{num}</span>
          <span style={{ fontSize:13.5, color:T.muted, marginLeft:'auto' }}>{tag}</span>
        </div>
      ))}
    </div>
  </div>;
}

// ── Step 3 — Business (the real wide layout) ─────────────────────────────────
const EX = ['Dental','Food delivery','Auto service','Beauty salon','Real estate'];
const DOES = ['Books appointments','Takes orders','Answers questions','Calls and sells','Advises'];
function Step3({ lt }) {
  const filled = lt>14.6;
  const biz = filled ? typed('“White Tooth” dental clinic', lt, 14.9, 1.4) : '';
  const serv = lt>15.3 ? 'cleaning — €50, consultation — free' : '';
  const doOn = [lt>15.7, false, lt>16.1, false, false];
  const collect = lt>16.6 ? 'name, phone' : '';
  const esc = lt>17.0 ? 'on a complaint or a hard question' : '';
  return <div>
    {/* row 0 — depth toggle (left) + document row (right) */}
    <div style={{ display:'flex', alignItems:'center', gap:16, height:46 }}>
      <Seg items={['Quick','Detailed']} active={0} />
      <span style={{ fontSize:13.5, color:T.muted }}>Detailed — more questions, a sharper and smarter agent.</span>
      <div style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:10 }}>
        <span style={{ fontSize:13.5, color:T.accent2, fontWeight:600 }}>Or via a document:</span>
        <div style={{ height:36, padding:'0 12px', borderRadius:8, background:T.surface2, border:`1px solid ${T.border}`,
          display:'flex', alignItems:'center', gap:8, fontSize:13, color:T.text }}>DOCX
          <svg width="14" height="14" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke={T.muted} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg></div>
        <Btn>↓ Download template</Btn>
        <Btn>⎘ Upload filled</Btn>
      </div>
    </div>
    {/* examples */}
    <div style={{ fontSize:14, color:T.muted, margin:'22px 0 12px' }}>Or pick an example — it fills the fields:</div>
    <div style={{ display:'flex', gap:10, flexWrap:'wrap', marginBottom:26 }}>
      {EX.map((e,i)=><Chip key={i} on={i===0 && filled}>{e}</Chip>)}
    </div>
    {/* fields grid */}
    <div style={{ position:'relative', height:340 }}>
      <div style={{ position:'absolute', left:0, top:0, width:COL_W }}>
        <Field label="What’s the business?" hint="name and field" help value={biz} ph="“White Tooth” dental clinic" focus={lt>14.9 && lt<16.4} /></div>
      <div style={{ position:'absolute', left:COL2, top:0, width:COL_W }}>
        <Field label="Services and prices" hint="what you offer (optionally with prices)" help value={serv} ph="cleaning — €50, consultation — free" /></div>
      <div style={{ position:'absolute', left:0, top:108, width:MAIN_W }}>
        <div style={{ fontSize:16, fontWeight:600, color:T.text, marginBottom:2 }}>What should the agent do?</div>
        <div style={{ fontSize:13.5, color:T.muted, marginBottom:10 }}>select what fits (multiple allowed)</div>
        <div style={{ display:'flex', gap:10, flexWrap:'wrap' }}>
          {DOES.map((d,i)=><Chip key={i} on={doOn[i]}>{d}</Chip>)}
        </div>
        <div style={{ marginTop:12, height:48, borderRadius:8, background:T.surface2, border:`1px solid ${T.border}`,
          display:'flex', alignItems:'center', padding:'0 14px', fontSize:15, color:T.faint }}>anything else in your words (optional)</div>
      </div>
      <div style={{ position:'absolute', left:0, top:262, width:COL_W }}>
        <Field label="What to ask the caller?" hint="what data to collect" help value={collect} ph="name, phone" /></div>
      <div style={{ position:'absolute', left:COL2, top:262, width:COL_W }}>
        <Field label="When to transfer to a human?" hint="optional" help value={esc} ph="on a complaint or a hard question" /></div>
    </div>
  </div>;
}

// ── Step 4 — Details ─────────────────────────────────────────────────────────
function Step4({ lt }) {
  const voice = lt>29.6 ? 1 : 0;
  const cell = (children,x,top)=> <div style={{ position:'absolute', left:x, top, width:COL_W }}>{children}</div>;
  return <div>
    <div style={{ fontSize:16, color:T.muted, marginBottom:24 }}>Details (optional) — otherwise I’ll pick them</div>
    <div style={{ position:'relative', height:340 }}>
      {cell(<Field label="Agent name" help value="Alice" ph="how it introduces itself" />, 0, 0)}
      {cell(<Field label="Transfer phone" help value="+34 911 23 45 67" ph="" />, COL2, 0)}
      {cell(<Field label="Agent language" help>
        <div style={{ height:48, borderRadius:8, background:T.surface2, border:`1px solid ${T.border}`,
          display:'flex', alignItems:'center', padding:'0 14px', fontSize:15, color:T.text }}>English
          <svg width="16" height="16" viewBox="0 0 24 24" style={{ marginLeft:'auto' }}><path d="M6 9l6 6 6-6" fill="none" stroke={T.muted} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div></Field>, 0, 132)}
      {cell(<Field label="Voice" help>
        <div style={{ marginTop:2 }}><Seg items={['Voice: auto','Female','Male']} active={voice} /></div>
      </Field>, COL2, 132)}
    </div>
  </div>;
}

function WizardScene({ start, end }) {
  return <Sprite start={start} end={end}>{({ localTime: lt, duration })=>{
    const intro = seg(lt, 0, 0.9, Easing.easeOutCubic);
    const out = seg(lt, duration-0.5, duration, Easing.easeInCubic);
    const step = lt<6 ? 0 : lt<11.7 ? 1 : lt<26.2 ? 2 : 3;
    const building = lt>34.4;
    const nextLabel = step<3 ? 'Next →' : (building ? 'Creating…' : 'Create the agent');
    const stepStart = [0,6,11.7,26.2][step];
    const slide = (1-seg(lt, stepStart, stepStart+0.45, Easing.easeOutCubic))*22;
    const navY = CARD.y + CARD.h - 44 - 56;     // 776
    return <div style={{ position:'absolute', inset:0, opacity: intro*(1-out),
      transform:`scale(${ease(0.975,1,intro)}) translateY(${(1-intro)*26}px)` }}>
      <Card x={CARD.x} y={CARD.y} w={CARD.w} h={CARD.h} style={{ background:T.surface }}>
        {/* top bar */}
        <div style={{ position:'absolute', left:44, top:40, right:44, height:48, display:'flex',
          alignItems:'center', justifyContent:'space-between' }}>
          <Logo h={34} />
          <div style={{ display:'flex', gap:14, alignItems:'center' }}>
            <div style={{ display:'inline-flex', gap:3, padding:4, background:T.surface2, border:`1px solid ${T.border}`, borderRadius:12 }}>
              <span style={{ fontSize:14, fontWeight:600, color:'#20140a', background:T.accent, padding:'8px 15px', borderRadius:9 }}>Создать</span>
              <span style={{ fontSize:14, color:T.muted, padding:'8px 15px' }}>Агенты</span>
              <span style={{ fontSize:14, color:T.muted, padding:'8px 15px' }}>Тесты</span>
            </div>
            <span style={{ width:38, height:38, borderRadius:'50%', background:'linear-gradient(135deg,#ff7a2e,#ffb072)', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:700, fontSize:15, boxShadow:'0 4px 14px rgba(255,122,46,.45)' }}>А</span>
          </div>
        </div>

        {/* left rail */}
        <div style={{ position:'absolute', left:44, top:130, width:300 }}>
          <div style={{ fontSize:26, fontWeight:700, color:T.text, letterSpacing:'-.02em', marginBottom:14,
            fontFamily:UI_FONT }}>Create a voice agent</div>
          <div style={{ fontSize:14.5, color:T.muted, lineHeight:1.55, marginBottom:34, width:280 }}>
            Complete four steps. The system assembles a ready agent that answers calls, books clients and saves requests to your database.</div>
          <div style={{ position:'relative', height:260 }}>
            {RAIL.map(([n,l],i)=><RailStep key={i} n={n} label={l} active={i===step} top={i*62} />)}
          </div>
        </div>

        {/* main panel */}
        <div style={{ position:'absolute', left:MAIN_X, top:130, width:MAIN_W,
          opacity: seg(lt,stepStart,stepStart+0.4), transform:`translateY(${slide}px)` }}>
          {step===0 && <Step1 lt={lt} />}
          {step===1 && <Step2 lt={lt} />}
          {step===2 && <Step3 lt={lt} />}
          {step===3 && <Step4 lt={lt} />}
        </div>

        {/* nav */}
        <div style={{ position:'absolute', left:MAIN_X, top:navY, width:CARD.x+CARD.w-44-MAIN_X,
          display:'flex', gap:14, alignItems:'center' }}>
          <Btn ghost w={140} big>← Back</Btn>
          <div style={{ flex:1 }}>
            <Btn primary big w="100%">
              {building && <span style={{ width:16, height:16, borderRadius:'50%',
                border:'2px solid rgba(255,255,255,.4)', borderTopColor:'#fff',
                display:'inline-block', animation:'spin .8s linear infinite' }} />}
              {nextLabel}
            </Btn>
          </div>
        </div>
      </Card>

      <Cursor
        frames={[
          {t:0,x:1340,y:880},{t:1.6,x:800,y:233},{t:5.0,x:800,y:233},{t:5.5,x:1046,y:804},{t:6.0,x:1046,y:804},
          {t:8.0,x:800,y:250},{t:8.6,x:800,y:250},{t:11.0,x:1046,y:804},{t:11.5,x:1046,y:804},
          {t:14.0,x:470,y:330},{t:14.6,x:470,y:330},{t:25.4,x:1046,y:804},{t:26.0,x:1046,y:804},
          {t:29.0,x:1150,y:312},{t:29.6,x:1150,y:312},{t:33.8,x:1046,y:804},{t:34.4,x:1046,y:804},{t:36.5,x:1046,y:804},
        ]}
        clicks={[6.0,8.6,11.5,14.6,26.0,29.6,34.4]} />

      {/* Success popup — same blurred modal as the real app after "Creating…" */}
      {lt>38.6 && (()=>{ const p = seg(lt, 38.6, 39.2, Easing.easeOutCubic);
        return <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center',
            justifyContent:'center', background:'rgba(8,10,14,.62)', backdropFilter:'blur(9px)',
            WebkitBackdropFilter:'blur(9px)', opacity:p }}>
          <div style={{ width:400, background:T.surface, border:`1px solid ${T.border}`, borderRadius:20,
              padding:'38px 40px 30px', textAlign:'center', boxShadow:'0 34px 90px rgba(0,0,0,.65)',
              transform:`scale(${ease(0.94,1,p)})` }}>
            <div style={{ display:'flex', justifyContent:'center', marginBottom:18 }}><Logo h={30} /></div>
            <div style={{ width:56, height:56, margin:'4px auto 16px', borderRadius:'50%',
                background:'rgba(46,204,113,.14)', color:'#2ecc71', display:'flex',
                alignItems:'center', justifyContent:'center' }}>
              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"
                strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg></div>
            <div style={{ fontSize:16, fontWeight:600, color:T.text, lineHeight:1.45, marginBottom:20,
                fontFamily:UI_FONT }}>Done! Your agent is created and collects data into your database.</div>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              <Btn primary big w="100%">Open in HANC</Btn></div>
          </div>
        </div>;
      })()}
    </div>;
  }}</Sprite>;
}
window.WizardScene = WizardScene;