"use client";

import { Box, Container, Group, Stack, Text, Title } from "@mantine/core";
import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";
import { GlowOrb } from "@/components/ui/GlowOrb";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { SecondaryButton } from "@/components/ui/SecondaryButton";
import { ctaContent } from "@/data/landing";
import { useDefaultPlanningContract } from "@/hooks/useContractAccess";
import { colors, gradients } from "@/styles/tokens";

export function CtaSection() {
  const startContract = useDefaultPlanningContract();

  return (
    <Box component="section" py={100} pos="relative" id="cta">
      <GlowOrb size={400} top="50%" left="50%" opacity={0.3} />
      <Container size="md" pos="relative">
        <motion.div
          initial={{ opacity: 1, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
        >
          <Box
            p={{ base: 40, md: 64 }}
            style={{
              borderRadius: 24,
              background: gradients.primary,
              border: "1px solid rgba(0, 155, 255, 0.3)",
              boxShadow: "0 0 60px rgba(0, 155, 255, 0.25)",
              textAlign: "center",
            }}
          >
            <Stack gap="lg" align="center">
              <Title order={2} c={colors.white} maw={560} style={{ letterSpacing: "-0.03em" }}>
                {ctaContent.title}
              </Title>
              <Text maw={520} style={{ color: "rgba(255,255,255,0.9)", lineHeight: 1.65 }}>
                {ctaContent.description}
              </Text>
              <Text maw={520} size="sm" style={{ color: "rgba(255,255,255,0.75)", lineHeight: 1.6 }}>
                {ctaContent.subdescription}
              </Text>
              <Group gap="md" justify="center">
                <PrimaryButton
                  size="lg"
                  rightSection={<ArrowRight size={18} />}
                  styles={{ root: { background: colors.white, color: colors.secondary } }}
                  onClick={() => startContract()}
                >
                  {ctaContent.ctaPrimary}
                </PrimaryButton>
                <SecondaryButton
                  size="lg"
                  style={{
                    borderColor: "rgba(255,255,255,0.5)",
                    color: colors.white,
                  }}
                  onClick={() => startContract()}
                >
                  {ctaContent.ctaSecondary}
                </SecondaryButton>
              </Group>
            </Stack>
          </Box>
        </motion.div>
      </Container>
    </Box>
  );
}