"use client";

import Link from "next/link";
import {
  Badge,
  Box,
  Container,
  Group,
  SimpleGrid,
  Stack,
  Text,
  Title,
} from "@mantine/core";
import { motion } from "framer-motion";
import {
  BadgePercent,
  ClipboardList,
  Cpu,
  CreditCard,
  Layers,
  LayoutDashboard,
  Link as LinkIcon,
  MessageCircle,
  Package,
  Palette,
  Plug,
  Rocket,
  Search,
  ShieldCheck,
  ShoppingCart,
  Smartphone,
  Sparkles,
  Store,
  Truck,
  UserRound,
  type LucideIcon,
} from "lucide-react";
import { EcommerceHeroVisual } from "@/components/ecommerce/EcommerceHeroVisual";
import { PortfolioCarousel } from "@/components/portfolio/PortfolioCarousel";
import { FeatureIcon } from "@/components/ui/FeatureIcon";
import { GlassCard } from "@/components/ui/GlassCard";
import { GlowOrb } from "@/components/ui/GlowOrb";
import { OtherServicesButton } from "@/components/commerce/OtherServicesButton";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { SectionHeader } from "@/components/ui/SectionHeader";
import {
  ecommerceDiffIntro,
  ecommerceDifferentiators,
  ecommerceHero,
  ecommercePortfolioIntro,
  ecommerceProcessIntro,
  ecommerceProcessSteps,
  ecommerceSolutions,
  ecommerceSolutionsIntro,
} from "@/data/ecommerce";
import { projectsByGroup } from "@/data/portfolio";
import { fadeUp, revealInViewProps } from "@/lib/motion";
import { useThemeColors } from "@/hooks/useThemeColors";
import { useServicePageContract } from "@/hooks/useContractAccess";
import { colors, typography } from "@/styles/tokens";

const solutionIcons: Record<string, LucideIcon> = {
  package: Package,
  "shopping-cart": ShoppingCart,
  "credit-card": CreditCard,
  truck: Truck,
  "user-round": UserRound,
  "layout-dashboard": LayoutDashboard,
  link: LinkIcon,
  "shield-check": ShieldCheck,
  smartphone: Smartphone,
  cpu: Cpu,
  store: Store,
  layers: Layers,
};

const diffIcons: Record<string, LucideIcon> = {
  search: Search,
  "badge-percent": BadgePercent,
  "shopping-cart": ShoppingCart,
  "message-circle": MessageCircle,
  "layout-dashboard": LayoutDashboard,
  smartphone: Smartphone,
};

const processIcons: Record<string, LucideIcon> = {
  "clipboard-list": ClipboardList,
  palette: Palette,
  plug: Plug,
  rocket: Rocket,
};

