"use client";

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useToast } from '@/contexts/ToastContext';

// Ícones pré-definidos para seleção
const AVAILABLE_ICONS = [
  // Pessoas e Equipe
  { value: 'ri-team-line', label: 'Equipe', category: 'pessoas' },
  { value: 'ri-user-star-line', label: 'Destaque', category: 'pessoas' },
  { value: 'ri-user-follow-line', label: 'Seguir', category: 'pessoas' },
  { value: 'ri-group-line', label: 'Grupo', category: 'pessoas' },
  
  // Segurança
  { value: 'ri-shield-check-line', label: 'Segurança', category: 'segurança' },
  { value: 'ri-shield-star-line', label: 'Proteção Premium', category: 'segurança' },
  { value: 'ri-lock-line', label: 'Cadeado', category: 'segurança' },
  { value: 'ri-hard-hat-line', label: 'Capacete', category: 'segurança' },
  
  // Serviços
  { value: 'ri-service-line', label: 'Atendimento', category: 'serviço' },
  { value: 'ri-customer-service-line', label: 'Suporte', category: 'serviço' },
  { value: 'ri-tools-line', label: 'Ferramentas', category: 'serviço' },
  { value: 'ri-settings-3-line', label: 'Engrenagem', category: 'serviço' },
  
  // Transporte
  { value: 'ri-car-line', label: 'Veículo', category: 'transporte' },
  { value: 'ri-truck-line', label: 'Caminhão', category: 'transporte' },
  { value: 'ri-bus-line', label: 'Ônibus', category: 'transporte' },
  { value: 'ri-motorbike-line', label: 'Moto', category: 'transporte' },
  
  // Documentos
  { value: 'ri-file-list-3-line', label: 'Documentos', category: 'documentos' },
  { value: 'ri-file-text-line', label: 'Arquivo', category: 'documentos' },
  { value: 'ri-clipboard-line', label: 'Prancheta', category: 'documentos' },
  { value: 'ri-contract-line', label: 'Contrato', category: 'documentos' },
  
  // Conquistas
  { value: 'ri-award-line', label: 'Prêmio', category: 'conquista' },
  { value: 'ri-trophy-line', label: 'Troféu', category: 'conquista' },
  { value: 'ri-medal-line', label: 'Medalha', category: 'conquista' },
  { value: 'ri-vip-crown-line', label: 'Coroa', category: 'conquista' },
  
  // Inovação
  { value: 'ri-lightbulb-line', label: 'Ideia', category: 'inovação' },
  { value: 'ri-flashlight-line', label: 'Lanterna', category: 'inovação' },
  { value: 'ri-rocket-line', label: 'Foguete', category: 'inovação' },
  { value: 'ri-flask-line', label: 'Experimento', category: 'inovação' },
  
  // Status
  { value: 'ri-checkbox-circle-line', label: 'Confirmado', category: 'status' },
  { value: 'ri-check-double-line', label: 'Verificado', category: 'status' },
  { value: 'ri-star-line', label: 'Estrela', category: 'status' },
  { value: 'ri-thumb-up-line', label: 'Aprovado', category: 'status' },
  
  // Dados
  { value: 'ri-pie-chart-line', label: 'Gráfico Pizza', category: 'dados' },
  { value: 'ri-bar-chart-line', label: 'Gráfico Barras', category: 'dados' },
  { value: 'ri-line-chart-line', label: 'Gráfico Linha', category: 'dados' },
  { value: 'ri-dashboard-line', label: 'Dashboard', category: 'dados' },
  
  // Performance
  { value: 'ri-speed-line', label: 'Velocidade', category: 'performance' },
  { value: 'ri-timer-line', label: 'Cronômetro', category: 'performance' },
  { value: 'ri-time-line', label: 'Relógio', category: 'performance' },
  { value: 'ri-pulse-line', label: 'Pulso', category: 'performance' },
  
  // Negócios
  { value: 'ri-building-line', label: 'Empresa', category: 'negócios' },
  { value: 'ri-briefcase-line', label: 'Maleta', category: 'negócios' },
  { value: 'ri-money-dollar-circle-line', label: 'Dinheiro', category: 'negócios' },
  { value: 'ri-hand-coin-line', label: 'Pagamento', category: 'negócios' },
  
  // Cálculo
  { value: 'ri-calculator-line', label: 'Calculadora', category: 'cálculo' },
  { value: 'ri-percent-line', label: 'Porcentagem', category: 'cálculo' },
  { value: 'ri-functions', label: 'Funções', category: 'cálculo' },
  
  // Comunicação
  { value: 'ri-message-3-line', label: 'Mensagem', category: 'comunicação' },
  { value: 'ri-chat-3-line', label: 'Chat', category: 'comunicação' },
  { value: 'ri-phone-line', label: 'Telefone', category: 'comunicação' },
  { value: 'ri-mail-line', label: 'Email', category: 'comunicação' },
  
  // Localização
  { value: 'ri-map-pin-line', label: 'Localização', category: 'local' },
  { value: 'ri-navigation-line', label: 'Navegação', category: 'local' },
  { value: 'ri-roadster-line', label: 'Estrada', category: 'local' },
  { value: 'ri-compass-line', label: 'Bússola', category: 'local' },
];

