import React, { useState, useEffect, useMemo, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';

// --- TYPES & DATA ---
enum Category {
  CINEMATIQUE = 'Cinématique',
  CHASE = 'Chase Cam',
  TECH = 'Photogrammétrie',
  COMMERCIAL = 'Publicité',
  ACTION = 'Sport & Action'
}

const PORTFOLIO_DATA = [
  { id: '1', title: 'Les Sommets Silencieux', category: Category.CINEMATIQUE, thumbnail: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1200&q=80', year: '2024', gear: 'CineLifter + Sony A7SIII' },
  { id: '2', title: 'Urban Drift Chase', category: Category.CHASE, thumbnail: 'https://images.unsplash.com/photo-1511919884226-fd3cad34687c?auto=format&fit=crop&w=1200&q=80', year: '2023', gear: '5" Freestyle + GoPro 12' },
  { id: '3', title: 'Mapping Industriel', category: Category.TECH, thumbnail: 'https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=1200&q=80', year: '2024', gear: 'DJI Mavic 3E + RTK' },
  { id: '4', title: 'Villa de Luxe Tour', category: Category.COMMERCIAL, thumbnail: 'https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&w=1200&q=80', year: '2024', gear: 'CineWhoop 3.5"' },
  { id: '5', title: 'Suivi Enduro', category: Category.ACTION, thumbnail: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?auto=format&fit=crop&w=1200&q=80', year: '2023', gear: 'Long Range 7"' },
  { id: '6', title: 'Horizon Côtier', category: Category.CINEMATIQUE, thumbnail: 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1200&q=80', year: '2024', gear: '5" Cinematic' },
  { id: '7', title: 'Flux de Nuit', category: Category.CINEMATIQUE, thumbnail: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?auto=format&fit=crop&w=1200&q=80', year: '2023', gear: 'Whoop Naked GoPro' },
  { id: '8', title: 'Inspection de Pont', category: Category.TECH, thumbnail: 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?auto=format&fit=crop&w=1200&q=80', year: '2024', gear: 'Drone Industriel' },
  { id: '9', title: 'Rallye Étape A1', category: Category.CHASE, thumbnail: 'https://images.unsplash.com/photo-1515276427842-f85802d514a2?auto=format&fit=crop&w=1200&q=80', year: '2024', gear: 'High Speed FPV' },
];

const EXPERTISE = [
  { label: 'Pilotage', val: 'Certification DGAC S1/S3' },
  { label: 'Technique', val: 'BTS Géomètre Topographe' },
  { label: 'Logiciels', val: 'Pix4D / DaVinci Resolve' },
  { label: 'Vitesse', val: 'Max 160km/h' }
];

// --- HOOKS ---
const useReveal = () => {
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) entry.target.classList.add('active');
      });
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
    return () => observer.disconnect();
  }, []);
};

// --- COMPONENTS ---
const Navbar = () => {
  const [scrolled, setScrolled] = useState(false);
  const location = useLocation();

  useEffect(() => {
    const handle = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handle);
    return () => window.removeEventListener('scroll', handle);
  }, []);

  const navItems = [
    { name: 'Portfolio', path: '/portfolio' },
    { name: 'Prestations', path: '/prestations' },
    { name: 'À Propos', path: '/a-propos' },
    { name: 'Contact', path: '/contact' }
  ];

  return (
    <nav className={`fixed top-0 inset-x-0 z-[100] transition-all duration-700 ${scrolled ? 'bg-black/90 backdrop-blur-xl py-4 border-b border-white/5' : 'bg-transparent py-10'}`}>
      <div className="container mx-auto px-8 flex justify-between items-center">
        <Link to="/" className="group flex items-center">
            <img src="logo.png" alt="Basty FPV" className="h-12 md:h-14 brightness-200 transition-transform group-hover:scale-105 duration-500" />
        </Link>
        <div className="hidden md:flex items-center space-x-12">
          {navItems.map((item) => (
            <Link key={item.path} to={item.path} className={`text-[10px] font-black tracking-[0.4em] uppercase transition-all hover:text-white relative group ${location.pathname === item.path ? 'text-white' : 'text-white/30'}`}>
              {item.name}
              <span className={`absolute -bottom-2 left-0 h-px bg-white transition-all duration-500 ${location.pathname === item.path ? 'w-full' : 'w-0 group-hover:w-full'}`}></span>
            </Link>
          ))}
        </div>
        <Link to="/contact" className="hidden lg:block px-6 py-2 border border-white/20 text-[9px] font-black uppercase tracking-[0.3em] hover:bg-white hover:text-black transition-all">DEVIS GRATUIT</Link>
      </div>
    </nav>
  );
};

