import { useNavigate } from 'react-router-dom'
import styles from './BioPage.module.css'

const socialLinks = [
    { href: 'https://www.facebook.com/raulrockbar', icon: 'fa-brands fa-facebook-f', label: 'Facebook' },
    { href: 'https://www.instagram.com/raulrockbar', icon: 'fa-brands fa-instagram', label: 'Instagram' },
    { href: 'https://www.youtube.com/channel/UC90VdEfI9aszgxO9cg1B06A', icon: 'fa-brands fa-youtube', label: 'YouTube' },
    { href: 'mailto:raulrockbar@outlook.com', icon: 'fa-solid fa-envelope', label: 'Email' },
    { href: '#', icon: 'fa-brands fa-whatsapp', label: 'WhatsApp' },
]

const actionButtons = [
    { path: '/cardapio', icon: 'fa-solid fa-utensils', label: 'Cardápio' },
    { path: '/karaoke', icon: 'fa-solid fa-microphone', label: 'Karaokê' },
    { path: '/jogos', icon: 'fa-solid fa-gamepad', label: 'Jogos de Bar' },
]

export default function BioPage() {
    const navigate = useNavigate()

    return (
        <div className={styles.page}>
            {/* Hero com imagem de fundo */}
            <div className={styles.hero}>
                <div className={styles.heroOverlay} />
                <h1 className={styles.heroTitle}>Raul Rock Bar<br /><span>& Café</span></h1>

                {/* Logo flutuante */}
                <div className={styles.logoWrapper}>
                    <img
                        src="https://files.menudino.com/cardapios/53448/logo.png"
                        alt="Raul Rock Bar Logo"
                        className={styles.logo}
                    />
                </div>
            </div>

            {/* Conteúdo abaixo do hero */}
            <div className={styles.content}>
                {/* Ícones sociais */}
                <div className={styles.socialRow}>
                    {socialLinks.map(link => (
                        <a
                            key={link.label}
                            href={link.href}
                            target="_blank"
                            rel="noopener noreferrer"
                            aria-label={link.label}
                            className={styles.socialIcon}
                        >
                            <i className={link.icon} />
                        </a>
                    ))}
                </div>

                {/* Descrição */}
                <p className={styles.description}>
                    O melhor bar rock da cidade.<br />
                    Cerveja gelada, boa música e muito Rock! 🤘
                </p>

                {/* Botões de ação */}
                <div className={styles.actions}>
                    {actionButtons.map(btn => (
                        <button
                            key={btn.path}
                            onClick={() => navigate(btn.path)}
                            className={styles.actionBtn}
                        >
                            <i className={btn.icon} />
                            <span>{btn.label}</span>
                            <i className="fas fa-chevron-right" style={{ marginLeft: 'auto', opacity: 0.5 }} />
                        </button>
                    ))}
                </div>
            </div>
        </div>
    )
}
