import React from 'react';
import { Page } from '../types';

interface FooterProps {
  setPage: (page: Page) => void;
}

const Footer: React.FC<FooterProps> = ({ setPage }) => {
  return (
    <footer className="bg-slate-50 dark:bg-black pt-24 pb-12 border-t border-slate-200 dark:border-white/5 relative z-20">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-20">
          <div className="col-span-1 md:col-span-1">
            <div className="flex items-center gap-4 mb-8">
              <div className="flex items-center justify-center">
                <img alt="Riboneo Footer Logo" className="h-10 w-auto object-contain dark:hidden block" src="/logo-black.png" />
                <img alt="Riboneo Footer Logo" className="h-10 w-auto object-contain hidden dark:block" src="/logo-white.png" />
              </div>
              <div className="flex flex-col -space-y-1">
                <span className="font-display text-xl tracking-[0.2em] uppercase font-medium text-slate-900 dark:text-white">Riboneo</span>
              </div>
            </div>
            <p className="text-slate-500 dark:text-slate-400 text-sm leading-loose">
              Heilung ist ein Weg, kein Ziel. Begleite uns auf der Reise zur Revolution des Bewusstseins.
            </p>
          </div>
          <div>
            <h4 className="font-bold mb-6 text-slate-900 dark:text-white">Programm</h4>
            <ul className="space-y-4 text-slate-500 dark:text-slate-400 text-sm">
              <li><button onClick={() => setPage(Page.BOOK)} className="hover:text-primary transition-colors">Das Buch</button></li>
              <li><button onClick={() => setPage(Page.RETREAT)} className="hover:text-primary transition-colors">Retreats 2026</button></li>
              <li><button className="hover:text-primary transition-colors">Mentoring</button></li>
              <li><button className="hover:text-primary transition-colors">Online Kurs</button></li>
            </ul>
          </div>
          <div>
            <h4 className="font-bold mb-6 text-slate-900 dark:text-white">Unternehmen</h4>
            <ul className="space-y-4 text-slate-500 dark:text-slate-400 text-sm">
              <li><button className="hover:text-primary transition-colors">Über Roberto</button></li>
              <li><button onClick={() => setPage(Page.BLOG)} className="hover:text-primary transition-colors">Blog</button></li>
              <li><button onClick={() => setPage(Page.CONTACT)} className="hover:text-primary transition-colors">Kontakt</button></li>
              <li><button className="hover:text-primary transition-colors">Presse</button></li>
            </ul>
          </div>
          <div>
            <h4 className="font-bold mb-6 text-slate-900 dark:text-white">Newsletter</h4>
            <p className="text-sm text-slate-500 dark:text-slate-400 mb-6 italic">Erhalte wöchentliche Impulse für dein Bewusstsein.</p>
            <form className="flex gap-2">
              <input className="flex-1 bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-full px-4 text-sm focus:ring-primary focus:border-primary" placeholder="E-Mail" type="email" />
              <button className="bg-primary text-white p-2 shape-squircle hover:bg-opacity-90 transition-all">
                <span className="material-symbols-outlined">send</span>
              </button>
            </form>
          </div>
        </div>
        <div className="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-slate-200 dark:border-white/10 text-xs text-slate-400 gap-4">
          <p>© 2026 Roberto de Marco. Riboneo® ist eine eingetragene Marke.</p>
          <div className="flex gap-6">
            <button className="hover:text-primary">Impressum</button>
            <button className="hover:text-primary">Datenschutz</button>
            <button className="hover:text-primary">AGB</button>
          </div>
          <div className="flex gap-4">
            <button className="w-8 h-8 rounded-full bg-slate-200 dark:bg-white/5 flex items-center justify-center hover:bg-primary hover:text-white transition-all">
              <span className="material-symbols-outlined text-sm">share</span>
            </button>
            <button className="w-8 h-8 rounded-full bg-slate-200 dark:bg-white/5 flex items-center justify-center hover:bg-primary hover:text-white transition-all">
              <span className="material-symbols-outlined text-sm">camera_alt</span>
            </button>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;