import React, { useEffect, useRef, useState } from 'react';
import { 
  ArrowUpRight, 
  Sparkles, 
  Instagram,
  ArrowRight,
  CheckCircle2,
  Menu,
  X,
  MessageCircle,
  Send,
  Loader2
} from 'lucide-react';

/**
 * JOLIE MAIN STUDIO - V6.0 AI INTEGRATED EDITORIAL
 * Aesthetic: High-Efficiency Editorial
 * Features: GROQ AI Concierge, Authentic Asset Integration
 * Fonts: Playfair Display & Inter
 */

const LOGO_URL = "https://res.cloudinary.com/dj2bicb8m/image/upload/v1768110895/582444434_122098417347116827_1842383411626331584_n.jpg_lcjehg.jpg";
const BOOKING_URL = "https://www.dashbooking.com/salon/jolie-main-studio/booking";
const GROQ_API_KEY = "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";

const ASSETS = {
  hero: "https://images.unsplash.com/photo-1604654894610-df63bc536371?q=80&w=987&auto=format&fit=crop", 
  runway1: "https://res.cloudinary.com/dt8xxhite/image/upload/v1768210575/610960098_122118266817120610_8883433092097801868_n.jpg_ikl1nq.jpg", 
  runway2: "https://res.cloudinary.com/dt8xxhite/image/upload/v1768210648/611715666_122117595867120610_9221523005684423611_n.jpg_u3ojsr.jpg",
  runway3: "https://images.unsplash.com/photo-1607779097040-26e80aa78e66?q=80&w=1200&auto=format&fit=crop",
  // Updated Creative Art Link
  runway4: "https://res.cloudinary.com/dt8xxhite/image/upload/v1768210941/599413249_122113809267120610_6322608646623385751_n.jpg_wzxpau.jpg",
};

const TRANSLATIONS = {
  fr: {
    tagline: "Studio de manucure éditorial de luxe. Spécialisé dans les manucures russes de haute précision.",
    location: "Verdun, Montréal",
    est: "Établi 2024",
    beyond: "Au-delà des conventions",
    philosophy: "Nous créons des expériences visuelles pour vos doigts. Précis. Artistique. Rebelle.",
    scroll: "DÉFILER POUR DÉCOUVRIR",
    marquee: "* Art sur mesure * Haute Précision * Haute Couture * Verdun QC *",
    runwayTitle: "Le Défilé",
    runwaySub: "Sélection Archive",
    look: "Look",
    editTitle: "La Sélection",
    editSub: "Le Menu",
    editDesc: "Chaque séance est une collaboration entre l'artiste et le sujet. Nous nous concentrons sur la structure, la longévité et l'esthétique haute couture.",
    priceFrom: "À partir de",
    book: "Réserver",
    standard: "Redéfinir le Standard.",
    identity: "Affirmer votre Identité.",
    request: "Demander une séance",
    footerQuote: "\"La précision est notre seule devise. L'art est notre seule langue.\"",
    rights: "Tous droits réservés. Conçu pour l'avant-garde.",
    chatHeader: "Concierge IA",
    chatPlaceholder: "Posez-nous une question...",
  },
  en: {
    tagline: "A luxury nail editorial studio. Specializing in high-precision hardware manicures.",
    location: "Verdun, Montreal",
    est: "Est. 2024",
    beyond: "Beyond Convention",
    philosophy: "We curate visual experiences for your fingertips. Precise. Artistic. Rebel.",
    scroll: "SCROLL TO DISCOVER",
    marquee: "* Bespoke Artistry * High Precision * High Fashion * Verdun QC *",
    runwayTitle: "The Runway",
    runwaySub: "Portfolio 01",
    look: "Look",
    editTitle: "The Edit",
    editSub: "The Menu",
    editDesc: "Each session is a collaboration between artist and subject. We focus on structure, longevity, and high-fashion aesthetics.",
    priceFrom: "Starting at",
    book: "Book Now",
    standard: "Redefining the Standard.",
    identity: "Claiming your Identity.",
    request: "Request Session",
    footerQuote: "\"Precision is our only currency. Artistry is our only language.\"",
    rights: "All Rights Reserved. Built for the Avant-Garde.",
    chatHeader: "AI Concierge",
    chatPlaceholder: "Ask us anything...",
  }
};

const loadScript = (src) => {
  return new Promise((resolve) => {
    if (document.querySelector(`script[src="${src}"]`)) return resolve();
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    document.head.appendChild(script);
  });
};

