/* HelpBnk mobile — 2 home page states showing user-maturity evolution.
   A = First-time / new user: intent prompts prominent (helps them learn the platform)
   B = Returning user: no intent prompts, canvas bigger, feed bigger, AI is the nav tab.
   Neither has the bottom AI bar — AI lives in the bottom nav. */
const { useState } = React;

/* ============================================================
   Variant A — "First login" (welcome state)
   Bigger greeting + 4 intent buttons at top to learn the platform.
   Canvas + feed peek below.
   ============================================================ */
const VariantA = () => {
  const [feed, setFeed] = useState('All');
  return (
    <Phone bg="#FFFFFF">
      <div style={{ height:'100%', display:'flex', flexDirection:'column' }}>
        <div style={{ flex:1, overflow:'hidden', minHeight:0 }}>
          {/* Top app bar */}
          <div style={{ ...rowBetween, padding:'8px 20px 0' }}>
            <HelpBnkWordmark size={22}/>
            <div style={{ display:'flex', gap:10, alignItems:'center' }}>
              <button style={iconBtn}><MI.Bell size={20}/><Dot/></button>
              <Avatar name="Adrien Oz" idx={4} size={32}/>
            </div>
          </div>

          {/* Welcome greeting */}
          <div style={{ padding:'14px 20px 0' }}>
            <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color: HB.ink4 }}>Welcome back</div>
            <div style={{ fontSize:26, fontWeight:800, letterSpacing:'-0.024em',
              lineHeight:1.15, color: HB.ink, textWrap:'balance', marginTop:6 }}>
              Hi Adrien, what would you like to do?
            </div>
          </div>

          {/* Intent prompts — the welcome learning state */}
          <div style={{ padding:'14px 20px 0' }}>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
              {INTENT_PROMPTS.map(p => <IntentCard key={p.label} prompt={p} big/>)}
            </div>
          </div>

          {/* Canvas — small peek (will grow over time, per Variant B) */}
          <div style={{ padding:'18px 20px 0' }}>
            <div style={{ ...rowBetween, marginBottom:8 }}>
              <div style={sectionTitle}>Your canvas</div>
              <button style={linkBtn}>View all <MI.ChevR size={12}/></button>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1.05fr 1fr', gap:10 }}>
              <JourneyCard/>
              <RecEventCard/>
            </div>
          </div>

          {/* Feed peek */}
          <div style={{ padding:'18px 20px 16px' }}>
            <div style={{ ...rowBetween, marginBottom:8 }}>
              <div style={sectionTitle}>Your feed</div>
              <button style={{ ...iconBtn, color:HB.ink3 }}><MI.Sort size={16}/></button>
            </div>
            <div style={{ display:'flex', gap:6, marginBottom:10 }}>
              {['All','Following','Replies'].map(t => (
                <button key={t} onClick={()=>setFeed(t)} style={{
                  ...feedPill, ...(feed===t ? feedPillActive : null),
                }}>{t}</button>
              ))}
            </div>
            <PostCard post={FEED_POSTS[0]} compact/>
          </div>
        </div>

        <BottomNav active="Home" emphasizeAI/>
      </div>
    </Phone>
  );
};

/* ============================================================
   Variant B — "Returning user" (mature state)
   No intent prompts. Canvas bigger and moved up; feed bigger.
   AI lives only in the bottom nav.
   ============================================================ */
