import React from 'react';
import { motion } from 'framer-motion';
import '../styles/glassmorphism.css';

function Footer() {
    return (
        <motion.footer
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5, duration: 0.5 }}
            style={{
                position: 'fixed',
                bottom: 0,
                left: 0,
                right: 0,
                padding: '16px 24px',
                background: 'rgba(10, 25, 41, 0.9)',
                backdropFilter: 'blur(12px)',
                borderTop: '1px solid rgba(0, 217, 255, 0.2)',
                zIndex: 100,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                flexWrap: 'wrap',
                gap: '16px'
            }}
        >
            {/* Left: Project Info */}
            <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: '16px',
                fontSize: '13px',
                color: 'rgba(255, 255, 255, 0.7)'
            }}>
                <div style={{
                    fontFamily: 'Outfit, sans-serif',
                    fontWeight: 600,
                    color: '#00d9ff',
                    fontSize: '14px'
                }}>
                    Locate the News
                </div>
            </div>

            {/* Center: Credits */}
            <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: '24px',
                fontSize: '12px',
                color: 'rgba(255, 255, 255, 0.6)'
            }}>
                <div>
                    <span style={{ opacity: 0.7 }}>Student:</span>{' '}
                    <span style={{ color: '#00ff88', fontWeight: 500 }}>Ceyda Arık</span>
                </div>
                <div style={{ opacity: 0.3 }}>|</div>
                <div>
                    <span style={{ opacity: 0.7 }}>Advisor:</span>{' '}
                    <span style={{ color: '#00d9ff', fontWeight: 500 }}>Doç. Dr. Barış Ethem Süzek</span>
                </div>
            </div>

            {/* Right: University Logo */}
            <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: '12px'
            }}>
                <div style={{
                    fontSize: '11px',
                    color: 'rgba(255, 255, 255, 0.5)',
                    textAlign: 'right',
                    lineHeight: 1.4
                }}>
                    Muğla Sıtkı Koçman<br />
                    Üniversitesi
                </div>
                <div style={{
                    width: '40px',
                    height: '40px',
                    background: 'rgba(255, 255, 255, 0.1)',
                    borderRadius: '8px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    border: '1px solid rgba(255, 255, 255, 0.2)',
                    fontSize: '20px'
                }}>
                    🎓
                </div>
            </div>
        </motion.footer>
    );
}

export default Footer;