"use client";

import Image from "next/image";
import Link from "next/link";
import {
  Badge,
  Box,
  Container,
  Group,
  SimpleGrid,
  Stack,
  Text,
  Title,
} from "@mantine/core";
import { motion } from "framer-motion";
import {
  Bell,
  Link2,
  Palette,
  Rocket,
  ShieldCheck,
  Smartphone,
  Sparkles,
  TrendingUp,
  Zap,
  type LucideIcon,
} from "lucide-react";
import { WebsiteAppScreensCarousel } from "@/components/website-app/WebsiteAppScreensCarousel";
import { WebsiteAppHeroVisual } from "@/components/website-app/WebsiteAppHeroVisual";
import { WebsiteAppHeroTitle } from "@/components/website-app/WebsiteAppHeroTitle";
import { FeatureIcon } from "@/components/ui/FeatureIcon";
import { GlassCard } from "@/components/ui/GlassCard";
import { GlowOrb } from "@/components/ui/GlowOrb";
import { PremiumCtaCard } from "@/components/ui/PremiumCtaCard";
import { OtherServicesButton } from "@/components/commerce/OtherServicesButton";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { SecondaryButton } from "@/components/ui/SecondaryButton";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { TestimonialsSection } from "@/sections/TestimonialsSection";
import {
  websiteToAppBenefits,
  websiteToAppCta,
  websiteToAppPremiumCard,
  websiteToAppDevices,
  websiteToAppDisclaimer,
  websiteToAppHero,
  websiteToAppIntegrations,
  websiteToAppSteps,
} from "@/data/websiteToApp";
import { buildWebsiteAppWhatsAppUrl } from "@/lib/websiteAppCta";
import { useWebsiteAppContractAccess } from "@/hooks/useContractAccess";
import { fadeUp, revealInViewProps } from "@/lib/motion";
import { useThemeColors } from "@/hooks/useThemeColors";
import { colors } from "@/styles/tokens";

const stepIcons: Record<string, LucideIcon> = {
  link: Link2,
  palette: Palette,
  rocket: Rocket,
};

const benefitIcons: Record<string, LucideIcon> = {
  bell: Bell,
  smartphone: Smartphone,
  "trending-up": TrendingUp,
  sparkles: Sparkles,
  "shield-check": ShieldCheck,
  zap: Zap,
};


export function WebsiteAppHeroSection() {
  const theme = useThemeColors();
  const requestWebsiteApp = useWebsiteAppContractAccess();
  const waUrl = buildWebsiteAppWhatsAppUrl();

  return (
    <Box component="section" pos="relative" py={{ base: 48, md: 80 }} style={{ overflow: "hidden" }}>
      <GlowOrb size={480} top="0%" left="70%" opacity={0.28} />
      <Container size="xl">
        <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="xl" style={{ alignItems: "center" }}>
          <Stack gap="xl" maw={600}>
            <motion.div initial={false} animate="visible" variants={fadeUp(0)}>
              <Badge
                size="lg"
                radius="xl"
                variant="outline"
                styles={{
                  root: {
                    borderColor: "rgba(0, 155, 255, 0.35)",
                    background: "rgba(0, 155, 255, 0.12)",
                    color: colors.blueLight,
                  },
                }}
              >
                {websiteToAppHero.eyebrow}
              </Badge>
            </motion.div>
            <motion.div initial={false} animate="visible" variants={fadeUp(0.08)}>
              <WebsiteAppHeroTitle
                lines={websiteToAppHero.titleLines}
                rotatingPhrases={websiteToAppHero.titleRotatingPhrases}
                headingColor={theme.heading}
              />
            </motion.div>
            <motion.div initial={false} animate="visible" variants={fadeUp(0.12)}>
              <Text size="lg" fw={600} style={{ color: theme.body, lineHeight: 1.6 }}>
                {websiteToAppHero.subtitle}
              </Text>
              <Text size="sm" mt="md" fs="italic" style={{ color: theme.muted, lineHeight: 1.65 }}>
                {websiteToAppHero.disclaimer}
              </Text>
            </motion.div>
            <motion.div initial={false} animate="visible" variants={fadeUp(0.16)}>
              <Stack gap="md">
                <Group gap="md" wrap="wrap">
                  <PrimaryButton size="lg" onClick={() => requestWebsiteApp()}>
                    {websiteToAppHero.cta}
                  </PrimaryButton>
                  <OtherServicesButton size="lg" variant="secondary" />
                </Group>
                <SimpleGrid cols={{ base: 1, xs: 3 }} spacing="sm">
                  {websiteToAppHero.trust.map((t) => (
                    <Box
                      key={t.label}
                      p="sm"
                      style={{
                        borderRadius: 12,
                        background: "rgba(0, 155, 255, 0.08)",
                        border: "1px solid rgba(0, 155, 255, 0.2)",
                      }}
                    >
                      <Text size="xs" tt="uppercase" fw={700} c="dimmed">
                        {t.label}
                      </Text>
                      <Text size="sm" fw={700} style={{ color: theme.heading }}>
                        {t.value}
                      </Text>
                    </Box>
                  ))}
                </SimpleGrid>
              </Stack>
            </motion.div>
          </Stack>
          <WebsiteAppHeroVisual />
        </SimpleGrid>
      </Container>
    </Box>
  );
}

