// ═══════════════════════════════════════════════════════════════
// SMARTEK X — Rich Visual Components
// Device frames, animated flows, marquee, motion graphics
// ═══════════════════════════════════════════════════════════════

// ── CSS Animations (injected once) ───────────────────────────────────────────

const injectVisualCSS = () => {
  if (document.getElementById('sx-visual-css')) return;
  const style = document.createElement('style');
  style.id = 'sx-visual-css';
  style.textContent = `
    @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
    @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    @keyframes floatYslow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
    @keyframes scanline { 0%{transform:translateY(-100%)} 100%{transform:translateY(400%)} }
    @keyframes drawLine {
      from { stroke-dashoffset: 300 }
      to   { stroke-dashoffset: 0 }
    }
    @keyframes pulseRing {
      0%  { transform: scale(1);   opacity: 0.6 }
      100%{ transform: scale(2.4); opacity: 0 }
    }
    @keyframes gradShift {
      0%  { background-position: 0% 50% }
      50% { background-position: 100% 50% }
      100%{ background-position: 0% 50% }
    }
    @keyframes typeIn {
      from { width: 0 }
      to   { width: 100% }
    }
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(12px) }
      to   { opacity:1; transform:none }
    }
    @keyframes rotateOrbit {
      from { transform: rotate(0deg) translateX(70px) rotate(0deg) }
      to   { transform: rotate(360deg) translateX(70px) rotate(-360deg) }
    }
    .sx-float { animation: floatY 4s ease-in-out infinite; }
    .sx-float-slow { animation: floatYslow 6s ease-in-out infinite; }
    .sx-blink { animation: blink 1s step-start infinite; }
  `;
  document.head.appendChild(style);
};

if (typeof window !== 'undefined') { injectVisualCSS(); }

// ── Marquee Band ──────────────────────────────────────────────────────────────

