/* Build Gallery - "Production Reel".
   6 mini app mockups showing what students ship during the course.
   Each card has a live looping micro-animation + 3D tilt-on-hover. */

function BuildGallery() {
  const isMobile = useIsMobile();
  const builds = [
    { id:'landing',   chapter:'פרק 09', tag:'LANDING',    title:'דף נחיתה יוקרתי',          sub:'מהרעיון לאוויר. עיצוב מותג + דף נחיתה יוקרתי.', frameTitle:'yourbrand.co',           Comp:LandingCard },
    { id:'crm',       chapter:'פרק 12', tag:'APP',        title:'מערכת CRM',                sub:'צינור מכירות, ניהול לידים, אוטומציות.',  frameTitle:'~/crm - admin',          Comp:CRMCard },
    { id:'chat',      chapter:'פרק 16', tag:'AI AGENT',   title:'סוכן AI ללקוחות',           sub:'עונה ללקוחות 24/7. מוטמע באתר שלך.',     frameTitle:'support · live',         Comp:ChatCard },
    { id:'content',   chapter:'פרק 16', tag:'AUTOMATION', title:'מפעל תוכן',                 sub:'30 רעיונות לתוכן בכל יום - אוטומטי.',     frameTitle:'content factory',        Comp:ContentCard },
    { id:'dashboard', chapter:'פרק 13', tag:'METRICS',    title:'דשבורד אנליטיקס',           sub:'מספרים בזמן אמת. החלטות עסקיות חכמות.',  frameTitle:'metrics · realtime',     Comp:DashboardCard },
    { id:'video',     chapter:'פרק 04', tag:'AI VIDEO',   title:'פרסומת AI · Remotion',     sub:'מהמוצר לסרטון פרסומי תוך דקות.',         frameTitle:'render · 1080p',         Comp:VideoAdCard },
  ];

  return (
    <section id="builds" style={{background:'#13110F', padding: isMobile ? '90px 14px' : '160px 24px', borderTop:'1px solid rgba(238,179,50,0.15)', borderBottom:'1px solid rgba(238,179,50,0.15)', position:'relative', overflow:'hidden'}}>
      <style>{`
        @keyframes bg-page-scroll { from { transform: translateY(0) } to { transform: translateY(-50%) } }
        @keyframes crm-flow {
          0%   { right: 4%;  opacity: 0; }
          8%   { opacity: 1; }
          33%  { right: 36%; }
          58%  { right: 70%; opacity: 1; }
          70%  { right: 70%; opacity: 0; }
          100% { right: 70%; opacity: 0; }
        }
        @keyframes chat-pop {
          0%, 8%   { opacity: 0; transform: translateY(8px) scale(0.96); }
          12%, 88% { opacity: 1; transform: translateY(0) scale(1); }
          100%     { opacity: 0; transform: translateY(-4px) scale(0.98); }
        }
        @keyframes typing-dot {
          0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
          40%           { opacity: 1;    transform: translateY(-3px); }
        }
        @keyframes treadmill { from { transform: translateY(0) } to { transform: translateY(-50%) } }
        @keyframes tick-a { 0%, 48% { opacity: 1 } 52%, 100% { opacity: 0 } }
        @keyframes tick-b { 0%, 48% { opacity: 0 } 52%, 100% { opacity: 1 } }
        @keyframes bar-pulse { 0%, 100% { transform: scaleY(0.5) } 50% { transform: scaleY(1) } }
        @keyframes pulse-play { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(238,179,50,0.6) } 50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(238,179,50,0) } }
        @keyframes progress-fill { from { width: 0% } to { width: 100% } }
        @keyframes border-breath { 0%, 100% { border-color: rgba(238,179,50,0.18) } 50% { border-color: rgba(238,179,50,0.32) } }
        @keyframes badge-glow { 0%, 100% { box-shadow: 0 0 6px rgba(238,179,50,0.4) } 50% { box-shadow: 0 0 14px rgba(238,179,50,0.7) } }
      `}</style>

      {/* faint radial halo */}
      <div style={{position:'absolute', inset:0, pointerEvents:'none',
        background:'radial-gradient(ellipse at 50% 30%, rgba(238,179,50,0.08), rgba(238,179,50,0) 55%)'}} />

      <div style={{maxWidth:1280, margin:'0 auto', position:'relative'}}>
        <Header />

        <div style={{
          marginTop: isMobile ? 48 : 80,
          display:'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 16 : 24,
        }}>
          {builds.map((b, i) => <BuildCard key={b.id} build={b} idx={i} />)}
        </div>
      </div>
    </section>
  );
}