export function WebsiteAppHowSection() {
  const theme = useThemeColors();

  return (
    <Box component="section" py={100} className="noga-grid-bg">
      <Container size="xl">
        <Stack gap={56} align="center">
          <SectionHeader
            eyebrow="Como funciona"
            title="Do website ao"
            highlight="app profissional"
            description="Processo enxuto, sem refazer seu sistema — só transformamos o que você já tem."
          />
          <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg" w="100%">
            {websiteToAppSteps.map((step, i) => {
              const Icon = stepIcons[step.icon] ?? Link2;
              return (
                <motion.div key={step.title} {...revealInViewProps(i * 0.08, 20)}>
                  <GlassCard h="100%" style={{ textAlign: "center" }}>
                    <Stack gap="md" align="center">
                      <Text
                        size="xs"
                        fw={800}
                        style={{
                          color: colors.primary,
                          letterSpacing: "0.12em",
                        }}
                      >
                        PASSO {step.step}
                      </Text>
                      <FeatureIcon icon={Icon} size={52} />
                      <Title order={4} style={{ color: theme.heading }}>
                        {step.title}
                      </Title>
                      <Text size="sm" style={{ color: theme.muted, lineHeight: 1.65 }}>
                        {step.description}
                      </Text>
                    </Stack>
                  </GlassCard>
                </motion.div>
              );
            })}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}

export function WebsiteAppBenefitsSection() {
  const theme = useThemeColors();

  return (
    <Box component="section" py={100}>
      <Container size="xl">
        <Stack gap={56} align="center">
          <SectionHeader
            eyebrow="Vantagens"
            title="Por que ter um"
            highlight="aplicativo nativo?"
          />
          <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" w="100%">
            {websiteToAppBenefits.map((b, i) => {
              const Icon = benefitIcons[b.icon] ?? Sparkles;
              return (
                <motion.div key={b.title} {...revealInViewProps(i * 0.05, 14)}>
                  <GlassCard h="100%">
                    <Stack gap="md">
                      <FeatureIcon icon={Icon} />
                      <Title order={5} style={{ color: theme.heading }}>
                        {b.title}
                      </Title>
                      <Text size="sm" style={{ color: theme.muted, lineHeight: 1.6 }}>
                        {b.description}
                      </Text>
                    </Stack>
                  </GlassCard>
                </motion.div>
              );
            })}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}

export function WebsiteAppDevicesSection() {
  const theme = useThemeColors();

  return (
    <Box component="section" py={100} id="apps-plataformas" className="noga-grid-bg">
      <Container size="xl">
        <Stack gap={56} align="center">
          <SectionHeader
            eyebrow="Plataformas"
            title="Apps para"
            highlight="todos os dispositivos"
          />
          <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg" w="100%">
            {websiteToAppDevices.map((d, i) => {
              return (
                <motion.div key={d.title} {...revealInViewProps(i * 0.08, 18)}>
                  <GlassCard h="100%" glow={i === 1}>
                    <Stack gap="lg" align="center" ta="center">
                      <Box
                        style={{
                          width: 88,
                          height: 88,
                          borderRadius: "50%",
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                          background: `${d.accent}18`,
                          border: `1px solid ${d.accent}44`,
                          boxShadow: `0 12px 32px ${d.accent}22`,
                        }}
                      >
                        <Image
                          src={d.logoSrc}
                          alt={`Logo ${d.title}`}
                          width={44}
                          height={44}
                          style={{ objectFit: "contain" }}
                        />
                      </Box>
                      <Title order={3} style={{ color: theme.heading }}>
                        {d.title}
                      </Title>
                      <Text size="sm" style={{ color: theme.muted, lineHeight: 1.65 }}>
                        {d.description}
                      </Text>
                    </Stack>
                  </GlassCard>
                </motion.div>
              );
            })}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}

export function WebsiteAppShowcaseSection() {
  return (
    <Box component="section" py={80} style={{ overflow: "hidden" }}>
      <Container size="xl">
        <Stack gap="xl" align="center">
          <SectionHeader
            eyebrow="Resultados"
            title="Experiência mobile"
            highlight="profissional"
            description="Interfaces limpas, navegação fluida e sua marca em destaque no celular."
          />
          <WebsiteAppScreensCarousel />
        </Stack>
      </Container>
    </Box>
  );
}

export function WebsiteAppIntegrationsSection() {
  const theme = useThemeColors();

  return (
    <Box component="section" py={100}>
      <Container size="xl">
        <Stack gap={48} align="center">
          <SectionHeader
            eyebrow="Compatibilidade"
            title="Funciona com seu"
            highlight="ecossistema atual"
            description="Lojas e sites nas principais plataformas — e sistemas sob medida."
          />
          <SimpleGrid cols={{ base: 2, sm: 3, md: 5 }} spacing="md" w="100%">
            {websiteToAppIntegrations.map((item, i) => (
              <motion.div key={item.id} {...revealInViewProps(i * 0.03, 10)} style={{ height: "100%" }}>
                <Box
                  p="lg"
                  ta="center"
                  h="100%"
                  style={{
                    borderRadius: 16,
                    background: theme.isDark
                      ? "rgba(255,255,255,0.04)"
                      : "rgba(255,255,255,0.92)",
                    border: `1px solid ${theme.isDark ? "rgba(255,255,255,0.08)" : "rgba(0, 155, 255, 0.12)"}`,
                    minHeight: 120,
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: 12,
                  }}
                >
                  <Box
                    style={{
                      width: 56,
                      height: 56,
                      position: "relative",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      borderRadius: 14,
                      background: theme.isDark
                        ? "rgba(6, 8, 24, 0.65)"
                        : "rgba(248, 250, 252, 0.95)",
                      border: `1px solid ${theme.isDark ? "rgba(0, 155, 255, 0.2)" : "rgba(0, 155, 255, 0.15)"}`,
                    }}
                  >
                    <Image
                      src={item.logoSrc}
                      alt={`Logo ${item.name}`}
                      width={40}
                      height={40}
                      unoptimized
                      style={{ width: 40, height: 40, objectFit: "contain" }}
                    />
                  </Box>
                  <Text size="sm" fw={700} style={{ color: theme.heading, lineHeight: 1.35 }}>
                    {item.name}
                  </Text>
                </Box>
              </motion.div>
            ))}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}

/** Planos de criação não são exibidos no site — apenas no painel após planejamento ativo. */
export function WebsiteAppPricingSection() {
  return null;
}

export function WebsiteAppDisclaimerSection() {
  const theme = useThemeColors();

  return (
    <Box component="section" py={80}>
      <Container size="md">
        <GlassCard glow={false} hover={false}>
          <Stack gap="lg">
            <Title order={3} style={{ color: theme.heading }}>
              ⚠️ {websiteToAppDisclaimer.title}
            </Title>
            <Text size="md" fw={600} style={{ color: theme.body, lineHeight: 1.6 }}>
              {websiteToAppDisclaimer.lead}
            </Text>
            <Text size="sm" fw={700} tt="uppercase" c="dimmed">
              Não inclui:
            </Text>
            <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="xs">
              {websiteToAppDisclaimer.excludes.map((item) => (
                <Text key={item} size="sm" style={{ color: theme.muted }}>
                  ✖ {item}
                </Text>
              ))}
            </SimpleGrid>
            <Text size="sm" style={{ color: theme.muted, lineHeight: 1.65 }}>
              {websiteToAppDisclaimer.footer}
            </Text>
            <Text size="sm">
              <Link
                href="/contratar?catalog=planejamento-app-website"
                style={{ color: colors.primary, fontWeight: 600 }}
              >
                Contratar planejamento da transformação →
              </Link>
            </Text>
          </Stack>
        </GlassCard>
      </Container>
    </Box>
  );
}

export function WebsiteAppFinalCtaSection() {
  const theme = useThemeColors();
  const requestWebsiteApp = useWebsiteAppContractAccess();

  return (
    <Box component="section" py={100} pos="relative" style={{ overflow: "hidden" }}>
      <Box
        style={{
          position: "absolute",
          inset: 0,
          background: `linear-gradient(135deg, ${colors.secondary} 0%, ${colors.bgMain} 50%, rgba(0, 155, 255, 0.15) 100%)`,
        }}
      />
      <Container size="md" pos="relative" style={{ zIndex: 1 }}>
        <Stack gap="xl" align="center" ta="center">
          <FeatureIcon icon={Smartphone} size={56} />
          <Title order={2} fw={800} style={{ color: theme.heading, letterSpacing: "-0.03em" }}>
            {websiteToAppCta.title}
          </Title>
          <Text maw={520} size="lg" style={{ color: theme.muted, lineHeight: 1.65 }}>
            {websiteToAppCta.subtitle}
          </Text>
          <PrimaryButton size="lg" onClick={() => requestWebsiteApp()}>
            {websiteToAppCta.button}
          </PrimaryButton>
        </Stack>
      </Container>
    </Box>
  );
}

export function WebsiteAppTestimonialsSection() {
  return <TestimonialsSection />;
}

export function WebsiteAppPremiumCardSection() {
  const requestWebsiteApp = useWebsiteAppContractAccess();

  return (
    <PremiumCtaCard
      content={{
        ...websiteToAppPremiumCard,
        faqHref: "/ajuda",
        onPrimaryClick: () => requestWebsiteApp(),
        icon: Smartphone,
      }}
    />
  );
}