"use client";

/**
 * Design scaffolds — styled React mockups showing what each UI library
 * looks like for a given surface. Used in the Design page preview area.
 *
 * Each scaffold is rendered at its natural size inside a scaled container,
 * giving the user a realistic feel for the library's visual language.
 */

// ---------------------------------------------------------------------------
// Shared mock data
// ---------------------------------------------------------------------------

const NAV_ITEMS = ["Dashboard", "Projects", "Analytics", "Settings"];
const TABLE_ROWS = [
  { name: "Alice Martin", email: "alice@co.com", status: "Active", date: "Jan 12" },
  { name: "Ben Walsh", email: "ben@co.com", status: "Pending", date: "Jan 14" },
  { name: "Clara Kim", email: "clara@co.com", status: "Active", date: "Jan 15" },
  { name: "David Osei", email: "david@co.com", status: "Inactive", date: "Jan 16" },
];

// ---------------------------------------------------------------------------
// WEB APP scaffolds
// ---------------------------------------------------------------------------

export function WebAppShadcn() {
  return (
    <div className="flex h-full bg-white font-sans text-sm">
      {/* Sidebar */}
      <div className="w-48 border-r flex flex-col py-4 px-3 gap-1 bg-white">
        <div className="flex items-center gap-2 px-2 mb-4">
          <div className="w-6 h-6 rounded bg-zinc-900" />
          <span className="font-semibold text-zinc-900 text-xs">Acme Inc</span>
        </div>
        {NAV_ITEMS.map((item, i) => (
          <div key={item} className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-xs cursor-pointer ${i === 0 ? "bg-zinc-100 text-zinc-900 font-medium" : "text-zinc-500 hover:bg-zinc-50"}`}>
            <div className="w-3.5 h-3.5 rounded-sm bg-zinc-300" />
            {item}
          </div>
        ))}
      </div>
      {/* Main */}
      <div className="flex-1 flex flex-col">
        <div className="h-12 border-b flex items-center justify-between px-5">
          <span className="font-semibold text-zinc-900 text-sm">Dashboard</span>
          <div className="flex items-center gap-2">
            <div className="h-7 px-3 rounded-md border border-zinc-200 text-[11px] flex items-center text-zinc-600">Export</div>
            <div className="h-7 px-3 rounded-md bg-zinc-900 text-[11px] flex items-center text-white">New project</div>
          </div>
        </div>
        <div className="flex-1 p-5 bg-zinc-50">
          <div className="grid grid-cols-3 gap-3 mb-4">
            {["Total Revenue", "Active Users", "Conversions"].map((label, i) => (
              <div key={label} className="bg-white rounded-lg border p-3">
                <p className="text-[10px] text-zinc-500 mb-1">{label}</p>
                <p className="text-lg font-bold text-zinc-900">{["$12,400", "2,841", "18.2%"][i]}</p>
                <p className="text-[10px] text-zinc-400">+{[12, 8, 3][i]}% from last month</p>
              </div>
            ))}
          </div>
          <div className="bg-white rounded-lg border">
            <div className="px-4 py-3 border-b flex items-center justify-between">
              <span className="text-xs font-semibold text-zinc-700">Recent activity</span>
              <div className="h-6 px-2 rounded border border-zinc-200 text-[10px] flex items-center text-zinc-500">Filter</div>
            </div>
            <table className="w-full text-[11px]">
              <thead><tr className="border-b bg-zinc-50">{["Name","Email","Status","Date"].map(h=><th key={h} className="px-4 py-2 text-left text-[10px] text-zinc-500 font-medium">{h}</th>)}</tr></thead>
              <tbody>{TABLE_ROWS.map(r=><tr key={r.name} className="border-b last:border-0 hover:bg-zinc-50"><td className="px-4 py-2 font-medium text-zinc-800">{r.name}</td><td className="px-4 py-2 text-zinc-500">{r.email}</td><td className="px-4 py-2"><span className={`px-1.5 py-0.5 rounded text-[9px] font-medium ${r.status==="Active"?"bg-zinc-100 text-zinc-700":r.status==="Pending"?"bg-zinc-100 text-zinc-500":"bg-zinc-50 text-zinc-400"}`}>{r.status}</span></td><td className="px-4 py-2 text-zinc-400">{r.date}</td></tr>)}</tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

export function WebAppMantine() {
  return (
    <div className="flex h-full font-sans text-sm" style={{ background: "#f8f9fa" }}>
      <div className="w-48 flex flex-col py-4 px-3 gap-0.5" style={{ background: "#fff", borderRight: "1px solid #e9ecef" }}>
        <div className="flex items-center gap-2 px-2 mb-4">
          <div className="w-6 h-6 rounded" style={{ background: "#228be6" }} />
          <span className="font-bold text-xs" style={{ color: "#1c7ed6" }}>Acme Inc</span>
        </div>
        {NAV_ITEMS.map((item, i) => (
          <div key={item} className="flex items-center gap-2 px-2 py-2 rounded text-xs cursor-pointer" style={i===0?{background:"#e7f5ff",color:"#1971c2",fontWeight:600}:{color:"#495057"}}>
            <div className="w-3.5 h-3.5 rounded-sm" style={{ background: i===0?"#74c0fc":"#ced4da" }} />
            {item}
          </div>
        ))}
      </div>
      <div className="flex-1 flex flex-col">
        <div className="h-12 flex items-center justify-between px-5" style={{ background:"#fff", borderBottom:"1px solid #e9ecef" }}>
          <span className="font-bold text-sm" style={{ color: "#212529" }}>Dashboard</span>
          <div className="flex gap-2">
            <button className="h-7 px-3 rounded text-[11px] font-medium" style={{ border:"1px solid #dee2e6", color:"#495057" }}>Export</button>
            <button className="h-7 px-3 rounded text-[11px] font-medium text-white" style={{ background:"#228be6" }}>+ New project</button>
          </div>
        </div>
        <div className="flex-1 p-5">
          <div className="grid grid-cols-3 gap-3 mb-4">
            {["Total Revenue","Active Users","Conversions"].map((label,i)=>(
              <div key={label} className="rounded-lg p-3" style={{ background:"#fff", border:"1px solid #e9ecef" }}>
                <p className="text-[10px] mb-1" style={{ color:"#868e96" }}>{label}</p>
                <p className="text-lg font-bold" style={{ color:"#212529" }}>{["$12,400","2,841","18.2%"][i]}</p>
                <p className="text-[10px]" style={{ color:"#228be6" }}>↑ {[12,8,3][i]}% this month</p>
              </div>
            ))}
          </div>
          <div className="rounded-lg" style={{ background:"#fff", border:"1px solid #e9ecef" }}>
            <div className="px-4 py-3 flex items-center justify-between" style={{ borderBottom:"1px solid #e9ecef" }}>
              <span className="text-xs font-semibold" style={{ color:"#212529" }}>Users</span>
              <input className="h-6 px-2 text-[10px] rounded" style={{ border:"1px solid #dee2e6", outline:"none", width:120 }} placeholder="Search..." />
            </div>
            <table className="w-full text-[11px]">
              <thead><tr style={{ borderBottom:"1px solid #e9ecef", background:"#f8f9fa" }}>{["Name","Email","Status","Date"].map(h=><th key={h} className="px-4 py-2 text-left text-[10px] font-semibold" style={{ color:"#868e96" }}>{h}</th>)}</tr></thead>
              <tbody>{TABLE_ROWS.map(r=><tr key={r.name} style={{ borderBottom:"1px solid #f1f3f5" }}><td className="px-4 py-2 font-semibold" style={{ color:"#212529" }}>{r.name}</td><td className="px-4 py-2" style={{ color:"#868e96" }}>{r.email}</td><td className="px-4 py-2"><span className="px-1.5 py-0.5 rounded text-[9px] font-medium" style={r.status==="Active"?{background:"#d3f9d8",color:"#2f9e44"}:r.status==="Pending"?{background:"#fff3bf",color:"#e67700"}:{background:"#f1f3f5",color:"#868e96"}}>{r.status}</span></td><td className="px-4 py-2" style={{ color:"#adb5bd" }}>{r.date}</td></tr>)}</tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

export function WebAppHeroUI() {
  return (
    <div className="flex h-full font-sans text-sm" style={{ background: "#fafafa" }}>
      <div className="w-48 flex flex-col py-4 px-3 gap-1" style={{ background: "linear-gradient(180deg,#1a1a2e,#16213e)", color: "#fff" }}>
        <div className="flex items-center gap-2 px-2 mb-4">
          <div className="w-6 h-6 rounded-full" style={{ background: "linear-gradient(135deg,#7c3aed,#ec4899)" }} />
          <span className="font-bold text-xs text-white">Acme Inc</span>
        </div>
        {NAV_ITEMS.map((item, i) => (
          <div key={item} className="flex items-center gap-2 px-2 py-2 rounded-xl text-xs cursor-pointer" style={i===0?{background:"rgba(124,58,237,0.3)",color:"#c084fc",fontWeight:600}:{color:"rgba(255,255,255,0.5)"}}>
            <div className="w-3.5 h-3.5 rounded-full" style={{ background: i===0?"#a855f7":"rgba(255,255,255,0.2)" }} />
            {item}
          </div>
        ))}
      </div>
      <div className="flex-1 flex flex-col">
        <div className="h-12 flex items-center justify-between px-5 bg-white" style={{ borderBottom: "1px solid #f0f0f0" }}>
          <span className="font-bold text-sm" style={{ background:"linear-gradient(90deg,#7c3aed,#ec4899)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent" }}>Dashboard</span>
          <div className="flex gap-2">
            <button className="h-7 px-3 rounded-full text-[11px] font-medium" style={{ border:"1px solid #e4e4e7", color:"#71717a" }}>Export</button>
            <button className="h-7 px-3 rounded-full text-[11px] font-semibold text-white" style={{ background:"linear-gradient(135deg,#7c3aed,#ec4899)" }}>+ New project</button>
          </div>
        </div>
        <div className="flex-1 p-5">
          <div className="grid grid-cols-3 gap-3 mb-4">
            {["Total Revenue","Active Users","Conversions"].map((label,i)=>(
              <div key={label} className="rounded-2xl p-3" style={{ background:"#fff", boxShadow:"0 2px 8px rgba(0,0,0,0.06)", border:"1px solid #f4f4f5" }}>
                <p className="text-[10px] mb-1" style={{ color:"#a1a1aa" }}>{label}</p>
                <p className="text-lg font-bold" style={{ color:"#18181b" }}>{["$12,400","2,841","18.2%"][i]}</p>
                <p className="text-[10px]" style={{ color:"#a855f7" }}>+{[12,8,3][i]}% from last month</p>
              </div>
            ))}
          </div>
          <div className="rounded-2xl" style={{ background:"#fff", boxShadow:"0 2px 8px rgba(0,0,0,0.06)", border:"1px solid #f4f4f5" }}>
            <div className="px-4 py-3 flex items-center justify-between" style={{ borderBottom:"1px solid #f4f4f5" }}>
              <span className="text-xs font-semibold" style={{ color:"#18181b" }}>Recent activity</span>
              <button className="h-6 px-2.5 rounded-full text-[10px] font-medium" style={{ background:"rgba(124,58,237,0.1)", color:"#7c3aed" }}>View all</button>
            </div>
            <table className="w-full text-[11px]">
              <thead><tr style={{ borderBottom:"1px solid #f4f4f5" }}>{["Name","Email","Status","Date"].map(h=><th key={h} className="px-4 py-2 text-left text-[10px] font-medium" style={{ color:"#a1a1aa" }}>{h}</th>)}</tr></thead>
              <tbody>{TABLE_ROWS.map(r=><tr key={r.name} style={{ borderBottom:"1px solid #fafafa" }}><td className="px-4 py-2 font-semibold" style={{ color:"#18181b" }}>{r.name}</td><td className="px-4 py-2" style={{ color:"#a1a1aa" }}>{r.email}</td><td className="px-4 py-2"><span className="px-2 py-0.5 rounded-full text-[9px] font-semibold" style={r.status==="Active"?{background:"rgba(34,197,94,0.1)",color:"#16a34a"}:r.status==="Pending"?{background:"rgba(234,179,8,0.1)",color:"#a16207"}:{background:"#f4f4f5",color:"#a1a1aa"}}>{r.status}</span></td><td className="px-4 py-2" style={{ color:"#d4d4d8" }}>{r.date}</td></tr>)}</tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

export function WebAppTremor() {
  return (
    <div className="flex h-full font-sans text-sm bg-white">
      <div className="w-48 border-r flex flex-col py-4 px-3 gap-1" style={{ background:"#fff" }}>
        <div className="flex items-center gap-2 px-2 mb-4">
          <div className="w-6 h-6 rounded" style={{ background:"#3b82f6" }} />
          <span className="font-bold text-xs" style={{ color:"#1e3a5f" }}>Acme Inc</span>
        </div>
        {NAV_ITEMS.map((item, i) => (
          <div key={item} className="flex items-center gap-2 px-2 py-2 rounded text-xs cursor-pointer" style={i===0?{background:"#eff6ff",color:"#1d4ed8",fontWeight:600}:{color:"#6b7280"}}>
            <div className="w-3.5 h-3.5 rounded" style={{ background:i===0?"#93c5fd":"#e5e7eb" }} />
            {item}
          </div>
        ))}
      </div>
      <div className="flex-1 flex flex-col" style={{ background:"#f9fafb" }}>
        <div className="h-12 flex items-center px-5 bg-white" style={{ borderBottom:"1px solid #e5e7eb" }}>
          <span className="font-bold text-sm" style={{ color:"#111827" }}>Overview</span>
        </div>
        <div className="flex-1 p-5">
          <div className="grid grid-cols-3 gap-3 mb-4">
            {[{l:"Revenue",v:"$12,400",c:"#2563eb",bg:"#dbeafe"},{l:"Users",v:"2,841",c:"#7c3aed",bg:"#ede9fe"},{l:"Conversion",v:"18.2%",c:"#059669",bg:"#d1fae5"}].map(item=>(
              <div key={item.l} className="rounded-xl p-3 bg-white" style={{ border:"1px solid #e5e7eb" }}>
                <div className="flex items-center justify-between mb-2">
                  <p className="text-[10px] font-medium" style={{ color:"#6b7280" }}>{item.l}</p>
                  <div className="w-6 h-6 rounded" style={{ background:item.bg }}><div className="w-full h-full rounded flex items-center justify-center"><div className="w-2.5 h-2.5 rounded-sm" style={{ background:item.c }} /></div></div>
                </div>
                <p className="text-lg font-bold" style={{ color:"#111827" }}>{item.v}</p>
                <div className="mt-2 h-1.5 rounded-full bg-gray-100"><div className="h-full rounded-full" style={{ width:`${[65,48,72][["Revenue","Users","Conversion"].indexOf(item.l)]}%`, background:item.c }} /></div>
              </div>
            ))}
          </div>
          <div className="bg-white rounded-xl p-4" style={{ border:"1px solid #e5e7eb" }}>
            <p className="text-xs font-semibold mb-3" style={{ color:"#111827" }}>Revenue over time</p>
            <div className="flex items-end gap-1.5 h-24">
              {[40,65,55,80,70,90,75,85,60,95,80,100].map((h,i)=>(
                <div key={i} className="flex-1 rounded-t" style={{ height:`${h}%`, background:i===11?"#2563eb":"#dbeafe" }} />
              ))}
            </div>
            <div className="flex justify-between mt-1">
              {["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"].map(m=><span key={m} className="text-[8px]" style={{ color:"#9ca3af" }}>{m}</span>)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// MARKETING scaffolds
// ---------------------------------------------------------------------------

export function MarketingDaisy() {
  return (
    <div className="h-full font-sans" style={{ background:"#1d232a", color:"#a6adba" }}>
      <nav className="flex items-center justify-between px-6 py-3" style={{ borderBottom:"1px solid rgba(255,255,255,0.1)" }}>
        <div className="flex items-center gap-2">
          <div className="w-6 h-6 rounded" style={{ background:"#f59e0b" }} />
          <span className="font-bold text-white text-sm">Acme</span>
        </div>
        <div className="flex gap-4 text-xs" style={{ color:"rgba(255,255,255,0.6)" }}>
          {["Features","Pricing","Docs","Blog"].map(i=><span key={i} className="cursor-pointer hover:text-white">{i}</span>)}
        </div>
        <div className="flex gap-2">
          <button className="h-7 px-3 rounded-full text-[11px] font-bold" style={{ background:"rgba(255,255,255,0.1)", color:"white" }}>Login</button>
          <button className="h-7 px-3 rounded-full text-[11px] font-bold text-black" style={{ background:"#f59e0b" }}>Get started</button>
        </div>
      </nav>
      <div className="px-10 pt-12 pb-6 text-center">
        <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold mb-4" style={{ background:"rgba(245,158,11,0.15)", color:"#f59e0b", border:"1px solid rgba(245,158,11,0.3)" }}>
          ✦ New — v2.0 is here
        </div>
        <h1 className="text-2xl font-black text-white mb-2">Build faster,<br />ship smarter</h1>
        <p className="text-xs mb-6" style={{ color:"rgba(255,255,255,0.5)", maxWidth:280, margin:"0 auto 20px" }}>The all-in-one platform that helps teams build, launch, and scale their products.</p>
        <div className="flex gap-2 justify-center">
          <button className="h-9 px-5 rounded-full text-xs font-bold text-black" style={{ background:"#f59e0b" }}>Start for free</button>
          <button className="h-9 px-5 rounded-full text-xs font-bold" style={{ border:"1px solid rgba(255,255,255,0.2)", color:"white" }}>See demo →</button>
        </div>
      </div>
      <div className="grid grid-cols-3 gap-3 px-8 mt-2">
        {[{icon:"⚡",title:"Lightning fast",desc:"Deploy in seconds, not hours"},{icon:"🔒",title:"Secure by default",desc:"Enterprise-grade security built in"},{icon:"📈",title:"Scales with you",desc:"From zero to millions of users"}].map(f=>(
          <div key={f.title} className="p-3 rounded-xl text-center" style={{ background:"rgba(255,255,255,0.05)", border:"1px solid rgba(255,255,255,0.08)" }}>
            <div className="text-xl mb-1">{f.icon}</div>
            <p className="text-[11px] font-bold text-white mb-0.5">{f.title}</p>
            <p className="text-[10px]" style={{ color:"rgba(255,255,255,0.4)" }}>{f.desc}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export function MarketingHeroUI() {
  return (
    <div className="h-full font-sans bg-white">
      <nav className="flex items-center justify-between px-6 py-3 border-b">
        <div className="flex items-center gap-2">
          <div className="w-6 h-6 rounded-full" style={{ background:"linear-gradient(135deg,#7c3aed,#ec4899)" }} />
          <span className="font-bold text-xs" style={{ color:"#18181b" }}>Acme</span>
        </div>
        <div className="flex gap-4 text-xs text-zinc-500">
          {["Features","Pricing","Docs","Blog"].map(i=><span key={i}>{i}</span>)}
        </div>
        <div className="flex gap-2">
          <button className="h-7 px-3 rounded-full text-[11px]" style={{ border:"1px solid #e4e4e7", color:"#71717a" }}>Login</button>
          <button className="h-7 px-3 rounded-full text-[11px] font-semibold text-white" style={{ background:"linear-gradient(135deg,#7c3aed,#ec4899)" }}>Get started</button>
        </div>
      </nav>
      <div className="px-10 pt-10 pb-6 text-center">
        <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-semibold mb-4" style={{ background:"rgba(124,58,237,0.08)", color:"#7c3aed", border:"1px solid rgba(124,58,237,0.15)" }}>
          🚀 Just launched — v2.0
        </div>
        <h1 className="text-2xl font-black mb-2" style={{ background:"linear-gradient(135deg,#7c3aed,#ec4899,#f97316)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent" }}>
          Build faster,<br />ship smarter
        </h1>
        <p className="text-xs text-zinc-500 mb-6 mx-auto" style={{ maxWidth:280 }}>The all-in-one platform for teams that move fast.</p>
        <div className="flex gap-2 justify-center mb-8">
          <button className="h-9 px-5 rounded-full text-xs font-semibold text-white shadow-lg" style={{ background:"linear-gradient(135deg,#7c3aed,#ec4899)" }}>Start for free</button>
          <button className="h-9 px-5 rounded-full text-xs font-medium" style={{ border:"1px solid #e4e4e7", color:"#71717a" }}>Live demo →</button>
        </div>
        <div className="rounded-2xl mx-auto overflow-hidden shadow-2xl" style={{ maxWidth:400, border:"1px solid #f4f4f5" }}>
          <div className="h-6 flex items-center gap-1.5 px-3" style={{ background:"#fafafa", borderBottom:"1px solid #f4f4f5" }}>
            {["#ff5f56","#ffbd2e","#27c93f"].map(c=><div key={c} className="w-2 h-2 rounded-full" style={{ background:c }} />)}
          </div>
          <div className="p-4" style={{ background:"#fff" }}>
            <div className="grid grid-cols-2 gap-2">
              {["Revenue","Users","Growth","Churn"].map((m,i)=><div key={m} className="rounded-xl p-2.5" style={{ background:"linear-gradient(135deg,rgba(124,58,237,0.05),rgba(236,72,153,0.05))", border:"1px solid rgba(124,58,237,0.1)" }}><p className="text-[9px] text-zinc-400">{m}</p><p className="text-sm font-bold" style={{ color:"#18181b" }}>{["$12k","2.8k","+24%","2.1%"][i]}</p></div>)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export function MarketingAceternity() {
  return (
    <div className="h-full font-sans" style={{ background:"#030303" }}>
      <nav className="flex items-center justify-between px-6 py-3" style={{ borderBottom:"1px solid rgba(255,255,255,0.06)" }}>
        <div className="flex items-center gap-2">
          <div className="w-6 h-6 rounded" style={{ background:"linear-gradient(135deg,#a855f7,#3b82f6)" }} />
          <span className="font-bold text-white text-sm">Acme</span>
        </div>
        <div className="flex gap-4 text-xs" style={{ color:"rgba(255,255,255,0.4)" }}>
          {["Features","Pricing","Docs"].map(i=><span key={i}>{i}</span>)}
        </div>
        <button className="h-7 px-3 rounded text-[11px] font-medium text-white" style={{ background:"rgba(168,85,247,0.2)", border:"1px solid rgba(168,85,247,0.3)" }}>Get started</button>
      </nav>
      <div className="relative px-10 pt-10 text-center overflow-hidden">
        <div className="absolute inset-0 pointer-events-none" style={{ background:"radial-gradient(ellipse 60% 40% at 50% 0%,rgba(168,85,247,0.15),transparent)" }} />
        <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-medium mb-4" style={{ border:"1px solid rgba(168,85,247,0.3)", color:"rgba(168,85,247,0.9)" }}>
          ✦ Open source · 12k GitHub stars
        </div>
        <h1 className="text-2xl font-black mb-2" style={{ background:"linear-gradient(180deg,#fff 0%,rgba(255,255,255,0.5) 100%)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent" }}>
          Build the future<br />of the web
        </h1>
        <p className="text-xs mb-6 mx-auto" style={{ color:"rgba(255,255,255,0.35)", maxWidth:260 }}>Beautifully crafted components built with Tailwind CSS and Framer Motion.</p>
        <div className="flex gap-2 justify-center mb-6">
          <button className="h-9 px-5 rounded text-xs font-semibold text-white relative overflow-hidden" style={{ background:"linear-gradient(135deg,#a855f7,#3b82f6)" }}>Get started →</button>
          <button className="h-9 px-5 rounded text-xs font-medium" style={{ border:"1px solid rgba(255,255,255,0.1)", color:"rgba(255,255,255,0.6)" }}>View components</button>
        </div>
        <div className="grid grid-cols-3 gap-3 mx-auto" style={{ maxWidth:480 }}>
          {["Animated","Accessible","Open source"].map((f,i)=>(
            <div key={f} className="p-3 rounded-xl text-left" style={{ background:"rgba(255,255,255,0.03)", border:"1px solid rgba(255,255,255,0.06)" }}>
              <div className="w-6 h-6 rounded mb-1.5 flex items-center justify-center" style={{ background:["rgba(168,85,247,0.15)","rgba(59,130,246,0.15)","rgba(34,197,94,0.15)"][i] }}>
                <div className="w-2.5 h-2.5 rounded-full" style={{ background:["#a855f7","#3b82f6","#22c55e"][i] }} />
              </div>
              <p className="text-[10px] font-semibold text-white mb-0.5">{f}</p>
              <p className="text-[9px]" style={{ color:"rgba(255,255,255,0.3)" }}>Built for production</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function MarketingTailwind() {
  return (
    <div className="h-full font-sans bg-white">
      <nav className="flex items-center justify-between px-6 py-3 border-b">
        <span className="font-black text-sm text-zinc-900">acme</span>
        <div className="flex gap-4 text-xs text-zinc-500">
          {["Features","Pricing","Blog"].map(i=><span key={i}>{i}</span>)}
        </div>
        <div className="flex gap-2">
          <button className="h-7 px-3 text-[11px] text-zinc-600">Log in</button>
          <button className="h-7 px-3 rounded-md text-[11px] font-medium bg-zinc-900 text-white">Sign up</button>
        </div>
      </nav>
      <div className="px-10 pt-10 pb-6">
        <div className="max-w-sm">
          <span className="text-[10px] font-semibold text-violet-600 tracking-widest uppercase">Now in public beta</span>
          <h1 className="text-2xl font-black text-zinc-900 mt-1 mb-2 leading-tight">The platform<br />built for scale</h1>
          <p className="text-xs text-zinc-500 mb-5 leading-relaxed">Everything your team needs to build, deploy, and monitor production applications.</p>
          <div className="flex gap-2 mb-8">
            <button className="h-8 px-4 rounded-md text-xs font-medium bg-zinc-900 text-white">Get started free</button>
            <button className="h-8 px-4 rounded-md text-xs font-medium border border-zinc-200 text-zinc-600">Documentation →</button>
          </div>
          <div className="grid grid-cols-2 gap-2">
            {["99.9% uptime SLA","10ms avg latency","SOC2 compliant","GDPR ready"].map(f=>(
              <div key={f} className="flex items-center gap-1.5 text-[10px] text-zinc-500">
                <div className="w-3.5 h-3.5 rounded-full bg-zinc-900 flex items-center justify-center">
                  <div className="w-1.5 h-1 border-l border-b border-white -rotate-45 translate-y-px" />
                </div>
                {f}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// ADMIN scaffolds
// ---------------------------------------------------------------------------

export function AdminMantine() { return <WebAppMantine />; }
export function AdminShadcn() { return <WebAppShadcn />; }
export function AdminTremor() { return <WebAppTremor />; }

// ---------------------------------------------------------------------------
// MOBILE scaffolds
// ---------------------------------------------------------------------------

function MobileFrame({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex items-center justify-center h-full" style={{ background:"#f4f4f5" }}>
      <div className="relative" style={{ width:200, height:380 }}>
        <div className="absolute inset-0 rounded-3xl" style={{ background:"#1a1a1a", boxShadow:"0 20px 60px rgba(0,0,0,0.3)" }} />
        <div className="absolute top-3 left-1/2 -translate-x-1/2 w-16 h-4 rounded-full bg-black z-10" />
        <div className="absolute inset-2 rounded-3xl overflow-hidden bg-white">
          {children}
        </div>
      </div>
    </div>
  );
}

export function MobileNativewind() {
  return (
    <MobileFrame>
      <div className="h-full flex flex-col bg-white text-xs">
        <div className="pt-6 pb-3 px-3" style={{ background:"#18181b" }}>
          <p className="text-[8px] text-zinc-400">Good morning</p>
          <p className="text-sm font-bold text-white">Dashboard</p>
        </div>
        <div className="flex-1 overflow-auto p-3 space-y-2" style={{ background:"#fafafa" }}>
          <div className="grid grid-cols-2 gap-2">
            {[{l:"Revenue",v:"$4.2k"},{l:"Users",v:"184"}].map(c=>(
              <div key={c.l} className="bg-white rounded-xl p-2.5" style={{ border:"1px solid #e4e4e7" }}>
                <p className="text-[8px] text-zinc-400">{c.l}</p>
                <p className="text-sm font-bold text-zinc-900">{c.v}</p>
              </div>
            ))}
          </div>
          {["Fix login bug","Update pricing","Review PR #42"].map((t,i)=>(
            <div key={t} className="bg-white rounded-xl p-2.5 flex items-center gap-2" style={{ border:"1px solid #e4e4e7" }}>
              <div className="w-4 h-4 rounded border border-zinc-300 shrink-0" style={i===0?{background:"#18181b",border:"none"}:{}} />
              <p className="text-[9px] text-zinc-700" style={i===0?{textDecoration:"line-through",color:"#a1a1aa"}:{}}>{t}</p>
            </div>
          ))}
        </div>
        <div className="flex border-t bg-white" style={{ padding:"6px 0 10px" }}>
          {["Home","Projects","Chat","Profile"].map((l,i)=>(
            <div key={l} className="flex-1 flex flex-col items-center gap-0.5">
              <div className="w-4 h-4 rounded" style={{ background:i===0?"#18181b":"#e4e4e7" }} />
              <span className="text-[7px]" style={{ color:i===0?"#18181b":"#a1a1aa" }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </MobileFrame>
  );
}

export function MobileGluestack() {
  return (
    <MobileFrame>
      <div className="h-full flex flex-col text-xs">
        <div className="pt-6 pb-3 px-3 flex items-center justify-between" style={{ background:"#1976d2" }}>
          <p className="text-sm font-bold text-white">Dashboard</p>
          <div className="w-5 h-5 rounded-full bg-white/20" />
        </div>
        <div className="flex-1 overflow-auto p-3 space-y-2" style={{ background:"#f5f5f5" }}>
          <div className="grid grid-cols-2 gap-2">
            {[{l:"Revenue",v:"$4.2k",c:"#1976d2"},{l:"Users",v:"184",c:"#7b1fa2"}].map(c=>(
              <div key={c.l} className="rounded-lg p-2.5" style={{ background:c.c }}>
                <p className="text-[8px] text-white/70">{c.l}</p>
                <p className="text-sm font-bold text-white">{c.v}</p>
              </div>
            ))}
          </div>
          {["Fix login bug","Update pricing","Review PR #42"].map((t,i)=>(
            <div key={t} className="bg-white rounded-lg p-2.5 flex items-center gap-2 shadow-sm">
              <div className="w-4 h-4 rounded-full border-2 shrink-0" style={i===0?{background:"#1976d2",borderColor:"#1976d2"}:{borderColor:"#bdbdbd"}} />
              <p className="text-[9px]" style={{ color:i===0?"#9e9e9e":"#212121", textDecoration:i===0?"line-through":"none" }}>{t}</p>
            </div>
          ))}
        </div>
        <div className="flex bg-white shadow-sm" style={{ padding:"6px 0 10px", borderTop:"1px solid #e0e0e0" }}>
          {["Home","Tasks","Chat","Profile"].map((l,i)=>(
            <div key={l} className="flex-1 flex flex-col items-center gap-0.5">
              <div className="w-4 h-4 rounded" style={{ background:i===0?"#1976d2":"#e0e0e0" }} />
              <span className="text-[7px]" style={{ color:i===0?"#1976d2":"#9e9e9e" }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </MobileFrame>
  );
}

// ---------------------------------------------------------------------------
// EMAIL scaffolds
// ---------------------------------------------------------------------------

export function EmailReactEmail() {
  return (
    <div className="flex items-start justify-center h-full py-6 font-sans" style={{ background:"#f6f9fc" }}>
      <div className="w-full max-w-md" style={{ background:"#fff", borderRadius:8, boxShadow:"0 2px 8px rgba(0,0,0,0.08)" }}>
        <div className="px-8 py-5" style={{ borderBottom:"1px solid #e6e6e6" }}>
          <div className="flex items-center gap-2 mb-1">
            <div className="w-5 h-5 rounded" style={{ background:"#000" }} />
            <span className="font-bold text-xs text-zinc-900">Acme</span>
          </div>
        </div>
        <div className="px-8 py-6">
          <p className="text-base font-bold text-zinc-900 mb-2">Welcome to Acme! 🎉</p>
          <p className="text-xs text-zinc-500 mb-4 leading-relaxed">Hi Alice, thanks for signing up. Your account is ready and you can start building right away.</p>
          <div className="text-center mb-4">
            <button className="h-9 px-6 rounded text-xs font-semibold text-white" style={{ background:"#000" }}>Get started →</button>
          </div>
          <div className="rounded-lg p-3 mb-4" style={{ background:"#f6f9fc", border:"1px solid #e6e6e6" }}>
            <p className="text-[10px] font-semibold text-zinc-700 mb-1">Your account details</p>
            {["Plan: Starter","Workspace: alice-workspace","Status: Active"].map(d=>(
              <p key={d} className="text-[10px] text-zinc-500">{d}</p>
            ))}
          </div>
          <p className="text-[10px] text-zinc-400 leading-relaxed">If you have any questions, reply to this email or visit our help center. We're here to help.</p>
        </div>
        <div className="px-8 py-4 text-center" style={{ borderTop:"1px solid #e6e6e6", background:"#fafafa" }}>
          <p className="text-[9px] text-zinc-400">Acme Inc · 123 Main St · San Francisco CA · Unsubscribe</p>
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// DOCS scaffolds
// ---------------------------------------------------------------------------

export function DocsNextra() {
  return (
    <div className="flex h-full font-sans text-xs bg-white">
      <div className="w-44 border-r flex flex-col py-4 px-3" style={{ background:"#fafafa" }}>
        <div className="mb-4">
          <p className="text-[9px] font-semibold text-zinc-400 uppercase tracking-wide mb-2">Getting Started</p>
          {["Introduction","Installation","Quick Start"].map((item,i)=>(
            <div key={item} className={`px-2 py-1 rounded text-[10px] cursor-pointer mb-0.5 ${i===0?"bg-zinc-900 text-white font-medium":"text-zinc-500 hover:text-zinc-700"}`}>{item}</div>
          ))}
        </div>
        <div className="mb-4">
          <p className="text-[9px] font-semibold text-zinc-400 uppercase tracking-wide mb-2">Components</p>
          {["Button","Card","Input","Modal","Table"].map(item=>(
            <div key={item} className="px-2 py-1 rounded text-[10px] cursor-pointer text-zinc-500 hover:text-zinc-700 mb-0.5">{item}</div>
          ))}
        </div>
        <div>
          <p className="text-[9px] font-semibold text-zinc-400 uppercase tracking-wide mb-2">API Reference</p>
          {["REST API","Webhooks"].map(item=>(
            <div key={item} className="px-2 py-1 text-[10px] text-zinc-500 mb-0.5">{item}</div>
          ))}
        </div>
      </div>
      <div className="flex-1 overflow-auto">
        <div className="max-w-lg px-8 py-6">
          <div className="flex items-center gap-1.5 text-[9px] text-zinc-400 mb-4">
            <span>Docs</span><span>/</span><span>Getting Started</span><span>/</span><span className="text-zinc-600">Introduction</span>
          </div>
          <h1 className="text-base font-bold text-zinc-900 mb-2">Introduction</h1>
          <p className="text-[11px] text-zinc-600 mb-3 leading-relaxed">Acme UI is a collection of re-usable components that you can copy and paste into your web apps. Built with Radix UI and Tailwind CSS.</p>
          <div className="rounded-lg p-3 mb-3" style={{ background:"#18181b" }}>
            <p className="text-[10px] font-mono" style={{ color:"#10b981" }}>$ npm install acme-ui</p>
          </div>
          <h2 className="text-sm font-semibold text-zinc-900 mb-1.5">Key features</h2>
          {["Accessible","Customisable","Open source","TypeScript ready"].map(f=>(
            <div key={f} className="flex items-center gap-1.5 text-[10px] text-zinc-600 mb-1">
              <div className="w-1.5 h-1.5 rounded-full bg-zinc-400" />{f}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function DocsShadcnCustom() {
  return (
    <div className="flex h-full font-sans text-xs bg-white">
      <div className="w-44 border-r flex flex-col py-4 px-3">
        <div className="mb-4 pb-3 border-b">
          <div className="flex items-center gap-2">
            <div className="w-5 h-5 rounded bg-zinc-900" />
            <span className="font-bold text-zinc-900 text-[11px]">Acme Docs</span>
          </div>
        </div>
        {[{section:"Guides",items:["Introduction","Installation","Theming"]},{section:"Components",items:["Button","Input","Select","Dialog"]}].map(g=>(
          <div key={g.section} className="mb-3">
            <p className="text-[9px] font-semibold text-zinc-400 uppercase tracking-wide mb-1.5">{g.section}</p>
            {g.items.map((item,i)=>(
              <div key={item} className={`px-2 py-1 rounded-md text-[10px] mb-0.5 cursor-pointer ${i===0&&g.section==="Guides"?"bg-zinc-100 text-zinc-900 font-medium":"text-zinc-500"}`}>{item}</div>
            ))}
          </div>
        ))}
      </div>
      <div className="flex-1 px-8 py-6 overflow-auto">
        <h1 className="text-base font-bold text-zinc-900 mb-1">Introduction</h1>
        <p className="text-[11px] text-zinc-500 mb-4 leading-relaxed">A set of beautifully designed components built with Radix UI and Tailwind CSS.</p>
        <div className="rounded-lg border overflow-hidden mb-4">
          <div className="flex items-center gap-2 px-3 py-2 border-b bg-zinc-50">
            <span className="text-[9px] font-medium text-zinc-500">bash</span>
          </div>
          <div className="px-3 py-2.5 bg-zinc-950">
            <p className="text-[10px] font-mono text-emerald-400">npx shadcn@latest init</p>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-2">
          {["Button","Card","Input","Badge"].map(c=>(
            <div key={c} className="rounded-lg border p-3 cursor-pointer hover:bg-zinc-50 transition-colors">
              <p className="text-[10px] font-semibold text-zinc-700 mb-0.5">{c}</p>
              <p className="text-[9px] text-zinc-400">View component →</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Registry — maps surface+theme to scaffold component
// ---------------------------------------------------------------------------

export const SCAFFOLD_REGISTRY: Record<string, Record<string, React.ComponentType>> = {
  "web-app": {
    "shadcn": WebAppShadcn,
    "mantine": WebAppMantine,
    "hero-ui": WebAppHeroUI,
    "tremor": WebAppTremor,
  },
  "marketing": {
    "daisy-ui": MarketingDaisy,
    "hero-ui": MarketingHeroUI,
    "aceternity": MarketingAceternity,
    "tailwind-only": MarketingTailwind,
  },
  "admin": {
    "mantine": AdminMantine,
    "shadcn": AdminShadcn,
    "tremor": AdminTremor,
  },
  "mobile": {
    "nativewind": MobileNativewind,
    "gluestack": MobileGluestack,
  },
  "email": {
    "react-email": EmailReactEmail,
  },
  "docs": {
    "nextra": DocsNextra,
    "shadcn": DocsShadcnCustom,
  },
};