const { RainbowRibbon, TopNav, EyebrowLabel, DisplayHeadline, AnnouncementPill, Button, WaferField, Icon, LogoCloud, Reveal, CountUp } = window.YUANJIEDesignSystem_590ef9;

const LOGO = '../../assets/logo-mark.webp';

function scrollToSection(id) { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: 'smooth' }); }

function SiteHeader({ lang, onLang, onDemo }) {
  const c = useCopy();
  const links = [
    { id: 'product', label: c.nav.product, href: '#product' },
    { id: 'arch', label: c.nav.arch, href: '#arch' },
    { id: 'support', label: c.nav.support, href: '#support' }
  ];
  return (
    <React.Fragment>
      <RainbowRibbon />
      <TopNav brand="YUAN JIE" logo={LOGO} logoHeight={30}
        links={links}
        actions={<LangSwitch value={lang} onChange={onLang} />}
        cta={{ label: c.nav.cta, onClick: onDemo }} />
    </React.Fragment>
  );
}

function Hero({ onDemo }) {
  const c = useCopy();
  return (
    <section id="top" style={{ maxWidth: 'var(--page-max-width)', margin: '0 auto', padding: '96px var(--page-gutter) 72px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--spacing-64)', alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--spacing-24)' }}>
          <Reveal><AnnouncementPill badge={c.hero.badge} href="#arch">{c.hero.announce}</AnnouncementPill></Reveal>
          <Reveal delay={60}><EyebrowLabel>{c.hero.eyebrow}</EyebrowLabel></Reveal>
          <Reveal delay={120}><DisplayHeadline as="h1" size="lg" style={{ maxWidth: '11em' }}>{c.hero.title1}<br />{c.hero.title2}</DisplayHeadline></Reveal>
          <Reveal delay={200} as="p" style={{ margin: 0, maxWidth: '34em', fontSize: '17px', lineHeight: 1.8, color: 'var(--color-graphite)', textWrap: 'pretty' }}>{c.hero.body}</Reveal>
          <Reveal delay={280} style={{ display: 'flex', gap: 'var(--spacing-12)', flexWrap: 'wrap' }}>
            <Button variant="filled" size="lg" onClick={onDemo}>{c.hero.ctaPrimary}</Button>
            <Button variant="ghost" size="lg" href="#arch" trailing={<Icon name="arrowRight" size={15} />}>{c.hero.ctaSecondary}</Button>
          </Reveal>
          <Reveal delay={360} style={{ display: 'flex', gap: 'var(--spacing-32)', paddingTop: 'var(--spacing-8)' }}>
            {c.hero.stats.map(([n, l]) => (
              <div key={l}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 100, fontSize: '32px', lineHeight: 1.1, letterSpacing: '-0.02em' }}><CountUp value={n} /></div>
                <div style={{ fontFamily: 'var(--font-ui)', fontSize: '11px', letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--color-smoke)', marginTop: '4px' }}>{l}</div>
              </div>
            ))}
          </Reveal>
        </div>
        <Reveal delay={160} style={{ display: 'flex', justifyContent: 'center' }}>
          <WaferField size={460} pitch={12} dot={2.2} color="#969696" accent="#e17100" accent2="#155dfc" />
        </Reveal>
      </div>
      <Reveal style={{ marginTop: '72px' }}>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: '11px', letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--color-smoke)', textAlign: 'center', marginBottom: '18px' }}>{c.hero.logosLabel}</div>
        <LogoCloud names={c.hero.logos} gap={44} />
      </Reveal>
    </section>
  );
}

Object.assign(window, { SiteHeader, Hero, scrollToSection });