import { useState, useEffect, useRef, useCallback } from 'react'
import { useParams, Link, useNavigate, useSearchParams } from 'react-router-dom'
import { useRepo, useUpdateRepo, useDeleteRepo, useUploadRepoAvatar } from '../api/queries/repos'
import { useRecentRepos } from '../hooks/useRecentRepos'
import { Skeleton } from '../ui/Skeleton'
import { RepoAvatar } from '../ui/RepoAvatar'

// ─── Sidebar config ───────────────────────────────────────────────────────────

type SectionId =
  | 'repository-details'
  | 'repository-permissions'
  | 'access-keys'
  | 'access-tokens'
  | 'branch-restrictions'
  | 'branching-model'
  | 'merge-strategies'
  | 'webhooks'
  | 'default-reviewers'
  | 'default-description'
  | 'excluded-files'
  | 'git-lfs'

const SIDEBAR: { group: string; items: { id: SectionId; label: string }[] }[] = [
  {
    group: 'General',
    items: [
      { id: 'repository-details', label: 'Repository details' },
      { id: 'repository-permissions', label: 'Repository permissions' },
    ],
  },
  {
    group: 'Security',
    items: [
      { id: 'access-keys', label: 'Access keys' },
      { id: 'access-tokens', label: 'Access tokens' },
    ],
  },
  {
    group: 'Workflow',
    items: [
      { id: 'branch-restrictions', label: 'Branch restrictions' },
      { id: 'branching-model', label: 'Branching model' },
      { id: 'merge-strategies', label: 'Merge strategies' },
      { id: 'webhooks', label: 'Webhooks' },
    ],
  },
  {
    group: 'Pull Requests',
    items: [
      { id: 'default-reviewers', label: 'Default reviewers' },
      { id: 'default-description', label: 'Default description' },
      { id: 'excluded-files', label: 'Excluded files' },
    ],
  },
  {
    group: 'Features',
    items: [
      { id: 'git-lfs', label: 'Git LFS' },
    ],
  },
]

const SECTION_META: Record<SectionId, { title: string; description: string }> = {
  'repository-details': { title: 'Repository details', description: '' },
  'repository-permissions': { title: 'Repository permissions', description: 'Control who can read, write, or administer this repository. Invite collaborators and manage team access.' },
  'access-keys': { title: 'Access keys', description: 'SSH deploy keys give read or write access to this repository without requiring an interactive user account. Useful for CI/CD.' },
  'access-tokens': { title: 'Access tokens', description: 'Repository access tokens give third-party tools secure, scoped access to this repository via the API.' },
  'branch-restrictions': { title: 'Branch restrictions', description: 'Protect important branches by restricting who can push, delete, or force-push to them.' },
  'branching-model': { title: 'Branching model', description: 'Define a branching strategy (e.g. Gitflow) to enforce consistent branch naming across your team.' },
  'merge-strategies': { title: 'Merge strategies', description: 'Configure which merge strategies (merge commit, squash, rebase) are allowed for pull requests.' },
  'webhooks': { title: 'Webhooks', description: 'Send real-time HTTP POST notifications to external services when events occur in this repository.' },
  'default-reviewers': { title: 'Default reviewers', description: 'Automatically add reviewers to pull requests based on changed files or the target branch.' },
  'default-description': { title: 'Default description', description: 'Set a template that pre-fills the pull request body when a new PR is created.' },
  'excluded-files': { title: 'Excluded files', description: 'Specify files that should be excluded from pull request diff views and review requirements.' },
  'git-lfs': { title: 'Git LFS', description: 'Git Large File Storage replaces large files with text pointers inside git, while storing the actual files on a remote server.' },
}

// ─── Page shell ───────────────────────────────────────────────────────────────

