// Section.jsx — Daniel do Japão UI Kit
// Contains: AboutSection, CRIASection, PortfolioSection, ManifestoSection

const PINTEREST_MAIN = 'https://br.pinterest.com/';

// LazyVideo — context-aware media.
//  • cover={true}  → project cover/thumbnail. Always a <video>, but plays only
//    while on-screen (so a phone never decodes many at once) and shows its poster
//    frame behind it so it never flashes black while loading.
//  • cover not set → media INSIDE a client project. On phones we render only the
//    lightweight still poster; the real clip loads on tap in the lightbox.
const __isCoarse = typeof window !== 'undefined' && window.matchMedia
  && window.matchMedia('(hover: none), (pointer: coarse), (max-width: 600px)').matches;
const __derivePoster = (src) =>
  (typeof src === 'string' && /\.mp4(\?|$)/.test(src)) ? src.replace(/\.mp4(\?|$)/, '-poster.jpg$1') : null;

const LazyVideo = ({ src, poster, style, className, cover }) => {
  const ref = React.useRef(null);
  const ps = poster || __derivePoster(src);
  const showStill = __isCoarse && !cover;   // static poster only inside projects on mobile
  React.useEffect(() => {
    if (showStill) return;
    const v = ref.current;
    if (!v) return;
    const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); };
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) tryPlay(); else v.pause(); });
    }, { threshold: __isCoarse ? 0.5 : 0.2 });
    io.observe(v);
    return () => io.disconnect();
  }, [src, showStill]);

  if (showStill) {
    return ps
      ? <img src={ps} alt="" loading="lazy" className={className} style={{ objectFit: 'cover', ...style }} />
      : <div className={className} style={{ background: '#0A0A0A', ...style }}></div>;
  }
  return (
    <video
      ref={ref}
      src={src}
      poster={ps || undefined}
      muted
      loop
      playsInline
      preload="metadata"
      className={className}
      style={style}
    ></video>
  );
};

// Video lightbox — global so any card can open the player
const VideoLightbox = ({ youtubeId, videoSrc, vertical, onClose }) => {
  const [orient, setOrient] = React.useState(vertical ? 'v' : (videoSrc ? null : 'h'));
  React.useEffect(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handler);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', handler); document.body.style.overflow = ''; };
  }, [onClose]);
  if (!youtubeId && !videoSrc) return null;
  const src = typeof videoSrc === 'function' ? videoSrc() : videoSrc;
  const isVertical = orient ? orient === 'v' : !!vertical;
  const frameStyle = isVertical
    ? { height: 'min(85vh, 760px)', aspectRatio: '9/16', borderRadius: 16, overflow: 'hidden', boxShadow: '0 24px 80px rgba(0,0,0,0.6)', background: '#000' }
    : { width: '100%', maxWidth: 1100, aspectRatio: '16/9', borderRadius: 16, overflow: 'hidden', boxShadow: '0 24px 80px rgba(0,0,0,0.6)', background: '#000' };
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <button onClick={onClose} style={{ position: 'absolute', top: 20, right: 24, background: 'none', border: 'none', color: '#FAFAFA', fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', cursor: 'pointer', padding: 8, zIndex: 1 }}>FECHAR ×</button>
      <div onClick={(e) => e.stopPropagation()} style={frameStyle}>
        {src ? (
          <video src={src} poster={__derivePoster(src) || undefined} controls autoPlay playsInline onLoadedMetadata={(e) => setOrient(e.target.videoHeight > e.target.videoWidth ? 'v' : 'h')} style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block', background: '#000' }}></video>
        ) : (
          <iframe
            src={`https://www.youtube.com/embed/${youtubeId}?autoplay=1&rel=0&playsinline=1`}
            title="Vídeo"
            style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowFullScreen
          ></iframe>
        )}
      </div>
    </div>
  );
};