interface IconSelectorProps {
  value: string;
  onChange: (icon: string) => void;
  label: string;
}

function IconSelector({ value, onChange, label }: IconSelectorProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [search, setSearch] = useState('');

  const filteredIcons = AVAILABLE_ICONS.filter(icon => 
    icon.label.toLowerCase().includes(search.toLowerCase()) ||
    icon.category.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="relative">
      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        {label}
      </label>
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="w-full px-4 py-3 bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all flex items-center justify-between"
      >
        <div className="flex items-center gap-3">
          <i className={`${value} text-2xl text-primary`}></i>
          <span className="text-sm">{AVAILABLE_ICONS.find(i => i.value === value)?.label || 'Selecionar ícone'}</span>
        </div>
        <i className={`ri-arrow-${isOpen ? 'up' : 'down'}-s-line text-gray-400`}></i>
      </button>
      
      {isOpen && (
        <div className="absolute z-50 mt-2 w-full bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-xl shadow-xl">
          <div className="p-3 border-b border-gray-200 dark:border-white/10">
            <div className="relative">
              <i className="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Buscar ícone..."
                className="w-full pl-10 pr-4 py-2 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg text-sm focus:outline-none focus:border-primary"
                onClick={(e) => e.stopPropagation()}
              />
            </div>
          </div>
          <div className="p-2 grid grid-cols-4 gap-2 max-h-64 overflow-y-auto">
            {filteredIcons.map((icon) => (
              <button
                key={icon.value}
                type="button"
                onClick={() => {
                  onChange(icon.value);
                  setIsOpen(false);
                  setSearch('');
                }}
                className={`p-3 rounded-lg flex flex-col items-center gap-1 transition-all ${
                  value === icon.value
                    ? 'bg-primary text-white'
                    : 'hover:bg-gray-100 dark:hover:bg-white/5 text-gray-700 dark:text-gray-300'
                }`}
                title={icon.label}
              >
                <i className={`${icon.value} text-2xl`}></i>
                <span className="text-[10px] text-center leading-tight">{icon.label}</span>
              </button>
            ))}
          </div>
          {filteredIcons.length === 0 && (
            <div className="p-8 text-center text-gray-400 text-sm">
              Nenhum ícone encontrado
            </div>
          )}
        </div>
      )}
    </div>
  );
}

interface ValueItem {
  icon: string;
  title: string;
  description: string;
}

interface AboutContent {
  hero: {
    title: string;
    subtitle: string;
  };
  history: {
    title: string;
    subtitle: string;
    paragraph1: string;
    paragraph2: string;
  };
  values: {
    title: string;
    subtitle: string;
    items: ValueItem[];
  };
}

