// Depoimentos · Planos · FAQ · Localização · CTA Final · Footer

// ─────────────────────────────────────────────────────────────
// Depoimentos
// ─────────────────────────────────────────────────────────────
function Depoimentos({ copy, accent }) {
  const c = copy.stories;
  return (
    <Section id="depoimentos" py={96} bg={T.night} style={{ borderTop: `1px solid ${T.hairline}` }}>
      <Container>
        <SectionHead
          kicker={c.kicker}
          title1={c.title1} title1Hi={c.title1Hi} title1Punct={c.title1Punct}
          caption={c.caption}
          accent={accent} />
        

        <div data-grid-collapse style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 16
        }}>
          {c.quotes.map((qt, i) =>
          <article key={i} style={{
            background: T.night,
            border: `1px solid ${T.hairline}`,
            padding: '36px 28px 28px',
            display: 'flex', flexDirection: 'column', gap: 20,
            minHeight: 360,
            transition: 'background .2s ease'
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = T.night2}
          onMouseLeave={(e) => e.currentTarget.style.background = T.night}>
            
              {/* Stars + tag */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{ display: 'flex', gap: 3 }}>
                  {[0, 1, 2, 3, 4].map((s) =>
                <svg key={s} width="13" height="13" viewBox="0 0 24 24" fill={accent} stroke="none">
                      <path d="M12 2 L14.5 8.5 L21.5 9 L16 13.5 L17.5 20.5 L12 16.5 L6.5 20.5 L8 13.5 L2.5 9 L9.5 8.5 Z" />
                    </svg>
                )}
                </div>
                <Kicker>{qt.tag}</Kicker>
              </div>

              <blockquote style={{ margin: 0, flex: 1 }}>
                <div style={{
                fontFamily: T.sans, fontWeight: 300, fontSize: 19,
                lineHeight: 1.4, letterSpacing: '-0.012em', color: T.cream,
                textWrap: 'pretty'
              }}>
                  <span style={{ color: accent }}>"</span>{qt.q}<span style={{ color: accent }}>"</span>
                </div>
              </blockquote>

              <div style={{ paddingTop: 18, borderTop: `1px solid ${T.hairline}` }}>
                <div style={{
                fontFamily: T.sans, fontSize: 15, fontWeight: 500,
                color: T.cream, letterSpacing: '-0.01em', marginBottom: 4
              }}>{qt.who}</div>
                <div style={{
                fontFamily: T.mono, fontSize: 10, color: T.fog,
                letterSpacing: '0.22em', textTransform: 'uppercase'
              }}>{qt.role}</div>
              </div>
            </article>
          )}
        </div>
      </Container>
    </Section>);

}

