Publicar nas Lojas

Cole este prompt em aistudio.google.com/apps para gerar o projeto completo React Native/Expo do BBrain. O prompt cobre backend, frontend, design system, autenticação, Stripe e todas as telas.

You are an expert React Native developer. Build a complete, production-ready mobile app called **BBrain** for iOS and Android using Expo SDK 51+ and TypeScript.

═══════════════════════════════════════════
OVERVIEW
═══════════════════════════════════════════
BBrain is a private founder's journal and idea capture tool.
Single user, premium, offline-capable.
Backend: REST API at https://bbrainapp.you (Node.js, no framework)
Auth: Bearer token, daily expiry (client-side), SHA-256 passwords

═══════════════════════════════════════════
TECH STACK
═══════════════════════════════════════════
- React Native 0.74+ with Expo SDK 51
- TypeScript (strict)
- React Navigation v6 (Bottom Tabs + Stack)
- Expo SecureStore (token storage)
- Expo Notifications (push reminders)
- @stripe/stripe-react-native (payments)
- React Query (TanStack) for data fetching
- NativeWind v4 (Tailwind CSS for RN) OR StyleSheet
- Expo Router (file-based routing)
- expo-web-browser (for Stripe Checkout)
- dayjs (dates)

═══════════════════════════════════════════
DESIGN SYSTEM
═══════════════════════════════════════════
Colors:
  brain:      #1A0A3A  (primary dark purple — auth screens, CTAs)
  brain-mid:  #3A1F7A  (secondary purple — accents)
  paper:      #F7F5EF  (warm off-white — app background)
  surface:    #FFFFFF  (cards)
  paper2:     #EFEDE6  (muted areas)
  ink:        #111110  (primary text)
  ink2:       #4A4A47  (secondary text)
  ink3:       #9A9A96  (muted text)
  green:      #2A5F2A on #EDF5ED  (roadmap status)
  amber:      #7A4A0A on #FDF2E2  (in-analysis status)
  blue:       #0D4A8A on #E8F0FB  (new idea status)
  red:        #8A1A1A on #FBEAEA  (delete/error)
  purple:     #4A1D7A on #F3EEFB  (evaluation)
  whatsapp:   #25D366 on #E8FDF2

Typography:
  Font: DM Sans (Google Fonts via expo-font)
  Mono: DM Mono (idea IDs, timers, counters)
  Sizes: xs=10, sm=11, base=13, md=14, lg=15, xl=16, 2xl=20, 3xl=26

Spacing: 4px base unit (4,8,12,16,20,24,32,40,48)
Radius: sm=6, md=10, lg=12, xl=16, 2xl=18, full=9999
Shadows: subtle — elevation 1-4, shadowOpacity 0.05-0.15

═══════════════════════════════════════════
NAVIGATION STRUCTURE
═══════════════════════════════════════════
Unauthenticated stack:
  - LoginScreen
  - ChangePasswordScreen (force_password_change flow)
  - LegacyMessageScreen (special users: Karina, Cecília)
  - ForgotPasswordScreen
  - ResetPasswordScreen

Authenticated bottom tabs:
  💡 Ideas    → IdeasScreen (home)
  📓 Sessions → SessionsScreen
  🗺️ Roadmap  → RoadmapScreen
  📊 Report   → ReportScreen
  ⚙️ Settings → SettingsScreen

═══════════════════════════════════════════
API BASE URL: https://bbrainapp.you
AUTH HEADER:  Authorization: Bearer {token}
═══════════════════════════════════════════

ALL API ENDPOINTS:

[AUTH — no token required]
GET  /api/auth/status
  → { setup_required: bool, authenticated: bool }

POST /api/auth/login
  body: { username, password }
  → { token, username, force_password_change: bool, firstLoginMessage?: string }

POST /api/auth/setup
  body: { username, password }
  → { token, username }

POST /api/auth/change-password  [requires token]
  body: { password }
  → { success: true }

POST /api/auth/logout  [requires token]
  → { success: true }

