/* global React, CCButton */
function ClosingCTA() {
  const APP_STORE = 'https://apps.apple.com/us/app/the-cloud-closet/id6748420685';
  const PLAY_STORE = 'https://play.google.com/store/apps/details?id=com.thecloudcloset.app&hl=en';
  return (
    <section className="cc-closing">
      <p className="cc-closing-meet">Meet us here.</p>
      <div className="cc-store-badges">
        <a className="cc-store-badge" href={APP_STORE} target="_blank" rel="noopener noreferrer" aria-label="Download on the App Store">
          <svg width="22" height="26" viewBox="0 0 22 26" fill="currentColor" aria-hidden="true">
            <path d="M18.1 13.8c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.8-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.2 2.5-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.5 1.3-.1 1.8-.8 3.3-.8s2 .8 3.3.8c1.4 0 2.2-1.2 3.1-2.5.6-.9.9-1.4 1.4-2.4-3.6-1.3-2.9-5.4-2.6-5.7z"/>
            <path d="M15.6 4.3c.7-.9 1.2-2 1-3.3-1 .1-2.3.7-3 1.5-.6.8-1.2 1.9-1 3 1.1.1 2.3-.5 3-1.2z"/>
          </svg>
          <span className="cc-store-badge-text">
            <span className="cc-store-badge-sm">Download on the</span>
            <span className="cc-store-badge-lg">App Store</span>
          </span>
        </a>
        <a className="cc-store-badge" href={PLAY_STORE} target="_blank" rel="noopener noreferrer" aria-label="Get it on Google Play">
          <svg width="22" height="24" viewBox="0 0 22 24" aria-hidden="true">
            <path d="M1.3.5C1 .8.9 1.3.9 1.9v20.2c0 .6.1 1.1.4 1.4l.1.1L12.7 12.6v-.2L1.4.4l-.1.1z" fill="currentColor" opacity="0.55"/>
            <path d="M16.4 16.3l-3.7-3.7v-.2l3.7-3.7.1.1 4.4 2.5c1.3.7 1.3 1.9 0 2.6l-4.5 2.4z" fill="currentColor"/>
            <path d="M16.5 16.2L12.7 12.5 1.3 23.5c.4.5 1.1.5 1.9.1l13.3-7.4" fill="currentColor" opacity="0.8"/>
            <path d="M16.5 8.8L3.2.4C2.4 0 1.7 0 1.3.5l11.4 11z" fill="currentColor" opacity="0.7"/>
          </svg>
          <span className="cc-store-badge-text">
            <span className="cc-store-badge-sm">Get it on</span>
            <span className="cc-store-badge-lg">Google Play</span>
          </span>
        </a>
      </div>
    </section>
  );
}

function Footer() {
  const SOCIAL_LINKS = [
    { label: 'Instagram', href: 'https://www.instagram.com/bycloudcloset' },
    { label: 'TikTok',    href: 'https://www.tiktok.com/@bycloudcloset' },
    { label: 'LinkedIn',  href: 'https://www.linkedin.com/company/the-cloud-closet' },
    { label: 'Substack',  href: 'https://styledbycode.substack.com' },
    { label: 'Contact',   href: 'mailto:contact@the-cloud-closet.com' },
  ];
  return (
    <footer className="cc-footer">
      <div className="cc-footer-row">
        <div className="cc-footer-copy">&copy; 2025 Cloud Closet. All rights reserved.</div>
        <div className="cc-footer-links">
          {SOCIAL_LINKS.map(({ label, href }) => (
            <a key={label} href={href} className="cc-footer-link"
               target={href.startsWith('mailto') ? undefined : '_blank'}
               rel={href.startsWith('mailto') ? undefined : 'noopener noreferrer'}>
              {label}
            </a>
          ))}
        </div>
        <div className="cc-footer-links">
          {['Privacy', 'Terms', 'Help center'].map((l) => (
            <a key={l} href="#" className="cc-footer-link">{l}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

window.ClosingCTA = ClosingCTA;
window.Footer = Footer;