// Nexora Cores — Website UI Kit · Hero (dark, animated)
// Entrance is state-driven (inline transitions), so content is NEVER stuck
// invisible even if a tab is throttled — the end state is the real inline value.
const { Button, Avatar } = window.NexoraCoresDesignSystem_c8b55f;
const HERO_SP = ''; // sprite is inlined in the page → same-document #ico-* refs

function useEntrance(delayMs = 60) {
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setOn(true); return; }
    const t = setTimeout(() => setOn(true), delayMs);
    return () => clearTimeout(t);
  }, []);
  return on;
}

// Transform-only entrance: content is ALWAYS fully opaque (never stuck hidden
// if a transition is frozen in a throttled tab); only a gentle rise animates.
function up(on, delay, y = 20) {
  return {
    transform: on ? 'none' : `translateY(${y}px)`,
    transition: `transform .7s var(--ease-out) ${delay}s`,
    willChange: 'transform',
  };
}

function FlowRow() {
  const steps = [
    ['zap', 'Trigger'],
    ['settings', 'Automate'],
    ['api', 'AI Decision'],
    ['check', 'Action'],
  ];
  return (
    <div style={{ position: 'relative', height: 58, margin: '2px 0 18px' }}>
      <div style={{ position: 'absolute', left: 20, right: 20, top: 20, height: 2, background: 'rgba(255,255,255,.12)' }} />
      <div className="nx-flow-dot" style={{ position: 'absolute', top: 14, width: 10, height: 10, borderRadius: '50%', background: '#38BDF8', boxShadow: '0 0 12px #38BDF8' }} />
      <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
        {steps.map(([icon, label], i) => (
          <div key={label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, width: 60 }}>
            <span className="nx-flow-node" style={{ animationDelay: `${(i * 1.0667 - 0.48).toFixed(2)}s`, width: 40, height: 40, borderRadius: 10, background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#38BDF8' }}>
              <svg width="18" height="18"><use href={`${HERO_SP}#ico-${icon}`} /></svg>
            </span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'rgba(255,255,255,.5)', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroCard() {
  const { CountUp } = window;
  const on = useEntrance(420);
  const metrics = [['1,240', 'Automated today', '18%'], ['1.8s', 'Avg. response', '12%'], ['99.9%', 'Uptime', '0.1%']];
  const activity = [
    { dot: '#7C6FF0', glow: 'rgba(124,111,240,.8)', text: 'Workflow triggered — new booking request', time: '2s ago' },
    { dot: '#0BA670', glow: 'rgba(11,166,112,.8)', text: 'AI processed request in 1.2s', time: '14s ago' },
    { dot: '#38BDF8', glow: 'rgba(56,189,248,.9)', text: 'Action completed — confirmation sent', time: '1m ago' },
    { dot: '#7C6FF0', glow: 'rgba(124,111,240,.8)', text: 'Support ticket auto-resolved', time: '3m ago' },
  ];
  return (
    <div style={{ position: 'relative' }}>
      <div style={{ background: 'rgba(255,255,255,0.045)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 18, padding: 22, boxShadow: '0 24px 64px rgba(5,4,30,.5), inset 0 1px 0 rgba(255,255,255,.06)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 500, color: 'rgba(255,255,255,.92)' }}>Automation Workflow</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 500, color: '#5EEAD4', background: 'rgba(11,166,112,.16)', border: '1px solid rgba(11,166,112,.3)', padding: '3px 9px', borderRadius: 4 }}>
            <span className="nx-pulse-dot" style={{ width: 5, height: 5, borderRadius: '50%', background: '#0BA670' }} />Running now
          </span>
        </div>
        <FlowRow />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 18 }}>
          {metrics.map(([v, l, d]) => (
            <div key={l} style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 10, padding: 12 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, letterSpacing: '-0.03em', color: '#fff', lineHeight: 1 }}><CountUp value={v} start="now" /></div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,.45)', marginTop: 3 }}>{l}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 500, color: '#5EEAD4', marginTop: 1 }}>↑ {d}</div>
            </div>
          ))}
        </div>
        {activity.map((a, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 4px', borderBottom: i < 3 ? '1px solid rgba(255,255,255,.07)' : 'none', ...up(on, 0.15 + i * 0.12, 0), transform: on ? 'none' : 'translateX(-10px)' }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: a.dot, boxShadow: `0 0 8px ${a.glow}`, flexShrink: 0 }} />
            <span style={{ flex: 1, fontFamily: 'var(--font-body)', fontSize: 14, color: 'rgba(255,255,255,.7)', letterSpacing: '-0.01em' }}>{a.text}</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(255,255,255,.35)' }}>{a.time}</span>
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', bottom: -16, right: -16, background: 'rgba(13,10,74,.72)', border: '1px solid rgba(56,189,248,.3)', borderRadius: 12, padding: '10px 14px', boxShadow: '0 8px 28px rgba(5,4,30,.6)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 32, height: 32, background: 'rgba(56,189,248,.16)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#38BDF8' }}>
          <svg width="18" height="18"><use href={`${HERO_SP}#ico-zap`} /></svg>
        </span>
        <div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500, color: '#fff' }}>Automation Active</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(255,255,255,.45)' }}>Running 24/7</div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  const { NetworkCanvas } = window;
  const on = useEntrance(60);
  return (
    <section style={{
      position: 'relative', overflow: 'hidden', minHeight: '100vh', display: 'flex', alignItems: 'center',
      padding: '120px 5% 90px', marginTop: 'calc(-1 * var(--nav-height))',
      background: 'linear-gradient(120deg, #0A0826 0%, #0D0A4A 42%, #0A1B3D 100%)',
    }}>
      <NetworkCanvas />
      <div style={{ position: 'absolute', left: '-10%', bottom: '-20%', width: '70%', height: '90%', background: 'radial-gradient(circle, rgba(56,189,248,.22), transparent 65%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', right: '-8%', top: '-15%', width: '45%', height: '70%', background: 'radial-gradient(circle, rgba(124,111,240,.18), transparent 65%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(10,8,38,.55) 0%, transparent 55%)', pointerEvents: 'none' }} />

      <div style={{ width: '100%', maxWidth: 'var(--container)', margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center', position: 'relative', zIndex: 1 }} className="hero-grid">
        <div>
          <div style={{ ...up(on, 0.05), display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,.85)', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500, padding: '7px 15px', borderRadius: 20, marginBottom: 24, border: '1px solid rgba(56,189,248,.3)', boxShadow: '0 0 24px rgba(56,189,248,.12)', whiteSpace: 'nowrap' }}>
            <span className="nx-pulse-dot" style={{ width: 6, height: 6, background: '#38BDF8', borderRadius: '50%', boxShadow: '0 0 8px rgba(56,189,248,.9)', flexShrink: 0 }} />AI Automation · Digital Infrastructure
          </div>
          <h1 style={{ ...up(on, 0.16), fontFamily: 'var(--font-display)', fontSize: 68, fontWeight: 800, lineHeight: 1.06, letterSpacing: '-0.04em', color: '#fff', margin: '0 0 22px' }}>
            Building <span style={{ background: 'linear-gradient(110deg, #7C6FF0 10%, #38BDF8 90%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>Intelligent</span><br />Digital Infrastructure.
          </h1>
          <p style={{ ...up(on, 0.28), fontFamily: 'var(--font-body)', fontSize: 21, lineHeight: 1.7, color: 'rgba(255,255,255,.62)', margin: '0 0 38px', maxWidth: 540, letterSpacing: '-0.01em' }}>
            We help telecom operators, service providers, and growing businesses modernize operations through AI automation, software engineering, and digital infrastructure.
          </p>
          <div style={{ ...up(on, 0.4), display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <Button variant="primary" arrow href="#contact" style={{ boxShadow: '0 4px 14px rgba(82,64,228,.4), 0 0 36px rgba(82,64,228,.35)' }}>Book a Strategy Call</Button>
            <Button variant="outline-white" arrow href="#how">See how it works</Button>
          </div>
          <div style={{ ...up(on, 0.52), display: 'flex', alignItems: 'center', gap: 10, marginTop: 30 }}>
            <div style={{ display: 'flex' }}>
              {['NC', 'AR', 'SP'].map((x, i) => (
                <span key={x} style={{ marginLeft: i ? -8 : 0, border: '2px solid rgba(13,10,74,.9)', borderRadius: '50%' }}>
                  <Avatar initials={x} shape="circle" size={28} tone="dark" />
                </span>
              ))}
            </div>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'rgba(255,255,255,.45)', letterSpacing: '-0.01em' }}>
              Built by a team with <strong style={{ color: 'rgba(255,255,255,.78)', fontWeight: 500 }}>carrier, fintech, and community platform experience</strong>
            </span>
          </div>
        </div>
        <div className="hero-visual" style={{ ...up(on, 0.42) }}><HeroCard /></div>
      </div>
    </section>
  );
}
window.Hero = Hero;