Initial OSS scaffold from Songs2VID (pre-strip)

.dockerignore

@@ -0,0 +1,12 @@
+node_modules
+.next
+.git
+website
+uploads
+*.md
+.env
+.env.*
+!.env.example
+deploy-*.tgz
+scripts
+bg-video

.env.example

@@ -0,0 +1,51 @@
+DATABASE_URL="postgresql://s2yt:s2yt@localhost:5433/s2yt"
+REDIS_URL="redis://localhost:6380"
+NEXTAUTH_URL="http://localhost:3000"
+# Generate with: openssl rand -base64 32
+NEXTAUTH_SECRET="replace-with-a-long-random-secret"
+# Used to encrypt YouTube OAuth tokens at rest (falls back to NEXTAUTH_SECRET if unset)
+# TOKEN_ENCRYPTION_KEY="replace-with-another-long-random-secret"
+# Server-side Google OAuth 2.0 credentials from Google Cloud Console
+GOOGLE_CLIENT_ID="your-google-client-id.apps.googleusercontent.com"
+GOOGLE_CLIENT_SECRET="your-google-client-secret"
+UPLOAD_DIR="./uploads"
+# Open-source / self-hosted: unlimited video quota, API, and Pro features
+# S2VID_EDITION="selfhosted"
+# Admin API key for approving/rejecting quota extension requests (Bearer token)
+# ADMIN_API_KEY="your-secret-admin-key"
+# Admin UI: /admin (footer badges) — unlock with the same Bearer key
+# Admin reset: POST /api/admin/reset-credits  Authorization: Bearer $ADMIN_API_KEY
+# Admin badges: GET/POST /api/admin/badges, PATCH/DELETE /api/admin/badges/:id
+# Public badges: GET /api/badges
+# Pro users generate API keys in Dashboard → Settings (stored hashed; shown once)
+# Optional: override bundled ffmpeg-static binary (leave unset to use npm package)
+# FFMPEG_PATH="C:/path/to/ffmpeg.exe"
+# Public Gitea issues URL for community support links
+NEXT_PUBLIC_GITEA_ISSUES_URL="https://git.atakanozban.com/Songs2VID/songs2vid/issues"
+NEXT_PUBLIC_GITEA_URL="https://git.atakanozban.com/Songs2VID"
+NEXT_PUBLIC_DOCKER_HUB_URL="https://hub.docker.com/r/atakanozban/songs2vid"
+# Docusaurus docs — local: npm run docs:dev → http://localhost:3001
+# NEXT_PUBLIC_DOCS_URL="http://localhost:3001"
+# Production: NEXT_PUBLIC_DOCS_URL="https://docs.songs2vid.com"
+# Stripe billing (Pro €5/mo + Free 1–15 credit top-ups @ €0.25)
+# STRIPE_SECRET_KEY="sk_test_..."
+# Prefer a restricted key (rk_...) with Checkout + Customers + Billing Portal + Webhooks only
+# STRIPE_WEBHOOK_SECRET="whsec_..."
+# Optional Dashboard Price ID for Pro (otherwise inline price_data €5/mo is used)
+# STRIPE_PRO_PRICE_ID="price_..."
+# Collect VAT/GST via Stripe Tax AFTER adding Tax registrations in Dashboard:
+# STRIPE_AUTOMATIC_TAX="true"
+# Force local mock upgrades/grants without Stripe: BILLING_DEV_MOCK=true
+# Disable auto-mock when Stripe key missing: BILLING_DEV_MOCK=false
+# Point Stripe webhook to: POST /api/stripe/webhook
+# Events (required):
+#   checkout.session.completed
+#   invoice.payment_succeeded
+#   invoice.payment_failed
+#   customer.subscription.updated
+#   customer.subscription.deleted
+# Dashboard: enable Customer portal (Settings → Billing → Customer portal)
+# Optional: Managed Payments (MoR)  enable in Dashboard + set managed_payments on Checkout if you use it
+# Dev helpers: POST /api/dev/grant-credits  { "action": "set-pro" | "free-top-up" | "grant-credits" }
+# Admin reset: POST /api/admin/reset-credits  Authorization: Bearer $ADMIN_API_KEY
+# See also /admin for footer badge management

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,8 @@
+uploads/
+node_modules/
+.next/
+.env
+.env.local
+website/node_modules/
+website/build/
+website/.docusaurus/

Dockerfile

@@ -0,0 +1,58 @@
+# syntax=docker/dockerfile:1
+# Hosted Songs2VID image (cloud plans + PAYG/Stripe). Do not bake selfhosted edition.
+
+FROM node:22-bookworm-slim AS deps
+WORKDIR /app
+RUN apt-get update && apt-get install -y --no-install-recommends openssl ca-certificates \
+  && rm -rf /var/lib/apt/lists/*
+COPY package.json package-lock.json ./
+COPY prisma ./prisma
+RUN npm install
+
+FROM node:22-bookworm-slim AS builder
+WORKDIR /app
+RUN apt-get update && apt-get install -y --no-install-recommends openssl ca-certificates \
+  && rm -rf /var/lib/apt/lists/*
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npx prisma generate && npm run build
+
+FROM node:22-bookworm-slim AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV UPLOAD_DIR=/app/uploads
+ENV FFMPEG_PATH=ffmpeg
+ENV PORT=3000
+ENV HOSTNAME=0.0.0.0
+ENV HOME=/home/nextjs
+ENV npm_config_cache=/tmp/npm-cache
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    openssl ca-certificates ffmpeg \
+  && rm -rf /var/lib/apt/lists/* \
+  && groupadd --system --gid 1001 nodejs \
+  && useradd --system --uid 1001 --gid nodejs --create-home --home-dir /home/nextjs nextjs \
+  && mkdir -p /app/uploads \
+  && chown nextjs:nodejs /app /app/uploads
+
+USER nextjs
+
+COPY --chown=nextjs:nodejs package.json package-lock.json ./
+COPY --chown=nextjs:nodejs prisma ./prisma
+RUN npm install --omit=dev \
+  && npx prisma generate \
+  && rm -rf /tmp/npm-cache
+
+COPY --chown=nextjs:nodejs --from=builder /app/.next/standalone/server.js ./server.js
+COPY --chown=nextjs:nodejs --from=builder /app/.next/standalone/.next ./.next
+COPY --chown=nextjs:nodejs --from=builder /app/.next/static ./.next/static
+COPY --chown=nextjs:nodejs --from=builder /app/public ./public
+COPY --chown=nextjs:nodejs --from=builder /app/assets ./assets
+COPY --chown=nextjs:nodejs --from=builder /app/worker ./worker
+COPY --chown=nextjs:nodejs --from=builder /app/lib ./lib
+COPY --chown=nextjs:nodejs --from=builder /app/tsconfig.json ./tsconfig.json
+
+EXPOSE 3000
+CMD ["node", "server.js"]

README.md

@@ -0,0 +1,119 @@
+# Songs2VID
+
+Create YouTube videos from an image and audio files.
+
+## Stack
+
+- Next.js 15 (App Router, TypeScript, Tailwind)
+- PostgreSQL + Prisma
+- Redis + BullMQ
+- NextAuth (Google OAuth 2.0 with YouTube scopes)
+- FFmpeg for video encoding
+- YouTube Data API v3
+
+## Editions
+
+| Edition | How | Limits |
+|---------|-----|--------|
+| **Hosted** (default) | Leave `S2VID_EDITION` unset | Free / Pro quotas and API gates |
+| **Self-hosted / OSS** | `S2VID_EDITION=selfhosted` | No video quota, no API rate caps; playlists + API unlocked |
+
+Docker Compose sets `S2VID_EDITION=selfhosted` automatically.
+
+## Quick start (Docker)
+
+1. Copy env and set Google OAuth + secrets:
+
+```bash
+cp .env.example .env
+```
+
+2. Build and run the full stack (web, worker, Postgres, Redis):
+
+```bash
+docker compose up -d --build
+```
+
+Open [http://localhost:3000](http://localhost:3000).
+
+Add Google OAuth redirect URI: `http://localhost:3000/api/auth/callback/google` (or your public URL).
+
+## Local development
+
+1. Copy environment variables:
+
+```bash
+cp .env.example .env
+```
+
+2. Start Postgres and Redis only:
+
+```bash
+docker compose -f docker-compose.dev.yml up -d
+```
+
+3. Install dependencies and push the schema:
+
+```bash
+npm install
+npm run db:push
+```
+
+4. Configure Google OAuth in [Google Cloud Console](https://console.cloud.google.com/):
+   - Enable YouTube Data API v3
+   - Create OAuth 2.0 credentials
+   - Add redirect URI: `http://localhost:3000/api/auth/callback/google`
+   - Set `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` in `.env`
+
+5. Optional for unlimited local use: `S2VID_EDITION=selfhosted` in `.env`
+
+6. Start the app, worker, and docs:
+
+```bash
+npm run dev:all
+```
+
+- App: http://localhost:3000  
+- Docs: http://localhost:3001  
+
+Or run them separately with `npm run dev`, `npm run worker`, and `npm run docs:dev`.
+
+## Authentication
+
+Users sign in with Google via OAuth 2.0. The app handles YouTube channel connection automatically  end users never enter API keys for YouTube.
+
+## Self-hosted edition
+
+Set `S2VID_EDITION=selfhosted` (Docker Compose does this by default):
+
+- Unlimited video allowance
+- API access and playlists
+- Art-track layouts with blur backgrounds and fine-tuning (padding, gaps, text offsets)
+- Custom watermarks (text/logo), curated or uploaded fonts
+
+Composition details: see `website/docs/video-editing.md` (or open Video editing in the docs site after `npm run docs:dev`).
+
+## Scripts
+
+- `npm run dev` - Next.js dev server
+- `npm run worker` - Background job processor
+- `npm run dev:all` - App (3000) + worker + docs (3001) together
+- `npm run db:push` - Push Prisma schema to database
+- `npm run build` - Production build
+- `npm run docs:dev` - Documentation site only (Docusaurus on port 3001)
+
+## Documentation
+
+Docs live in `website/` (Docusaurus). API reference:
+
+```bash
+npm run docs:dev
+```
+
+Open [http://localhost:3001/docs/api/overview](http://localhost:3001/docs/api/overview).
+
+The app “Full API docs” link and `/dashboard/api-docs` redirect use local docs when `NEXTAUTH_URL` is localhost (or set `NEXT_PUBLIC_DOCS_URL`).
+## Source
+
+- Gitea: https://git.atakanozban.com/Songs2VID
+- Docker Hub: https://hub.docker.com/r/atakanozban/songs2vid

app/admin/page.tsx

@@ -0,0 +1,26 @@
+import { AdminBadgePanel } from "@/components/AdminBadgePanel";
+
+export const metadata = {
+  title: "Admin · Footer badges · Songs2VID",
+  robots: { index: false, follow: false },
+};
+
+export default function AdminBadgesPage() {
+  return (
+    <main className="min-h-screen bg-surface-dark text-gray-100">
+      <div className="mx-auto max-w-3xl px-6 py-10">
+        <header className="mb-8">
+          <p className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+            Admin
+          </p>
+          <h1 className="mt-1 text-2xl font-bold text-white">Footer badges</h1>
+          <p className="mt-2 text-sm text-gray-400">
+            Manage the infinite badge marquee on the public site footer. Only active badges are
+            shown.
+          </p>
+        </header>
+        <AdminBadgePanel />
+      </div>
+    </main>
+  );
+}

app/api/account/api-key/route.ts

@@ -0,0 +1,49 @@
+import { NextResponse } from "next/server";
+import { createUserApiKey, getUserApiKeyStatus, revokeUserApiKey } from "@/lib/api-keys";
+import { hasProFeatures } from "@/lib/edition";
+import { getSessionUser } from "@/lib/session";
+
+async function requireApiKeyAccess() {
+  const user = await getSessionUser();
+  if (!user) {
+    return { error: NextResponse.json({ error: "Unauthorized" }, { status: 401 }), user: null };
+  }
+  if (!hasProFeatures(user.plan)) {
+    return {
+      error: NextResponse.json(
+        { error: "API keys are available on the Pro plan only" },
+        { status: 403 },
+      ),
+      user: null,
+    };
+  }
+  return { error: null, user };
+}
+
+export async function GET() {
+  const { error, user } = await requireApiKeyAccess();
+  if (error || !user) return error!;
+
+  const status = await getUserApiKeyStatus(user.id);
+  return NextResponse.json(status);
+}
+
+export async function POST() {
+  const { error, user } = await requireApiKeyAccess();
+  if (error || !user) return error!;
+
+  const { token, prefix } = await createUserApiKey(user.id);
+  return NextResponse.json({
+    apiKey: token,
+    prefix,
+    message: "Copy this key now. It will not be shown again.",
+  });
+}
+
+export async function DELETE() {
+  const { error, user } = await requireApiKeyAccess();
+  if (error || !user) return error!;
+
+  await revokeUserApiKey(user.id);
+  return NextResponse.json({ ok: true });
+}

app/api/account/api-rate-limit-extension-request/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  createQuotaExtensionRequest,
+  EXTENSION_KIND,
+  getQuotaExtensionUsage,
+} from "@/lib/quota-extensions";
+import { hasProFeatures } from "@/lib/edition";
+import { getSessionUser } from "@/lib/session";
+
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!hasProFeatures(user.plan)) {
+    return NextResponse.json({ error: "Pro plan required" }, { status: 403 });
+  }
+
+  const usage = await getQuotaExtensionUsage(user.id, EXTENSION_KIND.API_RATE_LIMIT);
+  return NextResponse.json(usage);
+}
+
+export async function POST(req: NextRequest) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!hasProFeatures(user.plan)) {
+    return NextResponse.json({ error: "Pro plan required" }, { status: 403 });
+  }
+
+  let message = "";
+  try {
+    const body = await req.json();
+    if (typeof body.message === "string") message = body.message;
+  } catch {
+    // optional body
+  }
+
+  try {
+    const result = await createQuotaExtensionRequest(
+      user.id,
+      message,
+      EXTENSION_KIND.API_RATE_LIMIT,
+    );
+    return NextResponse.json(result);
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : "Failed to submit request";
+    return NextResponse.json({ error: msg }, { status: 400 });
+  }
+}

app/api/account/api-rate-limit/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+import { getApiRateLimitStatus } from "@/lib/api-rate-limit";
+import { hasProFeatures } from "@/lib/edition";
+import { getSessionUser } from "@/lib/session";
+
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  if (!hasProFeatures(user.plan)) {
+    return NextResponse.json(
+      { error: "API rate limits are available on the Pro plan only" },
+      { status: 403 },
+    );
+  }
+
+  const status = await getApiRateLimitStatus(user.id);
+  return NextResponse.json(status);
+}

app/api/account/billing-portal/route.ts

@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+import { getSessionUser } from "@/lib/session";
+import { getStripe, isBillingDevMock, isStripeConfigured } from "@/lib/stripe";
+
+/**
+ * Stripe Customer Portal  update payment method, view invoices, cancel (per Dashboard config).
+ * @see https://docs.stripe.com/customer-management/integrate-customer-portal
+ */
+export async function POST(req: NextRequest) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  if (isBillingDevMock()) {
+    return NextResponse.json(
+      { error: "Billing portal is unavailable in mock mode." },
+      { status: 503 },
+    );
+  }
+
+  if (!isStripeConfigured()) {
+    return NextResponse.json(
+      { error: "Payments are not configured yet. Set STRIPE_SECRET_KEY." },
+      { status: 503 },
+    );
+  }
+
+  const dbUser = await prisma.user.findUniqueOrThrow({
+    where: { id: user.id },
+    select: { stripeCustomerId: true },
+  });
+
+  if (!dbUser.stripeCustomerId) {
+    return NextResponse.json(
+      { error: "No Stripe customer on this account. Complete a checkout first." },
+      { status: 400 },
+    );
+  }
+
+  const origin = process.env.NEXTAUTH_URL || req.nextUrl.origin;
+  const stripe = getStripe();
+
+  try {
+    const session = await stripe.billingPortal.sessions.create({
+      customer: dbUser.stripeCustomerId,
+      return_url: `${origin}/dashboard/settings`,
+    });
+    return NextResponse.json({ url: session.url });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Could not open billing portal";
+    console.error("[stripe] billing portal failed", err);
+    return NextResponse.json(
+      {
+        error:
+          message.includes("No configuration") || message.includes("portal")
+            ? "Billing portal is not configured in Stripe Dashboard yet. Enable it under Settings → Billing → Customer portal."
+            : message,
+      },
+      { status: 502 },
+    );
+  }
+}

app/api/account/cancel-subscription/route.ts

@@ -0,0 +1,217 @@
+import { NextRequest, NextResponse } from "next/server";
+import { downgradeToFreePlan } from "@/lib/billing";
+import { prisma } from "@/lib/db";
+import { getSessionUser } from "@/lib/session";
+import { getStripe, isBillingDevMock, isStripeConfigured } from "@/lib/stripe";
+
+type CancelWhen = "immediate" | "period_end";
+type CancelAction = "cancel" | "resume";
+
+function periodEndIso(sub: {
+  cancel_at?: number | null;
+  current_period_end?: number;
+  items?: { data?: Array<{ current_period_end?: number }> };
+}): string | null {
+  const fromItem = sub.items?.data?.[0]?.current_period_end;
+  const ts = sub.cancel_at ?? fromItem ?? sub.current_period_end ?? null;
+  return ts ? new Date(ts * 1000).toISOString() : null;
+}
+
+/**
+ * Cancel Pro subscription via Stripe.
+ * Body: { when: "immediate" | "period_end" } or { action: "resume" }
+ */
+export async function POST(req: NextRequest) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  if (user.plan !== "PREMIUM") {
+    return NextResponse.json({ error: "No active subscription to cancel" }, { status: 400 });
+  }
+
+  let action: CancelAction = "cancel";
+  let when: CancelWhen = "immediate";
+  try {
+    const body = await req.json();
+    if (body?.action === "resume") action = "resume";
+    if (body?.when === "period_end" || body?.when === "immediate") when = body.when;
+  } catch {
+    // empty body → default immediate cancel (legacy)
+  }
+
+  const dbUser = await prisma.user.findUniqueOrThrow({
+    where: { id: user.id },
+    select: { stripeSubscriptionId: true },
+  });
+
+  const subId = dbUser.stripeSubscriptionId;
+  const isMockSub = !subId || subId.startsWith("dev_sub_");
+  const useStripe =
+    Boolean(subId) &&
+    !isMockSub &&
+    isStripeConfigured() &&
+    !isBillingDevMock();
+
+  //  Resume (undo cancel-at-period-end) 
+  if (action === "resume") {
+    if (useStripe && subId) {
+      try {
+        const stripe = getStripe();
+        const sub = await stripe.subscriptions.update(subId, {
+          cancel_at_period_end: false,
+        });
+        return NextResponse.json({
+          ok: true,
+          action: "resume",
+          cancelAtPeriodEnd: false,
+          currentPeriodEnd: periodEndIso(sub as { current_period_end?: number }),
+        });
+      } catch (err) {
+        console.error("[stripe] resume subscription failed", err);
+        return NextResponse.json(
+          { error: err instanceof Error ? err.message : "Failed to keep subscription" },
+          { status: 502 },
+        );
+      }
+    }
+    return NextResponse.json({
+      ok: true,
+      action: "resume",
+      cancelAtPeriodEnd: false,
+      mocked: true,
+    });
+  }
+
+  //  Cancel 
+  if (when === "period_end") {
+    if (useStripe && subId) {
+      try {
+        const stripe = getStripe();
+        const sub = await stripe.subscriptions.update(subId, {
+          cancel_at_period_end: true,
+        });
+        const endsAt = periodEndIso(
+          sub as {
+            cancel_at?: number | null;
+            current_period_end?: number;
+            items?: { data?: Array<{ current_period_end?: number }> };
+          },
+        );
+        return NextResponse.json({
+          ok: true,
+          when: "period_end",
+          cancelAtPeriodEnd: true,
+          endsAt,
+          // Keep Pro until Stripe sends customer.subscription.deleted
+        });
+      } catch (err) {
+        console.error("[stripe] cancel at period end failed", err);
+        return NextResponse.json(
+          { error: err instanceof Error ? err.message : "Failed to schedule cancellation" },
+          { status: 502 },
+        );
+      }
+    }
+
+    // Mock / no Stripe id: schedule locally by leaving Pro and reporting next month
+    const endsAt = new Date();
+    endsAt.setMonth(endsAt.getMonth() + 1);
+    return NextResponse.json({
+      ok: true,
+      when: "period_end",
+      cancelAtPeriodEnd: true,
+      endsAt: endsAt.toISOString(),
+      mocked: true,
+    });
+  }
+
+  // immediate
+  if (useStripe && subId) {
+    try {
+      const stripe = getStripe();
+      await stripe.subscriptions.cancel(subId);
+    } catch (err) {
+      console.error("[stripe] cancel subscription failed", err);
+      return NextResponse.json(
+        {
+          error:
+            err instanceof Error
+              ? err.message
+              : "Stripe could not cancel the subscription. Your plan was not changed.",
+        },
+        { status: 502 },
+      );
+    }
+  }
+
+  await downgradeToFreePlan(user.id);
+  return NextResponse.json({
+    ok: true,
+    when: "immediate",
+    cancelAtPeriodEnd: false,
+    plan: "FREE",
+  });
+}
+
+/** Current Stripe subscription cancel status for settings UI. */
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  if (user.plan !== "PREMIUM") {
+    return NextResponse.json({
+      plan: user.plan,
+      cancelAtPeriodEnd: false,
+      endsAt: null,
+    });
+  }
+
+  const dbUser = await prisma.user.findUniqueOrThrow({
+    where: { id: user.id },
+    select: { stripeSubscriptionId: true },
+  });
+
+  const subId = dbUser.stripeSubscriptionId;
+  if (
+    !subId ||
+    subId.startsWith("dev_sub_") ||
+    !isStripeConfigured() ||
+    isBillingDevMock()
+  ) {
+    return NextResponse.json({
+      plan: "PREMIUM",
+      cancelAtPeriodEnd: false,
+      endsAt: null,
+      mocked: true,
+    });
+  }
+
+  try {
+    const stripe = getStripe();
+    const sub = await stripe.subscriptions.retrieve(subId);
+    return NextResponse.json({
+      plan: "PREMIUM",
+      status: sub.status,
+      cancelAtPeriodEnd: Boolean(sub.cancel_at_period_end),
+      endsAt: periodEndIso(
+        sub as {
+          cancel_at?: number | null;
+          current_period_end?: number;
+          items?: { data?: Array<{ current_period_end?: number }> };
+        },
+      ),
+    });
+  } catch (err) {
+    console.error("[stripe] retrieve subscription failed", err);
+    return NextResponse.json({
+      plan: "PREMIUM",
+      cancelAtPeriodEnd: false,
+      endsAt: null,
+      error: "Could not load subscription status from Stripe",
+    });
+  }
+}

app/api/account/credits/route.ts

@@ -0,0 +1,192 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  CREDIT_PRICE_CENTS,
+  FREE_EXTRA_CREDITS_MAX,
+  FREE_TOP_UP_MAX,
+  FREE_TOP_UP_MIN,
+  formatCreditPrice,
+  validateFreeTopUpAmount,
+} from "@/lib/credits";
+import { prisma } from "@/lib/db";
+import { getSessionUser } from "@/lib/session";
+import {
+  checkoutTaxAndReferenceOptions,
+  ensureStripeCustomer,
+  priceDataTaxFields,
+  productDataWithTaxCode,
+} from "@/lib/stripe-checkout";
+import { getStripe, isBillingDevMock, isStripeConfigured } from "@/lib/stripe";
+import { grantExtraCredits } from "@/lib/billing";
+
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const dbUser = await prisma.user.findUniqueOrThrow({
+    where: { id: user.id },
+    select: {
+      extraCredits: true,
+      plan: true,
+      monthlyCredits: true,
+      videosUsed: true,
+    },
+  });
+
+  const purchases = await prisma.creditPurchase.findMany({
+    where: { userId: user.id, status: "COMPLETED" },
+    orderBy: { completedAt: "desc" },
+    take: 10,
+  });
+
+  const cap = FREE_EXTRA_CREDITS_MAX;
+  const room = Math.max(0, cap - dbUser.extraCredits);
+
+  return NextResponse.json({
+    extraCredits: dbUser.extraCredits,
+    videoCredits: dbUser.extraCredits,
+    topUpMin: FREE_TOP_UP_MIN,
+    topUpMax: FREE_TOP_UP_MAX,
+    priceCentsPerCredit: CREDIT_PRICE_CENTS,
+    priceLabelPerCredit: formatCreditPrice(1),
+    creditBalanceMax: cap,
+    monthlyCredits: dbUser.monthlyCredits,
+    creditsUsed: dbUser.videosUsed,
+    plan: dbUser.plan,
+    stripeConfigured: isStripeConfigured() || isBillingDevMock(),
+    room,
+    atExtraCap: room === 0,
+    purchases: purchases.map((p) => ({
+      id: p.id,
+      credits: p.credits,
+      amountCents: p.amountCents,
+      completedAt: p.completedAt?.toISOString() ?? null,
+    })),
+  });
+}
+
+/** Free tier: top up 1–15 extra credits (price = credits × €0.25). */
+export async function POST(req: NextRequest) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  if (user.plan === "PREMIUM") {
+    return NextResponse.json(
+      {
+        error:
+          "Credit top-ups are for the Free plan. Pro includes 50 monthly credits; existing extras never expire.",
+      },
+      { status: 403 },
+    );
+  }
+
+  let credits = 0;
+  try {
+    const body = await req.json();
+    credits = Math.floor(Number(body.credits));
+  } catch {
+    return NextResponse.json({ error: "Invalid request body" }, { status: 400 });
+  }
+
+  const dbUser = await prisma.user.findUniqueOrThrow({
+    where: { id: user.id },
+    select: { extraCredits: true, email: true, monthlyCredits: true, videosUsed: true, bonusQuota: true },
+  });
+
+  const monthlyRemaining = Math.max(
+    0,
+    dbUser.monthlyCredits + dbUser.bonusQuota - dbUser.videosUsed,
+  );
+  const validation = validateFreeTopUpAmount(credits, dbUser.extraCredits, monthlyRemaining);
+  if (!validation.ok) {
+    return NextResponse.json({ error: validation.error }, { status: 400 });
+  }
+
+  const { credits: amount, amountCents } = validation;
+
+  if (isBillingDevMock()) {
+    const purchase = await prisma.creditPurchase.create({
+      data: {
+        userId: user.id,
+        credits: amount,
+        amountCents,
+        status: "COMPLETED",
+        completedAt: new Date(),
+        stripeSessionId: `dev_topup_${Date.now()}`,
+      },
+    });
+    await grantExtraCredits(user.id, amount);
+    return NextResponse.json({
+      mocked: true,
+      granted: amount,
+      amountCents,
+      purchaseId: purchase.id,
+    });
+  }
+
+  if (!isStripeConfigured()) {
+    return NextResponse.json(
+      { error: "Payments are not configured yet. Set STRIPE_SECRET_KEY." },
+      { status: 503 },
+    );
+  }
+
+  const origin = process.env.NEXTAUTH_URL || req.nextUrl.origin;
+  const purchase = await prisma.creditPurchase.create({
+    data: {
+      userId: user.id,
+      credits: amount,
+      amountCents,
+      status: "PENDING",
+    },
+  });
+
+  try {
+    const stripe = getStripe();
+    const customerId = await ensureStripeCustomer(user.id, dbUser.email);
+    const session = await stripe.checkout.sessions.create({
+      mode: "payment",
+      customer: customerId,
+      line_items: [
+        {
+          quantity: amount,
+          price_data: {
+            currency: "eur",
+            unit_amount: CREDIT_PRICE_CENTS,
+            ...priceDataTaxFields(),
+            product_data: productDataWithTaxCode(
+              "Songs2VID video credit",
+              `1 credit = 1 video upload (${formatCreditPrice(1)} each)`,
+            ),
+          },
+        },
+      ],
+      metadata: {
+        type: "free_top_up",
+        userId: user.id,
+        purchaseId: purchase.id,
+        credits: String(amount),
+      },
+      ...checkoutTaxAndReferenceOptions(user.id),
+      success_url: `${origin}/dashboard/settings?credits=success`,
+      cancel_url: `${origin}/dashboard/settings?credits=cancelled`,
+    });
+
+    await prisma.creditPurchase.update({
+      where: { id: purchase.id },
+      data: { stripeSessionId: session.id },
+    });
+
+    return NextResponse.json({ url: session.url, sessionId: session.id });
+  } catch (err) {
+    await prisma.creditPurchase.update({
+      where: { id: purchase.id },
+      data: { status: "FAILED" },
+    });
+    const message = err instanceof Error ? err.message : "Checkout failed";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

app/api/account/delete/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+import { getSessionUser } from "@/lib/session";
+
+export async function POST() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  await prisma.user.delete({ where: { id: user.id } });
+
+  return NextResponse.json({ ok: true });
+}

app/api/account/quota-extension-request/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createQuotaExtensionRequest, getQuotaExtensionUsage } from "@/lib/quota-extensions";
+import { getSessionUser } from "@/lib/session";
+
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const usage = await getQuotaExtensionUsage(user.id);
+  return NextResponse.json(usage);
+}
+
+export async function POST(req: NextRequest) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  let message = "";
+  try {
+    const body = await req.json();
+    if (typeof body.message === "string") message = body.message;
+  } catch {
+    // optional body
+  }
+
+  try {
+    const result = await createQuotaExtensionRequest(user.id, message);
+    return NextResponse.json(result);
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : "Failed to submit request";
+    return NextResponse.json({ error: msg }, { status: 400 });
+  }
+}

app/api/account/subscribe/route.ts

@@ -0,0 +1,87 @@
+import { NextRequest, NextResponse } from "next/server";
+import { activateProPlan } from "@/lib/billing";
+import { PRO_PRICE_CENTS } from "@/lib/credits";
+import { prisma } from "@/lib/db";
+import { getSessionUser } from "@/lib/session";
+import {
+  checkoutTaxAndReferenceOptions,
+  ensureStripeCustomer,
+  priceDataTaxFields,
+  productDataWithTaxCode,
+} from "@/lib/stripe-checkout";
+import { getStripe, isBillingDevMock, isStripeConfigured } from "@/lib/stripe";
+
+/** Start Pro subscription Checkout (€5/mo) or mock-upgrade in development. */
+export async function POST(req: NextRequest) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  if (user.plan === "PREMIUM") {
+    return NextResponse.json({ error: "Already on Pro." }, { status: 400 });
+  }
+
+  const dbUser = await prisma.user.findUniqueOrThrow({
+    where: { id: user.id },
+    select: { email: true, stripeCustomerId: true },
+  });
+
+  if (isBillingDevMock()) {
+    await activateProPlan(user.id, {
+      stripeCustomerId: dbUser.stripeCustomerId,
+      stripeSubscriptionId: `dev_sub_${Date.now()}`,
+      cardLast4: "4242",
+    });
+    return NextResponse.json({ mocked: true, plan: "PREMIUM" });
+  }
+
+  if (!isStripeConfigured()) {
+    return NextResponse.json(
+      { error: "Payments are not configured yet. Set STRIPE_SECRET_KEY." },
+      { status: 503 },
+    );
+  }
+
+  const origin = process.env.NEXTAUTH_URL || req.nextUrl.origin;
+  const stripe = getStripe();
+  const customerId = await ensureStripeCustomer(user.id, dbUser.email);
+  const priceId = process.env.STRIPE_PRO_PRICE_ID;
+
+  const session = await stripe.checkout.sessions.create({
+    mode: "subscription",
+    customer: customerId,
+    line_items: priceId
+      ? [{ price: priceId, quantity: 1 }]
+      : [
+          {
+            quantity: 1,
+            price_data: {
+              currency: "eur",
+              unit_amount: PRO_PRICE_CENTS,
+              recurring: { interval: "month" },
+              ...priceDataTaxFields(),
+              product_data: productDataWithTaxCode(
+                "Songs2VID Pro",
+                "50 video credits / month · 1080p · API access · Includes Custom Branding, Watermark Positioning, and Bulk Image Matching",
+              ),
+            },
+          },
+        ],
+    metadata: {
+      type: "pro_subscription",
+      userId: user.id,
+    },
+    subscription_data: {
+      metadata: {
+        type: "pro_subscription",
+        userId: user.id,
+      },
+    },
+    ...checkoutTaxAndReferenceOptions(user.id),
+    success_url: `${origin}/dashboard/settings?upgrade=success`,
+    cancel_url: `${origin}/dashboard/settings?upgrade=cancelled`,
+  });
+
+  return NextResponse.json({ url: session.url, sessionId: session.id });
+}

app/api/admin/badges/[id]/route.ts

