/* ============================================================================
   MATRIA, Echoes: a fragment opened through every lens.
   The same saying heard in science, philosophy and cosmology, then traced
   to the voices around the world saying it too, and the thread it hangs on.
   ============================================================================ */

function Echoes({ctx}){
  const D=window.MATRIA;
  const F=D.FRAGMENT;
  const thread=D.THREADS[F.thread];
  return (
    <div className="screen matria-cream">
      <StatusBar/>
      <TopBar onBack={()=>ctx.back()} title="Today's fragment"/>
      <div className="s-body pad" style={{paddingTop:10}}>
        {/* the saying */}
        <p style={{fontFamily:'var(--font-display)',fontSize:22,lineHeight:1.32,color:'var(--ink)',fontWeight:500,margin:0}}>&ldquo;{F.quote}&rdquo;</p>
        <div style={{display:'flex',alignItems:'center',gap:10,margin:'12px 0 0'}}>
          <span style={{fontSize:13,color:'#5a5246'}}>{F.author}</span>
          <span className="tag" style={{height:22,fontSize:9.5}}>{F.confidence}</span>
        </div>

        {/* lenses */}
        {F.lenses.map((L,i)=>{
          const color=D.TYPES[L.kind==='science'?'science':L.kind==='myth'?'myth':'idea'].color;
          return (
            <div key={L.kind} className="anim-up" style={{animationDelay:(i*0.12)+'s',marginTop:18}}>
              <div style={{display:'flex',alignItems:'center',gap:9}}>
                <span style={{width:26,height:26,borderRadius:'50%',background:color+'26',border:'1px solid '+color+'66',display:'flex',alignItems:'center',justifyContent:'center',color:'#5a5246'}}>
                  <TypeGlyph type={L.kind==='science'?'cosmos':L.kind} size={14}/>
                </span>
                <span className="label" style={{fontSize:9.5}}>{L.label}</span>
              </div>
              <p className="bodytext" style={{margin:'9px 0 0',fontSize:12.5}}>{L.text}</p>
              <div style={{display:'flex',flexWrap:'wrap',gap:7,marginTop:9}}>
                {L.nodes.map(id=>{const n=D.get(id); return n &&
                  <span key={id} className="tag" style={{cursor:'pointer',height:24,fontSize:10.5}} onClick={()=>ctx.openNode(id)}>{n.title}</span>;})}
              </div>
              {i<F.lenses.length-1 && <hr className="rule" style={{marginTop:16}}/>}
            </div>
          );
        })}

        {/* voices across the world */}
        <hr className="rule" style={{margin:'16px 0 0'}}/>
        <div className="label" style={{margin:'16px 0 11px'}}>Saying it elsewhere</div>
        <div style={{display:'flex',flexDirection:'column',gap:9}}>
          {F.voices.map(v=>{const n=D.get(v.node); return n && (
            <div key={v.node} className="lrow" style={{padding:'9px 12px'}} onClick={()=>ctx.openSource(v.node)}>
              <Portrait pic={n.pic} name={n.title} size={36}/>
              <div style={{flex:1}}>
                <span style={{fontSize:12.5,color:'var(--ink)',fontWeight:700}}>{n.title}</span>
                <span style={{fontSize:10.5,color:'var(--ink-faint)',marginLeft:7}}>{v.where}</span>
                <div style={{fontSize:11,color:'var(--ink-soft)',marginTop:1,fontStyle:'italic'}}>{v.line}</div>
              </div>
              <span style={{color:'var(--ink-faint)'}}><Icon name="chevron" size={14}/></span>
            </div>);})}
        </div>

        {/* the thread */}
        <div style={{background:'var(--cream-card-2)',border:'1px solid var(--gold-line)',borderRadius:14,padding:'14px 15px',margin:'16px 0 14px'}}>
          <div className="label" style={{fontSize:9,marginBottom:5}}>Thread</div>
          <div style={{fontFamily:'var(--font-display)',fontSize:18,color:'var(--ink)',fontWeight:600}}>{thread.name}</div>
          <div style={{fontSize:11.5,color:'var(--gold-line)',fontWeight:700,margin:'2px 0 7px'}}>{thread.subtitle}</div>
          <p style={{fontSize:12,lineHeight:1.55,color:'#46433d',margin:0}}>{thread.description}</p>
          <button className="btn btn-navy" style={{height:42,fontSize:13,marginTop:13}} onClick={()=>ctx.openQuestionMap()}>See the {thread.name} constellation</button>
        </div>
        <p style={{textAlign:'center',fontSize:10.5,color:'var(--ink-faint)',fontStyle:'italic',margin:'0 0 12px'}}>Interpretive readings are marked. Scientific claims carry their papers.</p>
      </div>
    </div>
  );
}

Object.assign(window,{Echoes});