"use client";

import { Box, Container, Grid, Stack, Text, Title } from "@mantine/core";
import { ArrowRight, Cloud, Server, Shield, Zap } from "lucide-react";
import { motion } from "framer-motion";
import { HostingBannerVisual } from "@/components/hosting/HostingBannerVisual";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { hostingBanner } from "@/data/landing";
import { fadeUp } from "@/lib/motion";
import { useThemeColors } from "@/hooks/useThemeColors";
import { colors, gradients } from "@/styles/tokens";

const TRUST = [
  { icon: Shield, label: "Segurança" },
  { icon: Zap, label: "Velocidade" },
  { icon: Server, label: "Estabilidade" },
  { icon: Cloud, label: "Cloud premium" },
];

export function HostingBannerSection() {
  const theme = useThemeColors();
  const accent = colors.primary;
  const accentGlow = theme.isDark ? colors.blueNeon : colors.primary;

  return (
    <Box component="section" py={80} id="hospedagem-nogahost">
      <Container size="xl">
        <Box
          pos="relative"
          className="noga-grid-bg"
          style={{
            borderRadius: 28,
            overflow: "hidden",
            border: theme.isDark
              ? "1px solid rgba(0, 155, 255, 0.28)"
              : "1px solid rgba(15, 23, 42, 0.08)",
            boxShadow: theme.isDark
              ? "0 40px 100px rgba(0, 0, 0, 0.45), 0 0 56px rgba(0, 155, 255, 0.15)"
              : "0 16px 48px rgba(15, 23, 42, 0.08)",
            background: theme.isDark
              ? gradients.dark
              : "linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%)",
            minHeight: "clamp(360px, 40vw, 440px)",
          }}
        >
          {theme.isDark && (
            <motion.div
              animate={{
                opacity: [0.35, 0.65, 0.35],
                scale: [1, 1.05, 1],
              }}
              transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
              style={{
                position: "absolute",
                right: "-10%",
                top: "-20%",
                width: "55%",
                height: "120%",
                background: `radial-gradient(ellipse 60% 50% at 50% 50%, ${accent}35, transparent 70%)`,
                pointerEvents: "none",
              }}
            />
          )}
          {theme.isDark && (
            <Box
              pos="absolute"
              inset={0}
              style={{
                background: `linear-gradient(105deg, rgba(6, 8, 24, 0.97) 0%, rgba(6, 8, 24, 0.75) 45%, rgba(6, 8, 24, 0.35) 100%)`,
                pointerEvents: "none",
              }}
            />
          )}

          <Grid
            gutter={{ base: 32, md: 48 }}
            p={{ base: 32, md: 48 }}
            align="center"
            pos="relative"
            style={{ zIndex: 2 }}
          >
            <Grid.Col span={{ base: 12, md: 7 }}>
              <Stack gap="xl" maw={600}>
                <motion.div initial={false} animate="visible" variants={fadeUp(0)}>
                  <Text
                    size="xs"
                    tt="uppercase"
                    fw={700}
                    w="fit-content"
                    px={10}
                    py={5}
                    style={{
                      borderRadius: 8,
                      background: "rgba(0, 155, 255, 0.15)",
                      color: accentGlow,
                      border: "1px solid rgba(0, 155, 255, 0.4)",
                      letterSpacing: "0.1em",
                    }}
                  >
                    {hostingBanner.eyebrow}
                  </Text>
                </motion.div>

                <motion.div initial={false} animate="visible" variants={fadeUp(0.06)}>
                  <Title
                    order={2}
                    style={{
                      color: theme.heading,
                      fontSize: "clamp(1.5rem, 3vw, 2.1rem)",
                      fontWeight: 800,
                      letterSpacing: "-0.03em",
                      lineHeight: 1.15,
                    }}
                  >
                    {hostingBanner.title}
                  </Title>
                </motion.div>

                <motion.div initial={false} animate="visible" variants={fadeUp(0.1)}>
                  <Text size="md" style={{ color: theme.body, lineHeight: 1.7 }}>
                    {hostingBanner.description}
                  </Text>
                </motion.div>

                <motion.div initial={false} animate="visible" variants={fadeUp(0.14)}>
                  <Box style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
                    {TRUST.map(({ icon: Icon, label }, i) => (
                      <motion.div
                        key={label}
                        initial={{ opacity: 0, y: 8 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ delay: 0.08 * i }}
                        whileHover={{
                          scale: 1.04,
                          boxShadow: "0 0 20px rgba(0, 155, 255, 0.25)",
                        }}
                      >
                        <Box
                          px="sm"
                          py={6}
                          style={{
                            borderRadius: 8,
                            background: "rgba(0, 155, 255, 0.08)",
                            border: "1px solid rgba(0, 155, 255, 0.22)",
                            display: "flex",
                            alignItems: "center",
                            gap: 6,
                          }}
                        >
                          <Icon size={14} color={accentGlow} />
                          <Text size="xs" fw={600} style={{ color: theme.isDark ? colors.grayLight : theme.body }}>
                            {label}
                          </Text>
                        </Box>
                      </motion.div>
                    ))}
                  </Box>
                </motion.div>

                <motion.div initial={false} animate="visible" variants={fadeUp(0.18)}>
                  <PrimaryButton
                    component="a"
                    href={hostingBanner.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    size="lg"
                    rightSection={<ArrowRight size={18} />}
                    style={{
                      width: "fit-content",
                      background: theme.isDark
                        ? `linear-gradient(135deg, ${colors.secondary} 0%, ${accent} 55%, ${accentGlow} 100%)`
                        : undefined,
                      boxShadow: theme.isDark ? "0 0 32px rgba(0, 155, 255, 0.45)" : "0 4px 16px rgba(0, 155, 255, 0.25)",
                    }}
                  >
                    {hostingBanner.ctaLabel}
                  </PrimaryButton>
                </motion.div>
              </Stack>
            </Grid.Col>

            <Grid.Col span={{ base: 12, md: 5 }}>
              <HostingBannerVisual />
            </Grid.Col>
          </Grid>
        </Box>
      </Container>
    </Box>
  );
}