import React, { useState, useEffect } from 'react';
import {
Shield, Brain, Heart, Users, CheckCircle, ArrowRight,
Activity, Download, FileText, ExternalLink, X, Mail, MapPin,
Award, Briefcase, GraduationCap, Star, ClipboardCheck, Database, Printer, AlertCircle
} from 'lucide-react';
const App = () => {
const [imageUrl, setImageUrl] = useState('');
const [isGenerating, setIsGenerating] = useState(true);
const [isModalOpen, setIsModalOpen] = useState(false);
const cvFileName = "Currículo Natalha Calado Atualizado 2026_260224_215421 (1).pdf";
useEffect(() => {
const timer = setTimeout(() => {
setImageUrl("https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?auto=format&fit=crop&q=80&w=1000");
setIsGenerating(false);
}, 1000);
return () => clearTimeout(timer);
}, []);
const toggleModal = () => {
setIsModalOpen(!isModalOpen);
if (!isModalOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'unset';
}
};
const handlePrint = () => {
window.print();
};
const handleDownloadOriginal = (e) => {
e.preventDefault();
const link = document.createElement('a');
link.href = cvFileName;
link.download = cvFileName;
link.target = "_blank";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
return (
<div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-100 scroll-smooth text-left">
{/* Estilos Globais e de Impressão Refinados */}
<style>{`
@media print {
body * { visibility: hidden !important; }
.printable-content, .printable-content * {
visibility: visible !important;
display: block !important;
}
.printable-content {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
border: none !important;
}
.no-print { display: none !important; }
aside {
background-color: #0f172a !important;
color: white !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.print-bg-blue {
background-color: #2563eb !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
/* Estilização da Barra de Rolagem do Modal */
.cv-scroll-container::-webkit-scrollbar {
width: 10px;
}
.cv-scroll-container::-webkit-scrollbar-track {
background: #f8fafc;
}
.cv-scroll-container::-webkit-scrollbar-thumb {
background: #2563eb;
border-radius: 5px;
border: 2px solid #f8fafc;
}
.cv-scroll-container::-webkit-scrollbar-thumb:hover {
background: #1d4ed8;
}
/* Garantir que o modal não quebre a rolagem em dispositivos móveis */
.modal-height-fix {
height: calc(100% - 80px);
}
`}</style>
{/* Navegação principal */}
<nav className="flex items-center justify-between px-6 py-4 bg-white/90 backdrop-blur-md sticky top-0 z-50 border-b border-slate-100 no-print">
<div className="flex items-center gap-2 text-left">
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold shadow-lg shadow-blue-200">NC</div>
<span className="text-xl font-bold tracking-tight text-slate-800">Natalha Calado</span>
</div>
<div className="hidden md:flex gap-8 text-sm font-medium text-slate-600">
<a href="#sobre" className="hover:text-blue-600 transition-colors">Sobre</a>
<a href="#servicos" className="hover:text-blue-600 transition-colors">Governança</a>
<a href="#qualificacoes" className="hover:text-blue-600 transition-colors">Qualificações</a>
</div>
<div className="flex items-center gap-3">
<button onClick={toggleModal} className="hidden sm:flex items-center gap-2 text-slate-600 hover:text-blue-600 transition-all text-sm font-semibold border-r pr-4 border-slate-200">
<FileText size={18} /> Ver Currículo
</button>
<button className="bg-slate-900 text-white px-5 py-2 rounded-full text-sm font-semibold hover:bg-blue-600 transition-all shadow-lg shadow-slate-200">
Contacto
</button>
</div>
</nav>
{/* Hero Section / SOBRE */}
<section id="sobre" className="relative pt-12 pb-24 px-6 overflow-hidden no-print text-left">
<div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
<div className="z-10 animate-in fade-in slide-in-from-left duration-1000">
<div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-xs font-bold uppercase tracking-wider mb-8">
<Activity size={14} /> Administradora | UNICAP
</div>
<h1 className="text-5xl lg:text-7xl font-extrabold text-slate-900 leading-[1.1] mb-8">
Estratégia, IA e <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-teal-500">Negócios Digitais.</span>
</h1>
<p className="text-xl text-slate-600 mb-10 max-w-xl leading-relaxed text-left">
Especialista em Compliance e Governança de Dados pela UNICAP, unindo o rigor administrativo à vanguarda tecnológica para gerar impacto social e inclusão.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<button className="bg-blue-600 text-white px-8 py-4 rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-blue-700 hover:scale-105 transition-all shadow-xl shadow-blue-200 group">
Projetos WhatsCare <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
</button>
<button onClick={toggleModal} className="bg-white border-2 border-slate-200 text-slate-700 px-8 py-4 rounded-2xl font-bold hover:border-blue-600 hover:text-blue-600 hover:scale-105 transition-all flex items-center justify-center gap-2">
<ExternalLink size={18} /> Abrir Currículo Estilizado
</button>
</div>
</div>
<div className="relative animate-in fade-in slide-in-from-right duration-1000">
<div className="aspect-square bg-white rounded-[3rem] overflow-hidden shadow-2xl relative border-[12px] border-white group">
<img src={imageUrl} alt="Natalha Calado" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
</div>
</div>
</div>
</section>
{/* Seção de Qualificações */}
<section id="qualificacoes" className="py-20 bg-slate-900 text-white px-6 no-print text-left">
<div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div className="text-left">
<h2 className="text-3xl font-black mb-6 uppercase tracking-tight text-blue-400">Qualificações</h2>
<div className="space-y-4 text-slate-300">
<div className="flex items-center gap-3">
<CheckCircle className="text-teal-400" size={20} />
<span>Expertise em Cadeia de Custódia e Conformidade Digital</span>
</div>
<div className="flex items-center gap-3">
<CheckCircle className="text-teal-400" size={20} />
<span>Arquitetura de Processos e Modelagem Estratégica</span>
</div>
<div className="flex items-center gap-3">
<CheckCircle className="text-teal-400" size={20} />
<span>Especialista em Inovação com Impacto Social (ESG)</span>
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="p-6 bg-white/5 rounded-3xl border border-white/10 text-center">
<div className="text-4xl font-black text-blue-400 mb-2">20+</div>
<div className="text-xs uppercase font-bold tracking-widest text-slate-500">Anos de Trajetória</div>
</div>
<div className="p-6 bg-white/5 rounded-3xl border border-white/10 text-center">
<div className="text-4xl font-black text-teal-400 mb-2 uppercase">UNICAP</div>
<div className="text-xs uppercase font-bold tracking-widest text-slate-500">Graduação em Adm.</div>
</div>
</div>
</div>
</section>
{/* Seção de Serviços */}
<section id="servicos" className="py-24 px-6 max-w-7xl mx-auto no-print text-left">
<div className="text-center mb-16">
<h2 className="text-4xl font-black text-slate-900 mb-4 tracking-tight uppercase">Especialidades</h2>
</div>
<div className="grid md:grid-cols-3 gap-10">
{[
{ title: "Governança de IA", icon: <Brain />, color: "bg-blue-50" },
{ title: "Compliance Digital", icon: <Shield />, color: "bg-teal-50" },
{ title: "Impacto Social", icon: <Users />, color: "bg-purple-50" }
].map((s, i) => (
<div key={i} className="bg-white p-10 rounded-[2.5rem] border border-slate-100 shadow-sm hover:shadow-xl transition-all">
<div className={`w-16 h-16 ${s.color} rounded-2xl flex items-center justify-center mb-8`}>{s.icon}</div>
<h3 className="text-2xl font-black mb-4 tracking-tight">{s.title}</h3>
<p className="text-slate-600 font-medium text-left">Implementação estratégica e conformidade ética em ambientes digitais complexos.</p>
</div>
))}
</div>
</section>
{/* MODAL DO CURRÍCULO */}
{isModalOpen && (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-2 sm:p-4 md:p-6 overflow-hidden">
<div className="absolute inset-0 bg-slate-900/95 backdrop-blur-md no-print" onClick={toggleModal}></div>
<div className="bg-white w-full max-w-5xl h-[95vh] rounded-[1.5rem] sm:rounded-[2.5rem] shadow-2xl z-10 flex flex-col overflow-hidden animate-in zoom-in-95 duration-300">
{/* Header do Modal */}
<div className="flex items-center justify-between p-4 sm:p-6 sm:px-10 border-b border-slate-100 bg-white sticky top-0 z-30 shadow-sm no-print">
<div className="flex items-center gap-4 text-left">
<div className="w-10 h-10 bg-blue-600 text-white rounded-xl flex items-center justify-center shadow-lg">
<FileText size={20} />
</div>
<div>
<h3 className="font-black text-slate-900 text-lg leading-none mb-1">Currículo Digital</h3>
<p className="text-[10px] text-slate-500 font-medium uppercase tracking-widest text-left">Natalha Calado | UNICAP</p>
</div>
</div>
<div className="flex items-center gap-2">
<button
onClick={handlePrint}
className="flex items-center gap-2 px-6 py-3 bg-blue-600 text-white rounded-xl text-sm font-bold hover:bg-blue-700 transition-all shadow-lg active:scale-95 group"
>
<Printer size={18} className="group-hover:scale-110 transition-transform" />
<span>Imprimir / PDF</span>
</button>
<button onClick={toggleModal} className="p-2 hover:bg-slate-100 rounded-xl transition-all text-slate-400">
<X size={24} />
</button>
</div>
</div>
{/* Conteúdo com Rolagem Garantida */}
<div className="flex-1 overflow-y-auto bg-slate-100/50 p-4 sm:p-8 cv-scroll-container modal-height-fix">
<div id="printable-cv" className="max-w-4xl mx-auto bg-white shadow-2xl border border-slate-200 rounded-lg overflow-hidden flex flex-col md:flex-row printable-content min-h-full">
{/* Sidebar */}
<aside className="w-full md:w-80 bg-slate-900 text-white p-10 flex flex-col gap-10">
<div className="space-y-4 text-left">
<div className="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center text-3xl font-black print-bg-blue">NC</div>
<h1 className="text-2xl font-black leading-tight uppercase tracking-tighter">Natalha Calado</h1>
<p className="text-blue-400 font-bold text-xs uppercase tracking-[0.2em]">Administradora UNICAP</p>
</div>
<div className="space-y-8 text-left">
<div className="space-y-4">
<h2 className="text-[10px] font-black uppercase tracking-widest text-slate-500 border-b border-slate-800 pb-2">Contacto</h2>
<div className="space-y-3 text-xs opacity-80">
<p className="flex items-center gap-3"><MapPin size={14} className="text-blue-400" /> Recife, PE</p>
<p className="flex items-center gap-3"><Mail size={14} className="text-blue-400" /> natalha.calado@email.com</p>
</div>
</div>
<div className="space-y-4">
<h2 className="text-[10px] font-black uppercase tracking-widest text-slate-500 border-b border-slate-800 pb-2">Bancário</h2>
<div className="space-y-3 text-xs opacity-80">
<p><strong>CAIXA</strong> | 1999 - 2000</p>
<p><strong>Banco do Brasil</strong> | 1997 — 1999</p>
</div>
</div>
</div>
</aside>
{/* Conteúdo Principal */}
<main className="flex-1 p-10 sm:p-12 space-y-12 bg-white text-left">
<section>
<div className="flex items-center gap-3 mb-6">
<Star className="text-blue-600" size={20} />
<h2 className="text-lg font-black uppercase tracking-widest text-slate-900">Perfil Profissional</h2>
</div>
<p className="text-slate-600 text-sm leading-relaxed text-justify">
Administradora formada pela UNICAP com vasta experiência em Estratégia, IA e Negócios Digitais. Especialista em Compliance e Governança de Dados, com sólida trajetória na arquitetura de processos de auditoria e modelagem estratégica para Inclusão e ESG.
</p>
</section>
<section className="space-y-10">
<div className="flex items-center gap-3 mb-4">
<Briefcase className="text-blue-600" size={20} />
<h2 className="text-lg font-black uppercase tracking-widest text-slate-900">Experiência Profissional</h2>
</div>
<div className="space-y-12">
<div className="relative pl-6 border-l-2 border-slate-100 text-left">
<div className="absolute -left-[9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-2 border-white shadow-sm print-bg-blue"></div>
<div className="flex flex-col sm:flex-row justify-between items-start mb-2">
<h3 className="font-black text-slate-900">Empreendedora e Desenvolvedora</h3>
<span className="text-[10px] font-black text-blue-600 bg-blue-50 px-3 py-1 rounded-full whitespace-nowrap">2012 — ATUAL</span>
</div>
<p className="text-blue-600 font-bold text-[10px] uppercase mb-4 tracking-wider">IA, Inovação e ESG</p>
<ul className="space-y-3 text-sm text-slate-600 list-disc list-inside">
<li>Governança de IA: Prompt Engineering e Gestão de Riscos Éticos.</li>
<li>Impacto Social: Soluções WhatsCare para comunidades autistas.</li>
<li>Mitigação de Riscos: Posicionamento estratégico em redes sociais.</li>
</ul>
</div>
<div className="relative pl-6 border-l-2 border-slate-100 text-left">
<div className="absolute -left-[9px] top-0 w-4 h-4 bg-slate-300 rounded-full border-2 border-white shadow-sm"></div>
<div className="flex flex-col sm:flex-row justify-between items-start mb-2">
<h3 className="font-black text-slate-900 text-left">Especialista em Compliance</h3>
<span className="text-[10px] font-black text-slate-400 bg-slate-50 px-3 py-1 rounded-full whitespace-nowrap">2010 — 2018</span>
</div>
<p className="text-slate-500 font-bold text-[10px] uppercase mb-4 tracking-wider text-left">Sistemas e Comunidades Digitais</p>
<p className="text-sm text-slate-600 text-left">Auditória técnica e conformidade para plataformas web e gestão estratégica de blogs.</p>
</div>
<div className="relative pl-6 border-l-2 border-slate-100 text-left">
<div className="absolute -left-[9px] top-0 w-4 h-4 bg-slate-300 rounded-full border-2 border-white shadow-sm"></div>
<div className="flex flex-col sm:flex-row justify-between items-start mb-2 text-left">
<h3 className="font-black text-slate-900">Analista de Auditoria</h3>
<span className="text-[10px] font-black text-slate-400 bg-slate-50 px-3 py-1 rounded-full whitespace-nowrap">2004 — 2010</span>
</div>
<p className="text-slate-500 font-bold text-[10px] uppercase mb-4 tracking-wider">Arquitetura de Processos</p>
<p className="text-sm text-slate-600">Modelagem estratégica de fluxos operacionais e planeamento de auditoria fiscal.</p>
</div>
</div>
</section>
<section className="space-y-6 pb-10 text-left">
<div className="flex items-center gap-3 mb-4">
<GraduationCap className="text-blue-600" size={20} />
<h2 className="text-lg font-black uppercase tracking-widest text-slate-900">Formação & Especializações</h2>
</div>
<div className="grid gap-4 text-left">
<div className="p-4 bg-slate-50 rounded-xl border border-slate-100 text-sm font-bold text-left">Bacharelado em Administração (UNICAP)</div>
<div className="p-4 bg-slate-50 rounded-xl border border-slate-100 text-sm font-bold flex justify-between text-left">
<span className="text-left">Cadeia de Custódia Bancária</span>
<span className="text-blue-600">2025</span>
</div>
<div className="p-4 bg-slate-50 rounded-xl border border-slate-100 text-sm font-bold flex justify-between text-left">
<span className="text-left">Análise de Investimentos Financeiros</span>
<span className="text-blue-600">2024</span>
</div>
</div>
</section>
</main>
</div>
</div>
</div>
</div>
)}
{/* Footer */}
<footer className="py-16 px-6 border-t border-slate-200 bg-white mt-12 no-print text-left">
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-10">
<div className="flex items-center gap-3 text-left">
<div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center text-white font-bold shadow-lg shadow-blue-100">NC</div>
<span className="text-xl font-bold tracking-tight text-slate-800">Natalha Calado</span>
</div>
<p className="text-slate-400 text-sm font-medium text-left">© 2026 Natalha Rodrigues Martins Calado. Formação UNICAP.</p>
<div className="flex gap-8 text-slate-600 font-bold text-sm text-left">
<a href="#" className="hover:text-blue-600 transition-colors underline decoration-slate-200 underline-offset-8">LinkedIn</a>
<a href="#" className="hover:text-blue-600 transition-colors underline decoration-slate-200 underline-offset-8">Instagram</a>
</div>
</div>
</footer>
</div>
);
};
export default App;