import { useState } from 'react';
import { motion } from 'framer-motion';
import { cn } from '../../../lib/cn';
import { buttonGhostLightClass } from '../../../lib/buttonStyles';
import ContactForm from '../../../components/ui/ContactForm';

const useCases = [
  {
    title: 'Project Mycelium',
    highlight: 'Decentralized Core',
    description:
      'Project Mycelium turns GeoMind primitives into community services, giving underserved regions, nomads, and privacy seekers decentralized storage, secure networking, and personal agents while sustaining host demand.',
    image: '/images/mycelium.jpeg',
  },
  {
    title: 'Digital Free Zone',
    highlight: 'Sovereign Innovation',
    description:
      'An economic bridge in Zanzibar for digital assets with dedicated governance, regulation, and dispute resolution so builders can deploy compliant Web3, AI, and fintech products on GeoMind-powered future-ready infrastructure.',
    image: '/images/freezone.jpeg',
    titleOffset: '-mt-2 sm:-mt-3',
  },
  {
    title: 'COOP Cloud',
    highlight: 'People-Powered Cloud',
    description:
      'COOP Cloud teams with the International Cooperative Alliance so 1.2 billion co-op members can run shared infrastructure and launch services together on GeoMind, building a self-sustaining digital infrastructure that serves their communities.',
    image: '/images/coop.jpeg',
    titleOffset: '-mt-3 sm:-mt-4',
  },
  {
    title: 'Cloud for Nations',
    highlight: 'Digital Sovereignty',
    description:
      'Most governments and citizens rely on foreign clouds, exposing finances and national security. GeoMind equips physical and digital states with sovereign infrastructure so they control data, AI, and services on their own terms.',
    image: '/images/countries.jpeg',
  },
  {
    title: 'Real Estate Deployments',
    highlight: 'Underutilized Spaces',
    description:
      'Deploy GeoMind in underutilized spaces with rapid integration into building utilities. Turn idle rooms into revenue generating data centers at minimal additional cost. Deliver residents and employees data sovereignty on tech that requires minimal maintenance.',
    image: '/images/hometech2.jpg',
    featured: true,
  },
];

export const UseCasesGrid = () => {
  const [isContactFormOpen, setIsContactFormOpen] = useState(false);
  const [formType, setFormType] = useState<'deploy' | 'offtake' | 'investor'>('deploy');

  const handleOpenForm = (type: 'deploy' | 'offtake' | 'investor') => {
    setFormType(type);
    setIsContactFormOpen(true);
  };

  return (
    <section className="px-4 py-16 text-slate-100 sm:px-0 lg:py-24">
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
      >
        <h2 className="text-center text-3xl font-semibold text-white sm:text-4xl">Use Cases</h2>
        <p className="mt-5 max-w-4xl text-center text-base text-slate-300 sm:text-lg sm:mx-auto">
          From decentralized cores to national-scale infrastructure, GeoMind translates sovereign
          compute into deployable products. Each use case blends hyperscale performance with edge
          responsiveness, enabling partners to launch resilient, energy-efficient capacity exactly
          where it is needed.
        </p>
        <div className="mt-12 -mx-4 flex snap-x snap-mandatory gap-6 overflow-x-auto pb-6 sm:mx-0 sm:grid sm:grid-cols-2 sm:gap-8 sm:overflow-visible sm:pb-0 sm:snap-none xl:grid-cols-4">
          {useCases.map((useCase, index) => (
            <motion.article
              key={useCase.title}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, amount: 0.25 }}
              transition={{ duration: 0.5, delay: index * 0.05 }}
              className={cn(
                'group relative flex h-full min-w-[80vw] snap-center flex-col overflow-hidden rounded-3xl border border-white/10 bg-slate-950/80 transition-all duration-300 hover:-translate-y-1 hover:border-brand-400/50 hover:shadow-[0_25px_40px_-24px_rgba(15,118,230,0.45)] sm:min-w-0',
                useCase.featured && 'min-w-[88vw] sm:col-span-2 xl:col-span-4 sm:flex sm:flex-row sm:items-start sm:gap-8'
              )}
            >
              <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                <div className="absolute inset-0 bg-gradient-to-br from-brand-500/15 via-transparent to-brand-200/10" />
              </div>
              <div
                className={cn(
                  'relative h-48 overflow-hidden sm:h-56 lg:h-full',
                  useCase.featured && 'sm:h-full sm:w-[42%] lg:w-[38%]'
                )}
              >
                <img
                  src={useCase.image}
                  alt={useCase.title}
                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-ink/80 via-transparent to-transparent" />
              </div>
              <div
                className={cn(
                  'relative flex h-full flex-col items-center px-6 pb-6 pt-6 text-center sm:px-8 sm:pb-8 sm:pt-8',
                  useCase.featured && 'sm:flex-1 sm:px-10 sm:pb-12 sm:pt-12'
                )}
              >
                <div className={cn('flex flex-col items-center gap-3', useCase.titleOffset)}>
                  <span className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-200/80">
                    {useCase.highlight}
                  </span>
                  <h3 className="text-xl font-semibold text-white">{useCase.title}</h3>
                </div>
                <p className="mt-6 text-sm leading-6 text-slate-300 sm:mt-8">{useCase.description}</p>
              </div>
            </motion.article>
          ))}
        </div>
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.6, ease: 'easeOut', delay: 0.2 }}
          className="mt-16 overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#0d112a] via-[#111f3f] to-[#1c2257] p-8 text-white shadow-[0_30px_90px_-50px_rgba(15,23,42,1)] sm:p-12 lg:p-16"
        >
          <div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
            <div className="max-w-2xl space-y-4">
              <p className="text-xs font-semibold uppercase tracking-[0.4em] text-white/60">
                Become a Partner
              </p>
              <h3 className="text-2xl font-semibold sm:text-3xl">
                Build sovereign infrastructure with GeoMind&apos;s ecosystem.
              </h3>
              <p className="text-base text-white/70">
                Pick the path that delivers outcomes fast: deploy capacity, lock in offtake, or invest in
                the platform redefining cloud infrastructure.
              </p>
            </div>
            <div className="grid w-full gap-4 sm:grid-cols-2 lg:w-auto lg:grid-cols-1">
              <button
                onClick={() => handleOpenForm('deploy')}
                className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
              >
                Deploy Capacity
              </button>
              <button
                onClick={() => handleOpenForm('offtake')}
                className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
              >
                Offtake Capacity
              </button>
              <button
                onClick={() => handleOpenForm('investor')}
                className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
              >
                Invest in the Tech
              </button>
            </div>
          </div>
        </motion.div>
      </motion.div>
      <ContactForm
        isOpen={isContactFormOpen}
        onClose={() => setIsContactFormOpen(false)}
        title={formType === 'deploy' ? 'Deploy Capacity' : formType === 'offtake' ? 'Offtake Capacity' : 'Invest in the Tech'}
        formType={formType}
      />
    </section>
  );
};