export default function RepoSettingsPage() {
  const { owner = '', repo: repoName = '' } = useParams<{ owner: string; repo: string }>()
  const [searchParams, setSearchParams] = useSearchParams()
  const [sidebarSearch, setSidebarSearch] = useState('')
  const section = (searchParams.get('section') ?? 'repository-details') as SectionId

  const filtered = sidebarSearch.trim()
    ? SIDEBAR.map(g => ({ ...g, items: g.items.filter(i => i.label.toLowerCase().includes(sidebarSearch.toLowerCase())) })).filter(g => g.items.length > 0)
    : SIDEBAR

  return (
    <div className="flex h-full overflow-hidden">
      {/* Sidebar */}
      <aside className="w-60 shrink-0 border-r border-[#DFE1E6] bg-white hidden md:flex flex-col">
        <div className="p-3 border-b border-[#DFE1E6] space-y-2.5 shrink-0">
          <Link to={`/repos/${owner}/${repoName}`} className="flex items-center gap-1.5 text-sm text-[#172B4D] hover:text-[#0052CC] font-medium">
            <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
            </svg>
            Repository settings
          </Link>
          <div className="relative">
            <svg className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#5E6C84] pointer-events-none" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
            </svg>
            <input value={sidebarSearch} onChange={e => setSidebarSearch(e.target.value)} placeholder="Jump to settings…" className="w-full text-xs bg-[#F4F5F7] border border-[#DFE1E6] rounded pl-7 pr-3 py-1.5 focus:outline-none focus:border-[#4C9AFF]" />
          </div>
        </div>
        <nav className="flex-1 overflow-y-auto py-2">
          {filtered.map(group => (
            <div key={group.group} className="mb-1">
              <p className="text-[10px] font-semibold text-[#5E6C84] uppercase tracking-wider px-4 py-1.5">{group.group}</p>
              {group.items.map(item => (
                <button key={item.id} onClick={() => setSearchParams({ section: item.id })}
                  className={`w-full text-left px-4 py-2 text-sm transition-colors border-l-[3px] ${section === item.id ? 'bg-[#DEEBFF] text-[#0052CC] font-medium border-[#0052CC]' : 'text-[#172B4D] hover:bg-[#F4F5F7] border-transparent'}`}>
                  {item.label}
                </button>
              ))}
            </div>
          ))}
        </nav>
      </aside>

      {/* Content */}
      <main className="flex-1 overflow-y-auto min-w-0">
        <div className="md:hidden p-3 border-b border-[#DFE1E6] bg-white">
          <select value={section} onChange={e => setSearchParams({ section: e.target.value })} className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none">
            {SIDEBAR.map(g => g.items.map(i => <option key={i.id} value={i.id}>{g.group} → {i.label}</option>))}
          </select>
        </div>
        {section === 'repository-details'
          ? <RepositoryDetailsSection owner={owner} repo={repoName} />
          : <ComingSoon sectionId={section} />
        }
      </main>
    </div>
  )
}

// ─── Repository details ───────────────────────────────────────────────────────

function formatSize(bytes: number): string {
  if (!bytes) return '—'
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`
  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`
  return `${(bytes / 1024 ** 3).toFixed(2)} GB`
}