const SectionHeader = ({ sub, title }: { sub: string, title: string }) => (
  <div className="mb-24 reveal">
    <span className="text-[10px] font-black tracking-[0.6em] text-white/30 uppercase block mb-4">{sub}</span>
    <h2 className="text-6xl md:text-[8rem] font-black tracking-tighter uppercase leading-[0.85]">{title}</h2>
  </div>
);

const Home = () => {
  useReveal();
  return (
    <div className="w-full">
      <section className="relative h-screen flex items-center justify-center overflow-hidden">
          <div className="absolute inset-0 z-0 scale-105">
              <video autoPlay muted loop playsInline className="w-full h-full object-cover opacity-30 grayscale contrast-125">
                  <source src="https://player.vimeo.com/external/494252666.sd.mp4?s=72ad0734ccf832483866299d630d9709d17d0c0c&profile_id=164&oauth2_token_id=57447761" type="video/mp4" />
              </video>
              <div className="absolute inset-0 bg-gradient-to-t from-[#050505] via-transparent to-[#050505]"></div>
          </div>

          <div className="relative z-10 text-center px-8 flex flex-col items-center">
              <img src="logo.png" alt="Basty FPV Logo" className="w-[40vw] max-w-[500px] mb-16 brightness-200 animate-[revealIn_1.5s_ease-out]" />
              
              <h1 className="text-[12vw] md:text-[10rem] font-black tracking-tighter leading-none mb-4 uppercase">
                  MOUVEMENT <span className="text-outline italic">PRÉCIS</span>
              </h1>
              <p className="text-[10px] md:text-xs font-black tracking-[1.8em] text-white/40 uppercase mb-20 ml-[1.8em] animate-pulse">
                  Pilote FPV Cinématique & Ingénierie Créative
              </p>
              <div className="flex flex-col md:flex-row gap-8 reveal">
                  <Link to="/portfolio" className="px-16 py-7 bg-white text-black text-[10px] font-black uppercase tracking-[0.5em] hover:scale-105 transition-transform">Portfolio</Link>
                  <Link to="/prestations" className="px-16 py-7 border border-white/20 text-white text-[10px] font-black uppercase tracking-[0.5em] hover:bg-white hover:text-black transition-all">Prestations</Link>
              </div>
          </div>
          
          <div className="absolute bottom-12 left-1/2 -translate-x-1/2 flex flex-col items-center opacity-20">
              <div className="w-[1px] h-20 bg-white mb-4 animate-[scrollLine_2s_infinite]"></div>
              <span className="text-[8px] font-black tracking-[0.4em] uppercase italic">Scrollez pour découvrir</span>
          </div>
      </section>

      <section className="py-24 border-y border-white/5 bg-white/[0.01]">
          <div className="container mx-auto px-8 grid grid-cols-2 md:grid-cols-4 gap-12">
              {EXPERTISE.map(ex => (
                  <div key={ex.label} className="reveal text-center md:text-left">
                      <h4 className="text-[9px] font-black uppercase tracking-[0.4em] text-white/20 mb-2">{ex.label}</h4>
                      <p className="text-xl md:text-2xl font-black uppercase tracking-tighter">{ex.val}</p>
                  </div>
              ))}
          </div>
      </section>
    </div>
  );
};

