// LinksPage.jsx — Paulo Vaz
// Paleta: Burnt Coffee (#34150f), Champagne (#EACEAA), amarelo apoio (#EEE92E), Balsâmico (#150C0C)
// Tipografia: Helvetica World (Helvetica) + Argent (Fraunces como stand-in editorial)

const COFFEE   = '#34150f'; // primária
const CHAMPAGNE= '#faf8f5'; // secundária — off-white quente
const YELLOW   = '#EEE92E'; // acento seletivo
const BALSAMIC = '#150C0C'; // apoio escuro
const CHAMP_SOFT = '#faf8f5'; // off-white

const HELV   = '"Helvetica Neue", Helvetica, Arial, sans-serif';
const EDITOR = '"Fraunces", "Times New Roman", Georgia, serif';

// ─────────────────────────────────────────────────────────────
// Conteúdo — banners principais
// ─────────────────────────────────────────────────────────────
const LINKS = [
  {
    title: (<><b>Kit</b> de <em>Mindfulness</em> <b>Clínico</b></>),
    plainTitle: 'Kit de Mindfulness Clínico',
    desc: 'Aulas e materiais para você começar a aplicar Mindfulness Clínico com segurança. Aprenda quando propor, como conduzir, quando adaptar e muito mais.',
    kicker: 'Comece sua jornada com Mindfulness Clínico',
    href: 'https://opaulovaz.com.br/kmc-m',
  },
  {
    title: (<><em>Supervisão</em> <b>Clínica</b></>),
    plainTitle: 'Supervisão Clínica',
    desc: 'Supervisão Individual para psicólogos que querem aprofundar sua prática.',
    kicker: 'Atendimento',
    href: 'https://docs.google.com/forms/d/e/1FAIpQLSeNJVN8QTQ4ejqHcsDj-t2IME8UQeSvdWLNzQJlqvjdqsBmkw/viewform?usp=header',
  },
  {
    title: (<>Treinamento de <em>Regulação Emocional</em> com <b>Mindfulness</b></>),
    plainTitle: 'Treinamento de Regulação Emocional com Mindfulness (MBCT)',
    desc: 'Programa de 8 semanas em MBCT — terapia cognitiva baseada em mindfulness.',
    kicker: 'Programa · MBCT',
    href: 'https://opaulovaz.com.br/treinamento8semanas/',
  },
  {
    title: (<><em>Fragmentos</em> do <b>Agora</b></>),
    plainTitle: 'Fragmentos do Agora',
    desc: 'Newsletter gratuita — notas breves sobre atenção, prática e clínica.',
    kicker: 'Newsletter',
    href: 'https://concentrando.substack.com/',
  },
  {
    title: (<><em>Meditações</em> no <b>Insight Timer</b></>),
    plainTitle: 'Meditações — Insight Timer',
    desc: 'Práticas guiadas gratuitas para começar, sustentar e aprofundar a atenção.',
    kicker: 'Meditações Guiadas',
    href: 'https://insighttimer.com/concentrando',
  },
  {
    title: (<>Canal no <b>YouTube</b></>),
    plainTitle: 'YouTube',
    desc: 'Conversas, práticas e aulas abertas sobre mindfulness clínico.',
    kicker: 'Aulas completas',
    href: 'https://www.youtube.com/@opaulovazz',
  },
];

// Botões sociais (compactos, pill row)
const SOCIAL = [
  { name: 'Instagram', href: 'https://www.instagram.com/opaulo.vaz/' },
  { name: 'YouTube',   href: 'https://www.youtube.com/@opaulovazz' },
  { name: 'Spotify',   href: 'https://open.spotify.com/show/1dNy4H2HnMNCYy3NRVULFX' },
  { name: 'Substack',  href: 'https://concentrando.substack.com/' },
];

// Credenciais / posicionamento
const CREDENTIALS = [
  <>Formação em <b>MBCT</b> <em>(Mindfulness-Based Cognitive Therapy)</em></>,
  <><b>Certified Mindfulness Meditation Teacher</b> <em>(CMMT)</em></>,
  <>Certificado em <b>Trauma-Sensitive Mindfulness</b><br/><span style={{opacity:0.75, fontSize:'0.92em'}}>Treinamento internacional reconhecido pela <em>IMMA</em></span></>,
  <>Ensino orientado pelos critérios internacionais do <b>MBI-TAC</b><br/><span style={{opacity:0.75, fontSize:'0.92em'}}><em>(Mindfulness-Based Interventions Teaching Assessment Criteria)</em></span></>,
];

