'use client';

import { useMemo, useState } from 'react';
import {
  Sparkles,
  Heart,
  BookOpen,
  Mic2,
  UserRound,
  CheckCircle2,
  ArrowRight,
  Star,
  Mail,
  Phone,
  Instagram,
  MapPin,
  Cross,
  X,
} from 'lucide-react';
import StarBackground from '@/components/landing/StarBackground';
import ExperienciasSection from '@/components/landing/Experiencia';


const courses: Course[] = [
  {
    title: '🌸 POSICIONADA — PROGRAMA ONLINE',
    description:
      'Descubra quem você é em Deus, fortaleça sua autoestima à luz da Palavra e caminhe com mais segurança e propósito.',
    fullText: 'Se você sente que algo dentro de você precisa se alinhar, mas ainda não sabe por onde começar, o POSICIONADA — Programa Online é o seu primeiro passo. Essa é uma jornada espiritual pensada para te conduzir de volta ao lugar certo: o coração de Deus. Aqui, você não vai apenas consumir conteúdo, mas entrar em um processo de transformação interior, no seu tempo, com profundidade e intenção. É para você que está cansada de viver altos e baixos espirituais, que sente que precisa se reorganizar por dentro e deseja construir constância na fé. Ao longo dessa jornada, você vai aprender a dominar suas emoções, fortalecer sua fé e permanecer firme, mesmo quando tudo ao redor balança. Sem pressão, sem comparação — apenas um caminho claro para se posicionar.',
  },
  {
    title: '🌿 POSICIONADA — MENTORIA INDIVIDUAL',
    description:
      'Uma jornada de restauração emocional e espiritual para mulheres que desejam viver cura, leveza e realinhamento.',
    fullText: 'Se você sente que não pode mais continuar como está, e que precisa de direção clara, acompanhamento e alinhamento direto, a Mentoria POSICIONADA é para você. Aqui, não se trata apenas de aprender, mas de ser acompanhada. É um espaço onde você será conduzida de forma intencional, olhando para as áreas da sua vida que estão desalinhadas e precisam de ajuste. Essa mentoria é para mulheres que sabem que precisam romper ciclos, que desejam clareza espiritual e emocional, e que não querem mais caminhar sozinhas. É para quem entende que chegou o momento de acelerar o processo e viver uma transformação mais profunda. Aqui, você não fica perdida — você é direcionada, confrontada com amor e conduzida com propósito.',
  },
  {
    title: '🔥 POSICIONADA — IMERSÃO PRESENCIAL (2 DIAS)',
    description:
      'Aprenda a reconhecer o que Deus confiou a você e avance com direção, clareza e maturidade espiritual.',
    fullText: 'Se você sente que precisa de um marco, um ponto de ruptura na sua história, a Imersão POSICIONADA é para você. Durante dois dias, você vai se afastar do externo para se conectar profundamente com Deus. Esse não é apenas um encontro, é um ambiente preparado para transformação real. Um tempo de entrega, renúncia, cura emocional e alinhamento espiritual. Aqui, você não vai apenas ouvir — você vai viver. É para mulheres que estão prontas para um novo nível, que precisam de um recomeço verdadeiro e desejam experimentar a presença de Deus de forma intensa. Dois dias podem reposicionar sua mente, suas emoções e seu propósito. É uma experiência que marca, transforma e ativa uma nova estação.'
  },
];

const benefits = [
  {
    title: 'Fortalecimento espiritual',
    description:
      'Desenvolva uma conexão mais profunda com Deus, fortalecendo sua fé no dia a dia e encontrando direção mesmo nos momentos difíceis.',
  },
  {
    title: 'Cura emocional',
    description:
      'Aprenda a lidar com suas emoções, superar feridas internas e viver com mais leveza, equilíbrio e paz interior.',
  },
  {
    title: 'Clareza de propósito',
    description:
      'Descubra o seu propósito e tenha mais clareza nas suas decisões, alinhando sua vida com aquilo que realmente importa.',
  },
  {
    title: 'Direcionamento pessoal',
    description:
      'Receba orientações práticas para organizar sua vida, tomar decisões melhores e caminhar com mais segurança.',
  },
  {
    title: 'Crescimento na fé',
    description:
      'Evolua espiritualmente de forma consistente, com práticas que fortalecem sua caminhada e sua confiança em Deus.',
  },
  {
    title: 'Acompanhamento sensível e prático',
    description:
      'Tenha suporte acolhedor e direcionamento aplicável à sua rotina, para transformar conhecimento em mudança real.',
  },
];

const mentoringTopics = [
  'Identidade e valor em Deus',
  'Fé e intimidade com o Senhor',
  'Recomeços e cura interior',
  'Direcionamento espiritual',
  'Propósito e chamado',
  'Vida emocional com equilíbrio',
];