const Portfolio = () => {
  const [active, setActive] = useState<Category | 'Tout'>('Tout');
  const items = active === 'Tout' ? PORTFOLIO_DATA : PORTFOLIO_DATA.filter(p => p.category === active);
  useReveal();

  return (
    <div className="pt-48 pb-40 container mx-auto px-8">
        <SectionHeader sub="La Galerie" title="Derniers Travaux" />
        
        <div className="flex flex-wrap gap-8 mb-32 reveal">
            {['Tout', ...Object.values(Category)].map(f => (
                <button key={f} onClick={() => setActive(f as any)} className={`text-[10px] font-black uppercase tracking-[0.3em] pb-3 border-b-2 transition-all ${active === f ? 'border-white' : 'border-transparent text-white/20 hover:text-white'}`}>
                    {f}
                </button>
            ))}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
            {items.map((proj, idx) => (
                <div key={proj.id} className={`reveal group relative overflow-hidden bg-[#111] aspect-[4/5] ${idx % 3 === 1 ? 'md:mt-24' : ''}`}>
                    <img src={proj.thumbnail} alt={proj.title} className="w-full h-full object-cover grayscale opacity-30 group-hover:grayscale-0 group-hover:opacity-60 group-hover:scale-110 transition-all duration-[2s] ease-out" />
                    <div className="absolute inset-0 p-10 flex flex-col justify-between z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-700 bg-gradient-to-t from-black via-transparent to-transparent">
                        <span className="text-[9px] font-black uppercase tracking-[0.5em] text-white/40">{proj.year}</span>
                        <div>
                            <p className="text-[10px] font-black uppercase tracking-[0.4em] text-white/50 mb-3">{proj.category}</p>
                            <h3 className="text-3xl font-black uppercase tracking-tighter mb-4">{proj.title}</h3>
                            <div className="text-[9px] font-bold uppercase tracking-widest text-white/30 border-t border-white/10 pt-4">{proj.gear}</div>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    </div>
  );
};

const Services = () => {
    useReveal();
    const list = [
        { t: 'Mouvement Cinématique', d: 'Captation FPV immersive pour publicités, clips et films. Résolution jusqu\'à 6K ProRes.', i: '🎬' },
        { t: 'Suivi Haute Vitesse', d: 'Suivi dynamique de véhicules et sportifs. Vitesse stable jusqu\'à 160km/h en conditions extrêmes.', i: '🏎️' },
        { t: 'Expertise Technique', d: 'Photogrammétrie et relevés techniques précis. Expertise certifiée BTS Géomètre Topographe.', i: '📐' },
        { t: 'Exploration Intérieure', d: 'Visites virtuelles CineWhoop pour l\'immobilier de luxe et les complexes industriels.', i: '🏛️' }
    ];

    return (
        <div className="pt-48 pb-40 container mx-auto px-8">
            <SectionHeader sub="Notre Expertise" title="Ingénierie Créative" />
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-px bg-white/5 border border-white/5 mt-20">
                {list.map(s => (
                    <div key={s.t} className="reveal bg-[#050505] p-20 group hover:bg-white/[0.02] transition-colors">
                        <div className="text-4xl mb-10 grayscale group-hover:grayscale-0 transition-all opacity-20 group-hover:opacity-100">{s.i}</div>
                        <h3 className="text-4xl font-black uppercase tracking-tighter mb-6">{s.t}</h3>
                        <p className="text-white/40 text-lg font-light leading-relaxed max-w-sm">{s.d}</p>
                    </div>
                ))}
            </div>
        </div>
    );
};

const About = () => {
    useReveal();
    return (
        <div className="pt-48 pb-40 container mx-auto px-8 max-w-6xl">
            <SectionHeader sub="Le Pilote" title="Bastian Bélon" />
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-32 items-start mt-20">
                <div className="reveal space-y-12">
                    <p className="text-3xl md:text-4xl font-light leading-relaxed text-white/80">
                        Basé en Picardie, j'allie la <span className="text-white font-black italic underline">rigueur technique</span> du géomètre à la créativité du pilote FPV.
                    </p>
                    <div className="space-y-8 text-white/40 text-xl font-light leading-relaxed">
                        <p>Ancien technicien géomètre, j'ai conservé le goût de la précision millimétrée. Mon pilotage n'est pas qu'une question de cascades, c'est une étude du mouvement, de la lumière et de l'espace.</p>
                        <p>Je travaille avec des marques et des productions qui cherchent une image "premium", propre et dynamique, tout en garantissant une sécurité totale sur le terrain (Certifié DGAC).</p>
                    </div>
                    <div className="grid grid-cols-2 gap-12 pt-12 border-t border-white/5">
                        <div className="space-y-4">
                            <h4 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">Logiciels</h4>
                            <ul className="text-xs font-bold uppercase tracking-widest space-y-2">
                                <li>Pix4D Mapper</li>
                                <li>DaVinci Resolve Studio</li>
                                <li>Adobe Creative Suite</li>
                            </ul>
                        </div>
                        <div className="space-y-4">
                            <h4 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">Flotte</h4>
                            <ul className="text-xs font-bold uppercase tracking-widest space-y-2">
                                <li>CineLifter Sony A7SIII</li>
                                <li>5" Freestyle Performance</li>
                                <li>CineWhoop 3.5" Intérieur</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="reveal relative aspect-[3/4] overflow-hidden grayscale border border-white/5 group">
                    <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?auto=format&fit=crop&w=1200&q=80" className="w-full h-full object-cover transition-transform duration-[3s] group-hover:scale-110" />
                    <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
                </div>
            </div>
        </div>
    );
};

const Contact = () => {
    const [status, setStatus] = useState<'idle' | 'sending' | 'sent'>('idle');
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        mission: 'Cinématique FPV',
        message: ''
    });

    useReveal();

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        setStatus('sending');
        
        // Simuler un envoi et ouvrir le client mail par défaut avec mailto
        const subject = `Demande de projet - ${formData.mission}`;
        const body = `Nom: ${formData.name}%0D%0AEmail: ${formData.email}%0D%0AMission: ${formData.mission}%0D%0A%0D%0AMessage:%0D%0A${formData.message}`;
        
        setTimeout(() => {
            window.location.href = `mailto:belon.bastian@basty.fr?subject=${subject}&body=${body}`;
            setStatus('sent');
        }, 1000);
    };

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    return (
        <div className="pt-48 pb-40 container mx-auto px-8 max-w-4xl text-center">
            <SectionHeader sub="Prêt pour le décollage ?" title="Contactez-moi" />
            <p className="text-2xl text-white/30 font-light mb-32 reveal italic">Missions en France et à l'international.</p>
            
            <form className="reveal space-y-16 text-left" onSubmit={handleSubmit}>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-16">
                    <div className="space-y-4 group">
                        <label className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20 group-focus-within:text-white transition-colors">Nom Complet</label>
                        <input name="name" type="text" placeholder="Bastian Bélon" onChange={handleChange} className="w-full bg-transparent border-b border-white/10 py-6 outline-none focus:border-white transition-all uppercase tracking-widest text-sm" required />
                    </div>
                    <div className="space-y-4 group">
                        <label className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20 group-focus-within:text-white transition-colors">Votre Email</label>
                        <input name="email" type="email" placeholder="votre@email.com" onChange={handleChange} className="w-full bg-transparent border-b border-white/10 py-6 outline-none focus:border-white transition-all uppercase tracking-widest text-sm" required />
                    </div>
                </div>

                <div className="space-y-4 group">
                    <label className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20 group-focus-within:text-white transition-colors">Type de Mission</label>
                    <select name="mission" onChange={handleChange} className="w-full bg-black border-b border-white/10 py-6 outline-none focus:border-white transition-all uppercase tracking-widest text-sm appearance-none cursor-pointer">
                        <option value="Cinématique FPV">Production Cinématographique FPV</option>
                        <option value="Suivi Haute Vitesse">Suivi de Véhicules (Chase Cam)</option>
                        <option value="Relevé Technique">Photogrammétrie / Relevé Technique</option>
                        <option value="Immobilier de Luxe">Immobilier de Prestige (CineWhoop)</option>
                        <option value="Événementiel">Captation Événementielle</option>
                        <option value="Autre">Autre projet spécifique</option>
                    </select>
                </div>

                <div className="space-y-4 group">
                    <label className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20 group-focus-within:text-white transition-colors">Détails de la mission</label>
                    <textarea name="message" rows={5} placeholder="Décrivez votre vision, le lieu, et la date approximative..." onChange={handleChange} className="w-full bg-transparent border-b border-white/10 py-6 outline-none focus:border-white transition-all uppercase tracking-widest text-sm resize-none" required></textarea>
                </div>

                <button type="submit" disabled={status !== 'idle'} className="w-full py-10 bg-white text-black font-black uppercase tracking-[0.8em] text-xs hover:bg-neutral-200 transition-colors disabled:opacity-50">
                    {status === 'idle' ? 'ENVOYER LA DEMANDE' : status === 'sending' ? 'CHARGEMENT...' : 'MESSAGE PRÊT ✓'}
                </button>
            </form>
            
            <div className="mt-40 pt-16 border-t border-white/5 flex flex-col items-center space-y-8 reveal opacity-30">
                <a href="mailto:belon.bastian@basty.fr" className="text-2xl font-black tracking-widest hover:text-white transition-colors uppercase italic">belon.bastian@basty.fr</a>
                <div className="flex space-x-12 text-[9px] font-black tracking-widest uppercase italic">
                    <a href="#" className="hover:text-white transition-all">Instagram</a>
                    <a href="#" className="hover:text-white transition-all">YouTube</a>
                    <a href="#" className="hover:text-white transition-all">TikTok</a>
                </div>
            </div>
        </div>
    );
};

