// landing-rest.jsx — Recursos, Pricing, FAQ, FinalCTA, Footer + App

// ──────────────────────────────────────────────────────────────
// Recursos — features que dão personalidade à página
// ──────────────────────────────────────────────────────────────
function Recursos() {
  const features = [
    {
      eyebrow: '4 layouts',
      title: 'Troque o estilo quando quiser',
      body: 'Clássico, Bento, Catálogo ou Mural. Alterne entre os layouts a qualquer momento — seus links se reorganizam automaticamente, sem refazer nada.',
      visual: <PreviewLayouts />,
    },
    {
      eyebrow: 'Paletas',
      title: 'Identidade visual no seu controle',
      body: 'Use uma das paletas prontas ou monte a sua própria definindo fundo, superfície, texto e botões. As cores se aplicam em toda a página de forma consistente.',
      visual: <PreviewPalettes />,
    },
    {
      eyebrow: 'Imagens de fundo',
      title: 'Suba uma foto, ajuste e pronto',
      body: 'Adicione uma imagem de fundo personalizada e controle intensidade e desfoque para garantir legibilidade. Funciona em qualquer paleta.',
      visual: <PreviewBackground />,
    },
  ];
  return (
    <section id="recursos" style={{
      padding: '120px 0',
      background: 'var(--cream-2)',
    }}>
      <div className="wrap">
        <window.SectionHeader
          eyebrow="Recursos"
          title={<>Personalizável<br/><em className="serif" style={{ fontStyle: 'italic', color: 'var(--brown)' }}>do início ao fim.</em></>}
          sub="Sua página acompanha sua marca. Tudo o que você muda é refletido em tempo real no preview."
        />

        <div style={{
          display: 'flex', flexDirection: 'column',
          gap: 80, marginTop: 80,
        }}>
          {features.map((f, i) => (
            <div key={i} className="feature-row" style={{
              display: 'grid',
              gridTemplateColumns: i % 2 === 0 ? '1fr 1fr' : '1fr 1fr',
              gap: 60, alignItems: 'center',
              direction: i % 2 === 0 ? 'ltr' : 'rtl',
            }}>
              <div style={{ direction: 'ltr' }}>
                <div className="mono" style={{
                  fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase',
                  color: 'var(--copper)', fontWeight: 600,
                }}>{f.eyebrow}</div>
                <h3 className="serif" style={{
                  margin: '14px 0 18px', fontSize: 36, fontStyle: 'italic',
                  fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.1,
                  color: 'var(--ink)',
                }}>{f.title}</h3>
                <p style={{
                  margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)',
                  maxWidth: 440,
                }}>{f.body}</p>
              </div>
              <div style={{ direction: 'ltr', display: 'flex', justifyContent: 'center' }}>
                {f.visual}
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .feature-row { grid-template-columns: 1fr !important; direction: ltr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Recursos · visuals
// ──────────────────────────────────────────────────────────────
function PreviewLayouts() {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14,
      width: '100%', maxWidth: 380,
    }}>
      {[
        { name: 'Clássico', bg: '#f3eee4', el: <>
          <Dot bg="#1f1b14" /><Bar w={50} /><Bar w={70} h={3} dim />
          <Card3 />
          <Card3 />
          <Card3 />
        </> },
        { name: 'Bento', bg: '#f3eee4', el: <>
          <Dot bg="#1f1b14" /><Bar w={50} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, width: '100%' }}>
            <MiniCard />
            <MiniCard />
            <div style={{ gridColumn: '1/-1' }}><MiniCard tall accent /></div>
          </div>
        </> },
        { name: 'Catálogo', bg: '#f3eee4', el: <>
          <Dot bg="#1f1b14" /><Bar w={50} />
          <Product /><Product />
        </> },
        { name: 'Mural', bg: '#f3eee4', el: <>
          <Dot bg="#1f1b14" /><Bar w={50} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '20px 20px 20px', gap: 3, width: '100%' }}>
            <div style={{ background: '#c08962', borderRadius: 4, gridRow: '1/3' }} />
            <div style={{ background: '#1f1b14', borderRadius: 4 }} />
            <div style={{ background: '#5a3a1e', borderRadius: 4 }} />
            <div style={{ background: '#fff', borderRadius: 4, boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.08)' }} />
            <div style={{ background: '#ece2cc', borderRadius: 4 }} />
          </div>
        </> },
      ].map((s, i) => (
        <div key={i} style={{
          background: s.bg, borderRadius: 14, padding: 14,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
          boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.06), 0 4px 14px rgba(31,27,20,0.05)',
          minHeight: 160,
        }}>
          {s.el}
          <div className="mono" style={{
            marginTop: 'auto', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'var(--ink-2)', fontWeight: 600, paddingTop: 8,
          }}>{s.name}</div>
        </div>
      ))}
    </div>
  );
}
function Dot({ bg = '#1f1b14' }) { return <div style={{ width: 18, height: 18, borderRadius: '50%', background: bg }} />; }
function Bar({ w = 40, h = 4, dim = false }) {
  return <div style={{ width: `${w}%`, height: h, borderRadius: 2, background: dim ? 'rgba(31,27,20,0.25)' : 'rgba(31,27,20,0.7)' }} />;
}
function Card3() {
  return <div style={{ width: '100%', height: 14, borderRadius: 4, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.07)' }} />;
}
function MiniCard({ tall = false, accent = false }) {
  return <div style={{
    width: '100%', height: tall ? 22 : 18, borderRadius: 4,
    background: accent ? '#1f1b14' : '#fff',
    boxShadow: accent ? 'none' : 'inset 0 0 0 1px rgba(31,27,20,0.07)',
  }} />;
}
function Product() {
  return (
    <div style={{
      width: '100%', height: 22, borderRadius: 4,
      background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.07)',
      display: 'flex', alignItems: 'center', gap: 4, padding: 3,
    }}>
      <div style={{ width: 16, height: 16, borderRadius: 2, background: 'linear-gradient(135deg, #c08962, #5a3a1e)' }} />
      <div style={{ flex: 1, height: 3, borderRadius: 2, background: 'rgba(31,27,20,0.4)' }} />
      <div style={{ width: 16, height: 8, borderRadius: 2, background: '#1f1b14' }} />
    </div>
  );
}

