1import{r as o,j as e,L as l,A as i}from"./index-DNidg_Qc.js";import{D as n,C as m,a as c}from"./DemoVideo-CwAl5Odk.js";import{d,T as x}from"./tool-demos-DgraiMJb.js";import"./dialog-B1BXKzKU.js";import"./index-D324aKeF.js";import"./index-Bk7P141l.js";function j(){const[r,a]=o.useState(null);return e.jsxs("div",{className:"px-4 sm:px-6 lg:px-8 pt-4 pb-10 max-w-6xl mx-auto",children:[e.jsxs("header",{className:"mb-6",children:[e.jsx("h1",{className:"text-2xl md:text-3xl font-bold tracking-tight text-foreground",style:{fontFamily:"'Space Grotesk', Inter, sans-serif",letterSpacing:"-0.02em"},children:"How to use each tool"}),e.jsx("p",{className:"mt-2 text-sm md:text-base text-muted-foreground max-w-2xl",children:"A one-minute narrated walkthrough of every tool, in the same order as the menu on the left. Sound on."})]}),d.map(s=>e.jsxs("section",{className:"mb-8",children:[e.jsx("p",{className:"text-[11px] font-semibold text-muted-foreground uppercase tracking-widest mb-3",children:s}),e.jsx("ul",{className:"grid gap-5 sm:grid-cols-2 lg:grid-cols-3",children:x.filter(t=>t.section===s).map(t=>e.jsxs("li",{className:"rounded-2xl border border-border bg-card shadow-sm overflow-hidden flex flex-col",children:[e.jsxs("button",{type:"button",onClick:()=>a(t),className:"group relative aspect-video bg-muted text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring","aria-label":`Play the ${t.title} walkthrough, ${t.duration}`,children:[e.jsx(n,{id:t.youtubeId,className:"absolute inset-0 h-full w-full object-cover"}),e.jsx("span",{className:"absolute inset-0 grid place-items-center bg-black/0 group-hover:bg-black/10 transition",children:e.jsx(m,{className:"size-12 text-white drop-shadow group-hover:scale-105 transition","aria-hidden":!0})}),e.jsx("span",{className:"absolute bottom-2 right-2 rounded bg-black/70 px-1.5 py-0.5 text-[11px] font-medium text-white tabular-nums",children:t.duration})]}),e.jsxs("div",{className:"p-4 flex items-center justify-between gap-3",children:[e.jsx("p",{className:"text-base font-semibold text-card-foreground truncate",children:t.title}),e.jsxs(l,{to:t.route,className:"inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline shrink-0",children:["Open ",e.jsx(i,{className:"size-3.5","aria-hidden":!0})]})]})]},t.key))})]},s)),e.jsx(c,{demo:r,onClose:()=>a(null)})]})}export{j as component};
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.