/* Footer: shared across all marketing screens. */
const { Logo, IconButton, Icon } = window.SchoolhausDesignSystem_a5b1bb;

function Footer() {
  const mobile = window.useIsMobile(760);
  const nav = (p) => window.shGo && window.shGo(p);
  const col = { display: 'flex', flexDirection: 'column', gap: 8 };
  const head = { fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(247,244,236,0.55)', marginBottom: 4 };
  const link = { fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--haus-cream)', textDecoration: 'none', cursor: 'pointer' };
  return (
    <footer style={{ background: 'var(--haus-black)', color: 'var(--haus-cream)', padding: mobile ? '40px 20px 32px' : '48px 40px 40px' }}>
      <div style={{ display: 'flex', gap: mobile ? 32 : 48, flexWrap: 'wrap', alignItems: 'flex-start', maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ flex: '1 1 260px' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, lineHeight: 1.0, textTransform: 'uppercase' }}>
            <div>Wonder more.</div>
            <div style={{ color: 'var(--lavender)' }}>Build what matters.</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: mobile ? 32 : 48, flexWrap: 'wrap' }}>
          <div style={col}><span style={head}>Studio</span>
            <a style={link} onClick={() => nav('About')}>About</a>
            <a style={link} onClick={() => nav('Careers')}>Careers</a>
            <a style={link} onClick={() => nav('Press')}>Press</a>
          </div>
          <div style={col}><span style={head}>Help</span>
            <a style={link} onClick={() => nav('Contact')}>Contact</a>
            <a style={link} onClick={() => nav('FAQs')}>FAQs</a>
          </div>
          <div style={col}>
            <span style={head}>Connect</span>
            <div style={{ display: 'flex', gap: 10, marginTop: 2 }}>
              {[['linkedin', 'https://www.linkedin.com/company/schoolhausxyz/'], ['mail', 'mailto:hello@schoolhaus.xyz']].map(([n, href]) => (
                <a key={n} href={href} target={n === 'linkedin' ? '_blank' : undefined} rel={n === 'linkedin' ? 'noopener noreferrer' : undefined} aria-label={n === 'mail' ? 'Email hello@schoolhaus.xyz' : 'Schoolhaus on LinkedIn'} style={{ width: 34, height: 34, borderRadius: '50%', background: 'rgba(247,244,236,0.12)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }}>
                  <Icon name={n} size={16} color="var(--haus-cream)" />
                </a>
              ))}
            </div>
          </div>
        </div>
        <div style={{ flex: '1 1 300px', minWidth: 280, background: 'var(--lime)', color: 'var(--haus-black)', borderRadius: 'var(--radius-pill)', padding: '16px 22px', display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Join our newsletter</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, lineHeight: 1.35 }}>Ideas, inspiration, and resources for reimagining learning.</div>
          </div>
          <IconButton icon="arrow-right" variant="solid" size={40} />
        </div>
      </div>
      <div style={{ maxWidth: 1280, margin: '32px auto 0', paddingTop: 20, borderTop: '1px solid rgba(247,244,236,0.14)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
        <Logo size={22} variant="light" tagline />
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'rgba(247,244,236,0.5)' }}>© 2026 Schoolhaus, Learning Design Studio. Austin, TX. An <a href="https://imagoslabs.com" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline' }}>Imagos Labs</a> Company.</span>
      </div>
    </footer>
  );
}
Object.assign(window, { Footer });