'use client';

import React, { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Mail, Cpu, Cloud, Bot, Shield, ArrowRight, Rocket as RocketIcon } from "lucide-react";
import { motion } from "framer-motion";

// Main layout component
export default function AIEDUCoachLanding() {
  // Smooth scroll without SSR errors
  useEffect(() => {
    if (typeof window !== "undefined" && document?.documentElement) {
      document.documentElement.style.scrollBehavior = "smooth";
    }
  }, []);

  return (
    <div className="min-h-screen w-full bg-[#0A0F16] text-[#C6CBD5] antialiased max-w-full overflow-x-hidden scroll-smooth">
      <MainContainer>
        <BackgroundFX />
        <Header />
        <Hero />
        <Features />
        <DashboardSection />
        <AboutSection />
        <ContactSection />
        <Footer />
      </MainContainer>
    </div>
  );
}

// Wrapper to keep layout centralized
function MainContainer({ children }: { children: React.ReactNode }) {
  return <div className="mx-auto max-w-screen-xl px-4 sm:px-6 md:px-8">{children}</div>;
}

// Background visual effect
function BackgroundFX() {
  return (
    <div aria-hidden className="pointer-events-none fixed inset-0 -z-10">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(0,224,255,0.08),transparent_60%)]" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(255,107,0,0.08),transparent_60%)]" />
      <div
        className="absolute inset-0 opacity-[0.15] mix-blend-overlay"
        style={{ backgroundImage: "url('https://grainy-gradients.vercel.app/noise.svg')" }}
      />
    </div>
  );
}

// Displays labeled stats (used in dashboard)
function ItemStat({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex justify-between text-[#C6CBD5]/80 border-b border-white/5 py-1">
      <span>{label}</span>
      <span className="text-cyan-300 font-semibold">{value}</span>
    </div>
  );
}

// Navigation header component
function Header() {
  return (
    <header className="sticky top-0 z-50 backdrop-blur-md bg-[#0A0F16]/70 border-b border-white/5" aria-label="Cabeçalho principal">
      <NavContainer>
        <Logo />
        <NavLinks />
        <HeaderButton />
      </NavContainer>
    </header>
  );
}

function NavContainer({ children }: { children: React.ReactNode }) {
  return (
    <div className="mx-auto max-w-screen-xl flex flex-col md:flex-row items-center justify-between gap-3 py-4 text-center md:text-left">
      {children}
    </div>
  );
}

function NavLinks() {
  return (
    <nav className="hidden md:flex items-center gap-8 text-sm uppercase tracking-wider" aria-label="Navegação do site">
      {[
        { name: "Home", href: "#home" },
        { name: "Sobre", href: "#about" },
        { name: "Recursos", href: "#features" },
        { name: "Contato", href: "#contact" },
      ].map((link) => (
        <a
          key={link.href}
          className="hover:text-white transition focus:outline-none focus:ring-2 focus:ring-cyan-300 rounded-md"
          href={link.href}
        >
          {link.name}
        </a>
      ))}
    </nav>
  );
}

function HeaderButton() {
  return (
    <div className="flex items-center justify-center gap-3">
      <Button
        aria-label="Solicitar Demonstração"
        className="bg-[#FF6B00] hover:bg-[#ff7f22] text-white focus:ring-2 focus:ring-cyan-300"
      >
        Solicitar Demonstração
      </Button>
    </div>
  );
}

function Logo() {
  return (
    <div className="flex items-center gap-2 justify-center md:justify-start" aria-label="Logo da AIEDUCoach">
      <div className="h-7 w-7 rounded-lg bg-[radial-gradient(circle_at_30%_30%,#00E0FF,transparent_60%)] ring-1 ring-cyan-400/40 relative overflow-hidden">
        <span className="absolute inset-0 bg-[conic-gradient(from_0deg,#FF6B00_0%,transparent_20%,#FF6B00_40%,transparent_60%,#FF6B00_80%,transparent_100%)] opacity-50 mix-blend-screen" />
      </div>
      <span className="font-bold tracking-wider text-white">
        AI<span className="text-cyan-300">EDUCoach</span>
      </span>
    </div>
  );
}

// HERO
function Hero() {
  return (
    <section id="home" className="relative overflow-hidden">
      <div className="mx-auto max-w-screen-xl px-0 pt-16 pb-24 grid lg:grid-cols-2 gap-12 items-center">
        <div className="space-y-6 text-center lg:text-left">
          <p className="text-xs tracking-[0.25em] text-cyan-300/80 uppercase">
            AIEDUCoach — Tecnologia de Ponta em Automação
          </p>
          <h1 className="text-4xl md:text-6xl font-extrabold leading-tight text-white">
            Automação <GradientCyan>Inteligente</GradientCyan>
          </h1>
          <p className="max-w-xl text-[#C6CBD5]/80 mx-auto lg:mx-0">
            Transforme sua comunicação digital com sistemas autônomos de Instagram, projetados para otimizar resultados e reduzir custos operacionais em empresas de médio, grande porte e corporações.
          </p>
          <div className="flex flex-col sm:flex-row justify-center lg:justify-start gap-3">
            <Button className="bg-[#FF6B00] hover:bg-[#ff7f22] text-white">Fale com um Especialista</Button>
            <Button
              variant="outline"
              className="border-cyan-400/40 text-cyan-300 hover:bg-cyan-400/10 hover:text-white"
            >
              Saiba Mais
            </Button>
          </div>
          <div className="flex flex-wrap items-center justify-center lg:justify-start gap-3 pt-4 text-sm">
            <Badge text="500+ Empresas Atendidas" />
            <Badge text="40% Aumento em Engajamento" />
            <Badge text="25% Redução de Custos" />
            <Badge text="24/7 Automação Ativa" />
          </div>
        </div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="relative aspect-square w-full max-w-[540px] mx-auto"
        >
          <div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_50%_50%,rgba(0,224,255,0.25),transparent_60%)]" />
          <div className="absolute inset-6 rounded-full bg-[conic-gradient(from_180deg_at_50%_50%,#0f1c2f_0%,#1e2a40_35%,#0f1c2f_70%,#1e2a40_100%)] shadow-2xl shadow-cyan-500/10 border border-white/10" />
          <MeshOrange />
        </motion.div>
      </div>
    </section>
  );
}