// ─────────────────────────────────────────────────────────────
// Arrow
// ─────────────────────────────────────────────────────────────
function Arrow({ size = 18, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14" />
      <path d="M13 6l6 6-6 6" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Marquee
// ─────────────────────────────────────────────────────────────
function Marquee({ items, speed = 40, color = CHAMPAGNE, bg = 'transparent', border = false, italic = true, size = 13, accent = false }) {
  const line = items.join('   ·   ');
  return (
    <div style={{
      width: '100%', overflow: 'hidden', background: bg,
      borderTop: border ? `1px solid ${color}22` : 'none',
      borderBottom: border ? `1px solid ${color}22` : 'none',
      padding: '10px 0',
    }}>
      <div style={{
        display: 'flex', whiteSpace: 'nowrap',
        animation: `links-marquee ${speed}s linear infinite`,
        fontFamily: HELV,
        fontSize: size, letterSpacing: '0.2em',
        color, textTransform: 'uppercase',
        fontStyle: italic ? 'italic' : 'normal',
        fontWeight: 400,
      }}>
        {Array.from({ length: 6 }).map((_, i) => (
          <span key={i} style={{ paddingRight: 40 }}>
            {items.map((t, j) => (
              <React.Fragment key={j}>
                <span style={{ fontFamily: EDITOR, fontStyle: 'italic', fontWeight: 400 }}>{t}</span>
                {j < items.length - 1 && <span style={{ margin: '0 14px', fontFamily: HELV, fontStyle: 'normal', opacity: 0.7 }}>✦</span>}
              </React.Fragment>
            ))}
            <span style={{ margin: '0 14px', fontFamily: HELV, fontStyle: 'normal', opacity: 0.7 }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LinkCard — creme Champagne sobre coffee
// ─────────────────────────────────────────────────────────────
function LinkCard({ link, index, size = 'md', variant = 'cream' }) {
  const [hover, setHover] = React.useState(false);
  const pad = size === 'sm' ? '20px 22px' : '26px 28px';
  const titleSize = size === 'sm' ? 24 : 30;

  const isDark = variant === 'dark';
  const bg = isDark ? BALSAMIC : CHAMPAGNE;
  const fg = isDark ? CHAMPAGNE : COFFEE;
  const bdr = isDark ? `1px solid ${CHAMPAGNE}22` : `1px solid ${COFFEE}14`;

  return (
    <a
      href={link.href} target="_blank" rel="noopener"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'block', position: 'relative',
        padding: pad, borderRadius: 4,
        background: bg, color: fg,
        textDecoration: 'none',
        border: bdr,
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        boxShadow: hover
          ? '0 14px 30px rgba(0,0,0,0.28)'
          : '0 4px 14px rgba(0,0,0,0.18)',
        transition: 'transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s',
        overflow: 'hidden',
      }}>
      {/* top row: kicker + arrow */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 14, gap: 16,
      }}>
        <div style={{
          fontFamily: HELV,
          fontSize: 10, letterSpacing: '0.26em', textTransform: 'uppercase',
          color: fg, opacity: 0.6, fontWeight: 500,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ fontFamily: EDITOR, fontStyle: 'italic', fontWeight: 400, letterSpacing: '0.05em', fontSize: 12, opacity: 0.85 }}>
            {String(index + 1).padStart(2, '0')}
          </span>
          <span style={{ width: 18, height: 1, background: fg, opacity: 0.4 }} />
          <span>{link.kicker}</span>
        </div>
        <div style={{
          transform: hover ? 'translateX(4px)' : 'translateX(0)',
          transition: 'transform .25s cubic-bezier(.2,.7,.3,1)',
          display: 'flex', alignItems: 'center',
        }}>
          <Arrow size={20} color={fg} />
        </div>
      </div>

      {/* title */}
      <div style={{
        fontFamily: HELV,
        fontSize: titleSize, lineHeight: 1.02,
        letterSpacing: '-0.025em', color: fg,
        fontWeight: 400, marginBottom: link.desc ? 10 : 0,
      }}>
        {renderEditorialTitle(link.title)}
      </div>

      {link.desc && <div style={{
        fontFamily: HELV,
        fontSize: 13, lineHeight: 1.45,
        color: fg, opacity: 0.72, fontWeight: 400,
        maxWidth: '92%',
      }}>
        {link.desc}
      </div>}
    </a>
  );
}

// Helper: replaces <em> children to use editorial serif
// (title is already JSX — re-map ems to use font EDITOR)
function renderEditorialTitle(title) {
  // wrap title to override em styling
  return <span style={{
    '--em-font': EDITOR,
  }} className="pv-title">{title}</span>;
}

// ─────────────────────────────────────────────────────────────
// Credentials
// ─────────────────────────────────────────────────────────────
function Credentials({ align = 'center', size = 14, color = CHAMPAGNE }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 10,
      alignItems: align === 'center' ? 'center' : 'flex-start',
      textAlign: align,
      fontFamily: HELV,
      fontSize: size, lineHeight: 1.5,
      color, opacity: 0.95, fontWeight: 300,
      maxWidth: 420,
    }}>
      {CREDENTIALS.map((c, i) => (
        <div key={i}>{c}</div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Social
// ─────────────────────────────────────────────────────────────
function SocialIcon({ name, size = 18, color = 'currentColor' }) {
  const s = size;
  if (name === 'Instagram') {
    return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="5" />
        <circle cx="12" cy="12" r="4" />
        <circle cx="17.5" cy="6.5" r="0.6" fill={color} />
      </svg>
    );
  }
  if (name === 'YouTube') {
    return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <rect x="2" y="5" width="20" height="14" rx="3.5" />
        <path d="M10 9.2v5.6l5-2.8z" fill={color} stroke="none" />
      </svg>
    );
  }
  if (name === 'Spotify') {
    return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="9.3" />
        <path d="M7.5 9.5c3-0.9 6.5-0.6 9.3 0.9" />
        <path d="M8 12.6c2.4-0.7 5.2-0.5 7.5 0.7" />
        <path d="M8.6 15.5c1.9-0.5 4-0.4 5.8 0.5" />
      </svg>
    );
  }
  if (name === 'Substack') {
    return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 6h16" />
        <path d="M4 10.3h16" />
        <path d="M4 14.6h16v6l-8-4-8 4z" />
      </svg>
    );
  }
  return null;
}

function SocialButton({ name, href, color = CHAMPAGNE }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={href} target="_blank" rel="noopener"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      aria-label={name}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '11px 18px', borderRadius: 999,
        border: `1px solid ${color}${hover ? '80' : '40'}`,
        color, textDecoration: 'none',
        background: hover ? `${color}14` : 'transparent',
        transition: 'background .2s, border-color .2s, transform .2s',
        transform: hover ? 'translateY(-1px)' : 'translateY(0)',
        fontFamily: HELV,
        fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
        fontWeight: 500,
      }}>
      <SocialIcon name={name} size={15} color={color} />
      <span>{name}</span>
    </a>
  );
}

