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

// --- DATA ---
const PORTFOLIO_DATA = [
  { 
    id: 'chase-2026', 
    title: 'YAMAHA 125 YZ', 
    thumbnail: 'yamaha.jpg', 
    gear: 'Drone FPV 3.5" + GoPro Hero 13',
    status: 'À VENIR PROCHAINEMENT EN 2026',
    hasTimer: true,
    isUnknown: true,
    targetDate: undefined
  },
  {
    id: 'secret-2026',
    title: '?????',
    thumbnail: 'https://images.unsplash.com/photo-1508614589041-895b88991e3e?auto=format&fit=crop&w=1920&q=80',
    gear: 'DJI AIR 3S',
    status: 'À VENIR',
    hasTimer: true,
    isUnknown: false,
    targetDate: '2026-04-07T00:00:00'
  }
];

// --- UTILS ---
const useReveal = () => {
  const { pathname } = useLocation();
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
        }
      });
    }, { threshold: 0.1 });

    const elements = document.querySelectorAll('.reveal');
    elements.forEach(el => observer.observe(el));
    
    setTimeout(() => {
        elements.forEach(el => {
            const rect = el.getBoundingClientRect();
            if (rect.top < window.innerHeight) el.classList.add('active');
        });
    }, 500);

    return () => observer.disconnect();
  }, [pathname]);
};

const CountdownTimer: React.FC<{ targetDate?: string, isUnknown?: boolean }> = ({ targetDate, isUnknown }) => {
  const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });

  useEffect(() => {
    if (isUnknown || !targetDate) return;
    const target = new Date(targetDate).getTime();
    const timer = setInterval(() => {
      const now = new Date().getTime();
      const distance = target - now;
      if (distance < 0) { clearInterval(timer); return; }
      setTimeLeft({
        days: Math.floor(distance / (1000 * 60 * 60 * 24)),
        hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
        minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
        seconds: Math.floor((distance % (1000 * 60)) / 1000)
      });
    }, 1000);
    return () => clearInterval(timer);
  }, [targetDate, isUnknown]);

  const Block = ({ v, l }: { v: string | number, l: string }) => (
    <div className="flex flex-col items-center px-3 border-l border-white/10 first:border-0">
      <span className="text-xl font-black text-white leading-none">{isUnknown ? '??' : v.toString().padStart(2, '0')}</span>
      <span className="text-[6px] font-black uppercase tracking-[0.2em] text-white/30 mt-1 italic">{l}</span>
    </div>
  );

  return (
    <div className="flex bg-black/90 backdrop-blur-2xl border border-white/10 p-3 shadow-2xl">
      <Block v={timeLeft.days} l="J" />
      <Block v={timeLeft.hours} l="H" />
      <Block v={timeLeft.minutes} l="M" />
      <Block v={timeLeft.seconds} l="S" />
    </div>
  );
};