// ─────────────────────────────────────────────────────────────
// Planos — 4 cards
// ─────────────────────────────────────────────────────────────
function Planos({ copy, accent, onOpenModal }) {
  const c = copy.plans;
  return (
    <Section id="planos" py={96} bg={T.night2} style={{ borderTop: `1px solid ${T.hairline}`, borderBottom: `1px solid ${T.hairline}` }}>
      <Container>
        <SectionHead
          kicker={c.kicker}
          title1={c.title1} title1Hi={c.title1Hi} title1Punct={c.title1Punct}
          caption={c.caption}
          accent={accent} />
        

        <div data-grid-collapse style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 16
        }}>
          {c.items.map((p, i) =>
          <article key={i} style={{
            background: p.popular ? T.ink : T.night,
            color: p.popular ? T.night : T.cream,
            border: `1px solid ${p.popular ? T.ink : T.hairline}`,
            padding: '40px 28px 32px',
            minHeight: 460,
            display: 'flex', flexDirection: 'column', gap: 18,
            position: 'relative',
            transition: 'transform .2s ease'
          }}>
              {p.popular &&
            <div style={{
              position: 'absolute', top: -1, left: -1, right: -1,
              height: 4, background: accent
            }} />
            }
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <Kicker color={p.popular ? 'rgba(245, 239, 224, 0.55)' : T.fog}>{p.tag}</Kicker>
                {p.popular &&
              <span style={{
                fontFamily: T.mono, fontSize: 10, fontWeight: 700,
                color: T.ink, background: accent,
                padding: '4px 8px', letterSpacing: '0.18em',
                textTransform: 'uppercase'
              }}>{p.badge}</span>
              }
              </div>
              <h3 style={{
              fontFamily: T.sans, fontWeight: 400, fontSize: 30,
              letterSpacing: '-0.025em', lineHeight: 1.05,
              margin: 0, color: p.popular ? T.night : T.cream
            }}>{p.name}</h3>
              <p style={{
              fontSize: 14, lineHeight: 1.5,
              color: p.popular ? 'rgba(245, 239, 224, 0.78)' : T.bone,
              margin: 0, textWrap: 'pretty'
            }}>{p.desc}</p>

              <ul style={{
              listStyle: 'none', padding: 0, margin: '8px 0 0',
              display: 'flex', flexDirection: 'column', gap: 0,
              borderTop: `1px solid ${p.popular ? 'rgba(245, 239, 224, 0.15)' : T.hairline}`
            }}>
                {p.included.map((line, j) =>
              <li key={j} style={{
                display: 'flex', gap: 10, alignItems: 'flex-start',
                padding: '10px 0',
                borderBottom: `1px solid ${p.popular ? 'rgba(245, 239, 224, 0.10)' : T.hairline}`,
                fontFamily: T.mono, fontSize: 11.5, lineHeight: 1.5,
                color: p.popular ? 'rgba(245, 239, 224, 0.86)' : T.bone,
                letterSpacing: '0.02em'
              }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 3 }}>
                      <path d="M4 12 L10 18 L20 6" />
                    </svg>
                    <span>{line}</span>
                  </li>
              )}
              </ul>

              {p.opt &&
            <div style={{
              paddingTop: 4,
              display: 'flex', flexDirection: 'column', gap: 4
            }}>
                  <Kicker color={p.popular ? 'rgba(245, 239, 224, 0.45)' : T.fog}>{p.optLabel}</Kicker>
                  <span style={{
                fontFamily: T.mono, fontSize: 11.5, color: p.popular ? 'rgba(245, 239, 224, 0.65)' : T.mist,
                letterSpacing: '0.02em'
              }}>{p.opt}</span>
                </div>
            }

              <button onClick={onOpenModal} style={{
              marginTop: 'auto',
              background: p.popular ? accent : 'transparent',
              color: p.popular ? T.ink : T.cream,
              border: p.popular ? 'none' : `1px solid ${T.hairline}`,
              padding: '14px 16px',
              fontFamily: T.mono, fontSize: 11, fontWeight: 600,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              cursor: 'pointer', borderRadius: 4,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              transition: 'transform .15s ease, background .15s ease'
            }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-1px)';if (!p.popular) e.currentTarget.style.background = T.night2;}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';if (!p.popular) e.currentTarget.style.background = 'transparent';}}>
              
                {p.popular && <span style={{ width: 7, height: 7, borderRadius: '50%', background: T.ink, animation: 'pulse9j 1.6s ease-in-out infinite' }} />}
                {p.cta}
              </button>
            </article>
          )}
        </div>

        {/* Recurrence band */}
        <div style={{
          marginTop: 28, padding: '20px 28px',
          background: T.night, border: `1px solid ${T.hairline}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
          fontFamily: T.mono, fontSize: 11, color: T.bone,
          letterSpacing: '0.22em', textTransform: 'uppercase'
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: '50%', background: accent,
            animation: 'pulse9j 2s ease-in-out infinite', flexShrink: 0
          }} />
          <span style={{ textWrap: 'pretty', textAlign: 'center' }}>{c.recurring}</span>
        </div>
      </Container>
    </Section>);

}

// ─────────────────────────────────────────────────────────────
// FAQ — accordion agrupado
// ─────────────────────────────────────────────────────────────
function FAQ({ copy, accent }) {
  const c = copy.faq;
  const [openKey, setOpenKey] = React.useState('0-0');

  return (
    <Section id="duvidas" py={96}>
      <Container>
        <SectionHead
          kicker={c.kicker}
          title1={c.title1} title1Hi={c.title1Hi} title1Punct={c.title1Punct}
          accent={accent} />
        

        <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 64, alignItems: 'start' }}>
          {/* Index column */}
          <div style={{
            position: 'sticky', top: 100,
            display: 'flex', flexDirection: 'column', gap: 0,
            borderTop: `1px solid ${T.hairline}`
          }}>
            {c.groups.map((g, gi) =>
            <a key={gi} href={`#faq-${gi}`} style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              padding: '16px 0', borderBottom: `1px solid ${T.hairline}`,
              fontFamily: T.mono, fontSize: 12, color: T.cream,
              letterSpacing: '0.04em', textDecoration: 'none',
              transition: 'color .15s ease'
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = accent}
            onMouseLeave={(e) => e.currentTarget.style.color = T.cream}>
              
                <span>{g.name}</span>
                <span style={{ color: T.fog, fontSize: 10, letterSpacing: '0.22em' }}>0{gi + 1} · {String(g.items.length).padStart(2, '0')}</span>
              </a>
            )}
          </div>

          {/* FAQ list */}
          <div>
            {c.groups.map((g, gi) =>
            <div key={gi} id={`faq-${gi}`} style={{ marginBottom: 56, scrollMarginTop: 100 }}>
                <div style={{
                display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
                marginBottom: 16,
                paddingBottom: 12, borderBottom: `1px solid ${T.hairline}`
              }}>
                  <h3 style={{
                  fontFamily: T.sans, fontWeight: 400, fontSize: 28,
                  letterSpacing: '-0.025em', margin: 0, color: T.cream
                }}>{g.name}</h3>
                  <Kicker style={{ color: accent }}>0{gi + 1}</Kicker>
                </div>

                <div>
                  {g.items.map((it, ii) => {
                  const key = `${gi}-${ii}`;
                  const open = openKey === key;
                  return (
                    <div key={ii} style={{ borderBottom: `1px solid ${T.hairline}` }}>
                        <button
                        onClick={() => setOpenKey(open ? null : key)}
                        style={{
                          width: '100%', background: 'transparent', border: 'none',
                          padding: '22px 0',
                          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                          cursor: 'pointer', textAlign: 'left', gap: 24
                        }}>
                        
                          <span style={{
                          fontFamily: T.sans, fontWeight: 400, fontSize: 19,
                          color: T.cream, letterSpacing: '-0.015em', lineHeight: 1.3
                        }}>{it.q}</span>
                          <span style={{
                          fontFamily: T.mono, fontSize: 14, color: open ? accent : T.fog,
                          transition: 'transform .2s ease, color .2s ease',
                          transform: open ? 'rotate(45deg)' : 'rotate(0)',
                          flexShrink: 0, lineHeight: 1
                        }}>+</span>
                        </button>
                        {open &&
                      <div style={{
                        paddingBottom: 24, paddingRight: 56,
                        animation: 'fadeUp .2s ease-out'
                      }}>
                            <p style={{
                          fontSize: 15, lineHeight: 1.6, color: T.bone,
                          margin: 0, textWrap: 'pretty'
                        }}>{it.a}</p>
                          </div>
                      }
                      </div>);

                })}
                </div>
              </div>
            )}
          </div>
        </div>
      </Container>
    </Section>);

}

