/* feed-v4.jsx — Feed / My Friends / Circle Pill Banner
   All CSS values taken directly from Figma Dev Mode export */

/* ------------------------------------------------------------------ */
/*  Data                                                                */
/* ------------------------------------------------------------------ */

const PILL_DATA = [
  { id:"you",    type:"you",   label:"You",            photo:"assets/avatar-you.png",    streak:13, hasNew:true  },
  { id:"roomies",type:"group", label:"Sweet Roomies 🐨", photo:"assets/avatar-roomies.png",streak:12, hasNew:true,  timeAgo:"32m ago" },
  { id:"group3", type:"group", label:"PHOTO DUMP 📷✨", photo:"assets/avatar-group3.png", streak:1,  hasNew:false, timeAgo:"3h ago"  },
  { id:"new",    type:"new" },
];

/* ------------------------------------------------------------------ */
/*  Streak badge                                                        */
/*  position:absolute left:calc(50%-19px) bottom:-2px                  */
/*  width:38 height:18 bg:#222224 borderRadius:99999px pad:0 4px       */
/* ------------------------------------------------------------------ */

function StreakBadge({ count }) {
  const w = count >= 10 ? 38 : 30;
  return (
    <div style={{
      position: "absolute",
      left: `calc(50% - ${w/2}px)`,
      bottom: -2,
      width: w,
      height: 18,
      display: "flex",
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "center",
      padding: "0 4px",
      background: "#222224",
      borderRadius: 99999,
      boxSizing: "border-box",
      pointerEvents: "none",
      zIndex: 2,
    }}>
      {/* iconWrapper: 14×15, paddingBottom:1 */}
      <div style={{ width:14, height:15, display:"flex", alignItems:"center", paddingBottom:1, flexShrink:0 }}>
        <img src="assets/streak-flame.svg" alt="" style={{ width:14, height:14, display:"block" }}/>
      </div>
      {/* numberWrapper: 16×16, paddingRight:2 */}
      <div style={{ width:16, height:16, display:"flex", flexDirection:"column", justifyContent:"center", alignItems:"center", paddingRight:2, flexShrink:0 }}>
        <span style={{
          fontFamily: '"SF Pro", -apple-system, sans-serif',
          fontWeight: 510,
          fontSize: 12,
          lineHeight: "16px",
          color: "#fff",
          textAlign: "center",
        }}>{count}</span>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Avatar — 48×48 circle with optional green border + streak          */
/*  Ellipse: border:3px solid #0EC03B; box-sizing:border-box           */
/* ------------------------------------------------------------------ */

function PillAvatar({ photo, streak, hasNew }) {
  return (
    <div style={{ position:"relative", width:48, height:48, flexShrink:0, overflow:"visible" }}>
      <div style={{
        width: 48, height: 48,
        borderRadius: "50%",
        border: hasNew ? "3px solid #0EC03B" : "3px solid transparent",
        boxSizing: "border-box",
        overflow: "hidden",
      }}>
        <img src={photo} alt="" style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }}/>
      </div>
      <StreakBadge count={streak}/>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Marquee label — seamless infinite scroll for pill group titles     */
/* ------------------------------------------------------------------ */

function MarqueeLabel({ text }) {
  React.useEffect(() => {
    if (!document.getElementById('v4-marquee-style')) {
      const s = document.createElement('style');
      s.id = 'v4-marquee-style';
      s.textContent = `
        @keyframes v4marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .v4-marquee { animation: v4marquee 8s linear infinite; }
      `;
      document.head.appendChild(s);
    }
  }, []);

  const GAP = 40; // px of silence between loops

  return (
    <div style={{ overflow:"hidden", width:"100%", height:20 }}>
      <span className="v4-marquee" style={{
        display:"inline-flex", alignItems:"center",
        whiteSpace:"nowrap",
        fontFamily:'"SF Pro",-apple-system,sans-serif',
        fontWeight:590, fontSize:15, lineHeight:"20px",
        color:"#fff", letterSpacing:-0.2,
      }}>
        <span>{text}</span>
        <span style={{ display:"inline-block", width:GAP, flexShrink:0 }}/>
        <span>{text}</span>
        <span style={{ display:"inline-block", width:GAP, flexShrink:0 }}/>
      </span>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Camera button — 36×36, bg:#2c2c2e, borderRadius:99999             */
/* ------------------------------------------------------------------ */

function CameraButton({ onClick }) {
  return (
    <div onClick={onClick} style={{
      width:36, minWidth:36, height:36, minHeight:36,
      borderRadius: 99999,
      background: "#2c2c2e",
      flexShrink: 0,
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      cursor: "pointer",
    }}>
      <img src="assets/ic-camera-pill.svg" alt="" style={{ width:20, height:20, display:"block" }}/>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  You pill — 107×64, pad:8px 16px 8px 8px, bg:#1c1c1e              */
/* ------------------------------------------------------------------ */

function YouPill({ item, onOpen }) {
  return (
    <div onClick={onOpen} style={{
      boxSizing: "border-box",
      display: "flex", flexDirection: "row", alignItems: "center",
      padding: "8px 8px 8px 8px", gap: 8,
      width: 107, height: 64, flexShrink: 0,
      background: "#1c1c1e",
      border: "1.5px solid rgba(255,255,255,0.15)",
      borderRadius: 32,
      cursor: onOpen ? "pointer" : "default",
    }}>
      <PillAvatar photo={item.photo} streak={item.streak} hasNew={item.hasNew}/>
      {/* Heading: font-weight:590 font-size:15 letter-spacing:-0.2px */}
      <span style={{
        fontFamily: '"SF Pro", -apple-system, sans-serif',
        fontWeight: 590, fontSize: 15, lineHeight: "20px",
        color: "#fff", letterSpacing: -0.2,
        whiteSpace: "nowrap", overflow:"hidden", textOverflow:"ellipsis",
        flex:1, minWidth:0,
      }}>{item.label}</span>
      {/* Icon Button: display:none for You pill */}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Group pill — 198×64, pad:8px, bg:#1c1c1e                         */
/* ------------------------------------------------------------------ */

function GroupPill({ item, onOpen, onCamera }) {
  return (
    <div style={{
      boxSizing: "border-box",
      display: "flex", flexDirection: "row", alignItems: "center",
      padding: 8, gap: 8,
      width: 198, height: 64, flexShrink: 0,
      background: "#1c1c1e",
      border: "1.5px solid rgba(255,255,255,0.15)",
      borderRadius: 32,
    }}>
      {/* Clickable area: avatar + text — everything except the camera button */}
      <div
        onClick={onOpen}
        style={{ display:"flex", flexDirection:"row", alignItems:"center", gap:8, flex:1, minWidth:0, cursor:"pointer" }}
      >
        <PillAvatar photo={item.photo} streak={item.streak} hasNew={item.hasNew}/>

        {/* tb: 82×38, VERTICAL gap:2, flex-grow:1 */}
        <div style={{
          display:"flex", flexDirection:"column", alignItems:"flex-start",
          padding:0, gap:2, flex:"1 1 0", minWidth:0,
        }}>
          <MarqueeLabel text={item.label}/>
          <span style={{
            fontFamily: '"SF Pro", -apple-system, sans-serif',
            fontWeight: 400, fontSize: 13, lineHeight: "16px",
            color: "#99999C", letterSpacing: -0.08,
            fontFeatureSettings: "'case' on",
            whiteSpace:"nowrap",
          }}>{item.timeAgo}</span>
        </div>
      </div>

      <CameraButton onClick={onCamera}/>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  New group pill — 64×64, bg:rgba(28,28,30,0.6), border white       */
/* ------------------------------------------------------------------ */

function NewGroupPill() {
  return (
    <div style={{
      boxSizing:"border-box",
      width:64, height:64, flexShrink:0,
      background: "rgba(28,28,30,0.6)",
      border: "1.5px solid rgba(255,255,255,0.2)",
      borderRadius: 32,
      position: "relative",
      cursor: "pointer",
    }}>
      <img src="assets/ic-plus.svg" alt="" style={{
        position:"absolute",
        width:24, height:24,
        left:"calc(50% - 12px)",
        top:"calc(50% - 12px)",
        display:"block",
      }}/>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Circle Pill Banner — 393×78                                        */
/*  row: pad:9px 12px, gap:8px, width:615px (scrollable)              */
/* ------------------------------------------------------------------ */

function V4CirclePillBanner({ onGroupOpen, onCamera, seenRoomies, hasPosted }) {
  return (
    <div style={{ width:393, height:78, background:"#000", flexShrink:0, overflow:"hidden" }}>
      <div style={{
        display:"flex", flexDirection:"row", alignItems:"center",
        padding:"9px 12px", gap:8,
        height:"100%", boxSizing:"border-box",
        overflowX:"auto", overflowY:"visible",
        scrollbarWidth:"none", WebkitOverflowScrolling:"touch",
      }}>
        {PILL_DATA.map(item => {
          /* After posting: force green ring on you + roomies */
          if (hasPosted && (item.id === "you" || item.id === "roomies")) {
            const enriched = { ...item, hasNew: true };
            if (item.type==="you")   return <YouPill    key={item.id} item={enriched} onOpen={() => onGroupOpen && onGroupOpen(item.id)}/>;
            if (item.type==="group") return <GroupPill  key={item.id} item={enriched}
              onOpen={() => onGroupOpen && onGroupOpen(item.id)}
              onCamera={onCamera}/>;
          }
          /* Override hasNew for you + roomies once the reel has been fully watched */
          const seen = seenRoomies && (item.id === "you" || item.id === "roomies");
          const enriched = seen ? { ...item, hasNew: false } : item;
          if (item.type==="you")   return <YouPill    key={item.id} item={enriched} onOpen={() => onGroupOpen && onGroupOpen(item.id)}/>;
          if (item.type==="group") return <GroupPill  key={item.id} item={enriched}
            onOpen={item.id === "roomies" ? () => onGroupOpen && onGroupOpen(item.id) : null}
            onCamera={onCamera}/>;
          if (item.type==="new")   return <NewGroupPill key={item.id}/>;
          return null;
        })}
      </div>
    </div>
  );
}

window.V4CirclePillBanner = V4CirclePillBanner;

/* ------------------------------------------------------------------ */
/*  Header                                                              */
/*  position:absolute height:168px top:0                               */
/*  NavBar:157px = StatusBar(59) + _titleAndControls(52) + HomePicker(46) */
/* ------------------------------------------------------------------ */

function V4Header({ tab, onTabChange }) {
  return (
    <div style={{
      position: "absolute", left:0, right:0, top:0, height:168,
      display:"flex", flexDirection:"column", alignItems:"flex-start",
      gap:4, zIndex:10,
    }}>
      {/* Background: gradient + blur */}
      <div style={{
        position:"absolute", inset:0,
        background:"linear-gradient(180deg,#000000 0%,rgba(0,0,0,0) 100%)",
        backdropFilter:"blur(5px)", WebkitBackdropFilter:"blur(5px)",
      }}/>
      <div style={{
        position:"absolute", inset:0,
        background:"#000000",
        mixBlendMode:"screen", opacity:0.9,
        backdropFilter:"blur(30px)", WebkitBackdropFilter:"blur(30px)",
      }}/>

      {/* Navigation Bar content (157px) */}
      <div style={{ position:"relative", width:393, display:"flex", flexDirection:"column", alignItems:"flex-start", zIndex:1 }}>

        {/* Status Bar — 59px */}
        <img src="assets/Status Bar.png" alt=""
          style={{ width:393, height:59, display:"block", flexShrink:0 }}/>

        {/* _titleAndControls — 52px, pad:0 16px 8px, justify-content:space-between */}
        <div style={{
          display:"flex", flexDirection:"row",
          justifyContent:"space-between", alignItems:"center",
          padding:"0px 16px 8px",
          width:393, height:52, boxSizing:"border-box",
        }}>
          {/* Left autoLayoutBypass 112×44 (leading controls hidden in feed) */}
          <div style={{ width:112, height:44, flexShrink:0 }}/>

          {/* Logo — 74.67×16 */}
          <img src="assets/Logo-bereal.svg" alt="BeReal."
            style={{ width:74.67, height:16, display:"block", flexShrink:0 }}/>

          {/* Right autoLayoutBypass 112×44 with bell button */}
          <div style={{ width:112, height:44, flexShrink:0, display:"flex", justifyContent:"flex-end", alignItems:"center" }}>
            {/* _controlsTrailing: 44×44, borderRadius:99999, glass */}
            <div style={{
              width:44, height:44,
              borderRadius:99999,
              background:"rgba(255,255,255,0.10)",
              display:"flex", justifyContent:"center", alignItems:"center",
              cursor:"pointer",
            }}>
              <img src="assets/ic-bell_fill.svg" alt="" style={{ width:24, height:24, display:"block" }}/>
            </div>
          </div>
        </div>

        {/* Home Picker — 46px, pad:8px 0 0, gap:12, centered */}
        {/* My Friends active: #FFFFFF, Friends of Friends: #99999C */}
        {/* NO underline — just color difference */}
        <div style={{
          display:"flex", flexDirection:"row",
          justifyContent:"center", alignItems:"center",
          padding:"8px 0 0", gap:12,
          width:380, height:46,
          marginLeft:7, boxSizing:"border-box",
        }}>
          {["My Friends","Friends of Friends"].map(t => (
            <button key={t} onClick={() => onTabChange && onTabChange(t)} style={{
              background:"transparent", border:"none", cursor:"pointer",
              display:"flex", justifyContent:"center", alignItems:"center",
              padding:8,
              fontFamily:'"SF Pro", -apple-system, sans-serif',
              fontWeight:590, fontSize:17, lineHeight:"22px",
              letterSpacing:-0.4,
              color: tab===t ? "#fff" : "#99999C",
            }}>{t}</button>
          ))}
        </div>

      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Tab Bar                                                             */
/*  position:absolute height:94px bottom:0                             */
/*  inner: padding:8px 24px 24px                                       */
/*  glass pill: 345×62, borderRadius:99999                             */
/* ------------------------------------------------------------------ */

function V4TabBar({ onCamera }) {
  return (
    <div style={{
      position:"absolute", left:0, right:0, bottom:0, height:94, zIndex:10,
    }}>
      {/* Background blur */}
      <div style={{
        position:"absolute", inset:0,
        background:"linear-gradient(360deg,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%)",
        backdropFilter:"blur(30px)", WebkitBackdropFilter:"blur(30px)",
      }}/>

      {/* Inner row: padding:8px 24px 24px, justify-content:space-between */}
      <div style={{
        position:"relative",
        display:"flex", flexDirection:"row",
        justifyContent:"space-between", alignItems:"center",
        padding:"8px 24px 24px",
        width:393, height:94, boxSizing:"border-box",
      }}>
        {/* Glass pill: 345×62, padding:4px, gap:8px */}
        <div style={{
          display:"flex", flexDirection:"row",
          alignItems:"center",
          padding:4, gap:8,
          width:345, height:62,
          background:"rgba(255,255,255,0.06)",
          borderRadius:99999,
          boxSizing:"border-box",
        }}>
          {/* Left: 2 tabs */}
          <div style={{
            display:"flex", flexDirection:"row",
            justifyContent:"space-between", alignItems:"center",
            flex:1, height:54, gap:8,
          }}>
            {/* Tab 01 — Home (active) */}
            <button style={{
              display:"flex", flexDirection:"column",
              justifyContent:"center", alignItems:"center",
              padding:8, flex:1, height:54,
              background:"rgba(255,255,255,0.10)",
              borderRadius:99999,
              border:"none", cursor:"pointer",
            }}>
              <img src="assets/ic-home.svg" alt="" style={{ width:24, height:24, display:"block" }}/>
              <span style={{ fontFamily:'"SF Pro",-apple-system,sans-serif', fontWeight:590, fontSize:11, lineHeight:"13px", color:"#fff", textAlign:"center", marginTop:2 }}>Home</span>
            </button>
            {/* Tab 02 — Friends */}
            <button style={{
              display:"flex", flexDirection:"column",
              justifyContent:"center", alignItems:"center",
              padding:8, flex:1, height:54,
              background:"transparent",
              border:"none", cursor:"pointer",
            }}>
              <img src="assets/ic-Friends.svg" alt="" style={{ width:24, height:24, display:"block" }}/>
              <span style={{ fontFamily:'"SF Pro",-apple-system,sans-serif', fontWeight:590, fontSize:11, lineHeight:"13px", color:"#fff", textAlign:"center", marginTop:2 }}>Friends</span>
            </button>
          </div>

          {/* Camera tab — 46×46 white circle */}
          <button onClick={onCamera} style={{
            width:46, height:46, flexShrink:0,
            background:"#fff", borderRadius:99999,
            border:"none", cursor:"pointer",
            display:"flex", justifyContent:"center", alignItems:"center",
          }}>
            <img src="assets/ic-camera.svg" alt="" style={{ width:27, height:21, display:"block" }}/>
          </button>

          {/* Right: 2 tabs */}
          <div style={{
            display:"flex", flexDirection:"row",
            justifyContent:"space-between", alignItems:"center",
            flex:1, height:54, gap:8,
          }}>
            {/* Tab 03 — Memories */}
            <button style={{
              display:"flex", flexDirection:"column",
              justifyContent:"center", alignItems:"center",
              padding:8, flex:1, height:54,
              background:"transparent",
              border:"none", cursor:"pointer",
            }}>
              <img src="assets/ic-Send.svg" alt="" style={{ width:24, height:24, display:"block" }}/>
              <span style={{ fontFamily:'"SF Pro",-apple-system,sans-serif', fontWeight:590, fontSize:11, lineHeight:"13px", color:"#fff", textAlign:"center", marginTop:2 }}>Chat</span>
            </button>
            {/* Tab 04 — Profile (user photo) */}
            <button style={{
              display:"flex", flexDirection:"column",
              justifyContent:"center", alignItems:"center",
              padding:8, flex:1, height:54,
              background:"transparent",
              border:"none", cursor:"pointer",
            }}>
              <img src="assets/ic-profile.png" alt="" style={{ width:24, height:24, borderRadius:99999, display:"block", border:"0.5px solid rgba(255,255,255,0.1)" }}/>
              <span style={{ fontFamily:'"SF Pro",-apple-system,sans-serif', fontWeight:590, fontSize:11, lineHeight:"13px", color:"#fff", textAlign:"center", marginTop:2 }}>Profile</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Post 1 / User — john.pip                                           */
/*  Structure: UserInfo(52) + Content/image(524) + postFooter(100)     */
/* ------------------------------------------------------------------ */

const REALMOJI = [
  { src:"assets/avatar-you-reel-32.png",   zi:2 },
  { src:"assets/avatar-lisa-reel-32.png",  zi:1 },
  { src:"assets/avatar-shimk-reel-32.png", zi:0 },
];

const COMMENTS = [
  { user:"kc_lisa",  text:"lol 😭😭" },
  { user:"shimk",    text:"so cozy 🥹" },
  { user:"yrcdec",   text:"nice 🌸" },
];

function V4Post1() {
  return (
    <div style={{
      display:"flex", flexDirection:"column",
      alignItems:"flex-start", padding:0,
      width:393,
    }}>

      {/* ── User Information ── 52px ── */}
      <div style={{
        display:"flex", flexDirection:"row", alignItems:"center",
        padding:"8px 16px 8px 8px", gap:8,
        width:393, height:52, boxSizing:"border-box",
      }}>
        {/* User Info row */}
        <div style={{
          display:"flex", flexDirection:"row", alignItems:"center",
          padding:0, gap:8, flex:1, height:36,
        }}>
          <img src="assets/avatar-john.png" alt=""
            style={{ width:32, height:32, borderRadius:99999,
              border:"1px solid rgba(255,255,255,0.1)",
              objectFit:"cover", flexShrink:0 }}/>
          <div style={{
            display:"flex", flexDirection:"column", justifyContent:"center",
            padding:0, flex:1, height:36,
          }}>
            <span style={{
              fontFamily:'"SF Pro",-apple-system,sans-serif',
              fontWeight:590, fontSize:15, lineHeight:"20px",
              letterSpacing:-0.2, color:"#fff",
            }}>john.pip</span>
            <span style={{
              fontFamily:'"SF Pro",-apple-system,sans-serif',
              fontWeight:400, fontSize:13, lineHeight:"16px",
              letterSpacing:-0.08, color:"#99999C",
            }}>2 min ago</span>
          </div>
        </div>
        <img src="assets/ic_ellipsis.svg" alt=""
          style={{ width:24, height:24, flexShrink:0 }}/>
      </div>

      {/* ── Content — 393×524 ── */}
      <div style={{
        width:393, height:524,
        borderRadius:18,
        position:"relative", overflow:"hidden",
        flexShrink:0,
      }}>
        {/* Back camera — absolute fill */}
        <img src="assets/post-1-back.png" alt=""
          style={{
            position:"absolute", left:0, top:0,
            width:"100%", height:"100%",
            objectFit:"cover", borderRadius:16,
          }}/>

        {/* Front camera PiP — top-left with 12px padding */}
        <img src="assets/post-1-front.png" alt=""
          style={{
            position:"absolute", left:12, top:12,
            width:120, height:159,
            objectFit:"cover", borderRadius:12,
          }}/>

        {/* Interaction buttons — right:5 bottom:4, 48×144 */}
        <div style={{
          display:"flex", flexDirection:"column",
          justifyContent:"flex-end", alignItems:"center",
          padding:"12px 0", gap:24,
          position:"absolute", width:48, height:144,
          right:4, bottom:4,
        }}>
          <img src="assets/ic-Send.svg" alt="" style={{ width:24, height:24 }}/>
          <img src="assets/ic-Comments.svg" alt="" style={{ width:24, height:24 }}/>
          <img src="assets/ic-Smile.svg" alt="" style={{ width:24, height:24 }}/>
        </div>

        {/* Realmoji — left:16 bottom:16, 80×32, overlapping */}
        <div style={{
          display:"flex", flexDirection:"row", alignItems:"flex-start",
          padding:0, isolation:"isolate",
          position:"absolute", width:80, height:32,
          left:16, bottom:16,
        }}>
          {REALMOJI.map((r,i) => (
            <div key={i} style={{
              position:"relative",
              width:32, height:32, flexShrink:0,
              margin:"0px -8px", zIndex:r.zi,
            }}>
              <img src={r.src} alt="" style={{
                width:32, height:32,
                borderRadius:99999,
                border:"1.5px solid #000",
                objectFit:"cover", display:"block",
                boxSizing:"border-box",
              }}/>
            </div>
          ))}
        </div>
      </div>

      {/* ── _postFooter ── 100px ── */}
      <div style={{
        display:"flex", flexDirection:"row", alignItems:"flex-start",
        padding:"8px 16px 16px", gap:4,
        width:393, height:100, boxSizing:"border-box",
      }}>
        <div style={{
          display:"flex", flexDirection:"column", alignItems:"flex-start",
          padding:0, gap:4, flex:1, height:76,
        }}>
          {/* View all comments row */}
          <div style={{
            display:"flex", flexDirection:"row", alignItems:"center",
            padding:0, gap:4, width:"100%", height:20,
          }}>
            <img src="assets/ic-Comments.svg" alt=""
              style={{ width:20, height:20, opacity:0.5 }}/>
            <span style={{
              fontFamily:'"SF Pro",-apple-system,sans-serif',
              fontWeight:400, fontSize:13, lineHeight:"16px",
              letterSpacing:-0.08, color:"#99999C",
            }}>View all comments</span>
          </div>
          {/* Preview comments */}
          <div style={{
            display:"flex", flexDirection:"column",
            alignItems:"flex-start", padding:0, gap:2, width:"100%",
          }}>
            {COMMENTS.map((c,i) => (
              <div key={i} style={{
                display:"flex", flexDirection:"row",
                alignItems:"flex-start", padding:0, gap:4,
                width:"100%", height:16,
              }}>
                <span style={{
                  fontFamily:'"SF Pro",-apple-system,sans-serif',
                  fontWeight:590, fontSize:13, lineHeight:"16px",
                  letterSpacing:-0.08, color:"#fff", flexShrink:0,
                }}>{c.user}</span>
                <span style={{
                  fontFamily:'"SF Pro",-apple-system,sans-serif',
                  fontWeight:400, fontSize:13, lineHeight:"16px",
                  letterSpacing:-0.08, color:"#fff",
                }}>{c.text}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Full page scaffold                                                  */
/* ------------------------------------------------------------------ */

function V4FeedPage() {
  const [tab, setTab]         = React.useState("My Friends");
  const [view, setView]         = React.useState("feed"); /* "feed"|"reel"|"capture"|"posting" */
  const [seenRoomies, setSeen]  = React.useState(false);
  const [captureShape,    setCaptureShape]    = React.useState("rect");
  const [capturePosition, setCapturePosition] = React.useState({ x: 12, y: 12 });
  const [toast, setToast]         = React.useState(false);
  const [hasPosted, setHasPosted] = React.useState(false);
  const [postedCaption, setPostedCaption] = React.useState("");
  const [postedShape,   setPostedShape]   = React.useState("rect");
  const [postedPipPos,  setPostedPipPos]  = React.useState({ x: 12, y: 12 });
  const [reelClosing,   setReelClosing]   = React.useState(false);
  const [reelMember,    setReelMember]    = React.useState(null);
  const [reelSkipAnim,  setReelSkipAnim]  = React.useState(false);

  function handleReelClose() {
    setReelClosing(true);
    setTimeout(() => {
      setSeen(true);
      setReelClosing(false);
      setReelSkipAnim(false);
      setView("feed");
    }, 280);
  }

  function handleSent(caption, shape, pipPos) {
    setView("feed");
    setToast(true);
    setHasPosted(true);
    setPostedCaption(caption || "");
    if (shape) setPostedShape(shape);
    if (pipPos) setPostedPipPos(pipPos);
    setSeen(false); // reset so green rings re-appear
    setTimeout(() => setToast(false), 2800);
  }

  /* Demo control via postMessage from parent report page */
  React.useEffect(() => {
    function onDemoMsg(e) {
      if (!e.data || e.data.type !== 'bereal-demo') return;
      if (e.data.action === 'openReel') {
        setReelMember(null);
        setReelSkipAnim(false);
        setView('reel');
      } else if (e.data.action === 'openReelInstant') {
        setSeen(false);
        setHasPosted(false);
        setReelMember(null);
        setReelSkipAnim(true);
        setView('reel');
      } else if (e.data.action === 'openCamera') {
        setView('capture');
      } else if (e.data.action === 'openPosting') {
        if (e.data.shape) setCaptureShape(e.data.shape);
        if (e.data.position) setCapturePosition(e.data.position);
        setView('posting');
      } else if (e.data.action === 'openFeedPosted') {
        setSeen(false);
        setHasPosted(true);
        setPostedShape(e.data.shape || 'cat');
        setPostedPipPos(e.data.position || { x: 195, y: 130 });
        setView('feed');
      } else if (e.data.action === 'openReelYou') {
        setHasPosted(true);
        setPostedShape(e.data.shape || 'cat');
        setPostedPipPos(e.data.position || { x: 195, y: 130 });
        setReelMember('you');
        setReelSkipAnim(true);
        setView('reel');
      } else if (e.data.action === 'closeReel') {
        setReelClosing(true);
        setTimeout(() => {
          setSeen(true);
          setReelClosing(false);
          setReelSkipAnim(false);
          setView('feed');
        }, 280);
      } else if (e.data.action === 'reset') {
        setSeen(false);
        setHasPosted(false);
        setReelMember(null);
        setReelSkipAnim(false);
        setView('feed');
      }
    }
    window.addEventListener('message', onDemoMsg);
    return () => window.removeEventListener('message', onDemoMsg);
  }, []);

  if (view === "reel") {
    return (
      <div style={{ position: "absolute", inset: 0 }}>
        {/* Animated reel content — clip off status bar row so it never scales */}
        <div className={reelClosing ? "reel-exit" : (reelSkipAnim ? "" : "reel-enter")}
             style={{ position: "absolute", inset: 0, clipPath: "inset(59px 0 0 0)" }}>
          <window.CircleReelPage
            onBack={handleReelClose}
            onComplete={handleReelClose}
            singleMember={reelMember}
            showNewPost={hasPosted}
            newCaption={postedCaption}
            newShape={postedShape}
            newPipPos={postedPipPos}
          />
        </div>
        {/* Static status bar — sits above the animation, never scales */}
        <img src="assets/Status Bar.png" alt=""
             style={{ position: "absolute", top: 0, left: 0, width: 393, height: 59,
                      zIndex: 999, pointerEvents: "none", display: "block" }} />
      </div>
    );
  }

  if (view === "capture") {
    return (
      <window.CaptureScreen
        onClose={() => setView("feed")}
        onShutter={(shape, pos) => {
          if (shape) setCaptureShape(shape);
          if (pos)   setCapturePosition(pos);
          setView("posting");
        }}
      />
    );
  }

  if (view === "posting") {
    return (
      <window.PostingScreen
        shape={captureShape}
        pipPosition={capturePosition}
        onClose={() => setView("capture")}
        onSend={handleSent}
      />
    );
  }

  return (
    <div style={{
      position:"absolute", inset:0,
      background:"#000",
      overflow:"hidden",
    }}>
      {/* Scrollable content area */}
      <div style={{
        position:"absolute", inset:0,
        overflowY:"auto", overflowX:"hidden",
        scrollbarWidth:"none",
        paddingTop:168, paddingBottom:94,
        display:"flex", flexDirection:"column",
        alignItems:"center", gap:16,
        boxSizing:"border-box",
      }}>
        <V4CirclePillBanner onGroupOpen={(id) => { setReelMember(id === "you" ? "you" : null); setView("reel"); }} onCamera={() => setView("capture")} seenRoomies={seenRoomies} hasPosted={hasPosted}/>
        <V4Post1/>
      </div>

      {/* Fixed overlays */}
      <V4Header tab={tab} onTabChange={setTab}/>
      <V4TabBar onCamera={() => setView("capture")}/>

      {/* Sent! toast */}
      <div style={{
        position: "absolute", top: 12, left: 0, right: 0,
        display: "flex", justifyContent: "center",
        zIndex: 200, pointerEvents: "none",
        transform: toast ? "translateY(0)" : "translateY(-24px)",
        opacity: toast ? 1 : 0,
        transition: "transform .35s cubic-bezier(.22,.7,.22,1), opacity .3s",
      }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          background: "rgba(30,30,32,0.92)",
          backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
          borderRadius: 99999,
          padding: "10px 20px",
          boxShadow: "0 4px 24px rgba(0,0,0,0.5)",
        }}>
          {/* checkmark circle */}
          <div style={{
            width: 22, height: 22, borderRadius: "50%",
            background: "#30D158",
            display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
              <path d="M5 12l5 5 9-11" stroke="#fff" strokeWidth="3"
                strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <span style={{
            fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif',
            fontWeight: 590, fontSize: 15, letterSpacing: "-0.2px",
            color: "#fff", lineHeight: "20px",
          }}>Your BeReal was sent!</span>
        </div>
      </div>
    </div>
  );
}

window.V4FeedPage = V4FeedPage;

/* Inject reel open/close animation keyframes */
(function() {
  const s = document.createElement("style");
  s.textContent = `
    @keyframes reelEnter {
      from { transform: scale(0.06); opacity: 0; }
      to   { transform: scale(1);    opacity: 1; }
    }
    @keyframes reelExit {
      from { transform: scale(1);    opacity: 1; }
      to   { transform: scale(0.06); opacity: 0; }
    }
    .reel-enter {
      transform-origin: center 220px;
      animation: reelEnter 0.45s cubic-bezier(0.32, 0.72, 0, 1) both;
    }
    .reel-exit {
      transform-origin: center 220px;
      animation: reelExit 0.30s cubic-bezier(0.4, 0, 1, 1) both;
    }
  `;
  document.head.appendChild(s);
})();