@@ -0,0 +1,95 @@
+import { NextRequest, NextResponse } from "next/server";
+import { requireAdmin } from "@/lib/admin-auth";
+import { prisma } from "@/lib/db";
+import { normalizeBadgeFields, validateBadgeFields } from "@/lib/footer-badges";
+
+type Ctx = { params: Promise<{ id: string }> };
+
+export async function PATCH(req: NextRequest, ctx: Ctx) {
+  const denied = requireAdmin(req);
+  if (denied) return denied;
+
+  const { id } = await ctx.params;
+
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const existing = await prisma.footerBadge.findUnique({ where: { id } });
+  if (!existing) {
+    return NextResponse.json({ error: "Badge not found" }, { status: 404 });
+  }
+
+  const input = (body ?? {}) as Record<string, unknown>;
+  const patch: {
+    name?: string;
+    embedHtml?: string | null;
+    imageUrl?: string | null;
+    linkUrl?: string | null;
+    isActive?: boolean;
+    sortOrder?: number;
+  } = {};
+
+  if ("name" in input) patch.name = typeof input.name === "string" ? input.name : existing.name;
+  if ("embedHtml" in input) {
+    patch.embedHtml = typeof input.embedHtml === "string" ? input.embedHtml : null;
+  }
+  if ("imageUrl" in input) {
+    patch.imageUrl = typeof input.imageUrl === "string" ? input.imageUrl : null;
+  }
+  if ("linkUrl" in input) {
+    patch.linkUrl = typeof input.linkUrl === "string" ? input.linkUrl : null;
+  }
+  if ("isActive" in input && typeof input.isActive === "boolean") {
+    patch.isActive = input.isActive;
+  }
+  if ("sortOrder" in input && typeof input.sortOrder === "number") {
+    patch.sortOrder = input.sortOrder;
+  }
+
+  const fields = normalizeBadgeFields({
+    name: patch.name ?? existing.name,
+    embedHtml: "embedHtml" in patch ? patch.embedHtml : existing.embedHtml,
+    imageUrl: "imageUrl" in patch ? patch.imageUrl : existing.imageUrl,
+    linkUrl: "linkUrl" in patch ? patch.linkUrl : existing.linkUrl,
+    isActive: patch.isActive ?? existing.isActive,
+    sortOrder: patch.sortOrder ?? existing.sortOrder,
+  });
+
+  // Toggle-only updates should not re-validate empty content
+  const contentChanging =
+    "name" in input || "embedHtml" in input || "imageUrl" in input || "linkUrl" in input;
+  if (contentChanging) {
+    const error = validateBadgeFields(fields);
+    if (error) return NextResponse.json({ error }, { status: 400 });
+  }
+
+  const badge = await prisma.footerBadge.update({
+    where: { id },
+    data: contentChanging
+      ? fields
+      : {
+          ...(patch.isActive !== undefined ? { isActive: patch.isActive } : {}),
+          ...(patch.sortOrder !== undefined ? { sortOrder: fields.sortOrder } : {}),
+        },
+  });
+
+  return NextResponse.json({ badge });
+}
+
+export async function DELETE(req: NextRequest, ctx: Ctx) {
+  const denied = requireAdmin(req);
+  if (denied) return denied;
+
+  const { id } = await ctx.params;
+  const existing = await prisma.footerBadge.findUnique({ where: { id } });
+  if (!existing) {
+    return NextResponse.json({ error: "Badge not found" }, { status: 404 });
+  }
+
+  await prisma.footerBadge.delete({ where: { id } });
+  return NextResponse.json({ ok: true });
+}

app/api/admin/badges/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server";
+import { requireAdmin } from "@/lib/admin-auth";
+import { prisma } from "@/lib/db";
+import { normalizeBadgeFields, validateBadgeFields } from "@/lib/footer-badges";
+
+export async function GET(req: NextRequest) {
+  const denied = requireAdmin(req);
+  if (denied) return denied;
+
+  const badges = await prisma.footerBadge.findMany({
+    orderBy: [{ sortOrder: "asc" }, { createdAt: "asc" }],
+  });
+
+  return NextResponse.json({ badges });
+}
+
+export async function POST(req: NextRequest) {
+  const denied = requireAdmin(req);
+  if (denied) return denied;
+
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const input = (body ?? {}) as Record<string, unknown>;
+  const fields = normalizeBadgeFields({
+    name: typeof input.name === "string" ? input.name : "",
+    embedHtml: typeof input.embedHtml === "string" ? input.embedHtml : null,
+    imageUrl: typeof input.imageUrl === "string" ? input.imageUrl : null,
+    linkUrl: typeof input.linkUrl === "string" ? input.linkUrl : null,
+    isActive: typeof input.isActive === "boolean" ? input.isActive : true,
+    sortOrder: typeof input.sortOrder === "number" ? input.sortOrder : undefined,
+  });
+
+  const error = validateBadgeFields(fields);
+  if (error) return NextResponse.json({ error }, { status: 400 });
+
+  if (fields.sortOrder === 0) {
+    const max = await prisma.footerBadge.aggregate({ _max: { sortOrder: true } });
+    fields.sortOrder = (max._max.sortOrder ?? -1) + 1;
+  }
+
+  const badge = await prisma.footerBadge.create({ data: fields });
+  return NextResponse.json({ badge }, { status: 201 });
+}

app/api/admin/quota-extension-request/[id]/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  approveQuotaExtensionRequest,
+  rejectQuotaExtensionRequest,
+} from "@/lib/quota-extensions";
+
+function isAuthorized(req: NextRequest) {
+  const key = process.env.ADMIN_API_KEY;
+  if (!key) return false;
+  const auth = req.headers.get("authorization");
+  return auth === `Bearer ${key}`;
+}
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  if (!isAuthorized(req)) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const { id } = await params;
+  let action: "approve" | "reject" = "approve";
+  let bonusQuota: number | undefined;
+  let bonusRateLimit: number | undefined;
+  let adminNote: string | undefined;
+
+  try {
+    const body = await req.json();
+    if (body.action === "reject") action = "reject";
+    if (typeof body.bonusQuota === "number" && Number.isFinite(body.bonusQuota)) {
+      bonusQuota = body.bonusQuota;
+    }
+    if (typeof body.bonusRateLimit === "number" && Number.isFinite(body.bonusRateLimit)) {
+      bonusRateLimit = body.bonusRateLimit;
+    }
+    if (typeof body.adminNote === "string") adminNote = body.adminNote;
+  } catch {
+    // defaults
+  }
+
+  try {
+    if (action === "reject") {
+      await rejectQuotaExtensionRequest(id, adminNote);
+    } else {
+      await approveQuotaExtensionRequest(id, { bonusQuota, bonusRateLimit, adminNote });
+    }
+    return NextResponse.json({ ok: true });
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : "Failed to process request";
+    return NextResponse.json({ error: msg }, { status: 400 });
+  }
+}

app/api/admin/reset-credits/route.ts

@@ -0,0 +1,69 @@
+import { NextRequest, NextResponse } from "next/server";
+import { adminResetUserCredits } from "@/lib/billing";
+import { prisma } from "@/lib/db";
+
+/**
+ * Admin utility: reset / adjust a user's credits.
+ * Authorization: Bearer ${ADMIN_API_KEY}
+ *
+ * Body: { userId | email, plan?, monthlyCredits?, creditsUsed?, extraCredits?, clearFreeTopUp? }
+ */
+export async function POST(req: NextRequest) {
+  const adminKey = process.env.ADMIN_API_KEY;
+  if (!adminKey) {
+    return NextResponse.json({ error: "Admin API not configured" }, { status: 503 });
+  }
+
+  const auth = req.headers.get("authorization");
+  if (auth !== `Bearer ${adminKey}`) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  let body: {
+    userId?: string;
+    email?: string;
+    plan?: "FREE" | "PREMIUM";
+    monthlyCredits?: number;
+    creditsUsed?: number;
+    extraCredits?: number;
+    clearFreeTopUp?: boolean;
+  };
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  let userId = body.userId;
+  if (!userId && body.email) {
+    const found = await prisma.user.findUnique({ where: { email: body.email } });
+    if (!found) {
+      return NextResponse.json({ error: "User not found" }, { status: 404 });
+    }
+    userId = found.id;
+  }
+  if (!userId) {
+    return NextResponse.json({ error: "Provide userId or email" }, { status: 400 });
+  }
+
+  const updated = await adminResetUserCredits(userId, {
+    plan: body.plan,
+    monthlyCredits: body.monthlyCredits,
+    creditsUsed: body.creditsUsed,
+    extraCredits: body.extraCredits,
+    clearFreeTopUp: body.clearFreeTopUp,
+  });
+
+  return NextResponse.json({
+    ok: true,
+    user: {
+      id: updated.id,
+      email: updated.email,
+      plan: updated.plan,
+      monthlyCredits: updated.monthlyCredits,
+      creditsUsed: updated.videosUsed,
+      extraCredits: updated.extraCredits,
+      freeTopUpPurchased: updated.freeTopUpPurchased,
+    },
+  });
+}

app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,6 @@
+import NextAuth from "next-auth";
+import { authOptions } from "@/lib/auth";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

app/api/badges/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+
+/** Public: active footer badges for the landing marquee. */
+export async function GET() {
+  const badges = await prisma.footerBadge.findMany({
+    where: { isActive: true },
+    orderBy: [{ sortOrder: "asc" }, { createdAt: "asc" }],
+    select: {
+      id: true,
+      name: true,
+      embedHtml: true,
+      imageUrl: true,
+      linkUrl: true,
+      sortOrder: true,
+    },
+  });
+
+  return NextResponse.json({ badges }, {
+    headers: {
+      "Cache-Control": "public, s-maxage=60, stale-while-revalidate=300",
+    },
+  });
+}

app/api/branding/watermark/route.ts

@@ -0,0 +1,17 @@
+import fs from "fs/promises";
+import { NextResponse } from "next/server";
+import { getWatermarkPath } from "@/lib/storage";
+
+export async function GET() {
+  try {
+    const buf = await fs.readFile(getWatermarkPath());
+    return new NextResponse(buf, {
+      headers: {
+        "Content-Type": "image/png",
+        "Cache-Control": "public, max-age=86400, immutable",
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: "Watermark asset not found" }, { status: 404 });
+  }
+}

app/api/dev/grant-credits/route.ts

@@ -0,0 +1,95 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  activateProPlan,
+  adminResetUserCredits,
+  grantExtraCredits,
+  markFreeTopUpPurchased,
+} from "@/lib/billing";
+import { FREE_TOP_UP_CREDITS } from "@/lib/credits";
+import { isBillingDevMock } from "@/lib/stripe";
+import { getSessionUser } from "@/lib/session";
+
+/**
+ * Local-only billing helpers (no Stripe CLI required).
+ * Enabled when NODE_ENV=development (unless BILLING_DEV_MOCK=false) or BILLING_DEV_MOCK=true.
+ */
+function assertDev() {
+  if (!isBillingDevMock()) {
+    return NextResponse.json({ error: "Not available outside development mock mode" }, { status: 404 });
+  }
+  return null;
+}
+
+export async function POST(req: NextRequest) {
+  const blocked = assertDev();
+  if (blocked) return blocked;
+
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  let body: {
+    action?: string;
+    credits?: number;
+    plan?: "FREE" | "PREMIUM";
+  };
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const action = body.action ?? "grant-credits";
+
+  switch (action) {
+    case "grant-credits": {
+      const credits = Math.floor(Number(body.credits ?? FREE_TOP_UP_CREDITS));
+      if (!Number.isFinite(credits) || credits <= 0) {
+        return NextResponse.json({ error: "Invalid credits" }, { status: 400 });
+      }
+      await grantExtraCredits(user.id, credits);
+      return NextResponse.json({ ok: true, granted: credits });
+    }
+    case "free-top-up": {
+      await markFreeTopUpPurchased(user.id);
+      return NextResponse.json({ ok: true, granted: FREE_TOP_UP_CREDITS });
+    }
+    case "set-pro": {
+      await activateProPlan(user.id, {
+        stripeSubscriptionId: `dev_sub_${Date.now()}`,
+        cardLast4: "4242",
+      });
+      return NextResponse.json({ ok: true, plan: "PREMIUM" });
+    }
+    case "set-free": {
+      await adminResetUserCredits(user.id, { plan: "FREE", creditsUsed: 0 });
+      return NextResponse.json({ ok: true, plan: "FREE" });
+    }
+    case "reset-cycle": {
+      await adminResetUserCredits(user.id, {
+        plan: body.plan,
+        creditsUsed: 0,
+      });
+      return NextResponse.json({ ok: true, reset: true });
+    }
+    default:
+      return NextResponse.json({ error: `Unknown action: ${action}` }, { status: 400 });
+  }
+}
+
+/** Convenience GET for quick browser testing: /api/dev/grant-credits?action=set-pro */
+export async function GET(req: NextRequest) {
+  const blocked = assertDev();
+  if (blocked) return blocked;
+
+  const action = req.nextUrl.searchParams.get("action") ?? "grant-credits";
+  const credits = Number(req.nextUrl.searchParams.get("credits") ?? FREE_TOP_UP_CREDITS);
+
+  const fake = new NextRequest(req.url, {
+    method: "POST",
+    headers: { "content-type": "application/json", cookie: req.headers.get("cookie") ?? "" },
+    body: JSON.stringify({ action, credits }),
+  });
+  return POST(fake);
+}

app/api/fonts/[key]/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs/promises";
+import { CURATED_FONTS, isCuratedFontKey } from "@/lib/fonts";
+import { resolveCuratedFontPath } from "@/lib/fonts-server";
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ key: string }> },
+) {
+  const { key } = await params;
+  if (!isCuratedFontKey(key)) {
+    return NextResponse.json({ error: "Unknown font" }, { status: 404 });
+  }
+
+  const fontPath = resolveCuratedFontPath(key);
+  try {
+    const buf = await fs.readFile(fontPath);
+    const meta = CURATED_FONTS.find((f) => f.key === key)!;
+    return new NextResponse(buf, {
+      headers: {
+        "Content-Type": "font/ttf",
+        "Content-Disposition": `inline; filename="${meta.file}"`,
+        "Cache-Control": "public, max-age=86400, immutable",
+      },
+    });
+  } catch {
+    return NextResponse.json({ error: "Font file not found" }, { status: 404 });
+  }
+}

app/api/jobs/[id]/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/db";
+import { requireAuth } from "@/lib/session";
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { error, user } = await requireAuth();
+  if (error || !user) return error!;
+
+  const { id } = await params;
+
+  const job = await prisma.job.findFirst({
+    where: { id, userId: user.id },
+    include: {
+      items: {
+        orderBy: { audioFilename: "asc" },
+        select: {
+          id: true,
+          audioFilename: true,
+          title: true,
+          description: true,
+          tags: true,
+          privacy: true,
+          categoryId: true,
+          resolution: true,
+          status: true,
+          youtubeVideoId: true,
+          error: true,
+        },
+      },
+    },
+  });
+
+  if (!job) {
+    return NextResponse.json({ error: "Job not found" }, { status: 404 });
+  }
+
+  return NextResponse.json({
+    id: job.id,
+    status: job.status,
+    createdAt: job.createdAt.toISOString(),
+    completedAt: job.completedAt?.toISOString() ?? null,
+    items: job.items,
+  });
+}

app/api/jobs/route.ts

@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from "next/server";
+import { PremiumRequiredError, premiumRequiredResponse } from "@/lib/entitlements";
+import { createVideoJob } from "@/lib/jobs/create-job";
+import { prisma } from "@/lib/db";
+import { requireAuth } from "@/lib/session";
+import type { CreateJobPayload } from "@/lib/types";
+
+export const maxDuration = 120;
+
+export async function POST(req: NextRequest) {
+  const { error, user } = await requireAuth();
+  if (error || !user) return error!;
+
+  const body = (await req.json()) as CreateJobPayload;
+
+  try {
+    const job = await createVideoJob(user, body);
+    return NextResponse.json({ jobId: job.id });
+  } catch (err) {
+    if (err instanceof PremiumRequiredError) {
+      return NextResponse.json(premiumRequiredResponse(err.message), { status: 403 });
+    }
+    const message = err instanceof Error ? err.message : "Failed to create job";
+    const status = message.includes("Quota exceeded") ? 403 : 400;
+    return NextResponse.json({ error: message }, { status });
+  }
+}
+
+export async function GET(req: NextRequest) {
+  const { error, user } = await requireAuth();
+  if (error || !user) return error!;
+
+  const limit = Math.min(Number(req.nextUrl.searchParams.get("limit")) || 20, 100);
+
+  const jobs = await prisma.job.findMany({
+    where: { userId: user.id },
+    orderBy: { createdAt: "desc" },
+    take: limit,
+    include: {
+      items: {
+        select: {
+          id: true,
+          audioFilename: true,
+          title: true,
+          status: true,
+          youtubeVideoId: true,
+          error: true,
+        },
+      },
+    },
+  });
+
+  return NextResponse.json({
+    jobs: jobs.map((job) => ({
+      id: job.id,
+      status: job.status,
+      createdAt: job.createdAt.toISOString(),
+      completedAt: job.completedAt?.toISOString() ?? null,
+      items: job.items,
+    })),
+  });
+}

app/api/quota/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+import { getQuotaInfo } from "@/lib/quota";
+import { getSessionUser } from "@/lib/session";
+
+export async function GET() {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const quota = await getQuotaInfo(user.id);
+  return NextResponse.json(quota);
+}

app/api/stripe/webhook/route.ts

@@ -0,0 +1,255 @@
+import { NextRequest, NextResponse } from "next/server";
+import type Stripe from "stripe";
+import {
+  activateProPlan,
+  applyMonthlyCreditRenewal,
+  downgradeToFreePlan,
+  grantExtraCredits,
+} from "@/lib/billing";
+import { monthlyCreditsForPlan } from "@/lib/credits";
+import { prisma } from "@/lib/db";
+import { getNextMonthlyQuotaReset } from "@/lib/plans";
+import { getStripe } from "@/lib/stripe";
+
+export const runtime = "nodejs";
+
+/** Stripe API 2025+: subscription lives on parent.subscription_details, not invoice.subscription. */
+function subscriptionIdFromInvoice(invoice: Stripe.Invoice): string | null {
+  const legacy = (invoice as Stripe.Invoice & {
+    subscription?: string | Stripe.Subscription | null;
+  }).subscription;
+  if (typeof legacy === "string" && legacy) return legacy;
+  if (legacy && typeof legacy === "object" && "id" in legacy && legacy.id) {
+    return String(legacy.id);
+  }
+
+  const parent = (
+    invoice as Stripe.Invoice & {
+      parent?: {
+        type?: string | null;
+        subscription_details?: { subscription?: string | Stripe.Subscription | null } | null;
+      } | null;
+    }
+  ).parent;
+
+  const fromParent = parent?.subscription_details?.subscription;
+  if (typeof fromParent === "string" && fromParent) return fromParent;
+  if (fromParent && typeof fromParent === "object" && "id" in fromParent && fromParent.id) {
+    return String(fromParent.id);
+  }
+  return null;
+}
+
+async function fulfillFreeTopUp(session: Stripe.Checkout.Session) {
+  const purchaseId = session.metadata?.purchaseId;
+  const userId = session.metadata?.userId;
+  if (!purchaseId || !userId) {
+    console.error("[stripe] free_top_up missing metadata", session.id);
+    return;
+  }
+
+  const purchase = await prisma.creditPurchase.findUnique({ where: { id: purchaseId } });
+  if (!purchase || purchase.userId !== userId) {
+    throw new Error(`Purchase not found: ${purchaseId}`);
+  }
+  if (purchase.status === "COMPLETED") return;
+
+  await grantExtraCredits(userId, purchase.credits);
+
+  await prisma.creditPurchase.update({
+    where: { id: purchaseId },
+    data: {
+      status: "COMPLETED",
+      completedAt: new Date(),
+      stripeSessionId: session.id,
+      stripePaymentIntentId:
+        typeof session.payment_intent === "string"
+          ? session.payment_intent
+          : session.payment_intent?.id ?? null,
+    },
+  });
+}
+
+async function fulfillProCheckout(session: Stripe.Checkout.Session) {
+  const userId = session.metadata?.userId;
+  if (!userId) {
+    console.error("[stripe] pro_subscription missing userId", session.id);
+    return;
+  }
+
+  const subscriptionId =
+    typeof session.subscription === "string"
+      ? session.subscription
+      : session.subscription?.id ?? null;
+
+  const customerId =
+    typeof session.customer === "string" ? session.customer : session.customer?.id ?? null;
+
+  await activateProPlan(userId, {
+    stripeCustomerId: customerId,
+    stripeSubscriptionId: subscriptionId,
+  });
+}
+
+async function handleInvoicePaymentSucceeded(invoice: Stripe.Invoice) {
+  const subscriptionId = subscriptionIdFromInvoice(invoice);
+  if (!subscriptionId) {
+    console.warn("[stripe] invoice.payment_succeeded without subscription id", invoice.id);
+    return;
+  }
+
+  // Skip the first invoice if checkout already activated Pro (billing_reason subscription_create)
+  const user = await prisma.user.findFirst({
+    where: { stripeSubscriptionId: subscriptionId },
+  });
+  if (!user) {
+    // Fallback: metadata on subscription via Stripe retrieve is optional; try customer
+    const customerId =
+      typeof invoice.customer === "string" ? invoice.customer : invoice.customer?.id;
+    if (!customerId) return;
+    const byCustomer = await prisma.user.findFirst({
+      where: { stripeCustomerId: customerId },
+    });
+    if (!byCustomer) return;
+    await applyMonthlyCreditRenewal(byCustomer.id, {
+      plan: "PREMIUM",
+      newMonthlyCredits: monthlyCreditsForPlan("PREMIUM"),
+      quotaResetAt: getNextMonthlyQuotaReset(),
+    });
+    await prisma.user.update({
+      where: { id: byCustomer.id },
+      data: {
+        stripeSubscriptionId: subscriptionId,
+        subscribedAt: byCustomer.subscribedAt ?? new Date(),
+      },
+    });
+    return;
+  }
+
+  // Renewal: rollover unused + new monthly, trim to MAX_CREDIT_CAP (30)
+  await applyMonthlyCreditRenewal(user.id, {
+    plan: "PREMIUM",
+    newMonthlyCredits: monthlyCreditsForPlan("PREMIUM"),
+    quotaResetAt: getNextMonthlyQuotaReset(),
+  });
+}
+
+async function handleSubscriptionDeleted(subscription: Stripe.Subscription) {
+  const user = await prisma.user.findFirst({
+    where: { stripeSubscriptionId: subscription.id },
+  });
+  if (!user) return;
+  await downgradeToFreePlan(user.id);
+}
+
+/** Stripe retries failed invoices; when status is unpaid/canceled, revoke Pro access. */
+async function handleSubscriptionUpdated(subscription: Stripe.Subscription) {
+  const terminal = new Set(["canceled", "unpaid", "incomplete_expired"]);
+  if (!terminal.has(subscription.status)) return;
+
+  const user = await prisma.user.findFirst({
+    where: { stripeSubscriptionId: subscription.id },
+  });
+  if (!user || user.plan !== "PREMIUM") return;
+  await downgradeToFreePlan(user.id);
+}
+
+async function handleInvoicePaymentFailed(invoice: Stripe.Invoice) {
+  const subscriptionId = subscriptionIdFromInvoice(invoice);
+  if (!subscriptionId) return;
+
+  const user = await prisma.user.findFirst({
+    where: {
+      OR: [
+        { stripeSubscriptionId: subscriptionId },
+        ...(typeof invoice.customer === "string"
+          ? [{ stripeCustomerId: invoice.customer }]
+          : invoice.customer?.id
+            ? [{ stripeCustomerId: invoice.customer.id }]
+            : []),
+      ],
+    },
+  });
+  if (!user) return;
+
+  // Soft signal only  Stripe Smart Retries continue. Do not downgrade on first failure.
+  console.warn(
+    "[stripe] invoice.payment_failed",
+    invoice.id,
+    "user",
+    user.id,
+    "attempt",
+    invoice.attempt_count,
+  );
+}
+
+export async function POST(req: NextRequest) {
+  const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET;
+  if (!webhookSecret) {
+    return NextResponse.json({ error: "Webhook not configured" }, { status: 503 });
+  }
+
+  const signature = req.headers.get("stripe-signature");
+  if (!signature) {
+    return NextResponse.json({ error: "Missing signature" }, { status: 400 });
+  }
+
+  const rawBody = await req.text();
+  let event: Stripe.Event;
+
+  try {
+    const stripe = getStripe();
+    event = stripe.webhooks.constructEvent(rawBody, signature, webhookSecret);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Invalid signature";
+    return NextResponse.json({ error: message }, { status: 400 });
+  }
+
+  try {
+    if (event.type === "checkout.session.completed") {
+      const session = event.data.object as Stripe.Checkout.Session;
+      if (session.payment_status === "paid" || session.status === "complete") {
+        const type = session.metadata?.type;
+        if (type === "pro_subscription" || session.mode === "subscription") {
+          await fulfillProCheckout(session);
+        } else if (type === "free_top_up") {
+          await fulfillFreeTopUp(session);
+        } else if (session.metadata?.purchaseId) {
+          // Legacy PAYG purchases: grant metadata credits as extras
+          const userId = session.metadata.userId;
+          const credits = Number(session.metadata.credits);
+          const purchaseId = session.metadata.purchaseId;
+          if (userId && purchaseId && Number.isFinite(credits) && credits > 0) {
+            const purchase = await prisma.creditPurchase.findUnique({
+              where: { id: purchaseId },
+            });
+            if (purchase && purchase.status !== "COMPLETED") {
+              await grantExtraCredits(userId, credits);
+              await prisma.creditPurchase.update({
+                where: { id: purchaseId },
+                data: {
+                  status: "COMPLETED",
+                  completedAt: new Date(),
+                  stripeSessionId: session.id,
+                },
+              });
+            }
+          }
+        }
+      }
+    } else if (event.type === "invoice.payment_succeeded") {
+      await handleInvoicePaymentSucceeded(event.data.object as Stripe.Invoice);
+    } else if (event.type === "invoice.payment_failed") {
+      await handleInvoicePaymentFailed(event.data.object as Stripe.Invoice);
+    } else if (event.type === "customer.subscription.updated") {
+      await handleSubscriptionUpdated(event.data.object as Stripe.Subscription);
+    } else if (event.type === "customer.subscription.deleted") {
+      await handleSubscriptionDeleted(event.data.object as Stripe.Subscription);
+    }
+  } catch (err) {
+    console.error("[stripe] webhook handler error", event.type, event.id, err);
+    return NextResponse.json({ error: "Handler failed" }, { status: 500 });
+  }
+
+  return NextResponse.json({ received: true });
+}

app/api/upload/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from "next/server";
+import { PremiumRequiredError, premiumRequiredResponse } from "@/lib/entitlements";
+import { saveUploadedFile, type UploadFileType } from "@/lib/jobs/create-job";
+import { getSessionUser } from "@/lib/session";
+
+export const maxDuration = 120;
+
+export async function POST(req: NextRequest) {
+  const user = await getSessionUser();
+  if (!user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const formData = await req.formData();
+  const file = formData.get("file") as File | null;
+  const type = formData.get("type") as string | null;
+  const sessionKey = (formData.get("session") as string | null)?.trim() || undefined;
+
+  if (
+    !file ||
+    !type ||
+    (type !== "image" && type !== "audio" && type !== "logo" && type !== "font")
+  ) {
+    return NextResponse.json(
+      { error: "Missing file or type (image | audio | logo | font)" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const result = await saveUploadedFile(user.id, file, type as UploadFileType, user.plan, {
+      sessionKey,
+    });
+    return NextResponse.json(result);
+  } catch (err) {
+    if (err instanceof PremiumRequiredError) {
+      return NextResponse.json(premiumRequiredResponse(err.message), { status: 403 });
+    }
+    const message = err instanceof Error ? err.message : "Upload failed";
+    return NextResponse.json({ error: message }, { status: 400 });
+  }
+}

app/api/v1/jobs/[id]/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from "next/server";
+import { requirePaidApiUser } from "@/lib/api-auth";
+import { prisma } from "@/lib/db";
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { error, user } = await requirePaidApiUser(_req);
+  if (error || !user) return error!;
+
+  const { id } = await params;
+
+  const job = await prisma.job.findFirst({
+    where: { id, userId: user.id },
+    include: {
+      items: {
+        orderBy: { audioFilename: "asc" },
+        select: {
+          id: true,
+          audioFilename: true,
+          title: true,
+          description: true,
+          tags: true,
+          privacy: true,
+          categoryId: true,
+          resolution: true,
+          status: true,
+          youtubeVideoId: true,
+          error: true,
+        },
+      },
+    },
+  });
+
+  if (!job) {
+    return NextResponse.json({ error: "Job not found" }, { status: 404 });
+  }
+
+  return NextResponse.json({
+    id: job.id,
+    status: job.status,
+    createdAt: job.createdAt.toISOString(),
+    completedAt: job.completedAt?.toISOString() ?? null,
+    items: job.items,
+  });
+}

app/api/v1/jobs/batch/route.ts

@@ -0,0 +1,159 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Privacy } from "@prisma/client";
+import { requirePaidApiUser } from "@/lib/api-auth";
+import { PremiumRequiredError, premiumRequiredResponse } from "@/lib/entitlements";
+import { createVideoJob, saveUploadedFile } from "@/lib/jobs/create-job";
+import {
+  applyCreatePlaylistToItems,
+  parseCreatePlaylistInput,
+} from "@/lib/jobs/resolve-playlist";
+import { filenameWithoutExtension } from "@/lib/constants";
+import { mapWithConcurrency } from "@/lib/fs-utils";
+import { getPlanLimits } from "@/lib/plans";
+import { checkQuota } from "@/lib/quota";
+import type { CreateJobPayload, CreatePlaylistRequest, ItemMetadata } from "@/lib/types";
+
+export const maxDuration = 300;
+
+type BatchItemInput = Partial<ItemMetadata> & {
+  filename?: string;
+  title?: string;
+};
+
+function defaultMetadata(title: string): ItemMetadata {
+  return {
+    title,
+    songTitle: null,
+    description: "",
+    tags: "",
+    privacy: "PUBLIC",
+    categoryId: "10",
+    resolution: "1920x1080",
+    notifySubscribers: true,
+    madeForKids: false,
+    embeddable: true,
+    creativeCommons: false,
+    includeWatermark: false,
+    playlistId: null,
+    artist: null,
+  };
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { error, user } = await requirePaidApiUser(req);
+    if (error || !user) return error!;
+
+    const formData = await req.formData();
+    const image = formData.get("image") as File | null;
+    const audioFiles = formData.getAll("audio").filter((f): f is File => f instanceof File);
+    const metadataRaw = formData.get("metadata");
+
+    if (!image || audioFiles.length === 0) {
+      return NextResponse.json(
+        { error: "Provide multipart fields: image (file), audio (one or more files)" },
+        { status: 400 },
+      );
+    }
+
+    const limits = getPlanLimits(user.plan);
+    if (audioFiles.length > limits.maxBatchSize) {
+      return NextResponse.json(
+        { error: `Batch limit exceeded. Your plan allows up to ${limits.maxBatchSize} files per batch.` },
+        { status: 400 },
+      );
+    }
+
+    const quotaCheck = await checkQuota(user.id, audioFiles.length);
+    if (!quotaCheck.ok) {
+      return NextResponse.json({ error: quotaCheck.error }, { status: 403 });
+    }
+
+    let itemMeta: BatchItemInput[] = [];
+    let defaults: Partial<ItemMetadata> = {};
+    let createPlaylist: CreatePlaylistRequest | null = null;
+
+    if (metadataRaw) {
+      try {
+        const parsed = JSON.parse(String(metadataRaw)) as {
+          items?: BatchItemInput[];
+          defaults?: Partial<ItemMetadata>;
+          createPlaylist?: unknown;
+        };
+        itemMeta = parsed.items ?? [];
+        defaults = parsed.defaults ?? {};
+        createPlaylist = parseCreatePlaylistInput(parsed.createPlaylist);
+        if (parsed.createPlaylist && !createPlaylist) {
+          return NextResponse.json(
+            {
+              error:
+                "createPlaylist requires a title. Optional: description, privacy (public|unlisted|private)",
+            },
+            { status: 400 },
+          );
+        }
+      } catch {
+        return NextResponse.json({ error: "metadata must be valid JSON" }, { status: 400 });
+      }
+    }
+
+    const sessionKey = Date.now().toString();
+    const imageUpload = await saveUploadedFile(user.id, image, "image", user.plan, { sessionKey });
+
+    const uploads = await mapWithConcurrency(audioFiles, 4, (audio) =>
+      saveUploadedFile(user.id, audio, "audio", user.plan, { sessionKey }),
+    );
+
+    const builtItems: CreateJobPayload["items"] = uploads.map((upload, i) => {
+      const audio = audioFiles[i];
+      const metaInput = itemMeta[i] ?? itemMeta.find((m) => m.filename === audio.name) ?? {};
+      const base = defaultMetadata(
+        metaInput.title?.trim() || filenameWithoutExtension(audio.name),
+      );
+      const metadata: ItemMetadata = {
+        ...base,
+        ...defaults,
+        ...metaInput,
+        title: (metaInput.title ?? defaults.title ?? base.title).trim(),
+        privacy: (metaInput.privacy ?? defaults.privacy ?? base.privacy) as Privacy,
+      };
+
+      return {
+        audioPath: upload.path,
+        audioFilename: upload.filename,
+        metadata,
+      };
+    });
+
+    const { items, playlist } = await applyCreatePlaylistToItems(user, builtItems, createPlaylist);
+
+    const job = await createVideoJob(user, {
+      imagePath: imageUpload.path,
+      items,
+    });
+
+    return NextResponse.json({
+      jobId: job.id,
+      itemCount: job.items.length,
+      status: job.status,
+      playlist: playlist
+        ? { id: playlist.id, title: playlist.title, privacy: playlist.privacy }
+        : null,
+    });
+  } catch (err) {
+    console.error("Batch upload failed:", err);
+    if (err instanceof PremiumRequiredError) {
+      return NextResponse.json(premiumRequiredResponse(err.message), { status: 403 });
+    }
+    const message = err instanceof Error ? err.message : "Batch upload failed";
+    const status =
+      message.includes("Batch limit exceeded")
+        ? 400
+        : message.includes("Quota exceeded") ||
+            message.includes("Not enough credits") ||
+            message.includes("Payment Required")
+          ? 402
+          : 500;
+    return NextResponse.json({ error: message }, { status });
+  }
+}

app/api/v1/jobs/route.ts