const PortfolioCard = ({ item, onOpen }) => {
  const s = sectionStyles;
  const isClient = !!item.clientId;
  const hasVideo = !!item.youtubeId || !!item.videoSrc;
  const interactive = isClient || hasVideo;
  const ytThumb = item.youtubeId ? `https://i.ytimg.com/vi/${item.youtubeId}/maxresdefault.jpg` : null;
  const logoSrc = item.image ? (typeof item.image === 'function' ? item.image() : item.image) : null;
  const cta = isClient ? `VER PROJETOS${item.projectCount ? ' · ' + item.projectCount : ''} →` : (hasVideo ? 'ASSISTIR →' : 'VER NO PINTEREST →');
  const handleClick = (e) => {
    if (interactive) { e.preventDefault(); onOpen(item); }
  };
  const Badge = ({ label }) => (
    <span style={{ position: 'absolute', top: 14, left: 16, fontFamily: "'DM Sans', sans-serif", fontSize: 8, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#FAFAFA', background: 'rgba(0,0,0,0.6)', padding: '4px 8px', borderRadius: 2 }}>{label}</span>
  );
  const PlayBadge = () => (
    <>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(214,43,43,0.95)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 24px rgba(0,0,0,0.5)' }}>
          <svg width="20" height="20" viewBox="0 0 16 16" fill="none"><path d="M3 2L13 8L3 14V2Z" fill="#FAFAFA"/></svg>
        </div>
      </div>
      <Badge label={isClient ? 'CLIENTE' : 'VÍDEO'} />
      <span style={{ position: 'absolute', bottom: 14, right: 16, fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.18em', color: '#FAFAFA' }}>{item.year}</span>
    </>
  );
  return (
    <a href={item.link || '#'} target={interactive ? '_self' : '_blank'} rel="noopener noreferrer" onClick={handleClick} style={{ ...s.postCard, textDecoration: 'none', color: 'inherit', display: 'block', cursor: 'pointer' }}>
      <div style={{ ...s.portfolioImg, background: (ytThumb || item.videoSrc) ? '#000' : (item.imageBg || s.portfolioImg.background), padding: (logoSrc || ytThumb || item.videoSrc) ? 0 : 20, position: 'relative', overflow: 'hidden' }}>
        {item.videoSrc ? (
          <>
            <LazyVideo
              cover
              src={typeof item.videoSrc === 'function' ? item.videoSrc() : item.videoSrc}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.45), transparent 45%)' }}></div>
            <PlayBadge />
          </>
        ) : ytThumb ? (
          <>
            <img src={ytThumb} alt={item.client} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.5), transparent 40%)' }}></div>
            <PlayBadge />
          </>
        ) : logoSrc ? (
          <>
            <img src={logoSrc} alt={item.client} style={{ width: '100%', height: '100%', objectFit: 'contain', padding: 24 }} />
            {interactive && <PlayBadge />}
          </>
        ) : (
          <>
            <span style={s.portfolioImgText}>{item.client}</span>
            <span style={s.portfolioYear}>{item.year}</span>
          </>
        )}
      </div>
      <div style={s.postBody}>
        <div style={s.postCategory}>{item.category}</div>
        <h3 style={s.postTitle}>{item.client}</h3>
        <p style={s.postExcerpt}>{item.desc}</p>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#D62B2B', padding: '8px 0 0' }}>{cta}</div>
      </div>
    </a>
  );
};