/**
 * ChatBot Component
 */
const ChatBot = ({ lang, t }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState([
    { role: 'assistant', content: lang === 'fr' ? 'Bonjour. Comment puis-je vous aider aujourd\'hui?' : 'Hello. How can I assist you today?' }
  ]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const scrollRef = useRef(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages]);

  const handleSend = async () => {
    if (!input.trim() || loading) return;

    const userMsg = { role: 'user', content: input };
    setMessages(prev => [...prev, userMsg]);
    setInput('');
    setLoading(true);

    try {
      const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${GROQ_API_KEY}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          model: "llama-3.3-70b-versatile",
          messages: [
            { 
              role: "system", 
              content: `You are the high-end AI Concierge for Jolie Main Studio, a luxury nail salon in Verdun, Montreal. 
              Be elegant, concise, and professional. You specialize in Russia Biab, Shellac, Extensions, and Creative Art. 
              Always respond in the language used by the user: ${lang.toUpperCase()}. 
              Pricing starts at $65-110. Booking is available at DashBooking.
              Address: 3800 Wellington St, Montreal.`
            },
            ...messages,
            userMsg
          ],
          temperature: 0.7,
          max_tokens: 500
        })
      });

      const data = await response.json();
      const aiContent = data.choices?.[0]?.message?.content || "I apologize, I am experiencing a connection issue. Please try again.";
      
      setMessages(prev => [...prev, { role: 'assistant', content: aiContent }]);
    } catch (error) {
      setMessages(prev => [...prev, { role: 'assistant', content: "Error connecting to server." }]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed bottom-6 right-6 z-[2000] flex flex-col items-end">
      {isOpen && (
        <div className="w-[320px] sm:w-[380px] h-[500px] bg-white border border-black shadow-2xl flex flex-col mb-4 overflow-hidden rounded-sm">
          <div className="bg-black text-white p-4 flex justify-between items-center">
            <span className="font-serif italic text-lg">{t('chatHeader')}</span>
            <button onClick={() => setIsOpen(false)}><X size={20}/></button>
          </div>
          
          <div ref={scrollRef} className="flex-1 overflow-y-auto p-4 space-y-4 bg-[#F9F9F9] font-sans text-xs leading-relaxed">
            {messages.map((m, i) => (
              <div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                <div className={`max-w-[80%] p-3 rounded-sm ${m.role === 'user' ? 'bg-black text-white' : 'bg-white border border-black/10'}`}>
                  {m.content}
                </div>
              </div>
            ))}
            {loading && <div className="flex justify-start"><Loader2 size={16} className="animate-spin opacity-30" /></div>}
          </div>

          <div className="p-4 border-t border-black/5 bg-white flex gap-2">
            <input 
              type="text" 
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleSend()}
              placeholder={t('chatPlaceholder')}
              className="flex-1 bg-transparent border-none outline-none font-sans text-xs italic"
            />
            <button onClick={handleSend} disabled={loading} className="p-2 bg-black text-white hover:opacity-80 transition-opacity">
              <Send size={16}/>
            </button>
          </div>
        </div>
      )}
      
      <button 
        onClick={() => setIsOpen(!isOpen)}
        className="w-14 h-14 bg-black text-white rounded-full flex items-center justify-center shadow-2xl hover:scale-110 transition-transform active:scale-95"
      >
        {isOpen ? <X size={24}/> : <MessageCircle size={24}/>}
      </button>
    </div>
  );
};

