import React from 'react'
import { Link } from 'react-router-dom'
import Nova40Icon from './Nova40Icon'

export default function Footer() {
  return (
    <footer className="relative border-t border-nova-border py-12">
      {/* Top glow */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[400px] h-px bg-gradient-to-r from-transparent via-nova-primary/30 to-transparent" />

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-10">
          {/* Brand */}
          <div className="sm:col-span-2 lg:col-span-1">
            <div className="flex items-center gap-2.5 mb-4">
              <Nova40Icon size={40} rounded />
              <span className="text-xl font-bold text-white">Nova40</span>
            </div>
            <p className="text-nova-textSecondary text-sm leading-relaxed mb-4">
              Transform your identity in 40 days through habits, journaling, and AI-powered insights.
            </p>
            <p className="text-nova-accent text-xs font-medium">40 days is all it takes.</p>
          </div>

          {/* Product */}
          <div>
            <h4 className="text-white font-bold text-sm mb-4 uppercase tracking-wider text-xs">Product</h4>
            <ul className="space-y-2.5">
              <li><a href="#features" className="text-nova-textSecondary hover:text-white text-sm transition-colors hover:translate-x-1 inline-block">Features</a></li>
              <li><a href="#how-it-works" className="text-nova-textSecondary hover:text-white text-sm transition-colors hover:translate-x-1 inline-block">How It Works</a></li>
              <li><a href="#download" className="text-nova-textSecondary hover:text-white text-sm transition-colors hover:translate-x-1 inline-block">Download</a></li>
            </ul>
          </div>

          {/* Legal */}
          <div>
            <h4 className="text-white font-bold text-sm mb-4 uppercase tracking-wider text-xs">Legal</h4>
            <ul className="space-y-2.5">
              <li><Link to="/privacy-policy" className="text-nova-textSecondary hover:text-white text-sm transition-colors hover:translate-x-1 inline-block">Privacy Policy</Link></li>
              <li><Link to="/terms-conditions" className="text-nova-textSecondary hover:text-white text-sm transition-colors hover:translate-x-1 inline-block">Terms & Conditions</Link></li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="text-white font-bold text-sm mb-4 uppercase tracking-wider text-xs">Contact</h4>
            <ul className="space-y-2.5">
              <li>
                <a href="mailto:support@nova40.app" className="text-nova-textSecondary hover:text-nova-accent text-sm transition-colors inline-flex items-center gap-2">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                  support@nova40.app
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-nova-border pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-nova-textMuted text-xs">
            &copy; {new Date().getFullYear()} Nova40. All rights reserved.
          </p>
          <div className="flex items-center gap-1 text-nova-textMuted text-xs">
            Made with <span className="text-nova-error mx-0.5 animate-pulse">&#9829;</span> for personal growth
          </div>
        </div>
      </div>
    </footer>
  )
}
