const Footer = () => {
  return (
    <footer style={{
      borderTop: '1px solid var(--line-2)',
      marginTop: 60,
      background: 'linear-gradient(180deg, var(--bg-0), var(--bg-1))',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Giant CTA band */}
      <Container wide style={{ paddingTop: 100, paddingBottom: 100, position: 'relative' }}>
        {/* Big mark */}
        <div style={{
          position: 'absolute',
          top: '50%',
          right: -80,
          transform: 'translateY(-50%)',
          opacity: 0.08,
          pointerEvents: 'none',
        }}>
          <BrandMark size={520} />
        </div>

        <div style={{ maxWidth: 760, position: 'relative' }}>
          <SectionLabel label="START BUILDING" />
          <h2 className="footer-title" style={{
            margin: 0,
            fontSize: 80,
            lineHeight: 0.96,
            letterSpacing: '-0.04em',
            fontWeight: 600,
            color: 'var(--fg-1)',
          }}>
            One prompt <Italic style={{ color: 'var(--accent-2)' }}>away</Italic> <br/>
            from shipping.
          </h2>
          <p style={{
            marginTop: 24, fontSize: 17, color: 'var(--fg-2)',
            maxWidth: 520, lineHeight: 1.55,
          }}>
            Free to self-host forever. No credit card to clone. Enterprise support
            when you're ready — not before.
          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="https://github.com/syedia/autoarchitect" style={{ textDecoration: 'none' }}>
              <PrimaryBtn size="lg" icon={<I.github size={16} />}>Clone the repo</PrimaryBtn>
            </a>
            <a href="/gallery.html" style={{ textDecoration: 'none' }}>
              <GhostBtn size="lg">See what it builds</GhostBtn>
            </a>
          </div>
        </div>
      </Container>

      <Container wide className="footer-grid" style={{
        borderTop: '1px solid var(--line-1)',
        paddingTop: 48,
        paddingBottom: 24,
        display: 'grid',
        gridTemplateColumns: '1.6fr 1fr 1.2fr 1fr 1fr 1fr',
        gap: 32,
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <BrandMark size={28} />
            <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.02em' }}>AutoArchitect</span>
          </div>
          <p style={{
            marginTop: 14, fontSize: 13, color: 'var(--fg-3)',
            maxWidth: 320, lineHeight: 1.55,
          }}>
            The open-source orchestration layer for teams that want agentic software delivery — without sending a single byte to a vendor.
          </p>
          <div style={{
            marginTop: 22,
            display: 'flex', alignItems: 'center', gap: 6,
            fontFamily: 'var(--font-mono)', fontSize: 11,
            color: 'var(--fg-3)',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ok)', boxShadow: '0 0 6px var(--ok)' }} />
            All systems operational
          </div>
        </div>

        {[
          { title: 'Product',    links: [['Studio','/'],['Monitor','/monitor.html'],['Platform','/platform.html'],['Cloud','/cloud.html']] },
          { title: 'Skills',     links: [['Browse catalog','/skills.html'],['Explore by domain','/skills-explore.html'],['Connectors (inside catalog)','/skills.html#connectors'],['Plugins (inside catalog)','/skills.html#plugins'],['Quality standards','/quality-standards.html']] },
          { title: 'Ecosystem',  links: [['Gallery','/gallery.html'],['Agents','/agents.html'],['Showcase','/showcase.html']] },
          { title: 'Community',  links: [['GitHub','https://github.com/syedia/autoarchitect'],['Discord','#'],['Twitter','#'],['Newsletter','#']] },
          { title: 'Company',    links: [['About','#'],['Security','#'],['Privacy','#'],['Contact','#']] },
        ].map((col) => (
          <div key={col.title}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 10.5,
              color: 'var(--fg-3)', letterSpacing: '0.14em',
              textTransform: 'uppercase', marginBottom: 14,
            }}>{col.title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.links.map(([label, href]) => (
                <a key={label} href={href} style={{ fontSize: 13, color: 'var(--fg-2)' }}
                  onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg-1)'}
                  onMouseLeave={(e) => e.currentTarget.style.color = 'var(--fg-2)'}
                >{label}</a>
              ))}
            </div>
          </div>
        ))}
      </Container>

      <Container wide style={{
        borderTop: '1px solid var(--line-1)',
        paddingTop: 18, paddingBottom: 24,
        display: 'flex', alignItems: 'center', gap: 20,
        fontSize: 12, color: 'var(--fg-3)',
        fontFamily: 'var(--font-mono)',
      }}>
        <span>© 2026 AutoArchitect</span>
        <span>MIT License</span>
        <span>Powered by <a href="https://exonstech.com" style={{ color: 'var(--fg-2)' }}>Exonstech Systems Inc.</a></span>
        <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
          <a href="#" style={{ color: 'var(--fg-3)' }}>Security</a>
          <a href="#" style={{ color: 'var(--fg-3)' }}>Terms</a>
          <a href="#" style={{ color: 'var(--fg-3)' }}>Privacy</a>
        </span>
      </Container>
    </footer>
  );
};

window.Footer = Footer;