computer/components/DGXSparkHighlight.tsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useCart } from '../src/context/CartContext';

const DGXSparkHighlight: React.FC = () => {
  const navigate = useNavigate();
  const { addItem } = useCart();
  const [added, setAdded] = React.useState(false);

  const handleAddToCart = () => {
    addItem({
      id: 'dgx-spark',
      name: 'DGX Spark',
      price: 3999,
      description: 'Perfect for startups and researchers to kickstart projects on a powerful, dedicated DGX instance.',
      purchaseMethod: 'online',
      image: '/nvidia-dgx-spark-and-nvidia-dgx-station.jpg',
    });
    setAdded(true);
    setTimeout(() => {
      navigate('/cart');
    }, 800);
  };

  return (
    <section id="dgx-spark" className="py-20 md:py-28 bg-gradient-to-b from-dark-bg to-dark-card relative overflow-hidden">
      {/* Decorative elements */}
      <div className="absolute inset-0 opacity-30">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-[120px]" />
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-secondary/20 rounded-full blur-[120px]" />
      </div>

      <div className="container mx-auto px-6 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Left: Image */}
          <div className="relative">
            <div className="absolute inset-0 bg-gradient-to-br from-primary/30 to-secondary/30 blur-3xl rounded-full" />
            <img
              src="/nvidia-dgx-spark-and-nvidia-dgx-station.jpg"
              alt="NVIDIA DGX Spark"
              className="relative rounded-2xl shadow-2xl border border-primary/30"
            />
            <div className="absolute -top-4 -right-4 bg-primary text-black font-bold px-6 py-3 rounded-full shadow-lg transform rotate-12">
              Only $3,999
            </div>
          </div>

          {/* Right: Content */}
          <div>
            <div className="inline-flex items-center gap-2 bg-primary/10 border border-primary/30 rounded-full px-4 py-2 mb-6">
              <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
              <span className="text-primary font-semibold">Most Popular Choice</span>
            </div>

            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              DGX Spark
              <span className="block text-2xl md:text-3xl text-primary mt-2">
                Your Gateway to AI Supercomputing
              </span>
            </h2>

            <p className="text-lg text-gray-300 mb-8 leading-relaxed">
              Perfect for startups and researchers to kickstart projects on a powerful, dedicated DGX instance.
              Get started with 100 hours of compute included, pre-configured AI stack, and 2TB of NVMe storage.
            </p>

            {/* Key Features */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
              <div className="flex items-start gap-3">
                <div className="flex-shrink-0 w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                  <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                  </svg>
                </div>
                <div>
                  <h3 className="text-white font-semibold mb-1">Dedicated Instance</h3>
                  <p className="text-sm text-gray-400">Your own DGX system, not shared</p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <div className="flex-shrink-0 w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                  <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div>
                  <h3 className="text-white font-semibold mb-1">100 Hours Included</h3>
                  <p className="text-sm text-gray-400">Get started immediately</p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <div className="flex-shrink-0 w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                  <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
                  </svg>
                </div>
                <div>
                  <h3 className="text-white font-semibold mb-1">2 TB NVMe Storage</h3>
                  <p className="text-sm text-gray-400">Fast, persistent storage</p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <div className="flex-shrink-0 w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
                  <svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                  </svg>
                </div>
                <div>
                  <h3 className="text-white font-semibold mb-1">Pre-configured AI Stack</h3>
                  <p className="text-sm text-gray-400">Ready-to-use environment</p>
                </div>
              </div>
            </div>

            {/* Limited Supply Banner */}
            <div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-4 mb-6">
              <div className="flex items-start gap-3">
                <svg className="w-6 h-6 text-amber-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                <div>
                  <p className="text-amber-400 font-semibold mb-1">Limited Supply</p>
                  <p className="text-sm text-gray-300">Maximum 5 units per order. Secure your DGX Spark today before they're gone.</p>
                </div>
              </div>
            </div>

            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row gap-4">
              <button
                onClick={handleAddToCart}
                disabled={added}
                className={`flex-1 font-bold py-4 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center gap-2 ${
                  added
                    ? 'bg-green-500 text-white cursor-default'
                    : 'bg-primary text-black hover:bg-primary-dark shadow-lg hover:shadow-primary/50'
                }`}
              >
                {added ? (
                  <>
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                    Added to Cart!
                  </>
                ) : (
                  <>
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                    Add to Cart - $3,999
                  </>
                )}
              </button>

              <button
                onClick={() => {
                  const pricingSection = document.getElementById('pricing');
                  if (pricingSection) {
                    pricingSection.scrollIntoView({ behavior: 'smooth' });
                  }
                }}
                className="px-8 py-4 border-2 border-primary text-primary font-bold rounded-lg hover:bg-primary/10 transition-all duration-300"
              >
                View All Plans
              </button>
            </div>

            {/* Payment Badge */}
            <div className="mt-6 flex items-center gap-4 text-sm text-gray-400">
              <div className="flex items-center gap-2">
                <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>Secure payment via Hanzo Billing</span>
              </div>
              <div className="flex items-center gap-2">
                <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                <span>Instant setup</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default DGXSparkHighlight;