// --- APP ROOT ---
const App = () => {
  const { pathname } = useLocation();
  useEffect(() => {
    window.scrollTo(0, 0);
    document.body.classList.remove('loaded');
    setTimeout(() => document.body.classList.add('loaded'), 800);
  }, [pathname]);

  return (
    <div className="min-h-screen flex flex-col selection:bg-white selection:text-black overflow-x-hidden">
      <Navbar />
      <main className="flex-grow">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/portfolio" element={<Portfolio />} />
          <Route path="/prestations" element={<Services />} />
          <Route path="/a-propos" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </main>
      <footer className="py-20 border-t border-white/5 container mx-auto px-8 flex flex-col md:flex-row justify-between items-center text-[9px] uppercase tracking-[0.4em] text-white/20">
        <div className="flex items-center space-x-4">
            <img src="logo.png" alt="Basty FPV" className="h-4 opacity-40 brightness-200" />
            <span className="font-black italic uppercase">BFPV Studio</span>
            <span>&copy; {new Date().getFullYear()}</span>
        </div>
        <a href="mailto:belon.bastian@basty.fr" className="mt-4 md:mt-0 italic font-light tracking-widest uppercase hover:text-white transition-colors">Mouvement de Précision & Récit Cinématique | belon.bastian@basty.fr</a>
      </footer>
      <style>{`
          @keyframes revealIn { from { opacity: 0; transform: translateY(40px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
          @keyframes scrollLine { 0% { height: 0; opacity: 1; } 50% { height: 80px; opacity: 1; } 100% { height: 80px; transform: translateY(80px); opacity: 0; } }
          select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1em; }
      `}</style>
    </div>
  );
};

// --- RENDER ---
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <Router>
    <App />
  </Router>
);

window.addEventListener('load', () => setTimeout(() => document.body.classList.add('loaded'), 1000));