// ─────────────────────────────────────────────────────────────
// Localização
// ─────────────────────────────────────────────────────────────
function Localizacao({ copy, accent }) {
  const c = copy.loc;
  return (
    <Section id="localizacao" py={96} bg={T.night} style={{ borderTop: `1px solid ${T.hairline}` }}>
      <Container>
        <SectionHead
          kicker={c.kicker}
          title1={c.title1} title1Hi={c.title1Hi} title1Punct={c.title1Punct}
          caption={c.caption}
          accent={accent} />
        

        {/* Linha única: Mapa Google embed + Info panel */}
        <div data-grid-collapse style={{ ...{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 1, background: T.hairline, border: `1px solid ${T.hairline}` }, border: "1px rgba(20, 8, 32, 0.14)" }}>
          {/* Google Maps embed */}
          <div style={{ background: T.night, position: 'relative', minHeight: 520, overflow: 'hidden' }}>
            <iframe
              title="Mapa · Av. Nove de Julho, 3147"
              src="https://www.google.com/maps?q=Av.+Nove+de+Julho,+3147,+S%C3%A3o+Paulo,+SP&t=m&z=16&hl=pt-BR&output=embed"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%', border: 0,
                filter: 'grayscale(0.55) contrast(1.05) brightness(0.9)'
              }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen />
            
            {/* Overlay: badge */}
            <div style={{
              position: 'absolute', top: 16, left: 16,
              padding: '8px 14px', background: T.night,
              fontFamily: T.mono, fontSize: 10, color: T.fog,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              border: `1px solid ${T.hairline}`,
              pointerEvents: 'none'
            }}>
              <span style={{ color: accent }}>●</span> {c.mapLabel}
            </div>
            {/* Overlay: endereço bar */}
            <div style={{
              position: 'absolute', bottom: 16, left: 16, right: 16,
              padding: '12px 18px', background: T.night,
              border: `1px solid ${T.hairline}`,
              fontFamily: T.mono, fontSize: 11, color: T.cream,
              letterSpacing: '0.18em',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              flexWrap: 'wrap', gap: 8,
              pointerEvents: 'none'
            }}>
              <span>{c.addr1}</span>
              <Kicker>SP · BR</Kicker>
            </div>
          </div>

          {/* Info panel */}
          <div style={{ background: T.night, padding: '40px 36px 36px', display: 'flex', gap: 28, flexDirection: "column" }}>
            <div>
              <Kicker style={{ marginBottom: 10 }}>ENDEREÇO</Kicker>
              <div style={{
                fontFamily: T.sans, fontSize: 22, fontWeight: 400,
                letterSpacing: '-0.02em', color: T.cream, lineHeight: 1.3
              }}>
                {c.addr1}<br />{c.addr2}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: T.mono, fontSize: 12, color: T.fog,
                letterSpacing: '0.18em'
              }}>{c.hours}</div>
            </div>

            <div>
              <Kicker style={{ marginBottom: 12 }}>{c.mobilityLabel}</Kicker>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: T.hairline, border: `1px solid ${T.hairline}` }}>
                {c.mobility.map((m, i) =>
                <a key={i} href={m.href} target="_blank" rel="noopener" style={{
                  background: T.night, padding: '14px 16px',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  fontFamily: T.mono, fontSize: 12, color: T.cream,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  textDecoration: 'none', fontWeight: 600,
                  transition: 'background .15s ease'
                }}
                onMouseEnter={(e) => e.currentTarget.style.background = T.night2}
                onMouseLeave={(e) => e.currentTarget.style.background = T.night}>
                  
                    <span>{m.name}</span>
                    <span style={{ color: accent }}>→</span>
                  </a>
                )}
              </div>
            </div>

            <div>
              <Kicker style={{ marginBottom: 12 }}>BÔNUS</Kicker>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.perks.map((p, i) =>
                <li key={i} style={{
                  display: 'flex', gap: 12, alignItems: 'flex-start',
                  fontFamily: T.mono, fontSize: 12, color: T.bone, lineHeight: 1.5,
                  letterSpacing: '0.02em'
                }}>
                    <span style={{ color: accent, fontWeight: 700, flexShrink: 0 }}>·</span>
                    <span>{p}</span>
                  </li>
                )}
              </ul>
            </div>
          </div>
        </div>
      </Container>
    </Section>);

}

