/* global React, INK, CREAM, PULSE, GENS, Sparkle, GradText, CTAButton,
   Reveal, useReveal, useCountUp, SectionShell, SB_EASE, SITE_W */
// Final CTA · footer

const FinalSection = () => {
  return (
    <section style={{ background: '#141017', padding: '80px 56px 0' }}>
      <div style={{ maxWidth: SITE_W, margin: '0 auto' }}>
        {/* final CTA */}
        <div style={{ padding: '60px 0 90px', textAlign: 'center' }}>
          <Reveal>
            <span style={{ display: 'none' }}></span>
          </Reveal>
          <Reveal delay={100}>
            <h2 style={{ font: '800 92px/0.95 var(--font-sans)', letterSpacing: '-0.04em', color: '#fff', margin: '0 0 30px' }}>
              Direct<br />the <GradText style={{ backgroundImage: 'linear-gradient(135deg,#C9A8FF,#A675FF)' }}>shoot.</GradText>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.75)', maxWidth: 460, margin: '0 auto 34px' }}>
              Your likeness, a private Character, and a studio that never sleeps. Free to start — no card, no shoot day.
            </p>
          </Reveal>
          <Reveal delay={300}>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <CTAButton size="lg">Try it free</CTAButton>
            </div>
          </Reveal>
        </div>
        {/* footer */}
        <footer style={{ borderTop: '1px solid rgba(255,255,255,0.12)', padding: '44px 0 40px',
          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 12 }}>
              <img loading="lazy" decoding="async" src="assets/logo-icon.png" alt="" style={{ height: 22, filter: 'brightness(0) invert(1)' }} />
              <span style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.03em', color: '#fff' }}>sozee</span>
            </div>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>The #1 AI Content Studio For Creators Who Monetize</div>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 10 }}>Customer Support: <a href="tel:9103382416" style={{ color: 'rgba(255,255,255,0.8)', fontWeight: 600 }}>910-338-2416</a></div>
          </div>
          <div style={{ display: 'flex', gap: 44, flexWrap: 'wrap' }}>
            {(window.SOZEE_FOOTER_COLS || []).map(([h, links]) =>
            <div key={h} style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.45)', marginBottom: 3 }}>{h}</span>
                {links.map(([l, href]) => <a key={l} href={href} style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)', whiteSpace: 'nowrap' }}>{l}</a>)}
              </div>
            )}
          </div>
        </footer>
        <div style={{ maxWidth: SITE_W, margin: '0 auto', padding: '0 0 26px', display: 'flex', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.35)' }}>© 2026 Animus Technologies LLC (DBA Sozee AI). All rights reserved.</span>
        </div>
      </div>
    </section>);

};

Object.assign(window, { FinalSection });