sozsoft-platform/ui/src/views/public/Home.tsx

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import {
  FaArrowRight,
  FaChevronLeft,
  FaChevronRight,
} from 'react-icons/fa'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { Helmet } from 'react-helmet'
import { APP_NAME } from '@/constants/app.constant'
import { useStoreActions, useStoreState } from '@/store'
import Loading from '@/components/shared/Loading'
import navigationIcon from '@/proxy/menus/navigation-icon.config'
import DesignerDrawer from './designer/DesignerDrawer'
import SelectableBlock from './designer/SelectableBlock'
import { DesignerSelection } from './designer/types'
import { useDesignerState } from './designer/useDesignerState'
import { getHome, HomeDto, saveHomePage } from '@/services/home.service'
import { Button, Notification, toast } from '@/components/ui'
import { useOptionalDemo } from '@/contexts/DemoContext'

interface HomeSlideServiceContent {
  icon: string
  title: string
  titleKey: string
  description: string
  descriptionKey: string
  styleClass: string
}

interface HomeSlideContent {
  title: string
  titleKey: string
  subtitle: string
  subtitleKey: string
  styleClass: string
  services: HomeSlideServiceContent[]
}

interface HomeFeatureContent {
  icon: string
  title: string
  titleKey: string
  description: string
  descriptionKey: string
  styleClass: string
}

interface HomeSolutionContent {
  icon: string
  colorClass: string
  title: string
  titleKey: string
  description: string
  descriptionKey: string
  styleClass: string
}

interface HomeContent {
  heroBackgroundImage: string
  heroBackgroundImageKey: string
  heroPrimaryCtaLabel: string
  heroPrimaryCtaKey: string
  heroPrimaryCtaStyle: string
  heroPrimaryCtaStyleKey: string
  heroSecondaryCtaLabel: string
  heroSecondaryCtaKey: string
  heroSecondaryCtaStyle: string
  heroSecondaryCtaStyleKey: string
  featuresTitle: string
  featuresTitleKey: string
  featuresTitleStyle: string
  featuresTitleStyleKey: string
  featuresSubtitle: string
  featuresSubtitleKey: string
  featuresSubtitleStyle: string
  featuresSubtitleStyleKey: string
  solutionsTitle: string
  solutionsTitleKey: string
  solutionsTitleStyle: string
  solutionsTitleStyleKey: string
  solutionsSubtitle: string
  solutionsSubtitleKey: string
  solutionsSubtitleStyle: string
  solutionsSubtitleStyleKey: string
  ctaTitle: string
  ctaTitleKey: string
  ctaTitleStyle: string
  ctaTitleStyleKey: string
  ctaSubtitle: string
  ctaSubtitleKey: string
  ctaSubtitleStyle: string
  ctaSubtitleStyleKey: string
  ctaButtonLabel: string
  ctaButtonLabelKey: string
  ctaButtonStyle: string
  ctaButtonStyleKey: string
  slides: HomeSlideContent[]
  features: HomeFeatureContent[]
  solutions: HomeSolutionContent[]
}

const HOME_HERO_DEFAULT_IMAGE =
  'https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1920'
const HOME_HERO_PRIMARY_CTA_STYLE_KEY = 'Public.home.hero.primaryCta.style'
const HOME_HERO_SECONDARY_CTA_STYLE_KEY = 'Public.home.hero.secondaryCta.style'
const HOME_FEATURES_TITLE_STYLE_KEY = 'Public.home.features.title.style'
const HOME_FEATURES_SUBTITLE_STYLE_KEY = 'Public.home.features.subtitle.style'
const HOME_SOLUTIONS_TITLE_STYLE_KEY = 'Public.home.solutions.title.style'
const HOME_SOLUTIONS_SUBTITLE_STYLE_KEY = 'Public.home.solutions.subtitle.style'
const HOME_CTA_TITLE_STYLE_KEY = 'Public.home.cta.title.style'
const HOME_CTA_SUBTITLE_STYLE_KEY = 'Public.home.cta.subtitle.style'
const HOME_CTA_BUTTON_STYLE_KEY = 'Public.home.cta.button.style'

const HOME_HERO_PRIMARY_CTA_STYLE_DEFAULT =
  'inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-semibold transition-all transform hover:scale-105'
const HOME_HERO_SECONDARY_CTA_STYLE_DEFAULT =
  'inline-flex items-center justify-center px-8 py-4 bg-white/10 hover:bg-white/20 text-white rounded-lg font-semibold backdrop-blur-sm transition-all transform hover:scale-105'
const HOME_FEATURES_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4'
const HOME_FEATURES_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto'
const HOME_SOLUTIONS_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4'
const HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto'
const HOME_CTA_TITLE_STYLE_DEFAULT = 'text-3xl font-bold text-white mb-4'
const HOME_CTA_SUBTITLE_STYLE_DEFAULT = 'text-white text-lg mb-8'
const HOME_CTA_BUTTON_STYLE_DEFAULT =
  'bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors'
const HOME_SLIDE_STYLE_DEFAULT = 'max-w-4xl mx-auto text-center'
const HOME_SLIDE_SERVICE_STYLE_DEFAULT =
  'bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all'
const HOME_FEATURE_CARD_STYLE_DEFAULT =
  'p-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-shadow dark:shadow-gray-950/40'
