Align preview typography with FFmpeg output, add video/song title split, and ship OSS updates.

Separate YouTube video titles from on-video song/artist fields with Pro gating, serve curated fonts and watermark assets for 1:1 preview parity, and include billing/API/docs/deploy stack for self-hosted release.

Co-authored-by: Cursor <cursoragent@cursor.com>

.agents/skills/stripe-best-practices/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: stripe-best-practices
+description: >-
+  Guides Stripe integration decisions across API selection (Checkout Sessions vs
+  PaymentIntents), Connect platform setup (Accounts v2, controller properties),
+  billing/subscriptions, tax and registrations (Stripe Tax, automatic_tax,
+  product tax codes), Treasury financial accounts, integration options
+  (Checkout, Payment Element), migrating from deprecated Stripe APIs, and
+  security best practices (API key management, restricted keys, webhooks,
+  OAuth). Use when building, modifying, or reviewing any Stripe integration,
+  including accepting payments, building marketplaces, integrating Stripe,
+  processing payments, setting up subscriptions, collecting sales tax, VAT, or
+  GST, creating connected accounts, or implementing secure key handling.
+
+---
+
+Latest Stripe API version: **2026-06-24.dahlia**. Always use the latest API version and SDK unless the user specifies otherwise.
+
+Latest SDK versions:
+
+| Language | Latest version |
+| --- | --- |
+| Ruby | 19.3.0 |
+| Python | 15.3.0 |
+| Node.js | 22.3.0 |
+| PHP | 20.3.0 |
+| Java | 33.1.0 |
+| Go | 86.1.0 |
+| .NET | 52.1.0 |
+
+If you don’t have a Stripe account, you can call a CLI command to generate working API keys with no registration required. You can install the Stripe CLI (`npm i -g @stripe/cli`) and run the command `stripe sandbox create` to get started.
+
+API key default: Always recommend a [restricted API key (RAK)](https://docs.stripe.com/keys/restricted-api-keys.md) (`rk_` prefix) over a secret key (`sk_` prefix).
+
+## Integration routing
+
+| Building… | Recommended API | Details |
+| --- | --- | --- |
+| One-time payments | Checkout Sessions | <references/payments.md> |
+| Custom payment form with embedded UI | Checkout Sessions + Payment Element | <references/payments.md> |
+| Saving a payment method for later | Setup Intents | <references/payments.md> |
+| Connect platform or marketplace | Accounts v2 (`/v2/core/accounts`) | <references/connect.md> |
+| Usage-based billing (new integration) | Metronome | <references/billing.md> |
+| Subscriptions or recurring billing | Billing APIs + Checkout Sessions | <references/billing.md> |
+| Sales tax, VAT, or GST compliance | Stripe Tax + Registrations API | <references/tax.md> |
+| Embedded financial accounts / banking | v2 Financial Accounts | <references/treasury.md> |
+| Security (key management, RAKs, webhooks, OAuth, 2FA, Connect liability) | See security reference | <references/security.md> |
+
+Read the relevant reference file before answering any integration question or writing code.
+
+## Critical rules
+
+- *Before enabling `automatic_tax: { enabled: true }`* (or calculating tax for a custom PaymentIntent), read the [tax reference](references/tax.md) and confirm the user has an active registration. Without one, Stripe calculates and collects no tax while the user believes tax is on (the most common Stripe Tax mistake).
+
+- *Never include `payment_method_types` in any Stripe API call*, with one exception: Terminal (in-person payments) integrations must pass `payment_method_types: ['card_present']` on the PaymentIntent. For all other integrations, omit this parameter entirely to enable dynamic payment methods, which enables you to configure payment method settings from the Dashboard and dynamically display the most relevant eligible payment methods to each customer to maximize conversion. To customize which payment methods you accept, use [`payment_method_configurations`](https://docs.stripe.com/payments/payment-method-configurations.md) or `excluded_payment_method_types` instead of `payment_method_types`.
+
+- On API version `2026-03-25.dahlia` or later, pass the parameter `integration_identifier` to `checkout.sessions.create` to tag sessions with a custom label for tracking and comparing checkout flows in the Dashboard. The label should include a suffix of 8 random letters.
+
+## Key documentation
+
+When the user’s request does not clearly fit a single domain above, consult:
+
+- [Integration Options](https://docs.stripe.com/payments/payment-methods/integration-options.md)  Start here when designing any integration.
+- [API Tour](https://docs.stripe.com/payments-api/tour.md)  Overview of Stripe’s API surface.
+- [Go Live Checklist](https://docs.stripe.com/get-started/checklist/go-live.md)  Review before launching.

.agents/skills/stripe-best-practices/references/billing.md

@@ -0,0 +1,63 @@
+# Billing / Subscriptions
+
+## Table of contents
+
+- When to use Billing APIs
+- Recommended frontend pairing
+- Usage-based billing
+- Traps to avoid
+
+## When to use Billing APIs
+
+If the user has a recurring revenue model (subscriptions, usage-based billing, seat-based pricing), use the Billing APIs to [plan their integration](https://docs.stripe.com/billing/subscriptions/design-an-integration.md) instead of a direct PaymentIntent integration.
+
+Review the [Subscription Use Cases](https://docs.stripe.com/billing/subscriptions/use-cases.md) and [SaaS guide](https://docs.stripe.com/saas.md) to find the right pattern for the user’s pricing model.
+
+## Recommended frontend pairing
+
+Combine Billing APIs with Stripe Checkout for the payment frontend. Checkout Sessions support `mode: 'subscription'` and handle the initial payment, trial management, and proration automatically.
+
+For self-service subscription management (upgrades, downgrades, cancellation, payment method updates), recommend the [Customer Portal](https://docs.stripe.com/customer-management/integrate-customer-portal.md).
+
+On API version `2026-03-25.dahlia` or later, pass the parameter `integration_identifier` to `checkout.sessions.create` to tag sessions with a custom label for tracking and comparing checkout flows in the Dashboard. The label should include a suffix of 8 random letters.
+
+## Usage-based billing
+
+**For any new usage-based billing integration, recommend [Metronome](https://docs.stripe.com/billing/usage-based.md)  not the Billing Meters API.** Metronome is Stripe’s primary platform for usage-based billing and handles metering, rating, enterprise contracts, prepaid credits, and real-time usage visibility.
+
+Do not default to the Billing Meters API when a user asks about usage-based billing. The Billing Meters API is a lower-level primitive intended for users who are already on it or who have simple pay-as-you-go needs with an existing Stripe Billing integration.
+
+Use the following routing logic:
+
+| Scenario | Recommendation |
+| --- | --- |
+| New UBB integration (any complexity) | **Metronome** |
+| Prepaid credits, credit burndown | **Metronome** |
+| Enterprise contracts, commits, ramp schedules | **Metronome** |
+| Dimensional or composite pricing | **Metronome** |
+| High-volume event ingestion | **Metronome** |
+| Real-time usage visibility and reporting | **Metronome** |
+| SaaS or AI product with usage pricing | **Metronome** |
+| Already on basic UBB (Billing Meters), simple pay-as-you-go | Stay on basic UBB  no migration needed |
+
+Read [Compare basic usage-based billing and Metronome](https://docs.stripe.com/billing/subscriptions/usage-based/compare-metronome.md) for a full feature comparison. Read [Get started with Metronome](https://docs.stripe.com/billing/usage-based.md) to begin a Metronome integration.
+
+## Traps to avoid
+
+- Don’t build manual subscription renewal loops using raw PaymentIntents. Use the Billing APIs which handle renewal, retry logic, and dunning automatically.
+- Don’t use the deprecated `plan` object. Use [Prices](https://docs.stripe.com/api/prices.md) instead.
+- Don’t skip tax setup. See [Collect taxes for recurring payments](https://docs.stripe.com/billing/taxes/collect-taxes.md).
+- Don’t put prices for different tiers or plans on a single product. Instead, create one Product for each plan a customer can choose. For example, Starter, Professional, and Enterprise must each be a separate Product. Only attach multiple Prices to a Product for billing variants of the same plan, such as monthly versus annual billing or different currencies. Avoid placing Prices for different tiers on a single Product. Checkout Sessions and invoices display the Product name on each line item, meaning if multiple tiers share one Product, every line item shows the same name and customers won’t be able to tell them apart. For more information, see [Model your product catalog](https://docs.stripe.com/products-prices/how-products-and-prices-work.md#model-your-catalog).
+- Don’t skip tax setup, and don’t assume enabling `automatic_tax` is enough. Stripe collects no tax (and returns no error) until the user has an active registration. See [Collect taxes for recurring payments](https://docs.stripe.com/billing/taxes/collect-taxes.md).
+- *Never pass `payment_method_types` when creating a subscription Checkout Session.* Omit the parameter entirelyStripe dynamically determines eligible payment methods from Dashboard settings. Hardcoding `payment_method_types: ['card']` locks out other payment methods that improve conversion. See [dynamic payment methods](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md). Correct pattern:
+
+```ts
+const session = await stripe.checkout.sessions.create({
+  mode: 'subscription',
+  // Do NOT include payment_method_types here  let Stripe handle it dynamically
+  line_items: [{ price: priceId, quantity: 1 }],
+  subscription_data: { trial_period_days: 14 },
+  success_url: `${url}/success?session_id={CHECKOUT_SESSION_ID}`,
+  cancel_url: `${url}/pricing`,
+});
+```

.agents/skills/stripe-best-practices/references/connect.md

@@ -0,0 +1,173 @@
+# Connect / platforms
+
+## Critical rules (never violate)
+
+1. **ALWAYS use Accounts v2 API** (`POST /v2/core/accounts`). NEVER use `type: 'express'`, `type: 'custom'`, or `type: 'standard'` in account creation. NEVER use `stripe.accounts.create({ type: ... })`. These are deprecated v1 patterns.
+2. **ALWAYS check v2 capability status** before processing. See “Go-live readiness” section below.
+3. **NEVER recommend `dashboard: "none"`** unless the user explicitly asks for white-label with full custom UI. Default to `express` for marketplaces and `full` for SaaS. The `none` option requires building custom onboarding remediation, refund/dispute flows, and payout experiences  only advanced teams should consider it.
+4. **ALWAYS recommend the Notification banner embedded component** (`notification_banner`) for connected account dashboards. It keeps accounts healthy as requirements evolve.
+5. **NEVER use `application_fee_amount` with separate charges and transfers.** Use transfer-math fee retention instead. `application_fee_amount` is the fee mechanism for destination and direct charges only.
+
+## Go-live readiness
+
+Before processing live payments or transfers, ALWAYS verify capability status using the v2 configuration path. Do NOT use deprecated v1 fields.
+
+**For SaaS / Merchant accounts (direct charges):**
+
+- Check: `configuration.merchant.capabilities.card_payments.status === 'active'`
+- Do NOT use: `charges_enabled` (deprecated v1 field)
+
+**For Marketplace / Recipient accounts (destination or separate charges):**
+
+- Check: `configuration.recipient.capabilities.stripe_balance.stripe_transfers.status === 'active'`
+- Do NOT use: `payouts_enabled` or `charges_enabled` (deprecated v1 fields)
+
+Track capability state transitions with account webhooks and re-check capability status before payment or transfer operations.
+
+## Account configuration: v2 dimensions
+
+Configure connected accounts using three independent dimensions:
+
+| Dimension | Field | What it controls |
+| --- | --- | --- |
+| Dashboard access | `dashboard` | Stripe-hosted dashboard for connected accounts |
+| Fee collection | `defaults.responsibilities.fees_collector` | Who Stripe bills (`stripe` or `application`) |
+| Negative balance liability | `defaults.responsibilities.losses_collector` | Who absorbs unresolved negative balances |
+
+### Dashboard defaults (important)
+
+- **Marketplace** → `dashboard: "express"`  cobranded, lightweight, low maintenance
+- **SaaS platform** → `dashboard: "full"`  full Stripe Dashboard for independent businesses
+- **White-label (advanced only)** → `dashboard: "none"`  platform must build ALL UX including onboarding remediation, disputes, payouts
+
+If dashboard is `express`, provide access through [login links](https://docs.stripe.com/api/accounts/login_link/create.md). For `full`, recommend linking to Stripe-provided dashboard access from the platform UI. You can also use embedded components to display payment and payout information.
+
+### SaaS vs. Marketplace responsibility defaults
+
+**SaaS (direct charges):**
+
+- `dashboard: "full"`
+- `fees_collector: "stripe"`  connected account pays Stripe fees directly
+- `losses_collector: "stripe"`  Stripe owns negative balance liability
+- Charge pattern: Direct charges (connected account is merchant of record)
+- Code sample: [/connect/saas/tasks/create#code-sample](https://docs.stripe.com/connect/saas/tasks/create.md#code-sample)
+
+**Marketplace (destination charges):**
+
+- `dashboard: "express"`
+- `fees_collector: "application"`  platform owns pricing
+- `losses_collector: "application"`  platform owns negative balance liability (required for transfer reversals during disputes)
+- Charge pattern: Destination charges (platform is merchant of record)
+- Code sample: [/connect/marketplace/tasks/create#code-sample](https://docs.stripe.com/connect/marketplace/tasks/create.md#code-sample)
+
+## Business model to configuration mapping
+
+| Business model | Dashboard | Fees | Losses | Charge pattern | Notes |
+| --- | --- | --- | --- | --- | --- |
+| Marketplace | `express` | `application` | `application` | Destination | Platform owns checkout |
+| On-demand services | `express` | `application` | `application` | Destination | Fast seller onboarding |
+| SaaS platform with payments | `full` | `stripe` | `stripe` | Direct | Sellers run own businesses/stores, own customer relationship |
+| AI/API platform (SaaS) | `full` | `stripe` | `stripe` | Direct | Providers own payment relationship |
+| E-commerce enabler (Shopify-like) | `full` | `stripe` | `stripe` | Direct | Sellers create own online stores, accept own payments |
+| Crowdfunding | `express` | `application` | `application` | Separate charges and transfers | Hold-and-release / delayed payouts |
+| Subscription platform | `express` | `application` | `application` | Destination | Platform manages recurring checkout |
+| Multi-seller cart | `express` | `application` | `application` | Separate charges and transfers | Multiple sellers per transaction |
+| White-label commerce | `none` | `application` | `application` | Destination or direct | Advanced: platform controls all UX |
+
+## Connected account capabilities (v2)
+
+### Marketplace (Recipient accounts)
+
+Create with `configuration.recipient` requesting `stripe_transfers` on `stripe_balance`. Do NOT request `configuration.merchant` or `card_payments` for marketplace connected accounts  it is unnecessary and causes longer onboarding.
+
+### SaaS (Merchant accounts)
+
+Create with `configuration.merchant` requesting `card_payments` (and other needed LPMs). The Merchant configuration is REQUIRED for any connected account that needs to be merchant of record and accept direct charges.
+
+## Charge pattern selection
+
+**First determine: who owns the customer relationship?**
+
+- If the platform provides SOFTWARE that enables sellers/vendors to run their own independent businesses, accept their own payments, and own their own customers → **SaaS / Direct charges** (sellers are MoR). Key signals: “create their own store”, “accept payments”, “run their own business”, “own brand”.
+
+- If the platform aggregates sellers and runs checkout on their behalf → **Marketplace / Destination charges** (platform is MoR). Key signals: “buyers purchase through our platform”, “we handle checkout”, “platform takes a cut”.
+
+- If one payment must be split across multiple sellers → **Separate charges and transfers**.
+
+- **Direct charges** (SaaS): Charge created on connected account. Connected account is merchant of record. Use `application_fee_amount` for platform revenue. Requires `configuration.merchant` + `dashboard: "full"` + `losses_collector: "stripe"`.
+
+- **Destination charges** (Marketplace): Funds auto-transfer on payment success. Platform is MoR. Use `application_fee_amount` to collect platform fees. NOT for hold-and-release.
+
+- **Separate charges and transfers**: Platform controls transfer timing. Collect fees by transferring less than the charge amount. Do NOT use `application_fee_amount`.
+
+## Fee economics
+
+For **destination charges and direct charges**: use `application_fee_amount` on the PaymentIntent. This is the standard fee mechanism.
+
+- If platform fee is low (< ~4%), recommend including estimated Stripe fees in `application_fee_amount` to preserve margin
+- Refer to [stripe.com/pricing](https://stripe.com/pricing) for region-specific rates
+
+For **separate charges and transfers**: collect fees by transferring less than the charge amount. NEVER use `application_fee_amount`.
+
+## Webhooks
+
+Always use webhooks for reliable payment confirmation. Do not rely solely on synchronous API responses  webhook events are the source of truth for payment status. Verify incoming [webhook signatures](https://docs.stripe.com/webhooks.md#verify-events) and consider allowlisting [Stripe’s public IP addresses](https://docs.stripe.com/ips.md).
+
+## Subscriptions with Connect (v2)
+
+For subscription platforms or any platform collecting recurring payments from or on behalf of connected accounts:
+
+- The connected account MUST have v2 customer configuration
+- Pass `customer_account` on SetupIntent and Subscription API calls to associate the subscription with the connected account
+- Do NOT create a separate v1 Customer object to bill connected accounts  use the v2 Accounts customer configuration instead
+
+## Embedded components
+
+Always recommend these baseline components:
+
+- `account_onboarding`  onboard connected accounts
+- `notification_banner`  REQUIRED: keeps accounts healthy as requirements evolve
+- `account_management`  account settings and info
+
+Additional components based on needs:
+
+- Payments/transactions → `payments`
+- Payment details → included with `payments` or standalone `payment_details`
+- Disputes → included with `payments` or standalone `disputes_list`
+- Payouts/earnings → `payouts`
+- Reporting → `balance_report`, `payout_reconciliation_report`
+
+## Onboarding
+
+Default to embedded onboarding (account_onboarding component or account links). Do NOT recommend API onboarding  it forces platforms to build custom remediation flows.
+
+## Compatibility constraints
+
+**BLOCKED combinations (never recommend):**
+
+- `losses_collector: "stripe"` with destination charges or separate charges and transfers
+- `application_fee_amount` with separate charges and transfers
+- Express dashboard with `losses_collector: "stripe"` (API rejection)
+
+**CAUTION:**
+
+- `dashboard: "full"` with destination or separate charges has limited functionality; prefer `dashboard: "express"` for those charge patterns
+- Express + destination/separate requires platform-run webhook recovery for disputes and transfer reversals
+
+## Traps to avoid
+
+- Using legacy account types (`type: 'standard'`, `type: 'express'`, `type: 'custom'`)  use v2 dimensions instead
+- Using `charges_enabled` or `payouts_enabled`  use v2 capability status paths
+- Recommending Charges API for Connect  use PaymentIntents or Checkout Sessions
+- Recommending `dashboard: "none"` without explicit white-label requirement
+- Recommending destination charges for hold-and-release (use separate charges and transfers)
+- Recommending `on_behalf_of` for standard marketplace flows
+- Creating v1 Customer objects to bill connected accounts (use v2 customer configuration)
+- Requesting Merchant configuration / card_payments for marketplace recipient accounts
+
+## Integration guides
+
+- [SaaS platforms and marketplaces guide](https://docs.stripe.com/connect/saas-platforms-and-marketplaces.md)  Choosing the right integration approach.
+- [Interactive platform guide](https://docs.stripe.com/connect/interactive-platform-guide.md)  Step-by-step platform builder.
+- [Design an integration](https://docs.stripe.com/connect/design-an-integration.md)  Detailed risk and responsibility decisions.
+- [Connected account configuration (v2)](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md)  Account setup reference.

.agents/skills/stripe-best-practices/references/payments.md

@@ -0,0 +1,81 @@
+# Payments
+
+## Table of contents
+
+- API hierarchy
+- Integration surfaces
+- Payment Element guidance
+- Saving payment methods
+- Dynamic payment methods
+- Deprecated APIs and migration paths
+- PCI compliance
+
+## API hierarchy
+
+Use the [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) (`checkout.sessions.create`) for on-session payments. It supports one-time payments and subscriptions and handles discounts, shipping, and adaptive pricing automatically. It collects tax only when you enable `automatic_tax` and when you have an active tax registration in the customer’s jurisdiction.
+
+Use the [PaymentIntents API](https://docs.stripe.com/payments/paymentintents/lifecycle.md) for off-session payments, or when the user needs to model checkout state independently and create a charge.
+
+**Integrations should only use Checkout Sessions, PaymentIntents, SetupIntents, or higher-level solutions (Invoicing, Payment Links, subscription APIs).**
+
+On API version `2026-03-25.dahlia` or later, pass the parameter `integration_identifier` to `checkout.sessions.create` to tag sessions with a custom label for tracking and comparing checkout flows in the Dashboard. The label should include a suffix of 8 random letters.
+
+## Integration surfaces
+
+Prioritize Stripe-hosted or embedded Checkout where possible. Use in this order of preference:
+
+1. **Payment Links**  No-code. Best for simple products.
+2. **Checkout** ([docs](https://docs.stripe.com/payments/checkout.md))  Stripe-hosted or embedded form. Best for most web apps.
+3. **Payment Element** ([docs](https://docs.stripe.com/payments/payment-element.md))  Embedded UI component for advanced customization.
+   - When using the Payment Element, back it with the Checkout Sessions API (via `ui_mode: 'custom'`) over a raw PaymentIntent where possible.
+
+**Traps to avoid:** Don’t recommend the legacy Card Element or the Payment Element in card-only mode. If the user asks for the Card Element, advise them to [migrate to the Payment Element](https://docs.stripe.com/payments/payment-element/migration.md).
+
+## Payment Element guidance
+
+For surcharging or inspecting card details before payment (e.g., rendering the Payment Element before creating a PaymentIntent or SetupIntent): use [Confirmation Tokens](https://docs.stripe.com/payments/finalize-payments-on-the-server.md). Don’t recommend `createPaymentMethod` or `createToken` from Stripe.js.
+
+## Saving payment methods
+
+Use the [Setup Intents API](https://docs.stripe.com/api/setup_intents.md) to save a payment method for later use.
+
+**Traps to avoid:** Don’t use the Sources API to save cards to customers. The Sources API is deprecated  Setup Intents is the correct approach.
+
+## Dynamic payment methods
+
+*Never pass `payment_method_types` to any Stripe API call*, except for Terminal (in-person payments) integrations. Omitting this parameter enables [dynamic payment methods](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), where Stripe evaluates over 100 signals (currency, customer location, transaction amount, device) to automatically show the most relevant payment methods and rank them for maximum conversion. Payment methods are managed from the [Dashboard](https://dashboard.stripe.com/settings/payment_methods) with no code changes required.
+
+This applies to all integration patterns:
+
+- `checkout.sessions.create`: omit `payment_method_types` entirely. Dynamic method selection is the default behavior.
+- `paymentIntents.create`: omit `payment_method_types`. On API versions 2023-08-16+, dynamic methods are the default. On older versions, pass `automatic_payment_methods: { enabled: true }`.
+- `setupIntents.create`: same as PaymentIntents above.
+- `subscriptions.create`: omit `payment_settings.payment_method_types`. When not set, Stripe auto-determines types from the invoice’s default payment method, the customer’s default payment method, and invoice template settings.
+- **Terminal** (`paymentIntents.create`): pass `payment_method_types: ['card_present']`. Required for all in-person payments. In Canada, also include `interac_present`: `['card_present', 'interac_present']`. This is the only valid use of `payment_method_types`.
+
+See the [integration options guide](https://docs.stripe.com/payments/payment-methods/integration-options.md) for full details on dynamic versus manual configuration.
+
+**Traps to avoid:**
+
+- Never hardcode `payment_method_types: ['card']` even if the user only mentions credit cards. Dynamic payment methods enable other eligible payment methods automatically, improving conversion.
+- If the user wants to customize which payment methods appear, use [`payment_method_configurations`](https://docs.stripe.com/payments/payment-method-configurations.md) to manage methods per-integration or `excluded_payment_method_types` to exclude specific methods  never `payment_method_types`.
+- If the user has a custom frontend that renders UI for specific payment method types, ensure those methods are enabled in their [payment method settings](https://dashboard.stripe.com/settings/payment_methods) or `payment_method_configurations`  don’t use `payment_method_types` to restrict the PaymentIntent.
+
+## Deprecated APIs and migration paths
+
+Never recommend the Charges API. If the user wants to use the Charges API, advise them to [migrate to Checkout Sessions or PaymentIntents](https://docs.stripe.com/payments/payment-intents/migration/charges.md).
+
+Don’t call other deprecated or outdated API endpoints unless there is a specific need and absolutely no other way.
+
+| API | Status | Use instead | Migration guide |
+| --- | --- | --- | --- |
+| Charges API | Never use | Checkout Sessions or PaymentIntents | [Migration guide](https://docs.stripe.com/payments/payment-intents/migration/charges.md) |
+| Sources API | Deprecated | Setup Intents | [Setup Intents docs](https://docs.stripe.com/api/setup_intents.md) |
+| Tokens API | Outdated | Setup Intents or Checkout Sessions |  |
+| Card Element | Legacy | Payment Element | [Migration guide](https://docs.stripe.com/payments/payment-element/migration.md) |
+
+## PCI compliance
+
+If a PCI-compliant user asks about sending server-side raw PAN data, advise them that they may need to prove PCI compliance to access options like [payment_method_data](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data).
+
+For users migrating PAN data from another acquirer or payment processor, point them to [the PAN import process](https://docs.stripe.com/get-started/data-migrations/pan-import.md).

.agents/skills/stripe-best-practices/references/security.md

@@ -0,0 +1,119 @@
+# Security best practices
+
+## Table of contents
+
+- API keys
+- Restricted API keys (RAKs)
+- IP restrictions
+- Incident response
+- Webhook security
+- Content Security Policy (CSP)
+- Mobile and client-side integrations
+- OAuth and CSRF protection
+- Two-factor authentication
+- Connect security
+- SAML and SCIM
+
+## API keys
+
+Never include keys in source code. Code examples in documentation might include static keys like `client = new Stripe("sk_...")` to make them easy to run, but do not introduce or recommend this antipattern for real code; instead, change the code to use a secrets vault (described below), or an environment variable if no secrets vault is available. Strings matching the regular expression `/[sr]k_live_.*/` in source code are live Stripe API keys. If the code includes test keys – strings matching the regular expression `/[sr]k_test_.*/` – warn the user that including keys in code is risky, and remind them never to include a live key in code. Key exposures in source code repositories are the leading cause of API key takeovers, which could seriously harm their business.
+
+Always advise the user to store secret and restricted API keys in their platform’s secrets vault, never in source code or committed environment files. Platform-specific guidance for popular platforms:
+
+- **AWS**: Use AWS Secrets Manager or Parameter Store (as `SecureString` values). Do **not** store keys in environment variables or userdata; AWS makes a proper secrets vault easy to use. Give read permissions only to the application that needs it.
+- **Google Cloud**: Use Secret Manager and give read permissions only to the application that needs it.
+- **Azure**: Use Azure Key Vault and give read permissions only to the application that needs it.
+- **Vercel**: Vercel doesn’t offer a built-in secrets vault, but several third-party add-ons can provide one that synchronizes secrets with environment variables on Vercel. Use a [sensitive environment variable](https://vercel.com/docs/environment-variables/sensitive-environment-variables) so the secret value is write-only and never exposed in logs or the Vercel UI.
+- **Other platforms**: Use the platform’s equivalent secrets vault. Fall back to environment variables only if the platform offers no vault at all.
+
+Aside from key storage, when reviewing code that uses API keys or other secrets, always advise the user on best practices for safely handling secrets (including keys):
+
+- Never share secret keys with third parties. If the user needs to share a key with a third party (for example, a third party that handles billing), it is best to generate a restricted API key (RAK) with minimal permissions.
+- Rotate Stripe API keys when personnel with access to those keys depart.
+- Read [best practices for managing secret API keys](https://docs.stripe.com/keys-best-practices.md).
+- Code must never log keys or include them in error messages or analytics. Remove keys from logs if you find them.
+
+Use separate keys for separate environments (production, staging, QA). This limits the blast radius if any single key is compromised.
+
+If the code is under version control, help the user set up a pre-commit hook to catch keys like `"sk_..."` and `"rk_..."` in source code.
+
+Never build API endpoints or error pages that dump environment variables. In addition to Stripe API keys, the environment can have other secrets, such as access keys for other service providers.
+
+**Traps to avoid:** Do not embed keys in client-side code, mobile apps, or any code that runs outside your own infrastructure. Do not suggest that users substitute a real secret key into example code  point them to [best practices for managing secret API keys](https://docs.stripe.com/keys-best-practices.md) instead.
+
+## Restricted API keys (RAKs)
+
+Use [restricted API keys](https://docs.stripe.com/keys/restricted-api-keys.md) (prefix `rk_`) instead of secret keys (prefix `sk_`) wherever possible. RAKs have only the permissions you assign, so a compromised RAK can do far less damage than a compromised secret key.
+
+Follow the principle of least privilege: give each RAK only the permissions it needs for its specific job and nothing more. Create a separate RAK for each service or use case.
+
+Preferred migration approach:
+
+1. Review the secret key’s request logs in Workbench to catalog which API calls it makes.
+2. Create a RAK in test mode with matching permissions.
+3. Use the [Stripe CLI](https://docs.stripe.com/stripe-cli.md)’s `stripe logs tail` command to watch logs.
+4. Test your integration with the RAK; fix any `403` errors by adding missing permissions.
+5. Create the equivalent live-mode RAK and replace the secret key.
+6. Rotate or expire the old secret key once confident.
+
+**Traps to avoid:** Do not default to recommending secret keys. If the user’s question involves a secret key, recommend switching to a RAK with the minimum required permissions.
+
+## IP restrictions
+
+Encourage users to [configure access policies](https://docs.stripe.com/keys.md#access-policies) for every API key. Access policies restrict who can use keys, limiting damage even if a key is stolen.
+
+Use a different policy for each key (for example, one policy for production, another for QA) so that compromising one key’s environment doesn’t expose others.
+
+## Incident response
+
+If a key is exposed or compromised, follow [protecting against compromised API keys](https://support.stripe.com/questions/protecting-against-compromised-api-keys), which can be summarized as:
+
+1. **Roll the key immediately**  go to the [API keys page](https://dashboard.stripe.com/apikeys) and roll or delete the exposed key. Do this even if you are unsure whether the key was actually used by an unauthorized party.
+2. **Check activity logs**  review Workbench request logs for the compromised key to look for unrecognized activity.
+3. **Contact Stripe support** if you see activity you don’t recognize.
+
+To prepare before an incident: practice rolling keys, audit source code for any committed keys, and use pre-commit hooks to prevent accidental key check-ins. See [protecting against compromised API keys](https://support.stripe.com/questions/protecting-against-compromised-api-keys).
+
+## Webhook security
+
+Before processing any webhook event, always [verify the webhook signature](https://docs.stripe.com/webhooks.md#verify-events) using Stripe’s webhook signing secret. Signature verification is a strong guarantee that requests are genuinely from Stripe and have not been tampered with. Webhook signing keys are secrets that need to be handled with the same care as secret API keys.
+
+For defense in depth, also [allowlist Stripe’s IP addresses](https://docs.stripe.com/ips.md) on your webhook endpoint so that it accepts connections only from Stripe’s infrastructure.
+
+## Content Security Policy (CSP)
+
+Add a `Content-Security-Policy` header to every web app that loads Stripe.js or uses Stripe’s hosted UIs. See [Stripe’s integration security guide](https://docs.stripe.com/security/guide.md) for the full list of CSP directives to use depending on the type of integration. At minimum, include `https://*.stripe.com` in the relevant directives (`script-src`, `frame-src`, `connect-src`), `https://*.link.com` if integrating assets from `link.com`, or both if integrating with Stripe’s embedded crypto onramp. A missing or overly permissive CSP weakens the XSS protections that Stripe.js relies on.
+
+**Traps to avoid:** Do not use `default-src *` or omit CSP headers.
+
+## Mobile and client-side integrations
+
+Do not use production secret or restricted API keys in mobile apps or other client-side code. Client-side code can be extracted and decompiled to extract keys.
+
+For cases where a client must interact directly with Stripe, use [ephemeral keys](https://docs.stripe.com/issuing/elements.md#ephemeral-key-authentication). Ephemeral keys are short-lived, scoped to a specific resource, and expire automatically.
+
+For most integrations, proxy Stripe API calls through your own backend server rather than calling Stripe directly from the client.
+
+## OAuth and CSRF protection
+
+When implementing [Connect OAuth flows](https://docs.stripe.com/connect/oauth-reference.md), always use the `state` parameter to protect against CSRF attacks. Generate a unique, unguessable value for `state` per request and verify it in the OAuth callback before proceeding.
+
+This applies to all Stripe OAuth surfaces: Connect, Link, and Stripe Apps.
+
+## Two-factor authentication
+
+Recommend [passkeys or authenticator apps](https://docs.stripe.com/security.md) rather than SMS-based 2FA for Stripe Dashboard access. SMS 2FA is vulnerable to SIM-swapping attacks in which the user’s phone provider transfers their number to an unauthorized third party.
+
+Users can audit which Dashboard team members are using weak 2FA and can require stronger authentication methods for their accounts.
+
+## Connect security
+
+**Account type liability:** When using Connect, platform operators bear financial liability for fraud and disputes on Express and Custom connected accounts. Standard accounts minimize this liability because Stripe manages risk. Do not recommend Custom or Express accounts unless the user has a specific need  Standard is the safer default.
+
+**Connect onboarding:** Use [Stripe-hosted onboarding](https://docs.stripe.com/connect/onboarding.md) rather than building a custom onboarding flow. Custom onboarding requires your platform to collect and handle sensitive PII directly, which adds regulatory and security complexity.
+
+## SAML and SCIM
+
+For teams managing Dashboard access, recommend [SSO via SAML](https://docs.stripe.com/get-started/account/sso.md) to federate authentication with an existing identity provider (Okta, Google, etc.). SSO centralizes access control and simplifies offboarding.
+
+[SCIM provisioning](https://docs.stripe.com/get-started/account/sso/scim.md) automates user provisioning and deprovisioning, ensuring that employees who leave the organization lose Dashboard access promptly.

.agents/skills/stripe-best-practices/references/tax.md

@@ -0,0 +1,107 @@
+# Tax / Stripe Tax
+
+## Table of contents
+
+- When tax applies
+- Two-step setup
+- Verify before you trust automatic tax
+- Choosing a product tax code
+- Diagnose zero tax
+- Per-integration setup
+- Connect platforms and marketplaces
+- Threshold and nexus monitoring
+- Registration safety
+- If jurisdictions are unknown
+- If the region or tax type isn’t supported
+
+## When tax applies
+
+Use Stripe Tax for any subscription, invoice, or Checkout Session where the user has customers across multiple jurisdictions. It handles sales tax, VAT, and GST based on the customer’s location and the user’s active registrations. See the [Tax overview](https://docs.stripe.com/tax.md) for supported regions and tax types.
+
+## Two-step setup
+
+1. Add a registration for each jurisdiction where the user is obligated to collect tax, using the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) or the [Dashboard](https://docs.stripe.com/tax/registering.md).
+2. Pass `automatic_tax: { enabled: true }` on the [Subscription](https://docs.stripe.com/api/subscriptions.md), [Invoice](https://docs.stripe.com/api/invoices.md), or [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) object.
+
+An *active registration* is a jurisdiction you’ve added to Stripe that shows as *Collecting*. It’s per-jurisdiction, and not the same as having a Stripe account.
+
+Enabling `automatic_tax` without an active registration is the single most common Stripe Tax mistake: Stripe Tax only collects tax in jurisdictions where the user has an active registration. Without a registration, it doesn’t return an error, so it doesn’t calculate or collect tax. The user thinks tax is on while collecting nothing. Never enable `automatic_tax` and assume the user is set up. Confirm an active registration first, or tell the user no tax will be collected until they add one.
+
+**Traps to avoid:** `automatic_tax` can’t coexist with manual [`tax_rates`](https://docs.stripe.com/tax/tax-rates.md) (explicit rate objects) on the same object. Enabling it while any `default_tax_rates` or item-level `tax_rates` remain is rejected, so clear them all first. It’s all-or-nothing, not per line item. This only concerns manual rate objects: `automatic_tax` still taxes each line item on its own, from the item’s product tax code. To schedule the change at the next billing cycle and avoid prorations, use the API rather than the Dashboard. For bulk migrations, use the [Tax migration tool](https://docs.stripe.com/billing/taxes/migration.md), which removes the tax rates for you.
+
+**Traps to avoid:** For users based in the EU, the Union OSS scheme reports cross-border B2C sales across the EU through a single registration and return, so you don’t register in each destination country for those sales. It doesn’t cover domestic or B2B sales. The user still needs a domestic registration in their home country. Confirm the specifics with the user’s tax advisor.
+
+## Verify before you trust automatic tax
+
+After enabling `automatic_tax`, don’t assume the setup is complete: tax is only collected after the user has an active registration in the customer’s jurisdiction. Have the user confirm their registrations with the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) (or in the Dashboard). With none, tax won’t be collected anywhere. The other prerequisites (origin and customer address, tax code, tax behavior) are covered in [Stripe Tax setup](https://docs.stripe.com/tax/set-up.md).
+
+## Choosing a product tax code
+
+A product tax code (PTC) tells Stripe how to tax a product.
+
+- Never invent, guess, or hardcode a `txcd_` from memory. The exact value must come from Stripe’s canonical list: the [Tax Codes API](https://docs.stripe.com/api/tax_codes.md) or the [tax code guide](https://docs.stripe.com/tax/tax-codes.md).
+- Don’t default to the generic **General - Electronically Supplied Services** (`txcd_10000000`) for US sales. It’s too broad for US state-level taxability; pick a specific digital or SaaS code. See [tax codes for digital products](https://docs.stripe.com/tax/digital-products.md) and [tax codes for AI services](https://docs.stripe.com/tax/ai.md).
+- Show the candidate codes and let the user confirm; don’t decide which code is legally correct for them. (Tax code goes on the Product, `tax_behavior` on the Price. See [product tax codes and tax behavior](https://docs.stripe.com/tax/products-prices-tax-codes-tax-behavior.md).)
+
+## Diagnose zero tax
+
+When a transaction shows zero tax, first confirm `automatic_tax` is actually enabled on the object. If it isn’t, Stripe doesn’t calculate tax at all. If it is, read the `taxability_reason` on the line item’s `taxes` to see why. On a Checkout Session, that breakdown isn’t returned by default: retrieve the session with `expand[]=line_items.data.taxes`.
+
+The reason worth calling out is **`not_collecting`, which is ambiguous**: it means either **no active registration** in the customer’s jurisdiction (the usual cause; check registrations with the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md)) **or** a **Nontaxable product tax code** (`txcd_00000000`) on the product. `taxability_reason` can’t tell the two apart, so check the product’s tax code and rule out the Nontaxable code before concluding it’s a registration gap.
+
+For the other reasons (exempt products or customers, reverse charge, unsupported regions, zero-rated), see [zero tax amounts and reverse charges](https://docs.stripe.com/tax/zero-tax.md).
+
+## Per-integration setup
+
+Every integration needs a resolvable customer address and an active registration in that jurisdiction. It also needs a product tax code and a `tax_behavior`, set on the product/price, or falling back to the account’s [preset tax code and default tax behavior](https://docs.stripe.com/tax/products-prices-tax-codes-tax-behavior.md).
+
+- **Checkout Sessions**: set `automatic_tax: { enabled: true }`. For a new customer, Checkout collects the address it needs, so don’t force `billing_address_collection: 'required'` (unnecessary for tax, and it adds checkout friction). For an existing or returning customer, Checkout uses their saved address by default; to tax the address entered at checkout instead, set `customer_update: { address: 'auto' }` and make sure Checkout actually collects a fresh address (a collected shipping address, or `billing_address_collection: 'required'` when you don’t collect shipping), or it keeps using the saved one. See [tax on Checkout](https://docs.stripe.com/tax/checkout.md).
+- **Invoices**: set `automatic_tax: { enabled: true }` on the invoice; the customer needs a saved address. See the [Invoices API](https://docs.stripe.com/api/invoices.md).
+- **Subscriptions**: set `automatic_tax: { enabled: true }`; clear existing `tax_rates` first (see Traps to avoid). See the [Subscriptions API](https://docs.stripe.com/api/subscriptions.md).
+- **Payment Links**: set `automatic_tax: { enabled: true }`.
+- **Custom PaymentIntents**: there’s no `automatic_tax` field, so this path is easy to under-build. Create a [tax calculation](https://docs.stripe.com/api/tax/calculations.md) with the customer’s address, set the PaymentIntent `amount` to the calculation total, and link the calculation to the PaymentIntent. You must also record a tax transaction from the calculation after payment, or the sale never appears in tax reports: the [simplified integration](https://docs.stripe.com/tax/payment-intent/simplified.md) records the transaction and refund reversals automatically once the calculation is linked, while the [custom integration](https://docs.stripe.com/tax/payment-intent/custom.md) records them yourself for line-item control.
+
+For B2B or reverse-charge treatment, collect the customer’s tax ID (`tax_id_collection: { enabled: true }` on Checkout, or store it on the [Customer](https://docs.stripe.com/billing/customer/tax-ids.md)). Without a valid tax ID, Stripe Tax treats a cross-border B2B sale as B2C and charges tax. See [collect tax IDs](https://docs.stripe.com/tax/checkout/tax-ids.md).
+
+## Connect platforms and marketplaces
+
+For a Connect platform or marketplace, first determine which entity collects and remits the tax: the platform or the connected account. This is a legal determination, so route the final call to the user’s tax advisor rather than inferring it from whether they call themselves a platform or a marketplace. The practical signal is who the [merchant of record](https://docs.stripe.com/connect/merchant-of-record.md) is, which follows the charge type: direct charges make the connected account the merchant of record, and destination charges usually make it the platform. Marketplace-facilitator rules can override this, so have the advisor confirm. See [Stripe Tax with Connect](https://docs.stripe.com/tax/connect.md) for the decision.
+
+Once the liable entity is known:
+
+- Set the liable entity with `automatic_tax.liability` on Checkout, Invoices, Subscriptions, or Payment Links: `{ type: 'self' }` for the platform, or `{ type: 'account', account: '<id>' }` for the connected account. Destination and separate charges support both; a platform-liable direct charge uses the gated `{ type: 'application' }`. Custom PaymentIntents have no `automatic_tax` field, so follow the PaymentIntents path in the guides instead. Pick the guide by outcome: connected account collects, [tax for platforms](https://docs.stripe.com/tax/tax-for-platforms.md); platform collects, [tax for marketplaces](https://docs.stripe.com/tax/tax-for-marketplaces.md).
+- Registrations and tax settings belong to the liable entity. When the connected account is liable, confirm its [tax settings](https://docs.stripe.com/tax/settings-api.md) `status` is `active` before enabling `automatic_tax` on its payments, and manage its registrations with the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) using the `Stripe-Account` header (or Connect embedded components).
+
+## Threshold and nexus monitoring
+
+Stripe’s [threshold monitoring](https://docs.stripe.com/tax/monitoring.md) highlights *potential* registration obligations (no public API yet). Present it as information and route the decision to the user’s tax advisor. It’s up to the user to confirm whether registration is required; don’t tell them they must register.
+
+## Registration safety
+
+Guide, don’t advise. Never tell a user where they must register or whether they’re legally obligated. Recommend they consult their tax advisor to determine their obligations.
+
+- The [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) can list, create, update, and expire registrations (set `expires_at` to expire; there’s no delete). A scheduled expiry can be changed, but an expiration that has taken effect is permanent (to collect again, the user adds a new registration), and there’s no pause. A head office address is required before adding a registration.
+- Adding a registration in Stripe records where the user is *already* registered. It doesn’t register them with the tax authority.
+- Creating or expiring a registration changes whether Stripe collects tax in that jurisdiction, but it doesn’t register or deregister the user with the tax authority. The user must do that separately. Prepare the change and have the user confirm it; never create or expire a registration automatically.
+
+**How to register.** Present the paths that fit the user and let them (with their tax advisor) choose. Don’t pick for them.
+
+- **Register themselves, then record it in Stripe**: the user registers with the tax authority, then records it with the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) or the Dashboard. See [Register for tax](https://docs.stripe.com/tax/registering.md).
+- **Ask Stripe to register (US only)**: for remote, out-of-state sellers with no physical presence in the state; no public API, requires a Tax Complete subscription, and doesn’t support in-state registrations. See [Use Stripe to register](https://docs.stripe.com/tax/use-stripe-to-register.md).
+- **Register outside the US with Taxually**: no public API; done through the Taxually app. See [Register outside the US with Taxually](https://docs.stripe.com/tax/use-taxually-to-register.md).
+
+**Reporting and filing.** Stripe Tax calculates and collects tax but doesn’t file returns unless the user is on a filing product. Point users to the Dashboard [tax reports and exports](https://docs.stripe.com/tax/reports.md) to reconcile and remit; filing runs through Stripe (US) or Taxually (non-US).
+
+## If jurisdictions are unknown
+
+Don’t guess which jurisdictions apply. Ask the user which states or countries they have customers in, then add a registration for each with the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) or the Dashboard.
+
+## If the region or tax type isn’t supported
+
+Check the [supported countries list](https://docs.stripe.com/tax/supported-countries.md). If the jurisdiction isn’t listed, tell the user:
+
+- Stripe Tax doesn’t support that region yet
+- They can collect tax manually using `tax_rates` on the subscription or invoice instead (not alongside `automatic_tax`; you can’t use both)
+- For unsupported tax types (customs duties, excise taxes), Stripe Tax doesn’t apply, so those are out of scope
+
+Don’t attempt to approximate using a supported region as a proxy.

.agents/skills/stripe-best-practices/references/treasury.md

@@ -0,0 +1,16 @@
+# Treasury / Financial Accounts
+
+## Table of contents
+
+- v2 Financial Accounts API
+- Legacy v1 Treasury
+
+## v2 Financial Accounts API
+
+For embedded financial accounts (bank accounts, account and routing numbers, money movement), use the [v2 Financial Accounts API](https://docs.stripe.com/api/v2/core/vault/financial-accounts.md) (`POST /v2/core/vault/financial_accounts`). This is required for new integrations.
+
+For Treasury for platforms concepts and guides, see the [Treasury for platforms overview](https://docs.stripe.com/treasury/connect.md).
+
+## Legacy v1 Treasury
+
+Don’t use the [v1 Treasury Financial Accounts API](https://docs.stripe.com/api/treasury/financial_accounts.md) (`POST /v1/treasury/financial_accounts`) for new integrations. Existing v1 integrations continue to work.

.dockerignore

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

.env.example

@@ -1,7 +1,46 @@
-DATABASE_URL="postgresql://s2yt:s2yt@localhost:5432/s2yt"
+DATABASE_URL="postgresql://s2yt:s2yt@localhost:5433/s2yt"
-REDIS_URL="redis://localhost:6379"
+REDIS_URL="redis://localhost:6380"
 NEXTAUTH_URL="http://localhost:3000"
-NEXTAUTH_SECRET="generate-a-random-secret-here"
+# Generate with: openssl rand -base64 32
-GOOGLE_CLIENT_ID="your-google-client-id"
+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"
+# 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

.gitignore

@@ -3,3 +3,6 @@ node_modules/
 .next/
 .env
 .env.local
+website/node_modules/
+website/build/
+website/.docusaurus/

AGENTS.md

@@ -1,5 +0,0 @@
-<!-- BEGIN:nextjs-agent-rules -->
-# This is NOT the Next.js you know
-
-This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
-<!-- END:nextjs-agent-rules -->

CLAUDE.md

@@ -1 +0,0 @@
-@AGENTS.md

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

@@ -1,4 +1,4 @@
-# s2yt
+# Songs2VID
 
 Create YouTube videos from an image and audio files.
 
@@ -7,11 +7,38 @@ Create YouTube videos from an image and audio files.
 - Next.js 15 (App Router, TypeScript, Tailwind)
 - PostgreSQL + Prisma
 - Redis + BullMQ
-- NextAuth (Google OAuth with YouTube scopes)
+- NextAuth (Google OAuth 2.0 with YouTube scopes)
 - FFmpeg for video encoding
 - YouTube Data API v3
 
-## Setup
+## 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:
 
@@ -19,13 +46,13 @@ Create YouTube videos from an image and audio files.
 cp .env.example .env
 ```
 
-2. Start PostgreSQL and Redis:
+2. Start Postgres and Redis only:
 
 ```bash
-docker compose up -d
+docker compose -f docker-compose.dev.yml up -d
 ```
 
-3. Install dependencies and run migrations:
+3. Install dependencies and push the schema:
 
 ```bash
 npm install
@@ -38,26 +65,55 @@ npm run db:push
    - Add redirect URI: `http://localhost:3000/api/auth/callback/google`
    - Set `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` in `.env`
 
-5. Install FFmpeg on your system (required for the worker).
+5. Optional for unlimited local use: `S2VID_EDITION=selfhosted` in `.env`
 
-6. Start the web app and worker in separate terminals:
+6. Start the app, worker, and docs:
 
 ```bash
-npm run dev
+npm run dev:all
-npm run worker
 ```
 
-## Free Plan
+- App: http://localhost:3000  
+- Docs: http://localhost:3001  
 
-- 14 videos/month (each audio = 1 video)
+Or run them separately with `npm run dev`, `npm run worker`, and `npm run docs:dev`.
-- Max 720p resolution
+
-- 30 MB max per file
+## Authentication
-- Watermark required
+
-- Per-video metadata (title auto-filled from audio filename)
+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 dev` - Next.js dev server
-- `npm run worker` — Background job processor
+- `npm run worker` - Background job processor
-- `npm run db:push` — Push Prisma schema to database
+- `npm run dev:all` - App (3000) + worker + docs (3001) together
-- `npm run build` — Production build
+- `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/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/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/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/route.ts

@@ -1,23 +1,11 @@
 import { NextRequest, NextResponse } from "next/server";
-import fs from "fs/promises";
+import { PremiumRequiredError, premiumRequiredResponse } from "@/lib/entitlements";
-import path from "path";
+import { createVideoJob } from "@/lib/jobs/create-job";
-import { Privacy } from "@prisma/client";
-import { FREE_PLAN, isAllowedResolution } from "@/lib/constants";
 import { prisma } from "@/lib/db";
-import { enqueueVideoJob } from "@/lib/queue/client";
-import { checkQuota } from "@/lib/quota";
 import { requireAuth } from "@/lib/session";
-import { getJobDir } from "@/lib/storage";
 import type { CreateJobPayload } from "@/lib/types";
 
-function validateItemMetadata(metadata: CreateJobPayload["items"][0]["metadata"]) {
+export const maxDuration = 120;
-  if (!metadata.title?.trim()) return "Each video must have a title";
-  if (!isAllowedResolution(metadata.resolution)) return "Invalid resolution";
-  if (!["PUBLIC", "PRIVATE", "UNLISTED"].includes(metadata.privacy)) {
-    return "Invalid privacy setting";
-  }
-  return null;
-}
 
 export async function POST(req: NextRequest) {
   const { error, user } = await requireAuth();
@@ -25,102 +13,29 @@ export async function POST(req: NextRequest) {
 
   const body = (await req.json()) as CreateJobPayload;
 
-  if (!body.imagePath || !body.items?.length) {
-    return NextResponse.json({ error: "Image and at least one audio file required" }, { status: 400 });
-  }
-
-  for (const item of body.items) {
-    const metaError = validateItemMetadata(item.metadata);
-    if (metaError) {
-      return NextResponse.json({ error: metaError }, { status: 400 });
-    }
-    if (user.plan === "FREE" && !item.metadata.includeWatermark) {
-      return NextResponse.json({ error: "Watermark is required on the free plan" }, { status: 400 });
-    }
-  }
-
-  const quotaCheck = await checkQuota(user.id, body.items.length);
-  if (!quotaCheck.ok) {
-    return NextResponse.json({ error: quotaCheck.error }, { status: 403 });
-  }
-
   try {
-    await fs.access(body.imagePath);
+    const job = await createVideoJob(user, body);
-    for (const item of body.items) {
+    return NextResponse.json({ jobId: job.id });
-      await fs.access(item.audioPath);
+  } catch (err) {
-      const stat = await fs.stat(item.audioPath);
+    if (err instanceof PremiumRequiredError) {
-      if (stat.size > FREE_PLAN.maxFileSizeBytes) {
+      return NextResponse.json(premiumRequiredResponse(err.message), { status: 403 });
-        return NextResponse.json({ error: `Audio file ${item.audioFilename} exceeds size limit` }, { status: 400 });
-      }
     }
-    const imageStat = await fs.stat(body.imagePath);
+    const message = err instanceof Error ? err.message : "Failed to create job";
-    if (imageStat.size > FREE_PLAN.maxFileSizeBytes) {
+    const status = message.includes("Quota exceeded") ? 403 : 400;
-      return NextResponse.json({ error: "Image exceeds size limit" }, { status: 400 });
+    return NextResponse.json({ error: message }, { status });
-    }
-  } catch {
-    return NextResponse.json({ error: "One or more uploaded files not found" }, { status: 400 });
   }
-
-  const job = await prisma.job.create({
-    data: {
-      userId: user.id,
-      imagePath: body.imagePath,
-      items: {
-        create: body.items.map((item) => ({
-          audioPath: item.audioPath,
-          audioFilename: item.audioFilename,
-          title: item.metadata.title.trim(),
-          description: item.metadata.description || "",
-          tags: item.metadata.tags || "",
-          privacy: item.metadata.privacy as Privacy,
-          categoryId: item.metadata.categoryId || "10",
-          resolution: item.metadata.resolution,
-          notifySubscribers: item.metadata.notifySubscribers,
-          madeForKids: item.metadata.madeForKids,
-          embeddable: item.metadata.embeddable,
-          creativeCommons: item.metadata.creativeCommons,
-          includeWatermark: user.plan === "FREE" ? true : item.metadata.includeWatermark,
-        })),
-      },
-    },
-    include: { items: true },
-  });
-
-  const jobDir = getJobDir(user.id, job.id);
-  await fs.mkdir(jobDir, { recursive: true });
-
-  const imageExt = path.extname(body.imagePath);
-  const newImagePath = path.join(jobDir, `image${imageExt}`);
-  await fs.copyFile(body.imagePath, newImagePath);
-  await prisma.job.update({ where: { id: job.id }, data: { imagePath: newImagePath } });
-
-  for (const item of job.items) {
-    const audioExt = path.extname(item.audioPath);
-    const newAudioPath = path.join(jobDir, `${item.id}${audioExt}`);
-    await fs.copyFile(item.audioPath, newAudioPath);
-    await prisma.jobItem.update({
-      where: { id: item.id },
-      data: { audioPath: newAudioPath },
-    });
-
-    await enqueueVideoJob({
-      jobItemId: item.id,
-      userId: user.id,
-      jobId: job.id,
-    });
-  }
-
-  return NextResponse.json({ jobId: job.id });
 }
 
-export async function GET() {
+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: 20,
+    take: limit,
     include: {
       items: {
         select: {
@@ -135,5 +50,13 @@ export async function GET() {
     },
   });
 
-  return NextResponse.json({ jobs });
+  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/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

@@ -1,22 +1,9 @@
 import { NextRequest, NextResponse } from "next/server";
-import fs from "fs/promises";
+import { PremiumRequiredError, premiumRequiredResponse } from "@/lib/entitlements";
-import path from "path";
+import { saveUploadedFile, type UploadFileType } from "@/lib/jobs/create-job";
-import { FREE_PLAN } from "@/lib/constants";
 import { getSessionUser } from "@/lib/session";
-import { getUploadDir } from "@/lib/storage";
 
-const ALLOWED_IMAGE_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif"];
+export const maxDuration = 120;
-const ALLOWED_AUDIO_TYPES = [
-  "audio/mpeg",
-  "audio/mp3",
-  "audio/wav",
-  "audio/x-wav",
-  "audio/ogg",
-  "audio/flac",
-  "audio/aac",
-  "audio/mp4",
-  "audio/x-m4a",
-];
 
 export async function POST(req: NextRequest) {
   const user = await getSessionUser();
@@ -27,34 +14,29 @@ export async function POST(req: NextRequest) {
   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) {
+  if (
-    return NextResponse.json({ error: "Missing file or type" }, { status: 400 });
+    !file ||
-  }
+    !type ||
-
+    (type !== "image" && type !== "audio" && type !== "logo" && type !== "font")
-  if (file.size > FREE_PLAN.maxFileSizeBytes) {
+  ) {
     return NextResponse.json(
-      { error: `File exceeds ${FREE_PLAN.maxFileSizeBytes / (1024 * 1024)} MB limit` },
+      { error: "Missing file or type (image | audio | logo | font)" },
       { status: 400 },
     );
   }
 
-  const allowedTypes = type === "image" ? ALLOWED_IMAGE_TYPES : ALLOWED_AUDIO_TYPES;
+  try {
-  if (!allowedTypes.includes(file.type) && !file.name.match(/\.(mp3|wav|ogg|flac|aac|m4a|jpg|jpeg|png|webp|gif)$/i)) {
+    const result = await saveUploadedFile(user.id, file, type as UploadFileType, user.plan, {
-    return NextResponse.json({ error: "Invalid file type" }, { status: 400 });
+      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 });
   }
-
-  const sessionDir = path.join(getUploadDir(), user.id, "sessions", Date.now().toString());
-  await fs.mkdir(sessionDir, { recursive: true });
-
-  const safeName = file.name.replace(/[^a-zA-Z0-9._-]/g, "_");
-  const filePath = path.join(sessionDir, safeName);
-  const buffer = Buffer.from(await file.arrayBuffer());
-  await fs.writeFile(filePath, buffer);
-
-  return NextResponse.json({
-    path: filePath,
-    filename: file.name,
-    size: file.size,
-  });
 }

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

@@ -1,33 +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";
-import { SignOutButton } from "@/components/SignOutButton";
 
 export default async function DashboardPage() {
   const session = await getServerSession(authOptions);
   if (!session) redirect("/");
 
   return (
-    <main className="min-h-screen">
+    <DashboardShell channelTitle={session.user.channelTitle}>
-      <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>
-            <a href="/" className="text-xl font-bold text-white">
-              s2yt
-            </a>
-            {session.user.channelTitle && (
-              <p className="text-xs text-gray-500">Channel: {session.user.channelTitle}</p>
-            )}
-          </div>
-          <SignOutButton />
-        </div>
-      </header>
-
       <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>
-    </main>
+    </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

@@ -3,6 +3,10 @@
 @tailwind utilities;
 
 @layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
   body {
     @apply bg-surface-dark text-gray-100 antialiased;
   }
@@ -12,4 +16,233 @@
   .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;
+  }
+}
+
+@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);
+  }
 }

app/jobs/[id]/page.tsx

@@ -1,6 +1,7 @@
 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 = {
@@ -14,18 +15,10 @@ export default async function JobPage({ params }: Props) {
   const { id } = await params;
 
   return (
-    <main className="min-h-screen">
+    <DashboardShell channelTitle={session.user.channelTitle}>
-      <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">
-          <a href="/dashboard" className="text-xl font-bold text-white">
-            s2yt
-          </a>
-        </div>
-      </header>
-
       <div className="mx-auto max-w-4xl px-6 py-8">
         <JobProgress jobId={id} />
       </div>
-    </main>
+    </DashboardShell>
   );
 }

app/layout.tsx

@@ -6,8 +6,9 @@ import { Providers } from "./providers";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "s2yt — Image + Audio to YouTube",
+  title: "Songs2VID",
-  description: "Create and upload YouTube videos from an image and audio files",
+  description:
+    "Songs2VID is an automation tool that converts your audio and image files into high-quality videos and uploads them directly to YouTube.",
 };
 
 export default function RootLayout({
@@ -16,8 +17,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body className={inter.className} suppressHydrationWarning>
         <Providers>{children}</Providers>
       </body>
     </html>

app/page.tsx

@@ -1,68 +1,93 @@
 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">
-      <header className="border-b border-gray-800 bg-surface">
+      <section className="relative min-h-dvh overflow-hidden">
-        <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
+        <video
-          <span className="text-xl font-bold text-white">s2yt</span>
+          autoPlay
-          {session ? (
+          muted
-            <Link
+          loop
-              href="/dashboard"
+          playsInline
-              className="rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover"
+          className="absolute inset-0 h-full w-full object-cover"
-            >
+          aria-hidden="true"
-              Dashboard
+        >
-            </Link>
+          <source src="/bg-video.mp4" type="video/mp4" />
-          ) : (
+        </video>
-            <SignInButton />
+        <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">
+            Songs2VID is an automation tool that converts your audio and image files into
+            high-quality videos and uploads them directly to YouTube.
+          </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>
-      </header>
-
-      <section className="mx-auto max-w-3xl px-6 py-20 text-center">
-        <h1 className="mb-4 text-4xl font-bold text-white">
-          Turn images and audio into YouTube videos
-        </h1>
-        <p className="mb-8 text-lg text-gray-400">
-          Upload one image and one or more audio files. Each audio becomes its own video
-          with individual metadata, then uploads directly to your YouTube channel.
-        </p>
-
-        <div className="mb-12 grid gap-4 text-left sm:grid-cols-3">
-          <Feature title="Batch creation" desc="One image, many audios — each becomes a separate video." />
-          <Feature title="Per-video settings" desc="Title, tags, privacy, and category for every upload." />
-          <Feature title="Direct upload" desc="Connect YouTube once and publish automatically." />
-        </div>
-
-        {session ? (
-          <Link
-            href="/dashboard"
-            className="inline-block rounded bg-accent px-8 py-3 font-medium text-white hover:bg-accent-hover"
-          >
-            Go to Dashboard
-          </Link>
-        ) : (
-          <SignInButton large />
-        )}
-
-        <p className="mt-8 text-sm text-gray-500">
-          Free plan: up to 14 videos/month, 720p max, 30 MB per file
-        </p>
       </section>
+
+      <StepsSection />
+      <BenefitsSection />
+
+      <DownloadSection />
+
+      <PricingSection />
+
+      <SupportSection />
+      <Footer />
     </main>
   );
 }
-
-function Feature({ title, desc }: { title: string; desc: string }) {
-  return (
-    <div className="rounded-lg border border-gray-700 bg-surface p-4">
-      <h3 className="mb-1 font-medium text-white">{title}</h3>
-      <p className="text-sm text-gray-400">{desc}</p>
-    </div>
-  );
-}

app/privacy/page.tsx

@@ -42,36 +42,60 @@ export default function PrivacyPage() {
         <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 on your behalf</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</h3>
+      <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</li>
+        <li>Image and audio files you upload (including optional per-track cover images)</li>
-        <li>Generated video files</li>
+        <li>Optional custom watermark assets (text, PNG logo, or font files)</li>
-        <li>Per-video metadata you provide (title, description, tags, privacy settings, etc.)</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 and technical data</h3>
+      <h3>3.3 Usage, API, and technical data</h3>
       <ul>
-        <li>Plan type, quota usage, and job processing status</li>
+        <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>
       </ul>
 
       <h3>3.4 Payment data</h3>
       <p>
-        If you purchase a paid plan, payment processing is handled by our payment provider. We do
+        If you purchase a Pro subscription or Free-plan extra credits, payment processing is handled
-        not store full payment card details on our servers. We may receive billing status,
+        by Stripe. We do not store full payment card details on our servers. We may receive and store
-        subscription identifiers, and transaction references.
+        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, and
+          <strong>Contract performance:</strong> to provide video encoding, metadata handling,
-          YouTube upload features you request
+          playlist actions, API access, and YouTube upload features you request
         </li>
         <li>
           <strong>Legitimate interests:</strong> to secure our service, prevent abuse, improve
@@ -91,14 +115,35 @@ export default function PrivacyPage() {
       <ul>
         <li>
           <strong>Google / YouTube:</strong> authentication and video uploads via Google OAuth and
-          the YouTube Data API
+          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>Payment processors:</strong> for Pro and Enterprise billing when available
+          <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>
       </ul>
       <p>
@@ -106,26 +151,71 @@ export default function PrivacyPage() {
         appropriate contractual safeguards where required.
       </p>
 
-      <h2>Google User Data Sharing and Disclosure</h2>
+      <h2>6. Google / YouTube user data (Limited Use)</h2>
       <p>
-        We do not sell, share, transfer, or disclose any Google user data to any third parties.
+        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>
-        All user data retrieved via Google OAuth APIs is used solely and strictly for the core
+        We request Google OAuth access (including the YouTube Data API scope needed to upload videos
-        functionality of the application (uploading user-generated media) and is never distributed,
+        and manage playlists on your connected channel) solely to provide prominent, user-facing
-        transferred, or disclosed to external services, partners, or third parties.
+        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>6. Data retention</h2>
+      <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</li>
+        <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 request deletion of your account data subject to legal retention obligations.</p>
+      <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>7. Self-hosted deployments</h2>
+      <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
@@ -133,7 +223,7 @@ export default function PrivacyPage() {
         hosting for you under contract.
       </p>
 
-      <h2>8. Your rights</h2>
+      <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>
@@ -141,48 +231,57 @@ export default function PrivacyPage() {
         <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</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>.
+        <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>9. Cookies and local storage</h2>
+      <h2>10. Cookies and local storage</h2>
       <p>
         We use essential cookies and similar technologies for authentication, session management,
         and security. We do not use non-essential tracking cookies unless disclosed separately and
         enabled with your consent where required.
       </p>
 
-      <h2>10. Security</h2>
+      <h2>11. Security</h2>
       <p>
         We implement appropriate technical and organizational measures to protect your data,
-        including encryption in transit, access controls, and isolated processing environments.
+        including encryption in transit, encrypted storage of YouTube OAuth tokens at rest, access
-        No method of transmission or storage is 100% secure.
+        controls, and isolated processing environments. No method of transmission or storage is
+        100% secure.
       </p>
 
-      <h2>11. International transfers</h2>
+      <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.
+        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>12. Children</h2>
+      <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>13. Changes to this policy</h2>
+      <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.
+        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>14. Contact</h2>
+      <h2>15. Contact</h2>
       <p>
-        Questions about this Privacy Policy:{" "}
+        Questions about this Privacy Policy or our privacy practices:{" "}
         <a href={`mailto:${LEGAL_OPERATOR.email}`}>{LEGAL_OPERATOR.email}</a>
       </p>
     </LegalPageLayout>

app/refund/page.tsx

@@ -0,0 +1,118 @@
+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 | Songs2VID",
+  description: "Refund and cancellation policy for Songs2VID paid plans.",
+};
+
+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/terms/page.tsx

@@ -0,0 +1,261 @@
+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 | Songs2VID",
+  description: "Terms and conditions for using the Songs2VID hosted service.",
+};
+
+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`.

bg-video/bg-video - Repaired.mlt

@@ -0,0 +1,571 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<mlt LC_NUMERIC="C" title="Shotcut version 25.07.26" producer="main_bin">
+  <profile description="automatic" width="3840" height="2160" progressive="1" sample_aspect_num="1" sample_aspect_den="1" display_aspect_num="16" display_aspect_den="9" frame_rate_num="25" frame_rate_den="1" colorspace="709"/>
+  <chain id="chain0" out="00:00:07.520">
+    <property name="length">00:00:07.560</property>
+    <property name="eof">pause</property>
+    <property name="resource">12336223-uhd_3840_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">2</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">3840</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">26564154</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.media.1.stream.type">audio</property>
+    <property name="meta.media.1.codec.sample_fmt">fltp</property>
+    <property name="meta.media.1.codec.sample_rate">48000</property>
+    <property name="meta.media.1.codec.channels">2</property>
+    <property name="meta.media.1.codec.layout">stereo</property>
+    <property name="meta.media.1.codec.name">aac</property>
+    <property name="meta.media.1.codec.long_name">AAC (Advanced Audio Coding)</property>
+    <property name="meta.media.1.codec.bit_rate">253375</property>
+    <property name="meta.attr.1.stream.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="meta.attr.1.stream.handler_name.markup">L-SMASH Audio Handler</property>
+    <property name="meta.attr.1.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2022-06-01T09:11:45</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">3840</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="astream">0</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">deedb8954e1edb1403f9bfcfeec06fd4</property>
+  </chain>
+  <chain id="chain1" out="00:00:13.280">
+    <property name="length">00:00:13.320</property>
+    <property name="eof">pause</property>
+    <property name="resource">5657838-uhd_4096_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">4096</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">15838633</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2020-10-21T09:36:44.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2020-10-21T09:36:44.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2020-10-21T09:36:44</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">4096</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">a8579d660409a043fa3836308c1d07fc</property>
+  </chain>
+  <chain id="chain2" out="00:00:08.920">
+    <property name="length">00:00:08.960</property>
+    <property name="eof">pause</property>
+    <property name="resource">5657843-uhd_4096_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">4096</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">22478882</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2020-10-21T09:34:54.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2020-10-21T09:34:54.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2020-10-21T09:34:54</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">4096</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">a680baf367e6ad49fff40416e3d971cd</property>
+    <property name="ignore_points">1</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">5657843-uhd_4096_2160_25fps.mp4</property>
+  </chain>
+  <chain id="chain3" out="00:00:09.880">
+    <property name="length">00:00:09.920</property>
+    <property name="eof">pause</property>
+    <property name="resource">7507373-uhd_3840_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">3840</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">22476258</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2021-04-14T11:58:42.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2021-04-14T11:58:42.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2021-04-14T11:58:42</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">3840</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">54400e51ad7e058f46fefae726dc0f77</property>
+  </chain>
+  <chain id="chain4" out="00:00:30.640">
+    <property name="length">00:00:30.680</property>
+    <property name="eof">pause</property>
+    <property name="resource">9006055-hd_1920_1080_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">1920</property>
+    <property name="meta.media.0.codec.height">1080</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">5666771</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2021-07-31T17:21:02.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2021-07-31T17:21:02.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2021-07-31T17:21:02</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">1920</property>
+    <property name="meta.media.height">1080</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">153beb054a7e25fb75735a4129b379f2</property>
+  </chain>
+  <playlist id="main_bin">
+    <property name="xml_retain">1</property>
+    <entry producer="chain0" in="00:00:00.000" out="00:00:07.520"/>
+    <entry producer="chain1" in="00:00:00.000" out="00:00:13.280"/>
+    <entry producer="chain2" in="00:00:00.000" out="00:00:08.920"/>
+    <entry producer="chain3" in="00:00:00.000" out="00:00:09.880"/>
+    <entry producer="chain4" in="00:00:00.000" out="00:00:30.640"/>
+  </playlist>
+  <producer id="black" in="00:00:00.000" out="00:00:20.360">
+    <property name="length">00:00:20.400</property>
+    <property name="eof">pause</property>
+    <property name="resource">0</property>
+    <property name="aspect_ratio">1</property>
+    <property name="mlt_service">color</property>
+    <property name="mlt_image_format">rgba</property>
+    <property name="set.test_audio">0</property>
+  </producer>
+  <playlist id="background">
+    <entry producer="black" in="00:00:00.000" out="00:00:20.360"/>
+  </playlist>
+  <chain id="chain5" out="00:00:08.920">
+    <property name="length">00:00:08.960</property>
+    <property name="eof">pause</property>
+    <property name="resource">5657843-uhd_4096_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">4096</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">22478882</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2020-10-21T09:34:54.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2020-10-21T09:34:54.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2020-10-21T09:34:54</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">4096</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">a680baf367e6ad49fff40416e3d971cd</property>
+    <property name="ignore_points">0</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">5657843-uhd_4096_2160_25fps.mp4</property>
+  </chain>
+  <chain id="chain6" out="00:00:09.880">
+    <property name="length">00:00:09.920</property>
+    <property name="eof">pause</property>
+    <property name="resource">7507373-uhd_3840_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">3840</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">22476258</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2021-04-14T11:58:42.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2021-04-14T11:58:42.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2021-04-14T11:58:42</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">3840</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">54400e51ad7e058f46fefae726dc0f77</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">7507373-uhd_3840_2160_25fps.mp4</property>
+  </chain>
+  <chain id="chain7" out="00:00:30.640">
+    <property name="length">00:00:30.680</property>
+    <property name="eof">pause</property>
+    <property name="resource">9006055-hd_1920_1080_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">1920</property>
+    <property name="meta.media.0.codec.height">1080</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">5666771</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2021-07-31T17:21:02.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2021-07-31T17:21:02.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2021-07-31T17:21:02</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">1920</property>
+    <property name="meta.media.height">1080</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">153beb054a7e25fb75735a4129b379f2</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">9006055-hd_1920_1080_25fps.mp4</property>
+  </chain>
+  <chain id="chain8" out="00:00:07.520">
+    <property name="length">00:00:07.560</property>
+    <property name="eof">pause</property>
+    <property name="resource">12336223-uhd_3840_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">2</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">3840</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">26564154</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.media.1.stream.type">audio</property>
+    <property name="meta.media.1.codec.sample_fmt">fltp</property>
+    <property name="meta.media.1.codec.sample_rate">48000</property>
+    <property name="meta.media.1.codec.channels">2</property>
+    <property name="meta.media.1.codec.layout">stereo</property>
+    <property name="meta.media.1.codec.name">aac</property>
+    <property name="meta.media.1.codec.long_name">AAC (Advanced Audio Coding)</property>
+    <property name="meta.media.1.codec.bit_rate">253375</property>
+    <property name="meta.attr.1.stream.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="meta.attr.1.stream.handler_name.markup">L-SMASH Audio Handler</property>
+    <property name="meta.attr.1.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2022-06-01T09:11:45</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">3840</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="astream">0</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">deedb8954e1edb1403f9bfcfeec06fd4</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">12336223-uhd_3840_2160_25fps.mp4</property>
+  </chain>
+  <chain id="chain9" out="00:00:13.280">
+    <property name="length">00:00:13.320</property>
+    <property name="eof">pause</property>
+    <property name="resource">5657838-uhd_4096_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">4096</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">15838633</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2020-10-21T09:36:44.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2020-10-21T09:36:44.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2020-10-21T09:36:44</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">4096</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">a8579d660409a043fa3836308c1d07fc</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">5657838-uhd_4096_2160_25fps.mp4</property>
+  </chain>
+  <playlist id="playlist0">
+    <property name="shotcut:video">1</property>
+    <property name="shotcut:name">V1</property>
+    <entry producer="chain5" in="00:00:00.000" out="00:00:03.000"/>
+    <entry producer="chain6" in="00:00:00.000" out="00:00:03.720"/>
+    <entry producer="chain7" in="00:00:00.000" out="00:00:03.400"/>
+    <entry producer="chain8" in="00:00:00.000" out="00:00:03.440"/>
+    <entry producer="chain9" in="00:00:00.000" out="00:00:06.640"/>
+  </playlist>
+  <tractor id="tractor0" title="Shotcut version 25.07.26" in="00:00:00.000" out="00:00:20.360">
+    <property name="shotcut">1</property>
+    <property name="shotcut:scaleFactor">5.11712</property>
+    <property name="shotcut:projectAudioChannels">2</property>
+    <property name="shotcut:projectFolder">1</property>
+    <track producer="background"/>
+    <track producer="playlist0"/>
+    <transition id="transition0">
+      <property name="a_track">0</property>
+      <property name="b_track">1</property>
+      <property name="mlt_service">mix</property>
+      <property name="always_active">1</property>
+      <property name="sum">1</property>
+    </transition>
+    <transition id="transition1">
+      <property name="a_track">0</property>
+      <property name="b_track">1</property>
+      <property name="version">0.1</property>
+      <property name="mlt_service">frei0r.cairoblend</property>
+      <property name="threads">0</property>
+      <property name="disable">1</property>
+    </transition>
+  </tractor>
+</mlt>
+

bg-video/bg-video.mlt

@@ -0,0 +1,570 @@
+<?xml version="1.0" standalone="no"?>
+<mlt LC_NUMERIC="C" version="7.33.0" title="Shotcut version 25.07.26" producer="main_bin">
+  <profile description="automatic" width="3840" height="2160" progressive="1" sample_aspect_num="1" sample_aspect_den="1" display_aspect_num="16" display_aspect_den="9" frame_rate_num="25" frame_rate_den="1" colorspace="709"/>
+  <chain id="chain0" out="00:00:07.520">
+    <property name="length">00:00:07.560</property>
+    <property name="eof">pause</property>
+    <property name="resource">C:/Users/Atakan Doğan Özban/Desktop/12336223-uhd_3840_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">2</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">3840</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">26564154</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.media.1.stream.type">audio</property>
+    <property name="meta.media.1.codec.sample_fmt">fltp</property>
+    <property name="meta.media.1.codec.sample_rate">48000</property>
+    <property name="meta.media.1.codec.channels">2</property>
+    <property name="meta.media.1.codec.layout">stereo</property>
+    <property name="meta.media.1.codec.name">aac</property>
+    <property name="meta.media.1.codec.long_name">AAC (Advanced Audio Coding)</property>
+    <property name="meta.media.1.codec.bit_rate">253375</property>
+    <property name="meta.attr.1.stream.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="meta.attr.1.stream.handler_name.markup">L-SMASH Audio Handler</property>
+    <property name="meta.attr.1.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2022-06-01T09:11:45</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">3840</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="astream">0</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">deedb8954e1edb1403f9bfcfeec06fd4</property>
+  </chain>
+  <chain id="chain1" out="00:00:13.280">
+    <property name="length">00:00:13.320</property>
+    <property name="eof">pause</property>
+    <property name="resource">C:/Users/Atakan Doğan Özban/Desktop/5657838-uhd_4096_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">4096</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">15838633</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2020-10-21T09:36:44.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2020-10-21T09:36:44.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2020-10-21T09:36:44</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">4096</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">a8579d660409a043fa3836308c1d07fc</property>
+  </chain>
+  <chain id="chain2" out="00:00:08.920">
+    <property name="length">00:00:08.960</property>
+    <property name="eof">pause</property>
+    <property name="resource">C:/Users/Atakan Doğan Özban/Desktop/5657843-uhd_4096_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">4096</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">22478882</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2020-10-21T09:34:54.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2020-10-21T09:34:54.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2020-10-21T09:34:54</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">4096</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">a680baf367e6ad49fff40416e3d971cd</property>
+    <property name="ignore_points">1</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">5657843-uhd_4096_2160_25fps.mp4</property>
+  </chain>
+  <chain id="chain3" out="00:00:09.880">
+    <property name="length">00:00:09.920</property>
+    <property name="eof">pause</property>
+    <property name="resource">C:/Users/Atakan Doğan Özban/Desktop/7507373-uhd_3840_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">3840</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">22476258</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2021-04-14T11:58:42.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2021-04-14T11:58:42.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2021-04-14T11:58:42</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">3840</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">54400e51ad7e058f46fefae726dc0f77</property>
+  </chain>
+  <chain id="chain4" out="00:00:30.640">
+    <property name="length">00:00:30.680</property>
+    <property name="eof">pause</property>
+    <property name="resource">C:/Users/Atakan Doğan Özban/Desktop/9006055-hd_1920_1080_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">1920</property>
+    <property name="meta.media.0.codec.height">1080</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">5666771</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2021-07-31T17:21:02.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2021-07-31T17:21:02.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2021-07-31T17:21:02</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">1920</property>
+    <property name="meta.media.height">1080</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">153beb054a7e25fb75735a4129b379f2</property>
+  </chain>
+  <playlist id="main_bin">
+    <property name="xml_retain">1</property>
+    <entry producer="chain0" in="00:00:00.000" out="00:00:07.520"/>
+    <entry producer="chain1" in="00:00:00.000" out="00:00:13.280"/>
+    <entry producer="chain2" in="00:00:00.000" out="00:00:08.920"/>
+    <entry producer="chain3" in="00:00:00.000" out="00:00:09.880"/>
+    <entry producer="chain4" in="00:00:00.000" out="00:00:30.640"/>
+  </playlist>
+  <producer id="black" in="00:00:00.000" out="00:00:20.360">
+    <property name="length">00:00:20.400</property>
+    <property name="eof">pause</property>
+    <property name="resource">0</property>
+    <property name="aspect_ratio">1</property>
+    <property name="mlt_service">color</property>
+    <property name="mlt_image_format">rgba</property>
+    <property name="set.test_audio">0</property>
+  </producer>
+  <playlist id="background">
+    <entry producer="black" in="00:00:00.000" out="00:00:20.360"/>
+  </playlist>
+  <chain id="chain5" out="00:00:08.920">
+    <property name="length">00:00:08.960</property>
+    <property name="eof">pause</property>
+    <property name="resource">C:/Users/Atakan Doğan Özban/Desktop/5657843-uhd_4096_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">4096</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">22478882</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2020-10-21T09:34:54.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2020-10-21T09:34:54.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2020-10-21T09:34:54</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">4096</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">a680baf367e6ad49fff40416e3d971cd</property>
+    <property name="ignore_points">0</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">5657843-uhd_4096_2160_25fps.mp4</property>
+  </chain>
+  <chain id="chain6" out="00:00:09.880">
+    <property name="length">00:00:09.920</property>
+    <property name="eof">pause</property>
+    <property name="resource">C:/Users/Atakan Doğan Özban/Desktop/7507373-uhd_3840_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">3840</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">22476258</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2021-04-14T11:58:42.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2021-04-14T11:58:42.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2021-04-14T11:58:42</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">3840</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">54400e51ad7e058f46fefae726dc0f77</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">7507373-uhd_3840_2160_25fps.mp4</property>
+  </chain>
+  <chain id="chain7" out="00:00:30.640">
+    <property name="length">00:00:30.680</property>
+    <property name="eof">pause</property>
+    <property name="resource">C:/Users/Atakan Doğan Özban/Desktop/9006055-hd_1920_1080_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">1920</property>
+    <property name="meta.media.0.codec.height">1080</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">5666771</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2021-07-31T17:21:02.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2021-07-31T17:21:02.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2021-07-31T17:21:02</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">1920</property>
+    <property name="meta.media.height">1080</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">153beb054a7e25fb75735a4129b379f2</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">9006055-hd_1920_1080_25fps.mp4</property>
+  </chain>
+  <chain id="chain8" out="00:00:07.520">
+    <property name="length">00:00:07.560</property>
+    <property name="eof">pause</property>
+    <property name="resource">C:/Users/Atakan Doğan Özban/Desktop/12336223-uhd_3840_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">2</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">3840</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">26564154</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.media.1.stream.type">audio</property>
+    <property name="meta.media.1.codec.sample_fmt">fltp</property>
+    <property name="meta.media.1.codec.sample_rate">48000</property>
+    <property name="meta.media.1.codec.channels">2</property>
+    <property name="meta.media.1.codec.layout">stereo</property>
+    <property name="meta.media.1.codec.name">aac</property>
+    <property name="meta.media.1.codec.long_name">AAC (Advanced Audio Coding)</property>
+    <property name="meta.media.1.codec.bit_rate">253375</property>
+    <property name="meta.attr.1.stream.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="meta.attr.1.stream.handler_name.markup">L-SMASH Audio Handler</property>
+    <property name="meta.attr.1.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2022-06-01T09:11:45.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2022-06-01T09:11:45</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">3840</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="astream">0</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">deedb8954e1edb1403f9bfcfeec06fd4</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">12336223-uhd_3840_2160_25fps.mp4</property>
+  </chain>
+  <chain id="chain9" out="00:00:13.280">
+    <property name="length">00:00:13.320</property>
+    <property name="eof">pause</property>
+    <property name="resource">C:/Users/Atakan Doğan Özban/Desktop/5657838-uhd_4096_2160_25fps.mp4</property>
+    <property name="mlt_service">avformat-novalidate</property>
+    <property name="meta.media.nb_streams">1</property>
+    <property name="meta.media.0.stream.type">video</property>
+    <property name="meta.media.0.stream.frame_rate">25</property>
+    <property name="meta.media.0.stream.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.width">4096</property>
+    <property name="meta.media.0.codec.height">2160</property>
+    <property name="meta.media.0.codec.rotate">0</property>
+    <property name="meta.media.0.codec.pix_fmt">yuv420p</property>
+    <property name="meta.media.0.codec.sample_aspect_ratio">0</property>
+    <property name="meta.media.0.codec.colorspace">709</property>
+    <property name="meta.media.0.codec.color_trc">1</property>
+    <property name="meta.media.0.codec.name">h264</property>
+    <property name="meta.media.0.codec.long_name">H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10</property>
+    <property name="meta.media.0.codec.bit_rate">15838633</property>
+    <property name="meta.attr.0.stream.creation_time.markup">2020-10-21T09:36:44.000000Z</property>
+    <property name="meta.attr.0.stream.handler_name.markup">L-SMASH Video Handler</property>
+    <property name="meta.attr.0.stream.vendor_id.markup">[0][0][0][0]</property>
+    <property name="meta.attr.0.stream.encoder.markup">AVC Coding</property>
+    <property name="meta.attr.major_brand.markup">mp42</property>
+    <property name="meta.attr.minor_version.markup">0</property>
+    <property name="meta.attr.compatible_brands.markup">mp42mp41isomavc1</property>
+    <property name="meta.attr.creation_time.markup">2020-10-21T09:36:44.000000Z</property>
+    <property name="seekable">1</property>
+    <property name="meta.media.sample_aspect_num">1</property>
+    <property name="meta.media.sample_aspect_den">1</property>
+    <property name="audio_index">-1</property>
+    <property name="video_index">0</property>
+    <property name="creation_time">2020-10-21T09:36:44</property>
+    <property name="vstream">0</property>
+    <property name="meta.media.frame_rate_num">25</property>
+    <property name="meta.media.frame_rate_den">1</property>
+    <property name="meta.media.colorspace">709</property>
+    <property name="meta.media.color_trc">1</property>
+    <property name="meta.media.has_b_frames">2</property>
+    <property name="meta.media.width">4096</property>
+    <property name="meta.media.height">2160</property>
+    <property name="meta.media.aspect_ratio">1</property>
+    <property name="meta.media.color_range">mpeg</property>
+    <property name="shotcut:skipConvert">1</property>
+    <property name="xml">was here</property>
+    <property name="shotcut:hash">a8579d660409a043fa3836308c1d07fc</property>
+    <property name="meta.media.top_field_first">0</property>
+    <property name="meta.media.progressive">1</property>
+    <property name="shotcut:caption">5657838-uhd_4096_2160_25fps.mp4</property>
+  </chain>
+  <playlist id="playlist0">
+    <property name="shotcut:video">1</property>
+    <property name="shotcut:name">V1</property>
+    <entry producer="chain5" in="00:00:00.000" out="00:00:03.000"/>
+    <entry producer="chain6" in="00:00:00.000" out="00:00:03.720"/>
+    <entry producer="chain7" in="00:00:00.000" out="00:00:03.400"/>
+    <entry producer="chain8" in="00:00:00.000" out="00:00:03.440"/>
+    <entry producer="chain9" in="00:00:00.000" out="00:00:06.640"/>
+  </playlist>
+  <tractor id="tractor0" title="Shotcut version 25.07.26" in="00:00:00.000" out="00:00:20.360">
+    <property name="shotcut">1</property>
+    <property name="shotcut:scaleFactor">5.11712</property>
+    <property name="shotcut:projectAudioChannels">2</property>
+    <property name="shotcut:projectFolder">1</property>
+    <track producer="background"/>
+    <track producer="playlist0"/>
+    <transition id="transition0">
+      <property name="a_track">0</property>
+      <property name="b_track">1</property>
+      <property name="mlt_service">mix</property>
+      <property name="always_active">1</property>
+      <property name="sum">1</property>
+    </transition>
+    <transition id="transition1">
+      <property name="a_track">0</property>
+      <property name="b_track">1</property>
+      <property name="version">0.1</property>
+      <property name="mlt_service">frei0r.cairoblend</property>
+      <property name="threads">0</property>
+      <property name="disable">1</property>
+    </transition>
+  </tractor>
+</mlt>

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/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/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/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,206 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+import { Logo } from "@/components/Logo";
+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 function Footer() {
+  const year = new Date().getFullYear();
+
+  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-12 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>
+
+        <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/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

@@ -1,7 +1,10 @@
 "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;
@@ -17,7 +20,13 @@ const STATUS_LABELS: Record<string, string> = {
 
 export function JobProgress({ jobId }: Props) {
   const [job, setJob] = useState<JobResponse | null>(null);
-  const [quota, setQuota] = useState<{ remaining: number; limit: number } | 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(() => {
@@ -36,7 +45,14 @@ export function JobProgress({ jobId }: Props) {
 
         if (quotaRes.ok) {
           const quotaData = await quotaRes.json();
-          if (active) setQuota({ remaining: quotaData.remaining, limit: quotaData.limit });
+          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");
@@ -60,6 +76,9 @@ export function JobProgress({ jobId }: Props) {
   }
 
   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">
@@ -72,11 +91,16 @@ export function JobProgress({ jobId }: Props) {
         </div>
         {quota && (
           <div className="rounded bg-surface-light px-4 py-2 text-sm text-gray-300">
-            {quota.remaining} / {quota.limit} videos remaining this month
+            {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
@@ -108,24 +132,24 @@ export function JobProgress({ jobId }: Props) {
                 rel="noopener noreferrer"
                 className="mt-2 inline-block text-sm text-accent hover:underline"
               >
-                View on YouTube →
+                View on YouTube
               </a>
             )}
 
-            {item.error && (
+            {item.status === "FAILED" && displayJobItemError(item.error) && (
-              <p className="mt-2 text-sm text-red-400">{item.error}</p>
+              <p className="mt-2 text-sm text-red-400">{displayJobItemError(item.error)}</p>
             )}
           </div>
         ))}
       </div>
 
       {allDone && (
-        <a
+        <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
-        </a>
+        </Link>
       )}
     </div>
   );

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,866 @@
+"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,
+): CSSProperties {
+  const base: CSSProperties = {
+    position: "absolute",
+    maxWidth: "32%",
+    pointerEvents: "none",
+    zIndex: 5,
+  };
+  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.position, W.offsetX, W.offsetY],
+  );
+
+  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 object-contain"
+                    style={{ width: `${WATERMARK_WIDTH_FRACTION * 100}%` }}
+                  />
+                ) : W.mode === "logo" && logoPreviewUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={logoPreviewUrl}
+                    alt=""
+                    className="h-auto object-contain"
+                    style={{ width: `${WATERMARK_WIDTH_FRACTION * 100}%` }}
+                  />
+                ) : 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/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/RecentYouTubeLimitAlert.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { isYouTubeUploadLimitError } from "@/lib/youtube/errors";
+import { YouTubeLimitBanner } from "./YouTubeLimitBanner";
+
+/** Shows a dashboard alert when a recent job hit YouTube's upload limit. */
+export function RecentYouTubeLimitAlert() {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+
+    fetch("/api/jobs?limit=10")
+      .then(async (res) => {
+        if (!res.ok) return;
+        const data = await res.json();
+        const hit = (data.jobs ?? []).some((job: { items?: Array<{ status: string; error?: string | null }> }) =>
+          (job.items ?? []).some(
+            (item) => item.status === "FAILED" && item.error && isYouTubeUploadLimitError(item.error),
+          ),
+        );
+        if (active) setShow(hit);
+      })
+      .catch(() => {});
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  if (!show) return null;
+  return <YouTubeLimitBanner className="mb-6" />;
+}

components/ResolutionSelect.tsx

@@ -1,14 +1,18 @@
 "use client";
 
-import { RESOLUTIONS } from "@/lib/constants";
+import { Plan } from "@prisma/client";
+import { getResolutionsForPlan } from "@/lib/plans";
 
 type Props = {
   value: string;
   onChange: (value: string) => void;
   disabled?: boolean;
+  plan?: Plan;
 };
 
-export function ResolutionSelect({ value, onChange, disabled }: Props) {
+export function ResolutionSelect({ value, onChange, disabled, plan = "FREE" }: Props) {
+  const resolutions = getResolutionsForPlan(plan);
+
   return (
     <select
       value={value}
@@ -16,7 +20,7 @@ export function ResolutionSelect({ value, onChange, disabled }: Props) {
       disabled={disabled}
       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 disabled:opacity-50"
     >
-      {RESOLUTIONS.map((r) => (
+      {resolutions.map((r) => (
         <option key={r.value} value={r.value}>
           {r.label}
         </option>

components/ScrollReveal.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+type Direction = "up" | "left" | "right";
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+  delay?: number;
+  direction?: Direction;
+};
+
+const OFFSET: Record<Direction, string> = {
+  up: "translate-y-10",
+  left: "-translate-x-10",
+  right: "translate-x-10",
+};
+
+export function ScrollReveal({
+  children,
+  className = "",
+  delay = 0,
+  direction = "up",
+}: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.unobserve(el);
+        }
+      },
+      { threshold: 0.15, rootMargin: "0px 0px -40px 0px" },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={`transition-all duration-700 ease-out ${className} ${
+        visible ? "translate-x-0 translate-y-0 opacity-100" : `opacity-0 ${OFFSET[direction]}`
+      }`}
+      style={{ transitionDelay: `${delay}ms` }}
+    >
+      {children}
+    </div>
+  );
+}

components/SectionScrollTitle.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useState, type RefObject } from "react";
+
+type Props = {
+  sectionRef: RefObject<HTMLElement | null>;
+  title: string;
+  offset?: number;
+};
+
+export function SectionScrollTitle({ sectionRef, title, offset = 350 }: Props) {
+  const [offsetX, setOffsetX] = useState(0);
+
+  useEffect(() => {
+    const section = sectionRef.current;
+    if (!section) return;
+
+    const update = () => {
+      const rect = section.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const progress = Math.min(
+        1,
+        Math.max(0, (viewportHeight - rect.top) / (viewportHeight + rect.height * 0.5)),
+      );
+      setOffsetX(progress * offset);
+    };
+
+    update();
+    window.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [sectionRef, offset]);
+
+  return (
+    <span
+      className="pointer-events-none absolute bottom-0 left-1/2 z-0 select-none whitespace-nowrap text-7xl font-bold leading-none text-white/[0.04] sm:text-8xl lg:text-9xl"
+      style={{ transform: `translateX(calc(-50% + ${offsetX}px))` }}
+      aria-hidden="true"
+    >
+      {title}
+    </span>
+  );
+}

components/SignInButton.tsx

@@ -2,19 +2,44 @@
 
 import { signIn } from "next-auth/react";
 
+function GoogleIcon() {
+  return (
+    <svg className="h-5 w-5 shrink-0" viewBox="0 0 24 24" aria-hidden="true">
+      <path
+        fill="#4285F4"
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      />
+    </svg>
+  );
+}
+
 type Props = {
   large?: boolean;
+  fullWidth?: boolean;
 };
 
-export function SignInButton({ large }: Props) {
+export function SignInButton({ large, fullWidth }: Props) {
   return (
     <button
       onClick={() => signIn("google", { callbackUrl: "/dashboard" })}
-      className={`rounded bg-white font-medium text-gray-900 transition-colors hover:bg-gray-100 ${
+      className={`inline-flex items-center justify-center gap-3 rounded border border-gray-300 bg-white font-medium text-gray-800 transition-all duration-300 hover:scale-[1.02] hover:bg-gray-50 hover:shadow-lg hover:shadow-white/10 ${
         large ? "px-8 py-3 text-base" : "px-4 py-2 text-sm"
-      }`}
+      } ${fullWidth ? "w-full" : ""}`}
     >
-      Sign in with Google
+      <GoogleIcon />
+      Continue with Google
     </button>
   );
 }

components/StepsSection.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { ScrollReveal } from "@/components/ScrollReveal";
+import { useInView } from "@/hooks/useInView";
+import { useMockupProgress } from "@/hooks/useMockupProgress";
+
+function LayersIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M12 2L2 7l10 5 10-5-10-5z" />
+      <path d="M2 17l10 5 10-5" />
+      <path d="M2 12l10 5 10-5" />
+    </svg>
+  );
+}
+
+function SlidersIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3" />
+      <circle cx="4" cy="14" r="2" />
+      <circle cx="12" cy="12" r="2" />
+      <circle cx="20" cy="16" r="2" />
+    </svg>
+  );
+}
+
+function CloudUploadIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+      <path d="M12 16V8M12 8l-3 3M12 8l3 3" />
+      <path d="M7 18a4 4 0 0 1 0-8 5 5 0 0 1 9.9-1A4 4 0 1 1 17 18H7z" />
+    </svg>
+  );
+}
+
+function ImageIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} 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>
+  );
+}
+
+function AudioIcon({ 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>
+  );
+}
+
+const STEPS = [
+  {
+    number: 1,
+    title: "Single/Batch creation",
+    desc: "One image, many audios, each becomes a separate video.",
+    Icon: LayersIcon,
+  },
+  {
+    number: 2,
+    title: "Per-video settings",
+    desc: "Title, tags, privacy, and category for every upload.",
+    Icon: SlidersIcon,
+  },
+  {
+    number: 3,
+    title: "Direct upload",
+    desc: "Connect YouTube once and publish automatically.",
+    Icon: CloudUploadIcon,
+  },
+] as const;
+
+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 AppMockup() {
+  const phaseOneMs = 3000;
+  const phaseTwoMs = 2000;
+  const initialWidth = "20%";
+  const midWidth = "45%";
+  const { ref, inView } = useInView();
+  const { phase, processed, transitionMs } = useMockupProgress(inView, phaseOneMs, phaseTwoMs);
+
+  const width = phase === 0 ? initialWidth : phase === 1 ? midWidth : "100%";
+
+  return (
+    <div
+      ref={ref}
+      className="mt-10 overflow-hidden rounded-2xl border border-gray-700/60 bg-surface-dark shadow-2xl shadow-black/40"
+    >
+      <div className="flex items-center gap-2 border-b border-gray-700/50 px-4 py-3">
+        <span className="h-2.5 w-2.5 rounded-full bg-gray-600" />
+        <span className="h-2.5 w-2.5 rounded-full bg-gray-600" />
+        <span className="h-2.5 w-2.5 rounded-full bg-gray-600" />
+      </div>
+
+      <div className="p-6">
+        <div className="rounded-xl border border-gray-700/50 bg-surface p-6">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="mockup-upload-box mockup-upload-box-image flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-600 bg-surface-dark px-4 py-8">
+              <ImageIcon className="mockup-icon-image mb-3 h-8 w-8 text-gray-500" />
+              <span className="text-xs font-semibold tracking-widest text-gray-500">IMAGE</span>
+            </div>
+            <div className="mockup-upload-box mockup-upload-box-audio flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-600 bg-surface-dark px-4 py-8">
+              <AudioIcon className="mockup-icon-audio mb-3 h-8 w-8 text-gray-500" />
+              <span className="text-xs font-semibold tracking-widest text-gray-500">AUDIO</span>
+            </div>
+          </div>
+
+          <p className="mt-6 text-sm text-gray-400">
+            {processed ? (
+              "Processed"
+            ) : (
+              <>
+                Processing
+                <span className="mockup-dot-1">.</span>
+                <span className="mockup-dot-2">.</span>
+                <span className="mockup-dot-3">.</span>
+              </>
+            )}
+          </p>
+          <div className="mt-2 flex items-center gap-2">
+            <div className="relative h-1 min-w-0 flex-1 overflow-hidden rounded-full bg-gray-700">
+              <div
+                className="relative h-full rounded-full bg-white/90 ease-out"
+                style={{
+                  width,
+                  transition: phase >= 1 ? `width ${transitionMs}ms ease-out` : "none",
+                }}
+              >
+                {!processed && (
+                  <span className="mockup-progress-shimmer absolute inset-y-0 w-1/2 rounded-full bg-gradient-to-r from-transparent via-white/50 to-transparent" />
+                )}
+              </div>
+            </div>
+            <CheckIcon
+              className={`h-4 w-4 shrink-0 text-accent transition-all duration-300 ${
+                processed ? "scale-100 opacity-100" : "scale-75 opacity-0"
+              }`}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StepCard({
+  number,
+  title,
+  desc,
+  Icon,
+}: {
+  number: number;
+  title: string;
+  desc: string;
+  Icon: typeof LayersIcon;
+}) {
+  return (
+    <div className="group relative overflow-hidden rounded-2xl border border-gray-700/50 bg-surface transition-all duration-300 hover:border-gray-500 hover:bg-surface-light hover:shadow-xl hover:shadow-black/30">
+      <span
+        className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 select-none text-[7.5rem] font-bold leading-none text-gray-600/20 transition-all duration-500 ease-out group-hover:left-1/2 group-hover:-translate-x-1/2 group-hover:scale-[1.18] group-hover:text-red-500/25 sm:text-[8.5rem]"
+        aria-hidden="true"
+      >
+        {number}
+      </span>
+
+      <div className="relative flex items-center gap-6 px-8 py-9 pl-24 sm:pl-28">
+        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-gray-600/50 bg-surface-dark text-gray-400 transition-all duration-300 group-hover:border-red-500/30 group-hover:text-red-400">
+          <Icon className="h-7 w-7" />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-white transition-colors duration-300 group-hover:text-red-400 sm:text-xl">
+            {title}
+          </h3>
+          <p className="mt-2 text-base leading-relaxed text-gray-400 transition-colors duration-300 group-hover:text-gray-300">
+            {desc}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function StepsSection() {
+  return (
+    <section className="mx-auto max-w-6xl scroll-mt-20 px-6 pb-24 pt-32">
+      <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
+        <ScrollReveal direction="left">
+          <div>
+            <h2 className="text-2xl font-bold leading-snug text-white sm:text-3xl">
+              Upload your content in 3 simple steps:
+            </h2>
+            <p className="mt-6 text-base leading-relaxed text-gray-400">
+              From a single track to a full batch, Songs2VID walks you through creating and
+              publishing videos to YouTube without touching a video editor.
+            </p>
+            <AppMockup />
+          </div>
+        </ScrollReveal>
+
+        <div className="flex flex-col gap-7">
+          {STEPS.map((step, index) => (
+            <ScrollReveal key={step.number} delay={index * 120} direction="right">
+              <StepCard
+                number={step.number}
+                title={step.title}
+                desc={step.desc}
+                Icon={step.Icon}
+              />
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/SupportSection.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useRef } from "react";
+import { ScrollReveal } from "@/components/ScrollReveal";
+import { SectionScrollTitle } from "@/components/SectionScrollTitle";
+import { GITEA_ISSUES_URL, SUPPORT_EMAIL } from "@/lib/plans";
+
+type SupportCardProps = {
+  title: string;
+  description: string;
+  href: string;
+  cta: string;
+  external?: boolean;
+  hover: string;
+  titleHover: string;
+  linkClass: string;
+  linkHover: string;
+};
+
+function SupportCard({
+  title,
+  description,
+  href,
+  cta,
+  external,
+  hover,
+  titleHover,
+  linkClass,
+  linkHover,
+}: SupportCardProps) {
+  return (
+    <a
+      href={href}
+      target={external ? "_blank" : undefined}
+      rel={external ? "noopener noreferrer" : undefined}
+      className={`group block rounded-xl border border-gray-700/50 bg-surface/80 p-6 backdrop-blur-sm transition-all duration-300 ${hover}`}
+    >
+      <h3
+        className={`mb-2 text-lg font-semibold text-white transition-colors duration-300 ${titleHover}`}
+      >
+        {title}
+      </h3>
+      <p className="mb-4 text-sm leading-relaxed text-gray-400 transition-colors duration-300 group-hover:text-gray-300">
+        {description}
+      </p>
+      <span
+        className={`inline-flex text-sm font-medium transition-all duration-300 group-hover:underline ${linkClass} ${linkHover}`}
+      >
+        {cta}
+      </span>
+    </a>
+  );
+}
+
+const SUPPORT_CARDS: SupportCardProps[] = [
+  {
+    title: "🛠️ Community & Self-Hosting",
+    description:
+      "Found a bug, want to request a feature, or need help setting up your Docker instance? Open an issue on our self-hosted Gitea.",
+    href: GITEA_ISSUES_URL,
+    cta: "Open Gitea Issues",
+    external: true,
+    hover:
+      "hover:border-[#609926]/45 hover:bg-[#609926]/[0.06] hover:shadow-lg hover:shadow-[#609926]/20",
+    titleHover: "group-hover:text-[#609926]",
+    linkClass: "text-[#609926]",
+    linkHover: "group-hover:text-[#7ab33a]",
+  },
+  {
+    title: "📩 Billing & Premium Support",
+    description:
+      "Have questions about your Pro subscription, custom limits, or Enterprise inquiries? Drop us an email.",
+    href: `mailto:${SUPPORT_EMAIL}`,
+    cta: SUPPORT_EMAIL,
+    hover:
+      "hover:border-accent/50 hover:bg-accent/[0.06] hover:shadow-lg hover:shadow-accent/20",
+    titleHover: "group-hover:text-accent",
+    linkClass: "text-accent",
+    linkHover: "group-hover:text-accent-hover",
+  },
+];
+
+export function SupportSection() {
+  const sectionRef = useRef<HTMLElement>(null);
+
+  return (
+    <section
+      ref={sectionRef}
+      id="support"
+      className="relative scroll-mt-24 overflow-x-visible overflow-y-hidden px-6 pb-24 pt-24"
+    >
+      <SectionScrollTitle sectionRef={sectionRef} title="Support" />
+
+      <div className="relative z-10 mx-auto max-w-4xl">
+        <ScrollReveal>
+          <h2 className="mb-4 text-center text-3xl font-bold text-white">Support</h2>
+          <p className="mx-auto mb-10 max-w-2xl text-center text-gray-400">
+            Community help for self-hosters, or reach us directly for billing and premium support.
+          </p>
+        </ScrollReveal>
+
+        <div className="mx-auto mt-10 grid grid-cols-1 gap-8 text-left md:grid-cols-2">
+          {SUPPORT_CARDS.map((card, index) => (
+            <ScrollReveal
+              key={card.title}
+              direction={index === 0 ? "left" : "right"}
+              delay={index * 120}
+            >
+              <SupportCard {...card} />
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}