const VariantB = () => {
  const [feed, setFeed] = useState('All');
  return (
    <Phone bg="#FFFFFF">
      <div style={{ height:'100%', display:'flex', flexDirection:'column' }}>
        <div style={{ flex:1, overflow:'hidden', minHeight:0 }}>
          {/* Top app bar — compact greeting */}
          <div style={{ ...rowBetween, padding:'8px 20px 0' }}>
            <div style={{ display:'flex', alignItems:'center', gap:10 }}>
              <HelpBnkMark size={26}/>
              <div>
                <div style={{ fontSize:11, color: HB.ink4, fontWeight:600, letterSpacing:'.04em', textTransform:'uppercase' }}>Tuesday · 15 May</div>
                <div style={{ fontSize:15, fontWeight:800, letterSpacing:'-0.015em', color: HB.ink, marginTop:1 }}>Hi Adrien</div>
              </div>
            </div>
            <div style={{ display:'flex', gap:10, alignItems:'center' }}>
              <button style={iconBtn}><MI.Bell size={20}/><Dot/></button>
              <Avatar name="Adrien Oz" idx={4} size={32}/>
            </div>
          </div>

          {/* Canvas — BIG, full hero treatment */}
          <div style={{ padding:'14px 20px 0' }}>
            <div style={{ ...rowBetween, marginBottom:10 }}>
              <div style={sectionTitleLg}>Your canvas</div>
              <button style={linkBtn}>View all <MI.ChevR size={12}/></button>
            </div>
            <JourneyHero/>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginTop:10 }}>
              <RecChipCard kind="event" tone={2}/>
              <RecChipCard kind="space" tone={0}/>
            </div>
          </div>

          {/* Feed — bigger, multiple posts */}
          <div style={{ padding:'20px 20px 16px' }}>
            <div style={{ ...rowBetween, marginBottom:10 }}>
              <div style={sectionTitleLg}>Your feed</div>
              <button style={{ ...iconBtn, color:HB.ink3 }}><MI.Sort size={16}/></button>
            </div>
            <div style={{ display:'flex', gap:6, marginBottom:12 }}>
              {['All','Following','Replies'].map(t => (
                <button key={t} onClick={()=>setFeed(t)} style={{
                  ...feedPill, ...(feed===t ? feedPillActive : null),
                }}>{t}</button>
              ))}
            </div>
            <PostCard post={FEED_POSTS[0]} compact/>
          </div>
        </div>

        <BottomNav active="Home" emphasizeAI/>
      </div>
    </Phone>
  );
};

/* ============================================================
   Building blocks
   ============================================================ */

/* Intent prompt card — mirrors web .prompt-card style */
const IntentCard = ({ prompt, big }) => {
  const Cmp = MI[prompt.icon] || MI.Sparkles;
  const t = PROMPT_TONES[prompt.tone];
  return (
    <button style={{
      display:'flex', alignItems:'flex-start', gap:10, textAlign:'left',
      padding: big ? '14px 14px' : '12px 12px', borderRadius:14,
      background:'#fff', border:`1px solid ${HB.line}`,
      cursor:'pointer', minHeight: big ? 86 : 68,
      boxShadow:'0 1px 2px rgba(11,18,32,.03)',
    }}>
      <div style={{
        width: big ? 34 : 30, height: big ? 34 : 30, borderRadius:10,
        background: t.bg, color: t.fg,
        display:'inline-flex', alignItems:'center', justifyContent:'center', flexShrink:0,
      }}><Cmp size={big ? 18 : 16}/></div>
      <span style={{ flex:1, fontSize: big ? 13 : 12.5, fontWeight:600, lineHeight:1.32, color: HB.ink2, textWrap:'balance' }}>{prompt.label}</span>
    </button>
  );
};

/* Your Journey — small card (Variant A canvas) */
const JourneyCard = () => (
  <div style={{
    borderRadius:18, padding:14, color:'#fff',
    background:`linear-gradient(135deg, #2879D6 0%, ${HB.cyan1} 55%, ${HB.cyan2} 100%)`,
    position:'relative', overflow:'hidden', minHeight:168,
    display:'flex', flexDirection:'column', justifyContent:'space-between',
    boxShadow:'0 10px 30px -10px rgba(63,184,230,.55)',
  }}>
    <div style={{ position:'absolute', right:-50, top:-30, width:160, height:160,
      borderRadius:'50%', background:'rgba(255,255,255,.18)' }}/>
    <div style={{ position:'absolute', right:-80, bottom:-60, width:170, height:170,
      borderRadius:'50%', background:'rgba(255,255,255,.10)' }}/>
    <div style={{ position:'relative' }}>
      <div style={{ fontSize:10, fontWeight:700, opacity:.9, letterSpacing:'.08em', textTransform:'uppercase' }}>Your Journey</div>
      <div style={{ fontSize:13, opacity:.9, marginTop:4 }}>Funding round one</div>
    </div>
    <div style={{ position:'relative' }}>
      <div style={{ fontSize:28, fontWeight:800, letterSpacing:'-0.03em', fontVariantNumeric:'tabular-nums', lineHeight:1 }}>$280K</div>
      <div style={{ height:5, background:'rgba(255,255,255,.3)', borderRadius:99, overflow:'hidden', marginTop:10 }}>
        <div style={{ width:'42%', height:'100%', background:'#fff', borderRadius:99 }}/>
      </div>
      <div style={{ fontSize:11, marginTop:6, opacity:.9, display:'flex', justifyContent:'space-between' }}>
        <span>2 of 6 steps</span>
        <span style={{ fontWeight:700 }}>42%</span>
      </div>
    </div>
  </div>
);

