/*  1️⃣ Vamos criar sua página  
de vendas em minutos com base nos
 maiores especialistas do ramo */ 

/* 2️⃣ Copie tudo isso aqui que 
é a página de vendas
com esses comentários */

/* 3️⃣ Vá em v0.dev e 
cole esse código e 
aperte para criar */

import Image from 'next/image'
import { CheckCircle, Clock, Book, Users, Zap, ArrowRight, Shield, Video } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <Header />
      <main className="container mx-auto px-4 py-16 space-y-24">
        <Introduction />
        <VideoSection />
        <CallToAction />
        <SocialProof />
        <CourseStructure />
        <AdditionalBenefits />
        <Motivation />
        <FAQ />
        <CreatorBio />
        <CallToAction />
      </main>
      <Footer />
    </div>
  )
}

function Header() {
  return (
    <header className="border-b border-border">
      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
        <h1 className="text-xl font-semibold">Título do Produto/Empresa</h1>
        <Button variant="outline">CTA Secundário</Button>
      </div>
    </header>
  )
}

function Introduction() {
  const benefits = [
    "Benefício 1: Descreva um resultado específico",
    "Benefício 2: Foque em resolver uma dor do cliente",
    "Benefício 3: Use linguagem que ressoe com o público-alvo",
    "Benefício 4: Seja específico e mensurável se possível",
    "Benefício 5: Destaque o que diferencia seu produto",
    "Benefício 6: Aborde objeções comuns aqui",
    "Benefício 7: Mencione economia de tempo ou dinheiro",
    "Benefício 8: Fale sobre facilidade de uso ou implementação",
    "Benefício 9: Inclua qualquer garantia ou suporte oferecido",
    "Benefício 10: Termine com um benefício emocional forte"
  ]

  return (
    <section className="text-center space-y-8 py-16">
      <h1 className="text-4xl md:text-5xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600 leading-tight">
        Título Principal: Promessa de Valor<br />Use 2-3 Linhas para Maior Impacto<br />Foque no Resultado Desejado
      </h1>
      <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
        Subtítulo: Expanda a promessa de valor. Mencione o problema que seu produto resolve e o resultado desejado. Use números para aumentar a credibilidade.
      </p>
      <div className="flex justify-center space-x-4">
        <Button size="lg" className="text-lg py-6 px-8 bg-gradient-to-r from-primary to-purple-600 hover:from-primary/80 hover:to-purple-600/80">
          CTA Principal
        </Button>
        <Button size="lg" variant="outline" className="text-lg py-6 px-8">
          CTA Secundário
        </Button>
      </div>
      <div className="grid md:grid-cols-2 gap-4 text-left max-w-4xl mx-auto mt-12">
        {benefits.map((benefit, index) => (
          <div key={index} className="flex items-start">
            <CheckCircle className="text-primary mr-2 flex-shrink-0 mt-1" />
            <p className="text-muted-foreground">{benefit}</p>
          </div>
        ))}
      </div>
    </section>
  )
}

function VideoSection() {
  return (
    <section className="py-16 bg-gray-50">
      <div className="max-w-4xl mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-6">Título da Seção de Vídeo: Desperte Curiosidade</h2>
        <p className="text-xl text-center text-muted-foreground mb-8">
          Descrição do Vídeo: Explique o que o visitante vai aprender ou descobrir ao assistir. Crie expectativa.
        </p>
        <div className="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden shadow-2xl">
          <iframe 
            className="w-full h-full"
            src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
            title="Vídeo de apresentação do produto"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowFullScreen
          ></iframe>
        </div>
      </div>
    </section>
  )
}

function CallToAction() {
  return (
    <section className="py-16 bg-gradient-to-r from-primary to-purple-600 text-white text-center">
      <div className="container mx-auto px-4">
        <h2 className="text-4xl font-bold mb-6">Chamada para Ação: Crie Urgência</h2>
        <p className="text-xl mb-8 max-w-2xl mx-auto">
          Reforce o Valor: Resuma os principais benefícios e adicione um elemento de escassez ou urgência para incentivar a ação imediata.
        </p>
        <Button size="lg" variant="secondary" className="text-xl py-6 px-12 bg-white text-primary hover:bg-gray-100">
          CTA Principal <ArrowRight className="ml-2" />
        </Button>
      </div>
    </section>
  )
}

