// LinksPage.jsx — Shared page content. Renders both mobile & desktop variants.
// Mobile: single column, cards stacked. Desktop: split — photo left, content right.

const RED = '#710014';
const CREAM = '#f2f1ed';
const PEACH = '#eee9e2';
const RED_DEEP = '#5a0010';
const RED_SOFT = '#8a1a2e';

// Links content
const LINKS = [
  {
    title: (<><em>Mapa</em> de <b>Sessão</b></>),
    plainTitle: 'Mapa de Sessão',
    desc: 'Conduza sessões em ACT com mais clareza, sem depender de improviso.',
    kicker: 'Material',
    href: 'https://ingrydsimoes.com.br/mapa-de-sessao-act-v2/',
  },
  {
    title: (<><em>Supervisão</em> <b>Individual</b></>),
    plainTitle: 'Supervisão Individual',
    desc: 'Supervisão clínica 1:1 em Terapia de Aceitação e Compromisso.',
    kicker: 'Atendimento',
    href: 'https://docs.google.com/forms/d/e/1FAIpQLSfWXsLWJFTHvqu8F0YNirtSHs6z4j7krOX6xbNAOhIgnst8gQ/viewform',
  },
  {
    title: (<>Cartas às <b>Valentes</b></>),
    plainTitle: 'Cartas às Valentes',
    desc: 'Minha newsletter gratuita — cartas mensais sobre clínica, ACT e coragem.',
    kicker: 'Newsletter',
    href: 'https://ingrydsimoes.substack.com/',
  },
  {
    title: (<>Canal no <b>YouTube</b></>),
    plainTitle: 'YouTube',
    desc: '',
    kicker: 'Vídeos',
    href: 'https://www.youtube.com/@IngrydSimoes',
  },
];

const SOCIAL = [
  { name: 'Instagram', href: 'https://www.instagram.com/ingrydsimoes/' },
  { name: 'YouTube',   href: 'https://www.youtube.com/@IngrydSimoes' },
  { name: 'Spotify',   href: 'https://open.spotify.com/show/0t9hCojdwbtqfolzcneLHk' },
  { name: 'Substack',  href: 'https://ingrydsimoes.substack.com/' },
];

// Credentials pulled from current site
const CREDENTIALS = [
  <>Pós-graduada em <b>ACT</b> (Terapia de Aceitação e Compromisso)</>,
  <>Pós-graduada em <b>Avaliação Psicológica</b> e Psicodiagnóstico</>,
  <>Aprofundamento clínico avançado em ACT com <b>Steven C. Hayes</b></>,
  <>Membro da comunidade internacional <b>ACBS</b></>,
];

// ─────────────────────────────────────────────────────────────
// Arrow icon (hand-drawn feel, thin stroke)
// ─────────────────────────────────────────────────────────────
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>
  );
}