// SVG mapa mockup — abstrato com pin (mantido como fallback, hoje não usado)
function MapMock({ accent }) {
  return (
    <svg viewBox="0 0 700 460" style={{ width: '100%', height: '100%', display: 'block', minHeight: 460 }} preserveAspectRatio="xMidYMid slice">
      <rect width="700" height="460" fill={T.night2} />
      {/* avenida principal — Nove de Julho diagonal */}
      <path d="M-20 380 L740 80" stroke={T.hairline} strokeWidth="22" fill="none" />
      <path d="M-20 380 L740 80" stroke="rgba(20, 8, 32, 0.30)" strokeWidth="20" fill="none" strokeDasharray="3 5" />
      {/* cross streets */}
      <path d="M100 460 L260 -10" stroke={T.hairline} strokeWidth="10" fill="none" />
      <path d="M280 460 L440 -10" stroke={T.hairline} strokeWidth="10" fill="none" />
      <path d="M460 460 L620 -10" stroke={T.hairline} strokeWidth="10" fill="none" />
      {/* parallel */}
      <path d="M-20 200 L720 200" stroke={T.hairline} strokeWidth="6" fill="none" opacity="0.5" />
      <path d="M-20 320 L720 320" stroke={T.hairline} strokeWidth="6" fill="none" opacity="0.5" />
      {/* blocks subtle */}
      {Array.from({ length: 20 }).map((_, i) => {
        const r = i % 4;
        const c = Math.floor(i / 4);
        return <rect key={i} x={20 + r * 150} y={20 + c * 80} width="120" height="60" fill="none" stroke={T.hairline} opacity="0.25" />;
      })}
      {/* Pin marker */}
      <g transform="translate(380, 220)">
        {/* radar pulses */}
        <circle r="40" fill={accent} fillOpacity="0.08" />
        <circle r="60" fill="none" stroke={accent} strokeWidth="1" strokeDasharray="3 4" opacity="0.5" />
        <circle r="90" fill="none" stroke={accent} strokeWidth="1" strokeDasharray="3 4" opacity="0.3" />
        {/* pin */}
        <path d="M0 -28 C 14 -28 22 -18 22 -8 C 22 4 0 24 0 24 C 0 24 -22 4 -22 -8 C -22 -18 -14 -28 0 -28 Z" fill={accent} stroke="none" />
        <circle r="6" cy="-10" fill={T.night} stroke="none" />
        <text x="14" y="34" fill={T.cream} fontSize="11" fontFamily="JetBrains Mono" letterSpacing="0.18em" fontWeight="700">9J · 3147</text>
      </g>
      {/* Metro stop */}
      <g transform="translate(180, 360)">
        <rect x="-12" y="-12" width="24" height="24" fill={T.cream} stroke="none" />
        <text x="-6" y="5" fill={T.night} fontSize="14" fontFamily="JetBrains Mono" fontWeight="700">M</text>
        <text x="18" y="6" fill={T.cream} fontSize="10" fontFamily="JetBrains Mono" letterSpacing="0.18em" opacity="0.7">TRIANON-MASP</text>
      </g>
    </svg>);

}