@@ -0,0 +1,97 @@
+import { NextRequest, NextResponse } from "next/server";
+import { requirePaidApiUser } from "@/lib/api-auth";
+import { PremiumRequiredError, premiumRequiredResponse } from "@/lib/entitlements";
+import { createVideoJob } from "@/lib/jobs/create-job";
+import {
+  applyCreatePlaylistToItems,
+  parseCreatePlaylistInput,
+} from "@/lib/jobs/resolve-playlist";
+import { prisma } from "@/lib/db";
+import type { CreateJobPayload } from "@/lib/types";
+
+export async function POST(req: NextRequest) {
+  const { error, user } = await requirePaidApiUser(req);
+  if (error || !user) return error!;
+
+  const body = (await req.json()) as CreateJobPayload & { createPlaylist?: unknown };
+
+  try {
+    const createPlaylist = parseCreatePlaylistInput(body.createPlaylist);
+    if (body.createPlaylist && !createPlaylist) {
+      return NextResponse.json(
+        {
+          error:
+            "createPlaylist requires a title. Optional: description, privacy (public|unlisted|private)",
+        },
+        { status: 400 },
+      );
+    }
+
+    const { items, playlist } = await applyCreatePlaylistToItems(
+      user,
+      body.items,
+      createPlaylist,
+    );
+
+    const job = await createVideoJob(user, {
+      imagePath: body.imagePath,
+      items,
+    });
+
+    return NextResponse.json({
+      jobId: job.id,
+      itemCount: job.items.length,
+      status: job.status,
+      playlist: playlist
+        ? { id: playlist.id, title: playlist.title, privacy: playlist.privacy }
+        : null,
+    });
+  } catch (err) {
+    if (err instanceof PremiumRequiredError) {
+      return NextResponse.json(premiumRequiredResponse(err.message), { status: 403 });
+    }
+    const message = err instanceof Error ? err.message : "Failed to create job";
+    const status =
+      message.includes("Quota exceeded") ||
+      message.includes("Not enough credits") ||
+      message.includes("Payment Required")
+        ? 402
+        : 400;
+    return NextResponse.json({ error: message }, { status });
+  }
+}
+
+export async function GET(req: NextRequest) {
+  const { error, user } = await requirePaidApiUser(req);
+  if (error || !user) return error!;
+
+  const limit = Math.min(Number(req.nextUrl.searchParams.get("limit")) || 20, 100);
+
+  const jobs = await prisma.job.findMany({
+    where: { userId: user.id },
+    orderBy: { createdAt: "desc" },
+    take: limit,
+    include: {
+      items: {
+        select: {
+          id: true,
+          audioFilename: true,
+          title: true,
+          status: true,
+          youtubeVideoId: true,
+          error: true,
+        },
+      },
+    },
+  });
+
+  return NextResponse.json({
+    jobs: jobs.map((job) => ({
+      id: job.id,
+      status: job.status,
+      createdAt: job.createdAt.toISOString(),
+      completedAt: job.completedAt?.toISOString() ?? null,
+      items: job.items,
+    })),
+  });
+}

app/api/v1/playlists/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+import { requirePaidApiUser } from "@/lib/api-auth";
+import { parseCreatePlaylistInput } from "@/lib/jobs/resolve-playlist";
+import { createYouTubePlaylist, listYouTubePlaylists } from "@/lib/youtube/upload";
+
+export async function GET(req: NextRequest) {
+  const { error, user } = await requirePaidApiUser(req);
+  if (error || !user) return error!;
+
+  try {
+    const playlists = await listYouTubePlaylists(user.id);
+    return NextResponse.json({ playlists });
+  } catch (err) {
+    console.error("List playlists failed:", err);
+    const message = err instanceof Error ? err.message : "Failed to list playlists";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  const { error, user } = await requirePaidApiUser(req);
+  if (error || !user) return error!;
+
+  try {
+    const body = await req.json();
+    const input = parseCreatePlaylistInput(body);
+    if (!input) {
+      return NextResponse.json(
+        {
+          error:
+            "Provide JSON body: { title, description?, privacy? } where privacy is public|unlisted|private",
+        },
+        { status: 400 },
+      );
+    }
+
+    const playlist = await createYouTubePlaylist(user.id, input);
+    return NextResponse.json({ playlist });
+  } catch (err) {
+    console.error("Create playlist failed:", err);
+    const message = err instanceof Error ? err.message : "Failed to create playlist";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

app/api/v1/route.ts

@@ -0,0 +1,64 @@
+import { NextResponse } from "next/server";
+import { API_DOCS_URL } from "@/lib/plans";
+
+export async function GET() {
+  return NextResponse.json({
+    name: "Songs2VID API",
+    version: "1.0",
+    authentication: "Authorization: Bearer <api_key>",
+    requirements: ["Pro subscription", "YouTube account connected"],
+    rateLimit: "60 requests per minute per account (plus any approved bonus)",
+    guidance: {
+      recommended:
+        "For most jobs (especially 5+ audio files): POST /api/v1/upload per file, then POST /api/v1/jobs with the returned paths",
+      batch:
+        "POST /api/v1/jobs/batch is for small packs only. Large multipart bodies may fail with 'failed to parse body as FormData'",
+    },
+    endpoints: [
+      {
+        method: "POST",
+        path: "/api/v1/upload",
+        description:
+          "Upload image, audio, PNG logo, or .ttf/.otf font (Pro typography; font ≤10MB)",
+        body: "multipart/form-data: file, type (image|audio|logo|font)",
+      },
+      {
+        method: "POST",
+        path: "/api/v1/jobs",
+        description:
+          "Create a video job from uploaded file paths. Pro: layout templates, blur, watermark, per-item covers",
+        body: "application/json: { imagePath, items[{ audioPath, audioFilename, metadata }] }",
+      },
+      {
+        method: "POST",
+        path: "/api/v1/jobs/batch",
+        description:
+          "One-shot batch for small packs only; large uploads may fail FormData parsing; prefer upload + jobs",
+        body: "multipart/form-data: image, audio[] (repeatable), metadata? (JSON string)",
+      },
+      {
+        method: "GET",
+        path: "/api/v1/playlists",
+        description: "List YouTube playlists for the authenticated Pro account",
+      },
+      {
+        method: "POST",
+        path: "/api/v1/playlists",
+        description: "Create a YouTube playlist",
+        body: "application/json: { title, description?, privacy? (public|unlisted|private) }",
+      },
+      {
+        method: "GET",
+        path: "/api/v1/jobs",
+        description: "List recent jobs",
+        query: "limit (default 20, max 100)",
+      },
+      {
+        method: "GET",
+        path: "/api/v1/jobs/:id",
+        description: "Get job status and item details",
+      },
+    ],
+    docs: API_DOCS_URL,
+  });
+}

app/api/v1/upload/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from "next/server";
+import { requirePaidApiUser } from "@/lib/api-auth";
+import { PremiumRequiredError, premiumRequiredResponse } from "@/lib/entitlements";
+import { saveUploadedFile, type UploadFileType } from "@/lib/jobs/create-job";
+
+export const maxDuration = 120;
+
+export async function POST(req: NextRequest) {
+  const { error, user } = await requirePaidApiUser(req);
+  if (error || !user) return error!;
+
+  const formData = await req.formData();
+  const file = formData.get("file") as File | null;
+  const type = formData.get("type") as string | null;
+
+  if (
+    !file ||
+    !type ||
+    (type !== "image" && type !== "audio" && type !== "logo" && type !== "font")
+  ) {
+    return NextResponse.json(
+      { error: "Provide multipart fields: file, type (image|audio|logo|font)" },
+      { status: 400 },
+    );
+  }
+
+  try {
+    const result = await saveUploadedFile(user.id, file, type as UploadFileType, user.plan);
+    return NextResponse.json(result);
+  } catch (err) {
+    if (err instanceof PremiumRequiredError) {
+      return NextResponse.json(premiumRequiredResponse(err.message), { status: 403 });
+    }
+    const message = err instanceof Error ? err.message : "Upload failed";
+    return NextResponse.json({ error: message }, { status: 400 });
+  }
+}

app/api/youtube/playlists/route.ts

@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from "next/server";
+import { hasProFeatures } from "@/lib/edition";
+import { getSessionUser } from "@/lib/session";
+import { parseCreatePlaylistInput } from "@/lib/jobs/resolve-playlist";
+import { createYouTubePlaylist, listYouTubePlaylists } from "@/lib/youtube/upload";
+
+async function requirePremiumYouTubeUser() {
+  const user = await getSessionUser();
+  if (!user) {
+    return { error: NextResponse.json({ error: "Unauthorized" }, { status: 401 }), user: null };
+  }
+  if (!hasProFeatures(user.plan)) {
+    return {
+      error: NextResponse.json(
+        { error: "Playlist features are available on the Pro plan only" },
+        { status: 403 },
+      ),
+      user: null,
+    };
+  }
+  if (!user.youtubeConnection) {
+    return {
+      error: NextResponse.json({ error: "YouTube account not connected" }, { status: 403 }),
+      user: null,
+    };
+  }
+  return { error: null, user };
+}
+
+export async function GET() {
+  const { error, user } = await requirePremiumYouTubeUser();
+  if (error || !user) return error!;
+
+  try {
+    const playlists = await listYouTubePlaylists(user.id);
+    return NextResponse.json({ playlists });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Failed to list playlists";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  const { error, user } = await requirePremiumYouTubeUser();
+  if (error || !user) return error!;
+
+  try {
+    const body = await req.json();
+    const input = parseCreatePlaylistInput(body);
+    if (!input) {
+      return NextResponse.json(
+        { error: "Provide title, and optionally description and privacy (public|unlisted|private)" },
+        { status: 400 },
+      );
+    }
+
+    const playlist = await createYouTubePlaylist(user.id, input);
+    return NextResponse.json({ playlist });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Failed to create playlist";
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

app/dashboard/history/page.tsx

@@ -0,0 +1,19 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { DashboardShell } from "@/components/DashboardShell";
+import { JobHistory } from "@/components/JobHistory";
+
+export default async function HistoryPage() {
+  const session = await getServerSession(authOptions);
+  if (!session) redirect("/");
+
+  return (
+    <DashboardShell channelTitle={session.user.channelTitle}>
+      <div className="mx-auto max-w-4xl px-6 py-8">
+        <h1 className="mb-6 text-2xl font-bold text-white">History</h1>
+        <JobHistory />
+      </div>
+    </DashboardShell>
+  );
+}

app/dashboard/page.tsx

@@ -0,0 +1,21 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { DashboardShell } from "@/components/DashboardShell";
+import { RecentYouTubeLimitAlert } from "@/components/RecentYouTubeLimitAlert";
+import { UploadForm } from "@/components/UploadForm";
+
+export default async function DashboardPage() {
+  const session = await getServerSession(authOptions);
+  if (!session) redirect("/");
+
+  return (
+    <DashboardShell channelTitle={session.user.channelTitle}>
+      <div className="mx-auto max-w-4xl px-6 py-8">
+        <h1 className="mb-6 text-2xl font-bold text-white">Create Videos</h1>
+        <RecentYouTubeLimitAlert />
+        <UploadForm />
+      </div>
+    </DashboardShell>
+  );
+}

app/dashboard/settings/page.tsx

@@ -0,0 +1,242 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { prisma } from "@/lib/db";
+import { AccountPrivacyActions } from "@/components/AccountPrivacyActions";
+import { CreditPurchasePanel } from "@/components/CreditPurchasePanel";
+import { PlanBillingActions } from "@/components/PlanBillingActions";
+import { DashboardShell } from "@/components/DashboardShell";
+import { UpgradeProButton } from "@/components/UpgradeProButton";
+import { getUserApiKeyStatus } from "@/lib/api-keys";
+import { getApiRateLimitStatus } from "@/lib/api-rate-limit";
+import { ApiKeySettings } from "@/components/ApiKeySettings";
+import { hasProFeatures, isSelfHostedEdition } from "@/lib/edition";
+import { EXTENSION_KIND, getQuotaExtensionUsage } from "@/lib/quota-extensions";
+import { getQuotaInfo } from "@/lib/quota";
+import { isBillingDevMock, isStripeConfigured } from "@/lib/stripe";
+import { CreditPurchaseStatus } from "@prisma/client";
+
+const PLAN_LABELS = {
+  FREE: "Bedroom Producer",
+  PREMIUM: "Pro",
+} as const;
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between gap-4">
+      <dt className="text-gray-400">{label}</dt>
+      <dd className="text-right text-white">{value}</dd>
+    </div>
+  );
+}
+
+export default async function SettingsPage() {
+  const session = await getServerSession(authOptions);
+  if (!session?.user?.email) redirect("/");
+
+  const user = await prisma.user.findUnique({
+    where: { email: session.user.email },
+    include: { youtubeConnection: true },
+  });
+  if (!user) redirect("/");
+
+  const quota = await getQuotaInfo(user.id);
+  const selfHosted = isSelfHostedEdition();
+  const proFeatures = hasProFeatures(user.plan);
+  const recentCreditPurchases = await prisma.creditPurchase.findMany({
+    where: { userId: user.id, status: CreditPurchaseStatus.COMPLETED },
+    orderBy: { completedAt: "desc" },
+    take: 5,
+  });
+  const extensionUsage =
+    !selfHosted && user.plan === "PREMIUM" ? await getQuotaExtensionUsage(user.id) : null;
+  const apiRateExtensionUsage = proFeatures
+    ? await getQuotaExtensionUsage(user.id, EXTENSION_KIND.API_RATE_LIMIT)
+    : null;
+  const apiKeyStatus = proFeatures ? await getUserApiKeyStatus(user.id) : null;
+  const apiRateLimit = proFeatures ? await getApiRateLimitStatus(user.id) : null;
+  const planLabel = selfHosted ? "Self-hosted" : PLAN_LABELS[user.plan];
+  const youtube = user.youtubeConnection;
+  const channelUrl = youtube ? `https://www.youtube.com/channel/${youtube.channelId}` : null;
+
+  return (
+    <DashboardShell channelTitle={youtube?.channelTitle}>
+      <div className="mx-auto max-w-4xl px-6 py-8">
+        <h1 className="mb-6 text-2xl font-bold text-white">Settings</h1>
+
+        <div className="space-y-6">
+          <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
+            <h2 className="mb-4 text-lg font-semibold text-white">Account information</h2>
+            <dl className="space-y-3 text-sm">
+              <InfoRow label="Name" value={user.name || "Not set"} />
+              <InfoRow label="Email" value={user.email} />
+            </dl>
+
+            <div className="mt-6 border-t border-gray-800 pt-6">
+              <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gray-500">
+                YouTube
+              </h3>
+              {youtube ? (
+                <dl className="space-y-3 text-sm">
+                  <InfoRow label="Channel name" value={youtube.channelTitle} />
+                  <InfoRow label="Channel ID" value={youtube.channelId} />
+                </dl>
+              ) : (
+                <p className="text-sm text-red-400">YouTube account not connected.</p>
+              )}
+
+              {channelUrl && (
+                <a
+                  href={channelUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="mt-4 inline-flex rounded bg-accent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-hover"
+                >
+                  Go to your channel
+                </a>
+              )}
+
+              <p className="mt-4 text-sm text-gray-400">
+                To refresh your YouTube permissions,{" "}
+                <Link href="/" className="text-accent hover:underline">
+                  sign out and sign in again
+                </Link>
+                .
+              </p>
+            </div>
+          </section>
+
+          <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
+            <h2 className="mb-4 text-lg font-semibold text-white">Plan &amp; billing</h2>
+
+            <div className="mb-6 rounded border border-gray-800 bg-surface p-4">
+              <div className="flex flex-wrap items-end justify-between gap-2">
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+                    Video quota remaining
+                  </p>
+                  <p className="mt-1 text-2xl font-semibold text-white">
+                    {quota.totalAvailable}
+                    <span className="text-base font-normal text-gray-400">
+                      {" "}
+                      of {quota.limit + quota.extraCredits} videos
+                    </span>
+                  </p>
+                </div>
+                <p className="text-sm text-gray-400">
+                  {quota.used} monthly used
+                  {quota.extraCredits > 0 ? ` · ${quota.extraCredits} extras` : ""}
+                  {quota.bonusQuota > 0 ? ` · +${quota.bonusQuota} bonus` : ""}
+                </p>
+              </div>
+              <div className="mt-3 h-2 overflow-hidden rounded bg-gray-800">
+                <div
+                  className={`h-full rounded ${
+                    quota.totalAvailable <= 0
+                      ? "bg-red-500"
+                      : quota.totalAvailable / Math.max(1, quota.limit + quota.extraCredits) <= 0.2
+                        ? "bg-amber-500"
+                        : "bg-accent"
+                  }`}
+                  style={{
+                    width: `${Math.min(
+                      100,
+                      Math.round(
+                        ((quota.limit + quota.extraCredits - quota.totalAvailable) /
+                          Math.max(1, quota.limit + quota.extraCredits)) *
+                          100,
+                      ),
+                    )}%`,
+                  }}
+                />
+              </div>
+              <p className="mt-2 text-xs text-gray-500">
+                {`Includes monthly + purchased extras · monthly resets on ${quota.resetsIn}`}
+              </p>
+            </div>
+
+            <dl className="space-y-3 text-sm">
+              <InfoRow label="Current plan" value={planLabel} />
+              <InfoRow
+                label="Monthly credits"
+                value={`${quota.monthlyCredits} / cycle`}
+              />
+              <InfoRow label="Extra credits" value={`${quota.extraCredits}`} />
+              {user.plan === "PREMIUM" && user.subscribedAt && (
+                <InfoRow
+                  label="Subscribed since"
+                  value={user.subscribedAt.toLocaleDateString(undefined, {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })}
+                />
+              )}
+              {user.plan === "PREMIUM" && (
+                <InfoRow
+                  label="Payment method"
+                  value={user.cardLast4 ? `•••• ${user.cardLast4}` : "No card on file"}
+                />
+              )}
+              {extensionUsage && (
+                <InfoRow
+                  label="Extension requests (this year)"
+                  value={`${extensionUsage.used} / ${extensionUsage.limit}`}
+                />
+              )}
+              <InfoRow label="Max batch size" value={`${quota.maxBatchSize} videos`} />
+              <InfoRow label="Max resolution" value={`${quota.maxResolutionHeight}p`} />
+            </dl>
+
+            {user.plan === "FREE" ? (
+              <>
+                <p className="mt-4 text-sm text-gray-400">
+                  <UpgradeProButton /> for 50 videos/month, 1080p, API access, and lossless audio.
+                </p>
+                {!selfHosted && (
+                  <CreditPurchasePanel
+                    initialCredits={user.extraCredits}
+                    stripeConfigured={isStripeConfigured() || isBillingDevMock()}
+                    recentPurchases={recentCreditPurchases.map((p) => ({
+                      id: p.id,
+                      credits: p.credits,
+                      amountCents: p.amountCents,
+                      completedAt: p.completedAt?.toISOString() ?? null,
+                    }))}
+                  />
+                )}
+              </>
+            ) : (
+              <>
+                {extensionUsage && <PlanBillingActions initialUsage={extensionUsage} />}
+                <p className="mt-6 border-t border-gray-800 pt-6 text-sm text-gray-400">
+                  Pro uses your monthly allocation first, then any never-expiring extra credits.
+                </p>
+              </>
+            )}
+          </section>
+
+          {proFeatures && apiKeyStatus && apiRateLimit && apiRateExtensionUsage && (
+            <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
+              <h2 className="mb-4 text-lg font-semibold text-white">API access</h2>
+              <ApiKeySettings
+                initialStatus={apiKeyStatus}
+                initialRateLimit={apiRateLimit}
+                initialExtensionUsage={apiRateExtensionUsage}
+              />
+            </section>
+          )}
+
+          <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
+            <h2 className="mb-2 text-lg font-semibold text-white">Account deletion &amp; data</h2>
+            <p className="mb-4 text-sm text-gray-400">
+              Request a copy of your data or permanently delete your account and associated uploads.
+            </p>
+            <AccountPrivacyActions email={user.email} />
+          </section>
+        </div>
+      </div>
+    </DashboardShell>
+  );
+}

app/globals.css

@@ -0,0 +1,319 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply bg-surface-dark text-gray-100 antialiased;
+  }
+}
+
+@layer components {
+  .input-field {
+    @apply w-full rounded border border-gray-600 bg-surface-light px-3 py-2 text-sm text-white placeholder-gray-500 focus:border-accent focus:outline-none;
+  }
+
+  .mockup-upload-box {
+    animation: mockup-border-pulse 3s ease-in-out infinite;
+  }
+
+  .mockup-upload-box-image {
+    animation: mockup-border-pulse 3s ease-in-out infinite,
+      mockup-float 4s ease-in-out infinite;
+  }
+
+  .mockup-upload-box-audio {
+    animation: mockup-border-pulse 3s ease-in-out infinite 0.5s,
+      mockup-float 4s ease-in-out infinite 0.5s;
+  }
+
+  .mockup-icon-image {
+    animation: mockup-icon-glow 3s ease-in-out infinite;
+  }
+
+  .mockup-icon-audio {
+    animation: mockup-icon-glow 3s ease-in-out infinite 0.5s;
+  }
+
+  .mockup-progress-shimmer {
+    animation: mockup-shimmer 2s ease-in-out infinite;
+  }
+
+  .mockup-dot-1 {
+    animation: processing-dot 1.4s ease-in-out infinite;
+  }
+
+  .mockup-dot-2 {
+    animation: processing-dot 1.4s ease-in-out infinite 0.2s;
+  }
+
+  .mockup-dot-3 {
+    animation: processing-dot 1.4s ease-in-out infinite 0.4s;
+  }
+
+  .benefits-flow-line {
+    animation: benefits-flow-pulse 2s ease-in-out infinite;
+  }
+
+  .benefits-process-icon {
+    animation: benefits-process-pulse 2.5s ease-in-out infinite;
+  }
+
+  .benefits-flow-path {
+    stroke-dasharray: 6 8;
+    animation: benefits-flow-dash 2s linear infinite;
+  }
+
+  .mobile-sidebar-panel-open {
+    animation: mobile-sidebar-open 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  }
+
+  .mobile-sidebar-panel-close {
+    animation: mobile-sidebar-close 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
+  }
+
+  .mobile-sidebar-close-btn-open {
+    animation: mobile-sidebar-close-btn-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  }
+
+  .mobile-sidebar-close-btn-close {
+    animation: mobile-sidebar-close-btn-out 0.2s ease-in forwards;
+  }
+
+  .mobile-sidebar-link {
+    @apply relative block overflow-hidden rounded-lg px-4 py-3 text-base font-medium text-gray-300 transition-all duration-300 ease-out;
+  }
+
+  .mobile-sidebar-link::before {
+    content: "";
+    @apply absolute bottom-2 left-0 top-2 w-1 origin-left scale-y-0 rounded-r bg-accent transition-transform duration-300 ease-out;
+  }
+
+  .mobile-sidebar-link:hover {
+    @apply translate-x-1 bg-surface-light text-white shadow-[inset_0_0_0_1px_rgba(74,158,255,0.12)];
+  }
+
+  .mobile-sidebar-link:hover::before {
+    @apply scale-y-100;
+  }
+
+  .mobile-sidebar-link-active {
+    @apply bg-surface-light text-white shadow-[inset_0_0_0_1px_rgba(74,158,255,0.2)];
+  }
+
+  .mobile-sidebar-link-active::before {
+    @apply scale-y-100;
+  }
+
+  .mobile-sidebar-link-danger:hover {
+    @apply bg-red-500/10 text-red-300 shadow-[inset_0_0_0_1px_rgba(239,68,68,0.2)];
+  }
+
+  .mobile-sidebar-link-danger:hover::before {
+    @apply bg-red-400;
+  }
+
+  .badge-marquee {
+    @apply relative w-full overflow-hidden;
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 8%,
+      black 92%,
+      transparent
+    );
+  }
+
+  .badge-marquee-track {
+    @apply flex w-max items-center gap-10;
+    animation: badge-marquee-scroll var(--badge-marquee-duration, 28s) linear infinite;
+  }
+
+  .badge-marquee:hover .badge-marquee-track {
+    animation-play-state: paused;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .badge-marquee-track {
+      animation: none;
+      flex-wrap: wrap;
+      justify-content: center;
+      width: 100%;
+    }
+
+    .badge-marquee-item[aria-hidden="true"] {
+      display: none;
+    }
+  }
+
+  .badge-marquee-item {
+    @apply flex shrink-0 items-center justify-center;
+  }
+
+  .badge-marquee-slot {
+    @apply flex h-14 max-h-14 items-center justify-center;
+  }
+
+  .badge-marquee-slot a,
+  .badge-marquee-link {
+    @apply m-0 inline-flex items-center p-0 leading-none no-underline;
+  }
+
+  .badge-marquee-slot img,
+  .badge-marquee-slot iframe,
+  .badge-marquee-slot svg,
+  .badge-marquee-slot object {
+    display: block !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 0 !important;
+    max-height: 3.5rem !important;
+    width: auto !important;
+    height: auto !important;
+    max-width: min(280px, 70vw) !important;
+    object-fit: contain;
+    vertical-align: middle;
+  }
+}
+
+@keyframes mockup-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+@keyframes mockup-border-pulse {
+  0%,
+  100% {
+    border-color: rgb(75 85 99 / 0.5);
+    box-shadow: 0 0 0 0 rgb(255 255 255 / 0);
+  }
+  50% {
+    border-color: rgb(156 163 175 / 0.7);
+    box-shadow: 0 0 12px 0 rgb(255 255 255 / 0.04);
+  }
+}
+
+@keyframes mockup-icon-glow {
+  0%,
+  100% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes mockup-shimmer {
+  0% {
+    left: -30%;
+    opacity: 0;
+  }
+  30% {
+    opacity: 0.6;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes processing-dot {
+  0%,
+  20% {
+    opacity: 0;
+  }
+  40%,
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes benefits-flow-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes benefits-process-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 28px rgba(239, 68, 68, 0.4);
+  }
+}
+
+@keyframes benefits-flow-dash {
+  to {
+    stroke-dashoffset: -28;
+  }
+}
+
+@keyframes mobile-sidebar-open {
+  from {
+    opacity: 0.85;
+    transform: translateX(100%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+@keyframes mobile-sidebar-close {
+  from {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  to {
+    opacity: 0.85;
+    transform: translateX(100%) scale(0.96);
+  }
+}
+
+@keyframes mobile-sidebar-close-btn-in {
+  from {
+    opacity: 0;
+    transform: scale(0.6) rotate(-90deg);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+@keyframes mobile-sidebar-close-btn-out {
+  from {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.6) rotate(90deg);
+  }
+}
+
+@keyframes badge-marquee-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}

app/jobs/[id]/page.tsx

@@ -0,0 +1,24 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { DashboardShell } from "@/components/DashboardShell";
+import { JobProgress } from "@/components/JobProgress";
+
+type Props = {
+  params: Promise<{ id: string }>;
+};
+
+export default async function JobPage({ params }: Props) {
+  const session = await getServerSession(authOptions);
+  if (!session) redirect("/");
+
+  const { id } = await params;
+
+  return (
+    <DashboardShell channelTitle={session.user.channelTitle}>
+      <div className="mx-auto max-w-4xl px-6 py-8">
+        <JobProgress jobId={id} />
+      </div>
+    </DashboardShell>
+  );
+}

app/layout.tsx

@@ -0,0 +1,93 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Providers } from "./providers";
+import { JsonLd } from "@/components/JsonLd";
+import { Matomo } from "@/components/Matomo";
+
+const inter = Inter({ subsets: ["latin"] });
+
+const SITE_URL = "https://songs2vid.com";
+const SITE_NAME = "Songs2VID";
+const DEFAULT_TITLE =
+  "Songs2VID - Fast Audio to Video Converter for YouTube | TunesToTube Alternative";
+const DEFAULT_DESCRIPTION =
+  "Convert MP3, WAV, and audio files into YouTube videos instantly. The fastest, privacy-focused online tool to upload music, beats, and podcasts directly to YouTube.";
+const OG_TITLE = "Songs2VID - Fast Audio to Video Converter for YouTube";
+const OG_DESCRIPTION =
+  "Convert MP3 & audio files into YouTube videos instantly without heavy editing.";
+const TWITTER_DESCRIPTION = "Convert MP3 & audio files into YouTube videos instantly.";
+
+export const metadata: Metadata = {
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: DEFAULT_TITLE,
+    template: `%s | ${SITE_NAME}`,
+  },
+  description: DEFAULT_DESCRIPTION,
+  keywords: [
+    "mp3 to youtube",
+    "audio to video converter",
+    "upload audio to youtube",
+    "tunestotube alternative",
+    "song to video",
+    "podcast to youtube",
+    "convert mp3 to mp4",
+  ],
+  authors: [{ name: SITE_NAME, url: SITE_URL }],
+  creator: SITE_NAME,
+  publisher: SITE_NAME,
+  applicationName: SITE_NAME,
+  alternates: {
+    canonical: SITE_URL,
+  },
+  openGraph: {
+    title: OG_TITLE,
+    description: OG_DESCRIPTION,
+    url: SITE_URL,
+    siteName: SITE_NAME,
+    type: "website",
+    locale: "en_US",
+    images: [
+      {
+        url: "/logo.png",
+        width: 512,
+        height: 512,
+        alt: SITE_NAME,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: OG_TITLE,
+    description: TWITTER_DESCRIPTION,
+    images: ["/logo.png"],
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+    },
+  },
+  icons: {
+    icon: "/favicon.png",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className} suppressHydrationWarning>
+        <JsonLd />
+        <Matomo />
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,94 @@
+import Link from "next/link";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { BenefitsSection } from "@/components/BenefitsSection";
+import { DownloadSection } from "@/components/DownloadSection";
+import { LandingNavbar } from "@/components/LandingNavbar";
+import { SignInButton } from "@/components/SignInButton";
+import { PricingSection } from "@/components/PricingSection";
+import { StepsSection } from "@/components/StepsSection";
+import { Footer } from "@/components/Footer";
+import { SupportSection } from "@/components/SupportSection";
+
+export default async function HomePage() {
+  const session = await getServerSession(authOptions);
+
+  return (
+    <main className="min-h-screen">
+      <section className="relative min-h-dvh overflow-hidden">
+        <video
+          autoPlay
+          muted
+          loop
+          playsInline
+          className="absolute inset-0 h-full w-full object-cover"
+          aria-hidden="true"
+        >
+          <source src="/bg-video.mp4" type="video/mp4" />
+        </video>
+        <div className="absolute inset-0 bg-black/55" aria-hidden="true" />
+        <div
+          className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/40 to-black/80"
+          aria-hidden="true"
+        />
+
+        <LandingNavbar />
+
+        {/* Purpose + brand above the fold for Google OAuth verification */}
+        <div className="relative z-10 mx-auto flex min-h-dvh max-w-3xl flex-col justify-center px-6 pb-16 pt-28 text-center">
+          <h1 className="text-5xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
+            <span className="text-white">Songs</span>
+            <span className="text-red-400">2VID</span>
+          </h1>
+          <p className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-gray-200 sm:text-lg md:text-xl">
+            Convert MP3, WAV, and audio files into YouTube videos instantly — a fast, privacy-focused
+            audio to video converter and TunesToTube alternative that uploads music, beats, and
+            podcasts directly to your channel.
+          </p>
+
+          <div className="mt-10 flex flex-col items-center gap-3">
+            {session ? (
+              <Link
+                href="/dashboard"
+                className="inline-flex items-center gap-2 rounded bg-accent px-8 py-3.5 font-medium text-white transition-all duration-300 hover:scale-[1.02] hover:bg-accent-hover hover:shadow-lg hover:shadow-accent/20"
+              >
+                Go to Dashboard
+              </Link>
+            ) : (
+              <>
+                <SignInButton large />
+                <p className="max-w-md text-xs leading-relaxed text-gray-400">
+                  By clicking Continue with Google, you accept our{" "}
+                  <Link
+                    href="/terms"
+                    className="text-gray-300 underline-offset-2 transition-colors hover:text-white hover:underline"
+                  >
+                    Terms of Service
+                  </Link>{" "}
+                  and{" "}
+                  <Link
+                    href="/privacy"
+                    className="text-gray-300 underline-offset-2 transition-colors hover:text-white hover:underline"
+                  >
+                    Privacy Policy
+                  </Link>
+                  .
+                </p>
+              </>
+            )}
+          </div>
+        </div>
+      </section>
+
+      <StepsSection />
+      <BenefitsSection />
+
+      <DownloadSection />
+
+      <PricingSection />
+
+      <SupportSection />
+      <Footer />
+    </main>
+  );
+}

app/privacy/page.tsx

@@ -0,0 +1,315 @@
+import type { Metadata } from "next";
+import { LegalPageLayout } from "@/components/LegalPageLayout";
+import { LEGAL_OPERATOR } from "@/lib/legal/constants";
+
+export const metadata: Metadata = {
+  title: "Privacy Policy",
+  description: "How Songs2VID collects, uses, and protects your personal data.",
+  alternates: { canonical: "https://songs2vid.com/privacy" },
+};
+
+export default function PrivacyPage() {
+  return (
+    <LegalPageLayout
+      title="Privacy Policy"
+      description="How we handle your personal data when you use Songs2VID."
+    >
+      <h2>1. Overview</h2>
+      <p>
+        This Privacy Policy explains how {LEGAL_OPERATOR.name} (&quot;we&quot;, &quot;us&quot;)
+        processes personal data when you use our website, hosted cloud service, and related features
+        that convert audio and images into videos for upload to YouTube.
+      </p>
+      <p>
+        We process personal data in accordance with applicable data protection laws, including the
+        General Data Protection Regulation (GDPR) where it applies.
+      </p>
+
+      <h2>2. Data controller</h2>
+      <p>
+        {LEGAL_OPERATOR.legalName}
+        <br />
+        {LEGAL_OPERATOR.address}
+        <br />
+        {LEGAL_OPERATOR.city}
+        <br />
+        Email: <a href={`mailto:${LEGAL_OPERATOR.email}`}>{LEGAL_OPERATOR.email}</a>
+      </p>
+
+      <h2>3. What data we collect</h2>
+      <h3>3.1 Account and authentication data</h3>
+      <p>When you sign in with Google, we receive and store:</p>
+      <ul>
+        <li>Your name, email address, and profile image (from Google)</li>
+        <li>OAuth tokens required to authenticate your session</li>
+        <li>YouTube connection data, including channel ID and title</li>
+        <li>
+          Encrypted YouTube API access and refresh tokens needed to upload videos, create or list
+          playlists, and manage related YouTube actions you request
+        </li>
+      </ul>
+
+      <h3>3.2 Uploaded content and job data</h3>
+      <p>When you use the service, we temporarily process:</p>
+      <ul>
+        <li>Image and audio files you upload (including optional per-track cover images)</li>
+        <li>Optional custom watermark assets (text, PNG logo, or font files)</li>
+        <li>Generated video files prior to or during YouTube upload</li>
+        <li>
+          Per-video metadata you provide (title, artist, description, tags, privacy, category,
+          resolution, layout, watermark settings, Made for Kids / embedding / license flags, etc.)
+        </li>
+        <li>
+          Embedded audio tag metadata (for example ID3 title/artist/album) when we read it from
+          uploaded MP3 files to help prefill fields
+        </li>
+        <li>Playlist titles and IDs when you create or attach YouTube playlists through the Service</li>
+      </ul>
+
+      <h3>3.3 Usage, API, and technical data</h3>
+      <ul>
+        <li>
+          Plan type, monthly credit allocation, credits used, purchased extra credits, quota reset
+          dates, and job processing status
+        </li>
+        <li>
+          Quota reset / extension and API rate-limit extension request history (Pro) when you submit
+          a request
+        </li>
+        <li>
+          API key material for Pro users: we store a cryptographic hash and a short non-secret
+          prefix; the full key is shown once at creation and is not stored in plaintext
+        </li>
+        <li>IP address, browser type, device information, and request logs</li>
+        <li>Error reports and operational diagnostics</li>
+        <li>
+          Website and product analytics events collected via Matomo (self-hosted at
+          analytics.atakanozban.com) to understand traffic and improve the Service — see section
+          10
+        </li>
+      </ul>
+
+      <h3>3.4 Payment data</h3>
+      <p>
+        If you purchase a Pro subscription or Free-plan extra credits, payment processing is handled
+        by Stripe. We do not store full payment card details on our servers. We may receive and store
+        billing status, Stripe customer and subscription identifiers, Checkout session or payment
+        references, purchase amounts, and credit pack size for fulfilled top-ups.
+      </p>
+
+      <h2>4. Why we process your data</h2>
+      <ul>
+        <li>
+          <strong>Contract performance:</strong> to provide video encoding, metadata handling,
+          playlist actions, API access, and YouTube upload features you request
+        </li>
+        <li>
+          <strong>Legitimate interests:</strong> to secure our service, prevent abuse, improve
+          reliability, and enforce our terms
+        </li>
+        <li>
+          <strong>Legal obligations:</strong> where required by tax, accounting, or regulatory law
+        </li>
+        <li>
+          <strong>Consent:</strong> where you have given explicit consent, such as optional
+          marketing communications if offered
+        </li>
+      </ul>
+
+      <h2>5. Third-party services</h2>
+      <p>We use trusted third parties to operate Songs2VID, including:</p>
+      <ul>
+        <li>
+          <strong>Google / YouTube:</strong> authentication and video uploads via Google OAuth and
+          the YouTube Data API. Your use of Google and YouTube is also subject to{" "}
+          <a
+            href="https://policies.google.com/privacy"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Google&apos;s Privacy Policy
+          </a>
+          ,{" "}
+          <a
+            href="https://www.youtube.com/t/terms"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            YouTube Terms of Service
+          </a>
+          , and related Google API terms
+        </li>
+        <li>
+          <strong>Hosting and infrastructure providers:</strong> servers, databases, queues, and
+          storage
+        </li>
+        <li>
+          <strong>Stripe:</strong> Pro subscriptions, Free-plan credit top-ups, and related billing
+          webhooks (
+          <a href="https://stripe.com/privacy" target="_blank" rel="noopener noreferrer">
+            Stripe Privacy Policy
+          </a>
+          )
+        </li>
+        <li>
+          <strong>Matomo (self-hosted analytics):</strong> privacy-friendly analytics we operate at
+          analytics.atakanozban.com to measure visits and improve Songs2VID. Analytics data stays on
+          infrastructure we control; we do not sell it to advertising networks.
+        </li>
+      </ul>
+      <p>
+        These providers process data only as necessary to deliver their services and under
+        appropriate contractual safeguards where required.
+      </p>
+
+      <h2>6. Google / YouTube user data (Limited Use)</h2>
+      <p>
+        Songs2VID&apos;s use and transfer to any other app of information received from Google APIs
+        will adhere to the{" "}
+        <a
+          href="https://developers.google.com/terms/api-services-user-data-policy"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Google API Services User Data Policy
+        </a>
+        , including the Limited Use requirements.
+      </p>
+      <p>
+        We request Google OAuth access (including the YouTube Data API scope needed to upload videos
+        and manage playlists on your connected channel) solely to provide prominent, user-facing
+        features of Songs2VID: signing you in, connecting your channel, encoding your media, uploading
+        videos you create, and creating or listing playlists you request. We do not use Google user
+        data for advertising, credit scoring, or unrelated profiling.
+      </p>
+      <p>
+        We do not sell, share, transfer, or disclose Google user data obtained via Google OAuth /
+        YouTube APIs to third parties, except as needed to operate the Service infrastructure under
+        our control or when required by law. Google / YouTube themselves process data when we call
+        their APIs on your behalf to perform actions you initiate.
+      </p>
+      <p>
+        You can revoke Songs2VID&apos;s access to your Google account at any time in{" "}
+        <a
+          href="https://security.google.com/settings/security/permissions"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Google Account → Security → Third-party access
+        </a>
+        . After revocation (or when tokens can no longer be refreshed), we will stop using those
+        credentials and delete or invalidate stored YouTube OAuth tokens and related connection data
+        associated with that consent, subject to short-term backup or security logs and any legal
+        retention duties.
+      </p>
+
+      <h2>7. Data retention and account deletion</h2>
+      <ul>
+        <li>
+          Uploaded source files and generated outputs are retained only as long as needed to complete
+          your jobs (typically removed after successful processing/upload or when no longer required)
+        </li>
+        <li>Account data is kept while your account remains active</li>
+        <li>Billing records may be retained as required by law</li>
+        <li>Logs are retained for a limited period for security and troubleshooting</li>
+        <li>
+          API key hashes are removed when you revoke the key, downgrade from Pro (where applicable),
+          or delete your account
+        </li>
+      </ul>
+      <p>
+        You may delete your account from <strong>Dashboard → Settings</strong> (account deletion
+        control) or by emailing{" "}
+        <a href={`mailto:${LEGAL_OPERATOR.email}`}>{LEGAL_OPERATOR.email}</a>. Deletion removes
+        account and connection data from active systems subject to legal retention obligations
+        (for example certain billing records). Cancelling a subscription does not by itself delete
+        your account.
+      </p>
+
+      <h2>8. Self-hosted deployments</h2>
+      <p>
+        If you deploy Songs2VID on your own infrastructure, you are the data controller for data
+        processed on your instance. This Privacy Policy applies to the hosted cloud service
+        operated by us, not to independent self-hosted installations unless we provide managed
+        hosting for you under contract.
+      </p>
+
+      <h2>9. Your rights</h2>
+      <p>Depending on your location, you may have the right to:</p>
+      <ul>
+        <li>Access the personal data we hold about you</li>
+        <li>Request correction or deletion</li>
+        <li>Restrict or object to certain processing</li>
+        <li>Data portability</li>
+        <li>Withdraw consent where processing is consent-based</li>
+        <li>
+          Lodge a complaint with a supervisory authority (in Hungary, the Nemzeti Adatvédelmi és
+          Információszabadság Hatóság — NAIH)
+        </li>
+      </ul>
+      <p>
+        To exercise these rights, contact{" "}
+        <a href={`mailto:${LEGAL_OPERATOR.email}`}>{LEGAL_OPERATOR.email}</a>, or use in-product
+        account deletion where available. You may also revoke Google access as described in section
+        6.
+      </p>
+
+      <h2>10. Cookies, analytics, and local storage</h2>
+      <p>
+        We use essential cookies and similar technologies for authentication, session management,
+        and security.
+      </p>
+      <p>
+        We also use <strong>Matomo</strong>, a self-hosted analytics tool on{" "}
+        <code>analytics.atakanozban.com</code>, on our website (including the landing page and
+        dashboard) and documentation site. Matomo helps us understand how people use Songs2VID so we
+        can improve functionality, reliability, and content. Typical data includes pages viewed,
+        approximate location derived from IP, device/browser type, referring site, and interaction
+        events. We configure Matomo for our domains under <code>*.songs2vid.com</code>.
+      </p>
+      <p>
+        We collect this analytics data to improve the Service, not to sell personal profiles to
+        advertisers. The legal basis is our legitimate interest in operating and improving
+        Songs2VID (and consent where required by local law). You can block analytics with browser
+        settings, extensions, or Do Not Track / equivalent controls where supported. For rights
+        requests related to analytics data, contact{" "}
+        <a href={`mailto:${LEGAL_OPERATOR.email}`}>{LEGAL_OPERATOR.email}</a>.
+      </p>
+
+      <h2>11. Security</h2>
+      <p>
+        We implement appropriate technical and organizational measures to protect your data,
+        including encryption in transit, encrypted storage of YouTube OAuth tokens at rest, access
+        controls, and isolated processing environments. No method of transmission or storage is
+        100% secure.
+      </p>
+
+      <h2>12. International transfers</h2>
+      <p>
+        If data is transferred outside your country, we ensure appropriate safeguards such as
+        standard contractual clauses or equivalent mechanisms where required by law. Google, Stripe,
+        and infrastructure providers may process data in other countries as described in their
+        policies.
+      </p>
+
+      <h2>13. Children</h2>
+      <p>
+        Songs2VID is not directed at children under 16. We do not knowingly collect personal data
+        from children. If you believe a child has provided us data, please contact us.
+      </p>
+
+      <h2>14. Changes to this policy</h2>
+      <p>
+        We may update this Privacy Policy from time to time. Material changes will be posted on
+        this page with an updated effective date. If we change how we use Google user data, we will
+        update this policy and, where required, notify you or obtain renewed consent.
+      </p>
+
+      <h2>15. Contact</h2>
+      <p>
+        Questions about this Privacy Policy or our privacy practices:{" "}
+        <a href={`mailto:${LEGAL_OPERATOR.email}`}>{LEGAL_OPERATOR.email}</a>
+      </p>
+    </LegalPageLayout>
+  );
+}

app/providers.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SessionProvider } from "next-auth/react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <SessionProvider>{children}</SessionProvider>;
+}

app/refund/page.tsx

@@ -0,0 +1,119 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { LegalPageLayout } from "@/components/LegalPageLayout";
+import { LEGAL_OPERATOR } from "@/lib/legal/constants";
+
+export const metadata: Metadata = {
+  title: "Refund Policy",
+  description: "Refund and cancellation policy for Songs2VID paid plans.",
+  alternates: { canonical: "https://songs2vid.com/refund" },
+};
+
+export default function RefundPage() {
+  return (
+    <LegalPageLayout
+      title="Refund Policy"
+      description="Our policy on refunds, cancellations, and billing for paid plans."
+    >
+      <h2>1. Overview</h2>
+      <p>
+        This Refund Policy explains how refunds and cancellations work for paid Songs2VID plans and
+        credit purchases. The free monthly Bedroom Producer allocation does not involve payment and
+        is not subject to refunds; optional Free-plan extra credit purchases are covered in section
+        2.
+      </p>
+
+      <h2>2. Free plan and extra credits</h2>
+      <p>
+        The Bedroom Producer (Free) monthly allocation is provided at no charge. Free users may
+        optionally purchase extra video credits (currently €0.25 each, 1–15 per checkout, Free extras
+        balance capped at 15). Once extra credits are granted to your account, those one-time
+        purchases are <strong>generally non-refundable</strong>, except where mandatory consumer law
+        requires otherwise. Credits trimmed under the account accumulation cap (see our{" "}
+        <Link href="/terms">Terms of Service</Link>) are not refundable.
+      </p>
+
+      <h2>3. Pro subscriptions</h2>
+      <h3>3.1 Billing cycle</h3>
+      <p>
+        Pro plans are billed on a recurring monthly basis unless otherwise stated at checkout.
+        Your subscription renews automatically until cancelled.
+      </p>
+
+      <h3>3.2 14-day refund window</h3>
+      <p>
+        If you are a new Pro subscriber, you may request a full refund within <strong>14 days</strong> of
+        your initial purchase, provided you have not substantially consumed paid entitlements
+        (for example, a large portion of your monthly video quota or premium-only features).
+      </p>
+
+      <h3>3.3 After the refund window</h3>
+      <p>
+        After 14 days, subscription fees are generally non-refundable for the current billing
+        period. You may cancel at any time to prevent future renewals. Access typically continues
+        until the end of the paid period.
+      </p>
+
+      <h3>3.4 Cancellation</h3>
+      <p>
+        You can cancel your subscription through your account billing settings (choose{" "}
+        <strong>cancel immediately</strong> or <strong>at the end of the billing period</strong>) or
+        via the Stripe customer portal / by contacting{" "}
+        <a href={`mailto:${LEGAL_OPERATOR.email}`}>{LEGAL_OPERATOR.email}</a>. Cancelling at period
+        end keeps Pro access until the paid period finishes and stops future renewals. Cancelling
+        immediately ends Pro access and moves you to the Free plan right away (including loss of Pro
+        API access). Cancellation does not automatically delete your account; use{" "}
+        <strong>Dashboard → Settings</strong> or contact us if you want permanent account deletion.
+      </p>
+
+      <h2>4. Enterprise and custom agreements</h2>
+      <p>
+        Enterprise, managed cloud, and paid self-hosted setup fees are governed by the individual
+        quote or contract signed with us. Refund terms for those services are specified in your
+        agreement. Contact{" "}
+        <a href={`mailto:${LEGAL_OPERATOR.salesEmail}`}>{LEGAL_OPERATOR.salesEmail}</a> for
+        contract-related billing questions.
+      </p>
+
+      <h2>5. Non-refundable situations</h2>
+      <p>Refunds are generally not provided when:</p>
+      <ul>
+        <li>The refund request is made outside the applicable refund window</li>
+        <li>The account was terminated for violation of our <Link href="/terms">Terms of Service</Link></li>
+        <li>The issue is caused by third-party services outside our control (e.g. YouTube API outages, Google account restrictions)</li>
+        <li>You simply changed your mind after substantial use of paid quota or features</li>
+        <li>Purchased Free-plan extra credits have already been granted to your account</li>
+        <li>Credits expired or were trimmed under the 30-credit accumulation cap</li>
+        <li>One-time setup or license fees after delivery of agreed setup work, unless required by law or contract</li>
+      </ul>
+
+      <h2>6. Chargebacks</h2>
+      <p>
+        If you believe a charge is incorrect, please contact us before initiating a chargeback so
+        we can resolve the issue promptly. Unjustified chargebacks may result in account suspension.
+      </p>
+
+      <h2>7. How to request a refund</h2>
+      <p>Email us at <a href={`mailto:${LEGAL_OPERATOR.email}`}>{LEGAL_OPERATOR.email}</a> with:</p>
+      <ul>
+        <li>Your account email address</li>
+        <li>Date of purchase and invoice or transaction reference if available</li>
+        <li>Reason for the refund request</li>
+      </ul>
+      <p>We aim to respond within 5 business days. Approved refunds are issued to the original payment method where possible.</p>
+
+      <h2>8. Consumer rights</h2>
+      <p>
+        Nothing in this policy limits mandatory statutory rights you may have as a consumer under
+        applicable law, including withdrawal rights where required by EU or local consumer
+        protection regulations.
+      </p>
+
+      <h2>9. Changes</h2>
+      <p>
+        We may update this Refund Policy from time to time. The version published on this page
+        applies to purchases made after the effective date shown at the top.
+      </p>
+    </LegalPageLayout>
+  );
+}

app/robots.ts

@@ -0,0 +1,12 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+      disallow: ["/admin", "/api/admin"],
+    },
+    sitemap: "https://songs2vid.com/sitemap.xml",
+  };
+}

app/sitemap.ts

@@ -0,0 +1,20 @@
+import type { MetadataRoute } from "next";
+
+const SITE_URL = "https://songs2vid.com";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: SITE_URL,
+      lastModified: new Date(),
+      changeFrequency: "daily",
+      priority: 1.0,
+    },
+    {
+      url: `${SITE_URL}/privacy`,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.3,
+    },
+  ];
+}