function PreviewPalettes() {
  const palettes = [
    { name: 'Linho',  bg: '#f3eee4', surface: '#fff',     ink: '#1f1b14', accent: '#1f1b14' },
    { name: 'Noir',   bg: '#0e0e10', surface: '#19191d',  ink: '#f4f0e8', accent: '#f4f0e8' },
    { name: 'Fresh',  bg: '#eaf3ec', surface: '#fff',     ink: '#103024', accent: '#1d6b4a' },
    { name: 'Sol',    bg: '#fff1d6', surface: '#fff',     ink: '#2d1810', accent: '#c84a17' },
    { name: 'Céu',    bg: '#e6ecf5', surface: '#fff',     ink: '#0f1b3a', accent: '#3046b8' },
    { name: 'Custom', bg: '#ece2cc', surface: '#fdfaf0',  ink: '#5a3a1e', accent: '#c08962' },
  ];
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14,
      width: '100%', maxWidth: 380,
    }}>
      {palettes.map((p, i) => (
        <div key={i} style={{
          background: p.bg, borderRadius: 14, padding: 16,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
          boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.08), 0 4px 14px rgba(31,27,20,0.05)',
          minHeight: 110,
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: '50%',
            background: p.surface,
            boxShadow: `inset 0 0 0 1px ${p.ink}15`,
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', right: -2, bottom: -2,
              width: 12, height: 12, borderRadius: '50%',
              background: p.accent,
              boxShadow: `0 0 0 2px ${p.bg}`,
            }} />
          </div>
          <div className="mono" style={{
            fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: p.ink, fontWeight: 600, marginTop: 'auto',
          }}>{p.name}</div>
        </div>
      ))}
    </div>
  );
}

