// =============================================================================
// REGUELIN RE — Páginas de imóvel
// /imoveis (oculta, noindex) e /imoveis/[slug] com o Dossiê de Diligência Prévia
// =============================================================================

const { useState: useS_I, useEffect: useE_I, useMemo: useMe_I, useRef: useR_I } = React;

// =========================================================================
// /imoveis — Listagem oculta da navegação pública (noindex)
// =========================================================================
function ImoveisPage() {
  // Inject noindex,nofollow into <head>
  useE_I(() => {
    const meta = document.createElement('meta');
    meta.name = 'robots';
    meta.content = 'noindex, nofollow';
    meta.setAttribute('data-page-meta', 'imoveis-listing');
    document.head.appendChild(meta);
    document.title = 'Portfólio Curado · Reguelin RE';
    return () => { meta.remove(); };
  }, []);

  // Filtros
  const cities = useMe_I(() => Array.from(new Set(PROPERTIES.map(p => p.city))), []);
  const neighborhoods = useMe_I(() => Array.from(new Set(PROPERTIES.map(p => p.neighborhood))), []);
  const types = useMe_I(() => Array.from(new Set(PROPERTIES.map(p => p.type))), []);

  const [f, setF] = useS_I({ city: '', neighborhood: '', type: '', priceMax: '', bedrooms: '', parking: '' });

  const filtered = useMe_I(() => {
    return PROPERTIES.filter(p => {
      if (f.city && p.city !== f.city) return false;
      if (f.neighborhood && p.neighborhood !== f.neighborhood) return false;
      if (f.type && p.type !== f.type) return false;
      if (f.priceMax && p.price > Number(f.priceMax)) return false;
      if (f.bedrooms && p.bedrooms < Number(f.bedrooms)) return false;
      if (f.parking && p.parkingSpots < Number(f.parking)) return false;
      return true;
    });
  }, [f]);

  return (
    <main id="main-content">
      <section style={{ paddingTop: 'var(--s-9)' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 16 }}>Portfólio · Demo interna</div>
          <h1 className="h1" style={{ marginBottom: 16, maxWidth: '24ch' }}>Catálogo completo, sob curadoria da casa.</h1>
          <p className="lead" style={{ maxWidth: '56ch', color: 'var(--color-fossil)' }}>
            Cada imóvel listado abaixo passou pela diligência prévia integral. A página é privada na navegação pública — os clientes acessam o detalhe via apresentação editorial.
          </p>

          <div className="filterbar" role="region" aria-label="Filtros">
            <div className="field-wrap">
              <label htmlFor="fb-city">Cidade</label>
              <select id="fb-city" value={f.city} onChange={(e)=>setF({...f, city: e.target.value})}>
                <option value="">Todas</option>
                {cities.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>
            <div className="field-wrap">
              <label htmlFor="fb-neigh">Bairro</label>
              <select id="fb-neigh" value={f.neighborhood} onChange={(e)=>setF({...f, neighborhood: e.target.value})}>
                <option value="">Todos</option>
                {neighborhoods.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>
            <div className="field-wrap">
              <label htmlFor="fb-type">Tipo</label>
              <select id="fb-type" value={f.type} onChange={(e)=>setF({...f, type: e.target.value})}>
                <option value="">Todos</option>
                {types.map(t => <option key={t} value={t}>{typeLabel(t)}</option>)}
              </select>
            </div>
            <div className="field-wrap">
              <label htmlFor="fb-price">Preço (até)</label>
              <select id="fb-price" value={f.priceMax} onChange={(e)=>setF({...f, priceMax: e.target.value})}>
                <option value="">Sem limite</option>
                <option value="200000000">R$ 2.000.000</option>
                <option value="350000000">R$ 3.500.000</option>
                <option value="500000000">R$ 5.000.000</option>
              </select>
            </div>
            <div className="field-wrap">
              <label htmlFor="fb-bed">Dormitórios (mín)</label>
              <select id="fb-bed" value={f.bedrooms} onChange={(e)=>setF({...f, bedrooms: e.target.value})}>
                <option value="">Indiferente</option>
                <option value="1">1+</option>
                <option value="2">2+</option>
                <option value="3">3+</option>
                <option value="4">4+</option>
              </select>
            </div>
            <div className="field-wrap">
              <label htmlFor="fb-park">Vagas (mín)</label>
              <select id="fb-park" value={f.parking} onChange={(e)=>setF({...f, parking: e.target.value})}>
                <option value="">Indiferente</option>
                <option value="1">1+</option>
                <option value="2">2+</option>
                <option value="3">3+</option>
                <option value="4">4+</option>
              </select>
            </div>
          </div>

          <div className="results-meta">
            <span>{filtered.length.toString().padStart(2,'0')} {filtered.length === 1 ? 'imóvel sob curadoria' : 'imóveis sob curadoria'}</span>
            <button onClick={()=>setF({ city: '', neighborhood: '', type: '', priceMax: '', bedrooms: '', parking: '' })} className="btn--link">Restabelecer filtros</button>
          </div>

          {filtered.length === 0 ? (
            <div className="empty-state">
              <h3 className="h3" style={{ marginBottom: 12 }}>Nenhum imóvel atende a este recorte.</h3>
              <p className="lead" style={{ color: 'var(--color-fossil)', maxWidth: '48ch', margin: '0 auto' }}>
                Refine os filtros, ou converse com a equipe — temos opções off-market que não constam neste recorte.
              </p>
              <div style={{ marginTop: 24 }}>
                <Link to="/contato" className="btn btn--ghost">Conversar com a equipe</Link>
              </div>
            </div>
          ) : (
            <div className="listing-grid">
              {filtered.map((p, i) => (
                <Reveal key={p.id} delay={i*60}>
                  <PropertyCard property={p} variant="sm" index={i+1} />
                </Reveal>
              ))}
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

// =========================================================================
// /imoveis/[slug] — Detalhe + DOSSIÊ DE DILIGÊNCIA PRÉVIA (centrepiece)
// =========================================================================
function ImovelDetailPage({ slug }) {
  const property = PROPERTIES.find(p => p.slug === slug);

  // JSON-LD + page metadata
  useE_I(() => {
    if (!property) return;
    document.title = `${property.title} · Reguelin RE`;
    const ld = {
      '@context': 'https://schema.org',
      '@type': 'RealEstateListing',
      name: property.title,
      description: property.description.trim(),
      address: {
        '@type': 'PostalAddress',
        addressLocality: property.city,
        addressRegion: property.state,
        addressCountry: 'BR',
        streetAddress: property.geo.address,
      },
      geo: { '@type': 'GeoCoordinates', latitude: property.geo.lat, longitude: property.geo.lng },
      floorSize: { '@type': 'QuantitativeValue', value: property.areaBuilt || property.areaTotal, unitCode: 'MTK' },
      numberOfRooms: property.bedrooms,
      image: property.images.map((_, i) => `/properties/${property.slug}/img-${i}.jpg`),
      offers: { '@type': 'Offer', price: property.price / 100, priceCurrency: 'BRL', availability: property.status === 'disponivel' ? 'https://schema.org/InStock' : 'https://schema.org/Reserved' },
    };
    const script = document.createElement('script');
    script.type = 'application/ld+json';
    script.text = JSON.stringify(ld);
    script.setAttribute('data-page-jsonld', property.slug);
    document.head.appendChild(script);
    return () => { script.remove(); };
  }, [property]);

  if (!property) return <NotFoundPage what="Imóvel" />;

  return (
    <main id="main-content">
      {/* Breadcrumb editorial — Início > [Título], pulando "Imóveis" */}
      <div className="container" style={{ paddingTop: 28, paddingBottom: 12 }}>
        <nav aria-label="Breadcrumb" className="mono-meta" style={{ display: 'flex', gap: 12 }}>
          <Link to="/" style={{ color: 'var(--color-fossil-soft)', textDecoration: 'none' }}>Início</Link>
          <span aria-hidden="true">/</span>
          <span style={{ color: 'var(--color-navy)' }}>{property.title}</span>
        </nav>
      </div>

      <DetailHero property={property} />
      <DetailGallery property={property} />
      <DetailBody property={property} />
      <DueDiligenceDossier property={property} />
      <DetailLocation property={property} />
      <DetailLeadForm property={property} />
    </main>
  );
}

// -------------------- Hero do imóvel --------------------
function DetailHero({ property }) {
  return (
    <section style={{ paddingTop: 'var(--s-6)', paddingBottom: 'var(--s-7)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 'var(--s-7)', alignItems: 'end' }} className="detail-hero__grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>
              {typeLabel(property.type)} · {property.neighborhood} · {property.city}
            </div>
            <h1 className="h1" style={{ maxWidth: '20ch', marginBottom: 16 }}>{property.title}</h1>
            <p className="lead" style={{ maxWidth: '52ch', color: 'var(--color-fossil)' }}>{property.subtitle}</p>
          </div>
          <div style={{ borderLeft: '1px solid var(--color-line)', paddingLeft: 'var(--s-6)' }} className="detail-hero__side">
            <div className="mono-meta" style={{ marginBottom: 8 }}>Valor de referência</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4vw, 52px)', color: 'var(--color-navy)', lineHeight: 1 }}>
              {fmtBRL(property.price, property.priceLabel)}
            </div>
            <div style={{
              marginTop: 24, paddingTop: 16, borderTop: '1px solid var(--color-line)',
              display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px 18px',
              fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--color-fossil)',
            }}>
              <span style={{ color: 'var(--color-champagne)' }}>STATUS</span><span style={{ color: 'var(--color-navy)' }}>{statusLabel(property.status)}</span>
              <span style={{ color: 'var(--color-champagne)' }}>REF.</span><span style={{ color: 'var(--color-navy)' }}>{property.id.split('-').slice(-2).join('-')}</span>
              <span style={{ color: 'var(--color-champagne)' }}>ATUALIZ.</span><span style={{ color: 'var(--color-navy)' }}>{fmtDateShort(property.updatedAt)}</span>
            </div>
            <div style={{ marginTop: 24 }}>
              <a className="btn btn--primary" style={{ width: '100%', justifyContent: 'center' }}
                 href={whatsappURL(`Olá, gostaria de conversar sobre o imóvel "${property.title}".`)}
                 target="_blank" rel="noopener">
                Conversar sobre este imóvel <Icon name="whatsapp" size={14} />
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .detail-hero__grid { grid-template-columns: 1fr !important; }
          .detail-hero__side { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--color-line); padding-top: var(--s-6); }
        }
      `}</style>
    </section>
  );
}

// -------------------- Galeria editorial --------------------
function DetailGallery({ property }) {
  const [lightbox, setLightbox] = useS_I(null); // index or null
  const close = () => setLightbox(null);
  const onKey = useR_I(null);
  useE_I(() => {
    if (lightbox === null) return;
    const handler = (e) => {
      if (e.key === 'Escape') close();
      if (e.key === 'ArrowRight') setLightbox((i) => (i + 1) % property.images.length);
      if (e.key === 'ArrowLeft') setLightbox((i) => (i - 1 + property.images.length) % property.images.length);
    };
    window.addEventListener('keydown', handler);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', handler); document.body.style.overflow = ''; };
  }, [lightbox, property.images.length]);

  // Editorial layout: 1 large left + grid of 4 right
  const imgs = property.images.slice(0, 5);
  return (
    <section style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="gallery-grid" style={{
          display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 12,
        }}>
          <button onClick={() => setLightbox(0)} className="gallery-cell" style={{ padding: 0, border: 0, background: 'transparent', cursor: 'zoom-in' }}>
            <div style={{ aspectRatio: '4/3', border: '1px solid var(--color-line)' }}>
              <MediaPlaceholder label={`Capa · ${imgs[0]?.alt || 'Imagem principal'}`} />
            </div>
          </button>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }} className="gallery-sub">
            {imgs.slice(1, 5).map((img, i) => (
              <button key={i} onClick={() => setLightbox(i + 1)}
                className="gallery-cell"
                style={{ padding: 0, border: 0, background: 'transparent', cursor: 'zoom-in' }}>
                <div style={{ aspectRatio: '4/3', border: '1px solid var(--color-line)' }}>
                  <MediaPlaceholder label={`${String(i+2).padStart(2,'0')} · ${img.alt}`} />
                </div>
              </button>
            ))}
            {imgs.length < 5 && Array.from({ length: 5 - imgs.length }).map((_, i) => (
              <div key={`fill-${i}`} style={{ aspectRatio: '4/3', border: '1px solid var(--color-line)' }}>
                <MediaPlaceholder label="—" />
              </div>
            ))}
          </div>
        </div>
        <div className="mono-meta" style={{ marginTop: 12 }}>
          {property.images.length.toString().padStart(2,'0')} fotografias em arquivo · Direção "Silent Luxury"
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .gallery-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>

      {lightbox !== null && (
        <div role="dialog" aria-modal="true" aria-label="Galeria ampliada"
          onClick={close}
          style={{
            position: 'fixed', inset: 0, background: 'rgba(20, 27, 45, 0.96)', zIndex: 70,
            display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--s-6)',
          }}>
          <button onClick={close} aria-label="Fechar galeria"
            style={{ position: 'absolute', top: 24, right: 24, background: 'transparent', border: '1px solid var(--color-champagne)', color: 'var(--color-champagne)', padding: 10, cursor: 'pointer' }}>
            <Icon name="close" size={20} />
          </button>
          <div onClick={(e)=>e.stopPropagation()} style={{ width: '100%', maxWidth: 1080 }}>
            <div style={{ aspectRatio: '16/10', border: '1px solid var(--color-champagne)' }}>
              <MediaPlaceholder label={imgs[lightbox]?.alt || 'Imagem'} dark />
            </div>
            <div style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', color: 'var(--color-offwhite)', fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
              <span>{(lightbox+1).toString().padStart(2,'0')} / {imgs.length.toString().padStart(2,'0')}</span>
              <span style={{ display: 'flex', gap: 16 }}>
                <button style={{ background: 'transparent', border: 0, color: 'var(--color-champagne)', cursor: 'pointer', textTransform: 'inherit', letterSpacing: 'inherit' }}
                        onClick={()=>setLightbox((i)=>(i-1+imgs.length)%imgs.length)}>← Anterior</button>
                <button style={{ background: 'transparent', border: 0, color: 'var(--color-champagne)', cursor: 'pointer', textTransform: 'inherit', letterSpacing: 'inherit' }}
                        onClick={()=>setLightbox((i)=>(i+1)%imgs.length)}>Próxima →</button>
              </span>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

// -------------------- Body (descrição + ficha técnica + highlights) --------------------
function DetailBody({ property }) {
  return (
    <section>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--s-8)' }} className="detail-body__grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Sobre o imóvel</div>
            <p style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--color-fossil)', maxWidth: '60ch' }}>
              {property.description.trim()}
            </p>

            {property.highlights.length > 0 && (
              <div style={{ marginTop: 'var(--s-7)' }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>Destaques</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                  {property.highlights.map((h, i) => (
                    <li key={i} style={{
                      display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16,
                      padding: '16px 0', borderTop: '1px solid var(--color-line)',
                      fontSize: 16, color: 'var(--color-navy)',
                    }}>
                      <span className="mono" style={{ color: 'var(--color-champagne)', fontSize: 12, paddingTop: 4 }}>
                        {String(i+1).padStart(2,'0')}
                      </span>
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, lineHeight: 1.4 }}>{h}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}

            {property.amenities.length > 0 && (
              <div style={{ marginTop: 'var(--s-7)' }}>
                <div className="eyebrow" style={{ marginBottom: 16 }}>Comodidades</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {property.amenities.map((a) => (
                    <span key={a} style={{
                      display: 'inline-flex', alignItems: 'center',
                      fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
                      color: 'var(--color-navy)',
                      border: '1px solid var(--color-line)', padding: '8px 12px',
                    }}>{a}</span>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Ficha técnica */}
          <aside style={{ background: 'var(--color-offwhite-warm)', padding: 'var(--s-6)', borderTop: '2px solid var(--color-navy)' }}>
            <div className="eyebrow-navy" style={{ marginBottom: 20 }}>Ficha técnica</div>
            <dl style={{ margin: 0 }}>
              {[
                ['Tipo', typeLabel(property.type)],
                ['Cidade', property.city],
                ['Bairro', property.neighborhood],
                ['UF', property.state],
                ['Área total', property.areaTotal ? `${property.areaTotal.toLocaleString('pt-BR')} m²` : '—'],
                ['Área construída', property.areaBuilt ? `${property.areaBuilt.toLocaleString('pt-BR')} m²` : '—'],
                ['Dormitórios', property.bedrooms || '—'],
                ['Suítes', property.suites || '—'],
                ['Banheiros', property.bathrooms || '—'],
                ['Vagas', property.parkingSpots || '—'],
                ['Status', statusLabel(property.status)],
                ['Dossiê', ddStatusLabel(property.dueDiligence.documentationStatus)],
              ].map(([k, v]) => (
                <div key={k} style={{
                  display: 'grid', gridTemplateColumns: '1fr auto', gap: 12,
                  padding: '12px 0', borderBottom: '1px dotted var(--color-line)',
                  fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.04em',
                }}>
                  <dt style={{ color: 'var(--color-fossil-soft)', textTransform: 'uppercase' }}>{k}</dt>
                  <dd style={{ margin: 0, color: 'var(--color-navy)', textAlign: 'right' }}>{v}</dd>
                </div>
              ))}
            </dl>
          </aside>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .detail-body__grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// =========================================================================
// DOSSIÊ DE DILIGÊNCIA PRÉVIA — the centerpiece
// "Caderno de Diligência" — quatro capítulos auditados, selo arquivístico
// =========================================================================
function DueDiligenceDossier({ property }) {
  const dd = property.dueDiligence;
  const chapters = [
    {
      n: '01', title: 'Documentação Cartorial',
      key: 'documentationStatus',
      done: dd.documentationStatus === 'completa',
      pending: dd.documentationStatus === 'em-analise',
      synopsis: 'Matrícula atualizada, certidões de ônus, IPTU, condomínio e regularização junto aos cartórios competentes.',
      reference: 'CRI · Cartórios competentes',
    },
    {
      n: '02', title: 'Regularidade Jurídica',
      key: 'legalCheckDone',
      done: dd.legalCheckDone,
      pending: !dd.legalCheckDone && dd.documentationStatus === 'em-analise',
      synopsis: 'Análise de cadeia dominial, ações judiciais sobre proprietários e imóvel, conformidade contratual.',
      reference: 'Parecer jurídico anexo',
    },
    {
      n: '03', title: 'Histórico Estrutural',
      key: 'structuralCheckDone',
      done: dd.structuralCheckDone,
      pending: !dd.structuralCheckDone && dd.documentationStatus === 'em-analise',
      synopsis: 'Vistoria de patologias, conformidade com a planta aprovada, manutenção preventiva e laudo predial.',
      reference: 'Vistoria técnica de engenharia',
    },
    {
      n: '04', title: 'Análise Mercadológica',
      key: 'marketAnalysisDone',
      done: dd.marketAnalysisDone,
      pending: !dd.marketAnalysisDone,
      synopsis: 'Aderência de valor, comparáveis na microrregião, projeção patrimonial e estratégia de saída.',
      reference: 'Estudo comparativo de mercado',
    },
  ];
  const completed = chapters.filter(c => c.done).length;
  const total = chapters.length;
  const docNumber = 'DOSS-' + new Date(property.createdAt).getFullYear() + '-' + property.id.slice(-3);

  // Approval date — latest update
  const approvalDate = fmtDateShort(property.updatedAt);

  return (
    <section className="dossier" aria-label="Dossiê de diligência prévia"
      style={{
        background: 'var(--color-navy)', color: 'var(--color-offwhite)',
        position: 'relative', overflow: 'hidden',
        padding: 'var(--s-10) 0',
      }}>
      <div className="pattern-diag" style={{ color: 'var(--color-offwhite)' }}>
        <div className="container">
          {/* Header do dossiê */}
          <div className="dossier-head" style={{
            display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 'var(--s-7)',
            alignItems: 'end', paddingBottom: 'var(--s-7)',
            borderBottom: '1px solid rgba(197,160,89,.35)',
          }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
                <span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--color-champagne)' }} />
                <span className="eyebrow" style={{ color: 'var(--color-champagne)' }}>
                  Diferencial da casa · Diligência prévia integral
                </span>
              </div>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontWeight: 400,
                fontSize: 'clamp(36px, 4.4vw, 64px)', lineHeight: 1.05,
                letterSpacing: '-0.012em', color: 'var(--color-offwhite)',
                margin: 0, maxWidth: '18ch',
              }}>
                Dossiê de diligência <em style={{ color: 'var(--color-champagne)', fontStyle: 'italic' }}>arquivado</em>.
              </h2>
              <p style={{ marginTop: 20, maxWidth: '54ch', color: 'rgba(249,247,242,.7)', fontSize: 17, lineHeight: 1.55 }}>
                Quatro capítulos auditados antes da apresentação. Cada um sustentado por documento ou parecer técnico anexo à pasta deste imóvel.
              </p>
            </div>

            {/* Metadados do documento */}
            <div className="dossier-meta" style={{
              borderLeft: '1px solid rgba(197,160,89,.35)', paddingLeft: 'var(--s-6)',
              fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(249,247,242,.75)',
              display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px 18px',
              letterSpacing: '0.04em',
            }}>
              <span style={{ color: 'var(--color-champagne)' }}>DOC.</span><span style={{ color: 'var(--color-offwhite)' }}>{docNumber}</span>
              <span style={{ color: 'var(--color-champagne)' }}>REF.</span><span style={{ color: 'var(--color-offwhite)' }}>{property.slug}</span>
              <span style={{ color: 'var(--color-champagne)' }}>FORMAÇÃO</span><span style={{ color: 'var(--color-offwhite)' }}>{fmtDateShort(property.createdAt)}</span>
              <span style={{ color: 'var(--color-champagne)' }}>ATUALIZAÇÃO</span><span style={{ color: 'var(--color-offwhite)' }}>{approvalDate}</span>
              <span style={{ color: 'var(--color-champagne)' }}>VOLUME</span><span style={{ color: 'var(--color-offwhite)' }}>I · Caderno de Diligência</span>
            </div>
          </div>

          {/* Conteúdo: 4 capítulos + selo */}
          <div className="dossier-body" style={{
            display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 'var(--s-7)',
            paddingTop: 'var(--s-7)',
          }}>
            {/* Capítulos */}
            <div>
              {chapters.map((c, i) => (
                <Reveal key={c.n} delay={i*100}>
                  <article style={{
                    display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 'var(--s-5)',
                    padding: 'var(--s-6) 0',
                    borderTop: '1px solid rgba(197,160,89,.25)',
                    alignItems: 'start',
                  }}>
                    <div style={{
                      fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 4.2vw, 64px)',
                      color: c.done ? 'var(--color-champagne)' : 'rgba(197,160,89,.45)',
                      lineHeight: 1, letterSpacing: '-0.01em',
                      minWidth: 80,
                    }}>{c.n}</div>
                    <div>
                      <div style={{
                        fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 1.8vw, 26px)',
                        color: 'var(--color-offwhite)', lineHeight: 1.25, marginBottom: 8,
                      }}>{c.title}</div>
                      <p style={{ margin: 0, color: 'rgba(249,247,242,.7)', fontSize: 15, lineHeight: 1.6, maxWidth: '54ch' }}>
                        {c.synopsis}
                      </p>
                      <div className="mono-meta" style={{
                        marginTop: 14, color: 'rgba(197,160,89,.7)',
                      }}>
                        Anexo: {c.reference}
                      </div>
                    </div>
                    <div style={{ minWidth: 140, textAlign: 'right' }}>
                      <DossierStamp done={c.done} pending={c.pending} />
                    </div>
                  </article>
                </Reveal>
              ))}
              <div style={{ borderTop: '1px solid rgba(197,160,89,.25)' }} />
            </div>

            {/* Selo arquivístico */}
            <Reveal delay={120}>
              <DossierSeal docNumber={docNumber} completed={completed} total={total} approvalDate={approvalDate} property={property} />
            </Reveal>
          </div>

          {/* Foot — disclaimer técnico */}
          <div style={{
            marginTop: 'var(--s-7)', paddingTop: 'var(--s-5)',
            borderTop: '1px solid rgba(197,160,89,.35)',
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 24,
            color: 'rgba(249,247,242,.6)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em',
          }}>
            <span>Cada anexo do dossiê é disponibilizado integralmente ao cliente após o início formal da conversa.</span>
            <span style={{ color: 'rgba(197,160,89,.85)' }}>— Reguelin RE · Arquivo Editorial</span>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .dossier-head { grid-template-columns: 1fr !important; gap: 32px !important; }
          .dossier-body { grid-template-columns: 1fr !important; }
          .dossier-meta { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid rgba(197,160,89,.35); padding-top: 24px; }
        }
      `}</style>
    </section>
  );
}

// Status stamp per chapter — engraved square mark
function DossierStamp({ done, pending }) {
  const color = done ? 'var(--color-champagne)' : pending ? 'rgba(249,247,242,.55)' : 'rgba(249,247,242,.3)';
  const label = done ? 'Validado' : pending ? 'Em análise' : 'Em formação';
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
      <svg width="56" height="56" viewBox="0 0 56 56" aria-hidden="true">
        <rect x="3" y="3" width="50" height="50" fill="none" stroke={color} strokeWidth="1" />
        <rect x="8" y="8" width="40" height="40" fill="none" stroke={color} strokeWidth="0.5" strokeDasharray={done || pending ? '0' : '3 3'} />
        {done && <polyline points="18 28 25 35 39 21" fill="none" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />}
        {pending && (
          <g stroke={color} strokeWidth="1.2" strokeLinecap="round">
            <line x1="20" y1="28" x2="36" y2="28" />
            <line x1="20" y1="34" x2="32" y2="34" />
          </g>
        )}
        {!done && !pending && (
          <g stroke={color} strokeWidth="1" strokeLinecap="round">
            <line x1="22" y1="28" x2="34" y2="28" />
          </g>
        )}
      </svg>
      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
        color,
      }}>{label}</span>
    </div>
  );
}

