/* ──────────────────────────────────────────────────────────
   Hero — desktop: left copy + right orb.
           mobile: orb as background, text layered on top.
   ────────────────────────────────────────────────────────── */
const { useState, useEffect, useRef, useMemo, useLayoutEffect } = React;

function Hero() {
  const isMobile = useIsMobile();
  const clients = ['NISSAN', 'DENSO', 'HITACHI', 'NTT DATA', 'Capgemini'];

  if (isMobile) {
    return (
      <section id="hero" data-theme="light" style={{
        minHeight:'100vh', display:'flex', flexDirection:'column', justifyContent:'center',
        padding:'100px 24px 56px', position:'relative', overflow:'hidden',
        background:'var(--bg)',
      }}>
        {/* Orb as blurred background — no touch reactivity */}
        <div style={{ position:'absolute', inset:0, zIndex:0, overflow:'hidden',
          display:'flex', alignItems:'center', justifyContent:'center',
          pointerEvents:'none' }}>
          <div style={{ filter:'blur(6px)', opacity:0.22,
            transform:'scale(1.15)', transformOrigin:'center' }}>
            <DotOrb size={Math.min(window.innerWidth * 1.1, 500)} particles={1200} />
          </div>
        </div>
        {/* Warm overlay for readability */}
        <div style={{ position:'absolute', inset:0, zIndex:1, pointerEvents:'none',
          background:'linear-gradient(to bottom, rgba(242,237,227,0.82) 0%, rgba(242,237,227,0.90) 100%)' }} />

        {/* Content */}
        <div style={{ position:'relative', zIndex:2 }}>
          <div className="fade-up" style={{ marginBottom:'24px' }}>
            <Eyebrow tone="gold">AI Consulting</Eyebrow>
          </div>
          <h1 className="fade-up" style={{
            fontFamily:"'Bodoni Moda', serif", fontVariationSettings:"'opsz' 14", fontWeight:500,
            lineHeight:1.0, fontSize:'clamp(38px, 10.5vw, 60px)',
            marginBottom:'28px', letterSpacing:'-0.025em', color:'var(--ink)',
            animationDelay:'.08s', textWrap:'balance',
          }}>
            Unlocking the Enterprise Potential of{' '}
            <span className="accent-italic">Agentic AI</span>
          </h1>
          <p className="fade-up" style={{
            fontFamily:"'Inter',sans-serif", fontWeight:300, fontSize:'16px',
            color:'var(--ink-2)', lineHeight:1.65, marginBottom:'36px',
            animationDelay:'.16s',
          }}>
            We help organizations harness Agentic AI to accelerate decisions,
            automate complex work, and create new levels of operational performance.
          </p>
          <div className="fade-up" style={{ display:'flex', gap:'12px', flexWrap:'wrap', animationDelay:'.24s' }}>
            <a href="#why-matai" style={{
              display:'inline-flex', alignItems:'center', gap:'10px',
              padding:'14px 26px', borderRadius:'100px',
              background:'var(--ink)', color:'var(--paper)',
              fontFamily:"'Inter',sans-serif", fontWeight:500, fontSize:'14px',
              letterSpacing:'0.02em', textDecoration:'none',
            }}>Learn More <span>→</span></a>
            <a href="#contact" style={{
              display:'inline-flex', alignItems:'center', gap:'10px',
              padding:'14px 26px', borderRadius:'100px',
              background:'transparent', border:'1px solid var(--line)',
              color:'var(--ink)', fontFamily:"'Inter',sans-serif",
              fontWeight:400, fontSize:'14px', letterSpacing:'0.02em',
              textDecoration:'none',
            }}>Contact Us</a>
          </div>

          {/* Trusted-by strip — hidden until real clients are added */}
        </div>
      </section>
    );
  }

  return (
    <section id="hero" data-theme="light" className="grain" style={{
      minHeight:'100vh', display:'flex', flexDirection:'column', justifyContent:'center',
      padding:'120px 40px 60px', position:'relative', overflow:'hidden',
      background:'var(--bg)',
    }}>
      <div style={{ position:'relative', zIndex:1, maxWidth:'1320px', margin:'0 auto', width:'100%',
        flex:1, display:'flex', flexDirection:'column', justifyContent:'center' }}>

        <div style={{ display:'grid', gridTemplateColumns:'1.05fr 1fr', gap:'40px',
          alignItems:'center', marginBottom:'80px' }}>

          {/* Copy column */}
          <div>
            <div className="fade-up" style={{ marginBottom:'30px' }}>
              <Eyebrow tone="gold">AI Consulting</Eyebrow>
            </div>
            <h1 className="fade-up" style={{
              fontFamily:"'Bodoni Moda', serif", fontVariationSettings:"'opsz' 14", fontWeight:500,
              lineHeight:1.0, fontSize:'clamp(44px, 5.4vw, 78px)',
              marginBottom:'34px', letterSpacing:'-0.025em', color:'var(--ink)',
              animationDelay:'.08s', textWrap:'balance', maxWidth:'640px',
            }}>
              Unlocking the Enterprise Potential of{' '}
              <span className="accent-italic">Agentic AI</span>
            </h1>
            <p className="fade-up" style={{
              fontFamily:"'Inter',sans-serif", fontWeight:300,
              fontSize:'18px', color:'var(--ink-2)', lineHeight:1.65, maxWidth:'500px',
              marginBottom:'40px', animationDelay:'.16s',
            }}>
              We help organizations harness Agentic AI to accelerate decisions,
              automate complex work, and create new levels of operational performance.
            </p>
            <div className="fade-up" style={{ display:'flex', gap:'14px', flexWrap:'wrap', animationDelay:'.24s' }}>
              <a href="#why-matai" style={{
                display:'inline-flex', alignItems:'center', gap:'12px',
                padding:'15px 30px', borderRadius:'100px',
                background:'var(--ink)', color:'var(--paper)',
                fontFamily:"'Inter',sans-serif", fontWeight:500, fontSize:'14px',
                letterSpacing:'0.02em', textDecoration:'none',
              }}>Learn More <span>→</span></a>
              <a href="#contact" style={{
                display:'inline-flex', alignItems:'center', gap:'10px',
                padding:'15px 30px', borderRadius:'100px',
                background:'transparent', border:'1px solid var(--line)',
                color:'var(--ink)', fontFamily:"'Inter',sans-serif",
                fontWeight:400, fontSize:'14px', letterSpacing:'0.02em',
                textDecoration:'none',
              }}>Contact Us</a>
            </div>
          </div>

          {/* Orb column */}
          <div className="fade-up" style={{
            display:'flex', justifyContent:'center', alignItems:'center',
            minWidth:0, animationDelay:'.30s',
          }}>
            <DotOrb size={Math.min(580, window.innerWidth * 0.45)} particles={3800} />
          </div>
        </div>

        {/* Trusted-by strip — hidden until real clients are added */}
      </div>
    </section>
  );
}

Object.assign(window, { Hero });