POST /api/auth/reset-request
  → { success: true }

POST /api/auth/reset
  body: { code, password }
  → { success: true }

[IDEAS — requires token]
GET  /api/ideas?status=nova&source=whatsapp
  → { ideas: Idea[], meta: { total, on_roadmap, archived, from_whatsapp } }

POST /api/ideas
  body: { text, source?, session_id? }
  → { idea: Idea }

PATCH /api/ideas/:id
  body: { status?, tags?, evaluation?, roadmap_phase?, connections? }
  → { idea: Idea }

DELETE /api/ideas/:id
  → { success: true }

Idea object:
{
  id: string,            // "20260320-ABC12"
  text: string,
  source: "web"|"whatsapp"|"api",
  whatsapp_from: string|null,
  created_at: string,    // ISO 8601
  status: "nova"|"em_analise"|"no_roadmap"|"arquivada",
  tags: string[],
  evaluation: string|null,
  roadmap_phase: "backlog"|"planejado"|"em_execucao"|"concluido"|null,
  connections: string[],
  session_id: string|null,
  updated_at: string|null
}

[SESSIONS — requires token]
GET  /api/sessions
  → { sessions: Session[], meta: { total_sessions, total_hours, last_session } }

POST /api/sessions
  body: { location, initial_thoughts? }
  → { session: Session }

PATCH /api/sessions/:id
  body: { ended_at, duration_minutes }
  → { session: Session }

Session object:
{
  id: string,
  started_at: string,
  ended_at: string|null,
  location: string,
  initial_thoughts: string|null,
  duration_minutes: number|null,
  features_worked: string[],
  ideas_captured: string[],
  social_content: string|null
}

[SETTINGS — requires token]
GET  /api/settings
  → { settings: { plan, reminder_frequency, reminder_time, reminder_channels } }

POST /api/settings
  body: { plan?, reminder_frequency?, reminder_time?, reminder_channels? }
  → { settings: {...} }

settings.plan values: "free"|"pro"|"power"
settings.reminder_frequency: ""|"monthly"|"every15days"|"every2days"|"daily"
  - free plan: monthly, every15days only
  - pro plan: + every2days
  - power plan: all (including daily)
settings.reminder_channels: "email"|"whatsapp"|"email,whatsapp"
  - whatsapp only for pro and power plans

[REPORT — requires token]
GET  /api/report/monthly?month=2026-03
  → {
      month, ideas_count, sessions_count, roadmap_count,
      total_duration (minutes), best_day: { date, count }|null,
      ideas: IdeaReport[], sessions: SessionReport[]
    }

[STRIPE — requires token except webhook]
GET  /api/stripe/plans
  → { plans: [{ id, name, price_brl, price_usd, features[] }] }

POST /api/stripe/checkout
  body: { plan: "pro"|"power" }
  → { url: string, session_id: string }

GET  /api/stripe/portal
  → { url: string }

POST /api/stripe/webhook  [Stripe calls this — no auth]
  Stripe events handled: checkout.session.completed, customer.subscription.deleted

[VERSION]
GET /api/version
  → { version, updated_at }

═══════════════════════════════════════════
SCREEN SPECIFICATIONS
═══════════════════════════════════════════