// ─────────────────────────────────────────────────────────────
// CTA Final
// ─────────────────────────────────────────────────────────────
function CTAFinal({ copy, accent, onOpenModal, waLink }) {
  const c = copy.cta;
  return (
    <Section id="agendar" py={110} bg={T.ink} fg={T.night}>
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 56, flexWrap: 'wrap', gap: 24 }}>
          <Kicker color="rgba(245, 239, 224, 0.6)">{c.kicker}</Kicker>
          <OnAir accent={accent} label="ESPERANDO REC" />
        </div>

        <Display size={72} color={T.night} style={{ marginBottom: 36, maxWidth: 1100 }}>
          {c.title1}<span style={{ color: accent, fontWeight: 500 }}>{c.title1Hi}</span>{c.title1Punct}
        </Display>

        <p style={{
          fontSize: 22, lineHeight: 1.5, color: 'rgba(245, 239, 224, 0.76)',
          margin: '0 0 56px', textWrap: 'pretty', maxWidth: 760
        }}>{c.lede}</p>

        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <button onClick={onOpenModal} style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            padding: '20px 32px',
            background: accent, color: T.ink,
            fontFamily: T.mono, fontSize: 13, fontWeight: 600,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            border: 'none', borderRadius: 4, cursor: 'pointer',
            transition: 'transform .15s ease'
          }}
          onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
          onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
            
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: T.ink, animation: 'pulse9j 1.6s ease-in-out infinite' }} />
            {c.primary}
          </button>
          <a href={waLink} target="_blank" rel="noopener" style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            padding: '20px 32px',
            background: 'transparent', color: T.night,
            border: `1px solid rgba(245, 239, 224, 0.28)`,
            fontFamily: T.mono, fontSize: 13, fontWeight: 600,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            borderRadius: 4, textDecoration: 'none',
            transition: 'border-color .15s ease, transform .15s ease'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = T.night;e.currentTarget.style.transform = 'translateY(-2px)';}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'rgba(245, 239, 224, 0.28)';e.currentTarget.style.transform = 'translateY(0)';}}>
            
            {c.secondary}
            <span style={{ color: accent }}>→</span>
          </a>
        </div>
      </Container>
    </Section>);

}