const HOME_SOLUTION_CARD_STYLE_DEFAULT = 'p-8 h-full rounded-2xl'

function isLikelyLocalizationKey(value?: string) {
  return Boolean(value && /^[A-Za-z0-9_.-]+$/.test(value) && value.includes('.'))
}

function resolveLocalizedValue(
  translate: (key: string) => string,
  keyOrValue: string | undefined,
  fallback = '',
) {
  if (!keyOrValue) {
    return fallback
  }

  if (!isLikelyLocalizationKey(keyOrValue)) {
    return keyOrValue
  }

  const translatedValue = translate('::' + keyOrValue)
  return translatedValue === keyOrValue ? fallback || keyOrValue : translatedValue
}

function buildHomeContent(home: HomeDto | undefined, translate: (key: string) => string): HomeContent {
  const slideItems = home?.slidesDto || []
  const featureItems = home?.featuresDto || []
  const solutionItems = home?.solutionsDto || []

  return {
    heroBackgroundImage: resolveLocalizedValue(
      translate,
      home?.heroBackgroundImageKey,
      HOME_HERO_DEFAULT_IMAGE,
    ),
    heroBackgroundImageKey: home?.heroBackgroundImageKey || '',
    heroPrimaryCtaLabel: resolveLocalizedValue(translate, home?.heroPrimaryCtaKey, ''),
    heroPrimaryCtaKey: home?.heroPrimaryCtaKey || '',
    heroPrimaryCtaStyle: resolveLocalizedValue(
      translate,
      HOME_HERO_PRIMARY_CTA_STYLE_KEY,
      HOME_HERO_PRIMARY_CTA_STYLE_DEFAULT,
    ),
    heroPrimaryCtaStyleKey: HOME_HERO_PRIMARY_CTA_STYLE_KEY,
    heroSecondaryCtaLabel: resolveLocalizedValue(translate, home?.heroSecondaryCtaKey, ''),
    heroSecondaryCtaKey: home?.heroSecondaryCtaKey || '',
    heroSecondaryCtaStyle: resolveLocalizedValue(
      translate,
      HOME_HERO_SECONDARY_CTA_STYLE_KEY,
      HOME_HERO_SECONDARY_CTA_STYLE_DEFAULT,
    ),
    heroSecondaryCtaStyleKey: HOME_HERO_SECONDARY_CTA_STYLE_KEY,
    featuresTitle: resolveLocalizedValue(translate, home?.featuresTitleKey, ''),
    featuresTitleKey: home?.featuresTitleKey || '',
    featuresTitleStyle: resolveLocalizedValue(
      translate,
      HOME_FEATURES_TITLE_STYLE_KEY,
      HOME_FEATURES_TITLE_STYLE_DEFAULT,
    ),
    featuresTitleStyleKey: HOME_FEATURES_TITLE_STYLE_KEY,
    featuresSubtitle: resolveLocalizedValue(translate, home?.featuresSubtitleKey, ''),
    featuresSubtitleKey: home?.featuresSubtitleKey || '',
    featuresSubtitleStyle: resolveLocalizedValue(
      translate,
      HOME_FEATURES_SUBTITLE_STYLE_KEY,
      HOME_FEATURES_SUBTITLE_STYLE_DEFAULT,
    ),
    featuresSubtitleStyleKey: HOME_FEATURES_SUBTITLE_STYLE_KEY,
    solutionsTitle: resolveLocalizedValue(translate, home?.solutionsTitleKey, ''),
    solutionsTitleKey: home?.solutionsTitleKey || '',
    solutionsTitleStyle: resolveLocalizedValue(
      translate,
      HOME_SOLUTIONS_TITLE_STYLE_KEY,
      HOME_SOLUTIONS_TITLE_STYLE_DEFAULT,
    ),
    solutionsTitleStyleKey: HOME_SOLUTIONS_TITLE_STYLE_KEY,
    solutionsSubtitle: resolveLocalizedValue(translate, home?.solutionsSubtitleKey, ''),
    solutionsSubtitleKey: home?.solutionsSubtitleKey || '',
    solutionsSubtitleStyle: resolveLocalizedValue(
      translate,
      HOME_SOLUTIONS_SUBTITLE_STYLE_KEY,
      HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT,
    ),
    solutionsSubtitleStyleKey: HOME_SOLUTIONS_SUBTITLE_STYLE_KEY,
    ctaTitle: resolveLocalizedValue(translate, home?.ctaTitleKey, ''),
    ctaTitleKey: home?.ctaTitleKey || '',
    ctaTitleStyle: resolveLocalizedValue(
      translate,
      HOME_CTA_TITLE_STYLE_KEY,
      HOME_CTA_TITLE_STYLE_DEFAULT,
    ),
    ctaTitleStyleKey: HOME_CTA_TITLE_STYLE_KEY,
    ctaSubtitle: resolveLocalizedValue(translate, home?.ctaSubtitleKey, ''),
    ctaSubtitleKey: home?.ctaSubtitleKey || '',
    ctaSubtitleStyle: resolveLocalizedValue(
      translate,
      HOME_CTA_SUBTITLE_STYLE_KEY,
      HOME_CTA_SUBTITLE_STYLE_DEFAULT,
    ),
    ctaSubtitleStyleKey: HOME_CTA_SUBTITLE_STYLE_KEY,
    ctaButtonLabel: resolveLocalizedValue(translate, home?.ctaButtonLabelKey, ''),
    ctaButtonLabelKey: home?.ctaButtonLabelKey || '',
    ctaButtonStyle: resolveLocalizedValue(
      translate,
      HOME_CTA_BUTTON_STYLE_KEY,
      HOME_CTA_BUTTON_STYLE_DEFAULT,
    ),
    ctaButtonStyleKey: HOME_CTA_BUTTON_STYLE_KEY,
    slides: slideItems.map((slide) => ({
      title: resolveLocalizedValue(translate, slide.titleKey, slide.titleKey),
      titleKey: slide.titleKey || '',
      subtitle: resolveLocalizedValue(translate, slide.subtitleKey, slide.subtitleKey),
      subtitleKey: slide.subtitleKey || '',
      styleClass: slide.styleClass || HOME_SLIDE_STYLE_DEFAULT,
      services: (slide.services || []).map((service) => ({
        icon: service.icon || '',
        title: resolveLocalizedValue(translate, service.titleKey, service.titleKey),
        titleKey: service.titleKey || '',
        description: resolveLocalizedValue(translate, service.descriptionKey, service.descriptionKey),
        descriptionKey: service.descriptionKey || '',
        styleClass: service.styleClass || HOME_SLIDE_SERVICE_STYLE_DEFAULT,
      })),
    })),
    features: featureItems.map((feature) => ({
      icon: feature.icon || '',
      title: resolveLocalizedValue(translate, feature.titleKey, feature.titleKey),
      titleKey: feature.titleKey || '',
      description: resolveLocalizedValue(translate, feature.descriptionKey, feature.descriptionKey),
      descriptionKey: feature.descriptionKey || '',
      styleClass: feature.styleClass || HOME_FEATURE_CARD_STYLE_DEFAULT,
    })),
    solutions: solutionItems.map((solution) => ({
      icon: solution.icon || '',
      colorClass: solution.colorClass || '',
      title: resolveLocalizedValue(translate, solution.titleKey, solution.titleKey),
      titleKey: solution.titleKey || '',
      description: resolveLocalizedValue(translate, solution.descriptionKey, solution.descriptionKey),
      descriptionKey: solution.descriptionKey || '',
      styleClass: solution.styleClass || HOME_SOLUTION_CARD_STYLE_DEFAULT,
    })),
  }
}