export default function App() {
  const [libsReady, setLibsReady] = useState(false);
  const [loading, setLoading] = useState(true);
  const [mobileMenu, setMobileMenu] = useState(false);
  const [lang, setLang] = useState('fr');
  const runwayRef = useRef(null);
  const horizontalRef = useRef(null);

  const t = (key) => TRANSLATIONS[lang][key];

  useEffect(() => {
    const init = async () => {
      await loadScript('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js');
      await loadScript('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js');
      await loadScript('https://unpkg.com/lenis@1.1.13/dist/lenis.min.js');
      setLibsReady(true);
    };
    init();
  }, []);

  useEffect(() => {
    if (!libsReady) return;
    const { gsap, ScrollTrigger, Lenis } = window;
    gsap.registerPlugin(ScrollTrigger);

    const lenis = new Lenis({ lerp: 0.1 });
    function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }
    requestAnimationFrame(raf);

    gsap.to(".preloader", {
      yPercent: -100,
      duration: 1.4,
      ease: "expo.inOut",
      delay: 1.5,
      onComplete: () => setLoading(false)
    });

    gsap.to(".hero-img", {
      yPercent: 15,
      ease: "none",
      scrollTrigger: {
        trigger: ".hero",
        start: "top top",
        end: "bottom top",
        scrub: true
      }
    });

    if (window.innerWidth > 1024) {
      const cards = gsap.utils.toArray('.runway-card');
      gsap.to(cards, {
        xPercent: -100 * (cards.length - 1),
        ease: "none",
        scrollTrigger: {
          trigger: runwayRef.current,
          pin: true,
          scrub: 1,
          end: () => "+=" + runwayRef.current.offsetWidth
        }
      });
    }

    gsap.utils.toArray('.reveal').forEach(el => {
      gsap.from(el, {
        y: 30,
        opacity: 0,
        duration: 1,
        ease: "power2.out",
        scrollTrigger: { trigger: el, start: "top 90%" }
      });
    });

    return () => {
      lenis.destroy();
      ScrollTrigger.getAll().forEach(t => t.kill());
    };
  }, [libsReady]);

  const services = [
    { name: "Russia Biab", img: ASSETS.runway1, price: "85+" },
    { name: "Shellac", img: ASSETS.runway2, price: "65+" },
    { name: "Extensions", img: ASSETS.runway3, price: "110+" },
    { name: "Creative Art", img: ASSETS.runway4, price: "Bespoke" }
  ];

  return (
    <div className="bg-[#FCFCFC] text-[#0A0A0A] selection:bg-black selection:text-white antialiased">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@300;400;500;700;900&display=swap');
        
        body { font-family: 'Inter', sans-serif; }
        .font-serif { font-family: 'Playfair Display', serif; }
        .font-sans { font-family: 'Inter', sans-serif; }
        
        .hero-title { font-size: clamp(4rem, 15vw, 15rem); line-height: 0.8; font-weight: 700; letter-spacing: -0.04em; }
        
        .noise {
          position: fixed; top: 0; left: 0; width: 100%; height: 100%;
          pointer-events: none; opacity: 0.035; z-index: 9999;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }
      `}</style>

      <div className="noise" />

      {/* --- PRELOADER --- */}
      <div className="preloader fixed inset-0 z-[10000] bg-[#0A0A0A] flex flex-col items-center justify-center">
        <h2 className="text-white font-serif text-5xl mb-6">Jolie Main</h2>
        <div className="w-40 h-[1px] bg-white/20 relative overflow-hidden">
          <div className="absolute inset-0 bg-white animate-[loading_1.5s_ease-in-out_infinite]" />
        </div>
        <style>{`@keyframes loading { 0% { left: -100%; } 100% { left: 100%; } }`}</style>
      </div>

      {/* --- CHATBOT --- */}
      <ChatBot lang={lang} t={t} />

      {/* --- NAVIGATION --- */}
      <nav className="fixed top-0 w-full z-[100] px-6 py-6 lg:px-12 lg:py-10 flex justify-between items-center transition-all bg-white/10 backdrop-blur-sm lg:bg-transparent lg:backdrop-blur-none">
        <div className="flex items-center gap-4">
          <img src={LOGO_URL} alt="Logo" className="w-10 h-10 rounded-full border border-black/10 shadow-sm" />
          <span className="font-serif font-bold tracking-tighter text-2xl uppercase">JOLIE MAIN</span>
        </div>
        
        <div className="flex items-center gap-6 lg:gap-10">
          {/* Bilingual Toggle */}
          <div className="flex items-center gap-1 font-sans text-[10px] font-bold border border-black/10 rounded-full p-1 bg-white/50">
            <button 
              onClick={() => setLang('fr')}
              className={`px-3 py-1.5 rounded-full transition-all ${lang === 'fr' ? 'bg-black text-white' : 'opacity-40 hover:opacity-100'}`}
            >
              FR
            </button>
            <button 
              onClick={() => setLang('en')}
              className={`px-3 py-1.5 rounded-full transition-all ${lang === 'en' ? 'bg-black text-white' : 'opacity-40 hover:opacity-100'}`}
            >
              EN
            </button>
          </div>

          <div className="hidden lg:flex gap-10 font-sans text-[10px] uppercase tracking-[0.2em] font-bold">
            <a href="#runway" className="hover:opacity-40 transition-opacity whitespace-nowrap">{lang === 'fr' ? 'LE DÉFILÉ' : 'THE RUNWAY'}</a>
            <a href="#services" className="hover:opacity-40 transition-opacity whitespace-nowrap">{lang === 'fr' ? 'LE MENU' : 'THE EDIT'}</a>
          </div>

          <a href={BOOKING_URL} target="_blank" rel="noreferrer" className="bg-[#0A0A0A] text-white px-6 py-2.5 rounded-full text-[10px] font-bold font-sans uppercase tracking-widest hover:scale-105 active:scale-95 transition-all shadow-xl">
            {t('book')}
          </a>
          <button onClick={() => setMobileMenu(true)} className="lg:hidden text-black"><Menu size={24} /></button>
        </div>
      </nav>

      {/* --- MOBILE NAV --- */}
      <div className={`fixed inset-0 z-[1001] bg-white transition-transform duration-700 ease-in-out ${mobileMenu ? 'translate-x-0' : 'translate-x-full'}`}>
        <div className="p-8 h-full flex flex-col">
          <div className="flex justify-end">
            <button onClick={() => setMobileMenu(false)} className="p-2"><X size={32}/></button>
          </div>
          <div className="flex-1 flex flex-col justify-center gap-12 px-6">
            <div className="flex gap-4">
              {['fr', 'en'].map(l => (
                <button key={l} onClick={() => setLang(l)} className={`text-xl font-sans uppercase ${lang === l ? 'font-black underline' : 'opacity-30'}`}>{l}</button>
              ))}
            </div>
            <div className="h-px bg-black/10 my-4" />
            <a href="#runway" onClick={() => setMobileMenu(false)} className="text-5xl font-serif italic">{t('runwayTitle')}</a>
            <a href="#services" onClick={() => setMobileMenu(false)} className="text-5xl font-serif italic">{t('editTitle')}</a>
          </div>
        </div>
      </div>

      {/* --- HERO SECTION --- */}
      <header className="hero relative min-h-screen w-full flex flex-col justify-center items-center pt-24 px-6 lg:px-12 bg-[#FCFCFC] overflow-hidden">
        <div className="w-full max-w-[1500px] grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-0 items-center">
          
          <div className="lg:col-span-12 text-center lg:text-left z-10 relative">
            <h1 className="hero-title font-serif uppercase leading-none">
              Jolie <span className="text-[#C4C4C4] italic font-normal">Main</span>
            </h1>
          </div>

          <div className="lg:col-span-6 lg:col-start-4 mt-[-5vh] lg:mt-[-18vh] relative group">
            <div className="aspect-[4/5] lg:aspect-[3/4] overflow-hidden rounded shadow-2xl reveal">
              <img 
                src={ASSETS.hero} 
                className="hero-img w-full h-full object-cover grayscale brightness-95 group-hover:grayscale-0 transition-all duration-1000 scale-105" 
                alt="Editorial Nail Art" 
              />
            </div>
            {/* Absolute Detail Elements */}
            <div className="absolute -bottom-10 -right-4 lg:-right-16 bg-white p-6 lg:p-10 shadow-2xl max-w-[280px] reveal">
              <p className="font-sans text-[10px] uppercase tracking-widest font-medium opacity-60 leading-relaxed">
                {t('tagline')}
              </p>
              <div className="mt-6 flex items-center gap-3">
                <CheckCircle2 size={12} className="text-zinc-400" />
                <span className="font-sans text-[9px] uppercase font-bold tracking-widest">{t('location')}</span>
              </div>
            </div>
          </div>

          <div className="lg:col-span-3 lg:col-start-10 mt-16 lg:mt-0 space-y-8 text-right reveal">
            <div className="space-y-2">
              <p className="font-sans text-[10px] uppercase tracking-[0.4em] font-bold opacity-30">{t('est')}</p>
              <h2 className="text-3xl lg:text-5xl font-serif italic leading-tight">{t('beyond')}</h2>
            </div>
            <p className="font-sans text-[11px] uppercase leading-relaxed tracking-wider opacity-60 ml-auto max-w-[220px]">
              {t('philosophy')}
            </p>
          </div>
        </div>

        {/* Floating Scroll Indicator */}
        <div className="absolute bottom-12 left-12 hidden lg:flex items-center gap-6 rotate-[-90deg] origin-left">
          <span className="font-sans text-[10px] uppercase tracking-[0.5em] font-bold opacity-40">{t('scroll')}</span>
          <div className="w-24 h-[1px] bg-black/10" />
        </div>
      </header>

      {/* --- STATEMENT MARQUEE --- */}
      <div className="py-20 lg:py-32 border-y border-black/5 bg-white overflow-hidden flex whitespace-nowrap">
        <div className="animate-scroll inline-block text-[10vw] lg:text-[5vw] font-serif italic uppercase px-12 tracking-tighter">
          {t('marquee')} </div>
        <div className="animate-scroll inline-block text-[10vw] lg:text-[5vw] font-serif italic uppercase px-12 tracking-tighter">
          {t('marquee')} </div>
        <style>{`
          @keyframes scroll-text { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
          .animate-scroll { animation: scroll-text 35s linear infinite; }
        `}</style>
      </div>

      {/* --- THE RUNWAY (HORIZONTAL) --- */}
      <section id="runway" ref={runwayRef} className="relative min-h-screen bg-[#0A0A0A] text-white overflow-hidden flex items-center">
        <div className="lg:absolute top-24 left-12 z-20 p-8 lg:p-0">
          <p className="font-sans text-[10px] uppercase tracking-[0.5em] font-bold mb-4 opacity-40">{t('runwaySub')}</p>
          <h2 className="text-6xl lg:text-9xl font-serif italic tracking-tighter">{t('runwayTitle')}</h2>
        </div>

        <div ref={horizontalRef} className="flex flex-col lg:flex-row lg:w-[400vw] h-full items-center px-6 lg:px-[10vw] gap-16 lg:gap-0 py-24 lg:py-0">
          {services.map((service, idx) => (
            <div key={idx} className="runway-card w-full lg:w-[65vw] h-[60vh] lg:h-[75vh] flex flex-col justify-center lg:px-16 relative group">
              <div className="w-full h-full relative overflow-hidden bg-[#111] rounded shadow-2xl">
                <img src={service.img} className="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-all duration-1000 group-hover:scale-105" alt={service.name} />
                <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent" />
                <div className="absolute bottom-12 left-12 space-y-4">
                  <span className="font-sans text-[11px] uppercase tracking-widest font-bold opacity-40">{t('look')} 0{idx + 1}</span>
                  <h3 className="text-5xl lg:text-8xl font-serif italic leading-none">{service.name}</h3>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* --- SERVICE EDITORIAL --- */}
      <section id="services" className="py-32 lg:py-64 px-6 lg:px-24 bg-white">
        <div className="flex flex-col lg:flex-row justify-between items-end mb-24 lg:mb-44 gap-12">
          <div className="max-w-4xl">
            <p className="font-sans text-[10px] uppercase tracking-[0.5em] font-bold mb-10 opacity-30">{t('editSub')}</p>
            <h2 className="text-[16vw] lg:text-[11vw] font-serif italic leading-[0.8] tracking-tighter reveal lowercase">
              {t('editTitle').split(' ')[0]}<br/><span className="pl-[10vw]">{t('editTitle').split(' ')[1] || ''}</span>
            </h2>
          </div>
          <div className="w-full lg:w-1/4 space-y-8 reveal">
            <p className="font-sans text-[12px] uppercase leading-relaxed tracking-widest font-medium opacity-60">
              {t('editDesc')}
            </p>
            <div className="h-[1px] bg-black/10 w-full" />
          </div>
        </div>

        <div className="border-t border-black">
          {services.map((s, i) => (
            <div key={i} className="group border-b border-black py-12 lg:py-24 cursor-pointer flex justify-between items-center transition-all hover:bg-[#F9F9F9]">
              <div className="flex items-baseline gap-10 lg:gap-20 group-hover:translate-x-4 transition-transform duration-700">
                <span className="font-sans text-[11px] font-bold opacity-30 tracking-[0.3em] italic">0{i+1}</span>
                <div>
                  <h3 className="text-4xl lg:text-[11rem] font-sans font-black uppercase tracking-tighter leading-none">{s.name}</h3>
                  <p className="font-sans text-[10px] uppercase tracking-widest font-bold mt-6 opacity-40 group-hover:opacity-100 transition-opacity">{t('priceFrom')} ${s.price}</p>
                </div>
              </div>
              <div className="w-14 h-14 lg:w-28 lg:h-28 rounded-full border border-black flex items-center justify-center group-hover:bg-black group-hover:text-white transition-all mr-4">
                <ArrowUpRight size={window.innerWidth > 1024 ? 40 : 24} />
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* --- STUDIO STATEMENT --- */}
      <section className="py-40 lg:py-72 bg-[#0A0A0A] text-white flex flex-col items-center justify-center text-center px-6 overflow-hidden">
        <div className="reveal space-y-16 relative">
          <p className="font-sans text-[10px] uppercase tracking-[1em] font-bold opacity-40">Verdun / Montréal</p>
          <h2 className="text-[11vw] lg:text-[8vw] font-serif italic leading-[0.85] max-w-6xl mx-auto tracking-tighter">
            {lang === 'fr' ? 'Redéfinir le' : 'Redefining the'} <span className="text-zinc-600">Standard</span>. {lang === 'fr' ? 'Affirmer votre' : 'Claiming your'} <span className="font-sans font-black uppercase not-italic">Identity</span>.
          </h2>
          <div className="pt-24 flex flex-col items-center gap-10">
            <a href={BOOKING_URL} target="_blank" rel="noreferrer" className="group relative px-20 py-10 lg:px-32 lg:py-14 border border-white/20 rounded-full overflow-hidden transition-colors">
              <span className="relative z-10 font-serif italic text-4xl lg:text-7xl">{t('request')}</span>
              <div className="absolute inset-0 bg-white translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-out"></div>
              <style>{`.group:hover span { color: #0A0A0A; }`}</style>
            </a>
            <p className="font-sans text-[9px] uppercase tracking-[0.4em] font-bold opacity-20">DashBooking Secured Integration</p>
          </div>
        </div>
      </section>

      {/* --- HIGH-DETAIL LOGO SHOWCASE --- */}
      <section className="py-32 lg:py-56 bg-white flex flex-col items-center justify-center border-t border-black/5">
        <div className="reveal flex flex-col items-center max-w-4xl px-6 text-center">
          <p className="font-sans text-[10px] uppercase tracking-[0.5em] font-bold mb-12 opacity-30">Brand Insignia</p>
          <div className="w-[80vw] lg:w-[35vw] aspect-square rounded-full overflow-hidden border border-black/10 p-2 shadow-2xl">
            <img 
              src={LOGO_URL} 
              className="w-full h-full object-cover rounded-full grayscale hover:grayscale-0 transition-all duration-1000" 
              alt="Logo Detail" 
            />
          </div>
          {/* Duplicate title "Jolie Main Studio" removed here */}
          <p className="font-sans text-[12px] uppercase tracking-widest leading-relaxed font-medium opacity-50 max-w-lg mt-16">
            {t('footerQuote')}
          </p>
        </div>
      </section>

      {/* --- FOOTER --- */}
      <footer id="footer" className="pt-32 pb-16 px-6 lg:px-12 bg-[#FCFCFC] border-t border-black/5">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-20 items-start">
          <div className="lg:col-span-8">
            <h4 className="text-[20vw] lg:text-[14vw] font-serif font-bold uppercase leading-[0.7] tracking-tighter mb-12">
              JOLIE<br/>MAIN
            </h4>
            <div className="grid grid-cols-2 lg:grid-cols-3 gap-10 font-sans text-[10px] uppercase tracking-widest font-bold">
              <div className="space-y-4">
                <p className="opacity-30 font-medium">Connect</p>
                <a href="#" className="flex items-center gap-2 hover:line-through"><Instagram size={12}/> @joliemain.studio</a>
                <a href="#" className="block hover:line-through transition-all">TikTok / JMStudio</a>
              </div>
              <div className="space-y-4">
                <p className="opacity-30 font-medium">Studio</p>
                <p>3800 Wellington St,<br/>Montreal, QC H4G 1V2</p>
                <p className="opacity-40">info@joliemain.com</p>
              </div>
              <div className="space-y-4 hidden lg:block">
                <p className="opacity-30 font-medium">Sitemap</p>
                <a href="#runway" className="block hover:opacity-50">{t('runwayTitle')}</a>
                <a href="#services" className="block hover:opacity-50">{t('editTitle')}</a>
              </div>
            </div>
          </div>
          
          <div className="lg:col-span-4 lg:text-right flex flex-col lg:justify-between h-full lg:items-end">
            <div className="hidden lg:block space-y-6 max-w-xs">
               <p className="font-sans text-[10px] uppercase tracking-[0.3em] font-bold opacity-40">{lang === 'fr' ? 'La philosophie' : 'The philosophy'}</p>
               <p className="font-serif italic text-2xl lg:text-3xl">{t('footerQuote')}</p>
            </div>
            <div className="mt-20 flex flex-col lg:items-end gap-2 font-sans text-[10px] uppercase tracking-widest opacity-30 font-bold">
              <p>© 2024 JOLIE MAIN STUDIO.</p>
              <p>{t('rights')}</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}