//⚠️ ATENÇÃO: Role para o INÍCIO

function SocialProof() {
  const testimonials = [
    {
      name: "Nome do Cliente 1",
      role: "Cargo/Empresa",
      image: "/placeholder.svg?height=100&width=100",
      text: "Depoimento 1: Foque em resultados específicos alcançados com seu produto. Use linguagem autêntica."
    },
    {
      name: "Nome do Cliente 2",
      role: "Cargo/Empresa",
      image: "/placeholder.svg?height=100&width=100",
      text: "Depoimento 2: Aborde uma objeção comum e como seu produto a superou. Seja específico e convincente."
    }
  ]

  const companies = ["Empresa 1", "Empresa 2", "Empresa 3", "Empresa 4", "Empresa 5"]

  return (
    <section className="py-16 bg-gradient-to-b from-white to-gray-50">
      <div className="container mx-auto px-4">
        <h2 className="text-4xl font-bold text-center mb-12">Prova Social: Construa Confiança</h2>
        <div className="grid md:grid-cols-2 gap-8 mb-16">
          {testimonials.map((testimonial, index) => (
            <Card key={index} className="bg-white">
              <CardContent className="p-6">
                <div className="flex items-center mb-4">
                  <Image 
                    src={testimonial.image} 
                    alt={testimonial.name} 
                    width={60} 
                    height={60} 
                    className="rounded-full mr-4"
                  />
                  <div>
                    <h3 className="font-semibold text-lg">{testimonial.name}</h3>
                    <p className="text-sm text-muted-foreground">{testimonial.role}</p>
                  </div>
                </div>
                <p className="text-muted-foreground italic">&ldquo;{testimonial.text}&rdquo;</p>
              </CardContent>
            </Card>
          ))}
        </div>
        <div className="text-center">
          <h3 className="text-2xl font-semibold mb-6">Logotipos de Clientes/Parceiros: Aumente a Credibilidade</h3>
          <div className="flex flex-wrap justify-center items-center gap-8">
            {companies.map((company, index) => (
              <span key={index} className="text-2xl font-bold text-gray-400 hover:text-gray-600 transition-colors">{company}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

function CourseStructure() {
  const phases = [
    { 
      name: "Módulo/Etapa 1", 
      duration: "Duração",
      icon: Book,
      description: "Descrição breve do conteúdo ou resultado deste módulo."
    },
    { 
      name: "Módulo/Etapa 2", 
      duration: "Duração",
      icon: Zap,
      description: "Destaque um benefício-chave ou habilidade adquirida neste módulo."
    },
    { 
      name: "Módulo/Etapa 3", 
      duration: "Duração",
      icon: Users,
      description: "Mencione qualquer recurso especial ou metodologia única usada."
    },
    { 
      name: "Módulo/Etapa 4", 
      duration: "Duração",
      icon: Users,
      description: "Conclua com o resultado final ou transformação esperada."
    }
  ]

  return (
    <section className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <h2 className="text-4xl font-bold text-center mb-12">Estrutura do Produto: Mostre o Caminho</h2>
        <div className="grid md:grid-cols-2 gap-8">
          {phases.map((phase, index) => (
            <Card key={index} className="bg-white hover:shadow-lg transition-shadow">
              <CardContent className="p-6">
                <div className="flex items-center mb-4">
                  <div className="bg-primary rounded-full p-2 mr-4">
                    <phase.icon className="text-white" size={24} />
                  </div>
                  <h3 className="text-xl font-semibold">{phase.name}</h3>
                </div>
                <p className="text-muted-foreground mb-4">{phase.description}</p>
                <div className="flex items-center text-sm text-muted-foreground">
                  <Clock size={16} className="mr-2" />
                  <span>{phase.duration}</span>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}

function AdditionalBenefits() {
  const benefits = [
    { icon: Shield, title: "Benefício Adicional 1: Ex: Garantia" },
    { icon: Users, title: "Benefício Adicional 2: Ex: Comunidade" },
    { icon: Video, title: "Benefício Adicional 3: Ex: Suporte" }
  ]

  return (
    <section className="py-16">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-8">Benefícios Adicionais: Aumente o Valor</h2>
        <div className="grid md:grid-cols-3 gap-8">
          {benefits.map((benefit, index) => (
            <Card key={index}>
              <CardContent className="p-6 text-center">
                <benefit.icon className="mx-auto text-4xl text-primary mb-4" />
                <h3 className="text-xl font-semibold">{benefit.title}</h3>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}

function Motivation() {
  return (
    <section className="py-12 bg-gradient-to-r from-primary to-purple-600 text-white text-center">
      <div className="container mx-auto px-4">
        <h2 className="text-4xl font-bold mb-4">Seção de Motivação: Inspire Ação</h2>
        <p className="text-xl">
          Use uma linguagem emocional e inspiradora para motivar o visitante a agir.
          Reforce a transformação ou resultado desejado e crie um senso de urgência.
        </p>
      </div>
    </section>
  )
}

function FAQ() {
  const faqs = [
    {
      question: "Pergunta 1: Aborde uma objeção comum",
      answer: "Resposta 1: Forneça uma resposta clara e convincente que supere a objeção."
    },
    {
      question: "Pergunta 2: Esclareça um aspecto do produto",
      answer: "Resposta 2: Dê detalhes que ajudem o visitante a entender melhor o valor oferecido."
    },
    {
      question: "Pergunta 3: Aborde preocupações sobre uso ou implementação",
      answer: "Resposta 3: Explique como seu produto é fácil de usar ou implementar, oferecendo suporte se necessário."
    }
  ]

  return (
    <section className="py-16">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-8">Perguntas Frequentes: Supere Objeções</h2>
        <Accordion type="single" collapsible className="max-w-2xl mx-auto">
          {faqs.map((faq, index) => (
            <AccordionItem key={index} value={`item-${index}`}>
              <AccordionTrigger>{faq.question}</AccordionTrigger>
              <AccordionContent>{faq.answer}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  )
}

function CreatorBio() {
  return (
    <section className="py-16">
      <div className="container mx-auto px-4">
        <Card>
          <CardContent className="p-8">
            <div className="flex flex-col md:flex-row items-center">
              <div className="md:w-1/3 mb-8 md:mb-0">
                <Image 
                  src="/placeholder.svg?height=300&width=300" 
                  alt="Foto do Criador" 
                  width={300} 
                  height={300} 
                  className="rounded-full"
                />
              </div>
              <div className="md:w-2/3 md:pl-8">
                <h2 className="text-3xl font-bold mb-4">Sobre o Criador/Empresa</h2>
                <p className="text-xl mb-4 text-muted-foreground">
                  Breve biografia do criador ou história da empresa. Destaque experiência, credenciais e realizações relevantes que estabeleçam autoridade e confiança.
                </p>
                <ul className="list-disc list-inside text-lg text-muted-foreground">
                  <li>Ponto de credibilidade 1: Ex: Experiência na indústria</li>
                  <li>Ponto de credibilidade 2: Ex: Reconhecimentos ou prêmios</li>
                  <li>Ponto de credibilidade 3: Ex: Resultados alcançados</li>
                </ul>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

function Footer() {
  return (
    <footer className="bg-background border-t border-border py-8">
      <div className="container mx-auto px-4 text-center">
        <p className="text-muted-foreground">&copy; {new Date().getFullYear()} Nome da Empresa. Todos os direitos reservados.</p>
        <div className="mt-4">
          <a href="#" className="text-muted-foreground hover:text-foreground mx-2">Termos de Uso</a>
          <a href="#" className="text-muted-foreground hover:text-foreground mx-2">Política de Privacidade</a>
        </div>
      </div>
    </footer>
  )
}