import { motion } from "motion/react";
import { ArrowRight, CheckCircle2, Sparkles, Feather, Activity, Target } from "lucide-react";
import { Link } from "react-router-dom";
import SEO from "../components/SEO";

const FADE_UP = {
  hidden: { opacity: 0, y: 40 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
};

const STAGGER = {
  visible: { transition: { staggerChildren: 0.2 } },
};

export default function Home() {
  const schema = {
    "@context": "https://schema.org",
    "@type": "HealthAndBeautyBusiness",
    "name": "Aurora Elite Wellness",
    "image": "https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=2940&auto=format&fit=crop",
    "description": "Mentoria e bem-estar para mulheres que buscam uma vida leve, saudável e sofisticada.",
    "url": "https://aurorawellness.com",
    "priceRange": "$$$"
  };

  return (
    <div className="w-full flex flex-col bg-[#FDFBF7]">
      <SEO 
        title="Aurora Wellness | Elegância e Performance Feminina" 
        description="Mentoria e bem-estar para mulheres que buscam uma vida leve, saudável e sofisticada."
        schema={schema}
      />
      {/* 1. HERO SECTION */}
      <section className="relative min-h-screen flex items-center pt-20 overflow-hidden">
        {/* Background Image with Overlay */}
        <div className="absolute inset-0 w-full z-0 h-full">
          <div className="absolute inset-0 bg-gradient-to-r from-[#FDFBF7] from-30% via-[#FDFBF7]/90 via-60% to-transparent z-10 hidden lg:block"></div>
          <div className="absolute inset-0 bg-[#FDFBF7]/40 z-10"></div>
          <div className="absolute inset-0 bg-gradient-to-t from-[#FDFBF7] from-20% via-[#FDFBF7]/90 via-60% to-transparent z-10 lg:hidden"></div>
          <img
            src="https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=2940&auto=format&fit=crop"
            alt="Elegância e Bem-estar"
            className="w-full h-full object-cover object-[70%_top] opacity-70"
          />
        </div>

        <motion.div
          className="container mx-auto px-6 lg:px-12 flex-1 flex flex-col justify-center relative z-20 mt-12"
          initial="hidden"
          animate="visible"
          variants={STAGGER}
        >
          <motion.div variants={FADE_UP} className="max-w-2xl relative">
            <span className="text-[#D4BAB6] font-medium tracking-[0.2em] text-xs uppercase block mb-6 border-l pl-4 border-[#D4BAB6]">The Aurora Protocol</span>
            <h1 className="text-5xl sm:text-6xl md:text-[90px] lg:text-[110px] leading-[0.9] font-serif tracking-normal text-[#333333] drop-shadow-sm">
              Reencontre<br/><span className="text-[#A3918D] italic">Sua Essência.</span>
            </h1>
            
            <p className="max-w-md text-lg text-[#666666] font-light mt-8 leading-relaxed">
              Transformação profunda e leveza para mulheres que desejam saúde, estética e performance, sem perder a elegância da vida.
            </p>

            <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-6 sm:space-y-0 sm:space-x-8 mt-12">
              <Link
                to="/contato"
                className="w-full sm:w-auto bg-[#D4BAB6] text-white px-8 sm:px-10 py-4 text-[11px] font-medium uppercase tracking-[0.15em] hover:bg-[#C2A19D] transition-all transform hover:scale-[1.02] shadow-[0_10px_30px_rgba(212,186,182,0.3)] rounded-full text-center"
              >
                Inicie Sua Jornada
              </Link>
              <div className="flex items-center space-x-6">
                <div className="flex items-center -space-x-3">
                  <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=100&h=100&fit=crop" alt="Client" className="w-10 h-10 rounded-full border-2 border-[#FDFBF7] z-30" />
                  <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop" alt="Client" className="w-10 h-10 rounded-full border-2 border-[#FDFBF7] z-20" />
                  <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop" alt="Client" className="w-10 h-10 rounded-full border-2 border-[#FDFBF7] z-10" />
                </div>
                <div className="text-[10px] font-medium uppercase tracking-widest text-[#888888] leading-tight">
                  <span className="text-[#333333] text-base font-serif italic block">+200</span>
                  Mulheres Inspiradas
                </div>
              </div>
            </div>
          </motion.div>
        </motion.div>
      </section>

      {/* 2. SERVICES SECTION */}
      <section className="py-32 bg-[#FAF5F0] relative z-10">
         <div className="container mx-auto px-6 lg:px-12 max-w-7xl">
            <motion.div 
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-100px" }}
              variants={STAGGER}
              className="mb-20 text-center max-w-3xl mx-auto"
            >
              <h2 className="text-4xl sm:text-5xl md:text-[70px] leading-[1] font-serif tracking-normal text-[#333333] mb-6">
                Método <span className="text-[#D4BAB6] italic">Aurora</span>
              </h2>
              <p className="text-[#666666] text-lg font-light leading-relaxed">
                Um ecossistema criado para o bem-estar feminino. Cuidamos do seu corpo com a delicadeza e a precisão que ele merece.
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {/* Card 1 */}
              <motion.div variants={FADE_UP} className="bg-white rounded-2xl p-10 flex flex-col items-center text-center shadow-sm border border-[#E8DCC4]/40 hover:shadow-xl transition-all duration-500 group">
                <div className="w-16 h-16 bg-[#FDFBF7] rounded-full flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
                  <Sparkles className="w-6 h-6 text-[#D4BAB6]" strokeWidth={1.5} />
                </div>
                <h3 className="text-2xl font-serif text-[#333333] mb-4">Estética Suave</h3>
                <p className="text-[#666666] font-light text-sm leading-relaxed mb-8 flex-grow">
                  Programas de treino voltados para tonificação, saúde pélvica e fluidez de movimento.
                </p>
              </motion.div>

              {/* Card 2 */}
              <motion.div variants={FADE_UP} className="bg-white rounded-2xl p-10 flex flex-col items-center text-center shadow-sm border border-[#E8DCC4]/40 hover:shadow-xl transition-all duration-500 group">
                <div className="w-16 h-16 bg-[#FDFBF7] rounded-full flex items-center justify-center mb-8 group-hover:scale-110 transition-transform duration-500">
                  <Feather className="w-6 h-6 text-[#D4BAB6]" strokeWidth={1.5} />
                </div>
                <h3 className="text-2xl font-serif text-[#333333] mb-4">Nutrição Leve</h3>
                <p className="text-[#666666] font-light text-sm leading-relaxed mb-8 flex-grow">
                  Sem restrições extremas. Alimentação baseada em intuição, nutrientes e prazer diário.
                </p>
              </motion.div>
              
              {/* Card 3 */}
              <motion.div variants={FADE_UP} className="bg-[#D4BAB6] rounded-2xl p-10 flex flex-col items-center text-center shadow-md transform md:-translate-y-4 hover:shadow-xl transition-all duration-500">
                <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-8">
                  <Target className="w-6 h-6 text-white" strokeWidth={1.5} />
                </div>
                <h3 className="text-2xl font-serif text-white mb-4">Mentoria Premium</h3>
                <p className="text-white/90 font-light text-sm leading-relaxed mb-8 flex-grow">
                  Acompanhamento diário (1:1) com nossa equipe para garantir que sua jornada seja perfeita.
                </p>
                <Link to="/contato" className="bg-white text-[#D4BAB6] rounded-full px-8 py-3 text-[10px] font-medium uppercase tracking-widest hover:bg-[#FDFBF7] transition-colors w-full">
                  Saber Mais
                </Link>
              </motion.div>
            </div>
         </div>
      </section>

      {/* 3. TRANSFORMATIONS SECTION */}
      <section id="historias-reais" className="py-32 bg-[#FDFBF7] relative z-10">
         
         <div className="container mx-auto px-6 lg:px-12 max-w-7xl">
            <motion.div 
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-100px" }}
              variants={STAGGER}
              className="text-center mb-24 max-w-3xl mx-auto"
            >
              <span className="text-[#D4BAB6] font-medium tracking-[0.2em] text-xs uppercase block mb-4">Histórias Reais</span>
              <h2 className="text-4xl sm:text-5xl md:text-[70px] leading-[1] font-serif tracking-normal text-[#333333] mb-6">
                Elegância é se sentir<br/><span className="text-[#A3918D] italic">bem na própria pele.</span>
              </h2>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16">
              {[
                {
                  name: "Carolina Soares",
                  stats: "Descobrindo a confiança após a maternidade.",
                  before: "https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?q=80&w=800&auto=format&fit=crop",
                  after: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=800&auto=format&fit=crop"
                },
                {
                  name: "Mariana Lemos",
                  stats: "Bem-estar, leveza e mais energia para o dia a dia.",
                  before: "https://images.unsplash.com/photo-1542596594-649edbc13630?q=80&w=800&auto=format&fit=crop",
                  after: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=800&auto=format&fit=crop"
                }
              ].map((item, index) => (
                <motion.div 
                  key={index}
                  variants={FADE_UP}
                  initial="hidden"
                  whileInView="visible"
                  viewport={{ once: true }}
                  className="group flex flex-col"
                >
                  <div className="relative aspect-[3/4] sm:aspect-square bg-[#FAF5F0] overflow-hidden rounded-2xl mb-8 flex group-hover:shadow-2xl transition-all duration-700">
                    <div className="w-1/2 h-full relative border-r border-white/50 opacity-90 transition-all duration-700">
                       <span className="absolute top-4 left-4 text-[9px] uppercase font-medium tracking-widest text-[#666666] bg-white/80 backdrop-blur-sm rounded-full px-3 py-1 shadow-sm">Antes</span>
                       <img src={item.before} className="w-full h-full object-cover" alt="Antes" />
                    </div>
                    <div className="w-1/2 h-full relative transition-all duration-700">
                       <span className="absolute top-4 right-4 text-[9px] uppercase font-medium tracking-widest text-white bg-[#D4BAB6]/90 backdrop-blur-sm rounded-full px-3 py-1 shadow-sm z-10">Depois</span>
                       <img src={item.after} className="w-full h-full object-cover" alt="Depois" />
                    </div>
                  </div>
                  <div className="text-center">
                      <h4 className="text-2xl font-serif text-[#333333] mb-2">{item.name}</h4>
                      <p className="text-[#888888] text-sm font-light italic">{item.stats}</p>
                  </div>
                </motion.div>
              ))}
            </div>
         </div>
      </section>

      {/* 3.B TESTIMONIALS SECTION */}
      <section className="py-24 bg-[#E8DCC4]/20 relative z-10 border-t border-[#E8DCC4]/30">
         <div className="container mx-auto px-6 lg:px-12 max-w-5xl">
            <motion.div 
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: "-100px" }}
              variants={STAGGER}
              className="grid grid-cols-1 md:grid-cols-2 gap-12"
            >
              {[
                {
                  quote: "O método não mudou apenas meu corpo, mas a forma como me vejo. Encontrei uma leveza que não sentia há anos.",
                  author: "Juliana T.",
                  role: "Aluna Mentoria Premium"
                },
                {
                  quote: "Finalmente um acompanhamento que entende a rotina da mulher real. Resultados incríveis sem perder o prazer de viver.",
                  author: "Fernanda M.",
                  role: "Aluna Essência"
                }
              ].map((testimonial, index) => (
                <motion.div key={index} variants={FADE_UP} className="bg-white p-10 rounded-2xl shadow-sm border border-[#E8DCC4]/30 relative">
                  <div className="text-6xl text-[#D4BAB6]/30 absolute top-6 left-6 font-serif leading-none">"</div>
                  <p className="text-[#666666] font-light text-lg italic leading-relaxed relative z-10 pt-6 mb-8">
                    {testimonial.quote}
                  </p>
                  <div className="flex items-center gap-4">
                    <div className="w-10 h-10 rounded-full bg-[#FAF5F0] flex items-center justify-center text-[#D4BAB6] font-serif">
                      {testimonial.author.charAt(0)}
                    </div>
                    <div>
                      <h5 className="text-[#333333] font-medium text-sm">{testimonial.author}</h5>
                      <span className="text-[#888888] text-[10px] uppercase tracking-wider">{testimonial.role}</span>
                    </div>
                  </div>
                </motion.div>
              ))}
            </motion.div>
         </div>
      </section>

      {/* 4. PLANS SECTION */}
      <section className="py-32 bg-white relative z-10 border-y border-[#E8DCC4]/30">
        <div className="container mx-auto px-6 lg:px-12 max-w-6xl relative z-10">
          <div className="text-center mb-20">
            <h2 className="text-4xl sm:text-5xl md:text-[70px] leading-[1] font-serif tracking-normal text-[#333333] mb-4">
              Jornadas <span className="text-[#D4BAB6] italic">Exclusivas</span>
            </h2>
            <p className="text-[#666666] max-w-xl mx-auto font-light">Selecione o plano ideal para a sua transformação.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {/* Mensal Card */}
            <motion.div variants={FADE_UP} initial="hidden" whileInView="visible" viewport={{ once: true }} className="bg-[#FDFBF7] border border-[#E8DCC4] rounded-2xl p-10 flex flex-col hover:shadow-xl transition-all duration-500">
              <span className="text-[#D4BAB6] text-[10px] font-medium uppercase tracking-widest mb-4 block">Essência</span>
              <h3 className="text-3xl font-serif text-[#333333] mb-4">Acompanhamento</h3>
              <p className="text-[#666666] text-sm mb-10 font-light leading-relaxed">O início perfeito para construir hábitos contínuos de forma suave.</p>
              
              <div className="mb-10 pb-8 border-b border-[#E8DCC4]/50">
                <span className="text-5xl font-serif text-[#333333]">R$ 497</span>
                <span className="text-[#888888] text-[10px] uppercase font-medium tracking-widest ml-2">/mês</span>
              </div>
              
              <ul className="flex flex-col gap-5 mb-12 flex-grow">
                {[
                  "Treino focado em estética feminina",
                  "Guia nutricional flexível",
                  "Alinhamento mental",
                  "Suporte semanal",
                ].map((feature, i) => (
                  <li key={i} className="flex items-center gap-4 text-[#666666]">
                    <CheckCircle2 className="w-4 h-4 text-[#D4BAB6]" strokeWidth={2} />
                    <span className="text-sm font-light">{feature}</span>
                  </li>
                ))}
              </ul>
              <Link to="/contato" className="w-full text-center px-8 py-4 border border-[#D4BAB6] text-[#D4BAB6] rounded-full text-[11px] font-medium uppercase tracking-widest hover:bg-[#D4BAB6] hover:text-white transition-colors">
                Escolher Essência
              </Link>
            </motion.div>

            {/* Premium Card */}
            <motion.div variants={FADE_UP} initial="hidden" whileInView="visible" viewport={{ once: true }} className="bg-[#D4BAB6] rounded-2xl p-10 flex flex-col relative transform md:-translate-y-4 shadow-2xl z-20">
              <div className="absolute top-0 right-10 bg-white text-[#D4BAB6] text-[9px] font-medium uppercase tracking-widest px-4 py-1.5 rounded-b-lg shadow-sm">
                Mais Desejado
              </div>
              <span className="text-white/80 text-[10px] font-medium uppercase tracking-widest mb-4 block">Plenitude</span>
              <h3 className="text-3xl font-serif text-white mb-4">Mentoria Premium</h3>
              <p className="text-white/90 text-sm mb-10 font-light leading-relaxed">Transformação completa de 3 meses, unindo corpo, mente e rotina.</p>
              
              <div className="mb-10 pb-8 border-b border-white/20">
                <span className="text-5xl font-serif text-white">R$ 1.297</span>
                <span className="text-white/80 text-[10px] uppercase font-medium tracking-widest ml-2">/ciclo</span>
              </div>
              
              <ul className="flex flex-col gap-5 mb-12 flex-grow">
                {[
                  "Tudo do plano Essência",
                  "Dieta personalizada (Nutricionista)",
                  "Acompanhamento diário VIP",
                  "Encontros de mentoria ao vivo",
                  "Material exclusivo mensal",
                ].map((feature, i) => (
                  <li key={i} className="flex items-center gap-4 text-white">
                    <CheckCircle2 className="w-4 h-4 text-white" strokeWidth={2} />
                    <span className="text-sm font-light">{feature}</span>
                  </li>
                ))}
              </ul>
              <Link to="/contato" className="w-full text-center px-8 py-4 bg-white text-[#D4BAB6] rounded-full text-[11px] font-medium uppercase tracking-widest hover:bg-[#FDFBF7] transition-colors shadow-sm">
                Aplicar para Mentoria
              </Link>
            </motion.div>
          </div>
        </div>
      </section>
      
      {/* 5. FINAL CTA SECTION */}
      <section className="py-32 relative overflow-hidden bg-[#FAF5F0] z-10 text-center">
         <div className="container mx-auto px-6 lg:px-12 max-w-4xl relative z-10 flex flex-col items-center">
            <h2 className="text-4xl sm:text-5xl md:text-[80px] font-serif tracking-normal text-[#333333] leading-[1] mb-8">
              Pronta para florescer <br/>
              <span className="text-[#A3918D] italic">sua melhor versão?</span>
            </h2>
            <p className="text-[#666666] font-light text-lg mb-12 max-w-xl">
               Não espere o momento perfeito. Comece hoje a jornada de autocuidado e sofisticação que você merece.
            </p>
            <Link to="/contato" className="bg-[#D4BAB6] text-white px-10 py-5 rounded-full text-[11px] font-medium uppercase tracking-[0.15em] hover:bg-[#C2A19D] transition-transform transform hover:-translate-y-1 shadow-[0_10px_30px_rgba(212,186,182,0.3)] inline-block">
               Agendar Reunião Estratégica
            </Link>
         </div>
      </section>

    </div>
  );
}