'use client';

import { motion } from 'framer-motion';
import { ArrowRight, Sparkles, Zap, Shield, Play, Book, LogIn } from 'lucide-react';
import Image from 'next/image';
import { useBrand } from '@/components/providers/brand-provider';

export default function HeroSection() {
  const { brand, t } = useBrand();
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <Image
          src="https://cdn.abacus.ai/images/673ad142-4674-43a5-adc4-cb1e7a02b1db.jpg"
          alt="Ethereal AI network visualization"
          fill
          className="object-cover opacity-40"
          priority
        />
        <div className="absolute inset-0 bg-gradient-to-b from-brand-bg/80 via-[#0C1222]/60 to-brand-bg" />
      </div>
      
      {/* Animated gradient overlays */}
      <div className="absolute inset-0 hero-gradient z-0" />
      
      <div className="relative z-10 max-w-[1200px] mx-auto px-6 py-32 text-center">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          {/* Tagline badge */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.2 }}
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card mb-8"
          >
            <Sparkles className="w-4 h-4 text-brand" />
            <span className="text-sm text-gray-300">Deploy in weeks. See results in days.</span>
          </motion.div>

          {/* Main headline */}
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
            <span className="text-white">What if </span>
            <span className="gradient-text">every person on your team</span>
            <span className="text-white"> only did work that actually moved the needle?</span>
          </h1>

          {/* Subheadline */}
          <p className="text-lg md:text-xl text-gray-400 max-w-3xl mx-auto mb-10">
            {t(brand.marketing.heroSubheadline)}
          </p>

          {/* CTA buttons */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-4"
          >
            <a
              href="#design-partner"
              className="group px-8 py-4 bg-gradient-to-r from-brand-deep to-brand-secondary-deep text-white font-semibold rounded-xl hover:from-brand hover:to-brand-secondary transition-all shadow-lg shadow-brand-deep/25 hover:shadow-brand-deep/40 flex items-center gap-2"
            >
              {brand.marketing.heroCtaPrimary}
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </a>
            <a
              href="/roi-calculator"
              className="px-8 py-4 glass-card text-white font-semibold rounded-xl hover:bg-white/10 transition-all flex items-center gap-2"
            >
              Calculate Your ROI
            </a>
            <a
              href="/sales"
              className="px-8 py-4 glass-card text-white font-semibold rounded-xl hover:bg-white/10 transition-all flex items-center gap-2 border border-brand-deep/30"
            >
              <Play className="w-5 h-5 text-brand" />
              How It Works
            </a>
          </motion.div>

          {/* Quick access links */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.5 }}
            className="mt-8 flex flex-wrap items-center justify-center gap-6"
          >
            <a
              href="/docs"
              className="inline-flex items-center gap-2 text-gray-400 hover:text-brand transition-colors text-sm"
            >
              <Book className="w-4 h-4" />
              Docs
            </a>
            <span className="text-gray-700">|</span>
            <a
              href="/docs/user-manual"
              className="inline-flex items-center gap-2 text-gray-400 hover:text-brand transition-colors text-sm"
            >
              <Book className="w-4 h-4" />
              User Manual
            </a>
            <span className="text-gray-700">|</span>
            <a
              href="/ghost-control"
              className="inline-flex items-center gap-2 text-gray-400 hover:text-brand transition-colors text-sm"
            >
              <LogIn className="w-4 h-4" />
              Ghost Control Login
            </a>
          </motion.div>

          {/* Trust badges */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.6 }}
            className="mt-16 flex flex-wrap items-center justify-center gap-8"
          >
            <div className="flex items-center gap-2 text-gray-400">
              <Zap className="w-5 h-5 text-brand" />
              <span className="text-sm">Live in weeks, not months</span>
            </div>
            <div className="flex items-center gap-2 text-gray-400">
              <Shield className="w-5 h-5 text-brand-secondary-light" />
              <span className="text-sm">Zero disruption to your team</span>
            </div>
            <div className="flex items-center gap-2 text-gray-400">
              <Sparkles className="w-5 h-5 text-brand" />
              <span className="text-sm">Gets smarter every week</span>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}