app/terms/page.tsx

@@ -0,0 +1,262 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { LegalPageLayout } from "@/components/LegalPageLayout";
+import { LEGAL_OPERATOR } from "@/lib/legal/constants";
+
+export const metadata: Metadata = {
+  title: "Terms of Service",
+  description: "Terms and conditions for using the Songs2VID hosted service.",
+  alternates: { canonical: "https://songs2vid.com/terms" },
+};
+
+export default function TermsPage() {
+  return (
+    <LegalPageLayout
+      title="Terms of Service"
+      description="Please read these terms carefully before using Songs2VID."
+    >
+      <h2>1. Agreement</h2>
+      <p>
+        These Terms of Service (&quot;Terms&quot;) govern your access to and use of the Songs2VID
+        website and hosted cloud service (the &quot;Service&quot;) operated by{" "}
+        {LEGAL_OPERATOR.legalName} (&quot;we&quot;, &quot;us&quot;). By creating an account or using
+        the Service, you agree to these Terms.
+      </p>
+      <p>
+        If you do not agree, do not use the Service. If you self-host the open-source software on
+        your own infrastructure without using our hosted Service, these Terms apply only to the
+        extent you use our website, support channels, or paid services we provide.
+      </p>
+
+      <h2>2. The Service</h2>
+      <p>
+        Songs2VID converts user-provided images and audio files into videos and can upload them to
+        YouTube using your connected Google/YouTube account. Features, limits, and availability
+        depend on your plan.
+      </p>
+      <ul>
+        <li>
+          <strong>Bedroom Producer (Free):</strong> 10 video credits per calendar month, 720p, MP3,
+          optional Songs2VID watermark (bottom-right), one static cover image per batch; may purchase
+          limited extra credits as described in Clause 8.2
+        </li>
+        <li>
+          <strong>Independent Artist (Pro):</strong> 50 video credits per month, higher resolution and
+          batch limits, API access, custom watermark/logo/typography, blurred art-track layouts with
+          position controls, unique image per
+          track in bulk uploads, and other features as described on our pricing page (€5/month
+          unless otherwise stated at checkout)
+        </li>
+        <li>
+          <strong>Enterprise (Record Label / Studio):</strong> custom terms as agreed in writing
+        </li>
+      </ul>
+      <p>
+        We may modify features, limits, or pricing with reasonable notice where required. The
+        open-source software is provided separately under its applicable open-source license.
+      </p>
+
+      <h2>3. Eligibility and accounts</h2>
+      <ul>
+        <li>You must be at least 16 years old or the age required in your jurisdiction</li>
+        <li>You must have a valid Google account and authorized access to the YouTube channel you connect</li>
+        <li>You are responsible for maintaining the security of your account and OAuth connection</li>
+        <li>You must provide accurate information and promptly update it if it changes</li>
+      </ul>
+
+      <h2>4. Your content and responsibilities</h2>
+      <p>You retain ownership of content you upload. You grant us a limited license to host, process, encode, transmit, and upload your content solely to provide the Service.</p>
+      <p>You represent and warrant that:</p>
+      <ul>
+        <li>You own or have all necessary rights to the content you upload</li>
+        <li>Your content and use of the Service comply with applicable law and YouTube policies</li>
+        <li>Your content does not infringe third-party rights or contain unlawful material</li>
+        <li>You have configured metadata (including &quot;Made for Kids&quot; and privacy settings) accurately</li>
+      </ul>
+      <p>
+        You are solely responsible for content published to your YouTube channel through the
+        Service.
+      </p>
+
+      <h2>5. Acceptable use</h2>
+      <p>You agree not to:</p>
+      <ul>
+        <li>Use the Service for unlawful, harmful, or abusive purposes</li>
+        <li>Upload malware, attempt unauthorized access, or interfere with the Service</li>
+        <li>Circumvent quotas, plan limits, or technical restrictions</li>
+        <li>Resell or commercially exploit the hosted Service without authorization</li>
+        <li>Use the Service in a way that violates Google, YouTube, or third-party terms</li>
+      </ul>
+      <p>We may suspend or terminate access for violations or risks to the Service or other users.</p>
+
+      <h2>6. YouTube and third-party services</h2>
+      <p>
+        The Service integrates with Google OAuth and the YouTube Data API to sign you in, connect
+        your channel, upload videos you create, and create or list playlists you request. Your use
+        of those services is also subject to{" "}
+        <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">
+          Google Terms of Service
+        </a>
+        ,{" "}
+        <a href="https://www.youtube.com/t/terms" target="_blank" rel="noopener noreferrer">
+          YouTube Terms of Service
+        </a>
+        ,{" "}
+        <a
+          href="https://developers.google.com/youtube/terms/api-services-terms-of-service"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          YouTube API Services Terms
+        </a>
+        , and{" "}
+        <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">
+          Google&apos;s Privacy Policy
+        </a>
+        . We are not responsible for changes, outages, quota limits, or enforcement actions taken by
+        Google or YouTube. How we handle Google user data is described in our{" "}
+        <Link href="/privacy">Privacy Policy</Link>.
+      </p>
+
+      <h2>7. Open-source software</h2>
+      <p>
+        Portions of Songs2VID are available as open-source software. Self-hosting is permitted under
+        the applicable open-source license. The hosted Service, enterprise features, managed
+        infrastructure, and certain premium capabilities may require a separate commercial license
+        or subscription.
+      </p>
+
+      <h2>8. Subscription, Billing &amp; Credits</h2>
+      <p>
+        Paid plans and credit top-ups are billed according to the pricing displayed at the time of
+        purchase. Taxes may apply. Payments are processed by Stripe. Subscriptions renew
+        automatically unless cancelled in accordance with our{" "}
+        <Link href="/refund">Refund Policy</Link>. Failure to pay may result in downgrade or
+        suspension.
+      </p>
+      <p>
+        <strong>Credit usage order:</strong> when you create video jobs, we deduct from your current
+        monthly allocation first, then from any purchased extra credits.
+      </p>
+
+      <h3>8.1 Pro plan quota and rate-limit extensions</h3>
+      <p>
+        Independent Artist (Pro) subscribers receive <strong>50 video credits</strong> per
+        subscription month. Unused credits from prior cycles may roll over into the next cycle
+        subject to the accumulation cap in Clause 8.3. Renewal and rollover occur on successful
+        Stripe subscription renewal (typically aligned with your billing period).
+      </p>
+      <p>
+        Pro subscribers may request a manual video-quota reset or temporary extension, and/or an API
+        rate-limit extension, via account settings or by emailing{" "}
+        <a href={`mailto:${LEGAL_OPERATOR.quotaRequestEmail}`}>
+          {LEGAL_OPERATOR.quotaRequestEmail}
+        </a>
+        . Each Pro account is entitled to up to{" "}
+        <strong>five (5) video-quota reset or extension requests per calendar year</strong> and up
+        to <strong>five (5) API rate-limit extension requests per calendar year</strong>. We review
+        requests in good faith and may decline requests that are abusive, repetitive without cause,
+        or inconsistent with fair use. Approved requests do not increase those annual limits.
+      </p>
+
+      <h3>8.2 Free plan extra credits</h3>
+      <p>
+        Bedroom Producer (Free) accounts receive <strong>10 video credits</strong> per calendar
+        month. Free users may purchase additional never-expiring extra credits at the price shown at
+        checkout (currently <strong>€0.25 per credit</strong>), in packs of{" "}
+        <strong>1 to 15 credits</strong> per purchase. On the Free plan, the extras balance may not
+        exceed <strong>15 credits</strong>. After monthly and extra credits are exhausted, further
+        uploads require upgrading to Pro (or waiting for the next monthly reset). Extra credits are
+        available only on the Free plan purchase flow; Pro includes its monthly allocation and does
+        not sell the same Free top-up packs.
+      </p>
+
+      <h3>8.3 Credit rollover &amp; accumulation cap</h3>
+      <p>
+        Unused credits from previous cycles may roll over, but the total accumulated balance on any
+        account (remaining monthly allocation + extra credits) shall strictly not exceed{" "}
+        <strong>30 credits</strong> at any given time. Upon renewal (or when applying a new monthly
+        allocation), any excess above this 30-credit threshold is automatically trimmed and expires
+        permanently, without entitlement to refund or compensation.
+      </p>
+
+      <h3>8.4 Pro API access</h3>
+      <p>
+        Independent Artist (Pro) subscribers may generate an API key in account settings to upload
+        files and create batch video jobs programmatically. API access requires an active Pro
+        subscription, a connected YouTube account, and compliance with the same quota, file-type, and
+        resolution limits as the web interface. API keys are personal, must be kept confidential, and
+        may be revoked by you or by us if misused. We may apply rate limits and suspend API access
+        for abuse, security incidents, or plan downgrades. If your subscription ends or you are
+        moved to the Free plan, API keys and Pro-only API access are revoked or disabled.
+      </p>
+
+      <h2>9. Availability and support</h2>
+      <p>
+        We strive for high availability but do not guarantee uninterrupted access. Maintenance,
+        updates, and outages may occur. Support levels depend on your plan. Self-hosted DIY
+        deployments without a paid setup are community-supported unless otherwise agreed in
+        writing.
+      </p>
+
+      <h2>10. Disclaimer of warranties</h2>
+      <p>
+        THE SERVICE IS PROVIDED &quot;AS IS&quot; AND &quot;AS AVAILABLE&quot; TO THE MAXIMUM EXTENT
+        PERMITTED BY LAW. WE DISCLAIM ALL WARRANTIES, EXPRESS OR IMPLIED, INCLUDING MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. WE DO NOT WARRANT THAT ENCODING,
+        UPLOADS, OR METADATA TRANSFER WILL BE ERROR-FREE OR UNINTERRUPTED.
+      </p>
+
+      <h2>11. Limitation of liability</h2>
+      <p>
+        TO THE MAXIMUM EXTENT PERMITTED BY LAW, WE SHALL NOT BE LIABLE FOR INDIRECT, INCIDENTAL,
+        SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, OR ANY LOSS OF PROFITS, REVENUE, DATA, OR
+        GOODWILL. OUR TOTAL LIABILITY FOR ANY CLAIM ARISING OUT OF THESE TERMS OR THE SERVICE IS
+        LIMITED TO THE AMOUNT YOU PAID US IN THE TWELVE (12) MONTHS BEFORE THE EVENT GIVING RISE TO
+        THE CLAIM, OR EUR 100 IF YOU USE THE FREE PLAN ONLY.
+      </p>
+      <p>
+        Some jurisdictions do not allow certain limitations, so some of the above may not apply to
+        you.
+      </p>
+
+      <h2>12. Indemnification</h2>
+      <p>
+        You agree to indemnify and hold us harmless from claims arising out of your content, your
+        use of the Service, or your violation of these Terms or applicable law.
+      </p>
+
+      <h2>13. Termination and account deletion</h2>
+      <p>
+        You may stop using the Service at any time. You may cancel a paid subscription (see our{" "}
+        <Link href="/refund">Refund Policy</Link>) without deleting your account. To permanently
+        delete your account and associated active data, use the account deletion control in{" "}
+        <strong>Dashboard → Settings</strong> or contact{" "}
+        <a href={`mailto:${LEGAL_OPERATOR.email}`}>{LEGAL_OPERATOR.email}</a>. We may suspend or
+        terminate your access if you breach these Terms, create risk or legal exposure, or where
+        required by law. Upon termination or deletion, your right to use the hosted Service ends.
+        Provisions that by nature should survive will survive. Deletion is subject to legal
+        retention obligations described in our <Link href="/privacy">Privacy Policy</Link>.
+      </p>
+
+      <h2>14. Governing law</h2>
+      <p>
+        These Terms are governed by the laws of Hungary, excluding conflict
+        of law rules. Courts in Hungary shall have exclusive jurisdiction unless
+        mandatory consumer protection laws in your country provide otherwise.
+      </p>
+
+      <h2>15. Changes</h2>
+      <p>
+        We may update these Terms from time to time. Continued use after changes become effective
+        constitutes acceptance of the revised Terms, where permitted by law.
+      </p>
+
+      <h2>16. Contact</h2>
+      <p>
+        Questions about these Terms:{" "}
+        <a href={`mailto:${LEGAL_OPERATOR.email}`}>{LEGAL_OPERATOR.email}</a>
+      </p>
+    </LegalPageLayout>
+  );
+}

assets/README.md

@@ -0,0 +1,7 @@
+# Watermark image
+
+Place `watermark.png` here for the default bottom-right video overlay.
+
+Curated Pro typography fonts live in `fonts/` (run `node scripts/fetch-watermark-fonts.mjs`).
+The image should include the full attribution: "Uploaded through Songs2VID.com".
+If missing, FFmpeg falls back to bottom-right drawtext with the same message.

assets/fonts/README.md

@@ -0,0 +1,4 @@
+# Watermark fonts
+
+Curated TTF assets for FFmpeg `drawtext` (OFL via Google Fonts).
+Refresh with `node scripts/fetch-watermark-fonts.mjs`.

components/AccountPrivacyActions.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { signOut } from "next-auth/react";
+import { useState } from "react";
+import { SUPPORT_EMAIL } from "@/lib/plans";
+
+type Props = {
+  email: string;
+};
+
+export function AccountPrivacyActions({ email }: Props) {
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleDeleteAccount() {
+    if (
+      !confirm(
+        "Delete your account permanently? This removes your jobs, uploads, and YouTube connection. This cannot be undone.",
+      )
+    ) {
+      return;
+    }
+
+    setDeleting(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/account/delete", { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to delete account");
+      await signOut({ callbackUrl: "/" });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete account");
+      setDeleting(false);
+    }
+  }
+
+  const dataRequestSubject = encodeURIComponent("Data export request");
+  const dataRequestBody = encodeURIComponent(
+    `Hello,\n\nI would like to request a copy of my personal data associated with my Songs2VID account (${email}).\n\nThank you.`,
+  );
+
+  return (
+    <div className="space-y-4">
+      {error && (
+        <div className="rounded border border-red-500/50 bg-red-500/10 px-4 py-3 text-sm text-red-300">
+          {error}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+        <a
+          href={`mailto:${SUPPORT_EMAIL}?subject=${dataRequestSubject}&body=${dataRequestBody}`}
+          className="inline-flex items-center justify-center rounded border border-gray-600 px-4 py-2 text-sm font-medium text-gray-200 transition-colors hover:bg-surface"
+        >
+          Request my data
+        </a>
+
+        <button
+          type="button"
+          onClick={handleDeleteAccount}
+          disabled={deleting}
+          className="inline-flex items-center justify-center rounded border border-red-600/50 px-4 py-2 text-sm font-medium text-red-300 transition-colors hover:bg-red-500/10 disabled:opacity-50"
+        >
+          {deleting ? "Deleting…" : "Delete account"}
+        </button>
+      </div>
+
+      <p className="text-xs text-gray-500">
+        Data requests are handled within the timelines described in our{" "}
+        <a href="/privacy" className="text-gray-400 underline hover:text-white">
+          Privacy Policy
+        </a>
+        .
+      </p>
+    </div>
+  );
+}

components/AdminBadgePanel.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import { useCallback, useEffect, useState, type FormEvent } from "react";
+
+const STORAGE_KEY = "s2vid_admin_api_key";
+
+export type AdminBadge = {
+  id: string;
+  name: string;
+  embedHtml: string | null;
+  imageUrl: string | null;
+  linkUrl: string | null;
+  isActive: boolean;
+  sortOrder: number;
+  createdAt: string;
+  updatedAt: string;
+};
+
+function authHeaders(key: string): HeadersInit {
+  return {
+    Authorization: `Bearer ${key}`,
+    "Content-Type": "application/json",
+  };
+}
+
+export function AdminBadgePanel() {
+  const [apiKey, setApiKey] = useState("");
+  const [unlocked, setUnlocked] = useState(false);
+  const [badges, setBadges] = useState<AdminBadge[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const [name, setName] = useState("");
+  const [embedHtml, setEmbedHtml] = useState("");
+  const [imageUrl, setImageUrl] = useState("");
+  const [linkUrl, setLinkUrl] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    const stored = sessionStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      setApiKey(stored);
+      setUnlocked(true);
+    }
+  }, []);
+
+  const loadBadges = useCallback(async (key: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/admin/badges", {
+        headers: authHeaders(key),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to load badges");
+      setBadges(data.badges);
+      setUnlocked(true);
+      sessionStorage.setItem(STORAGE_KEY, key);
+    } catch (err) {
+      setUnlocked(false);
+      setBadges([]);
+      setError(err instanceof Error ? err.message : "Failed to load badges");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (unlocked && apiKey) {
+      void loadBadges(apiKey);
+    }
+  }, [unlocked, apiKey, loadBadges]);
+
+  async function unlock(e: FormEvent) {
+    e.preventDefault();
+    const key = apiKey.trim();
+    if (!key) {
+      setError("Enter ADMIN_API_KEY");
+      return;
+    }
+    await loadBadges(key);
+  }
+
+  function lock() {
+    sessionStorage.removeItem(STORAGE_KEY);
+    setApiKey("");
+    setUnlocked(false);
+    setBadges([]);
+    setSuccess(null);
+    setError(null);
+  }
+
+  async function createBadge(e: FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const res = await fetch("/api/admin/badges", {
+        method: "POST",
+        headers: authHeaders(apiKey),
+        body: JSON.stringify({
+          name: name.trim(),
+          embedHtml: embedHtml.trim() || null,
+          imageUrl: imageUrl.trim() || null,
+          linkUrl: linkUrl.trim() || null,
+          isActive: true,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to create badge");
+      setName("");
+      setEmbedHtml("");
+      setImageUrl("");
+      setLinkUrl("");
+      setSuccess(`Added “${data.badge.name}”`);
+      await loadBadges(apiKey);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create badge");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function toggleActive(badge: AdminBadge) {
+    setError(null);
+    setSuccess(null);
+    try {
+      const res = await fetch(`/api/admin/badges/${badge.id}`, {
+        method: "PATCH",
+        headers: authHeaders(apiKey),
+        body: JSON.stringify({ isActive: !badge.isActive }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to update badge");
+      setSuccess(
+        data.badge.isActive
+          ? `“${data.badge.name}” is now active`
+          : `“${data.badge.name}” is now inactive`,
+      );
+      await loadBadges(apiKey);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update badge");
+    }
+  }
+
+  async function removeBadge(badge: AdminBadge) {
+    if (!confirm(`Delete badge “${badge.name}”?`)) return;
+    setError(null);
+    setSuccess(null);
+    try {
+      const res = await fetch(`/api/admin/badges/${badge.id}`, {
+        method: "DELETE",
+        headers: authHeaders(apiKey),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to delete badge");
+      setSuccess(`Deleted “${badge.name}”`);
+      await loadBadges(apiKey);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete badge");
+    }
+  }
+
+  if (!unlocked) {
+    return (
+      <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
+        <h2 className="mb-2 text-lg font-semibold text-white">Admin unlock</h2>
+        <p className="mb-4 text-sm text-gray-400">
+          Enter <code className="text-gray-300">ADMIN_API_KEY</code> to manage footer badges.
+          The key stays in this browser tab only (sessionStorage).
+        </p>
+        <form onSubmit={unlock} className="flex flex-col gap-3 sm:flex-row">
+          <input
+            type="password"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            placeholder="ADMIN_API_KEY"
+            className="input-field flex-1"
+            autoComplete="off"
+          />
+          <button
+            type="submit"
+            disabled={loading}
+            className="rounded bg-accent px-4 py-2 text-sm font-medium text-black hover:opacity-90 disabled:opacity-50"
+          >
+            {loading ? "Checking…" : "Unlock"}
+          </button>
+        </form>
+        {error ? <p className="mt-3 text-sm text-red-400">{error}</p> : null}
+      </section>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-4">
+        <p className="text-sm text-gray-400">
+          Authenticated with admin API key. Changes apply to the live footer marquee.
+        </p>
+        <button
+          type="button"
+          onClick={lock}
+          className="shrink-0 text-sm text-gray-400 underline-offset-2 hover:text-white hover:underline"
+        >
+          Lock
+        </button>
+      </div>
+
+      {error ? <p className="text-sm text-red-400">{error}</p> : null}
+      {success ? <p className="text-sm text-emerald-400">{success}</p> : null}
+
+      <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
+        <h2 className="mb-1 text-lg font-semibold text-white">Add badge</h2>
+        <p className="mb-4 text-sm text-gray-400">
+          Paste a Product Hunt / LaunchBuff embed (HTML), or set image + link URLs.
+        </p>
+        <form onSubmit={createBadge} className="space-y-4">
+          <div>
+            <label className="mb-1 block text-xs font-semibold uppercase tracking-wider text-gray-500">
+              Name
+            </label>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="input-field"
+              placeholder="Product Hunt"
+              required
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs font-semibold uppercase tracking-wider text-gray-500">
+              Embed HTML / script
+            </label>
+            <textarea
+              value={embedHtml}
+              onChange={(e) => setEmbedHtml(e.target.value)}
+              className="input-field min-h-[120px] font-mono text-xs"
+              placeholder='<a href="..."><img src="..." /></a>'
+              spellCheck={false}
+            />
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className="mb-1 block text-xs font-semibold uppercase tracking-wider text-gray-500">
+                Image URL (optional)
+              </label>
+              <input
+                value={imageUrl}
+                onChange={(e) => setImageUrl(e.target.value)}
+                className="input-field"
+                placeholder="https://…"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-semibold uppercase tracking-wider text-gray-500">
+                Link URL (optional)
+              </label>
+              <input
+                value={linkUrl}
+                onChange={(e) => setLinkUrl(e.target.value)}
+                className="input-field"
+                placeholder="https://…"
+              />
+            </div>
+          </div>
+          <button
+            type="submit"
+            disabled={saving}
+            className="rounded bg-accent px-4 py-2 text-sm font-medium text-black hover:opacity-90 disabled:opacity-50"
+          >
+            {saving ? "Saving…" : "Add badge"}
+          </button>
+        </form>
+      </section>
+
+      <section className="rounded-lg border border-gray-700 bg-surface-light p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-white">Badges</h2>
+          <button
+            type="button"
+            onClick={() => loadBadges(apiKey)}
+            disabled={loading}
+            className="text-sm text-gray-400 hover:text-white"
+          >
+            {loading ? "Refreshing…" : "Refresh"}
+          </button>
+        </div>
+
+        {badges.length === 0 ? (
+          <p className="text-sm text-gray-500">No badges yet.</p>
+        ) : (
+          <ul className="divide-y divide-gray-800">
+            {badges.map((badge) => (
+              <li
+                key={badge.id}
+                className="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between"
+              >
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="font-medium text-white">{badge.name}</span>
+                    <span
+                      className={`rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${
+                        badge.isActive
+                          ? "bg-emerald-500/15 text-emerald-400"
+                          : "bg-gray-700 text-gray-400"
+                      }`}
+                    >
+                      {badge.isActive ? "Active" : "Inactive"}
+                    </span>
+                    <span className="text-xs text-gray-600">order {badge.sortOrder}</span>
+                  </div>
+                  <p className="mt-1 truncate text-xs text-gray-500">
+                    {badge.linkUrl || badge.imageUrl || (badge.embedHtml ? "embed HTML" : "—")}
+                  </p>
+                  {badge.imageUrl ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={badge.imageUrl}
+                      alt=""
+                      className="mt-2 h-10 w-auto max-w-[200px] object-contain opacity-90"
+                    />
+                  ) : null}
+                </div>
+                <div className="flex shrink-0 gap-2">
+                  <button
+                    type="button"
+                    onClick={() => toggleActive(badge)}
+                    className="rounded border border-gray-600 px-3 py-1.5 text-xs text-gray-200 hover:border-gray-400 hover:text-white"
+                  >
+                    {badge.isActive ? "Deactivate" : "Activate"}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => removeBadge(badge)}
+                    className="rounded border border-red-900/60 px-3 py-1.5 text-xs text-red-400 hover:border-red-500 hover:text-red-300"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}

components/ApiKeySettings.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { API_DOCS_URL } from "@/lib/plans";
+
+type ApiKeyStatus = {
+  configured: boolean;
+  prefix: string | null;
+};
+
+type RateLimitStatus = {
+  limit: number;
+  used: number;
+  remaining: number;
+  windowSeconds: number;
+  resetsInSeconds: number;
+  bonus?: number;
+};
+
+type ExtensionRequest = {
+  id: string;
+  status: string;
+  message: string;
+  requestedAt: string;
+  processedAt: string | null;
+  adminNote: string | null;
+};
+
+type ExtensionUsage = {
+  used: number;
+  limit: number;
+  remaining: number;
+  requests: ExtensionRequest[];
+};
+
+type Props = {
+  initialStatus: ApiKeyStatus;
+  initialRateLimit: RateLimitStatus;
+  initialExtensionUsage: ExtensionUsage;
+};
+
+export function ApiKeySettings({
+  initialStatus,
+  initialRateLimit,
+  initialExtensionUsage,
+}: Props) {
+  const [status, setStatus] = useState(initialStatus);
+  const [rateLimit, setRateLimit] = useState(initialRateLimit);
+  const [extensionUsage, setExtensionUsage] = useState(initialExtensionUsage);
+  const [newKey, setNewKey] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [requesting, setRequesting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    const refresh = () => {
+      fetch("/api/account/api-rate-limit")
+        .then(async (res) => {
+          if (!res.ok) return;
+          const data = await res.json();
+          if (active) setRateLimit(data);
+        })
+        .catch(() => {});
+    };
+    refresh();
+    const id = setInterval(refresh, 5000);
+    return () => {
+      active = false;
+      clearInterval(id);
+    };
+  }, []);
+
+  async function generateKey() {
+    if (
+      status.configured &&
+      !confirm("This will replace your existing API key. Continue?")
+    ) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setNewKey(null);
+    setSuccess(null);
+
+    try {
+      const res = await fetch("/api/account/api-key", { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to generate API key");
+
+      setNewKey(data.apiKey);
+      setStatus({ configured: true, prefix: data.prefix });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to generate API key");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function revokeKey() {
+    if (!confirm("Revoke your API key? External integrations will stop working.")) return;
+
+    setLoading(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const res = await fetch("/api/account/api-key", { method: "DELETE" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to revoke API key");
+
+      setStatus({ configured: false, prefix: null });
+      setNewKey(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to revoke API key");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function requestRateLimitExtension() {
+    if (extensionUsage.remaining <= 0) return;
+
+    const reason = prompt(
+      "Optional: tell us why you need a higher API rate limit (leave blank to skip).",
+    );
+    if (reason === null) return;
+
+    setRequesting(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const res = await fetch("/api/account/api-rate-limit-extension-request", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: reason }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to submit request");
+
+      setExtensionUsage({
+        used: data.used,
+        limit: data.limit,
+        remaining: data.remaining,
+        requests: data.requests ?? extensionUsage.requests,
+      });
+      setSuccess(
+        `Rate limit extension request submitted. ${data.used} of ${data.limit} used this year.`,
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to submit request");
+    } finally {
+      setRequesting(false);
+    }
+  }
+
+  const hasPending = extensionUsage.requests.some((r) => r.status === "PENDING");
+  const usedPct = Math.min(100, Math.round((rateLimit.used / Math.max(1, rateLimit.limit)) * 100));
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-gray-400">
+        Use the REST API to upload files and create batch video jobs programmatically. Pro plan
+        only.
+      </p>
+
+      <div className="rounded border border-gray-800 bg-surface p-4 space-y-3">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <p className="text-sm font-medium text-white">API rate limit</p>
+          <p className="text-xs text-gray-400">
+            Resets in {rateLimit.resetsInSeconds}s
+          </p>
+        </div>
+        <p className="text-sm text-gray-300">
+          {rateLimit.used} / {rateLimit.limit} requests used this minute
+          {rateLimit.bonus ? (
+            <span className="text-gray-500"> (includes +{rateLimit.bonus} bonus)</span>
+          ) : null}
+        </p>
+        <div className="h-2 overflow-hidden rounded bg-gray-800">
+          <div
+            className={`h-full rounded transition-all ${
+              usedPct >= 90 ? "bg-red-500" : usedPct >= 70 ? "bg-amber-500" : "bg-accent"
+            }`}
+            style={{ width: `${usedPct}%` }}
+          />
+        </div>
+        <p className="text-xs text-gray-500">
+          {rateLimit.remaining} requests remaining · window {rateLimit.windowSeconds}s
+        </p>
+
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-xs text-gray-400">
+            Extension requests this year: {extensionUsage.used} / {extensionUsage.limit}
+          </p>
+          <button
+            type="button"
+            onClick={requestRateLimitExtension}
+            disabled={requesting || extensionUsage.remaining <= 0 || hasPending}
+            className="inline-flex items-center justify-center rounded border border-accent/40 px-3 py-1.5 text-xs font-medium text-accent transition-colors hover:bg-accent/10 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {requesting
+              ? "Submitting…"
+              : hasPending
+                ? "Pending request"
+                : extensionUsage.remaining <= 0
+                  ? "No extensions left"
+                  : "Request rate limit extension"}
+          </button>
+        </div>
+
+        {extensionUsage.requests.length > 0 && (
+          <ul className="space-y-1 border-t border-gray-800 pt-3 text-xs text-gray-500">
+            {extensionUsage.requests.slice(0, 5).map((req) => (
+              <li key={req.id}>
+                {new Date(req.requestedAt).toLocaleDateString()} · {req.status}
+                {req.adminNote ? ` · ${req.adminNote}` : ""}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {status.configured && status.prefix && (
+        <p className="text-sm text-gray-300">
+          Active key: <span className="font-mono text-white">{status.prefix}…</span>
+        </p>
+      )}
+
+      {newKey && (
+        <div className="rounded border border-green-500/40 bg-green-500/10 p-4">
+          <p className="mb-2 text-sm font-medium text-green-300">Your new API key (copy now)</p>
+          <code className="block break-all rounded bg-black/40 px-3 py-2 text-xs text-green-200">
+            {newKey}
+          </code>
+        </div>
+      )}
+
+      {success && (
+        <div className="rounded border border-green-500/40 bg-green-500/10 px-4 py-3 text-sm text-green-300">
+          {success}
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded border border-red-500/50 bg-red-500/10 px-4 py-3 text-sm text-red-300">
+          {error}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+        <button
+          type="button"
+          onClick={generateKey}
+          disabled={loading}
+          className="inline-flex items-center justify-center rounded bg-accent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-hover disabled:opacity-50"
+        >
+          {loading ? "Working…" : status.configured ? "Regenerate API key" : "Generate API key"}
+        </button>
+        {status.configured && (
+          <button
+            type="button"
+            onClick={revokeKey}
+            disabled={loading}
+            className="inline-flex items-center justify-center rounded border border-red-600/50 px-4 py-2 text-sm font-medium text-red-300 transition-colors hover:bg-red-500/10 disabled:opacity-50"
+          >
+            Revoke API key
+          </button>
+        )}
+      </div>
+
+      <div className="rounded border border-gray-800 bg-surface p-4 text-xs text-gray-400">
+        <p className="mb-2 font-semibold uppercase tracking-wider text-gray-500">Endpoints</p>
+        <ul className="space-y-2 font-mono">
+          <li>POST /api/v1/upload: upload image or audio file</li>
+          <li>POST /api/v1/jobs: create job from paths (recommended for large batches)</li>
+          <li>POST /api/v1/jobs/batch: small packs only (one-shot multipart)</li>
+          <li>GET /api/v1/playlists: list YouTube playlists</li>
+          <li>POST /api/v1/playlists: create a YouTube playlist</li>
+          <li>GET /api/v1/jobs: list jobs</li>
+          <li>GET /api/v1/jobs/:id: job status</li>
+        </ul>
+        <p className="mt-3">
+          Send <span className="text-gray-300">Authorization: Bearer YOUR_API_KEY</span> on every
+          request. For many audio files, upload each file then call{" "}
+          <span className="text-gray-300">/api/v1/jobs</span> (avoid large one-shot batches).{" "}
+          <a
+            href={API_DOCS_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-accent hover:underline"
+          >
+            Full API docs
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}

components/BadgeEmbed.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+type PublicBadge = {
+  id: string;
+  name: string;
+  embedHtml: string | null;
+  imageUrl: string | null;
+  linkUrl: string | null;
+};
+
+/**
+ * Renders a badge embed safely inside the marquee slot.
+ * Prefer structured image+link; fall back to HTML (re-executing scripts when present).
+ */
+export function BadgeEmbed({ badge }: { badge: PublicBadge }) {
+  const hostRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    host.replaceChildren();
+
+    if (badge.imageUrl && badge.linkUrl) {
+      const a = document.createElement("a");
+      a.href = badge.linkUrl;
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      a.title = badge.name;
+      a.className = "badge-marquee-link";
+      const img = document.createElement("img");
+      img.src = badge.imageUrl;
+      img.alt = badge.name;
+      img.loading = "lazy";
+      img.decoding = "async";
+      a.appendChild(img);
+      host.appendChild(a);
+      return;
+    }
+
+    if (!badge.embedHtml) return;
+
+    const template = document.createElement("template");
+    template.innerHTML = badge.embedHtml.trim();
+
+    const scripts: HTMLScriptElement[] = [];
+    template.content.querySelectorAll("script").forEach((node) => {
+      scripts.push(node.cloneNode(true) as HTMLScriptElement);
+      node.remove();
+    });
+
+    host.appendChild(template.content.cloneNode(true));
+
+    for (const oldScript of scripts) {
+      const script = document.createElement("script");
+      for (const attr of oldScript.attributes) {
+        script.setAttribute(attr.name, attr.value);
+      }
+      if (oldScript.textContent) script.textContent = oldScript.textContent;
+      host.appendChild(script);
+    }
+  }, [badge.embedHtml, badge.imageUrl, badge.linkUrl, badge.name]);
+
+  return (
+    <div
+      ref={hostRef}
+      className="badge-marquee-slot"
+      data-badge-id={badge.id}
+      data-badge-name={badge.name}
+    />
+  );
+}

components/BenefitsSection.tsx

@@ -0,0 +1,436 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import { ScrollReveal } from "@/components/ScrollReveal";
+import { useInView } from "@/hooks/useInView";
+import { useMockupProgress } from "@/hooks/useMockupProgress";
+import { SectionScrollTitle } from "@/components/SectionScrollTitle";
+
+function FilmStripIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <rect x="2" y="4" width="20" height="16" rx="2" />
+      <path d="M2 8h20M2 16h20M6 4v4M6 16v4M10 4v4M10 16v4M14 4v4M14 16v4M18 4v4M18 16v4" />
+      <path d="m15 9 3 3-3 3" />
+    </svg>
+  );
+}
+
+function YouTubeIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8z" />
+      <path fill="#12121f" d="M9.75 15.02l6.35-3.02-6.35-3.02v6.04z" />
+    </svg>
+  );
+}
+
+function CoinsIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <ellipse cx="8" cy="6" rx="5" ry="2" />
+      <path d="M3 6v4c0 1.1 2.24 2 5 2s5-.9 5-2V6" />
+      <path d="M3 10v4c0 1.1 2.24 2 5 2s5-.9 5-2v-4" />
+      <ellipse cx="16" cy="14" rx="5" ry="2" />
+      <path d="M11 14v4c0 1.1 2.24 2 5 2s5-.9 5-2v-4" />
+    </svg>
+  );
+}
+
+function PlaylistIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M4 6h12M4 12h12M4 18h8" strokeLinecap="round" />
+      <path d="M17 14.5v5l4-2.5-4-2.5z" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+function NoteIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M9 18V5l12-2v13" />
+      <circle cx="6" cy="18" r="3" />
+      <circle cx="18" cy="16" r="3" />
+    </svg>
+  );
+}
+
+function WaveIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M4 12h1M7 12h1M10 8v8M13 10v4M16 7v10M19 11v2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function GearsIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <circle cx="12" cy="12" r="3" />
+      <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+    </svg>
+  );
+}
+
+const BENEFITS = [
+  {
+    title: "No editing required",
+    desc: "Skip complex video editors. Just upload an image and audio, and Songs2VID handles the rest.",
+    Icon: FilmStripIcon,
+  },
+  {
+    title: "YouTube-ready output",
+    desc: "Videos are encoded and uploaded with the metadata you set, ready for your channel.",
+    Icon: YouTubeIcon,
+  },
+  {
+    title: "Free tier included",
+    desc: "Start creating with 10 videos every month at up to 720p. No credit card needed.",
+    Icon: CoinsIcon,
+  },
+  {
+    title: "YouTube playlists",
+    desc: "Independent Artist (Pro) can create YouTube playlists and add every upload from the dashboard or API.",
+    Icon: PlaylistIcon,
+  },
+] as const;
+
+const STOCK_THUMBS = [
+  "https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=120&h=120&fit=crop&auto=format",
+  "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=120&h=120&fit=crop&auto=format",
+  "https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=120&h=120&fit=crop&auto=format",
+  "https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=120&h=120&fit=crop&auto=format",
+  "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=120&h=120&fit=crop&auto=format",
+  "https://images.unsplash.com/photo-1571330735066-03aaa9429d89?w=120&h=120&fit=crop&auto=format",
+  "https://images.unsplash.com/photo-1619983081563-430f63602796?w=120&h=120&fit=crop&auto=format",
+  "https://images.unsplash.com/photo-1483412033650-1015ddeb83d1?w=120&h=120&fit=crop&auto=format",
+] as const;
+
+function TypewriterText({ text }: { text: string }) {
+  const [displayed, setDisplayed] = useState("");
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    let index = 0;
+    const interval = setInterval(() => {
+      index += 1;
+      setDisplayed(text.slice(0, index));
+      if (index >= text.length) {
+        clearInterval(interval);
+        setDone(true);
+      }
+    }, 45);
+
+    return () => clearInterval(interval);
+  }, [text]);
+
+  return (
+    <span className="text-xs font-medium text-gray-300">
+      {displayed}
+      {!done && <span className="ml-0.5 inline-block w-[2px] animate-pulse bg-red-400">|</span>}
+    </span>
+  );
+}
+
+function BenefitCard({
+  title,
+  desc,
+  Icon,
+}: {
+  title: string;
+  desc: string;
+  Icon: typeof FilmStripIcon;
+}) {
+  return (
+    <div className="group relative overflow-hidden rounded-xl border border-red-500/20 bg-surface p-6 shadow-[0_0_24px_rgba(239,68,68,0.08)] transition-all duration-300 hover:border-red-500/40 hover:shadow-[0_0_32px_rgba(239,68,68,0.18)]">
+      <Icon className="absolute right-5 top-5 h-8 w-8 text-gray-600 transition-colors duration-300 group-hover:text-red-500/50" />
+      <h3 className="pr-12 text-lg font-semibold text-white">{title}</h3>
+      <p className="mt-3 text-sm leading-relaxed text-gray-400">{desc}</p>
+    </div>
+  );
+}
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      aria-hidden="true"
+    >
+      <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function MockupProgressRow({
+  initialWidth,
+  midWidth,
+  active,
+  phaseOneMs = 3000,
+  phaseTwoMs = 2000,
+}: {
+  initialWidth: string;
+  midWidth: string;
+  active: boolean;
+  phaseOneMs?: number;
+  phaseTwoMs?: number;
+}) {
+  const { phase, processed, transitionMs } = useMockupProgress(active, phaseOneMs, phaseTwoMs);
+
+  const width = phase === 0 ? initialWidth : phase === 1 ? midWidth : "100%";
+
+  return (
+    <div>
+      <p className="mb-1 text-[10px] text-gray-500">{processed ? "Processed" : "Processing..."}</p>
+      <div className="flex items-center gap-2">
+        <div className="h-1 min-w-0 flex-1 rounded-full bg-gray-700">
+          <div
+            className="h-full rounded-full bg-white/80 ease-out"
+            style={{
+              width,
+              transition: phase >= 1 ? `width ${transitionMs}ms ease-out` : "none",
+            }}
+          />
+        </div>
+        <CheckIcon
+          className={`h-3.5 w-3.5 shrink-0 text-accent transition-all duration-300 ${
+            processed ? "scale-100 opacity-100" : "scale-75 opacity-0"
+          }`}
+        />
+      </div>
+    </div>
+  );
+}
+
+function DashboardMockup() {
+  const { ref, inView } = useInView();
+  const sidebarIcons = [NoteIcon, WaveIcon, GearsIcon] as const;
+
+  return (
+    <div ref={ref} className="rounded-xl border border-gray-700/50 bg-surface-dark p-4">
+      <div className="flex gap-4">
+        <div className="flex w-11 shrink-0 flex-col items-center gap-3 rounded-lg bg-surface py-3">
+          <div className="h-2 w-2 rounded-full bg-gray-500" />
+          {sidebarIcons.map((Icon, i) => (
+            <div
+              key={i}
+              className="flex h-7 w-7 items-center justify-center rounded-md border border-gray-700/50 bg-surface-dark text-gray-500"
+            >
+              <Icon className="h-4 w-4" />
+            </div>
+          ))}
+        </div>
+
+        <div className="min-w-0 flex-1 space-y-3">
+          <div className="flex items-center justify-between">
+            <TypewriterText text="Multi-step configuration" />
+            <div className="h-4 w-8 rounded-full bg-red-500/80" />
+          </div>
+          <div className="h-7 rounded border border-gray-700 bg-surface px-2 text-xs leading-7 text-gray-500">
+            Title
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            <span className="rounded bg-gray-700 px-2 py-0.5 text-[10px] text-gray-400">genre</span>
+            <span className="rounded bg-gray-700 px-2 py-0.5 text-[10px] text-gray-400">audio</span>
+          </div>
+          <div className="flex h-7 items-center justify-between rounded border border-gray-700 bg-surface px-2 text-xs text-gray-500">
+            Category <span className="text-gray-400">Music ▾</span>
+          </div>
+          <div className="space-y-2 pt-1">
+            <MockupProgressRow active={inView} initialWidth="25%" midWidth="45%" phaseOneMs={3000} phaseTwoMs={2000} />
+            <MockupProgressRow active={inView} initialWidth="10%" midWidth="55%" phaseOneMs={3000} phaseTwoMs={2000} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ProcessFlow() {
+  return (
+    <div className="relative mt-4 overflow-hidden rounded-xl border border-gray-700/50 bg-surface-dark p-5">
+      <svg
+        className="pointer-events-none absolute inset-0 h-full w-full"
+        viewBox="0 0 420 240"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+      >
+        <defs>
+          <linearGradient id="flowGradH" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="rgb(239 68 68 / 0.15)" />
+            <stop offset="50%" stopColor="rgb(239 68 68 / 0.55)" />
+            <stop offset="100%" stopColor="rgb(239 68 68 / 0.15)" />
+          </linearGradient>
+          <linearGradient id="flowGradV" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="rgb(239 68 68 / 0.5)" />
+            <stop offset="100%" stopColor="rgb(239 68 68 / 0.15)" />
+          </linearGradient>
+        </defs>
+
+        <path
+          d="M 58 52 C 120 52, 140 58, 168 72"
+          fill="none"
+          stroke="url(#flowGradH)"
+          strokeWidth="1.5"
+          className="benefits-flow-path"
+        />
+        <path
+          d="M 58 118 C 120 108, 140 88, 168 78"
+          fill="none"
+          stroke="url(#flowGradH)"
+          strokeWidth="1.5"
+          className="benefits-flow-path"
+          style={{ animationDelay: "0.3s" }}
+        />
+        <path
+          d="M 198 75 C 250 75, 285 68, 318 68"
+          fill="none"
+          stroke="url(#flowGradH)"
+          strokeWidth="1.5"
+          className="benefits-flow-path"
+          style={{ animationDelay: "0.6s" }}
+        />
+      </svg>
+
+      <div className="relative z-10">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex flex-col gap-4">
+            <FlowInput label="Batch Audio Files" icon="audio" />
+            <FlowInput label="Single Cover Image" icon="image" />
+          </div>
+
+          <div className="flex flex-1 flex-col items-center px-2 pt-6">
+            <div className="benefits-process-icon flex h-16 w-16 items-center justify-center rounded-xl border border-red-500/40 bg-surface shadow-[0_0_20px_rgba(239,68,68,0.25)]">
+              <Image
+                src="/database.png"
+                alt="Process"
+                width={40}
+                height={40}
+                className="h-10 w-10 object-contain brightness-0 invert opacity-90"
+              />
+            </div>
+            <span className="mt-2 text-[10px] font-medium text-gray-400">Process</span>
+          </div>
+
+          <div className="flex flex-col items-center">
+            <div className="grid grid-cols-4 gap-1.5">
+              {STOCK_THUMBS.map((src) => (
+                <div
+                  key={src}
+                  className="relative h-11 w-11 overflow-hidden rounded border border-gray-700"
+                >
+                  <Image
+                    src={src}
+                    alt=""
+                    fill
+                    sizes="44px"
+                    className="scale-110 object-cover blur-[2px]"
+                  />
+                  <div className="absolute inset-0 bg-black/25" />
+                  <span className="absolute inset-0 flex items-center justify-center text-[9px] text-white/80">
+                    ▶
+                  </span>
+                </div>
+              ))}
+            </div>
+
+            <svg
+              className="my-2 h-10 w-6 overflow-visible"
+              viewBox="0 0 6 40"
+              aria-hidden="true"
+            >
+              <line
+                x1="3"
+                y1="2"
+                x2="3"
+                y2="38"
+                stroke="rgb(239 68 68 / 0.55)"
+                strokeWidth="1.5"
+                className="benefits-flow-path"
+                style={{ animationDelay: "0.9s" }}
+              />
+            </svg>
+
+            <div className="flex items-center gap-3">
+              <YouTubeIcon className="h-9 w-9 text-red-500" />
+              <div>
+                <p className="text-xs font-bold tracking-wider text-white">YouTube</p>
+                <p className="text-[10px] font-semibold tracking-[0.15em] text-red-400">DIRECT UPLOAD</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FlowInput({ label, icon }: { label: string; icon: "audio" | "image" }) {
+  return (
+    <div className="flex flex-col items-center gap-1.5">
+      <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-gray-700 bg-surface">
+        {icon === "audio" ? (
+          <NoteIcon className="h-5 w-5 text-gray-500" />
+        ) : (
+          <svg className="h-5 w-5 text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <circle cx="8.5" cy="8.5" r="1.5" />
+            <path d="M21 15l-5-5L5 21" />
+          </svg>
+        )}
+      </div>
+      <span className="max-w-[72px] text-center text-[9px] leading-tight text-gray-500">{label}</span>
+    </div>
+  );
+}
+
+function BenefitsVisual() {
+  return (
+    <div className="rounded-2xl border border-gray-700/50 bg-surface p-5 shadow-2xl shadow-black/30">
+      <DashboardMockup />
+      <ProcessFlow />
+    </div>
+  );
+}
+
+function BenefitsScrollTitle({ sectionRef }: { sectionRef: React.RefObject<HTMLElement | null> }) {
+  return <SectionScrollTitle sectionRef={sectionRef} title="Benefits" />;
+}
+
+export function BenefitsSection() {
+  const sectionRef = useRef<HTMLElement>(null);
+
+  return (
+    <section
+      ref={sectionRef}
+      id="benefits"
+      className="relative scroll-mt-24 overflow-x-visible overflow-y-hidden px-6 py-24"
+    >
+      <BenefitsScrollTitle sectionRef={sectionRef} />
+      <div className="relative z-10 mx-auto max-w-7xl">
+        <ScrollReveal>
+          <h2 className="mb-12 text-center text-3xl font-bold text-white">Benefits</h2>
+        </ScrollReveal>
+
+        <div className="grid items-start gap-10 lg:grid-cols-[1fr_1.15fr] lg:gap-12">
+          <div className="flex flex-col gap-5">
+            {BENEFITS.map((benefit, index) => (
+              <ScrollReveal key={benefit.title} delay={index * 100} direction="left">
+                <BenefitCard title={benefit.title} desc={benefit.desc} Icon={benefit.Icon} />
+              </ScrollReveal>
+            ))}
+          </div>
+
+          <ScrollReveal delay={200} direction="right">
+            <BenefitsVisual />
+          </ScrollReveal>
+        </div>
+      </div>
+    </section>
+  );
+}

components/CategorySelect.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { YOUTUBE_CATEGORIES } from "@/lib/constants";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export function CategorySelect({ value, onChange }: Props) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="w-full rounded border border-gray-600 bg-surface-light px-3 py-2 text-sm text-white focus:border-accent focus:outline-none"
+    >
+      {YOUTUBE_CATEGORIES.map((cat) => (
+        <option key={cat.id} value={cat.id}>
+          {cat.name}
+        </option>
+      ))}
+    </select>
+  );
+}

components/CreditPurchasePanel.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
+import { UpgradeProButton } from "@/components/UpgradeProButton";
+import {
+  CREDIT_PRICE_CENTS,
+  FREE_EXTRA_CREDITS_MAX,
+  FREE_TOP_UP_MAX,
+  FREE_TOP_UP_MIN,
+  formatCreditPrice,
+  formatEuroFromCents,
+} from "@/lib/credits";
+
+type Purchase = {
+  id: string;
+  credits: number;
+  amountCents: number;
+  completedAt: string | null;
+};
+
+type Props = {
+  initialCredits: number;
+  stripeConfigured: boolean;
+  recentPurchases?: Purchase[];
+};
+
+export function CreditPurchasePanel({
+  initialCredits,
+  stripeConfigured,
+  recentPurchases = [],
+}: Props) {
+  const router = useRouter();
+  const [creditsBalance, setCreditsBalance] = useState(initialCredits);
+  const [amount, setAmount] = useState(FREE_TOP_UP_MIN);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const room = Math.max(0, FREE_EXTRA_CREDITS_MAX - creditsBalance);
+  const maxBuyable = Math.min(FREE_TOP_UP_MAX, room);
+  const minBuyable = room < FREE_TOP_UP_MIN ? 0 : FREE_TOP_UP_MIN;
+  const atCap = room === 0;
+
+  const totalLabel = useMemo(() => formatCreditPrice(amount), [amount]);
+  const unitLabel = formatCreditPrice(1);
+
+  async function handleBuy() {
+    setLoading(true);
+    setError(null);
+    setMessage(null);
+    try {
+      const res = await fetch("/api/account/credits", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ credits: amount }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Checkout failed");
+
+      if (data.mocked) {
+        setCreditsBalance((c) => c + (data.granted ?? amount));
+        setMessage(
+          `Granted +${data.granted ?? amount} credits for ${formatEuroFromCents(data.amountCents ?? amount * CREDIT_PRICE_CENTS)} (dev mock).`,
+        );
+        setLoading(false);
+        router.refresh();
+        return;
+      }
+
+      if (!data.url) throw new Error("No checkout URL returned");
+      window.location.href = data.url;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Checkout failed");
+      setLoading(false);
+    }
+  }
+
+  function clampAmount(value: number) {
+    if (maxBuyable < FREE_TOP_UP_MIN) return FREE_TOP_UP_MIN;
+    return Math.min(maxBuyable, Math.max(FREE_TOP_UP_MIN, value));
+  }
+
+  return (
+    <div className="mt-6 border-t border-gray-800 pt-6">
+      <h3 className="mb-1 text-sm font-semibold uppercase tracking-wider text-gray-500">
+        Extra credits
+      </h3>
+      <p className="mb-4 text-sm text-gray-400">
+        Free plan: 10 monthly videos + up to {FREE_EXTRA_CREDITS_MAX} paid extras (
+        {unitLabel} each). After both are used, Pro is required.
+      </p>
+
+      <div className="mb-4 rounded border border-gray-800 bg-surface p-4">
+        <p className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+          Extra credit balance
+        </p>
+        <p className="mt-1 text-2xl font-semibold text-white">
+          {Math.min(creditsBalance, FREE_EXTRA_CREDITS_MAX)}
+          <span className="text-base font-normal text-gray-400">
+            {" "}
+            / {FREE_EXTRA_CREDITS_MAX} credits
+          </span>
+        </p>
+        {creditsBalance > FREE_EXTRA_CREDITS_MAX && (
+          <p className="mt-1 text-xs text-amber-400">
+            You have {creditsBalance} extras from earlier purchases; no further top-ups until
+            under {FREE_EXTRA_CREDITS_MAX}.
+          </p>
+        )}
+      </div>
+
+      {atCap ? (
+        <div className="space-y-2 rounded border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm text-amber-100">
+          <p>
+            Free extras are capped at {FREE_EXTRA_CREDITS_MAX}. When your monthly 10 and these
+            extras are gone, continue with Pro (€5/mo · 50 videos).
+          </p>
+          <UpgradeProButton className="font-medium text-accent underline hover:text-white" />
+        </div>
+      ) : !stripeConfigured ? (
+        <p className="text-sm text-amber-400">
+          Card checkout is not configured yet (missing Stripe keys). In development you can also
+          use{" "}
+          <code className="text-gray-300">POST /api/dev/grant-credits</code>.
+        </p>
+      ) : (
+        <div className="space-y-4">
+          <label className="block text-sm text-gray-300">
+            Credits to buy ({FREE_TOP_UP_MIN}–{maxBuyable})
+            <div className="mt-2 flex items-center gap-3">
+              <input
+                type="range"
+                min={minBuyable || FREE_TOP_UP_MIN}
+                max={maxBuyable}
+                value={clampAmount(amount)}
+                onChange={(e) => setAmount(clampAmount(Number(e.target.value)))}
+                className="w-full accent-[var(--accent,#3b82f6)]"
+              />
+              <input
+                type="number"
+                min={FREE_TOP_UP_MIN}
+                max={maxBuyable}
+                value={clampAmount(amount)}
+                onChange={(e) =>
+                  setAmount(
+                    clampAmount(Math.floor(Number(e.target.value)) || FREE_TOP_UP_MIN),
+                  )
+                }
+                className="w-16 rounded border border-gray-700 bg-surface px-2 py-1 text-center text-white"
+              />
+            </div>
+          </label>
+
+          <p className="text-sm text-gray-300">
+            Total:{" "}
+            <span className="font-semibold text-white">{totalLabel}</span>
+            <span className="text-gray-500">
+              {" "}
+              ({unitLabel} × {clampAmount(amount)})
+            </span>
+          </p>
+
+          <button
+            type="button"
+            disabled={loading}
+            onClick={handleBuy}
+            className="rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent/90 disabled:opacity-50"
+          >
+            {loading
+              ? "Starting checkout…"
+              : `Buy ${clampAmount(amount)} credits (${totalLabel})`}
+          </button>
+        </div>
+      )}
+
+      {message && <p className="mt-3 text-sm text-emerald-400">{message}</p>}
+      {error && <p className="mt-3 text-sm text-red-400">{error}</p>}
+
+      {recentPurchases.length > 0 && (
+        <div className="mt-6">
+          <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">
+            Recent purchases
+          </h4>
+          <ul className="space-y-1 text-sm text-gray-400">
+            {recentPurchases.map((p) => (
+              <li key={p.id}>
+                +{p.credits} credits · {formatEuroFromCents(p.amountCents)}
+                {p.completedAt
+                  ? ` · ${new Date(p.completedAt).toLocaleDateString()}`
+                  : ""}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

components/DashboardNav.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { signOut } from "next-auth/react";
+import { Logo } from "@/components/Logo";
+import { SignOutButton } from "@/components/SignOutButton";
+import { MobileMenuButton, MobileSidebar, dashboardSidebarLinkClass } from "@/components/MobileSidebar";
+
+const NAV_LINKS = [
+  { href: "/dashboard", label: "Create", match: (path: string) => path === "/dashboard" },
+  {
+    href: "/dashboard/history",
+    label: "History",
+    match: (path: string) => path.startsWith("/dashboard/history"),
+  },
+  {
+    href: "/dashboard/settings",
+    label: "Settings",
+    match: (path: string) => path.startsWith("/dashboard/settings"),
+  },
+] as const;
+
+type Props = {
+  channelTitle?: string | null;
+};
+
+export function DashboardNav({ channelTitle }: Props) {
+  const pathname = usePathname();
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <>
+      <header className="border-b border-gray-800 bg-surface">
+        <div className="mx-auto flex max-w-4xl items-center justify-between px-6 py-4">
+          <div className="min-w-0">
+            <Logo href="/dashboard" size="sm" />
+            {channelTitle && (
+              <p className="truncate text-xs text-gray-500">Channel: {channelTitle}</p>
+            )}
+          </div>
+
+          <div className="hidden items-center gap-4 sm:flex">
+            <nav className="flex items-center gap-4">
+              {NAV_LINKS.map(({ href, label, match }) => {
+                const active = match(pathname);
+                return (
+                  <Link
+                    key={href}
+                    href={href}
+                    className={`text-sm font-medium transition-colors duration-200 ${
+                      active ? "text-white" : "text-gray-400 hover:text-white"
+                    }`}
+                  >
+                    {label}
+                  </Link>
+                );
+              })}
+            </nav>
+            <SignOutButton />
+          </div>
+
+          <MobileMenuButton
+            open={menuOpen}
+            onClick={() => setMenuOpen((prev) => !prev)}
+          />
+        </div>
+      </header>
+
+      <MobileSidebar open={menuOpen} onClose={() => setMenuOpen(false)} title="Dashboard">
+        {NAV_LINKS.map(({ href, label, match }) => (
+          <Link
+            key={href}
+            href={href}
+            onClick={() => setMenuOpen(false)}
+            className={dashboardSidebarLinkClass(match(pathname))}
+          >
+            {label}
+          </Link>
+        ))}
+        <button
+          type="button"
+          onClick={() => {
+            setMenuOpen(false);
+            signOut({ callbackUrl: "/" });
+          }}
+          className={`${dashboardSidebarLinkClass(false, true)} w-full text-left`}
+        >
+          Sign out
+        </button>
+      </MobileSidebar>
+    </>
+  );
+}

components/DashboardShell.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { DashboardNav } from "@/components/DashboardNav";
+import { LegalFooter } from "@/components/LegalFooter";
+
+type Props = {
+  channelTitle?: string | null;
+  children: ReactNode;
+};
+
+export function DashboardShell({ channelTitle, children }: Props) {
+  return (
+    <main className="flex min-h-screen flex-col">
+      <DashboardNav channelTitle={channelTitle} />
+      <div className="flex-1">{children}</div>
+      <LegalFooter />
+    </main>
+  );
+}

components/DownloadSection.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useRef } from "react";
+import { ScrollReveal } from "@/components/ScrollReveal";
+import { SectionScrollTitle } from "@/components/SectionScrollTitle";
+import { DOCKER_HUB_URL, GITEA_URL } from "@/lib/plans";
+
+function DockerIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" role="img" aria-label="Docker">
+      <path
+        fill="#2496ED"
+        d="M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"
+      />
+    </svg>
+  );
+}
+
+function GiteaIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" role="img" aria-label="Gitea">
+      <path
+        fill="#609926"
+        d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"
+      />
+    </svg>
+  );
+}
+
+const DEPLOY_CARDS = [
+  {
+    name: "Docker Hub",
+    desc: "Pull the image and run Songs2VID on your own server with Docker Compose.",
+    Icon: DockerIcon,
+    cta: "View on Docker Hub",
+    href: DOCKER_HUB_URL,
+    accent: "text-[#2496ED]",
+    hover:
+      "hover:border-[#2496ED]/45 hover:bg-[#2496ED]/[0.06] hover:shadow-lg hover:shadow-[#2496ED]/20",
+    titleHover: "group-hover:text-[#2496ED]",
+  },
+  {
+    name: "Gitea",
+    desc: "Clone the open-source repository and deploy from source on your infrastructure.",
+    Icon: GiteaIcon,
+    cta: "View on Gitea",
+    href: GITEA_URL,
+    accent: "text-[#609926]",
+    hover:
+      "hover:border-[#609926]/45 hover:bg-[#609926]/[0.06] hover:shadow-lg hover:shadow-[#609926]/20",
+    titleHover: "group-hover:text-[#609926]",
+  },
+] as const;
+
+function DeployCard({
+  name,
+  desc,
+  Icon,
+  cta,
+  href,
+  accent,
+  hover,
+  titleHover,
+}: (typeof DEPLOY_CARDS)[number]) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`group block rounded-xl border border-gray-700/50 bg-surface p-6 transition-all duration-300 ${hover}`}
+    >
+      <div className="mb-4 flex items-center justify-between">
+        <Icon className="h-8 w-8 transition-transform duration-300 group-hover:scale-110" />
+        <span className="rounded bg-gray-800 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-gray-500 transition-colors duration-300 group-hover:bg-gray-700/80">
+          Open Source
+        </span>
+      </div>
+      <h3 className={`text-lg font-semibold text-white transition-colors duration-300 ${titleHover}`}>
+        {name}
+      </h3>
+      <p className="mt-2 text-sm leading-relaxed text-gray-400 transition-colors duration-300 group-hover:text-gray-300">
+        {desc}
+      </p>
+      <p className={`mt-4 text-sm font-medium ${accent} transition-all duration-300 group-hover:underline`}>
+        {cta}
+      </p>
+    </a>
+  );
+}
+
+export function DownloadSection() {
+  const sectionRef = useRef<HTMLElement>(null);
+
+  return (
+    <section
+      ref={sectionRef}
+      id="download"
+      className="relative scroll-mt-24 overflow-x-visible overflow-y-hidden px-6 py-24"
+    >
+      <SectionScrollTitle sectionRef={sectionRef} title="Download" />
+
+      <div className="relative z-10 mx-auto max-w-7xl">
+        <ScrollReveal>
+          <h2 className="mb-4 text-center text-3xl font-bold text-white">Download</h2>
+          <p className="mx-auto mb-12 max-w-2xl text-center text-gray-400">
+            Songs2VID is open source. Self-host on your own server with Docker or deploy from source.
+          </p>
+        </ScrollReveal>
+
+        <div className="grid items-start gap-10 lg:grid-cols-[1fr_1.1fr] lg:gap-12">
+          <ScrollReveal direction="left">
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-xl font-semibold text-white">Run it yourself</h3>
+                <p className="mt-3 leading-relaxed text-gray-400">
+                  Host Songs2VID on your infrastructure with full control over data, queues, and
+                  storage. Ideal for teams and creators who want a private deployment.
+                </p>
+              </div>
+
+              <ul className="space-y-3 text-sm text-gray-400">
+                <li className="flex items-start gap-3">
+                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-red-500" />
+                  Docker image published to Docker Hub
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-red-500" />
+                  Source code available on Gitea
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-red-500" />
+                  Gitea Issues community support
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-red-500" />
+                  PostgreSQL, Redis, FFmpeg, and worker included
+                </li>
+              </ul>
+
+              <div className="rounded-xl border border-gray-700/50 bg-surface-dark p-4">
+                <p className="mb-3 text-xs font-medium text-gray-500">Quick start</p>
+                <pre className="overflow-x-auto text-sm leading-relaxed text-gray-300">
+                  <code>{`docker pull atakanozban/songs2vid:latest\ndocker compose up -d`}</code>
+                </pre>
+              </div>
+            </div>
+          </ScrollReveal>
+
+          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-1">
+            {DEPLOY_CARDS.map((card, index) => (
+              <ScrollReveal key={card.name} delay={index * 120} direction="right">
+                <DeployCard {...card} />
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,235 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+import { FooterBadgeMarquee } from "@/components/FooterBadgeMarquee";
+import { Logo } from "@/components/Logo";
+import { prisma } from "@/lib/db";
+import {
+  DOCKER_HUB_URL,
+  DOCS_URL,
+  GITEA_ISSUES_URL,
+  GITEA_URL,
+  SUPPORT_EMAIL,
+} from "@/lib/plans";
+
+function GiteaIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" role="img" aria-hidden="true">
+      <path
+        fill="currentColor"
+        d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"
+      />
+    </svg>
+  );
+}
+
+function DockerIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" role="img" aria-hidden="true">
+      <path
+        fill="currentColor"
+        d="M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z"
+      />
+    </svg>
+  );
+}
+
+function FooterLink({
+  href,
+  children,
+  external,
+}: {
+  href: string;
+  children: ReactNode;
+  external?: boolean;
+}) {
+  const className = "transition-colors duration-300 hover:text-white";
+
+  if (external || href.startsWith("#") || href.startsWith("mailto:")) {
+    return (
+      <a
+        href={href}
+        target={external ? "_blank" : undefined}
+        rel={external ? "noopener noreferrer" : undefined}
+        className={className}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+function LegalLink({
+  href,
+  children,
+  external,
+}: {
+  href: string;
+  children: ReactNode;
+  external?: boolean;
+}) {
+  const className = "transition-colors duration-300 hover:text-gray-300";
+
+  if (external) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" className={className}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+const STATUS_URL = "https://status.atakanozban.com/status/2";
+const DOCS_INTRO_URL = `${DOCS_URL.replace(/\/$/, "")}/docs/intro`;
+const DOCS_API_URL = `${DOCS_URL.replace(/\/$/, "")}/docs/api/overview`;
+
+export async function Footer() {
+  const year = new Date().getFullYear();
+  let initialBadges: {
+    id: string;
+    name: string;
+    embedHtml: string | null;
+    imageUrl: string | null;
+    linkUrl: string | null;
+    sortOrder: number;
+  }[] = [];
+
+  try {
+    initialBadges = await prisma.footerBadge.findMany({
+      where: { isActive: true },
+      orderBy: [{ sortOrder: "asc" }, { createdAt: "asc" }],
+      select: {
+        id: true,
+        name: true,
+        embedHtml: true,
+        imageUrl: true,
+        linkUrl: true,
+        sortOrder: true,
+      },
+    });
+  } catch {
+    // Table may not exist yet during migrate; marquee client will retry via API.
+  }
+
+  return (
+    <footer className="mt-20 w-full border-t border-gray-800 bg-black/40 pb-8 pt-16 text-sm text-gray-400">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="grid grid-cols-1 gap-8 pb-8 md:grid-cols-12">
+          <div className="flex flex-col gap-4 md:col-span-5">
+            <Logo size="sm" beta />
+            <p className="max-w-sm text-gray-500">
+              Convert your audio tracks into stunning videos for YouTube. Beautiful, automated, and
+              fully open-source.
+            </p>
+            <div className="mt-2 flex items-center gap-4 text-gray-500">
+              <a
+                href={GITEA_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Gitea"
+                className="transition-colors duration-300 hover:text-[#609926]"
+              >
+                <GiteaIcon className="h-5 w-5" />
+              </a>
+              <a
+                href={DOCKER_HUB_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Docker Hub"
+                className="transition-colors duration-300 hover:text-[#2496ED]"
+              >
+                <DockerIcon className="h-5 w-5" />
+              </a>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-7">
+            <div className="flex flex-col gap-3">
+              <span className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+                Product
+              </span>
+              <FooterLink href="#pricing">Pricing</FooterLink>
+              <FooterLink href="#download">Download</FooterLink>
+              <FooterLink href="#benefits">Benefits</FooterLink>
+              <FooterLink href={DOCS_INTRO_URL} external>
+                Documentation
+              </FooterLink>
+              <FooterLink href={DOCS_API_URL} external>
+                API Reference
+              </FooterLink>
+              <FooterLink href={STATUS_URL} external>
+                Service Status
+              </FooterLink>
+            </div>
+
+            <div className="flex flex-col gap-3">
+              <span className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+                Open Source
+              </span>
+              <FooterLink href={GITEA_URL} external>
+                Gitea Instance
+              </FooterLink>
+              <FooterLink href={DOCKER_HUB_URL} external>
+                Docker Image
+              </FooterLink>
+              <FooterLink href={GITEA_ISSUES_URL} external>
+                Report a Bug
+              </FooterLink>
+            </div>
+
+            <div className="flex flex-col gap-3">
+              <span className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+                Contact
+              </span>
+              <FooterLink href={`mailto:${SUPPORT_EMAIL}`}>Support Email</FooterLink>
+              <span className="text-xs text-gray-600">Response within 24h for Pro users</span>
+            </div>
+          </div>
+        </div>
+
+        <FooterBadgeMarquee initialBadges={initialBadges} />
+
+        <div className="flex flex-col items-center gap-3 border-t border-gray-900 pt-8 text-xs text-gray-500 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 sm:justify-start">
+            <span>© {year} Songs2VID. All rights reserved.</span>
+            <span aria-hidden="true" className="hidden sm:inline">
+              |
+            </span>
+            <LegalLink href="/privacy">Privacy Policy</LegalLink>
+            <span aria-hidden="true" className="hidden sm:inline">
+              |
+            </span>
+            <LegalLink href="/terms">Terms of Service</LegalLink>
+            <span aria-hidden="true" className="hidden sm:inline">
+              |
+            </span>
+            <LegalLink href="/refund">Refund Policy</LegalLink>
+          </div>
+          <span className="shrink-0 text-center sm:text-right">
+            Made with ❤ by{" "}
+            <a
+              href="https://www.atakanozban.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="transition-colors duration-300 hover:text-gray-300"
+            >
+              atakan
+            </a>
+              .
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/FooterBadgeMarquee.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { BadgeEmbed } from "@/components/BadgeEmbed";
+
+export type PublicFooterBadge = {
+  id: string;
+  name: string;
+  embedHtml: string | null;
+  imageUrl: string | null;
+  linkUrl: string | null;
+  sortOrder: number;
+};
+
+type Props = {
+  initialBadges?: PublicFooterBadge[];
+};
+
+export function FooterBadgeMarquee({ initialBadges = [] }: Props) {
+  const [badges, setBadges] = useState<PublicFooterBadge[]>(initialBadges);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/badges")
+      .then(async (res) => {
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!cancelled && Array.isArray(data.badges)) {
+          setBadges(data.badges);
+        }
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (badges.length === 0) return null;
+
+  // Duplicate track for seamless infinite scroll
+  const loop = [...badges, ...badges];
+  const durationSec = Math.max(18, badges.length * 10);
+
+  return (
+    <div className="badge-marquee mb-12" aria-label="Featured on">
+      <div
+        className="badge-marquee-track"
+        style={{ ["--badge-marquee-duration" as string]: `${durationSec}s` }}
+      >
+        {loop.map((badge, index) => (
+          <div
+            key={`${badge.id}-${index}`}
+            className="badge-marquee-item"
+            aria-hidden={index >= badges.length ? true : undefined}
+          >
+            <BadgeEmbed badge={badge} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/JobHistory.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { displayJobItemError, isYouTubeUploadLimitError } from "@/lib/youtube/errors";
+import type { JobResponse } from "@/lib/types";
+import { YouTubeLimitBanner } from "./YouTubeLimitBanner";
+
+const STATUS_LABELS: Record<string, string> = {
+  PENDING: "Queued",
+  ENCODING: "Encoding",
+  UPLOADING: "Uploading",
+  COMPLETED: "Completed",
+  FAILED: "Failed",
+};
+
+function sameDay(a: Date, b: Date) {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function formatDayLabel(date: Date) {
+  const today = new Date();
+  const yesterday = new Date();
+  yesterday.setDate(today.getDate() - 1);
+
+  if (sameDay(date, today)) return "Today";
+  if (sameDay(date, yesterday)) return "Yesterday";
+
+  return date.toLocaleDateString(undefined, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+function groupJobsByDay(jobs: JobResponse[]) {
+  const groups = new Map<string, { label: string; jobs: JobResponse[] }>();
+
+  for (const job of jobs) {
+    const date = new Date(job.createdAt);
+    const key = date.toLocaleDateString("en-CA");
+    const existing = groups.get(key);
+
+    if (existing) {
+      existing.jobs.push(job);
+    } else {
+      groups.set(key, { label: formatDayLabel(date), jobs: [job] });
+    }
+  }
+
+  return Array.from(groups.entries())
+    .sort(([a], [b]) => b.localeCompare(a))
+    .map(([, group]) => group);
+}
+
+function statusClass(status: string) {
+  if (status === "COMPLETED") return "bg-green-500/20 text-green-400";
+  if (status === "FAILED") return "bg-red-500/20 text-red-400";
+  return "bg-yellow-500/20 text-yellow-400";
+}
+
+export function JobHistory() {
+  const [jobs, setJobs] = useState<JobResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+
+    async function load() {
+      try {
+        const res = await fetch("/api/jobs?limit=100");
+        if (!res.ok) throw new Error("Failed to load history");
+        const data = await res.json();
+        if (active) setJobs(data.jobs);
+      } catch (err) {
+        if (active) setError(err instanceof Error ? err.message : "Error loading history");
+      } finally {
+        if (active) setLoading(false);
+      }
+    }
+
+    load();
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const dayGroups = useMemo(() => groupJobsByDay(jobs), [jobs]);
+  const youtubeLimitHit = useMemo(
+    () =>
+      jobs.some((job) =>
+        job.items.some(
+          (item) => item.status === "FAILED" && item.error && isYouTubeUploadLimitError(item.error),
+        ),
+      ),
+    [jobs],
+  );
+
+  if (loading) {
+    return <div className="text-gray-400">Loading history…</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="rounded border border-red-500/50 bg-red-500/10 p-4 text-red-300">{error}</div>
+    );
+  }
+
+  if (dayGroups.length === 0) {
+    return (
+      <div className="rounded-lg border border-gray-700 bg-surface-light p-8 text-center">
+        <p className="text-gray-400">No videos created yet.</p>
+        <Link
+          href="/dashboard"
+          className="mt-4 inline-block rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover"
+        >
+          Create your first video
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {youtubeLimitHit && <YouTubeLimitBanner />}
+
+      {dayGroups.map((group) => (
+        <section key={group.label}>
+          <h2 className="mb-4 text-lg font-semibold text-white">{group.label}</h2>
+
+          <div className="space-y-4">
+            {group.jobs.map((job) => (
+              <div
+                key={job.id}
+                className="rounded-lg border border-gray-700 bg-surface-light p-4"
+              >
+                <div className="mb-3 flex items-center justify-between gap-4">
+                  <div>
+                    <p className="text-sm text-gray-400">
+                      {new Date(job.createdAt).toLocaleTimeString(undefined, {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
+                      {" · "}
+                      {job.items.length} video{job.items.length === 1 ? "" : "s"}
+                    </p>
+                    <p className="text-xs text-gray-500">
+                      Status: <span className="text-gray-300">{job.status}</span>
+                    </p>
+                  </div>
+                  <Link
+                    href={`/jobs/${job.id}`}
+                    className="text-sm text-accent transition-colors hover:text-accent-hover"
+                  >
+                    View job
+                  </Link>
+                </div>
+
+                <div className="space-y-2">
+                  {job.items.map((item) => {
+                    const itemError =
+                      item.status === "FAILED" ? displayJobItemError(item.error) : null;
+
+                    return (
+                      <div
+                        key={item.id}
+                        className="rounded border border-gray-800 bg-surface px-3 py-2"
+                      >
+                        <div className="flex items-start justify-between gap-4">
+                          <div className="min-w-0">
+                            <p className="truncate font-medium text-white">{item.title}</p>
+                            <p className="truncate text-xs text-gray-500">{item.audioFilename}</p>
+                            {item.youtubeVideoId && (
+                              <a
+                                href={`https://youtube.com/watch?v=${item.youtubeVideoId}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="mt-1 inline-block text-xs text-accent hover:underline"
+                              >
+                                View on YouTube
+                              </a>
+                            )}
+                          </div>
+                          <span
+                            className={`shrink-0 rounded px-2 py-1 text-xs font-medium ${statusClass(item.status)}`}
+                          >
+                            {STATUS_LABELS[item.status] || item.status}
+                          </span>
+                        </div>
+                        {itemError && (
+                          <p className="mt-2 text-xs leading-relaxed text-red-400">{itemError}</p>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

components/JobProgress.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { displayJobItemError, isYouTubeUploadLimitError } from "@/lib/youtube/errors";
+import type { JobResponse } from "@/lib/types";
+import { YouTubeLimitBanner } from "./YouTubeLimitBanner";
+
+type Props = {
+  jobId: string;
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  PENDING: "Queued",
+  ENCODING: "Encoding video…",
+  UPLOADING: "Uploading to YouTube…",
+  COMPLETED: "Completed",
+  FAILED: "Failed",
+};
+
+export function JobProgress({ jobId }: Props) {
+  const [job, setJob] = useState<JobResponse | null>(null);
+  const [quota, setQuota] = useState<{
+    remaining: number;
+    limit: number;
+    totalAvailable: number;
+    plan: string;
+    resetsIn: string;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+
+    async function poll() {
+      try {
+        const [jobRes, quotaRes] = await Promise.all([
+          fetch(`/api/jobs/${jobId}`),
+          fetch("/api/quota"),
+        ]);
+
+        if (!jobRes.ok) throw new Error("Failed to load job");
+        const jobData = await jobRes.json();
+        if (active) setJob(jobData);
+
+        if (quotaRes.ok) {
+          const quotaData = await quotaRes.json();
+          if (active)
+            setQuota({
+              remaining: quotaData.remaining,
+              limit: quotaData.limit,
+              totalAvailable: quotaData.totalAvailable ?? quotaData.remaining,
+              plan: quotaData.plan,
+              resetsIn: quotaData.resetsIn,
+            });
+        }
+      } catch (err) {
+        if (active) setError(err instanceof Error ? err.message : "Error loading job");
+      }
+    }
+
+    poll();
+    const interval = setInterval(poll, 3000);
+    return () => {
+      active = false;
+      clearInterval(interval);
+    };
+  }, [jobId]);
+
+  if (error) {
+    return <div className="rounded border border-red-500/50 bg-red-500/10 p-4 text-red-300">{error}</div>;
+  }
+
+  if (!job) {
+    return <div className="text-gray-400">Loading job status…</div>;
+  }
+
+  const allDone = job.items.every((i) => i.status === "COMPLETED" || i.status === "FAILED");
+  const youtubeLimitHit = job.items.some(
+    (i) => i.status === "FAILED" && i.error && isYouTubeUploadLimitError(i.error),
+  );
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-xl font-semibold text-white">Job Status</h2>
+          <p className="text-sm text-gray-400">
+            Overall: <span className="text-white">{job.status}</span>
+          </p>
+        </div>
+        {quota && (
+          <div className="rounded bg-surface-light px-4 py-2 text-sm text-gray-300">
+            {quota.remaining} / {quota.limit} plan · {quota.totalAvailable} total available ·{" "}
+            {quota.plan === "FREE"
+              ? `resets ${quota.resetsIn}`
+              : `monthly resets on ${quota.resetsIn}`}
+          </div>
+        )}
+      </div>
+
+      {youtubeLimitHit && <YouTubeLimitBanner />}
+
+      <div className="space-y-3">
+        {job.items.map((item) => (
+          <div
+            key={item.id}
+            className="rounded-lg border border-gray-700 bg-surface-light p-4"
+          >
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <p className="font-medium text-white">{item.title}</p>
+                <p className="text-xs text-gray-500">{item.audioFilename}</p>
+              </div>
+              <span
+                className={`rounded px-2 py-1 text-xs font-medium ${
+                  item.status === "COMPLETED"
+                    ? "bg-green-500/20 text-green-400"
+                    : item.status === "FAILED"
+                      ? "bg-red-500/20 text-red-400"
+                      : "bg-yellow-500/20 text-yellow-400"
+                }`}
+              >
+                {STATUS_LABELS[item.status] || item.status}
+              </span>
+            </div>
+
+            {item.youtubeVideoId && (
+              <a
+                href={`https://youtube.com/watch?v=${item.youtubeVideoId}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-2 inline-block text-sm text-accent hover:underline"
+              >
+                View on YouTube
+              </a>
+            )}
+
+            {item.status === "FAILED" && displayJobItemError(item.error) && (
+              <p className="mt-2 text-sm text-red-400">{displayJobItemError(item.error)}</p>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {allDone && (
+        <Link
+          href="/dashboard"
+          className="inline-block rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover"
+        >
+          Create another video
+        </Link>
+      )}
+    </div>
+  );
+}

components/JsonLd.tsx

@@ -0,0 +1,23 @@
+export function JsonLd() {
+  const schema = {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    name: "Songs2VID",
+    url: "https://songs2vid.com",
+    operatingSystem: "Web",
+    applicationCategory: "MultimediaApplication",
+    description: "Online tool to convert audio files into YouTube videos.",
+    offers: {
+      "@type": "Offer",
+      price: "0",
+      priceCurrency: "USD",
+    },
+  };
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
+    />
+  );
+}

components/LandingNavbar.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { Logo } from "@/components/Logo";
+import { MobileMenuButton, MobileSidebar, sidebarLinkClass } from "@/components/MobileSidebar";
+import { DOCS_URL } from "@/lib/plans";
+
+const NAV_LINKS = [
+  { href: "#benefits", label: "Benefits" },
+  { href: "#download", label: "Download" },
+  { href: "#pricing", label: "Pricing" },
+  { href: "#support", label: "Support" },
+] as const;
+
+const DOCS_HREF = `${DOCS_URL.replace(/\/$/, "")}/docs/intro`;
+
+function NavAnchor({
+  href,
+  label,
+  onNavigate,
+  className = "text-base font-medium text-gray-300 transition-colors duration-200 hover:text-white",
+}: {
+  href: string;
+  label: string;
+  onNavigate?: () => void;
+  className?: string;
+}) {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const id = href.replace("#", "");
+    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+    window.history.pushState(null, "", href);
+    onNavigate?.();
+  };
+
+  return (
+    <a href={href} onClick={handleClick} className={className}>
+      {label}
+    </a>
+  );
+}
+
+function DocsLink({
+  onNavigate,
+  className = "text-base font-medium text-gray-300 transition-colors duration-200 hover:text-white",
+}: {
+  onNavigate?: () => void;
+  className?: string;
+}) {
+  return (
+    <a
+      href={DOCS_HREF}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={className}
+      onClick={() => onNavigate?.()}
+    >
+      Docs
+    </a>
+  );
+}
+
+export function LandingNavbar() {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <>
+      <header className="group absolute left-0 right-0 top-0 z-20 bg-transparent transition-all duration-300 hover:bg-black/70 hover:backdrop-blur-md">
+        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+          <Logo size="md" beta />
+
+          <div className="flex items-center gap-4">
+            <nav className="hidden items-center gap-10 sm:flex">
+              {NAV_LINKS.map(({ href, label }) => (
+                <NavAnchor key={href} href={href} label={label} />
+              ))}
+              <DocsLink />
+            </nav>
+
+            <MobileMenuButton
+              open={menuOpen}
+              onClick={() => setMenuOpen((prev) => !prev)}
+            />
+          </div>
+        </div>
+      </header>
+
+      <MobileSidebar open={menuOpen} onClose={() => setMenuOpen(false)} title="Menu">
+        {NAV_LINKS.map(({ href, label }) => (
+          <NavAnchor
+            key={href}
+            href={href}
+            label={label}
+            onNavigate={() => setMenuOpen(false)}
+            className={sidebarLinkClass()}
+          />
+        ))}
+        <DocsLink
+          onNavigate={() => setMenuOpen(false)}
+          className={sidebarLinkClass()}
+        />
+      </MobileSidebar>
+    </>
+  );
+}

components/LayoutStudio.tsx

@@ -0,0 +1,874 @@
+"use client";
+
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type ChangeEvent,
+} from "react";
+import { getVideoAttributionText } from "@/lib/branding";
+import {
+  CURATED_FONTS,
+  type CuratedFontKey,
+  type WatermarkFontKey,
+} from "@/lib/fonts";
+import {
+  BLUR_AMOUNT_MAX,
+  BLUR_AMOUNT_MIN,
+  BLUR_OPACITY_DEFAULT,
+  BLUR_OPACITY_MAX,
+  BLUR_OPACITY_MIN,
+  DEFAULT_LAYOUT,
+  LAYOUT_TEMPLATE_LABELS,
+  LAYOUT_TEMPLATES,
+  TEXT_OFFSET_MAX,
+  TEXT_OFFSET_MIN,
+  TEXT_PADDING_MAX,
+  TEXT_PADDING_MIN,
+  TITLE_ARTIST_GAP_MAX,
+  TITLE_ARTIST_GAP_MIN,
+  type LayoutSettings,
+  type LayoutTemplate,
+} from "@/lib/layout";
+import {
+  WATERMARK_WIDTH_FRACTION,
+  artistFontSizeForWidth,
+  curatedFontApiUrl,
+  previewFontFamilyCss,
+  scaleFontToPreview,
+  titleFontSizeForWidth,
+  watermarkFontSizeForWidth,
+} from "@/lib/preview-typography";
+import {
+  DEFAULT_WATERMARK,
+  WATERMARK_OFFSET_MAX,
+  WATERMARK_OFFSET_MIN,
+  WATERMARK_POSITIONS,
+  WATERMARK_TEXT_MAX,
+  type WatermarkMode,
+  type WatermarkPosition,
+  type WatermarkSettings,
+} from "@/lib/watermark";
+import { UpgradeProButton } from "./UpgradeProButton";
+
+type Props = {
+  locked: boolean;
+  previewImageUrl: string | null;
+  /** On-video song title (art-track layouts). */
+  songTitle: string;
+  artist: string;
+  /** Encode width from selected resolution (e.g. 1280). */
+  encodeWidth?: number;
+  layout: LayoutSettings;
+  onLayoutChange: (next: LayoutSettings) => void;
+  watermark: WatermarkSettings;
+  onWatermarkChange: (next: WatermarkSettings) => void;
+  onUploadLogo: (file: File) => Promise<string>;
+  onUploadFont: (file: File) => Promise<string>;
+  logoPreviewUrl?: string | null;
+};
+
+const WM_POSITION_LABELS: Record<WatermarkPosition, string> = {
+  "top-left": "Top left",
+  "top-right": "Top right",
+  "bottom-left": "Bottom left",
+  "bottom-right": "Bottom right",
+  center: "Center",
+};
+
+const CUSTOM_PREVIEW_FAMILY = "S2VIDCustomWm";
+
+function previewFontFamily(fontKey: WatermarkFontKey | undefined): string {
+  return previewFontFamilyCss(fontKey);
+}
+
+function watermarkOverlayStyle(
+  position: WatermarkPosition,
+  offsetX: number,
+  offsetY: number,
+  sizedBox = false,
+): CSSProperties {
+  const base: CSSProperties = {
+    position: "absolute",
+    maxWidth: `${WATERMARK_WIDTH_FRACTION * 100}%`,
+    pointerEvents: "none",
+    zIndex: 5,
+    ...(sizedBox
+      ? { width: `${WATERMARK_WIDTH_FRACTION * 100}%` }
+      : null),
+  };
+  const ox = `${offsetX}px`;
+  const oy = `${offsetY}px`;
+  switch (position) {
+    case "top-left":
+      return { ...base, top: oy, left: ox };
+    case "top-right":
+      return { ...base, top: oy, right: ox };
+    case "bottom-left":
+      return { ...base, bottom: oy, left: ox };
+    case "center":
+      return {
+        ...base,
+        top: "50%",
+        left: "50%",
+        transform: `translate(calc(-50% + ${offsetX}px), calc(-50% + ${offsetY}px))`,
+      };
+    case "bottom-right":
+    default:
+      return { ...base, bottom: oy, right: ox };
+  }
+}
+
+function MiniThumb({
+  template,
+  active,
+  onClick,
+  disabled,
+}: {
+  template: LayoutTemplate | null;
+  active: boolean;
+  onClick: () => void;
+  disabled: boolean;
+}) {
+  const isClassic = template === null;
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className={`overflow-hidden rounded border text-left transition-colors ${
+        active
+          ? "border-accent bg-accent/10"
+          : "border-gray-700 bg-black/40 hover:border-gray-500"
+      } disabled:cursor-not-allowed disabled:opacity-50`}
+    >
+      <div className="relative aspect-video w-full overflow-hidden bg-gradient-to-br from-gray-800 to-gray-950 p-1">
+        {isClassic ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="h-[70%] w-[45%] rounded-sm bg-gray-600" />
+          </div>
+        ) : (
+          <div className="relative h-full w-full overflow-hidden bg-gray-700/50">
+            <div className="absolute inset-0 scale-110 bg-gray-600/40 blur-[3px]" />
+            {template === "COVER_LEFT_TEXT_RIGHT" && (
+              <>
+                <div className="absolute left-[6%] top-[18%] h-[64%] w-[38%] bg-gray-300" />
+                <div className="absolute right-[8%] top-[38%] h-1 w-[40%] rounded bg-white/80" />
+                <div className="absolute right-[8%] top-[52%] h-0.5 w-[28%] rounded bg-white/50" />
+              </>
+            )}
+            {template === "COVER_RIGHT_TEXT_LEFT" && (
+              <>
+                <div className="absolute right-[6%] top-[18%] h-[64%] w-[38%] bg-gray-300" />
+                <div className="absolute left-[8%] top-[38%] h-1 w-[40%] rounded bg-white/80" />
+                <div className="absolute left-[8%] top-[52%] h-0.5 w-[28%] rounded bg-white/50" />
+              </>
+            )}
+            {template === "COVER_TOP_TEXT_BOTTOM" && (
+              <>
+                <div className="absolute left-[8%] top-[6%] h-[52%] w-[84%] bg-gray-300" />
+                <div className="absolute left-[20%] bottom-[18%] h-1 w-[60%] rounded bg-white/80" />
+                <div className="absolute left-[28%] bottom-[8%] h-0.5 w-[44%] rounded bg-white/50" />
+              </>
+            )}
+            {template === "CENTERED_COMPACT" && (
+              <>
+                <div className="absolute left-[32%] top-[14%] h-[42%] w-[36%] bg-gray-300" />
+                <div className="absolute left-[28%] bottom-[22%] h-1 w-[44%] rounded bg-white/80" />
+                <div className="absolute left-[34%] bottom-[12%] h-0.5 w-[32%] rounded bg-white/50" />
+              </>
+            )}
+          </div>
+        )}
+      </div>
+      <p className="px-2 py-1.5 text-[10px] font-medium text-gray-300">
+        {isClassic ? "Classic letterbox" : LAYOUT_TEMPLATE_LABELS[template]}
+      </p>
+    </button>
+  );
+}
+
+function previewCoverStyle(
+  template: LayoutTemplate,
+  padPct: number,
+): CSSProperties {
+  const p = `${padPct}%`;
+  switch (template) {
+    case "COVER_LEFT_TEXT_RIGHT":
+      return {
+        position: "absolute",
+        left: p,
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: "38%",
+        maxHeight: "72%",
+        objectFit: "contain",
+      };
+    case "COVER_RIGHT_TEXT_LEFT":
+      return {
+        position: "absolute",
+        right: p,
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: "38%",
+        maxHeight: "72%",
+        objectFit: "contain",
+      };
+    case "COVER_TOP_TEXT_BOTTOM":
+      return {
+        position: "absolute",
+        left: "50%",
+        top: p,
+        transform: "translateX(-50%)",
+        width: `calc(100% - ${padPct * 2}%)`,
+        maxHeight: "56%",
+        objectFit: "contain",
+      };
+    case "CENTERED_COMPACT":
+      return {
+        position: "absolute",
+        left: "50%",
+        top: "16%",
+        transform: "translateX(-50%)",
+        width: "38%",
+        maxHeight: "38%",
+        objectFit: "contain",
+      };
+  }
+}
+
+function previewTextStyle(
+  template: LayoutTemplate,
+  padPct: number,
+  textOffsetX: number,
+  textOffsetY: number,
+  titleArtistGap: number,
+): CSSProperties {
+  const p = `${padPct}%`;
+  const shift = {
+    transform: undefined as string | undefined,
+  };
+
+  const baseGap = { display: "flex", flexDirection: "column" as const, gap: `${titleArtistGap}px` };
+
+  switch (template) {
+    case "COVER_LEFT_TEXT_RIGHT":
+      return {
+        ...baseGap,
+        position: "absolute",
+        left: `calc(48% + ${textOffsetX}px)`,
+        right: p,
+        top: "50%",
+        transform: `translateY(calc(-50% + ${textOffsetY}px))`,
+        textAlign: "left",
+      };
+    case "COVER_RIGHT_TEXT_LEFT":
+      return {
+        ...baseGap,
+        position: "absolute",
+        left: p,
+        right: `calc(48% - ${textOffsetX}px)`,
+        top: "50%",
+        transform: `translateY(calc(-50% + ${textOffsetY}px))`,
+        textAlign: "left",
+      };
+    case "COVER_TOP_TEXT_BOTTOM":
+      return {
+        ...baseGap,
+        position: "absolute",
+        left: p,
+        right: p,
+        bottom: `calc(10% - ${textOffsetY}px)`,
+        transform: textOffsetX ? `translateX(${textOffsetX}px)` : undefined,
+        textAlign: "center",
+        alignItems: "center",
+      };
+    case "CENTERED_COMPACT":
+      return {
+        ...baseGap,
+        position: "absolute",
+        left: p,
+        right: p,
+        top: `calc(58% + ${textOffsetY}px)`,
+        transform: textOffsetX ? `translateX(${textOffsetX}px)` : undefined,
+        textAlign: "center",
+        alignItems: "center",
+      };
+  }
+  void shift;
+}
+
+export function LayoutStudio({
+  locked,
+  previewImageUrl,
+  songTitle,
+  artist,
+  encodeWidth = 1280,
+  layout,
+  onLayoutChange,
+  watermark,
+  onWatermarkChange,
+  onUploadLogo,
+  onUploadFont,
+  logoPreviewUrl,
+}: Props) {
+  const [logoUploading, setLogoUploading] = useState(false);
+  const [logoError, setLogoError] = useState<string | null>(null);
+  const [fontUploading, setFontUploading] = useState(false);
+  const [fontError, setFontError] = useState<string | null>(null);
+  const [customFontObjectUrl, setCustomFontObjectUrl] = useState<string | null>(null);
+
+  // Always coalesce  HMR / older session state may omit newly added fields
+  const L: LayoutSettings = {
+    ...DEFAULT_LAYOUT,
+    ...layout,
+    blurAmount: layout.blurAmount ?? DEFAULT_LAYOUT.blurAmount,
+    blurOpacity: layout.blurOpacity ?? BLUR_OPACITY_DEFAULT,
+    textPadding: layout.textPadding ?? DEFAULT_LAYOUT.textPadding,
+    titleArtistGap: layout.titleArtistGap ?? DEFAULT_LAYOUT.titleArtistGap,
+    textOffsetX: layout.textOffsetX ?? DEFAULT_LAYOUT.textOffsetX,
+    textOffsetY: layout.textOffsetY ?? DEFAULT_LAYOUT.textOffsetY,
+  };
+  const W: WatermarkSettings = {
+    ...DEFAULT_WATERMARK,
+    ...watermark,
+    text: watermark.text ?? "",
+    offsetX: watermark.offsetX ?? DEFAULT_WATERMARK.offsetX,
+    offsetY: watermark.offsetY ?? DEFAULT_WATERMARK.offsetY,
+    fontKey: watermark.fontKey ?? "system",
+  };
+
+  const blurPx = useMemo(
+    () => Math.round((L.blurAmount / 100) * 28),
+    [L.blurAmount],
+  );
+  const padPct = useMemo(
+    () =>
+      3 +
+      ((L.textPadding - TEXT_PADDING_MIN) / (TEXT_PADDING_MAX - TEXT_PADDING_MIN)) * 5,
+    [L.textPadding],
+  );
+
+  const wmOverlay = useMemo(
+    () =>
+      watermarkOverlayStyle(
+        W.position,
+        W.offsetX,
+        W.offsetY,
+        W.mode === "default" || W.mode === "logo",
+      ),
+    [W.position, W.offsetX, W.offsetY, W.mode],
+  );
+
+  const textFontStyle = useMemo(
+    () => ({ fontFamily: previewFontFamily(W.fontKey) }),
+    [W.fontKey],
+  );
+
+  const titlePreviewPx = useMemo(
+    () => scaleFontToPreview(titleFontSizeForWidth(encodeWidth), encodeWidth),
+    [encodeWidth],
+  );
+  const artistPreviewPx = useMemo(
+    () => scaleFontToPreview(artistFontSizeForWidth(encodeWidth), encodeWidth),
+    [encodeWidth],
+  );
+  const wmTextPreviewPx = useMemo(
+    () => scaleFontToPreview(watermarkFontSizeForWidth(encodeWidth), encodeWidth),
+    [encodeWidth],
+  );
+
+  useEffect(() => {
+    const styleId = "s2vid-preview-curated-fonts";
+    let el = document.getElementById(styleId) as HTMLStyleElement | null;
+    if (!el) {
+      el = document.createElement("style");
+      el.id = styleId;
+      document.head.appendChild(el);
+    }
+    el.textContent = CURATED_FONTS.map(
+      (f) => `@font-face {
+  font-family: 'S2VIDPreview-${f.key}';
+  src: url('${curatedFontApiUrl(f.key)}') format('truetype');
+  font-display: swap;
+}`,
+    ).join("\n");
+  }, []);
+
+  useEffect(() => {
+    if (!customFontObjectUrl) return;
+    const styleId = "s2vid-watermark-custom-font";
+    let el = document.getElementById(styleId) as HTMLStyleElement | null;
+    if (!el) {
+      el = document.createElement("style");
+      el.id = styleId;
+      document.head.appendChild(el);
+    }
+    el.textContent = `
+@font-face {
+  font-family: '${CUSTOM_PREVIEW_FAMILY}';
+  src: url('${customFontObjectUrl}');
+  font-display: swap;
+}`;
+  }, [customFontObjectUrl]);
+
+  useEffect(() => {
+    return () => {
+      if (customFontObjectUrl) URL.revokeObjectURL(customFontObjectUrl);
+    };
+  }, [customFontObjectUrl]);
+
+  function patchLayout(partial: Partial<LayoutSettings>) {
+    if (locked) return;
+    onLayoutChange({ ...DEFAULT_LAYOUT, ...layout, ...partial });
+  }
+
+  function patchWm(partial: Partial<WatermarkSettings>) {
+    if (locked) return;
+    onWatermarkChange({ ...DEFAULT_WATERMARK, ...watermark, ...partial });
+  }
+
+  async function handleLogo(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file || locked) return;
+    setLogoError(null);
+    setLogoUploading(true);
+    try {
+      const path = await onUploadLogo(file);
+      patchWm({ mode: "logo", logoPath: path });
+    } catch (err) {
+      setLogoError(err instanceof Error ? err.message : "Logo upload failed");
+    } finally {
+      setLogoUploading(false);
+    }
+  }
+
+  async function handleFont(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file || locked) return;
+    setFontError(null);
+    setFontUploading(true);
+    try {
+      const objectUrl = URL.createObjectURL(file);
+      if (customFontObjectUrl) URL.revokeObjectURL(customFontObjectUrl);
+      setCustomFontObjectUrl(objectUrl);
+      const path = await onUploadFont(file);
+      patchWm({ fontKey: "custom", fontPath: path });
+    } catch (err) {
+      setFontError(err instanceof Error ? err.message : "Font upload failed");
+    } finally {
+      setFontUploading(false);
+    }
+  }
+
+  function setFontKey(key: WatermarkFontKey) {
+    if (key === "custom") {
+      patchWm({ fontKey: "custom", fontPath: watermark.fontPath ?? null });
+      return;
+    }
+    patchWm({ fontKey: key, fontPath: null });
+  }
+
+  const artTrack = Boolean(L.template);
+
+  return (
+    <div
+      className={`relative rounded-lg border border-gray-700 bg-surface p-6 ${
+        locked ? "opacity-80" : ""
+      }`}
+    >
+      {locked && (
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-lg bg-black/55 px-4 text-center backdrop-blur-[1px]">
+          <span className="rounded border border-accent/50 bg-accent/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-accent">
+            Pro
+          </span>
+          <p className="max-w-sm text-sm text-gray-200">
+            Art-track layouts, blur backgrounds, typography, and watermark studio are Pro features.
+          </p>
+          <UpgradeProButton
+            label="Unlock video layout studio"
+            className="rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover"
+          />
+        </div>
+      )}
+
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <h3 className="text-lg font-medium text-white">Video layout</h3>
+        <span className="rounded border border-accent/40 bg-accent/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-accent">
+          Pro
+        </span>
+      </div>
+
+      {/* Single live preview: art-track + watermark */}
+      <div
+        className="relative mx-auto aspect-video w-full max-w-xl overflow-hidden rounded border border-gray-800 bg-black"
+        aria-hidden={locked}
+      >
+        {previewImageUrl ? (
+          <>
+            {artTrack ? (
+              <>
+                <div className="absolute inset-0 bg-black" />
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={previewImageUrl}
+                  alt=""
+                  className="absolute inset-0 h-full w-full object-cover"
+                  style={{
+                    filter: L.blurAmount > 0 ? `blur(${blurPx}px)` : undefined,
+                    transform: "scale(1.15)",
+                    opacity: L.blurOpacity / 100,
+                  }}
+                />
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={previewImageUrl}
+                  alt=""
+                  style={previewCoverStyle(L.template!, padPct)}
+                  className="pointer-events-none"
+                />
+                <div
+                  style={previewTextStyle(
+                    L.template!,
+                    padPct,
+                    L.textOffsetX,
+                    L.textOffsetY,
+                    L.titleArtistGap,
+                  )}
+                >
+                  <p
+                    className="max-w-full truncate font-semibold text-white drop-shadow"
+                    style={{
+                      ...textFontStyle,
+                      fontSize: `${titlePreviewPx}px`,
+                      lineHeight: 1.15,
+                    }}
+                  >
+                    {songTitle.trim() || "Track title"}
+                  </p>
+                  <p
+                    className="max-w-full truncate text-white/75 drop-shadow"
+                    style={{
+                      ...textFontStyle,
+                      fontSize: `${artistPreviewPx}px`,
+                      lineHeight: 1.15,
+                    }}
+                  >
+                    {artist.trim() || "Artist"}
+                  </p>
+                </div>
+              </>
+            ) : (
+              <div className="absolute inset-0 flex items-center justify-center bg-black">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={previewImageUrl}
+                  alt=""
+                  className="max-h-full max-w-full object-contain"
+                />
+              </div>
+            )}
+
+            {W.mode !== "none" && (
+              <div style={wmOverlay}>
+                {W.mode === "default" ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src="/api/branding/watermark"
+                    alt=""
+                    className="h-auto w-full object-contain"
+                  />
+                ) : W.mode === "logo" && logoPreviewUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={logoPreviewUrl}
+                    alt=""
+                    className="h-auto w-full object-contain"
+                  />
+                ) : W.mode === "text" ? (
+                  <span
+                    className="font-medium text-white/90 drop-shadow"
+                    style={{
+                      ...textFontStyle,
+                      fontSize: `${wmTextPreviewPx}px`,
+                    }}
+                  >
+                    {W.text?.trim()
+                      ? W.text.trim().slice(0, WATERMARK_TEXT_MAX)
+                      : getVideoAttributionText()}
+                  </span>
+                ) : null}
+              </div>
+            )}
+          </>
+        ) : (
+          <div className="flex h-full items-center justify-center text-sm text-gray-600">
+            Upload a cover image to preview
+          </div>
+        )}
+      </div>
+
+      {/* Art-track templates */}
+      <p className="mb-2 mt-5 text-sm font-medium text-gray-300">Composition</p>
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-5">
+        <MiniThumb
+          template={null}
+          active={L.template === null}
+          disabled={locked}
+          onClick={() => patchLayout({ template: null })}
+        />
+        {LAYOUT_TEMPLATES.map((t) => (
+          <MiniThumb
+            key={t}
+            template={t}
+            active={L.template === t}
+            disabled={locked}
+            onClick={() => patchLayout({ template: t })}
+          />
+        ))}
+      </div>
+
+      <div className="mt-4 grid gap-3 sm:grid-cols-2">
+        <label className="text-sm text-gray-400">
+          Background blur ({L.blurAmount}%)
+          <input
+            type="range"
+            min={BLUR_AMOUNT_MIN}
+            max={BLUR_AMOUNT_MAX}
+            disabled={locked || !artTrack}
+            value={L.blurAmount}
+            onChange={(e) => patchLayout({ blurAmount: Number(e.target.value) })}
+            className="mt-1 w-full disabled:opacity-40"
+          />
+        </label>
+        <label className="text-sm text-gray-400">
+          Background opacity ({L.blurOpacity}%)
+          <input
+            type="range"
+            min={BLUR_OPACITY_MIN}
+            max={BLUR_OPACITY_MAX}
+            disabled={locked || !artTrack}
+            value={L.blurOpacity}
+            onChange={(e) => patchLayout({ blurOpacity: Number(e.target.value) })}
+            className="mt-1 w-full disabled:opacity-40"
+          />
+        </label>
+        <label className="text-sm text-gray-400">
+          Cover / edge padding ({L.textPadding}px)
+          <input
+            type="range"
+            min={TEXT_PADDING_MIN}
+            max={TEXT_PADDING_MAX}
+            disabled={locked || !artTrack}
+            value={L.textPadding}
+            onChange={(e) => patchLayout({ textPadding: Number(e.target.value) })}
+            className="mt-1 w-full disabled:opacity-40"
+          />
+        </label>
+        <label className="text-sm text-gray-400">
+          Title ↔ artist gap ({L.titleArtistGap}px)
+          <input
+            type="range"
+            min={TITLE_ARTIST_GAP_MIN}
+            max={TITLE_ARTIST_GAP_MAX}
+            disabled={locked || !artTrack}
+            value={L.titleArtistGap}
+            onChange={(e) =>
+              patchLayout({ titleArtistGap: Number(e.target.value) })
+            }
+            className="mt-1 w-full disabled:opacity-40"
+          />
+        </label>
+        <label className="text-sm text-gray-400">
+          Text horizontal ({L.textOffsetX}px)
+          <input
+            type="range"
+            min={TEXT_OFFSET_MIN}
+            max={TEXT_OFFSET_MAX}
+            disabled={locked || !artTrack}
+            value={L.textOffsetX}
+            onChange={(e) => patchLayout({ textOffsetX: Number(e.target.value) })}
+            className="mt-1 w-full disabled:opacity-40"
+          />
+        </label>
+        <label className="text-sm text-gray-400 sm:col-span-2">
+          Text vertical ({L.textOffsetY}px)
+          <input
+            type="range"
+            min={TEXT_OFFSET_MIN}
+            max={TEXT_OFFSET_MAX}
+            disabled={locked || !artTrack}
+            value={L.textOffsetY}
+            onChange={(e) => patchLayout({ textOffsetY: Number(e.target.value) })}
+            className="mt-1 w-full disabled:opacity-40"
+          />
+        </label>
+      </div>
+
+      {/* Typography (matches FFmpeg art-track + watermark text fonts) */}
+      <div className="mt-6 border-t border-gray-800 pt-5">
+        <p className="mb-3 text-sm font-medium text-gray-300">Typography</p>
+        <label className="block text-sm text-gray-400">
+          Font
+          <select
+            disabled={locked}
+            value={W.fontKey ?? "system"}
+            onChange={(e) => setFontKey(e.target.value as WatermarkFontKey)}
+            className="input-field mt-1"
+          >
+            <option value="system">Arial (system default)</option>
+            {CURATED_FONTS.map((f) => (
+              <option key={f.key} value={f.key}>
+                {f.label}
+              </option>
+            ))}
+            <option value="custom">Custom upload (.ttf / .otf)</option>
+          </select>
+        </label>
+        {W.fontKey === "custom" && (
+          <div className="mt-3">
+            <label className="mb-1 block text-sm text-gray-400">
+              Upload font (.ttf or .otf, max 10 MB)
+            </label>
+            <input
+              type="file"
+              accept=".ttf,.otf,font/ttf,font/otf"
+              disabled={locked || fontUploading}
+              onChange={(e) => void handleFont(e)}
+              className="block w-full text-sm text-gray-300 file:mr-4 file:rounded file:border-0 file:bg-accent file:px-4 file:py-2 file:text-sm file:text-white"
+            />
+            {fontUploading && (
+              <p className="mt-1 text-xs text-yellow-400">Uploading font…</p>
+            )}
+            {fontError && <p className="mt-1 text-xs text-red-400">{fontError}</p>}
+          </div>
+        )}
+        {(W.fontKey === "custom" ||
+          (W.fontKey &&
+            W.fontKey !== "system" &&
+            CURATED_FONTS.some((f) => f.key === (W.fontKey as CuratedFontKey)))) && (
+          <p
+            className="mt-2 text-xs text-gray-500"
+            style={{ ...textFontStyle, fontSize: `${scaleFontToPreview(16, encodeWidth)}px` }}
+          >
+            Preview: The quick brown fox jumps over the lazy dog
+          </p>
+        )}
+      </div>
+
+      {/* Watermark section */}
+      <div className="mt-6 border-t border-gray-800 pt-5">
+        <p className="mb-3 text-sm font-medium text-gray-300">Watermark</p>
+        <div className="flex flex-wrap gap-2">
+          {(
+            [
+              ["none", "No watermark"],
+              ["default", "Songs2VID badge"],
+              ["text", "Custom text"],
+              ["logo", "PNG logo"],
+            ] as const
+          ).map(([mode, label]) => (
+            <button
+              key={mode}
+              type="button"
+              disabled={locked}
+              onClick={() => patchWm({ mode: mode as WatermarkMode })}
+              className={`rounded border px-3 py-1.5 text-xs font-medium transition-colors ${
+                W.mode === mode
+                  ? "border-accent bg-accent/15 text-accent"
+                  : "border-gray-700 text-gray-400 hover:border-gray-500"
+              } disabled:cursor-not-allowed`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+
+        {W.mode === "text" && (
+          <div className="mt-3 space-y-3">
+            <label className="block text-sm text-gray-400">
+              Watermark text
+              <input
+                type="text"
+                maxLength={WATERMARK_TEXT_MAX}
+                disabled={locked}
+                value={W.text ?? ""}
+                onChange={(e) => patchWm({ text: e.target.value })}
+                className="input-field mt-1"
+                placeholder="Your brand name"
+              />
+            </label>
+          </div>
+        )}
+
+        {W.mode === "logo" && (
+          <div className="mt-3">
+            <label className="mb-1 block text-sm text-gray-400">PNG logo</label>
+            <input
+              type="file"
+              accept="image/png,.png"
+              disabled={locked || logoUploading}
+              onChange={(e) => void handleLogo(e)}
+              className="block w-full text-sm text-gray-300 file:mr-4 file:rounded file:border-0 file:bg-accent file:px-4 file:py-2 file:text-sm file:text-white"
+            />
+            {logoUploading && (
+              <p className="mt-1 text-xs text-yellow-400">Uploading logo…</p>
+            )}
+            {logoError && <p className="mt-1 text-xs text-red-400">{logoError}</p>}
+          </div>
+        )}
+
+        <div className="mt-4">
+          <p className="mb-2 text-sm text-gray-400">Watermark position</p>
+          <div className="grid grid-cols-3 gap-2 sm:grid-cols-5">
+            {WATERMARK_POSITIONS.map((pos) => (
+              <button
+                key={pos}
+                type="button"
+                disabled={locked || W.mode === "none"}
+                onClick={() => patchWm({ position: pos })}
+                className={`rounded border px-2 py-2 text-[11px] font-medium ${
+                  W.position === pos
+                    ? "border-accent bg-accent/15 text-accent"
+                    : "border-gray-700 text-gray-400"
+                } disabled:opacity-40`}
+              >
+                {WM_POSITION_LABELS[pos]}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-3 grid gap-3 sm:grid-cols-2">
+          <label className="text-sm text-gray-400">
+            Watermark offset X ({W.offsetX}px)
+            <input
+              type="range"
+              min={WATERMARK_OFFSET_MIN}
+              max={WATERMARK_OFFSET_MAX}
+              disabled={locked || W.mode === "none"}
+              value={W.offsetX}
+              onChange={(e) => patchWm({ offsetX: Number(e.target.value) })}
+              className="mt-1 w-full"
+            />
+          </label>
+          <label className="text-sm text-gray-400">
+            Watermark offset Y ({W.offsetY}px)
+            <input
+              type="range"
+              min={WATERMARK_OFFSET_MIN}
+              max={WATERMARK_OFFSET_MAX}
+              disabled={locked || W.mode === "none"}
+              value={W.offsetY}
+              onChange={(e) => patchWm({ offsetY: Number(e.target.value) })}
+              className="mt-1 w-full"
+            />
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}

components/LegalFooter.tsx

@@ -0,0 +1,67 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+function LegalLink({
+  href,
+  children,
+  external,
+}: {
+  href: string;
+  children: ReactNode;
+  external?: boolean;
+}) {
+  const className = "transition-colors duration-300 hover:text-gray-300";
+
+  if (external) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" className={className}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <Link href={href} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+export function LegalFooter() {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="mt-auto w-full border-t border-gray-800 bg-black/40 py-8 text-xs text-gray-500">
+      <div className="mx-auto flex max-w-4xl flex-wrap items-center justify-center gap-x-4 gap-y-2 px-6 md:justify-start">
+        <span>© {year} Songs2VID. All rights reserved.</span>
+        <span aria-hidden="true" className="hidden sm:inline">
+          |
+        </span>
+        <span>
+          Made with ❤ by{" "}
+          <LegalLink href="https://www.atakanozban.com" external>
+            atakan
+          </LegalLink>
+        </span>
+        <span aria-hidden="true" className="hidden sm:inline">
+          |
+        </span>
+        <LegalLink href="/privacy">Privacy Policy</LegalLink>
+        <span aria-hidden="true" className="hidden sm:inline">
+          |
+        </span>
+        <LegalLink href="/terms">Terms of Service</LegalLink>
+        <span aria-hidden="true" className="hidden sm:inline">
+          |
+        </span>
+        <LegalLink href="/refund">Refund Policy</LegalLink>
+        <span aria-hidden="true" className="hidden sm:inline">
+          |
+        </span>
+        <LegalLink href="https://status.atakanozban.com/status/2" external>
+          Service Status
+        </LegalLink>
+      </div>
+    </footer>
+  );
+}

components/LegalPageLayout.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+import { Logo } from "@/components/Logo";
+import { LEGAL_LAST_UPDATED } from "@/lib/legal/constants";
+
+type Props = {
+  title: string;
+  description?: string;
+  children: ReactNode;
+};
+
+export function LegalPageLayout({ title, description, children }: Props) {
+  return (
+    <div className="min-h-screen bg-surface-dark">
+      <header className="border-b border-gray-800 bg-black/30">
+        <div className="mx-auto flex max-w-3xl items-center justify-between px-6 py-6">
+          <Logo />
+          <Link
+            href="/"
+            className="text-sm text-gray-400 transition-colors duration-300 hover:text-white"
+          >
+            ← Back to home
+          </Link>
+        </div>
+      </header>
+
+      <main className="mx-auto max-w-3xl px-6 py-12">
+        <p className="mb-2 text-xs uppercase tracking-wider text-gray-500">
+          Last updated: {LEGAL_LAST_UPDATED}
+        </p>
+        <h1 className="mb-3 text-3xl font-bold text-white">{title}</h1>
+        {description && <p className="mb-10 text-gray-400">{description}</p>}
+
+        <article className="prose prose-invert prose-gray max-w-none prose-headings:font-semibold prose-headings:text-white prose-p:text-gray-300 prose-li:text-gray-300 prose-strong:text-gray-200 prose-a:text-accent prose-a:no-underline hover:prose-a:underline">
+          {children}
+        </article>
+      </main>
+
+      <footer className="border-t border-gray-800 py-8 text-center text-xs text-gray-500">
+        <div className="flex flex-wrap items-center justify-center gap-4">
+          <Link href="/privacy" className="hover:text-gray-300">
+            Privacy
+          </Link>
+          <Link href="/terms" className="hover:text-gray-300">
+            Terms
+          </Link>
+          <Link href="/refund" className="hover:text-gray-300">
+            Refund
+          </Link>
+          <a
+            href="https://status.atakanozban.com/status/2"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-gray-300"
+          >
+            Service Status
+          </a>
+        </div>
+      </footer>
+    </div>
+  );
+}

components/Logo.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+import { BRAND_NAME } from "@/lib/branding";
+
+type Props = {
+  href?: string;
+  size?: "sm" | "md";
+  /** Small Beta mark at top-right of the wordmark (public marketing surfaces). */
+  beta?: boolean;
+};
+
+export function Logo({ href = "/", size = "md", beta = false }: Props) {
+  const textSize = size === "sm" ? "text-xl" : "text-2xl";
+  const betaSize = size === "sm" ? "text-[0.5rem]" : "text-[0.55rem]";
+
+  const content = (
+    <span className={`relative inline-flex items-baseline font-bold tracking-tight ${textSize}`}>
+      <span className="text-white">Songs</span>
+      <span className="text-red-400">2VID</span>
+      {beta ? (
+        <span
+          className={`pointer-events-none absolute left-full top-0 ml-0.5 -translate-y-1/2 ${betaSize} font-bold uppercase tracking-wider text-red-400`}
+          aria-hidden="true"
+        >
+          Beta
+        </span>
+      ) : null}
+    </span>
+  );
+
+  const label = beta ? `${BRAND_NAME} Beta` : BRAND_NAME;
+
+  if (href) {
+    return (
+      <Link href={href} className="inline-flex items-center" aria-label={label}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <span className="inline-flex items-center" aria-label={label}>
+      {content}
+    </span>
+  );
+}

components/Matomo.tsx

@@ -0,0 +1,43 @@
+import Script from "next/script";
+
+const MATOMO_URL = "https://analytics.atakanozban.com/";
+const MATOMO_SITE_ID = "3";
+
+/**
+ * First-party analytics (Matomo) for songs2vid.com + docs subdomain.
+ * Loaded once from the root layout so landing, dashboard, and legal pages share it.
+ */
+export function Matomo() {
+  return (
+    <>
+      <Script id="matomo-analytics" strategy="afterInteractive">{`
+  var _paq = window._paq = window._paq || [];
+  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
+  _paq.push(["setCookieDomain", "*.songs2vid.com"]);
+  _paq.push(["setDomains", ["*.songs2vid.com"]]);
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+  (function () {
+    var u = ${JSON.stringify(MATOMO_URL)};
+    _paq.push(["setTrackerUrl", u + "matomo.php"]);
+    _paq.push(["setSiteId", ${JSON.stringify(MATOMO_SITE_ID)}]);
+    var d = document, g = d.createElement("script"), s = d.getElementsByTagName("script")[0];
+    g.async = true;
+    g.src = u + "matomo.js";
+    s.parentNode.insertBefore(g, s);
+  })();
+`}</Script>
+      <noscript>
+        <p>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            referrerPolicy="no-referrer-when-downgrade"
+            src={`${MATOMO_URL}matomo.php?idsite=${MATOMO_SITE_ID}&rec=1`}
+            style={{ border: 0 }}
+            alt=""
+          />
+        </p>
+      </noscript>
+    </>
+  );
+}

components/MobileSidebar.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { Children, useEffect, useState, type ReactNode } from "react";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: ReactNode;
+};
+
+const PANEL_MS = 420;
+const ITEM_BASE_MS = 90;
+
+function CloseIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      <path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function MobileSidebar({ open, onClose, title = "Menu", children }: Props) {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      const frame = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(frame);
+    }
+
+    setVisible(false);
+    const timer = window.setTimeout(() => setMounted(false), PANEL_MS);
+    return () => window.clearTimeout(timer);
+  }, [open]);
+
+  useEffect(() => {
+    if (!mounted) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [mounted, onClose]);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 sm:hidden">
+      <button
+        type="button"
+        aria-label="Close menu"
+        className={`absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ease-out ${
+          visible ? "opacity-100" : "opacity-0"
+        }`}
+        onClick={onClose}
+      />
+
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label="Close menu"
+        style={{ animationDelay: visible ? "120ms" : "0ms" }}
+        className={`fixed right-4 top-4 z-[60] flex h-10 w-10 items-center justify-center rounded-full border border-gray-700 bg-surface text-gray-300 shadow-lg transition-shadow hover:bg-surface-light hover:text-white ${
+          visible ? "mobile-sidebar-close-btn-open" : "mobile-sidebar-close-btn-close"
+        }`}
+      >
+        <CloseIcon className="h-5 w-5" />
+      </button>
+
+      <aside
+        className={`absolute right-0 top-0 flex h-full w-72 max-w-[85vw] flex-col border-l border-gray-800 bg-surface shadow-2xl ${
+          visible ? "mobile-sidebar-panel-open" : "mobile-sidebar-panel-close"
+        }`}
+      >
+        <div
+          className={`border-b border-gray-800 px-5 py-5 transition-all duration-300 ease-out ${
+            visible ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"
+          }`}
+          style={{ transitionDelay: visible ? "100ms" : "0ms" }}
+        >
+          <span className="text-sm font-semibold uppercase tracking-wider text-gray-400">
+            {title}
+          </span>
+        </div>
+
+        <nav className="flex flex-1 flex-col gap-1 overflow-y-auto p-4">
+          {Children.map(children, (child, index) => (
+            <div
+              key={index}
+              className={`transition-all duration-300 ease-out ${
+                visible ? "translate-x-0 opacity-100" : "translate-x-8 opacity-0"
+              }`}
+              style={{
+                transitionDelay: visible ? `${ITEM_BASE_MS + index * 50}ms` : "0ms",
+              }}
+            >
+              {child}
+            </div>
+          ))}
+        </nav>
+      </aside>
+    </div>
+  );
+}
+
+export function MobileMenuButton({
+  onClick,
+  open = false,
+}: {
+  onClick: () => void;
+  open?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={open ? "Close menu" : "Open menu"}
+      aria-expanded={open}
+      className="relative rounded p-2 text-gray-300 transition-all duration-300 hover:scale-105 hover:bg-white/10 hover:text-white active:scale-95 sm:hidden"
+    >
+      <span className="relative block h-6 w-6">
+        <span
+          className={`absolute left-0 top-[5px] block h-0.5 w-6 rounded-full bg-current transition-all duration-300 ease-out ${
+            open ? "top-[11px] rotate-45" : ""
+          }`}
+        />
+        <span
+          className={`absolute left-0 top-[11px] block h-0.5 w-6 rounded-full bg-current transition-all duration-300 ease-out ${
+            open ? "scale-x-0 opacity-0" : ""
+          }`}
+        />
+        <span
+          className={`absolute left-0 top-[17px] block h-0.5 w-6 rounded-full bg-current transition-all duration-300 ease-out ${
+            open ? "top-[11px] -rotate-45" : ""
+          }`}
+        />
+      </span>
+    </button>
+  );
+}
+
+export function sidebarLinkClass(active = false) {
+  return `block rounded-lg px-4 py-3 text-base font-medium transition-all duration-200 hover:translate-x-0.5 ${
+    active ? "bg-surface-light text-white" : "text-gray-300 hover:bg-surface-light hover:text-white"
+  }`;
+}
+
+export function dashboardSidebarLinkClass(active = false, danger = false) {
+  const classes = ["mobile-sidebar-link"];
+  if (active) classes.push("mobile-sidebar-link-active");
+  if (danger) classes.push("mobile-sidebar-link-danger");
+  return classes.join(" ");
+}

components/PaygPriceCalculator.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import {
+  CREDIT_PRICE_CENTS,
+  CREDIT_PURCHASE_MAX,
+  CREDIT_PURCHASE_MIN,
+  formatCreditPrice,
+} from "@/lib/credits";
+
+export function PaygPriceCalculator() {
+  const [videos, setVideos] = useState(CREDIT_PURCHASE_MIN);
+  const total = formatCreditPrice(videos);
+  const unit = formatCreditPrice(1);
+
+  return (
+    <div className="mx-auto w-full max-w-xl rounded-2xl border border-gray-700/60 bg-surface/80 p-6 sm:p-8">
+      <p className="text-xs font-semibold uppercase tracking-wider text-amber-400">
+        Pay as you go
+      </p>
+      <h3 className="mt-2 text-xl font-semibold text-white sm:text-2xl">
+        Choose how many videos you need
+      </h3>
+      <p className="mt-2 text-sm text-gray-400">
+        {unit} per video · minimum {CREDIT_PURCHASE_MIN} videos (
+        {formatCreditPrice(CREDIT_PURCHASE_MIN)})
+      </p>
+
+      <div className="mt-8">
+        <div className="flex items-end justify-between gap-4">
+          <label htmlFor="payg-videos" className="text-sm text-gray-300">
+            Videos
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              id="payg-videos-number"
+              type="number"
+              min={CREDIT_PURCHASE_MIN}
+              max={CREDIT_PURCHASE_MAX}
+              value={videos}
+              onChange={(e) => {
+                const n = Math.floor(Number(e.target.value));
+                if (!Number.isFinite(n)) return;
+                setVideos(
+                  Math.min(CREDIT_PURCHASE_MAX, Math.max(CREDIT_PURCHASE_MIN, n)),
+                );
+              }}
+              className="w-20 rounded border border-gray-600 bg-surface-dark px-3 py-2 text-center text-lg font-semibold text-white focus:border-accent focus:outline-none"
+            />
+          </div>
+        </div>
+
+        <input
+          id="payg-videos"
+          type="range"
+          min={CREDIT_PURCHASE_MIN}
+          max={CREDIT_PURCHASE_MAX}
+          value={videos}
+          onChange={(e) => setVideos(Number(e.target.value))}
+          className="mt-4 w-full accent-amber-400"
+          aria-valuemin={CREDIT_PURCHASE_MIN}
+          aria-valuemax={CREDIT_PURCHASE_MAX}
+          aria-valuenow={videos}
+          aria-label="Number of videos"
+        />
+        <div className="mt-1 flex justify-between text-xs text-gray-500">
+          <span>{CREDIT_PURCHASE_MIN}</span>
+          <span>{CREDIT_PURCHASE_MAX}</span>
+        </div>
+      </div>
+
+      <div className="mt-8 flex flex-wrap items-end justify-between gap-4 border-t border-gray-800 pt-6">
+        <div>
+          <p className="text-xs uppercase tracking-wider text-gray-500">Total</p>
+          <p className="mt-1 text-3xl font-bold text-white sm:text-4xl">{total}</p>
+          <p className="mt-1 text-sm text-gray-400">
+            {videos} × {unit}{" "}
+            <span className="text-gray-500">
+              (€{(CREDIT_PRICE_CENTS / 100).toFixed(2)} each)
+            </span>
+          </p>
+        </div>
+        <Link
+          href="/dashboard/settings"
+          className="inline-flex rounded border border-amber-500/40 bg-amber-500/10 px-5 py-3 text-sm font-medium text-amber-300 transition-colors hover:border-amber-500/60 hover:bg-amber-500/20"
+        >
+          Buy credits
+        </Link>
+      </div>
+    </div>
+  );
+}

components/PlanBillingActions.tsx

@@ -0,0 +1,412 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { QUOTA_REQUEST_EMAIL } from "@/lib/plans";
+
+type ExtensionRequest = {
+  id: string;
+  status: string;
+  message: string;
+  requestedAt: string;
+  processedAt: string | null;
+  adminNote: string | null;
+};
+
+type ExtensionUsage = {
+  used: number;
+  limit: number;
+  remaining: number;
+  requests: ExtensionRequest[];
+};
+
+type Props = {
+  initialUsage: ExtensionUsage;
+};
+
+function openQuotaRequestMailto(reason?: string) {
+  const subject = encodeURIComponent("Songs2VID  Quota reset / extension request");
+  const body = encodeURIComponent(
+    [
+      "Hi,",
+      "",
+      "I'd like to request a Pro quota reset or temporary extension.",
+      "",
+      reason?.trim() ? `Reason:\n${reason.trim()}` : "Reason: (optional  add details here)",
+      "",
+      "Account email: (please keep the address you use to sign in)",
+      "",
+      "Thanks,",
+    ].join("\n"),
+  );
+  window.location.href = `mailto:${QUOTA_REQUEST_EMAIL}?subject=${subject}&body=${body}`;
+}
+
+function formatEndDate(iso: string | null) {
+  if (!iso) return null;
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+export function PlanBillingActions({ initialUsage }: Props) {
+  const router = useRouter();
+  const [usage, setUsage] = useState(initialUsage);
+  const [cancelling, setCancelling] = useState(false);
+  const [requesting, setRequesting] = useState(false);
+  const [openingPortal, setOpeningPortal] = useState(false);
+  const [showCancelChoices, setShowCancelChoices] = useState(false);
+  const [cancelAtPeriodEnd, setCancelAtPeriodEnd] = useState(false);
+  const [endsAt, setEndsAt] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch("/api/account/cancel-subscription");
+        if (!res.ok) return;
+        const data = await res.json();
+        if (cancelled) return;
+        setCancelAtPeriodEnd(Boolean(data.cancelAtPeriodEnd));
+        setEndsAt(data.endsAt ?? null);
+      } catch {
+        /* ignore */
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function handleOpenBillingPortal() {
+    setOpeningPortal(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const res = await fetch("/api/account/billing-portal", { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Could not open billing portal");
+      if (!data.url) throw new Error("No portal URL returned");
+      window.location.href = data.url;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not open billing portal");
+      setOpeningPortal(false);
+    }
+  }
+
+  async function cancelWithMode(when: "immediate" | "period_end") {
+    setCancelling(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const res = await fetch("/api/account/cancel-subscription", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ when }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to cancel subscription");
+
+      setShowCancelChoices(false);
+
+      if (when === "period_end") {
+        setCancelAtPeriodEnd(true);
+        setEndsAt(data.endsAt ?? null);
+        const label = formatEndDate(data.endsAt ?? null);
+        setSuccess(
+          label
+            ? `Cancellation scheduled. You keep Pro until ${label}; no further charges after that.`
+            : "Cancellation scheduled at the end of your current billing period. You keep Pro until then.",
+        );
+      } else {
+        setCancelAtPeriodEnd(false);
+        setEndsAt(null);
+        setSuccess("Subscription canceled immediately. You are now on the Free plan.");
+      }
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to cancel subscription");
+    } finally {
+      setCancelling(false);
+    }
+  }
+
+  async function handleResumeSubscription() {
+    setCancelling(true);
+    setError(null);
+    setSuccess(null);
+    try {
+      const res = await fetch("/api/account/cancel-subscription", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "resume" }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to resume subscription");
+      setCancelAtPeriodEnd(false);
+      setEndsAt(data.currentPeriodEnd ?? null);
+      setSuccess("Subscription kept. It will renew as usual.");
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to resume subscription");
+    } finally {
+      setCancelling(false);
+    }
+  }
+
+  async function handleQuotaRequest() {
+    if (usage.remaining <= 0) return;
+
+    const reason = prompt(
+      "Optional: tell us why you need a quota reset or extension (leave blank to skip).",
+    );
+    if (reason === null) return;
+
+    setRequesting(true);
+    setError(null);
+    setSuccess(null);
+
+    try {
+      const res = await fetch("/api/account/quota-extension-request", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: reason }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to submit request");
+
+      setUsage({
+        used: data.used,
+        limit: data.limit,
+        remaining: data.remaining,
+        requests: data.requests ?? usage.requests,
+      });
+      setSuccess(
+        `Request recorded (${data.used} of ${data.limit} this year). Opening your email client to contact support…`,
+      );
+      openQuotaRequestMailto(reason);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to submit request");
+    } finally {
+      setRequesting(false);
+    }
+  }
+
+  const hasPending = usage.requests.some((r) => r.status === "PENDING");
+  const endLabel = formatEndDate(endsAt);
+
+  return (
+    <div className="mt-4 space-y-4">
+      <div className="rounded border border-gray-700 bg-surface px-4 py-3 text-sm">
+        <p className="text-gray-300">
+          Extension requests this year:{" "}
+          <span className="font-medium text-white">
+            {usage.used} / {usage.limit}
+          </span>
+          {usage.remaining > 0 ? (
+            <span className="text-gray-500"> · {usage.remaining} remaining</span>
+          ) : (
+            <span className="text-yellow-400"> · limit reached</span>
+          )}
+        </p>
+      </div>
+
+      {cancelAtPeriodEnd && (
+        <div className="rounded border border-yellow-600/40 bg-yellow-500/10 px-4 py-3 text-sm text-yellow-100">
+          <p>
+            Cancellation scheduled
+            {endLabel ? (
+              <>
+                {" "}
+                 Pro stays active until <strong>{endLabel}</strong>
+              </>
+            ) : (
+              <> at the end of your current billing period</>
+            )}
+            . You will not be charged again.
+          </p>
+          <button
+            type="button"
+            onClick={() => void handleResumeSubscription()}
+            disabled={cancelling}
+            className="mt-2 text-sm font-medium text-accent underline hover:text-white disabled:opacity-50"
+          >
+            {cancelling ? "Working…" : "Keep my Pro subscription"}
+          </button>
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded border border-red-500/50 bg-red-500/10 px-4 py-3 text-sm text-red-300">
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="rounded border border-green-500/50 bg-green-500/10 px-4 py-3 text-sm text-green-300">
+          {success}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
+        <button
+          type="button"
+          onClick={() => void handleOpenBillingPortal()}
+          disabled={openingPortal}
+          className="inline-flex items-center justify-center rounded border border-gray-600 px-4 py-2 text-sm font-medium text-gray-200 transition-colors hover:bg-gray-800 disabled:opacity-50"
+        >
+          {openingPortal ? "Opening…" : "Manage billing & card"}
+        </button>
+
+        {!cancelAtPeriodEnd && (
+          <button
+            type="button"
+            onClick={() => {
+              setShowCancelChoices(true);
+              setError(null);
+              setSuccess(null);
+            }}
+            disabled={cancelling}
+            className="inline-flex items-center justify-center rounded border border-yellow-600/50 px-4 py-2 text-sm font-medium text-yellow-300 transition-colors hover:bg-yellow-500/10 disabled:opacity-50"
+          >
+            Cancel your plan
+          </button>
+        )}
+
+        <a
+          href={`mailto:${QUOTA_REQUEST_EMAIL}?subject=${encodeURIComponent("Songs2VID  Quota reset / extension request")}`}
+          onClick={(e) => {
+            if (requesting || usage.remaining <= 0 || hasPending) {
+              e.preventDefault();
+              return;
+            }
+            e.preventDefault();
+            void handleQuotaRequest();
+          }}
+          aria-disabled={requesting || usage.remaining <= 0 || hasPending}
+          className={`inline-flex items-center justify-center rounded border border-accent/40 px-4 py-2 text-sm font-medium text-accent transition-colors hover:bg-accent/10 ${
+            requesting || usage.remaining <= 0 || hasPending
+              ? "pointer-events-none cursor-not-allowed opacity-50"
+              : ""
+          }`}
+        >
+          {requesting
+            ? "Submitting…"
+            : hasPending
+              ? "Request pending…"
+              : "Request quota reset & extension"}
+        </a>
+      </div>
+
+      {showCancelChoices && (
+        <div
+          role="dialog"
+          aria-labelledby="cancel-plan-title"
+          className="rounded border border-yellow-600/40 bg-surface px-4 py-4"
+        >
+          <h3 id="cancel-plan-title" className="text-sm font-semibold text-white">
+            When should Pro end?
+          </h3>
+          <p className="mt-1 text-xs text-gray-400">
+            This is sent to Stripe. Choose how you want to cancel your subscription.
+          </p>
+          <div className="mt-4 grid gap-3 sm:grid-cols-2">
+            <button
+              type="button"
+              disabled={cancelling}
+              onClick={() => void cancelWithMode("period_end")}
+              className="rounded border border-gray-600 bg-surface-light px-3 py-3 text-left transition-colors hover:border-accent/50 hover:bg-accent/5 disabled:opacity-50"
+            >
+              <span className="block text-sm font-medium text-white">
+                At end of billing period
+              </span>
+              <span className="mt-1 block text-xs text-gray-400">
+                Keep Pro until your paid period ends. No more renewals after that.
+              </span>
+            </button>
+            <button
+              type="button"
+              disabled={cancelling}
+              onClick={() => void cancelWithMode("immediate")}
+              className="rounded border border-yellow-600/50 bg-yellow-500/5 px-3 py-3 text-left transition-colors hover:bg-yellow-500/10 disabled:opacity-50"
+            >
+              <span className="block text-sm font-medium text-yellow-200">
+                Cancel immediately
+              </span>
+              <span className="mt-1 block text-xs text-gray-400">
+                End Pro now and switch to Free. Access ends right away.
+              </span>
+            </button>
+          </div>
+          <button
+            type="button"
+            disabled={cancelling}
+            onClick={() => setShowCancelChoices(false)}
+            className="mt-3 text-xs text-gray-500 underline hover:text-gray-300 disabled:opacity-50"
+          >
+            {cancelling ? "Working…" : "Never mind"}
+          </button>
+        </div>
+      )}
+
+      {usage.requests.length > 0 && (
+        <div className="space-y-2">
+          <p className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+            Request history
+          </p>
+          <ul className="space-y-2">
+            {usage.requests.slice(0, 5).map((req) => (
+              <li
+                key={req.id}
+                className="rounded border border-gray-800 bg-surface px-3 py-2 text-xs text-gray-400"
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-gray-300">
+                    {new Date(req.requestedAt).toLocaleDateString(undefined, {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })}
+                  </span>
+                  <span
+                    className={
+                      req.status === "APPROVED"
+                        ? "text-green-400"
+                        : req.status === "REJECTED"
+                          ? "text-red-400"
+                          : "text-yellow-400"
+                    }
+                  >
+                    {req.status}
+                  </span>
+                </div>
+                {req.message && <p className="mt-1 text-gray-500">{req.message}</p>}
+                <p className="mt-1 font-mono text-[10px] text-gray-600">ID: {req.id}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <p className="text-xs text-gray-500">
+        Pro users may request up to 5 manual quota resets or extensions per calendar year by emailing{" "}
+        <a
+          href={`mailto:${QUOTA_REQUEST_EMAIL}`}
+          className="text-gray-400 underline hover:text-white"
+        >
+          {QUOTA_REQUEST_EMAIL}
+        </a>
+        . See our{" "}
+        <a href="/terms" className="text-gray-400 underline hover:text-white">
+          Terms of Service
+        </a>
+        .
+      </p>
+    </div>
+  );
+}

components/PlaylistSelect.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { UpgradeProLink } from "./UpgradeProLink";
+
+type Playlist = {
+  id: string;
+  title: string;
+  itemCount: number;
+};
+
+type Props = {
+  value: string;
+  onChange: (playlistId: string) => void;
+  enabled: boolean;
+};
+
+export function PlaylistSelect({ value, onChange, enabled }: Props) {
+  const [playlists, setPlaylists] = useState<Playlist[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showCreate, setShowCreate] = useState(false);
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [privacy, setPrivacy] = useState<"public" | "unlisted" | "private">("private");
+
+  const loadPlaylists = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/youtube/playlists");
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to load playlists");
+      setPlaylists(data.playlists ?? []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load playlists");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return;
+    void loadPlaylists();
+  }, [enabled, loadPlaylists]);
+
+  async function handleCreate() {
+    if (!title.trim()) {
+      setError("Playlist title is required");
+      return;
+    }
+
+    setCreating(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/youtube/playlists", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          title: title.trim(),
+          description: description.trim() || undefined,
+          privacy,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to create playlist");
+
+      const playlist = data.playlist as Playlist;
+      setPlaylists((prev) => [playlist, ...prev]);
+      onChange(playlist.id);
+      setShowCreate(false);
+      setTitle("");
+      setDescription("");
+      setPrivacy("private");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create playlist");
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  if (!enabled) {
+    return (
+      <p className="text-sm text-gray-400">
+        Add uploaded videos to a YouTube playlist with{" "}
+        <UpgradeProLink className="text-accent hover:underline" />.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        <label className="block text-sm text-gray-400">Add to YouTube playlist (optional)</label>
+        <select
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={loading || creating}
+          className="input-field w-full"
+        >
+          <option value="">None (don’t add to a playlist)</option>
+          {playlists.map((playlist) => (
+            <option key={playlist.id} value={playlist.id}>
+              {playlist.title} ({playlist.itemCount})
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        <button
+          type="button"
+          onClick={() => setShowCreate((prev) => !prev)}
+          className="text-sm text-accent hover:underline"
+        >
+          {showCreate ? "Cancel" : "Create new playlist"}
+        </button>
+        <button
+          type="button"
+          onClick={() => void loadPlaylists()}
+          disabled={loading}
+          className="text-sm text-gray-400 hover:text-white"
+        >
+          Refresh list
+        </button>
+      </div>
+
+      {showCreate && (
+        <div className="space-y-3 rounded border border-gray-700 bg-surface-dark/60 p-4">
+          <div>
+            <label className="mb-1 block text-sm text-gray-400">Playlist title</label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  void handleCreate();
+                }
+              }}
+              className="input-field w-full"
+              placeholder="My Songs2VID uploads"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm text-gray-400">Description (optional)</label>
+            <input
+              type="text"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  void handleCreate();
+                }
+              }}
+              className="input-field w-full"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm text-gray-400">Privacy</label>
+            <select
+              value={privacy}
+              onChange={(e) => setPrivacy(e.target.value as typeof privacy)}
+              className="input-field w-full"
+            >
+              <option value="private">Private</option>
+              <option value="unlisted">Unlisted</option>
+              <option value="public">Public</option>
+            </select>
+          </div>
+          <button
+            type="button"
+            onClick={() => void handleCreate()}
+            disabled={creating || !title.trim()}
+            className="rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover disabled:opacity-50"
+          >
+            {creating ? "Creating…" : "Create & select"}
+          </button>
+        </div>
+      )}
+
+      {loading && <p className="text-xs text-gray-500">Loading playlists…</p>}
+      {error && <p className="text-xs text-red-400">{error}</p>}
+      {!loading && !error && playlists.length === 0 && !showCreate && (
+        <p className="text-xs text-gray-500">
+          No playlists yet. Create one above. If playlist access was just added, sign out and sign
+          in again to grant the new Google permission.
+        </p>
+      )}
+    </div>
+  );
+}

components/PricingSection.tsx

@@ -0,0 +1,336 @@
+"use client";
+
+import Link from "next/link";
+import { useRef } from "react";
+import { ScrollReveal } from "@/components/ScrollReveal";
+import { SectionScrollTitle } from "@/components/SectionScrollTitle";
+import { SignInButton } from "@/components/SignInButton";
+import { getVideoAttributionText } from "@/lib/branding";
+import { SALES_EMAIL } from "@/lib/plans";
+
+const FEATURE_LABELS = [
+  "Infrastructure",
+  "Limit",
+  "Batch mode",
+  "Bulk image matching",
+  "File type",
+  "Playlists",
+  "API support",
+  "ID3 tags",
+  "Support",
+  "Watermark",
+] as const;
+
+type PlanFeatures = Record<(typeof FEATURE_LABELS)[number], string>;
+
+type InfrastructureChip = "cloud" | "self-hosted";
+
+type PlanConfig = {
+  name: string;
+  badge: string;
+  price: string;
+  priceNote: string;
+  features: PlanFeatures;
+  infrastructureChips: InfrastructureChip[];
+  watermarkNote?: string;
+  cta:
+    | { type: "signin" }
+    | { type: "link"; label: string; href: string }
+    | { type: "disabled"; label: string }
+    | { type: "mailto"; label: string; email: string; subject: string };
+  highlighted: boolean;
+  hover: string;
+  accent: string;
+  badgeClass: string;
+  ctaClass?: string;
+};
+
+const PLANS: PlanConfig[] = [
+  {
+    name: "Bedroom Producer",
+    badge: "Free",
+    price: "€0",
+    priceNote: "/ forever",
+    features: {
+      Infrastructure: "Cloud",
+      Limit: "10 videos* / month · 720p · buy 1–15 extras (€0.25 each)",
+      "Batch mode": "Limited batch · up to 3 files",
+      "Bulk image matching": "1 static image only",
+      "File type": "MP3",
+      Playlists: "Not included",
+      "API support": "Not included",
+      "ID3 tags": "Auto-fill title & metadata from MP3 tags",
+      Support: "Community",
+      Watermark: "Optional Songs2VID badge · bottom-right",
+    },
+    infrastructureChips: ["cloud"],
+    watermarkNote:
+      `Show "${getVideoAttributionText()}" to support open-source development - opt out anytime for a clean video.`,
+    cta: { type: "signin" },
+    highlighted: false,
+    hover:
+      "hover:border-red-500/40 hover:bg-red-500/[0.04] hover:shadow-lg hover:shadow-red-500/15",
+    accent: "text-red-400",
+    badgeClass: "bg-gray-800 text-gray-400",
+  },
+  {
+    name: "Independent Artist",
+    badge: "Pro",
+    price: "€5",
+    priceNote: "/ mo",
+    features: {
+      Infrastructure: "Cloud",
+      Limit: "50 videos / month · 1080p",
+      "Batch mode": "Full batch · up to 5 files",
+      "Bulk image matching": "Unique image per track (PRO)",
+      "File type": "MP3 / WAV / FLAC",
+      Playlists: "Create & add uploads to YouTube playlists",
+      "API support": "REST API · upload, batch & playlists",
+      "ID3 tags": "Extended metadata support",
+      Support: "E-Mail",
+      Watermark: "Custom text/logo/fonts · art-track layouts + blur (PRO)",
+    },
+    infrastructureChips: ["cloud"],
+    cta: { type: "link", label: "Upgrade to Pro", href: "/dashboard/settings" },
+    highlighted: true,
+    hover:
+      "hover:border-accent/50 hover:bg-accent/[0.06] hover:shadow-lg hover:shadow-accent/20",
+    accent: "text-accent",
+    badgeClass: "bg-accent/15 text-accent",
+  },
+  {
+    name: "Record Label / Studio",
+    badge: "Enterprise",
+    price: "Custom",
+    priceNote: "/ contact sales",
+    features: {
+      Infrastructure: "Cloud or self-hosted",
+      Limit: "Unlimited 4K · zero limit",
+      "Batch mode": "Unlimited synchronized batch processing",
+      "Bulk image matching": "Unique image per track",
+      "File type": "WAV / FLAC / lossless",
+      Playlists: "Org-wide playlist workflows",
+      "API support": "Full API access · custom integrations & SLAs",
+      "ID3 tags": "Full metadata · custom mapping",
+      Support: "Top-priority**",
+      Watermark: "Custom branding · position studio",
+    },
+    infrastructureChips: ["cloud", "self-hosted"],
+    cta: {
+      type: "mailto",
+      label: "Contact Sales",
+      email: SALES_EMAIL,
+      subject: "Songs2VID Enterprise Inquiry",
+    },
+    highlighted: false,
+    hover:
+      "hover:border-[#609926]/45 hover:bg-[#609926]/[0.06] hover:shadow-lg hover:shadow-[#609926]/20",
+    accent: "text-[#609926]",
+    badgeClass: "bg-[#609926]/15 text-[#609926]",
+    ctaClass:
+      "border-[#609926]/40 bg-[#609926]/10 text-[#609926] hover:border-[#609926]/60 hover:bg-[#609926]/20",
+  },
+];
+
+function FeatureValue({ value }: { value: string }) {
+  return <span className="text-sm text-gray-200">{value}</span>;
+}
+
+function CloudIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      aria-hidden="true"
+    >
+      <path
+        d="M7.5 18.5h9.75a4.25 4.25 0 0 0 .55-8.46A5.75 5.75 0 0 0 6.9 8.8 4.5 4.5 0 0 0 7.5 18.5Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ServerIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      aria-hidden="true"
+    >
+      <rect x="4" y="5" width="16" height="6" rx="2" />
+      <rect x="4" y="13" width="16" height="6" rx="2" />
+      <path d="M7.5 8h.01M7.5 16h.01" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function InfrastructureChips({
+  chips,
+}: {
+  chips: InfrastructureChip[];
+}) {
+  return (
+    <div className="mt-2 flex flex-wrap items-center gap-2">
+      {chips.includes("cloud") && (
+        <span className="inline-flex items-center gap-2 rounded-lg border border-gray-700/60 bg-surface-dark/40 px-3 py-2 text-sm text-gray-200">
+          <CloudIcon className="h-4 w-4 text-gray-300" />
+          Cloud
+        </span>
+      )}
+      {chips.includes("self-hosted") && (
+        <span className="inline-flex items-center gap-2 rounded-lg border border-gray-700/60 bg-surface-dark/40 px-3 py-2 text-sm text-gray-200">
+          <ServerIcon className="h-4 w-4 text-gray-300" />
+          Self-hosted
+        </span>
+      )}
+    </div>
+  );
+}
+
+function PricingCard({ plan }: { plan: PlanConfig }) {
+  const {
+    name,
+    badge,
+    price,
+    priceNote,
+    features,
+    watermarkNote,
+    infrastructureChips,
+    cta,
+    highlighted,
+    hover,
+    accent,
+    badgeClass,
+    ctaClass,
+  } = plan;
+
+  return (
+    <div
+      className={`group relative flex h-full flex-col rounded-2xl border bg-surface p-6 transition-all duration-300 sm:p-7 ${
+        highlighted
+          ? "border-accent/40 shadow-[0_0_32px_rgba(74,158,255,0.12)]"
+          : "border-gray-700/50"
+      } ${hover}`}
+    >
+      {highlighted && (
+        <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-accent px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-white">
+          Most popular
+        </span>
+      )}
+
+      <div className="mb-6">
+        <div className="mb-3 flex items-start justify-between gap-3">
+          <h3 className="text-lg font-semibold text-white">{name}</h3>
+          <span
+            className={`shrink-0 rounded px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider ${badgeClass}`}
+          >
+            {badge}
+          </span>
+        </div>
+
+        <div className="flex items-end gap-1">
+          <span className={`text-4xl font-bold ${accent}`}>{price}</span>
+          <span className="mb-1 text-sm text-gray-500">{priceNote}</span>
+        </div>
+      </div>
+
+      <ul className="mb-6 flex-1 space-y-4 border-t border-gray-700/50 pt-6">
+        {FEATURE_LABELS.map((label) => (
+          <li key={label}>
+            <p className="text-xs font-medium uppercase tracking-wider text-gray-500">{label}</p>
+            {label === "Infrastructure" ? (
+              <InfrastructureChips chips={infrastructureChips} />
+            ) : (
+              <FeatureValue value={features[label]} />
+            )}
+            {label === "Watermark" && watermarkNote && (
+              <p className="mt-1.5 rounded-lg border border-gray-700/60 bg-surface-dark/80 px-3 py-2 text-xs leading-relaxed text-gray-400">
+                {watermarkNote}
+              </p>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      <div className="mt-auto">
+        {cta.type === "signin" && <SignInButton fullWidth />}
+        {cta.type === "link" && (
+          <Link
+            href={cta.href}
+            className={`inline-flex w-full items-center justify-center rounded border px-4 py-3 text-sm font-medium transition-all duration-300 ${ctaClass ?? "border-gray-600 text-white hover:border-gray-400"}`}
+          >
+            {cta.label}
+          </Link>
+        )}
+        {cta.type === "disabled" && (
+          <button
+            type="button"
+            disabled
+            className="w-full cursor-not-allowed rounded border border-gray-700 bg-surface-light px-4 py-3 text-sm font-medium text-gray-500"
+          >
+            {cta.label}
+          </button>
+        )}
+        {cta.type === "mailto" && (
+          <a
+            href={`mailto:${cta.email}?subject=${encodeURIComponent(cta.subject)}`}
+            className={`inline-flex w-full items-center justify-center rounded border px-4 py-3 text-sm font-medium transition-all duration-300 ${ctaClass ?? ""}`}
+          >
+            {cta.label}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function PricingSection() {
+  const sectionRef = useRef<HTMLElement>(null);
+
+  return (
+    <section
+      ref={sectionRef}
+      id="pricing"
+      className="relative scroll-mt-24 overflow-x-visible overflow-y-hidden px-6 py-24"
+    >
+      <SectionScrollTitle sectionRef={sectionRef} title="Pricing" />
+
+      <div className="relative z-10 mx-auto max-w-7xl">
+        <ScrollReveal>
+          <h2 className="mb-4 text-center text-3xl font-bold text-white">Pricing</h2>
+          <p className="mx-auto mb-10 max-w-2xl text-center text-gray-400">
+            Free with optional extras, Pro at €5/month, or Enterprise for studios.
+          </p>
+        </ScrollReveal>
+
+        <div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-3 xl:gap-6">
+          {PLANS.map((plan, index) => (
+            <ScrollReveal key={plan.name} delay={index * 100}>
+              <PricingCard plan={plan} />
+            </ScrollReveal>
+          ))}
+        </div>
+
+        <ScrollReveal delay={360}>
+          <p className="mx-auto mt-10 max-w-2xl text-center text-xs text-gray-500">
+            *Free includes 10 videos/month; buy 1–15 extras at €0.25 each (max 15 extras). After both
+            are used, Pro (€5/mo · 50 videos) is required. Total balance capped at 30. Deduction
+            order: monthly first, then extras.
+          </p>
+          <p className="mx-auto mt-4 max-w-2xl text-center text-xs text-gray-500">
+            **Technical support is strictly reserved for Managed Cloud and paid Professional Setup
+            agreements; independent self-hosted deployments are community-supported.
+          </p>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+}

components/PrivacyToggle.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Privacy } from "@prisma/client";
+
+type Props = {
+  value: Privacy;
+  onChange: (value: Privacy) => void;
+};
+
+const OPTIONS: { value: Privacy; label: string }[] = [
+  { value: "PUBLIC", label: "Public" },
+  { value: "PRIVATE", label: "Private" },
+  { value: "UNLISTED", label: "Unlisted" },
+];
+
+export function PrivacyToggle({ value, onChange }: Props) {
+  return (
+    <div className="flex rounded border border-gray-600 overflow-hidden">
+      {OPTIONS.map((opt) => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => onChange(opt.value)}
+          className={`flex-1 px-3 py-2 text-sm transition-colors ${
+            value === opt.value
+              ? "bg-accent text-white"
+              : "bg-surface-light text-gray-300 hover:bg-gray-700"
+          }`}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}