// Medway MSS — Navigation + Hero

function Nav({ active, onNav, accent, lang, setLang }) {
  const { t } = useI18n.cached || { t: (k) => k };
  // We read t from props-less hook context — but components don't share React context here.
  // Simpler: accept t via prop.
  return null;
}

function NavReal({ active, onNav, accent, lang, setLang, t }) {
  const [scrolled, setScrolled] = React.useState(false);
  const isMobile = useIsMobile();
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const items = [
    { id: 'home', label: t('nav.home') },
    { id: 'about', label: t('nav.about') },
    { id: 'products', label: t('nav.products'), href: '/catalogue' },
    { id: 'industries', label: t('nav.industries') },
    { id: 'contact', label: t('nav.contact') },
  ];
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(255,255,255,0.88)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(180%) blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'all 250ms ease',
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: isMobile ? '12px 20px' : '16px 32px',
        display: 'flex', alignItems: 'center', gap: isMobile ? 12 : 28,
      }}>
        <a href="#home" onClick={(e) => { e.preventDefault(); onNav('home'); }} style={{ textDecoration: 'none', display: 'inline-flex' }}>
          <MedwayMark height={isMobile ? 24 : 28} accent={accent} />
        </a>
        <div style={{ flex: 1 }} />
        <div style={{ display: isMobile ? 'none' : 'flex', gap: 2 }}>
          {items.map((it) => {
            const isActive = active === it.id;
            return (
              <a
                key={it.id}
                href={it.href || `#${it.id}`}
                onClick={(e) => {
                  if (it.href) return;
                  e.preventDefault();
                  onNav(it.id);
                }}
                style={{
                  position: 'relative',
                  padding: '8px 14px',
                  fontFamily: 'Inter, sans-serif',
                  fontSize: 13.5,
                  fontWeight: 500,
                  color: isActive ? 'var(--fg-1)' : 'var(--fg-2)',
                  textDecoration: 'none',
                  letterSpacing: '-0.005em',
                  transition: 'color 150ms ease',
                }}
              >
                {it.label}
                {isActive && (
                  <span style={{
                    position: 'absolute', left: 14, right: 14, bottom: 2,
                    height: 1, background: 'var(--fg-1)',
                  }} />
                )}
              </a>
            );
          })}
        </div>
        <LangSwitcher lang={lang} onChange={setLang} />
        {isMobile && (
          <a href="/catalogue" style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            padding: '8px 10px',
            fontFamily: 'Inter, sans-serif', fontSize: 12.5, fontWeight: 500,
            color: 'var(--fg-1)', background: 'rgba(255,255,255,0.72)',
            border: '1px solid var(--border-strong)',
            borderRadius: 6, textDecoration: 'none',
          }}>
            {t('nav.products')}
          </a>
        )}
        <a href="#contact" onClick={(e) => { e.preventDefault(); onNav('contact'); }} style={{
          display: isMobile ? 'none' : 'inline-flex', alignItems: 'center', gap: 6,
          padding: isMobile ? '8px 10px' : '9px 16px',
          fontFamily: 'Inter, sans-serif', fontSize: isMobile ? 12.5 : 13.5, fontWeight: 500,
          color: '#fff', background: 'var(--fg-1)',
          borderRadius: 6, textDecoration: 'none',
          transition: 'background 150ms ease',
        }}>
          {t('nav.cta')}
          <I name="arrow-up-right" size={14} stroke={1.75} color="#fff" />
        </a>
      </div>
    </nav>
  );
}

