sozsoft-platform/ui/src/components/layouts/PublicLayout.tsx

import View from '@/views/Views'
import React, { useEffect, useState } from 'react'
import { useLocation, Link, useNavigate } from 'react-router-dom'
import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram } from 'react-icons/fa'
import {
  LuMenu,
  LuX,
  LuHouse,
  LuInfo,
  LuBriefcase,
  LuPackage,
  LuBookOpen,
  LuPhone,
  LuMapPin,
  LuMail,
  LuMoon,
  LuSun,
} from 'react-icons/lu'
import Logo from '@/views/public/Logo'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization'
import LanguageSelector from '../template/LanguageSelector'
import Demo from '@/views/public/Demo'
import { ScrollContext } from '@/contexts/ScrollContext'
import { DemoProvider } from '@/contexts/DemoContext'
import useDarkMode from '@/utils/hooks/useDarkmode'
import { THEME_ENUM } from '@/constants/theme.constant'
import { Button } from '../ui'

interface NavLink {
  resourceKey?: string
  name: string
  path?: string
  action?: () => void
  icon?: React.ComponentType<any>
}

const PublicLayout = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const { translate } = useLocalization()
  const [isDarkMode, setThemeMode] = useDarkMode()

  const [isOpen, setIsOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)
  const [isDemoOpen, setIsDemoOpen] = useState(false)
  const currentYear = new Date().getFullYear()

  useEffect(() => {
    window.scrollTo(0, 0)
  }, [location.pathname])

  useEffect(() => {
    const handleScroll = () => {
      const isScrolled = window.scrollY > 10
      if (isScrolled !== scrolled) {
        setScrolled(isScrolled)
      }
    }

    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [scrolled])

  const toggleMenu = () => setIsOpen(!isOpen)

  const navLinks: NavLink[] = [
    {
      resourceKey: 'App.Home',
      name: translate('::App.Home'),
      path: ROUTES_ENUM.public.home,
      icon: LuHouse,
    },
    {
      resourceKey: 'App.About',
      name: translate('::App.About'),
      path: ROUTES_ENUM.public.about,
      icon: LuInfo,
    },
    {
      resourceKey: 'App.Services',
      name: translate('::App.Services'),
      path: ROUTES_ENUM.public.services,
      icon: LuBriefcase,
    },
    {
      resourceKey: 'Public.nav.products',
      name: translate('::App.Platform.Orders'),
      path: ROUTES_ENUM.public.products,
      icon: LuPackage,
    },
    {
      resourceKey: 'Public.nav.blog',
      name: translate('::App.Platform.BlogManagement'),
      path: ROUTES_ENUM.public.blog,
      icon: LuBookOpen,
    },
    {
      resourceKey: 'Public.nav.contact',
      name: translate('::App.Contact'),
      path: ROUTES_ENUM.public.contact,
      icon: LuPhone,
    },
    {
      resourceKey: 'App.PublicNav.Giris',
      name: translate('::App.PublicNav.Giris'),
      path: ROUTES_ENUM.authenticated.login,
    },
  ]

  const isLoginLink = (resourceKey?: string) => resourceKey === 'App.PublicNav.Giris'

  const demoButton = (className = '', onClick?: () => void) => (
    <Button
      type="button"
      onClick={() => {
        setIsDemoOpen(true)
        onClick?.()
      }}
      variant="plain"
      size="sm"
      className={`group !h-9 !w-9 !bg-transparent !px-0 !text-gray-200 hover:!bg-transparent hover:!text-white !shadow-none !overflow-visible transition-colors ${className}`}
    >
      <span className="relative inline-flex h-7 w-7 items-center justify-center overflow-visible rounded-full border-2 border-stone-700 bg-gradient-to-b from-red-400 via-red-600 to-red-800 shadow-[inset_0_-3px_6px_rgba(0,0,0,0.35),0_1px_3px_rgba(0,0,0,0.35)] ring-1 ring-black/60 transition-all duration-200 group-hover:scale-105 group-hover:from-red-300 group-hover:via-red-500 group-hover:to-red-700 group-hover:shadow-[inset_0_-3px_6px_rgba(0,0,0,0.3),0_2px_8px_rgba(239,68,68,0.35)]">
        <span className="absolute inset-x-1 top-1 h-2 rounded-full bg-white/35 blur-[1px] transition-colors group-hover:bg-white/50" />
        <span className="absolute left-1/2 top-1/2 z-10 w-12 -translate-x-1/2 -translate-y-1/2 text-center uppercase leading-none tracking-tight text-white drop-shadow">
          {translate('::App.Demos')}
        </span>
      </span>
    </Button>
  )

  const themeToggle = (
    <div className="inline-flex h-9 items-center rounded-lg p-0.5">
      <Button
        type="button"
        onClick={() => setThemeMode(THEME_ENUM.MODE_LIGHT)}
        aria-pressed={!isDarkMode}
        title={translate('::App.Theme.LightMode')}
        icon={<LuSun size={15} strokeWidth={1.8} />}
        variant="plain"
        size="xs"
        className={`!h-8 !w-8 xl:!w-auto !px-0 xl:!px-2.5 !rounded-l-md !rounded-r-none !border-transparent !shadow-none ${
          !isDarkMode
            ? '!bg-white !text-gray-950'
            : '!bg-transparent !text-gray-300 hover:!bg-transparent hover:!text-white'
        }`}
      />

      <Button
        type="button"
        onClick={() => setThemeMode(THEME_ENUM.MODE_DARK)}
        aria-pressed={isDarkMode}
        title={translate('::App.Theme.DarkMode')}
        icon={<LuMoon size={15} strokeWidth={1.8} />}
        variant="plain"
        size="xs"
        className={`!h-8 !w-8 xl:!w-auto !px-0 xl:!px-2.5 !rounded-r-md !rounded-l-none !border-transparent !shadow-none ${
          isDarkMode
            ? '!bg-gray-300 !text-gray-800'
            : '!bg-transparent !text-gray-300 hover:!bg-transparent hover:!text-white'
        }`}
      />
    </div>
  )

  const isActiveLink = (path?: string) => {
    if (!path) return false
    if (path === ROUTES_ENUM.public.home) return location.pathname === path
    return location.pathname.startsWith(path)
  }

  return (
    <DemoProvider value={{ openDemo: () => setIsDemoOpen(true) }}>
      <ScrollContext.Provider value={scrolled}>
        <div className="flex flex-col min-h-screen">
          {/* HEADER */}
          <header
            className={`fixed w-full z-50 transition-all duration-500 ${
              scrolled
                ? 'bg-gray-950 shadow-lg shadow-black/30 py-2 border-b border-white/10'
                : 'bg-gray-950/80 backdrop-blur-sm py-4 border-b border-white/5'
            }`}
          >
            <div className="container mx-auto px-6 relative grid grid-cols-[auto_1fr_auto] items-center lg:grid-cols-[1fr_auto] xl:grid-cols-[auto_1fr_auto]">
              <Logo
                mode={isDarkMode ? 'dark' : 'light'}
                className="relative z-10 max-w-[190px] overflow-hidden lg:hidden xl:block xl:max-w-none"
                imgClass="h-10 w-auto object-contain xl:h-auto"
              />

              {/* Desktop / tablet navigation */}
              <nav className="hidden lg:flex lg:col-start-1 xl:col-start-2 items-center justify-self-start xl:justify-self-center gap-1">
                {navLinks
                  .filter((l) => !isLoginLink(l.resourceKey))
                  .map((link) => {
                    const active = isActiveLink(link.path)
                    const baseClass =
                      'relative flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 group'
                    const activeClass = active ? 'text-white' : 'text-gray-300 hover:text-white'
                    return link.path ? (
                      <Link
                        key={link.path}
                        to={link.path}
                        className={`${baseClass} ${activeClass}`}
                      >
                        {link.icon && (
                          <link.icon
                            size={22}
                            strokeWidth={1.75}
                            className={
                              active
                                ? 'text-blue-400'
                                : 'text-gray-400 group-hover:text-blue-400 transition-colors'
                            }
                          />
                        )}
                        {link.name}
                        <span
                          className={`absolute bottom-0 left-3 right-3 h-0.5 rounded-full bg-blue-500 transition-all duration-200 ${
                            active ? 'opacity-100' : 'opacity-0 group-hover:opacity-60'
                          }`}
                        />
                      </Link>
                    ) : (
                      <Button
                        key={link.name}
                        onClick={link.action}
                        variant="plain"
                        size="sm"
                        className={`${baseClass} ${activeClass}`}
                      >
                        {link.icon && (
                          <link.icon
                            size={22}
                            strokeWidth={1.75}
                            className="text-gray-400 group-hover:text-blue-400 transition-colors"
                          />
                        )}
                        {link.name}
                        <span className="absolute bottom-0 left-3 right-3 h-0.5 rounded-full bg-blue-500 opacity-0 group-hover:opacity-60 transition-all duration-200" />
                      </Button>
                    )
                  })}
              </nav>

              <div className="relative z-10 hidden lg:flex lg:col-start-2 xl:col-start-3 lg:justify-self-end items-center gap-3">
                {demoButton('rounded-lg')}
                <div className="h-5 w-px bg-white/20" />
                <div className="flex h-9 w-9 items-center justify-center">
                  <LanguageSelector className="!bg-transparent hover:!bg-transparent dark:hover:!bg-transparent" />
                </div>
                <div className="h-5 w-px bg-white/20" />
                {themeToggle}
                <div className="h-5 w-px bg-white/20" />
                {navLinks
                  .filter((l) => isLoginLink(l.resourceKey))
                  .map((link) =>
                    link.path ? (
                      <Button
                        key={link.path}
                        type="button"
                        variant="solid"
                        shape="round"
                        onClick={() => navigate(link.path!)}
                      >
                        {link.name}
                      </Button>
                    ) : null,
                  )}
              </div>

              {/* Mobile Menu Button */}
              <Button
                className="lg:hidden col-start-3 justify-self-end flex items-center justify-center w-9 h-9 text-white rounded-md hover:bg-white/10 transition-colors"
                onClick={toggleMenu}
                aria-label={translate('::App.Platform.ToggleMenu')}
                aria-expanded={isOpen}
                icon={
                  isOpen ? <LuX size={20} strokeWidth={2} /> : <LuMenu size={20} strokeWidth={2} />
                }
                variant="plain"
                size="xs"
              />
            </div>

            {/* Mobile Navigation */}
            <div
              className={`lg:hidden transition-all duration-300 ease-in-out ${
                isOpen
                  ? 'max-h-screen overflow-visible opacity-100'
                  : 'max-h-0 overflow-hidden opacity-0'
              }`}
            >
              <div className="border-t border-white/10 bg-gray-950/98 backdrop-blur-md">
                <div className="container mx-auto px-6 py-3">
                  <nav className="flex flex-col gap-1">
                    <div className="lg:hidden flex flex-col gap-1">
                      {navLinks.map((link) => {
                        const active = isActiveLink(link.path)
                        const isLogin = isLoginLink(link.resourceKey)
                        if (isLogin) {
                          return link.path ? (
                            <Link
                              key={link.path}
                              to={link.path}
                              onClick={toggleMenu}
                              className="mt-2 flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors"
                            >
                              {link.name}
                            </Link>
                          ) : null
                        }
                        return link.path ? (
                          <Link
                            key={link.path}
                            to={link.path}
                            onClick={toggleMenu}
                            className={`flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium rounded-md transition-colors ${
                              active
                                ? 'bg-white/10 text-white'
                                : 'text-gray-300 hover:bg-white/5 hover:text-white'
                            }`}
                          >
                            {link.icon && (
                              <link.icon
                                size={16}
                                strokeWidth={1.75}
                                className={active ? 'text-blue-400' : 'text-gray-400'}
                              />
                            )}
                            {link.name}
                          </Link>
                        ) : (
                          <Button
                            key={link.name}
                            onClick={() => {
                              link.action?.()
                              toggleMenu()
                            }}
                            variant="plain"
                            size="sm"
                            className="flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white rounded-md transition-colors text-left"
                          >
                            {link.icon && (
                              <link.icon size={16} strokeWidth={1.75} className="text-gray-400" />
                            )}
                            {link.name}
                          </Button>
                        )
                      })}
                    </div>
                    <div className="mt-1 border-t border-white/10 pt-2 pb-1">
                      <div className="flex items-center justify-between gap-3">
                        <div className="flex items-center gap-1">
                          {demoButton('rounded-lg', toggleMenu)}
                          <div className="flex h-10 min-w-10 items-center justify-center rounded-lg">
                            <LanguageSelector className="!bg-transparent hover:!bg-transparent dark:hover:!bg-transparent" />
                          </div>
                        </div>
                        <div className="flex h-10 items-center rounded-lg px-1">{themeToggle}</div>
                        {navLinks
                          .filter((l) => isLoginLink(l.resourceKey))
                          .map((link) =>
                            link.path ? (
                              <Link
                                key={link.path}
                                to={link.path}
                                onClick={toggleMenu}
                                className="hidden h-10 lg:inline-flex items-center justify-center px-4 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg shadow-md shadow-blue-900/30 transition-colors"
                              >
                                {link.name}
                              </Link>
                            ) : null,
                          )}
                      </div>
                    </div>
                  </nav>
                </div>
              </div>
            </div>
          </header>

          <main className="flex-grow">
            <View />
          </main>

          <footer className="bg-gray-900 text-white pt-16 pb-8">
            <div className="container mx-auto px-4">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div>
                  <Logo mode={isDarkMode ? 'dark' : 'light'} />
                  <p className="mt-4 text-gray-400 text-sm">
                    {translate('::App.PublicFooter.CompanyInfo')}
                  </p>
                  <div className="flex space-x-4 mt-6">
                    <a
                      href="https://facebook.com/sozsoft"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-gray-400 hover:text-white transition-colors"
                    >
                      <FaFacebook size={20} />
                    </a>
                    <a
                      href="https://twitter.com/sozsoft"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-gray-400 hover:text-white transition-colors"
                    >
                      <FaTwitter size={20} />
                    </a>
                    <a
                      href="https://linkedin.com/sozsoft"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-gray-400 hover:text-white transition-colors"
                    >
                      <FaLinkedin size={20} />
                    </a>
                    <a
                      href="https://instagram.com/sozsoft"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-gray-400 hover:text-white transition-colors"
                    >
                      <FaInstagram size={20} />
                    </a>
                  </div>
                </div>

                {/* Quick Links */}
                <div>
                  <h3 className="text-lg font-bold mb-4 text-white">
                    {translate('::App.PublicFooter.QuickLinksTitle')}
                  </h3>
                  <ul className="space-y-2">
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.home}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.Home')}
                      </Link>
                    </li>
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.products}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.Platform.Orders')}
                      </Link>
                    </li>
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.services}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.Services')}
                      </Link>
                    </li>
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.about}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.About')}
                      </Link>
                    </li>
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.blog}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.Platform.BlogManagement')}
                      </Link>
                    </li>
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.contact}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.Contact')}
                      </Link>
                    </li>
                  </ul>
                </div>

                {/* Services */}
                <div>
                  <h3 className="text-lg font-bold mb-4 text-white">
                    {translate('::App.PublicServices.ServicesTitle')}
                  </h3>
                  <ul className="space-y-2">
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.services}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.ServicesSoftware.SoftwareTitle')}
                      </Link>
                    </li>
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.services}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.BlogCategories.Webdev')}
                      </Link>
                    </li>
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.services}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.ServicesMobile.MobileTitle')}
                      </Link>
                    </li>
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.services}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.ServicesDatabase.DatabaseTitle')}
                      </Link>
                    </li>
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.services}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.ServicesIntegration.IntegrationTitle')}
                      </Link>
                    </li>
                    <li>
                      <Link
                        to={ROUTES_ENUM.public.services}
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        {translate('::App.ServicesConsulting.ConsultingTitle')}
                      </Link>
                    </li>
                  </ul>
                </div>

                {/* Contact Info */}
                <div>
                  <h3 className="text-lg font-bold mb-4 text-white">
                    {translate('::App.Contact')}
                  </h3>
                  <ul className="space-y-3">
                    <li className="flex items-start space-x-3">
                      <LuMapPin
                        size={18}
                        strokeWidth={1.75}
                        className="text-gray-400 mt-1 flex-shrink-0"
                      />
                      <span className="text-gray-400">{translate('::App.PublicFooter.Address')}</span>
                    </li>
                    <li className="flex items-center space-x-3">
                      <LuPhone
                        size={18}
                        strokeWidth={1.75}
                        className="text-gray-400 flex-shrink-0"
                      />
                      <a
                        href="tel:+905447697638"
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        +90 (544) 769 7 638
                      </a>
                    </li>
                    <li className="flex items-center space-x-3">
                      <LuMail
                        size={18}
                        strokeWidth={1.75}
                        className="text-gray-400 flex-shrink-0"
                      />
                      <a
                        href="mailto:destek@sozsoft.com"
                        className="text-gray-400 hover:text-white transition-colors"
                      >
                        destek@sozsoft.com
                      </a>
                    </li>
                  </ul>
                </div>
              </div>

              <div className="border-t border-gray-800 mt-12 pt-8">
                <div className="flex flex-col md:flex-row justify-between items-center">
                  <p className="text-gray-400 text-sm">
                    &copy; {currentYear} Sözsoft Platform. {translate('::App.PublicFooter.Copyright')}
                  </p>
                  <div className="mt-4 md:mt-0">
                    <ul className="flex space-x-6 text-sm">
                      <li>
                        <Link
                          to={ROUTES_ENUM.public.about}
                          className="text-gray-400 hover:text-white transition-colors"
                        >
                          {translate('::App.PublicFooter.PrivacyPolicy')}
                        </Link>
                      </li>
                      <li>
                        <Link
                          to={ROUTES_ENUM.public.about}
                          className="text-gray-400 hover:text-white transition-colors"
                        >
                          {translate('::App.PublicFooter.TermsOfUse')}
                        </Link>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </footer>

          {/* Demo Modal */}
          <Demo isOpen={isDemoOpen} onClose={() => setIsDemoOpen(false)} />
        </div>
      </ScrollContext.Provider>
    </DemoProvider>
  )
}

export default PublicLayout