/* global React, Icon, Btn, Tag, Wordmark, useLang, T, tt */
const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero } = React;

const Pulse = () => (
  <span style={{
    position: 'relative', display: 'inline-block', width: 8, height: 8, marginRight: 8,
  }}>
    <span style={{
      position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--purple-40)',
    }} />
    <span style={{
      position: 'absolute', inset: -3, borderRadius: '50%',
      border: '1px solid var(--purple-40)', opacity: 0.6,
      animation: 'pulse 1.8s var(--easing-standard-expressive) infinite',
    }} />
  </span>
);

const HeroSpectrumLine = () => (
  <div style={{
    height: 1, width: '100%',
    background: 'var(--neon-spectrum)',
    opacity: 0.55,
  }} />
);

const Hero = () => {
  const { lang } = useLang();
  const headlineNo = 'MedOps for leger';
  const headlineEn = 'MedOps for physicians';

  return (
    <section className="np-pad-section" style={{
      position: 'relative',
      padding: '152px 32px 132px',
      borderBottom: '1px solid var(--border-subtle-01)',
      overflow: 'hidden',
    }}>
      <style>{`
        @keyframes pulse {
          0%   { transform: scale(1);    opacity: 0.7; }
          70%  { transform: scale(2.4);  opacity: 0;   }
          100% { transform: scale(2.4);  opacity: 0;   }
        }
        @keyframes drift {
          0%   { transform: translate(0,0); }
          50%  { transform: translate(20px,-12px); }
          100% { transform: translate(0,0); }
        }
      `}</style>

      <div style={{
        position: 'absolute', inset: 0, opacity: 0.22, pointerEvents: 'none',
        backgroundImage: 'linear-gradient(var(--border-subtle-01) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle-01) 1px, transparent 1px)',
        backgroundSize: '96px 96px',
        maskImage: 'radial-gradient(black 28%, transparent 78%)',
        WebkitMaskImage: 'radial-gradient(black 28%, transparent 78%)',
      }} />
      <div style={{
        position: 'absolute', top: -220, left: '50%', transform: 'translateX(-50%)', width: 980, height: 980,
        background: 'radial-gradient(closest-side, var(--ai-aura-start), transparent 70%)',
        filter: 'blur(18px)', pointerEvents: 'none', animation: 'drift 18s ease-in-out infinite',
      }} />
      <div style={{
        position: 'absolute', bottom: -260, left: '20%', width: 540, height: 540,
        background: 'radial-gradient(closest-side, color-mix(in srgb, var(--blue-50) 16%, transparent), transparent 70%)',
        filter: 'blur(24px)', pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', bottom: -200, right: '12%', width: 480, height: 480,
        background: 'radial-gradient(closest-side, color-mix(in srgb, var(--teal-40) 12%, transparent), transparent 70%)',
        filter: 'blur(24px)', pointerEvents: 'none',
      }} />

      <div style={{
        position: 'relative', maxWidth: 1080, margin: '0 auto',
        display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center',
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px',
          border: '1px solid var(--border-subtle-01)', background: 'var(--layer-01)', marginBottom: 40,
        }}>
          <Pulse />
          <span className="code-01" style={{ color: 'var(--text-secondary)', letterSpacing: '0.32px' }}>
            <T no="MedOps for leger" en="MedOps for physicians" />
          </span>
        </div>

        <h1 style={{
          font: '300 clamp(48px, 8.4vw, 118px)/0.96 var(--font-sans)',
          letterSpacing: '-2px', margin: 0, color: 'var(--text-primary)',
          maxWidth: 980,
        }}>
          {lang === 'no' ? headlineNo : headlineEn}
        </h1>

        

        <p style={{
          font: '300 clamp(17px, 1.6vw, 22px)/1.5 var(--font-sans)',
          color: 'var(--text-secondary)', letterSpacing: '0.16px', marginTop: 40, maxWidth: 720,
        }}>
          <T
            no="Klinisk presisjon, norsk språk, drevet av kunstig intelligens. En verktøykasse bygget av norske leger for neste generasjons konsultasjon, dokumentasjon og beslutningsstøtte."
            en="Clinical precision in Norwegian, powered by AI. A toolkit built by Norwegian physicians for the next generation of consultation, documentation, and decision support."
          />
        </p>

        <div style={{ display: 'flex', gap: 12, marginTop: 48, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
          <Btn icon="arrow--right" onClick={() => { document.getElementById('tjenester')?.scrollIntoView({ behavior: 'smooth' }); }}>
            {tt(lang, 'Se tjenester', 'Explore services')}
          </Btn>
          <Btn kind="tertiary" icon="launch" onClick={() => { window.location.href = '../console/index.html'; }}>
            {tt(lang, 'Åpne konsoll', 'Open console')}
          </Btn>
        </div>

        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center',
          marginTop: 56, maxWidth: 720,
        }}>
          {[
            { icon: 'cloud',  label_no: 'Lukket arkitektur', label_en: 'Closed architecture' },
            { icon: 'AI',     label_no: 'Norsk-først LLM',   label_en: 'Norwegian-first LLM' },
            { icon: 'edit',   label_no: 'HIPAA-godkjent',    label_en: 'HIPAA compliant' },
            { icon: 'flow',   label_no: 'GDPR-samsvar',      label_en: 'GDPR compliant' },
            { icon: 'chat',   label_no: 'Bygd av leger',     label_en: 'Built by physicians' },
          ].map(p => (
            <span key={p.label_no} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 10px',
              border: '1px solid var(--border-subtle-01)',
              background: 'color-mix(in srgb, var(--layer-01) 72%, transparent)',
              font: '400 12px/1 var(--font-mono)', letterSpacing: '0.32px',
              color: 'var(--text-secondary)',
            }}>
              <Icon name={p.icon} size={12} color={p.icon === 'AI' ? 'var(--purple-40)' : 'var(--blue-40)'} />
              {tt(lang, p.label_no, p.label_en)}
            </span>
          ))}
        </div>
      </div>

      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
      }}>
        <HeroSpectrumLine />
      </div>
    </section>
  );
};

window.Hero = Hero;