// Final download CTA
const DownloadCTA = () => {
  const M = window.Motion.motion;
  const fade = (delay = 0) => ({
    initial: { opacity: 0, y: 30 },
    whileInView: { opacity: 1, y: 0 },
    viewport: { once: true, margin: '-60px' },
    transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1], delay },
  });

  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 0 }}>
        <picture>
          <source srcSet="public/bottom-cta-dots.webp" type="image/webp" />
          <img
            src="public/bottom-cta-dots.png"
            alt=""
            loading="lazy"
            style={{
              position: 'absolute',
              top: 0,
              left: '50%',
              transform: 'translateX(-50%)',
              width: '100%',
              maxWidth: 1200,
              height: 'auto',
              maskImage: 'linear-gradient(to bottom, #000 0%, #000 40%, transparent 75%)',
              WebkitMaskImage: 'linear-gradient(to bottom, #000 0%, #000 40%, transparent 75%)',
            }}
          />
        </picture>
      </div>
      <div className="container center" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ position: 'relative' }}>
          <M.div
            {...fade(0)}
            style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(3, minmax(0, 220px))',
              gap: 16,
              justifyContent: 'center',
              maxWidth: 720,
              marginInline: 'auto',
              transform: 'scale(1.1)',
              transformOrigin: 'center top',
            }}
            className="cta-phones"
          >
            <div style={{ transform: 'translate(96px, 40px) rotate(-12deg)', zIndex: 1 }}>
              <PhoneMockup variant="light" tint="white" label="Boba Tale" sub="hero" className="phone--tight">
                <picture>
                  <source srcSet="public/bottom-cta-left.webp" type="image/webp" />
                  <img
                    src="public/bottom-cta-left.png"
                    alt="Boba Tale gameplay"
                    loading="lazy"
                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                  />
                </picture>
              </PhoneMockup>
            </div>
            <div style={{ zIndex: 2 }}>
              <PhoneMockup variant="light" tint="white" label="Boba Tale" sub="brew" className="phone--tight">
                <picture>
                  <source srcSet="public/bottom-cta-center.webp" type="image/webp" />
                  <img
                    src="public/bottom-cta-center.png"
                    alt="Boba Tale gameplay"
                    loading="lazy"
                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                  />
                </picture>
              </PhoneMockup>
            </div>
            <div style={{ transform: 'translate(-96px, 40px) rotate(12deg)', zIndex: 1 }}>
              <PhoneMockup variant="light" tint="white" label="Boba Tale" sub="shop" className="phone--tight">
                <picture>
                  <source srcSet="public/bottom-cta-right.webp" type="image/webp" />
                  <img
                    src="public/bottom-cta-right.png"
                    alt="Boba Tale gameplay"
                    loading="lazy"
                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                  />
                </picture>
              </PhoneMockup>
            </div>
          </M.div>
          <div
            aria-hidden="true"
            className="cta-fade"
            style={{
              position: 'absolute',
              left: 0, right: 0, bottom: -120,
              height: '85%',
              background: 'linear-gradient(to top, #ffffff 0%, #ffffff 70%, rgba(255,255,255,0) 100%)',
              pointerEvents: 'none',
              zIndex: 5,
            }}
          />
        </div>

        <M.h2 className="h-section cta-title" {...fade(0.1)} style={{ position: 'relative', zIndex: 6, marginTop: -200 }}>
          Download Boba Tale <br/>and Play Today
        </M.h2>
        <M.p {...fade(0.18)} className="body cta-sub" style={{ position: 'relative', zIndex: 6, margin: '14px auto 0' }}>
          Serve beautiful boba bubble tea drinks, design your dream <br className="br-desktop"/>cafe, and challenge players worldwide!
        </M.p>
        <M.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true, margin: '-60px' }}
          transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1], delay: 0.24 }}
          style={{ position: 'relative', zIndex: 6, marginTop: 24, display: 'flex', justifyContent: 'center' }}
        >
          <StoreButtons urls={{
            apple: 'https://apps.apple.com/us/app/boba-tale/id1615247565',
            google: 'https://play.google.com/store/apps/details?id=com.bobafriends.bobastory',
          }} />
        </M.div>
      </div>

      <style>{`
        .cta-sub { font-size: 18px; }
        @media (max-width: 810px) {
          .cta-sub { font-size: 16px; }
          .cta-title { margin-top: -100px !important; }
          .cta-fade { height: 110% !important; }
          .cta-phones .phone { padding: 6px; border-radius: 16px; }
          .cta-phones .phone-screen { border-radius: 10px; }
        }
      `}</style>
    </section>
  );
};

window.DownloadCTA = DownloadCTA;