function Header() {
  const isMobile = useIsMobile();
  return (
    <div style={{textAlign:'center'}}>
      <div style={{fontSize: isMobile ? 11 : 13, letterSpacing:'0.20em', textTransform:'uppercase', color:'#EEB332', marginBottom: isMobile ? 12 : 18, fontFamily:'Open Sans, sans-serif', fontWeight:600}}>
        PRODUCTION REEL · מה תבנו בקורס
      </div>
      <h2 style={{fontFamily:'Open Sans', fontWeight:900, fontSize: isMobile ? 'clamp(28px,7vw,40px)' : 'clamp(44px, 5vw, 80px)', lineHeight:1.15, letterSpacing:'-0.02em', margin:0, color:'#F5F2ED'}}>
        דברים אמיתיים. <span style={{color:'#EEB332'}}>שעובדים בשבילך.</span>
      </h2>
      <p style={{marginTop: isMobile ? 14 : 22, fontSize: isMobile ? 14 : 'clamp(15px, 1.2vw, 18px)', color:'rgba(245,242,237,0.65)', maxWidth:680, margin: isMobile ? '14px auto 0' : '22px auto 0', lineHeight:1.6}}>
        6 פרויקטים שתבנו בקורס. בלי קוד שאתה כותב, בלי מעצב, בלי מפתח - רק תוצאות שמכניסות כסף.
      </p>
    </div>
  );
}

function BuildCard({build, idx}) {
  const [ref, shown] = useReveal(0.2);
  const [tilt, setTilt] = React.useState({rx:0, ry:0, active:false});
  const isMobile = useIsMobile();

  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;   // -0.5..0.5
    const y = (e.clientY - r.top)  / r.height - 0.5;
    setTilt({rx: -y * 7, ry: x * 7, active:true});
  };
  const onLeave = () => setTilt({rx:0, ry:0, active:false});

  const lifted = tilt.active;
  const transform = shown
    ? `perspective(1000px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg) scale(${lifted ? 1.02 : 1}) translateY(0)`
    : 'translateY(40px)';

  const Comp = build.Comp;

  return (
    <article
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      style={{
        position:'relative',
        background:'#0A0907',
        border:'1px solid rgba(238,179,50,0.18)',
        borderRadius:8,
        overflow:'hidden',
        transform,
        opacity: shown ? 1 : 0,
        transition: `transform 240ms cubic-bezier(0.22,1,0.36,1), opacity 600ms ease ${idx*60}ms, box-shadow 240ms, border-color 240ms`,
        boxShadow: lifted ? '0 30px 70px -20px rgba(0,0,0,0.7), 0 0 50px -10px rgba(238,179,50,0.35)' : '0 18px 50px -20px rgba(0,0,0,0.5)',
        borderColor: lifted ? '#EEB332' : 'rgba(238,179,50,0.18)',
        animation: !lifted ? `border-breath 5s ease-in-out ${idx * 0.7}s infinite` : 'none',
        cursor:'default',
        transformStyle:'preserve-3d',
        willChange:'transform',
      }}
    >
      {/* FRAME */}
      <div style={{position:'relative'}}>
        <div style={{
          display:'flex', alignItems:'center', gap:6,
          padding:'10px 14px',
          background:'#0E0C0A',
          borderBottom:'1px solid rgba(245,242,237,0.06)',
        }}>
          <span style={{width:8, height:8, background:'#3a3633', borderRadius:'50%'}} />
          <span style={{width:8, height:8, background:'#3a3633', borderRadius:'50%'}} />
          <span style={{width:8, height:8, background:'#3a3633', borderRadius:'50%'}} />
          <div dir="ltr" style={{flex:1, textAlign:'center', fontSize:10, color:'#7A7773', fontFamily:'monospace', letterSpacing:'0.06em'}}>{build.frameTitle}</div>
        </div>
        <div style={{
          position:'relative',
          height:260,
          overflow:'hidden',
          background:'#13110F',
        }}>
          <Comp />
        </div>
      </div>

      {/* CAPTION */}
      <div style={{padding: isMobile ? '16px 16px' : '20px 22px', borderTop:'1px solid rgba(238,179,50,0.08)'}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: isMobile ? 8 : 10}}>
          <span style={{fontSize: isMobile ? 9 : 10, letterSpacing:'0.20em', color:'#EEB332', fontFamily:'Open Sans, sans-serif', fontWeight:600}}>{build.chapter}</span>
          <span style={{fontSize: isMobile ? 8 : 9, letterSpacing:'0.20em', color:'rgba(245,242,237,0.45)', fontFamily:'monospace', padding:'3px 8px', border:'1px solid rgba(238,179,50,0.25)', borderRadius:500}}>{build.tag}</span>
        </div>
        <div style={{fontFamily:'Open Sans', fontWeight:800, fontSize: isMobile ? 19 : 22, letterSpacing:'-0.01em', color:'#F5F2ED'}}>{build.title}</div>
        <div style={{fontSize: isMobile ? 13 : 14, lineHeight:1.5, color:'rgba(245,242,237,0.6)', marginTop:4}}>{build.sub}</div>
      </div>
    </article>
  );
}

/* ─────────────────────────────────────────────────────────────────────
   MINI UI MOCKUPS
   ───────────────────────────────────────────────────────────────────── */

function LandingCard() {
  // A tall fake "page" that auto-scrolls vertically forever
  return (
    <div style={{position:'absolute', inset:0, overflow:'hidden'}}>
      <div style={{animation:'bg-page-scroll 16s linear infinite', willChange:'transform'}}>
        {[0,1].map(loop => (
          <div key={loop} style={{padding:'14px 18px'}}>
            {/* logo + nav */}
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18}}>
              <div style={{display:'flex', alignItems:'center', gap:6}}>
                <div style={{width:14, height:14, borderRadius:'50%', background:'linear-gradient(135deg, #DD9933, #EEB332)'}} />
                <div style={{width:46, height:5, background:'rgba(245,242,237,0.6)', borderRadius:2}} />
              </div>
              <div style={{display:'flex', gap:10}}>
                {[20,18,22].map((w,i) => <div key={i} style={{width:w, height:3, background:'rgba(245,242,237,0.3)', borderRadius:2}} />)}
              </div>
            </div>
            {/* hero */}
            <div style={{textAlign:'center', padding:'16px 0 22px'}}>
              <div style={{fontFamily:'Open Sans', fontWeight:900, fontSize:22, color:'#F5F2ED', letterSpacing:'-0.02em', lineHeight:1}}>Your Brand.</div>
              <div style={{fontSize:9, color:'rgba(245,242,237,0.5)', marginTop:6}}>Build the future. Today.</div>
              <div style={{display:'inline-block', marginTop:12, padding:'5px 14px', background:'#EEB332', color:'#1A1815', borderRadius:500, fontSize:9, fontWeight:700, fontFamily:'monospace'}}>SIGN UP →</div>
            </div>
            {/* hero "image" */}
            <div style={{height:64, background:'linear-gradient(135deg, rgba(238,179,50,0.18), rgba(238,179,50,0.05))', border:'1px solid rgba(238,179,50,0.2)', borderRadius:4, marginBottom:18}} />
            {/* features row */}
            <div style={{display:'flex', gap:8}}>
              {[0,1,2].map(i => (
                <div key={i} style={{flex:1, padding:10, background:'rgba(245,242,237,0.04)', borderRadius:3}}>
                  <div style={{width:14, height:14, background:'rgba(238,179,50,0.3)', borderRadius:2, marginBottom:6}} />
                  <div style={{height:4, background:'rgba(245,242,237,0.4)', borderRadius:2, marginBottom:4}} />
                  <div style={{height:3, background:'rgba(245,242,237,0.2)', borderRadius:2, width:'70%'}} />
                </div>
              ))}
            </div>
            {/* gap before loop */}
            <div style={{height:30}} />
          </div>
        ))}
      </div>
      {/* subtle top/bottom fades */}
      <div style={{position:'absolute', top:0, left:0, right:0, height:24, background:'linear-gradient(180deg, #13110F, transparent)', pointerEvents:'none'}} />
      <div style={{position:'absolute', bottom:0, left:0, right:0, height:24, background:'linear-gradient(0deg, #13110F, transparent)', pointerEvents:'none'}} />
    </div>
  );
}

