const { DisplayHeadline, Button, EyebrowLabel, Reveal } = window.YUANJIEDesignSystem_590ef9;

function CtaBand({ onDemo }) {
  const c = useCopy();
  return (
    <section id="demo" style={{ maxWidth: 'var(--page-max-width)', margin: '0 auto', padding: '96px var(--page-gutter)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-24)' }}>
      <Reveal><EyebrowLabel align="center">{c.cta.eyebrow}</EyebrowLabel></Reveal>
      <Reveal delay={80}><DisplayHeadline size="md" align="center" style={{ maxWidth: '14em' }}>{c.cta.title1}<br />{c.cta.title2}</DisplayHeadline></Reveal>
      <Reveal delay={160} as="p" style={{ margin: 0, maxWidth: '34em', textAlign: 'center', fontSize: '16px', lineHeight: 1.8, color: 'var(--color-graphite)' }}>{c.cta.body}</Reveal>
      <Reveal delay={240}>
        <Button variant="filled" size="lg" onClick={onDemo}>{c.cta.primary}</Button>
      </Reveal>
    </section>
  );
}

function SiteFooter() {
  const c = useCopy();
  return (
    <footer style={{ borderTop: '1px solid var(--color-ash-gray)', background: 'var(--color-paper-white)' }}>
      <div style={{ maxWidth: 'var(--page-max-width)', margin: '0 auto', padding: '48px var(--page-gutter)', display: 'grid', gridTemplateColumns: '1.4fr repeat(3,1fr)', gap: 'var(--spacing-40)' }}>
        <div>
          <img src="../../assets/logo-lockup.webp" alt={c.footer.company} style={{ height: '86px', width: 'auto', display: 'block' }} />
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', color: 'var(--color-smoke)', marginTop: '16px', lineHeight: 1.8 }}>
            {c.footer.address}<br />contact@yuanjie.software
          </div>
        </div>
        {c.footer.cols.map(([h, items]) => (
          <div key={h}>
            <div style={{ fontFamily: 'var(--font-ui)', fontSize: '10px', letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--color-smoke)', marginBottom: '14px' }}>{h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {items.map((i) => <a key={i} href={i.includes('AMHS') ? '/ui_kits/amhs-simulator/' : '#top'} className="yj-underline" style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', color: 'var(--color-graphite)', textDecoration: 'none', alignSelf: 'flex-start' }}>{i}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid var(--color-bone)' }}>
        <div style={{ maxWidth: 'var(--page-max-width)', margin: '0 auto', padding: '16px var(--page-gutter)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-ui)', fontSize: '11px', color: 'var(--color-smoke)' }}>
          <span>{c.footer.legal}</span>
          <span>{c.footer.links}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { CtaBand, SiteFooter });