// PhoneMockup.jsx — realistic iPhone 15 Pro chrome with the ReturnScribe app inside.
// The inner content is swappable via the `screen` prop so each hero direction can show
// a different facet of the app.

const PhoneShell = ({ width = 320, accent = '#1a3a52', surface = '#ffffff', children, scale = 1 }) => {
  const W = width;
  const H = Math.round(W * (852 / 393)); // iPhone 15 Pro aspect
  // scale chrome relative to a 280px reference so smaller phones don't get tiny chrome,
  // but cap the upper end so the largest phones don't get oversized chrome.
  const k = Math.min(1.15, Math.max(0.85, W / 280));
  const padX = Math.round(20 * k);
  const islandW = Math.round(96 * k);
  const islandH = Math.round(28 * k);
  const islandTop = Math.round(11 * k);
  const statusH = Math.round(44 * k);
  const timeFs = Math.round(15 * k);
  const sigW = Math.round(17 * k);
  const sigH = Math.round(11 * k);
  const battW = Math.round(25 * k);
  const battH = Math.round(11 * k);
  return (
    <div style={{
      width: W, height: H, position: 'relative',
      background: '#0a0a0a', borderRadius: W * 0.13,
      padding: W * 0.024,
      boxShadow: '0 30px 60px -20px rgba(0,0,0,0.35), 0 0 0 1.5px rgba(255,255,255,0.06) inset, 0 0 0 0.5px rgba(0,0,0,0.4)',
      transform: `scale(${scale})`, transformOrigin: 'top left',
    }}>
      {/* titanium edge highlight */}
      <div style={{ position:'absolute', inset:0, borderRadius: W*0.13, pointerEvents:'none',
        background: 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.04) 100%)' }} />
      <div style={{
        width:'100%', height:'100%', borderRadius: W * 0.105,
        background: surface, overflow:'hidden', position:'relative',
        display:'flex', flexDirection:'column',
      }}>
        {/* Status bar */}
        <div style={{
          height: statusH, padding: `0 ${padX}px`, display:'flex',
          alignItems:'center', justifyContent:'space-between',
          fontSize: timeFs, fontWeight:600, color: '#0a0a0a', flexShrink:0,
          fontVariantNumeric:'tabular-nums',
          position:'relative',
        }}>
          <span style={{ zIndex:1 }}>9:41</span>
          {/* Dynamic Island */}
          <div style={{
            position:'absolute', top: islandTop, left:'50%', transform:'translateX(-50%)',
            width: islandW, height: islandH, background:'#000', borderRadius: islandH,
          }} />
          <div style={{ display:'flex', gap: Math.max(3, Math.round(5*k)), alignItems:'center', zIndex:1 }}>
            {/* signal */}
            <svg width={sigW} height={sigH} viewBox="0 0 17 11"><g fill="#0a0a0a">
              <rect x="0" y="7" width="3" height="4" rx="0.5"/>
              <rect x="4.5" y="5" width="3" height="6" rx="0.5"/>
              <rect x="9" y="2.5" width="3" height="8.5" rx="0.5"/>
              <rect x="13.5" y="0" width="3" height="11" rx="0.5"/>
            </g></svg>
            {/* battery */}
            <svg width={battW} height={battH} viewBox="0 0 25 11"><rect x="0.5" y="0.5" width="21" height="10" rx="2.5" fill="none" stroke="#0a0a0a" strokeOpacity="0.4"/><rect x="22.5" y="3.5" width="1.5" height="4" rx="0.5" fill="#0a0a0a" fillOpacity="0.4"/><rect x="2" y="2" width="18" height="7" rx="1.5" fill="#0a0a0a"/></svg>
          </div>
        </div>
        <div style={{ flex:1, position:'relative', overflow:'hidden' }}>{children}</div>
        {/* Home indicator */}
        <div style={{
          position:'absolute', bottom: Math.round(8*k), left:'50%', transform:'translateX(-50%)',
          width: Math.round(108*k), height: Math.round(4*k), borderRadius: Math.round(2*k),
          background: 'rgba(0,0,0,0.32)', pointerEvents:'none',
        }} />
      </div>
    </div>
  );
};

// ---------- Screen A: Returns dashboard with countdown rings ----------
const ScreenReturnsDash = ({ accent = '#1a3a52' }) => {
  const items = [
    { store: 'Aritzia',  amt: '$248.00', daysLeft: 3,  total: 30, urgent: true,  date: 'Mar 28' },
    { store: 'Apple',    amt: '$129.00', daysLeft: 12, total: 14, urgent: false, date: 'Apr 14' },
    { store: 'REI',      amt: '$84.50',  daysLeft: 47, total: 90, urgent: false, date: 'Mar 11' },
    { store: 'Uniqlo',   amt: '$56.90',  daysLeft: 21, total: 30, urgent: false, date: 'Apr 06' },
  ];
  return (
    <div style={{ height:'100%', background:'#fafaf7', overflow:'hidden', fontFamily:'Inter' }}>
      <div style={{ padding:'18px 22px 12px' }}>
        <div style={{ fontSize:11, fontWeight:600, letterSpacing:'0.06em', color:'#8a8a85', textTransform:'uppercase' }}>Returns</div>
        <div style={{ fontSize:28, fontWeight:600, color:'#1a1a1a', letterSpacing:'-0.02em', marginTop:2 }}>4 still open</div>
        <div style={{ fontSize:13, color:'#5c5c5c', marginTop:2 }}>1 closing this week</div>
      </div>

      {/* segmented */}
      <div style={{ padding:'0 22px 14px', display:'flex', gap:6, fontSize:12, fontWeight:500 }}>
        {['Open','Closing','Returned'].map((t,i)=>(
          <div key={t} style={{
            padding:'6px 12px', borderRadius:999,
            background: i===0 ? '#1a1a1a' : 'transparent',
            color: i===0 ? '#fafaf7' : '#5c5c5c',
            border: i===0 ? 'none' : '1px solid rgba(0,0,0,0.08)',
          }}>{t}</div>
        ))}
      </div>

      <div style={{ padding:'0 22px 26px', display:'flex', flexDirection:'column', gap:10 }}>
        {items.map((it) => {
          const pct = it.daysLeft / it.total;
          const dashLen = 2 * Math.PI * 18;
          const offset = dashLen * (1 - pct);
          const ringColor = it.urgent ? '#c0392b' : accent;
          return (
            <div key={it.store} style={{
              background:'#fff', border:'1px solid rgba(0,0,0,0.06)',
              borderRadius:14, padding:'12px 14px',
              display:'flex', alignItems:'center', gap:14,
            }}>
              <div style={{ position:'relative', width:44, height:44, flexShrink:0 }}>
                <svg width="44" height="44" viewBox="0 0 44 44">
                  <circle cx="22" cy="22" r="18" fill="none" stroke="rgba(0,0,0,0.06)" strokeWidth="3" />
                  <circle cx="22" cy="22" r="18" fill="none" stroke={ringColor} strokeWidth="3"
                    strokeDasharray={dashLen} strokeDashoffset={offset} strokeLinecap="round"
                    transform="rotate(-90 22 22)" />
                </svg>
                <div style={{
                  position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:13, fontWeight:600, color:'#1a1a1a', fontVariantNumeric:'tabular-nums',
                }}>{it.daysLeft}</div>
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                  <div style={{ fontSize:14, fontWeight:600, color:'#1a1a1a' }}>{it.store}</div>
                  <div style={{ fontSize:13, fontWeight:500, color:'#1a1a1a', fontVariantNumeric:'tabular-nums' }}>{it.amt}</div>
                </div>
                <div style={{ fontSize:11.5, color: it.urgent ? '#c0392b' : '#8a8a85', marginTop:2, fontVariantNumeric:'tabular-nums' }}>
                  {it.urgent ? `Closes in ${it.daysLeft} days · ${it.date}` : `${it.daysLeft} days left · ordered ${it.date}`}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ---------- Screen B: Subscriptions monthly view ----------
const ScreenSubsList = ({ accent = '#1a3a52' }) => {
  const subs = [
    { name:'Spotify',     amt: 10.99, next:'May 02', cat:'Music' },
    { name:'Notion',      amt:  8.00, next:'May 11', cat:'Tools' },
    { name:'NYT',         amt:  4.25, next:'May 14', cat:'News'  },
    { name:'iCloud+',     amt:  2.99, next:'May 18', cat:'Storage' },
    { name:'Hulu',        amt: 17.99, next:'May 22', cat:'Video', trial:true },
    { name:'Headspace',   amt: 12.99, next:'May 28', cat:'Health' },
  ];
  const total = subs.reduce((s,x)=>s+x.amt,0);
  return (
    <div style={{ height:'100%', background:'#fafaf7', overflow:'hidden', fontFamily:'Inter' }}>
      <div style={{ padding:'18px 22px 8px' }}>
        <div style={{ fontSize:11, fontWeight:600, letterSpacing:'0.06em', color:'#8a8a85', textTransform:'uppercase' }}>Subscriptions</div>
        <div style={{ display:'flex', alignItems:'baseline', gap:6, marginTop:2 }}>
          <div style={{ fontSize:28, fontWeight:600, color:'#1a1a1a', letterSpacing:'-0.02em', fontVariantNumeric:'tabular-nums' }}>${total.toFixed(2)}</div>
          <div style={{ fontSize:13, color:'#5c5c5c' }}>/ month</div>
        </div>
        <div style={{ fontSize:13, color:'#5c5c5c', marginTop:2 }}>{subs.length} active · 1 trial ending soon</div>
      </div>

      {/* mini bar chart */}
      <div style={{ padding:'8px 22px 14px', display:'flex', alignItems:'flex-end', gap:4, height:42 }}>
        {[18, 24, 28, 22, 31, 36, 42, 48, 50, 57, 57, 57].map((h,i)=>(
          <div key={i} style={{
            flex:1, height:`${h}%`,
            background: i >= 9 ? accent : 'rgba(0,0,0,0.12)',
            borderRadius:2,
          }} />
        ))}
      </div>

      <div style={{ padding:'0 22px 26px', display:'flex', flexDirection:'column', gap:1, background:'rgba(0,0,0,0.04)', margin:'0 14px 24px', borderRadius:12, overflow:'hidden' }}>
        {subs.map((s,i) => (
          <div key={s.name} style={{
            background:'#fff', padding:'12px 14px',
            display:'flex', alignItems:'center', gap:12,
          }}>
            <div style={{
              width:32, height:32, borderRadius:8, flexShrink:0,
              background: 'rgba(0,0,0,0.05)',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:13, fontWeight:600, color:'#1a1a1a',
            }}>{s.name[0]}</div>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:13.5, fontWeight:600, color:'#1a1a1a' }}>
                {s.name}{s.trial && <span style={{ marginLeft:6, fontSize:10, fontWeight:600, color:'#c0392b', letterSpacing:'0.04em' }}>TRIAL ENDS</span>}
              </div>
              <div style={{ fontSize:11.5, color:'#8a8a85', marginTop:1, fontVariantNumeric:'tabular-nums' }}>{s.cat} · renews {s.next}</div>
            </div>
            <div style={{ fontSize:13, fontWeight:500, color:'#1a1a1a', fontVariantNumeric:'tabular-nums' }}>${s.amt.toFixed(2)}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ---------- Screen C: Single return detail ----------
const ScreenReturnDetail = ({ accent = '#1a3a52' }) => {
  return (
    <div style={{ height:'100%', background:'#fafaf7', overflow:'hidden', fontFamily:'Inter', display:'flex', flexDirection:'column' }}>
      <div style={{ padding:'12px 22px 8px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div style={{ fontSize:15, color: accent, fontWeight:500 }}>‹ Returns</div>
        <div style={{ width:28, height:28, borderRadius:14, background:'rgba(0,0,0,0.05)' }} />
      </div>

      <div style={{ padding:'12px 22px 0' }}>
        <div style={{ fontSize:11, fontWeight:600, letterSpacing:'0.06em', color:'#8a8a85', textTransform:'uppercase' }}>Aritzia · Order #A82-339</div>
        <div style={{ fontSize:24, fontWeight:600, color:'#1a1a1a', letterSpacing:'-0.02em', marginTop:4, lineHeight:1.2 }}>
          The Effortless Pant<br/>and 2 more items
        </div>
        <div style={{ fontSize:14, color:'#5c5c5c', marginTop:4, fontVariantNumeric:'tabular-nums' }}>$248.00 · ordered Mar 28</div>
      </div>

      {/* big countdown */}
      <div style={{ margin:'18px 22px', padding:'18px 18px', background:'#fff', border:'1px solid rgba(0,0,0,0.06)', borderRadius:16 }}>
        <div style={{ fontSize:11, fontWeight:600, letterSpacing:'0.06em', color:'#c0392b', textTransform:'uppercase' }}>Return window</div>
        <div style={{ display:'flex', alignItems:'baseline', gap:8, marginTop:4 }}>
          <div style={{ fontSize:44, fontWeight:600, color:'#1a1a1a', letterSpacing:'-0.03em', fontVariantNumeric:'tabular-nums', lineHeight:1 }}>3</div>
          <div style={{ fontSize:14, color:'#5c5c5c' }}>days remaining</div>
        </div>
        <div style={{ fontSize:12, color:'#8a8a85', marginTop:6, fontVariantNumeric:'tabular-nums' }}>Closes Apr 27 · 30-day policy</div>

        {/* timeline */}
        <div style={{ marginTop:14, position:'relative', height:6, background:'rgba(0,0,0,0.06)', borderRadius:3 }}>
          <div style={{ position:'absolute', left:0, top:0, height:'100%', width:'90%', background:'#c0392b', borderRadius:3 }} />
          <div style={{ position:'absolute', left:'90%', top:-3, width:12, height:12, borderRadius:6, background:'#1a1a1a', border:'2px solid #fff' }} />
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize:10.5, color:'#8a8a85', marginTop:6, fontVariantNumeric:'tabular-nums' }}>
          <span>Mar 28</span><span>Apr 27</span>
        </div>
      </div>

      <div style={{ padding:'0 22px', display:'flex', gap:8 }}>
        <div style={{ flex:1, padding:'12px 0', background: accent, color:'#fff', borderRadius:10, textAlign:'center', fontSize:13.5, fontWeight:600 }}>Start return</div>
        <div style={{ padding:'12px 14px', background:'#fff', border:'1px solid rgba(0,0,0,0.08)', borderRadius:10, fontSize:13.5, fontWeight:500, color:'#1a1a1a' }}>Snooze</div>
      </div>
    </div>
  );
};

// ---------- Screen D: Inbox-style activity feed ----------
const ScreenActivity = ({ accent = '#1a3a52' }) => {
  const events = [
    { kind:'urgent', store:'Aritzia',  msg:'Return window closes in 3 days', amt:'$248.00', when:'2h' },
    { kind:'renew',  store:'Hulu',     msg:'Trial converts to paid in 4 days', amt:'$17.99', when:'5h' },
    { kind:'new',    store:'REI',      msg:'New purchase detected', amt:'$84.50', when:'1d' },
    { kind:'done',   store:'Apple',    msg:'Refund posted', amt:'+$129.00', when:'2d' },
    { kind:'renew',  store:'Spotify',  msg:'Renews in 5 days', amt:'$10.99', when:'2d' },
  ];
  const dot = (k) => k==='urgent' ? '#c0392b' : k==='renew' ? accent : k==='done' ? '#2d5e4a' : '#8a8a85';
  return (
    <div style={{ height:'100%', background:'#fafaf7', overflow:'hidden', fontFamily:'Inter' }}>
      <div style={{ padding:'18px 22px 12px', display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
        <div>
          <div style={{ fontSize:11, fontWeight:600, letterSpacing:'0.06em', color:'#8a8a85', textTransform:'uppercase' }}>This week</div>
          <div style={{ fontSize:24, fontWeight:600, color:'#1a1a1a', letterSpacing:'-0.02em', marginTop:2 }}>Activity</div>
        </div>
        <div style={{ fontSize:12, color: accent, fontWeight:500 }}>Filter</div>
      </div>

      <div style={{ padding:'0 22px 26px' }}>
        {events.map((e,i)=>(
          <div key={i} style={{
            padding:'14px 0',
            borderTop: i===0 ? '1px solid rgba(0,0,0,0.08)' : 'none',
            borderBottom: '1px solid rgba(0,0,0,0.08)',
            display:'flex', gap:12, alignItems:'flex-start',
          }}>
            <div style={{ width:7, height:7, borderRadius:4, background: dot(e.kind), marginTop:6, flexShrink:0 }} />
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                <div style={{ fontSize:13.5, fontWeight:600, color:'#1a1a1a' }}>{e.store}</div>
                <div style={{ fontSize:11, color:'#8a8a85', fontVariantNumeric:'tabular-nums' }}>{e.when}</div>
              </div>
              <div style={{ fontSize:12.5, color:'#5c5c5c', marginTop:2 }}>{e.msg}</div>
              <div style={{ fontSize:12, color:'#1a1a1a', marginTop:3, fontVariantNumeric:'tabular-nums', fontWeight:500 }}>{e.amt}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

window.PhoneShell = PhoneShell;
window.ScreenReturnsDash = ScreenReturnsDash;
window.ScreenSubsList = ScreenSubsList;
window.ScreenReturnDetail = ScreenReturnDetail;
window.ScreenActivity = ScreenActivity;