function RepositoryDetailsSection({ owner, repo }: { owner: string; repo: string }) {
  const navigate = useNavigate()
  const { data: repoData, isLoading } = useRepo(owner, repo)
  const updateRepo = useUpdateRepo(owner, repo)
  const deleteRepo = useDeleteRepo(owner, repo)
  const uploadAvatar = useUploadRepoAvatar(owner, repo)
  const { remove: removeRecent } = useRecentRepos()

  // Form state
  const [name, setName] = useState('')
  const [description, setDescription] = useState('')
  const [isPrivate, setIsPrivate] = useState(false)
  const [defaultBranch, setDefaultBranch] = useState('')
  const [showAdvanced, setShowAdvanced] = useState(false)
  const [showManage, setShowManage] = useState(false)
  const [confirmDelete, setConfirmDelete] = useState('')
  const [saved, setSaved] = useState(false)
  const [nameError, setNameError] = useState('')

  // Avatar state
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [avatarPreview, setAvatarPreview] = useState<string | null>(null)
  const manageRef = useRef<HTMLDivElement>(null)

  // Initialize form from API data
  useEffect(() => {
    if (repoData) {
      setName(repoData.name)
      setDescription(repoData.description ?? '')
      setIsPrivate(repoData.isPrivate)
      setDefaultBranch(repoData.defaultBranch)
    }
  }, [repoData])

  // Close manage dropdown on outside click
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (manageRef.current && !manageRef.current.contains(e.target as Node)) setShowManage(false)
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [])

  const isDirty = repoData != null && (
    name !== repoData.name ||
    description !== (repoData.description ?? '') ||
    isPrivate !== repoData.isPrivate ||
    defaultBranch !== repoData.defaultBranch
  )

  function handleDiscard() {
    if (!repoData) return
    setName(repoData.name)
    setDescription(repoData.description ?? '')
    setIsPrivate(repoData.isPrivate)
    setDefaultBranch(repoData.defaultBranch)
    setNameError('')
  }

  function handleNameChange(val: string) {
    setName(val)
    if (val && !/^[a-zA-Z0-9._-]+$/.test(val)) {
      setNameError('Only letters, numbers, hyphens, underscores, and dots are allowed.')
    } else {
      setNameError('')
    }
  }

  async function handleSave(e: React.FormEvent) {
    e.preventDefault()
    if (nameError) return
    const payload: Record<string, unknown> = { description, isPrivate, defaultBranch }
    if (name !== repoData?.name) payload.name = name
    const updated = await updateRepo.mutateAsync(payload)
    if (updated.name !== repo) {
      // Renamed — navigate to new URL
      navigate(`/repos/${owner}/${updated.name}/settings?section=repository-details`, { replace: true })
    } else {
      setSaved(true)
      setTimeout(() => setSaved(false), 3000)
    }
  }

  async function handleDelete() {
    if (confirmDelete !== repo) return
    await deleteRepo.mutateAsync()
    removeRecent(owner, repo)
    navigate('/repos')
  }

  const handleAvatarFile = useCallback((file: File) => {
    const reader = new FileReader()
    reader.onload = () => setAvatarPreview(reader.result as string)
    reader.readAsDataURL(file)
    uploadAvatar.mutate(file)
  }, [uploadAvatar])

  if (isLoading || !repoData) {
    return (
      <div className="max-w-2xl px-6 py-6 space-y-4">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-5 w-full" />
        <Skeleton className="h-24 w-full" />
      </div>
    )
  }

  return (
    <div className="max-w-2xl px-6 py-6 space-y-6">

      {/* Page header */}
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <div>
          <div className="flex items-center gap-1 text-xs text-[#5E6C84] mb-1.5">
            <Link to={`/repos/${owner}/${repo}`} className="hover:text-[#0052CC]">{owner}</Link>
            <span>/</span>
            <Link to={`/repos/${owner}/${repo}`} className="hover:text-[#0052CC]">{repo}</Link>
          </div>
          <h1 className="text-xl font-semibold text-[#172B4D]">Repository details</h1>
        </div>

        {/* Manage repository dropdown */}
        <div className="relative shrink-0" ref={manageRef}>
          <button
            onClick={() => setShowManage(s => !s)}
            className="flex items-center gap-1.5 px-3 py-1.5 border border-[#DFE1E6] rounded text-sm text-[#172B4D] hover:bg-[#F4F5F7] font-medium"
          >
            Manage repository
            <svg width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
            </svg>
          </button>
          {showManage && (
            <div className="absolute right-0 top-full mt-1 w-52 bg-white border border-[#DFE1E6] rounded-lg shadow-xl z-20 overflow-hidden">
              <button
                onClick={() => { setShowManage(false); setShowAdvanced(true); setTimeout(() => document.getElementById('danger-zone')?.scrollIntoView({ behavior: 'smooth' }), 50) }}
                className="w-full flex items-center gap-2 px-4 py-3 text-sm text-[#DE350B] hover:bg-[#FFEBE6] text-left"
              >
                <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                </svg>
                Delete repository
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="border-t border-[#DFE1E6]" />

      <form onSubmit={handleSave} className="space-y-6">

        {/* Avatar */}
        <div>
          <label className="block text-sm font-medium text-[#172B4D] mb-3">Avatar</label>
          <div className="flex items-center gap-4">
            {/* Clickable avatar */}
            <button
              type="button"
              onClick={() => fileInputRef.current?.click()}
              className="rounded-lg overflow-hidden ring-2 ring-[#DFE1E6] hover:ring-[#4C9AFF] transition-all focus:outline-none"
              title="Click to change avatar"
            >
              {avatarPreview ? (
                <img src={avatarPreview} alt="Preview" className="w-14 h-14 object-cover" />
              ) : (
                <RepoAvatar
                  ownerName={owner}
                  name={repoData.name}
                  avatarUrl={repoData.avatarUrl}
                  size={56}
                />
              )}
            </button>
            <div>
              <button
                type="button"
                onClick={() => fileInputRef.current?.click()}
                disabled={uploadAvatar.isPending}
                className="px-3 py-1.5 text-sm border border-[#DFE1E6] rounded text-[#172B4D] hover:bg-[#F4F5F7] disabled:opacity-50"
              >
                {uploadAvatar.isPending ? 'Uploading…' : 'Change avatar'}
              </button>
              <p className="text-xs text-[#5E6C84] mt-1">JPEG, PNG, GIF or WebP · max 5 MB</p>
              {uploadAvatar.isError && (
                <p className="text-xs text-[#DE350B] mt-1">{(uploadAvatar.error as Error).message}</p>
              )}
              {uploadAvatar.isSuccess && !avatarPreview && (
                <p className="text-xs text-[#00875A] mt-1">Avatar updated.</p>
              )}
            </div>
            <input
              ref={fileInputRef}
              type="file"
              accept="image/jpeg,image/png,image/gif,image/webp"
              className="hidden"
              onChange={e => { const f = e.target.files?.[0]; if (f) handleAvatarFile(f) }}
            />
          </div>
        </div>

        {/* Repository name */}
        <div>
          <label className="block text-sm font-medium text-[#172B4D] mb-1">
            Repository name <span className="text-[#DE350B]">*</span>
          </label>
          <input
            value={name}
            onChange={e => handleNameChange(e.target.value)}
            className={`w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-1 ${nameError ? 'border-[#DE350B] focus:border-[#DE350B] focus:ring-[#DE350B]' : 'border-[#DFE1E6] focus:border-[#4C9AFF] focus:ring-[#4C9AFF]'}`}
          />
          {nameError
            ? <p className="text-xs text-[#DE350B] mt-1">{nameError}</p>
            : name !== repoData.name
              ? <p className="text-xs text-[#FF8B00] mt-1 flex items-center gap-1">
                  <svg width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>
                  Renaming will change the clone URL — all existing git remotes will need to be updated.
                </p>
              : <p className="text-xs text-[#5E6C84] mt-1">Letters, numbers, hyphens, underscores, and dots only.</p>
          }
        </div>

        {/* Size (read-only) */}
        <div>
          <label className="block text-sm font-medium text-[#172B4D] mb-1">Size</label>
          <p className="text-sm text-[#172B4D]">{formatSize(repoData.size)}</p>
        </div>

        {/* Description */}
        <div>
          <label className="block text-sm font-medium text-[#172B4D] mb-1">Description</label>
          <textarea
            value={description}
            onChange={e => setDescription(e.target.value)}
            rows={4}
            placeholder="Describe this repository…"
            className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF] focus:ring-1 focus:ring-[#4C9AFF] resize-y"
          />
        </div>

        {/* Access level */}
        <div>
          <label className="block text-sm font-medium text-[#172B4D] mb-2">Access level</label>
          <label className="flex items-start gap-2.5 cursor-pointer">
            <input
              type="checkbox"
              checked={isPrivate}
              onChange={e => setIsPrivate(e.target.checked)}
              className="mt-0.5 w-4 h-4 accent-[#0052CC]"
            />
            <div>
              <span className="text-sm font-medium text-[#172B4D]">
                {isPrivate ? 'This is a private repository' : 'This is a public repository'}
              </span>
              <p className="text-xs text-[#5E6C84] mt-0.5">
                {isPrivate
                  ? 'Only collaborators you invite can see and push to this repository.'
                  : 'Anyone can view this repository. Make it private to restrict access.'}
              </p>
            </div>
          </label>
        </div>

        {/* Advanced (collapsible) */}
        <div className="border border-[#DFE1E6] rounded-lg overflow-hidden">
          <button
            type="button"
            onClick={() => setShowAdvanced(s => !s)}
            className="w-full flex items-center gap-2 px-4 py-3 text-sm font-medium text-[#172B4D] hover:bg-[#F4F5F7] text-left"
          >
            <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"
              className={`transition-transform shrink-0 ${showAdvanced ? 'rotate-90' : ''}`}>
              <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
            </svg>
            Advanced
          </button>

          {showAdvanced && (
            <div className="border-t border-[#DFE1E6] px-4 py-5 space-y-6 bg-[#FAFBFC]">
              {/* Default branch */}
              <div>
                <label className="block text-sm font-medium text-[#172B4D] mb-1">Default branch</label>
                <input
                  value={defaultBranch}
                  onChange={e => setDefaultBranch(e.target.value)}
                  placeholder="main"
                  className="w-full max-w-xs bg-white border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]"
                />
                <p className="text-xs text-[#5E6C84] mt-1">The default branch used as the base for new pull requests.</p>
              </div>

              {/* Danger zone */}
              <div id="danger-zone" className="border border-[#FFEBE6] rounded-lg overflow-hidden">
                <div className="px-4 py-3 bg-[#FFEBE6]/60 border-b border-[#FFEBE6]">
                  <h3 className="text-sm font-semibold text-[#BF2600]">Delete repository</h3>
                </div>
                <div className="px-4 py-4 space-y-3 bg-white">
                  <p className="text-sm text-[#172B4D]">
                    This is permanent and cannot be undone. All commits, branches, pull requests, issues, and settings will be permanently deleted.
                  </p>
                  <p className="text-xs text-[#5E6C84]">
                    Type <code className="font-mono bg-[#F4F5F7] border border-[#DFE1E6] px-1.5 py-0.5 rounded text-[#172B4D]">{repo}</code> to confirm.
                  </p>
                  <input
                    value={confirmDelete}
                    onChange={e => setConfirmDelete(e.target.value)}
                    placeholder={repo}
                    className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#DE350B]"
                  />
                  <button
                    type="button"
                    onClick={handleDelete}
                    disabled={confirmDelete !== repo || deleteRepo.isPending}
                    className="px-4 py-2 rounded bg-[#DE350B] text-white text-sm font-medium hover:bg-[#BF2600] disabled:opacity-40"
                  >
                    {deleteRepo.isPending ? 'Deleting…' : 'Delete repository'}
                  </button>
                  {deleteRepo.isError && (
                    <p className="text-xs text-[#DE350B]">{(deleteRepo.error as Error).message}</p>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Footer: error / saved / Discard / Save */}
        <div className="flex items-center justify-end gap-3 pt-2 border-t border-[#DFE1E6]">
          {updateRepo.isError && (
            <p className="text-xs text-[#DE350B] mr-auto">{(updateRepo.error as Error).message}</p>
          )}
          {saved && !updateRepo.isError && (
            <span className="text-xs text-[#00875A] font-medium mr-auto flex items-center gap-1">
              <svg width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
              </svg>
              Changes saved
            </span>
          )}
          <button type="button" onClick={handleDiscard} disabled={!isDirty}
            className="px-4 py-2 rounded border border-[#DFE1E6] text-sm text-[#172B4D] hover:bg-[#F4F5F7] disabled:opacity-40 min-h-[36px]">
            Discard
          </button>
          <button type="submit" disabled={updateRepo.isPending || !isDirty || !!nameError}
            className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] disabled:opacity-50 min-h-[36px]">
            {updateRepo.isPending ? 'Saving…' : 'Save changes'}
          </button>
        </div>
      </form>
    </div>
  )
}

// ─── Coming soon ──────────────────────────────────────────────────────────────

function ComingSoon({ sectionId }: { sectionId: SectionId }) {
  const meta = SECTION_META[sectionId]
  return (
    <div className="max-w-2xl px-6 py-6">
      <h1 className="text-xl font-semibold text-[#172B4D] mb-1">{meta.title}</h1>
      <div className="mt-8 flex flex-col items-center justify-center py-16 border border-dashed border-[#DFE1E6] rounded-lg text-center bg-[#FAFBFC]">
        <svg width="40" height="40" fill="none" stroke="#97A0AF" strokeWidth="1.2" viewBox="0 0 24 24" className="mb-4">
          <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
        </svg>
        <h2 className="text-base font-semibold text-[#172B4D] mb-2">{meta.title}</h2>
        <p className="text-sm text-[#5E6C84] max-w-sm leading-relaxed">{meta.description}</p>
        <span className="mt-5 text-[10px] font-semibold uppercase tracking-wider text-white bg-[#97A0AF] px-2.5 py-1 rounded-full">Coming soon</span>
      </div>
    </div>
  )
}
