1import{r,j as e}from"./index-Bzn9Wj-r.js";import{B as l,W as T}from"./shared-Cl3R_if9.js";const W=[{id:"plantain-chips-product",title:"Plantain chips commercial",brand:"O'SEUN CHIPS",country:"Nigeria",type:"Product",description:"A warm product showcase made for a Nigerian snack brand.",template:"product_focus",video:"https://frobits.tv/api/commercial/ugc/orders/co_ed1850e8927be863405e986c077ac4bf/files/video",poster:"https://frobits.tv/api/commercial/ugc/orders/co_ed1850e8927be863405e986c077ac4bf/files/photo-1"}],u=[{id:"tropisip-fast",title:"Fast, exciting video",brand:"TROPISIP",country:"Nigeria",type:"Motion",description:"Quick cuts, bold movement and big energy.",template:"motion_heavy",video:"/product-video-samples/tropisip-fast-exciting-motion-v2.mp4?v=2",poster:"/product-video-samples/tropisip-fast-exciting-motion-v2.jpg?v=2"},{id:"tropisip-product",title:"Show the product",brand:"TROPISIP",country:"Nigeria",type:"Product",description:"Clean close-ups that make the product the hero.",template:"product_focus",video:"/product-video-samples/tropisip-show-product-h3.mp4",poster:"/product-video-samples/tropisip-show-product-h3.jpg"},{id:"tropisip-routine",title:"Show how to use it",brand:"TROPISIP",country:"Nigeria",type:"Routine",description:"A clear product routine, shown step by step.",template:"routine_demo",video:"/product-video-samples/tropisip-show-how-to-use-h3.mp4?v=2",poster:"/product-video-samples/tropisip-show-how-to-use-h3.jpg?v=2"},{id:"tropisip-person",title:"Person talks about it",brand:"TROPISIP",country:"Nigeria",type:"UGC",description:"A natural creator-led product story.",template:"ugc",video:"/product-video-samples/tropisip-person-talks-h3.mp4?v=1",poster:"/product-video-samples/gallery-tropisip-person.jpg?v=1"},{id:"tropisip-animated",title:"Animated product video",brand:"TROPISIP",country:"Nigeria",type:"Animated",description:"Stylised movement that brings the product to life.",template:"animated",video:"/product-video-samples/tropisip-animated-h3.mp4?v=1",poster:"/product-video-samples/tropisip-animated-h3.jpg?v=1"},{id:"tropisip-recommendation",title:"Real recommendation",brand:"TROPISIP",country:"Nigeria",type:"UGC",description:"An honest recommendation made for social.",template:"ugc",video:"/product-video-samples/tropisip-ugc-final.mp4",poster:"/product-video-samples/gallery-tropisip-recommendation.jpg?v=1"}],S=[...W,...u],h=Array.from({length:6},(i,o)=>({id:`plantain-photo-${o+1}`,brand:"O'SEUN CHIPS",country:"Nigeria",url:`https://frobits.tv/api/commercial/ugc/orders/co_ed1850e8927be863405e986c077ac4bf/files/photo-${o+1}`}));function G(){const[i,o]=r.useState([]);return r.useEffect(()=>{let c=!1;return fetch("/api/commercial/ugc/showcase").then(n=>n.ok?n.json():null).then(n=>{c||!Array.isArray(n?.commercials)||o(n.commercials.filter(f=>f?.id&&f?.video))}).catch(()=>{}),()=>{c=!0}},[]),i}function z(i){return[...[...i,...S].map(o=>({kind:"video",item:o})),{kind:"photos"}]}z([]);const N=[{id:"all",label:"All",types:[]},{id:"product",label:"Product",types:["Product","Routine"]},{id:"motion",label:"Motion",types:["Motion","Animated"]},{id:"ugc",label:"UGC",types:["UGC"]}],D=` 2.commercial-page { min-height:100vh; background:#050505; color:#fff; padding-bottom:104px; } 3.commercial-header { position:sticky; inset:0 0 auto; height:56px; z-index:30; background:rgba(5,5,5,.94); border-bottom:1px solid rgba(255,255,255,.055); backdrop-filter:blur(12px); } 4.commercial-header-inner { width:100%; max-width:1400px; height:100%; margin:auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; } 5.commercial-header-tag { color:rgba(255,255,255,.58); font:700 10px/1 'Archivo',system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; } 6.commercial-primary { display:inline-flex; align-items:center; gap:9px; min-height:50px; padding:0 24px; border-radius:999px; background:${l}; color:#04180c; text-decoration:none; font:800 15px/1 'Syne',system-ui,sans-serif; box-shadow:0 10px 34px rgba(37,211,102,.34); } 7.commercial-copy-hero { position:relative; width:min(calc(100% - 32px),1280px); min-height:390px; display:flex; align-items:end; margin:18px auto 0; padding:clamp(32px,6vw,76px); overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:22px; background:radial-gradient(circle at 78% 34%,rgba(37,211,102,.16),transparent 23%),linear-gradient(135deg,#121713 0%,#080a09 56%,#061009 100%); } 8.commercial-copy-hero::before { content:""; position:absolute; inset:0;
8 opacity:.17; background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.12) 23px,transparent 24px); mask-image:linear-gradient(180deg,transparent 12%,#000 55%,transparent 92%); transform:perspective(500px) rotateX(56deg) scale(1.35); transform-origin:center bottom; } 9.commercial-copy-hero-inner { position:relative; z-index:1; max-width:780px; } 10.commercial-copy-hero small { color:${l}; font:800 9px/1 'Archivo',system-ui,sans-serif; letter-spacing:.17em; text-transform:uppercase; } 11.commercial-copy-hero h1 { margin:14px 0 14px; max-width:760px; font:400 clamp(48px,8vw,92px)/.9 'Anton',system-ui,sans-serif; letter-spacing:.012em; text-transform:uppercase; } 12.commercial-copy-hero h1 span { color:${l}; } 13.commercial-copy-hero p { max-width:470px; margin:0; color:rgba(255,255,255,.63); font:500 14px/1.55 'Open Sans',system-ui,sans-serif; } 14.commercial-copy-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px; } 15.commercial-hero-secondary { min-height:50px; display:inline-flex; align-items:center; padding:0 21px; border:1px solid rgba(255,255,255,.17); border-radius:999px; color:#fff; text-decoration:none; font:800 13px/1 'Syne',system-ui,sans-serif; } 16.commercial-home-feed { width:min(100%,1280px); margin:auto; padding:22px 16px 0; } 17.commercial-feed-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } 18.commercial-feed-card { min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:#0b0d0c; } 19.commercial-feed-preview { position:relative; width:100%; aspect-ratio:9/16; display:block; padding:0; overflow:hidden; border:0; background:#161817; cursor:pointer; } 20.commercial-feed-preview img,.commercial-feed-preview video { width:100%; height:100%; display:block; object-fit:cover; transition:transform .28s ease; } 21.commercial-feed-preview::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.64)); } 22.commercial-feed-preview>span { position:absolute; z-index:2; right:12px; bottom:12px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#fff; color:#050505; } 23.commercial-feed-photo { cursor:zoom-in; } 24.commercial-feed-preview .commercial-photo-mosaic { position:absolute; inset:0; display:grid; grid-template-columns:2fr 1fr; gap:3px; background:#111; } 25.commercial-feed-preview .commercial-photo-mosaic>img { width:100%; height:100%; min-width:0; object-fit:cover; } 26.commercial-feed-preview .commercial-photo-mosaic>div { min-width:0; display:grid; grid-template-rows:1fr 1fr; gap:3px; } 27.commercial-feed-preview .commercial-photo-mosaic>div img { width:100%; height:100%; min-height:0; object-fit:cover; } 28.commercial-feed-photo>em { position:absolute; z-index:3; top:12px; left:12px; padding:7px 9px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(5,5,5,.72); color:#fff; font:800 8px/1 'Archivo',system-ui,sans-serif; font-style:normal; letter-spacing:.11em; text-transform:uppercase; backdrop-filter:blur(8px); } 29.commercial-feed-preview:focus-visible { outline:2px solid ${l}; outline-offset:-3px; } 30.commercial-feed-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px 13px; } 31.commercial-feed-meta strong { overflow:hidden; color:#fff; font:800 12px/1 'Archivo',system-ui,sans-serif; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; } 32.commercial-feed-meta span { flex:0 0 auto; color:rgba(255,255,255,.5); font:600 11px/1 'Open Sans',system-ui,sans-serif; } 33.commercial-template-page { min-height:calc(100vh - 56px); overflow:hidden; background-color:#070908; background-image:radial-gradient(circle at 50% 9%,rgba(255,255,255,.1),transparent 28%),radial-gradient(rgba(255,255,255,.11) .65px,transparent .7px); background-size:auto,26px 26px; } 34.commercial-template-stage { position:relative; padding:42px 0 26px; border-bottom:1px solid rgba(255,255,255,.07); overflow:hidden; } 35.commercial-template-stage::after { content:""; position:absolute; z-index:0; left:50%; bottom:14px; width:min(72vw,720px); height:72px; transform:translateX(-50%); background:${l}; filter:blur(80px); opacity:.08; pointer-events:none; } 36.commercial-stage-label { position:relative; z-index:2; width:max-content; margin:0 auto 20px; padding:7px 12px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.05); font:800 8px/1 'Archivo',system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; } 37.commercial-stage-track { position:relative; z-index:1; min-height:290px; display:flex; align-items:center; justify-content:flex-start; gap:18px; overflow-x:auto; padding:24px calc(50% - clamp(120px,17vw,190px)); scroll-padding-inline:calc(50% - clamp(120px,17vw,190px)); scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; touch-action:pan-x; -webkit-overflow-scrolling:touch; scrollbar-width:none; } 38.commercial-stage-track::-webkit-scrollbar { display:none; } 39.commercial-stage-card { position:relative; flex:0 0 clamp(240px,34vw,380px); aspect-ratio:4/3; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#171918; opacity:.48; transform:scale(.9); scroll-snap-align:center; scroll-snap-stop:always; cursor:grab; transition:opacity .24s ease,transform .24s ease,border-color .24s ease; } 40.commercial-stage-card:active { cursor:grabbing; } 41.commercial-stage-card img { width:100%; height:100%; display:block; object-fit:cover; } 42.commercial-stage-card::after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.7)); } 43.commercial-stage-card span { position:absolute; z-index:2; left:10px; bottom:10px; padding:6px 8px; border-radius:999px; background:rgba(4,5,4,.7); color:#fff; font:800 8px/1 'Archivo',system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; } 44.commercial-stage-card.is-current { z-index:3; opacity:1; transform:scale(1.06); border-color:rgba(55,255,132,.55); box-shadow:0 24px 68px rgba(0,0,0,.65),0 0 46px rgba(37,211,102,.08); } 45.commercial-stage-card:focus-visible { outline:2px solid #fff; outline-offset:3px; } 46.commercial-stage-copy { position:relative; z-index:2; max-width:720px; margin:26px auto 0; padding:0 20px; text-align:center; } 47.commercial-stage-copy small { color:${l}; font:800 9px/1 'Archivo',system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; } 48.commercial-stage-copy h1 { margin:10px 0 8px; font:400 clamp(38px,7vw,72px)/.96 'Anton',system-ui,sans-serif; letter-spacing:.015em; text-transform:uppercase; } 49.commercial-stage-copy p { margin:0 auto; max-width:470px; color:rgba(255,255,255,.58); font:500 13px/1.5 'Open Sans',system-ui,sans-serif; } 50.commercial-stage-actions { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; } 51.commercial-stage-preview { min-height:50px; padding:0 19px; display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.06); color:#fff; font:800 13px/1 'Syne',system-ui,sans-serif; cursor:pointer; } 52.commercial-template-library { width:min(100%,1280px); margin:auto; padding:42px 16px 20px; } 53.commercial-library-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; } 54.commercial-library-head h2 { margin:0; font:400 30px/1 'Anton',system-ui,sans-serif; letter-spacing:.015em; text-transform:uppercase; } 55.commercial-library-head p { margin:5px 0 0; color:rgba(255,255,255,.5); font:500 12px/1.4 'Open Sans',system-ui,sans-serif; } 56.commercial-template-filters { display:flex; gap:8px; overflow-x:auto; padding:1px 1px 12px; scrollbar-width:none; } 57.commercial-template-filters::-webkit-scrollbar { display:none; } 58.commercial-template-filters button { min-height:36px; padding:0 14px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:#171a18; color:rgba(255,255,255,.58); font:700 11px/1 'Open Sans',system-ui,sans-serif; cursor:pointer; white-space:nowrap; } 59.commercial-template-filters button.is-active { border-color:rgba(55,255,132,.45); background:#17301f; color:#fff; } 60.commercial-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; } 61.commercial-card { position:relative; width:100%; aspect-ratio:4/5; padding:0; border:0; overflow:hidden; background:#1b1b1d; color:#fff; cursor:pointer; text-align:left; transition:transform .18s ease,box-shadow .18s ease; } 62.commercial-card:focus-visible { outline:2px solid #fff; outline-offset:3px; } 63.commercial-card img,.commercial-card video { width:100%; height:100%; object-fit:cover; display:block; } 64.commercial-card-shade { position:absolute; inset:35% 0 0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.92)); } 65.commercial-card-type { position:absolute; top:9px; left:9px; padding:6px 8px 5px; border-radius:999px; background:rgba(5,5,5,.72); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px); font:800 8px/1 'Archivo',system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase; } 66.commercial-card-play { position:absolute; right:10px; bottom:55px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#050505; } 67.commercial-card-copy { position:absolute; left:11px; right:46px; bottom:11px; } 68.commercial-card-copy span { display:block; margin-bottom:3px; color:${l}; font:800 8px/1 'Archivo',system-ui,sans-serif; letter-spacing:.12em; } 69.commercial-card-copy strong { display:block; font:400 17px/.98 'Anton',system-ui,sans-serif; letter-spacing:.012em; text-transform:uppercase; } 70.commercial-modal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.82); backdrop-filter:blur(18px) saturate(.75); } 71.commercial-social-viewer { position:fixed; inset:0; z-index:90; background:#000; } 72.commercial-social-close { position:fixed; z-index:20; top:max(16px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); min-height:44px; display:flex; align-items:center; gap:8px; padding:0 15px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(8,10,9,.82); color:#fff; font:800 11px/1 'Open Sans',system-ui,sans-serif; cursor:pointer; backdrop-filter:blur(12px); } 73.commercial-social-close b { font-size:20px; font-weight:400; } 74.commercial-social-feed { width:100%; height:100dvh; overflow-y:auto; overscroll-behavior-y:contain; scroll-snap-type:y mandatory; scrollbar-width:none; } 75.commercial-social-feed::-webkit-scrollbar { display:none; } 76.commercial-social-post { position:relative; width:100%; height:100dvh; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always; background:#000; } 77.commercial-social-video { width:100%; height:100%; min-height:0; display:block; object-fit:contain; background:#000; } 78.commercial-social-footer { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px max(18px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); border-top:1px solid rgba(255,255,255,.08); background:#090b0a; } 79.commercial-social-meta { display:flex; align-items:center; gap:9px; color:#fff; font:800 10px/1 'Archivo',system-ui,sans-serif; letter-spacing:.08em; pointer-events:none; } 80.commercial-social-meta span { color:rgba(255,255,255,.58); font:600 10px/1 'Open Sans',system-ui,sans-serif; letter-spacing:0; } 81.commercial-social-photos { width:min(100%,640px); height:100%; min-height:0; justify-self:center; display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; } 82.commercial-social-photos::-webkit-scrollbar { display:none; } 83.commercial-social-photo { position:relative; flex:0 0 100%; height:100%; display:grid; place-items:center; scroll-snap-align:start; scroll-snap-stop:always; } 84.commercial-social-photo img { width:100%; height:100%; display:block; object-fit:contain; background:#000; } 85.commercial-social-photo-count { position:absolute; z-index:3; top:max(22px,env(safe-area-inset-top)); right:max(18px,env(safe-area-inset-right)); padding:8px 10px; border-radius:999px; background:rgba(5,5,5,.68); color:#fff; font:800 9px/1 'Archivo',system-ui,sans-serif; letter-spacing:.08em; backdrop-filter:blur(10px); } 86.commercial-social-hint { color:rgba(255,255,255,.5); font:700 10px/1 'Open Sans',system-ui,sans-serif; white-space:nowrap; pointer-events:none; } 87.commercial-player { position:relative; width:min(100%,900px); max-height:calc(100dvh - 48px); display:grid; grid-template-columns:minmax(0,1fr) 300px; overflow:hidden; border:1px solid rgba(55,255,132,.26); border-radius:26px; background:#080b09; box-shadow:0 38px 120px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.035); } 88.commercial-player::before { content:""; position:absolute; z-index:5; inset:0 auto 0 0; width:4px; background:${l}; box-shadow:0 0 24px rgba(37,211,102,.52); pointer-events:none; } 89.commercial-player-media { position:relative; min-height:0; display:grid; place-items:center; background:#000; overflow:hidden; } 90.commercial-player-media::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.035); pointer-events:none; } 91.commercial-player video { display:block; width:100%; height:min(calc(100dvh - 48px),780px); object-fit:contain; background:#000; } 92.commercial-player-info { position:relative; min-width:0; display:flex; flex-direction:column; padding:26px 24px 24px; background:radial-gradient(circle at 100% 0,rgba(37,211,102,.1),transparent 38%),#080d0a; } 93.commercial-player-brand { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.09); } 94.commercial-player-brand .commercial-header-tag { color:${l}; } 95.commercial-close { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:#111713; color:#fff; font:300 25px/1 system-ui,sans-serif; cursor:pointer; transition:border-color .16s ease,background .16s ease; }
96.commercial-close:hover { border-color:${l}; background:#142119; } 97.commercial-close:focus-visible { outline:2px solid #fff; outline-offset:3px; } 98.commercial-player-copy { margin:auto 0; padding:30px 0; } 99.commercial-player-kicker { display:flex; align-items:center; gap:8px; color:${l}; font:800 9px/1 'Archivo',system-ui,sans-serif; letter-spacing:.15em; text-transform:uppercase; } 100.commercial-player-kicker::before { content:""; width:20px; height:2px; background:currentColor; } 101.commercial-player-copy h2 { margin:15px 0 12px; font:400 38px/.96 'Anton',system-ui,sans-serif; letter-spacing:.015em; text-transform:uppercase; } 102.commercial-player-copy p { margin:0; color:rgba(255,255,255,.62); font:500 13px/1.55 'Open Sans',system-ui,sans-serif; } 103.commercial-player-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 18px; border-radius:999px; background:${l}; color:#04180c; text-decoration:none; font:800 14px/1 'Syne',system-ui,sans-serif; } 104.commercial-player-tip { margin:13px 0 0; color:rgba(255,255,255,.38); font:600 9px/1.4 'Open Sans',system-ui,sans-serif; text-align:center; } 105.commercial-nav { position:fixed; z-index:40; left:16px; right:16px; bottom:16px; max-width:480px; margin:auto; display:flex; align-items:center; justify-content:space-around; padding:10px 8px 8px; border-radius:20px; background:rgba(18,18,18,.92); border:1px solid rgba(255,255,255,.06); box-shadow:0 10px 40px rgba(0,0,0,.7); backdrop-filter:blur(10px); } 106.commercial-nav a,.commercial-nav button { min-width:74px; padding:0; border:0; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; color:rgba(255,255,255,.58); text-decoration:none; font:700 10.5px/1 'Open Sans',system-ui,sans-serif; } 107.commercial-nav a[aria-current=page],.commercial-nav button[aria-current=page] { color:#fff; } 108.commercial-nav .make { color:${l}; } 109.commercial-nav-icon { width:22px; height:22px; display:grid; place-items:center; } 110.commercial-nav .make .commercial-nav-icon { border-radius:6px; color:#04180c; background:${l}; } 111@media (min-width:768px) { 112 .commercial-header-inner { padding-inline:40px; } 113 .commercial-home-feed,.commercial-template-library { padding-left:40px; padding-right:40px; } 114 .commercial-feed-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } 115 .commercial-template-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } 116 .commercial-card:hover { transform:scale(1.025); box-shadow:0 16px 42px rgba(0,0,0,.55); } 117 .commercial-card-copy strong { font-size:20px; } 118} 119@media (min-width:1100px) { 120 .commercial-feed-grid,.commercial-template-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } 121} 122@media (max-width:900px) { 123 .commercial-template-stage { padding-top:26px; } 124 .commercial-stage-track { min-height:225px; gap:12px; padding:20px calc(50% - min(31vw,165px)); scroll-padding-inline:calc(50% - min(31vw,165px)); } 125 .commercial-stage-card { flex-basis:min(62vw,330px); border-radius:8px; } 126 .commercial-stage-copy { margin-top:19px; } 127 .commercial-stage-copy h1 { font-size:clamp(35px,10vw,56px); } 128 .commercial-stage-actions { align-items:stretch; } 129 .commercial-stage-actions>* { flex:1 1 0; justify-content:center; padding-inline:12px; } 130 .commercial-library-head { align-items:start; } 131 .commercial-modal { place-items:end center; padding:12px 12px max(12px,env(safe-area-inset-bottom)); } 132 .commercial-player { width:100%; max-height:calc(100dvh - 24px); grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; border-radius:24px; } 133 .commercial-player::before { inset:0 0 auto; width:auto; height:3px; } 134 .commercial-player video { width:100%; height:min(67dvh,720px); } 135 .commercial-player-info { padding:15px 17px 17px; } 136 .commercial-player-brand { position:absolute; z-index:4; top:0; left:0; right:0; padding:13px; border:0; background:linear-gradient(180deg,rgba(0,0,0,.9),transparent); pointer-events:none; } 137 .commercial-player-brand>* { pointer-events:auto; } 138 .commercial-player-copy { padding:0 0 14px; } 139 .commercial-player-kicker { font-size:8px; } 140 .commercial-player-copy h2 { margin:8px 0 5px; font-size:24px; } 141 .commercial-player-copy p,.commercial-player-tip { display:none; } 142 .commercial-player-cta { min-height:48px; } 143} 144@media (max-width:520px) { 145 .commercial-copy-hero { width:calc(100% - 16px); min-height:370px; margin-top:8px; padding:28px 22px; border-radius:15px; } 146 .commercial-copy-hero h1 { font-size:50px; } 147 .commercial-copy-hero-actions { align-items:stretch; } 148 .commercial-copy-hero-actions>* { flex:1 1 100%; justify-content:center; } 149 .commercial-home-feed { padding:10px 8px 0; } 150 .commercial-feed-grid { gap:7px; } 151 .commercial-feed-card { border-radius:12px; } 152 .commercial-feed-meta { padding:10px; } 153 .commercial-template-library { padding:32px 10px 16px; } 154 .commercial-library-head h2 { font-size:26px; } 155 .commercial-library-head p { display:none; } 156} 157@media (prefers-reduced-motion:reduce) { .commercial-card,.commercial-stage-card,.commercial-feed-preview img { transition:none; } } 158`;function C({size:i=17}){return e.jsx("svg",{width:i,height:i,viewBox:"0 0 24 24","aria-hidden":"true",children:e.jsx("path",{d:"M8 5.4v13.2L19.5 12 8 5.4z",fill:"
158currentColor"})})}function V(){return e.jsx("svg",{width:"22",height:"22",viewBox:"0 0 24 24","aria-hidden":"true",children:e.jsx("path",{d:"M4 10.5L12 4l8 6.5V19a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19v-8.5z",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinejoin:"round"})})}function q(){return e.jsxs("svg",{width:"22",height:"22",viewBox:"0 0 24 24","aria-hidden":"true",children:[e.jsx("rect",{x:"4",y:"3.5",width:"16",height:"17",rx:"2.5",fill:"none",stroke:"currentColor",strokeWidth:"1.8"}),e.jsx("path",{d:"M9.5 9v6l5.2-3-5.2-3z",fill:"currentColor"})]})}function v(){return e.jsx("svg",{width:"15",height:"15",viewBox:"0 0 24 24","aria-hidden":"true",children:e.jsx("path",{d:"M12 5v14M5 12h14",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round"})})}function X(){return e.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24","aria-hidden":"true",children:e.jsx("path",{d:"M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round"})})}function J({item:i,onOpen:o}){return e.jsxs("button",{type:"button",className:"commercial-card",onClick:o,"aria-label":`Play ${i.title}`,children:[e.jsx("video",{src:i.video,poster:i.poster,muted:!0,loop:!0,autoPlay:!0,playsInline:!0,preload:"metadata","aria-hidden":"true"}),e.jsx("span",{className:"commercial-card-shade"}),e.jsx("span",{className:"commercial-card-type",children:i.type}),e.jsx("span",{className:"commercial-card-play",children:e.jsx(C,{})}),e.jsxs("span",{className:"commercial-card-copy",children:[e.jsx("span",{children:i.brand}),e.jsx("strong",{children:i.title})]})]})}function Q({item:i,active:o}){const c=r.useRef(null);return r.useEffect(()=>{o?c.current?.play().catch(()=>{}):c.current?.pause()},[o]),e.jsx("video",{ref:c,className:"commercial-social-video",src:i.video,poster:i.poster,controls:!0,muted:!0,loop:!0,playsInline:!0,preload:"metadata"})}function Z(){const[i,o]=r.useState(null),[c,n]=r.useState(null),[f,A]=r.useState(0),[d,P]=r.useState(u[1]),I=G(),M=r.useMemo(()=>z(I),[I]),[w,R]=r.useState("all"),F=r.useRef(null),b=r.useRef(null),j=r.useRef(null),g=r.useRef(null),p=typeof window<"u"&&/\/commercials\/templates\/?$/.test(window.location.pathname),y="/commercials",k=N.find(a=>a.id===w)||N[0],B=r.useMemo(()=>k.types.length?u.filter(a=>k.types.includes(a.type)):u,[k]);r.useEffect(()=>{document.title=p?"Templates · Frobits Business":"Commercials · Frobits Business"},[p]),r.useEffect(()=>{if(!p)return;const a=requestAnimationFrame(()=>E(d.id,!1));return()=>cancelAnimationFrame(a)},[p]),r.useEffect(()=>()=>{g.current&&clearTimeout(g.current)},[]),r.useEffect(()=>{if(!i&&c===null)return;const a=document.body.style.overflow;document.body.style.overflow="hidden";const s=t=>{t.key==="Escape"&&(o(null),n(null))};return window.addEventListener("keydown",s),()=>{document.body.style.overflow=a,window.removeEventListener("keydown",s)}},[i,c]),r.useEffect(()=>{if(c===null)return;const a=requestAnimationFrame(()=>b.current?.scrollTo({top:c*(b.current?.clientHeight||0),behavior:"auto"}));return()=>cancelAnimationFrame(a)},[c===null]);function H(){const a=b.current;a&&n(Math.round(a.scrollTop/Math.max(a.clientHeight,1)))}function E(a,s=!0){const t=j.current,m=t?.querySelector(`[data-template-id="${a}"]`);!t||!m||t.scrollTo({left:m.offsetLeft-(t.clientWidth-m.offsetWidth)/2,behavior:s?"smooth":"auto"})}function L(a){P(a),E(a.id)}function U(){g.current&&clearTimeout(g.current),g.current=setTimeout(()=>{const a=j.current;if(!a)return;const s=a.getBoundingClientRect().left+a.clientWidth/2,t=Array.from(a.querySelectorAll("[data-template-id]")).sort((x,_)=>{const $=x.getBoundingClientRect(),O=_.getBoundingClientRect();return Math.abs($.left+$.width/2-s)-Math.abs(O.left+O.width/2-s)})[0],m=u.find(x=>x.id===t?.dataset.templateId);m&&P(x=>x.id===m.id?x:m)},110)}return e.jsxs("main",{className:"commercial-page","data-testid":"page-frobits-tv-commercials",children:[e.jsx("style",{children:D}),e.jsx("header",{className:"commercial-header",children:e.jsxs("div",{className:"commercial-header-inner",children:[e.jsx("a",{href:y,style:{textDecoration:"none"},children:e.jsx(T,{})}),e.jsx("span",{className:"commercial-header-tag",children:p?"Templates":"Business"})]})}),p?e.jsxs("div",{className:"commercial-template-page",children:[e.jsxs("section",{className:"commercial-template-stage","aria-labelledby":"template-stage-title",children:[e.jsx("p",{className:"commercial-stage-label",children:"Commercial templates"}),e.jsx("div",{className:"commercial-stage-track",ref:j,onScroll:U,children:u.map(a=>{const s=a.id===d.id;return e.jsxs("button",{type:"button","data-template-id":a.id,className:`commercial-stage-card${s?" is-current":""}`,"aria-pressed":s,"aria-label":`Select ${a.title}`,onClick:()=>L(a),children:[e.jsx("img",{src:a.poster,alt:""}),e.jsx("span",{children:a.type})]},a.id)})}),e.jsxs("div",{className:"commercial-stage-copy",children:[e.jsx("small",{children:d.type}),e.jsx("h1",{id:"template-stage-title",children:d.title}),e.jsx("p",{children:d.description}),e.jsxs("div",{className:"commercial-stage-actions",children:[e.jsxs("button",{type:"button",className:"commercial-stage-preview",onClick:()=>o(d),children:[e.jsx(C,{})," Preview"]}),e.jsxs("a",{className:"commercial-primary",href:`/business/ugc?template=${encodeURIComponent(d.template)}`,children:["Use this template ",e.jsx(v,{})]})]})]})]}),e.jsxs("section",{className:"commercial-template-library","aria-labelledby":"template-library-title",children:[e.jsx("div",{className:"commercial-library-head",children:e.jsxs("div",{children:[e.jsx("h2",{id:"template-library-title",children:"Explore templates"}),e.jsx("p",{children:"Choose how your product should move."})]})}),e.jsx("div",{className:"commercial-template-filters",role:"toolbar","aria-label":"Filter templates",children:N.map(a=>e.jsx("button",{type:"button",className:w===a.id?"is-active":"","aria-pressed":w===a.id,onClick:()=>R(a.id),children:a.label},a.id))}),e.jsx("div",{className:"commercial-template-grid",children:B.map(a=>e.jsx(J,{item:a,onOpen:()=>o(a)},a.id))})]})]}):e.jsxs(e.Fragment,{children:[e.jsx("section",{className:"commercial-copy-hero","aria-labelledby":"
158commercial-home-title",children:e.jsxs("div",{className:"commercial-copy-hero-inner",children:[e.jsx("small",{children:"Frobits Business"}),e.jsxs("h1",{id:"commercial-home-title",children:["Turn your product into a ",e.jsx("span",{children:"commercial."})]}),e.jsx("p",{children:"A ready-to-post product video with an original jingle, made for your market."}),e.jsxs("div",{className:"commercial-copy-hero-actions",children:[e.jsxs("a",{className:"commercial-primary",href:"/business/ugc",children:["Make a commercial ",e.jsx(v,{})]}),e.jsx("a",{className:"commercial-hero-secondary",href:`${y}/templates`,children:"Browse templates"})]})]})}),e.jsx("section",{className:"commercial-home-feed","aria-label":"Commercial videos",children:e.jsxs("div",{className:"commercial-feed-grid",children:[S.map((a,s)=>e.jsxs("article",{className:"commercial-feed-card",children:[e.jsxs("button",{type:"button",className:"commercial-feed-preview",onClick:()=>n(s),"aria-label":`Play ${a.title} by ${a.brand}`,children:[e.jsx("video",{src:a.video,poster:a.poster,muted:!0,loop:!0,autoPlay:!0,playsInline:!0,preload:"metadata","aria-hidden":"true"}),e.jsx("span",{children:e.jsx(C,{})})]}),e.jsxs("div",{className:"commercial-feed-meta",children:[e.jsx("strong",{children:a.brand}),e.jsxs("span",{children:["ð³ð¬ ",a.country]})]})]},a.id)),e.jsxs("article",{className:"commercial-feed-card",children:[e.jsxs("button",{type:"button",className:"commercial-feed-preview commercial-feed-photo",onClick:()=>{A(0),n(S.length)},"aria-label":"Open O'SEUN CHIPS campaign photo pack",children:[e.jsxs("div",{className:"commercial-photo-mosaic",children:[e.jsx("img",{src:h[0].url,alt:""}),e.jsxs("div",{children:[e.jsx("img",{src:h[1].url,alt:""}),e.jsx("img",{src:h[2].url,alt:""})]})]}),e.jsxs("em",{children:[h.length," photos"]}),e.jsx("span",{children:e.jsx(X,{})})]}),e.jsxs("div",{className:"commercial-feed-meta",children:[e.jsx("strong",{children:"O'SEUN CHIPS"}),e.jsx("span",{children:"ð³ð¬ Nigeria"})]})]})]})})]}),e.jsxs("nav",{className:"commercial-nav","aria-label":"Frobits TV",children:[e.jsxs("a",{href:y,"aria-current":p?void 0:"page","data-testid":"commercial-nav-home",children:[e.jsx("span",{className:"commercial-nav-icon",children:e.jsx(V,{})}),e.jsx("span",{children:"Home"})]}),e.jsxs("a",{href:`${y}/templates`,"aria-current":p?"page":void 0,"data-testid":"commercial-nav-templates",children:[e.jsx("span",{className:"commercial-nav-icon",children:e.jsx(q,{})}),e.jsx("span",{children:"Templates"})]}),e.jsxs("a",{className:"make",href:"/business/ugc","data-testid":"commercial-nav-make",children:[e.jsx("span",{className:"commercial-nav-icon",children:e.jsx(v,{})}),e.jsx("span",{children:"Make"})]})]}),c!==null&&!p&&e.jsxs("div",{className:"commercial-social-viewer",role:"dialog","aria-modal":"true","aria-label":"Business creations feed",children:[e.jsxs("button",{className:"commercial-social-close",type:"button","aria-label":"Close creations feed",onClick:()=>n(null),children:[e.jsx("b",{"aria-hidden":"true",children:"â"})," Back"]}),e.jsx("div",{className:"commercial-social-feed",ref:b,onScroll:H,children:M.map((a,s)=>a.kind==="video"?e.jsxs("article",{className:"commercial-social-post","aria-label":`${a.item.title} by ${a.item.brand}`,children:[e.jsx(Q,{item:a.item,active:c===s}),e.jsx("footer",{className:"commercial-social-footer",children:e.jsxs("div",{className:"commercial-social-meta",children:[a.item.brand,e.jsxs("span",{children:["ð³ð¬ ",a.item.country]})]})})]},a.item.id):e.jsxs("article",{className:"commercial-social-post","aria-label":"O'SEUN CHIPS campaign photo pack",children:[e.jsx("div",{className:"commercial-social-photos",onScroll:t=>A(Math.round(t.currentTarget.scrollLeft/Math.max(t.currentTarget.clientWidth,1))),children:h.map((t,m)=>e.jsx("div",{className:"commercial-social-photo",children:e.jsx("img",{src:t.url,alt:`${t.brand} campaign photo ${m+1}`})},t.id))}),e.jsxs("span",{className:"commercial-social-photo-count",children:[f+1," / ",h.length]}),e.jsxs("footer",{className:"commercial-social-footer",children:[e.jsxs("div",{className:"commercial-social-meta",children:["O'SEUN CHIPS",e.jsx("span",{children:"ð³ð¬ Nigeria"})]}),e.jsx("span",{className:"commercial-social-hint",children:"Swipe photos â"})]})]},"campaign-photo-pack"))})]}),i&&p&&e.jsx("div",{className:"commercial-modal",role:"dialog","aria-modal":"true","aria-labelledby":`commercial-player-${i.id}`,onClick:()=>o(null),children:e.jsxs("div",{className:"commercial-player",onClick:a=>a.stopPropagation(),children:[e.jsx("div",{className:"commercial-player-media",children:e.jsx("video",{ref:F,src:i.video,poster:i.poster,controls:!0,autoPlay:!0,playsInl
158ine:!0})}),e.jsxs("aside",{className:"commercial-player-info",children:[e.jsxs("div",{className:"commercial-player-brand",children:[e.jsx(T,{}),e.jsx("button",{className:"commercial-close",type:"button","aria-label":"Close preview",onClick:()=>o(null),children:"Ã"})]}),e.jsxs("div",{className:"commercial-player-copy",children:[e.jsxs("span",{className:"commercial-player-kicker",children:[i.brand," · ",i.type]}),e.jsx("h2",{id:`commercial-player-${i.id}`,children:i.title}),e.jsx("p",{children:"A product commercial made with Frobits music, built for social."})]}),e.jsxs("a",{className:"commercial-player-cta",href:`/business/ugc?template=${encodeURIComponent(i.template)}`,children:[e.jsx("span",{children:"Use this template"}),e.jsx(v,{})]}),e.jsx("p",{className:"commercial-player-tip",children:"Close this preview any time with Esc."})]})]})})]})}export{Z as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.