// ===========================================================
// DEAD SAILOR · PROJECT DOCK · CLIENT VIEWS
// ===========================================================

const D = () => window.DS_DATA;
var API = window.API;
const { useState, useEffect, useMemo, useRef, useCallback } = React;

// =========================================================
// CLIENT DASHBOARD
// =========================================================
function ClientDashboard({ navigate }){
  const [d, setD] = React.useState(D());
  const [user, setUser] = React.useState(null);
  const [briefings, setBriefings] = React.useState([]);

  React.useEffect(() => {
    DATA.refreshAll().then(() => {
      setD({ ...D() });
      setBriefings(D().briefingsInbox || []);
    });
    API.me().then(setUser).catch(() => {});
  }, []);

  const companyName = user?.company || d.currentClient?.name || 'Aurora Studio';

  const activeBrief = briefings.find(b => b.status === 'pending' || b.status === 'awaiting' || b.status === 'draft' || b.status === 'addendum' || b.status === 'alteration-requested');
  const hasPendingBriefing = (d.clientProjects.length === 0 && briefings.length === 0) || !!activeBrief;

  let calloutKicker = "PROJETO INICIADO";
  let calloutStatus = "STATUS · BRIEFING PENDENTE";
  let calloutTitle = <>Toda jornada criativa precisa de um <em>bom mapa.</em></>;
  let calloutDesc = "Para traçarmos o cronograma e entregáveis do seu projeto, precisamos que você preencha o Briefing Inicial detalhando o contexto, objetivos e referências visuais da sua marca.";
  let calloutBtnLabel = "Preencher Briefing";

  if (activeBrief) {
    if (activeBrief.status === 'draft') {
      calloutKicker = "AÇÃO REQUERIDA";
      calloutStatus = "STATUS · DEVOLVIDO PARA EDIÇÃO";
      calloutTitle = <>Seu briefing foi devolvido para <em>ajustes.</em></>;
      calloutDesc = "A equipe Dead Sailor devolveu seu briefing para ajustes ou complementos antes de definirmos o escopo final. Abra o formulário para fazer as correções necessárias.";
      calloutBtnLabel = "Editar Briefing";
    } else if (activeBrief.status === 'addendum') {
      calloutKicker = "AÇÃO REQUERIDA";
      calloutStatus = "STATUS · COMPLEMENTO SOLICITADO";
      calloutTitle = <>Precisamos de <em>complemento no seu briefing.</em></>;
      calloutDesc = "Solicitamos algumas informações adicionais para podermos validar os entregáveis e datas do seu projeto. Por favor, acesse o formulário para complementar.";
      calloutBtnLabel = "Complementar Briefing";
    } else if (activeBrief.status === 'alteration-requested') {
      calloutKicker = "AGUARDANDO RETORNO";
      calloutStatus = "STATUS · ALTERAÇÃO SOLICITADA";
      calloutTitle = <>Solicitação de alteração <em>em análise.</em></>;
      calloutDesc = "Você solicitou a liberação do briefing para edição. Assim que a agência processar a devolução, o formulário ficará aberto para ajustes aqui no painel.";
      calloutBtnLabel = "Ver Briefing Enviado";
    }
  }

  const timelineItems = [...(d.nextMoves || [])];
  if (hasPendingBriefing) {
    timelineItems.unshift({
      urgent: true,
      day: 'HOJE',
      month: 'AGORA',
      ttl: activeBrief?.status === 'draft' ? <>Ajustar <em>Briefing Inicial do Projeto</em></> : activeBrief?.status === 'addendum' ? <>Complementar <em>Briefing do Projeto</em></> : <>Preencher <em>Briefing Inicial do Projeto</em></>,
      meta: ['Coordenadas da marca', 'Requerido'],
      action: { label: 'brief', target: 'brief' }
    });
  }

  return (
    <div className="page" data-screen-label="Cliente · Dashboard">
      <div className="page-head">
        <div>
          <div className="kicker"><span>§ 01</span> DOCK · CLIENTE</div>
          <h1>Olá, <em>{companyName}.</em></h1>
          <p className="sub">Acompanhe os projetos em andamento, aprovações pendentes e próximas entregas. Cada movimento da equipe Dead Sailor fica registrado aqui.</p>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>{new Date().toLocaleString('pt-BR', {day:'numeric', month:'short', hour:'2-digit', minute:'2-digit'}).toUpperCase().replace(',',' ·')}</span></div>
          <div className="actions">
            <Button kind="ghost" onClick={() => navigate('files')}>Arquivos finais</Button>
            {d.clientProjects.length > 0 && <Button kind="primary" arrow onClick={() => navigate('project-' + d.clientProjects[0].id)}>Abrir {d.clientProjects[0].titleShort || 'Projeto'}</Button>}
          </div>
        </div>
      </div>

      {/* Briefing Pendente Callout Alert */}
      {hasPendingBriefing && (
        <div className="card" style={{ borderColor: 'var(--signal)', background: 'rgba(0, 255, 102, 0.03)', marginBottom: 32 }}>
          <span className="corner tl"></span><span className="corner tr"></span>
          <span className="corner bl"></span><span className="corner br"></span>
          <div className="ptop">
            <span><span className="live" style={{ background: '#00FF66', color: '#08090a', padding: '2px 6px', fontWeight: 600, fontSize: 9 }}>{calloutKicker}</span></span>
            <span>// {calloutStatus}</span>
          </div>
          <div className="pbody" style={{ padding: '24px 28px' }}>
            <h3 style={{ fontFamily: 'var(--serif)', fontSize: 24, fontStyle: 'italic', fontWeight: 400, color: 'var(--bone)', marginBottom: 8 }}>
              {calloutTitle}
            </h3>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--bone-dim)', fontWeight: 300, marginBottom: 20 }}>
              {calloutDesc}
            </p>
            <Button kind="signal" arrow onClick={() => navigate('brief')}>{calloutBtnLabel}</Button>
          </div>
        </div>
      )}

      {/* Stats */}
      <div className="stats-row">
        {d.clientStats.map((s,i) => <Stat key={i} {...s} em={i===1} />)}
      </div>

      {/* Próximos movimentos */}
      <SectionHd title={<>Próximos <em>movimentos</em></>} n="ROUTE 014" right={<span className="mono-sm">{timelineItems.length} ITENS</span>} />
      <div className="card" style={{marginBottom: 32}}>
        <div className="ptop">
          <span><span className="live">EM ROTA</span> · APROVAÇÕES E ENTREGAS</span>
          <span>// PRÓXIMOS 7 DIAS</span>
        </div>
        <div className="pbody">
          <div className="timeline">
            {timelineItems.map((m,i) => (
              <div key={i} className="tl-item">
                <div className={`stamp ${m.urgent?'urgent':''}`}>
                  <span className="d">{m.day}</span>
                  <span className="m">{m.month}</span>
                </div>
                <div className="body">
                  <div className="ttl">{m.ttl}</div>
                  <div className="meta">
                    {m.meta.map((mm,k) => <span key={k} className={k>0?'sep':''}>{mm}</span>)}
                  </div>
                </div>
                <div className="act">
                  <Button kind={m.urgent?'signal':'default'} size="sm" arrow
                    onClick={() => navigate(m.action.target)}>{m.action.label}</Button>
                </div>
              </div>
            ))}
            {timelineItems.length === 0 && (
              <div style={{ padding: '48px 24px', textAlign: 'center', fontFamily: 'var(--mono)', color: 'var(--fog-2)', fontSize: 11, borderLeft: '2px dashed rgba(232, 226, 216, 0.05)', letterSpacing: '1px' }}>
                // NENHUM MOVIMENTO EM ROTA · AGUARDANDO ANÁLISE DO BRIEFING E LIBERAÇÃO DO CRONOGRAMA PELA AGÊNCIA
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Projetos ativos + Histórico */}
      <div className="two-col">
        <div>
          <SectionHd title={<>Projetos <em>ativos</em></>} n="02 EM CURSO" />
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
            {d.clientProjects.map(p => (
              <ProjectCard key={p.id} p={p} onOpen={() => navigate('project-'+p.id)} />
            ))}
          </div>
        </div>
        <div>
          <SectionHd title={<>Histórico <em>recente</em></>} n="LOG 014" />
          <div className="card">
            <div className="pbody" style={{padding: 0}}>
              <div className="activity" style={{padding: '0 22px'}}>
                {d.clientProjects && d.clientProjects[0] && d.clientProjects[0].activity ? (
                  d.clientProjects[0].activity.map((a, i) => (
                    <div key={i} className={`act-item ${i===0?'fresh':''}`}>
                      <span className="ico">{Ico.dot()}</span>
                      <span className="txt">
                        {a.txt} <span className="who">· {a.who}</span>
                      </span>
                      <span className="when">{a.when ? a.when.split('·')[0].trim() : ''}</span>
                    </div>
                  ))
                ) : (
                  <div style={{padding: '16px 0', color: 'var(--fog-2)', fontFamily: 'var(--mono)', fontSize: 10}}>// NENHUM REGISTRO DE ATIVIDADE</div>
                )}
              </div>
            </div>
            <div className="pbot">
              <span>// FULL LOG</span>
              <span>VER COMPLETO</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.ClientDashboard = ClientDashboard;


// =========================================================
// FIRST ACCESS · BRIEFING PENDENTE
// =========================================================
function FirstAccess({ navigate }){
  const steps = [
    { n:'01', name:'Contexto', state:'done' },
    { n:'02', name:'Objetivos', state:'current' },
    { n:'03', name:'Público', state:'' },
    { n:'04', name:'Direção visual', state:'' },
    { n:'05', name:'Entregáveis', state:'' },
    { n:'06', name:'Arquivos e envio', state:'' },
  ];
  return (
    <div className="page" data-screen-label="Cliente · Primeiro acesso">
      <div className="page-head">
        <div>
          <div className="kicker"><span>§ NOVO</span> BRIEFING PENDENTE</div>
          <h1>Um <em>novo território</em><br/>aguarda você.</h1>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>DS / TERRITORY 014 · INÍCIO</span></div>
        </div>
      </div>

      <div className="first-access">
        <span className="corner-tl"></span><span className="corner-tr"></span>
        <span className="corner-bl"></span><span className="corner-br"></span>
        <div className="grid">
          <div className="left">
            <div className="kicker">// BRIEFING 001 · CONTEXTO</div>
            <h1>Toda jornada<br/>começa com<br/>um <em>bom mapa.</em></h1>
            <p>Antes de iniciarmos seu projeto, precisamos compreender o contexto, os objetivos e as referências que irão orientar nosso trabalho. O briefing é a primeira coordenada — sem ele, qualquer rota é palpite.</p>

            <div className="meta-row">
              <div className="m"><span className="l">// Projeto</span><span className="v">Nova Identidade Visual</span></div>
              <div className="m"><span className="l">// Serviço</span><span className="v">Branding Estratégico</span></div>
              <div className="m"><span className="l">// Tempo estimado</span><span className="v">~ 10 min</span></div>
            </div>

            <div className="actions">
              <Button kind="primary" arrow onClick={() => navigate('brief-form')}>Iniciar briefing</Button>
              <Button kind="ghost" onClick={() => navigate('home')}>Salvar para depois</Button>
            </div>
          </div>

          <div className="right">
            <div className="route-map">
              {steps.map(s => (
                <div key={s.n} className={`route-step ${s.state}`}>
                  <span className="node"></span>
                  <div className="info">
                    <span className="n">ETAPA {s.n}</span>
                    <div className="nm">{s.name}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.FirstAccess = FirstAccess;


// =========================================================
// BRIEFING FORM (multi-step)
// =========================================================
function BriefingForm({ navigate }){
  const [step, setStep] = useState(0);
  const [files, setFiles] = useState([]);
  const [confirmed, setConfirmed] = useState(false);

  const fileInputRef = React.useRef(null);

  const handleFiles = async (fileList) => {
    const list = Array.from(fileList);
    for (const file of list) {
      // Limit file size to 50 MB due to direct GAS upload integration
      if (file.size > 50 * 1024 * 1024) {
        alert(`O arquivo "${file.name}" excede o limite máximo de 50 MB para envio direto. Como o arquivo é muito grande, por favor faça o upload no seu serviço de preferência (WeTransfer, Google Drive, Dropbox, etc.) e insira o link no campo "Link para envio de arquivos grandes (> 50MB)" no final desta página.`);
        continue;
      }

      // Extract folder ID from drive link
      const folderUrlOrId = clientRecord?.drive_link || '';
      let folderId = '';
      if (folderUrlOrId) {
        if (!folderUrlOrId.includes('/') && !folderUrlOrId.includes('?')) {
          folderId = folderUrlOrId.trim();
        } else {
          const folderMatch = folderUrlOrId.match(/\/folders\/([a-zA-Z0-9-_]+)/);
          if (folderMatch) folderId = folderMatch[1];
          else {
            const idMatch = folderUrlOrId.match(/[?&]id=([a-zA-Z0-9-_]+)/);
            if (idMatch) folderId = idMatch[1];
            else folderId = folderUrlOrId.trim();
          }
        }
      }

      if (!folderId) {
        alert(`Nenhuma pasta do Google Drive configurada para o seu cadastro. Por favor, utilize o banner ou entre em contato com nosso suporte.`);
        continue;
      }

      let sizeStr = '';
      if (file.size < 1024) sizeStr = file.size + ' B';
      else if (file.size < 1024 * 1024) sizeStr = (file.size / 1024).toFixed(1) + ' KB';
      else sizeStr = (file.size / (1024 * 1024)).toFixed(1) + ' MB';

      const tempId = 'up-' + Date.now() + '-' + Math.random().toString(36).substr(2, 5);
      
      const uploadingEntry = {
        id: tempId,
        name: file.name,
        size: sizeStr,
        when: 'Enviando ao Google Drive... 0%',
        icon: '🔄',
        loading: true,
        progress: 0
      };
      
      setFiles(prev => [...prev, uploadingEntry]);

      try {
        const xhr = new XMLHttpRequest();
        const gasUrl = 'https://script.google.com/macros/s/AKfycbw6XRF_-_L-NbCwUFthL6iKP7mY5x66bchWZQO99bS07a2xuVKNPrz0XP5VLBS5y7ri/exec';

        xhr.open('POST', gasUrl, true);

        xhr.upload.onprogress = (e) => {
          if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100);
            setFiles(prev => prev.map(f => f.id === tempId ? {
              ...f,
              progress: percent,
              when: `Enviando ao Google Drive... ${percent}%`
            } : f));
          }
        };

        xhr.onload = () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            try {
              const res = JSON.parse(xhr.responseText);
              if (res.success || res.id || res.fileId) {
                setFiles(prev => prev.map(f => f.id === tempId ? {
                  name: res.name || file.name,
                  size: sizeStr,
                  when: new Date().toLocaleDateString('pt-BR') + ' · ' + new Date().toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'}),
                  icon: Ico.file ? Ico.file() : '📄',
                  url: res.webViewLink || res.url,
                  fileId: res.id || res.fileId,
                  loading: false
                } : f));
              } else {
                alert(`Erro ao subir o arquivo "${file.name}": ` + (res.error || 'Erro inesperado no servidor.'));
                setFiles(prev => prev.filter(f => f.id !== tempId));
              }
            } catch (err) {
              alert(`Erro ao processar resposta para o arquivo "${file.name}".`);
              setFiles(prev => prev.filter(f => f.id !== tempId));
            }
          } else {
            alert(`Erro ao subir o arquivo "${file.name}": Status ${xhr.status}`);
            setFiles(prev => prev.filter(f => f.id !== tempId));
          }
        };

        xhr.onerror = () => {
          alert(`Erro de rede ao subir o arquivo "${file.name}".\n\nPor favor, certifique-se de que a sua Implantação do Google Apps Script está configurada com acesso para "Qualquer pessoa" (Anyone) em vez de "Apenas eu".\n\nComo alternativa, você pode fazer o upload deste arquivo na pasta do Drive (banner verde no topo) e colocar o link dele no campo abaixo!`);
          setFiles(prev => prev.filter(f => f.id !== tempId));
        };

        // Convert file to Base64 using FileReader
        const fileBase64 = await new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result.split(',')[1]);
          reader.onerror = (e) => reject(e);
        });

        // Use JSON payload to avoid 4MB form limit of e.parameter in Google Apps Script
        const payload = {
          base64: fileBase64,
          file: fileBase64,
          filename: file.name,
          name: file.name,
          mimeType: file.type || 'application/octet-stream',
          type: file.type || 'application/octet-stream',
          folderId: folderId,
          folder: folderId
        };

        xhr.send(JSON.stringify(payload));
      } catch (err) {
        alert(`Erro ao ler o arquivo "${file.name}": ` + err.message);
        setFiles(prev => prev.filter(f => f.id !== tempId));
      }
    }
  };

  const handleFileChange = (e) => {
    if (e.target.files && e.target.files.length > 0) {
      handleFiles(e.target.files);
    }
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  const handleDrop = (e) => {
    e.preventDefault();
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      handleFiles(e.dataTransfer.files);
    }
  };

  const [currentUser, setCurrentUser] = useState(null);
  const [clientRecord, setClientRecord] = useState(null);
  React.useEffect(() => {
    API.me().then(async (usr) => {
      setCurrentUser(usr);
      if (usr && usr.company) {
        try {
          await DATA.refreshClients();
          const record = DATA.clients.find(c => c.name === usr.company || c.contact_email === usr.email);
          if (record) {
            setClientRecord(record);
          }

          // Fetch user's existing briefing from Supabase
          const briefs = await API.getBriefings();
          if (briefs && briefs.length > 0) {
            const lastBriefing = briefs[0];
            const key = `ds_briefing_draft_${usr.id}`;
            const hasLocalDraft = localStorage.getItem(key);
            
            // Prefill only if there is no local in-progress autosave draft
            if (!hasLocalDraft && lastBriefing) {
              let bData = {};
              try {
                bData = typeof lastBriefing.briefing_data === 'string' 
                  ? JSON.parse(lastBriefing.briefing_data) 
                  : lastBriefing.briefing_data;
              } catch(e) {}
              
              if (bData && bData.blocks) {
                bData.blocks.forEach(blk => {
                  if (blk.title.includes('Contexto') || blk.n === '01') {
                    blk.qa.forEach(item => {
                      if (item.q.includes('sobre sua empresa')) setCompanyHistory(item.a || '');
                      if (item.q.includes('problema')) setProblem(item.a || '');
                      if (item.q.includes('motivou')) setMotivation(item.a || '');
                      if (item.q.includes('percepção')) setPerception(item.a || '');
                    });
                  }
                  if (blk.title.includes('Objetivos') || blk.n === '02') {
                    blk.qa.forEach(item => {
                      if (item.q.includes('principal objetivo')) setMainObjective(item.a || '');
                      if (item.q.includes('sucesso')) setSuccessMetric(item.a || '');
                      if (item.q.includes('meta específica')) setSpecificGoal(item.a || '');
                      if (item.q.includes('Data importante')) setLaunchDate(item.a || '');
                    });
                  }
                  if (blk.title.includes('Público') || blk.n === '03') {
                    blk.qa.forEach(item => {
                      if (item.q.includes('Para quem')) setPrimaryAudience(item.a || '');
                      if (item.q.includes('valoriza')) setAudienceValues(item.a || '');
                      if (item.q.includes('dores')) setAudiencePains(item.a || '');
                      if (item.q.includes('secundários')) setSecondaryAudience(item.a || '');
                    });
                  }
                  if (blk.title.includes('Referências') || blk.n === '04') {
                    blk.qa.forEach(item => {
                      if (item.q.includes('Marcas e sites')) setInspirations(item.a || '');
                      if (item.q.includes('Estilo visual')) setAvoidStyle(item.a || '');
                      if (item.q.includes('Cores')) setAvoidColors(item.a || '');
                      if (item.q.includes('Links de referência')) setReferenceLinks(item.a || '');
                    });
                  }
                  if (blk.title.includes('Entregáveis') || blk.n === '05') {
                    blk.qa.forEach(item => {
                      if (item.q.includes('O que precisa')) setDeliverablesList(item.a || '');
                      if (item.q.includes('Onde os materiais')) setMaterialChannels(item.a || '');
                      if (item.q.includes('Quais formatos')) setMaterialFormats(item.a || '');
                      if (item.q.includes('Especificações')) setTechnicalSpecs(item.a || '');
                    });
                  }
                  if (blk.title.includes('Observações') || blk.n === '06') {
                    blk.qa.forEach(item => {
                      if (item.q.includes('Link para arquivos')) setExternalLink(item.a || '');
                      if (item.q.includes('Observações finais')) setFinalNotes(item.a || '');
                    });
                  }
                });
              }
            }
          }
        } catch (err) {
          console.warn('Erro ao buscar rascunho de briefing no Supabase:', err);
        }
      }
    }).catch(() => {});
  }, []);

  // Step 0: General Info
  const [companyName, setCompanyName] = useState('');
  const [contactName, setContactName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [website, setWebsite] = useState('');
  const [instagram, setInstagram] = useState('');
  const [projectName, setProjectName] = useState('');
  const [service, setService] = useState('branding');

  // Restore briefing draft progress on load
  React.useEffect(() => {
    if (currentUser) {
      const key = `ds_briefing_draft_${currentUser.id}`;
      try {
        const saved = localStorage.getItem(key);
        if (saved) {
          const draft = JSON.parse(saved);
          if (draft.step !== undefined) setStep(draft.step);
          if (draft.companyName !== undefined) setCompanyName(draft.companyName);
          if (draft.contactName !== undefined) setContactName(draft.contactName);
          if (draft.email !== undefined) setEmail(draft.email);
          if (draft.phone !== undefined) setPhone(draft.phone);
          if (draft.website !== undefined) setWebsite(draft.website);
          if (draft.instagram !== undefined) setInstagram(draft.instagram);
          if (draft.projectName !== undefined) setProjectName(draft.projectName);
          if (draft.service !== undefined) setService(draft.service);
          
          if (draft.companyHistory !== undefined) setCompanyHistory(draft.companyHistory);
          if (draft.problem !== undefined) setProblem(draft.problem);
          if (draft.motivation !== undefined) setMotivation(draft.motivation);
          if (draft.perception !== undefined) setPerception(draft.perception);
          
          if (draft.mainObjective !== undefined) setMainObjective(draft.mainObjective);
          if (draft.successMetric !== undefined) setSuccessMetric(draft.successMetric);
          if (draft.specificGoal !== undefined) setSpecificGoal(draft.specificGoal);
          if (draft.launchDate !== undefined) setLaunchDate(draft.launchDate);
          
          if (draft.primaryAudience !== undefined) setPrimaryAudience(draft.primaryAudience);
          if (draft.audienceValues !== undefined) setAudienceValues(draft.audienceValues);
          if (draft.audiencePains !== undefined) setAudiencePains(draft.audiencePains);
          if (draft.secondaryAudience !== undefined) setSecondaryAudience(draft.secondaryAudience);
          
          if (draft.inspirations !== undefined) setInspirations(draft.inspirations);
          if (draft.avoidStyle !== undefined) setAvoidStyle(draft.avoidStyle);
          if (draft.avoidColors !== undefined) setAvoidColors(draft.avoidColors);
          if (draft.referenceLinks !== undefined) setReferenceLinks(draft.referenceLinks);
          
          if (draft.deliverablesList !== undefined) setDeliverablesList(draft.deliverablesList);
          if (draft.materialChannels !== undefined) setMaterialChannels(draft.materialChannels);
          if (draft.materialFormats !== undefined) setMaterialFormats(draft.materialFormats);
          if (draft.technicalSpecs !== undefined) setTechnicalSpecs(draft.technicalSpecs);
          
          if (draft.externalLink !== undefined) setExternalLink(draft.externalLink);
          if (draft.finalNotes !== undefined) setFinalNotes(draft.finalNotes);
        } else {
          // Initialize with basic user info if no draft is found
          setCompanyName(currentUser.company || '');
          setContactName(currentUser.name || '');
          setEmail(currentUser.email || '');
          setPhone(currentUser.phone || '');
          setProjectName('Novo Projeto — ' + (currentUser.company || ''));
        }
      } catch (e) {
        console.warn('Erro ao restaurar rascunho de briefing:', e);
      }
    }
  }, [currentUser]);

  // Autosave briefing draft progress on change
  React.useEffect(() => {
    if (currentUser) {
      const key = `ds_briefing_draft_${currentUser.id}`;
      const draft = {
        step,
        companyName,
        contactName,
        email,
        phone,
        website,
        instagram,
        projectName,
        service,
        companyHistory,
        problem,
        motivation,
        perception,
        mainObjective,
        successMetric,
        specificGoal,
        launchDate,
        primaryAudience,
        audienceValues,
        audiencePains,
        secondaryAudience,
        inspirations,
        avoidStyle,
        avoidColors,
        referenceLinks,
        deliverablesList,
        materialChannels,
        materialFormats,
        technicalSpecs,
        externalLink,
        finalNotes
      };
      localStorage.setItem(key, JSON.stringify(draft));
    }
  }, [
    currentUser, step, companyName, contactName, email, phone, website, instagram, projectName, service,
    companyHistory, problem, motivation, perception, mainObjective, successMetric, specificGoal, launchDate,
    primaryAudience, audienceValues, audiencePains, secondaryAudience, inspirations, avoidStyle, avoidColors,
    referenceLinks, deliverablesList, materialChannels, materialFormats, technicalSpecs, externalLink, finalNotes
  ]);

  // Step 1: Context
  const [companyHistory, setCompanyHistory] = useState('');
  const [problem, setProblem] = useState('');
  const [motivation, setMotivation] = useState('');
  const [perception, setPerception] = useState('');

  // Step 2: Objectives
  const [mainObjective, setMainObjective] = useState('');
  const [successMetric, setSuccessMetric] = useState('');
  const [specificGoal, setSpecificGoal] = useState('');
  const [launchDate, setLaunchDate] = useState('');

  // Step 3: Audience
  const [primaryAudience, setPrimaryAudience] = useState('');
  const [audienceValues, setAudienceValues] = useState('');
  const [audiencePains, setAudiencePains] = useState('');
  const [secondaryAudience, setSecondaryAudience] = useState('');

  // Step 4: References
  const [inspirations, setInspirations] = useState('');
  const [avoidStyle, setAvoidStyle] = useState('');
  const [avoidColors, setAvoidColors] = useState('');
  const [referenceLinks, setReferenceLinks] = useState('vincentvanduysen.com\nstudioko.fr\n6a.co.uk');

  // Step 5: Deliverables
  const [deliverablesList, setDeliverablesList] = useState('');
  const [materialChannels, setMaterialChannels] = useState('');
  const [materialFormats, setMaterialFormats] = useState('');
  const [technicalSpecs, setTechnicalSpecs] = useState('');

  // Step 6: Final Notes
  const [finalNotes, setFinalNotes] = useState('');
  const [externalLink, setExternalLink] = useState('');

  const steps = [
    { n:'01', label:'Informações gerais' },
    { n:'02', label:'Contexto da marca' },
    { n:'03', label:'Objetivos' },
    { n:'04', label:'Público' },
    { n:'05', label:'Direção visual' },
    { n:'06', label:'Entregáveis' },
    { n:'07', label:'Arquivos e envio' },
  ];

  const progress = ((step+1) / steps.length) * 100;

  const companyHeaderName = companyName || 'Cliente';

  return (
    <div className="page" data-screen-label="Cliente · Briefing">
      <div className="page-head">
        <div>
          <div className="kicker"><span>&sect; {steps[step].n}</span> BRIEFING · {steps[step].label.toUpperCase()}</div>
          <h1>Briefing — <em>{companyHeaderName}</em></h1>
          <p className="sub">Sete etapas, ~10 minutos. Você pode salvar como rascunho a qualquer momento e voltar depois.</p>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>RASCUNHO · SALVO ÀS {new Date().toLocaleTimeString('pt-BR', {hour:'2-digit', minute:'2-digit'})}</span></div>
        </div>
      </div>

      <div className="brief-layout">
        <aside className="brief-side">
          <div className="head">
            <span>// ETAPAS</span>
            <span className="v">{step+1}/{steps.length}</span>
          </div>
          {steps.map((s, i) => (
            <div key={s.n}
              className={`step ${i < step ? 'done' : ''} ${i === step ? 'current' : ''}`}
              onClick={() => setStep(i)}>
              <span className="n">{s.n}</span>
              <span>{s.label}</span>
              <span className="ic">{i < step ? Ico.check() : i === step ? Ico.dot() : Ico.dash()}</span>
            </div>
          ))}
        </aside>

        <div className="brief-body">
          <div className="brief-step">
            <div className="step-head">
              <div className="kicker">// ETAPA {steps[step].n} / {String(steps.length).padStart(2,'0')}</div>
              <h2>{steps[step].label}</h2>
            </div>
            {step === 0 && (
              <div className="form-stack">
                <div className="form-grid-2">
                  <Field label="Nome da empresa" required><input value={companyName} onChange={e => setCompanyName(e.target.value)} placeholder="Ex: Aurora Studio" /></Field>
                  <Field label="Nome do responsável" required><input value={contactName} onChange={e => setContactName(e.target.value)} placeholder="Ex: Helena Vidal" /></Field>
                  <Field label="E-mail" required><input value={email} onChange={e => setEmail(e.target.value)} placeholder="Ex: helena@aurorastudio.com" /></Field>
                  <Field label="Telefone"><input value={phone} onChange={e => setPhone(e.target.value)} placeholder="+55 11 9 0000 0000" /></Field>
                  <Field label="Site"><input value={website} onChange={e => setWebsite(e.target.value)} placeholder="Ex: aurorastudio.com" /></Field>
                  <Field label="Instagram"><input value={instagram} onChange={e => setInstagram(e.target.value)} placeholder="Ex: @aurorastudio" /></Field>
                </div>
                <div className="form-grid-2">
                  <Field label="Nome do projeto" required><input value={projectName} onChange={e => setProjectName(e.target.value)} /></Field>
                  <Field label="Tipo de serviço" required>
                    <select value={service} onChange={e => setService(e.target.value)}>
                      <option value="branding">Branding estratégico</option>
                      <option value="campaign">Campanha</option>
                      <option value="website">Website</option>
                      <option value="editorial">Editorial</option>
                      <option value="naming">Naming</option>
                    </select>
                  </Field>
                </div>
              </div>
            )}
            {step === 1 && (
              <div className="form-stack">
                <Field label="Conte um pouco sobre sua empresa" required>
                  <textarea placeholder="Histórico, posicionamento atual, o que vocês fazem hoje..." value={companyHistory} onChange={e => setCompanyHistory(e.target.value)}></textarea>
                </Field>
                <Field label="Qual problema este projeto precisa resolver?" required>
                  <textarea placeholder="Diga, em poucas frases, o que dói hoje." value={problem} onChange={e => setProblem(e.target.value)}></textarea>
                </Field>
                <Field label="O que motivou esta contratação agora?">
                  <textarea placeholder="Lançamento, mudança de posicionamento, novo público..." value={motivation} onChange={e => setMotivation(e.target.value)}></textarea>
                </Field>
                <Field label="Existe alguma percepção atual da marca que precisa ser alterada?">
                  <textarea placeholder="Como as pessoas descrevem hoje, vs como deveriam descrever." value={perception} onChange={e => setPerception(e.target.value)}></textarea>
                </Field>
              </div>
            )}
            {step === 2 && (
              <div className="form-stack">
                <Field label="Qual é o principal objetivo deste projeto?" required>
                  <textarea placeholder="Um único objetivo é melhor do que cinco." value={mainObjective} onChange={e => setMainObjective(e.target.value)}></textarea>
                </Field>
                <div className="form-grid-2">
                  <Field label="Como você saberá que teve sucesso?"><textarea placeholder="Métricas, percepções, sinais." value={successMetric} onChange={e => setSuccessMetric(e.target.value)}></textarea></Field>
                  <Field label="Existe alguma meta específica?"><textarea placeholder="Vendas, audiência, posicionamento." value={specificGoal} onChange={e => setSpecificGoal(e.target.value)}></textarea></Field>
                </div>
                <Field label="Data importante de lançamento, evento ou apresentação"><input placeholder="DD / MM / AAAA" value={launchDate} onChange={e => setLaunchDate(e.target.value)} /></Field>
              </div>
            )}
            {step === 3 && (
              <div className="form-stack">
                <Field label="Para quem este projeto será criado?" required>
                  <textarea placeholder="Descreva o público primário em até 3 linhas." value={primaryAudience} onChange={e => setPrimaryAudience(e.target.value)}></textarea>
                </Field>
                <Field label="O que esse público valoriza?">
                  <textarea placeholder="Comportamentos, repertórios, desejos." value={audienceValues} onChange={e => setAudienceValues(e.target.value)}></textarea>
                </Field>
                <div className="form-grid-2">
                  <Field label="Existem dores ou comportamentos relevantes?"><textarea value={audiencePains} onChange={e => setAudiencePains(e.target.value)} /></Field>
                  <Field label="Há públicos secundários?"><textarea value={secondaryAudience} onChange={e => setSecondaryAudience(e.target.value)} /></Field>
                </div>
              </div>
            )}
            {step === 4 && (
              <div className="form-stack">
                <Field label="Marcas, sites ou projetos que inspiram">
                  <textarea placeholder="Mínimo 3 referências, com 1 frase explicando o porquê." value={inspirations} onChange={e => setInspirations(e.target.value)}></textarea>
                </Field>
                <div className="form-grid-2">
                  <Field label="Estilo visual a evitar"><textarea placeholder="Tropes, clichês, estéticas indesejadas." value={avoidStyle} onChange={e => setAvoidStyle(e.target.value)} /></Field>
                  <Field label="Cores, elementos ou símbolos a não utilizar"><textarea value={avoidColors} onChange={e => setAvoidColors(e.target.value)} /></Field>
                </div>
                <Field label="Links de referência" hint="Adicione um link por linha. Você poderá adicionar quantos quiser.">
                  <textarea value={referenceLinks} onChange={e => setReferenceLinks(e.target.value)} style={{minHeight:120, fontFamily:'var(--mono)', fontSize:'12px'}} />
                </Field>
              </div>
            )}
            {step === 5 && (
              <div className="form-stack">
                <Field label="O que precisa ser criado?" required>
                  <textarea placeholder="Liste todos os entregáveis esperados." value={deliverablesList} onChange={e => setDeliverablesList(e.target.value)}></textarea>
                </Field>
                <div className="form-grid-2">
                  <Field label="Onde os materiais serão utilizados?"><textarea value={materialChannels} onChange={e => setMaterialChannels(e.target.value)} /></Field>
                  <Field label="Quais formatos ou dimensões?"><textarea value={materialFormats} onChange={e => setMaterialFormats(e.target.value)} /></Field>
                </div>
                <Field label="Existe alguma especificação técnica obrigatória?">
                  <textarea placeholder="CMS, frameworks, ferramentas, formatos finais." value={technicalSpecs} onChange={e => setTechnicalSpecs(e.target.value)}></textarea>
                </Field>
              </div>
            )}
             {step === 6 && (
              <div className="form-stack">
                {clientRecord && clientRecord.drive_link ? (
                  <div className="card" style={{borderColor: 'var(--signal)', background: 'rgba(0, 255, 102, 0.03)', padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 12}}>
                    <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
                      <span style={{color: 'var(--signal)', display: 'inline-flex'}}>{Ico.link({ width: 14, height: 14 })}</span>
                      <strong style={{color: 'var(--bone)', fontSize: 13, letterSpacing: '1px', fontFamily: 'var(--mono)'}}>// PASTA DE ENVIOS DO GOOGLE DRIVE</strong>
                    </div>
                    <p style={{color: 'var(--fog)', fontSize: 13, lineHeight: '1.6', margin: 0}}>
                      Para sua comodidade, disponibilizamos uma pasta dedicada no Google Drive para você subir todos os materiais de referências, manual de marca, arquivos editáveis, apresentações e fotos de inspiração. <strong>Basta clicar no botão abaixo para abrir a pasta e fazer o upload de todos os seus arquivos diretamente lá.</strong>
                    </p>
                    <div style={{marginTop: 6}}>
                      <Button kind="signal" arrow onClick={() => window.open(clientRecord.drive_link, '_blank')}>
                        Abrir pasta do Drive para upload
                      </Button>
                    </div>
                  </div>
                ) : (
                  <div className="card" style={{borderColor: 'var(--fog)', background: 'rgba(255, 255, 255, 0.02)', padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 12}}>
                    <div style={{display: 'flex', alignItems: 'center', gap: 10}}>
                      <span style={{color: 'var(--fog)', display: 'inline-flex'}}>{Ico.link({ width: 14, height: 14 })}</span>
                      <strong style={{color: 'var(--bone)', fontSize: 13, letterSpacing: '1px', fontFamily: 'var(--mono)'}}>// PASTA EXCLUSIVA DO GOOGLE DRIVE</strong>
                    </div>
                    <p style={{color: 'var(--fog)', fontSize: 13, lineHeight: '1.6', margin: 0}}>
                      Sua pasta exclusiva do Google Drive está sendo configurada por nossa equipe. Por favor, utilize o campo abaixo para colar links de compartilhamento com seus materiais de referência.
                    </p>
                  </div>
                )}

                <Field label="Link para envio de arquivos de referência" hint="Suba seus arquivos no WeTransfer, Google Drive pessoal, Dropbox ou similar e cole o link de compartilhamento abaixo para nossa equipe acessar.">
                  <input value={externalLink} onChange={e => setExternalLink(e.target.value)} placeholder="https://wetransfer.com/downloads/... ou link do seu Drive/Dropbox" />
                </Field>
                <Field label="Observações finais">
                  <textarea placeholder="Algo que ainda não cabe nas perguntas acima, mas é importante." value={finalNotes} onChange={e => setFinalNotes(e.target.value)}></textarea>
                </Field>
                <Check checked={confirmed} onChange={setConfirmed}>
                  Confirmo que as informações enviadas representam o escopo inicial solicitado. Qualquer expansão será tratada como novo escopo.
                </Check>
              </div>
            )}
          </div>

          <div className="brief-nav">
            <div>
              <Button kind="ghost" onClick={() => navigate('home')}>Salvar para depois</Button>
            </div>
            <div className="stepcount">
              <span>{step+1} / {steps.length}</span>
              <span className="bar"><span className="fill" style={{width: progress+'%'}}></span></span>
            </div>
            <div style={{display:'flex', gap:10}}>
              {step > 0 && <Button onClick={() => setStep(step-1)}>Voltar</Button>}
              {step < steps.length-1 && <Button kind="primary" arrow onClick={() => setStep(step+1)}>Próxima etapa</Button>}
              {step === steps.length-1 && <Button kind="primary" arrow disabled={!confirmed} onClick={async () => {
                try {
                  const cleanClientId = clientRecord?.id || currentUser?.id || 'client-' + Date.now();
                  const payload = {
                    client_id: cleanClientId,
                    client_name: companyName,
                    project_name: projectName,
                    service: service === 'branding' ? 'Branding Estratégico' : service === 'campaign' ? 'Campanha' : service === 'website' ? 'Website' : service === 'editorial' ? 'Editorial' : 'Naming',
                    priority: 'med',
                    briefing_data: {
                      blocks: [
                        {
                          n: '01', title: 'Contexto da empresa',
                          qa: [
                            { q: 'Conte um pouco sobre sua empresa.', a: companyHistory },
                            { q: 'Qual problema este projeto precisa resolver?', a: problem },
                            { q: 'O que motivou esta contratação agora?', a: motivation },
                            { q: 'Existe alguma percepção atual da marca que precisa ser alterada?', a: perception }
                          ]
                        },
                        {
                          n: '02', title: 'Objetivos',
                          qa: [
                            { q: 'Qual é o principal objetivo deste projeto?', a: mainObjective },
                            { q: 'Como você saberá que este trabalho teve sucesso?', a: successMetric },
                            { q: 'Existe alguma meta específica?', a: specificGoal },
                            { q: 'Data importante de lançamento, evento ou apresentação', a: launchDate }
                          ]
                        },
                        {
                          n: '03', title: 'Público',
                          qa: [
                            { q: 'Para quem este projeto será criado?', a: primaryAudience },
                            { q: 'O que esse público valoriza?', a: audienceValues },
                            { q: 'Existem dores ou comportamentos relevantes?', a: audiencePains },
                            { q: 'Há públicos secundários?', a: secondaryAudience }
                          ]
                        },
                        {
                          n: '04', title: 'Referências',
                          qa: [
                            { q: 'Marcas e sites que inspiram?', a: inspirations },
                            { q: 'Estilo visual a evitar?', a: avoidStyle },
                            { q: 'Cores, elementos ou símbolos a não utilizar?', a: avoidColors },
                            { q: 'Links de referência', a: referenceLinks }
                          ]
                        },
                        {
                          n: '05', title: 'Entregáveis solicitados',
                          qa: [
                            { q: 'O que precisa ser criado?', a: deliverablesList },
                            { q: 'Onde os materiais serão utilizados?', a: materialChannels },
                            { q: 'Quais formatos ou dimensões?', a: materialFormats },
                            { q: 'Especificações técnicas?', a: technicalSpecs }
                          ]
                        },
                        {
                          n: '06', title: 'Observações finais',
                          qa: [
                            { q: 'Link para arquivos grandes (> 50MB)', a: externalLink },
                            { q: 'Observações finais', a: finalNotes }
                          ]
                        }
                      ],
                      files: files,
                      external_files_link: externalLink
                    }
                  };
                  await API.createBriefing(payload);
                  if (currentUser) {
                    localStorage.removeItem(`ds_briefing_draft_${currentUser.id}`);
                  }
                  navigate('brief-confirmed');
                } catch (e) {
                  alert('Erro ao enviar briefing: ' + e.message);
                }
              }}>Enviar briefing</Button>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.BriefingForm = BriefingForm;


// =========================================================
// BRIEFING CONFIRMADO
// =========================================================
function BriefingConfirmed({ navigate }){
  const [briefing, setBriefing] = useState(null);
  const [showSummary, setShowSummary] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);
  const [requesting, setRequesting] = useState(false);

  useEffect(() => {
    API.me().then(usr => {
      setCurrentUser(usr);
      API.getBriefings().then(briefs => {
        if (briefs && briefs.length > 0) {
          setBriefing(briefs[0]);
        }
      }).catch(console.warn);
    }).catch(console.warn);
  }, []);

  const handleRequestAlteration = async () => {
    if (!briefing) return;
    const confirm = window.confirm("Deseja solicitar à Dead Sailor a devolução deste briefing para você poder editá-lo novamente?");
    if (!confirm) return;

    setRequesting(true);
    try {
      await API.updateBriefing(briefing.id, {
        status: 'alteration-requested',
        status_label: 'Alteração solicitada'
      });
      await API.addNotification('staff', 'Alteração de briefing solicitada', `${currentUser?.company || 'Cliente'} solicitou a devolução do briefing "${briefing.project_name || 'Novo Projeto'}" para alteração.`, '#/admin/briefings');
      alert("Solicitação enviada com sucesso! A agência irá devolver o briefing em instantes para que você possa editá-lo.");
      
      // Refresh local briefing state
      const updated = await API.getBriefing(briefing.id);
      setBriefing(updated);
    } catch(err) {
      alert("Erro ao enviar solicitação: " + err.message);
    } finally {
      setRequesting(false);
    }
  };

  // Parse briefing_data
  let bData = {};
  if (briefing && briefing.briefing_data) {
    try {
      bData = typeof briefing.briefing_data === 'string'
        ? JSON.parse(briefing.briefing_data)
        : briefing.briefing_data;
    } catch(e) {}
  }

  return (
    <div className="page" data-screen-label="Cliente · Briefing enviado">
      <div className="confirm-screen">
        <div className="seal">{Ico.check({width:32, height:32})}</div>
        <h1>Briefing <em>recebido.</em></h1>
        <p>Sua solicitação foi enviada para análise da nossa equipe. Assim que o escopo for validado, os entregáveis e prazos ficarão disponíveis neste portal.</p>
        <div className="meta">
          <div className="m"><span className="l">// Status</span><span className="v sig" style={{color: briefing?.status === 'alteration-requested' ? 'var(--signal)' : 'inherit'}}>{briefing?.status_label?.toUpperCase() || 'EM ANÁLISE'}</span></div>
          <div className="m"><span className="l">// Enviado em</span><span className="v">{briefing?.received || 'Recentemente'}</span></div>
          <div className="m"><span className="l">// Projeto</span><span className="v">{briefing?.project_name?.toUpperCase() || 'NOVO PROJETO'}</span></div>
          <div className="m"><span className="l">// Responsável</span><span className="v">DEAD SAILOR · DENIS</span></div>
        </div>
        <div className="actions">
          <Button kind="primary" arrow onClick={() => navigate('home')}>Voltar ao dashboard</Button>
          <Button kind="ghost" onClick={() => setShowSummary(true)}>Visualizar briefing enviado</Button>
        </div>
      </div>

      {showSummary && briefing && (
        <Modal wide title="RESUMO DO BRIEFING ENVIADO" onClose={() => setShowSummary(false)}
          footer={<>
            {briefing.status !== 'draft' && briefing.status !== 'alteration-requested' ? (
              <Button kind="default" arrow disabled={requesting} onClick={handleRequestAlteration}>
                {requesting ? 'Solicitando...' : 'Solicitar alteração para edição'}
              </Button>
            ) : briefing.status === 'alteration-requested' ? (
              <span className="mono" style={{color: 'var(--signal)', fontSize: 11, marginRight: 'auto'}}>// AGUARDANDO DEVOLUÇÃO DA AGÊNCIA PARA EDIÇÃO</span>
            ) : null}
            <Button kind="ghost" onClick={() => setShowSummary(false)}>Fechar resumo</Button>
          </>}>
          <div style={{display: 'flex', flexDirection: 'column', gap: 24, maxHeight: '60vh', overflowY: 'auto', paddingRight: 8}}>
            <div style={{borderBottom: '1px solid rgba(232, 226, 216, 0.08)', paddingBottom: 16}}>
              <div className="mono" style={{color: 'var(--fog)', fontSize: 10, marginBottom: 4}}>// DETALHES DO PROJETO</div>
              <h2 style={{fontFamily: 'var(--serif)', fontSize: 24, fontStyle: 'italic', fontWeight: 400, color: 'var(--bone)', margin: 0}}>{briefing.project_name}</h2>
              <div style={{display: 'flex', gap: 16, marginTop: 8, fontSize: 12, color: 'var(--bone-dim)'}}>
                <span><strong>Serviço:</strong> {briefing.service}</span>
                <span><strong>Status:</strong> {briefing.status_label}</span>
              </div>
            </div>

            {bData.blocks && bData.blocks.map(blk => (
              <div key={blk.n} style={{borderBottom: '1px solid rgba(232, 226, 216, 0.05)', paddingBottom: 20}}>
                <div style={{fontFamily: 'var(--mono)', color: 'var(--signal)', fontSize: 10, marginBottom: 8}}>// {blk.n} · {blk.title.toUpperCase()}</div>
                <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
                  {blk.qa.map((qa, i) => (
                    <div key={i}>
                      <div style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--bone)', marginBottom: 4}}>{qa.q}</div>
                      <div style={{fontSize: 13, lineHeight: '1.6', color: 'var(--fog)', whiteSpace: 'pre-wrap'}}>{qa.a || '—'}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}

            {briefing.external_files_link && (
              <div style={{borderBottom: '1px solid rgba(232, 226, 216, 0.05)', paddingBottom: 20}}>
                <div style={{fontFamily: 'var(--mono)', color: 'var(--signal)', fontSize: 10, marginBottom: 8}}>// LINK DE ARQUIVOS ANEXADOS</div>
                <div style={{background: 'rgba(255, 255, 255, 0.02)', border: '1px solid rgba(232, 226, 216, 0.08)', padding: '12px 16px', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
                  <span style={{fontSize: 12, fontFamily: 'var(--mono)', color: 'var(--bone)', wordBreak: 'break-all'}}>{briefing.external_files_link}</span>
                  <Button size="xs" onClick={() => window.open(briefing.external_files_link, '_blank')}>Abrir link</Button>
                </div>
              </div>
            )}
          </div>
        </Modal>
      )}
    </div>
  );
}
window.BriefingConfirmed = BriefingConfirmed;


// ==================
var API;
function ClientProject({ projectId, navigate }){
  const [projData, setProjData] = React.useState(null);
  const [tab, setTab] = useState('overview');
  const [showApprove, setShowApprove] = useState(false);
  const [showRevision, setShowRevision] = useState(false);
  const [showConfirmApprove, setShowConfirmApprove] = useState(false);
  const [toast, setToast] = useToast();

  const [activeDeliv, setActiveDeliv] = useState(null);
  const [feedback, setFeedback] = useState('');
  const [newMsg, setNewMsg] = useState('');

  React.useEffect(() => {
    DATA.getProject(projectId).then(setProjData);
  }, [projectId]);

  const p = projData || D().clientProjects.find(x => x.id === projectId) || D().clientProjects[0];

  if (!p) {
    return (
      <div style={{minHeight:'80vh', display:'grid', placeItems:'center', color:'#00FF66', fontFamily:'monospace', fontSize:11, letterSpacing:'.3em', textTransform:'uppercase'}}>
        <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:24}}>
          <span style={{fontSize:36}}>⚓</span>
          <span>Sincronizando território do projeto...</span>
        </div>
      </div>
    );
  }

  const tabs = [
    { key:'overview',  label:'Visão geral' },
    { key:'brief',     label:'Briefing' },
    { key:'deliv',     label:'Entregáveis', count: (p.deliverables || []).length },
    { key:'schedule',  label:'Cronograma' },
    { key:'files',     label:'Arquivos finais', count: (p.finalFiles || []).length },
    { key:'conv',      label:'CHAT',        count: (p.conversation || []).length, highlight: true, icon: Ico.chat() },
  ];

  async function sendMsg() {
    if (!newMsg.trim()) return;
    try {
      await API.addConversation(p.id, newMsg);
      setNewMsg('');
      DATA.getProject(p.id).then(setProjData);
      setToast('Mensagem enviada com sucesso');
    } catch (err) {
      setToast('Erro ao enviar mensagem: ' + err.message);
    }
  }

  return (
    <div className="page" data-screen-label="Cliente · Projeto">
      <div className="proj-head">
        <div>
          <div className="crumb-line">
            <a onClick={() => navigate('projects')}>Meus projetos</a>
            <span className="sep">/</span>
            <span>{p.title || 'Novo Projeto'}</span>
          </div>
          <h1>{(p.title || 'Novo Projeto').split(' ').slice(0,1).join(' ')} <em>{(p.title || 'Novo Projeto').split(' ').slice(1).join(' ')}</em></h1>
          <div className="meta-row">
            <div className="m"><span className="l">// Status</span><span>{statusChip(p.status, p.statusLabel)}</span></div>
            <div className="m"><span className="l">// Serviço</span><span className="v">{p.service}</span></div>
            <div className="m"><span className="l">// Início</span><span className="v">{p.start}</span></div>
            <div className="m"><span className="l">// Entrega estimada</span><span className="v">{p.end}</span></div>
            <div className="m"><span className="l">// Responsável Dead Sailor</span><span className="v">{p.lead}</span></div>
          </div>
        </div>
        <div className="right">
          <div className="progress-block">
            <div className="label-line"><span>// Progresso geral</span><span className="pct">{p.progress}%</span></div>
            <div className="bar"><div className="fill" style={{width: p.progress+'%'}}></div></div>
          </div>
          <div className="stamp"><span className="dot"></span><span>{p.territory}</span></div>
        </div>
      </div>

      <div style={{marginTop:32}}>
        <Tabs tabs={tabs} active={tab} onChange={setTab} />

        {/* OVERVIEW */}
        {tab === 'overview' && (
          <div className="two-col" style={{marginBottom:0}}>
            <div>
              <SectionHd title={<>Escopo <em>aprovado</em></>} n="ROUTE 014" />
              <div className="card" style={{marginBottom:24}}>
                <div className="pbody">
                  <p style={{fontSize:15, lineHeight:1.65, color:'var(--bone-dim)', fontWeight:300}}>
                    {p.scope}
                  </p>
                </div>
              </div>

              <SectionHd title={<>Entregáveis <em>resumidos</em></>} n={(p.deliverables || []).length + " ITENS"} />
              <div className="deliv-list">
                {(p.deliverables || []).map(d => (
                  <div key={d.id} className="deliv-row">
                    <span className="num">{d.n || '01'}</span>
                    <div className="info">
                      <div className="nm">{d.name}</div>
                      <div className="meta">
                        <span>{d.versions > 0 ? `V${String(d.versions).padStart(2,'0')}` : '—'}</span>
                        <span>·</span>
                        <span>{d.versions} versões</span>
                      </div>
                    </div>
                    <div className="deadline">
                      <span className="l">// PRAZO</span>
                      <span>{d.deadline}</span>
                    </div>
                    <div></div>
                    <span>{statusChip(d.status, d.statusLabel)}</span>
                    <div>
                      {d.status === 'waiting' && <Button size="sm" kind="signal" arrow onClick={() => { setActiveDeliv(d); setShowApprove(true); }}>Revisar</Button>}
                      {d.status !== 'waiting' && <Button size="sm" kind="ghost" onClick={() => setTab('deliv')}>Detalhes</Button>}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <SectionHd title={<>Próxima <em>ação.</em></>} n="" />
              {(p.deliverables || []).some(d => d.status === 'waiting') ? (() => {
                const waitingDeliv = (p.deliverables || []).find(d => d.status === 'waiting');
                return (
                  <div className="card" style={{borderColor:'var(--signal)', background:'rgba(0,255,102,.03)', marginBottom:24}}>
                    <div className="ptop">
                      <span><span className="live">AGUARDANDO VOCÊ</span></span>
                      <span>// PRAZO · {waitingDeliv.deadline}</span>
                    </div>
                    <div className="pbody">
                      <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.24em', color:'var(--fog)', textTransform:'uppercase', marginBottom:8}}>// ENTREGÁVEL {waitingDeliv.n} · {waitingDeliv.name.toUpperCase()}</div>
                      <h3 style={{fontFamily:'var(--serif)', fontSize:28, lineHeight:1.1, letterSpacing:'-.01em', fontWeight:400, marginBottom:10}}>
                        {waitingDeliv.name} <em style={{color:'var(--signal)', fontStyle:'italic'}}>principal</em><br/>aguarda sua revisão.
                      </h3>
                      <p style={{fontSize:13.5, lineHeight:1.6, color:'var(--bone-dim)', fontWeight:300, marginBottom:18}}>
                        {waitingDeliv.note || 'Nova entrega disponível no portal para análise e aprovação estratégica.'}
                      </p>
                      <Button kind="signal" arrow onClick={() => { setActiveDeliv(waitingDeliv); setShowApprove(true); }}>Revisar entrega</Button>
                    </div>
                  </div>
                );
              })() : (
                <div className="card" style={{marginBottom:24, padding:24, fontSize:13, color:'var(--fog)', textAlign:'center', fontFamily:'var(--mono)'}}>
                  // NENHUMA AÇÃO COMPROMETIDA AGUARDANDO VOCÊ
                </div>
              )}

              <SectionHd title={<>Histórico <em>recente</em></>} n="LOG" />
              <div className="card">
                <div className="pbody" style={{padding:'0 22px'}}>
                  <div className="activity">
                    {(p.activity || []).map((a, i) => (
                      <div key={i} className={`act-item ${i===0?'fresh':''}`}>
                        <span className="ico">{Ico.dot()}</span>
                        <span className="txt">{a.txt || ''} <span className="who">· {a.who || ''}</span></span>
                        <span className="when">{a.when_text ? a.when_text.split('·')[0].trim() : (a.when ? a.when.split('·')[0].trim() : '')}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* BRIEF tab */}
        {tab === 'brief' && (
          <div>
            <div className="bra-block">
              <div className="blk-head"><span className="n">// CONTEXTO</span><h3><em>{p.clientName || 'Cliente'}</em></h3></div>
              <div className="qa">
                <div><div className="q">SOBRE A EMPRESA</div><div className="a">{p.scope}</div></div>
                <div><div className="q">OBJETIVO DO PROJETO</div><div className="a">Desenvolver soluções estratégicas de design e branding integradas ao reposicionamento corporativo da marca.</div></div>
              </div>
            </div>
            <div className="bra-block">
              <div className="blk-head"><span className="n">// OBJETIVOS</span><h3>O que <em>queremos</em></h3></div>
              <div className="qa">
                <div><div className="q">OBJETIVO PRINCIPAL</div><div className="a">Reposicionamento premium visando expansão estratégica e consistência visual multicanal.</div></div>
              </div>
            </div>
            <Button kind="ghost" arrow onClick={() => setTab('overview')}>Voltar ao Dashboard</Button>
          </div>
        )}

        {/* DELIV */}
        {tab === 'deliv' && (
          <div>
            <SectionHd title={<>Entregáveis <em>do projeto</em></>} n={(p.deliverables || []).length + " ITENS"} right={<Chip status="approved" live>EM ROTA</Chip>} />
            <div className="deliv-list">
              {(p.deliverables || []).map(d => (
                <div key={d.id} className="deliv-row">
                  <span className="num">{d.n || '01'}</span>
                  <div className="info">
                    <div className="nm">{d.name}</div>
                    <div className="meta">
                      <span>{d.versions > 0 ? `Versão atual · ${d.current_version || d.current}`:'Aguardando início'}</span>
                    </div>
                  </div>
                  <div className="deadline"><span className="l">// PRAZO</span><span>{d.deadline}</span></div>
                  <div className="versions"><span className="l">// VERSÕES</span><span className="v">{d.versions || '—'}</span></div>
                  <span>{statusChip(d.status, d.status_label || d.statusLabel)}</span>
                  <div style={{display:'flex', gap:8}}>
                    {d.status === 'waiting' && <Button size="sm" kind="signal" arrow onClick={() => { setActiveDeliv(d); setShowApprove(true); }}>Revisar material</Button>}
                    {d.status === 'approved' && <Button size="sm" kind="ghost" disabled>Aprovado</Button>}
                    {d.status === 'production' && <Button size="sm" kind="ghost" disabled>Em produção</Button>}
                    {d.status === 'idle' && <Button size="sm" kind="ghost" disabled>Não iniciado</Button>}
                    {d.status === 'review' && <Button size="sm" kind="ghost" disabled>Em revisão</Button>}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* SCHEDULE */}
        {tab === 'schedule' && (
          <div>
            <SectionHd title={<>Cronograma <em>aprovado</em></>} n={`${(p.deliverables || []).length} ENTREGÁVEIS · ${p.start || '—'} → ${p.end || '—'}`} />
            <div className="card">
              <div className="pbody">
                <div className="timeline">
                  {(p.deliverables || []).map((d, i) => (
                    <div key={d.id} className="tl-item">
                      <div className={`stamp ${d.status==='waiting'?'urgent':''}`}>
                        <span className="d">{d.deadline.split(' ')[0]}</span>
                        <span className="m">{(d.deadline.split(' ')[1] || '').toUpperCase()}</span>
                      </div>
                      <div className="body">
                        <div className="ttl">{d.name}</div>
                        <div className="meta">
                          <span>Entregável {d.n}</span>
                          <span className="sep">{d.status_label || d.statusLabel}</span>
                          {d.versions > 0 && <span className="sep">{d.versions} versões</span>}
                        </div>
                      </div>
                      <div>{statusChip(d.status, d.status_label || d.statusLabel)}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* CONVERSATION */}
        {tab === 'conv' && (
          <div>
            <SectionHd title={<>CHAT do <em>projeto</em></>} n={(p.conversation || []).length+' MENSAGENS'} />
            <div className="conv">
              {(p.conversation || []).map((m, i) => (
                <div key={i} className="msg">
                  <span className={`avatar ${m.who==='ds'?'ds':''}`}>{m.name ? m.name[0] : 'U'}</span>
                  <div className="body">
                    <div className="who-line"><span className="nm">{m.name}</span><span className="when">· {m.when_text || m.when}</span></div>
                    <p>{m.body}</p>
                  </div>
                </div>
              ))}
              <div className="composer">
                <input placeholder="Escreva uma mensagem para a equipe…" value={newMsg} onChange={e => setNewMsg(e.target.value)} onKeyDown={e => { if (e.key==='Enter') sendMsg(); }} />
                <Button kind="signal" icon={Ico.send()} onClick={sendMsg}>Enviar</Button>
              </div>
            </div>
          </div>
        )}

        {/* FILES */}
        {tab === 'files' && <FilesView project={p} />}
      </div>

      {/* Approval modal */}
      {showApprove && activeDeliv && (
        <Modal xWide title={<>APROVAÇÃO · {activeDeliv.name.toUpperCase()} <span className="live">AGUARDANDO</span></>}
               onClose={() => setShowApprove(false)}>
          <ApprovalPane
            project={p}
            deliverable={activeDeliv}
            onApprove={() => { setShowApprove(false); setShowConfirmApprove(true); }}
            onRevision={() => { setShowApprove(false); setShowRevision(true); }} />
        </Modal>
      )}

      {showConfirmApprove && activeDeliv && (
        <Modal title="CONFIRMAR APROVAÇÃO" onClose={() => setShowConfirmApprove(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowConfirmApprove(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              setShowConfirmApprove(false);
              try {
                await API.updateDeliverable(p.id, activeDeliv.id, { status: 'approved', status_label: 'Aprovado' });
                await API.addActivity(p.id, { kind: 'approve', txt: `Entregável "${activeDeliv.name}" aprovado pelo cliente.` });
                setToast('Entrega aprovada · equipe notificada');
                DATA.getProject(p.id).then(setProjData);
              } catch (err) {
                setToast('Erro ao aprovar entrega: ' + err.message);
              }
            }}>Confirmar aprovação</Button>
          </>}>
          <div style={{padding:'16px 4px'}}>
            <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.24em', color:'var(--signal)', textTransform:'uppercase', marginBottom:14}}>// CONFIRMAÇÃO · ETAPA FINAL</div>
            <h3 style={{fontFamily:'var(--serif)', fontSize:30, lineHeight:1.1, letterSpacing:'-.01em', fontWeight:400, marginBottom:16}}>Pronto para <em style={{color:'var(--signal)', fontStyle:'italic'}}>seguir adiante?</em></h3>
            <p style={{fontSize:14.5, lineHeight:1.65, color:'var(--bone-dim)', fontWeight:300}}>
              Ao aprovar esta versão de "{activeDeliv.name}", a equipe seguirá para a preparação dos arquivos finais e próximas etapas do território. Esta ação é registrada no log do projeto.
            </p>
          </div>
        </Modal>
      )}

      {showRevision && activeDeliv && (
        <Modal wide title={`SOLICITAR REVISÃO · ${activeDeliv.name.toUpperCase()}`} onClose={() => setShowRevision(false)}
          footer={<>
            <Button kind="ghost" onClick={() => setShowRevision(false)}>Cancelar</Button>
            <Button kind="primary" arrow onClick={async () => {
              if (!feedback.trim()) { setToast('Por favor, insira o feedback detalhado.'); return; }
              setShowRevision(false);
              try {
                await API.updateDeliverable(p.id, activeDeliv.id, { status: 'review', status_label: 'Em revisão', note: feedback });
                await API.addConversation(p.id, `[Solicitação de Ajuste · ${activeDeliv.name}]: ${feedback}`);
                await API.addActivity(p.id, { kind: 'send', txt: `Feedback enviado. Revisão solicitada para "${activeDeliv.name}".` });
                setFeedback('');
                setToast('Revisão solicitada · equipe notificada');
                DATA.getProject(p.id).then(setProjData);
              } catch (err) {
                setToast('Erro ao solicitar revisão: ' + err.message);
              }
            }}>Confirmar solicitação</Button>
          </>}>
          <div style={{display:'flex', flexDirection:'column', gap:18}}>
            <div style={{padding:'12px 14px', border:'1px solid rgba(217,119,87,.4)', background:'rgba(217,119,87,.05)', fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.22em', color:'#D97757', textTransform:'uppercase'}}>
              ⚠  Esta solicitação utilizará 1 das rodadas de revisão previstas.
            </div>
            <Field label="Feedback para a equipe" required hint="Seja específico — quanto mais clareza, melhor a próxima versão.">
              <textarea placeholder="O que precisa ser ajustado, removido, ampliado..." value={feedback} onChange={e => setFeedback(e.target.value)} style={{minHeight:140}} />
            </Field>
          </div>
        </Modal>
      )}

      {toast && <Toast>{toast}</Toast>}
    </div>
  );
}
window.ClientProject = ClientProject;


// =========================================================
// APPROVAL pane (used inside modal)
// =========================================================
function ApprovalPane({ project, deliverable, onApprove, onRevision }){
  const d = deliverable || {};
  return (
    <div className="approval-grid" style={{border:'none', background:'transparent'}}>
      <div className="preview-pane" style={{minHeight:520}}>
        <span className="corner-tl"></span><span className="corner-tr"></span>
        <span className="corner-bl"></span><span className="corner-br"></span>
        <div className="grid-bg"></div>
        <div className="preview-frame">
          <div className="top-meta">
            <span>DS / {d.n || '00'}</span>
            <span className="sig">{d.current_version || d.current || 'V01'} · DEADLINE</span>
          </div>
          <div className="word" style={{fontSize:44}}>{d.name ? d.name.split(' ')[0] : 'Key'}</div>
          <div className="bot-meta">
            <span>// {project.clientName || 'CLIENTE'}</span>
            <span>BUILT BEYOND THE MAP</span>
          </div>
        </div>
        {d.file && (
          <span className="file-tag">
            <span style={{color:'var(--signal)'}}>{Ico.file()}</span>
            {d.file.startsWith('http') ? (
              <a href={d.file} target="_blank" rel="noopener noreferrer" style={{color:'var(--signal)', textDecoration:'underline', cursor:'pointer'}}>Abrir link do Drive ↗</a>
            ) : (
              <span>{d.file} · {d.deadline}</span>
            )}
          </span>
        )}
      </div>
      <div className="approval-side">
        <div className="pane">
          <div className="l"><span>// VERSÃO</span><span className="v">{d.current_version || d.current || 'V01'} · ATUAL</span></div>
          <div style={{display:'flex', justifyContent:'space-between', gap:14, alignItems:'center'}}>
            <div>
              <div style={{fontFamily:'var(--serif)', fontSize:22, letterSpacing:'-.005em'}}>{d.name} <em style={{fontStyle:'italic', color:'var(--signal)'}}>principal</em></div>
              <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.18em', color:'var(--fog)', textTransform:'uppercase', marginTop:6}}>Prazo limite: {d.deadline}</div>
            </div>
            {d.file && (
              d.file.startsWith('http') ? (
                <Button size="sm" icon={Ico.link()} onClick={() => window.open(d.file, '_blank')}>Abrir no Drive</Button>
              ) : (
                <Button size="sm" icon={Ico.download()}>Baixar</Button>
              )
            )}
          </div>
        </div>

        <div className="pane">
          <div className="l">// MENSAGEM DA EQUIPE</div>
          <p className="note">{d.note || 'Material enviado pela equipe Dead Sailor para validação estratégica no portal.'}</p>
        </div>

        <div className="actions">
          <Button kind="primary" arrow onClick={onApprove}>Aprovar entrega</Button>
          <Button kind="danger" onClick={onRevision}>Solicitar revisão</Button>
        </div>
      </div>
    </div>
  );
}
window.ApprovalPane = ApprovalPane;


// =========================================================
// FILES VIEW (used both as tab and as standalone page)
// =========================================================
function FilesView({ project }){
  const p = project || D().clientProjects[0];
  return (
    <div>
      <SectionHd
        title={<>Arquivos <em>finais</em></>}
        n={(p.finalFiles || []).length + ' MATERIAIS'}
        right={<span className="mono-sm">DISPONÍVEIS PARA DOWNLOAD</span>} />
      <div className="files-grid">
        {(p.finalFiles || []).map((f, i) => (
          <div key={i} className="file-card">
            <div className="head">
              <span className="icon">{f.icon}</span>
              <div className="info">
                <div className="nm">{f.name.split('.')[0].replace(/_/g,' ')}<em>.{f.kind.toLowerCase()}</em></div>
                <div className="sub">// {f.related} · {f.kind}</div>
              </div>
            </div>
            <div className="meta">
              <div className="m"><span className="l">// Tipo</span><span className="v">{f.kind}</span></div>
              <div className="m"><span className="l">// Tamanho</span><span className="v">{f.size}</span></div>
              <div className="m"><span className="l">// Enviado</span><span className="v">{f.date}</span></div>
            </div>
            <div className="foot">
              <Chip status="approved">Disponível</Chip>
              <Button size="sm" kind="signal" icon={Ico.download()}>Baixar</Button>
            </div>
          </div>
        ))}
      </div>
      <div style={{marginTop:24, padding:'16px 0', borderTop:'1px solid var(--steel)', fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.22em', color:'var(--fog-2)', textTransform:'uppercase'}}>
        // Os arquivos finais permanecem disponíveis neste portal para consulta e download.
      </div>
    </div>
  );
}
window.FilesView = FilesView;


// =========================================================
// CLIENT PROJECTS LIST
// =========================================================
function ClientProjectsList({ navigate }){
  const projects = D().clientProjects;
  return (
    <div className="page" data-screen-label="Cliente · Projetos">
      <div className="page-head">
        <div>
          <div className="kicker"><span>§ 02</span> MEUS PROJETOS</div>
          <h1>Travessias <em>em curso.</em></h1>
          <p className="sub">Projetos ativos e finalizados. Clique em qualquer um para abrir o território completo.</p>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>02 ATIVOS · 0 ARQUIVADOS</span></div>
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
        {projects.map(p => <ProjectCard key={p.id} p={p} onOpen={() => navigate('project-'+p.id)} />)}
      </div>
    </div>
  );
}
window.ClientProjectsList = ClientProjectsList;


// =========================================================
// CLIENT APPROVALS
// =========================================================
function ClientApprovals({ navigate }){
  const p = D().clientProjects[0];
  return (
    <div className="page" data-screen-label="Cliente · Aprovações">
      <div className="page-head">
        <div>
          <div className="kicker"><span>§ 03</span> APROVAÇÕES PENDENTES</div>
          <h1>Uma aprovação <em>aguarda você.</em></h1>
          <p className="sub">Materiais enviados pela equipe Dead Sailor para sua análise. Aprovações e revisões ficam registradas no log de cada projeto.</p>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>01 PENDENTE · PRAZO 28 MAI</span></div>
        </div>
      </div>
      <div className="deliv-list">
        <div className="deliv-row" style={{borderLeft:'1px solid var(--signal)'}}>
          <span className="num">02</span>
          <div className="info">
            <div className="nm">Key Visual <em>principal</em></div>
            <div className="meta">
              <span>{p.title}</span><span>·</span><span>V02</span><span>·</span><span>Enviado 25 mai</span>
            </div>
          </div>
          <div className="deadline"><span className="l">// PRAZO</span><span>28 MAI 2026</span></div>
          <div className="versions"><span className="l">// VERSÕES</span><span className="v">2</span></div>
          <span>{statusChip('waiting', 'Aguardando')}</span>
          <Button size="sm" kind="signal" arrow onClick={() => navigate('approve')}>Revisar material</Button>
        </div>
      </div>
      <div style={{marginTop:48}}>
        <SectionHd title={<>Aprovadas <em>recentemente</em></>} n="HISTÓRICO" />
        <div className="deliv-list">
          <div className="deliv-row">
            <span className="num">01</span>
            <div className="info">
              <div className="nm">Conceito Estratégico</div>
              <div className="meta"><span>{p.title}</span><span>·</span><span>V02</span></div>
            </div>
            <div className="deadline"><span className="l">// APROVADO</span><span>22 MAI 2026</span></div>
            <div className="versions"><span className="l">// VERSÕES</span><span className="v">2</span></div>
            <span>{statusChip('approved', 'Aprovado')}</span>
            <Button size="sm" kind="ghost">Ver histórico</Button>
          </div>
        </div>
      </div>
    </div>
  );
}
window.ClientApprovals = ClientApprovals;


// =========================================================
// CLIENT FILES (standalone page)
// =========================================================
function ClientFilesPage(){
  return (
    <div className="page" data-screen-label="Cliente · Arquivos">
      <div className="page-head">
        <div>
          <div className="kicker"><span>§ 04</span> ARQUIVOS FINAIS</div>
          <h1>Tudo o que foi <em>entregue.</em></h1>
          <p className="sub">Arquivos finais de todos os projetos finalizados. Permanecem disponíveis indefinidamente.</p>
        </div>
        <div className="right">
          <div className="stamp"><span className="dot"></span><span>04 MATERIAIS · 700 MB</span></div>
        </div>
      </div>
      <FilesView />
    </div>
  );
}
window.ClientFilesPage = ClientFilesPage;