import { Button } from "@/components/ui/button";
import { PathCard } from "@/components/PathCard";
import { TestimonialCard } from "@/components/TestimonialCard";
import { Heart, Users, Sparkles, CalendarDays } from "lucide-react";
import heroImage from "@/assets/hero-prayer.jpg";
import therapyImage from "@/assets/therapy-serene.jpg";

const Index = () => {
  const scrollToSection = (id: string) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Hero Section */}
      <section 
        className="relative min-h-screen flex items-center justify-center bg-cover bg-center"
        style={{ backgroundImage: `url(${heroImage})` }}
      >
        <div className="absolute inset-0 bg-gradient-to-b from-[#B28B4420] via-[#B28B4410] to-black/50 backdrop-brightness-110" />
        <div className="relative z-10 text-center px-4 sm:px-6 max-w-4xl mx-auto py-12">
          <div className="mb-10 md:mb-12 inline-block">
            <div className="flex items-center justify-center gap-2 md:gap-3">
              <Heart className="w-10 h-10 md:w-12 md:h-12 fill-primary text-primary drop-shadow-[0_2px_8px_rgba(201,111,86,0.5)]" />
              <span className="font-serif text-3xl md:text-4xl font-bold text-white drop-shadow-[0_2px_12px_rgba(0,0,0,0.8)]">
                Essência Curada
              </span>
            </div>
          </div>
          <h1 className="font-serif text-4xl sm:text-5xl md:text-7xl font-bold text-white mb-8 md:mb-10 leading-tight drop-shadow-[0_4px_16px_rgba(0,0,0,0.9)]">
            Restaura a tua essência.
          </h1>
          <p className="text-lg sm:text-xl md:text-2xl text-white mb-14 md:mb-16 font-light drop-shadow-[0_2px_12px_rgba(0,0,0,0.8)]">
            Um espaço de fé, cura e reencontro com Deus.
          </p>
          <Button 
            size="lg"
            onClick={() => scrollToSection('desafio')}
            className="bg-primary hover:bg-secondary text-white text-base md:text-lg px-8 md:px-10 py-5 md:py-6 h-auto rounded-[30px] shadow-2xl hover:shadow-[0_8px_30px_rgba(201,111,86,0.4)] transition-all duration-300 hover:scale-105 font-medium"
          >
            Participa no Desafio de 21 Dias
          </Button>
        </div>
      </section>

      {/* Mission Section */}
      <section className="py-16 md:py-24 px-4 bg-peace-beige">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="font-serif text-3xl md:text-5xl font-bold text-secondary mb-10 md:mb-12">
            A Nossa Missão
          </h2>
          <div className="space-y-6 md:space-y-8 text-base md:text-lg text-muted-foreground leading-relaxed font-poppins">
            <p>
              A Essência Curada nasceu para guiar homens e mulheres num processo de cura interior e restauração espiritual.
            </p>
            <p>
              Cada palavra, oração e desafio é uma semente de esperança plantada no coração de quem deseja reencontrar a sua verdadeira identidade em Cristo.
            </p>
          </div>
        </div>
      </section>

      {/* Paths Section */}
      <section id="desafio" className="py-16 md:py-24 px-4 bg-background">
        <div className="max-w-7xl mx-auto">
          <h2 className="font-serif text-3xl md:text-5xl font-bold text-center text-secondary mb-4 md:mb-6">
            Escolhe o teu próximo passo
          </h2>
          <p className="text-center text-lg md:text-xl text-muted-foreground mb-12 md:mb-16 max-w-2xl mx-auto font-poppins">
            na jornada de restauração
          </p>
          <div className="grid md:grid-cols-3 gap-8">
            <PathCard
              icon={CalendarDays}
              title="Desafio 21 Dias"
              description="Dá o teu primeiro passo rumo à cura interior."
              buttonText="Participar do Desafio"
              onClick={() => alert('Desafio em breve!')}
            />
            <PathCard
              icon={Users}
              title="Comunidade Essência Curada"
              description="Cresce em fé e conexão com pessoas que partilham o mesmo propósito."
              buttonText="Entrar na Comunidade"
              onClick={() => alert('Comunidade em breve!')}
            />
            <PathCard
              icon={Sparkles}
              title="Mentoria Guiada"
              description="Acompanha uma jornada profunda de restauração e ativação da tua identidade em Cristo."
              buttonText="Conhecer a Mentoria"
              onClick={() => alert('Mentoria em breve!')}
            />
          </div>
        </div>
      </section>

      {/* Therapy Section */}
      <section className="py-16 md:py-24 px-4 bg-peace-beige">
        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-8 md:gap-12 items-center">
          <div className="order-2 md:order-1">
            <img 
              src={therapyImage} 
              alt="Terapia e aconselhamento espiritual"
              className="rounded-2xl shadow-2xl w-full h-auto"
            />
          </div>
          <div className="order-1 md:order-2 space-y-5 md:space-y-6">
            <h2 className="font-serif text-3xl md:text-5xl font-bold text-secondary">
              Terapias e Aconselhamento Espiritual
            </h2>
            <p className="text-base md:text-lg text-muted-foreground leading-relaxed font-poppins">
              Sessões de terapia comportamental cristã, individuais ou em grupo, que unem sabedoria emocional e fé.
            </p>
            <p className="text-base md:text-lg text-muted-foreground leading-relaxed font-poppins">
              Um espaço seguro para restaurar o equilíbrio entre mente, coração e espírito.
            </p>
            <Button 
              size="lg"
              className="bg-secondary hover:bg-primary text-white rounded-[30px] px-8 py-5 h-auto text-base md:text-lg font-medium transition-all duration-300 hover:scale-105 shadow-xl hover:shadow-[0_8px_30px_rgba(122,138,106,0.4)] mt-6 md:mt-8"
              onClick={() => alert('Agendamento em breve!')}
            >
              Agendar Sessão
            </Button>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-16 md:py-24 px-4 bg-background">
        <div className="max-w-6xl mx-auto">
          <h2 className="font-serif text-3xl md:text-5xl font-bold text-center text-secondary mb-12 md:mb-16">
            Transformações Reais
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            <TestimonialCard quote="Através da Essência Curada, voltei a sentir Deus." />
            <TestimonialCard quote="Foi o recomeço que eu esperava há anos." />
            <TestimonialCard quote="Senti-me amada, vista e curada." />
          </div>
        </div>
      </section>

      {/* Final CTA Section */}
      <section className="py-16 md:py-24 px-4 bg-gradient-to-br from-primary/10 via-secondary/10 to-accent/10">
        <div className="max-w-4xl mx-auto text-center space-y-6 md:space-y-8">
          <h2 className="font-serif text-3xl md:text-5xl font-bold text-secondary">
            O teu recomeço começa aqui.
          </h2>
          <p className="text-xl md:text-2xl text-muted-foreground font-light italic font-serif">
            "Eis que faço novas todas as coisas."
          </p>
          <p className="text-base md:text-lg text-muted-foreground font-poppins">
            — Apocalipse 21:5
          </p>
          <Button 
            size="lg"
            onClick={() => scrollToSection('desafio')}
            className="bg-accent hover:bg-primary text-white text-base md:text-lg px-8 md:px-10 py-5 md:py-6 h-auto rounded-[30px] shadow-xl hover:shadow-[0_8px_30px_rgba(178,139,68,0.4)] hover:scale-105 transition-all duration-300 font-medium mt-4"
          >
            Quero restaurar a minha essência
          </Button>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-foreground text-background py-12 md:py-16 px-4">
        <div className="max-w-6xl mx-auto text-center space-y-6 md:space-y-8">
          <div className="flex items-center justify-center gap-2 md:gap-3">
            <Heart className="w-7 h-7 md:w-8 md:h-8 fill-primary text-primary" />
            <span className="font-serif text-xl md:text-2xl font-bold">
              Essência Curada
            </span>
          </div>
          <p className="text-background/80 max-w-2xl mx-auto font-poppins text-sm md:text-base">
            Cura interior, reconexão com Deus e recomeço com propósito.
          </p>
          <div className="flex justify-center gap-6 md:gap-8 text-xs md:text-sm font-poppins">
            <a href="#" className="hover:text-primary transition-colors duration-300">Instagram</a>
            <a href="#" className="hover:text-primary transition-colors duration-300">WhatsApp</a>
            <a href="#" className="hover:text-primary transition-colors duration-300">E-mail</a>
          </div>
          <p className="text-xs md:text-sm text-background/60 pt-4 md:pt-6 font-poppins">
            © 2025 Essência Curada – Todos os direitos reservados.
          </p>
        </div>
      </footer>
    </div>
  );
};

export default Index;