import React from 'react';
import { Link } from 'react-router-dom';
import { Compass, Heart, Sparkles, MapPin, ArrowUpRight } from 'lucide-react';
import { useTourStore } from '../../store/tourStore';

const Footer = () => {
  const trip = useTourStore((state) => state.trip);

  return (
    <footer
      style={{
        borderTop: '1px solid var(--color-border)',
        backgroundColor: 'hsla(222, 28%, 6%, 0.95)',
        padding: 'var(--space-10) 0 var(--space-8)',
        marginTop: 'auto',
      }}
    >
      <div className="container">
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
            gap: 'var(--space-8)',
            marginBottom: 'var(--space-8)',
          }}
        >
          {/* Brand Info */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', marginBottom: 'var(--space-3)' }}>
              <div
                style={{
                  width: '34px',
                  height: '34px',
                  borderRadius: 'var(--radius-md)',
                  background: 'linear-gradient(135deg, var(--color-primary), var(--color-accent))',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: '#fff',
                }}
              >
                <Compass size={18} />
              </div>
              <span
                style={{
                  fontFamily: 'var(--font-display)',
                  fontWeight: 800,
                  fontSize: 'var(--text-lg)',
                  color: 'var(--color-text-primary)',
                }}
              >
                Ready to <span style={{ color: 'var(--color-accent)' }}>Plan Tour</span> (RPT)
              </span>
            </div>
            <p style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', maxWidth: '320px' }}>
              Platform interaktif perencanaan perjalanan wisata tanpa batas. Rencanakan jadwal harian, checklist packing, dan kendalikan estimasi budget.
            </p>
          </div>

          {/* Navigasi Cepat */}
          <div>
            <h4
              style={{
                fontSize: 'var(--text-sm)',
                fontWeight: 700,
                textTransform: 'uppercase',
                letterSpacing: '0.05em',
                marginBottom: 'var(--space-3)',
                color: 'var(--color-text-primary)',
              }}
            >
              Fitur Utama
            </h4>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
              <li>
                <Link to="/" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
                  Trip Selection <ArrowUpRight size={13} />
                </Link>
              </li>
              <li>
                <Link to="/schedule" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
                  Daily Schedule Builder <ArrowUpRight size={13} />
                </Link>
              </li>
              <li>
                <Link to="/packing" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
                  Packing List Manager <ArrowUpRight size={13} />
                </Link>
              </li>
              <li>
                <Link to="/budget" style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
                  Budget Calculator <ArrowUpRight size={13} />
                </Link>
              </li>
            </ul>
          </div>

          {/* Active Trip Status */}
          <div>
            <h4
              style={{
                fontSize: 'var(--text-sm)',
                fontWeight: 700,
                textTransform: 'uppercase',
                letterSpacing: '0.05em',
                marginBottom: 'var(--space-3)',
                color: 'var(--color-text-primary)',
              }}
            >
              Trip Anda Saat Ini
            </h4>
            {trip.destination ? (
              <div className="glass" style={{ padding: 'var(--space-3) var(--space-4)', borderRadius: 'var(--radius-md)' }}>
                <div style={{ fontWeight: 600, fontSize: 'var(--text-sm)', color: 'var(--color-accent-light)', display: 'flex', alignItems: 'center', gap: '6px' }}>
                  <MapPin size={14} /> {trip.destination}
                </div>
                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)', marginTop: '2px' }}>
                  {trip.name || 'Trip Wisata'} &bull; {trip.totalDays} Hari
                </div>
              </div>
            ) : (
              <p style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)' }}>
                Belum ada trip yang dipilih. Mulai pilih destinasi di halaman utama.
              </p>
            )}
          </div>
        </div>

        {/* Bottom bar */}
        <div
          style={{
            borderTop: '1px solid var(--color-border)',
            paddingTop: 'var(--space-6)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            flexWrap: 'wrap',
            gap: 'var(--space-4)',
            fontSize: 'var(--text-xs)',
            color: 'var(--color-text-muted)',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
            <span>© {new Date().getFullYear()} Ready to Plan Tour (RPT). Static Web Application.</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '4px', color: 'var(--color-text-secondary)' }}>
            <span>Made with</span>
            <Heart size={13} style={{ color: 'var(--color-danger)' }} />
            <span>& React.js</span>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;