// App UI — sunrise brand, Solar Score, Golden Hour vocabulary
// Per brand book: espresso text, cream bg, sunrise gradient, no calorie-first framing.

const BG = '#FFF1E0';
const INK = '#1A0F08';
const INK2 = '#3A2A1C';
const INK3 = '#6B5A4A';
const LINE = '#F0D8B8';
const CARD = '#FFFFFF';
const CORAL = '#FF7A5C';
const ROSE = '#FF5E7E';
const PEACH = '#FFB07A';
const HOTPINK = '#FF4466';
const SOLAR1 = '#FFE59A';
const SOLAR2 = '#F5BC3D';
const SAGE  = '#3A8B56';

const FONT_DISPLAY = "'General Sans','Inter',-apple-system,system-ui,sans-serif";
const FONT_BODY    = "'Inter',-apple-system,system-ui,sans-serif";

const SUNRISE = `linear-gradient(135deg, ${PEACH} 0%, ${CORAL} 45%, ${HOTPINK} 100%)`;
const SOLAR   = `linear-gradient(135deg, ${SOLAR1} 0%, ${SOLAR2} 100%)`;

// ─── Bottom tab bar ───
function AppTabBar({ active = 'Rise' }) {
  const tabs = [
    { label: 'Rise',    icon:(c)=><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 16h16M6 16a6 6 0 1112 0" stroke={c} strokeWidth="1.8" strokeLinecap="round"/><path d="M12 4v2M4.5 7l1.4 1.4M19.5 7l-1.4 1.4" stroke={c} strokeWidth="1.8" strokeLinecap="round"/></svg> },
    { label: 'Fuel',    icon:(c)=><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 11h16a8 8 0 01-16 0z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/><path d="M9 7c0-1.5.5-2 1-3M13 7c0-1.5.5-2 1-3" stroke={c} strokeWidth="1.8" strokeLinecap="round"/></svg> },
    { label: 'Diary',   icon:(c)=><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 4h12a2 2 0 012 2v14l-3-2-3 2-3-2-3 2V4z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/></svg> },
    { label: 'Coach',   icon:(c)=><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4" stroke={c} strokeWidth="1.8"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4" stroke={c} strokeWidth="1.8" strokeLinecap="round"/></svg> },
  ];
  return (
    <div style={{
      position:'absolute', left:0, right:0, bottom:0, height:92,
      padding:'10px 24px 28px', display:'flex', justifyContent:'space-around',
      background:'rgba(255,241,224,0.94)',
      backdropFilter:'blur(14px)', WebkitBackdropFilter:'blur(14px)',
      borderTop:`1px solid ${LINE}`, fontFamily: FONT_BODY,
    }}>
      {tabs.map(t => {
        const on = t.label === active;
        const c = on ? CORAL : INK3;
        return (
          <div key={t.label} style={{display:'flex',flexDirection:'column',alignItems:'center',gap:4}}>
            {t.icon(c)}
            <div style={{fontSize:10, color:c, letterSpacing:0.2, fontWeight: on?700:500}}>{t.label}</div>
          </div>
        );
      })}
    </div>
  );
}

// ─── "Rise" — hero home screen card ───
function RiseCard() {
  return (
    <div style={{
      background: CARD, borderRadius: 24, padding: 22,
      border: `1px solid ${LINE}`, fontFamily: FONT_BODY,
    }}>
      <div style={{fontSize:11, letterSpacing:0.2*11, textTransform:'uppercase', color:INK3, fontWeight:600, marginBottom:4}}>Rise, Emanuel</div>
      <div style={{fontFamily: FONT_DISPLAY, fontSize:30, fontWeight:700, color:INK, letterSpacing:-0.03*30, lineHeight:1}}>Good morning.</div>
      <div style={{
        marginTop: 18, padding: 18,
        background: SUNRISE, borderRadius: 18, color:'#fff',
      }}>
        <div style={{fontSize:10, letterSpacing:0.2*10, textTransform:'uppercase', opacity:0.85, fontWeight:600}}>What to eat next · in 45 min</div>
        <div style={{fontFamily: FONT_DISPLAY, fontSize:22, fontWeight:700, letterSpacing:-0.03*22, marginTop:6, lineHeight:1.1}}>Protein-forward lunch.</div>
        <div style={{fontSize:13, marginTop:6, opacity:0.92, lineHeight:1.45}}>Wild salmon, sweet potato, arugula. ~540 kcal, 38g protein. Closes your golden hour.</div>
        <button style={{
          marginTop:14, width:'100%', padding:'12px',
          background:'rgba(255,255,255,0.95)', color:INK, borderRadius:12,
          fontFamily: FONT_BODY, fontSize:13, fontWeight:600,
        }}>Build this meal →</button>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginTop:14}}>
        <div style={{padding:'12px 14px', borderRadius:14, border:`1px solid ${LINE}`}}>
          <div style={{fontSize:10, letterSpacing:0.2*10, textTransform:'uppercase', color:INK3, fontWeight:600}}>Protein</div>
          <div style={{fontFamily:FONT_DISPLAY, fontSize:22, fontWeight:700, color:INK, marginTop:3}}>48<span style={{fontSize:13, color:INK3, fontWeight:500}}>/120g</span></div>
        </div>
        <div style={{padding:'12px 14px', borderRadius:14, border:`1px solid ${LINE}`, background: SOLAR}}>
          <div style={{fontSize:10, letterSpacing:0.2*10, textTransform:'uppercase', color:INK, fontWeight:600}}>Golden hour</div>
          <div style={{fontFamily:FONT_DISPLAY, fontSize:22, fontWeight:700, color:INK, marginTop:3}}>OPEN</div>
        </div>
      </div>
    </div>
  );
}