const Home: React.FC = () => {
  const { openDemo } = useOptionalDemo()
  const { translate } = useLocalization()
  const { setLang } = useStoreActions((actions) => actions.locale)
  const { getConfig } = useStoreActions((actions) => actions.abpConfig)
  const configCultureName = useStoreState(
    (state) => state.abpConfig.config?.localization.currentCulture.cultureName,
  )
  const localeCurrentLang = useStoreState((state) => state.locale?.currentLang)
  const currentLanguage = configCultureName || localeCurrentLang || 'tr'
  const abpLanguages = useStoreState((state) => state.abpConfig.config?.localization.languages) || []
  const languageOptions = abpLanguages
    .filter((language) => Boolean(language.cultureName))
    .map((language) => {
      const cultureName = language.cultureName || 'tr'
      return {
        key: cultureName.toLowerCase().split('-')[0],
        cultureName,
        displayName: language.displayName || cultureName,
      }
    })
  const languagesFromConfig = languageOptions.map((language) => language.key)
  const editorLanguages = Array.from(
    new Set((languagesFromConfig.length > 0 ? languagesFromConfig : [currentLanguage]).filter(Boolean)),
  )

  const [home, setHome] = useState<HomeDto>()
  const [loading, setLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [isPanelVisible, setIsPanelVisible] = useState(true)
  const [currentSlide, setCurrentSlide] = useState(0)

  const initialContent = !loading ? buildHomeContent(home, translate) : null
  const {
    content,
    isDesignMode,
    selectedBlockId,
    selectedLanguage,
    supportedLanguages,
    setContent,
    setSelectedBlockId,
    resetContent,
  } = useDesignerState<HomeContent>('home', initialContent, {
    currentLanguage,
    supportedLanguages: editorLanguages,
  })

  useEffect(() => {
    setLoading(true)
    const fetchHome = async () => {
      try {
        const result = await getHome()
        setHome(result.data)
      } catch (error) {
        console.error('Home alinirken hata olustu:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchHome()
  }, [])

  useEffect(() => {
    if (!content?.slides?.length) {
      return
    }

    if (currentSlide >= content.slides.length) {
      setCurrentSlide(0)
    }
  }, [content?.slides.length, currentSlide])

  useEffect(() => {
    if (!content?.slides?.length) {
      return
    }

    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % content.slides.length)
    }, 10000)

    return () => clearInterval(timer)
  }, [content?.slides.length])

  const nextSlide = () => {
    const size = content?.slides.length || 1
    setCurrentSlide((prev) => (prev + 1) % size)
  }

  const prevSlide = () => {
    const size = content?.slides.length || 1
    setCurrentSlide((prev) => (prev - 1 + size) % size)
  }

  const updateContent = (updater: (current: HomeContent) => HomeContent) => {
    setContent((current) => {
      if (!current) {
        return current
      }

      return updater(current)
    })
  }

  const handleFieldChange = (fieldKey: string, value: string | string[]) => {
    const nextValue = value as string

    updateContent((current) => {
      if (
        fieldKey === 'heroBackgroundImage' ||
        fieldKey === 'heroPrimaryCtaLabel' ||
        fieldKey === 'heroPrimaryCtaStyle' ||
        fieldKey === 'heroSecondaryCtaLabel' ||
        fieldKey === 'heroSecondaryCtaStyle' ||
        fieldKey === 'featuresTitle' ||
        fieldKey === 'featuresTitleStyle' ||
        fieldKey === 'featuresSubtitle' ||
        fieldKey === 'featuresSubtitleStyle' ||
        fieldKey === 'solutionsTitle' ||
        fieldKey === 'solutionsTitleStyle' ||
        fieldKey === 'solutionsSubtitle' ||
        fieldKey === 'solutionsSubtitleStyle' ||
        fieldKey === 'ctaTitle' ||
        fieldKey === 'ctaTitleStyle' ||
        fieldKey === 'ctaSubtitle' ||
        fieldKey === 'ctaSubtitleStyle' ||
        fieldKey === 'ctaButtonLabel' ||
        fieldKey === 'ctaButtonStyle'
      ) {
        return {
          ...current,
          [fieldKey]: nextValue,
        }
      }

      if (selectedBlockId?.startsWith('slide-')) {
        const index = Number(selectedBlockId.replace('slide-', ''))
        if (Number.isNaN(index)) {
          return current
        }

        const slides = [...current.slides]
        const target = { ...slides[index] }

        if (fieldKey === 'title' || fieldKey === 'subtitle' || fieldKey === 'styleClass') {
          target[fieldKey] = nextValue
        } else if (fieldKey.startsWith('service-')) {
          const parts = fieldKey.split('-')
          const serviceIndex = Number(parts[1])
          const serviceField = parts[2] as 'icon' | 'title' | 'description' | 'styleClass'
          const services = [...target.services]
          const service = { ...services[serviceIndex] }
          service[serviceField] = nextValue
          services[serviceIndex] = service
          target.services = services
        }

        slides[index] = target
        return {
          ...current,
          slides,
        }
      }

      if (selectedBlockId?.startsWith('feature-')) {
        const index = Number(selectedBlockId.replace('feature-', ''))
        if (Number.isNaN(index)) {
          return current
        }

        const features = [...current.features]
        const feature = { ...features[index] }
        const key = fieldKey as 'icon' | 'title' | 'description' | 'styleClass'
        feature[key] = nextValue
        features[index] = feature

        return {
          ...current,
          features,
        }
      }

      if (selectedBlockId?.startsWith('solution-')) {
        const index = Number(selectedBlockId.replace('solution-', ''))
        if (Number.isNaN(index)) {
          return current
        }

        const solutions = [...current.solutions]
        const solution = { ...solutions[index] }
        const key = fieldKey as 'icon' | 'title' | 'description' | 'colorClass' | 'styleClass'
        solution[key] = nextValue
        solutions[index] = solution

        return {
          ...current,
          solutions,
        }
      }

      return current
    })
  }

  const selectedSelection: DesignerSelection | null = React.useMemo(() => {
    if (!content || !selectedBlockId) {
      return null
    }

    if (selectedBlockId === 'hero') {
      return {
        id: 'hero',
        title: 'Public.home.hero.*',
        description: 'Hero arka planini ve CTA metinlerini duzenleyin.',
        fields: [
          {
            key: 'heroBackgroundImage',
            label: content.heroBackgroundImageKey,
            type: 'image',
            value: content.heroBackgroundImage,
          },
          {
            key: 'heroPrimaryCtaLabel',
            label: content.heroPrimaryCtaKey,
            type: 'text',
            value: content.heroPrimaryCtaLabel,
          },
          {
            key: 'heroPrimaryCtaStyle',
            label: content.heroPrimaryCtaStyleKey,
            type: 'text',
            value: content.heroPrimaryCtaStyle,
          },
          {
            key: 'heroSecondaryCtaLabel',
            label: content.heroSecondaryCtaKey,
            type: 'text',
            value: content.heroSecondaryCtaLabel,
          },
          {
            key: 'heroSecondaryCtaStyle',
            label: content.heroSecondaryCtaStyleKey,
            type: 'text',
            value: content.heroSecondaryCtaStyle,
          },
        ],
      }
    }

    if (selectedBlockId.startsWith('slide-')) {
      const index = Number(selectedBlockId.replace('slide-', ''))
      const slide = content.slides[index]

      if (!slide) {
        return null
      }

      return {
        id: selectedBlockId,
        title: slide.titleKey,
        description: 'Slayt baslik, alt baslik ve servis kartlarini duzenleyin.',
        fields: [
          {
            key: 'title',
            label: slide.titleKey,
            type: 'text',
            value: slide.title,
          },
          {
            key: 'subtitle',
            label: slide.subtitleKey,
            type: 'textarea',
            value: slide.subtitle,
          },
          {
            key: 'styleClass',
            label: `Slide${index + 1}.StyleClass`,
            type: 'text',
            value: slide.styleClass,
          },
          ...slide.services.flatMap((service, serviceIndex) => [
            {
              key: `service-${serviceIndex}-icon`,
              label: `Slide${index + 1}.Service${serviceIndex + 1}.Icon`,
              type: 'icon' as const,
              value: service.icon,
              placeholder: 'Ornek: FaUsers',
            },
            {
              key: `service-${serviceIndex}-title`,
              label: service.titleKey,
              type: 'text' as const,
              value: service.title,
            },
            {
              key: `service-${serviceIndex}-description`,
              label: service.descriptionKey,
              type: 'textarea' as const,
              value: service.description,
            },
            {
              key: `service-${serviceIndex}-styleClass`,
              label: `Slide${index + 1}.Service${serviceIndex + 1}.StyleClass`,
              type: 'text' as const,
              value: service.styleClass,
            },
          ]),
        ],
      }
    }

    if (selectedBlockId === 'features-heading') {
      return {
        id: selectedBlockId,
        title: content.featuresTitleKey,
        description: 'Features bolum basliklarini duzenleyin.',
        fields: [
          {
            key: 'featuresTitle',
            label: content.featuresTitleKey,
            type: 'text',
            value: content.featuresTitle,
          },
          {
            key: 'featuresTitleStyle',
            label: content.featuresTitleStyleKey,
            type: 'text',
            value: content.featuresTitleStyle,
          },
          {
            key: 'featuresSubtitle',
            label: content.featuresSubtitleKey,
            type: 'textarea',
            value: content.featuresSubtitle,
          },
          {
            key: 'featuresSubtitleStyle',
            label: content.featuresSubtitleStyleKey,
            type: 'text',
            value: content.featuresSubtitleStyle,
          },
        ],
      }
    }

    if (selectedBlockId.startsWith('feature-')) {
      const index = Number(selectedBlockId.replace('feature-', ''))
      const item = content.features[index]

      if (!item) {
        return null
      }

      return {
        id: selectedBlockId,
        title: item.titleKey,
        description: 'Feature ikon ve metinlerini duzenleyin.',
        fields: [
          {
            key: 'icon',
            label: `Feature${index + 1}.Icon`,
            type: 'icon',
            value: item.icon,
            placeholder: 'Ornek: FaChartBar',
          },
          {
            key: 'title',
            label: item.titleKey,
            type: 'text',
            value: item.title,
          },
          {
            key: 'description',
            label: item.descriptionKey,
            type: 'textarea',
            value: item.description,
          },
          {
            key: 'styleClass',
            label: `Feature${index + 1}.StyleClass`,
            type: 'text',
            value: item.styleClass,
          },
        ],
      }
    }

    if (selectedBlockId === 'solutions-heading') {
      return {
        id: selectedBlockId,
        title: content.solutionsTitleKey,
        description: 'Solutions bolum basliklarini duzenleyin.',
        fields: [
          {
            key: 'solutionsTitle',
            label: content.solutionsTitleKey,
            type: 'text',
            value: content.solutionsTitle,
          },
          {
            key: 'solutionsTitleStyle',
            label: content.solutionsTitleStyleKey,
            type: 'text',
            value: content.solutionsTitleStyle,
          },
          {
            key: 'solutionsSubtitle',
            label: content.solutionsSubtitleKey,
            type: 'textarea',
            value: content.solutionsSubtitle,
          },
          {
            key: 'solutionsSubtitleStyle',
            label: content.solutionsSubtitleStyleKey,
            type: 'text',
            value: content.solutionsSubtitleStyle,
          },
        ],
      }
    }

    if (selectedBlockId.startsWith('solution-')) {
      const index = Number(selectedBlockId.replace('solution-', ''))
      const item = content.solutions[index]

      if (!item) {
        return null
      }

      return {
        id: selectedBlockId,
        title: item.titleKey,
        description: 'Solution kartini tamamen duzenleyin.',
        fields: [
          {
            key: 'colorClass',
            label: `Solution${index + 1}.ColorClass`,
            type: 'text',
            value: item.colorClass,
          },
          {
            key: 'icon',
            label: `Solution${index + 1}.Icon`,
            type: 'icon',
            value: item.icon,
            placeholder: 'Ornek: FaDesktop',
          },
          {
            key: 'title',
            label: item.titleKey,
            type: 'text',
            value: item.title,
          },
          {
            key: 'description',
            label: item.descriptionKey,
            type: 'textarea',
            value: item.description,
          },
          {
            key: 'styleClass',
            label: `Solution${index + 1}.StyleClass`,
            type: 'text',
            value: item.styleClass,
          },
        ],
      }
    }

    if (selectedBlockId === 'cta') {
      return {
        id: selectedBlockId,
        title: content.ctaTitleKey,
        description: 'Sayfa alti cta metinlerini duzenleyin.',
        fields: [
          {
            key: 'ctaTitle',
            label: content.ctaTitleKey,
            type: 'text',
            value: content.ctaTitle,
          },
          {
            key: 'ctaTitleStyle',
            label: content.ctaTitleStyleKey,
            type: 'text',
            value: content.ctaTitleStyle,
          },
          {
            key: 'ctaSubtitle',
            label: content.ctaSubtitleKey,
            type: 'textarea',
            value: content.ctaSubtitle,
          },
          {
            key: 'ctaSubtitleStyle',
            label: content.ctaSubtitleStyleKey,
            type: 'text',
            value: content.ctaSubtitleStyle,
          },
          {
            key: 'ctaButtonLabel',
            label: content.ctaButtonLabelKey,
            type: 'text',
            value: content.ctaButtonLabel,
          },
          {
            key: 'ctaButtonStyle',
            label: content.ctaButtonStyleKey,
            type: 'text',
            value: content.ctaButtonStyle,
          },
        ],
      }
    }

    return null
  }, [content, selectedBlockId])

  const handleSaveAndExit = async () => {
    if (!content || isSaving) {
      return
    }

    setIsSaving(true)

    try {
      await saveHomePage({
        cultureName: selectedLanguage,
        heroBackgroundImageKey: content.heroBackgroundImageKey,
        heroBackgroundImageValue: content.heroBackgroundImage,
        heroPrimaryCtaKey: content.heroPrimaryCtaKey,
        heroPrimaryCtaValue: content.heroPrimaryCtaLabel,
        heroPrimaryCtaStyleKey: content.heroPrimaryCtaStyleKey,
        heroPrimaryCtaStyleValue: content.heroPrimaryCtaStyle,
        heroSecondaryCtaKey: content.heroSecondaryCtaKey,
        heroSecondaryCtaValue: content.heroSecondaryCtaLabel,
        heroSecondaryCtaStyleKey: content.heroSecondaryCtaStyleKey,
        heroSecondaryCtaStyleValue: content.heroSecondaryCtaStyle,
        featuresTitleKey: content.featuresTitleKey,
        featuresTitleValue: content.featuresTitle,
        featuresTitleStyleKey: content.featuresTitleStyleKey,
        featuresTitleStyleValue: content.featuresTitleStyle,
        featuresSubtitleKey: content.featuresSubtitleKey,
        featuresSubtitleValue: content.featuresSubtitle,
        featuresSubtitleStyleKey: content.featuresSubtitleStyleKey,
        featuresSubtitleStyleValue: content.featuresSubtitleStyle,
        solutionsTitleKey: content.solutionsTitleKey,
        solutionsTitleValue: content.solutionsTitle,
        solutionsTitleStyleKey: content.solutionsTitleStyleKey,
        solutionsTitleStyleValue: content.solutionsTitleStyle,
        solutionsSubtitleKey: content.solutionsSubtitleKey,
        solutionsSubtitleValue: content.solutionsSubtitle,
        solutionsSubtitleStyleKey: content.solutionsSubtitleStyleKey,
        solutionsSubtitleStyleValue: content.solutionsSubtitleStyle,
        ctaTitleKey: content.ctaTitleKey,
        ctaTitleValue: content.ctaTitle,
        ctaTitleStyleKey: content.ctaTitleStyleKey,
        ctaTitleStyleValue: content.ctaTitleStyle,
        ctaSubtitleKey: content.ctaSubtitleKey,
        ctaSubtitleValue: content.ctaSubtitle,
        ctaSubtitleStyleKey: content.ctaSubtitleStyleKey,
        ctaSubtitleStyleValue: content.ctaSubtitleStyle,
        ctaButtonLabelKey: content.ctaButtonLabelKey,
        ctaButtonLabelValue: content.ctaButtonLabel,
        ctaButtonStyleKey: content.ctaButtonStyleKey,
        ctaButtonStyleValue: content.ctaButtonStyle,
        slides: content.slides.map((slide, slideIndex) => ({
          titleKey: slide.titleKey || '',
          titleValue: slide.title,
          subtitleKey: slide.subtitleKey || '',
          subtitleValue: slide.subtitle,
          styleClass: slide.styleClass,
          services: slide.services.map((service, serviceIndex) => ({
            icon: service.icon,
            titleKey: service.titleKey || '',
            titleValue: service.title,
            descriptionKey: service.descriptionKey || '',
            descriptionValue: service.description,
            styleClass: service.styleClass,
          })),
        })),
        features: content.features.map((feature, index) => ({
          icon: feature.icon,
          titleKey: feature.titleKey || '',
          titleValue: feature.title,
          descriptionKey: feature.descriptionKey || '',
          descriptionValue: feature.description,
          styleClass: feature.styleClass,
        })),
        solutions: content.solutions.map((solution, index) => ({
          icon: solution.icon,
          colorClass: solution.colorClass,
          titleKey: solution.titleKey || '',
          titleValue: solution.title,
          descriptionKey: solution.descriptionKey || '',
          descriptionValue: solution.description,
          styleClass: solution.styleClass,
        })),
      })

      await getConfig(false)
      setSelectedBlockId(null)

      toast.push(
        <Notification type="success" duration={2000}>
          {translate('::ListForms.FormBilgileriKaydedildi')}
        </Notification>,
        {
          placement: 'top-end',
        },
      )

    } catch (error) {
      console.error('Home tasarimi kaydedilemedi:', error)
    } finally {
      setIsSaving(false)
    }
  }

  const handleLanguageChange = (language: string) => {
    setLang(language)
  }

  const handleSelectBlock = (blockId: string) => {
    setSelectedBlockId(blockId)
    if (!isPanelVisible) {
      setIsPanelVisible(true)
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
        <div className="text-center">
          <Loading loading={loading} />
        </div>
      </div>
    )
  }

  return (
    <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
      <Helmet
        titleTemplate={`%s | ${APP_NAME}`}
        title={translate('::' + 'App.Home')}
        defaultTitle={APP_NAME}
      ></Helmet>

      {isDesignMode && (
        <div className="fixed bottom-6 left-6 z-40 rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-xl">
          Home designer aktif
        </div>
      )}

      {isDesignMode && !isPanelVisible && (
        <Button
          type="button"
          onClick={() => setIsPanelVisible(true)}
          variant="plain"
          className="fixed right-4 top-1/2 z-40 -translate-y-1/2 !h-auto !rounded-full bg-slate-900 !px-4 !py-2 text-sm font-semibold text-white shadow-xl"
        >
          {translate('::Public.designer.showPanel')}
        </Button>
      )}

      {/* Hero Carousel */}
      <SelectableBlock
        id="hero"
        isActive={selectedBlockId === 'hero'}
        isDesignMode={isDesignMode}
        onSelect={handleSelectBlock}
      >
      <div className="relative min-h-screen overflow-hidden bg-blue-900 p-20 text-white dark:bg-gray-950">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 dark:from-gray-950 dark:via-gray-950 dark:to-gray-950"></div>
        <div
          className="absolute inset-0 opacity-20 dark:opacity-35"
          style={{
            backgroundImage: `url("${content?.heroBackgroundImage || HOME_HERO_DEFAULT_IMAGE}")`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        ></div>
        <div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>

        {/* Carousel Content */}
        <div className="relative container mx-auto px-4 pt-32 pb-16 h-screen flex items-center">
          {(content?.slides || []).map((slide, index) => (
            <div
              key={index}
              className={`absolute inset-0 transition-all duration-700 ease-in-out ${
                index === currentSlide
                  ? 'opacity-100 translate-x-0'
                  : index < currentSlide
                    ? 'opacity-0 -translate-x-full'
                    : 'opacity-0 translate-x-full'
              }`}
            >
              <SelectableBlock
                id={`slide-${index}`}
                isActive={selectedBlockId === `slide-${index}`}
                isDesignMode={isDesignMode}
                onSelect={(id) => {
                  setCurrentSlide(index)
                  handleSelectBlock(id)
                }}
                className="h-full"
              >
              <div className={`container mx-auto px-4 pt-16 ${slide.styleClass || ''}`}>
                <div className="max-w-4xl mx-auto text-center">
                  <h1 className="text-3xl md:text-6xl font-bold mb-6 text-white animate-fade-in">
                    {slide.title}
                  </h1>
                  <p className="text-xl md:text-2xl text-gray-300 mb-12 animate-fade-in-delay">
                    {slide.subtitle}
                  </p>

                  <div className="flex flex-col md:flex-row justify-center gap-6 mb-16">
                    <button
                      type="button"
                      onClick={openDemo}
                      className={content?.heroPrimaryCtaStyle}
                    >
                      {content?.heroPrimaryCtaLabel}{' '}
                      <FaArrowRight className="ml-2" size={20} />
                    </button>
                    <Link
                      to={ROUTES_ENUM.public.products}
                      className={content?.heroSecondaryCtaStyle}
                    >
                      {content?.heroSecondaryCtaLabel}
                    </Link>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
                    {slide.services.map((service, i) => (
                      <div
                        key={i}
                        className={
                          service.styleClass ||
                          'bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all'
                        }
                      >
                        {(() => {
                          const IconComponent = navigationIcon[service.icon || '']
                          return IconComponent ? (
                            <IconComponent className="mx-auto mb-4 text-blue-300" size={40} />
                          ) : null
                        })()}
                        <h3 className="text-xl font-semibold mb-3 text-white">{service.title}</h3>
                        <p className="text-gray-300">{service.description}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
              </SelectableBlock>
            </div>
          ))}
        </div>

        {/* Navigation Buttons */}
        <Button
          onClick={prevSlide}
          variant="plain"
          shape="circle"
          icon={<FaChevronLeft size={24} />}
          className="absolute left-4 top-1/2 z-10 -translate-y-1/2 !h-14 !w-14 !px-0 bg-white/10 hover:!bg-white/20 backdrop-blur-sm text-white transition-all"
          aria-label="Previous slide"
        />
        <Button
          onClick={nextSlide}
          variant="plain"
          shape="circle"
          icon={<FaChevronRight size={24} />}
          className="absolute right-4 top-1/2 z-10 -translate-y-1/2 !h-14 !w-14 !px-0 bg-white/10 hover:!bg-white/20 backdrop-blur-sm text-white transition-all"
          aria-label="Next slide"
        />

        {/* Slide Indicators */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-3 z-10">
          {(content?.slides || []).map((_, index) => (
            <Button
              key={index}
              onClick={() => setCurrentSlide(index)}
              variant="plain"
              shape="circle"
              className={`!h-3 !min-h-3 !px-0 rounded-full transition-all ${
                index === currentSlide ? '!w-8 bg-white' : '!w-3 bg-white/50 hover:bg-white/70'
              }`}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>

        {isDesignMode && (
          <div className="absolute bottom-24 left-1/2 z-20 -translate-x-1/2 flex gap-2 rounded-full bg-black/30 px-3 py-2 backdrop-blur">
            {(content?.slides || []).map((_, index) => (
              <Button
                key={`editor-slide-${index}`}
                type="button"
                onClick={() => {
                  setCurrentSlide(index)
                  handleSelectBlock(`slide-${index}`)
                }}
                variant="plain"
                className={`!h-auto !rounded-full !px-3 !py-1 text-xs font-semibold text-white transition ${
                  selectedBlockId === `slide-${index}` ? 'bg-sky-500' : 'bg-white/20 hover:bg-white/30'
                }`}
              >
                Slide {index + 1}
              </Button>
            ))}
          </div>
        )}
      </div>
      </SelectableBlock>

      {/* Features */}
      <section className="py-20 bg-white dark:bg-gray-950">
        <div className="container mx-auto px-4">
          <SelectableBlock
            id="features-heading"
            isActive={selectedBlockId === 'features-heading'}
            isDesignMode={isDesignMode}
            onSelect={handleSelectBlock}
          >
          <div className="text-center mb-16">
            <h2 className={`${content?.featuresTitleStyle || HOME_FEATURES_TITLE_STYLE_DEFAULT} dark:text-gray-100`}>
              {content?.featuresTitle}
            </h2>
            <p className={`${content?.featuresSubtitleStyle || HOME_FEATURES_SUBTITLE_STYLE_DEFAULT} dark:text-gray-300`}>
              {content?.featuresSubtitle}
            </p>
          </div>
          </SelectableBlock>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {(content?.features || []).map((feature, i) => (
              <SelectableBlock
                key={i}
                id={`feature-${i}`}
                isActive={selectedBlockId === `feature-${i}`}
                isDesignMode={isDesignMode}
                onSelect={handleSelectBlock}
              >
              <div
                className={`${feature.styleClass || HOME_FEATURE_CARD_STYLE_DEFAULT} dark:bg-gray-900 dark:shadow-gray-950/40`}
              >
                <div className="mb-6">
                  {(() => {
                    const IconComponent = navigationIcon[feature.icon || '']
                    return IconComponent ? <IconComponent className="w-12 h-12 text-blue-500" /> : null
                  })()}
                </div>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{feature.title}</h2>
                <p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
              </div>
              </SelectableBlock>
            ))}
          </div>
        </div>
      </section>

      {/* Solutions */}
      <section className="py-20 bg-gray-50 dark:bg-gray-900">
        <div className="container mx-auto px-4">
          <SelectableBlock
            id="solutions-heading"
            isActive={selectedBlockId === 'solutions-heading'}
            isDesignMode={isDesignMode}
            onSelect={handleSelectBlock}
          >
          <div className="text-center mb-16">
            <h2 className={`${content?.solutionsTitleStyle || HOME_SOLUTIONS_TITLE_STYLE_DEFAULT} dark:text-gray-100`}>
              {content?.solutionsTitle}
            </h2>
            <p className={`${content?.solutionsSubtitleStyle || HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT} dark:text-gray-300`}>
              {content?.solutionsSubtitle}
            </p>
          </div>
          </SelectableBlock>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {(content?.solutions || []).map((s, i) => (
              <SelectableBlock
                key={i}
                id={`solution-${i}`}
                isActive={selectedBlockId === `solution-${i}`}
                isDesignMode={isDesignMode}
                onSelect={handleSelectBlock}
              >
                <div className={`${s.colorClass} ${s.styleClass || 'p-8 h-full rounded-2xl'}`}>
                  <div className="mb-6">
                    {(() => {
                      const IconComponent = navigationIcon[s.icon || '']
                      return IconComponent ? <IconComponent className="w-16 h-16 text-white" /> : null
                    })()}
                  </div>
                  <h3 className="text-2xl font-semibold text-white mb-4">{s.title}</h3>
                  <p className="text-white/90">{s.description}</p>
                </div>
              </SelectableBlock>
            ))}
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <SelectableBlock
        id="cta"
        isActive={selectedBlockId === 'cta'}
        isDesignMode={isDesignMode}
        onSelect={handleSelectBlock}
      >
      <section className="bg-blue-900 py-16 dark:bg-gray-800">
        <div className="container mx-auto px-4 text-center">
          <h2 className={content?.ctaTitleStyle}>{content?.ctaTitle}</h2>
          <p className={content?.ctaSubtitleStyle}>{content?.ctaSubtitle}</p>
          <Link
            to={ROUTES_ENUM.public.contact}
            className={content?.ctaButtonStyle}
          >
            {content?.ctaButtonLabel}
          </Link>
        </div>
      </section>
      </SelectableBlock>

      <DesignerDrawer
        isOpen={isDesignMode && isPanelVisible}
        selection={selectedSelection}
        pageTitle="Home"
        selectedLanguage={selectedLanguage}
        languages={
          languageOptions.length > 0
            ? languageOptions
            : supportedLanguages.map((language) => ({
                key: language,
                cultureName: language,
                displayName: language.toUpperCase(),
              }))
        }
        onClose={() => setIsPanelVisible(false)}
        onSave={handleSaveAndExit}
        onLanguageChange={handleLanguageChange}
        onReset={resetContent}
        onFieldChange={handleFieldChange}
      />
    </div>
  )
}

export default Home