// ─────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────
function Footer({ copy, accent, waLink }) {
  const c = copy.footer;
  const navLinks = [
  ['#engenharia', copy.nav.eng],
  ['#cenario', copy.nav.cenario],
  ['#servicos', copy.nav.serv],
  ['#planos', copy.nav.plans],
  ['#duvidas', copy.nav.faq]];

  const segLinks = copy.segs.cards.map((c) => [c.link, c.name]);
  const socials = [
  ['https://instagram.com/', 'Instagram'],
  ['https://youtube.com/', 'YouTube'],
  ['https://linkedin.com/', 'LinkedIn']];


  return (
    <footer style={{ background: T.ink, color: T.night, padding: '80px 0 32px', borderTop: `1px solid ${T.hairline}` }}>
      <Container>
        {/* Top: huge logo + tagline */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56,
          paddingBottom: 64, borderBottom: `1px solid rgba(245, 239, 224, 0.14)`
        }}>
          <div>
            <Logo size={48} color={T.night} accent={accent} live />
            <div style={{
              marginTop: 36,
              fontFamily: T.sans, fontWeight: 300, fontSize: 36,
              letterSpacing: '-0.025em', lineHeight: 1.1,
              color: T.night, maxWidth: 460
            }}>{c.tagline}</div>
            <div style={{
              marginTop: 18,
              fontFamily: T.mono, fontSize: 11, color: 'rgba(245, 239, 224, 0.5)',
              letterSpacing: '0.18em', textTransform: 'uppercase',
              fontStyle: 'italic'
            }}>{c.tagEn}</div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            <FooterCol title={c.colNav} items={navLinks} accent={accent} />
            <FooterCol title={c.colSeg} items={segLinks} accent={accent} />
            <FooterCol title={c.colSocial} items={socials} accent={accent} external />
          </div>
        </div>

        {/* Bottom strip */}
        <div style={{
          paddingTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
          fontFamily: T.mono, fontSize: 11, color: 'rgba(245, 239, 224, 0.55)',
          letterSpacing: '0.18em', textTransform: 'uppercase'
        }}>
          <span>{c.copyright}</span>
          <span>{c.built}</span>
          <a heyebrow="#top" style={{
            color: 'rgba(245, 239, 224, 0.55)', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
            transition: 'color .15s ease'
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = T.night}
          onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(245, 239, 224, 0.55)'}>
            
            <span style={{ color: accent }}>↑</span> {c.back}
          </a>
        </div>
      </Container>
    </footer>);

}

function FooterCol({ title, items, accent, external }) {
  return (
    <div>
      <Kicker color="rgba(245, 239, 224, 0.5)" style={{ marginBottom: 18 }}>{title}</Kicker>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(([href, label], i) =>
        <li key={i}>
            <a href={href}
          target={external ? '_blank' : undefined}
          rel={external ? 'noopener' : undefined}
          style={{
            color: T.night, textDecoration: 'none',
            fontFamily: T.mono, fontSize: 12, letterSpacing: '0.04em',
            transition: 'color .15s ease'
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = accent}
          onMouseLeave={(e) => e.currentTarget.style.color = T.night}>
            {label}</a>
          </li>
        )}
      </ul>
    </div>);

}

Object.assign(window, { Depoimentos, Planos, FAQ, Localizacao, CTAFinal, Footer, MapMock, FooterCol });