// ─── Solar Score card ───
function SolarScoreCard() {
  const score = 74;
  const circumference = 2 * Math.PI * 44;
  const offset = circumference * (1 - score/100);
  return (
    <div style={{
      background: CARD, borderRadius: 24, padding: 22,
      border: `1px solid ${LINE}`, fontFamily: FONT_BODY,
      display:'flex', alignItems:'center', gap:18,
    }}>
      <div style={{position:'relative', width:110, height:110, flexShrink:0}}>
        <svg width="110" height="110" viewBox="0 0 100 100" style={{transform:'rotate(-90deg)'}}>
          <circle cx="50" cy="50" r="44" fill="none" stroke={LINE} strokeWidth="8"/>
          <defs>
            <linearGradient id="solarG" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor={SOLAR1}/>
              <stop offset="100%" stopColor={SOLAR2}/>
            </linearGradient>
          </defs>
          <circle cx="50" cy="50" r="44" fill="none" stroke="url(#solarG)" strokeWidth="8"
            strokeDasharray={circumference} strokeDashoffset={offset} strokeLinecap="round"/>
        </svg>
        <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
          <div style={{fontFamily: FONT_DISPLAY, fontSize:38, fontWeight:700, color:INK, lineHeight:1, letterSpacing:-0.03*38}}>{score}</div>
          <div style={{fontSize:9, color:INK3, letterSpacing:0.15, marginTop:1, fontWeight:600}}>/ 100</div>
        </div>
      </div>
      <div style={{flex:1}}>
        <div style={{fontSize:10, letterSpacing:0.2*10, textTransform:'uppercase', color:INK3, fontWeight:600}}>Solar Score · today</div>
        <div style={{fontFamily:FONT_DISPLAY, fontSize:20, fontWeight:700, color:INK, marginTop:6, lineHeight:1.1, letterSpacing:-0.025*20}}>You're peaking.</div>
        <div style={{fontSize:13, color:INK3, marginTop:4, lineHeight:1.4}}>Keep the momentum.</div>
      </div>
    </div>
  );
}

