Elements

<div class='ph'><label for='ph1'>Phone number</label><div class='ph-g'><span>+1</span><input id='ph1' type='tel' inputmode='numeric' placeholder='(555) 000-0000'></div><p>We will send a verification code by SMS.</p></div>

<style>
.ph{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ph label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.ph-g{display:flex;height:40px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.ph-g:focus-within{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.ph-g span{display:grid;place-items:center;padding:0 13px;background:#fafafa;border-right:1px solid #e5e5e5;font-size:14px;color:#404040}.ph-g input{flex:1;min-width:0;border:0;outline:0;padding:0 14px;font:inherit;font-size:14px;background:transparent}.ph-g input::placeholder{color:#a3a3a3}.ph p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<script>
const i=document.getElementById('ph1');i.addEventListener('input',()=>{const d=i.value.replace(/D/g,'').slice(0,10);let o='';if(d.length>0)o='('+d.slice(0,3);if(d.length>=3)o+=') ';if(d.length>3)o+=d.slice(3,6);if(d.length>6)o+='-'+d.slice(6);i.value=o});
</script>

<div class='ig'><label for='ig1'>Website</label><div class='ig-g'><span>https://</span><input id='ig1' type='text' placeholder='yourdomain.com'></div><p>Include the path after your domain.</p></div>

<style>
.ig{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ig label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.ig-g{display:flex;height:40px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.ig-g:focus-within{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.ig-g span{display:grid;place-items:center;padding:0 12px;background:#fafafa;border-right:1px solid #e5e5e5;font:13.5px ui-monospace,Menlo,monospace;color:#404040}.ig-g input{flex:1;min-width:0;border:0;outline:0;padding:0 12px;font:inherit;font-size:14px;background:transparent}.ig-g input::placeholder{color:#a3a3a3}.ig p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<div class='fl'><input id='fl1' type='email' placeholder=' '><label for='fl1'>Email address</label><p>We never share your email.</p></div>

<style>
.fl{position:relative;width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.fl input{width:100%;box-sizing:border-box;height:46px;padding:16px 14px 0;font:inherit;font-size:14.5px;background:#fff;border:1px solid #e5e5e5;border-radius:12px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.fl label{position:absolute;left:15px;top:13px;font-size:14.5px;color:#737373;pointer-events:none;transform-origin:left top;transition:transform .18s ease,color .18s}.fl input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.fl input:focus+label,.fl input:not(:placeholder-shown)+label{transform:translateY(-8px) scale(.78);color:#111}.fl p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<div class='up'><div class='up-z' id='upz'><i class='c1'></i><i class='c2'></i><i class='c3'></i><i class='c4'></i><span class='up-i'><svg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='17' height='17' rx='3'/><path d='M3.5 16l5-5 4 4 3-3 5 5'/><path d='M16 6.5h4M18 4.5v4'/></svg></span><b>Drop your file here</b><small>Drag & drop or click anywhere</small></div><div class='up-r'><div><span id='upn'>No file selected</span><small>PDF, PNG, JPG, JPEG · max 5.0 MB</small></div><button type='button' id='upb'>Choose file</button></div><input type='file' id='upf' hidden accept='.pdf,.png,.jpg,.jpeg'></div>

<style>
.up{width:min(380px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.up-z{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:30px 10px;border:1px solid #e5e5e5;border-radius:16px;background:#fafafa linear-gradient(#ececec,#ececec) 33.3% 0/1px 100% no-repeat,linear-gradient(#ececec,#ececec) 66.6% 0/1px 100% no-repeat;cursor:pointer;transition:border-color .15s,background-color .15s}.up-z.over{border-color:#111;background-color:#f0f0f0}.up-z i{position:absolute;width:12px;height:12px;border:2px solid #cfcfcf}.up-z .c1{left:8px;top:8px;border-right:0;border-bottom:0;border-top-left-radius:3px}.up-z .c2{right:8px;top:8px;border-left:0;border-bottom:0;border-top-right-radius:3px}.up-z .c3{left:8px;bottom:8px;border-right:0;border-top:0;border-bottom-left-radius:3px}.up-z .c4{right:8px;bottom:8px;border-left:0;border-top:0;border-bottom-right-radius:3px}.up-i{display:grid;place-items:center;width:38px;height:38px;margin-bottom:8px;border-radius:11px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);color:#333}.up-z b{font-family:Georgia,serif;font-weight:400;font-size:17px}.up-z small{font-size:13px;color:#737373}.up-r{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}.up-r span{display:block;font-size:13px;font-weight:500;color:#737373}.up-r small{display:block;margin-top:3px;font-size:11.5px;color:#737373}.up-r span.ok{color:#111}.up-r button{height:36px;padding:0 18px;border:0;border-radius:10px;background:#111;color:#fff;font:600 13.5px Inter,Arial,sans-serif;cursor:pointer;transition:transform .12s}.up-r button:active{transform:scale(.96)}
</style>

<script>
const z=document.getElementById('upz'),f=document.getElementById('upf'),n=document.getElementById('upn');const pick=()=>f.click();z.addEventListener('click',pick);document.getElementById('upb').addEventListener('click',pick);const show=x=>{if(!x)return;n.textContent=x.name+' ('+(x.size/1048576<.1?Math.max(1,Math.round(x.size/1024))+' KB':(x.size/1048576).toFixed(1)+' MB')+')';n.className='ok'};f.addEventListener('change',()=>show(f.files[0]));['dragenter','dragover'].forEach(e=>z.addEventListener(e,ev=>{ev.preventDefault();z.classList.add('over')}));['dragleave','drop'].forEach(e=>z.addEventListener(e,ev=>{ev.preventDefault();z.classList.remove('over')}));z.addEventListener('drop',ev=>show(ev.dataTransfer.files[0]));
</script>

<div class='df'><label for='df1'>Date of birth</label><div class='df-w'><input id='df1' type='text' readonly placeholder='Select a date'><input id='df2' type='date' tabindex='-1' aria-hidden='true'><button type='button' id='dfb' aria-label='Open calendar'><svg width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg></button></div><p>Must match your ID document.</p></div>

<style>
.df{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.df label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.df-w{position:relative}.df-w #df1{width:100%;box-sizing:border-box;height:40px;padding:0 42px 0 14px;font:inherit;font-size:14px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.df-w #df1::placeholder{color:#a3a3a3}.df-w #df1:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}#df2{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;pointer-events:none}.df button{position:absolute;right:6px;top:5px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:#737373;border-radius:8px;cursor:pointer}.df button:hover{color:#111;background:#f4f4f4}.df p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<script>
const t=document.getElementById('df1'),d=document.getElementById('df2'),b=document.getElementById('dfb');const go=()=>{try{d.showPicker()}catch(e){d.focus();d.click()}};t.addEventListener('click',go);b.addEventListener('click',go);d.addEventListener('change',()=>{if(d.value){const x=new Date(d.value+'T00:00:00');t.value=x.toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'})}});
</script>

<div class='cx'><label for='cx1'>Framework</label><div class='cx-w'><input id='cx1' type='text' placeholder='Search frameworks...' autocomplete='off' role='combobox' aria-expanded='false'><svg class='cx-c' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg><ul id='cxl' role='listbox'></ul></div><p>Type to filter the list.</p></div>

<style>
.cx{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.cx label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.cx-w{position:relative}.cx input{width:100%;box-sizing:border-box;height:40px;padding:0 38px 0 14px;font:inherit;font-size:14px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.cx input::placeholder{color:#a3a3a3}.cx input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.cx-c{position:absolute;right:12px;top:12px;color:#737373;pointer-events:none;transition:transform .2s}.cx.open .cx-c{transform:rotate(180deg)}.cx ul{display:none;position:absolute;z-index:5;left:0;right:0;top:46px;margin:0;padding:4px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);max-height:150px;overflow:auto}.cx.open ul{display:block}.cx li{padding:8px 10px;font-size:14px;border-radius:7px;cursor:pointer}.cx li.a,.cx li:hover{background:#f4f4f4}.cx p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<script>
const root=document.querySelector('.cx'),inp=document.getElementById('cx1'),ul=document.getElementById('cxl');const D=['React','Vue','Svelte','Angular','Solid','Astro','Next.js','Nuxt','Remix','Qwik'];let a=-1,cur=[];function draw(){const q=inp.value.toLowerCase();cur=D.filter(x=>x.toLowerCase().includes(q));ul.innerHTML=cur.length?cur.map((x,i)=>'<li role=option class="'+(i===a?'a':'')+'">'+x+'</li>').join(''):'<li>No results</li>'}function open(v){root.classList.toggle('open',v);inp.setAttribute('aria-expanded',v)}inp.addEventListener('focus',()=>{a=-1;draw();open(true)});inp.addEventListener('input',()=>{a=-1;draw();open(true)});inp.addEventListener('keydown',e=>{if(e.key==='ArrowDown'){a=Math.min(a+1,cur.length-1);draw();e.preventDefault()}else if(e.key==='ArrowUp'){a=Math.max(a-1,0);draw();e.preventDefault()}else if(e.key==='Enter'&&cur[a]){inp.value=cur[a];open(false)}else if(e.key==='Escape')open(false)});ul.addEventListener('mousedown',e=>{const l=e.target.closest('li');if(l&&cur.length){inp.value=l.textContent;open(false)}});document.addEventListener('mousedown',e=>{if(!root.contains(e.target))open(false)});
</script>

<label class='cb'><input type='checkbox'><span class='cb-b'><svg viewBox='0 0 16 16' width='12' height='12' fill='none' stroke='#fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5l3.2 3.2L13 4.8'/></svg></span><span class='cb-t'><b>I agree to the terms and privacy policy</b><small>You can unsubscribe at any time.</small></span></label>

<style>
.cb{display:flex;gap:10px;align-items:flex-start;width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111;cursor:pointer}.cb input{position:absolute;opacity:0;pointer-events:none}.cb-b{flex:none;width:18px;height:18px;margin-top:1px;border:1px solid #d4d4d4;border-radius:5px;background:#fff;display:grid;place-items:center;transition:background .15s,border-color .15s,box-shadow .15s}.cb-b svg{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .2s ease .05s}.cb input:checked+.cb-b{background:#111;border-color:#111}.cb input:checked+.cb-b svg{stroke-dashoffset:0}.cb input:focus-visible+.cb-b{box-shadow:0 0 0 3px rgba(17,17,17,.15)}.cb-t b{display:block;font-weight:400;font-size:14px}.cb-t small{display:block;margin-top:3px;font-size:12.5px;color:#737373}
</style>

<div class='ta'><div class='ta-h'><label for='ta1'>Message</label><span id='tac'>0/500</span></div><textarea id='ta1' maxlength='500' placeholder='Tell us about your project...'></textarea></div>

<style>
.ta{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ta-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.ta label{font-size:14px;font-weight:500}.ta-h span{font-size:12.5px;color:#a3a3a3;transition:color .15s}.ta-h span.w{color:#d97706}.ta textarea{width:100%;box-sizing:border-box;height:100px;padding:10px 14px;font:inherit;font-size:14px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;resize:vertical;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.ta textarea::placeholder{color:#a3a3a3}.ta textarea:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}
</style>

<script>
const t=document.getElementById('ta1'),c=document.getElementById('tac');t.addEventListener('input',()=>{c.textContent=t.value.length+'/500';c.classList.toggle('w',t.value.length>450)});
</script>

<div class='pf'><label for='pf1'>Password</label><div class='pf-w'><input id='pf1' type='password' placeholder='Enter password'><button type='button' id='pfb' aria-label='Show password'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/><path class='sl' d='M4 4l16 16'/></svg></button></div><p>Use at least 8 characters with a number and symbol.</p></div>

<style>
.pf{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.pf label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.pf-w{position:relative}.pf input{width:100%;box-sizing:border-box;height:40px;padding:0 42px 0 14px;font:inherit;font-size:14px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.pf input::placeholder{color:#a3a3a3}.pf input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.pf button{position:absolute;right:6px;top:5px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:#737373;border-radius:8px;cursor:pointer}.pf button:hover{color:#111;background:#f4f4f4}.pf .sl{opacity:0}.pf button.on .sl{opacity:1}.pf p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<script>
const i=document.getElementById('pf1'),b=document.getElementById('pfb');b.addEventListener('click',()=>{const s=i.type==='password';i.type=s?'text':'password';b.classList.toggle('on',s);b.setAttribute('aria-label',s?'Hide password':'Show password')});
</script>

<div class='tf'><label for='tf1'>Full name</label><input id='tf1' type='text' placeholder='Jane Cooper' aria-describedby='tf1h'><p id='tf1h'>As shown on your government ID.</p></div>

<style>
.tf{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.tf label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.tf input{width:100%;box-sizing:border-box;height:40px;padding:0 14px;font:inherit;font-size:14px;color:#111;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.tf input::placeholder{color:#a3a3a3}.tf input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.tf p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useEffect, useRef, type CSSProperties } from "react";

const css = `.su{--su-accent:#4f46e5;--su-ok:#16a34a;--su-bad:#dc2626;--su-card:#fff;--su-ink:#0b1020;--su-muted:#5c627c;--su-line:#d8deeb;--su-soft:#f4f6fb;
 width:min(460px,100%);padding:14px 16px 10px;border:1px solid var(--su-line);border-radius:20px;background:var(--su-card);color:var(--su-ink);font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
 box-shadow:0 24px 60px -30px rgba(15,23,42,.35);user-select:none;-webkit-user-select:none}
:root[data-stage=dark] .su,.su.su--dark{--su-card:#111827;--su-ink:#f4f6fb;--su-muted:#9ea6bc;--su-line:#2a3550;--su-soft:#0b1222;--su-accent:#818cf8}
.su-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.su-title{margin:0;font-size:16px;font-weight:700}
.su-sub{margin:1px 0 0;color:var(--su-muted);font-size:12.5px}
.su-tools{display:flex;align-items:center;gap:6px;flex:none}
.su-sound{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--su-soft);color:var(--su-muted);cursor:pointer}
.su-sound svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.su-sound .w{display:none}.su-sound[aria-pressed=true]{color:var(--su-accent)}.su-sound[aria-pressed=true] .w{display:inline}.su-sound[aria-pressed=true] .x{display:none}
.su-count{height:28px;padding:0 12px;border:1px solid color-mix(in srgb,var(--su-accent) 35%,transparent);border-radius:99px;background:color-mix(in srgb,var(--su-accent) 12%,transparent);color:var(--su-accent);font-size:12.5px;font-weight:700;display:flex;align-items:center;white-space:nowrap}
.su-count.bump{animation:su-bump .45s}
@keyframes su-bump{40%{transform:scale(1.15)}}
.su-court{position:relative;height:var(--su-h,210px);margin-top:10px;border:1.5px dashed var(--su-line);border-radius:16px;background:var(--su-soft);overflow:hidden;touch-action:none;transition:border-color .2s,background .2s}
.su-court.is-over{border-color:var(--su-accent);background:color-mix(in srgb,var(--su-accent) 8%,var(--su-soft))}
.su-hint{position:absolute;left:0;right:0;top:12px;display:grid;justify-items:center;gap:2px;color:var(--su-muted);font-size:12.5px;text-align:center;pointer-events:none;transition:opacity .25s}
.su-hint b{color:var(--su-ink);font-size:13.5px}
.su-hint button{pointer-events:auto;padding:0;border:0;background:none;color:var(--su-accent);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.su-court.has-rows .su-hint{opacity:0;pointer-events:none}.su-court.has-rows .su-hint button{pointer-events:none}
.su-rows{position:absolute;left:10px;right:10px;top:10px;z-index:3;display:grid;gap:6px;max-height:58px;overflow:auto;pointer-events:auto}
.su-row{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:center;padding:7px 10px;border:1px solid var(--su-line);border-radius:12px;background:var(--su-card);box-shadow:0 8px 20px -14px rgba(0,0,0,.35);animation:su-row .35s cubic-bezier(.2,.8,.2,1)}
@keyframes su-row{from{transform:translateY(-10px);opacity:0}}
.su-type{padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--su-accent) 14%,transparent);color:var(--su-accent);font-size:10px;font-weight:800;letter-spacing:.04em}
.su-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:13px}
.su-state{font-size:12px;font-weight:700;color:var(--su-accent)}
.su-bar{grid-column:1/-1;height:5px;border-radius:99px;background:var(--su-line);overflow:hidden}
.su-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--su-accent);transition:width .2s}
.su-meta{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--su-muted);font-size:11.5px}
.su-row.is-done .su-bar i{background:var(--su-ok)}.su-row.is-done .su-state,.su-row.is-done .su-msg{color:var(--su-ok)}
.su-row.is-error .su-state,.su-row.is-error .su-msg{color:var(--su-bad)}.su-row.is-error .su-bar{display:none}
.su-hoop{position:absolute;right:16%;bottom:var(--su-hoop-bottom,15%);width:88px;pointer-events:none}
.su-board{width:88px;height:56px;margin:0 auto;border:2px solid var(--su-line);border-radius:6px;background:var(--su-card);display:grid;place-items:end center;box-shadow:0 6px 16px -10px rgba(0,0,0,.35)}
.su-board i{width:40px;height:28px;margin-bottom:6px;border:2.5px solid var(--su-accent);border-bottom:0;border-radius:2px}
.su-rim{position:relative;z-index:4;width:76px;height:12px;margin:-7px auto 0;border:3.5px solid var(--su-accent);border-radius:50%;background:transparent;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.su-net{width:60px;height:38px;margin:-4px auto 0;transform-origin:top;
 background:repeating-linear-gradient(60deg,transparent 0 6px,color-mix(in srgb,var(--su-muted) 70%,transparent) 6px 7.5px),repeating-linear-gradient(-60deg,transparent 0 6px,color-mix(in srgb,var(--su-muted) 70%,transparent) 6px 7.5px);
 clip-path:polygon(0 0,100% 0,82% 100%,18% 100%);opacity:.75}
.su-hoop.swish .su-net{animation:su-swish .5s ease-out}
@keyframes su-swish{30%{transform:scaleY(1.35) scaleX(.86)}65%{transform:scaleY(.92)}}
.su-ball{position:absolute;left:0;top:0;z-index:2;width:34px;height:42px;padding:0;border:0;background:none;cursor:grab;touch-action:none;will-change:transform}
.su-ball:active{cursor:grabbing}
.su-ball.is-front{z-index:5}
.su-ball:focus-visible{outline:none}.su-ball:focus-visible .su-file{box-shadow:0 0 0 3px var(--su-card),0 0 0 6px var(--su-accent)}
.su-file{display:grid;place-items:end center;width:34px;height:42px;padding-bottom:6px;border-radius:5px 12px 5px 5px;background:linear-gradient(180deg,#fff,#eef1f8);border:1px solid #d6dbe8;box-shadow:0 8px 16px -8px rgba(0,0,0,.45);position:relative}
.su-file::before{content:"";position:absolute;top:8px;left:6px;width:16px;height:2px;background:#cfd5e3;box-shadow:0 5px 0 #cfd5e3,0 10px 0 #cfd5e3}
.su-file b{padding:1px 4px;border-radius:4px;background:var(--su-accent);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.03em}
.su-ball.is-empty .su-file{background:var(--su-card);border-style:dashed;border-color:var(--su-accent)}
.su-ball.is-empty .su-file::before{display:none}
.su-ball.is-empty .su-file b{background:none;color:var(--su-accent);font-size:20px;line-height:1;margin-bottom:6px}
.su-dots{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;overflow:visible}
.su-dots circle{fill:var(--su-accent)}
.su-foot{margin:7px 0 0;color:var(--su-muted);font-size:11.5px;text-align:center;min-height:16px}
.su-foot.is-miss{color:#c2410c;font-weight:600}
.su-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.su-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:420px){.su{padding:12px 12px 8px}.su-hoop{right:8%;transform:scale(.84);transform-origin:bottom right}}`;

export type ShootUploaderOptions = {
  title?: string;
  subtitle?: string;
  /** Like the input accept attribute: "image/*,application/pdf,.zip". Empty allows everything. */
  accept?: string;
  maxBytes?: number;
  multiple?: boolean;
  /** Dropped or browsed files fly into the basket by themselves (default true). */
  autoShoot?: boolean;
  /** Start with sound effects on (default off; people can turn them on). */
  sound?: boolean;
  /** Keep a sample file on the court so people can play (for demos). */
  demoFiles?: boolean;
  /** Upload one file. Call onProgress with 0-100; resolve when done, reject on failure. */
  upload?: (file: File, onProgress: (pct: number) => void) => Promise<void>;
  onUploaded?: (file: File) => void;
};

/** Ready-made uploader: POSTs each file as multipart form data to `url`, with real progress. */
export const xhrUpload = (url: string, field = "file") => (file: File, onProgress: (pct: number) => void) =>
  new Promise<void>((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    xhr.upload.onprogress = (e) => e.lengthComputable && onProgress((e.loaded / e.total) * 100);
    xhr.onload = () => (xhr.status < 300 ? resolve() : reject(new Error(`Upload failed (${xhr.status})`)));
    xhr.onerror = () => reject(new Error("Network error"));
    const body = new FormData();
    body.append(field, file);
    xhr.send(body);
  });

/* Shoot-to-Upload engine: builds the uploader inside `root` and returns a cleanup function. */
export function mountShootUploader(root: HTMLElement, o: ShootUploaderOptions = {}): () => void {
  const opt = {
    title: 'Upload files', subtitle: 'Drag and drop, browse, or take the shot.', accept: '', maxBytes: 25 * 1024 * 1024, multiple: true,
    autoShoot: true, sound: false, demoFiles: false, ...o,
  };
  const upload = opt.upload || fakeUpload;
  const reduce = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
  const uid = 'su' + Math.random().toString(36).slice(2, 8);
  root.classList.add('su');
  root.innerHTML =
    '<div class="su-head"><div><h3 class="su-title"></h3><p class="su-sub"></p></div><div class="su-tools">' +
    '<button type="button" class="su-sound" aria-pressed="false" aria-label="Sound effects"><svg viewBox="0 0 24 24"><path d="M4 9.5h3.5L12 6v12l-4.5-3.5H4z"/><path class="w" d="M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11"/><path class="x" d="M16 9.5l5 5M21 9.5l-5 5"/></svg></button>' +
    '<span class="su-count" aria-live="polite">Uploaded 0</span></div></div>' +
    '<div class="su-court" id="' + uid + '-court"><div class="su-hint"><b>Drop files here</b><span>or <button type="button" class="su-browse">browse</button></span></div>' +
    '<div class="su-rows" aria-label="Uploads"></div>' +
    '<svg class="su-dots" aria-hidden="true"></svg>' +
    '<div class="su-hoop" aria-hidden="true"><div class="su-board"><i></i></div><div class="su-rim"></div><div class="su-net"></div></div>' +
    '<button type="button" class="su-ball"><span class="su-file"><b>PDF</b></span></button>' +
    '<input class="su-file-input" type="file" tabindex="-1" aria-hidden="true"></div>' +
    '<p class="su-foot" aria-live="polite"></p><p class="su-sr" aria-live="assertive"></p>';
  const $ = (s: string) => root.querySelector(s) as HTMLElement;
  const court = $('.su-court'), ball = $('.su-ball'), rows = $('.su-rows'), dots = $('.su-dots'), hoop = $('.su-hoop'), rim = $('.su-rim');
  const foot = $('.su-foot'), count = $('.su-count'), sr = $('.su-sr'), soundBtn = $('.su-sound');
  const input = $('.su-file-input') as HTMLInputElement;
  $('.su-title').textContent = opt.title; $('.su-sub').textContent = opt.subtitle;
  input.multiple = opt.multiple; if (opt.accept) input.accept = opt.accept;
  let soundOn = !!opt.sound; soundBtn.setAttribute('aria-pressed', String(soundOn));

  const queue: File[] = [];
  const autoSet = new WeakSet<File>();
  let uploaded = 0, flying = false, alive = true, raf = 0, drag: { id: number; x: number; y: number; moved: boolean } | null = null;
  let angle = 0, demoIndex = 0;
  const R = 17;
  const SAMPLES = [['document.pdf', 2516582, 'application/pdf'], ['team-photo.png', 1468006, 'image/png'], ['slides.pdf', 4404019, 'application/pdf'], ['notes.txt', 18432, 'text/plain']];

  /* ---------- geometry ---------- */
  function geo() {
    const c = court.getBoundingClientRect(), r = rim.getBoundingClientRect();
    const W = c.width, H = c.height;
    const rimL = r.left - c.left + 7, rimR = r.right - c.left - 7, rimY = r.top - c.top + r.height / 2;
    const start = { x: 14 + R + 6, y: H - R - 12 };
    const g = H * 8;
    return { W, H, rimL, rimR, rimY, start, g, maxPull: Math.min(110, H * 0.5) };
  }
  function place(x: number, y: number, rot = 0, scale = 1) {
    angle = rot;
    ball.style.transform = 'translate(' + (x - 17) + 'px,' + (y - 21) + 'px) rotate(' + rot + 'deg) scale(' + scale + ')';
  }
  function perfect() {
    const G = geo(), tx = (G.rimL + G.rimR) / 2, ty = G.rimY - 2;
    /* The lowest arc that drops through the rim at a steep angle and stays under the top of the court. */
    let best = { vx: 0, vy: 0, G };
    for (let T = 0.3; T <= 1.8; T += 0.01) {
      const vx = (tx - G.start.x) / T, vy = (ty - G.start.y - 0.5 * G.g * T * T) / T;
      if (G.start.y - (vy * vy) / (2 * G.g) < R + 4) break;
      best = { vx, vy, G };
      if (vy + G.g * T >= Math.abs(vx) * 1.2) break;
    }
    return best;
  }
  function power() { const p = perfect(); return (Math.hypot(p.vx, p.vy) * 1.3) / p.G.maxPull; }

  /* ---------- sound (synthesised, off by default) ---------- */
  let ac: AudioContext | null = null;
  function blip(kind: 'swish' | 'bounce' | 'miss') {
    if (!soundOn) return;
    try {
      ac = ac || new AudioContext();
      const t = ac.currentTime, gain = ac.createGain(); gain.connect(ac.destination);
      if (kind === 'swish') {
        const len = Math.floor(ac.sampleRate * 0.35), buf = ac.createBuffer(1, len, ac.sampleRate), d = buf.getChannelData(0);
        for (let i = 0; i < len; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / len, 2);
        const src = ac.createBufferSource(), f = ac.createBiquadFilter(); f.type = 'bandpass'; f.frequency.setValueAtTime(2500, t); f.frequency.exponentialRampToValueAtTime(700, t + 0.3);
        src.buffer = buf; src.connect(f); f.connect(gain); gain.gain.setValueAtTime(0.25, t); src.start(t);
      } else {
        const osc = ac.createOscillator(); osc.type = 'sine'; osc.frequency.setValueAtTime(kind === 'miss' ? 220 : 160, t); osc.frequency.exponentialRampToValueAtTime(kind === 'miss' ? 110 : 60, t + 0.18);
        gain.gain.setValueAtTime(0.3, t); gain.gain.exponentialRampToValueAtTime(0.001, t + 0.2); osc.connect(gain); osc.start(t); osc.stop(t + 0.22);
      }
    } catch (e) { /* audio not available: stay silent */ }
  }

  /* ---------- queue + ball ---------- */
  const ext = (n: string) => { const m = /\.([a-z0-9]{1,4})$/i.exec(n); return m ? m[1].toUpperCase() : 'FILE'; };
  const size = (b: number) => b < 1024 ? b + ' B' : b < 1048576 ? (b / 1024).toFixed(0) + ' KB' : (b / 1048576).toFixed(1) + ' MB';
  function okType(f: File) {
    if (!opt.accept) return true;
    return opt.accept.split(',').map((a) => a.trim().toLowerCase()).some((a) =>
      a.endsWith('/*') ? f.type.toLowerCase().startsWith(a.slice(0, -1)) : a.startsWith('.') ? f.name.toLowerCase().endsWith(a) : f.type.toLowerCase() === a);
  }
  function setBall() {
    const f = queue[0];
    ball.classList.toggle('is-empty', !f);
    (ball.querySelector('b') as HTMLElement).textContent = f ? ext(f.name) : '+';
    ball.setAttribute('aria-label', f ? 'Shoot ' + f.name + ' into the basket to upload it' : 'Choose files to upload');
    foot.classList.remove('is-miss');
    foot.textContent = f ? (reduce ? 'Press the file to upload it' : 'Pull the file back, aim and release. Or just tap it.') : 'Add files: drop them here or tap the +';
    if (!flying) place(geo().start.x, geo().start.y);
  }
  function addFiles(list: FileList | File[], auto: boolean) {
    let added = 0;
    Array.from(list).forEach((f) => {
      const why = !okType(f) ? 'This file type is not allowed' : f.size > opt.maxBytes ? 'Too large (max ' + size(opt.maxBytes) + ')' : '';
      if (why) { row(f).fail(why); return; }
      if (auto && opt.autoShoot) {
        autoSet.add(f);
        /* real files go ahead of a waiting demo/manual file */
        let i = 0; while (i < queue.length && autoSet.has(queue[i])) i++;
        if (flying && i === 0 && queue.length) i = 1; /* never jump ahead of the file in the air */
        queue.splice(i, 0, f);
      } else queue.push(f);
      added++;
    });
    setBall();
    if (added) sr.textContent = added + ' file' + (added > 1 ? 's' : '') + ' ready';
    autoNext();
  }
  /* Only files that were dropped or browsed fly in by themselves. */
  function autoNext() { setTimeout(() => { if (alive && !flying && queue.length && autoSet.has(queue[0])) shoot(null); }, 160); }

  /* ---------- rows ---------- */
  function row(f: File) {
    const el = document.createElement('div'); el.className = 'su-row';
    el.innerHTML = '<span class="su-type"></span><span class="su-name"></span><span class="su-state">0%</span><span class="su-bar" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></span><span class="su-meta"><span class="su-msg">Uploading…</span><span></span></span>';
    (el.querySelector('.su-type') as HTMLElement).textContent = ext(f.name);
    (el.querySelector('.su-name') as HTMLElement).textContent = f.name; (el.querySelector('.su-name') as HTMLElement).title = f.name;
    (el.querySelector('.su-meta span:last-child') as HTMLElement).textContent = size(f.size);
    rows.prepend(el); court.classList.add('has-rows');
    const st = el.querySelector('.su-state') as HTMLElement, bar = el.querySelector('.su-bar') as HTMLElement, msg = el.querySelector('.su-msg') as HTMLElement;
    return {
      progress(p: number) { const v = Math.max(0, Math.min(100, Math.round(p))); (bar.firstChild as HTMLElement).style.width = v + '%'; bar.setAttribute('aria-valuenow', String(v)); st.textContent = v + '%'; },
      done() { el.classList.add('is-done'); st.textContent = 'Done'; msg.textContent = '✓ File uploaded successfully'; (bar.firstChild as HTMLElement).style.width = '100%'; bar.setAttribute('aria-valuenow', '100'); },
      fail(why: string) { el.classList.add('is-error'); st.textContent = 'Failed'; msg.textContent = why; sr.textContent = f.name + ': ' + why; },
    };
  }
  function send(f: File) {
    const r = row(f);
    upload(f, (p) => r.progress(p)).then(() => {
      r.done(); uploaded++; count.textContent = 'Uploaded ' + uploaded; count.classList.remove('bump'); void count.offsetWidth; count.classList.add('bump');
      sr.textContent = f.name + ' uploaded'; if (opt.onUploaded) opt.onUploaded(f);
    }).catch((e: Error) => r.fail(e && e.message ? e.message : 'Upload failed'));
  }

  /* ---------- flight ---------- */
  function drawDots(vx: number, vy: number) {
    if (vx === 0 && vy === 0) { dots.innerHTML = ''; return; }
    const G = geo(); let x = G.start.x, y = G.start.y, s = '';
    for (let i = 1; i <= 16; i++) { const t = i * 0.045; const px = x + vx * t, py = y + vy * t + 0.5 * G.g * t * t; if (py > G.H) break; s += '<circle cx="' + px.toFixed(1) + '" cy="' + py.toFixed(1) + '" r="' + (2.6 - i * 0.1).toFixed(2) + '" opacity="' + (1 - i / 18).toFixed(2) + '"/>'; }
    dots.innerHTML = s;
  }
  function shoot(v: { vx: number; vy: number } | null) {
    const f = queue[0];
    if (!f || flying) return;
    flying = true; drawDots(0, 0);
    const G = geo(); const p = v || perfect();
    if (reduce) { scored(f); return; }
    let x = G.start.x, y = G.start.y, vx = p.vx, vy = p.vy, last = -1, age = 0, rest = 0;
    ball.classList.add('is-front');
    const ends = [{ x: G.rimL, y: G.rimY }, { x: G.rimR, y: G.rimY }];
    const step = (now: number) => {
      if (!alive) return;
      if (last < 0) last = now;
      let dt = Math.max(0, Math.min(0.034, (now - last) / 1000)); last = now; age += dt;
      const sub = 4; dt /= sub;
      for (let k = 0; k < sub; k++) {
        const py = y;
        vy += G.g * dt; x += vx * dt; y += vy * dt;
        if (py < G.rimY && y >= G.rimY && vy > 0 && x > G.rimL + 3 && x < G.rimR - 3) { scored(f, x); return; }
        for (const e of ends) {
          const dx = x - e.x, dy = y - e.y, d = Math.hypot(dx, dy), min = R * 0.55 + 3;
          if (d < min && d > 0) { const nx = dx / d, ny = dy / d, dot = vx * nx + vy * ny; if (dot < 0) { vx -= 1.6 * dot * nx; vy -= 1.6 * dot * ny; blip('bounce'); } x = e.x + nx * min; y = e.y + ny * min; }
        }
        if (x < R) { x = R; vx = Math.abs(vx) * 0.6; } if (x > G.W - R) { x = G.W - R; vx = -Math.abs(vx) * 0.6; }
        if (y < R) { y = R; vy = Math.abs(vy) * 0.5; }
        if (y > G.H - R) { y = G.H - R; if (Math.abs(vy) > 120) blip('bounce'); vy = -Math.abs(vy) * 0.42; vx *= 0.8; if (Math.abs(vy) < 60) rest++; }
      }
      place(x, y, angle + vx * 0.012);
      if (rest > 8 || age > 3.2) { missed(); return; }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
  }
  function scored(f: File, x: number = NaN) {
    const G = geo(); const sx = isNaN(x) ? (G.rimL + G.rimR) / 2 : x;
    queue.shift(); blip('swish');
    hoop.classList.remove('swish'); void hoop.offsetWidth; hoop.classList.add('swish');
    let t0 = -1; const y0 = G.rimY;
    const fall = (now: number) => {
      if (t0 < 0) t0 = now;
      const k = Math.min(1, (now - t0) / (reduce ? 1 : 380));
      ball.style.opacity = String(1 - k);
      place(sx + ((G.rimL + G.rimR) / 2 - sx) * k, y0 + 46 * k, angle, 1 - 0.35 * k);
      if (k < 1 && alive) { raf = requestAnimationFrame(fall); return; }
      ball.classList.remove('is-front'); flying = false; ball.style.opacity = '0';
      send(f);
      if (opt.demoFiles && !queue.length) queue.push(sample());
      setBall();
      requestAnimationFrame(() => { ball.style.transition = 'opacity .25s'; ball.style.opacity = '1'; setTimeout(() => (ball.style.transition = ''), 260); });
      autoNext();
    };
    raf = requestAnimationFrame(fall);
  }
  function missed() {
    flying = false; ball.classList.remove('is-front'); blip('miss');
    foot.textContent = 'Missed! Pull back further or tap the file for a sure shot.'; foot.classList.add('is-miss');
    ball.style.transition = 'transform .35s cubic-bezier(.2,.8,.2,1)'; const G = geo(); place(G.start.x, G.start.y);
    setTimeout(() => (ball.style.transition = ''), 360);
  }
  function sample() { const s = SAMPLES[demoIndex++ % SAMPLES.length]; const f = new File([new Uint8Array(16)], s[0] as string, { type: s[2] as string }); Object.defineProperty(f, 'size', { value: s[1] }); return f; }

  /* ---------- input ---------- */
  function onDown(e: PointerEvent) {
    if (flying || !queue.length || e.button > 0) return;
    drag = { id: e.pointerId, x: e.clientX, y: e.clientY, moved: false };
    ball.setPointerCapture(e.pointerId);
  }
  function onMove(e: PointerEvent) {
    if (!drag || e.pointerId !== drag.id) return;
    const G = geo(); let dx = e.clientX - drag.x, dy = e.clientY - drag.y; const d = Math.hypot(dx, dy);
    if (d > 6) drag.moved = true;
    if (!drag.moved || reduce) return;
    if (d > G.maxPull) { dx *= G.maxPull / d; dy *= G.maxPull / d; }
    place(G.start.x + dx * 0.35, G.start.y + dy * 0.35, dx * 0.15);
    const k = power(); drawDots(-dx * k, -dy * k);
  }
  function onUp(e: PointerEvent) {
    if (!drag || e.pointerId !== drag.id) return;
    const G = geo(); let dx = e.clientX - drag.x, dy = e.clientY - drag.y; const d = Math.hypot(dx, dy), moved = drag.moved;
    drag = null; drawDots(0, 0);
    if (!moved || reduce) return; /* a tap is handled by click */
    if (d < 18) { place(G.start.x, G.start.y); return; }
    if (d > G.maxPull) { dx *= G.maxPull / d; dy *= G.maxPull / d; }
    const k = power(); ball.dataset.dragged = '1'; shoot({ vx: -dx * k, vy: -dy * k });
  }
  function onClick() {
    if (ball.dataset.dragged) { delete ball.dataset.dragged; return; }
    if (flying) return;
    if (!queue.length) { input.click(); return; }
    shoot(null);
  }
  const prevent = (e: DragEvent) => { e.preventDefault(); court.classList.add('is-over'); };
  const leave = (e: DragEvent) => { if (!court.contains(e.relatedTarget as Node)) court.classList.remove('is-over'); };
  const drop = (e: DragEvent) => { e.preventDefault(); court.classList.remove('is-over'); if (e.dataTransfer && e.dataTransfer.files.length) addFiles(e.dataTransfer.files, true); };
  const picked = () => { if (input.files) addFiles(input.files, true); input.value = ''; };
  const browse = () => input.click();
  const toggleSound = () => { soundOn = !soundOn; soundBtn.setAttribute('aria-pressed', String(soundOn)); soundBtn.setAttribute('aria-label', soundOn ? 'Sound effects on' : 'Sound effects off'); };
  const resize = () => { if (!flying) { const G = geo(); place(G.start.x, G.start.y); } };

  ball.addEventListener('pointerdown', onDown); ball.addEventListener('pointermove', onMove); ball.addEventListener('pointerup', onUp); ball.addEventListener('pointercancel', onUp);
  ball.addEventListener('click', onClick);
  court.addEventListener('dragenter', prevent); court.addEventListener('dragover', prevent); court.addEventListener('dragleave', leave); court.addEventListener('drop', drop);
  input.addEventListener('change', picked); $('.su-browse').addEventListener('click', browse); soundBtn.addEventListener('click', toggleSound);
  window.addEventListener('resize', resize);
  if (opt.demoFiles) queue.push(sample());
  setBall();

  return () => { alive = false; cancelAnimationFrame(raf); window.removeEventListener('resize', resize); root.innerHTML = ''; };
}

/* Demo uploader: fake progress so the preview works without a server. */
function fakeUpload(file: File, onProgress: (pct: number) => void): Promise<void> {
  return new Promise((res) => { let p = 0; const t = setInterval(() => { p = Math.min(100, p + 7 + Math.random() * 16); onProgress(p); if (p >= 100) { clearInterval(t); res(); } }, 110); });
}

export function ShootUploader({ courtHeight = 210, dark, ...options }: ShootUploaderOptions & { courtHeight?: number; dark?: boolean }) {
  const ref = useRef<HTMLDivElement>(null);
  const opts = useRef(options);
  opts.current = options;
  useEffect(() => {
    if (!ref.current) return;
    // Callbacks always use the latest props without remounting the court.
    return mountShootUploader(ref.current, {
      ...opts.current,
      upload: (f, p) => (opts.current.upload ? opts.current.upload(f, p) : fakeUpload(f, p)),
      onUploaded: (f) => opts.current.onUploaded?.(f),
    });
  }, []);
  return (
    <>
      <style>{css}</style>
      <div ref={ref} className={`su${dark ? " su--dark" : ""}`} style={{ "--su-h": `${courtHeight}px` } as CSSProperties} />
    </>
  );
}

/* Usage:
   <ShootUploader accept="image/*,application/pdf" maxBytes={10 * 1024 * 1024}
     upload={xhrUpload("/api/upload")} onUploaded={(f) => console.log("uploaded", f.name)} />
*/

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useEffect, useState } from "react";

export type Consent = { necessary: true; analytics: boolean; marketing: boolean; version: number; date: string };

const css = `
.cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;max-width:520px;margin:0 auto;padding:16px;border:1px solid #d8deeb;border-radius:14px;background:#fff;color:#0b1020;box-shadow:0 20px 50px -18px rgba(0,0,0,.45);font:13.5px/1.5 system-ui,sans-serif}
.cc h3{margin:0 0 4px;font-size:15px}.cc p{margin:0;color:#5c627c}
.cc-cats{display:grid;gap:6px;margin-top:12px}
.cc-cat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid #d8deeb;border-radius:10px;cursor:pointer}
.cc-cat span{display:grid}.cc-cat small{color:#5c627c;font-size:12px}
.cc-cat input{appearance:none;flex:none;width:38px;height:22px;margin:0;border-radius:99px;background:#d8deeb;position:relative;cursor:pointer}
.cc-cat input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.cc-cat input:checked{background:#1659f5}.cc-cat input:checked::after{transform:translateX(16px)}
.cc-cat input:disabled{opacity:.55}
.cc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.cc-btn{flex:1 1 120px;height:38px;border:1.5px solid #0b1020;border-radius:10px;background:#0b1020;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.cc-link{padding:0 4px;border:0;background:none;color:#1659f5;font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cc-reopen{position:fixed;left:16px;bottom:16px;z-index:1000;height:32px;padding:0 12px;border:1px solid #d8deeb;border-radius:99px;background:#fff;color:#0b1020;font:600 12.5px system-ui,sans-serif;cursor:pointer}`;

/** Reads the saved choice (null if none or an older version). */
export function readConsent(storageKey = "cookie-consent", version = 1): Consent | null {
  try {
    const v = JSON.parse(localStorage.getItem(storageKey) || "null");
    return v && v.version === version ? v : null;
  } catch { return null; }
}

export function CookieConsent({
  storageKey = "cookie-consent",
  version = 1,
  onChange,
  policyUrl,
}: {
  storageKey?: string;
  /** Bump it when your categories change to ask everyone again. */
  version?: number;
  /** Load analytics/marketing scripts here, only for allowed categories. */
  onChange?: (consent: Consent) => void;
  policyUrl?: string;
}) {
  const [open, setOpen] = useState(false);
  const [custom, setCustom] = useState(false);
  const [choice, setChoice] = useState({ analytics: false, marketing: false });

  useEffect(() => {
    const saved = readConsent(storageKey, version);
    if (saved) { setChoice({ analytics: saved.analytics, marketing: saved.marketing }); onChange?.(saved); }
    else setOpen(true);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [storageKey, version]);

  const save = (c: { analytics: boolean; marketing: boolean }) => {
    const v: Consent = { necessary: true, ...c, version, date: new Date().toISOString() };
    try { localStorage.setItem(storageKey, JSON.stringify(v)); } catch { /* private mode: keep it for this visit */ }
    setChoice(c); setOpen(false); setCustom(false); onChange?.(v);
  };

  if (!open) return <><style>{css}</style><button type="button" className="cc-reopen" onClick={() => { setOpen(true); setCustom(true); }}>Cookie settings</button></>;

  return (
    <section className="cc" role="dialog" aria-labelledby="cc-title" aria-describedby="cc-text">
      <style>{css}</style>
      <h3 id="cc-title">We use cookies</h3>
      <p id="cc-text">
        Some are needed for the site to work. With your OK we also use analytics to improve it and marketing cookies to measure ads. You can change this any time.
        {policyUrl && <> <a href={policyUrl}>Cookie policy</a></>}
      </p>
      {custom && (
        <div className="cc-cats">
          <label className="cc-cat"><span><b>Strictly necessary</b><small>Sign-in, security, your cookie choice. Always on.</small></span><input type="checkbox" checked disabled readOnly /></label>
          <label className="cc-cat"><span><b>Analytics</b><small>Anonymous usage stats to improve the site.</small></span>
            <input type="checkbox" checked={choice.analytics} onChange={(e) => setChoice({ ...choice, analytics: e.target.checked })} /></label>
          <label className="cc-cat"><span><b>Marketing</b><small>Measure ads and show relevant offers.</small></span>
            <input type="checkbox" checked={choice.marketing} onChange={(e) => setChoice({ ...choice, marketing: e.target.checked })} /></label>
        </div>
      )}
      <div className="cc-actions">
        <button type="button" className="cc-btn" onClick={() => save({ analytics: false, marketing: false })}>Reject all</button>
        <button type="button" className="cc-btn" onClick={() => save({ analytics: true, marketing: true })}>Accept all</button>
        <button type="button" className="cc-link" aria-expanded={custom} onClick={() => (custom ? save(choice) : setCustom(true))}>
          {custom ? "Save choices" : "Customise"}
        </button>
      </div>
    </section>
  );
}

/* Usage (in your root layout):
   <CookieConsent policyUrl="/privacy" onChange={(c) => { if (c.analytics) loadAnalytics(); }} />
*/

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useId, useMemo, useState } from "react";

const css = `
.ti{position:relative;width:min(400px,100%);color:#0b1020;font:14px/1.5 system-ui,sans-serif}
.ti-label{display:flex;justify-content:space-between;margin-bottom:6px;font-weight:600}
.ti-label span{color:#5c627c;font-weight:500;font-size:12.5px}
.ti-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:46px;padding:6px 8px;border:1.5px solid #d8deeb;border-radius:12px;background:#fff;cursor:text}
.ti-box:focus-within{border-color:#1659f5;box-shadow:0 0 0 4px rgba(22,89,245,.18)}
.ti-chips{display:contents;list-style:none;margin:0;padding:0}
.ti-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 10px;border-radius:99px;background:rgba(22,89,245,.12);font-size:13px;font-weight:600}
.ti-chip button{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:none;color:#5c627c;font-size:15px;cursor:pointer}
.ti-chip button:hover,.ti-chip button:focus-visible{background:rgba(11,16,32,.12);color:#0b1020;outline:none}
.ti-box input{flex:1;min-width:110px;height:30px;border:0;background:none;color:inherit;font:inherit;outline:none}
.ti-list{position:absolute;left:0;right:0;z-index:5;margin:6px 0 0;padding:5px;list-style:none;max-height:200px;overflow:auto;border:1px solid #d8deeb;border-radius:12px;background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
.ti-opt{padding:7px 10px;border-radius:8px;cursor:pointer}
.ti-opt[aria-selected=true]{background:rgba(22,89,245,.12)}
.ti-opt mark{background:none;color:#1659f5;font-weight:700}
.ti-help{margin:6px 0 0;color:#5c627c;font-size:12.5px;min-height:18px}`;

type Opt = { label: string; isNew?: boolean };

export function TagInput({
  label = "Tags",
  suggestions = [],
  value,
  defaultValue = [],
  onChange,
  max = 10,
  allowNew = true,
  placeholder = "Add a tag...",
}: {
  label?: string;
  suggestions?: string[];
  value?: string[];
  defaultValue?: string[];
  onChange?: (tags: string[]) => void;
  max?: number;
  allowNew?: boolean;
  placeholder?: string;
}) {
  const id = useId();
  const [inner, setInner] = useState(defaultValue);
  const tags = value ?? inner;
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const [help, setHelp] = useState("Press Enter or comma to add. Backspace removes the last one.");
  const has = (t: string) => tags.some((x) => x.toLowerCase() === t.toLowerCase());
  const full = tags.length >= max;

  const set = (next: string[]) => { if (value === undefined) setInner(next); onChange?.(next); };

  const opts: Opt[] = useMemo(() => {
    const q = query.trim();
    if (!q || full) return [];
    const list: Opt[] = suggestions.filter((s) => s.toLowerCase().includes(q.toLowerCase()) && !has(s)).slice(0, 6).map((label) => ({ label }));
    if (allowNew && !has(q) && !suggestions.some((s) => s.toLowerCase() === q.toLowerCase())) list.push({ label: q, isNew: true });
    return list;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [query, suggestions, tags, full, allowNew]);
  const shown = open && opts.length > 0;
  const current = Math.min(active, Math.max(opts.length - 1, 0));

  const add = (raw: string) => {
    const t = raw.trim().replace(/,+$/, "").slice(0, 30);
    if (!t) return;
    if (full) return setHelp(`You can add up to ${max}.`);
    if (has(t)) { setHelp(`${t} is already added.`); setQuery(""); return; }
    if (!allowNew && !suggestions.some((s) => s.toLowerCase() === t.toLowerCase())) return setHelp("Pick one of the suggestions.");
    set([...tags, t]); setQuery(""); setActive(0); setHelp(`${t} added.`);
  };
  const remove = (i: number) => { setHelp(`${tags[i]} removed.`); set(tags.filter((_, k) => k !== i)); };

  return (
    <div className="ti">
      <style>{css}</style>
      <label className="ti-label" htmlFor={id}>{label} <span>{tags.length}/{max}</span></label>
      <div className="ti-box">
        <ul className="ti-chips" aria-label={`Selected ${label.toLowerCase()}`}>
          {tags.map((t, i) => (
            <li className="ti-chip" key={t}>{t}<button type="button" aria-label={`Remove ${t}`} onClick={() => remove(i)}>×</button></li>
          ))}
        </ul>
        <input
          id={id} value={query} placeholder={full ? "" : placeholder} autoComplete="off"
          role="combobox" aria-expanded={shown} aria-controls={`${id}-list`} aria-autocomplete="list"
          aria-activedescendant={shown ? `${id}-o${current}` : undefined}
          onFocus={() => setOpen(true)} onBlur={() => setOpen(false)}
          onChange={(e) => {
            const v = e.target.value;
            if (v.includes(",")) { const parts = v.split(","); parts.slice(0, -1).forEach(add); setQuery(parts[parts.length - 1]); }
            else setQuery(v);
            setActive(0); setOpen(true);
          }}
          onKeyDown={(e) => {
            if (e.key === "ArrowDown" && shown) { e.preventDefault(); setActive((current + 1) % opts.length); }
            else if (e.key === "ArrowUp" && shown) { e.preventDefault(); setActive((current - 1 + opts.length) % opts.length); }
            else if (e.key === "Enter") { e.preventDefault(); add(shown ? opts[current].label : query); }
            else if (e.key === "Escape") setOpen(false);
            else if (e.key === "Backspace" && !query && tags.length) remove(tags.length - 1);
          }}
        />
      </div>
      {shown && (
        <ul className="ti-list" id={`${id}-list`} role="listbox" aria-label="Suggestions">
          {opts.map((o, i) => (
            <li key={o.label + i} id={`${id}-o${i}`} role="option" aria-selected={i === current} className="ti-opt"
              onMouseDown={(e) => { e.preventDefault(); add(o.label); }} onMouseMove={() => setActive(i)}>
              {o.isNew ? `Add “${o.label}”` : o.label}
            </li>
          ))}
        </ul>
      )}
      <p className="ti-help" aria-live="polite">{help}</p>
    </div>
  );
}

/* Usage:
   <TagInput label="Skills" max={6} suggestions={["React", "Python", "SQL"]} defaultValue={["React"]} onChange={setSkills} />
*/

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useId, useMemo, useState } from "react";

export type Rule = { id: string; label: string; test: (p: string) => boolean };

const COMMON = ["password", "123456", "qwerty", "letmein", "welcome", "iloveyou", "admin", "monkey", "dragon", "football", "abc123", "sunshine", "princess", "passw0rd"];
const defaultRules = (min: number): Rule[] => [
  { id: "len", label: `At least ${min} characters`, test: (p) => p.length >= min },
  { id: "case", label: "Upper and lower case letters", test: (p) => /[a-z]/.test(p) && /[A-Z]/.test(p) },
  { id: "num", label: "A number", test: (p) => /\d/.test(p) },
  { id: "sym", label: "A symbol, like ! ? # or @", test: (p) => /[^A-Za-z0-9]/.test(p) },
];
const WORDS = ["", "Too weak", "Fair", "Good", "Strong"];
const COLORS = ["", "#d93838", "#e5a50a", "#3a8dde", "#18a978"];

/** 0 (empty) to 4 (strong). A guide only: decide what you accept on the server. */
export function passwordScore(p: string, rules: Rule[], min: number) {
  if (!p) return 0;
  const met = rules.filter((r) => r.test(p)).length;
  const low = p.toLowerCase().replace(/[^a-z0-9]/g, "");
  if (COMMON.some((c) => low.includes(c)) || /(.)\1{3,}/.test(p)) return 1;
  let s = met <= 1 ? 1 : met === 2 ? 2 : met === 3 ? 3 : 4;
  if (p.length < min) s = Math.min(s, 2);
  if (p.length >= 16 && met >= 2) s = Math.max(s, 3);
  return s;
}

const css = `
.pw{width:min(360px,100%);color:#0b1020;font:14px/1.5 system-ui,sans-serif}
.pw-label{display:block;margin-bottom:6px;font-weight:600}
.pw-field{display:flex;align-items:center;border:1.5px solid #d8deeb;border-radius:12px;background:#fff}
.pw-field:focus-within{border-color:#1659f5;box-shadow:0 0 0 4px rgba(22,89,245,.18)}
.pw-field input{flex:1;min-width:0;height:44px;padding:0 14px;border:0;background:none;color:inherit;font:inherit;font-size:15px;outline:none}
.pw-eye{display:grid;place-items:center;width:40px;height:40px;margin-right:2px;border:0;border-radius:9px;background:none;color:#5c627c;cursor:pointer}
.pw-eye:hover,.pw-eye:focus-visible{color:#0b1020;background:rgba(11,16,32,.07);outline:none}
.pw-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px}
.pw-meter i{height:5px;border-radius:99px;background:#e3e7f0;transition:background .25s}
.pw-word{margin:6px 0 8px;min-height:18px;color:#5c627c;font-size:12.5px;font-weight:600}
.pw-rules{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;color:#5c627c}
.pw-rules li{display:flex;align-items:center;gap:8px}
.pw-dot{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #d8deeb;display:grid;place-items:center}
.pw-rules li.ok{color:#0b1020}.pw-rules li.ok .pw-dot{border:0;background:#18a978}`;

export function PasswordStrengthField({
  label = "Create a password",
  minLength = 10,
  rules,
  name = "password",
  onChange,
}: {
  label?: string;
  minLength?: number;
  rules?: Rule[];
  name?: string;
  onChange?: (value: string, score: number) => void;
}) {
  const id = useId();
  const [value, setValue] = useState("");
  const [show, setShow] = useState(false);
  const list = useMemo(() => rules ?? defaultRules(minLength), [rules, minLength]);
  const s = passwordScore(value, list, minLength);
  const low = value.toLowerCase().replace(/[^a-z0-9]/g, "");
  const hint = !value ? `Use at least ${minLength} characters`
    : COMMON.some((c) => low.includes(c)) ? "Too weak: this is a very common password"
    : /(.)\1{3,}/.test(value) ? "Too weak: avoid repeated characters"
    : `Strength: ${WORDS[s]}`;

  return (
    <div className="pw">
      <style>{css}</style>
      <label className="pw-label" htmlFor={id}>{label}</label>
      <div className="pw-field">
        <input id={id} name={name} type={show ? "text" : "password"} autoComplete="new-password" spellCheck={false}
          aria-describedby={`${id}-word ${id}-rules`} value={value}
          onChange={(e) => { setValue(e.target.value); onChange?.(e.target.value, passwordScore(e.target.value, list, minLength)); }} />
        <button type="button" className="pw-eye" aria-pressed={show} aria-label={show ? "Hide password" : "Show password"} onClick={() => setShow((v) => !v)}>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" />{!show && <path d="M4 4l16 16" />}</svg>
        </button>
      </div>
      <div className="pw-meter" aria-hidden="true">
        {[1, 2, 3, 4].map((n) => <i key={n} style={{ background: s >= n ? COLORS[s] : undefined }} />)}
      </div>
      <p className="pw-word" id={`${id}-word`} aria-live="polite" style={{ color: s === 1 ? COLORS[1] : s === 4 ? "#13915f" : undefined }}>{hint}</p>
      <ul className="pw-rules" id={`${id}-rules`}>
        {list.map((r) => {
          const ok = r.test(value);
          return (
            <li key={r.id} className={ok ? "ok" : undefined}>
              <span className="pw-dot" aria-hidden="true">{ok && <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 12.5l4 4 8-9" /></svg>}</span>
              {r.label}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

/* Usage:
   <PasswordStrengthField minLength={12} onChange={(value, score) => setCanSubmit(score >= 3)} />
*/

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useEffect, useRef, useState } from "react";

const css = `
.otp{width:min(380px,100%);padding:22px;border:1px solid #d8deeb;border-radius:16px;background:#fff;text-align:center;color:#0b1020;font:14px/1.5 system-ui,sans-serif}
.otp-boxes{display:flex;justify-content:center;gap:8px}
.otp-boxes input{width:44px;height:52px;padding:0;border:1.5px solid #d8deeb;border-radius:12px;background:transparent;color:inherit;font:600 22px/1 ui-monospace,monospace;text-align:center;caret-color:#1659f5}
.otp-boxes input:focus{outline:none;border-color:#1659f5;box-shadow:0 0 0 4px rgba(22,89,245,.2)}
.otp-boxes input:nth-child(3){margin-right:10px}
.otp.is-bad input{border-color:#d93838}.otp.is-bad .otp-boxes{animation:otp-shake .4s}
.otp.is-ok input{border-color:#18a978;background:rgba(24,169,120,.1)}
@keyframes otp-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.otp.is-bad .otp-boxes{animation:none}}
.otp-msg{min-height:20px;margin:10px 0 0;font-size:13px;font-weight:600}
.otp.is-bad .otp-msg{color:#d93838}.otp.is-ok .otp-msg{color:#13915f}
.otp-resend{margin:6px 0 0;color:#5c627c;font-size:13px}
.otp-resend button{padding:0;border:0;background:none;color:#1659f5;font:inherit;font-weight:600;cursor:pointer}
.otp-resend button:disabled{color:#5c627c;cursor:default}`;

export function VerificationCodeInput({
  length = 6,
  verify,
  onVerified,
  onResend,
  resendAfter = 30,
}: {
  length?: number;
  /** Check the code with your API. Resolve true when it is right. */
  verify: (code: string) => Promise<boolean>;
  onVerified?: (code: string) => void;
  onResend?: () => void;
  resendAfter?: number;
}) {
  const [digits, setDigits] = useState<string[]>(() => Array(length).fill(""));
  const [state, setState] = useState<"idle" | "checking" | "ok" | "bad">("idle");
  const [msg, setMsg] = useState("");
  const [left, setLeft] = useState(resendAfter);
  const refs = useRef<(HTMLInputElement | null)[]>([]);

  useEffect(() => {
    if (left <= 0) return;
    const t = setTimeout(() => setLeft((s) => s - 1), 1000);
    return () => clearTimeout(t);
  }, [left]);

  const focus = (i: number) => refs.current[Math.max(0, Math.min(length - 1, i))]?.focus();

  const update = (next: string[]) => {
    setDigits(next);
    if (state === "bad") { setState("idle"); setMsg(""); }
    const code = next.join("");
    if (code.length === length && next.every(Boolean)) {
      setState("checking"); setMsg("Checking…");
      verify(code)
        .then((ok) => {
          if (ok) { setState("ok"); setMsg("Verified."); onVerified?.(code); }
          else { setState("bad"); setMsg("That code is not right. Try again."); setDigits(Array(length).fill("")); focus(0); }
        })
        .catch(() => { setState("bad"); setMsg("Could not check the code. Try again."); });
    }
  };

  const fillFrom = (i: number, text: string) => {
    const d = text.replace(/\D/g, "").slice(0, length - i);
    if (!d) return;
    const next = [...digits];
    d.split("").forEach((c, k) => (next[i + k] = c));
    update(next);
    focus(i + d.length);
  };

  return (
    <div className={`otp${state === "bad" ? " is-bad" : state === "ok" ? " is-ok" : ""}`}>
      <style>{css}</style>
      <div className="otp-boxes" role="group" aria-label="Verification code">
        {digits.map((v, i) => (
          <input
            key={i}
            ref={(el) => { refs.current[i] = el; }}
            value={v}
            inputMode="numeric"
            autoComplete={i === 0 ? "one-time-code" : "off"}
            maxLength={length}
            aria-label={`Digit ${i + 1} of ${length}`}
            disabled={state === "checking"}
            readOnly={state === "ok"}
            onFocus={(e) => e.target.select()}
            onChange={(e) => {
              const d = e.target.value.replace(/\D/g, "");
              if (d.length > 1) return fillFrom(i, d);
              const next = [...digits]; next[i] = d; update(next);
              if (d) focus(i + 1);
            }}
            onKeyDown={(e) => {
              if (e.key === "Backspace" && !digits[i] && i > 0) { e.preventDefault(); const next = [...digits]; next[i - 1] = ""; update(next); focus(i - 1); }
              else if (e.key === "ArrowLeft") { e.preventDefault(); focus(i - 1); }
              else if (e.key === "ArrowRight") { e.preventDefault(); focus(i + 1); }
            }}
            onPaste={(e) => { e.preventDefault(); fillFrom(i, e.clipboardData.getData("text")); }}
          />
        ))}
      </div>
      <p className="otp-msg" role="status" aria-live="polite">{msg}</p>
      <p className="otp-resend">
        Didn't get it?{" "}
        <button type="button" disabled={left > 0} onClick={() => { onResend?.(); setLeft(resendAfter); setMsg("New code sent."); setState("idle"); }}>
          {left > 0 ? `Resend in ${left}s` : "Resend code"}
        </button>
      </p>
    </div>
  );
}

/* Usage:
   <VerificationCodeInput verify={async (code) => (await fetch("/api/verify", { method: "POST", body: JSON.stringify({ code }) })).ok}
     onVerified={() => router.push("/welcome")} onResend={() => fetch("/api/resend", { method: "POST" })} />
*/

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useMemo, useState, type ReactNode } from "react";

export type Column<T> = {
  key: keyof T & string;
  label: string;
  numeric?: boolean;
  /** Custom cell. Sorting still uses the raw value. */
  render?: (row: T) => ReactNode;
};

const css = `
.dt{width:100%;background:#fff;border:1px solid #d8deeb;border-radius:14px;overflow:hidden;font:13px/1.5 system-ui,sans-serif;color:#0b1020}
.dt-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #d8deeb}
.dt-search{flex:1;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #d8deeb;border-radius:9px}
.dt-search:focus-within{border-color:#1659f5;box-shadow:0 0 0 3px rgba(22,89,245,.2)}
.dt-search input{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;outline:none}
.dt-count{color:#5c627c;font-size:12px;white-space:nowrap}
.dt-scroll{overflow-x:auto}
.dt table{width:100%;border-collapse:collapse;min-width:440px}
.dt th,.dt td{padding:8px 12px;text-align:left;white-space:nowrap}
.dt th{padding:0;border-bottom:1px solid #d8deeb;font-size:11.5px;font-weight:600;color:#5c627c}
.dt th button{display:flex;align-items:center;gap:4px;width:100%;padding:8px 12px;border:0;background:none;color:inherit;font:inherit;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.dt th button:hover,.dt th button:focus-visible{color:#0b1020;outline:none}
.dt th button:focus-visible{box-shadow:inset 0 0 0 2px #1659f5}
.dt th[aria-sort] button{color:#0b1020}
.dt .arw{opacity:.35;font-size:10px}.dt th[aria-sort] .arw{opacity:1;color:#1659f5}
.dt .num{text-align:right}.dt th.num button{justify-content:flex-end}
.dt td{border-bottom:1px solid #eef1f7}
.dt tbody tr:hover{background:rgba(22,89,245,.05)}
.dt-empty td{padding:26px;text-align:center;color:#5c627c}
.dt-pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:8px 12px;color:#5c627c;font-size:12px}
.dt-pager button{width:28px;height:28px;border:1px solid #d8deeb;border-radius:8px;background:none;font-size:16px;cursor:pointer}
.dt-pager button:disabled{opacity:.35;cursor:default}`;

export function DataTable<T extends Record<string, unknown>>({
  rows,
  columns,
  pageSize = 10,
  initialSort,
  searchLabel = "Search",
}: {
  rows: T[];
  columns: Column<T>[];
  pageSize?: number;
  initialSort?: { key: keyof T & string; dir: 1 | -1 };
  searchLabel?: string;
}) {
  const [sort, setSort] = useState(initialSort ?? { key: columns[0].key, dir: 1 as 1 | -1 });
  const [query, setQuery] = useState("");
  const [page, setPage] = useState(0);

  const list = useMemo(() => {
    const s = query.trim().toLowerCase();
    return rows
      .filter((r) => !s || Object.values(r).some((v) => String(v ?? "").toLowerCase().includes(s)))
      .sort((a, b) => {
        const x = a[sort.key], y = b[sort.key];
        const c = typeof x === "number" && typeof y === "number" ? x - y : String(x ?? "").localeCompare(String(y ?? ""), undefined, { numeric: true });
        return c * sort.dir;
      });
  }, [rows, query, sort]);

  const pages = Math.max(1, Math.ceil(list.length / pageSize));
  const current = Math.min(page, pages - 1);
  const from = current * pageSize;
  const shown = list.slice(from, from + pageSize);

  const toggle = (c: Column<T>) => {
    setSort((s) => (s.key === c.key ? { key: c.key, dir: (s.dir * -1) as 1 | -1 } : { key: c.key, dir: c.numeric ? -1 : 1 }));
    setPage(0);
  };

  return (
    <div className="dt">
      <style>{css}</style>
      <div className="dt-bar">
        <label className="dt-search">
          <input type="search" placeholder={searchLabel} aria-label={searchLabel} value={query} onChange={(e) => { setQuery(e.target.value); setPage(0); }} />
        </label>
        <span className="dt-count" aria-live="polite">{list.length} of {rows.length}</span>
      </div>
      <div className="dt-scroll">
        <table>
          <thead>
            <tr>
              {columns.map((c) => {
                const on = sort.key === c.key;
                return (
                  <th key={c.key} className={c.numeric ? "num" : undefined} aria-sort={on ? (sort.dir > 0 ? "ascending" : "descending") : undefined}>
                    <button type="button" onClick={() => toggle(c)}>
                      {c.label}<span className="arw" aria-hidden="true">{on ? (sort.dir > 0 ? "▲" : "▼") : "↕"}</span>
                    </button>
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {shown.length ? shown.map((r, i) => (
              <tr key={from + i}>
                {columns.map((c) => <td key={c.key} className={c.numeric ? "num" : undefined}>{c.render ? c.render(r) : String(r[c.key] ?? "")}</td>)}
              </tr>
            )) : (
              <tr className="dt-empty"><td colSpan={columns.length}>No rows match “{query.trim()}”</td></tr>
            )}
          </tbody>
        </table>
      </div>
      <div className="dt-pager">
        <button type="button" aria-label="Previous page" disabled={current === 0} onClick={() => setPage(current - 1)}>‹</button>
        <span>{list.length ? `${from + 1}–${from + shown.length} of ${list.length}` : "0 of 0"}</span>
        <button type="button" aria-label="Next page" disabled={current >= pages - 1} onClick={() => setPage(current + 1)}>›</button>
      </div>
    </div>
  );
}

/* Usage:
   <DataTable rows={customers} pageSize={8} initialSort={{ key: "mrr", dir: -1 }}
     columns={[{ key: "name", label: "Customer" }, { key: "mrr", label: "MRR", numeric: true, render: (r) => `$${r.mrr}` }]} />
*/

/*
 * MIT License
 *
 * Copyright (c) 2026 OwnlyPlans
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
"use client";
import { useCallback, useId, useRef, useState } from "react";

/** Upload one file. Call onProgress with 0-100; resolve when done, reject on failure. */
export type Uploader = (file: File, onProgress: (pct: number) => void) => Promise<void>;

/** Default uploader: POSTs each file as multipart form data to `url`, with real progress. */
export const xhrUploader = (url: string, field = "file"): Uploader => (file, onProgress) =>
  new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    xhr.upload.onprogress = (e) => e.lengthComputable && onProgress((e.loaded / e.total) * 100);
    xhr.onload = () => (xhr.status < 300 ? resolve() : reject(new Error(`Upload failed (${xhr.status})`)));
    xhr.onerror = () => reject(new Error("Network error"));
    const body = new FormData();
    body.append(field, file);
    xhr.send(body);
  });

type Row = { id: number; file: File; pct: number; state: "uploading" | "done" | "error"; note: string };

const css = `
.dz-wrap{width:min(420px,100%);font:14px/1.5 system-ui,sans-serif;color:#0b1020}
.dz{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;border:2px dashed #d8deeb;border-radius:16px;background:#fff;text-align:center;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.dz:hover,.dz:focus-visible{border-color:#1659f5;outline:none}
.dz:focus-visible{box-shadow:0 0 0 4px rgba(22,89,245,.22)}
.dz.is-over{border-color:#1659f5;background:rgba(22,89,245,.06);transform:scale(1.01)}
.dz input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dz svg{width:30px;height:30px;fill:none;stroke:#1659f5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dz-title{font-weight:600}.dz-title u{color:#1659f5;text-underline-offset:3px}
.dz-rules{color:#5c627c;font-size:12.5px}
.dz-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.dz-file{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:9px 12px;border:1px solid #d8deeb;border-radius:12px;background:#fff}
.dz-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.dz-meta{grid-column:1;color:#5c627c;font-size:12px}
.is-error .dz-meta{color:#d93838}.is-done .dz-meta{color:#13915f}
.dz-bar{grid-column:1/-1;height:5px;border-radius:99px;background:#e6eaf3;overflow:hidden}
.dz-bar i{display:block;height:100%;border-radius:inherit;background:#1659f5;transition:width .2s}
.is-done .dz-bar i{background:#18a978}
.dz-x{grid-row:1/3;grid-column:2;width:28px;height:28px;border:0;border-radius:8px;background:none;color:#5c627c;font-size:18px;cursor:pointer}
.dz-x:hover,.dz-x:focus-visible{background:rgba(11,16,32,.08);color:#0b1020;outline:none}
.dz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}`;

const fmt = (b: number) => (b < 1024 ? `${b} B` : b < 1048576 ? `${(b / 1024).toFixed(0)} KB` : `${(b / 1048576).toFixed(1)} MB`);

export function FileDropZone({
  upload,
  accept = "image/*,application/pdf",
  maxBytes = 5 * 1024 * 1024,
  rules = "Images or PDF, up to 5 MB each",
  onUploaded,
}: {
  upload: Uploader;
  accept?: string;
  maxBytes?: number;
  rules?: string;
  onUploaded?: (file: File) => void;
}) {
  const [rows, setRows] = useState<Row[]>([]);
  const [over, setOver] = useState(false);
  const [status, setStatus] = useState("");
  const input = useRef<HTMLInputElement>(null);
  const nextId = useRef(0);
  const rulesId = useId();

  const allowed = useCallback(
    (f: File) =>
      accept.split(",").map((a) => a.trim()).some((a) =>
        a.endsWith("/*") ? f.type.startsWith(a.slice(0, -1)) : a.startsWith(".") ? f.name.toLowerCase().endsWith(a.toLowerCase()) : f.type === a,
      ),
    [accept],
  );

  const patch = (id: number, p: Partial<Row>) => setRows((rs) => rs.map((r) => (r.id === id ? { ...r, ...p } : r)));

  const add = (files: FileList | File[]) => {
    let ok = 0, bad = 0;
    const fresh: Row[] = [...files].map((file) => {
      const id = nextId.current++;
      const note = !allowed(file) ? "File type not allowed" : file.size > maxBytes ? `Too large (${fmt(file.size)})` : "";
      if (note) { bad++; return { id, file, pct: 0, state: "error", note }; }
      ok++;
      upload(file, (pct) => patch(id, { pct }))
        .then(() => { patch(id, { pct: 100, state: "done", note: "uploaded" }); setStatus(`${file.name} uploaded`); onUploaded?.(file); })
        .catch((e: Error) => { patch(id, { state: "error", note: e.message }); setStatus(`${file.name} failed`); });
      return { id, file, pct: 0, state: "uploading", note: "uploading…" };
    });
    setRows((rs) => [...fresh, ...rs]);
    setStatus(`${ok ? `${ok} file${ok > 1 ? "s" : ""} uploading. ` : ""}${bad ? `${bad} refused.` : ""}`);
  };

  return (
    <div className="dz-wrap">
      <style>{css}</style>
      <label
        className={`dz${over ? " is-over" : ""}`}
        tabIndex={0}
        aria-describedby={rulesId}
        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); input.current?.click(); } }}
        onDragEnter={(e) => { e.preventDefault(); setOver(true); }}
        onDragOver={(e) => { e.preventDefault(); setOver(true); }}
        onDragLeave={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setOver(false); }}
        onDrop={(e) => { e.preventDefault(); setOver(false); if (e.dataTransfer.files.length) add(e.dataTransfer.files); }}
      >
        <input ref={input} type="file" multiple accept={accept} onChange={(e) => { if (e.target.files) add(e.target.files); e.target.value = ""; }} />
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V4m0 0-4.5 4.5M12 4l4.5 4.5" /><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" /></svg>
        <span className="dz-title">Drop files here or <u>browse</u></span>
        <span className="dz-rules" id={rulesId}>{rules}</span>
      </label>
      <ul className="dz-list" aria-label="Files">
        {rows.map((r) => (
          <li key={r.id} className={`dz-file${r.state === "error" ? " is-error" : r.state === "done" ? " is-done" : ""}`}>
            <span className="dz-name" title={r.file.name}>{r.file.name}</span>
            <button className="dz-x" type="button" aria-label={`Remove ${r.file.name}`}
              onClick={() => { setRows((rs) => rs.filter((x) => x.id !== r.id)); setStatus(`${r.file.name} removed`); }}>×</button>
            <span className="dz-meta">{r.state === "error" ? r.note : `${fmt(r.file.size)} · ${r.note}`}</span>
            {r.state !== "error" && (
              <span className="dz-bar" role="progressbar" aria-label="Upload progress" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(r.pct)}>
                <i style={{ width: `${r.pct}%` }} />
              </span>
            )}
          </li>
        ))}
      </ul>
      <p className="dz-sr" aria-live="polite">{status}</p>
    </div>
  );
}

/* Usage:
   <FileDropZone upload={xhrUploader("/api/upload")} onUploaded={(f) => console.log("done", f.name)} />
*/