// ── Clients (grouped projects) ─────────────────────────────
const CLIENTS = {
  fabricact: {
    name: 'Fábrica CT',
    category: 'ACADEMIAS · LÉO STRONDA',
    tagline: 'O tour da rede de academias do Léo Stronda.',
    intro: 'A Fábrica CT é a rede de academias do Léo Stronda — uma das maiores referências do fitness no Brasil. Quando a rede ia abrir uma unidade na Ceilândia, onde eu moro, fui até lá mostrar meu portfólio. Começamos a trabalhar juntos e eu assinei o lançamento da academia: prévias, antecedente, cobertura do evento e a história dos donos. Gravei, produzi e dirigi cada cena.',
    projects: [
      {
        title: 'O Lançamento · A História',
        tag: 'LANÇAMENTO · CEILÂNDIA',
        year: '2025',
        videoSrc: () => window.__resources?.fabricactLancamento1 || './fabricact-lancamento-1.mp4',
        vertical: true,
        desc: 'O começo de tudo: uma unidade da Fábrica CT chegando à Ceilândia, onde eu moro. Neste vídeo a gente conta a história da academia e dos donos — de quando ainda não havia nada e tudo estava no início. Fui até lá mostrar meu portfólio, começamos a trabalhar juntos e nasceu o lançamento.',
      },
      {
        title: 'O Lançamento · Os Donos',
        tag: 'LANÇAMENTO · HISTÓRIA',
        year: '2025',
        videoSrc: () => window.__resources?.fabricactLancamento2 || './fabricact-lancamento-2.mp4',
        vertical: true,
        desc: 'A continuação da história: os donos falando sobre a academia, o propósito por trás da unidade e o que ela representa para a comunidade da Ceilândia. Cobertura completa do antecedente ao evento — toda feita por mim.',
      },
      {
        title: 'Entrevista com Léo Stronda',
        tag: 'ENTREVISTA · INAUGURAÇÃO',
        year: '2025',
        videoSrc: () => window.__resources?.fabricactEntrevistaLeo || './fabricact-entrevista-leo.mp4',
        vertical: true,
        desc: 'Entrevistei o Léo Stronda — uma das maiores referências do fitness no Brasil — no dia da inauguração da rede. Conduzir uma conversa ao vivo com alguém desse porte e extrair uma boa história mostra meu trabalho de comunicação e direção de entrevista na prática.',
      },
      {
        title: 'Tour pela Rede · Episódio 1',
        tag: 'PRODUÇÃO · DIREÇÃO',
        year: '2025',
        videoSrc: () => window.__resources?.fabricactTour || './fabricact-tour.mp4',
        vertical: true,
        desc: 'Gravado, produzido e dirigido por mim. Um tour cinematográfico mostrando a estrutura da Fábrica CT por dentro — cada cena pensada para transmitir a escala e a energia da rede do Léo Stronda.',
      },
      {
        title: 'Tour pela Rede · Episódio 2',
        tag: 'PRODUÇÃO · DIREÇÃO',
        year: '2025',
        videoSrc: () => window.__resources?.fabricactTourEp2 || './fabricact-tour-ep2.mp4',
        vertical: true,
        desc: 'Gravado, produzido e dirigido por mim. Um tour cinematográfico mostrando a estrutura da Fábrica CT por dentro — cada cena pensada para transmitir a escala e a energia da rede do Léo Stronda.',
      },
      {
        title: 'Convite para o Evento',
        tag: 'COMUNIDADE · TOPO/MEIO DE FUNIL',
        year: '2025',
        videoSrc: () => window.__resources?.fabricactEvento || './fabricact-evento.mp4',
        vertical: true,
        desc: 'Vídeo para chamar a galera para um evento dentro da academia. A estratégia mira a comunidade no topo do funil: ativar quem já está dentro para trazer mais gente junto. Comunidade que convida comunidade.',
      },
      {
        title: 'Bastidores',
        tag: 'POR TRÁS DAS CENAS',
        year: '2025',
        videoSrc: () => window.__resources?.fabricactBastidor || './fabricact-bastidor.mp4',
        vertical: true,
        desc: 'Os bastidores da produção — eu em campo, gravando e dirigindo cada cena ao lado do Léo Stronda. A prova de que o projeto foi feito de ponta a ponta por mim.',
      },
    ],
  },
  skyfit: {
    name: 'Sky Fit',
    category: 'ACADEMIAS',
    tagline: 'Topo a fundo de funil para academia.',
    intro: 'A Sky Fit é uma academia, e a estratégia foi cobrir o funil inteiro: atrair quem ainda não treina e converter quem já está decidindo. Conteúdo pensado, gravado e editado por mim — do primeiro contato à matrícula.',
    projects: [
      {
        title: 'Vídeo Promocional',
        tag: 'TOPO DE FUNIL',
        year: '2025',
        videoSrc: () => window.__resources?.fabricaCtVideo || './fabrica-ct-video.mp4',
        vertical: true,
        desc: 'Vídeo pensado, gravado e editado por mim para atrair pessoas que ainda não treinam mas querem começar. A estratégia: alcançar o máximo de gente no topo do funil e despertar o desejo de dar o primeiro passo.',
      },
      {
        title: 'Entrevistas na Academia',
        tag: 'FUNDO DE FUNIL',
        year: '2025',
        videoSrc: () => window.__resources?.skyfitEntrevista || './skyfit-entrevista.mp4',
        vertical: true,
        desc: 'Entrevistamos alunos dentro da academia: enquanto contam como o treino transformou a vida deles, aparecem usando os aparelhos na prática. Prova social pura — fundo de funil, feito para converter quem já está considerando e fechar a matrícula.',
      },
    ],
  },
  martinsmachado: {
    name: 'Martins Machado',
    category: 'POLÍTICA · EDIÇÃO DE VÍDEO',
    tagline: 'edição para comunicação política.',
    intro: 'Durante 30 dias fui contratado por uma produtora especializada em clientes políticos. Ali editei e cuidei dos vídeos do deputado Martins Machado — e também dei suporte à comunicação do Júlio César. Foi um trabalho intenso de edição: ritmo, recorte de fala e clareza de mensagem para conteúdo de campanha e mandato.',
    credential: 'Trabalho realizado via produtora terceirizada (comprovante de pagamento em arquivo).',
    socials: [
      // { label: 'Instagram', href: '' },
    ],
    projects: [
      {
        title: 'Mandato Que Serve · Episódio 1',
        tag: 'EDIÇÃO · SÉRIE',
        year: '2024',
        videoSrc: () => window.__resources?.martinsMandato1 || './martins-mandato-1.mp4',
        vertical: true,
        desc: 'Primeiro episódio da série "Mandato Que Serve", que editei para o Martins Machado. A cada período, ele prestava contas do que estava realizando no mandato — e meu trabalho foi dar ritmo, recorte de fala e clareza à mensagem.',
      },
      {
        title: 'Mandato Que Serve · Episódio 2',
        tag: 'EDIÇÃO · SÉRIE · EM EQUIPE',
        year: '2024',
        videoSrc: () => window.__resources?.martinsMandato2 || './martins-mandato-2.mp4',
        vertical: true,
        desc: 'Segundo episódio da série, em que ele fala sobre a infraestrutura que construiu — incluindo o metrô. Aqui o trabalho foi colaborativo: peguei o material meio que pré-editado, editei uma parte e o restante foi finalizado por outra pessoa da agência. Edição em equipe, mantendo ritmo e clareza na fala.',
      },
      {
        title: 'Corrida de Reis · Cobertura',
        tag: 'FOTOGRAFIA · COBERTURA SOCIAL',
        year: '2025',
        desc: 'Fiz toda a parte social da 53ª Corrida de Reis, em Brasília — evento que o Martins Machado promoveu dentro do mandato. Tirei as fotos e ajudei na gravação no dia, entregando a cobertura para as redes sociais dele.',
        gallery: [
          { src: () => window.__resources?.martinsReis1 || './martins-reis-1.jpg', w: 1080, h: 1350 },
          { src: () => window.__resources?.martinsReis2 || './martins-reis-2.jpg', w: 1080, h: 809 },
          { src: () => window.__resources?.martinsReis3 || './martins-reis-3.jpg', w: 1080, h: 1350 },
          { src: () => window.__resources?.martinsReis4 || './martins-reis-4.jpg', w: 1080, h: 810 },
        ],
      },
    ],
  },
};

