'use client';

import Image from 'next/image';
import { useEffect, useMemo, useState } from 'react';
import { motion } from 'framer-motion';
import {
  ArrowLeft,
  Check,
  ChevronDown,
  Cloud,
  Database,
  Gauge,
  Headphones,
  Rocket,
  ShieldCheck,
  Zap,
} from 'lucide-react';
import { useI18n } from '../../../../i18n/provider';
import { serviceContent, type ServiceSlug } from './services.data';
import { useTheme } from 'next-themes';
import { NetworkNexus } from '../../../components/network-nexus';
import FaqTimelineAccordion from '../../../components/faq-timeline-accordion';

function HeroIcon({ name }: { name: 'shield' | 'wp' | 'speed' | 'support' }) {
  const className =
    'w-5 h-5 text-[#80c8f5] drop-shadow-[0_0_12px_rgba(128,200,245,0.25)]';
  switch (name) {
    case 'shield':
      return <ShieldCheck className={className} />;
    case 'support':
      return <Headphones className={className} />;
    case 'speed':
      return <Zap className={className} />;
    case 'wp':
      return <Cloud className={className} />;
  }
}

function StatIcon({ name }: { name: 'uptime' | 'support' | 'nvme' | 'security' }) {
  const className =
    'w-5 h-5 text-[#84e1bc] drop-shadow-[0_0_14px_rgba(132,225,188,0.22)]';
  switch (name) {
    case 'uptime':
      return <Gauge className={className} />;
    case 'support':
      return <Headphones className={className} />;
    case 'nvme':
      return <Database className={className} />;
    case 'security':
      return <ShieldCheck className={className} />;
  }
}

function GradientIconBox({ children }: { children: React.ReactNode }) {
  return (
    <span className="relative inline-flex items-center justify-center w-10 h-10 rounded-2xl border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md overflow-hidden">
      <span className="absolute inset-0 bg-gradient-to-br from-[#80c8f5]/22 via-transparent to-[#84e1bc]/18" />
      <span className="absolute -top-8 -right-8 w-16 h-16 bg-[#80c8f5]/18 blur-2xl rounded-full" />
      <span className="absolute -bottom-8 -left-8 w-16 h-16 bg-[#84e1bc]/18 blur-2xl rounded-full" />
      <span className="relative">{children}</span>
    </span>
  );
}

function FeatureIcon({ name }: { name: 'bolt' | 'shield' | 'cloud' | 'wp' | 'headphones' | 'rocket' }) {
  const className = 'w-6 h-6 text-current drop-shadow-[0_0_14px_rgba(255,255,255,0.18)]';
  switch (name) {
    case 'bolt':
      return <Zap className={className} />;
    case 'shield':
      return <ShieldCheck className={className} />;
    case 'cloud':
      return <Cloud className={className} />;
    case 'wp':
      return <Cloud className={className} />;
    case 'headphones':
      return <Headphones className={className} />;
    case 'rocket':
      return <Rocket className={className} />;
  }
}

