/* eslint-disable */
// HAIQ — Hero with editorial title, workflow 3D card, spiral

function ItalicTitle({parts, style}) {
  // parts can be array of strings (with *accent* markers) or single string
  const arr = Array.isArray(parts) ? parts : [parts];
  return (
    <h1 style={{
      fontFamily:'var(--font-sans)', fontWeight:700,
      fontSize:'clamp(46px, 7.2vw, 96px)', lineHeight:1.08,
      letterSpacing:'-0.03em', color:'#FAFAFA', margin:0,
      textWrap:'balance',
      ...style,
    }}>
      {arr.map((line, li) => (
        <span key={li} style={{display:'block'}}>
          {line.split(/(\*[^*]+\*)/g).map((part, i) => {
            if (part.startsWith('*') && part.endsWith('*')) {
              return <span key={i} style={{fontWeight:700}}>{part.slice(1,-1)}</span>;
            }
            return <span key={i}>{part}</span>;
          })}
        </span>
      ))}
    </h1>
  );
}

// Robot illustration — CSS/SVG composition, no external images
function RobotIllustration() {
  const particles = [
    { x:32,  y:88,  size:3, dur:4.2, delay:0   },
    { x:400, y:128, size:4, dur:5.1, delay:1.1 },
    { x:52,  y:292, size:2, dur:3.8, delay:2.3 },
    { x:412, y:268, size:3, dur:4.7, delay:0.6 },
    { x:144, y:36,  size:2, dur:5.4, delay:1.8 },
    { x:308, y:42,  size:3, dur:3.5, delay:0.9 },
    { x:18,  y:196, size:2, dur:4.9, delay:3.0 },
    { x:432, y:204, size:3, dur:4.0, delay:1.4 },
  ];

  return (
    <div style={{
      position:'relative', width:'100%', maxWidth:460, height:460,
      display:'flex', alignItems:'center', justifyContent:'center',
    }}>

      {/* Background halo */}
      <div style={{
        position:'absolute', width:360, height:360, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.025) 45%, transparent 72%)',
        filter:'blur(50px)',
        top:'50%', left:'50%', transform:'translate(-50%,-50%)',
        animation:'haiqRobotPulseGlow 5s ease-in-out infinite',
        pointerEvents:'none',
      }}/>

      {/* Holographic rings — perspective plane */}
      <div style={{
        position:'absolute', inset:0, perspective:'700px',
        display:'flex', alignItems:'center', justifyContent:'center',
        pointerEvents:'none',
      }}>
        {[
          { w:340, h:58,  tz:-8,  op:0.13, aDelay:'0s'   },
          { w:292, h:48,  tz:22,  op:0.09, aDelay:'1.6s' },
          { w:402, h:68,  tz:-44, op:0.05, aDelay:'0.9s' },
        ].map((r, i) => (
          <div key={i} style={{
            position:'absolute',
            width:r.w, height:r.h, borderRadius:'50%',
            border:`1px solid rgba(255,255,255,${r.op})`,
            transform:`rotateX(76deg) translateZ(${r.tz}px)`,
            animation:`haiqRobotPulseGlow 4.5s ease-in-out ${r.aDelay} infinite`,
          }}/>
        ))}
      </div>

      {/* Ambient particle dots */}
      {particles.map((p, i) => (
        <div key={i} style={{
          position:'absolute', left:p.x, top:p.y,
          width:p.size, height:p.size, borderRadius:'50%',
          background:'#fff', opacity:0,
          boxShadow:`0 0 ${p.size * 3}px rgba(255,255,255,0.6)`,
          animation:`haiqRobotParticleDrift ${p.dur}s ease-in-out ${p.delay}s infinite`,
          pointerEvents:'none',
        }}/>
      ))}

      {/* Robot figure — floats */}
      <div style={{
        position:'relative', zIndex:2,
        display:'flex', flexDirection:'column', alignItems:'center',
        animation:'haiqRobotFloat 4.5s ease-in-out infinite',
      }}>

        {/* Antenna */}
        <div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
          <div style={{
            width:8, height:8, borderRadius:'50%', background:'#fff',
            boxShadow:'0 0 10px rgba(255,255,255,0.9), 0 0 22px rgba(255,255,255,0.5)',
            animation:'haiqRobotPulseGlow 2.2s ease-in-out infinite',
          }}/>
          <div style={{
            width:2, height:18,
            background:'linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0.1))',
          }}/>
        </div>

        {/* Head */}
        <div style={{
          width:148, height:114, borderRadius:24,
          background:'rgba(13,13,13,0.96)',
          border:'1px solid rgba(255,255,255,0.13)',
          boxShadow:'0 0 28px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.08)',
          position:'relative', overflow:'hidden',
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
          gap:10,
          animation:'haiqRobotIdleTilt 6s ease-in-out infinite',
        }}>
          {/* Scanline texture */}
          <div style={{
            position:'absolute', inset:0,
            background:'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.01) 3px, rgba(255,255,255,0.01) 4px)',
            pointerEvents:'none',
          }}/>
          {/* Top highlight edge */}
          <div style={{
            position:'absolute', top:0, left:0, right:0, height:1,
            background:'linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent)',
          }}/>

          {/* Eyes */}
          <div style={{display:'flex', gap:20, position:'relative', zIndex:1}}>
            {[0, 1].map(i => (
              <div key={i} style={{
                width:24, height:14, borderRadius:7, background:'#fff',
                boxShadow:'0 0 10px rgba(255,255,255,0.85), 0 0 22px rgba(255,255,255,0.45)',
                animation:`haiqRobotPulseGlow ${2.4 + i * 0.3}s ease-in-out ${i * 0.4}s infinite`,
              }}/>
            ))}
          </div>

          {/* Status bar */}
          <div style={{
            width:58, height:4, borderRadius:2,
            background:'rgba(255,255,255,0.1)',
            position:'relative', zIndex:1, overflow:'hidden',
          }}>
            <div style={{
              position:'absolute', top:0, left:0,
              height:'100%', width:'55%', borderRadius:2,
              background:'rgba(255,255,255,0.42)',
              animation:'haiqRobotStatusScan 2.8s ease-in-out infinite',
            }}/>
          </div>

          {/* Indicator dots */}
          <div style={{display:'flex', gap:6, position:'relative', zIndex:1}}>
            {[0.7, 0.35, 0.16].map((op, i) => (
              <div key={i} style={{
                width:4, height:4, borderRadius:'50%',
                background:`rgba(255,255,255,${op})`,
              }}/>
            ))}
          </div>
        </div>

        {/* Neck */}
        <div style={{
          width:28, height:22,
          background:'rgba(9,9,9,0.92)',
          borderLeft:'1px solid rgba(255,255,255,0.07)',
          borderRight:'1px solid rgba(255,255,255,0.07)',
          position:'relative',
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:5,
        }}>
          {[0.08, 0.05].map((op, i) => (
            <div key={i} style={{width:16, height:1, background:`rgba(255,255,255,${op})`}}/>
          ))}
        </div>

        {/* Shoulders + Torso */}
        <div style={{
          width:264, height:170, borderRadius:22,
          background:'rgba(10,10,10,0.96)',
          border:'1px solid rgba(255,255,255,0.09)',
          boxShadow:'0 20px 60px rgba(0,0,0,0.65), 0 0 40px rgba(255,255,255,0.025), inset 0 1px 0 rgba(255,255,255,0.06)',
          position:'relative', overflow:'hidden',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          {/* Scanline texture */}
          <div style={{
            position:'absolute', inset:0,
            background:'repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.008) 3px, rgba(255,255,255,0.008) 4px)',
            pointerEvents:'none',
          }}/>
          {/* Top highlight edge */}
          <div style={{
            position:'absolute', top:0, left:0, right:0, height:1,
            background:'linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)',
          }}/>

          {/* Chest panel */}
          <div style={{
            width:178, height:106, borderRadius:14,
            background:'rgba(255,255,255,0.018)',
            border:'1px solid rgba(255,255,255,0.07)',
            position:'relative',
            display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:10,
          }}>
            <div style={{
              position:'absolute', top:0, left:0, right:0, height:1,
              background:'linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent)',
            }}/>

            {/* Core orb */}
            <div style={{
              width:38, height:38, borderRadius:'50%',
              background:'rgba(255,255,255,0.03)',
              border:'1px solid rgba(255,255,255,0.18)',
              display:'flex', alignItems:'center', justifyContent:'center',
              boxShadow:'0 0 18px rgba(255,255,255,0.05)',
              animation:'haiqRobotPulseGlow 3.2s ease-in-out infinite',
            }}>
              <div style={{
                width:14, height:14, borderRadius:'50%', background:'#fff',
                boxShadow:'0 0 14px rgba(255,255,255,0.8), 0 0 28px rgba(255,255,255,0.4)',
                animation:'haiqRobotPulseGlow 1.8s ease-in-out 0.4s infinite',
              }}/>
            </div>

            {/* Data rows */}
            {[{ w:104, op:0.22 }, { w:76, op:0.13 }, { w:90, op:0.08 }].map((r, i) => (
              <div key={i} style={{
                width:r.w, height:3, borderRadius:2,
                background:`rgba(255,255,255,${r.op})`,
              }}/>
            ))}
          </div>

          {/* Side accent pips */}
          {[-1, 1].map(side => (
            <div key={side} style={{
              position:'absolute',
              left: side < 0 ? 14 : undefined,
              right: side > 0 ? 14 : undefined,
              top:'50%', transform:'translateY(-50%)',
              display:'flex', flexDirection:'column', gap:7,
            }}>
              {[0.38, 0.22, 0.11].map((op, i) => (
                <div key={i} style={{
                  width:6, height:6, borderRadius:2,
                  background:`rgba(255,255,255,${op})`,
                }}/>
              ))}
            </div>
          ))}
        </div>

        {/* Ground shadow */}
        <div style={{
          width:210, height:8, borderRadius:'50%',
          background:'rgba(255,255,255,0.032)',
          filter:'blur(6px)',
          marginTop:8,
        }}/>
      </div>
    </div>
  );
}