// Selo arquivístico — engraved square seal
function DossierSeal({ docNumber, completed, total, approvalDate, property }) {
  const complete = completed === total;
  return (
    <div style={{
      position: 'relative',
      padding: 'var(--s-6)',
      border: '1px solid rgba(197,160,89,.55)',
      background: 'rgba(20,27,45,0.5)',
    }}>
      {/* Inner frame */}
      <div style={{ position: 'absolute', inset: 8, border: '1px solid rgba(197,160,89,.25)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', textAlign: 'center' }}>
        <div className="eyebrow" style={{ color: 'var(--color-champagne)', marginBottom: 24 }}>
          Selo de Arquivo
        </div>

        {/* Concentric circle seal */}
        <svg width="200" height="200" viewBox="0 0 200 200" style={{ margin: '0 auto', display: 'block' }} aria-hidden="true">
          <circle cx="100" cy="100" r="96" fill="none" stroke="var(--color-champagne)" strokeWidth="0.8" />
          <circle cx="100" cy="100" r="78" fill="none" stroke="var(--color-champagne)" strokeWidth="0.5" />
          <circle cx="100" cy="100" r="60" fill="none" stroke="var(--color-champagne)" strokeWidth="0.8" />
          {/* Curved text — using textPath */}
          <defs>
            <path id={`seal-top-${property.slug}`} d="M 100 14 A 86 86 0 0 1 100 186" fill="none" />
            <path id={`seal-bot-${property.slug}`} d="M 100 186 A 86 86 0 0 1 100 14" fill="none" />
          </defs>
          <text fill="var(--color-champagne)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="3">
            <textPath href={`#seal-top-${property.slug}`} startOffset="50%" textAnchor="middle">
              REGUELIN  RE  ·  DOSSIÊ DE DILIGÊNCIA
            </textPath>
          </text>
          <text fill="var(--color-champagne)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="3">
            <textPath href={`#seal-bot-${property.slug}`} startOffset="50%" textAnchor="middle">
              CURITIBA  ·  PR  ·  ARQUIVO EDITORIAL
            </textPath>
          </text>
          {/* Central monogram */}
          <text x="100" y="92" textAnchor="middle" fill="var(--color-offwhite)" fontFamily="var(--font-display)" fontSize="28" letterSpacing="2">RE</text>
          <line x1="78" y1="104" x2="122" y2="104" stroke="var(--color-champagne)" strokeWidth="0.8" />
          <text x="100" y="124" textAnchor="middle" fill="var(--color-champagne)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="3">
            VOL. I
          </text>
          {/* Decorative corner marks */}
          <line x1="40" y1="100" x2="48" y2="100" stroke="var(--color-champagne)" strokeWidth="0.6" />
          <line x1="152" y1="100" x2="160" y2="100" stroke="var(--color-champagne)" strokeWidth="0.6" />
          <line x1="100" y1="40" x2="100" y2="48" stroke="var(--color-champagne)" strokeWidth="0.6" />
          <line x1="100" y1="152" x2="100" y2="160" stroke="var(--color-champagne)" strokeWidth="0.6" />
        </svg>

        {/* Completude tally */}
        <div style={{ marginTop: 28 }}>
          <div className="mono-meta" style={{ color: 'rgba(249,247,242,.6)', marginBottom: 10 }}>Completude</div>
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 8, fontFamily: 'var(--font-display)', color: 'var(--color-champagne)' }}>
            <span style={{ fontSize: 48, lineHeight: 1 }}>{completed.toString().padStart(2,'0')}</span>
            <span style={{ fontSize: 18, color: 'rgba(249,247,242,.7)', paddingBottom: 6 }}>de</span>
            <span style={{ fontSize: 28, color: 'rgba(249,247,242,.85)', lineHeight: 1, paddingBottom: 4 }}>{total.toString().padStart(2,'0')}</span>
          </div>
          {/* Tally marks */}
          <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 14 }}>
            {Array.from({ length: total }).map((_, i) => (
              <span key={i} style={{
                display: 'inline-block', width: 28, height: 2,
                background: i < completed ? 'var(--color-champagne)' : 'rgba(249,247,242,.18)',
              }} />
            ))}
          </div>
          <div className="mono-meta" style={{ marginTop: 16, color: complete ? 'var(--color-champagne)' : 'rgba(249,247,242,.65)' }}>
            {complete ? 'Dossiê arquivado' : 'Dossiê em formação'}
          </div>
        </div>

        {/* Signature line */}
        <div style={{ marginTop: 28, paddingTop: 20, borderTop: '1px solid rgba(197,160,89,.3)', textAlign: 'left', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(249,247,242,.65)', letterSpacing: '0.04em' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'var(--color-champagne)' }}>DOC.</span>
            <span style={{ color: 'var(--color-offwhite)' }}>{docNumber}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
            <span style={{ color: 'var(--color-champagne)' }}>SELO EM</span>
            <span style={{ color: 'var(--color-offwhite)' }}>{approvalDate}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// -------------------- Localização --------------------
function DetailLocation({ property }) {
  return (
    <section>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 24 }}>Localização</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--s-6)' }} className="detail-loc__grid">
          <div>
            <h3 className="h3" style={{ marginBottom: 16, maxWidth: '20ch' }}>{property.geo.address}</h3>
            <p style={{ color: 'var(--color-fossil)', maxWidth: '52ch', fontSize: 16, lineHeight: 1.6 }}>
              O endereço exato é compartilhado durante a apresentação editorial do imóvel, mediante alinhamento prévio com a equipe.
            </p>
            <dl style={{
              marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.04em',
              display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px 16px', maxWidth: 360,
            }}>
              <dt style={{ color: 'var(--color-champagne)' }}>LAT.</dt><dd style={{ margin: 0, color: 'var(--color-navy)' }}>{property.geo.lat.toFixed(4)}°</dd>
              <dt style={{ color: 'var(--color-champagne)' }}>LNG.</dt><dd style={{ margin: 0, color: 'var(--color-navy)' }}>{property.geo.lng.toFixed(4)}°</dd>
              <dt style={{ color: 'var(--color-champagne)' }}>CIDADE</dt><dd style={{ margin: 0, color: 'var(--color-navy)' }}>{property.city} · {property.state}</dd>
            </dl>
          </div>
          {/* Mapa estilizado — coordenadas como pino arquitetônico */}
          <div style={{
            position: 'relative', aspectRatio: '4/3',
            border: '1px solid var(--color-line)',
            background:
              'repeating-linear-gradient(0deg, transparent 0 39px, rgba(20,27,45,.06) 39px 40px),' +
              'repeating-linear-gradient(90deg, transparent 0 39px, rgba(20,27,45,.06) 39px 40px),' +
              'var(--color-offwhite-warm)',
            overflow: 'hidden',
          }}>
            {/* Concentric pin */}
            <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
              <svg width="80" height="80" viewBox="0 0 80 80" aria-hidden="true">
                <circle cx="40" cy="40" r="36" fill="none" stroke="var(--color-champagne)" strokeWidth="0.6" strokeDasharray="2 4" />
                <circle cx="40" cy="40" r="22" fill="none" stroke="var(--color-navy)" strokeWidth="0.8" />
                <circle cx="40" cy="40" r="6" fill="var(--color-champagne)" />
                <line x1="40" y1="2" x2="40" y2="14" stroke="var(--color-navy)" strokeWidth="0.6" />
                <line x1="40" y1="66" x2="40" y2="78" stroke="var(--color-navy)" strokeWidth="0.6" />
                <line x1="2" y1="40" x2="14" y2="40" stroke="var(--color-navy)" strokeWidth="0.6" />
                <line x1="66" y1="40" x2="78" y2="40" stroke="var(--color-navy)" strokeWidth="0.6" />
              </svg>
            </div>
            <div style={{ position: 'absolute', top: 14, left: 14, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--color-navy)', textTransform: 'uppercase' }}>
              {property.neighborhood} · {property.city}
            </div>
            <div style={{ position: 'absolute', bottom: 14, right: 14, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--color-champagne)', textTransform: 'uppercase' }}>
              {property.geo.lat.toFixed(2)}° · {property.geo.lng.toFixed(2)}°
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .detail-loc__grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// -------------------- Lead form do imóvel --------------------
function DetailLeadForm({ property }) {
  const [form, setForm] = useS_I({ name: '', email: '', phone: '', message: `Olá, gostaria de conversar sobre o imóvel "${property.title}".` });
  const [errors, setErrors] = useS_I({});
  const [sent, setSent] = useS_I(false);

  const validate = () => {
    const e = {};
    if (form.name.trim().length < 2) e.name = 'Compartilhe seu nome completo para a equipe poder responder.';
    if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = 'Confira o endereço de e-mail.';
    if (form.message.trim().length < 10) e.message = 'Conte um pouco mais do contexto.';
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const onSubmit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSent(true);
  };

  return (
    <section style={{ background: 'var(--color-offwhite-warm)', padding: 'var(--s-10) 0', marginTop: 'var(--s-7)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 'var(--s-8)', alignItems: 'start' }} className="detail-lead__grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Conversar sobre este imóvel</div>
            <h2 className="h2" style={{ maxWidth: '20ch', marginBottom: 24 }}>
              Apresentamos o dossiê integral durante o alinhamento preliminar.
            </h2>
            <p style={{ fontSize: 17, color: 'var(--color-fossil)', maxWidth: '52ch', lineHeight: 1.6 }}>
              Combine uma apresentação editorial pelo WhatsApp, ou envie suas observações por aqui — a equipe responde com a posição inicial em até dois dias úteis.
            </p>
            <div style={{ marginTop: 28 }}>
              <a className="btn btn--primary" href={whatsappURL(`Olá, gostaria de conversar sobre o imóvel "${property.title}".`)} target="_blank" rel="noopener">
                Conversar pelo WhatsApp <Icon name="whatsapp" size={14} />
              </a>
            </div>
            <div style={{ marginTop: 36 }}>
              <Link to="/" className="btn--link">← Voltar para a Home</Link>
            </div>
          </div>
          <form className="form" onSubmit={onSubmit} noValidate aria-label="Demonstrar interesse neste imóvel">
            <div className="field">
              <label htmlFor="li-name">Nome</label>
              <input id="li-name" type="text" value={form.name}
                aria-invalid={!!errors.name}
                aria-describedby={errors.name ? 'li-err-name' : undefined}
                onChange={(e)=>setForm({...form, name: e.target.value})} />
              {errors.name && <div className="err" id="li-err-name">{errors.name}</div>}
            </div>
            <div className="field">
              <label htmlFor="li-email">E-mail</label>
              <input id="li-email" type="email" value={form.email}
                aria-invalid={!!errors.email}
                aria-describedby={errors.email ? 'li-err-email' : undefined}
                onChange={(e)=>setForm({...form, email: e.target.value})} />
              {errors.email && <div className="err" id="li-err-email">{errors.email}</div>}
            </div>
            <div className="field">
              <label htmlFor="li-phone">Telefone <span className="opt">(opcional)</span></label>
              <input id="li-phone" type="tel" value={form.phone}
                onChange={(e)=>setForm({...form, phone: e.target.value})} />
            </div>
            <div className="field">
              <label htmlFor="li-msg">Mensagem</label>
              <textarea id="li-msg" value={form.message}
                aria-invalid={!!errors.message}
                aria-describedby={errors.message ? 'li-err-msg' : undefined}
                onChange={(e)=>setForm({...form, message: e.target.value})} />
              {errors.message && <div className="err" id="li-err-msg">{errors.message}</div>}
            </div>
            <div>
              <button type="submit" className="btn btn--primary">Enviar mensagem <Icon name="arrow" size={14} /></button>
            </div>
            {sent && (
              <div className="toast" role="status" aria-live="polite">
                <strong style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 18, marginBottom: 4 }}>Mensagem recebida.</strong>
                Nossa equipe técnica retornará em breve com uma posição inicial.
              </div>
            )}
          </form>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .detail-lead__grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { ImoveisPage, ImovelDetailPage, DueDiligenceDossier });