/* Recommended event card */
const RecEventCard = () => (
  <div style={{
    borderRadius:18, background:'#fff', border:`1px solid ${HB.line}`,
    minHeight:168, display:'flex', flexDirection:'column', overflow:'hidden',
  }}>
    <div style={{ height:58, position:'relative', overflow:'hidden',
      background: TILE[2][0], color: TILE[2][1],
      display:'flex', alignItems:'center', justifyContent:'center' }}>
      <MI.Calendar size={22}/>
      <div style={{ position:'absolute', top:8, right:8, fontSize:10, fontWeight:700,
        background:'#fff', padding:'3px 7px', borderRadius:99, color: HB.ink2 }}>THU · 17:00</div>
    </div>
    <div style={{ padding:'10px 12px 12px', flex:1, display:'flex', flexDirection:'column' }}>
      <div style={{ fontSize:10, fontWeight:700, letterSpacing:'.05em', textTransform:'uppercase', color: HB.ink4 }}>Recommended event</div>
      <div style={{ fontSize:13.5, fontWeight:700, letterSpacing:'-.01em', marginTop:4, lineHeight:1.25, color: HB.ink, textWrap:'balance' }}>How to avoid costly commercial lease mistakes</div>
      <div style={{ flex:1 }}/>
      <button style={pillBtnDark}>Add to calendar</button>
    </div>
  </div>
);

/* Journey HERO — full-width (Variant B) */
const JourneyHero = () => (
  <div style={{
    borderRadius:22, padding:'18px 20px', color:'#fff',
    background:`linear-gradient(120deg, #2879D6 0%, ${HB.cyan1} 55%, ${HB.cyan2} 100%)`,
    position:'relative', overflow:'hidden', minHeight:170,
    display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:14,
    boxShadow:'0 14px 36px -12px rgba(40,121,214,.5)',
  }}>
    <div style={{ position:'absolute', right:-40, top:-60, width:220, height:220,
      borderRadius:'50%', background:'rgba(255,255,255,.16)' }}/>
    <div style={{ position:'absolute', right:30, bottom:-90, width:200, height:200,
      borderRadius:'50%', background:'rgba(255,255,255,.10)' }}/>
    <div style={{ position:'relative', flex:1 }}>
      <div style={{ fontSize:11, opacity:.9, textTransform:'uppercase', letterSpacing:'.08em', fontWeight:700 }}>Your Journey</div>
      <div style={{ fontSize:13, marginTop:4, opacity:.95 }}>Funding round one · pending DED</div>
      <div style={{ fontSize:38, fontWeight:800, letterSpacing:'-0.03em', fontVariantNumeric:'tabular-nums', lineHeight:1, marginTop:6 }}>$280K</div>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:14 }}>
        <div style={{ height:5, background:'rgba(255,255,255,.3)', borderRadius:99, overflow:'hidden', flex:1 }}>
          <div style={{ width:'42%', height:'100%', background:'#fff' }}/>
        </div>
        <span style={{ fontSize:11, fontWeight:700, opacity:.95, fontVariantNumeric:'tabular-nums' }}>2 / 6</span>
      </div>
    </div>
    <div style={{ position:'relative', display:'flex', flexDirection:'column', alignItems:'flex-end', gap:8 }}>
      <button style={heroPill}>Pending DED</button>
      <button style={heroBtn}>Continue <MI.ChevR size={12}/></button>
    </div>
  </div>
);