── LoginScreen ──
Background: brain (#1A0A3A), full screen
Layout: centered, max-width 340px
Elements:
  - Language selector top: PT 🇧🇷 | EN 🇺🇸 | FR 🇫🇷 | ES 🇪🇸 | DE 🇩🇪
  - Brain emoji 🧠 (52px)
  - Title "BBrain" (26px bold, white)
  - Subtitle "Aproove · Diário do Fundador" (muted white)
  - Username input (dark glass morphism: rgba(255,255,255,0.07))
  - Password input + show/hide toggle
  - "Entrar" button (white bg, brain text, full width)
  - Error text (red #F87171)
  - "Esqueci minha senha" link
  - "Criar conta" link (only if setup_required)
On login success:
  - Save token to SecureStore
  - Save today's date to SecureStore
  - If force_password_change → navigate to ChangePasswordScreen
  - If firstLoginMessage → navigate to LegacyMessageScreen
  - Else → navigate to main tabs

── ChangePasswordScreen ──
Background: brain
Elements:
  - Lock emoji 🔐
  - "Defina sua senha" title
  - "Por segurança, crie uma senha pessoal antes de continuar." subtitle
  - New password input
  - Confirm password input
  - "Confirmar" button
On success: navigate to main tabs

── LegacyMessageScreen ──
Background: brain
Elements:
  - Brain emoji
  - Message text (italic, white, pre-line whitespace)
  - "Entrar no BBrain" button
Persist message in AsyncStorage for permanent footer display.

── IdeasScreen (Main Tab) ──
Header:
  - BBrain logo + subtitle
  - Stat chips: N ideias, N no roadmap, N sessões
  - Active session indicator (green dot + timer)
  - 🔔 reminder settings button
  - Language selector
  - Logout button

Session banner (when active):
  - Background: #EEF0F4 (light gray)
  - Text: #1A2A4A (dark blue)
  - Green pulse dot + location + elapsed timer
  - "Encerrar sessão" button

Capture area:
  - White card, rounded
  - TextInput multiline "Qualquer pensamento..."
  - "Registrar ideia" button + Ctrl+Enter hint

Filter pills row:
  Todas | Novas | Roadmap | Em análise | Arquivadas (with counts)

Ideas list (FlatList):
  Each card (white, rounded 12):
    - Index number (#001) DM Mono
    - Idea text
    - Meta row: date, source badge (WhatsApp/Web), status badge
    - If roadmap_phase: phase badge
    - If session_id: linked session tag
    - If evaluation: purple evaluation block
    - Action buttons: +Roadmap | Analisar | Arquivar / Reabrir | ✕

Status badge colors:
  nova → blue, em_analise → amber, no_roadmap → green, arquivada → paper/muted

Swipe gesture on idea card (optional):
  Left → Archive; Right → Roadmap

── SessionsScreen ──
Header: "+ Nova sessão" button

When no active session:
  Show check-in form (inline, full screen):
    - "Nova sessão de trabalho" title + datetime
    - Location pills: Em casa | No escritório | De madrugada | No café | Viajando + free text
    - "O que você está pensando?" textarea
    - "Começar a trabalhar" CTA button (brain, full width)
    - "Continuar sem registrar sessão" skip link

Sessions list (FlatList):
  Each session card:
    - Date block (large day number + month)
    - Time range: 09:30 → 11:45
    - Location with 📍
    - Duration (DM Mono)
    - Ideas captured count
    - Initial thoughts (italic quote)
    - Ideas from this session (expandable)
    - "✦ Gerar conteúdo" / "📱 Ver post" button
    - Social post preview (Instagram/LinkedIn draft)

── RoadmapScreen ──
Toggle: Kanban | Lista

Kanban view (4 columns, horizontal scroll):
  📋 Backlog | 🔧 Planejado | ⚡ Em execução | ✅ Concluído
  Each column: idea cards with move-to-phase buttons

List view:
  Each row: phase badge (colored) + idea text + "Mover para" select

Empty state: "Adicione ideias ao Roadmap na aba 💡"

── ReportScreen ──
Month picker (default: current month)
"Gerar" button

Report sections:
  Stats grid (2x2 or 2x3):
    - N ideias capturadas
    - N sessões registradas
    - N no roadmap
    - Xh Xmin trabalhadas
    - Melhor dia (date + count)

  Ideas list section:
    Each: date chip + idea text (truncated 200 chars)

  Sessions list section:
    Each: date chip + location + duration + initial thoughts excerpt

"↓ Exportar HTML" button → Share sheet with HTML string

── SettingsScreen ──
User info section:
  - Username + plan badge
  - "Gerenciar assinatura" → Stripe portal (for paid plans)

Reminders section:
  - Frequency select (restrictions by plan, show "upgrade" for locked options)
  - Time picker
  - Channel: Email checkbox + WhatsApp checkbox (pro/power only)
  - "Salvar" button

Plans section (if free plan):
  Plan cards: Free | Pro R$14,90/mês | Power R$29,90/mês
  "Fazer upgrade" → stripeCheckout() → open in browser

Language section:
  Flag buttons PT | EN | FR | ES | DE

App section:
  - App version
  - "Política de Privacidade" link
  - "Logout" button (red tint)

═══════════════════════════════════════════
AUTHENTICATION FLOW (client-side)
═══════════════════════════════════════════
1. On app start: read token from SecureStore
2. Check if token date === today (local expiry)
3. Call GET /api/auth/status with token
4. If authenticated → load main tabs
5. If not → show LoginScreen
6. After login: store { token, tokenDate } in SecureStore
7. On logout: delete from SecureStore, call POST /api/auth/logout

═══════════════════════════════════════════
STRIPE PAYMENT FLOW
═══════════════════════════════════════════
1. User taps "Fazer upgrade" on SettingsScreen
2. App calls POST /api/stripe/checkout with { plan }
3. Server creates Checkout Session, returns { url }
4. App opens url in expo-web-browser
5. User completes payment on Stripe Checkout
6. Stripe calls POST /api/stripe/webhook → server updates plan in Sheets
7. App polls GET /api/settings on return from browser
8. Plan badge updates in UI

For subscription management:
1. User taps "Gerenciar assinatura"
2. App calls GET /api/stripe/portal
3. Opens returned url in expo-web-browser

Plan restrictions (enforced client-side, validated server-side):
  free:  reminder_frequency ∈ { monthly, every15days }; channel = email only
  pro:   + every2days; + whatsapp channel
  power: + daily; all channels; early access to new features

═══════════════════════════════════════════
OFFLINE SUPPORT
═══════════════════════════════════════════
- Cache ideas and sessions in AsyncStorage on fetch
- On API failure: read from cache, show "offline" indicator
- Queue failed POST/PATCH operations and retry on reconnect
- Use NetInfo to detect connectivity

═══════════════════════════════════════════
I18N (5 languages)
═══════════════════════════════════════════
Supported: pt-BR (default), en-US, fr-FR, es-ES, de-DE
Use react-i18next with inline namespace.
Language stored in AsyncStorage. Settable from Login screen and Settings.

═══════════════════════════════════════════
PROJECT FILE STRUCTURE
═══════════════════════════════════════════
bbrain-app/
├── app.json                    # Expo config
├── package.json
├── tsconfig.json
├── app/
│   ├── _layout.tsx             # Root navigator
│   ├── (auth)/
│   │   ├── login.tsx
│   │   ├── change-password.tsx
│   │   ├── legacy-message.tsx
│   │   ├── forgot-password.tsx
│   │   └── reset-password.tsx
│   └── (tabs)/
│       ├── _layout.tsx         # Bottom tabs
│       ├── ideas.tsx
│       ├── sessions.tsx
│       ├── roadmap.tsx
│       ├── report.tsx
│       └── settings.tsx
├── components/
│   ├── IdeaCard.tsx
│   ├── SessionCard.tsx
│   ├── RoadmapKanban.tsx
│   ├── SessionBanner.tsx
│   ├── CheckInForm.tsx
│   ├── ReminderBanner.tsx
│   ├── PlanBadge.tsx
│   └── ui/                     # Button, Input, Badge, Toast, Modal
├── hooks/
│   ├── useAuth.ts
│   ├── useIdeas.ts
│   ├── useSessions.ts
│   ├── useSettings.ts
│   └── useStripe.ts
├── lib/
│   ├── api.ts                  # Axios/fetch wrapper with auth header
│   ├── auth.ts                 # Token storage (SecureStore)
│   ├── i18n.ts                 # Translations
│   └── stripe.ts               # Stripe helpers
├── types/
│   └── index.ts                # Idea, Session, Settings, Plan interfaces
└── assets/
    ├── icon.png                # 1024x1024 PNG
    └── splash.png

═══════════════════════════════════════════
PACKAGE.JSON DEPENDENCIES
═══════════════════════════════════════════
{
  "expo": "~51.0.0",
  "react": "18.2.0",
  "react-native": "0.74.x",
  "expo-router": "~3.5.0",
  "expo-secure-store": "~13.0.0",
  "@react-navigation/bottom-tabs": "^6.6.0",
  "@tanstack/react-query": "^5.40.0",
  "@stripe/stripe-react-native": "0.37.x",
  "expo-web-browser": "~13.0.0",
  "expo-notifications": "~0.28.0",
  "react-i18next": "^14.1.0",
  "i18next": "^23.11.0",
  "dayjs": "^1.11.11",
  "nativewind": "^4.0.36",
  "@react-native-async-storage/async-storage": "1.23.1",
  "@react-native-community/netinfo": "11.3.x"
}

═══════════════════════════════════════════
app.json (Expo config)
═══════════════════════════════════════════
{
  "expo": {
    "name": "BBrain",
    "slug": "bbrain",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "scheme": "bbrain",
    "userInterfaceStyle": "light",
    "splash": { "image": "./assets/splash.png", "backgroundColor": "#1A0A3A" },
    "ios": {
      "supportsTablet": false,
      "bundleIdentifier": "you.bbrainapp.bbrain",
      "buildNumber": "1"
    },
    "android": {
      "adaptiveIcon": { "foregroundImage": "./assets/icon.png", "backgroundColor": "#1A0A3A" },
      "package": "you.bbrainapp.bbrain",
      "versionCode": 1
    },
    "plugins": [
      "expo-router",
      "expo-secure-store",
      ["expo-notifications", { "sounds": [] }],
      ["@stripe/stripe-react-native", { "merchantIdentifier": "merchant.you.bbrainapp" }]
    ],
    "extra": {
      "apiBaseUrl": "https://bbrainapp.you",
      "stripePublishableKey": "pk_live_YOUR_KEY_HERE"
    }
  }
}

═══════════════════════════════════════════
IMPORTANT IMPLEMENTATION NOTES
═══════════════════════════════════════════
1. The API uses NO CORS restrictions — all requests must include Authorization header.
2. Idea IDs are formatted as "YYYYMMDD-XXXXX" (date + 5-char alphanumeric).
3. Token expiry is client-side daily check (compare stored date to today).
4. The master admin "brunomassa" always has plan="power" (server-enforced).
5. For Stripe: use WebBrowser.openAuthSessionAsync() to handle redirect back to app.
6. Special users Karina and Cecília receive a legacy message on first login — store in AsyncStorage permanently.
7. Session timer: start counting from session.started_at using setInterval every second.
8. Roadmap phases: backlog → planejado → em_execucao → concluido (in order).
9. Report export: use expo-sharing + expo-file-system to save HTML and share.
10. Language preference: store in AsyncStorage, apply to all text via i18next.

Generate the complete, production-ready code for all files listed in the project structure above.
Start with: types/index.ts → lib/api.ts → lib/auth.ts → lib/i18n.ts → hooks/ → components/ui/ → components/ → app/(auth)/ → app/(tabs)/ → app/_layout.tsx

Variáveis de ambiente para configurar no Fly.io:

# Obter em: dashboard.stripe.com → API Keys
flyctl secrets set STRIPE_SECRET_KEY=sk_live_...
flyctl secrets set STRIPE_WEBHOOK_SECRET=whsec_...

# Criar produtos em: dashboard.stripe.com → Products
# Produto "BBrain Pro" → Preço recorrente R$14,90/mês
flyctl secrets set STRIPE_PRICE_PRO=price_...

# Produto "BBrain Power" → Preço recorrente R$29,90/mês
flyctl secrets set STRIPE_PRICE_POWER=price_...

# URL base do app (já deve estar configurada)
flyctl secrets set APP_BASE_URL=https://bbrainapp.you

Configurar webhook no Stripe Dashboard:

# Em: dashboard.stripe.com → Webhooks → Add endpoint
Endpoint URL: https://bbrainapp.you/api/stripe/webhook

Eventos a escutar:
  ✓ checkout.session.completed
  ✓ invoice.payment_succeeded
  ✓ customer.subscription.deleted

Endpoints disponíveis na API:

Cole este prompt em stitch.withgoogle.com para gerar uma Web App / PWA completa do BBrain. O Stitch gera apps web responsivos prontos para deploy — ideal para ter uma versão web funcional do app enquanto o React Native é desenvolvido.

Build a complete, production-ready Progressive Web App (PWA) called **BBrain** — a private founder's journal and idea capture tool for iOS and Android home screen installation.

═══════════════════════════════════════════
PRODUCT OVERVIEW
═══════════════════════════════════════════
BBrain is a personal "second brain" for founders, indie hackers, and content creators.
Single user, premium app. Mobile-first, installable as PWA.
Tagline: "Capture ideas in 3 seconds. Review them forever."

Backend API: https://bbrainapp.you (REST, Node.js)
Auth: Bearer token stored in localStorage, daily expiry (client manages TTL)
Language: start in PT-BR; user can switch to EN / FR / ES / DE in settings

═══════════════════════════════════════════
DESIGN SYSTEM
═══════════════════════════════════════════
Font: DM Sans (body), DM Serif Display (headings) — from Google Fonts
Colors:
  --brain:      #1a0a3a   (deep navy — primary brand)
  --brain-mid:  #3a1f7a   (purple — accents, buttons)
  --brain-lite: #a78bfa   (light purple — highlights)
  --paper:      #f7f5ef   (warm off-white — background)
  --paper2:     #efede6
  --paper3:     #e4e1d8
  --ink:        #111110
  --ink2:       #4a4a47
  --ink3:       #9a9a96
  --green:      #2a5f2a
  --amber:      #7a4a0a

Border radius: 12–14px for cards, 8px for buttons/inputs
Shadows: subtle (0 4px 16px rgba(26,10,58,.08))
Motion: 200ms ease transitions, no heavy animations

═══════════════════════════════════════════
PWA REQUIREMENTS
═══════════════════════════════════════════
- manifest.json: name "BBrain", short_name "BBrain", theme_color #1a0a3a, background_color #f7f5ef, display standalone, orientation portrait
- Service Worker: cache shell + API GET responses for offline read
- Icons: generate from the letter B on brain (#1a0a3a) background — sizes 192, 512
- iOS meta tags: apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style black-translucent
- Install prompt: show "Add to home screen" banner after 3rd visit

═══════════════════════════════════════════
AUTH FLOW
═══════════════════════════════════════════
POST /api/auth/login
  body: { username, password }
  → { token, username, force_password_change }

If force_password_change === true → show ChangePasswordScreen before app

POST /api/auth/change-password
  headers: Authorization: Bearer {token}
  body: { current_password, new_password }
  → { success }

POST /api/auth/logout
  headers: Authorization: Bearer {token}

All authenticated requests must include:
  Authorization: Bearer {token}

Store token in localStorage key "bbrain_token"
Token TTL: compute from login timestamp, expire after 86400s client-side
On 401 → clear localStorage, redirect to login

═══════════════════════════════════════════
API REFERENCE
═══════════════════════════════════════════
Base URL: https://bbrainapp.you

── IDEAS ──
GET  /api/ideas
  params: ?status=nova|analisando|arquivada&source=web|whatsapp
  → { ideas: Idea[], meta: { total, by_status: {nova,analisando,arquivada} } }

POST /api/ideas
  body: { text, source?, tags?, roadmap_phase?, session_id? }
  → { idea: Idea }

PATCH /api/ideas/:id
  body: { status?, roadmap_phase?, tags?, connections? }
  → { idea: Idea }

DELETE /api/ideas/:id
  → { success: true }

── SESSIONS ──
GET  /api/sessions
  → { sessions: Session[] }

POST /api/sessions
  body: { location?, focus?, energy? }
  → { session: Session }

PATCH /api/sessions/:id
  body: { checked_out_at?, ideas_captured?, features_worked? }
  → { session: Session }

── SETTINGS ──
GET  /api/settings
  → { settings: { email, plan: "free"|"pro"|"power", reminder_frequency, reminder_time, reminder_channels, last_reminder } }

POST /api/settings
  body: { email?, reminder_frequency?, reminder_time?, reminder_channels?, plan? }
  → { success: true }

── REPORT ──
GET  /api/report/monthly?month=YYYY-MM
  → { month, total_ideas, by_status, by_source, sessions_count, avg_ideas_per_session, top_ideas: Idea[] }

── STRIPE ──
GET  /api/stripe/plans   (public — no auth)
  → { plans: [{ id, name, price_brl, price_usd, features[] }] }

POST /api/stripe/checkout
  body: { plan: "pro"|"power" }
  → { url: string }   — redirect user to this URL

GET  /api/stripe/portal
  → { url: string }   — redirect to Stripe customer portal

── MISC ──
GET  /api/status  (public)
  → { server, version, ai_configured, whatsapp_configured }

═══════════════════════════════════════════
DATA MODELS
═══════════════════════════════════════════
Idea {
  id: string
  text: string
  source: "web" | "whatsapp"
  status: "nova" | "analisando" | "arquivada"
  tags: string[]
  roadmap_phase: "now" | "next" | "later" | "icebox" | null
  session_id: string | null
  created_at: ISO string
  updated_at: ISO string
}

Session {
  id: string
  started_at: ISO string
  checked_out_at: ISO string | null
  location: string
  focus: string
  energy: 1|2|3|4|5
  ideas_captured: number
  features_worked: string
}

Plan {
  free:  50 ideas/month, reminders monthly/every15days, email only
  pro:   unlimited, +every2days, +whatsapp
  power: unlimited, all frequencies (daily included), all channels
}

═══════════════════════════════════════════
SCREEN SPECIFICATIONS
═══════════════════════════════════════════

── /login ──
Full-screen brain (#1a0a3a) background
Center card (max-width 340px, white, border-radius 20px, shadow)
  - Language selector: 🇧🇷 PT | 🇺🇸 EN | 🇫🇷 FR | 🇪🇸 ES | 🇩🇪 DE
  - 🧠 emoji (52px) + "BBrain" title (DM Serif, 28px, white)
  - Subtitle: "Aproove · Diário do Fundador" (muted)
  - Input: username (text, placeholder "Usuário")
  - Input: password (password, placeholder "Senha", show/hide toggle)
  - Button "Entrar" (full-width, brain-mid background, white, bold)
  - Link "Esqueci a senha" below button
  - Forgot password inline: email field + "Enviar link" + back link

── / (Home — Ideas tab) ──
Header (fixed, 56px, blur backdrop):
  - Logo "BBrain" (DM Serif, 20px, brain color)
  - Right: 🔔 button (if plan ≥ free), username chip, logout

Bottom tab bar (4 tabs):
  💡 Ideias | 🗓 Sessões | 🗺 Roadmap | 📊 Relatório

Ideas tab content:
  - Status counters bar: Nova (N) · Analisando (N) · Arquivadas (N)
  - Active session banner (if session active): "Em sessão · {location} · {focus}"
    with Check-out button
  - "Nova Ideia" FAB (bottom-right, brain-mid color, +)
  - Idea list: card per idea
    Card: text (clamp 2 lines), status badge, created_at relative, tag chips
    Swipe left → archive; Swipe right → analyze
    Tap → expand (full text, edit status, edit tags, roadmap_phase selector, delete)
  - Filter chips above list: Todas | Nova | Analisando | Arquivada

"Nova Ideia" modal (bottom sheet, handle bar):
  - Textarea (autofocus, large, placeholder "O que está na sua cabeça?")
  - Tags input (comma separated, shown as chips)
  - Roadmap phase selector: Now / Next / Later / Icebox
  - Submit button "Capturar" (full-width, brain-mid)
  - Keyboard shortcut: Enter to submit (Cmd/Ctrl+Enter on desktop)

── /sessions ──
"Nova Sessão" button top-right
Session list (reverse chronological):
  - Card: date/time, location, focus, energy (★ stars), badge (active/closed)
  - Ideas captured count chip
  - Tap to expand: full details + ideas linked to this session

"Nova Sessão" modal (bottom sheet):
  - Where are you? (text, placeholder "Casa, Café, Escritório...")
  - What will you focus on? (textarea)
  - Energy level: 1–5 star selector
  - Button "Iniciar sessão" (brain-mid)

── /roadmap ──
Kanban board with 4 columns: Now | Next | Later | Icebox
  - Each column header shows count badge
  - Idea cards: drag-and-drop between columns (or tap → select phase)
  - Cards: text (2 lines), status badge, created_at
  - Empty column: dashed border placeholder "Solte aqui"

Toggle above: 🗂 Kanban | 📋 Lista
Lista view: flat list filtered by phase, grouped headers

── /report ──
Month picker: ← Fev 2026 → (navigate months)
Stats cards grid (2 cols):
  - Total de Ideias (large number)
  - Sessões Realizadas
  - Média ideias/sessão
  - Arquivadas este mês

Donut chart: Nova / Analisando / Arquivada (use CSS or simple SVG — no chart lib)
Top 5 ideias do mês: ranked list with index badges

── /settings (accessible from header or profile) ──
Sections:
  1. Conta: email display, change-password link
  2. Plano atual: badge (Free / Pro / Power)
     If free/pro: "Fazer upgrade" button → /plans
  3. Lembretes:
     Frequency selector (options per plan):
       free: A cada 30 dias, A cada 15 dias
       pro:  + A cada 2 dias
       power: + Todo dia
     Time picker (HH:MM)
     Channel: Email (free+) · WhatsApp (pro+)
     Save button
  4. Idioma: 5 flag buttons
  5. Logout button (danger style)

── /plans ──
3 plan cards (stacked on mobile, side-by-side on tablet):
  Free: R$0 — 50 ideias/mês, lembretes mensais, email
  Pro:  R$14,90/mês — ilimitado, lembretes a cada 2 dias, WhatsApp — "Mais popular" badge
  Power:R$29,90/mês — tudo + todo dia + prioridade IA

Each card: features list with ✓/✗, CTA button
  Free → active chip "Seu plano"
  Pro/Power → "Assinar" → POST /api/stripe/checkout → redirect to url

═══════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════
Framework: vanilla JS + Web Components, OR React (your choice — prefer minimal bundle)
State management: simple module pattern or React Context — NO Redux
HTTP layer: a single api() helper that auto-attaches Authorization header and handles 401
Routing: client-side SPA, History API or hash routing
i18n: JSON translation files for 5 languages, detected from localStorage "bbrain_lang"
Offline: Service Worker caches GET /api/ideas and GET /api/sessions for read-only offline
Bundle: single HTML file output preferred (Stitch default), or index.html + assets
No external UI libraries — implement all components from scratch using the design tokens above

═══════════════════════════════════════════
EXTRA DETAILS
═══════════════════════════════════════════
- All dates shown in Brazilian format: DD/MM/YYYY HH:mm
- Relative time: "há 2 horas", "ontem", "há 3 dias"
- Empty states: friendly illustrations using CSS/emoji — no image files
- Error states: inline, non-blocking toast notifications (bottom center, 3s auto-dismiss)
- Loading states: skeleton screens, not spinners
- Accessibility: semantic HTML, aria-labels on icon buttons, focus rings
- Dark mode: NOT required for v1
- Analytics: NOT required for v1