import React, { useEffect, useRef, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';

const asset = (name: string) => (window as Window & { NN_ASSETS?: Record<string, string> }).NN_ASSETS?.[name] ?? `./assets/${name}`;
const Arrow = ({ diagonal = false }: { diagonal?: boolean }) => <span aria-hidden="true">{diagonal ? '↗' : '↗'}</span>;
const links = [['inicio', 'Início'], ['sobre', 'Sobre'], ['servicos', 'Serviços'], ['projetos', 'Projetos'], ['contato', 'Contato']];
const projects = [
  { title: 'Espaços para novos negócios', type: 'Comercial', image: 'comercial.jpg', alt: 'Referência ilustrativa de átrio comercial com iluminação natural, vegetação e mobiliário contemporâneo.' },
  { title: 'Ambientes que acolhem', type: 'Residencial', image: 'residencial.jpg', alt: 'Referência ilustrativa de fachada residencial branca com varandas e linhas contemporâneas.' },
  { title: 'Novas formas de receber', type: 'Comercial', image: 'interior.jpg', alt: 'Referência ilustrativa de ambiente comercial amplo com áreas de convivência e grandes janelas.' },
];

function App() {
  const [menu, setMenu] = useState(false);
  const [filter, setFilter] = useState('Todos');
  const [selected, setSelected] = useState<number | null>(null);
  const dialog = useRef<HTMLDialogElement>(null);
  const menuButton = useRef<HTMLButtonElement>(null);
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') { setMenu(false); } };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);
  useEffect(() => {
    if (selected !== null) { dialog.current?.showModal(); document.body.style.overflow = 'hidden'; }
    else { dialog.current?.close(); document.body.style.overflow = ''; }
    return () => { document.body.style.overflow = ''; };
  }, [selected]);
  useEffect(() => {
    const observer = new IntersectionObserver(entries => entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); observer.unobserve(entry.target); } }), { threshold: .08 });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
    return () => observer.disconnect();
  }, []);
  return <>
    <a href="#conteudo" className="skip-link">Pular para o conteúdo</a>
    <div className="ubuild-bar"><div className="container flex items-center justify-between gap-4">
      <span className="preview-brand">PRÉVIA EXCLUSIVA <span>·</span> <b>ubuild</b></span>
      <span className="preview-description">Uma demonstração do potencial da sua presença digital.</span>
      <a href="https://ubuild.com.br" target="_blank" rel="noopener noreferrer"><span className="ubuild-link-label">Conheça a Ubuild</span> <Arrow /></a>
    </div></div>
    <header className="site-header"><div className="container header-inner">
      <a href="#inicio" aria-label="NN Construções — Início" className="brand"><img src={asset('02-logo-horizontal.svg')} alt="NN Construções" width="1100" height="260" /></a>
      <button ref={menuButton} type="button" className="menu-toggle" aria-controls="main-nav" aria-expanded={menu} aria-label={menu ? 'Fechar menu' : 'Abrir menu'} onClick={() => setMenu(!menu)}><span>{menu ? 'Fechar' : 'Menu'}</span><span aria-hidden="true">{menu ? '×' : '☰'}</span></button>
      <nav id="main-nav" aria-label="Navegação principal" className={menu ? 'open' : ''}>
        {links.map(([id, label]) => <a key={id} href={`#${id}`} onClick={() => setMenu(false)}>{label}</a>)}
        <a href="#contato" className="button button-blue header-cta" onClick={() => setMenu(false)}>Solicitar orçamento <Arrow /></a>
      </nav>
    </div></header>
    <main id="conteudo">
      <section id="inicio" className="hero container">
        <div className="hero-copy">
          <p className="eyebrow"><span className="location-dot"/> GRAMADO · RIO GRANDE DO SUL</p>
          <h1>Construímos<br/>espaços.<br/><span>Transformamos<br/>possibilidades.</span></h1>
          <p className="hero-description">Especialistas em obras e reformas comerciais e residenciais em Gramado – RS. Soluções para transformar seus projetos em realidade.</p>
          <div className="hero-actions"><a href="#contato" className="button button-blue">Solicitar orçamento <Arrow /></a><a href="#servicos" className="text-link">Conheça nossos serviços <span aria-hidden="true">↓</span></a></div>
          <div className="hero-note"><span className="line-icon" aria-hidden="true">⌑</span><span>Uma nova perspectiva.<br/><strong>Do seu negócio ao seu lar.</strong></span></div>
        </div>
        <figure className="hero-photo"><img src={asset('comercial.jpg')} alt={projects[0].alt} fetchPriority="high" width="1800" height="1202"/><figcaption>IMAGEM ILUSTRATIVA · NÃO INTEGRA O PORTFÓLIO NN</figcaption><div className="photo-overlay"><span>ESPAÇOS COM PROPÓSITO</span><p>Novas ideias.<br/>Novas possibilidades.</p></div></figure>
      </section>
      <div className="segment-band"><div className="container"><span>CONSTRUIR. REFORMAR. TRANSFORMAR.</span><div>Comercial <span aria-hidden="true">/</span> Residencial</div><a href="#sobre" aria-label="Conhecer a NN Construções">Explore a NN <span aria-hidden="true">↓</span></a></div></div>

      <section id="sobre" className="section container about-grid reveal">
        <div className="about-visual"><div className="blueprint" aria-hidden="true"/><img src={asset('01-logo-principal.svg')} width="960" height="880" alt="NN Construções — Construindo sonhos com qualidade" loading="lazy"/><span>CONSTRUINDO NOVAS POSSIBILIDADES</span></div>
        <div className="about-copy"><p className="eyebrow">01 / QUEM SOMOS</p><h2>Uma nova perspectiva sobre construir e transformar.</h2><p>Na NN Construções, acreditamos que cada espaço representa uma oportunidade de transformação.</p><p>Somos uma empresa de Gramado, com atuação em obras e reformas comerciais e residenciais. Nosso foco está nas possibilidades de cada projeto — do espaço que recebe seus clientes ao lugar que você chama de lar.</p><a href="#contato" className="text-link">Vamos conversar sobre sua ideia <Arrow /></a></div>
      </section>

      <section id="servicos" className="services section"><div className="container">
        <div className="section-heading reveal"><div><p className="eyebrow">02 / O QUE FAZEMOS</p><h2>Seu espaço.<br/>Nosso ponto de partida.</h2></div><p>Construir, reformar ou renovar.<br/>Soluções para diferentes formas de viver e trabalhar.</p></div>
        <div className="service-grid reveal">
          <article className="service-card commercial"><div className="service-top"><span>01</span><span className="pill">NOSSA ESPECIALIDADE</span></div><div className="building-icon" aria-hidden="true"><i/><i/><i/></div><h3>Obras e reformas<br/>comerciais</h3><p>Soluções para empresas e estabelecimentos que desejam construir, reformar ou transformar seus espaços.</p><div className="service-tags"><span>Construção</span><span>Reforma</span><span>Transformação</span></div><a href="#contato">Vamos falar sobre seu negócio <Arrow /></a></article>
          <article className="service-card residential"><div className="service-top"><span>02</span><span>PARA O SEU LAR</span></div><div className="house-icon" aria-hidden="true"/><h3>Obras<br/>residenciais</h3><p>Construções e reformas para transformar ambientes residenciais conforme as necessidades de cada cliente.</p><div className="service-tags"><span>Construção</span><span>Reforma</span><span>Renovação</span></div><a href="#contato">Vamos falar sobre seu lar <Arrow /></a></article>
        </div>
      </div></section>

      <section id="projetos" className="section container projects">
        <div className="section-heading reveal"><div><p className="eyebrow">03 / PROJETOS · REFERÊNCIAS VISUAIS</p><h2>Imagine as possibilidades.</h2></div><p>Uma seleção de ambientes para inspirar.<br/>O próximo capítulo pode começar com a sua ideia.</p></div>
        <div className="gallery-toolbar"><p><span aria-hidden="true">ⓘ</span> Imagens ilustrativas. Não representam obras executadas pela NN Construções.</p><div className="filters" role="group" aria-label="Filtrar referências por categoria">{['Todos', 'Comercial', 'Residencial'].map(f => <button type="button" key={f} onClick={() => setFilter(f)} aria-pressed={filter === f}>{f}</button>)}</div></div>
        <div className="project-grid">{projects.map((p, index) => (filter === 'Todos' || p.type === filter) && <button type="button" className="project" key={p.title} onClick={() => setSelected(index)} aria-label={`Ampliar referência ilustrativa: ${p.title}`}><div className="project-image"><img src={asset(p.image)} alt={p.alt} loading="lazy" width="1000" height="800"/><span className="image-label">IMAGEM ILUSTRATIVA</span><span className="expand" aria-hidden="true">↗</span></div><div className="project-info"><p>{p.type} <span>REFERÊNCIA</span></p><h3>{p.title}</h3></div></button>)}</div>
        <p className="portfolio-note">Este espaço está preparado para receber os projetos reais da NN Construções.</p>
      </section>

      <section id="diferenciais" className="differences section"><div className="container differences-grid reveal"><div><p className="eyebrow">04 / O QUE NOS MOVE</p><h2>Construir bem começa com o cuidado.</h2><p className="difference-intro">A forma como queremos estar presentes em cada projeto.</p><small>Diretrizes de posicionamento propostas para esta prévia, sujeitas à validação da NN.</small></div><div className="principles">{[
        ['Proximidade para entender', 'Atendimento próximo e profissional, começando pela escuta das necessidades de cada cliente.'],
        ['Atenção a cada detalhe', 'Cuidado com as escolhas que fazem diferença na experiência de um espaço.'],
        ['Organização em cada etapa', 'Clareza para conectar as necessidades do projeto às etapas da obra.'],
        ['Compromisso com a qualidade', 'Um olhar atento para construir e transformar com responsabilidade.'],
      ].map(([title, text], i) => <article key={title}><span>0{i + 1}</span><div><h3>{title}</h3><p>{text}</p></div></article>)}</div></div></section>

      <section id="como-comecar" className="section container getting-started reveal">
        <div className="section-heading"><div><p className="eyebrow">05 / COMO COMEÇAR</p><h2>Grandes mudanças.<br/>Um primeiro passo simples.</h2></div><p>Você não precisa ter todas as respostas.<br/>Algumas informações ajudam a começar a conversa sobre a sua obra.</p></div>
        <ol className="starting-steps">
          <li><span className="step-number" aria-hidden="true">01</span><p className="step-label">O ESPAÇO</p><h3>Mostre seu ponto de partida.</h3><p>Conte onde fica o imóvel e se o uso é comercial ou residencial. Fotos, medidas aproximadas e plantas, se disponíveis, ajudam a apresentar o espaço.</p></li>
          <li><span className="step-number" aria-hidden="true">02</span><p className="step-label">A TRANSFORMAÇÃO</p><h3>Compartilhe o que imagina.</h3><p>Explique o que deseja construir, reformar ou renovar. Referências e ideias ajudam a traduzir o que você espera do novo ambiente.</p></li>
          <li><span className="step-number" aria-hidden="true">03</span><p className="step-label">AS PRIORIDADES</p><h3>Conte o que é essencial.</h3><p>Indique suas prioridades, a previsão de investimento e as datas que tem em mente. Esses pontos ajudam a orientar a conversa inicial.</p></li>
        </ol>
        <div className="starting-bottom"><p>Ainda está organizando as ideias? Comece pelo que já sabe.</p><a href="#contato" className="text-link">Conversar sobre meu projeto <Arrow /></a></div>
      </section>

      <section id="duvidas" className="faq-section section"><div className="container faq-grid reveal">
        <div className="faq-intro"><p className="eyebrow">06 / DÚVIDAS FREQUENTES</p><h2>Mais clareza para dar o próximo passo.</h2><p>Respostas para quem está pensando em construir ou transformar um espaço.</p><a href="#contato" className="text-link">Ficou com outra dúvida? <Arrow /></a></div>
        <div className="faq-list">{[
          ['A NN trabalha com obras comerciais e residenciais?', 'Sim. A atuação da NN Construções contempla obras e reformas comerciais, sua especialidade destacada, e obras e reformas residenciais. A empresa está localizada em Gramado, no Rio Grande do Sul.'],
          ['O que posso enviar para conversar sobre um orçamento?', 'Comece pela localização do imóvel, pelo tipo de obra e por uma descrição do que deseja transformar. Se tiver, reúna fotos, medidas, plantas e referências. Informe também suas prioridades, a previsão de investimento e as datas desejadas.'],
          ['Já é possível saber o valor e o prazo da minha obra?', 'Cada obra tem características próprias. Valor e prazo precisam ser avaliados conforme o escopo, as condições do imóvel e os serviços envolvidos. Esta prévia não apresenta preços ou prazos de execução predefinidos.'],
          ['As imagens deste site são de obras da NN?', 'As imagens desta prévia são referências ilustrativas, identificadas como tal. Elas não representam obras executadas pela NN Construções. A galeria está preparada para receber fotografias de projetos reais após validação.'],
          ['Como entro em contato com a NN?', 'Use o link do Instagram na seção Contato. O telefone informado está pendente de confirmação; por isso, os botões de orçamento levam à seção Contato e o WhatsApp ainda não está integrado nesta prévia.'],
        ].map(([question, answer]) => <details key={question}><summary>{question}<span className="faq-symbol" aria-hidden="true"/></summary><p>{answer}</p></details>)}</div>
      </div></section>

      <section className="cta-strip"><div className="container"><div><p className="eyebrow">DA IDEIA À TRANSFORMAÇÃO</p><h2>Vamos construir seu próximo projeto?</h2></div><a href="#contato" className="button button-white">Solicitar orçamento <Arrow /></a></div></section>
      <section id="contato" className="section container contact-grid reveal"><div><p className="eyebrow">07 / CONTATO</p><h2>Seu próximo projeto começa com uma boa conversa.</h2><p>Conte para a NN Construções o que você deseja construir ou transformar.</p><div className="contact-location"><span className="location-dot"/> Gramado — Rio Grande do Sul</div></div><div className="contact-panel"><p className="eyebrow">VAMOS CONVERSAR</p><a className="instagram-link" href="https://www.instagram.com/nnconstrucoes__" target="_blank" rel="noopener noreferrer"><div><small>INSTAGRAM</small><strong>@nnconstrucoes__</strong><span>Conheça o perfil e entre em contato</span></div><Arrow /></a><div className="phone-note"><div><small>TELEFONE INFORMADO</small><strong>(54) 9937-4856</strong></div><span className="pending">A CONFIRMAR</span></div><p className="contact-disclaimer">O número está pendente de confirmação. Nesta prévia, o contato está disponível pelo Instagram.</p></div></section>
    </main>
    <footer><div className="container footer-top"><a href="#inicio" aria-label="NN Construções — voltar ao início"><img src={asset('04-logo-horizontal-negativo.svg')} alt="NN Construções" width="1100" height="260" loading="lazy"/></a><p>Construímos espaços.<br/>Transformamos possibilidades.</p><a href="#inicio" className="back-top">Voltar ao início <span aria-hidden="true">↑</span></a></div><div className="container footer-bottom"><span>NN Construções · Gramado — RS</span><span>Prévia demonstrativa · Conteúdo sujeito à validação</span></div></footer>
    <dialog ref={dialog} onCancel={() => setSelected(null)} onClick={e => { if (e.target === e.currentTarget) setSelected(null); }} aria-labelledby="gallery-title"><button className="dialog-close" type="button" onClick={() => setSelected(null)} aria-label="Fechar imagem">×</button>{selected !== null && <><img src={asset(projects[selected].image)} alt={projects[selected].alt}/><div className="dialog-copy"><p className="eyebrow">REFERÊNCIA ILUSTRATIVA · {projects[selected].type.toUpperCase()}</p><h2 id="gallery-title">{projects[selected].title}</h2><p>Esta imagem não representa uma obra executada pela NN Construções.</p></div></>}</dialog>
  </>;
}
createRoot(document.getElementById('root')!).render(<React.StrictMode><App/></React.StrictMode>);