// FEATURES
function Features() {
  return (
    <section id="features" className="relative border-y border-white/5 bg-gradient-to-b from-transparent via-[#0B1324] to-transparent">
      <div className="mx-auto max-w-screen-xl px-0 py-16">
        <HeaderSection
          title="Por Que Escolher a AIEDUCoach?"
          subtitle="Soluções completas para automação corporativa"
        />
        <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          <Feature
            icon={<Cloud className="h-6 w-6" />}
            title="Redução de Custos Operacionais"
            desc="Elimine grandes equipes de marketing digital com automação inteligente."
          />
          <Feature
            icon={<Bot className="h-6 w-6" />}
            title="Geração de Leads Qualificados"
            desc="Sistemas que atraem e engajam com precisão usando IA."
          />
          <Feature
            icon={<Cpu className="h-6 w-6" />}
            title="Otimização de Tempo"
            desc="Libere sua equipe para estratégias criativas e decisões inteligentes."
          />
          <Feature
            icon={<Shield className="h-6 w-6" />}
            title="Segurança e Confiabilidade"
            desc="Sistemas robustos e seguros que seguem diretrizes oficiais do Instagram."
          />
          <Feature
            icon={<RocketIcon className="h-6 w-6" />}
            title="Comunicação Consistente"
            desc="Diálogo ativo e autêntico com sua audiência 24/7."
          />
          <Feature
            icon={<Cpu className="h-6 w-6" />}
            title="Análise de Desempenho"
            desc="Relatórios detalhados e insights acionáveis em tempo real."
          />
        </div>
      </div>
    </section>
  );
}