/* Recommendation chip card (Variant B) */
const RecChipCard = ({ kind, tone }) => {
  const [bg, fg] = TILE[tone];
  const meta = {
    event:  { eyebrow:'EVENT · THU', title:'Avoid costly commercial lease mistakes', icon:'Calendar' },
    space:  { eyebrow:'SPACE',       title:'Ecommerce Accelerator',                  icon:'Users' },
    course: { eyebrow:'COURSE',      title:'Pricing without apology',                icon:'Book' },
  }[kind];
  const Cmp = MI[meta.icon];
  return (
    <div style={{
      borderRadius:16, padding:14,
      background: bg, color: fg, minHeight:108,
      display:'flex', flexDirection:'column', justifyContent:'space-between',
    }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
        <div style={{ fontSize:10, fontWeight:700, letterSpacing:'.05em', opacity:.85 }}>{meta.eyebrow}</div>
        <Cmp size={16}/>
      </div>
      <div style={{ fontSize:13.5, fontWeight:700, lineHeight:1.25, letterSpacing:'-.01em', textWrap:'balance' }}>{meta.title}</div>
    </div>
  );
};

/* Post card */
const PostCard = ({ post, compact }) => (
  <div style={{ background:'#fff', border:`1px solid ${HB.line}`, borderRadius:16, padding: compact ? 12 : 14 }}>
    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
      <Avatar name={post.name} idx={post.av} size={36}/>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontSize:14, fontWeight:700, letterSpacing:'-.01em', color: HB.ink }}>{post.name}</div>
        <div style={{ fontSize:11, color: HB.ink4 }}>{post.handle} · {post.when}</div>
      </div>
      {post.follow && <button style={pillFollow}>Follow</button>}
      <button style={{ ...iconBtn, color: HB.ink4, padding:'2px 4px' }}><MI.Dots size={16}/></button>
    </div>
    <div style={{ fontSize:13.5, lineHeight:1.45, color: HB.ink2, marginTop:10,
      display:'-webkit-box', WebkitLineClamp: compact ? 3 : 4, WebkitBoxOrient:'vertical', overflow:'hidden' }}>
      {post.body}
    </div>
    <div style={{ display:'flex', alignItems:'center', gap:14, marginTop:12, color: HB.ink4 }}>
      <span style={metric}><MI.Heart size={14}/> {post.likes}</span>
      <span style={metric}><MI.Comment size={14}/> {post.replies}</span>
      <div style={{ flex:1 }}/>
      <button style={replyBtn}>Reply</button>
      <MI.Share size={14}/>
    </div>
  </div>
);

/* ============================================================
   Atoms / shared styles
   ============================================================ */
const rowBetween = { display:'flex', alignItems:'center', justifyContent:'space-between' };

const Dot = () => (
  <span style={{ position:'absolute', top:-1, right:-1, width:8, height:8, borderRadius:'50%',
    background:'#E11D2A', boxShadow:'0 0 0 1.5px #fff' }}/>
);

const sectionTitle = { fontSize:15, fontWeight:700, letterSpacing:'-.01em', color: HB.ink };
const sectionTitleLg = { fontSize:19, fontWeight:800, letterSpacing:'-.015em', color: HB.ink };

const iconBtn = { position:'relative', background:'transparent', border:'none', padding:4, color: HB.ink2, cursor:'pointer' };

const linkBtn = {
  display:'inline-flex', alignItems:'center', gap:2,
  background:'transparent', border:'none', cursor:'pointer',
  fontSize:12, color: HB.accent, fontWeight:600,
};

const feedPill = {
  padding:'6px 12px', borderRadius:99, background:'transparent',
  border:`1px solid ${HB.line}`, color: HB.ink3,
  fontSize:12.5, fontWeight:600, cursor:'pointer', letterSpacing:'-.005em',
};
const feedPillActive = { background: HB.ink, color:'#fff', borderColor: HB.ink };

const pillBtnDark = {
  padding:'7px 12px', borderRadius:99, background: HB.ink, color:'#fff',
  fontSize:11.5, fontWeight:600, border:'none', cursor:'pointer', alignSelf:'flex-start',
};
const pillFollow = {
  padding:'5px 11px', borderRadius:99, background:'#fff',
  border:`1px solid ${HB.ink}`, color: HB.ink,
  fontSize:11.5, fontWeight:700, cursor:'pointer',
};
const replyBtn = {
  padding:'5px 12px', borderRadius:99, background: HB.ink, color:'#fff',
  fontSize:11.5, fontWeight:600, border:'none', cursor:'pointer',
};
const metric = { display:'inline-flex', gap:5, alignItems:'center', fontSize:12, fontWeight:600 };

const heroPill = {
  padding:'4px 10px', borderRadius:99, background:'rgba(255,255,255,.25)',
  color:'#fff', fontSize:10.5, fontWeight:700, border:'none', cursor:'pointer',
  letterSpacing:'.04em', textTransform:'uppercase', backdropFilter:'blur(6px)',
};
const heroBtn = {
  padding:'8px 13px', borderRadius:99, background:'#fff', color: HB.ink,
  fontSize:12, fontWeight:700, border:'none', cursor:'pointer',
  display:'inline-flex', alignItems:'center', gap:4,
};

Object.assign(window, { VariantA, VariantB });