/* ============================================================================
   MATRIA, Suggest a Name. Submit a woman; Matria reads the record and
   proposes connections for the archive backlog (human-reviewed).
   ============================================================================ */
function Suggest({ctx}){
  const [name,setName]=useState('Wangari Maathai');
  const [why,setWhy]=useState('');
  const [phase,setPhase]=useState('form'); // form | done
  const [step,setStep]=useState(0);
  const STEPS=['Read her biography','Traced her references and teachers','Named the outcome of her work','Mapped her connections in the graph'];
  function submit(){
    setPhase('done'); setStep(0);
    STEPS.forEach((_,i)=>setTimeout(()=>setStep(i+1),420*(i+1)));
  }
  const found=[
    ['Related women','person',[['Vandana Shiva','Indian'],['Rachel Carson','American']]],
    ['Related movements','history',[['Green Belt Movement','Kenya'],['Environmental justice','Global']]],
    ['Related fields','science',[['Ecology','Science'],['Decolonial ecology','Theory']]],
  ];
  return (
    <div className="screen matria-cream">
      <StatusBar/>
      <TopBar onBack={()=>ctx.back()} title="Add to the archive"/>
      <div className="s-body pad" style={{paddingTop:8}}>
        <h1 className="title">Suggest a name</h1>
        <p className="bodytext" style={{margin:'8px 0 0'}}>Know a woman who belongs here? Matria reads her life, traces her references and names the outcome of her work, then proposes her for the archive.</p>
        <div className="label" style={{margin:'14px 0 6px'}}>Her name</div>
        <input value={name} onChange={e=>setName(e.target.value)} name="suggested-archive-name" aria-label="Woman's name" autoComplete="off" style={{width:'100%',border:'1px solid var(--line-cream)',borderRadius:12,background:'var(--cream-card-2)',height:46,padding:'0 14px',fontSize:13.5,color:'var(--ink)',fontFamily:'var(--font-body)'}}/>
        <div className="label" style={{margin:'13px 0 6px'}}>Why does she belong? <span style={{fontWeight:400,textTransform:'none',letterSpacing:0,color:'var(--ink-faint)'}}>optional</span></div>
        <textarea
          value={why}
          onChange={e=>setWhy(e.target.value)}
          name="suggested-archive-why"
          aria-label="Why does she belong in the archive"
          placeholder="She linked ecology, women's labour and democracy."
          rows={3}
          style={{width:'100%',border:'1px solid var(--line-cream)',borderRadius:12,background:'var(--cream-card-2)',minHeight:60,padding:'11px 14px',fontSize:12.5,color:'var(--ink)',fontFamily:'var(--font-body)',resize:'vertical',lineHeight:1.45}}
        />
        <button className="btn btn-navy" style={{width:'100%',marginTop:14,height:48,opacity:phase==='done'?.6:1}} onClick={phase==='form'?submit:undefined}>{phase==='done'?'Submitted':'Submit to the archive'}</button>

        {phase==='done' && <div className="anim-up" style={{marginTop:18}}>
          <hr className="rule"/>
          <div className="label" style={{margin:'14px 0 9px'}}>Matria read the record</div>
          <div style={{display:'flex',flexDirection:'column',gap:9,marginBottom:14}}>
            {STEPS.map((s,i)=>(
              <div key={s} style={{display:'flex',alignItems:'center',gap:10,opacity:i<step?1:.32,transition:'opacity .4s'}}>
                <span style={{width:20,height:20,borderRadius:'50%',border:'1px solid var(--gold-line)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--gold-line)',flex:'none'}}>{i<step&&<Icon name="check" size={12} stroke={2.2}/>}</span>
                <span style={{fontSize:12,color:'#3c3730'}}>{s}</span>
              </div>
            ))}
          </div>
          <div className="card" style={{padding:'13px 14px'}}>
            <div style={{display:'flex',alignItems:'baseline',gap:8}}><span className="section-title" style={{fontFamily:'var(--font-display)',fontSize:16,color:'var(--ink)',fontWeight:600}}>{name}</span><span className="tag">Kenyan</span></div>
            <div className="label" style={{margin:'9px 0 4px',fontSize:9}}>Outcome of her work</div>
            <p style={{fontSize:12,lineHeight:1.5,color:'#46433d',margin:0}}>Founded the Green Belt Movement, organised women to plant tens of millions of trees, and became the first African woman awarded the Nobel Peace Prize, in 2004.</p>
          </div>
          <div className="label" style={{margin:'14px 0 9px'}}>Connections Matria found</div>
          {found.map(([cat,ic,nodes])=>(
            <div key={cat} style={{marginBottom:10}}>
              <div className="label" style={{fontSize:9,marginBottom:7}}>{cat}</div>
              <div style={{display:'flex',flexWrap:'wrap',gap:7}}>
                {nodes.map(([n,r])=>(
                  <span key={n} className="tag" style={{gap:6}}><span style={{color:'var(--gold-line)',display:'flex'}}><TypeGlyph type={ic} size={13}/></span>{n}<span style={{fontSize:9,color:'var(--ink-faint)',fontWeight:400}}>{r}</span></span>
                ))}
              </div>
            </div>
          ))}
          <div style={{display:'flex',alignItems:'center',gap:10,background:'#eaf0ea',border:'1px solid rgba(76,168,160,.3)',borderRadius:12,padding:'11px 13px',marginTop:8}}>
            <span style={{width:24,height:24,borderRadius:'50%',background:'#4ca8a0',display:'flex',alignItems:'center',justifyContent:'center',flex:'none',color:'#fff'}}><Icon name="check" size={13} stroke={2.4}/></span>
            <div><div style={{fontSize:12,color:'#234b46',fontWeight:700}}>Suggested for review</div><div style={{fontSize:10.5,color:'#3d6b65'}}>Added to the archive backlog · entry #0247</div></div>
          </div>
          <p style={{textAlign:'center',fontSize:10.5,color:'var(--ink-faint)',fontStyle:'italic',margin:'12px 0 6px'}}>Nothing is published until a human editor confirms the sources.</p>
        </div>}
      </div>
    </div>
  );
}
Object.assign(window,{Suggest});