const testimonials = [
  {
    name: 'Ana Paula',
    text: 'Os ensinamentos me trouxeram clareza, paz e uma nova forma de enxergar meu valor em Deus.',
  },
  {
    name: 'Mariana',
    text: 'Foi um tempo de cura e realinhamento. Senti acolhimento, verdade e direção em cada etapa.',
  },
  {
    name: 'Letícia',
    text: 'O acompanhamento me ajudou a retomar minha caminhada com fé, esperança e propósito.',
  },
];

function SectionTitle({
  eyebrow,
  title,
  description,
}: {
  eyebrow: string;
  title: string;
  description?: string;
}) {
  return (
    <div className="mx-auto mb-12 max-w-3xl text-center">
      <span className="inline-flex items-center gap-2 rounded-full border border-white/30 bg-white/60 px-4 py-1 text-sm font-medium text-[#b43c74] shadow-sm backdrop-blur">
        
        {eyebrow}
      </span>
      <h2 className="mt-5 text-3xl font-semibold tracking-tight text-[#57152f] md:text-5xl">
        {title}
      </h2>
      {description ? (
        <p className="mt-4 text-base leading-7 text-[#7c4b61] md:text-lg">{description}</p>
      ) : null}
    </div>
  );
}

type Course = {
  title: string;
  description: string;
  fullText: string;
};

