metaads-pro/src/app/page.tsx

'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { Wand2, Activity, Shield, History, ArrowRight, Sparkles } from 'lucide-react';
import { PublicHeader } from '@/components/public/PublicHeader';
import { PublicFooter } from '@/components/public/PublicFooter';
import { FloatingOrbs } from '@/components/public/FloatingOrbs';
import { LiveChartMock } from '@/components/public/LiveChartMock';
import { HowItWorks } from '@/components/public/HowItWorks';
import { StatsStrip } from '@/components/public/StatsStrip';
import { ScrollReveal } from '@/components/public/ScrollReveal';

const features = [
  {
    icon: Wand2,
    title: 'Criação de campanhas com IA',
    description: 'Cole o link do seu site (ou descreva seu produto) e a IA detecta o nicho, monta a copy, gera imagens e configura toda a campanha sozinha.',
  },
  {
    icon: Activity,
    title: 'Auditoria automática de anúncios',
    description: 'A IA lê suas campanhas ativas, analisa métricas (CTR, CPC, ROAS) e sugere os próximos passos com linguagem clara, sem jargão.',
  },
  {
    icon: Shield,
    title: 'Automação por regras',
    description: 'Defina regras de orçamento e performance — pausar, escalar ou ajustar lances automaticamente conforme os resultados chegam.',
  },
  {
    icon: History,
    title: 'Histórico que nunca se perde',
    description: 'Toda copy, criativo e configuração gerados ficam salvos — mesmo se a publicação falhar, você retoma de onde parou.',
  },
];

const fadeUp = {
  hidden: { opacity: 0, y: 24 },
  show: (i: number) => ({
    opacity: 1,
    y: 0,
    transition: { duration: 0.7, delay: 0.1 + i * 0.12, ease: 'easeOut' as const },
  }),
};

export default function LandingPage() {
  return (
    <div className="min-h-screen flex flex-col" style={{ background: 'var(--background)', color: 'var(--foreground)' }}>
      <PublicHeader />

      <main className="flex-1">
        {/* Hero */}
        <section className="relative overflow-hidden">
          <div className="absolute inset-0 bg-grid-pattern opacity-30" />
          <FloatingOrbs />

          <div className="relative z-10 max-w-6xl mx-auto px-6 py-20 md:py-28 grid lg:grid-cols-[1.1fr_0.9fr] gap-14 items-center">
            <div className="text-center lg:text-left">
              <motion.div
                custom={0}
                initial="hidden"
                animate="show"
                variants={fadeUp}
                className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-medium mb-6"
                style={{ background: 'var(--overlay-04)', border: '1px solid var(--overlay-08)', color: 'var(--accent-hover)' }}
              >
                <motion.span
                  animate={{ rotate: [0, 15, -10, 0] }}
                  transition={{ duration: 2.4, repeat: Infinity, ease: 'easeInOut' }}
                  className="inline-flex"
                >
                  <Sparkles size={14} />
                </motion.span>
                Tráfego pago no Meta, no piloto automático
              </motion.div>

              <motion.h1
                custom={1}
                initial="hidden"
                animate="show"
                variants={fadeUp}
                className="text-4xl md:text-6xl font-bold leading-tight mb-6"
              >
                Crie, publique e otimize campanhas no <span className="gradient-text">Meta Ads</span> com IA autônoma
              </motion.h1>

              <motion.p
                custom={2}
                initial="hidden"
                animate="show"
                variants={fadeUp}
                className="text-base md:text-lg max-w-xl mx-auto lg:mx-0 mb-10"
                style={{ color: 'var(--muted-fg)' }}
              >
                O MetaAds Pro conecta direto com sua conta do Facebook Ads, entende seu produto a partir de um link
                ou descrição, e monta campanhas profissionais — copy, criativos, segmentação e configuração — sem você
                precisar preencher um formulário gigante.
              </motion.p>

              <motion.div
                custom={3}
                initial="hidden"
                animate="show"
                variants={fadeUp}
                className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4"
              >
                <Link href="/login" className="group">
                  <motion.span
                    whileHover={{ scale: 1.04 }}
                    whileTap={{ scale: 0.97 }}
                    className="flex items-center gap-2 px-6 py-3.5 rounded-xl font-semibold text-white transition-shadow duration-300"
                    style={{ background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', boxShadow: '0 8px 32px rgba(99,102,241,0.3)' }}
                  >
                    Começar agora
                    <ArrowRight size={18} className="transition-transform group-hover:translate-x-1" />
                  </motion.span>
                </Link>
                <Link href="#features">
                  <motion.span
                    whileHover={{ scale: 1.04 }}
                    whileTap={{ scale: 0.97 }}
                    className="inline-flex px-6 py-3.5 rounded-xl font-medium"
                    style={{ background: 'var(--overlay-04)', border: '1px solid var(--overlay-08)', color: 'var(--foreground)' }}
                  >
                    Ver como funciona
                  </motion.span>
                </Link>
              </motion.div>
            </div>

            <div className="flex justify-center lg:justify-end">
              <LiveChartMock />
            </div>
          </div>
        </section>

        <StatsStrip />

        <HowItWorks />

        {/* Features */}
        <section id="features" className="max-w-6xl mx-auto px-6 py-20">
          <ScrollReveal className="text-center mb-14">
            <h2 className="text-2xl md:text-3xl font-bold mb-3">Tudo que você precisa para escalar no Meta Ads</h2>
            <p className="text-sm md:text-base max-w-xl mx-auto" style={{ color: 'var(--muted-fg)' }}>
              Conectado via integração oficial da Meta — você mantém o controle total da sua conta de anúncios.
            </p>
          </ScrollReveal>

          <div className="grid sm:grid-cols-2 gap-5">
            {features.map((feature, i) => {
              const Icon = feature.icon;
              return (
                <ScrollReveal key={feature.title} delay={i * 0.1}>
                  <motion.div
                    whileHover={{ y: -4 }}
                    transition={{ type: 'spring', stiffness: 300, damping: 20 }}
                    className="glass-card p-6 h-full"
                  >
                    <div className="w-11 h-11 rounded-xl flex items-center justify-center mb-4" style={{ background: 'rgba(99,102,241,0.12)', border: '1px solid rgba(99,102,241,0.2)' }}>
                      <Icon size={20} style={{ color: 'var(--accent-soft-fg)' }} />
                    </div>
                    <h3 className="text-base font-semibold mb-2" style={{ color: 'var(--foreground)' }}>{feature.title}</h3>
                    <p className="text-sm leading-relaxed" style={{ color: 'var(--muted-fg)' }}>{feature.description}</p>
                  </motion.div>
                </ScrollReveal>
              );
            })}
          </div>
        </section>

        {/* CTA */}
        <section className="max-w-4xl mx-auto px-6 pb-24">
          <ScrollReveal>
            <div className="gradient-border relative overflow-hidden">
              <motion.div
                className="absolute inset-0 opacity-40"
                style={{ background: 'radial-gradient(circle at 30% 20%, rgba(99,102,241,0.25), transparent 60%)' }}
                animate={{ opacity: [0.25, 0.5, 0.25] }}
                transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
              />
              <div className="relative p-10 text-center rounded-2xl" style={{ background: 'var(--card)', backdropFilter: 'blur(20px)' }}>
                <h2 className="text-2xl font-bold mb-3">Pronto para automatizar suas campanhas?</h2>
                <p className="text-sm mb-7 max-w-lg mx-auto" style={{ color: 'var(--muted-fg)' }}>
                  Conecte sua conta do Facebook em segundos e deixe a IA cuidar do trabalho pesado — da estratégia à publicação.
                </p>
                <Link href="/login">
                  <motion.span
                    whileHover={{ scale: 1.04 }}
                    whileTap={{ scale: 0.97 }}
                    className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl font-semibold text-white"
                    style={{ background: 'linear-gradient(135deg, #1877F2, #0C63D4)', boxShadow: '0 4px 20px rgba(24,119,242,0.3)' }}
                  >
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
                      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                    </svg>
                    Entrar com Facebook
                  </motion.span>
                </Link>
              </div>
            </div>
          </ScrollReveal>
        </section>
      </main>

      <PublicFooter />
    </div>
  );
}