// ─────────────────────────────────────────────────────────────
// Small round avatar
// ─────────────────────────────────────────────────────────────
function Avatar({ size = 96, border = CREAM, src = 'assets/ingryd.webp' }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      overflow: 'hidden', flexShrink: 0,
      background: PEACH,
      boxShadow: `0 0 0 3px ${border}, 0 12px 30px rgba(0,0,0,0.28)`,
    }}>
      <img src={src} alt="Ingryd Simões"
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Scrolling marquee — "@ingrydsimoes · psicóloga · ..." strip
// ─────────────────────────────────────────────────────────────
function Marquee({ items, speed = 40, color = CREAM, bg = 'transparent', border = false, italic = true, size = 13 }) {
  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: '"Helvetica Neue", Helvetica, Arial, sans-serif',
        fontSize: size, letterSpacing: '0.14em',
        color, textTransform: 'uppercase',
        fontStyle: italic ? 'italic' : 'normal',
        fontWeight: 400,
      }}>
        {Array.from({ length: 6 }).map((_, i) => (
          <span key={i} style={{ paddingRight: 40 }}>{line}   ·   </span>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Editorial hero headline — the "O que considero indispensável" vibe
// Mix of regular + italic + bold. Tight line-height, big sizes.
// ─────────────────────────────────────────────────────────────
function EditorialTitle({ size = 64, color = CREAM, align = 'left', maxWidth = 'none' }) {
  return (
    <h1 style={{
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
      fontSize: size, lineHeight: 0.98, letterSpacing: '-0.025em',
      color, margin: 0, textAlign: align, maxWidth,
      fontWeight: 400,
    }}>
      <span style={{ fontWeight: 400 }}>Psicóloga</span>{' '}
      <em style={{ fontStyle: 'italic', fontWeight: 400 }}>que acredita</em>
      <br />
      <span style={{ fontWeight: 700 }}>em ciência</span>,{' '}
      <em style={{ fontStyle: 'italic', fontWeight: 400 }}>raciocínio clínico</em>
      <br />
      <span style={{ fontWeight: 400 }}>e</span>{' '}
      <span style={{ fontWeight: 700 }}>responsabilidade.</span>
    </h1>
  );
}

// ─────────────────────────────────────────────────────────────
// LinkCard — creme card with kicker label + editorial title + description + arrow
// On hover: subtle slide of arrow + card lift
// ─────────────────────────────────────────────────────────────
function LinkCard({ link, index, size = 'md' }) {
  const [hover, setHover] = React.useState(false);
  const pad = size === 'sm' ? '18px 20px' : '22px 24px';
  const titleSize = size === 'sm' ? 22 : 28;
  return (
    <a
      href={link.href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'block', position: 'relative',
        padding: pad, borderRadius: 14,
        background: CREAM, color: RED,
        textDecoration: 'none',
        border: `1px solid ${RED}10`,
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        boxShadow: hover
          ? '0 14px 30px rgba(0,0,0,0.22)'
          : '0 4px 14px rgba(0,0,0,0.14)',
        transition: 'transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s',
        overflow: 'hidden',
      }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        marginBottom: 10, gap: 16,
      }}>
        <div style={{
          fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
          fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: RED, opacity: 0.55, fontWeight: 500,
        }}>
          {String(index + 1).padStart(2, '0')} — {link.kicker}
        </div>
        <div style={{
          transform: hover ? 'translateX(4px)' : 'translateX(0)',
          transition: 'transform .25s cubic-bezier(.2,.7,.3,1)',
          display: 'flex', alignItems: 'center',
        }}>
          <Arrow size={18} color={RED} />
        </div>
      </div>

      <div style={{
        fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
        fontSize: titleSize, lineHeight: 1.02,
        letterSpacing: '-0.02em', color: RED,
        fontWeight: 400, marginBottom: link.desc ? 8 : 0,
      }}>
        {link.title}
      </div>

      {link.desc && <div style={{
        fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
        fontSize: 13, lineHeight: 1.4,
        color: RED, opacity: 0.7, fontWeight: 400,
        maxWidth: '90%',
      }}>
        {link.desc}
      </div>}
    </a>
  );
}

// ─────────────────────────────────────────────────────────────
// Credentials block (italic + bold mix)
// ─────────────────────────────────────────────────────────────
function Credentials({ align = 'center', size = 13 }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 8,
      alignItems: align === 'center' ? 'center' : 'flex-start',
      textAlign: align,
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
      fontSize: size, lineHeight: 1.45,
      color: CREAM, opacity: 0.92, fontWeight: 300,
      maxWidth: 360,
    }}>
      {CREDENTIALS.map((c, i) => (
        <div key={i}>{c}</div>
      ))}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CRP line
// ─────────────────────────────────────────────────────────────
function CRP({ color = PEACH }) {
  return (
    <div style={{
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
      fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
      color, opacity: 0.85, fontWeight: 500,
    }}>
      CRP <span style={{ fontWeight: 700 }}>06/206396</span>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Social icons
// ──────────────────────────────────────────────────────────────
function SocialIcon({ name, size = 22, 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 = CREAM }) {
  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: 8,
        padding: '10px 16px', 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: '"Helvetica Neue", Helvetica, Arial, sans-serif',
        fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
        fontWeight: 500,
      }}>
      <SocialIcon name={name} size={16} color={color} />
      <span>{name}</span>
    </a>
  );
}

function SocialRow({ color = CREAM, 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>
  );
}