// DASHBOARD / TRIPTYCH
function DashboardSection() {
  return (
    <section className="relative">
      <div className="mx-auto max-w-screen-xl px-0 py-20 grid lg:grid-cols-3 gap-6 items-stretch">
        <Card className="bg-[#0E1526]/90 border-white/10">
          <CardHeader>
            <CardTitle className="text-white">Sistemas Autônomos</CardTitle>
          </CardHeader>
          <CardContent className="text-sm space-y-2 text-[#E6EDF5]/90 leading-relaxed">
            <p>Agendamento inteligente de posts</p>
            <p>Respostas automáticas personalizadas</p>
            <p>Análise de concorrentes</p>
            <p>Segmentação avançada de público</p>
            <p>Relatórios em tempo real</p>
            <p>Integração com CRM</p>
          </CardContent>
        </Card>

        <Card className="bg-[#0E1526]/80 border-white/10">
          <CardHeader>
            <CardTitle className="text-white">Dashboard Inteligente</CardTitle>
          </CardHeader>
          <CardContent className="text-sm space-y-2">
            <ItemStat label="Engajamento Hoje" value="+23%" />
            <ItemStat label="Novos Seguidores" value="+156" />
            <ItemStat label="Leads Gerados" value="+42" />
          </CardContent>
        </Card>

        <Card className="bg-[#0E1526]/90 border-white/10">
          <CardHeader>
            <CardTitle className="text-white">Depoimento</CardTitle>
          </CardHeader>
          <CardContent className="text-sm italic text-[#E6EDF5]/90 leading-relaxed">
            "Desde que implementamos a solução da AIEDUCoach, nossa taxa de engajamento aumentou 40% e reduzimos custos em 25%."
            <p className="mt-2 text-right font-semibold">— Carlos Silva, CEO, Corporação Financeira</p>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}

// ABOUT
function AboutSection() {
  return (
    <section id="about" className="relative bg-[#0B1324] border-y border-white/5 py-20">
      <div className="mx-auto max-w-screen-xl px-0 text-center">
        <HeaderSection title="Nossa História" subtitle="Inovação e Excelência em Automação" />
        <p className="mt-6 max-w-4xl mx-auto text-[#C6CBD5]/80">
          A AIEDUCoach nasceu da visão de revolucionar como empresas interagem no ambiente digital. Desenvolvemos sistemas autônomos que otimizam a presença digital e liberam recursos para foco estratégico.
        </p>
        <div className="mt-12 grid md:grid-cols-3 gap-6">
          <Card className="bg-[#0E1526]/90 border-white/10">
            <CardHeader>
              <CardTitle className="text-white">Missão</CardTitle>
            </CardHeader>
            <CardContent className="text-[#E6EDF5]/90">
              Capacitar empresas a maximizar seu potencial com automação inteligente.
            </CardContent>
          </Card>
          <Card className="bg-[#0E1526]/90 border-white/10">
            <CardHeader>
              <CardTitle className="text-white">Visão</CardTitle>
            </CardHeader>
            <CardContent className="text-[#E6EDF5]/90">
              Ser referência global em soluções de automação de Instagram.
            </CardContent>
          </Card>
          <Card className="bg-[#0E1526]/90 border-white/10">
            <CardHeader>
              <CardTitle className="text-white">Tecnologia</CardTitle>
            </CardHeader>
            <CardContent className="text-[#E6EDF5]/90">
              IA avançada, aprendizado de máquina e análise preditiva.
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  );
}

// CONTACT
function ContactSection() {
  return (
    <section id="contact" className="relative bg-gradient-to-b from-transparent via-[#0B1324] to-transparent py-20">
      <div className="mx-auto max-w-screen-xl px-0 text-center">
        <h3 className="text-3xl font-semibold text-white">Pronto para Transformar Seu Instagram?</h3>
        <p className="mt-3 text-[#C6CBD5]/80 max-w-3xl mx-auto">
          Descubra como a AIEDUCoach pode impulsionar sua marca, gerar leads qualificados e otimizar seus investimentos em marketing digital.
        </p>
        <Button className="mt-6 bg-[#FF6B00] hover:bg-[#ff7f22] text-white">Solicitar Demonstração</Button>

        <div className="mt-12 text-left max-w-2xl mx-auto space-y-2">
          <h4 className="text-xl text-white font-semibold mb-3">Contato</h4>
          <p>E-mail: contato@aieducoach.com</p>
          <p>Telefone: +55 (11) 99999-9999</p>
          <p>Localização: São Paulo, Brasil</p>

          {/* Newsletter simples */}
          <form className="mt-6 flex flex-col sm:flex-row gap-3">
            <div className="relative flex-1 min-w-[260px]">
              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#C6CBD5]/60" />
              <Input placeholder="Seu e-mail" className="pl-9 bg-[#0E1526] border-white/10" />
            </div>
            <Button className="bg-[#FF6B00] hover:bg-[#ff7f22]">
              Inscrever <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </form>
        </div>
      </div>
    </section>
  );
}

// FOOTER
function Footer() {
  return (
    <footer className="relative border-t border-white/5 bg-[#0A0F16] py-10 text-center text-sm text-[#C6CBD5]/70">
      © 2025 AIEDUCoach — Todos os direitos reservados.
    </footer>
  );
}

// UI PRIMITIVES
function GradientCyan({ children }: { children: React.ReactNode }) {
  return (
    <span className="bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-cyan-500 drop-shadow-[0_0_12px_rgba(0,224,255,0.35)]">
      {children}
    </span>
  );
}

function Badge({ text }: { text: string }) {
  return <span className="px-3 py-1 rounded-full text-xs border border-white/10 bg-white/5">{text}</span>;
}

function HeaderSection({ title, subtitle }: { title: string; subtitle?: string }) {
  return (
    <div className="text-center">
      <h3 className="text-2xl md:text-3xl font-semibold text-white flex items-center justify-center gap-3">
        <span className="h-[1px] w-8 bg-gradient-to-r from-transparent via-cyan-400/60 to-transparent" />
        {title}
        <span className="h-[1px] w-8 bg-gradient-to-r from-transparent via-cyan-400/60 to-transparent" />
      </h3>
      {subtitle && <p className="mt-2 text-sm text-[#C6CBD5]/80">{subtitle}</p>}
    </div>
  );
}

function Feature({ icon, title, desc }: { icon: React.ReactNode; title: string; desc: string }) {
  return (
    <div className="group rounded-2xl border border-white/10 bg-[#0E1526]/70 p-5">
      <div className="h-10 w-10 rounded-xl flex items-center justify-center border border-cyan-400/30 text-cyan-300">
        {icon}
      </div>
      <h4 className="mt-4 text-white font-semibold">{title}</h4>
      <p className="text-sm text-[#C6CBD5]/80">{desc}</p>
    </div>
  );
}

function MeshOrange() {
  return (
    <svg viewBox="0 0 100 100" className="h-full w-full">
      <g fill="none" stroke="#FF6B00" strokeOpacity="0.9" strokeWidth="0.6">
        {Array.from({ length: 22 }).map((_, i) => (
          <circle key={i} cx="50" cy="50" r={5 + i * 2} className="opacity-50" />
        ))}
        {Array.from({ length: 24 }).map((_, i) => (
          <line key={`l-${i}`} x1="0" y1={i * 4} x2="100" y2={100 - i * 4} className="opacity-30" />
        ))}
      </g>
    </svg>
  );
}