/* Footer.jsx — closing CTA, App Store badge, legal */

function MagneticAppStore(){
  const ref = useMagnetic(0.18, 10);
  // TODO: replace href with the real App Store URL once the app is published
  // e.g. https://apps.apple.com/app/idXXXXXXXXX
  return (
    <a ref={ref} href="#" className="appstore-badge" data-cursor="hov" aria-label="Download on the App Store">
      <img src="assets/app-store-badge.svg" alt="Download on the App Store" />
    </a>
  );
}

function Footer(){
  return (
    <footer id="download" className="footer">
      <div className="shell">
        <div className="footer-cta">
          <div>
            <span className="eyebrow">Download · 07</span>
            <h2>Every potato.<br/><i>Every way.</i><br/>Yours now.</h2>
            <p>iOS 16 and up. Free to start. No account. Just open it and cook.</p>
            <div style={{display:"flex", gap:14, flexWrap:"wrap", marginTop:24, alignItems:"center"}}>
              <MagneticAppStore />
              <div style={{
                display:"flex", alignItems:"center", gap: 10,
                fontFamily:"var(--mono)", fontSize:11,
                letterSpacing:".14em", textTransform:"uppercase",
                color:"var(--muted)"
              }}>
                <span style={{width:6, height:6, background:"var(--green)", borderRadius:"50%"}} />
                Launching now · iOS only
              </div>
            </div>
          </div>
          <div style={{
            position:"relative",
            display:"flex", justifyContent:"center"
          }}>
            <img src="assets/mascot.webp" alt="" style={{
              width: "min(100%, 360px)",
              filter: "drop-shadow(0 28px 40px rgba(92,58,30,.28))",
              animation: "mascotFloat 6s ease-in-out infinite"
            }} />
          </div>
        </div>

        <div className="footer-legal">
          <div className="footer-legal-links">
            <a href="/privacy.html">Privacy</a>
            <a href="/support.html">Support</a>
            <a href="/terms.html">Terms</a>
            <a href="mailto:support@allthingspotato.com">support@allthingspotato.com</a>
          </div>
          <div className="footer-credit">
            Made by one person + a lot of potatoes
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });