// FlatChat phone screens — used inside marketing-site phones
// Each screen is sized to the device viewport (402×874) so it composes with IOSDevice

const FC_BG = {
  // Default warm sunset
  warm: 'linear-gradient(180deg, #F88780 0%, #FFB088 45%, #FFD66B 100%)',
  // Mint/cool variant
  mint: 'linear-gradient(180deg, #6FD3B5 0%, #9FE6BF 50%, #FFE99B 100%)',
  // Lavender variant
  lavender: 'linear-gradient(180deg, #B98BE6 0%, #F18FB5 55%, #FFC894 100%)',
};

const APP_SCREEN_HEADER = {
  padding: '70px 22px 0',
};

const APP_SCREEN_TITLE = {
  fontFamily: '"Bricolage Grotesque", Geist, sans-serif',
  fontWeight: 800,
  fontSize: 34,
  lineHeight: 1.05,
  color: '#2A1810',
  letterSpacing: '-0.02em',
};

function AppScreenHeader({ title, subtitle }) {
  return (
    <div style={APP_SCREEN_HEADER}>
      <div style={APP_SCREEN_TITLE}>{title}</div>
      {subtitle && <div style={{ fontSize:13, color:'#8B6F5E', marginTop:6 }}>{subtitle}</div>}
    </div>
  );
}

// House + chat bubble glyph used as the app mark
function FCMark({ size = 96, color = '#fff', bubble = '#FFCC4A' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 96 96" fill="none">
      <path d="M14 46 L48 16 L82 46 L82 82 Q82 86 78 86 L18 86 Q14 86 14 82 Z"
        fill={color} />
      <rect x="40" y="58" width="14" height="28" fill="#F8857F" opacity="0.85" />
      {/* chat bubble */}
      <g>
        <rect x="44" y="34" width="26" height="22" rx="6" fill={bubble}/>
        <path d="M50 56 L50 64 L58 56 Z" fill={bubble}/>
      </g>
    </svg>
  );
}