// ─────────────────────────────────────────────────────────────
// MOBILE PAGE — designed for a 390×844 iPhone
// ─────────────────────────────────────────────────────────────
function MobileLinksPage() {
  return (
    <div style={{
      width: '100%', minHeight: '100%',
      background: RED, color: CREAM,
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
      overflow: 'hidden', position: 'relative',
    }}>
      {/* Top marquee */}
      <div style={{ paddingTop: 54 }}>
        <Marquee items={['@ingrydsimoes', 'psicóloga', 'crp 06/206396', 'act', 'ingrydsimoes.com.br']} speed={32} size={11} />
      </div>

      {/* Hero image (editorial) */}
      <div style={{ position: 'relative', width: '100%', padding: '28px 20px 0', boxSizing: 'border-box' }}>
        <div style={{
          position: 'relative', width: '100%', aspectRatio: '3/4',
          borderRadius: 18, overflow: 'hidden',
          boxShadow: '0 18px 40px rgba(0,0,0,0.35)',
        }}>
          <img src="assets/ingryd.webp" alt=""
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              filter: 'saturate(0.92) contrast(1.02)' }} />
          {/* overlay gradient */}
          <div style={{
            position: 'absolute', inset: 0,
            background: `linear-gradient(180deg, transparent 40%, ${RED}dd 100%)`,
          }} />
          {/* overlay name */}
          <div style={{
            position: 'absolute', left: 18, right: 18, bottom: 16,
            color: CREAM,
          }}>
            <div style={{
              fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
              opacity: 0.8, marginBottom: 6, fontWeight: 400,
            }}>
              <em style={{ fontStyle: 'italic' }}>psicóloga</em> · crp 06/206396
            </div>
            <div style={{
              fontSize: 40, lineHeight: 0.95, letterSpacing: '-0.025em',
              fontWeight: 400,
            }}>
              <span style={{ fontWeight: 400 }}>Ingryd</span>{' '}
              <em style={{ fontStyle: 'italic', fontWeight: 400 }}>Simões</em>
            </div>
          </div>
        </div>
      </div>

      {/* Editorial tagline */}
      <div style={{ padding: '28px 22px 18px' }}>
        <div style={{
          fontSize: 28, lineHeight: 1.02, letterSpacing: '-0.02em',
          color: CREAM, fontWeight: 400,
        }}>
          <span>O que</span>{' '}
          <em style={{ fontStyle: 'italic' }}>considero</em>
          <br />
          <b style={{ fontWeight: 700 }}>indispensável</b>
          <br />
          <span>para </span>
          <em style={{ fontStyle: 'italic' }}>uma</em>{' '}
          <b style={{ fontWeight: 700 }}>clínica</b>
          <br />
          <b style={{ fontWeight: 700 }}>responsável.</b>
        </div>
      </div>

      {/* Credentials */}
      <div style={{ padding: '0 22px 22px', display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
        <Credentials align="left" size={12} />
        <div style={{ height: 1, width: 40, background: CREAM, opacity: 0.4 }} />
        <CRP />
      </div>

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

      {/* Social */}
      <div style={{ padding: '0 22px 24px', display: 'flex', justifyContent: 'center' }}>
        <SocialRow color={CREAM} align="center" />
      </div>

      {/* Bottom marquee */}
      <Marquee items={['ingrydsimoes.com.br', '@ingrydsimoes', 'act · psicologia']} speed={28} size={10} />

      {/* Footer */}
      <div style={{
        padding: '22px 22px 40px', textAlign: 'center',
        fontSize: 11, opacity: 0.7, color: CREAM, fontWeight: 300,
        lineHeight: 1.6,
      }}>
        <div>Ingryd Simões</div>
        <div>© Todos os direitos reservados <em style={{ fontStyle: 'italic' }}>2026</em>.</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// DESKTOP PAGE — 1280 wide, editorial split layout
// ─────────────────────────────────────────────────────────────
function DesktopLinksPage() {
  return (
    <div style={{
      width: '100%', background: RED, color: CREAM,
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Top bar marquee */}
      <Marquee
        items={['@ingrydsimoes', 'psicóloga', 'crp 06/206396', 'act — terapia de aceitação e compromisso', 'ingrydsimoes.com.br']}
        speed={50} size={12} border={true}
      />

      {/* Main split */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1.05fr 1fr',
        gap: 48, padding: '56px 72px 56px',
        alignItems: 'start',
      }}>
        {/* LEFT — editorial photo + headline */}
        <div style={{ position: 'sticky', top: 40, display: 'flex', flexDirection: 'column', gap: 28 }}>
          {/* Kicker */}
          <div style={{
            fontSize: 12, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: CREAM, opacity: 0.8, fontWeight: 400,
          }}>
            <em style={{ fontStyle: 'italic' }}>psicóloga</em> · crp 06/206396
          </div>

          {/* Big name */}
          <div style={{
            fontSize: 96, lineHeight: 0.92, letterSpacing: '-0.035em',
            color: CREAM, fontWeight: 400, marginBottom: 4,
          }}>
            <span style={{ fontWeight: 400 }}>Ingryd</span>
            <br />
            <em style={{ fontStyle: 'italic', fontWeight: 400 }}>Simões</em>
          </div>

          {/* Photo */}
          <div style={{
            position: 'relative', width: '100%', maxWidth: 460,
            aspectRatio: '3/4', borderRadius: 14, overflow: 'hidden',
            boxShadow: '0 22px 50px rgba(0,0,0,0.35)',
          }}>
            <img src="assets/ingryd.webp" alt="Ingryd Simões"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                filter: 'saturate(0.92) contrast(1.02)' }} />
            <div style={{
              position: 'absolute', inset: 0,
              background: `linear-gradient(180deg, transparent 55%, ${RED}cc 100%)`,
            }} />
            {/* frame caption */}
            <div style={{
              position: 'absolute', left: 16, right: 16, bottom: 14,
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
              color: CREAM,
            }}>
              <div style={{
                fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
                opacity: 0.85, fontWeight: 400,
              }}>
                <em style={{ fontStyle: 'italic' }}>retrato</em> — 2026
              </div>
              <div style={{
                fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
                opacity: 0.85, fontWeight: 400,
              }}>
                @ingrydsimoes
              </div>
            </div>
          </div>

          {/* Editorial tagline */}
          <div style={{
            fontSize: 34, lineHeight: 1.02, letterSpacing: '-0.02em',
            color: CREAM, fontWeight: 400, maxWidth: 460, marginTop: 8,
          }}>
            <span>O que </span>
            <em style={{ fontStyle: 'italic' }}>considero</em>{' '}
            <b style={{ fontWeight: 700 }}>indispensável</b>{' '}
            <span>para uma </span>
            <em style={{ fontStyle: 'italic' }}>clínica</em>{' '}
            <b style={{ fontWeight: 700 }}>responsável.</b>
          </div>
        </div>

        {/* RIGHT — credentials + links */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36, paddingTop: 36 }}>
          {/* Section label */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: CREAM, opacity: 0.7, fontWeight: 500,
          }}>
            <div style={{ width: 28, height: 1, background: CREAM, opacity: 0.5 }} />
            <span><em style={{ fontStyle: 'italic' }}>sobre</em> — formação</span>
          </div>

          {/* Credentials */}
          <div style={{
            fontSize: 16, lineHeight: 1.55, color: CREAM, opacity: 0.95,
            maxWidth: 460, fontWeight: 300,
          }}>
            {CREDENTIALS.map((c, i) => (
              <div key={i} style={{ marginBottom: 10 }}>{c}</div>
            ))}
          </div>

          <CRP />

          {/* Social */}
          <SocialRow color={CREAM} />

          {/* Section label 2 */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, marginTop: 20,
            fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: CREAM, opacity: 0.7, fontWeight: 500,
          }}>
            <div style={{ width: 28, height: 1, background: CREAM, opacity: 0.5 }} />
            <span><em style={{ fontStyle: 'italic' }}>acesse</em> — todos os links</span>
          </div>

          {/* Links */}
          <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: '60px 72px 40px',
        borderTop: `1px solid ${CREAM}20`,
      }}>
        <div style={{
          fontSize: 72, lineHeight: 0.95, letterSpacing: '-0.035em',
          color: CREAM, fontWeight: 400, maxWidth: 980,
        }}>
          <em style={{ fontStyle: 'italic', fontWeight: 400 }}>ciência</em>,{' '}
          <b style={{ fontWeight: 700 }}>raciocínio clínico</b>
          <br />
          <span>&amp; </span>
          <em style={{ fontStyle: 'italic', fontWeight: 400 }}>responsabilidade</em>
          <span> na </span>
          <b style={{ fontWeight: 700 }}>clínica.</b>
        </div>
      </div>

      {/* Bottom marquee */}
      <Marquee
        items={['ingrydsimoes.com.br/links', '@ingrydsimoes no instagram', 'cartas às valentes — newsletter', 'youtube']}
        speed={45} size={12} border={true}
      />

      {/* Footer */}
      <div style={{
        padding: '28px 72px 40px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 12, color: CREAM, opacity: 0.7, fontWeight: 300,
      }}>
        <div>Ingryd Simões</div>
        <div>© Todos os direitos reservados <em style={{ fontStyle: 'italic' }}>2026</em>.</div>
      </div>
    </div>
  );
}

// Export to window for multi-script use
Object.assign(window, {
  MobileLinksPage, DesktopLinksPage,
  LinkCard, Credentials, CRP, Marquee, Avatar, Arrow,
  SocialIcon, SocialButton, SocialRow,
  LINKS_COLORS: { RED, CREAM, PEACH, RED_DEEP, RED_SOFT },
});