const PORTFOLIO_ITEMS = [
  { client: 'Fábrica CT', category: 'ACADEMIAS · LÉO STRONDA', year: '2025', desc: 'Tour da rede de academias do Léo Stronda — gravado, produzido e dirigido por mim. Meu projeto mais recente.', clientId: 'fabricact', projectCount: 7, featured: true, vertical: true, youtubeId: 'WImVn7tLVJI', videoSrc: () => window.__resources?.fabricactTour || './fabricact-tour.mp4' },
  { client: 'Sky Fit', category: 'ACADEMIAS', year: '2025', desc: 'Estratégia de funil completo para academia — do topo (atrair) ao fundo (converter). Vídeos pensados, gravados e editados por mim.', clientId: 'skyfit', projectCount: 2, videoSrc: () => window.__resources?.fabricaCtVideo || './fabrica-ct-video.mp4', vertical: true },
  { client: 'Martins Machado', category: 'POLÍTICA · EDIÇÃO', year: '2024', desc: 'Edição de vídeos de comunicação política durante período em produtora especializada. Ritmo, recorte de fala e clareza de mensagem.', clientId: 'martinsmachado', projectCount: 3, videoSrc: () => window.__resources?.martinsMandato1 || './martins-mandato-1.mp4', vertical: true },
];