const MarqueeBand = ({ items, speed = 35, dark = false }) => {
  const doubled = [...items, ...items];
  return (
    <div style={{ overflow:'hidden', width:'100%', padding:'2.5rem 0', background: dark ? 'rgba(28,43,62,0.4)' : '#FAFBFF', borderTop:`1px solid ${dark?'rgba(45,140,255,0.08)':'#EEF2F8'}`, borderBottom:`1px solid ${dark?'rgba(45,140,255,0.08)':'#EEF2F8'}` }}>
      <p style={{ textAlign:'center', fontFamily:'Inter,sans-serif', fontSize:'0.68rem', fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color: dark?'#374151':'#B0B8CC', marginBottom:'1.5rem' }}>DIPERCAYA OLEH</p>
      <div style={{ display:'flex', animation:`marquee ${speed}s linear infinite`, width:'max-content' }}>
        {doubled.map((item, i) => (
          <div key={i} style={{ display:'flex', alignItems:'center', padding:'0 clamp(2rem,4vw,3.5rem)', flexShrink:0 }}>
            <span style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif', fontSize:'clamp(0.82rem,1.2vw,1rem)', fontWeight:800, color: dark?'#2D4A6A':'#8A97AA', letterSpacing:'-0.01em', whiteSpace:'nowrap' }}>{item}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ── Laptop Mockup ─────────────────────────────────────────────────────────────

const LaptopMockup = ({ children, scale = 1 }) => (
  <div style={{ position:'relative', width: 520 * scale, flexShrink: 0 }}>
    {/* Screen */}
    <div style={{ position:'relative', background:'#0D1117', borderRadius: 12 * scale, border:`${1.5*scale}px solid #2D3748`, boxShadow:`0 ${24*scale}px ${60*scale}px rgba(0,0,0,0.35), inset 0 ${1*scale}px 0 rgba(255,255,255,0.06)`, overflow:'hidden', aspectRatio:'16/10' }}>
      {/* Menubar */}
      <div style={{ height: 22 * scale, background:'#1a1f2e', borderBottom:'1px solid rgba(255,255,255,0.05)', display:'flex', alignItems:'center', padding:`0 ${10*scale}px`, gap: 5*scale }}>
        {['#FF5F57','#FFBD2E','#28C840'].map((c,i)=><div key={i} style={{ width:7*scale,height:7*scale,borderRadius:'50%',background:c }}/>)}
        <div style={{ flex:1, display:'flex', justifyContent:'center' }}>
          <div style={{ background:'rgba(255,255,255,0.05)', borderRadius: 4*scale, padding:`${1*scale}px ${8*scale}px`, fontFamily:'Inter,sans-serif', fontSize: 7*scale, color:'#475569' }}>smartekx.id</div>
        </div>
      </div>
      {/* Content */}
      <div style={{ height:'calc(100% - 22px)', overflow:'hidden' }}>
        {children}
      </div>
    </div>
    {/* Base */}
    <div style={{ height: 10*scale, background:'linear-gradient(to bottom,#2D3748,#1a1f2e)', borderRadius:`0 0 ${8*scale}px ${8*scale}px`, margin:`0 ${24*scale}px` }} />
    <div style={{ height: 6*scale, background:'#151b27', borderRadius: 4*scale, margin:`0 ${0*scale}px`, boxShadow:`0 ${4*scale}px ${16*scale}px rgba(0,0,0,0.3)` }} />
  </div>
);

// ── Phone Mockup ──────────────────────────────────────────────────────────────

const PhoneMockup = ({ children, scale = 1, label = '' }) => (
  <div style={{ position:'relative', width: 180 * scale, flexShrink: 0 }}>
    <div style={{ background:'#0D1117', borderRadius: 28*scale, border:`${2*scale}px solid #2D3748`, boxShadow:`0 ${16*scale}px ${40*scale}px rgba(0,0,0,0.4), inset 0 ${1*scale}px 0 rgba(255,255,255,0.06)`, overflow:'hidden', aspectRatio:'9/19.5', position:'relative' }}>
      {/* Notch */}
      <div style={{ position:'absolute',top:0,left:'50%',transform:'translateX(-50%)',width:60*scale,height:10*scale,background:'#0D1117',borderRadius:`0 0 ${8*scale}px ${8*scale}px`,zIndex:10 }} />
      {/* Status bar */}
      <div style={{ height:18*scale,background:'rgba(0,0,0,0.3)',display:'flex',justifyContent:'space-between',alignItems:'center',padding:`${2*scale}px ${12*scale}px`,paddingTop:4*scale }}>
        <span style={{ fontFamily:'Inter,sans-serif',fontSize:5*scale,color:'rgba(255,255,255,0.6)',fontWeight:600 }}>9:41</span>
        <div style={{ display:'flex',gap:2*scale,alignItems:'center' }}>
          {[1,1,0.6,0.3].map((o,i)=><div key={i} style={{ width:2*scale,height:4*scale*(0.5+i*0.15),background:`rgba(255,255,255,${o})`,borderRadius:1 }}/>)}
          <div style={{ width:6*scale,height:4*scale,border:'1px solid rgba(255,255,255,0.4)',borderRadius:1*scale,marginLeft:2*scale }}>
            <div style={{ width:'70%',height:'100%',background:'rgba(255,255,255,0.6)',borderRadius:1*scale }}/>
          </div>
        </div>
      </div>
      {/* App content */}
      <div style={{ height:`calc(100% - ${18*scale}px)`, overflow:'hidden' }}>
        {children}
      </div>
    </div>
    {label && <p style={{ textAlign:'center',fontFamily:'Inter,sans-serif',fontSize:10*scale,color:'#475569',marginTop:8*scale,fontWeight:600 }}>{label}</p>}
  </div>
);

// ── Animated Dashboard Screen (for Laptop) ────────────────────────────────────

const DashboardScreen = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setTick(n => n+1), 1800);
    return () => clearInterval(t);
  }, []);
  const vals = [[47,63,81,58,72,89,76],[52,68,45,79,83,61,94]];
  const current = vals[tick % 2];

  return (
    <div style={{ background:'#0D1117', height:'100%', padding:'1rem', fontFamily:'Inter,sans-serif', overflow:'hidden' }}>
      {/* Top nav of app */}
      <div style={{ display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'0.85rem' }}>
        <div style={{ display:'flex',gap:6,alignItems:'center' }}>
          <div style={{ width:18,height:18,borderRadius:5,background:'#2D8CFF',display:'flex',alignItems:'center',justifyContent:'center' }}>
            <span style={{ fontSize:9,fontWeight:800,color:'#fff' }}>X</span>
          </div>
          <span style={{ fontSize:9,fontWeight:700,color:'#F8FAFC',letterSpacing:'-0.01em' }}>Business Dashboard</span>
        </div>
        <div style={{ display:'flex',gap:4 }}>
          {['Overview','Analytics','Reports'].map(t=><span key={t} style={{ fontSize:7,color:'#475569',padding:'2px 6px',borderRadius:4,background:'rgba(255,255,255,0.04)' }}>{t}</span>)}
        </div>
      </div>

      {/* KPI row */}
      <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr 1fr 1fr',gap:6,marginBottom:'0.85rem' }}>
        {[{l:'Efisiensi',v:'+47%',c:'#2D8CFF',d:'+8% ↑'},{l:'Revenue',v:'Rp 2.4M',c:'#22C55E',d:'+12% ↑'},{l:'ROI',v:'8.2×',c:'#E8FF47',d:'+0.4 ↑'},{l:'NPS',v:'87',c:'#F59E0B',d:'+5 ↑'}].map(k=>(
          <div key={k.l} style={{ background:'rgba(255,255,255,0.03)',border:'1px solid rgba(255,255,255,0.05)',borderRadius:6,padding:'6px 8px' }}>
            <p style={{ fontSize:6,color:'#475569',marginBottom:2 }}>{k.l}</p>
            <p style={{ fontSize:12,fontWeight:800,color:k.c,letterSpacing:'-0.02em',lineHeight:1 }}>{k.v}</p>
            <p style={{ fontSize:6,color:'#22C55E',marginTop:2 }}>{k.d}</p>
          </div>
        ))}
      </div>

      {/* Chart */}
      <div style={{ background:'rgba(255,255,255,0.02)',border:'1px solid rgba(255,255,255,0.04)',borderRadius:8,padding:'8px',marginBottom:'0.85rem' }}>
        <div style={{ display:'flex',justifyContent:'space-between',marginBottom:6 }}>
          <span style={{ fontSize:7,fontWeight:600,color:'#94A3B8' }}>Business Growth — 7 hari terakhir</span>
          <span style={{ fontSize:6,color:'#475569' }}>Live</span>
        </div>
        <svg viewBox="0 0 360 60" style={{ width:'100%',height:'auto' }}>
          <defs>
            <linearGradient id="lg1" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#2D8CFF" stopOpacity="0.3"/>
              <stop offset="100%" stopColor="#2D8CFF" stopOpacity="0"/>
            </linearGradient>
          </defs>
          {/* Grid lines */}
          {[15,30,45].map(y=><line key={y} x1="0" y1={y} x2="360" y2={y} stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>)}
          {/* Area */}
          <path d={`M0,${60-current[0]*0.55} ${current.map((v,i)=>`L${i*60},${60-v*0.55}`).join(' ')} L360,60 L0,60 Z`}
            fill="url(#lg1)" style={{ transition:'d 0.8s cubic-bezier(.16,1,.3,1)' }}/>
          {/* Line */}
          <path d={`M0,${60-current[0]*0.55} ${current.map((v,i)=>`L${i*60},${60-v*0.55}`).join(' ')}`}
            stroke="#2D8CFF" strokeWidth="2" fill="none" strokeLinecap="round"
            style={{ transition:'d 0.8s cubic-bezier(.16,1,.3,1)' }}/>
          {/* Last dot */}
          <circle cx="360" cy={60-current[6]*0.55} r="3.5" fill="#2D8CFF"/>
          <circle cx="360" cy={60-current[6]*0.55} r="6" fill="none" stroke="#2D8CFF" strokeOpacity="0.3" strokeWidth="1.5"/>
        </svg>
      </div>

      {/* Process automation list */}
      <div style={{ background:'rgba(255,255,255,0.02)',border:'1px solid rgba(255,255,255,0.04)',borderRadius:8,padding:'8px' }}>
        <p style={{ fontSize:7,fontWeight:600,color:'#94A3B8',marginBottom:6 }}>Automated Processes</p>
        {[{n:'Invoice Generator',p:100,c:'#22C55E'},{n:'Customer Follow-up AI',p:78,c:'#2D8CFF'},{n:'Daily Report',p:100,c:'#22C55E'},{n:'Inventory Alert',p:92,c:'#E8FF47'}].map(proc=>(
          <div key={proc.n} style={{ marginBottom:5 }}>
            <div style={{ display:'flex',justifyContent:'space-between',marginBottom:2 }}>
              <span style={{ fontSize:6.5,color:'#64748B' }}>{proc.n}</span>
              <span style={{ fontSize:6.5,fontWeight:700,color:proc.c }}>{proc.p}%</span>
            </div>
            <div style={{ height:3,background:'rgba(255,255,255,0.05)',borderRadius:2 }}>
              <div style={{ height:'100%',width:`${proc.p}%`,background:proc.c,borderRadius:2,transition:'width 1s ease' }}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ── Travoy App Screen (for Phone) ─────────────────────────────────────────────

const TravoyScreen = () => (
  <div style={{ background:'linear-gradient(180deg,#0D2137 0%,#0A1628 100%)',height:'100%',padding:'12px 10px',fontFamily:'Inter,sans-serif',overflow:'hidden' }}>
    {/* App header */}
    <div style={{ display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10 }}>
      <div>
        <p style={{ fontSize:7,color:'rgba(255,255,255,0.4)',marginBottom:1 }}>Selamat Datang</p>
        <p style={{ fontSize:11,fontWeight:800,color:'#fff',letterSpacing:'-0.01em' }}>Travoy</p>
      </div>
      <div style={{ width:24,height:24,borderRadius:'50%',background:'rgba(45,140,255,0.2)',border:'1.5px solid rgba(45,140,255,0.4)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10 }}>👤</div>
    </div>
    {/* Map placeholder */}
    <div style={{ borderRadius:10,overflow:'hidden',marginBottom:10,position:'relative',height:80,background:'#0D2F4F' }}>
      {/* Fake roads */}
      <svg viewBox="0 0 160 80" style={{ position:'absolute',inset:0,width:'100%',height:'100%' }}>
        <rect width="160" height="80" fill="#0D2F4F"/>
        <line x1="0" y1="40" x2="160" y2="40" stroke="#1A4A6E" strokeWidth="4"/>
        <line x1="80" y1="0" x2="80" y2="80" stroke="#1A4A6E" strokeWidth="3"/>
        <line x1="0" y1="20" x2="160" y2="60" stroke="#153A56" strokeWidth="2"/>
        {/* Route */}
        <path d="M20,60 Q60,40 80,40 Q110,40 140,25" stroke="#2D8CFF" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeDasharray="4 2"/>
        {/* Location pins */}
        <circle cx="20" cy="60" r="4" fill="#22C55E"/>
        <circle cx="140" cy="25" r="4" fill="#2D8CFF"/>
        {/* Car */}
        <circle cx="80" cy="40" r="5" fill="#E8FF47"/>
        <circle cx="80" cy="40" r="8" fill="none" stroke="#E8FF47" strokeOpacity="0.3" strokeWidth="1.5">
          <animate attributeName="r" values="5;12;5" dur="2s" repeatCount="indefinite"/>
          <animate attributeName="stroke-opacity" values="0.3;0;0.3" dur="2s" repeatCount="indefinite"/>
        </circle>
      </svg>
    </div>
    {/* Status cards */}
    <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:5,marginBottom:8 }}>
      {[{l:'Tol Cipali',v:'Lancar',c:'#22C55E'},{l:'Rest Area',v:'2.3 km',c:'#2D8CFF'},{l:'BBM',v:'Full',c:'#E8FF47'},{l:'ETA',v:'45 mnt',c:'#F59E0B'}].map(s=>(
        <div key={s.l} style={{ background:'rgba(255,255,255,0.05)',borderRadius:7,padding:'5px 7px',border:`1px solid ${s.c}25` }}>
          <p style={{ fontSize:6,color:'rgba(255,255,255,0.4)',marginBottom:1 }}>{s.l}</p>
          <p style={{ fontSize:9,fontWeight:700,color:s.c }}>{s.v}</p>
        </div>
      ))}
    </div>
    {/* Users online */}
    <div style={{ background:'rgba(45,140,255,0.08)',borderRadius:8,padding:'5px 8px',border:'1px solid rgba(45,140,255,0.15)',display:'flex',justifyContent:'space-between',alignItems:'center' }}>
      <span style={{ fontSize:6.5,color:'#7AB8FF' }}>Pengguna aktif sekarang</span>
      <span style={{ fontSize:10,fontWeight:800,color:'#E8FF47' }}>5.247</span>
    </div>
  </div>
);

// ── Hero Visual Composition ───────────────────────────────────────────────────

const HeroVisual = () => (
  <div className="sx-float-slow" style={{ position:'relative', width:'100%', display:'flex', justifyContent:'center', alignItems:'flex-end', gap:'-40px' }}>
    {/* Glow behind */}
    <div style={{ position:'absolute',top:'20%',left:'50%',transform:'translateX(-50%)',width:'80%',height:'60%',background:'radial-gradient(ellipse,rgba(45,140,255,0.12) 0%,transparent 70%)',pointerEvents:'none',zIndex:0 }}/>
    {/* Laptop */}
    <div style={{ position:'relative',zIndex:2 }}>
      <LaptopMockup scale={0.78}>
        <DashboardScreen />
      </LaptopMockup>
    </div>
    {/* Phone — overlapping */}
    <div className="sx-float" style={{ position:'absolute', bottom:20, right:-20, zIndex:3 }}>
      <PhoneMockup scale={0.72} label="">
        <TravoyScreen />
      </PhoneMockup>
    </div>
    {/* Floating metric badges */}
    <FloatingBadge style={{ position:'absolute',top:'8%',left:'-5%',zIndex:4 }} delay={0}>
      <div style={{ display:'flex',alignItems:'center',gap:6 }}>
        <div style={{ width:24,height:24,borderRadius:8,background:'rgba(34,197,94,0.15)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:12 }}>📈</div>
        <div>
          <p style={{ fontSize:8,fontWeight:800,color:'#22C55E',lineHeight:1 }}>+47%</p>
          <p style={{ fontSize:7,color:'#64748B' }}>Efisiensi</p>
        </div>
      </div>
    </FloatingBadge>
    <FloatingBadge style={{ position:'absolute',top:'35%',right:'5%',zIndex:4 }} delay={400}>
      <div style={{ display:'flex',alignItems:'center',gap:6 }}>
        <div style={{ width:24,height:24,borderRadius:8,background:'rgba(232,255,71,0.12)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:12 }}>⚡</div>
        <div>
          <p style={{ fontSize:8,fontWeight:800,color:'#E8FF47',lineHeight:1 }}>5.247</p>
          <p style={{ fontSize:7,color:'#64748B' }}>Users Live</p>
        </div>
      </div>
    </FloatingBadge>
    <FloatingBadge style={{ position:'absolute',bottom:'28%',left:'-8%',zIndex:4 }} delay={800}>
      <div style={{ display:'flex',alignItems:'center',gap:6 }}>
        <div style={{ width:24,height:24,borderRadius:8,background:'rgba(45,140,255,0.12)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10 }}>🤖</div>
        <div>
          <p style={{ fontSize:8,fontWeight:700,color:'#7AB8FF',lineHeight:1 }}>AI Audit</p>
          <p style={{ fontSize:7,color:'#64748B' }}>GRATIS</p>
        </div>
      </div>
    </FloatingBadge>
  </div>
);

// ── Floating Badge ─────────────────────────────────────────────────────────────

const FloatingBadge = ({ children, style = {}, delay = 0 }) => (
  <div style={{
    background:'rgba(13,17,23,0.85)',
    backdropFilter:'blur(12px)',
    border:'1px solid rgba(45,140,255,0.15)',
    borderRadius:12,
    padding:'7px 12px',
    boxShadow:'0 8px 24px rgba(0,0,0,0.2)',
    animation:`floatY ${3.5 + delay/1000}s ease-in-out infinite`,
    animationDelay:`${delay}ms`,
    ...style
  }}>
    {children}
  </div>
);

// ── Animated Business Flow ────────────────────────────────────────────────────

const AnimatedBusinessFlow = () => {
  const [step, setStep] = React.useState(0);
  const [ref, visible] = useScrollReveal(0.2);

  React.useEffect(() => {
    if (!visible) return;
    const t = setInterval(() => setStep(s => (s + 1) % 4), 2200);
    return () => clearInterval(t);
  }, [visible]);

  const problems = ['Proses manual & repetitif','Data tidak termanfaatkan','Keputusan tanpa insight','Customer service lambat','Operasional tidak efisien'];
  const steps2 = [{n:'01',t:'Pahami Bisnis',i:'◎'},{n:'02',t:'Identifikasi Masalah',i:'⊕'},{n:'03',t:'Tentukan Solusi',i:'◈'},{n:'04',t:'Deliver & Ukur',i:'◉'}];
  const outcomes = [{v:'+47%',l:'Efisiensi'},{v:'ROI < 6 bln',l:'Return'},{v:'Terukur',l:'KPI jelas'},{v:'Scalable',l:'Tumbuh bareng'}];

  return (
    <div ref={ref} style={{ maxWidth:1200, margin:'0 auto' }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 56px 1fr 56px 1fr', gap:0, alignItems:'center' }} className="flow-grid-outer">

        {/* COLUMN 1: Problems */}
        <Reveal direction="left">
          <div style={{ background:'rgba(239,68,68,0.04)', border:'1px solid rgba(239,68,68,0.1)', borderRadius:20, padding:'2rem', height:'100%', boxSizing:'border-box' }}>
            <div style={{ display:'flex',alignItems:'center',gap:10,marginBottom:'1.5rem' }}>
              <div style={{ width:32,height:32,borderRadius:9,background:'rgba(239,68,68,0.1)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'1rem' }}>⚠</div>
              <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'0.95rem',fontWeight:700,color:'#FCA5A5' }}>Masalah Bisnis Anda</h3>
            </div>
            {problems.map((p,i)=>(
              <div key={p} style={{ display:'flex',gap:10,alignItems:'flex-start',marginBottom:'0.75rem',opacity: visible?1:0, transition:`opacity 0.4s ${i*100}ms` }}>
                <div style={{ width:6,height:6,borderRadius:'50%',background:'rgba(239,68,68,0.4)',flexShrink:0,marginTop:5 }}/>
                <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.85rem',color:'#94A3B8',lineHeight:1.5 }}>{p}</span>
              </div>
            ))}
            <div style={{ marginTop:'1.25rem',padding:'0.85rem 1rem',background:'rgba(239,68,68,0.05)',borderRadius:10,border:'1px solid rgba(239,68,68,0.08)' }}>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',color:'#FCA5A5',fontStyle:'italic',lineHeight:1.6 }}>Setiap hari masalah ini berjalan = biaya yang tidak perlu.</p>
            </div>
          </div>
        </Reveal>

        {/* Arrow 1 */}
        <div style={{ display:'flex',justifyContent:'center',alignItems:'center' }}>
          <svg width="48" height="48" viewBox="0 0 48 48">
            <defs>
              <linearGradient id="arrGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="rgba(239,68,68,0.4)"/>
                <stop offset="100%" stopColor="#2D8CFF"/>
              </linearGradient>
            </defs>
            <path d="M8 24 L38 24 M30 16 L38 24 L30 32" stroke="url(#arrGrad1)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>

        {/* COLUMN 2: Process */}
        <Reveal>
          <div style={{ display:'flex',flexDirection:'column',gap:6 }}>
            {steps2.map((s,i)=>(
              <div key={s.n} style={{
                background: step===i ? '#1C2B3E' : '#131A24',
                border:`1px solid ${step===i ? 'rgba(45,140,255,0.3)' : 'rgba(45,140,255,0.08)'}`,
                borderRadius:14,
                padding:'1rem 1.25rem',
                transition:'all 0.4s cubic-bezier(.16,1,.3,1)',
                transform: step===i ? 'scale(1.02)' : 'scale(1)',
                boxShadow: step===i ? '0 8px 24px rgba(45,140,255,0.12)' : 'none',
              }}>
                <div style={{ display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'0.4rem' }}>
                  <div style={{ display:'flex',alignItems:'center',gap:8 }}>
                    <span style={{ fontSize:'1rem',opacity: step===i?1:0.5,transition:'opacity 0.3s' }}>{s.i}</span>
                    <h4 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'0.95rem',fontWeight:700,color: step===i?'#F8FAFC':'#64748B',transition:'color 0.3s',letterSpacing:'-0.01em' }}>{s.t}</h4>
                  </div>
                  <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.62rem',fontWeight:800,color:'#2D8CFF',letterSpacing:'0.04em' }}>{s.n}</span>
                </div>
                {/* Active indicator */}
                {step===i && (
                  <div style={{ height:2,background:'linear-gradient(to right,#2D8CFF,transparent)',borderRadius:1,marginTop:4 }}/>
                )}
              </div>
            ))}
            {/* AI-augmented label */}
            <div style={{ background:'rgba(232,255,71,0.05)',border:'1px solid rgba(232,255,71,0.1)',borderRadius:10,padding:'7px 12px',textAlign:'center',marginTop:4 }}>
              <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.7rem',fontWeight:600,color:'rgba(232,255,71,0.7)' }}>⚡ AI-Augmented Delivery</p>
            </div>
          </div>
        </Reveal>

        {/* Arrow 2 */}
        <div style={{ display:'flex',justifyContent:'center',alignItems:'center' }}>
          <svg width="48" height="48" viewBox="0 0 48 48">
            <defs>
              <linearGradient id="arrGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#2D8CFF"/>
                <stop offset="100%" stopColor="rgba(45,140,255,0.4)"/>
              </linearGradient>
            </defs>
            <path d="M8 24 L38 24 M30 16 L38 24 L30 32" stroke="url(#arrGrad2)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>

        {/* COLUMN 3: Outcomes */}
        <Reveal direction="right">
          <div style={{ background:'rgba(45,140,255,0.04)', border:'1px solid rgba(45,140,255,0.12)', borderRadius:20, padding:'2rem', height:'100%', boxSizing:'border-box' }}>
            <div style={{ display:'flex',alignItems:'center',gap:10,marginBottom:'1.5rem' }}>
              <div style={{ width:32,height:32,borderRadius:9,background:'rgba(45,140,255,0.12)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'1rem' }}>✦</div>
              <h3 style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'0.95rem',fontWeight:700,color:'#7AB8FF' }}>Business Outcomes</h3>
            </div>
            {/* Metric cards */}
            <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginBottom:'1.25rem' }}>
              {outcomes.map((o,i)=>(
                <div key={o.l} style={{ background:'rgba(45,140,255,0.06)',border:'1px solid rgba(45,140,255,0.08)',borderRadius:12,padding:'0.85rem',textAlign:'center',opacity:visible?1:0,transition:`opacity 0.4s ${200+i*100}ms` }}>
                  <div style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'1.15rem',fontWeight:800,color:'#7AB8FF',letterSpacing:'-0.02em',lineHeight:1 }}>{o.v}</div>
                  <div style={{ fontFamily:'Inter,sans-serif',fontSize:'0.65rem',color:'#475569',marginTop:4 }}>{o.l}</div>
                </div>
              ))}
            </div>
            {/* Real proof */}
            {[{c:'Jasa Marga',r:'5.000+ users dalam 3 minggu'},{c:'Adira Finance',r:'25 screens delivered on schedule'},{c:'Sarawak MY',r:'Platform internasional dari Bandung'}].map(p=>(
              <div key={p.c} style={{ borderTop:'1px solid rgba(255,255,255,0.04)',paddingTop:'0.65rem',marginTop:'0.65rem' }}>
                <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.7rem',fontWeight:700,color:'#2D8CFF' }}>{p.c}</span>
                <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.75rem',color:'#475569',lineHeight:1.5,marginTop:1 }}>{p.r}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      {/* Tech stack ribbon */}
      <Reveal delay={400}>
        <div style={{ marginTop:'2rem',background:'rgba(45,140,255,0.04)',border:'1px solid rgba(45,140,255,0.08)',borderRadius:14,padding:'0.85rem 1.5rem',display:'flex',flexWrap:'wrap',alignItems:'center',justifyContent:'center',gap:'clamp(0.75rem,2vw,2rem)' }}>
          <span style={{ fontFamily:'Inter,sans-serif',fontSize:'0.68rem',fontWeight:700,color:'#374151',textTransform:'uppercase',letterSpacing:'0.07em' }}>Enabled by</span>
          {['React / Next.js','Node.js · Python','AI APIs','Microservices','iOS · Android','Cloud','Big Data · IoT'].map(t=>(
            <span key={t} style={{ fontFamily:'Inter,sans-serif',fontSize:'0.78rem',fontWeight:500,color:'#2D8CFF',opacity:0.7 }}>{t}</span>
          ))}
        </div>
      </Reveal>
    </div>
  );
};

// ── Founder Video Placeholder ─────────────────────────────────────────────────

const FounderVideoPlaceholder = () => {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div onMouseEnter={()=>setHovered(true)} onMouseLeave={()=>setHovered(false)} style={{ position:'relative',borderRadius:24,overflow:'hidden',aspectRatio:'16/9',cursor:'pointer',boxShadow:'0 24px 80px rgba(0,0,0,0.25)',background:'#0D1117' }}>
      {/* Animated grid bg */}
      <div style={{ position:'absolute',inset:0,backgroundImage:'linear-gradient(rgba(45,140,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(45,140,255,0.06) 1px,transparent 1px)',backgroundSize:'48px 48px',animation:'gradShift 8s ease infinite',backgroundSize:'200% 200%' }}/>
      {/* Gradient overlay */}
      <div style={{ position:'absolute',inset:0,background:'linear-gradient(135deg,rgba(13,17,23,0.9) 0%,rgba(28,43,62,0.7) 50%,rgba(13,17,23,0.9) 100%)' }}/>
      {/* Glow */}
      <div style={{ position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',width:'50%',paddingBottom:'50%',borderRadius:'50%',background:'radial-gradient(circle,rgba(45,140,255,0.15),transparent 70%)' }}/>

      {/* Scanline effect */}
      <div style={{ position:'absolute',inset:0,overflow:'hidden',pointerEvents:'none' }}>
        <div style={{ position:'absolute',left:0,right:0,height:2,background:'linear-gradient(to right,transparent,rgba(45,140,255,0.15),transparent)',animation:'scanline 4s linear infinite' }}/>
      </div>

      {/* Content */}
      <div style={{ position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:'1.25rem' }}>
        {/* Founder avatar placeholder */}
        <div style={{ position:'relative',marginBottom:'0.5rem' }}>
          <div style={{ width:80,height:80,borderRadius:'50%',background:'linear-gradient(135deg,rgba(45,140,255,0.2),rgba(45,140,255,0.05))',border:'2px solid rgba(45,140,255,0.3)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'2rem' }}>
            👤
          </div>
          {/* Pulse rings */}
          {[1,2].map(i=>(
            <div key={i} style={{ position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',width:80,height:80,borderRadius:'50%',border:'1.5px solid rgba(45,140,255,0.3)',animation:`pulseRing ${1.5+i*0.5}s ease-out infinite`,animationDelay:`${i*0.4}s` }}/>
          ))}
        </div>

        {/* Play button */}
        <div style={{ width:64,height:64,borderRadius:'50%',background:hovered?'rgba(232,255,71,0.15)':'rgba(255,255,255,0.08)',backdropFilter:'blur(8px)',border:`1.5px solid ${hovered?'rgba(232,255,71,0.4)':'rgba(255,255,255,0.2)'}`,display:'flex',alignItems:'center',justifyContent:'center',transition:'all 0.2s' }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill={hovered?"#E8FF47":"#fff"}><path d="M8 5v14l11-7z"/></svg>
        </div>

        <div style={{ textAlign:'center' }}>
          <p style={{ fontFamily:'Bricolage Grotesque,Inter,sans-serif',fontSize:'clamp(1rem,2vw,1.3rem)',fontWeight:800,color:'#F8FAFC',letterSpacing:'-0.02em',marginBottom:'0.4rem' }}>
            "Ini bukan soal teknologi. Ini soal bisnis Anda."
          </p>
          <p style={{ fontFamily:'Inter,sans-serif',fontSize:'0.82rem',color:'#64748B' }}>
            Maharizara Alfar — Founder, Smartek X · 3 menit
          </p>
        </div>

        {/* Chapter markers */}
        <div style={{ display:'flex',gap:10,flexWrap:'wrap',justifyContent:'center' }}>
          {['00:00 Intro','00:40 Filosofi','01:30 Portfolio','02:15 Cara Kerja'].map(c=>(
            <div key={c} style={{ background:'rgba(255,255,255,0.05)',border:'1px solid rgba(255,255,255,0.08)',borderRadius:100,padding:'4px 12px',fontFamily:'Inter,sans-serif',fontSize:'0.68rem',color:'#64748B' }}>{c}</div>
          ))}
        </div>
      </div>

      {/* Coming soon badge */}
      <div style={{ position:'absolute',top:16,right:16,background:'rgba(45,140,255,0.2)',backdropFilter:'blur(8px)',border:'1px solid rgba(45,140,255,0.25)',borderRadius:100,padding:'4px 12px',fontFamily:'Inter,sans-serif',fontSize:'0.68rem',fontWeight:600,color:'#7AB8FF',letterSpacing:'0.04em' }}>
        Video segera hadir
      </div>

      {/* Bottom bar with waveform */}
      <div style={{ position:'absolute',bottom:0,left:0,right:0,height:40,background:'rgba(0,0,0,0.5)',backdropFilter:'blur(4px)',display:'flex',alignItems:'center',padding:'0 16px',gap:12 }}>
        <div style={{ display:'flex',alignItems:'center',gap:3,flex:1 }}>
          {Array.from({length:60},(_,i)=>(
            <div key={i} style={{ width:2,height:4+Math.sin(i*0.5)*6,background:`rgba(45,140,255,${0.2+Math.abs(Math.sin(i*0.3))*0.5})`,borderRadius:1,flexShrink:0 }}/>
          ))}
        </div>
      </div>
    </div>
  );
};

// ── Portfolio Phone Mockup (for portfolio cards) ──────────────────────────────

const ProjectPhoneMock = ({ accent = '#2D8CFF', appName = 'App', screen }) => (
  <PhoneMockup scale={0.65}>
    {screen || (
      <div style={{ background:`linear-gradient(180deg,${accent}22,#0D1117)`,height:'100%',display:'flex',alignItems:'center',justifyContent:'center',flexDirection:'column',gap:8,padding:12 }}>
        <div style={{ width:32,height:32,borderRadius:10,background:`${accent}22`,border:`1.5px solid ${accent}44`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:14 }}>📱</div>
        <p style={{ fontFamily:'Inter,sans-serif',fontSize:8,fontWeight:700,color:'rgba(255,255,255,0.6)',textAlign:'center' }}>{appName}</p>
        <div style={{ width:'80%',height:1,background:`${accent}33` }}/>
        {[80,60,90,45].map((w,i)=>(
          <div key={i} style={{ width:`${w}%`,height:5,background:`${accent}20`,borderRadius:3 }}/>
        ))}
      </div>
    )}
  </PhoneMockup>
);


const WAIcon = ({ size = 20, color = '#25D366' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
    <path d="M12 0C5.373 0 0 5.373 0 12c0 2.118.549 4.107 1.51 5.831L0 24l6.335-1.487A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.8 9.8 0 01-5.03-1.385l-.36-.214-3.762.883.932-3.654-.235-.376A9.79 9.79 0 012.182 12C2.182 6.57 6.57 2.182 12 2.182S21.818 6.57 21.818 12 17.43 21.818 12 21.818z"/>
  </svg>
);

Object.assign(window, { WAIcon,
  MarqueeBand, LaptopMockup, PhoneMockup,
  DashboardScreen, TravoyScreen,
  HeroVisual, FloatingBadge,
  AnimatedBusinessFlow, FounderVideoPlaceholder,
  ProjectPhoneMock,
});