function Hero({ accent, onNav, t }) {
  const isMobile = useIsMobile();
  return (
    <section id="home" data-screen-label="01 Home" style={{
      position: 'relative',
      paddingTop: isMobile ? 104 : 140,
      paddingBottom: isMobile ? 56 : 80,
      paddingLeft: isMobile ? 20 : 32, paddingRight: isMobile ? 20 : 32,
      overflow: 'hidden',
      background: `linear-gradient(135deg, var(--bg) 0%, var(--bg) 52%, ${accent}12 100%)`,
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0, opacity: 0.55,
        backgroundImage: 'linear-gradient(var(--border-muted) 1px, transparent 1px), linear-gradient(90deg, var(--border-muted) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%)',
        pointerEvents: 'none',
      }} />
      {/* Brand-color soft wash on the right */}
      <div aria-hidden style={{
        position: 'absolute', top: -80, right: -220, width: 760, height: 760,
        background: `radial-gradient(circle, ${accent}2d 0%, ${accent}16 34%, transparent 68%)`,
        pointerEvents: 'none',
      }} />
      <div aria-hidden style={{
        position: 'absolute', left: -160, bottom: -220, width: 520, height: 520,
        background: `radial-gradient(circle, ${accent}16 0%, transparent 64%)`,
        pointerEvents: 'none',
      }} />

      <div style={{ maxWidth: 1320, margin: '0 auto', position: 'relative' }}>
        <div style={{
          display: 'flex', alignItems: isMobile ? 'flex-start' : 'center', gap: isMobile ? 12 : 24,
          flexDirection: isMobile ? 'column' : 'row',
          paddingBottom: isMobile ? 24 : 36, marginBottom: isMobile ? 32 : 48,
          borderBottom: '1px solid var(--border)',
        }}>
          <Eyebrow accent={accent}>{t('hero.eyebrow')}</Eyebrow>
          <div style={{ flex: 1, display: isMobile ? 'none' : 'block' }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'var(--fg-3)', fontSize: 12 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent }} />
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11.5, fontWeight: 500, letterSpacing: '0.04em' }}>{t('hero.compliance')}</span>
            </span>
          </div>
        </div>

        <div style={{ maxWidth: 1180 }}>
          <h1 style={{
            margin: 0,
            fontFamily: 'Inter, sans-serif',
            fontSize: isMobile ? 46 : 'clamp(44px, 7.2vw, 104px)',
            fontWeight: 600,
            lineHeight: isMobile ? 1.02 : 0.98,
            letterSpacing: isMobile ? '-0.025em' : '-0.045em',
            color: 'var(--fg-1)',
          }}>
            {t('hero.title.1')}<br />
            <span style={{ color: 'var(--fg-3)' }}>{t('hero.title.2')}</span>
            <span style={{ display: 'inline-block', position: 'relative', color: 'var(--fg-1)' }}>
              {t('hero.title.accent')}
              <span style={{
                position: 'absolute', left: 0, right: 0, bottom: '0.08em',
                height: 6, background: accent, opacity: 0.85,
              }} />
            </span>
            <span style={{ color: 'var(--fg-3)' }}>{t('hero.title.3')}</span>
          </h1>
        </div>

        <div style={{
          marginTop: isMobile ? 32 : 56,
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 28 : 64, alignItems: 'end',
        }}>
          <p style={{
            margin: 0, maxWidth: 560,
            fontFamily: 'Inter, sans-serif',
            fontSize: isMobile ? 16.5 : 19, lineHeight: 1.5,
            color: 'var(--fg-2)', fontWeight: 400,
            letterSpacing: '-0.005em',
          }}>{t('hero.subhead')}</p>
          <div style={{
            display: 'flex', alignItems: isMobile ? 'stretch' : 'end', justifyContent: isMobile ? 'stretch' : 'flex-end',
            gap: 12, flexWrap: 'wrap', flexDirection: isMobile ? 'column' : 'row',
          }}>
            <a href="/catalogue" style={{
              padding: '14px 22px',
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
              color: '#fff', background: 'var(--fg-1)', border: 'none',
              borderRadius: 6, cursor: 'pointer',
              textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              {t('hero.cta.primary')}
              <I name="arrow-right" size={15} stroke={1.75} color="#fff" />
            </a>
            <button onClick={() => onNav('contact')} style={{
              padding: '14px 22px',
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
              color: 'var(--fg-1)', background: 'transparent',
              border: '1px solid var(--border-strong)',
              borderRadius: 6, cursor: 'pointer',
              display: 'inline-flex', justifyContent: 'center',
            }}>
              {t('hero.cta.secondary')}
            </button>
          </div>
        </div>

        <div style={{
          marginTop: isMobile ? 56 : 96,
          display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 0,
          borderTop: '1px solid var(--border)',
          borderBottom: '1px solid var(--border)',
        }}>
          {[1, 2, 3, 4].map((n, i) => (
            <div key={n} style={{
              padding: isMobile ? '22px 12px' : '32px 24px',
              borderRight: isMobile ? (i % 2 === 0 ? '1px solid var(--border)' : 'none') : (i < 3 ? '1px solid var(--border)' : 'none'),
              borderBottom: isMobile && i < 2 ? '1px solid var(--border)' : 'none',
            }}>
              <div style={{
                fontFamily: 'Inter, sans-serif',
                fontSize: isMobile ? 32 : 44, fontWeight: 500,
                letterSpacing: '-0.04em',
                color: 'var(--fg-1)', lineHeight: 1,
                fontVariantNumeric: 'tabular-nums',
              }}>{t(`hero.stats.${n}.k`)}</div>
              <div style={{
                marginTop: 12,
                fontFamily: 'Inter, sans-serif',
                fontSize: 12, fontWeight: 500,
                letterSpacing: '0.06em',
                textTransform: 'uppercase',
                color: 'var(--fg-3)',
              }}>{t(`hero.stats.${n}.l`)}</div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 56,
          display: 'flex', alignItems: isMobile ? 'flex-start' : 'center', gap: isMobile ? 14 : 40, flexWrap: 'wrap',
          flexDirection: isMobile ? 'column' : 'row',
        }}>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 500,
            letterSpacing: '0.1em', textTransform: 'uppercase',
            color: 'var(--fg-3)',
          }}>{t('hero.serving')}</div>
          {[1, 2, 3, 4, 5].map((n) => (
            <div key={n} style={{
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
              color: 'var(--fg-2)',
            }}>{t(`hero.serving.${n}`)}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav: NavReal, Hero });