function Hero({t}) {
  return (
    <section id="top" data-screen-label="01 Hero" style={{
      position:'relative', zIndex:2,
      minHeight:'100vh', padding:'120px 60px 60px',
      display:'flex', flexDirection:'column', justifyContent:'center',
      overflow:'hidden',
    }}>
      {/* Spiral as background */}
      <div style={{
        position:'absolute', inset:0,
        display:'flex', alignItems:'center', justifyContent:'center',
        opacity:0.55, pointerEvents:'none', zIndex:0,
      }}>
        <Spiral size={Math.min(900, typeof window!=='undefined'? window.innerWidth*0.7 : 700)}/>
      </div>

      {/* Vignette */}
      <div style={{
        position:'absolute', inset:0, zIndex:1, pointerEvents:'none',
        background:'radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.85) 100%)',
      }}/>

      <div style={{
        position:'relative', zIndex:2, maxWidth:1300, margin:'0 auto', width:'100%',
        display:'grid', gridTemplateColumns:'1.2fr 0.9fr', gap:60, alignItems:'center',
      }} className="hero-grid">
        <div>
          <Reveal delay={0}>
            <ItalicTitle parts={t.hero.title}/>
          </Reveal>

          <Reveal delay={0.15} as="p" style={{
            marginTop:28, maxWidth:520,
            fontFamily:'var(--font-sans)', fontSize:17, lineHeight:1.7,
            color:'#D4D4D8',
          }}>{t.hero.desc}</Reveal>

          <Reveal delay={0.28} as="div" style={{
            marginTop:36, display:'flex', gap:12, flexWrap:'wrap',
          }}>
            <button onClick={() => window.openContactModal('hero-cta')} className="btn-pill" style={{
              background:'#FAFAFA', color:'#09090B', borderColor:'#FAFAFA',
            }}>{t.hero.ctaPrimary} <span>›</span></button>
            <a href="#services" className="btn-pill btn-pill--ghost">{t.hero.ctaSecondary}</a>
          </Reveal>
        </div>

        <Reveal delay={0.35}>
          <RobotIllustration/>
        </Reveal>
      </div>

      {/* Bottom corner cues */}
      <div style={{
        position:'absolute', left:32, bottom:24, zIndex:3,
        fontFamily:'var(--font-sans)', fontSize:10, color:'rgba(255,255,255,0.4)',
        letterSpacing:'0.4em', textTransform:'uppercase',
        animation:'haiqArrowBounce 2s ease-in-out infinite',
      }}>↓ {t.hero.scroll}</div>
    </section>
  );
}

Object.assign(window, {Hero, RobotIllustration, ItalicTitle});