export default function CamilaBordoniLandingPage() {
  const [courseForm, setCourseForm] = useState({ name: '', email: '' });
  const [invitationForm, setInvitationForm] = useState({
    name: '',
    institution: '',
    city: '',
    date: '',
    message: '',
  });
  const [mentoringForm, setMentoringForm] = useState({
    name: '',
    email: '',
    whatsapp: '',
    message: '',
  });

  const year = useMemo(() => new Date().getFullYear(), []);
  const [selectedCourse, setSelectedCourse] = useState<Course | null>(null);

  const handleSendToWhatsApp = () => {
    const { name, institution, city, date, message } = invitationForm;

    const texto = `
Olá! Gostaria de solicitar um convite para ministração.

👤 Nome: ${name}
⛪ Igreja/Instituição: ${institution}
📍 Cidade: ${city}
📅 Data do evento: ${date}

📝 Sobre o evento:
${message}
  `;

    const url = `https://wa.me/5531990778713?text=${encodeURIComponent(texto)}`;

    window.open(url, "_blank");
  };

  const handleCourseWhatsApp = () => {
    const { name } = courseForm;

    if (!name) {
      alert("Por favor, preencha seu nome.");
      return;
    }

    const texto = `Olá! Me chamo ${name} e gostaria de ter mais informações sobre os cursos. Pode me ajudar?`;

    const url = `https://wa.me/5531990778713?text=${encodeURIComponent(texto)}`;

    window.open(url, "_blank");
  };

  const handleMentoringWhatsApp = () => {
    const { name, email, whatsapp, message } = mentoringForm;

    if (!name || !whatsapp) {
      alert("Preencha pelo menos seu nome e WhatsApp.");
      return;
    }

    const texto = `
Olá! Gostaria de solicitar um acompanhamento 1 a 1.

👤 Nome: ${name}
📧 E-mail: ${email}
📱 WhatsApp: ${whatsapp}

🧠 Objetivo com o acompanhamento:
${message}
  `;

    const url = `https://wa.me/5531990778713?text=${encodeURIComponent(texto)}`;

    window.open(url, "_blank");
  };

  return (
    <main className="min-h-screen overflow-hidden bg-[#fff7fb] text-[#4a1830]">
      <StarBackground />
      <div className="fixed inset-0 -z-10 bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.95),_rgba(248,200,220,0.5),_rgba(255,244,248,0.9))]" />
      <div className="fixed inset-0 -z-10 opacity-60 [background-image:radial-gradient(circle_at_20%_20%,rgba(232,93,158,0.12),transparent_22%),radial-gradient(circle_at_80%_10%,rgba(216,177,106,0.12),transparent_18%),radial-gradient(circle_at_50%_80%,rgba(196,61,122,0.10),transparent_24%)]" />

      <header className="sticky top-0 z-50 border-b border-white/30 bg-white/60 backdrop-blur-xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8">
          <a href="#inicio" className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-[#e85d9e] to-[#c43d7a] text-white shadow-lg shadow-pink-200/60">
              <Heart className="h-5 w-5" />
            </div>
            <div>
              <p className="text-sm font-medium uppercase tracking-[0.24em] text-[#b43c74]">Camila Bordoni</p>
              <p className="text-xs text-[#8e6074]">Autora • Mentora • Ministra</p>
            </div>
          </a>

          <nav className="hidden items-center gap-8 lg:flex">
            <a href="#sobre" className="text-sm font-medium text-[#7a445e] transition hover:text-[#c43d7a]">Sobre</a>
            <a href="#cursos" className="text-sm font-medium text-[#7a445e] transition hover:text-[#c43d7a]">Cursos</a>
            <a href="#ministracoes" className="text-sm font-medium text-[#7a445e] transition hover:text-[#c43d7a]">Ministrações</a>
            <a href="#acompanhamento" className="text-sm font-medium text-[#7a445e] transition hover:text-[#c43d7a]">1 a 1</a>
            <a
              href="#contato"
              className="rounded-full bg-gradient-to-r from-[#e85d9e] to-[#c43d7a] px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-pink-200/70 transition hover:scale-[1.02]"
            >
              Fale com a equipe
            </a>
          </nav>
        </div>
      </header>

      <div className='relative z-10'>


        <section id="inicio" className="relative">
          <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 py-20 lg:grid-cols-[1.12fr_0.88fr] lg:px-8 lg:py-28">
            <div>
              <div className="inline-flex items-center gap-2 rounded-full border border-[#efbfd4] bg-white/70 px-4 py-2 text-sm font-medium text-[#b43c74] shadow-sm backdrop-blur">
                <Cross className="h-4 w-4" />
                Fé, cura, identidade e propósito
              </div>

              <h1 className="mt-6 max-w-3xl text-4xl font-semibold leading-tight tracking-tight text-[#56172f] md:text-6xl">
                Desperte seu propósito, fortaleça sua fé e transforme sua caminhada.
              </h1>

              <p className="mt-6 max-w-2xl text-lg leading-8 text-[#7a4a61] md:text-xl">
                Cursos, ministrações e acompanhamento cristão para mulheres que desejam viver com mais direção, cura,
                identidade e intimidade com Deus.
              </p>

              <div className="mt-8 flex flex-col gap-4 sm:flex-row">
                <a
                  href="#cursos"
                  className="inline-flex items-center justify-center gap-2 rounded-full bg-gradient-to-r from-[#e85d9e] to-[#c43d7a] px-7 py-4 text-base font-semibold text-white shadow-xl shadow-pink-200/70 transition hover:scale-[1.02]"
                >
                  Quero conhecer os cursos
                  <ArrowRight className="h-4 w-4" />
                </a>
                <a
                  href="#acompanhamento"
                  className="inline-flex items-center justify-center rounded-full border border-[#efbfd4] bg-white/80 px-7 py-4 text-base font-semibold text-[#b43c74] shadow-sm backdrop-blur transition hover:border-[#e85d9e] hover:text-[#c43d7a]"
                >
                  Agendar acompanhamento 1:1
                </a>
              </div>

              <div className="mt-10 grid gap-4 sm:grid-cols-3">
                {['Conteúdo transformador', 'Convites para ministrações', 'Acompanhamento individual'].map((item) => (
                  <div
                    key={item}
                    className="rounded-3xl border border-white/40 bg-white/65 p-4 text-sm font-medium text-[#7c4b61] shadow-lg shadow-pink-100/40 backdrop-blur"
                  >
                    {item}
                  </div>
                ))}
              </div>
            </div>

            <div className="relative">
              <div className="absolute -left-8 top-10 h-24 w-24 rounded-full bg-[#f8c8dc]/70 blur-2xl" />
              <div className="absolute -right-8 bottom-10 h-24 w-24 rounded-full bg-[#d8b16a]/30 blur-2xl" />

              <div className="relative overflow-hidden rounded-[2rem] border border-white/50 bg-white/65 p-4 shadow-2xl shadow-pink-100/50 backdrop-blur-xl">
                <div className="relative overflow-hidden rounded-[1.6rem] bg-gradient-to-br from-[#ffd9e8] via-[#fff4f8] to-[#f7d6e5] p-5">
                  <div className="absolute inset-0 opacity-50 [background-image:radial-gradient(circle_at_20%_20%,rgba(255,255,255,0.8),transparent_20%),radial-gradient(circle_at_80%_10%,rgba(232,93,158,0.12),transparent_18%),radial-gradient(circle_at_50%_90%,rgba(216,177,106,0.12),transparent_20%)]" />

                  <div className="relative rounded-[1.5rem] border border-white/60 bg-white/70 p-6 backdrop-blur">
                    <div className="flex items-center justify-between gap-4">
                      <div>
                        <p className="text-sm uppercase tracking-[0.28em] text-[#b43c74]">Autora</p>
                        <h3 className="mt-2 text-2xl font-semibold text-[#57152f]">Camila Bordoni</h3>
                        <p className="mt-2 text-sm leading-6 text-[#7c4b61]">
                          Uma jornada de fé, acolhimento e transformação para mulheres que desejam florescer em Deus.
                        </p>
                      </div>
                      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[#e85d9e] to-[#c43d7a] text-white shadow-lg">
                        {/* <Sparkles className="h-7 w-7" /> */}
                      </div>
                    </div>

                    <div className="mt-6 grid gap-3">
                      {['Cursos online', 'Eventos e ministrações', 'Mentoria 1 a 1'].map((feature) => (
                        <div
                          key={feature}
                          className="flex items-center gap-3 rounded-2xl border border-white/50 bg-white/80 px-4 py-3 text-sm text-[#72455b]"
                        >
                          <CheckCircle2 className="h-4 w-4 text-[#c43d7a]" />
                          {feature}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="px-6 py-20 lg:px-8">
          <div className="mx-auto max-w-7xl grid gap-10 lg:grid-cols-[1.1fr_0.9fr] items-center">
            <div>
              <span className="inline-flex rounded-full bg-[#fff0f6] px-4 py-2 text-sm font-medium text-[#b43c74]">
                Conheça o curso
              </span>
              <h2 className="mt-5 text-3xl md:text-5xl font-semibold text-[#57152f]">
                Posicionada - Uma jornada preparada para transformar sua vida espiritual
              </h2>
              <p className="mt-5 text-[#7a4a61] leading-8">
                Este curso foi desenvolvido para mulheres que desejam viver uma transformação profunda em Deus, alinhando identidade, fé e propósito.
              </p>

              <div className="mt-6 space-y-3">
                {[
                  'Conteúdo prático e espiritual',
                  'Aplicação no dia a dia',
                  'Direcionamento com base na Palavra',
                ].map((item) => (
                  <div key={item} className="flex items-center gap-3 text-[#72455b]">
                    <CheckCircle2 className="h-5 w-5 text-[#c43d7a]" />
                    {item}
                  </div>
                ))}
              </div>

              <a
                href="https://go.hotmart.com/F104693551R"
                target='_blank'
                className="mt-8 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-[#e85d9e] to-[#c43d7a] px-7 py-4 text-sm font-semibold text-white shadow-lg shadow-pink-200/70"
              >
                Acessar curso
                <ArrowRight className="h-4 w-4" />
              </a>
            </div>

            <div className="relative">
              <div className="absolute -z-10 inset-0 blur-2xl bg-[#f8c8dc]/40 rounded-full" />
              <div className="rounded-[2rem] overflow-hidden border border-white/40 bg-white/70 p-3 shadow-xl">
                <img
                  src="/camila.jpg"
                  alt="Camila Bordoni"
                  className="w-full h-full object-cover rounded-[1.5rem]"
                />
              </div>
            </div>
          </div>
        </section>

        <section id="sobre" className="px-6 py-20 lg:px-8">
          <div className="mx-auto max-w-7xl">
            <SectionTitle
              eyebrow="Sobre a autora"
              title="Uma voz feminina, sensível e firme para edificar vidas"
              description="Apresente aqui a história da Camila Bordoni, sua missão, sua trajetória no ministério e como sua mensagem tem alcançado mulheres com fé, cura e propósito."
            />

            <div className="grid gap-6 lg:grid-cols-[1fr_1.1fr]">
              <div className="rounded-[2rem] border border-white/40 bg-white/70 p-8 shadow-xl shadow-pink-100/40 backdrop-blur">
                <div className="inline-flex rounded-full bg-[#fff0f6] px-4 py-2 text-sm font-medium text-[#b43c74]">
                  Camila Bordoni
                </div>
                <h3 className="mt-5 text-3xl font-semibold text-[#57152f]">Autora, mentora e ministra cristã</h3>
                <div className='flex'>
                  <div>
                    <p className="mt-5 leading-8 text-[#7a4a61]">
                      Camila Bordoni é dedicada a edificar vidas por meio da Palavra, do ensino e do acompanhamento espiritual.
                      Sua missão é ajudar mulheres a desenvolverem identidade, maturidade emocional e profundidade em Deus,
                      por meio de conteúdos práticos, sensíveis e transformadores.
                    </p>
                    <p className="mt-4 leading-8 text-[#7a4a61]">
                      Esta seção foi preparada para que você personalize com a biografia real da autora, testemunho, livros,
                      participações e qualquer evidência de autoridade que fortaleça a confiança do público.
                    </p>
                  </div>

                  {/* <div className="relative ">
                    <div className="absolute -z-10 inset-0 blur-2xl bg-[#f8c8dc]/40 rounded-full" />
                    <div className="rounded-[2rem] overflow-hidden border border-white/40 bg-white/70 p-3 shadow-xl">
                      <img
                        src="/camila2.jpg"
                        alt="Camila Bordoni"
                        className="w-[0%] h-full object-cover rounded-[1.5rem]"
                      />
                    </div>
                  </div> */}
                </div>
              </div>



              <div className="grid gap-5 md:grid-cols-2">
                {[
                  { title: 'Fé', icon: Cross, text: 'Uma caminhada enraizada na Palavra e na presença de Deus.' },
                  { title: 'Cura', icon: Heart, text: 'Um espaço de acolhimento, restauração e sensibilidade.' },
                  { title: 'Identidade', icon: Star, text: 'Direção para viver quem Deus chamou você para ser.' },
                  { title: 'Propósito', icon: BookOpen, text: 'Clareza para avançar com coragem, verdade e missão.' },
                ].map(({ title, icon: Icon, text }) => (
                  <div
                    key={title}
                    className="rounded-[2rem] border border-white/40 bg-white/65 p-6 shadow-lg shadow-pink-100/30 backdrop-blur"
                  >
                    <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-gradient-to-br from-[#e85d9e] to-[#c43d7a] text-white shadow-md">
                      <Icon className="h-5 w-5" />
                    </div>
                    <h4 className="mt-5 text-xl font-semibold text-[#57152f]">{title}</h4>
                    <p className="mt-3 leading-7 text-[#7a4a61]">{text}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <ExperienciasSection />

        <section id="cursos" className="px-6 py-20 lg:px-8">
          <div className="mx-auto max-w-7xl">
            <SectionTitle
              eyebrow="Cursos"
              title="Cursos para fortalecer sua vida espiritual e emocional"
              description="Um caminho de crescimento interior, fé e equilíbrio."
            />

            <div className="grid gap-6 lg:grid-cols-3">
              {courses.map((course) => (
                <div
                  key={course.title}
                  className="group rounded-[2rem] border border-white/40 bg-white/70 p-7 shadow-xl shadow-pink-100/40 backdrop-blur transition duration-300 hover:-translate-y-1 hover:shadow-2xl"
                >
                  <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-[#f8c8dc] to-[#e85d9e] text-white shadow-md">
                    <BookOpen className="h-6 w-6" />
                  </div>
                  <h3 className="mt-6 text-2xl font-semibold text-[#57152f]">{course.title}</h3>
                  <p className="mt-4 leading-8 text-[#7a4a61]">{course.description}</p>
                  <button
                    type="button"
                    onClick={() => setSelectedCourse(course)}
                    className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-[#c43d7a] transition hover:gap-3"
                  >
                    Quero saber mais
                    <ArrowRight className="h-4 w-4" />
                  </button>
                </div>
              ))}
            </div>

            {selectedCourse && (
              <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#2b1020]/60 p-4 backdrop-blur-sm">
                <div className="relative w-full max-w-2xl rounded-[2rem] border border-white/30 bg-white/90 p-8 shadow-2xl shadow-pink-200/40 backdrop-blur-xl animate-in fade-in zoom-in-95 duration-300">
                  <button
                    type="button"
                    onClick={() => setSelectedCourse(null)}
                    className="absolute right-4 top-4 flex h-10 w-10 items-center justify-center rounded-full bg-[#fce4ee] text-[#a12f62] transition hover:scale-105 hover:bg-[#f8d3e2]"
                  >
                    <X className="h-5 w-5" />
                  </button>

                  <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-[#f8c8dc] to-[#e85d9e] text-white shadow-md">
                    <BookOpen className="h-7 w-7" />
                  </div>

                  <h3 className="mt-6 text-3xl font-bold text-[#57152f]">
                    {selectedCourse.title}
                  </h3>

                  <p className="mt-5 leading-8 text-[#7a4a61]">
                    {selectedCourse.fullText}
                  </p>

                  <div className="mt-8">
                    <a
                      href={`https://wa.me/5531990778713?text=${encodeURIComponent(
                        `Olá, quero vivenciar o curso "${selectedCourse.title}". Pode me passar mais informações?`
                      )}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      onClick={() => setSelectedCourse(null)}
                      className="inline-flex items-center justify-center rounded-2xl bg-gradient-to-r from-[#e85d9e] to-[#c43d7a] px-6 py-3 font-semibold text-white shadow-lg shadow-pink-200 transition hover:scale-[1.02]"
                    >
                      Quero me inscrever
                    </a>
                  </div>
                </div>
              </div>
            )}

            <div
              id="captacao-cursos"
              className="mt-10 rounded-[2rem] border border-white/40 bg-gradient-to-r from-white/70 to-[#fff0f6] p-8 shadow-xl shadow-pink-100/40 backdrop-blur"
            >
              <div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
                <div>
                  <h3 className="text-3xl font-semibold text-[#57152f]">Comece sua jornada com os cursos da Camila</h3>
                  <p className="mt-4 max-w-2xl leading-8 text-[#7a4a61]">
                    Vamos começar essa jornada maravilhosa ? em caso de dúvidas, você pode me mandar uma mensagem preenchendo seu nome a seguir.
                  </p>
                </div>

                <form className="grid gap-4 rounded-[1.75rem] border border-white/50 bg-white/85 p-5">
                  <input
                    type="text"
                    placeholder="Seu nome"
                    value={courseForm.name}
                    onChange={(e) => setCourseForm((prev) => ({ ...prev, name: e.target.value }))}
                    className="h-12 rounded-2xl border border-[#f2d3e0] bg-white px-4 text-sm outline-none transition focus:border-[#e85d9e]"
                  />

                  <button
                    type="button"
                    onClick={handleCourseWhatsApp}
                    className="rounded-2xl bg-gradient-to-r from-[#e85d9e] to-[#c43d7a] px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-pink-200/70 hover:scale-[1.02] transition"
                  >
                    Quero receber as informações
                  </button>
                </form>
              </div>
            </div>
          </div>
        </section>

        <section className="px-6 py-20 lg:px-8">
          <div className="mx-auto max-w-7xl rounded-[2.5rem] border border-white/40 bg-white/65 p-8 shadow-2xl shadow-pink-100/40 backdrop-blur md:p-12">
            <SectionTitle
              eyebrow="Transformação"
              title="Mais do que conteúdo, uma experiência de cuidado e realinhamento"
              description="Mais do que aprender, é viver uma transformação real de dentro para fora."
            />

            <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
              {benefits.map((item,index) => (
                <div
                  key={index}
                  className="flex items-start gap-4 rounded-[1.75rem] border border-white/50 bg-white/85 p-5"
                >
                  <div className="mt-1 flex h-10 w-10 items-center justify-center rounded-xl bg-[#fff0f6] text-[#c43d7a]">
                    <CheckCircle2 className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-[#57152f]">{item.title}</h3>
                    <p className="mt-2 text-sm leading-7 text-[#7a4a61]">
                     {item.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="ministracoes" className="px-6 py-20 lg:px-8">
          <div className="mx-auto max-w-7xl">
            <SectionTitle
              eyebrow="Convide para ministrações"
              title="Leve uma mensagem de fé, cura e propósito para o seu evento"
              description="Uma área institucional e acolhedora para receber convites de igrejas, conferências, retiros e encontros femininos."
            />

            <div className="grid gap-8 lg:grid-cols-[1fr_1fr]">
              <div className="rounded-[2rem] border border-white/40 bg-white/70 p-8 shadow-xl shadow-pink-100/40 backdrop-blur">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-[#e85d9e] to-[#c43d7a] text-white shadow-md">
                  <Mic2 className="h-6 w-6" />
                </div>
                <h3 className="mt-6 text-3xl font-semibold text-[#57152f]">Convites para ministrações</h3>
                <p className="mt-4 leading-8 text-[#7a4a61]">
                  Se você deseja levar uma mensagem de fé, cura, identidade e propósito para sua igreja, conferência,
                  retiro, congresso de mulheres ou evento especial, esta área pode ser usada para apresentar a Camila
                  Bordoni e abrir o contato de forma profissional.
                </p>

                <div className="mt-6 grid gap-3">
                  {['Igrejas', 'Conferências', 'Retiros', 'Congressos de mulheres', 'Encontros especiais', 'Eventos online e presenciais'].map((item) => (
                    <div key={item} className="rounded-2xl border border-white/50 bg-white/85 px-4 py-3 text-sm text-[#72455b]">
                      {item}
                    </div>
                  ))}
                </div>
              </div>

              <form className="grid gap-4 rounded-[2rem] border border-white/40 bg-white/80 p-8 shadow-xl shadow-pink-100/40 backdrop-blur">
                <input
                  type="text"
                  placeholder="Seu nome"
                  value={invitationForm.name}
                  onChange={(e) => setInvitationForm((prev) => ({ ...prev, name: e.target.value }))}
                  className="h-12 rounded-2xl border border-[#f2d3e0] bg-white px-4 text-sm outline-none transition focus:border-[#e85d9e]"
                />
                <input
                  type="text"
                  placeholder="Igreja ou instituição"
                  value={invitationForm.institution}
                  onChange={(e) => setInvitationForm((prev) => ({ ...prev, institution: e.target.value }))}
                  className="h-12 rounded-2xl border border-[#f2d3e0] bg-white px-4 text-sm outline-none transition focus:border-[#e85d9e]"
                />
                <input
                  type="text"
                  placeholder="Cidade"
                  value={invitationForm.city}
                  onChange={(e) => setInvitationForm((prev) => ({ ...prev, city: e.target.value }))}
                  className="h-12 rounded-2xl border border-[#f2d3e0] bg-white px-4 text-sm outline-none transition focus:border-[#e85d9e]"
                />
                <input
                  type="date"
                  value={invitationForm.date}
                  onChange={(e) => setInvitationForm((prev) => ({ ...prev, date: e.target.value }))}
                  className="h-12 rounded-2xl border border-[#f2d3e0] bg-white px-4 text-sm outline-none transition focus:border-[#e85d9e]"
                />
                <textarea
                  placeholder="Conte um pouco sobre o evento"
                  rows={5}
                  value={invitationForm.message}
                  onChange={(e) => setInvitationForm((prev) => ({ ...prev, message: e.target.value }))}
                  className="rounded-2xl border border-[#f2d3e0] bg-white px-4 py-3 text-sm outline-none transition focus:border-[#e85d9e]"
                />
                <button
                  type="button"
                  onClick={handleSendToWhatsApp}
                  className="rounded-2xl bg-gradient-to-r from-[#e85d9e] to-[#c43d7a] px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-pink-200/70 hover:scale-[1.02] transition"
                >
                  Solicitar convite para ministração
                </button>
              </form>
            </div>
          </div>
        </section>

        <section id="acompanhamento" className="px-6 py-20 lg:px-8">
          <div className="mx-auto max-w-7xl">
            <SectionTitle
              eyebrow="Acompanhamento 1 a 1"
              title="Um espaço de cuidado, escuta e direcionamento mais próximo"
              description="Pensado para quem deseja uma jornada individual com mais profundidade, apoio espiritual e acompanhamento sensível."
            />

            <div className="grid gap-8 lg:grid-cols-[1fr_0.95fr]">
              <div className="rounded-[2rem] border border-white/40 bg-white/70 p-8 shadow-xl shadow-pink-100/40 backdrop-blur">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-[#e85d9e] to-[#c43d7a] text-white shadow-md">
                  <UserRound className="h-6 w-6" />
                </div>
                <h3 className="mt-6 text-3xl font-semibold text-[#57152f]">Deseja um acompanhamento com a autora?</h3>
                <p className="mt-4 leading-8 text-[#7a4a61]">
                  Para quem busca uma caminhada mais próxima, com direcionamento, escuta, aconselhamento e apoio espiritual
                  individual, o acompanhamento 1 a 1 com Camila Bordoni foi pensado para oferecer um espaço de cuidado,
                  alinhamento e crescimento.
                </p>

                <div className="mt-8 grid gap-3 sm:grid-cols-2">
                  {mentoringTopics.map((topic) => (
                    <div key={topic} className="rounded-2xl border border-white/50 bg-white/85 px-4 py-3 text-sm text-[#72455b]">
                      {topic}
                    </div>
                  ))}
                </div>
              </div>

              <form className="grid gap-4 rounded-[2rem] border border-white/40 bg-white/80 p-8 shadow-xl shadow-pink-100/40 backdrop-blur">
                <input
                  type="text"
                  placeholder="Seu nome"
                  value={mentoringForm.name}
                  onChange={(e) => setMentoringForm((prev) => ({ ...prev, name: e.target.value }))}
                  className="h-12 rounded-2xl border border-[#f2d3e0] bg-white px-4 text-sm outline-none transition focus:border-[#e85d9e]"
                />
                <input
                  type="email"
                  placeholder="Seu melhor e-mail"
                  value={mentoringForm.email}
                  onChange={(e) => setMentoringForm((prev) => ({ ...prev, email: e.target.value }))}
                  className="h-12 rounded-2xl border border-[#f2d3e0] bg-white px-4 text-sm outline-none transition focus:border-[#e85d9e]"
                />
                <input
                  type="text"
                  placeholder="WhatsApp"
                  value={mentoringForm.whatsapp}
                  onChange={(e) => setMentoringForm((prev) => ({ ...prev, whatsapp: e.target.value }))}
                  className="h-12 rounded-2xl border border-[#f2d3e0] bg-white px-4 text-sm outline-none transition focus:border-[#e85d9e]"
                />
                <textarea
                  placeholder="Conte um pouco sobre o que você está buscando nesse acompanhamento"
                  rows={5}
                  value={mentoringForm.message}
                  onChange={(e) => setMentoringForm((prev) => ({ ...prev, message: e.target.value }))}
                  className="rounded-2xl border border-[#f2d3e0] bg-white px-4 py-3 text-sm outline-none transition focus:border-[#e85d9e]"
                />
                <button
                  type="button"
                  onClick={handleMentoringWhatsApp}
                  className="rounded-2xl bg-gradient-to-r from-[#e85d9e] to-[#c43d7a] px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-pink-200/70 hover:scale-[1.02] transition"
                >
                  Quero solicitar meu acompanhamento
                </button>
              </form>
            </div>
          </div>
        </section>

        {/* <section className="px-6 py-20 lg:px-8">
          <div className="mx-auto max-w-7xl">
            <SectionTitle
              eyebrow="Depoimentos"
              title="Vidas impactadas por uma jornada de fé e transformação"
              description="Use esta seção para inserir depoimentos reais de alunas, leitoras e mulheres alcançadas pelo ministério da Camila Bordoni."
            />

            <div className="grid gap-6 lg:grid-cols-3">
              {testimonials.map((item) => (
                <div
                  key={item.name}
                  className="rounded-[2rem] border border-white/40 bg-white/70 p-7 shadow-xl shadow-pink-100/40 backdrop-blur"
                >
                  <div className="flex items-center gap-1 text-[#d8b16a]">
                    {Array.from({ length: 5 }).map((_, index) => (
                      <Star key={index} className="h-4 w-4 fill-current" />
                    ))}
                  </div>
                  <p className="mt-5 leading-8 text-[#7a4a61]">“{item.text}”</p>
                  <p className="mt-6 text-sm font-semibold uppercase tracking-[0.18em] text-[#b43c74]">{item.name}</p>
                </div>
              ))}
            </div>
          </div>
        </section> */}

        <section className="px-6 pb-20 pt-8 lg:px-8">
          <div className="mx-auto max-w-7xl overflow-hidden rounded-[2.5rem] border border-white/40 bg-gradient-to-r from-[#fff0f6] via-white/80 to-[#ffe3ef] p-8 shadow-2xl shadow-pink-100/50 backdrop-blur md:p-12">
            <div className="grid gap-8 lg:grid-cols-[1fr_auto] lg:items-center">
              <div>
                <span className="inline-flex rounded-full border border-white/60 bg-white/70 px-4 py-2 text-sm font-medium text-[#b43c74]">
                  Seu próximo passo começa aqui
                </span>
                <h2 className="mt-5 text-3xl font-semibold text-[#57152f] md:text-5xl">
                  Seja por meio dos cursos, de uma ministração ou de um acompanhamento, existe um novo tempo esperando por você.
                </h2>
              </div>
              <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
                <a
                  href="#cursos"
                  className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#e85d9e] to-[#c43d7a] px-7 py-4 text-sm font-semibold text-white shadow-lg shadow-pink-200/70"
                >
                  Acessar cursos
                </a>
                <a
                  href="#ministracoes"
                  className="inline-flex items-center justify-center rounded-full border border-[#efbfd4] bg-white/80 px-7 py-4 text-sm font-semibold text-[#b43c74]"
                >
                  Convidar para ministrar
                </a>
                <a
                  href="#acompanhamento"
                  className="inline-flex items-center justify-center rounded-full border border-[#efbfd4] bg-white/80 px-7 py-4 text-sm font-semibold text-[#b43c74]"
                >
                  Solicitar 1:1
                </a>
              </div>
            </div>
          </div>
        </section>

      </div >


      <footer id="contato" className="border-t border-white/30 bg-white/60 px-6 py-12 backdrop-blur lg:px-8">
        <div className="mx-auto grid max-w-7xl gap-8 md:grid-cols-2 lg:grid-cols-4">
          <div>
            <div className="flex items-center gap-3">
              <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-[#e85d9e] to-[#c43d7a] text-white shadow-lg">
                <Heart className="h-5 w-5" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-[#57152f]">Camila Bordoni</h3>
                <p className="text-sm text-[#7a4a61]">Autora • Mentora • Ministra</p>
              </div>
            </div>
            <p className="mt-4 text-sm leading-7 text-[#7a4a61]">
              Desperte seu propósito, fortaleça sua fé e transforme sua caminhada.
            </p>
          </div>

          <div>
            <h4 className="text-sm font-semibold uppercase tracking-[0.18em] text-[#b43c74]">Links rápidos</h4>
            <div className="mt-4 grid gap-3 text-sm text-[#7a4a61]">
              <a href="#sobre">Sobre</a>
              <a href="#cursos">Cursos</a>
              <a href="#ministracoes">Ministrações</a>
              <a href="#acompanhamento">Acompanhamento 1 a 1</a>
            </div>
          </div>

          <div>
            <h4 className="text-sm font-semibold uppercase tracking-[0.18em] text-[#b43c74]">Contato</h4>
            <div className="mt-4 grid gap-3 text-sm text-[#7a4a61]">

              <p className="flex items-center gap-2"><Phone className="h-4 w-4" /> +55 (31) 9 9077-8713</p>
              <p className="flex items-center gap-2"><Instagram className="h-4 w-4" /> @bordonicamila</p>
              <p className="flex items-center gap-2"><MapPin className="h-4 w-4" /> Brasil</p>
            </div>
          </div>

          <div>
            <h4 className="text-sm font-semibold uppercase tracking-[0.18em] text-[#b43c74]">Mensagem final</h4>
            <p className="mt-4 text-sm leading-7 text-[#7a4a61]">
              “Há um tempo preparado por Deus para florescer, amadurecer e viver aquilo que Ele sonhou para você.”
            </p>
          </div>
        </div>

        <div className="mx-auto mt-10 max-w-7xl border-t border-white/30 pt-6 text-center text-sm text-[#8e6074]">
          © {year} Camila Bordoni. Todos os direitos reservados.
        </div>
      </footer>
    </main >
  );
}