export function EcommerceHeroSection() {
  const theme = useThemeColors();
  const requestContract = useServicePageContract("ecommerce");

  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"
                leftSection={<Sparkles size={14} color={colors.primary} />}
                styles={{
                  root: {
                    borderColor: "rgba(0, 155, 255, 0.35)",
                    background: "rgba(0, 155, 255, 0.12)",
                    color: colors.blueLight,
                  },
                }}
              >
                {ecommerceHero.eyebrow}
              </Badge>
            </motion.div>

            <motion.div initial={false} animate="visible" variants={fadeUp(0.08)}>
              <Title order={1} fw={800} style={{ ...typography.hero, color: theme.heading }}>
                {ecommerceHero.title}
              </Title>
            </motion.div>

            <motion.div initial={false} animate="visible" variants={fadeUp(0.12)}>
              <Text size="lg" fw={500} style={{ color: theme.body, lineHeight: 1.65 }}>
                {ecommerceHero.subtitle}
              </Text>
            </motion.div>

            <motion.div initial={false} animate="visible" variants={fadeUp(0.16)}>
              <Group gap="md" wrap="wrap">
                <PrimaryButton size="lg" onClick={() => requestContract()}>
                  {ecommerceHero.ctaPrimary}
                </PrimaryButton>
                <OtherServicesButton size="lg" variant="secondary" />
              </Group>
            </motion.div>
          </Stack>

          <EcommerceHeroVisual />
        </SimpleGrid>

        <motion.div initial={false} animate="visible" variants={fadeUp(0.24)}>
          <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="md" mt={{ base: 48, md: 64 }}>
            {ecommerceHero.trust.map((item) => (
              <Box
                key={item.label}
                p="md"
                ta="center"
                style={{
                  borderRadius: 16,
                  background: theme.isDark ? "rgba(255,255,255,0.04)" : "rgba(255,255,255,0.8)",
                  border: `1px solid ${theme.surfaceBorder}`,
                }}
              >
                <Text size="lg" fw={800} style={{ color: theme.heading, letterSpacing: "-0.02em" }}>
                  {item.value}
                </Text>
                <Text size="xs" tt="uppercase" fw={600} mt={4} style={{ color: theme.muted, letterSpacing: "0.06em" }}>
                  {item.label}
                </Text>
              </Box>
            ))}
          </SimpleGrid>
        </motion.div>
      </Container>
    </Box>
  );
}

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

  return (
    <Box component="section" py={100} id="ecommerce-solucoes" className="noga-grid-bg">
      <Container size="xl">
        <Stack gap={56} align="center">
          <SectionHeader
            title={ecommerceSolutionsIntro.title}
            highlight={ecommerceSolutionsIntro.highlight}
            description={ecommerceSolutionsIntro.description}
          />
          <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg" w="100%">
            {ecommerceSolutions.map((item, i) => {
              const Icon = solutionIcons[item.icon] ?? Sparkles;
              return (
                <motion.div
                  key={item.id}
                  {...revealInViewProps(i * 0.04, 14)}
                  style={{ height: "100%" }}
                >
                  <GlassCard h="100%" style={{ height: "100%" }}>
                    <Stack gap="lg" h="100%">
                      <FeatureIcon icon={Icon} size={56} />
                      <Stack gap="xs" style={{ flex: 1 }}>
                        <Title order={4} style={{ color: theme.heading, lineHeight: 1.3 }}>
                          {item.title}
                        </Title>
                        <Text size="sm" style={{ color: theme.muted, lineHeight: 1.65 }}>
                          {item.description}
                        </Text>
                      </Stack>
                    </Stack>
                  </GlassCard>
                </motion.div>
              );
            })}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}

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

  return (
    <Box component="section" py={100} id="ecommerce-diferenciais" className="noga-grid-bg">
      <Container size="xl">
        <Stack gap={56} align="center">
          <SectionHeader
            eyebrow={ecommerceDiffIntro.eyebrow}
            title={ecommerceDiffIntro.title}
            highlight={ecommerceDiffIntro.highlight}
            description={ecommerceDiffIntro.description}
          />
          <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg" w="100%">
            {ecommerceDifferentiators.map((item, i) => {
              const Icon = diffIcons[item.icon] ?? Sparkles;
              return (
                <motion.div key={item.title} {...revealInViewProps(i * 0.06, 16)}>
                  <GlassCard h="100%">
                    <Stack gap="md">
                      <FeatureIcon icon={Icon} size={44} />
                      <Title order={4} style={{ color: theme.heading }}>
                        {item.title}
                      </Title>
                      <Text size="sm" style={{ color: theme.muted, lineHeight: 1.65 }}>
                        {item.description}
                      </Text>
                    </Stack>
                  </GlassCard>
                </motion.div>
              );
            })}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}

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

  return (
    <Box component="section" py={100} className="noga-grid-bg">
      <Container size="xl">
        <Stack gap={56} align="center">
          <SectionHeader
            eyebrow={ecommerceProcessIntro.eyebrow}
            title={ecommerceProcessIntro.title}
            highlight={ecommerceProcessIntro.highlight}
          />
          <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg" w="100%">
            {ecommerceProcessSteps.map((step, i) => {
              const Icon = processIcons[step.icon] ?? Rocket;
              return (
                <motion.div key={step.title} {...revealInViewProps(i * 0.08, 16)}>
                  <GlassCard h="100%">
                    <Stack gap="md">
                      <Text size="xs" fw={800} style={{ color: colors.primary, letterSpacing: "0.12em" }}>
                        {step.step}
                      </Text>
                      <FeatureIcon icon={Icon} size={44} />
                      <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>
  );
}

const ecommercePortfolioProjects = projectsByGroup("lojas");

export function EcommercePortfolioSection() {
  return (
    <Box component="section" py={80} id="portfolio-lojas" style={{ overflow: "hidden" }}>
      <Container size="xl">
        <Stack gap="xl" align="center">
          <SectionHeader
            eyebrow={ecommercePortfolioIntro.eyebrow}
            title={ecommercePortfolioIntro.title}
            highlight={ecommercePortfolioIntro.highlight}
            description={ecommercePortfolioIntro.description}
          />
          <Box w="100%">
            <PortfolioCarousel projects={ecommercePortfolioProjects} />
          </Box>
        </Stack>
      </Container>
    </Box>
  );
}