function PreviewBackground() {
  return (
    <div style={{
      width: '100%', maxWidth: 380,
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      {/* Big background mock */}
      <div style={{
        position: 'relative', borderRadius: 16, overflow: 'hidden',
        height: 200,
        background: 'linear-gradient(135deg, #c08962 0%, #5a3a1e 60%, #1f1b14 100%)',
        boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.1)',
      }}>
        {/* simulated image grain */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(circle at 30% 20%, rgba(253,250,240,0.18), transparent 50%), radial-gradient(circle at 70% 80%, rgba(13,13,13,0.4), transparent 60%)',
          filter: 'blur(2px)',
        }} />
        {/* center content mock */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center', gap: 8,
          padding: 24,
        }}>
          <div style={{ width: 40, height: 40, borderRadius: '50%', background: '#fdfaf0', opacity: 0.95 }} />
          <div style={{ width: 90, height: 4, background: '#fdfaf0', borderRadius: 2, opacity: 0.9 }} />
          <div style={{ width: 140, height: 3, background: '#fdfaf0', borderRadius: 2, opacity: 0.55 }} />
          <div style={{ width: 200, height: 22, background: 'rgba(253,250,240,0.95)', borderRadius: 6, marginTop: 6 }} />
          <div style={{ width: 200, height: 22, background: 'rgba(253,250,240,0.95)', borderRadius: 6 }} />
        </div>
      </div>

      {/* Mock controls */}
      <div style={{
        background: 'var(--cream)', borderRadius: 14, padding: 14,
        display: 'flex', flexDirection: 'column', gap: 12,
        boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.06)',
      }}>
        {[
          { label: 'Intensidade', value: 75, suffix: '%' },
          { label: 'Desfoque',    value: 24, suffix: 'px' },
        ].map((s, i) => (
          <div key={i}>
            <div style={{
              display: 'flex', justifyContent: 'space-between',
              fontSize: 11, fontWeight: 600, color: 'var(--ink-2)',
              marginBottom: 6,
            }}>
              <span>{s.label}</span>
              <span className="mono">{s.value}{s.suffix}</span>
            </div>
            <div style={{ position: 'relative', height: 4, borderRadius: 2, background: 'rgba(31,27,20,0.12)' }}>
              <div style={{ position: 'absolute', left: 0, top: 0, height: 4, borderRadius: 2, width: `${s.value}%`, background: 'var(--brown)' }} />
              <div style={{ position: 'absolute', left: `${s.value}%`, top: -5, width: 14, height: 14, borderRadius: '50%', background: 'var(--ink)', transform: 'translateX(-50%)' }} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Pricing
// ──────────────────────────────────────────────────────────────
function Pricing() {
  const plans = [
    {
      name: 'Anual',
      tag: 'melhor preço',
      price: 'R$ 4,90',
      priceSub: '/mês',
      billed: 'cobrado uma vez por ano (R$ 58,80)',
      sub: 'Economize 29% pagando anualmente.',
      cta: 'Começar 30 dias grátis',
      featured: true,
    },
    {
      name: 'Semestral',
      tag: 'flexível',
      price: 'R$ 6,90',
      priceSub: '/mês',
      billed: 'cobrado a cada 6 meses (R$ 41,40)',
      sub: 'Ideal para quem prefere um compromisso mais curto.',
      cta: 'Começar 30 dias grátis',
      featured: false,
    }
  ];

  const features = [
    'Endereço linko.business/seu-negocio',
    'Links, produtos e canais ilimitados',
    '4 layouts de página (Clássico, Bento, Catálogo, Mural)',
    'Paletas e imagens de fundo personalizáveis',
    'Estatísticas avançadas e funil de conversão',
  ];

  return (
    <section id="precos" style={{
      padding: '120px 0',
      background: 'var(--cream)',
    }}>
      <div className="wrap">
        <window.SectionHeader
          eyebrow="Planos"
          title={<>Um plano completo.<br/><em className="serif" style={{ fontStyle: 'italic', color: 'var(--brown)' }}>30 dias grátis.</em></>}
          sub="Todos os recursos incluídos desde o primeiro dia. (:"
        />
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 22,
          maxWidth: 860,
          marginTop: 64,
        }}>
          {plans.map(p => (
            <div key={p.name} style={{
              position: 'relative',
              background: p.featured ? 'var(--ink)' : 'var(--cream-2)',
              color: p.featured ? 'var(--soft)' : 'var(--ink)',
              borderRadius: 22,
              padding: 32,
              border: p.featured ? '1px solid rgba(192,137,98,0.45)' : '1px solid var(--hairline-light)',
              display: 'flex', flexDirection: 'column', gap: 20,
              boxShadow: p.featured ? '0 24px 60px rgba(13,13,13,0.22)' : 'none',
            }}>
              {p.featured && (
                <div className="mono" style={{
                  position: 'absolute', top: -10, left: 24,
                  background: 'var(--copper)', color: 'var(--ink)',
                  fontSize: 9.5, fontWeight: 700, letterSpacing: '0.18em',
                  textTransform: 'uppercase',
                  padding: '5px 10px', borderRadius: 6,
                }}>{p.tag}</div>
              )}

              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <h3 className="serif" style={{
                  margin: 0, fontSize: 28, fontStyle: 'italic', fontWeight: 400,
                  letterSpacing: '-0.01em',
                }}>{p.name}</h3>
                {!p.featured && (
                  <span className="mono" style={{
                    fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
                    color: 'rgba(13,13,13,0.45)',
                  }}>{p.tag}</span>
                )}
              </div>

              <div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                  <div style={{
                    fontFamily: 'Plus Jakarta Sans, sans-serif',
                    fontSize: 46, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1,
                  }}>{p.price}</div>
                  <div style={{
                    fontSize: 14, fontWeight: 500,
                    color: p.featured ? 'rgba(253,250,240,0.55)' : 'var(--ink-2)',
                  }}>{p.priceSub}</div>
                </div>
                <div className="mono" style={{
                  fontSize: 11, marginTop: 8,
                  color: p.featured ? 'rgba(253,250,240,0.5)' : 'var(--ink-3)',
                }}>{p.billed}</div>
              </div>

              <div style={{
                fontSize: 13.5, lineHeight: 1.5,
                color: p.featured ? 'rgba(253,250,240,0.65)' : 'var(--ink-2)',
              }}>{p.sub}</div>

              {/* 30-day trial chip */}
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8, alignSelf: 'flex-start',
                padding: '6px 12px', borderRadius: 999,
                background: p.featured ? 'rgba(192,137,98,0.18)' : 'rgba(192,137,98,0.14)',
                border: `1px solid ${p.featured ? 'rgba(192,137,98,0.4)' : 'rgba(192,137,98,0.3)'}`,
              }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--copper)' }} />
                <span style={{
                  fontSize: 12, fontWeight: 600,
                  color: p.featured ? '#e9c9a8' : 'var(--copper-deep)',
                }}>30 dias grátis, depois {p.price}{p.priceSub}</span>
              </div>

              <div style={{
                height: 1,
                background: p.featured ? 'var(--hairline-dark)' : 'var(--hairline-light)',
              }} />

              <ul style={{
                margin: 0, padding: 0, listStyle: 'none',
                display: 'flex', flexDirection: 'column', gap: 12,
                fontSize: 14,
                color: p.featured ? 'rgba(253,250,240,0.85)' : 'var(--ink-2)',
              }}>
                {features.map((f, i) => (
                  <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ marginTop: 3, flexShrink: 0 }}>
                      <path d="M3 8.5L6.5 12L13 4.5" stroke="var(--copper)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>

              <a href="/login.html?tab=register" style={{
                marginTop: 'auto',
                padding: '14px 22px', borderRadius: 999,
                background: p.featured ? 'var(--copper)' : 'var(--ink)',
                color: p.featured ? 'var(--ink)' : 'var(--soft)',
                fontSize: 14, fontWeight: 700,
                display: 'block', textAlign: 'center',
              }}>{p.cta} →</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// FAQ
// ──────────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    {
      q: 'Preciso de conhecimento técnico para usar?',
      a: 'Não. O Linko é um editor visual completo — você escreve, arrasta e escolhe a paleta. Em poucos minutos a sua página está publicada e pronta para ser compartilhada.',
    },
    {
      q: 'Posso alternar entre os layouts depois de publicar?',
      a: 'Sim, a qualquer momento. Você troca entre Clássico, Bento, Catálogo e Mural sem perder conteúdo — seus links, produtos e canais são reorganizados automaticamente no novo layout.',
    },
    {
      q: 'Existe limite de links ou de produtos?',
      a: 'Não. Não há limite de links, produtos ou canais em nenhum momento. Todos os recursos do Linko estão incluídos no plano, sem cobranças adicionais por uso.',
    },
    {
      q: 'Quanto tempo até minha página estar no ar?',
      a: 'É imediatado. Assim que você concluir as configurações da sua página e clicar em publicar, ela estará disponível.',
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{
      padding: '120px 0',
      background: 'var(--cream-2)',
    }}>
      <div className="wrap faq-wrap" style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1.5fr',
        gap: 80, alignItems: 'flex-start',
      }}>
        <div>
          <window.SectionHeader
            eyebrow="Perguntas frequentes"
            title={<>Quase tudo<br/><em className="serif" style={{ fontStyle: 'italic', color: 'var(--brown)' }}>respondido.</em></>}
          />
          <div style={{ marginTop: 26, fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6 }}>
            Outras dúvidas? Escreva para{' '}
            <a href="mailto:contato@linko.business" style={{
              color: 'var(--brown)', borderBottom: '1px solid var(--copper)',
            }}>contato@linko.business</a>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {items.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: '1px solid var(--hairline-light)',
                ...(i === items.length - 1 ? { borderBottom: '1px solid var(--hairline-light)' } : {}),
              }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%',
                    padding: '22px 0',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    gap: 16,
                    fontSize: 17, fontWeight: 600, color: 'var(--ink)',
                    textAlign: 'left',
                    fontFamily: 'Plus Jakarta Sans, sans-serif',
                  }}
                >
                  <span>{item.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: '50%',
                    background: isOpen ? 'var(--ink)' : 'transparent',
                    color: isOpen ? 'var(--soft)' : 'var(--ink)',
                    border: isOpen ? 'none' : '1px solid var(--hairline-light)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 18, fontWeight: 400, flexShrink: 0,
                    transition: 'all 160ms',
                  }}>{isOpen ? '−' : '+'}</span>
                </button>
                {isOpen && (
                  <div style={{
                    paddingBottom: 22,
                    fontSize: 14.5, lineHeight: 1.65, color: 'var(--ink-2)',
                    maxWidth: 580,
                  }}>{item.a}</div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .faq-wrap { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// CTA final
// ──────────────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section id="cta-final" style={{
      padding: '120px 0',
      background: 'linear-gradient(135deg, #c08962 0%, #8a5320 55%, #5a3a1e 100%)',
      color: '#fdfaf0',
      textAlign: 'center',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 0%, rgba(253,250,240,0.18), transparent 55%)',
        pointerEvents: 'none',
      }} />
      <div className="wrap" style={{ position: 'relative' }}>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
          color: 'rgba(253,250,240,0.8)', marginBottom: 24,
        }}>30 dias grátis</div>
        <h2 className="serif" style={{
          margin: 0, fontStyle: 'italic',
          fontSize: 'clamp(38px, 5.6vw, 72px)',
          lineHeight: 1.05, letterSpacing: '-0.02em', fontWeight: 400,
          color: '#fdfaf0',
        }}>
          Profissionalize sua presença digital hoje.
        </h2>
        <p style={{
          margin: '24px auto 40px', maxWidth: 520,
          fontSize: 16, lineHeight: 1.6,
          color: 'rgba(253,250,240,0.85)',
        }}>
          Publique sua página em linko.business em menos de cinco minutos e experimente todos os recursos por 30 dias, sem compromisso.
        </p>
        <a href="/login.html?tab=register" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '16px 32px', borderRadius: 999,
          background: '#0d0d0d', color: '#fdfaf0',
          fontSize: 15, fontWeight: 700,
        }}>
          Começar 30 dias grátis →
        </a>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Footer
