import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {ArrowUpRight, ArrowRight, Menu, X, MessageCircle, Phone, Mail, MapPin, Clock, ChartNoAxesCombined, Building2, FileCheck2, Users, Calculator, Compass, Layers, Wallet, ShieldCheck, HeartPulse, Check, Plus} from 'lucide-react';
import '@fontsource/inter/latin-400.css';
import '@fontsource/inter/latin-500.css';
import '@fontsource/inter/latin-600.css';
import '@fontsource/inter/latin-700.css';
import './styles.css';
import {LegalModal} from './legal';
import {usePageExperience,Metrics,Timeline,Reflection} from './experience';
import {WhatsAppIcon,useActiveSection,ServiceModal,ContactForm} from './interactions';
import {contact, brand, navigation, hero, history, services, differences, specialties, otherSegments, contactCopy} from './content';
const serviceIcons=[Calculator,Building2,FileCheck2,Users,Calculator,Compass,Layers,Wallet,ShieldCheck];
function Brand(){return brand.logo ? <img className="logo" src={brand.logo} alt="iD Prime Consultoria Contábil"/> : <span className="brand-name">iD Prime<span>CONSULTORIA CONTÁBIL</span></span>}
function CTA({children='Fale com um especialista',className=''}){return <a className={'button '+className} href={contact.whatsapp} target="_blank" rel="noreferrer">{children}<ArrowUpRight size={18}/></a>}
function Eyebrow({children}){return <div className="eyebrow"><span/>{children}</div>}
function App(){const [open,setOpen]=useState(false); const [selected,setSelected]=useState(null); const [legal,setLegal]=useState(null); const active=useActiveSection(navigation); usePageExperience(); return <>
<a className="skip" href="#conteudo">Pular para o conteúdo</a>
<div className="reading-progress" aria-hidden="true"/><div className="topbar"><div className="container"><span>São Paulo, SP <span className="dot">·</span> Atendimento presencial e online</span><a href="tel:+551132977138"><Phone size={12}/> {contact.phone}</a></div></div>
<header><div className="container header-inner"><a href="#inicio" aria-label="ID Prime — início"><Brand/></a><button className="menu-button" aria-label={open?'Fechar menu':'Abrir menu'} aria-expanded={open} aria-controls="navigation" onClick={()=>setOpen(!open)}>{open?<X/>:<Menu/>}</button><nav id="navigation" className={open?'open':''} aria-label="Principal">{navigation.map(([id,label])=><a key={id} href={'#'+id} aria-current={active===id?'location':undefined} className={active===id?'active':''} onClick={()=>setOpen(false)}>{label}</a>)}<CTA className="small">Vamos conversar</CTA></nav></div></header>
<main id="conteudo"><section id="inicio" className="hero"><div className="container hero-grid"><div className="hero-copy"><Eyebrow>CONTABILIDADE PARA DECISÕES MELHORES</Eyebrow><h1>{hero.title.slice(0,-hero.accent.length)}<em>{hero.accent}</em></h1><p>{hero.description}</p><div className="hero-actions"><CTA>Converse com um especialista</CTA><a className="text-link" href="#servicos">Conheça nossos serviços <ArrowRight size={17}/></a></div><div className="hero-proof"><span className="proof-icon"><ShieldCheck size={20}/></span><span><strong>Uma visão consultiva. Um atendimento próximo.</strong><small>Saúde e diferentes segmentos empresariais.</small></span></div></div><div className="hero-art" role="img" aria-label="Ilustração abstrata de arquitetura e crescimento"><div className="hero-illustration"><div className="art-grid"/><div className="arch arch-back"/><div className="arch arch-front"/><div className="art-line"/><div className="orb"/><div className="orbit orbit-one"/><div className="orbit orbit-two"/><div className="art-caption"><span>ORGANIZAÇÃO NO PRESENTE.</span><span>CLAREZA PARA O FUTURO.</span></div><span className="art-label">ILUSTRAÇÃO CONCEITUAL</span></div><div className="floating-card"><span className="card-icon"><ChartNoAxesCombined/></span><div><strong>Mais clareza.<br/>Melhores decisões.</strong><span>CONTABILIDADE CONSULTIVA</span></div><ArrowUpRight size={21}/></div></div></div></section>
<div className="principles"><div className="container"><span><Check/> Atendimento próximo</span><span><Check/> Visão estratégica</span><span><Check/> Segurança e organização</span><span><Check/> Soluções para o seu negócio</span></div></div>
<Metrics/><Reflection/><section id="quem-somos" className="section"><div className="container about-grid"><div><Eyebrow>QUEM SOMOS</Eyebrow><h2>A essência permanece.<br/><span>O olhar evolui.</span></h2><Timeline/></div><div className="history-copy">{history.map(p=><p key={p}>{p}</p>)}<a className="text-link" href="#contato">Conheça sua próxima parceria <ArrowUpRight size={18}/></a></div>{brand.officePhoto&&<figure className="office-gallery"><img src={brand.officePhoto} alt="Ambiente da ID Prime Contábil" loading="lazy"/><figcaption>Nosso escritório</figcaption></figure>}</div></section>
<section id="servicos" className="section services"><div className="container"><div className="section-heading"><div><Eyebrow>NOSSOS SERVIÇOS</Eyebrow><h2>Cada necessidade, um caminho.<br/><span>Cada negócio, um olhar.</span></h2></div><p>Da abertura à rotina da sua empresa, encontre o apoio contábil para organizar o presente e planejar seus próximos passos.</p></div><div className="services-grid">{services.map(([name,desc],i)=>{const Icon=serviceIcons[i];return <article className="service-card" key={name}><div className="service-top"><Icon size={25} strokeWidth={1.5}/><span>0{i+1}</span></div><h3>{name}</h3><p>{desc}</p><button className="service-more" aria-haspopup="dialog" aria-label={'Saiba mais sobre '+name} onClick={()=>setSelected([name,desc])}>Saiba mais <ArrowUpRight size={17}/></button></article>})}</div></div></section>
<section id="especialidades" className="section health"><div className="container health-grid"><div className="health-visual" aria-hidden="true"><div className="health-ring ring-one"/><div className="health-ring ring-two"/><HeartPulse size={120} strokeWidth={0.8}/><span>CUIDADO EM CADA DETALHE</span><div className="health-note"><ShieldCheck size={24}/><span>Seu negócio em boas mãos.</span></div></div><div><Eyebrow>UM OLHAR ESPECIAL PARA A SAÚDE</Eyebrow><h2>{specialties.title}</h2><aside className="other-segments-note"><strong>Sua empresa é de outro segmento?</strong><p>A ID Prime também oferece soluções contábeis para negócios de diferentes setores.</p><a href="#alem-da-saude">Conheça os demais segmentos atendidos <ArrowRight size={15}/></a></aside>{specialties.paragraphs.map(p=><p key={p}>{p}</p>)}<blockquote>{specialties.callout}</blockquote><CTA>Converse com nossos especialistas</CTA></div></div></section>
<section id="alem-da-saude" className="section segments"><div className="container segments-inner"><div><Eyebrow>ALÉM DA SAÚDE</Eyebrow><h2>{otherSegments.title}</h2></div><div>{otherSegments.paragraphs.map(p=><p key={p}>{p}</p>)}<a className="text-link" href="#contato">Seu negócio também tem espaço aqui <ArrowUpRight size={18}/></a></div></div></section>
<section id="diferenciais" className="section"><div className="container"><Eyebrow>O JEITO ID PRIME DE CUIDAR</Eyebrow><h2>Mais do que números.<br/><span>Uma parceria de verdade.</span></h2><div className="differences-grid">{differences.map(([name,desc],i)=><article key={name}><span className="difference-number">0{i+1}</span><h3>{name}</h3><p>{desc}</p></article>)}</div><div className="differences-cta"><div><h3>Sua empresa merece mais do que uma contabilidade tradicional.</h3><p>Um atendimento próximo, consultivo e comprometido com as necessidades do seu negócio.</p></div><CTA>Converse com nossos especialistas</CTA></div></div></section>
{brand.team.length>0&&<section className="section" id="equipe"><div className="container"><Eyebrow>NOSSA EQUIPE</Eyebrow><h2>Pessoas por trás da parceria.</h2><div className="services-grid">{brand.team.map(person=><article key={person.name}>{person.photo&&<img src={person.photo} alt={person.name}/>}<h3>{person.name}</h3><p>{person.role}</p></article>)}</div></div></section>}
<section id="contato" className="section contact"><div className="container contact-grid"><div><Eyebrow>VAMOS CONVERSAR?</Eyebrow><h2>{contactCopy.title}</h2><p>{contactCopy.description}</p><CTA><WhatsAppIcon/> Fale pelo WhatsApp</CTA><address><a href="tel:+551132977138"><Phone/><span>{contact.phone}</span></a><a href={'mailto:'+contact.email}><Mail/><span>{contact.email}</span></a><a href={'https://www.google.com/maps/search/?api=1&query='+encodeURIComponent(contact.address)} target="_blank" rel="noreferrer"><MapPin/><span>{contact.address}</span></a><div><Clock/><span>{contact.hours}<small>Atendimento em São Paulo capital e municípios.</small></span></div></address></div><ContactForm onPrivacy={()=>setLegal('privacy')}/></div></section>
</main><footer><div className="container footer-grid"><div><Brand/><p>Experiência, proximidade e uma nova<br/>visão para a sua contabilidade.</p></div><div><h3>Explore</h3>{navigation.slice(1).map(([id,label])=><a href={'#'+id} key={id}>{label}</a>)}</div><div><h3>Conte com a ID Prime</h3><a href={contact.whatsapp} target="_blank" rel="noreferrer">WhatsApp: (11) 99416-3130 <ArrowUpRight size={13}/></a><a href={'mailto:'+contact.email}>{contact.email}</a><p>São Paulo — SP<br/>Presencial e online</p></div></div><div className="container legal-links" aria-label="Informações legais"><button onClick={()=>setLegal('privacy')}>Política de Privacidade</button><button onClick={()=>setLegal('terms')}>Termos de Uso</button></div><div className="container footer-bottom"><span>© {new Date().getFullYear()} ID PRIME CONSULTORIA CONTABIL LTDA</span><span>Organização hoje. Novas possibilidades amanhã.</span></div></footer><a className="floating-whatsapp" href={contact.whatsapp} target="_blank" rel="noreferrer" aria-label="Conversar com a ID Prime pelo WhatsApp"><WhatsAppIcon/></a>{legal&&<LegalModal document={legal} onClose={()=>setLegal(null)}/>}{selected&&<ServiceModal service={selected} onClose={()=>setSelected(null)}/>}</>}
createRoot(document.getElementById('root')).render(<App/>);