// ─── Diary — food log row style (NOT calorie-first per brand book) ───
function DiaryCard() {
  const rows = [
    { meal:'B', name:'Oatmeal, 1 cup', kcal:307 },
    { meal:'B', name:'Banana, medium', kcal:105 },
    { meal:'B', name:'Almond butter, 1 tbsp', kcal:98 },
  ];
  return (
    <div style={{
      background: CARD, borderRadius: 24, padding: 22,
      border: `1px solid ${LINE}`, fontFamily: FONT_BODY,
    }}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div>
          <div style={{fontSize:10, letterSpacing:0.2*10, textTransform:'uppercase', color:INK3, fontWeight:600}}>Today</div>
          <div style={{fontFamily:FONT_DISPLAY, fontSize:22, fontWeight:700, color:INK, marginTop:4, letterSpacing:-0.025*22}}>Diary</div>
        </div>
        <div style={{
          fontSize:11, padding:'5px 10px', borderRadius:999,
          background: BG, color:INK, fontWeight:600, letterSpacing:0.02,
        }}>653 kcal left</div>
      </div>
      <div style={{marginTop: 14, paddingTop: 14, borderTop: `1px solid ${LINE}`}}>
        <div style={{fontSize:10, letterSpacing:0.2*10, textTransform:'uppercase', color:INK3, fontWeight:600, marginBottom:10}}>Breakfast</div>
        {rows.map((r,i)=>(
          <div key={i} style={{display:'flex', justifyContent:'space-between', padding:'8px 0', fontSize:13, color:INK2}}>
            <span>{r.name}</span>
            <span style={{color:INK3}}>{r.kcal} kcal</span>
          </div>
        ))}
      </div>
      <button style={{
        marginTop:14, width:'100%', padding:'12px', borderRadius:12,
        background: BG, color: INK, border:`1px dashed ${LINE}`,
        fontFamily: FONT_BODY, fontSize:13, fontWeight:600,
      }}>+ Add food</button>
    </div>
  );
}

// ─── Coach chat ───
function CoachChat() {
  const msgs = [
    { me:false, text:"Good morning. Solar Score is 74 — you're peaking. Start with protein." },
    { me:true,  text:"What should I eat for lunch?" },
    { me:false, text:"Golden hour closes in 45 min. Wild salmon, sweet potato, arugula. ~540 kcal, 38g protein. Do it." },
    { me:true,  text:"How's my week?" },
    { me:false, text:"Protein trended up 18%. Consistency is the quiet advantage. Keep going." },
  ];
  return (
    <div style={{
      background: CARD, borderRadius: 24, padding: 20,
      border: `1px solid ${LINE}`, fontFamily: FONT_BODY,
      display:'flex', flexDirection:'column', gap:10,
    }}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 4}}>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:36, height:36, borderRadius:10, background:SUNRISE, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:16, fontWeight:700}}>A</div>
          <div>
            <div style={{fontSize:13, fontWeight:700, color:INK}}>Coach</div>
            <div style={{fontSize:11, color:INK3}}>Warm · Direct</div>
          </div>
        </div>
        <div style={{
          fontSize:10, padding:'4px 8px', borderRadius:999,
          background:`${SAGE}15`, color:SAGE, letterSpacing:0.08, textTransform:'uppercase', fontWeight:700,
        }}>Online</div>
      </div>
      {msgs.map((m,i)=>(
        <div key={i} style={{
          alignSelf: m.me ? 'flex-end' : 'flex-start', maxWidth:'85%',
          padding:'10px 13px', borderRadius: 14,
          background: m.me ? INK : BG,
          color: m.me ? BG : INK,
          fontSize:13, lineHeight:1.42,
          borderBottomRightRadius: m.me ? 4 : 14,
          borderBottomLeftRadius:  m.me ? 14 : 4,
        }}>{m.text}</div>
      ))}
      <div style={{
        marginTop:6, display:'flex', gap:10, alignItems:'center',
        padding:'12px 14px', borderRadius:14, border:`1px solid ${LINE}`,
        color: INK3, fontSize:13,
      }}>
        <div>Ask your coach…</div>
        <div style={{marginLeft:'auto', width:26, height:26, borderRadius:999, background:SUNRISE, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:14}}>↑</div>
      </div>
    </div>
  );
}