// ──────────────────────────────────────────────────────────────
function Footer() {
  const cols = [
    { title: 'Produto',  links: ['Layouts', 'Recursos', 'Preços', 'Novidades'] },
    { title: 'Empresa',  links: ['Sobre', 'Blog', 'Contato', 'Imprensa'] },
    { title: 'Suporte',  links: ['Central de ajuda', 'Documentação', 'Status', 'Comunidade'] },
    { title: 'Legal',    links: ['Termos de uso', 'Privacidade', 'Cookies'] },
  ];
  return (
    <footer style={{
      background: 'var(--ink)',
      color: 'rgba(253,250,240,0.7)',
      padding: '60px 0 40px',
      borderTop: '1px solid var(--hairline-dark)',
    }}>
      <div className="wrap">
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr repeat(4, 1fr)',
          gap: 40,
        }}>
          <div>
            <window.Wordmark size={28} light tagline />
            <p style={{
              marginTop: 22, fontSize: 13.5, lineHeight: 1.6,
              color: 'rgba(253,250,240,0.55)', maxWidth: 260,
            }}>
              A página de links profissional para criadores, negócios e marcas que precisam de uma única porta de entrada.
            </p>
          </div>
          {cols.map(c => (
            <div key={c.title}>
              <div className="mono" style={{
                fontSize: 10.5, letterSpacing: '0.2em', textTransform: 'uppercase',
                color: 'var(--copper)', marginBottom: 18,
              }}>{c.title}</div>
              <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.links.map(l => (
                  <li key={l}><a href="#" style={{ fontSize: 13.5 }}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 60,
          paddingTop: 28,
          borderTop: '1px solid var(--hairline-dark)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 16,
          fontSize: 12, color: 'rgba(253,250,240,0.5)',
        }}>
          <span className="mono">© 2026 Linko · Todos os direitos reservados</span>
          <span className="mono" style={{ letterSpacing: '0.16em', textTransform: 'uppercase' }}>
            by <span style={{ color: 'var(--copper)' }}>[</span>souls4tech<span style={{ color: 'var(--copper)' }}>]</span>
          </span>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 520px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

// ──────────────────────────────────────────────────────────────
// App
// ──────────────────────────────────────────────────────────────
function App() {
  return (
    <main>
      <window.Hero />
      <window.Steps />
      <Recursos />
      <Pricing />
      <FAQ />
      <FinalCTA />
      <Footer />
    </main>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);