'use client';

import { motion } from 'framer-motion';
import { ArrowRight } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
  staggerContainer,
  revealVariants,
  scaleVariants,
  viewportOnce,
} from '@/lib/animations';
import Button from '@/components/ui/Button';
import ScrollReveal from '@/components/ui/ScrollReveal';

// ─── Animation variants ────────────────────────────────────────────────────────

const ease = [0.16, 1, 0.3, 1] as const;

const decorLineVariants = {
  hidden: { scaleX: 0 },
  visible: {
    scaleX: 1,
    transition: { duration: 0.7, ease },
  },
};

// ─── Component ─────────────────────────────────────────────────────────────────

export default function ServicesCTA() {
  return (
    <section
      className="bg-surface-low py-24"
      aria-label="Call to action"
    >
      <div className="container mx-auto px-6">

        {/* Outer wrapper with subtle rim */}
        <div
          className={cn(
            'relative overflow-hidden rounded-xl bg-surface-high',
            'shadow-subtle',
          )}
          style={{
            boxShadow: 'inset 0 0 0 1px rgba(194,199,206,0.3), 0 20px 40px rgba(25,28,29,0.06)',
          }}
        >
          {/* Background geometry — purely decorative */}
          <div
            aria-hidden="true"
            className="absolute inset-0 overflow-hidden rounded-xl pointer-events-none"
          >
            {/* Primary radial glow */}
            <div
              className="absolute rounded-full"
              style={{
                width: '60%',
                height: '200%',
                top: '-50%',
                right: '-10%',
                background:
                  'radial-gradient(ellipse, rgba(91,164,217,0.07) 0%, transparent 70%)',
              }}
            />
            {/* Secondary glow */}
            <div
              className="absolute rounded-full"
              style={{
                width: '40%',
                height: '160%',
                bottom: '-60%',
                left: '-5%',
                background:
                  'radial-gradient(ellipse, rgba(0,100,148,0.05) 0%, transparent 70%)',
              }}
            />
            {/* Dot grid */}
            <div
              className="absolute inset-0 opacity-[0.025]"
              style={{
                backgroundImage:
                  'radial-gradient(circle, var(--color-primary-dark) 1px, transparent 1px)',
                backgroundSize: '28px 28px',
              }}
            />
          </div>

          {/* Content */}
          <div className="relative px-8 py-16 md:px-16 md:py-20 flex flex-col items-center text-center gap-6">

            {/* Eyebrow */}
            <ScrollReveal variant="fadeUp">
              <span className="label-md text-primary">
                Let&apos;s Talk
              </span>
            </ScrollReveal>

            {/* Heading */}
            <ScrollReveal variant="fadeUp" delay={0.08}>
              <h2 className="font-serif font-semibold tracking-headline text-on-surface text-4xl md:text-5xl max-w-2xl leading-[1.1]">
                Ready to get started?
              </h2>
            </ScrollReveal>

            {/* Subtitle */}
            <ScrollReveal variant="fadeUp" delay={0.16}>
              <p className="text-lg text-outline leading-relaxed max-w-xl">
                Walk through a few questions and we&apos;ll put together a project
                brief tailored to you — no commitment required, just clarity.
              </p>
            </ScrollReveal>

            {/* CTA buttons */}
            <ScrollReveal variant="fadeUp" delay={0.24}>
              <div className="flex flex-col sm:flex-row items-center gap-3 mt-2">
                <Button
                  href="/#configure"
                  variant="primary"
                  size="lg"
                  arrow
                >
                  Start Your Project
                </Button>
                <Button
                  href="mailto:hello@letsbe.biz"
                  variant="secondary"
                  size="lg"
                >
                  hello@letsbe.biz
                </Button>
              </div>
            </ScrollReveal>

            {/* Reassurance */}
            <ScrollReveal variant="fadeIn" delay={0.3}>
              <p className="text-sm text-outline/60 mt-1">
                No commitment required — just a conversation about what&apos;s possible.
              </p>
            </ScrollReveal>

          </div>
        </div>
      </div>
    </section>
  );
}
