import type {ReactNode} from 'react';

export function SectionWelcome({area,eyebrow,title,children}:{area:'wellbeing'|'finances'|'health'|'shop';eyebrow:string;title:string;children:ReactNode}){
  return <section className={'sectionwelcome sectionwelcome-'+area}>
    <div className="sectionwelcome-copy"><p className="eyebrow">{eyebrow}</p><h2>{title}</h2><div>{children}</div></div>
    <img src={'/illustrations/'+(area==='finances'?'blonde-welcome':area==='shop'?'classy-african-woman-headroom':area==='health'?'health-indian':area)+'.webp'} alt="" width={280} height={240}/>
  </section>;
}

export function BelongingWelcome({name}:{name:string}){
  return <section className="belongingwelcome">
    <div><p className="eyebrow">YOUR LIFE · YOUR PACE · YOUR SPACE</p><h1>{name?`Welcome back, ${name}.`:'You belong here.'}</h1><p>What would make today feel a little lighter?</p><span className="belongingnote">Every background, every belief, every stage of life. You are welcome here.</span></div>
    <div className="welcome-faces" aria-hidden="true">{['wellbeing','blonde-welcome','health','classy-african-woman-headroom'].map(area=><span key={area} className={area==='classy-african-woman-headroom'?'welcomefaceframe shopfaceframe':area==='blonde-welcome'?'welcomefaceframe blondefaceframe':'welcomefaceframe'}><img key={area} src={'/illustrations/'+(area==='finances'?'blonde-welcome':area==='shop'?'classy-african-woman-headroom':area==='health'?'health-indian':area)+'.webp'} alt="" width={112} height={112}/></span>)}</div>
  </section>;
}