function CRMCard() {
  const cols = [
    { label:'ליד',    n:'12', cards:[ {name:'דנה כהן', price:'₪1,890'}, {name:'אבי לוי', price:'₪3,200'} ] },
    { label:'שיחה',   n:'7',  cards:[ {name:'נועה ב.',  price:'₪5,400'}, {name:'יוסי מ.', price:'₪2,100'} ] },
    { label:'סגירה',  n:'4',  cards:[ {name:'מיכל אור', price:'₪8,750'} ] },
  ];
  return (
    <div style={{position:'absolute', inset:0, padding:14, direction:'rtl'}}>
      <div style={{display:'flex', gap:8, height:'100%'}}>
        {cols.map((c, i) => (
          <div key={i} style={{flex:1, background:'rgba(245,242,237,0.03)', border:'1px solid rgba(245,242,237,0.05)', borderRadius:5, padding:8, display:'flex', flexDirection:'column', gap:6}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:4}}>
              <span style={{fontSize:10, color:'#F5F2ED', fontWeight:600}}>{c.label}</span>
              <span style={{fontSize:9, color:'#EEB332', fontFamily:'monospace'}}>{c.n}</span>
            </div>
            {c.cards.map((d, j) => (
              <div key={j} style={{padding:'6px 8px', background:'#0A0907', border:'1px solid rgba(238,179,50,0.12)', borderRadius:3}}>
                <div style={{fontSize:9, color:'#F5F2ED', fontWeight:500}}>{d.name}</div>
                <div style={{fontSize:8, color:'#EEB332', fontFamily:'monospace', marginTop:2}}>{d.price}</div>
              </div>
            ))}
          </div>
        ))}
      </div>
      {/* flowing card overlay */}
      <div style={{
        position:'absolute', top:'52%',
        width:'24%',
        animation:'crm-flow 6.5s cubic-bezier(0.5,0,0.5,1) infinite',
        background:'#13110F', border:'1.5px solid #EEB332', borderRadius:3,
        padding:'6px 8px',
        boxShadow:'0 0 20px rgba(238,179,50,0.6)',
        pointerEvents:'none',
      }}>
        <div style={{fontSize:9, color:'#FFD777', fontWeight:600}}>שירה ל.</div>
        <div style={{fontSize:8, color:'#EEB332', fontFamily:'monospace', marginTop:2}}>₪4,200</div>
      </div>
    </div>
  );
}