// Small SF-style icons
function MailIcon({ size=18, color='#fff' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <rect x="2.5" y="5" width="19" height="14" rx="3.5" stroke={color} strokeWidth="1.8"/>
      <path d="M3 7.5 L12 13.5 L21 7.5" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function LockIcon({ size=18, color='#fff' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <rect x="4.5" y="10.5" width="15" height="10" rx="2.5" stroke={color} strokeWidth="1.8"/>
      <path d="M7.5 10.5 V7.5 a4.5 4.5 0 0 1 9 0 V10.5" stroke={color} strokeWidth="1.8"/>
    </svg>
  );
}
function AppleGlyph({ size=18, color='#000' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
      <path d="M16.7 12.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.7-3-2-3.7-2-1.6-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.2 2.5-1.8 3.1-.5 7.7 1.3 10.3.9 1.2 1.9 2.6 3.3 2.6 1.3-.1 1.8-.9 3.4-.9 1.6 0 2 .9 3.4.9 1.4 0 2.3-1.2 3.2-2.5 1-1.4 1.4-2.8 1.4-2.9-.1 0-2.7-1-2.7-4.1zM14.2 4.8c.7-.9 1.2-2.1 1.1-3.3-1 0-2.3.7-3 1.6-.6.8-1.2 2-1 3.2 1.1.1 2.2-.6 2.9-1.5z"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// LOGIN SCREEN — matches user's reference screenshot
// ─────────────────────────────────────────────────────────────
function LoginScreen({ palette = 'warm' }) {
  return (
    <div style={{
      width: '100%', height: '100%', position: 'relative',
      background: FC_BG[palette],
      overflow: 'hidden', fontFamily: 'Geist, -apple-system, system-ui, sans-serif',
    }}>
      {/* soft orbs */}
      <div style={{ position:'absolute', top:-60, left:-80, width:280, height:280, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(255,200,170,.55), rgba(255,200,170,0))', filter:'blur(8px)' }}/>
      <div style={{ position:'absolute', top:280, right:-60, width:220, height:220, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(220,150,180,.45), rgba(220,150,180,0))', filter:'blur(12px)' }}/>
      <div style={{ position:'absolute', bottom:-40, left:-40, width:200, height:200, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(255,235,140,.5), rgba(255,235,140,0))', filter:'blur(14px)' }}/>

      {/* top brand block */}
      <div style={{ paddingTop: 60, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <FCMark size={108} />
        <div style={{ fontFamily:'"Bricolage Grotesque", Geist, sans-serif', fontWeight: 800, fontSize: 52, color: '#fff', letterSpacing: '-0.02em', marginTop: 6, textShadow: '0 2px 16px rgba(180,60,60,.18)' }}>
          FlatChat
        </div>
        <div style={{ marginTop: 6, color: 'rgba(255,255,255,.92)', fontSize: 17, fontWeight: 500, lineHeight: 1.35, textAlign: 'center' }}>
          Split bills. Share lists.<br/>Never forget bin day.
        </div>
      </div>

      {/* glass card */}
      <div style={{
        position: 'absolute', left: 18, right: 18, bottom: 44,
        borderRadius: 28, padding: 18,
        background: 'rgba(255,255,255,.18)',
        backdropFilter: 'blur(18px) saturate(150%)',
        WebkitBackdropFilter: 'blur(18px) saturate(150%)',
        border: '1px solid rgba(255,255,255,.32)',
        boxShadow: '0 12px 40px rgba(190,80,80,.12)',
      }}>
        {/* segmented */}
        <div style={{ display: 'flex', background: 'rgba(255,255,255,.25)', borderRadius: 999, padding: 4, marginBottom: 14 }}>
          <div style={{ flex: 1, textAlign: 'center', padding: '10px 0', borderRadius: 999, background: '#fff', color: '#2A1810', fontWeight: 700, fontSize: 16, boxShadow: '0 2px 8px rgba(0,0,0,.06)' }}>Sign In</div>
          <div style={{ flex: 1, textAlign: 'center', padding: '10px 0', color: '#fff', fontWeight: 600, fontSize: 16 }}>Sign Up</div>
        </div>
        {/* fields */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', background: 'rgba(255,255,255,.22)', borderRadius: 16, marginBottom: 10 }}>
          <MailIcon /><span style={{ color: 'rgba(255,255,255,.9)', fontSize: 16 }}>Email</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', background: 'rgba(255,255,255,.22)', borderRadius: 16, marginBottom: 14 }}>
          <LockIcon /><span style={{ color: 'rgba(255,255,255,.9)', fontSize: 16 }}>Password</span>
        </div>
        {/* primary */}
        <div style={{ background: '#fff', borderRadius: 16, padding: '15px 0', textAlign: 'center', color: '#F47A78', fontWeight: 700, fontSize: 17, boxShadow: '0 6px 20px rgba(244,122,120,.18)' }}>
          Sign In
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 4px', color: 'rgba(255,255,255,.85)', fontSize: 13 }}>
          <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,.4)' }}/>or<div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,.4)' }}/>
        </div>
        <div style={{ background: '#fff', borderRadius: 16, padding: '15px 0', textAlign: 'center', color: '#000', fontWeight: 700, fontSize: 17, display:'flex', alignItems:'center', justifyContent:'center', gap: 8 }}>
          <AppleGlyph size={18} /> Continue with Apple
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SPLIT SCREEN
// ─────────────────────────────────────────────────────────────
function SplitScreen() {
  const expenses = [
    { e:'🛒', t:'Pak\u2019nSave run', who:'Maya paid · split equally', amt:'$84.20', tint:'#FFE3D6' },
    { e:'⚡', t:'Power bill — May', who:'Theo paid · by shares', amt:'$112.40', tint:'#FFF1CF' },
    { e:'🌐', t:'Internet', who:'Recurring · monthly', amt:'$79.00', tint:'#E5F1FF', recur: true },
    { e:'🍕', t:'Friday takeaway', who:'You paid · split 4 ways', amt:'$48.00', tint:'#FFD9E4' },
    { e:'🧻', t:'Bathroom supplies', who:'Jess paid · equally', amt:'$22.50', tint:'#E4F8E5' },
  ];
  return (
    <div style={{ width:'100%', height:'100%', background:'#FFF8F1', fontFamily:'Geist, -apple-system, system-ui, sans-serif', position:'relative', overflow:'hidden' }}>
      <AppScreenHeader title="Split" />
      {/* hero balance card */}
      <div style={{ margin:'12px 18px 0', borderRadius:28, padding:'22px 22px 20px',
        background:'linear-gradient(135deg, #6FE0B7 0%, #BFEBC2 100%)',
        boxShadow:'0 16px 40px rgba(110,200,160,.28)', color:'#0E3D2C', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', top:-30, right:-20, width:140, height:140, borderRadius:'50%', background:'rgba(255,255,255,.25)' }}/>
        <div style={{ fontSize:13, fontWeight:600, opacity:.7, letterSpacing:'.04em', textTransform:'uppercase' }}>You're owed</div>
        <div style={{ fontFamily:'"Bricolage Grotesque", Geist, sans-serif', fontWeight:800, fontSize:48, letterSpacing:'-0.03em', marginTop:4 }}>$42.30</div>
        <div style={{ fontSize:13, opacity:.78, marginTop:2 }}>across 3 flatmates · settled to the cent</div>
        {/* avatar pills */}
        <div style={{ display:'flex', gap:8, marginTop:14, flexWrap:'wrap' }}>
          {[
            {n:'M', c:'#F88780', v:'+18.20'},
            {n:'T', c:'#7DB3F0', v:'+14.10'},
            {n:'J', c:'#C39CE6', v:'+10.00'},
          ].map(p=>(
            <div key={p.n} style={{ display:'flex', alignItems:'center', gap:8, background:'rgba(255,255,255,.55)', padding:'5px 12px 5px 5px', borderRadius:999, color:'#0E3D2C', fontSize:13, fontWeight:600 }}>
              <div style={{ width:24, height:24, borderRadius:'50%', background:p.c, color:'#fff', display:'grid', placeItems:'center', fontSize:11, fontWeight:700 }}>{p.n}</div>
              {p.v}
            </div>
          ))}
        </div>
      </div>

      {/* recent header */}
      <div style={{ padding:'18px 22px 8px', display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
        <div style={{ fontWeight:700, fontSize:15, color:'#2A1810' }}>Recent</div>
        <div style={{ fontSize:13, color:'#F47A78', fontWeight:600 }}>Settle up</div>
      </div>
      <div style={{ margin:'0 18px', background:'#fff', borderRadius:20, overflow:'hidden', boxShadow:'0 6px 18px rgba(40,20,10,.05)' }}>
        {expenses.map((x,i)=>(
          <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 14px', borderTop: i ? '1px solid #F4EBE2' : 'none' }}>
            <div style={{ width:38, height:38, borderRadius:12, background:x.tint, display:'grid', placeItems:'center', fontSize:18 }}>{x.e}</div>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:14, fontWeight:600, color:'#2A1810', display:'flex', alignItems:'center', gap:6 }}>
                {x.t}
                {x.recur && <span style={{ fontSize:10, padding:'2px 6px', borderRadius:6, background:'#E5F1FF', color:'#2168C9', fontWeight:700, letterSpacing:'.02em' }}>RECUR</span>}
              </div>
              <div style={{ fontSize:12, color:'#8B6F5E', marginTop:1 }}>{x.who}</div>
            </div>
            <div style={{ fontWeight:700, fontSize:14, color:'#2A1810' }}>{x.amt}</div>
          </div>
        ))}
      </div>

      {/* FAB */}
      <div style={{ position:'absolute', bottom:96, right:22, width:60, height:60, borderRadius:'50%',
        background:'linear-gradient(135deg,#F88780,#FFB088)', display:'grid', placeItems:'center',
        boxShadow:'0 12px 26px rgba(248,135,128,.45)', color:'#fff', fontSize:28, fontWeight:300 }}>+</div>

      {/* tab bar */}
      <TabBar active="Split" />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LISTS SCREEN
// ─────────────────────────────────────────────────────────────
function ListsScreen() {
  const lists = [
    { e:'🥦', t:'Groceries', n:8, of:14, c:'#FFE3D6', bar:'#F88780' },
    { e:'🧰', t:'Hardware', n:1, of:5, c:'#E5F1FF', bar:'#7DB3F0' },
    { e:'🍱', t:'Takeaway ideas', n:3, of:7, c:'#FFF1CF', bar:'#E4B73A' },
    { e:'🧴', t:'Household', n:0, of:4, c:'#E4F8E5', bar:'#5BB97A' },
    { e:'🎉', t:'Flat party', n:6, of:9, c:'#FFD9E4', bar:'#E68FA8' },
    { e:'🌱', t:'Garden', n:2, of:3, c:'#EDE3FF', bar:'#A685D9' },
  ];
  return (
    <div style={{ width:'100%', height:'100%', background:'#FFF8F1', fontFamily:'Geist, -apple-system, system-ui, sans-serif', position:'relative', overflow:'hidden' }}>
      <AppScreenHeader title="Lists" subtitle="6 lists · everyone in the flat sees the same thing" />
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, padding:'16px 18px 0' }}>
        {lists.map(l=>{
          const pct = ((l.of - l.n) / l.of) * 100;
          return (
            <div key={l.t} style={{ background:'#fff', borderRadius:20, padding:14, boxShadow:'0 6px 18px rgba(40,20,10,.05)' }}>
              <div style={{ width:42, height:42, borderRadius:14, background:l.c, display:'grid', placeItems:'center', fontSize:22 }}>{l.e}</div>
              <div style={{ marginTop:10, fontSize:15, fontWeight:700, color:'#2A1810' }}>{l.t}</div>
              <div style={{ fontSize:12, color:'#8B6F5E', marginTop:1 }}>{l.n} of {l.of} left</div>
              <div style={{ marginTop:10, height:5, background:'#F4EBE2', borderRadius:999, overflow:'hidden' }}>
                <div style={{ width:`${pct}%`, height:'100%', background:l.bar, borderRadius:999 }}/>
              </div>
            </div>
          );
        })}
      </div>

      {/* quick start row at bottom */}
      <div style={{ position:'absolute', bottom:96, left:18, right:18 }}>
        <div style={{ fontSize:12, fontWeight:700, color:'#8B6F5E', letterSpacing:'.06em', textTransform:'uppercase', marginBottom:8, paddingLeft:4 }}>Quick start</div>
        <div style={{ display:'flex', gap:8, overflow:'hidden' }}>
          {['🥦 Groceries','🧰 Hardware','🍱 Takeaway','🧴 Household'].map(t=>(
            <div key={t} style={{ padding:'8px 12px', background:'#fff', borderRadius:999, fontSize:12, fontWeight:600, color:'#2A1810', boxShadow:'0 4px 10px rgba(40,20,10,.05)', whiteSpace:'nowrap' }}>{t}</div>
          ))}
        </div>
      </div>

      <TabBar active="Lists" />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// REMINDERS SCREEN
// ─────────────────────────────────────────────────────────────
function RemindersScreen() {
  const groups = [
    { label:'Overdue', tint:'#F88780', bg:'#FFE3D6', items:[
      { e:'🪴', t:'Water the plants', who:'Maya', meta:'2 days late' },
    ]},
    { label:'Today', tint:'#E4B73A', bg:'#FFF1CF', items:[
      { e:'🗑️', t:'Take the bins out', who:'Theo', meta:'Bin day · rotates weekly', repeat:true },
      { e:'🧽', t:'Clean the kitchen', who:'You', meta:'Every Friday', repeat:true },
    ]},
    { label:'Tomorrow', tint:'#7DB3F0', bg:'#E5F1FF', items:[
      { e:'🛁', t:'Bathroom deep clean', who:'Jess', meta:'Biweekly · rotates' , repeat:true},
    ]},
    { label:'This week', tint:'#A685D9', bg:'#EDE3FF', items:[
      { e:'🚗', t:'Car warrant due', who:'Theo', meta:'Friday' },
    ]},
  ];
  return (
    <div style={{ width:'100%', height:'100%', background:'#FFF8F1', fontFamily:'Geist, -apple-system, system-ui, sans-serif', position:'relative', overflow:'hidden' }}>
      <AppScreenHeader title="Reminders" subtitle="Next 7 days · quiet hours 10pm–7am" />
      <div style={{ padding:'14px 18px 0' }}>
        {groups.map(g=>(
          <div key={g.label} style={{ marginBottom:12 }}>
            <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6, paddingLeft:4 }}>
              <div style={{ width:8, height:8, borderRadius:'50%', background:g.tint }}/>
              <div style={{ fontSize:12, fontWeight:700, color:'#2A1810', letterSpacing:'.04em', textTransform:'uppercase' }}>{g.label}</div>
            </div>
            <div style={{ background:'#fff', borderRadius:18, overflow:'hidden', boxShadow:'0 6px 18px rgba(40,20,10,.05)' }}>
              {g.items.map((x,i)=>(
                <div key={x.t} style={{ display:'flex', alignItems:'center', gap:10, padding:'12px 12px 12px 0', borderTop: i ? '1px solid #F4EBE2' : 'none' }}>
                  <div style={{ width:4, alignSelf:'stretch', background:g.tint }}/>
                  <div style={{ width:34, height:34, borderRadius:11, background:g.bg, display:'grid', placeItems:'center', fontSize:17, marginLeft:8 }}>{x.e}</div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:14, fontWeight:600, color:'#2A1810', display:'flex', alignItems:'center', gap:6 }}>
                      {x.t}
                      {x.repeat && <span style={{ fontSize:10, padding:'2px 6px', borderRadius:6, background:'#FFE3D6', color:'#C84F4D', fontWeight:700 }}>↻</span>}
                    </div>
                    <div style={{ fontSize:11.5, color:'#8B6F5E', marginTop:1 }}>{x.meta}</div>
                  </div>
                  <div style={{ width:28, height:28, borderRadius:'50%', background:'#fff', border:'2px solid #E5DCD3', marginRight:12 }}/>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <TabBar active="Reminders" />
    </div>
  );
}

// Tab bar shared across the three feature screens
function TabBar({ active }) {
  const tabs = [
    { k:'Split', g: <span>$</span> },
    { k:'Lists', g: <span>≡</span> },
    { k:'Reminders', g: <span>⏰</span> },
    { k:'Settings', g: <span>⚙</span> },
  ];
  return (
    <div style={{
      position:'absolute', bottom:0, left:0, right:0, height:84,
      background:'rgba(255,248,241,.85)', backdropFilter:'blur(20px)', WebkitBackdropFilter:'blur(20px)',
      borderTop:'1px solid rgba(40,20,10,.06)',
      display:'flex', justifyContent:'space-around', paddingTop:8,
    }}>
      {tabs.map(t=>(
        <div key={t.k} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:2, color: t.k===active ? '#F47A78' : '#A89283' }}>
          <div style={{ fontSize:18, fontWeight:700, lineHeight:1 }}>{t.g}</div>
          <div style={{ fontSize:10, fontWeight:600 }}>{t.k}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  FCMark, MailIcon, LockIcon, AppleGlyph,
  AppScreenHeader, LoginScreen, SplitScreen, ListsScreen, RemindersScreen, FC_BG,
});