import React from 'react'
import Nova40Icon from './Nova40Icon'
import useReveal from '../hooks/useReveal'

export default function Download() {
  const ref = useReveal()

  return (
    <section id="download" className="py-20 sm:py-28 relative" ref={ref}>
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="reveal relative glass-card p-10 sm:p-16 text-center overflow-hidden">
          {/* Background effects */}
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[500px] h-[500px] bg-nova-primary/10 rounded-full blur-[150px]" />
          <div className="absolute bottom-0 right-0 w-[300px] h-[300px] bg-nova-accent/5 rounded-full blur-[100px]" />

          {/* Decorative orbit */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] border border-nova-primary/10 rounded-full animate-orbit" />

          <div className="relative">
            <div className="flex justify-center mb-6">
              <div className="relative">
                <Nova40Icon size={96} rounded />
                <div className="absolute -inset-4 bg-nova-primary/15 rounded-2xl blur-xl -z-10 animate-pulse-slow" />
              </div>
            </div>

            <h2 className="text-3xl sm:text-5xl font-bold mb-4">
              Ready to become{' '}
              <br className="hidden sm:block" />
              <span className="text-shimmer">someone new?</span>
            </h2>
            <p className="text-nova-textSecondary text-lg max-w-lg mx-auto mb-10">
              Download Nova40 for free and start your 40-day identity transformation journey today.
            </p>

            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              {/* App Store */}
              <a
                href="https://apps.apple.com/app/nova40/id0000000000"
                target="_blank"
                rel="noopener noreferrer"
                className="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 bg-white/5 hover:bg-white/10 border border-nova-border hover:border-nova-primary/50 rounded-2xl transition-all group hover:scale-105 hover:shadow-lg hover:shadow-nova-primary/10"
              >
                <svg className="w-9 h-9 text-white" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
                </svg>
                <div className="text-left">
                  <p className="text-[10px] text-nova-textSecondary leading-tight">Download on the</p>
                  <p className="text-white font-bold text-lg leading-tight">App Store</p>
                </div>
              </a>

              {/* Google Play */}
              <a
                href="https://play.google.com/store/apps/details?id=com.nova40.app"
                target="_blank"
                rel="noopener noreferrer"
                className="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 bg-white/5 hover:bg-white/10 border border-nova-border hover:border-nova-accent/50 rounded-2xl transition-all group hover:scale-105 hover:shadow-lg hover:shadow-nova-accent/10"
              >
                <svg className="w-9 h-9 text-white" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92zm10.89 10.893l2.302 2.302-10.937 6.333 8.635-8.635zm3.199-3.198l2.807 1.626a1 1 0 010 1.73l-2.808 1.626L15.206 12l2.492-2.491zM5.864 2.658L16.8 8.99l-2.3 2.3-8.636-8.632z"/>
                </svg>
                <div className="text-left">
                  <p className="text-[10px] text-nova-textSecondary leading-tight">Get it on</p>
                  <p className="text-white font-bold text-lg leading-tight">Google Play</p>
                </div>
              </a>
            </div>

            <p className="text-nova-textMuted text-xs mt-6">Free download. No credit card required.</p>
          </div>
        </div>
      </div>
    </section>
  )
}