/* HNQ Tech v3 — Mockup illustrations (heavy visual) */

/* ============ Hero center: AI analyzer with code -> design ============ */
function HeroMain() {
  return (
    <div className="hero-prod main" style={{aspectRatio: '4/3'}}>
      <div className="hero-prod-label"><span className="pdot"></span> dashboard.hnq.io</div>
      <div style={{position:'absolute', inset: 0, padding: '38px 22px 22px', display:'flex', flexDirection:'column', gap: 10}}>
        {/* Header chip row */}
        <div style={{display:'flex', alignItems:'center', gap: 8, marginBottom: 6}}>
          <div style={{width: 24, height: 24, borderRadius: 7, background: 'var(--grad-primary)'}}></div>
          <div style={{flex: 1}}>
            <div style={{height: 8, width: '50%', background: 'var(--surface-2)', borderRadius: 4}}></div>
            <div style={{height: 5, width: '30%', background: 'var(--surface)', borderRadius: 3, marginTop: 4}}></div>
          </div>
          <div style={{padding: '4px 10px', background: 'var(--surface)', border:'1px solid var(--line)', borderRadius: 999, fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--cyan)'}}>● live</div>
        </div>
        {/* Big chart */}
        <div style={{flex: 1, background: 'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 12, padding: 14, position:'relative', overflow:'hidden'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
            <div>
              <div style={{fontSize: 10, color:'var(--muted)', letterSpacing:'0.05em', textTransform:'uppercase'}}>Doanh thu 30 ngày</div>
              <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 28, color:'var(--ink)', marginTop: 4}}>₫ 482M <span style={{fontSize:14, color:'var(--cyan)'}}>+18.4%</span></div>
            </div>
            <div style={{display:'flex', gap: 4}}>
              {['7d','30d','90d'].map((p,i)=> <span key={p} style={{padding:'4px 8px', borderRadius: 6, fontSize:10, fontFamily:'var(--font-mono)', background: i===1 ? 'var(--ink)' : 'var(--surface)', color: i===1 ? 'var(--bg)' : 'var(--ink-soft)'}}>{p}</span>)}
            </div>
          </div>
          <svg viewBox="0 0 300 80" preserveAspectRatio="none" style={{width: '100%', height: 80, marginTop: 10}}>
            <defs>
              <linearGradient id="hg1" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#5cf0ff" stopOpacity="0.5"/>
                <stop offset="100%" stopColor="#5cf0ff" stopOpacity="0"/>
              </linearGradient>
              <linearGradient id="hg2" x1="0" x2="1" y1="0" y2="0">
                <stop offset="0%" stopColor="#5cf0ff"/>
                <stop offset="100%" stopColor="#a78bfa"/>
              </linearGradient>
            </defs>
            <path d="M0,55 L20,52 L40,45 L60,48 L80,38 L100,40 L120,32 L140,28 L160,30 L180,22 L200,25 L220,18 L240,20 L260,14 L280,16 L300,8 L300,80 L0,80 Z" fill="url(#hg1)"/>
            <path d="M0,55 L20,52 L40,45 L60,48 L80,38 L100,40 L120,32 L140,28 L160,30 L180,22 L200,25 L220,18 L240,20 L260,14 L280,16 L300,8" fill="none" stroke="url(#hg2)" strokeWidth="2" strokeLinecap="round"/>
            {[28, 22, 20, 14].map((y, i) => (
              <circle key={i} cx={140 + i*40} cy={y} r="3" fill="#5cf0ff"/>
            ))}
          </svg>
        </div>
        {/* Bottom KPI row */}
        <div style={{display:'flex', gap: 8}}>
          {[
            {l:'Đơn hôm nay', v:'248', g:'cyan'},
            {l:'Khách mới', v:'42', g:'violet'},
            {l:'Tỷ lệ giữ', v:'94%', g:'cyan'},
          ].map((k,i) => (
            <div key={i} style={{flex: 1, background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 10, padding: '10px 12px'}}>
              <div style={{fontSize: 9, color:'var(--muted)', letterSpacing:'0.05em', textTransform:'uppercase'}}>{k.l}</div>
              <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 22, color: k.g==='cyan' ? 'var(--cyan)' : 'var(--violet)', marginTop: 2}}>{k.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============ Hero side: phone screen — maternity app ============ */
function HeroPhone() {
  return (
    <div className="hero-prod side" style={{aspectRatio: '9/16', borderRadius: 28}}>
      <div className="hero-prod-label"><span className="pdot"></span> mom · iOS</div>
      <div style={{position:'absolute', inset: 0, padding: '40px 16px 16px', display:'flex', flexDirection:'column', gap: 10}}>
        {/* Header */}
        <div>
          <div style={{fontSize: 10, color:'var(--muted)'}}>Chào buổi sáng</div>
          <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 20, color:'var(--ink)', marginTop: 2}}>Chị Linh ✦</div>
        </div>
        {/* Pregnancy week card */}
        <div style={{padding: 14, borderRadius: 14, background: 'var(--grad-primary)', color: '#0a0e1c', position:'relative', overflow:'hidden'}}>
          <div style={{fontSize: 10, fontWeight: 600, letterSpacing:'0.06em', textTransform:'uppercase', opacity: 0.7}}>Tuần thai</div>
          <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 40, lineHeight: 1, marginTop: 4}}>24</div>
          <div style={{fontSize: 11, marginTop: 6}}>Bé đã to bằng một quả bắp ngô 🌽</div>
          <svg width="60" height="60" viewBox="0 0 60 60" style={{position:'absolute', right: 8, top: 8, opacity: 0.18}}>
            <circle cx="30" cy="30" r="22" fill="none" stroke="#0a0e1c" strokeWidth="3" strokeDasharray="138" strokeDashoffset="50" transform="rotate(-90 30 30)"/>
          </svg>
        </div>
        {/* Appointment */}
        <div style={{padding: 12, background: 'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 12}}>
          <div style={{fontSize: 9, color:'var(--muted)', letterSpacing:'0.04em', textTransform:'uppercase'}}>Lịch khám tới</div>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginTop: 4}}>
            <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 18, color:'var(--ink)'}}>Thứ 5, 10:30</div>
            <div style={{fontSize: 10, color:'var(--cyan)'}}>còn 3 ngày</div>
          </div>
          <div style={{fontSize: 10, color:'var(--ink-soft)', marginTop: 6}}>BS. Nguyễn Hà · PK Hạnh Phúc</div>
        </div>
        {/* AI suggestion */}
        <div style={{padding: 10, border:'1px solid rgba(92,240,255,0.3)', borderRadius: 10, background: 'rgba(92,240,255,0.06)', display:'flex', gap: 8, alignItems:'flex-start'}}>
          <div style={{width: 22, height: 22, borderRadius: 6, background: 'var(--grad-primary)', display:'grid', placeItems:'center', flexShrink:0, fontSize: 10, color:'#0a0e1c', fontWeight: 700}}>AI</div>
          <div style={{fontSize: 10, color:'var(--ink-soft)', lineHeight: 1.4}}>
            Nhớ uống vitamin sắt sau bữa ăn trưa nhé! Cân nặng tuần này đang tăng đều.
          </div>
        </div>
        {/* Bottom nav */}
        <div style={{marginTop:'auto', display:'flex', gap: 14, padding: '10px 4px 4px', justifyContent:'space-around'}}>
          {['◉','♡','📅','◌'].map((i,k) => (
            <div key={k} style={{fontSize: 14, opacity: k===0?1:0.4, color: k===0?'var(--cyan)':'var(--ink-soft)'}}>{i}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============ Hero side right: AI / chat assistant ============ */
function HeroAI() {
  return (
    <div className="hero-prod side r" style={{aspectRatio: '9/16', borderRadius: 28}}>
      <div className="hero-prod-label"><span className="pdot"></span> ai-assist</div>
      <div style={{position:'absolute', inset: 0, padding: '40px 16px 16px', display:'flex', flexDirection:'column', gap: 8}}>
        <div style={{display:'flex', alignItems:'center', gap: 8, marginBottom: 6}}>
          <div style={{width: 30, height: 30, borderRadius: 9, background: 'var(--grad-primary)', display:'grid', placeItems:'center', fontSize: 13, color:'#0a0e1c', fontWeight: 700}}>✦</div>
          <div>
            <div style={{fontSize: 12, fontWeight: 600, color:'var(--ink)'}}>Trợ lý HNQ</div>
            <div style={{fontSize: 9, color:'var(--cyan)'}}>● đang trực tuyến</div>
          </div>
        </div>
        {/* Chat bubbles */}
        <div style={{padding: '10px 12px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: '12px 12px 12px 4px', fontSize: 11, color:'var(--ink)', lineHeight: 1.4}}>
          Quán mình muốn quản lý ca làm và lương theo giờ, có làm được không?
        </div>
        <div style={{alignSelf:'flex-end', maxWidth:'90%', padding: '10px 12px', background: 'var(--grad-primary)', color:'#0a0e1c', borderRadius: '12px 12px 4px 12px', fontSize: 11, lineHeight: 1.4, fontWeight: 500}}>
          Được! Mình đã làm cho 3 chuỗi F&B rồi. Cho mình xin số chi nhánh và số NV nhé.
        </div>
        <div style={{padding: '10px 12px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: '12px 12px 12px 4px', fontSize: 11, color:'var(--ink)', lineHeight: 1.4}}>
          14 chi nhánh, ~140 nhân viên
        </div>
        <div style={{alignSelf:'flex-end', maxWidth:'90%', padding: '10px 12px', background: 'var(--grad-primary)', color:'#0a0e1c', borderRadius: '12px 12px 4px 12px', fontSize: 11, lineHeight: 1.4, fontWeight: 500}}>
          ⚡ Đề xuất gói Standard, 10 tuần. Mình gửi proposal trong 24h nhé?
        </div>
        {/* Typing */}
        <div style={{padding: '10px 12px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 12, alignSelf:'flex-start', display:'flex', gap: 4}}>
          {[0,1,2].map(i => <span key={i} style={{width: 5, height: 5, borderRadius:'50%', background:'var(--cyan)', opacity: 0.5, animation: `pulse 1.2s ${i*0.2}s infinite`}}></span>)}
        </div>
        {/* Input */}
        <div style={{marginTop:'auto', padding: '8px 10px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 999, display:'flex', alignItems:'center', gap: 6}}>
          <div style={{flex: 1, fontSize: 10, color:'var(--muted)'}}>Hỏi gì đó...</div>
          <div style={{width: 22, height: 22, borderRadius:'50%', background:'var(--grad-primary)', display:'grid', placeItems:'center', fontSize: 10, color:'#0a0e1c'}}>↑</div>
        </div>
      </div>
    </div>
  );
}

/* ============ Service illustrations ============ */
function ServiceVisual({ kind }) {
  if (kind === 'listen') {
    // Waveform + analyzed transcript
    return (
      <div style={{position:'absolute', inset: 0, padding: 20, display:'flex', flexDirection:'column', gap: 8}}>
        <div style={{position:'absolute', top: -40, left: -40, width: 200, height: 200, background:'rgba(92,240,255,0.12)', filter:'blur(40px)', borderRadius:'50%', pointerEvents:'none'}}></div>
        <div style={{fontSize: 10, color:'var(--muted)', letterSpacing:'0.05em', textTransform:'uppercase', position:'relative'}}>● Đang ghi âm · 02:14</div>
        <svg viewBox="0 0 260 60" style={{width:'100%', height: 60, position:'relative'}}>
          {Array.from({length: 50}).map((_, i) => {
            const h = 10 + Math.abs(Math.sin(i * 0.7) * 18) + Math.abs(Math.cos(i * 0.4) * 8);
            return <rect key={i} x={i*5+2} y={30 - h/2} width="2" height={h} rx="1" fill={i < 32 ? 'url(#wavg)' : 'rgba(255,255,255,0.15)'}/>;
          })}
          <defs>
            <linearGradient id="wavg" x1="0" x2="1">
              <stop offset="0%" stopColor="#5cf0ff"/>
              <stop offset="100%" stopColor="#a78bfa"/>
            </linearGradient>
          </defs>
        </svg>
        <div style={{padding: '8px 10px', background:'var(--surface)', borderRadius: 8, fontSize: 11, color:'var(--ink-soft)', position:'relative', lineHeight: 1.4}}>
          <span style={{color:'var(--cyan)'}}>Bạn:</span> Mình cần quản lý lịch hẹn và hồ sơ bệnh nhân...
        </div>
      </div>
    );
  }
  if (kind === 'design') {
    // Wireframe → hi-fi
    return (
      <div style={{position:'absolute', inset: 0, padding: 20, display:'flex', gap: 12, alignItems:'center'}}>
        <div style={{position:'absolute', top: -40, right: -40, width: 200, height: 200, background:'rgba(167,139,250,0.15)', filter:'blur(40px)', borderRadius:'50%', pointerEvents:'none'}}></div>
        {/* Wireframe */}
        <div style={{flex: 1, aspectRatio: '3/4', background:'var(--bg-2)', border:'1px dashed var(--line-strong)', borderRadius: 8, padding: 10, display:'flex', flexDirection:'column', gap: 4, position:'relative'}}>
          <div style={{height: 8, width:'60%', background:'var(--line)', borderRadius: 2}}></div>
          <div style={{height: 24, background:'var(--line)', borderRadius: 4, marginTop: 4}}></div>
          <div style={{height: 6, width:'80%', background:'var(--line)', borderRadius: 2}}></div>
          <div style={{height: 6, width:'70%', background:'var(--line)', borderRadius: 2}}></div>
          <div style={{height: 6, width:'50%', background:'var(--line)', borderRadius: 2}}></div>
        </div>
        {/* Arrow */}
        <div style={{color:'var(--cyan)', fontSize: 22}}>→</div>
        {/* Hi-fi */}
        <div style={{flex: 1, aspectRatio: '3/4', background:'var(--bg-1)', border:'1px solid var(--line-strong)', borderRadius: 10, padding: 10, display:'flex', flexDirection:'column', gap: 6, position:'relative', boxShadow:'0 8px 20px -10px rgba(109,131,255,0.4)'}}>
          <div style={{display:'flex', alignItems:'center', gap: 6}}>
            <div style={{width: 12, height: 12, borderRadius: 3, background:'var(--grad-primary)'}}></div>
            <div style={{height: 5, width:'40%', background:'var(--surface-2)', borderRadius: 2}}></div>
          </div>
          <div style={{height: 22, background:'var(--grad-primary)', borderRadius: 5, marginTop: 2}}></div>
          <div style={{height: 4, width:'85%', background:'var(--surface)', borderRadius: 2}}></div>
          <div style={{height: 4, width:'70%', background:'var(--surface)', borderRadius: 2}}></div>
          <div style={{display:'flex', gap: 4, marginTop: 4}}>
            <div style={{flex: 1, height: 16, background:'var(--bg-2)', borderRadius: 4}}></div>
            <div style={{flex: 1, height: 16, background:'var(--bg-2)', borderRadius: 4}}></div>
          </div>
        </div>
      </div>
    );
  }
  // build
  return (
    <div style={{position:'absolute', inset: 0, padding: 20, display:'flex', alignItems:'center', justifyContent:'center'}}>
      <div style={{position:'absolute', top: -40, left: -40, width: 200, height: 200, background:'rgba(109,131,255,0.18)', filter:'blur(40px)', borderRadius:'50%', pointerEvents:'none'}}></div>
      <svg width="100%" height="100%" viewBox="0 0 280 160" style={{maxWidth: 280}}>
        <defs>
          <linearGradient id="bg1" x1="0" x2="1"><stop offset="0%" stopColor="#5cf0ff"/><stop offset="100%" stopColor="#a78bfa"/></linearGradient>
        </defs>
        {/* center node */}
        <circle cx="140" cy="80" r="28" fill="url(#bg1)" opacity="0.2"/>
        <circle cx="140" cy="80" r="18" fill="url(#bg1)"/>
        <text x="140" y="86" textAnchor="middle" fontSize="14" fontWeight="700" fill="#0a0e1c">API</text>
        {/* nodes */}
        {[
          {x: 50, y: 40, l: 'Web'},
          {x: 50, y: 120, l: 'iOS'},
          {x: 230, y: 40, l: 'DB'},
          {x: 230, y: 120, l: 'Cloud'},
          {x: 140, y: 20, l: 'Android'},
          {x: 140, y: 140, l: 'Auth'},
        ].map((n, i) => (
          <g key={i}>
            <line x1="140" y1="80" x2={n.x} y2={n.y} stroke="rgba(255,255,255,0.15)" strokeWidth="1" strokeDasharray="3 3"/>
            <circle cx={n.x} cy={n.y} r="16" fill="var(--bg-2)" stroke="rgba(255,255,255,0.15)"/>
            <text x={n.x} y={n.y+3} textAnchor="middle" fontSize="9" fill="var(--ink-soft)">{n.l}</text>
          </g>
        ))}
      </svg>
    </div>
  );
}

/* ============ Process step visuals ============ */
function ProcessVisual({ step }) {
  const wrap = (kids) => (
    <div style={{position:'absolute', inset: 0, padding: 18, display:'flex', alignItems:'center', justifyContent:'center'}}>{kids}</div>
  );
  if (step === 1) { // Listen
    return wrap(
      <div style={{width:'100%', display:'flex', flexDirection:'column', gap: 8}}>
        <div style={{display:'flex', gap: 10, alignItems:'center'}}>
          <div style={{width: 32, height: 32, borderRadius:'50%', background:'var(--grad-primary)', display:'grid', placeItems:'center', color:'#0a0e1c', fontWeight: 700}}>K</div>
          <div style={{flex: 1, padding: '8px 12px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: '12px 12px 12px 4px', fontSize: 12, color:'var(--ink-soft)'}}>
            Mình bán phở, muốn quản lý kho và doanh thu...
          </div>
        </div>
        <div style={{display:'flex', gap: 10, alignItems:'center', flexDirection:'row-reverse'}}>
          <div style={{width: 32, height: 32, borderRadius:'50%', background:'var(--bg-3)', border:'1px solid var(--line-strong)', display:'grid', placeItems:'center', color:'var(--cyan)', fontWeight: 700, fontSize: 12}}>HNQ</div>
          <div style={{flex: 1, padding: '8px 12px', background:'rgba(92,240,255,0.08)', border:'1px solid rgba(92,240,255,0.25)', borderRadius: '12px 12px 4px 12px', fontSize: 12, color:'var(--ink)'}}>
            Hiểu rồi. Cho mình xin số chi nhánh nhé!
          </div>
        </div>
      </div>
    );
  }
  if (step === 2) { // Analyze
    return wrap(
      <svg width="100%" viewBox="0 0 280 140">
        <defs>
          <linearGradient id="pa1" x1="0" x2="1"><stop offset="0%" stopColor="#5cf0ff"/><stop offset="100%" stopColor="#a78bfa"/></linearGradient>
        </defs>
        {[0,1,2,3,4].map((i) => (
          <g key={i}>
            <rect x={10 + i*55} y={i % 2 === 0 ? 30 : 70} width="50" height="40" rx="8" fill="var(--bg-2)" stroke="var(--line-strong)"/>
            <text x={10+i*55+25} y={i%2===0?54:94} textAnchor="middle" fontSize="9" fill="var(--ink-soft)">{['Đặt','Pha chế','Thu ngân','Kho','Báo cáo'][i]}</text>
            {i < 4 && <path d={`M${10+i*55+50},${i%2===0?50:90} L${10+(i+1)*55},${(i+1)%2===0?50:90}`} stroke="url(#pa1)" strokeWidth="1.5" fill="none" markerEnd="url(#arr)"/>}
          </g>
        ))}
        <marker id="arr" markerWidth="6" markerHeight="6" refX="6" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#a78bfa"/>
        </marker>
      </svg>
    );
  }
  if (step === 3) { // Design
    return <ServiceVisual kind="design" />;
  }
  if (step === 4) { // Build sprint demos
    return wrap(
      <div style={{width:'100%', display:'flex', flexDirection:'column', gap: 6}}>
        {[
          {w: 'Sprint 1', s: '✓', t: 'Auth + Dashboard'},
          {w: 'Sprint 2', s: '✓', t: 'POS + thanh toán'},
          {w: 'Sprint 3', s: '◐', t: 'Quản lý kho'},
          {w: 'Sprint 4', s: '○', t: 'Báo cáo + Export'},
        ].map((s, i) => (
          <div key={i} style={{display:'flex', alignItems:'center', gap: 10, padding:'8px 12px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 8}}>
            <div style={{width: 22, height: 22, borderRadius:'50%', background: i<2?'var(--grad-primary)':i===2?'rgba(92,240,255,0.2)':'var(--surface)', color: i<2?'#0a0e1c':'var(--cyan)', display:'grid', placeItems:'center', fontSize: 11, fontWeight: 700}}>{s.s}</div>
            <div style={{flex: 1, display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <div style={{fontSize: 11, color:'var(--ink)', fontWeight: 500}}>{s.w}</div>
              <div style={{fontSize: 11, color:'var(--muted)'}}>{s.t}</div>
            </div>
          </div>
        ))}
      </div>
    );
  }
  // step 5 - launch + support
  return wrap(
    <div style={{width:'100%', display:'flex', flexDirection:'column', gap: 10, alignItems:'center'}}>
      <div style={{padding:'10px 18px', borderRadius: 999, background:'var(--grad-primary)', color:'#0a0e1c', fontWeight: 600, fontSize: 13, display:'inline-flex', alignItems:'center', gap: 8}}>
        ✓ Go-live <span style={{fontFamily:'var(--font-mono)', fontSize: 10}}>v1.0.0</span>
      </div>
      <div style={{display:'flex', gap: 8, width:'100%'}}>
        {[
          {l:'SLA', v:'99.9%'},
          {l:'Support', v:'24/7'},
          {l:'Đào tạo', v:'5 buổi'},
        ].map((k,i) => (
          <div key={i} style={{flex: 1, padding: '10px 12px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 10, textAlign:'center'}}>
            <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 18, color:'var(--cyan)'}}>{k.v}</div>
            <div style={{fontSize: 9, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.05em', marginTop: 2}}>{k.l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============ Case visuals (large) ============ */
function CaseClinic() {
  return (
    <div className="case-visual">
      {/* Dashboard background */}
      <div style={{position:'absolute', inset: 0, padding: 24, display:'flex', gap: 16}}>
        {/* Side patient list */}
        <div style={{flex: '0 0 38%', display:'flex', flexDirection:'column', gap: 8}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'0 4px'}}>
            <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 18, color:'var(--ink)'}}>Bệnh nhân hôm nay</div>
            <div style={{fontSize: 11, color:'var(--cyan)'}}>12</div>
          </div>
          {[
            {n: 'Nguyễn Lan', w: '24w', t: '09:00', c: 'var(--cyan)'},
            {n: 'Trần Mỹ Linh', w: '32w', t: '09:30', c: 'var(--violet)'},
            {n: 'Lê Hồng Hạnh', w: '18w', t: '10:00', c: 'var(--cyan)'},
            {n: 'Phạm Thu Hà', w: '36w', t: '10:30', c: 'var(--violet)'},
          ].map((p, i) => (
            <div key={i} style={{display:'flex', gap: 10, alignItems:'center', padding: '10px 12px', background: i===0 ? 'var(--bg-3)' : 'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 10}}>
              <div style={{width: 30, height: 30, borderRadius:'50%', background: p.c, opacity: 0.85, color:'#0a0e1c', display:'grid', placeItems:'center', fontSize: 11, fontWeight: 700}}>{p.n[0]}</div>
              <div style={{flex: 1, minWidth: 0}}>
                <div style={{fontSize: 12, color:'var(--ink)', fontWeight: 500, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{p.n}</div>
                <div style={{fontSize: 10, color:'var(--muted)'}}>Tuần {p.w}</div>
              </div>
              <div style={{fontSize: 11, color: i===0 ? 'var(--cyan)' : 'var(--muted)', fontWeight: 500}}>{p.t}</div>
            </div>
          ))}
        </div>
        {/* Right phone mockup floating */}
        <div style={{flex: 1, position:'relative', display:'flex', alignItems:'center', justifyContent:'center'}}>
          <div style={{width: '62%', aspectRatio: '9/18', background: 'var(--bg-1)', borderRadius: 22, border:'1px solid var(--line-strong)', boxShadow:'0 20px 40px -16px rgba(0,0,0,0.6)', padding: 14, display:'flex', flexDirection:'column', gap: 8, transform:'rotate(2deg)'}}>
            <div style={{height: 14, width: '50%', background:'var(--surface)', borderRadius: 999, margin:'0 auto'}}></div>
            <div style={{padding: 12, borderRadius: 12, background: 'var(--grad-primary)', color:'#0a0e1c'}}>
              <div style={{fontSize: 8, fontWeight: 600, opacity: 0.7, textTransform:'uppercase'}}>Tuần thai</div>
              <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 36, lineHeight: 1}}>24</div>
            </div>
            <div style={{padding: 10, background:'var(--bg-2)', borderRadius: 10}}>
              <div style={{fontSize: 8, color:'var(--muted)', textTransform:'uppercase'}}>Lịch khám</div>
              <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 14, color:'var(--ink)', marginTop: 2}}>T5, 10:30</div>
            </div>
            <div style={{padding: 10, background:'var(--bg-2)', borderRadius: 10}}>
              <div style={{fontSize: 8, color:'var(--muted)', textTransform:'uppercase'}}>Cân nặng</div>
              <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 14, color:'var(--cyan)', marginTop: 2}}>58.4 kg</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CaseFnb() {
  return (
    <div className="case-visual">
      <div style={{position:'absolute', inset: 0, padding: 24, display:'flex', flexDirection:'column', gap: 12}}>
        <div style={{display:'flex', gap: 12}}>
          {[
            {l:'Doanh thu hôm nay', v:'12.4M', a:'+18%', c:'var(--cyan)'},
            {l:'Đơn xử lý', v:'248', a:'+12', c:'var(--violet)'},
            {l:'Bàn đang phục vụ', v:'18/24', a:'', c:'var(--cyan)'},
          ].map((k,i) => (
            <div key={i} style={{flex: 1, padding:'14px 16px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 12}}>
              <div style={{fontSize: 10, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.04em'}}>{k.l}</div>
              <div style={{display:'flex', alignItems:'baseline', gap: 6, marginTop: 4}}>
                <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 24, color: k.c}}>{k.v}</div>
                {k.a && <div style={{fontSize: 10, color:'var(--cyan)'}}>{k.a}</div>}
              </div>
            </div>
          ))}
        </div>
        <div style={{flex: 1, display:'flex', gap: 12}}>
          {/* Order list */}
          <div style={{flex: 1, background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 12, padding: 14, display:'flex', flexDirection:'column', gap: 6}}>
            <div style={{fontSize: 11, color:'var(--ink)', fontWeight: 500, marginBottom: 4}}>Đơn đang chế biến</div>
            {[
              {t:'#0238', i: 'Phở bò × 2, Trà đá × 2', s: '5 phút'},
              {t:'#0239', i: 'Phở gà × 1', s: '3 phút'},
              {t:'#0240', i: 'Bún bò × 3', s: 'mới'},
            ].map((o,i) => (
              <div key={i} style={{display:'flex', gap: 8, padding:'6px 8px', background:'var(--bg-3)', borderRadius: 6, alignItems:'center'}}>
                <div style={{fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--cyan)', fontWeight: 600}}>{o.t}</div>
                <div style={{flex: 1, fontSize: 10, color:'var(--ink-soft)'}}>{o.i}</div>
                <div style={{fontSize: 9, color:'var(--muted)', fontFamily:'var(--font-mono)'}}>{o.s}</div>
              </div>
            ))}
          </div>
          {/* Chart */}
          <div style={{flex: 1, background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 12, padding: 14}}>
            <div style={{fontSize: 11, color:'var(--ink)', fontWeight: 500, marginBottom: 10}}>Giờ cao điểm</div>
            <svg viewBox="0 0 200 80" style={{width:'100%'}}>
              <defs><linearGradient id="cfg" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stopColor="#5cf0ff" stopOpacity="0.6"/><stop offset="100%" stopColor="#a78bfa" stopOpacity="0.2"/></linearGradient></defs>
              {[15, 25, 45, 70, 55, 38, 28, 20, 38, 65, 78, 60, 42].map((v, i) => (
                <rect key={i} x={i*15} y={80-v} width="10" height={v} rx="2" fill={i===10?'url(#cfg)':'var(--surface-2)'}/>
              ))}
            </svg>
            <div style={{display:'flex', justifyContent:'space-between', fontSize: 8, color:'var(--muted)', fontFamily:'var(--font-mono)', marginTop: 4}}>
              <span>10h</span><span>12h</span><span>18h</span><span>20h</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CaseRetail() {
  return (
    <div className="case-visual">
      <div style={{position:'absolute', inset: 0, padding: 24, display:'flex', flexDirection:'column', gap: 12}}>
        <div style={{display:'flex', gap: 10, alignItems:'center'}}>
          <div style={{flex: 1, padding:'8px 14px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 999, fontSize: 11, color:'var(--muted)'}}>⌕ Tìm sản phẩm...</div>
          <div style={{padding:'8px 14px', background:'var(--grad-primary)', color:'#0a0e1c', borderRadius: 999, fontSize: 11, fontWeight: 600}}>+ Thêm đơn</div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 10, flex: 1}}>
          {[
            {n:'Áo thun cotton', p:'180k', t: 'A'},
            {n:'Túi tote canvas', p:'220k', t: 'B'},
            {n:'Sổ tay A5', p:'95k', t: 'C'},
            {n:'Mũ baseball', p:'150k', t: 'D'},
            {n:'Móc khoá', p:'45k', t: 'E'},
            {n:'Bình giữ nhiệt', p:'350k', t: 'F'},
            {n:'Pin sạc dự phòng', p:'420k', t: 'G'},
            {n:'Khăn lụa', p:'280k', t: 'H'},
          ].map((p, i) => (
            <div key={i} style={{background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 10, padding: 10, display:'flex', flexDirection:'column', gap: 6}}>
              <div style={{flex: 1, background: `linear-gradient(135deg, ${i%3===0?'rgba(92,240,255,0.20)':i%3===1?'rgba(167,139,250,0.20)':'rgba(232,121,249,0.20)'}, transparent)`, borderRadius: 6, display:'grid', placeItems:'center', fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 22, color:'var(--ink-soft)'}}>{p.t}</div>
              <div>
                <div style={{fontSize: 9, color:'var(--ink)', fontWeight: 500, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{p.n}</div>
                <div style={{fontSize: 10, color:'var(--cyan)', fontFamily:'var(--font-display)', fontStyle:'italic'}}>{p.p}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function CaseEdu() {
  return (
    <div className="case-visual">
      <div style={{position:'absolute', inset: 0, padding: 24, display:'flex', flexDirection:'column', gap: 12}}>
        <div style={{display:'flex', gap: 6}}>
          {['T2','T3','T4','T5','T6','T7'].map((d, i) => (
            <div key={d} style={{flex: 1, padding:'10px 8px', background: i===3?'var(--grad-primary)':'var(--bg-2)', color: i===3?'#0a0e1c':'var(--ink-soft)', border: i===3?'none':'1px solid var(--line)', borderRadius: 10, textAlign:'center'}}>
              <div style={{fontSize: 9, opacity: 0.7, textTransform:'uppercase', letterSpacing:'0.05em'}}>{d}</div>
              <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 18, marginTop: 2}}>{14+i}</div>
            </div>
          ))}
        </div>
        <div style={{flex: 1, display:'flex', flexDirection:'column', gap: 8}}>
          {[
            {t:'08:00', n:'IELTS Foundation', r:'P301 · Mr. James', s: 18, c:'var(--cyan)'},
            {t:'10:00', n:'TOEIC Intensive', r:'P205 · Ms. Linh', s: 14, c:'var(--violet)'},
            {t:'14:00', n:'Speaking Club', r:'P101 · Mr. Tom', s: 22, c:'var(--cyan)'},
            {t:'18:30', n:'Junior English', r:'P303 · Ms. Mai', s: 16, c:'var(--violet)'},
          ].map((c, i) => (
            <div key={i} style={{display:'flex', gap: 12, padding:'12px 14px', background:'var(--bg-2)', border:'1px solid var(--line)', borderRadius: 10, alignItems:'center'}}>
              <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize: 18, color: c.c, minWidth: 50}}>{c.t}</div>
              <div style={{flex: 1, borderLeft:'1px solid var(--line)', paddingLeft: 12}}>
                <div style={{fontSize: 12, color:'var(--ink)', fontWeight: 500}}>{c.n}</div>
                <div style={{fontSize: 10, color:'var(--muted)', marginTop: 2}}>{c.r}</div>
              </div>
              <div style={{padding:'4px 10px', background:'var(--surface)', border:'1px solid var(--line)', borderRadius: 999, fontSize: 10, color:'var(--ink-soft)'}}>{c.s} hv</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============ Stack logos (simplified) ============ */
function StackLogo({ kind }) {
  const common = { width: 28, height: 28 };
  const m = {
    react: <svg {...common} viewBox="0 0 32 32"><circle cx="16" cy="16" r="2.4" fill="#5cf0ff"/><g stroke="#5cf0ff" strokeWidth="1.4" fill="none"><ellipse cx="16" cy="16" rx="11" ry="4.2"/><ellipse cx="16" cy="16" rx="11" ry="4.2" transform="rotate(60 16 16)"/><ellipse cx="16" cy="16" rx="11" ry="4.2" transform="rotate(120 16 16)"/></g></svg>,
    next: <svg {...common} viewBox="0 0 32 32"><circle cx="16" cy="16" r="13" fill="#fff" opacity="0.05" stroke="#fff" strokeOpacity="0.2"/><text x="16" y="21" textAnchor="middle" fontFamily="serif" fontStyle="italic" fontSize="14" fill="#fff" fontWeight="700">N</text></svg>,
    flutter: <svg {...common} viewBox="0 0 32 32"><path d="M20 4 L9 15 L13 19 L24 8 Z M13 23 L20 16 L26 22 L19 29 Z" fill="#5cf0ff"/></svg>,
    node: <svg {...common} viewBox="0 0 32 32"><polygon points="16,3 27,9.5 27,22.5 16,29 5,22.5 5,9.5" fill="none" stroke="#c6ff5c" strokeWidth="1.5"/><text x="16" y="20" textAnchor="middle" fontSize="9" fontWeight="700" fill="#c6ff5c">JS</text></svg>,
    postgres: <svg {...common} viewBox="0 0 32 32"><ellipse cx="16" cy="16" rx="11" ry="11" fill="none" stroke="#6d83ff" strokeWidth="1.5"/><path d="M11 14 Q16 11 21 14 M11 18 Q16 21 21 18" stroke="#6d83ff" strokeWidth="1.2" fill="none"/></svg>,
    aws: <svg {...common} viewBox="0 0 32 32"><text x="16" y="20" textAnchor="middle" fontFamily="sans-serif" fontWeight="800" fontSize="11" fill="#a78bfa">AWS</text><path d="M6 26 Q16 30 26 26" stroke="#a78bfa" strokeWidth="1.5" fill="none"/></svg>,
    figma: <svg {...common} viewBox="0 0 32 32"><circle cx="12" cy="8" r="4" fill="#e879f9"/><circle cx="20" cy="8" r="4" fill="#a78bfa"/><circle cx="12" cy="16" r="4" fill="#5cf0ff"/><circle cx="20" cy="16" r="4" fill="#c6ff5c"/><circle cx="12" cy="24" r="4" fill="#fff" opacity="0.7"/></svg>,
    openai: <svg {...common} viewBox="0 0 32 32"><g fill="none" stroke="#5cf0ff" strokeWidth="1.5"><circle cx="16" cy="16" r="10"/><path d="M16 6 L16 26 M8 11 L24 21 M8 21 L24 11"/></g></svg>,
    docker: <svg {...common} viewBox="0 0 32 32"><g fill="#5cf0ff"><rect x="6" y="14" width="4" height="4" rx="0.5"/><rect x="11" y="14" width="4" height="4" rx="0.5"/><rect x="16" y="14" width="4" height="4" rx="0.5"/><rect x="11" y="9" width="4" height="4" rx="0.5"/></g><path d="M3 18 Q14 24 28 18 Q28 26 18 26 L8 26 Q3 24 3 18 Z" fill="#5cf0ff" opacity="0.5"/></svg>,
    swift: <svg {...common} viewBox="0 0 32 32"><path d="M8 6 L20 6 Q26 6 26 12 L26 22 Q26 26 22 26 L10 26 Q6 26 6 22 L6 10 Q6 6 8 6 Z" fill="#e879f9" opacity="0.6"/><path d="M11 11 Q18 16 22 22" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round"/></svg>,
    stripe: <svg {...common} viewBox="0 0 32 32"><text x="16" y="22" textAnchor="middle" fontFamily="sans-serif" fontWeight="800" fontSize="16" fill="#6d83ff" fontStyle="italic">S</text></svg>,
    tf: <svg {...common} viewBox="0 0 32 32"><path d="M16 4 L26 9 L26 23 L16 28 L6 23 L6 9 Z" fill="none" stroke="#c6ff5c" strokeWidth="1.5"/><text x="16" y="20" textAnchor="middle" fontSize="9" fontWeight="700" fill="#c6ff5c">TF</text></svg>,
  };
  return m[kind] || <div style={{width: 28, height: 28, background:'var(--surface-2)', borderRadius: 6}}></div>;
}

Object.assign(window, {
  HeroMain, HeroPhone, HeroAI,
  ServiceVisual, ProcessVisual,
  CaseClinic, CaseFnb, CaseRetail, CaseEdu,
  StackLogo,
});