function ChatCard() {
  const bubbles = [
    { side:'bot',  text:'שלום! איך אפשר לעזור היום?' },
    { side:'user', text:'אני רוצה לקבוע פגישה.' },
    { side:'bot',  text:'בשמחה - אילו ימים נוחים לך?' },
    { side:'user', text:'יום ג׳ אחה״צ.' },
    { side:'bot',  text:'מצוין. רשום אצלי, נשלח אישור 👍' },
  ];
  const cycleSec = 12;
  const each = cycleSec / bubbles.length;
  return (
    <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', direction:'rtl'}}>
      {/* header */}
      <div style={{display:'flex', alignItems:'center', gap:8, padding:'10px 14px', borderBottom:'1px solid rgba(245,242,237,0.06)', background:'rgba(245,242,237,0.03)'}}>
        <div style={{width:24, height:24, borderRadius:'50%', background:'linear-gradient(135deg, #DD9933, #EEB332)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:900, color:'#1A1815'}}>AI</div>
        <div style={{flex:1}}>
          <div style={{fontSize:11, color:'#F5F2ED', fontWeight:600}}>סוכן תמיכה</div>
          <div style={{display:'flex', alignItems:'center', gap:5, fontSize:9, color:'#4F8A5C'}}>
            <span style={{width:5, height:5, background:'#4F8A5C', borderRadius:'50%'}} />
            ONLINE
          </div>
        </div>
      </div>
      {/* messages */}
      <div style={{flex:1, padding:'14px 14px 6px', display:'flex', flexDirection:'column', gap:6, justifyContent:'flex-end', overflow:'hidden'}}>
        {bubbles.map((b, i) => (
          <div key={i} style={{
            alignSelf: b.side === 'user' ? 'flex-start' : 'flex-end',
            maxWidth:'78%',
            padding:'6px 10px',
            background: b.side === 'user' ? 'rgba(238,179,50,0.18)' : 'rgba(245,242,237,0.08)',
            border: b.side === 'user' ? '1px solid rgba(238,179,50,0.3)' : '1px solid rgba(245,242,237,0.08)',
            borderRadius: b.side === 'user' ? '10px 10px 10px 2px' : '10px 10px 2px 10px',
            fontSize:10, color:'#F5F2ED', lineHeight:1.4,
            animation: `chat-pop ${cycleSec}s ease-in-out ${i * each}s infinite`,
            opacity:0,
            willChange:'opacity, transform',
          }}>
            {b.text}
          </div>
        ))}
      </div>
      {/* typing indicator */}
      <div style={{padding:'8px 14px', display:'flex', alignItems:'center', gap:6}}>
        <div style={{display:'flex', gap:3, padding:'5px 8px', background:'rgba(245,242,237,0.06)', borderRadius:8}}>
          {[0,1,2].map(i => (
            <span key={i} style={{
              width:4, height:4, borderRadius:'50%', background:'#EEB332',
              animation:`typing-dot 1.4s ease-in-out ${i*0.2}s infinite`,
            }} />
          ))}
        </div>
        <span style={{fontSize:9, color:'rgba(245,242,237,0.4)', fontFamily:'monospace'}}>typing…</span>
      </div>
    </div>
  );
}

function ContentCard() {
  const ideas = [
    { tag:'REEL',   t:'5 דרכים להגדיל המרה בעמוד נחיתה',     h:'4.2K' },
    { tag:'BLOG',   t:'איך AI חוסך לעסקים 30 שעות בחודש',  h:'12K'  },
    { tag:'TWEET',  t:'הטעות שכל סטארטאפ עושה ב-CRM',       h:'820'  },
    { tag:'EMAIL',  t:'תבנית מייל קר שמכניסה 3 פגישות',     h:'2.1K' },
    { tag:'VIDEO',  t:'דמו של MVP - 7 דקות, סוף',             h:'8.5K' },
    { tag:'REEL',   t:'30 שניות שמסבירות מה Claude עושה',  h:'5.7K' },
    { tag:'BLOG',   t:'מ-0 ל-MVP בשבועיים - מקרה אמיתי',    h:'14K'  },
    { tag:'TWEET',  t:'הסיבה ש-90% מהפיצ׳רים לא מגיעים',  h:'1.4K' },
  ];
  return (
    <div style={{position:'absolute', inset:0, padding:'10px 12px', direction:'rtl'}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8, fontFamily:'Open Sans, sans-serif', fontWeight:600, letterSpacing:'0.05em'}}>
        <span style={{fontSize:10, color:'#EEB332'}}>30 רעיונות / יום</span>
        <span style={{fontSize:9, color:'rgba(245,242,237,0.5)'}}>● AUTO</span>
      </div>
      <div style={{position:'absolute', top:36, left:12, right:12, bottom:12, overflow:'hidden'}}>
        <div style={{animation:'treadmill 14s linear infinite', willChange:'transform'}}>
          {[0,1].map(loop => (
            <div key={loop}>
              {ideas.map((it, i) => (
                <div key={i} style={{
                  display:'grid', gridTemplateColumns:'40px 1fr 36px',
                  gap:8, alignItems:'center',
                  padding:'7px 8px',
                  borderBottom:'1px solid rgba(245,242,237,0.05)',
                }}>
                  <span style={{fontSize:7, fontFamily:'monospace', color:'#EEB332', letterSpacing:'0.1em', border:'1px solid rgba(238,179,50,0.4)', padding:'2px 4px', textAlign:'center', borderRadius:2}}>{it.tag}</span>
                  <span style={{fontSize:10, color:'#F5F2ED', lineHeight:1.3}}>{it.t}</span>
                  <span style={{fontSize:8, color:'rgba(245,242,237,0.4)', fontFamily:'monospace', textAlign:'left'}}>{it.h}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
        {/* fades */}
        <div style={{position:'absolute', top:0, left:0, right:0, height:18, background:'linear-gradient(180deg, #13110F, transparent)', pointerEvents:'none'}} />
        <div style={{position:'absolute', bottom:0, left:0, right:0, height:18, background:'linear-gradient(0deg, #13110F, transparent)', pointerEvents:'none'}} />
      </div>
    </div>
  );
}

function DashboardCard() {
  const kpis = [
    { label:'ARR',   a:'$48.2K', b:'$51.1K' },
    { label:'MRR',   a:'$4,020', b:'$4,260' },
    { label:'USERS', a:'1,284',  b:'1,341'  },
  ];
  const bars = [55, 70, 45, 82, 60];
  return (
    <div dir="ltr" style={{position:'absolute', inset:0, padding:'12px 14px'}}>
      {/* KPIs */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8, marginBottom:14}}>
        {kpis.map((k, i) => (
          <div key={i} style={{padding:'8px 10px', background:'rgba(245,242,237,0.04)', border:'1px solid rgba(238,179,50,0.12)', borderRadius:4}}>
            <div style={{fontSize:8, color:'rgba(245,242,237,0.5)', letterSpacing:'0.12em', marginBottom:4}}>{k.label}</div>
            <div style={{position:'relative', height:14}}>
              <span style={{position:'absolute', inset:0, fontFamily:'Open Sans', fontWeight:900, fontSize:13, color:'#F5F2ED', animation:`tick-a 3s ease-in-out ${i*0.4}s infinite`}}>{k.a}</span>
              <span style={{position:'absolute', inset:0, fontFamily:'Open Sans', fontWeight:900, fontSize:13, color:'#F5F2ED', animation:`tick-b 3s ease-in-out ${i*0.4}s infinite`}}>{k.b}</span>
            </div>
            <div style={{fontSize:8, color:'#4F8A5C', marginTop:3, fontFamily:'monospace'}}>↗ +6.0%</div>
          </div>
        ))}
      </div>
      {/* chart label */}
      <div style={{fontSize:9, color:'rgba(245,242,237,0.45)', fontFamily:'monospace', letterSpacing:'0.12em', marginBottom:6}}>WEEKLY · ACTIVATIONS</div>
      {/* bar chart */}
      <div style={{display:'flex', alignItems:'flex-end', gap:8, height:90, padding:'8px 4px', background:'rgba(245,242,237,0.03)', border:'1px solid rgba(245,242,237,0.05)', borderRadius:4}}>
        {bars.map((h, i) => (
          <div key={i} style={{flex:1, height:'100%', display:'flex', flexDirection:'column', justifyContent:'flex-end'}}>
            <div style={{
              height:`${h}%`,
              background:'linear-gradient(180deg, #FFD777, #DD9933)',
              borderRadius:'2px 2px 0 0',
              transformOrigin:'bottom',
              animation:`bar-pulse 2.4s ease-in-out ${i*0.25}s infinite`,
              willChange:'transform',
              boxShadow:'0 0 8px rgba(238,179,50,0.25)',
            }} />
          </div>
        ))}
      </div>
    </div>
  );
}

function VideoAdCard() {
  return (
    <div dir="ltr" style={{position:'absolute', inset:0, display:'flex', flexDirection:'column'}}>
      {/* video area */}
      <div style={{
        flex:1, position:'relative',
        background:'linear-gradient(135deg, #0e0a06 0%, #1a1208 50%, #0e0a06 100%)',
        overflow:'hidden',
        display:'flex', alignItems:'center', justifyContent:'center',
      }}>
        {/* ambient halos behind the phone */}
        <div style={{position:'absolute', inset:0, background:'radial-gradient(ellipse at 30% 60%, rgba(238,179,50,0.22), transparent 55%)'}} />
        <div style={{position:'absolute', inset:0, background:'radial-gradient(ellipse at 70% 40%, rgba(178,116,24,0.18), transparent 55%)'}} />

        {/* actual mobile-format demo video, phone-styled */}
        <video
          src="product_demo.mp4"
          autoPlay
          loop
          muted
          playsInline
          preload="auto"
          style={{
            position:'relative', zIndex:1,
            height:'92%',
            width:'auto',
            maxWidth:'78%',
            borderRadius:14,
            background:'#000',
            objectFit:'cover',
            boxShadow:'0 14px 40px -10px rgba(0,0,0,0.85), 0 0 0 1.5px rgba(238,179,50,0.4), 0 0 32px -4px rgba(238,179,50,0.35)',
          }}
        />

        {/* REMOTION badge */}
        <div style={{
          position:'absolute', top:10, right:10, zIndex:2,
          padding:'3px 8px',
          fontFamily:'monospace', fontSize:8, letterSpacing:'0.2em',
          color:'#EEB332',
          border:'1px solid rgba(238,179,50,0.45)',
          borderRadius:500,
          background:'rgba(10,9,7,0.55)',
          animation:'badge-glow 2.2s ease-in-out infinite',
        }}>REMOTION</div>
        {/* 1080p label */}
        <div style={{position:'absolute', bottom:18, right:12, fontFamily:'monospace', fontSize:9, color:'#EEB332', zIndex:2}}>1080p</div>
      </div>
      {/* progress bar synced to video loop (8s) */}
      <div style={{height:3, background:'rgba(245,242,237,0.08)', position:'relative'}}>
        <div style={{
          position:'absolute', top:0, left:0, height:'100%',
          background:'linear-gradient(90deg, #DD9933, #FFD777)',
          boxShadow:'0 0 8px #EEB332',
          animation:'progress-fill 8s linear infinite',
          willChange:'width',
        }} />
      </div>
    </div>
  );
}

window.BuildGallery = BuildGallery;