// ─── Streak card ───
function StreakCard() {
  const days = ['M','T','W','T','F','S','S'];
  const states = [true,true,true,true,true,false,false];
  return (
    <div style={{
      background: CARD, borderRadius: 24, padding: 22,
      border: `1px solid ${LINE}`, fontFamily: FONT_BODY,
    }}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
        <div>
          <div style={{fontSize:10, letterSpacing:0.2*10, textTransform:'uppercase', color:INK3, fontWeight:600}}>Your streak</div>
          <div style={{fontFamily:FONT_DISPLAY, fontSize:22, fontWeight:700, color:INK, marginTop:4, letterSpacing:-0.025*22}}>Keep rising</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{fontFamily:FONT_DISPLAY, fontSize:56, fontWeight:700, lineHeight:1, letterSpacing:-0.03*56,
                       background: SUNRISE, WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text'}}>14</div>
          <div style={{fontSize:11, color:INK3, marginTop:2}}>days in a row</div>
        </div>
      </div>
      <div style={{display:'flex', justifyContent:'space-between', margin:'20px 0 18px'}}>
        {days.map((d,i)=>(
          <div key={i} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:8}}>
            <div style={{fontSize:11, color:INK3, fontWeight:600}}>{d}</div>
            <div style={{
              width:32, height:32, borderRadius:10,
              background: states[i] ? SUNRISE : BG,
              border: `1px solid ${states[i] ? 'transparent' : LINE}`,
              display:'flex', alignItems:'center', justifyContent:'center',
              color: states[i] ? '#fff' : INK3, fontSize:13, fontWeight:700,
            }}>{states[i] ? '✓' : '·'}</div>
          </div>
        ))}
      </div>
      <div style={{
        padding:'12px 14px', borderRadius:14, background: BG,
        display:'flex', justifyContent:'space-between', alignItems:'center',
        border:`1px solid ${LINE}`,
      }}>
        <div>
          <div style={{fontSize:12, fontWeight:700, color:INK}}>Shields</div>
          <div style={{fontSize:11, color:INK3, marginTop:2}}>Miss a day without losing your streak</div>
        </div>
        <div style={{display:'flex', gap:4, fontSize:16}}>
          <span>🛡️</span><span>🛡️</span><span>🛡️</span>
        </div>
      </div>
    </div>
  );
}

// ─── Coach timeline (V2) ───
function CoachTimeline() {
  const items = [
    { time:'7:00 AM',  title:'Rise',              body:'Solar Score 74. You are peaking. Start with protein.' },
    { time:'12:30 PM', title:'Golden hour',       body:'Open for 45 min. Wild salmon, sweet potato, arugula. Do it.' },
    { time:'6:00 PM',  title:'Next decision',     body:'Protein at 98g / 120g. Greek yogurt closes the gap.' },
    { time:'9:30 PM',  title:'Day closed',        body:'Solar Score 81. 14-day streak. Tomorrow: protein at breakfast.' },
  ];
  return (
    <div style={{position:'relative', paddingLeft:26}}>
      <div style={{position:'absolute', left:6, top:10, bottom:10, width:1, background:'var(--line-2)'}}/>
      {items.map((it,i)=>(
        <div key={i} style={{position:'relative', paddingBottom:26}}>
          <div style={{
            position:'absolute', left:-26, top:6, width:13, height:13, borderRadius:999,
            background: i===0 ? SUNRISE : 'var(--cream)',
            border: i===0 ? 'none' : `2px solid ${CORAL}`,
          }}/>
          <div className="eyebrow" style={{color:'var(--ink-3)', marginBottom:4}}>{it.time}</div>
          <div style={{fontFamily: FONT_DISPLAY, fontSize:28, fontWeight:700, lineHeight:1.1, color:'var(--ink)', marginBottom:6, letterSpacing:-0.03*28}}>{it.title}</div>
          <div style={{fontSize:16, color:'var(--ink-2)', lineHeight:1.5, maxWidth:460}}>{it.body}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  AppTabBar, RiseCard, SolarScoreCard, DiaryCard, CoachChat, StreakCard, CoachTimeline,
  AWERA_COLORS: { BG, INK, INK2, INK3, LINE, CORAL, ROSE, PEACH, HOTPINK, SOLAR1, SOLAR2, SAGE, SUNRISE, SOLAR },
});