// Tidal — placeholder screens for Wave 2/3 features
// Each shows a clear "em construção" so navigation works end-to-end

const Stub = ({title, eyebrow, lang, items=[]}) => {
  const isEN = lang === 'en';
  return (
    <main style={{padding:'30px 36px 56px',flex:1}}>
      <div style={{maxWidth:720,margin:'30px auto'}}>
        <div className="t-eyebrow" style={{color:'var(--accent)',marginBottom:14}}>{eyebrow}</div>
        <div style={{fontFamily:'var(--fs)',fontSize:48,letterSpacing:'-1px',lineHeight:1.05}}>
          {title} <em style={{color:'var(--muted-2)'}}>{isEN?'in progress.':'em construção.'}</em>
        </div>
        <div style={{fontSize:15,color:'var(--muted)',marginTop:14,fontStyle:'italic',fontFamily:'var(--fs)',maxWidth:520}}>
          {isEN
            ? 'This area is part of the next wave. Here\'s what\'s planned:'
            : 'Esta área faz parte da próxima onda. Aqui está o que está planejado:'}
        </div>
        <div style={{marginTop:28,display:'grid',gap:10}}>
          {items.map((it, i) => (
            <div key={i} style={{
              padding:'14px 18px', background:'var(--cream)', border:'1px solid var(--line-soft)',
              borderRadius:14, display:'flex', alignItems:'flex-start', gap:12
            }}>
              <div style={{width:24,height:24,borderRadius:'50%',background:'var(--accent-soft)',color:'var(--accent)',display:'grid',placeItems:'center',fontFamily:'var(--fm)',fontSize:11,flexShrink:0,marginTop:1}}>{i+1}</div>
              <div style={{fontSize:13.5,lineHeight:1.5,color:'var(--ink-2)'}}>{it}</div>
            </div>
          ))}
        </div>
      </div>
    </main>
  );
};

const Habilidades = ({state, setState}) => {
  const tt = useT();
  const isEN = tt.lang === 'en';
  return <Stub lang={tt.lang}
    eyebrow={isEN?'Skills bank':'Banco de habilidades'}
    title={isEN?'What I can teach,':'O que posso ensinar,'}
    items={isEN ? [
      'Each crew/staff member offers what they can teach (guitar, English, navigation, cooking…)',
      'Browse & request a session; teacher approves and an event lands on Agenda',
      'Sessions count toward Achievements (e.g. "Voice of the stern" — 3 guitar circles)',
    ] : [
      'Cada tripulante oferece o que pode ensinar (violão, inglês, navegação, cozinha…)',
      'Você procura e pede uma sessão; quem ensina aprova e cai um evento na Agenda',
      'Sessões contam pra Conquistas (ex: "Voz da popa" — 3 rodas de violão)',
    ]}/>;
};

Object.assign(window, {Habilidades});