// --- 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 navLinks = [
    { 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-1000 ${scrolled ? 'bg-black/95 backdrop-blur-xl py-6 border-b border-white/5' : 'bg-transparent py-12'}`}>
      <div className="container mx-auto px-8 flex justify-between items-center">
        <Link to="/" className="group">
          <img src="logo.png" alt="Basty FPV" className="h-12 md:h-16 brightness-200 transition-all group-hover:scale-105 duration-700 ease-out" />
        </Link>
        <div className="hidden md:flex items-center space-x-12">
          {navLinks.map((link) => (
            <Link 
              key={link.path} 
              to={link.path} 
              className={`text-[10px] font-black tracking-[0.4em] uppercase transition-all hover:text-white relative group ${location.pathname === link.path ? 'text-white' : 'text-white/30'}`}
            >
              {link.name}
              <span className={`absolute -bottom-2 left-0 h-px bg-white transition-all duration-500 ${location.pathname === link.path ? 'w-full' : 'w-0 group-hover:w-full'}`}></span>
            </Link>
          ))}
        </div>
      </div>
    </nav>
  );
};

const Home = () => {
  useReveal();
  return (
    <div className="w-full bg-black">
      <section className="relative h-screen w-full overflow-hidden flex flex-col items-center justify-center group cursor-none">
        <div className="absolute inset-0 z-0 pointer-events-none">
          <video autoPlay muted loop playsInline className="w-full h-full object-cover grayscale opacity-50 group-hover:opacity-100 group-hover:grayscale-0 transition-all duration-[2s] ease-in-out scale-105 group-hover:scale-100">
            <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-b from-black/60 via-transparent to-black/60 group-hover:opacity-0 transition-opacity duration-1000"></div>
        </div>
        <div className="relative z-10 flex flex-col items-center px-6 text-center transition-all duration-1000 ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-[120%] group-hover:opacity-0">
          <img src="logo.png" alt="Basty FPV" className="w-[15vw] min-w-[150px] max-w-[300px] brightness-200 mb-12 animate-[revealIn_1.5s_ease-out]" />
          <h1 className="text-[8vw] md:text-[7rem] font-black tracking-tighter leading-none mb-6 uppercase text-white drop-shadow-2xl">BASTY FPV</h1>
          <p className="text-[10px] md:text-xs font-black tracking-[1.5em] text-white/60 uppercase ml-[1.5em] italic">Cinematic FPV Pilot & Creative Visuals</p>
        </div>
        <div className="absolute bottom-12 flex flex-col items-center opacity-20 group-hover:opacity-0 transition-opacity duration-500">
          <div className="w-[1px] h-16 bg-white/50 relative overflow-hidden"><div className="absolute top-0 left-0 w-full h-full bg-white animate-[scrollLine_2s_infinite]"></div></div>
        </div>
      </section>
      <section className="py-40 bg-black flex justify-center items-center">
         <Link to="/portfolio" className="group flex flex-col items-center">
            <span className="text-[10px] font-black tracking-[1em] text-white/20 uppercase mb-8 group-hover:text-white/60 transition-colors">DÉCOUVRIR LE TRAVAIL</span>
            <span className="text-4xl md:text-7xl font-black text-outline group-hover:text-white transition-all duration-700 uppercase italic">ENTER THE FPV WORLD</span>
         </Link>
      </section>
    </div>
  );
};

const Portfolio = () => {
  useReveal();
  return (
    <div className="pt-48 pb-40 container mx-auto px-8 max-w-7xl">
      <div className="mb-32 reveal">
        <span className="text-[10px] font-black tracking-[0.6em] text-white/20 uppercase block mb-6 italic">RÉALISATIONS</span>
        <h2 className="text-7xl md:text-[10rem] font-black tracking-tighter uppercase leading-[0.8]">SHOW<br/><span className="text-outline">CASE</span></h2>
      </div>
      <div className="space-y-40">
        {PORTFOLIO_DATA.map(proj => (
          <div key={proj.id} className="reveal relative aspect-video md:aspect-[21/9] overflow-hidden bg-[#111] border border-white/5 group shadow-2xl cursor-none">
            {proj.hasTimer && (
              <div className="absolute top-10 right-10 z-30 transition-transform duration-700 group-hover:scale-110">
                <CountdownTimer targetDate={proj.targetDate} isUnknown={proj.isUnknown} />
              </div>
            )}
            <img src={proj.thumbnail} alt={proj.title} className="w-full h-full object-cover grayscale opacity-40 group-hover:scale-110 group-hover:grayscale-0 transition-all duration-[2s] ease-out" />
            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80 group-hover:opacity-20 transition-opacity duration-1000"></div>
            <div className="absolute inset-0 flex flex-col items-center justify-center text-center p-8 transition-all duration-1000 ease-[cubic-bezier(0.19,1,0.22,1)] z-20 group-hover:-translate-y-full group-hover:opacity-0">
                <div className="mb-8 px-6 py-2 border border-white/20 bg-black/60 backdrop-blur-xl">
                    <span className="text-[10px] font-black tracking-[0.8em] uppercase text-white animate-pulse">{proj.status}</span>
                </div>
                <h3 className="text-5xl md:text-[8rem] font-black uppercase tracking-tighter mb-6 italic leading-none">{proj.title}</h3>
                <p className="text-white/40 text-[10px] font-black tracking-[0.5em] uppercase border-t border-white/10 pt-6">{proj.gear}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const Prestations = () => {
  useReveal();
  const list = [
    { title: 'FPV CINÉMATIQUE', icon: '🎬', desc: 'Prises de vues immersives et fluides pour publicités, clips et storytelling.', items: ['Drone FPV 3.5 Pouces', '4K 120 FPS / D-LOG M', 'Stabilisation ReelSteady GO'] },
    { title: 'CHASE CAM / SUIVI', icon: '🏎️', desc: 'Tracking dynamique de véhicules, sportifs ou événements en mouvement.', items: ['Suivi haute vitesse', 'Proximité millimétrée', 'Action synchronisée'] },
    { title: 'EXPLORATION CINEWHOOP', icon: '🏛️', desc: 'Visites virtuelles en intérieur (immobilier, industrie). Vol sécurisé.', items: ['Protection d\'hélices', 'Passage en espaces réduits', 'Storytelling intérieur'] },
    { title: 'MONTAGE & ÉDITION', icon: '✂️', desc: 'Post-production complète sur Adobe : montage, sound design et colorgrading.', items: ['Adobe Premiere Pro', 'Sound Design Immersif', 'Multi-formats'] }
  ];
  return (
    <div className="pt-48 pb-40 container mx-auto px-8 max-w-7xl">
      <div className="mb-32 reveal">
        <span className="text-[10px] font-black tracking-[0.6em] text-white/20 uppercase block mb-4 italic">MISSIONS & CAPACITÉS</span>
        <h2 className="text-7xl md:text-[10rem] font-black tracking-tighter uppercase leading-[0.8] mb-8">NOS<br/><span className="text-outline">SERVICES</span></h2>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-white/5 border border-white/5 mb-40">
        {list.map((s, i) => (
          <div key={i} className="reveal bg-[#050505] p-12 lg:p-20 group hover:bg-white/[0.02] transition-all duration-700">
            <span className="text-5xl mb-12 block grayscale opacity-20 group-hover:opacity-100 group-hover:grayscale-0 transition-all duration-700">{s.icon}</span>
            <h3 className="text-4xl font-black uppercase mb-8">{s.title}</h3>
            <p className="text-white/40 mb-10">{s.desc}</p>
            <ul className="space-y-3 pt-8 border-t border-white/5">
                {s.items.map((item, idx) => (
                    <li key={idx} className="text-[10px] font-bold uppercase tracking-widest text-white/20 group-hover:text-white/60 flex items-center space-x-3">
                        <span className="w-1.5 h-px bg-white/20 group-hover:w-4 transition-all"></span><span>{item}</span>
                    </li>
                ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
};

const About = () => {
  useReveal();
  return (
    <div className="pt-48 pb-32 container mx-auto px-8 max-w-6xl">
        <div className="mb-24 reveal">
          <span className="text-[10px] font-black tracking-[0.6em] text-white/20 uppercase block mb-4 italic">THE CREATIVE MIND</span>
          <h2 className="text-7xl md:text-[10rem] font-black tracking-tighter uppercase leading-[0.8] mb-4">BASTIAN<br/><span className="text-outline">BÉLON</span></h2>
          <div className="h-1 w-24 bg-white/20 mt-8"></div>
        </div>

        <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-5xl font-light leading-tight text-white/80">
              Expert en <span className="text-white font-black italic">immersion</span> dynamique, basé dans les <span className="text-white font-black italic underline decoration-white/20 underline-offset-8">Hauts-de-France</span>.
            </p>
            
            <div className="space-y-8 text-white/40 text-xl font-light leading-relaxed border-l border-white/10 pl-8">
              <p>Mon approche du FPV dépasse le simple pilotage : je conçois chaque vol comme une partition cinématographique. Alliant précision technique et vision artistique, je transforme des environnements complexes en récits visuels fluides.</p>
              <p>Spécialisé dans le <span className="text-white font-bold">Somme (80)</span> et le <span className="text-white font-bold">Pas-de-Calais (62)</span>, j'accompagne marques et créatifs pour capturer l'impossible, du suivi haute vitesse au CineWhoop intérieur chirurgical.</p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 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">LOGICIEL</h4>
                <ul className="text-xs font-bold uppercase tracking-widest space-y-3 text-white/60">
                  <li className="flex items-center space-x-2"><span className="w-1 h-1 bg-white rounded-full"></span><span>Adobe Premiere Pro</span></li>
                  <li className="flex items-center space-x-2"><span className="w-1 h-1 bg-white rounded-full"></span><span>ReelSteady / RSGO</span></li>
                </ul>
              </div>
              <div className="space-y-4">
                <h4 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">DRONES</h4>
                <ul className="text-xs font-bold uppercase tracking-widest space-y-3 text-white/60">
                  <li className="flex items-center space-x-2"><span className="w-1 h-1 bg-white rounded-full"></span><span>FPV 3.5 POUCES</span></li>
                  <li className="flex items-center space-x-2"><span className="w-1 h-1 bg-white rounded-full"></span><span>DJI AIR 3S</span></li>
                  <li className="flex items-center space-x-2"><span className="w-1 h-1 bg-white rounded-full"></span><span>DJI MINI 3 PRO</span></li>
                </ul>
              </div>
              <div className="space-y-4">
                <h4 className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">CAMERA</h4>
                <ul className="text-xs font-bold uppercase tracking-widest space-y-3 text-white/60">
                  <li className="flex items-center space-x-2"><span className="w-1 h-1 bg-white rounded-full"></span><span>GOPRO HERO 13</span></li>
                </ul>
              </div>
            </div>

            <div className="pt-8">
               <a href="mailto:belon.bastian@bastyfpv.fr" className="inline-block text-[10px] font-black uppercase tracking-[0.6em] border-b border-white pb-2 hover:text-white/40 transition-colors italic">
                belon.bastian@bastyfpv.fr
              </a>
            </div>
          </div>
          
          <div className="reveal relative aspect-[16/10] lg:aspect-video overflow-hidden grayscale border border-white/5 group shadow-2xl">
            <img src="drone-fields.jpg" className="w-full h-full object-cover transition-transform duration-[4s] group-hover:scale-110 group-hover:grayscale-0" alt="Cinematic drone view" />
            <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
            <div className="absolute bottom-8 left-8">
              <span className="text-[9px] font-black uppercase tracking-[0.6em] text-white/30 italic">Perspective aérienne — 2025</span>
            </div>
          </div>
        </div>
    </div>
  );
};

const Contact = () => {
  useReveal();
  const [status, setStatus] = useState('idle');
  const [form, setForm] = useState({ name: '', email: '', message: '', location: '', zip: '' });

  const handleSubmit = async (e) => {
    e.preventDefault(); setStatus('sending');
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ access_key: "3006180d-83af-44b8-b7f2-b0ace60a4a4a", ...form })
      });
      if ((await res.json()).success) setStatus('sent'); else setStatus('error');
    } catch { setStatus('error'); }
  };

  if (status === 'sent') return (
    <div className="pt-48 text-center min-h-[60vh] flex flex-col justify-center">
      <h2 className="text-7xl font-black mb-8 italic">READY FOR TAKE OFF.</h2>
      <p className="text-white/40 uppercase tracking-widest mb-12">Message transmis. Bastian revient vers vous sous 48h.</p>
      <button onClick={() => setStatus('idle')} className="text-[10px] font-black border-b border-white pb-2 uppercase tracking-widest">Nouvelle Demande</button>
    </div>
  );

  return (
    <div className="pt-48 pb-40 container mx-auto px-8 max-w-5xl">
      <div className="mb-40 text-center reveal">
        <span className="text-[10px] font-black tracking-[0.8em] text-white/20 uppercase block mb-6 italic">PRE-FLIGHT BRIEFING</span>
        <h2 className="text-7xl md:text-[9rem] font-black tracking-tighter uppercase leading-[0.85]">PARLONS<br/><span className="text-outline">PROJET</span></h2>
        <div className="mt-12">
            <span className="px-6 py-2 border border-white/10 bg-white/5 rounded-full text-[10px] font-black text-white/60 uppercase tracking-widest inline-block animate-pulse">Zone : Somme (80) & Pas-de-Calais (62)</span>
        </div>
      </div>
      <form onSubmit={handleSubmit} className="reveal space-y-16">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          <input placeholder="VOTRE NOM" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="bg-transparent border-b border-white/10 py-4 outline-none focus:border-white uppercase tracking-widest text-sm" required />
          <input placeholder="VOTRE EMAIL" type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} className="bg-transparent border-b border-white/10 py-4 outline-none focus:border-white uppercase tracking-widest text-sm" required />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          <input placeholder="VILLE" value={form.location} onChange={e => setForm({...form, location: e.target.value})} className="bg-transparent border-b border-white/10 py-4 outline-none focus:border-white uppercase tracking-widest text-sm" required />
          <input placeholder="CODE POSTAL" value={form.zip} onChange={e => setForm({...form, zip: e.target.value})} className="bg-transparent border-b border-white/10 py-4 outline-none focus:border-white uppercase tracking-widest text-sm" required />
        </div>
        <textarea rows={4} placeholder="VOTRE VISION..." value={form.message} onChange={e => setForm({...form, message: e.target.value})} className="w-full bg-transparent border-b border-white/10 py-4 outline-none focus:border-white uppercase tracking-widest text-sm resize-none" required></textarea>
        <button className="w-full py-10 bg-white text-black font-black uppercase tracking-[1em] text-[10px] hover:bg-neutral-200 transition-all">{status === 'sending' ? 'TRANSMISSION...' : 'ENVOYER LA DEMANDE'}</button>
      </form>
    </div>
  );
};

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

  return (
    <div className="min-h-screen flex flex-col bg-[#050505] 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={<Prestations />} />
          <Route path="/a-propos" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </main>
      <footer className="py-24 border-t border-white/5 text-center opacity-20"><p className="text-[10px] font-black uppercase tracking-[1.5em]">BFPV © 2026 — SOMME & PAS-DE-CALAIS</p></footer>
      <style>{`
        @keyframes revealIn { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes scrollLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
      `}</style>
    </div>
  );
};

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