export default function ServiceDetailPage({ slug }: { slug: ServiceSlug }) {
  const { locale } = useI18n();
  const content = useMemo(() => serviceContent[slug][locale], [slug, locale]);
  const dir = locale === 'en' ? 'ltr' : 'rtl';
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => setMounted(true), []);


  const sectionMotion = {
    initial: { opacity: 0, y: 24 },
    whileInView: { opacity: 1, y: 0 },
    transition: { duration: 0.7, ease: 'easeOut' as const },
    viewport: { once: true, amount: 0.2 },
  };

  const heroContainer = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.12, delayChildren: 0.05 },
    },
  };

  const heroItem = {
    hidden: { opacity: 0, y: 16, filter: 'blur(8px)' },
    visible: {
      opacity: 1,
      y: 0,
      filter: 'blur(0px)',
      transition: { duration: 0.75, ease: 'easeOut' as const },
    },
  };

  return (
    <div dir={dir} className="text-[color:var(--text-primary)] dark:bg-[#000315] ">
      {/* Hero */}
      <section className="relative overflow-hidden pt-28 lg:pt-32">
        <div className="absolute inset-0 z-0">
          {/* Light base background must be pure white; Dark base = #010D1F */}
          {/* <div className="absolute inset-0 bg-white dark:bg-[#010D1F]" /> */}

          {/* Artwork (smaller, left-side so text doesn't blend) */}
          <motion.div
            initial={{ opacity: 0, scale: 1.03 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true, amount: 0.35 }}
            transition={{ duration: 1.1, ease: 'easeOut' }}
            className="absolute inset-0 opacity-[var(--hero-image-opacity)]"
          >
            <div className={`absolute inset-y-0 ${locale === 'en' ? 'right-20' : 'left-20'} w-[70%] max-w-[1120px] pointer-events-none`}>
              <Image
                src={
                  mounted && resolvedTheme === 'light'
                    ? '/images/services-hero-light.png'
                    : '/images/services-hero-dark.png'
                }
                alt=""
                fill
                priority
                unoptimized
                quality={100}
                sizes="(min-width: 1024px) 52vw, 100vw"
                className={`object-contain ${locale === 'en' ? 'object-right scale-x-[-1]' : 'object-left'}`}
              />
            </div>

            {/* Side fade so text never blends into artwork */}
            <div className={`absolute inset-y-0 ${locale === 'en' ? 'left-0' : 'right-0'} w-[78%] pointer-events-none`} />

            {/* Bottom fade */}
            <div className="absolute inset-x-0 bottom-0 h-2/3 pointer-events-none" />
            {/* Dark-only bottom fade (from #010D1F to transparent) */}
            <div className="absolute inset-x-0 bottom-0 h-2/3 pointer-events-none hidden dark:block" />
          </motion.div>
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-10">
          <div className="flex items-center justify-start gap-6 mb-10 text-xs text-[color:var(--text-muted-2)]">
            <div className="hidden lg:block" />
            <div className="flex items-center gap-2">
              {content.breadcrumbs.map((b, idx) => (
                <span key={`${b}-${idx}`} className="flex items-center gap-2">
                  <span className={idx === content.breadcrumbs.length - 1 ? 'text-[#84e1bc]' : ''}>
                    {b}
                  </span>
                  {idx !== content.breadcrumbs.length - 1 ? (
                    <span className="opacity-50">/</span>
                  ) : null}
                </span>
              ))}
            </div>
          </div>

          <motion.div
            variants={heroContainer}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, amount: 0.35 }}
            className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center"
          >

            {/* Right side - text */}
            <div className={`lg:col-span-6 ${locale === 'en' ? 'lg:order-1' : 'lg:order-2'}`}>
              <motion.div
                variants={heroItem}
                className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[color:var(--border-10)] bg-[color:var(--glass-05)] backdrop-blur-md text-sm text-[#84e1bc] mb-5"
              >
                {content.heroBadge}
              </motion.div>

              <motion.h1 variants={heroItem} className="text-4xl lg:text-6xl font-bold leading-[1.25] mb-5 en-text-left">
                {content.title}
                <br />
                <span className="text-[#84e1bc]">{content.accent}</span>
              </motion.h1>

              <motion.p variants={heroItem} className="text-[color:var(--text-muted)] text-base lg:text-lg leading-relaxed max-w-xl mb-8 en-text-left">
                {content.subtitle}
              </motion.p>

              <motion.div variants={heroItem} className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-[color:var(--text-muted)] mb-10">
                {content.heroHighlights.map((h) => (
                  <div key={h.label} className="flex items-center gap-3  justify-start">
                    <GradientIconBox>
                      <HeroIcon name={h.icon} />
                    </GradientIconBox>
                    <span className="en-text-left">{h.label}</span>
                  </div>
                ))}
              </motion.div>

              <motion.div variants={heroItem} className="flex flex-wrap items-center gap-4 en-justify-start">
                <button className="flex items-center justify-center gap-2 px-8 py-4 rounded-2xl bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] font-bold text-sm hover:opacity-90 transition-opacity min-w-[190px]">
                  <ArrowLeft className="w-5 h-5" /> {content.heroPrimaryCta}
                </button>
                <button className="flex items-center justify-center gap-2 px-8 py-4 rounded-2xl border border-[color:var(--border-20)] bg-[color:var(--glass-05)] backdrop-blur-sm text-[color:var(--text-primary)] font-medium text-sm hover:bg-[color:var(--glass-10)] transition-colors min-w-[190px]">
                  <ChevronDown className="w-5 h-5" /> {content.heroSecondaryCta}
                </button>
              </motion.div>
            </div>
          </motion.div>
        </div>

        <div className="max-w-7xl mx-auto px-6 lg:px-10 mt-12">
          <div className="glass-rotating-border rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] overflow-hidden">
            <div className="grid grid-cols-2 lg:grid-cols-4 divide-y divide-[color:var(--border-10)] lg:divide-y-0 lg:divide-x lg:divide-[color:var(--border-10)]">
              {content.quickStats.map((s, idx) => (
                <div
                  key={s.label}
                  className="px-5 py-5 flex items-center justify-center gap-4"
                >
                  <GradientIconBox>
                    <StatIcon name={s.icon} />
                  </GradientIconBox>
                  <div className="leading-tight">
                    <div className="text-xs text-[color:var(--text-muted-2)]">{s.label}</div>
                    <div className="text-sm font-semibold text-[color:var(--text-primary)]">{s.value}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* <div className="h-16" /> */}
      </section>

      {/* Features */}
      <motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-20">
        <div className="text-center mb-10">
          <h2 className="text-2xl lg:text-3xl font-bold">{content.featuresTitle}</h2>
          <p className="mt-3 text-[color:var(--text-muted)]">{content.featuresSubtitle}</p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {content.features.map((f, idx) => {
            const accents = [
              { border: '#a78bfa', icon: '#a78bfa' }, // purple
              { border: '#60a5fa', icon: '#60a5fa' }, // blue
              { border: '#22d3ee', icon: '#22d3ee' }, // cyan
              { border: '#34d399', icon: '#34d399' }, // green
            ];
            const accent = accents[idx % accents.length];

            return (
              <div
                key={f.title}
                className={[
                  'group relative rounded-3xl overflow-hidden',
                  'border bg-[color:var(--glass-04)]',
                  'shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_24px_80px_rgba(0,0,0,0.35)]',
                  'light:shadow-[0_0_0_1px_rgba(2,6,23,0.06),0_18px_60px_rgba(2,6,23,0.08)]',
                  'transition-transform duration-300 hover:-translate-y-0.5',
                ].join(' ')}
                style={{
                  borderColor: `${accent.border}33`,
                
                }}
              >
                <div className="relative p-6">
                  <div className="pointer-events-none absolute inset-0 rounded-3xl ring-1 ring-white/10 light:ring-black/5" />

                  <div className="relative mb-5 inline-flex">
                    <span
                      className="relative w-14 h-14 rounded-2xl border bg-[color:var(--glass-05)] dark:bg-[rgba(9,17,32,0.60)] light:bg-white/80 backdrop-blur-md flex items-center justify-center"
                      style={{
                        borderColor: `${accent.icon}55`,
                        boxShadow: `0 0 0 1px ${accent.icon}22, 0 0 32px ${accent.icon}26`,
                        color: accent.icon,
                      }}
                    >
                      <FeatureIcon name={f.icon} />
                    </span>
                  </div>

                  <div className="relative text-lg font-semibold mb-2">{f.title}</div>
                  <div className="relative text-sm leading-relaxed text-[color:var(--text-muted)]">{f.desc}</div>
                </div>
              </div>
            );
          })}
        </div>
      </motion.section>

      {/* Network architecture (Core hub) */}
      <NetworkNexus
        badgeText={content.heroBadge}
        heading={content.title}
        description={content.subtitle}
        coreLabel={locale === 'en' ? 'CORE HUB' : 'هسته مرکزی'}
        features={content.features}
        quickStats={content.quickStats}
      />

      {/* Plans */}
      <motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-24">
        <div className="text-center mb-12">
          <h2 className="text-2xl lg:text-3xl font-bold">{content.plansTitle}</h2>
          <p className="mt-3 text-[color:var(--text-muted)]">{content.plansSubtitle}</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
          {content.plans.map((p) => (
            <div
              key={p.name}
              className={[
                'relative rounded-3xl border p-6 flex flex-col',
                p.featured
                  ? 'border-[#84e1bc]/40 bg-gradient-to-b from-[#84e1bc]/10 to-[color:var(--glass-04)] '
                  : 'border-[color:var(--border-10)] bg-[color:var(--glass-04)]',
              ].join(' ')}
            >
              {p.badge ? (
                <div className="absolute top-4 left-4 px-3 py-1 rounded-full text-xs font-semibold bg-[#84e1bc]/15 text-[#84e1bc] border border-[#84e1bc]/25">
                  {p.badge}
                </div>
              ) : null}
              <div className="text-base font-semibold mb-3">{p.name}</div>
              <div className="flex items-end gap-2 mb-1">
                <div className="text-3xl font-bold">{p.price}</div>
                <div className="text-xs text-[color:var(--text-muted-2)] pb-1">{p.period}</div>
              </div>
              <div className="h-px bg-[color:var(--border-10)] my-5" />
              <ul className="space-y-3 text-sm text-[color:var(--text-muted)] flex-1">
                {p.features.map((feat) => (
                  <li key={feat} className="flex items-center gap-2">
                    <span className="w-5 h-5 rounded-full bg-[#84e1bc]/15 border border-[#84e1bc]/25 flex items-center justify-center">
                      <Check className="w-3.5 h-3.5 text-[#84e1bc]" />
                    </span>
                    <span className="en-text-left">{feat}</span>
                  </li>
                ))}
              </ul>
              <button
                className={[
                  'mt-6 w-full rounded-2xl py-3 text-sm font-semibold transition',
                  p.featured
                    ? 'bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] hover:opacity-90'
                    : 'bg-[color:var(--glass-05)] hover:bg-[color:var(--glass-10)] border border-[color:var(--border-10)]',
                ].join(' ')}
              >
                {p.cta}
              </button>
            </div>
          ))}
        </div>
      </motion.section>

      <motion.div {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-24">
        <FaqTimelineAccordion
          title={content.faqTitle}
          subtitle={content.faqSubtitle}
          faqs={content.faqs}
          contentDir={dir}
        />
      </motion.div>

      {/* Final CTA */}
      <motion.section {...sectionMotion} className="max-w-7xl mx-auto px-6 lg:px-10 pt-20 pb-24">
        <div className="rounded-3xl border border-[color:var(--border-10)] bg-[color:var(--glass-04)] p-8 lg:p-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
          <div>
            <h3 className="text-2xl font-bold mb-2">{content.finalCtaTitle}</h3>
            <p className="text-sm text-[color:var(--text-muted)] leading-relaxed max-w-2xl">{content.finalCtaDesc}</p>
          </div>
          <button className="flex items-center justify-center gap-2 px-7 py-3.5 rounded-2xl bg-gradient-to-l from-[#84e1bc] to-[#80c8f5] text-[#0a192f] font-bold text-sm hover:opacity-90 transition-opacity">
            <ArrowLeft className="w-5 h-5" /> {content.finalCtaButton}
          </button>
        </div>
      </motion.section>
    </div>
  );
}
