// Brisas do Lago — Página "O Empreendimento"
// Conteúdo extraído do contrato oficial + planta + medidas.

const { useState: _useState } = React;

function EmpreendimentoPage({onExplore}) {
  return (
    <div style={{paddingBottom: 80}}>
      {/* Hero editorial */}
      <section style={{
        background: 'linear-gradient(110deg, var(--green-deep) 0%, var(--green) 100%)',
        color: 'var(--bg-card)', padding: '70px 28px 90px', position:'relative', overflow:'hidden',
        backgroundImage: 'linear-gradient(110deg, var(--green-deep) 0%, var(--green) 100%), radial-gradient(at 85% 20%, rgba(201, 123, 74, 0.2), transparent 60%)'
      }}>
        <div style={{maxWidth: 1400, margin:'0 auto', display:'grid', gridTemplateColumns:'minmax(0, 1.3fr) minmax(0, 1fr)', gap: 60, alignItems:'center'}} className="hero-grid">
          <div>
            <div className="eyebrow" style={{color:'#D9C7A8', marginBottom:18}}>◇ Sobre · Brisas do Lago</div>
            <h1 className="display" style={{fontSize:'clamp(44px, 6.5vw, 84px)', lineHeight:0.95, fontWeight:500, color:'var(--bg-card)', letterSpacing:'-0.025em', marginBottom: 24, textWrap:'balance'}}>
              Um loteamento à<br/>
              <em style={{fontStyle:'italic', color:'var(--terra)'}}>beira da lagoa</em>,<br/>
              do jeito que devia ser.
            </h1>
            <p style={{fontSize:17, color:'#E8DDC5', lineHeight:1.55, maxWidth:520, marginBottom:32}}>
              95 lotes de veraneio em Primeira Cruz/MA, dentro do território dos Lençóis Maranhenses.
              Píer privativo na Lagoa do Cassó, infraestrutura completa entregue pela vendedora,
              portaria 24h e cinturão verde preservado.
            </p>
            <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
              <button onClick={onExplore} className="btn btn-terra btn-lg">
                Ver mapa de lotes <Icon name="arrowR" size={14}/>
              </button>
              <button className="btn btn-lg" style={{background:'rgba(243,237,224,0.1)', color:'var(--bg-card)', border:'1px solid rgba(243,237,224,0.3)'}}>
                <Icon name="download" size={14}/> Baixar memorial descritivo
              </button>
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
            <PhotoPlaceholder type="lago" height={200} label="Lagoa do Cassó"/>
            <PhotoPlaceholder type="pier" height={200} label="Píer privativo"/>
            <PhotoPlaceholder type="aerea" height={200} label="Vista aérea"/>
            <PhotoPlaceholder type="portaria" height={200} label="Portaria 24h"/>
          </div>
        </div>
      </section>

      {/* Os números */}
      <section style={{padding: '70px 28px 50px', maxWidth: 1400, margin: '0 auto'}}>
        <SectionTitle eyebrow="◇ Os números" title="Brisas em escala"/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(180px, 1fr))', gap: 1, background:'var(--line)', border:'1px solid var(--line)', borderRadius: 18, overflow:'hidden'}}>
          {[
            ['95', 'lotes residenciais'],
            ['12', 'quadras (A–L)'],
            ['67.345', 'm² comercializáveis'],
            ['28.013', 'm² de cinturão verde APP'],
            ['11', 'ruas internas'],
            ['40', 'vagas comuns'],
            ['1', 'píer privativo na lagoa'],
            ['100%', 'infra entregue pela vendedora'],
          ].map(([n, l]) => (
            <div key={l} style={{padding:'30px 24px', background:'var(--bg-card)'}}>
              <div className="display" style={{fontSize:'clamp(36px, 4vw, 52px)', fontWeight:500, color:'var(--green-deep)', lineHeight:1, letterSpacing:'-0.02em'}}>{n}</div>
              <div style={{fontSize:12.5, color:'var(--ink-soft)', marginTop:8, lineHeight:1.4}}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Localização */}
      <section style={{padding:'40px 28px', maxWidth:1400, margin:'0 auto'}}>
        <SectionTitle eyebrow="◐ Localização" title="Onde fica" sub="Povoado Cassó · Município e Comarca de Primeira Cruz · Maranhão · CEP 65190-000"/>
        <div style={{display:'grid', gridTemplateColumns:'minmax(0, 1.4fr) minmax(0, 1fr)', gap:30, alignItems:'stretch'}}>
          <div style={{background:'var(--bg-card)', borderRadius:18, padding:0, overflow:'hidden', border:'1px solid var(--line-soft)'}}>
            <MapInsetSVG/>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:14}}>
            <InfoCard icon="pin" titulo="Endereço" linhas={['Av. Fátima Costa, S/Nº', 'Lagoa do Cassó', 'Primeira Cruz/MA · 65190-000']}/>
            <InfoCard icon="wave" titulo="Frente para a Lagoa do Cassó" linhas={['34 lotes com vista direta', 'Píer privativo de 60m', 'Faixa de reserva legal de 30m']}/>
            <InfoCard icon="tree" titulo="Acessos" linhas={['Estrada de Primeira Cruz', 'Aeroporto de São Luís ~250 km', 'Próximo a Atins / Barreirinhas']}/>
          </div>
        </div>
      </section>

      {/* Infraestrutura */}
      <section style={{padding:'60px 28px', background:'var(--bg-deep)', marginTop:40}}>
        <div style={{maxWidth:1400, margin:'0 auto'}}>
          <SectionTitle eyebrow="◇ O que está incluso" title="Infraestrutura completa" sub="Todas as obras de infraestrutura e urbanização são executadas pela vendedora, às suas exclusivas expensas, sem ônus para o comprador. Cláusula III.6 do contrato."/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:14}}>
            {[
              ['Píer privativo na Lagoa do Cassó', 'wave', 'Acesso direto à lagoa para todos os proprietários'],
              ['Quadra poliesportiva', 'star', 'Equipada e de uso comum'],
              ['Poço artesiano', 'wave', 'Distribuição individual para cada lote'],
              ['Energia elétrica individual', 'sparkle', 'Concessionária Equatorial · ramais subterrâneos'],
              ['Portaria 24 horas', 'home', 'Acesso controlado · loteamento fechado'],
              ['Urbanização das ruas', 'map', '11 ruas internas pavimentadas e iluminadas'],
              ['40 vagas comuns', 'briefcase', 'Estacionamento de visitantes'],
              ['Cinturão verde APP', 'tree', '28.013 m² de área de preservação permanente'],
              ['Paisagismo das vias', 'tree', 'Calçadas gramadas em toda a extensão'],
            ].map(([nome, icon, desc]) => (
              <div key={nome} style={{background:'var(--bg-card)', padding:'24px 22px', borderRadius:14, border:'1px solid var(--line-soft)'}}>
                <div style={{width:42, height:42, borderRadius:10, background:'var(--green-soft)', color:'var(--green-deep)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:14}}>
                  <Icon name={icon} size={20}/>
                </div>
                <div style={{fontSize:14, fontWeight:700, color:'var(--ink)', marginBottom:6}}>{nome}</div>
                <div style={{fontSize:12.5, color:'var(--ink-soft)', lineHeight:1.5}}>{desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Normas de uso / construção */}
      <section style={{padding:'70px 28px', maxWidth:1400, margin:'0 auto'}}>
        <SectionTitle eyebrow="◇ Construção" title="Normas de uso e ocupação" sub="As regras abaixo fazem parte do contrato (Cláusula IX) e protegem a vocação residencial e ambiental do empreendimento."/>

        <div style={{display:'grid', gridTemplateColumns:'minmax(0, 1.4fr) minmax(0, 1fr)', gap:30}}>
          <div>
            <div className="eyebrow" style={{marginBottom:14}}>◇ Recuos mínimos por rua</div>
            <table style={{width:'100%', borderCollapse:'collapse', background:'var(--bg-card)', borderRadius:14, overflow:'hidden', border:'1px solid var(--line-soft)'}}>
              <thead>
                <tr style={{background:'var(--green-deep)', color:'var(--bg-card)'}}>
                  <th style={{padding:'14px 18px', textAlign:'left', fontSize:11, fontWeight:700, letterSpacing:1, textTransform:'uppercase'}}>Rua</th>
                  <th style={{padding:'14px 18px', textAlign:'center', fontSize:11, fontWeight:700, letterSpacing:1, textTransform:'uppercase'}}>Frente</th>
                  <th style={{padding:'14px 18px', textAlign:'center', fontSize:11, fontWeight:700, letterSpacing:1, textTransform:'uppercase'}}>Laterais</th>
                  <th style={{padding:'14px 18px', textAlign:'center', fontSize:11, fontWeight:700, letterSpacing:1, textTransform:'uppercase'}}>Fundo</th>
                </tr>
              </thead>
              <tbody style={{fontFamily:'var(--mono)'}}>
                {[
                  ['Rua do Lago', '4m', '3m', '2m'],
                  ['Rua dos Pássaros', '4m', '3m', '2m'],
                  ['Rua das Árvores', '3m', '2m', '2m'],
                  ['Rua dos Ventos', '2m', '2m', '2m'],
                  ['Rua das Trilhas', '2m', '2m', '2m'],
                ].map((r, i) => (
                  <tr key={i} style={{borderTop: i > 0 ? '1px solid var(--line-soft)' : 'none'}}>
                    <td style={{padding:'12px 18px', fontSize:13.5, fontWeight:600, fontFamily:'var(--ui)'}}>{r[0]}</td>
                    <td style={{padding:'12px 18px', textAlign:'center', fontWeight:600, color:'var(--green-deep)'}}>{r[1]}</td>
                    <td style={{padding:'12px 18px', textAlign:'center', fontWeight:600, color:'var(--green-deep)'}}>{r[2]}</td>
                    <td style={{padding:'12px 18px', textAlign:'center', fontWeight:600, color:'var(--green-deep)'}}>{r[3]}</td>
                  </tr>
                ))}
              </tbody>
            </table>

            <div className="eyebrow" style={{marginTop:36, marginBottom:14}}>◇ Restrições construtivas</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
              {[
                ['Taxa de ocupação máxima', '70%', 'para lotes da rua do lago e dos pássaros'],
                ['Andares máximos', '2', 'pavimentos sobrepostos · construção em patamares'],
                ['Área mínima de construção', '50 m²', 'para a residência principal'],
                ['Altura máxima do fecho', '1,70 m', 'gradil, alambrado ou cerca viva'],
                ['Faixa de reserva ao lago', '30 m', 'restrição do SEMA · todo o perímetro'],
                ['Corte de árvores nativas', 'até 50%', 'em lotes com mais de 70% de vegetação'],
              ].map(([k, v, sub]) => (
                <div key={k} style={{background:'var(--bg-card)', padding:'18px 20px', borderRadius:12, border:'1px solid var(--line-soft)'}}>
                  <div className="display" style={{fontSize:28, color:'var(--green-deep)', fontWeight:500, lineHeight:1, marginBottom:6}}>{v}</div>
                  <div style={{fontSize:12.5, fontWeight:700}}>{k}</div>
                  <div style={{fontSize:11.5, color:'var(--ink-soft)', marginTop:4, lineHeight:1.4}}>{sub}</div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{marginBottom:14}}>◇ Não é permitido</div>
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {[
                'Uso comercial, industrial ou prestação de serviços',
                'Habitação coletiva, apartamentos ou pensão',
                'Corte de árvores de lei (bacuri, mirim, ipê)',
                'Cerca contínua nas faixas de proteção dos lagos',
                'Letreiros e anúncios (exceto venda/locação)',
                'Criação de animais de corte ou aves',
                'Lançamento de lixo em vias ou lotes vazios',
                'Aterro ou extração sem autorização prévia',
                'Muros de arrimo no perímetro do lote',
              ].map(t => (
                <div key={t} style={{
                  display:'flex', alignItems:'flex-start', gap:10,
                  padding:'10px 14px', background:'var(--bg-card)',
                  borderRadius:8, border:'1px solid var(--line-soft)',
                  fontSize:13
                }}>
                  <span style={{color:'var(--danger)', marginTop:2, flexShrink:0}}><Icon name="x" size={13} stroke={2.5}/></span>
                  <span>{t}</span>
                </div>
              ))}
            </div>

            <div className="eyebrow" style={{marginTop:28, marginBottom:14}}>◇ Permitido na área comercial</div>
            <div style={{background:'var(--green-soft)', padding:'14px 18px', borderRadius:10, fontSize:13, color:'var(--green-deep)'}}>
              A vendedora reserva lotes para área comercial e administrativa: <strong>supermercados, padaria, restaurante, bar, farmácia, açougue e hotel</strong>. Excluída sempre a utilização industrial.
            </div>
          </div>
        </div>
      </section>

      {/* Cronograma */}
      <section style={{padding:'40px 28px 70px', maxWidth: 1400, margin:'0 auto'}}>
        <SectionTitle eyebrow="◇ Obras" title="Cronograma de execução"/>
        <ObraTimeline/>
      </section>

      {/* Documentação legal */}
      <section style={{background:'var(--green-deep)', color:'var(--bg-card)', padding:'70px 28px'}}>
        <div style={{maxWidth: 1400, margin:'0 auto'}}>
          <div className="eyebrow" style={{color:'#D9C7A8', marginBottom:10}}>◇ Identidade legal</div>
          <h2 className="display" style={{fontSize:'clamp(34px, 4.5vw, 52px)', fontWeight:500, color:'var(--bg-card)', marginBottom:8}}>
            Tudo documentado.
          </h2>
          <p style={{color:'#D9C7A8', fontSize:15, maxWidth:600, marginBottom:36, lineHeight:1.5}}>
            O empreendimento é regular, aprovado e licenciado. Os documentos estão disponíveis para consulta a qualquer momento na área do cliente.
          </p>

          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:14}}>
            {[
              ['Empresa proprietária', [
                ['Razão social', 'Loteamento Brisas do Lago Cassó SPE Ltda'],
                ['CNPJ', '53.205.736/0001-62'],
                ['JUCEMA', '21201462998'],
                ['Constituição', '14/12/2023'],
              ]],
              ['Registro do imóvel', [
                ['Matrícula', 'nº 518 · Livro 2D'],
                ['Cartório', 'Registro Imóvel de Primeira Cruz'],
                ['Registro do loteamento', '16/12/2021'],
                ['Lei base', 'Federal nº 6.766/1979'],
              ]],
              ['Licenças e alvarás', [
                ['Alvará de construção', 'CV-AV2TLGDU · ago/2025'],
                ['SEMA · Licença de instalação', 'nº 1190271 · 21/11/2022'],
                ['Prefeitura', 'Primeira Cruz · aprovado'],
              ]],
              ['Administração', [
                ['Gratuita até', '31/dez/2027'],
                ['A partir de', '01/jan/2028 · taxa rateada por lote'],
                ['Foro de eleição', 'Comarca de Primeira Cruz/MA'],
              ]],
            ].map(([t, rows]) => (
              <div key={t} style={{background:'rgba(243,237,224,0.06)', padding:'24px 22px', borderRadius:14, border:'1px solid rgba(243,237,224,0.12)'}}>
                <div style={{fontSize:11, color:'#D9C7A8', letterSpacing:1.5, textTransform:'uppercase', fontWeight:700, marginBottom:14}}>{t}</div>
                <dl style={{margin:0, display:'flex', flexDirection:'column', gap:10}}>
                  {rows.map(([k, v]) => (
                    <div key={k}>
                      <dt style={{fontSize:11, color:'#D9C7A8', marginBottom:2}}>{k}</dt>
                      <dd style={{margin:0, fontSize:13.5, fontWeight:600, color:'var(--bg-card)'}}>{v}</dd>
                    </div>
                  ))}
                </dl>
              </div>
            ))}
          </div>

          <div style={{marginTop:36, padding:'22px 26px', background:'rgba(201, 123, 74, 0.15)', borderRadius:14, border:'1px solid rgba(201, 123, 74, 0.3)', display:'flex', alignItems:'center', gap:18, flexWrap:'wrap'}}>
            <Icon name="file" size={32} stroke={1.5}/>
            <div style={{flex:1, minWidth: 220}}>
              <div style={{fontWeight:700, fontSize:15, marginBottom:4}}>Conhecer todas as cláusulas?</div>
              <div style={{color:'#D9C7A8', fontSize:13}}>Baixe o contrato modelo de compromisso de compra e venda em PDF.</div>
            </div>
            <button className="btn btn-terra"><Icon name="download" size={13}/> Baixar contrato</button>
          </div>
        </div>
      </section>

      {/* Pronto para visitar */}
      <section style={{padding:'70px 28px', maxWidth: 1400, margin:'0 auto', textAlign:'center'}}>
        <div className="eyebrow" style={{color:'var(--terra-deep)', marginBottom:14}}>◆ Próximo passo</div>
        <h2 className="display" style={{fontSize:'clamp(36px, 5vw, 58px)', fontWeight:500, color:'var(--green-deep)', maxWidth:760, margin:'0 auto 18px', lineHeight:1, textWrap:'balance'}}>
          Marque uma visita guiada<br/>
          ou já comece pelo <em style={{fontStyle:'italic', color:'var(--terra)'}}>mapa de lotes</em>.
        </h2>
        <p style={{fontSize:15, color:'var(--ink-soft)', maxWidth:540, margin:'0 auto 32px', lineHeight:1.5}}>
          Nosso time recebe interessados de quarta a domingo, das 8h às 17h, direto no stand do empreendimento.
        </p>
        <div style={{display:'inline-flex', gap:12, flexWrap:'wrap', justifyContent:'center'}}>
          <button onClick={onExplore} className="btn btn-primary btn-lg">Ver mapa de lotes <Icon name="arrowR" size={14}/></button>
          <button className="btn btn-secondary btn-lg"><Icon name="phone" size={14}/> Agendar visita</button>
        </div>
      </section>
    </div>
  );
}

function SectionTitle({eyebrow, title, sub}) {
  return (
    <div style={{marginBottom:32, maxWidth: 760}}>
      {eyebrow && <div className="eyebrow" style={{color:'var(--terra-deep)', marginBottom:10}}>{eyebrow}</div>}
      <h2 className="display" style={{fontSize:'clamp(32px, 4vw, 48px)', fontWeight:500, color:'var(--green-deep)', lineHeight:1, letterSpacing:'-0.02em', marginBottom: sub ? 14 : 0}}>
        {title}
      </h2>
      {sub && <p style={{color:'var(--ink-soft)', fontSize:15, lineHeight:1.55}}>{sub}</p>}
    </div>
  );
}

function InfoCard({icon, titulo, linhas}) {
  return (
    <div style={{background:'var(--bg-card)', borderRadius:14, padding:'22px 24px', border:'1px solid var(--line-soft)', display:'flex', gap:16, alignItems:'flex-start'}}>
      <div style={{width:40, height:40, borderRadius:10, background:'var(--terra-soft)', color:'var(--terra-deep)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
        <Icon name={icon} size={18}/>
      </div>
      <div>
        <div style={{fontSize:14, fontWeight:700, marginBottom:6}}>{titulo}</div>
        {linhas.map((l, i) => (
          <div key={i} style={{fontSize:13, color:'var(--ink-soft)', lineHeight:1.45}}>{l}</div>
        ))}
      </div>
    </div>
  );
}

function MapInsetSVG() {
  // Inset simplificado do Maranhão mostrando localização de Primeira Cruz
  return (
    <svg viewBox="0 0 600 400" style={{display:'block', width:'100%', height:'auto'}}>
      <defs>
        <pattern id="forestInset" width="20" height="20" patternUnits="userSpaceOnUse">
          <rect width="20" height="20" fill="#9CB58E"/>
          <circle cx="6" cy="8" r="2.5" fill="#7A9070" opacity="0.5"/>
          <circle cx="14" cy="14" r="2" fill="#7A9070" opacity="0.5"/>
        </pattern>
        <pattern id="waterInset" width="30" height="14" patternUnits="userSpaceOnUse">
          <rect width="30" height="14" fill="#7FA7B8"/>
          <path d="M0 7 Q7 4, 14 7 T30 7" stroke="#A6C2CF" strokeWidth="0.8" fill="none" opacity="0.6"/>
        </pattern>
      </defs>
      {/* Fundo terra */}
      <rect width="600" height="400" fill="#E4DFCC"/>
      {/* Litoral (curva no leste) */}
      <path d="M 600 0 L 600 400 L 380 400 Q 360 320, 380 230 Q 400 150, 420 100 Q 450 40, 500 20 L 600 0 Z" fill="url(#waterInset)"/>
      {/* Florestas / parque nacional dos Lençóis */}
      <path d="M 220 60 Q 330 50, 380 100 Q 410 160, 380 230 Q 350 280, 280 270 Q 230 250, 220 180 Z" fill="url(#forestInset)" opacity="0.6"/>
      {/* Cidades vizinhas */}
      <g>
        <circle cx="120" cy="220" r="4" fill="var(--ink-soft)"/>
        <text x="130" y="225" fontSize="11" fill="var(--ink-soft)" fontFamily="var(--ui)">São Luís</text>
        <circle cx="450" cy="190" r="3" fill="var(--ink-soft)"/>
        <text x="460" y="195" fontSize="10" fill="var(--ink-soft)" fontFamily="var(--ui)">Barreirinhas</text>
        <circle cx="490" cy="130" r="3" fill="var(--ink-soft)"/>
        <text x="498" y="135" fontSize="10" fill="var(--ink-soft)" fontFamily="var(--ui)">Atins</text>
      </g>
      {/* Primeira Cruz · Lagoa do Cassó */}
      <g>
        <circle cx="320" cy="170" r="14" fill="rgba(201, 123, 74, 0.2)"/>
        <circle cx="320" cy="170" r="8" fill="var(--terra)"/>
        <circle cx="320" cy="170" r="3" fill="white"/>
        <line x1="320" y1="184" x2="320" y2="220" stroke="var(--terra)" strokeWidth="1.5" strokeDasharray="3 3"/>
        <rect x="240" y="220" width="160" height="46" rx="8" fill="white" stroke="var(--terra)" strokeWidth="1.5"/>
        <text x="320" y="240" fontSize="13" fontWeight="700" fontFamily="var(--display)" fill="var(--green-deep)" textAnchor="middle">Brisas do Lago</text>
        <text x="320" y="256" fontSize="10" fill="var(--ink-soft)" textAnchor="middle" fontFamily="var(--ui)">Lagoa do Cassó · Primeira Cruz/MA</text>
      </g>
      {/* Rotas tracejadas */}
      <path d="M 120 220 Q 220 200, 320 170" stroke="var(--ink-soft)" strokeWidth="1" strokeDasharray="3 4" fill="none" opacity="0.5"/>
      <path d="M 320 170 Q 380 180, 450 190" stroke="var(--ink-soft)" strokeWidth="1" strokeDasharray="3 4" fill="none" opacity="0.5"/>
      {/* Compass */}
      <g transform="translate(540, 50)">
        <circle cx="0" cy="0" r="20" fill="white" stroke="var(--green-deep)" strokeWidth="1"/>
        <path d="M 0 -14 L 4 0 L 0 14 L -4 0 Z" fill="var(--green-deep)"/>
        <path d="M 0 -14 L 4 0 L 0 -2 Z" fill="var(--terra)"/>
        <text x="0" y="-24" fontSize="10" fontWeight="700" textAnchor="middle" fill="var(--green-deep)">N</text>
      </g>
      {/* Label do parque */}
      <text x="290" y="150" fontSize="9" fill="var(--green-deep)" fontFamily="var(--ui)" letterSpacing="1.5" fontWeight="600" opacity="0.6">PARQUE NACIONAL</text>
      <text x="290" y="162" fontSize="9" fill="var(--green-deep)" fontFamily="var(--ui)" letterSpacing="1.5" fontWeight="600" opacity="0.6">DOS LENÇÓIS</text>
      <text x="490" y="80" fontSize="11" fill="rgba(91, 143, 168, 0.7)" fontFamily="var(--display)" fontStyle="italic">Oceano Atlântico</text>
      {/* Estado */}
      <text x="40" y="40" fontSize="13" fill="var(--ink-soft)" fontFamily="var(--ui)" letterSpacing="2.5" fontWeight="700">MARANHÃO</text>
    </svg>
  );
}

function ObraTimeline() {
  const fases = window.BL.OBRA;
  return (
    <div style={{position:'relative', display:'flex', flexDirection:'column', gap:0}}>
      <div style={{position:'absolute', left:23, top:30, bottom:30, width:2, background:'var(--line)'}}/>
      {fases.map((f, i) => (
        <div key={i} style={{display:'flex', gap:24, padding:'18px 0', position:'relative'}}>
          <div style={{
            width:48, height:48, borderRadius:'50%', flexShrink:0,
            background: f.status === 'concluido' ? 'var(--green)' : f.status === 'andamento' ? 'var(--terra)' : 'var(--bg-card)',
            border: f.status === 'pendente' ? '2px solid var(--line)' : 'none',
            color: f.status === 'pendente' ? 'var(--ink-soft)' : 'var(--bg-card)',
            display:'flex', alignItems:'center', justifyContent:'center',
            zIndex: 1, position:'relative'
          }}>
            {f.status === 'concluido' ? <Icon name="check" size={20}/> :
              <span className="mono" style={{fontSize:14, fontWeight:700}}>{i+1}</span>}
          </div>
          <div style={{flex:1, paddingTop:8}}>
            <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', gap:14, flexWrap:'wrap', marginBottom:8}}>
              <div className="display" style={{fontSize:22, fontWeight:500, color:'var(--green-deep)'}}>{f.fase}</div>
              <div style={{display:'flex', gap:14, alignItems:'baseline'}}>
                <span className="mono" style={{fontSize:14, fontWeight:700, color: f.pct > 0 ? 'var(--green-deep)' : 'var(--ink-faint)'}}>{f.pct}%</span>
                <span style={{fontSize:12.5, color:'var(--ink-soft)'}}>{f.status === 'concluido' ? 'Concluído ' : 'Previsão '}<strong style={{color:'var(--ink)'}}>{f.prev}</strong></span>
              </div>
            </div>
            <div style={{height:6, background:'var(--bg-card)', borderRadius:100, overflow:'hidden', border:'1px solid var(--line-soft)'}}>
              <div style={{
                width: f.pct + '%', height:'100%',
                background: f.status === 'concluido' ? 'var(--green)' : f.status === 'andamento' ? 'var(--terra)' : 'var(--line)'
              }}/>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

window.EmpreendimentoPage = EmpreendimentoPage;