const AboutSection = ({ onNavigate }) => {
  const s = sectionStyles;
  return (
    <section className="rsp-section" style={s.sectionLight}>
      <div style={s.container}>
        <div className="rsp-two-col" style={s.twoCol}>
          <div style={s.col}>
            <div style={s.eyebrow}>SOBRE DANIEL</div>
            <h2 style={s.h2}>Da periferia ao Japão — e de volta.</h2>
            <p style={s.body}>
              Daniel cresceu na periferia e aprendeu cedo que a realidade não muda por acidente. Muda por escolha, por disciplina, por presença intencional. A experiência no Japão não foi um escapismo — foi o espelho que revelou o que já estava dentro.
            </p>
            <p style={{ ...s.body, marginTop: 12 }}>
              Hoje, através do movimento CRIA, ele traduz essa jornada em prática: rotina, hábitos e comunicação como ferramentas de construção — não de sobrevivência.
            </p>
            <button style={s.btnOutline} onClick={() => onNavigate && onNavigate('cria')}>
              CONHECER O CRIA
            </button>
          </div>
          <div style={s.col}>
            <div style={s.imgPlaceholder}>
              <img src={window.__resources?.danielPortrait || './daniel-portrait.jpg'} alt="Daniel do Japão" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '32% 18%', display: 'block' }} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const ManifestoSection = () => {
  const s = sectionStyles;
  const items = [
    { num: '01', title: 'História de Criação', body: 'Da periferia ao Japão — a virada que mostrou que transformação é acessível.' },
    { num: '02', title: 'Credo', body: 'Criar a própria realidade não é luxo. É disciplina.' },
    { num: '03', title: 'Rituais', body: 'Rotina matinal, presença intencional, comunidade ativa.' },
    { num: '04', title: 'Liderança', body: 'Daniel encarna a visão. Não vende sonho — ensina o caminho.' },
  ];
  return (
    <section className="rsp-section" style={{ ...s.sectionDark, borderTop: '1px solid #111' }}>
      <div style={s.container}>
        <div style={s.centered}>
          <div style={s.eyebrowInv}>MANIFESTO</div>
          <h2 className="rsp-h2" style={s.h2Inv}>O que nos move.</h2>
        </div>
        <div className="rsp-four-grid" style={s.fourGrid}>
          {items.map(item => (
            <div key={item.num} style={s.manifestoCard}>
              <div style={s.manifestoNum}>{item.num}</div>
              <div style={s.manifestoTitle}>{item.title}</div>
              <div style={s.manifestoBody}>{item.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CRIASection = ({ onNavigate }) => {
  const s = sectionStyles;
  const features = [
    { title: 'Rotina', desc: 'Estrutura diária que sustenta a transformação.' },
    { title: 'Hábitos', desc: 'Pequenas ações com grandes consequências.' },
    { title: 'Presença', desc: 'Estar aqui, agora — com intenção.' },
    { title: 'Comunidade', desc: 'Criadores que se elevam juntos.' },
    { title: 'Conteúdo', desc: 'Aulas, lives e material exclusivo.' },
    { title: 'Mentoria', desc: 'Acesso direto ao Daniel.' },
  ];
  return (
    <section className="rsp-section-cria" style={s.sectionGold}>
      <div style={s.container}>
        <div className="rsp-two-col-equal" style={s.twoColEqual}>
          <div>
            <div style={s.eyebrowDark}>COMUNIDADE</div>
            <h2 className="rsp-h2" style={s.h2Dark}>CRIA —<br />crie sua realidade.</h2>
            <p style={s.bodyDark}>
              O CRIA é o movimento para quem entende que construir a própria vida é um ato de disciplina diária. Não é motivação. É método.
            </p>
            <button style={s.btnDark} onClick={() => onNavigate && onNavigate('cria')}>
              QUERO ENTRAR NO CRIA
            </button>
          </div>
          <div className="rsp-feat-grid" style={s.featGrid}>
            {features.map(f => (
              <div key={f.title} style={s.featItem}>
                <div style={s.featTitle}>{f.title}</div>
                <div style={s.featDesc}>{f.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── Featured work (big highlight banner) ───────────────────
const FeaturedWork = ({ item, onOpen }) => {
  const s = sectionStyles;
  const src = item.videoSrc ? (typeof item.videoSrc === 'function' ? item.videoSrc() : item.videoSrc) : null;
  const isV = !!item.vertical;
  return (
    <div
      onClick={() => onOpen(item)}
      className="rsp-featured"
      style={{ display: 'flex', flexWrap: 'wrap', gap: 0, background: '#0A0A0A', borderRadius: 6, overflow: 'hidden', cursor: 'pointer', border: '1px solid #1A1A1A', marginBottom: 48 }}
    >
      <div style={{ flex: '1 1 320px', minWidth: 0, position: 'relative', background: '#000', minHeight: isV ? 460 : 340, overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {item.youtubeId ? (
          <iframe
            title={item.client}
            src={`https://www.youtube.com/embed/${item.youtubeId}?autoplay=1&mute=1&loop=1&playlist=${item.youtubeId}&controls=0&playsinline=1&rel=0&modestbranding=1&disablekb=1`}
            allow="autoplay; encrypted-media; picture-in-picture"
            style={isV
              ? { height: '100%', aspectRatio: '9 / 16', width: 'auto', maxWidth: '100%', border: 'none', pointerEvents: 'none', display: 'block' }
              : { position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none', pointerEvents: 'none' }}
          ></iframe>
        ) : src ? (
          <LazyVideo cover src={src} style={isV
            ? { height: '100%', width: 'auto', maxWidth: '100%', objectFit: 'contain' }
            : { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        ) : null}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, transparent 60%, rgba(10,10,10,0.5))' }}></div>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(214,43,43,0.95)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 30px rgba(0,0,0,0.6)' }}>
            <svg width="22" height="22" viewBox="0 0 16 16" fill="none"><path d="M3 2L13 8L3 14V2Z" fill="#FAFAFA"/></svg>
          </div>
        </div>
      </div>
      <div className="rsp-featured-body" style={{ flex: '1 1 320px', minWidth: 0, padding: '44px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#D62B2B' }}></span>
          <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#D62B2B' }}>Projeto em destaque · Mais recente</span>
        </div>
        <h3 style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 38, fontWeight: 300, lineHeight: 1.08, letterSpacing: '-0.02em', color: '#FAFAFA', marginBottom: 8 }}>{item.client}</h3>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6B6B6B', marginBottom: 18 }}>{item.category}</div>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#A8A8A8', lineHeight: 1.7, marginBottom: 24, maxWidth: 420 }}>{item.desc}</p>
        <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FAFAFA', borderBottom: '1.5px solid #D62B2B', paddingBottom: 4, alignSelf: 'flex-start', whiteSpace: 'nowrap' }}>VER PROJETO →</span>
      </div>
    </div>
  );
};

const PortfolioSection = ({ onNavigate }) => {
  const s = sectionStyles;
  const featured = PORTFOLIO_ITEMS.find(i => i.featured);
  const rest = PORTFOLIO_ITEMS.filter(i => !i.featured).slice(0, 6);
  const [activeVideo, setActiveVideo] = React.useState(null);
  const handleOpen = (item) => {
    if (item.clientId) { onNavigate && onNavigate('client-' + item.clientId); }
    else if (item.youtubeId || item.videoSrc) { setActiveVideo({ id: item.youtubeId, videoSrc: item.videoSrc, vertical: item.vertical }); }
  };
  return (
    <section className="rsp-section" style={s.sectionLight}>
      <div style={s.container}>
        <div className="rsp-section-header" style={s.sectionHeader}>
          <div>
            <div style={s.eyebrow}>TRABALHOS</div>
            <h2 className="rsp-h2" style={s.h2}>O que construímos.</h2>
          </div>
          <button style={s.btnOutline} onClick={() => onNavigate && onNavigate('trabalhos')}>VER TODOS</button>
        </div>
        {featured && <FeaturedWork item={featured} onOpen={handleOpen} />}
        <div className="rsp-three-grid" style={s.threeGrid}>
          {rest.map(item => (
            <PortfolioCard key={item.client + item.year} item={item} onOpen={handleOpen} />
          ))}
        </div>
      </div>
      {activeVideo && <VideoLightbox youtubeId={activeVideo.id} videoSrc={activeVideo.videoSrc} vertical={activeVideo.vertical} onClose={() => setActiveVideo(null)} />}
    </section>
  );
};

// ── Client detail page (grouped projects) ──────────────────
const ClientPage = ({ clientId, onNavigate }) => {
  const s = sectionStyles;
  const c = (window.CLIENTS || {})[clientId];
  const [activeVideo, setActiveVideo] = React.useState(null);
  const [activePhoto, setActivePhoto] = React.useState(null);
  if (!c) return <div style={{ background: '#FAFAFA', minHeight: '60vh', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'DM Sans', sans-serif", color: '#6B6B6B' }}>Cliente não encontrado.</div>;
  return (
    <div style={{ background: '#FAFAFA', minHeight: '100dvh' }}>
      <section className="rsp-section" style={{ background: '#0A0A0A', padding: '72px 32px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <button onClick={() => onNavigate && onNavigate('trabalhos')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#6B6B6B', padding: '0 0 24px', display: 'block' }}>← TRABALHOS</button>
          <div style={s.eyebrowInv}>{c.category}</div>
          <h1 className="rsp-h1-page" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 56, fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#FAFAFA', marginBottom: 20, maxWidth: 760 }}>{c.name} — <em style={{ color: '#D62B2B', fontStyle: 'italic' }}>{c.tagline}</em></h1>
          <p style={{ ...s.body, color: '#A8A8A8', maxWidth: 620, fontSize: 16, lineHeight: 1.7 }}>{c.intro}</p>
          {c.credential && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 22 }}>
              <div style={{ width: 6, height: 6, background: '#D62B2B', borderRadius: '50%', flexShrink: 0 }}></div>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 500, letterSpacing: '0.04em', color: '#6B6B6B' }}>{c.credential}</span>
            </div>
          )}
          {c.socials && c.socials.length > 0 && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 20px', marginTop: 18 }}>
              {c.socials.map(soc => (
                <a key={soc.label} href={soc.href} target="_blank" rel="noopener noreferrer" style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FAFAFA', textDecoration: 'none', borderBottom: '1px solid #D62B2B', paddingBottom: 2 }}>{soc.label}</a>
              ))}
            </div>
          )}
        </div>
      </section>
      <section className="rsp-section" style={{ padding: '56px 32px 72px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ ...s.eyebrow, marginBottom: 28 }}>PROJETOS · {c.projects.length}</div>
          <div className="rsp-projects-list" style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
            {c.projects.map((p, i) => {
              const src = p.videoSrc ? (typeof p.videoSrc === 'function' ? p.videoSrc() : p.videoSrc) : null;
              if (p.gallery) {
                return (
                  <div key={p.title + i}>
                    <div style={{ marginBottom: 22 }}>
                      {p.tag && <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#D62B2B', marginBottom: 10 }}>{p.tag}</div>}
                      <h3 style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 30, fontWeight: 300, lineHeight: 1.1, color: '#0A0A0A', marginBottom: 12 }}>{p.title}</h3>
                      <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#6B6B6B', lineHeight: 1.7, maxWidth: 620 }}>{p.desc}</p>
                    </div>
                    <div className="rsp-gallery" style={{ columnCount: 2, columnGap: 12 }}>
                      {p.gallery.map((g, gi) => {
                        const gsrc = typeof g.src === 'function' ? g.src() : g.src;
                        return (
                          <div key={gi} onClick={() => setActivePhoto(gsrc)} style={{ breakInside: 'avoid', marginBottom: 12, borderRadius: 6, overflow: 'hidden', cursor: 'pointer', boxShadow: '0 8px 28px rgba(0,0,0,0.14)' }}>
                            <img src={gsrc} alt={p.title} loading="lazy" style={{ width: '100%', display: 'block' }} />
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              }
              return (
                <div key={p.title + i} className="rsp-project-row" style={{ display: 'flex', flexWrap: 'wrap', gap: 32, alignItems: 'center', justifyContent: 'center' }}>
                  <div
                    className={p.vertical ? 'rsp-project-media rsp-project-media-v' : 'rsp-project-media'}
                    onClick={() => (p.videoSrc || p.youtubeId) && setActiveVideo({ id: p.youtubeId, videoSrc: p.videoSrc, vertical: p.vertical })}
                    style={{ position: 'relative', flex: '0 0 auto', width: p.vertical ? 'min(240px, 100%)' : 'min(460px, 100%)', maxWidth: '100%', borderRadius: 6, overflow: 'hidden', background: '#000', aspectRatio: p.vertical ? '9/16' : '16/9', cursor: (p.videoSrc || p.youtubeId) ? 'pointer' : 'default', boxShadow: '0 12px 40px rgba(0,0,0,0.18)' }}
                  >
                    {src ? (
                      <LazyVideo src={src} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    ) : p.youtubeId ? (
                      <img src={`https://i.ytimg.com/vi/${p.youtubeId}/maxresdefault.jpg`} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    ) : (
                      <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#141414', backgroundImage: 'repeating-linear-gradient(45deg, #1A1A1A 0, #1A1A1A 1px, transparent 1px, transparent 11px)' }}>
                        <span style={{ fontFamily: "'DM Mono', ui-monospace, monospace", fontSize: 11, fontWeight: 500, letterSpacing: '0.14em', color: '#5A5A5A', textTransform: 'uppercase' }}>{p.placeholder || 'VÍDEO EM BREVE'}</span>
                      </div>
                    )}
                    {(p.videoSrc || p.youtubeId) && (
                      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear-gradient(to top, rgba(0,0,0,0.35), transparent 50%)' }}>
                        <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(214,43,43,0.95)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 24px rgba(0,0,0,0.5)' }}>
                          <svg width="20" height="20" viewBox="0 0 16 16" fill="none"><path d="M3 2L13 8L3 14V2Z" fill="#FAFAFA"/></svg>
                        </div>
                      </div>
                    )}
                  </div>
                  <div style={{ flex: '1 1 300px', minWidth: 0 }}>
                    {p.tag && <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#D62B2B', marginBottom: 10 }}>{p.tag}</div>}
                    <h3 style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 30, fontWeight: 300, lineHeight: 1.1, color: '#0A0A0A', marginBottom: 12 }}>{p.title}</h3>
                    <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: '#6B6B6B', lineHeight: 1.7, marginBottom: 16 }}>{p.desc}</p>
                    {(p.videoSrc || p.youtubeId) && (
                      <button onClick={() => setActiveVideo({ id: p.youtubeId, videoSrc: p.videoSrc, vertical: p.vertical })} style={{ ...s.btnOutline, marginTop: 0 }}>ASSISTIR →</button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
      {activeVideo && <VideoLightbox youtubeId={activeVideo.id} videoSrc={activeVideo.videoSrc} vertical={activeVideo.vertical} onClose={() => setActiveVideo(null)} />}
      {activePhoto && (
        <div onClick={() => setActivePhoto(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
          <button onClick={() => setActivePhoto(null)} style={{ position: 'absolute', top: 20, right: 24, background: 'none', border: 'none', color: '#FAFAFA', fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', cursor: 'pointer', padding: 8, zIndex: 1 }}>FECHAR ×</button>
          <img src={activePhoto} alt="" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '92vw', maxHeight: '88vh', objectFit: 'contain', borderRadius: 8, boxShadow: '0 24px 80px rgba(0,0,0,0.6)' }} />
        </div>
      )}
    </div>
  );
};

const ContentSection = ({ onNavigate }) => {
  const s = sectionStyles;
  const posts = [
    { category: 'ROTINA', title: 'A manhã que muda tudo', excerpt: 'Como estruturar sua rotina matinal em 3 passos simples.' },
    { category: 'MINDSET', title: 'Presença é poder', excerpt: 'Estar presente é o primeiro ato de criação consciente.' },
    { category: 'HÁBITOS', title: 'O sistema antes do sonho', excerpt: 'Por que hábitos consistentes valem mais que grandes planos.' },
  ];
  return (
    <section className="rsp-section" style={s.sectionLight}>
      <div style={s.container}>
        <div className="rsp-section-header" style={s.sectionHeader}>
          <div>
            <div style={s.eyebrow}>CONTEÚDO</div>
            <h2 className="rsp-h2" style={s.h2}>Leituras que elevam.</h2>
          </div>
          <button style={s.btnOutline} onClick={() => onNavigate && onNavigate('conteudo')}>VER TUDO</button>
        </div>
        <div className="rsp-three-grid" style={s.threeGrid}>
          {posts.map(post => (
            <div key={post.title} style={s.postCard}>
              <div style={s.postImg}>
                <span style={s.postImgText}>{post.category}</span>
              </div>
              <div style={s.postBody}>
                <div style={s.postCategory}>{post.category}</div>
                <h3 style={s.postTitle}>{post.title}</h3>
                <p style={s.postExcerpt}>{post.excerpt}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const sectionStyles = {
  sectionLight: { background: '#FAFAFA', padding: '80px 32px' },
  sectionDark: { background: '#0A0A0A', padding: '80px 32px' },
  sectionGold: { background: '#0A0A0A', padding: '80px 32px', borderTop: '2px solid #D62B2B' },
  container: { maxWidth: 1200, margin: '0 auto' },
  twoCol: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' },
  twoColEqual: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' },
  threeGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 },
  fourGrid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 48 },
  featGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 },
  col: { display: 'flex', flexDirection: 'column', gap: 16 },
  centered: { textAlign: 'center', marginBottom: 16 },
  sectionHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32 },

  eyebrow: { fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#D62B2B', marginBottom: 12 },
  eyebrowInv: { fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#3A3A3A', marginBottom: 12 },
  eyebrowDark: { fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#D62B2B', marginBottom: 12 },

  h2: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 42, fontWeight: 300, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#0A0A0A', marginBottom: 20, textWrap: 'pretty' },
  h2Inv: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 42, fontWeight: 300, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#FAFAFA', marginBottom: 20 },
  h2Dark: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 42, fontWeight: 300, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#FAFAFA', marginBottom: 20 },

  body: { fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 400, lineHeight: 1.65, color: '#6B6B6B' },
  bodyDark: { fontFamily: "'DM Sans', sans-serif", fontSize: 15, fontWeight: 400, lineHeight: 1.65, color: '#6B6B6B', marginBottom: 28 },

  btnOutline: { background: 'transparent', color: '#0A0A0A', border: '1.5px solid #0A0A0A', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '11px 22px', borderRadius: 2, marginTop: 8 },
  btnDark: { background: '#D62B2B', color: '#FAFAFA', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '13px 28px', borderRadius: 2 },

  imgPlaceholder: { background: '#111', aspectRatio: '4/5', borderRadius: 2, overflow: 'hidden', maxHeight: 560 },
  imgText: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 28, fontWeight: 300, color: '#D62B2B', letterSpacing: '0.08em', textAlign: 'center', lineHeight: 1.3 },

  manifestoCard: { borderTop: '1px solid #1A1A1A', paddingTop: 20 },
  manifestoNum: { fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.18em', color: '#3A3A3A', marginBottom: 8 },
  manifestoTitle: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 20, fontWeight: 400, color: '#FAFAFA', marginBottom: 8 },
  manifestoBody: { fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#6B6B6B', lineHeight: 1.6 },

  featItem: { background: '#111', padding: '16px', borderBottom: '1px solid #1A1A1A' },
  featTitle: { fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#FAFAFA', marginBottom: 4 },
  featDesc: { fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: '#6B6B6B', lineHeight: 1.5 },

  postCard: { background: '#fff', border: '1px solid #E8E8E8', borderRadius: 2, overflow: 'hidden' },
  postImg: { height: 120, background: '#0A0A0A', display: 'flex', alignItems: 'center', justifyContent: 'center' },
  postImgText: { fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#3A3A3A' },
  postBody: { padding: '16px' },
  postCategory: { fontFamily: "'DM Sans', sans-serif", fontSize: 8, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#D62B2B', marginBottom: 6 },
  postTitle: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 20, fontWeight: 400, lineHeight: 1.2, color: '#0A0A0A', marginBottom: 6 },
  postExcerpt: { fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#6B6B6B', lineHeight: 1.5 },

  portfolioImg: { height: 200, background: 'linear-gradient(135deg, #1a1a1a 0%, #0A0A0A 100%)', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-between', padding: 20, position: 'relative' },
  portfolioImgText: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontSize: 24, fontWeight: 300, fontStyle: 'italic', color: '#D62B2B', letterSpacing: '0.02em', alignSelf: 'flex-start' },
  portfolioYear: { fontFamily: "'DM Sans', sans-serif", fontSize: 9, fontWeight: 700, letterSpacing: '0.18em', color: '#3A3A3A', alignSelf: 'flex-end' },
};

Object.assign(window, { AboutSection, ManifestoSection, CRIASection, ContentSection, PortfolioSection, PortfolioCard, FeaturedWork, ClientPage, VideoLightbox, CLIENTS, PORTFOLIO_ITEMS, PINTEREST_MAIN, sectionStyles });