export default function EditAboutPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [initialLoading, setInitialLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('hero');
  const { success, error: showError } = useToast();

  const scrollToPreview = (sectionId: string) => {
    const element = document.getElementById(`preview-${sectionId}`);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
    setTimeout(() => scrollToPreview(tab), 100);
  };
  
  const [formData, setFormData] = useState<AboutContent>({
    hero: {
      title: 'Sobre a Occto Engenharia',
      subtitle: 'Excelência técnica, compromisso e inovação em cada projeto.'
    },
    history: {
      title: 'Nossa História',
      subtitle: 'Tradição e Inovação em Engenharia',
      paragraph1: 'Com mais de 15 anos de experiência no mercado, a Occto Engenharia se consolidou como referência em soluções técnicas. Nossa equipe multidisciplinar está preparada para atender demandas complexas com excelência e agilidade.',
      paragraph2: 'Ao longo dos anos, desenvolvemos projetos que transformaram a realidade de nossos clientes, sempre pautados pela ética, responsabilidade e compromisso com a qualidade.'
    },
    values: {
      title: 'Nossos Valores',
      subtitle: 'O que nos move',
      items: [
        { icon: 'ri-medal-line', title: 'Qualidade', description: 'Compromisso com a excelência em todos os nossos serviços e entregas.' },
        { icon: 'ri-shake-hands-line', title: 'Transparência', description: 'Comunicação clara e honesta em todas as etapas do projeto.' },
        { icon: 'ri-leaf-line', title: 'Sustentabilidade', description: 'Soluções que respeitam o meio ambiente e as futuras gerações.' }
      ]
    }
  });

  useEffect(() => {
    fetchPageContent();
  }, []);

  const fetchPageContent = async () => {
    try {
      const response = await fetch('/api/pages/about');
      if (response.ok) {
        const data = await response.json();
        if (data.content) {
          setFormData(prevData => ({
            hero: data.content.hero || prevData.hero,
            history: data.content.history || prevData.history,
            values: data.content.values || prevData.values
          }));
        }
      }
    } catch (err) {
      console.log('Nenhum conteúdo salvo ainda, usando padrão');
    } finally {
      setInitialLoading(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await fetch('/api/pages/about', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: formData })
      });

      if (!response.ok) throw new Error('Erro ao salvar');

      success('Conteúdo da página Sobre atualizado com sucesso!');
    } catch (err) {
      showError('Erro ao salvar alterações');
    } finally {
      setLoading(false);
    }
  };

  if (initialLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      </div>
    );
  }

  return (
    <>
      <style jsx global>{`
        main { padding: 0 !important; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
      `}</style>
      <div className="fixed top-20 bottom-0 left-64 right-0 flex gap-0 bg-gray-50 dark:bg-tertiary">
        {/* Formulário de Edição - Coluna Esquerda 30% */}
        <div className="w-[30%] shrink-0 overflow-y-auto bg-white dark:bg-secondary relative">
          <div className="absolute top-0 right-0 bottom-0 w-px bg-gray-200 dark:bg-white/10"></div>
        
        <div className="p-6 border-b border-gray-200 dark:border-white/10">
          <h1 className="text-2xl font-bold">Editar Página Sobre</h1>
          <p className="text-sm text-muted-foreground mt-1">
            Personalize o conteúdo institucional
          </p>
        </div>

        {/* Navigation Tabs */}
        <div className="relative border-b border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5">
          <div className="flex items-center">
            <button
              type="button"
              onClick={() => {
                const container = document.getElementById('tabs-container');
                if (container) container.scrollLeft -= 200;
              }}
              className="absolute left-0 z-10 w-10 h-full bg-white dark:bg-secondary border-r border-gray-200 dark:border-white/10 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-white/5 transition-all cursor-pointer"
            >
              <i className="ri-arrow-left-s-line text-xl text-gray-600 dark:text-gray-400"></i>
            </button>
            
            <div id="tabs-container" className="flex gap-2 p-4 overflow-x-auto scrollbar-hide scroll-smooth px-12">
              <button
                type="button"
                onClick={() => handleTabChange('hero')}
                className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors cursor-pointer ${
                  activeTab === 'hero' 
                    ? 'bg-primary text-primary-foreground' 
                    : 'bg-background hover:bg-muted'
                }`}
              >
                Banner
              </button>
              <button
                type="button"
                onClick={() => handleTabChange('history')}
                className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors cursor-pointer ${
                  activeTab === 'history' 
                    ? 'bg-primary text-primary-foreground' 
                    : 'bg-background hover:bg-muted'
                }`}
              >
                História
              </button>
              <button
                type="button"
                onClick={() => handleTabChange('values')}
                className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors cursor-pointer ${
                  activeTab === 'values' 
                    ? 'bg-primary text-primary-foreground' 
                    : 'bg-background hover:bg-muted'
                }`}
              >
                Valores (3)
              </button>
            </div>

            <button
              type="button"
              onClick={() => {
                const container = document.getElementById('tabs-container');
                if (container) container.scrollLeft += 200;
              }}
              className="absolute right-0 z-10 w-10 h-full bg-white dark:bg-secondary border-l border-gray-200 dark:border-white/10 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-white/5 transition-all cursor-pointer"
            >
              <i className="ri-arrow-right-s-line text-xl text-gray-600 dark:text-gray-400"></i>
            </button>
          </div>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-6 pb-20">
        
        {/* Hero Section */}
        {activeTab === 'hero' && (
        <div className="bg-white dark:bg-secondary p-8 rounded-2xl border border-gray-200 dark:border-white/10 shadow-sm">
          <h2 className="text-xl font-bold text-secondary dark:text-white mb-6 flex items-center gap-2">
            <i className="ri-layout-top-line text-primary"></i>
            Banner Principal
          </h2>
          
          <div className="grid grid-cols-1 gap-6">
            <div>
              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Título Principal</label>
              <input 
                type="text" 
                value={formData.hero.title}
                onChange={(e) => setFormData({...formData, hero: {...formData.hero, title: e.target.value}})}
                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
              />
            </div>

            <div>
              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Subtítulo</label>
              <textarea 
                value={formData.hero.subtitle}
                onChange={(e) => setFormData({...formData, hero: {...formData.hero, subtitle: e.target.value}})}
                rows={2}
                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none"
              ></textarea>
            </div>
          </div>
        </div>
        )}

        {/* History Section */}
        {activeTab === 'history' && (
        <div className="bg-white dark:bg-secondary p-8 rounded-2xl border border-gray-200 dark:border-white/10 shadow-sm">
          <h2 className="text-xl font-bold text-secondary dark:text-white mb-6 flex items-center gap-2">
            <i className="ri-history-line text-primary"></i>
            Nossa História
          </h2>
          
          <div className="grid grid-cols-1 gap-6">
            <div>
              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Pré-título</label>
              <input 
                type="text" 
                value={formData.history.title}
                onChange={(e) => setFormData({...formData, history: {...formData.history, title: e.target.value}})}
                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
              />
            </div>

            <div>
              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Título</label>
              <input 
                type="text" 
                value={formData.history.subtitle}
                onChange={(e) => setFormData({...formData, history: {...formData.history, subtitle: e.target.value}})}
                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
              />
            </div>

            <div>
              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Parágrafo 1</label>
              <textarea 
                value={formData.history.paragraph1}
                onChange={(e) => setFormData({...formData, history: {...formData.history, paragraph1: e.target.value}})}
                rows={4}
                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none"
              ></textarea>
            </div>

            <div>
              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Parágrafo 2</label>
              <textarea 
                value={formData.history.paragraph2}
                onChange={(e) => setFormData({...formData, history: {...formData.history, paragraph2: e.target.value}})}
                rows={4}
                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none"
              ></textarea>
            </div>
          </div>
        </div>
        )}

        {/* Values Section */}
        {activeTab === 'values' && (
        <div className="bg-white dark:bg-secondary p-8 rounded-2xl border border-gray-200 dark:border-white/10 shadow-sm">
          <h2 className="text-xl font-bold text-secondary dark:text-white mb-6 flex items-center gap-2">
            <i className="ri-heart-line text-primary"></i>
            Nossos Valores
          </h2>
          
          <div className="grid grid-cols-1 gap-6 mb-6">
            <div>
              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Pré-título</label>
              <input 
                type="text" 
                value={formData.values.title}
                onChange={(e) => setFormData({...formData, values: {...formData.values, title: e.target.value}})}
                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
              />
            </div>
            <div>
              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">Título da Seção</label>
              <input 
                type="text" 
                value={formData.values.subtitle}
                onChange={(e) => setFormData({...formData, values: {...formData.values, subtitle: e.target.value}})}
                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
              />
            </div>
          </div>

          <div className="space-y-6">
            {formData.values.items.map((item, index) => (
              <div key={index} className="p-6 bg-gray-50 dark:bg-white/5 rounded-xl border border-gray-200 dark:border-white/10">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-bold text-gray-900 dark:text-white">Valor {index + 1}</h3>
                </div>
                <div className="grid grid-cols-1 gap-4">
                  <IconSelector
                    label="Ícone"
                    value={item.icon}
                    onChange={(newIcon) => {
                      const newItems = [...formData.values.items];
                      newItems[index].icon = newIcon;
                      setFormData({...formData, values: {...formData.values, items: newItems}});
                    }}
                  />
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Título</label>
                    <input 
                      type="text" 
                      value={item.title}
                      onChange={(e) => {
                        const newItems = [...formData.values.items];
                        newItems[index].title = e.target.value;
                        setFormData({...formData, values: {...formData.values, items: newItems}});
                      }}
                      className="w-full px-4 py-3 bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Descrição</label>
                    <textarea 
                      value={item.description}
                      onChange={(e) => {
                        const newItems = [...formData.values.items];
                        newItems[index].description = e.target.value;
                        setFormData({...formData, values: {...formData.values, items: newItems}});
                      }}
                      rows={2}
                      className="w-full px-4 py-3 bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all resize-none"
                    ></textarea>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        )}

        {/* Actions */}
        <div className="fixed bottom-0 left-64 flex items-center justify-end gap-4 p-4 bg-white dark:bg-secondary border-t border-gray-200 dark:border-white/10 shadow-lg z-20" style={{ width: 'calc((100vw - 256px) * 0.3)' }}>
          <Link 
            href="/admin/paginas"
            className="px-6 py-2.5 border border-gray-200 dark:border-white/10 text-gray-600 dark:text-gray-300 rounded-xl font-bold hover:bg-gray-50 dark:hover:bg-white/5 transition-colors text-sm"
          >
            Cancelar
          </Link>
          <button 
            type="submit" 
            disabled={loading}
            className="px-6 py-2.5 bg-primary text-white rounded-xl font-bold hover-primary transition-colors shadow-lg shadow-primary/20 flex items-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed cursor-pointer text-sm"
          >
            {loading ? (
              <>
                <i className="ri-loader-4-line animate-spin"></i>
                Salvando...
              </>
            ) : (
              <>
                <i className="ri-save-line"></i>
                Salvar
              </>
            )}
          </button>
        </div>
        </form>
      </div>

      {/* Preview em Tempo Real - Coluna Direita Grande */}
      <div className="flex-1 overflow-y-auto bg-white dark:bg-secondary">
        <div className="sticky top-0 z-10 p-4 bg-gray-50 dark:bg-white/5 border-b border-gray-200 dark:border-white/10">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="font-bold text-gray-900 dark:text-white flex items-center gap-2">
                <i className="ri-eye-line text-primary"></i>
                Preview em Tempo Real
              </h3>
              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Visualização aproximada da página pública</p>
            </div>
            <Link
              href="/sobre"
              target="_blank"
              className="px-4 py-2 bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-white/5 transition-colors flex items-center gap-2 text-sm cursor-pointer"
            >
              <i className="ri-external-link-line"></i>
              Ver Página Real
            </Link>
          </div>
        </div>
        
        <div className="p-8">
              {/* Hero Preview */}
              {activeTab === 'hero' && (
              <div id="preview-hero" className="text-center space-y-4">
                <h1 className="text-5xl font-bold font-headline text-secondary dark:text-white leading-tight">
                  {formData.hero.title}
                </h1>
                <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
                  {formData.hero.subtitle}
                </p>
              </div>
              )}

              {/* History Preview */}
              {activeTab === 'history' && (
              <div id="preview-history" className="space-y-6">
                <div>
                  <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{formData.history.title}</h2>
                  <h3 className="text-3xl font-bold font-headline text-secondary dark:text-white mb-6">{formData.history.subtitle}</h3>
                  <p className="text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
                    {formData.history.paragraph1}
                  </p>
                  <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
                    {formData.history.paragraph2}
                  </p>
                </div>
              </div>
              )}

              {/* Values Preview */}
              {activeTab === 'values' && (
              <div id="preview-values" className="space-y-8">
                <div className="text-center">
                  <h2 className="text-primary font-bold tracking-wider uppercase mb-2">{formData.values.title}</h2>
                  <h3 className="text-3xl font-bold font-headline text-secondary dark:text-white">{formData.values.subtitle}</h3>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                  {formData.values.items.map((item, index) => (
                    <div key={index} className="bg-white dark:bg-secondary p-8 rounded-xl shadow-sm border-t-4 border-primary">
                      <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6">
                        <i className={`${item.icon} text-2xl`}></i>
                      </div>
                      <h4 className="text-xl font-bold font-headline text-secondary dark:text-white mb-3">{item.title}</h4>
                      <p className="text-gray-600 dark:text-gray-400">{item.description}</p>
                    </div>
                  ))}
                </div>
              </div>
              )}
            </div>
          </div>
      </div>
    </>
  );
}