import React, { useState, useEffect } from 'react';
import { Menu, X, ArrowRight, Star, Scissors, Info, ShoppingBag, Trash2, Check, Plus, Calendar, ShieldCheck, Image as ImageIcon, Upload, Instagram } from 'lucide-react';

const AgathaFernedaVogue = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  
  // Modal & Cart States
  const [selectedService, setSelectedService] = useState(null);
  const [activeStyle, setActiveStyle] = useState(null);
  const [cart, setCart] = useState([]);
  const [isCartOpen, setIsCartOpen] = useState(false);
  
  // Add-on State (Local selection inside modal)
  const [selectedAddOns, setSelectedAddOns] = useState([]);

  // Constants
  const WHATSAPP_NUMBER = "5519991970576";

  // --- IMAGE SYSTEM CONFIGURATION ---
  const SITE_IMAGES = {
      hero: 'assets/hero.jpg',       
      profile: 'assets/profile.jpg', 
      bg_texture: 'assets/bg.jpg'    
  };

  // Helper para imagem com fallback (Tratamento visual quando não há foto)
  const ImageWithFallback = ({ src, alt, className, isHero = false }) => {
      const [error, setError] = useState(false);

      // Reset error state when src changes
      useEffect(() => {
          setError(false);
      }, [src]);

      if (error || !src) {
          if (isHero) {
              // Fallback específico para a Capa (Hero)
              return (
                  <div className={`${className} bg-stone-100 flex flex-col justify-end items-end p-4`}>
                      {/* Empty hero fallback for cleaner look */}
                  </div>
              );
          }

          // Fallback padrão para Serviços - OTIMIZADO PARA LEITURA
          return (
              <div className={`${className} bg-stone-100 border border-stone-200 flex flex-col items-center justify-center text-stone-500 p-4 text-center transition-all duration-500`}>
                  <div className="flex items-center gap-2 mb-2 opacity-50">
                    <ImageIcon size={16} strokeWidth={1.5} />
                    <span className="text-[10px] uppercase tracking-widest font-bold">Sem Foto</span>
                  </div>
                  
                  <div className="w-full bg-white border border-stone-200 p-2 rounded shadow-sm">
                      <p className="text-[9px] text-stone-400 mb-1">Nome exato do arquivo:</p>
                      <code className="text-xs font-mono text-black block break-all select-all leading-tight">
                          {src}
                      </code>
                  </div>
              </div>
          );
      }

      return (
          <img 
              src={src} 
              alt={alt} 
              className={className} 
              onError={() => setError(true)}
          />
      );
  };

  // Handle scroll for navbar styling
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Reset active selections when service changes
  useEffect(() => {
    setActiveStyle(null);
    setSelectedAddOns([]);
  }, [selectedService]);

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  const toggleCart = () => setIsCartOpen(!isCartOpen);

  const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
    setIsMenuOpen(false);
    setActiveSection(id);
  };

  // --- Logic Helpers ---

  const parsePrice = (priceStr) => {
    if (!priceStr || typeof priceStr !== 'string') return 0;
    const cleanStr = priceStr.toLowerCase().replace('r$', '').replace('*', '').replace('a partir de', '').trim();
    if (isNaN(cleanStr.replace(',', '.'))) return 0;
    return parseFloat(cleanStr.replace(',', '.'));
  };

  const toggleAddOn = (addOn) => {
    if (selectedAddOns.find(item => item.name === addOn.name)) {
      setSelectedAddOns(selectedAddOns.filter(item => item.name !== addOn.name));
    } else {
      setSelectedAddOns([...selectedAddOns, addOn]);
    }
  };

  const addToCart = (item, specificVariant = null) => {
    const parentId = Date.now();
    
    // Add Main Service
    const mainItem = {
      id: parentId,
      name: specificVariant ? `${item.name}: ${specificVariant.name}` : item.name,
      price: specificVariant ? specificVariant.price : item.price,
      note: specificVariant ? specificVariant.unit : null,
      isAddOn: false
    };
    
    let itemsToAdd = [mainItem];

    // Add Selected Add-ons (if any)
    if (selectedAddOns.length > 0) {
        selectedAddOns.forEach((addOn, index) => {
            itemsToAdd.push({
                id: parentId + index + 1,
                name: `+ ${addOn.name} (${item.name})`,
                price: addOn.price,
                note: 'Adicional',
                isAddOn: true
            });
        });
    }

    setCart([...cart, ...itemsToAdd]);
    setIsCartOpen(true);
    setSelectedAddOns([]); 
  };

  const removeFromCart = (itemId) => {
    setCart(cart.filter(item => item.id !== itemId));
  };

  const calculateTotal = () => {
    return cart.reduce((total, item) => total + parsePrice(item.price), 0);
  };

  const checkoutWhatsApp = () => {
    const total = calculateTotal();
    let message = "Olá, Agatha! ✨\n\nFiz uma seleção no site e gostaria de agendar:\n\n";
    
    cart.forEach(item => {
      if (item.isAddOn) {
          message += `   ➕ *${item.name.replace(/^\+ /, '')}* - R$ ${item.price}\n`;
      } else {
          message += `▪️ *${item.name}*\n   Valor: R$ ${item.price} ${item.note ? `(${item.note})` : ''}\n`;
      }
    });

    message += `\n*Total Estimado: R$ ${total.toFixed(2).replace('.', ',')}*\n`;
    message += "\nPodemos verificar a disponibilidade?";

    const url = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(message)}`;
    window.open(url, '_blank');
  };

  // --- Data Configuration ---
  const services = {
    nails: [
      { 
        id: 'fibra',
        image: 'assets/services/fibra.jpg',
        name: "Fibra de Vidro", 
        price: "190,00",
        maintenance: "120,00", 
        note: "Durabilidade de 4 a 5 meses.",
        description: "Arquitetura perfeita para suas unhas. Esculpidas fio a fio, proporcionam alongamento com resistência extrema e acabamento natural.",
        care: [
          "Hidrate as cutículas diariamente.",
          "Respeite o prazo de manutenção (15 a 28 dias)."
        ]
      },
      { 
        id: 'gel',
        image: 'assets/services/banho_gel.jpg',
        name: "Banho de Gel", 
        price: "130,00",
        maintenance: "100,00", 
        note: "Estruturação sobre unha natural.",
        description: "Proteção estruturada sobre as unhas naturais. Permite o crescimento saudável sem quebras, garantindo brilho permanente.",
        care: [
          "Não lixe as unhas em casa.",
          "Manutenção regular evita infiltrações."
        ]
      },
      {
        id: 'blindagem',
        image: 'assets/services/blindagem.jpg',
        name: "Blindagem",
        price: "90,00",
        note: "Proteção leve.",
        description: "Camada de proteção para unhas naturais, ideal para evitar descamação e quebra, mantendo a flexibilidade natural da unha com maior resistência.",
        care: [
            "Evite contato excessivo com produtos químicos.",
            "Ideal para quem quer deixar a unha crescer naturalmente."
        ]
      }
    ],
    // Removal Service
    removal: {
        id: 'remocao',
        image: 'assets/services/remocao.jpg',
        name: "Remoção Segura",
        price: "30,00*",
        note: "Consulte opções",
        description: "Procedimento técnico para retirada segura do material artificial, preservando a integridade da lâmina natural. Essencial para a saúde das suas unhas.",
        menu: [
            { name: "Com Nova Aplicação", desc: "Valor exclusivo para quem fará uma nova aplicação no mesmo atendimento.", price: "30,00", image: 'assets/services/remocao_com_aplicacao.jpg' },
            { name: "Sem Nova Aplicação", desc: "Remoção completa + Manicure Tradicional (Cutilagem e Esmaltação inclusas).", price: "70,00", image: 'assets/services/remocao_sem_aplicacao.jpg' }
        ],
        care: [
            "Utilize óleos hidratantes na unha natural após a remoção.",
            "Evite contato imediato com produtos químicos fortes."
        ]
    },
    // Special Nail Art Object
    nailArt: {
        id: 'nail_art',
        image: 'assets/services/nail_art.jpg',
        name: "Nail Art Collection",
        price: "20,00*",
        note: "Valor inicial base",
        description: "Transforme suas unhas em telas de expressão. Nossa curadoria artística oferece desde o minimalismo elegante até composições complexas.",
        menu: [
            { name: "Alto Relevo", desc: "Texturas 3D e formas esculpidas.", price: "8,00", unit: "unidade", image: 'assets/services/nail_art_alto_relevo.jpg' }, 
            { name: "Feito a Mão", desc: "Micropintura artística e traços finos.", price: "15,00", unit: "a partir de", image: 'assets/services/nail_art_feito_a_mao.jpg' },
            { name: "Temáticas", desc: "Coleções sazonais e datas festivas.", price: "15,00", unit: "a partir de", image: 'assets/services/nail_art_tematicas.jpg' }, 
            { name: "Pedrarias & Charms", desc: "Aplicação de cristais e joias.", price: "5,00", unit: "unidade", image: 'assets/services/nail_art_pedrarias.jpg' } 
        ],
        care: ["Evite atrito intenso em artes com relevo."]
    },
    basics: [
      { 
        id: 'manicure',
        image: 'assets/services/manicure.jpg',
        name: "Manicure Tradicional", 
        price: "35,00", 
        description: "O clássico ritual de cuidado. Cutilagem minuciosa e esmaltação com acabamento impecável.",
        addOns: [
            { name: "Esmaltação em Gel", price: "40,00" }
        ],
        care: ["Mantenha a hidratação diária das mãos."]
      },
      { 
        id: 'pedicure',
        image: 'assets/services/pedicure.jpg',
        name: "Pedicure Tradicional", 
        price: "45,00", 
        description: "Saúde e estética para seus pés. Inclui tratamento de calosidades superficiais, corte técnico e esmaltação.",
        addOns: [
            { name: "Esmaltação em Gel", price: "40,00" },
            { name: "Spa dos Pés", price: "25,00", desc: "Momento relaxante e hidratação para pés ressecados." },
            { name: "Plástica dos Pés", price: "35,00", desc: "Remoção de calosidade superficiais e rachaduras." }
        ],
        care: ["Use calçados confortáveis após o procedimento."]
      },
      { 
        id: 'combo',
        image: 'assets/services/combo.jpg',
        name: "Combo Mãos & Pés", 
        price: "65,00", 
        description: "A experiência completa de renovação. Otimize seu tempo cuidando de mãos e pés simultaneamente.",
        addOns: [
            { name: "Esmaltação em Gel (Mãos)", price: "40,00" },
            { name: "Esmaltação em Gel (Pés)", price: "40,00" },
            { name: "Esmaltação em Gel (Completo)", price: "75,00" } 
        ],
        care: ["Reserve ao menos 2 horas para este atendimento."]
      }
    ],
    face: [
      { 
        id: 'des_estrat',
        image: 'assets/services/design_estrategico.jpg', 
        name: "Design Estratégico", 
        price: "30,00",
        description: "Mapeamento geométrico para encontrar o formato de sobrancelha que valoriza seus traços naturais.",
        care: ["Evite cremes ou maquiagem na região por 2 horas."]
      },
      { 
        id: 'henna',
        image: 'assets/services/henna.jpg',
        name: "Design com Henna", 
        price: "45,00",
        description: "Design estratégico finalizado com pigmentação temporária.",
        care: ["Não molhe as sobrancelhas nas primeiras 12 horas."]
      },
      { 
        id: 'brow',
        image: 'assets/services/brow_lamination.jpg', 
        name: "Brow Lamination", 
        price: "160,00",
        description: "Técnica russa de alinhamento dos fios. Cria um efeito volumoso e sofisticado.",
        care: ["Mantenha seco nas primeiras 24 horas."]
      },
      { 
        id: 'lash',
        image: 'assets/services/lash_lifting.jpg', 
        name: "Lash Lifting", 
        price: "120,00",
        description: "Curvatura e tintura dos cílios naturais.",
        care: ["Evite água e vapor nas primeiras 24 horas."]
      }
    ],
    packages: [
      { name: "Essential", description: "2 Mãos + 2 Pés", price: "130,00", image: 'assets/services/pacote_essential.jpg' },
      { name: "Premium", description: "4 Mãos + 2 Pés", price: "180,00", image: 'assets/services/pacote_premium.jpg' },
      { name: "Gel Experience", description: "2 Mãos + 2 Pés (Gel)", price: "250,00", image: 'assets/services/pacote_gel_exp.jpg' }
    ]
  };

  // Logic to determine display values
  const currentDisplayName = activeStyle ? activeStyle.name : (selectedService ? selectedService.name : '');
  const currentDisplayPrice = activeStyle && activeStyle.price ? activeStyle.price : (selectedService ? selectedService.price : '');
  const currentUnit = activeStyle && activeStyle.unit ? activeStyle.unit : '';
  
  // Logic for Dynamic Image (Style > Service > Default)
  const currentImage = activeStyle && activeStyle.image ? activeStyle.image : (selectedService ? selectedService.image : '');

  return (
    <div className="font-sans text-black bg-white selection:bg-black selection:text-white">
      {/* Google Fonts Import */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Montserrat:wght@200;300;400;500&family=Pinyon+Script&display=swap');
        .font-serif { font-family: 'Cinzel', serif; }
        .font-sans { font-family: 'Montserrat', sans-serif; }
        .font-script { font-family: 'Pinyon Script', cursive; }
        
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
      `}</style>

      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-700 ${scrolled ? 'bg-white/95 py-4 border-b border-black/5' : 'bg-transparent py-8'}`}>
        <div className="container mx-auto px-6 flex justify-between items-center">
          <div className="text-sm tracking-[0.2em] uppercase font-medium cursor-pointer" onClick={() => scrollToSection('home')}>
            AF Studio
          </div>
          
          <div className="hidden md:flex space-x-12 text-[10px] tracking-[0.3em] uppercase font-medium text-black/80">
            {['Perfil', 'Serviços', 'Pacotes', 'Etiqueta', 'Contato'].map((item) => (
              <button 
                key={item} 
                onClick={() => scrollToSection(item.toLowerCase().replace('ç', 'c').replace('õ', 'o'))}
                className="hover:text-black transition-colors relative group"
              >
                {item}
                <span className="absolute -bottom-2 left-1/2 w-0 h-[1px] bg-black transition-all duration-300 group-hover:w-full group-hover:left-0"></span>
              </button>
            ))}
          </div>

          <div className="flex items-center gap-6">
            <button onClick={toggleCart} className="relative group">
               <ShoppingBag size={20} strokeWidth={1} className="text-black group-hover:fill-black/5 transition-colors"/>
               {cart.length > 0 && (
                   <span className="absolute -top-2 -right-2 bg-black text-white text-[9px] w-4 h-4 rounded-full flex items-center justify-center font-sans">
                       {cart.length}
                   </span>
               )}
            </button>
            
            <button onClick={toggleMenu} className="md:hidden">
              {isMenuOpen ? <X size={20} /> : <Menu size={20} />}
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="fixed inset-0 bg-white z-40 flex flex-col items-center justify-center space-y-8 animate-fade-in">
          {['Perfil', 'Serviços', 'Pacotes', 'Etiqueta', 'Contato'].map((item) => (
            <button 
              key={item}
              onClick={() => scrollToSection(item.toLowerCase().replace('ç', 'c').replace('õ', 'o'))}
              className="text-2xl font-serif uppercase tracking-widest hover:text-gray-400 transition-colors"
            >
              {item}
            </button>
          ))}
        </div>
      )}

      {/* SHOPPING CART DRAWER */}
      <div className={`fixed inset-0 z-[80] pointer-events-none overflow-hidden ${isCartOpen ? 'pointer-events-auto' : ''}`}>
          <div 
             className={`absolute inset-0 bg-black/20 backdrop-blur-sm transition-opacity duration-500 ${isCartOpen ? 'opacity-100' : 'opacity-0'}`}
             onClick={() => setIsCartOpen(false)}
          />
          
          <div className={`absolute top-0 right-0 h-full w-full max-w-md bg-white shadow-2xl transform transition-transform duration-500 ease-out flex flex-col ${isCartOpen ? 'translate-x-0' : 'translate-x-full'}`}>
              
              <div className="p-8 border-b border-black/5 flex justify-between items-center bg-white z-10">
                  <h2 className="font-serif text-xl uppercase tracking-[0.2em]">Sua Sacola</h2>
                  <button onClick={() => setIsCartOpen(false)} className="hover:rotate-90 transition-transform duration-300">
                      <X size={24} strokeWidth={1} />
                  </button>
              </div>

              <div className="flex-1 overflow-y-auto p-8 scrollbar-hide">
                  {cart.length === 0 ? (
                      <div className="h-full flex flex-col items-center justify-center text-black/40">
                          <ShoppingBag size={48} strokeWidth={0.5} className="mb-4 opacity-50"/>
                          <p className="text-xs uppercase tracking-widest">Sua sacola está vazia</p>
                      </div>
                  ) : (
                      <div className="space-y-6">
                          {cart.map((item) => (
                              <div key={item.id} className={`flex justify-between items-start animate-fade-in group ${item.isAddOn ? 'pl-4 border-l-2 border-black/5' : ''}`}>
                                  <div>
                                      <h3 className={`font-serif leading-none mb-1 ${item.isAddOn ? 'text-sm text-black/70' : 'text-lg'}`}>
                                        {item.name}
                                      </h3>
                                      <p className="text-[10px] uppercase tracking-wider text-black/50">
                                        R$ {item.price} {item.note && item.note !== 'Adicional' && <span className="lowercase">({item.note})</span>}
                                      </p>
                                  </div>
                                  <button 
                                    onClick={() => removeFromCart(item.id)}
                                    className="text-black/20 hover:text-red-900 transition-colors"
                                  >
                                      <Trash2 size={14} strokeWidth={1} />
                                  </button>
                              </div>
                          ))}
                      </div>
                  )}
              </div>

              <div className="p-8 border-t border-black/5 bg-gray-50">
                  <div className="flex justify-between items-end mb-8">
                      <span className="text-xs uppercase tracking-widest text-black/60">Total Estimado</span>
                      <span className="font-serif text-3xl">R$ {calculateTotal().toFixed(2).replace('.', ',')}</span>
                  </div>
                  <button 
                      onClick={checkoutWhatsApp}
                      disabled={cart.length === 0}
                      className={`w-full py-4 text-xs uppercase tracking-[0.3em] border border-black transition-all duration-500 ${cart.length === 0 ? 'opacity-50 cursor-not-allowed bg-transparent' : 'bg-black text-white hover:bg-white hover:text-black'}`}
                  >
                      Finalizar Pedido via WhatsApp
                  </button>
              </div>
          </div>
      </div>

      {/* Service Detail Modal */}
      {selectedService && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center p-2 md:p-6 overflow-hidden">
          <div 
            className="absolute inset-0 bg-white/95 backdrop-blur-sm transition-opacity" 
            onClick={() => setSelectedService(null)}
          ></div>
          
          <div className="relative bg-white w-full max-w-5xl h-full md:h-auto md:max-h-[90vh] shadow-2xl overflow-y-auto animate-slide-up flex flex-col border border-black/20">
            
            <button 
              onClick={() => setSelectedService(null)}
              className="absolute top-4 right-4 md:top-8 md:right-8 p-2 z-20 group"
            >
               <span className="text-[10px] uppercase tracking-widest mr-2 group-hover:mr-4 transition-all duration-300">Fechar</span>
               <X size={24} strokeWidth={1} className="inline-block" />
            </button>

            <div className="pt-10 px-8 md:px-16 text-center border-b border-black/10 pb-4 mx-4 md:mx-0">
               <h2 className="font-serif text-2xl md:text-3xl uppercase tracking-[0.2em] text-black">Agatha Ferneda</h2>
               <div className="flex justify-between items-center mt-2 text-[9px] uppercase tracking-[0.3em] text-black/40 max-w-md mx-auto">
                  <span>Edição 2026</span>
                  <span>•</span>
                  <span>Collection</span>
                  <span>•</span>
                  <span>Piracicaba</span>
               </div>
            </div>

            <div className="flex-1 p-6 md:p-12">
              <div className="grid md:grid-cols-12 gap-8 md:gap-16 h-full items-start">
                
                {/* Left Column */}
                <div className="md:col-span-5 flex flex-col justify-center border-b md:border-b-0 md:border-r border-black/10 pb-8 md:pb-0 md:pr-4 md:h-full transition-all duration-300">
                   
                   {/* SERVICE IMAGE - Top of Left Column - WIDESCREEN ASPECT RATIO & DYNAMIC SOURCE */}
                   <div className="mb-8 w-full aspect-video overflow-hidden relative bg-gray-50 border border-black/5">
                        <ImageWithFallback 
                            src={currentImage} // Updated to use dynamic image
                            alt={currentDisplayName}
                            className="w-full h-full object-cover transition-transform duration-700 hover:scale-105"
                        />
                        {/* Subtle editorial number overlay */}
                        <span className="absolute bottom-2 right-2 text-[100px] leading-none font-serif text-black/5 pointer-events-none">0{Math.floor(Math.random() * 9) + 1}</span>
                   </div>

                   <div className="mt-auto mb-auto">
                     <span className="text-xs font-serif italic mb-4 block text-black/40">Serviço em Destaque</span>
                     <h1 className="font-serif text-5xl md:text-6xl uppercase leading-none mb-8 break-words transition-all duration-500">
                       {currentDisplayName}
                     </h1>
                     
                     <div className="transition-all duration-500">
                       <p className="text-[10px] uppercase tracking-[0.4em] mb-2 text-black/40">Investimento</p>
                       <div className="flex items-baseline gap-2 flex-wrap">
                            {currentDisplayPrice.includes('*') && !activeStyle ? (
                                <span className="text-[10px] uppercase tracking-wider text-black/60 self-center mr-1">a partir de</span>
                            ) : null}
                            <p className="font-serif text-4xl md:text-5xl">
                                {currentDisplayPrice === 'Consultar' ? 'Consultar' : `R$ ${currentDisplayPrice.replace('*', '')}`}
                            </p>
                            {currentUnit && <span className="text-xs italic text-black/50 font-serif">({currentUnit})</span>}
                       </div>
                       
                       {selectedService.maintenance && !activeStyle && (
                          <p className="text-xs mt-3 text-black/50 italic font-serif">
                            Manutenção: R$ {selectedService.maintenance}
                          </p>
                       )}
                     </div>
                   </div>
                </div>

                {/* Right Column */}
                <div className="md:col-span-7 flex flex-col justify-between h-full">
                   <div className="flex-grow">
                      {/* Description */}
                      <div className="mb-8 text-justify text-sm font-light leading-relaxed text-black/80 font-sans tracking-wide">
                         <p>
                           <span className="float-left text-7xl md:text-8xl font-script mr-4 mt-[-4px] leading-none text-black">A</span>
                           {selectedService.description}
                         </p>
                      </div>
                      
                      {/* Add-ons for Basics (Esmaltação em Gel, Spa, Plástica) */}
                      {selectedService.addOns && (
                          <div className="mb-8 p-6 bg-stone-50 border border-black/5">
                              <h4 className="font-serif text-sm uppercase tracking-widest mb-4 flex items-center gap-2">
                                  <Plus size={14}/> Adicionais Disponíveis
                              </h4>
                              <div className="space-y-3">
                                  {selectedService.addOns.map((addon, idx) => {
                                      const isSelected = selectedAddOns.some(item => item.name === addon.name);
                                      return (
                                          <div 
                                            key={idx} 
                                            onClick={() => toggleAddOn(addon)}
                                            className={`flex justify-between items-start p-3 cursor-pointer border transition-all duration-300 ${isSelected ? 'border-black bg-white' : 'border-transparent hover:bg-white hover:border-black/10'}`}
                                          >
                                              <div className="flex items-start gap-3">
                                                  <div className={`w-4 h-4 border flex items-center justify-center transition-colors flex-shrink-0 mt-0.5 ${isSelected ? 'border-black bg-black' : 'border-black/30'}`}>
                                                      {isSelected && <Check size={10} className="text-white" />}
                                                  </div>
                                                  <div className="flex flex-col">
                                                      <span className="text-xs uppercase tracking-wider font-medium">{addon.name}</span>
                                                      {addon.desc && (
                                                          <span className="text-[10px] text-black/50 font-light mt-1 leading-tight">{addon.desc}</span>
                                                      )}
                                                  </div>
                                              </div>
                                              <span className="font-serif text-sm whitespace-nowrap pl-4">+ R$ {addon.price}</span>
                                          </div>
                                      );
                                  })}
                              </div>
                          </div>
                      )}

                      {/* Nail Art / Removal Menu */}
                      {selectedService.menu && (
                        <div className="mb-10">
                            <h4 className="font-serif text-lg italic mb-6 border-b border-black/10 pb-2">Menu de Opções</h4>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-6">
                                {selectedService.menu.map((item, idx) => (
                                    <div 
                                        key={idx} 
                                        onClick={() => setActiveStyle(item)}
                                        className={`group cursor-pointer p-2 -ml-2 rounded transition-colors duration-300 ${activeStyle?.name === item.name ? 'bg-black/5' : 'hover:bg-black/5'}`}
                                    >
                                        <h5 className="font-serif text-sm uppercase tracking-widest mb-1 pl-0 transition-all duration-300 flex items-center justify-between">
                                            {item.name}
                                            {activeStyle?.name === item.name && <span className="text-[10px]">●</span>}
                                        </h5>
                                        <p className="text-[10px] font-light leading-relaxed text-black/60">{item.desc}</p>
                                    </div>
                                ))}
                            </div>
                            {activeStyle && (
                                <button 
                                    onClick={() => setActiveStyle(null)}
                                    className="text-[9px] uppercase tracking-widest mt-4 text-black/40 hover:text-black border-b border-black/20 pb-0.5"
                                >
                                    Voltar para visão geral
                                </button>
                            )}
                        </div>
                      )}

                      {selectedService.care && (
                        <div className="bg-gray-50 p-6 md:p-8 border-l-2 border-black/80 mt-8">
                           <h4 className="font-serif text-sm uppercase tracking-widest mb-6">Cuidados</h4>
                           <ul className="space-y-3">
                              {selectedService.care.map((careItem, idx) => (
                                <li key={idx} className="text-xs font-sans font-light tracking-wide flex items-start gap-3">
                                  <span className="text-black/40 mt-[2px]">—</span>
                                  <span className="text-black/70 leading-relaxed">{careItem}</span>
                                </li>
                              ))}
                           </ul>
                        </div>
                      )}
                   </div>

                   <div className="mt-12 flex justify-end">
                      <button 
                        onClick={() => {
                            if (activeStyle) {
                                addToCart(selectedService, activeStyle);
                            } else {
                                addToCart(selectedService);
                            }
                        }}
                        className="bg-black text-white px-10 py-4 text-xs uppercase tracking-[0.2em] hover:bg-white hover:text-black border border-black transition-all duration-500 w-full md:w-auto shadow-sm hover:shadow-lg flex items-center justify-center gap-2"
                      >
                        <ShoppingBag size={14} />
                        {selectedAddOns.length > 0 ? `Adicionar (Item + ${selectedAddOns.length} Extras)` : 'Adicionar à Sacola'}
                      </button>
                   </div>
                </div>
              </div>
            </div>
            
            <div className="text-center pb-6 text-[10px] text-black/20 font-serif italic">
               pág. {Math.floor(Math.random() * 50) + 10}
            </div>
          </div>
        </div>
      )}

      {/* Hero Section */}
      <header id="home" className="relative min-h-screen flex items-center justify-center overflow-hidden bg-white">
        <div className="absolute inset-0 z-0">
            {/* Background Image Loading */}
            <ImageWithFallback 
                src={SITE_IMAGES.hero} 
                alt="Agatha Ferneda Background" 
                className="w-full h-full object-cover opacity-90"
                isHero={true}
            />
            {/* Overlay to ensure text readability */}
            <div className="absolute inset-0 bg-white/20 backdrop-blur-[2px]"></div>
        </div>
        
        <div className="relative z-10 text-center px-6 max-w-5xl mx-auto mt-10">
          <p className="text-[10px] md:text-xs tracking-[0.8em] uppercase mb-12 animate-slide-up text-black/60">
            Piracicaba — 2026
          </p>
          
          <h1 className="font-serif text-5xl md:text-7xl lg:text-8xl uppercase tracking-[0.15em] mb-6 leading-tight animate-fade-in-slow font-normal text-black">
            Agatha<br className="md:hidden"/> Ferneda
          </h1>
          
          <div className="w-[1px] h-20 bg-black/20 mx-auto my-10"></div>
          
          <p className="font-sans text-sm md:text-lg tracking-[0.3em] uppercase text-black/80 font-light animate-slide-up-delay">
            Especialista em Nail Design
          </p>
          
          <div className="mt-16">
             <button 
               onClick={() => scrollToSection('servicos')}
               className="border-b border-black pb-1 text-[10px] uppercase tracking-[0.3em] hover:text-black/60 transition-all duration-500"
             >
               Ver a Coleção
             </button>
          </div>
        </div>
      </header>

      {/* Editor's Letter (Bio) */}
      <section id="perfil" className="py-32 px-6 md:px-12 max-w-7xl mx-auto">
        <div className="grid md:grid-cols-12 gap-16 items-center">
          <div className="md:col-span-5 relative order-2 md:order-1">
            <div className="aspect-[3/4] bg-gray-50 overflow-hidden relative group">
              {/* Profile Image Loading */}
              <ImageWithFallback 
                src={SITE_IMAGES.profile} 
                alt="Agatha Ferneda" 
                className="object-cover w-full h-full grayscale opacity-90 group-hover:grayscale-0 group-hover:scale-105 transition-all duration-1000 ease-out"
              />
            </div>
            <div className="absolute -bottom-8 -right-8 text-[100px] font-serif text-black/5 leading-none select-none -z-10">01</div>
          </div>

          <div className="md:col-span-7 md:pl-12 order-1 md:order-2 text-center md:text-left">
            <h2 className="font-serif text-3xl md:text-4xl mb-12 uppercase tracking-widest font-normal">A Assinatura</h2>
            <div className="space-y-8 text-sm md:text-base text-black/70 font-light leading-loose tracking-wide font-sans">
              <p>
                Acreditamos que unhas não são apenas detalhes, mas a extensão da sua identidade. Com uma visão inovadora e 3 anos de expertise, a Agatha Ferneda Studio oferece mais do que um serviço: entregamos autoestima.
              </p>
              <p>
                Nossa filosofia une a técnica precisa da fibra de vidro com a delicadeza de um acabamento natural. Um espaço onde o clássico encontra a sofisticação moderna.
              </p>
            </div>
            <div className="mt-12 text-center md:text-left">
               <span className="font-script text-4xl">A.F.</span>
            </div>
          </div>
        </div>
      </section>

      {/* Services - Interactive List */}
      <section id="servicos" className="py-32 bg-white">
        <div className="container mx-auto px-6 max-w-5xl">
          <div className="flex flex-col md:flex-row justify-between items-end mb-24 pb-4 border-b border-black/10">
            <h2 className="font-serif text-4xl uppercase tracking-widest">Serviços</h2>
            <div className="flex items-center gap-2 mt-4 md:mt-0">
               <Info size={12} className="text-black/40" />
               <span className="text-[10px] tracking-[0.2em] uppercase text-black/40">Clique para ver detalhes</span>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-x-32 gap-y-20">
            {/* Column 1 */}
            <div>
              <h3 className="font-serif text-lg mb-12 flex items-center gap-4">
                <span className="w-8 h-[1px] bg-black"></span>
                Nails
              </h3>
              <div className="space-y-12">
                {services.nails.map((item, idx) => (
                  <div 
                    key={idx} 
                    onClick={() => setSelectedService(item)}
                    className="group cursor-pointer"
                  >
                    <div className="flex justify-between items-baseline mb-3 group-hover:opacity-60 transition-opacity">
                      <h4 className="font-sans text-sm uppercase tracking-widest font-medium flex items-center gap-2">
                        {item.name}
                        <span className="opacity-0 group-hover:opacity-100 transition-opacity text-[10px] transform -rotate-45">→</span>
                      </h4>
                      <span className="font-serif text-lg">R$ {item.price}</span>
                    </div>
                    <p className="text-[10px] uppercase tracking-wider text-black/40 mb-1">{item.note}</p>
                    <div className="text-[10px] uppercase tracking-wider text-black/40 flex gap-2">
                        <span>Manutenção:</span>
                        <span className="text-black/70">R$ {item.maintenance}</span>
                    </div>
                  </div>
                ))}
                
                 {/* Nail Art */}
                <div 
                    onClick={() => setSelectedService(services.nailArt)}
                    className="pt-8 mt-8 border-t border-dashed border-black/10 opacity-70 cursor-pointer group hover:opacity-100 transition-opacity duration-300"
                >
                  <div className="flex justify-between items-baseline mb-2">
                    <h4 className="font-sans text-sm uppercase tracking-widest font-medium text-black/60 group-hover:text-black flex items-center gap-2">
                        Nail Art
                        <span className="opacity-0 group-hover:opacity-100 transition-opacity text-[10px] transform -rotate-45">→</span>
                    </h4>
                    <span className="font-serif text-sm">a partir de R$ 20,00</span>
                  </div>
                  <p className="text-[10px] uppercase tracking-wider text-black/30">Baby boomer, encapsulada, autoral.</p>
                </div>

                {/* Removal - Added Here */}
                <div 
                    onClick={() => setSelectedService(services.removal)}
                    className="pt-8 mt-8 border-t border-dashed border-black/10 opacity-70 cursor-pointer group hover:opacity-100 transition-opacity duration-300"
                >
                  <div className="flex justify-between items-baseline mb-2">
                    <h4 className="font-sans text-sm uppercase tracking-widest font-medium text-black/60 group-hover:text-black flex items-center gap-2">
                        Remoção
                        <span className="opacity-0 group-hover:opacity-100 transition-opacity text-[10px] transform -rotate-45">→</span>
                    </h4>
                    <span className="font-serif text-sm">a partir de R$ 30,00</span>
                  </div>
                  <p className="text-[10px] uppercase tracking-wider text-black/30">Retirada segura do alongamento.</p>
                </div>
              </div>
            </div>

            {/* Column 2 */}
            <div>
               <h3 className="font-serif text-lg mb-12 flex items-center gap-4">
                <span className="w-8 h-[1px] bg-black"></span>
                Care & Face
               </h3>
               <div className="space-y-12">
                 {/* Manicure Section */}
                 <div>
                    {services.basics.map((item, idx) => (
                      <div 
                        key={idx} 
                        onClick={() => setSelectedService(item)}
                        className="flex flex-col mb-10 last:mb-0 cursor-pointer group"
                      >
                        <div className="flex justify-between items-baseline mb-2 group-hover:opacity-60 transition-opacity">
                          <span className="uppercase text-xs tracking-widest font-medium flex items-center gap-2">
                            {item.name}
                            <span className="opacity-0 group-hover:opacity-100 transition-opacity text-[10px] transform -rotate-45">→</span>
                          </span>
                          <span className="font-serif text-lg">R$ {item.price}</span>
                        </div>
                        {item.addOns && (
                          <div className="flex justify-between items-baseline text-black/40 text-[10px] uppercase tracking-widest pl-4 border-l border-black/10">
                            <span>Opção Gel (+ R$ 40/75)</span>
                          </div>
                        )}
                      </div>
                    ))}
                 </div>

                 {/* Face Section */}
                 <div className="pt-10">
                    <h4 className="font-serif text-sm uppercase tracking-widest mb-8 text-black/40">Brow Bar</h4>
                    {services.face.map((item, idx) => (
                      <div 
                        key={idx} 
                        onClick={() => setSelectedService(item)}
                        className="flex justify-between items-center mb-6 border-b border-black/5 pb-2 last:border-0 cursor-pointer group hover:bg-gray-50/50 transition-colors"
                      >
                        <span className="text-xs font-light tracking-wide flex items-center gap-2">
                            {item.name}
                        </span>
                        <div className="flex items-center gap-3">
                            <span className="text-sm font-medium">R$ {item.price}</span>
                            <span className="opacity-0 group-hover:opacity-100 text-[10px] transition-opacity">Ver +</span>
                        </div>
                      </div>
                    ))}
                 </div>
               </div>
            </div>
          </div>
        </div>
      </section>

      {/* Packages */}
      <section id="pacotes" className="py-24 bg-gray-50">
        <div className="container mx-auto px-6 max-w-6xl">
          <div className="text-center mb-20">
            <h2 className="font-serif text-3xl md:text-4xl uppercase tracking-[0.2em] mb-4">The Club</h2>
            <p className="text-[10px] tracking-[0.4em] uppercase text-black/40">Planos de Assinatura</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {services.packages.map((pkg, idx) => (
              <div key={idx} className="bg-white p-10 flex flex-col items-center text-center shadow-sm hover:shadow-xl transition-all duration-700 hover:-translate-y-1 border border-transparent hover:border-black/5 relative group">
                <Star size={10} className="mb-6 text-black/20" />
                <h3 className="font-serif text-xl uppercase tracking-widest mb-4">{pkg.name}</h3>
                <p className="text-[10px] tracking-widest uppercase mb-10 text-black/50 h-8 flex items-center justify-center border-b border-black/5 w-full">{pkg.description}</p>
                <div className="mt-auto">
                    <span className="text-3xl font-serif">R$ {pkg.price}</span>
                    <span className="block text-[9px] uppercase tracking-widest mt-2 text-black/30">Mensal</span>
                </div>
                
                {/* Add Package to Cart Overlay */}
                <div className="absolute inset-0 bg-white/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <button 
                        onClick={() => addToCart(pkg)}
                        className="bg-black text-white px-6 py-3 text-[10px] uppercase tracking-widest hover:bg-black/80"
                    >
                        Adicionar à Sacola
                    </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Etiqueta */}
      <section id="etiqueta" className="py-32 px-6 bg-white">
        <div className="max-w-4xl mx-auto text-center">
          <Scissors size={20} strokeWidth={1} className="mx-auto mb-10 opacity-40" />
          <h2 className="font-serif text-2xl uppercase tracking-[0.3em] mb-12">Protocolo</h2>
          
          <div className="grid md:grid-cols-2 gap-x-16 gap-y-16 text-xs md:text-sm font-light leading-loose tracking-wide text-left">
            <div>
                <strong className="block font-medium uppercase tracking-widest mb-4 text-xs flex items-center gap-2">
                    <Calendar size={14} /> Pontualidade
                </strong>
                <p className="text-black/70 mb-4">
                  Para garantir a excelência e a tranquilidade do seu atendimento, o cumprimento do horário é essencial. Toleramos atrasos de até <strong>10 minutos</strong>. Após esse período, o procedimento poderá sofrer adaptações para não comprometer a agenda.
                </p>
            </div>
            <div>
                <strong className="block font-medium uppercase tracking-widest mb-4 text-xs flex items-center gap-2">
                    <Star size={14} /> Atmosfera & Conforto
                </strong>
                <p className="text-black/70">
                   Nosso studio é um refúgio de calma projetado para o seu relaxamento e autocuidado. Temos um espaço acolhedor pronto para te receber — chegue e desfrute de um cappuccino especial enquanto se desconecta do mundo lá fora.
                </p>
            </div>
            
            <div>
                <strong className="block font-medium uppercase tracking-widest mb-4 text-xs flex items-center gap-2">
                    <ShieldCheck size={14} /> Manutenções Externas
                </strong>
                <p className="text-black/70">
                   Acolhemos manutenções de trabalhos realizados por outros profissionais exclusivamente sob <strong>análise técnica prévia</strong>. Isso garante que possamos entregar o padrão de excelência Agatha Ferneda sem comprometer a saúde das suas unhas.
                </p>
            </div>

            <div>
                <strong className="block font-medium uppercase tracking-widest mb-4 text-xs flex items-center gap-2">
                    <Check size={14} /> Reserva & Compromisso
                </strong>
                <p className="text-black/70 mb-4">
                   Para oficializar sua <strong>primeira experiência</strong>, solicitamos um sinal de 30% do valor.
                </p>
                <p className="text-black/70">
                   Após a primeira visita, essa taxa é dispensada. No entanto, em caso de <strong>reagendamento</strong> de um horário já confirmado, será necessário um novo aporte de 30% para a readequação da agenda.
                </p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer id="contato" className="py-24 px-6 bg-white border-t border-black/10">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="font-serif text-4xl md:text-6xl mb-12 uppercase tracking-widest text-black">
            Agende<br/><span className="text-black/30">Agora</span>
          </h2>
          
          <button 
              onClick={() => setIsCartOpen(true)}
              className="inline-flex items-center gap-3 border border-black px-10 py-4 text-xs uppercase tracking-[0.2em] hover:bg-black hover:text-white transition-all duration-500 mb-20"
          >
            <span>Ver Sacola</span>
            <ShoppingBag size={14} />
          </button>
          
          <div className="grid md:grid-cols-3 gap-12 text-[10px] uppercase tracking-[0.2em] font-medium border-t border-black/5 pt-12">
            <div>
              <p className="opacity-40 mb-2">Endereço</p>
              <p>Rua 13 de Maio, 1220</p>
              <p>Alto — Piracicaba</p>
            </div>
            
            <div>
               <p className="opacity-40 mb-2">Social</p>
               <div className="flex justify-center gap-4">
                 <button 
                    onClick={() => window.open('https://instagram.com/agathafdesigns', '_blank')}
                    className="cursor-pointer hover:opacity-50 flex items-center gap-2"
                 >
                    <span className="font-serif italic">@agathafdesigns</span>
                 </button>
               </div>
            </div>

            <div>
              <p className="opacity-40 mb-2">Pagamento</p>
              <p>Pix . Dinheiro . Cartão</p>
            </div>
          </div>

          <div className="mt-20 text-[9px] text-black/20 uppercase tracking-widest">
            &copy; 2026 Agatha Ferneda Studio
          </div>
        </div>
      </footer>
    </div>
  );
};

export default AgathaFernedaVogue;