function SocialRow({ color = CHAMPAGNE, align = 'flex-start' }) {
  return (
    <div style={{
      display: 'flex', flexWrap: 'wrap', gap: 10,
      justifyContent: align,
    }}>
      {SOCIAL.map((s, i) => (
        <SocialButton key={i} name={s.name} href={s.href} color={color} />
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Section label
// ─────────────────────────────────────────────────────────────
function SectionLabel({ kicker, label, color = CHAMPAGNE }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      fontFamily: HELV,
      fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
      color, opacity: 0.72, fontWeight: 500,
    }}>
      <div style={{ width: 28, height: 1, background: color, opacity: 0.5 }} />
      <span>
        <span style={{ fontFamily: EDITOR, fontStyle: 'italic', fontWeight: 400, letterSpacing: '0.04em', fontSize: 14, textTransform: 'none' }}>
          {kicker}
        </span>
        <span style={{ margin: '0 10px', opacity: 0.5 }}>—</span>
        {label}
      </span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Global style injection for em -> editorial
// ─────────────────────────────────────────────────────────────
function GlobalStyles() {
  React.useEffect(() => {
    const s = document.createElement('style');
    s.textContent = `
      .pv-title em, .pv-editorial em { font-family: ${EDITOR}; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
      .pv-editorial b { font-weight: 700; }
      .pv-title b { font-weight: 700; }
    `;
    document.head.appendChild(s);
    return () => s.remove();
  }, []);
  return null;
}

// ─────────────────────────────────────────────────────────────
// MOBILE
// ─────────────────────────────────────────────────────────────
function MobileLinksPage() {
  return (
    <div style={{
      width: '100%', minHeight: '100vh',
      background: COFFEE, color: CHAMPAGNE,
      fontFamily: HELV,
      overflow: 'hidden', position: 'relative',
    }}>
      <GlobalStyles />

      {/* Hero — foto editorial com nome sobreposto */}
      <div style={{ position: 'relative', width: '100%', padding: '24px 18px 0', boxSizing: 'border-box' }}>
        <div style={{
          position: 'relative', width: '100%', aspectRatio: '3/4',
          borderRadius: 4, overflow: 'hidden',
          boxShadow: '0 20px 44px rgba(0,0,0,0.45)',
        }}>
          <img src="assets/paulo.webp" alt="Paulo Vaz"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              filter: 'saturate(0.9) contrast(1.02)' }} />
          {/* overlay quente */}
          <div style={{
            position: 'absolute', inset: 0,
            background: `linear-gradient(180deg, ${COFFEE}20 0%, transparent 35%, ${COFFEE}ee 100%)`,
          }} />
          {/* frame caption top */}
          <div style={{
            position: 'absolute', top: 14, left: 14, right: 14,
            display: 'flex', justifyContent: 'space-between',
            fontSize: 10, letterSpacing: '0.26em', textTransform: 'uppercase',
            color: CHAMPAGNE, opacity: 0.9, fontWeight: 400,
          }}>
            <span style={{ fontFamily: HELV, letterSpacing: '0.22em', textTransform: 'uppercase', fontSize: 10 }}>CRP <span style={{ margin: '0 4px', opacity: 0.5 }}>—</span> 06/206437</span>
            <span>@opaulo.vaz</span>
          </div>
          {/* overlay name */}
          <div style={{
            position: 'absolute', left: 16, right: 16, bottom: 16,
            color: CHAMPAGNE,
          }}>
            <div style={{
              fontFamily: HELV,
              fontSize: 40, lineHeight: 0.94, letterSpacing: '-0.03em',
              fontWeight: 400,
            }}>
              <span style={{ fontWeight: 400 }}>Paulo</span>{' '}
              <span style={{ fontWeight: 700 }}>Vaz</span>
            </div>
          </div>
        </div>
      </div>

      {/* Tagline editorial */}
      <div style={{ padding: '28px 22px 20px' }} className="pv-editorial">
        <div style={{
          fontSize: 30, lineHeight: 1.02, letterSpacing: '-0.025em',
          color: CHAMPAGNE, fontWeight: 400,
        }}>
          <b style={{ fontWeight: 700 }}>Atenção Plena</b>
          <span>, </span>
          <em style={{ fontFamily: EDITOR, fontStyle: 'italic' }}>Segurança</em>
          <span> e </span>
          <b style={{ fontWeight: 700 }}>Direção clínica</b>
          <span style={{ color: YELLOW }}>.</span>
        </div>
      </div>

      {/* Credentials */}
      <div style={{ padding: '0 22px 22px', display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }} className="pv-editorial">
        <Credentials align="left" size={13} />
      </div>

      {/* Social row — antes dos cards para dar respiro */}
      <div style={{ padding: '0 18px 22px' }}>
        <SocialRow color={CHAMPAGNE} align="flex-start" />
      </div>

      {/* Section label */}
      <div style={{ padding: '6px 22px 14px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14,
          fontFamily: HELV,
          fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
          color: CHAMPAGNE, opacity: 0.72, fontWeight: 500,
        }}>
          <div style={{ width: 28, height: 1, background: CHAMPAGNE, opacity: 0.5 }} />
          <span>
            <span style={{ fontFamily: EDITOR, fontStyle: 'italic', fontWeight: 400, letterSpacing: '0.04em', fontSize: 14, textTransform: 'none' }}>
              Conheça
            </span>
            <span style={{ marginLeft: 8 }}>os caminhos</span>
          </span>
        </div>
      </div>

      {/* Links */}
      <div style={{ padding: '2px 18px 24px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {LINKS.map((l, i) => <LinkCard key={i} link={l} index={i} size="sm" />)}
      </div>

      <div style={{ borderTop: `1px solid ${CHAMPAGNE}22`, marginTop: 8 }} />

      {/* Footer */}
      <div style={{
        padding: '22px 22px 40px', textAlign: 'center',
        fontSize: 11, opacity: 0.7, color: CHAMPAGNE, fontWeight: 300,
        lineHeight: 1.7,
      }} className="pv-editorial">
        <div>Paulo Vaz</div>
        <div>© Todos os direitos reservados <em style={{ fontFamily: EDITOR, fontStyle: 'italic' }}>2026</em>.</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DESKTOP
// ─────────────────────────────────────────────────────────────
function DesktopLinksPage() {
  return (
    <div style={{
      width: '100%', minHeight: '100vh',
      background: COFFEE, color: CHAMPAGNE,
      fontFamily: HELV,
      position: 'relative', overflow: 'hidden',
    }}>
      <GlobalStyles />

      {/* Main split */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1.05fr 1fr',
        gap: 56, padding: '60px 72px 56px',
        alignItems: 'start',
        maxWidth: 1480, margin: '0 auto',
      }}>
        {/* LEFT — editorial photo + name + tagline */}
        <div style={{ position: 'sticky', top: 40, display: 'flex', flexDirection: 'column', gap: 28 }}>
          {/* Kicker */}
          <div style={{
            fontFamily: HELV,
            fontSize: 12, letterSpacing: '0.3em', textTransform: 'uppercase',
            color: CHAMPAGNE, opacity: 0.85, fontWeight: 400,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <span style={{ fontFamily: EDITOR, fontStyle: 'italic', fontWeight: 400, letterSpacing: '0.06em', textTransform: 'none', fontSize: 16 }}>
              psicólogo
            </span>
            <span style={{ width: 22, height: 1, background: CHAMPAGNE, opacity: 0.5 }} />
            <span>instrutor de mindfulness</span>
          </div>

          {/* Big name */}
          <div style={{
            fontFamily: HELV,
            fontSize: 108, lineHeight: 0.9, letterSpacing: '-0.04em',
            color: CHAMPAGNE, fontWeight: 400, marginBottom: 4,
          }}>
            <span style={{ fontWeight: 400 }}>Paulo</span>
            <br />
            <span style={{ fontWeight: 700 }}>Vaz</span>
          </div>

          {/* Photo */}
          <div style={{
            position: 'relative', width: '100%', maxWidth: 480,
            aspectRatio: '3/4', borderRadius: 4, overflow: 'hidden',
            boxShadow: '0 26px 58px rgba(0,0,0,0.42)',
          }}>
            <img src="assets/paulo.webp" alt="Paulo Vaz"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                filter: 'saturate(0.9) contrast(1.02)' }} />
            <div style={{
              position: 'absolute', inset: 0,
              background: `linear-gradient(180deg, ${COFFEE}22 0%, transparent 40%, ${COFFEE}c8 100%)`,
            }} />
            {/* frame caption */}
            <div style={{
              position: 'absolute', left: 16, right: 16, bottom: 14,
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
              color: CHAMPAGNE,
            }}>
              <div style={{
                fontSize: 10, letterSpacing: '0.26em', textTransform: 'uppercase',
                opacity: 0.9, fontWeight: 400, fontFamily: HELV,
              }}>
                <span style={{ fontFamily: EDITOR, fontStyle: 'italic', letterSpacing: '0.06em', textTransform: 'none', fontSize: 13 }}>CRP</span>
                <span style={{ margin: '0 8px', opacity: 0.5 }}>—</span>
                <span>06/206437</span>
              </div>
              <div style={{
                fontSize: 10, letterSpacing: '0.26em', textTransform: 'uppercase',
                opacity: 0.9, fontWeight: 400,
              }}>
                @opaulo.vaz
              </div>
            </div>
          </div>

          {/* Tagline editorial */}
          <div style={{
            fontSize: 36, lineHeight: 1.04, letterSpacing: '-0.025em',
            color: CHAMPAGNE, fontWeight: 400, maxWidth: 480, marginTop: 8,
          }} className="pv-editorial">
            <b style={{ fontWeight: 700 }}>Atenção Plena</b>
            <span>, </span>
            <em style={{ fontFamily: EDITOR, fontStyle: 'italic' }}>Segurança</em>
            <span> e </span>
            <b style={{ fontWeight: 700 }}>Direção clínica</b>
            <span style={{ color: YELLOW }}>.</span>
          </div>
        </div>

        {/* RIGHT — credentials + links */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36, paddingTop: 44 }}>
          <SectionLabel kicker="sobre" label="apresentação" />

          <div style={{
            fontSize: 17, lineHeight: 1.6, color: CHAMPAGNE, opacity: 0.95,
            maxWidth: 480, fontWeight: 300, fontFamily: HELV,
          }} className="pv-editorial">
            {CREDENTIALS.map((c, i) => (
              <div key={i} style={{ marginBottom: 12 }}>{c}</div>
            ))}
          </div>

          <SocialRow color={CHAMPAGNE} />

          <div style={{ height: 1, background: CHAMPAGNE, opacity: 0.18, margin: '4px 0' }} />

          <div style={{
            display: 'flex', alignItems: 'center', gap: 14,
            fontFamily: HELV,
            fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: CHAMPAGNE, opacity: 0.72, fontWeight: 500,
          }}>
            <div style={{ width: 28, height: 1, background: CHAMPAGNE, opacity: 0.5 }} />
            <span>
              <span style={{ fontFamily: EDITOR, fontStyle: 'italic', fontWeight: 400, letterSpacing: '0.04em', fontSize: 14, textTransform: 'none' }}>
                Conheça
              </span>
              <span style={{ marginLeft: 8 }}>os caminhos</span>
            </span>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {LINKS.map((l, i) => <LinkCard key={i} link={l} index={i} size="md" />)}
          </div>
        </div>
      </div>

      {/* Big editorial footer quote */}
      <div style={{
        padding: '70px 72px 50px',
        borderTop: `1px solid ${CHAMPAGNE}20`,
        maxWidth: 1480, margin: '0 auto',
      }}>
        <div style={{
          fontSize: 76, lineHeight: 0.96, letterSpacing: '-0.035em',
          color: CHAMPAGNE, fontWeight: 400, maxWidth: 1080,
        }} className="pv-editorial">
          <em style={{ fontFamily: EDITOR, fontStyle: 'italic', fontWeight: 400 }}>atenção</em>
          <span>, </span>
          <b style={{ fontWeight: 700 }}>prática</b>
          <br />
          <span>&amp; </span>
          <em style={{ fontFamily: EDITOR, fontStyle: 'italic', fontWeight: 400 }}>clínica</em>
          <span> em </span>
          <b style={{ fontWeight: 700 }}>mindfulness</b>
          <span style={{ color: YELLOW }}>.</span>
        </div>
      </div>

      <div style={{ borderTop: `1px solid ${CHAMPAGNE}20`, maxWidth: 1480, margin: '0 auto' }} />

      {/* Footer */}
      <div style={{
        padding: '28px 72px 44px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 12, color: CHAMPAGNE, opacity: 0.75, fontWeight: 300,
        maxWidth: 1480, margin: '0 auto',
      }} className="pv-editorial">
        <div>Paulo Vaz · CRP 06/206437</div>
        <div>© Todos os direitos reservados <em style={{ fontFamily: EDITOR, fontStyle: 'italic' }}>2026</em>.</div>
      </div>
    </div>
  );
}

// Export to window
Object.assign(window, {
  MobileLinksPage, DesktopLinksPage,
  LinkCard, Credentials, Marquee, Arrow,
  SocialIcon, SocialButton, SocialRow, SectionLabel, GlobalStyles,
  PV_COLORS: { COFFEE, CHAMPAGNE, YELLOW, BALSAMIC, CHAMP_SOFT },
});
