"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 {
  ClipboardList,
  Code2,
  Gauge,
  Layers,
  PenTool,
  Rocket,
  Search,
  Server,
  Smartphone,
  Sparkles,
  Zap,
  type LucideIcon,
} from "lucide-react";
import { SitesHeroVisual } from "@/components/sites/SitesHeroVisual";
import { SitesProblemVisual } from "@/components/sites/SitesProblemVisual";
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 {
  sitesHero,
  sitesProblemIntro,
  sitesProblemStats,
  sitesPortfolioIntro,
  sitesProcessIntro,
  sitesProcessSteps,
  sitesSolutionFeatures,
  sitesSolutionIntro,
} from "@/data/sites";
import { sitesPagePortfolioProjects } from "@/data/portfolio";
import { useServicePageContract } from "@/hooks/useContractAccess";
import { fadeUp, revealInViewProps } from "@/lib/motion";
import { useThemeColors } from "@/hooks/useThemeColors";
import { colors, typography } from "@/styles/tokens";

const solutionIcons: Record<string, LucideIcon> = {
  layers: Layers,
  gauge: Gauge,
  search: Search,
  smartphone: Smartphone,
  code: Code2,
  server: Server,
};

const processIcons: Record<string, LucideIcon> = {
  "clipboard-list": ClipboardList,
  "pen-tool": PenTool,
  zap: Zap,
  rocket: Rocket,
};

export function SitesHeroSection() {
  const theme = useThemeColors();
  const requestContract = useServicePageContract("sites");

  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,
                  },
                }}
              >
                {sitesHero.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 }}>
                {sitesHero.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 }}>
                {sitesHero.subtitle}
              </Text>
            </motion.div>

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

          <SitesHeroVisual />
        </SimpleGrid>

        <motion.div initial={false} animate="visible" variants={fadeUp(0.24)}>
          <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="md" mt={{ base: 48, md: 64 }}>
            {sitesHero.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>
          {sitesHero.trustNote && (
            <Text size="xs" ta="center" mt="sm" style={{ color: theme.muted }}>
              {sitesHero.trustNote}
            </Text>
          )}
        </motion.div>
      </Container>
    </Box>
  );
}

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

  return (
    <Box component="section" py={100} className="noga-grid-bg">
      <Container size="lg">
        <Stack gap={48}>
          <SimpleGrid cols={{ base: 1, lg: 2 }} spacing={{ base: 32, lg: 48 }} align="center">
            <Stack gap="xl">
              <SectionHeader
                eyebrow={sitesProblemIntro.eyebrow}
                title={sitesProblemIntro.title}
                highlight={sitesProblemIntro.highlight}
                align="left"
              />
              <Stack gap="md">
                {sitesProblemIntro.paragraphs.map((p) => (
                  <Text key={p.slice(0, 40)} size="lg" style={{ color: theme.body, lineHeight: 1.75 }}>
                    {p}
                  </Text>
                ))}
              </Stack>
            </Stack>
            <SitesProblemVisual />
          </SimpleGrid>
          <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
            {sitesProblemStats.map((item, i) => (
              <motion.div key={item.title} {...revealInViewProps(i * 0.08, 16)}>
                <GlassCard h="100%">
                  <Stack gap="md">
                    <Text size="2.5rem" fw={800} lh={1} style={{ color: colors.primary, letterSpacing: "-0.04em" }}>
                      {item.stat}
                    </Text>
                    <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 SitesSolutionSection() {
  const theme = useThemeColors();

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

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

  return (
    <Box component="section" py={100} className="noga-grid-bg">
      <Container size="xl">
        <Stack gap={56} align="center">
          <SectionHeader
            eyebrow={sitesProcessIntro.eyebrow}
            title={sitesProcessIntro.title}
            highlight={sitesProcessIntro.highlight}
            description={sitesProcessIntro.description}
          />
          <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg" w="100%">
            {sitesProcessSteps.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 sitesPortfolioProjects = sitesPagePortfolioProjects();

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