"use client";

import { Badge, Box, Container, Group, Stack, Text, Title } from "@mantine/core";
import { motion } from "framer-motion";
import { ArrowRight, Sparkles } from "lucide-react";
import { HeroFullBackground } from "@/components/hero/HeroFullBackground";
import { FloatingElements } from "@/components/motion/FloatingElements";
import { MagneticWrapper } from "@/components/motion/MagneticWrapper";
import { TypewriterText } from "@/components/motion/TypewriterText";
import { GlowOrb } from "@/components/ui/GlowOrb";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { OtherServicesButton } from "@/components/commerce/OtherServicesButton";
import { useDefaultPlanningContract } from "@/hooks/useContractAccess";
import { useThemeColors } from "@/hooks/useThemeColors";
import { fadeUp } from "@/lib/motion";
import { heroContent, heroRotatingPhrases } from "@/data/landing";
import { colors, typography } from "@/styles/tokens";

export function HeroSection() {
  const theme = useThemeColors();
  const startContract = useDefaultPlanningContract();

  return (
    <Box
      component="section"
      className="noga-hero-section"
      pos="relative"
      style={{ overflow: "hidden" }}
    >
      <HeroFullBackground />
      <Box pos="absolute" inset={0} style={{ zIndex: 2, pointerEvents: "none" }}>
        <FloatingElements intensity="subtle" />
        <GlowOrb size={520} top="5%" left="55%" opacity={0.35} />
        <GlowOrb size={360} top="55%" left="75%" opacity={0.2} />
      </Box>

      <Container
        size="xl"
        pos="relative"
        className="noga-hero-section__content"
        py={{ base: 48, sm: 64, md: 80 }}
        px="md"
      >
        <Stack gap="xl" maw={640} className="noga-hero-section__copy">
          <motion.div initial={false} animate="visible" variants={fadeUp(0)}>
            <Badge
              size="lg"
              radius="xl"
              variant="outline"
              leftSection={<Sparkles size={14} color={colors.primary} />}
              className="noga-float-badge"
              styles={{
                root: {
                  borderColor: "rgba(0, 155, 255, 0.35)",
                  background: "rgba(0, 155, 255, 0.12)",
                  color: colors.blueLight,
                  boxShadow: "0 0 24px rgba(0, 155, 255, 0.15)",
                  backdropFilter: "blur(8px)",
                },
              }}
            >
              {heroContent.badge}
            </Badge>
          </motion.div>

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

          <motion.div initial={false} animate="visible" variants={fadeUp(0.15)}>
            <Text
              size="xl"
              fw={600}
              style={{
                color: theme.body,
                maxWidth: 520,
                lineHeight: 1.4,
                textShadow: theme.isDark ? "0 2px 24px rgba(0, 0, 0, 0.5)" : "none",
              }}
            >
              {heroContent.subtitle}
            </Text>
          </motion.div>

          <motion.div initial={false} animate="visible" variants={fadeUp(0.2)}>
            <Text
              size="lg"
              style={{
                color: theme.muted,
                maxWidth: 520,
                lineHeight: 1.65,
                textShadow: theme.isDark ? "0 2px 20px rgba(0, 0, 0, 0.45)" : "none",
              }}
            >
              {heroContent.description}
            </Text>
          </motion.div>

          <motion.div initial={false} animate="visible" variants={fadeUp(0.3)}>
            <Group gap="md">
              <MagneticWrapper strength={0.14}>
                <PrimaryButton
                  size="lg"
                  rightSection={<ArrowRight size={18} />}
                  onClick={() => startContract()}
                >
                  {heroContent.ctaPrimary}
                </PrimaryButton>
              </MagneticWrapper>
              <MagneticWrapper strength={0.1}>
                <OtherServicesButton size="lg" />
              </MagneticWrapper>
            </Group>
          </motion.div>
        </Stack>
      </Container>
    </Box>
  );
}