import React, { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'motion/react'; import { BrainCircuit, Search, MessageSquare, Zap, Cpu, Workflow, Globe, Shield, ArrowRight, Sparkles, Layers, Box, FileText, Activity, ArrowRightLeft, Check, Languages, History, Network, Clock, BookOpen, Sliders, CheckSquare, Lock, Compass, HelpCircle } from 'lucide-react'; // Define the shape of our localized dictionary keys interface LangDict { nav_features: string; nav_agents: string; nav_brainstorm: string; nav_pricing: string; nav_architecture: string; nav_login: string; nav_start: string; hero_badge: string; hero_title_1: string; hero_title_italic: string; hero_desc: string; hero_cta_start: string; hero_cta_features: string; floating_card_1: string; floating_card_1_text: string; floating_card_2: string; floating_card_2_text: string; floating_card_2_desc: string; features_badge: string; features_title_1: string; features_title_2: string; features_subtitle: string; f1_title: string; f1_desc: string; f2_title: string; f2_desc: string; f3_title: string; f3_desc: string; agents_badge: string; agents_title: string; agents_subtitle: string; agent_scraper_desc: string; agent_researcher_desc: string; agent_slide_desc: string; agent_monitor_desc: string; agent_diagram_desc: string; agent_custom_desc: string; brain_badge: string; brain_title: string; brain_item1_title: string; brain_item1_desc: string; brain_item2_title: string; brain_item2_desc: string; brain_item3_title: string; brain_item3_desc: string; brain_node1_title: string; brain_node1_text: string; brain_node2_title: string; brain_node2_text: string; tech_badge: string; tech_title: string; tech_tier1_label: string; tech_tier1_desc: string; tech_tier2_label: string; tech_tier2_desc: string; tech_tier3_label: string; tech_tier3_desc: string; price_badge: string; price_title: string; price_desc: string; price_monthly: string; price_annual: string; price_popular: string; price_free_name: string; price_free_price: string; price_free_desc: string; price_pro_name: string; price_pro_price: string; price_pro_desc: string; price_biz_name: string; price_biz_price: string; price_biz_desc: string; price_ent_name: string; price_ent_price: string; price_ent_desc: string; price_period_month: string; price_period_annual: string; price_cta_start: string; price_cta_pro: string; price_cta_biz: string; price_cta_ent: string; price_free_features: string[]; price_pro_features: string[]; price_biz_features: string[]; price_ent_features: string[]; byok_badge: string; byok_title: string; byok_desc: string; byok_col1_title: string; byok_col1_desc: string; byok_col2_title: string; byok_col2_desc: string; byok_config_title: string; final_cta_title: string; final_cta_title_italic: string; final_cta_desc: string; final_cta_button: string; eco_badge: string; eco_title_1: string; eco_title_2: string; eco_desc: string; eco_button: string; eco_original: string; eco_translated: string; eco_status: string; footer_desc: string; footer_col1_title: string; footer_col2_title: string; footer_col3_title: string; workspace_title_editor: string; workspace_title_graph: string; workspace_title_agents: string; workspace_title_reviews: string; workspace_title_history: string; workspace_notes_available: string; workspace_new_doc: string; workspace_local_reading: string; workspace_graph_map_title: string; workspace_graph_map_desc: string; workspace_graph_connected: string; workspace_graph_status: string; workspace_agents_title: string; workspace_active_prompt: string; workspace_rag_active: string; workspace_consigne: string; workspace_secure_chat: string; workspace_processor: string; workspace_recall_title: string; workspace_recall_desc: string; workspace_show_answer: string; workspace_correct_answer: string; workspace_study_memory: string; workspace_snapshot_title: string; workspace_snapshot_desc: string; workspace_restore: string; workspace_state_saved: string; } const FR: LangDict = { nav_features: "Fonctionnalités", nav_agents: "Agents IA", nav_brainstorm: "Brainstorm", nav_pricing: "Tarification", nav_architecture: "Architecture", nav_login: "Se connecter", nav_start: "Commencez", hero_badge: "Augmenté par l'Intelligence Artificielle", hero_title_1: "Votre second cerveau,", hero_title_italic: "enfin amplifié.", hero_desc: "Memento n'est pas qu'une simple application de notes. C'est un écosystème intelligent qui connecte, analyse et développe vos idées en temps réel grâce à 6 types d'agents IA et une recherche sémantique de pointe.", hero_cta_start: "S'inscrire maintenant", hero_cta_features: "Voir les fonctionnalités", floating_card_1: "Memory Echo", floating_card_1_text: '\"Connexion détectée avec votre projet de design durable de Mars 2024...\"', floating_card_2: "Brainstorm Live", floating_card_2_text: "+12 idées générées", floating_card_2_desc: "Utilisateurs actifs en simultané", features_badge: "Capacités IA", features_title_1: "Une intelligence fluide,", features_title_2: "intégrée à chaque mot.", features_subtitle: "Memento orchestre vos idées grâce à une architecture multi-fournisseurs.", f1_title: "Recherche Sémantique", f1_desc: "Ne cherchez plus par mots-clés. Trouvez par concept. Notre moteur hybride Vector + FTS comprend l'intention derrière vos notes.", f2_title: "Chat RAG Contextuel", f2_desc: "Discutez avec votre savoir. Nos agents lisent vos notes, explorent le web et analysent vos documents pour répondre avec précision.", f3_title: "Écriture Augmentée", f3_desc: "Reformulation, suggestions de titres, tagging automatique et résumés. L'IA travaille en arrière-plan pour structurer votre pensée.", agents_badge: "Agents Spécialisés", agents_title: "Déléguez le travail complexe.", agents_subtitle: "6 types d'agents IA autonomes pour automatiser vos recherches, vos résumés et vos présentations.", agent_scraper_desc: "Scrape des URLs, parse les flux RSS et synthétise l'info avec placement d'images intelligent.", agent_researcher_desc: "Génère des requêtes complexes, explore les sources web et rédige des notes de recherche structurées.", agent_slide_desc: "Transforme vos notes en présentations PowerPoint professionnelles ou Slides HTML Interactives.", agent_monitor_desc: "Analyse continuellement vos carnets pour détecter les tendances et les nouveaux insights.", agent_diagram_desc: "Convertit vos idées en diagrammes Excalidraw fluides (Mindmaps, Flowcharts) avec auto-layout.", agent_custom_desc: "Définissez vos propres agents avec des rôles et des sources de données spécifiques.", brain_badge: "Vagues de Pensée", brain_title: "Brainstorming radial en temps réel.", brain_item1_title: "Génération par Vagues", brain_item1_desc: "Variations, Analogies, puis Disruptions. L'IA pousse votre concept initial dans ses retranchements.", brain_item2_title: "Collaboration Native", brain_item2_desc: "Curseurs fantômes IA, avatars synchronisés et déplacement de nœuds en temps réel.", brain_item3_title: "Export Sémantique", brain_item3_desc: "Convertissez tout votre brainstorm en notes structurées d'un seul clic.", brain_node1_title: "DISRUPTION", brain_node1_text: "Architecture Modulaire 2.0", brain_node2_title: "ANALOGIE", brain_node2_text: "Le cycle des marées", tech_badge: "Architecture & Fournisseurs", tech_title: "Connectez votre propre intelligence.", tech_tier1_label: "Tags", tech_tier1_desc: "Indépendamment configurable avec n'importe quel modèle.", tech_tier2_label: "Embeddings", tech_tier2_desc: "Indépendamment configurable avec n'importe quel modèle.", tech_tier3_label: "Chat RAG", tech_tier3_desc: "Indépendamment configurable avec n'importe quel modèle.", price_badge: "Plans & Tarification", price_title: "Choisissez votre niveau d'amplification.", price_desc: "Des options flexibles pour les esprits créatifs, de l'usage individuel aux grandes organisations.", price_monthly: "Mensuel", price_annual: "Annuel", price_popular: "Le plus populaire", price_free_name: "Basic", price_free_price: "Gratuit", price_free_desc: "Pour découvrir la magie de Memento.", price_pro_name: "Pro", price_pro_price: "9,90€", price_pro_desc: "Pour les consultants et créateurs exigeants.", price_biz_name: "Business", price_biz_price: "29,90€", price_biz_desc: "Pour les équipes et chefs de produit.", price_ent_name: "Enterprise", price_ent_price: "49,90€", price_ent_desc: "Mémoire organisationnelle sécurisée.", price_period_month: "/mois", price_period_annual: "/mois, facturé annuellement", price_cta_start: "Commencer", price_cta_pro: "Passer Pro", price_cta_biz: "Choisir Business", price_cta_ent: "Contacter Ventes", price_free_features: ["100 Notes max", "3 Carnets", "50 crédits IA (Lifetime)", "Recherche sémantique", "Historique 7 jours"], price_pro_features: ["Notes illimitées", "BYOK (OpenAI/Anthropic)", "200 recherches sémantiques", "Agents (12 runs/mois)", "Historique 30 jours", "Support Email"], price_biz_features: ["10 Collaborateurs inclus", "BYOK (13 fournisseurs)", "1000 recherches sémantiques", "Agents (60 runs/mois)", "Brainstorm illimité", "Accès API"], price_ent_features: ["Tout Business", "Agents illimités", "SSO / SAML", "Audit Logs & SLA", "Support Dédié", "Onboarding Live"], byok_badge: "Technologie Cloud Ouverte", byok_title: "La stratégie BYOK", byok_desc: "Vous possédez déjà des clés API OpenAI, Anthropic ou Google ? Connectez-les directement à Memento. Utilisez l'IA sans limites de crédits imposées, en payant uniquement ce que vous consommez chez votre fournisseur favori.", byok_col1_title: "Pas de lock-in", byok_col1_desc: "Changez de fournisseur en 1 clic.", byok_col2_title: "Coûts optimisés", byok_col2_desc: "Payez le prix direct API.", byok_config_title: "Config Multi-Fournisseurs", final_cta_title: "Prêt à libérer votre", final_cta_title_italic: "plein potentiel ?", final_cta_desc: "Rejoignez des milliers de chercheurs, designers et penseurs qui utilisent déjà Memento pour construire leur futur.", final_cta_button: "Lancer Memento", eco_badge: "Écosystème Memento", eco_title_1: "Traduisez vos documents.", eco_title_2: "Formatage préservé.", eco_desc: "Le seul traducteur qui préserve les graphiques, tables des matières, formes et en-têtes — exactement tels qu'ils étaient. Prolongez l'intelligence de vos notes à l'international.", eco_button: "Découvrir le traducteur", eco_original: "original.pdf", eco_translated: "translated.pdf", eco_status: "Structure Intacte ✓", footer_desc: "Le second cerveau amplifié par l'IA. Pensé pour les esprits créatifs.", footer_col1_title: "Product", footer_col2_title: "Community", footer_col3_title: "Legal", workspace_title_editor: "Éditeur de Notes", workspace_title_graph: "Graphe Spatial", workspace_title_agents: "Enrichissement IA", workspace_title_reviews: "Révisions Actives", workspace_title_history: "Snapshots Temporels", workspace_notes_available: "Documents Locaux", workspace_new_doc: "+ Créer Note", workspace_local_reading: "Lecture du stockage local...", workspace_graph_map_title: "Cartographie Interactive de Formes", workspace_graph_map_desc: "Vos écrits se connectent automatiquement selon leur signification profonde.", workspace_graph_connected: "6 notes interconnectées", workspace_graph_status: "Structure Sémantique : Optimale ✓", workspace_agents_title: "Système Cognitif d'Agents", workspace_active_prompt: "TERMES ACTIFS DE RECHERCHE :", workspace_rag_active: "RAG sémantique actif :", workspace_consigne: "Consigne d'exploration :", workspace_secure_chat: "SÉCURITÉ : CRYPTAGE SYSTÉMATIQUE", workspace_processor: "SYSTÈME : BYOK ACTIF", workspace_recall_title: "Répétition Espacée active", workspace_recall_desc: "Algorithme actif convertissant automatiquement vos documents en cartes mémoires réactives.", workspace_show_answer: "Afficher la réponse", workspace_correct_answer: "Réponse attendue :", workspace_study_memory: "Algorithme SuperMemo actif (SM2)", workspace_snapshot_title: "Versionning & Sauvegardes", workspace_snapshot_desc: "Enregistrement continu. Restaurez n'importe quel état textuel à la seconde près.", workspace_restore: "Restaurer", workspace_state_saved: "Sauvegarde locale : Active" }; const EN: LangDict = { nav_features: "Features", nav_agents: "AI Agents", nav_brainstorm: "Brainstorm", nav_pricing: "Pricing", nav_architecture: "Architecture", nav_login: "Login", nav_start: "Get Started", hero_badge: "Amplified by Artificial Intelligence", hero_title_1: "Your second brain,", hero_title_italic: "finally amplified.", hero_desc: "Memento is not just a typical note-taking tool. It is an intelligent ecosystem that connects, analyzes, and scales your thoughts in real time with 6 autonomous AI agents and vector semantic search.", hero_cta_start: "Sign Up Now", hero_cta_features: "View Features", floating_card_1: "Memory Echo", floating_card_1_text: '"Connection detected with your sustainable design project from March 2024..."', floating_card_2: "Brainstorm Live", floating_card_2_text: "+12 ideas generated", floating_card_2_desc: "Simultaneous active users", features_badge: "AI Capabilities", features_title_1: "Fluid intelligence,", features_title_2: "integrated into every word.", features_subtitle: "Memento orchestrates your thoughts through a multi-provider landscape.", f1_title: "Semantic Search", f1_desc: "Stop searching by keywords. Retrieve by concept. Our hybrid Vector + FTS engine understands the core semantic context behind your logs.", f2_title: "Contextual RAG Chat", f2_desc: "Converse with your knowledge database. Our autonomous agents digest your notes, scan the web, and construct precise, cited answers.", f3_title: "Augmented Writing", f3_desc: "Rephrasing, title suggestions, automatic taxonomy tagging, and summaries. The AI acts passively in the background.", agents_badge: "Autonomous Agents", agents_title: "Delegate complex workflows.", agents_subtitle: "6 specialized AI agents to automate your reference parsing, summaries, and instant pitch creation.", agent_scraper_desc: "Scrapes assets and URLs, parses RSS feeds, and builds elegant visual summary cards with smart image placement.", agent_researcher_desc: "Formulates deep search queries, surveys global web databases, and writes structured synthesis research drafts.", agent_slide_desc: "Converts your raw notebooks into clean, structured PowerPoint templates or interactive HTML slide components.", agent_monitor_desc: "Scans your folders persistently to capture structural changes, semantic triggers, and new dynamic patterns.", agent_diagram_desc: "Extracts ideas into geometric flowcharts or Excalidraw-like mindmaps with perfect automatic layouts.", agent_custom_desc: "Easily set custom system prompts, custom agents, distinct operational scopes, and data access limits.", brain_badge: "Insight Waves", brain_title: "Radial brainstorming in real time.", brain_item1_title: "Multi-Wave Expansion", brain_item1_desc: "Generates variations, analogies, and subsequent disruptions. The model challenges your initial hypothesis systematically.", brain_item2_title: "Cooperative Canvas", brain_item2_desc: "Live multi-user cursor tracking, active AI avatars, and smooth real-time node resizing and arrangement.", brain_item3_title: "Semantic Export", brain_item3_desc: "Seamlessly translate an entire radial brainstorm draft into typed markdown and structures with a single click.", brain_node1_title: "DISRUPTION", brain_node1_text: "Modular Architecture 2.0", brain_node2_title: "ANALOGY", brain_node2_text: "The tide cycle", tech_badge: "Open Providers", tech_title: "Bring your own model.", tech_tier1_label: "Custom Tags", tech_tier1_desc: "Each option is independently configurable with any LLM.", tech_tier2_label: "Vector Embeddings", tech_tier2_desc: "Each option is independently configurable with any LLM.", tech_tier3_label: "Semantic RAG Engine", tech_tier3_desc: "Each option is independently configurable with any LLM.", price_badge: "Flexible Tiers", price_title: "Select your cognitive scale.", price_desc: "Scalable options for creative builders, starting from solo thinkers up to large modern agencies.", price_monthly: "Monthly", price_annual: "Annual", price_popular: "Most Popular", price_free_name: "Basic", price_free_price: "Free", price_free_desc: "Get started with the foundational magic of Memento.", price_pro_name: "Pro", price_pro_price: "$9.90", price_pro_desc: "For consultants, writers, and advanced researchers.", price_biz_name: "Business", price_biz_price: "$29.90", price_biz_desc: "For corporate groups, publishers, and product managers.", price_ent_name: "Enterprise", price_ent_price: "$49.90", price_ent_desc: "Secured enterprise organizational memory layers.", price_period_month: "/month", price_period_annual: "/month, billed annually", price_cta_start: "Get Started", price_cta_pro: "Upgrade to Pro", price_cta_biz: "Choose Business", price_cta_ent: "Contact Sales", price_free_features: ["100 Notes max", "3 Notebooks", "50 IA credits (Lifetime)", "Semantic search included", "7-day history backup"], price_pro_features: ["Unlimited Notes", "BYOK (OpenAI/Anthropic)", "200 semantic lookups", "Agents (12 runs/month)", "30-day timeline rollback", "Premium Support"], price_biz_features: ["10 Seats included", "BYOK (13 active models)", "1000 semantic lookups", "Agents (60 runs/month)", "Unlimited Brainstorm", "Full custom APIs Access"], price_ent_features: ["Everything in Business", "Unlimited Agent runtimes", "Identity SSO & SAML logs", "Integrity Logs & local SLA", "Dedicated team channel", "Live technical onboarding"], byok_badge: "Open Technology", byok_title: "The BYOK Strategy", byok_desc: "Already have OpenAI, Anthropic, or Google API credentials? Connect them directly to save subscription costs. Run models without arbitrary platform caps, paying only for raw API usage.", byok_col1_title: "No lock-in", byok_col1_desc: "Swap models or endpoints instantly with a single toggle.", byok_col2_title: "Cost reduction", byok_col2_desc: "Pay standard direct wholesale prices.", byok_config_title: "Multi-Provider Schema", final_cta_title: "Ready to expand your", final_cta_title_italic: "second organic brain?", final_cta_desc: "Join thousands of academics, product architects, and minimalist designers scaling their insights with Memento.", final_cta_button: "Launch Memento", eco_badge: "Memento Ecosystem", eco_title_1: "Local document translation.", eco_title_2: "Format intact.", eco_desc: "The only translator preserving graphs, nested hierarchies, vectors, alignments, and titles exactly as you drew them. Take your local notes globally.", eco_button: "Explore Translator", eco_original: "original.pdf", eco_translated: "translated.pdf", eco_status: "Structure Preserved ✓", footer_desc: "The ultimate AI-empowered second brain. Designed for mindful thinkers.", footer_col1_title: "Product", footer_col2_title: "Community", footer_col3_title: "Legal", workspace_title_editor: "Note Editor", workspace_title_graph: "Knowledge Graph", workspace_title_agents: "AI Enrichment", workspace_title_reviews: "Active Recall", workspace_title_history: "Time Snapshots", workspace_notes_available: "Local Documents", workspace_new_doc: "+ Create Note", workspace_local_reading: "Reading local storage...", workspace_graph_map_title: "Interactive Space Mapping", workspace_graph_map_desc: "Your nodes attach automatically as semantic similarity is detected.", workspace_graph_connected: "6 interconnected links", workspace_graph_status: "Semantic Structure: Optimal ✓", workspace_agents_title: "Cognitive Agents System", workspace_active_prompt: "ACTIVE EXPLORATION TERMS:", workspace_rag_active: "Semantic RAG active:", workspace_consigne: "User instructions:", workspace_secure_chat: "SECURITY: LOCAL SYMMETRIC ENCRYPTION", workspace_processor: "PROCESSOR: BYOK COMPLIANT", workspace_recall_title: "Active Spaced-Repetition Recall", workspace_recall_desc: "Active recall algorithm that converts your writings into responsive flashcards dynamically.", workspace_show_answer: "Show Answer", workspace_correct_answer: "Correct answer:", workspace_study_memory: "Active SuperMemo (SM2) engine", workspace_snapshot_title: "Timeline Snapshots & Backups", workspace_snapshot_desc: "Continuous backup checkpoints. Revert any document to an earlier state instantly.", workspace_restore: "Revert", workspace_state_saved: "Continuous local backup: Active" }; const JA: LangDict = { nav_features: "機能紹介", nav_agents: "自律エージェント", nav_brainstorm: "ブレスト", nav_pricing: "料金プラン", nav_architecture: "システム構成", nav_login: "ログイン", nav_start: "新規登録", hero_badge: "人工知能による拡張済システム", hero_title_1: "あなたの第二の脳を、", hero_title_italic: "ついに具現化する。", hero_desc: "Memento（モメント）は単なるメモ帳ではありません。6体の専門AIエージェント、ハイブリッドベクトル検索を搭載し、リアルタイムで知識の接続、整理、展開を実行する知能エコシステムです。", hero_cta_start: "無料で体験する", hero_cta_features: "機能一覧を見る", floating_card_1: "メモリ・エコー", floating_card_1_text: "「2024年3月のサスタナブルデザインの草稿と関連性を感知しました...」", floating_card_2: "ライブ・ブレスト", floating_card_2_text: "+12件のアイデア創出", floating_card_2_desc: "同時編集中のアクティブユーザー", features_badge: "先進AI性能", features_title_1: "記述に完全に融合する、", features_title_2: "インテリジェンス。", features_subtitle: "Mementoは、複数のLLMプロバイダを容易に構成可能な適応性を備えています。", f1_title: "セマンティック意味検索", f1_desc: "単なるキーワード検索はもう不要。記述された文脈、概念そのものを捉えて、過去の関連メモを一瞬で検索します。", f2_title: "コンテキスト適合RAG対話", f2_desc: "自らのナレッジベースに直接質問。AIエージェントがメモの内容、Web、ドキュメントを統合して高精度な回答を構築します。", f3_title: "筆記自動拡張", f3_desc: "言い換え提案、タイトル自動補完、自動メタタグ分類、要約作成。AIがバックグラウンドで思考を強力に支援します。", agents_badge: "自律AIエージェント", agents_title: "面倒な調査、作成を委託。", agents_subtitle: "Web調査、プレゼン資料構成、自動要約など、6種類の特化型エージェントに自律実行させることが可能です。", agent_scraper_desc: "URLを解析し、RSSフィードから最新ニュースを要約。イメージ画像の最適な配置まで自律実行します。", agent_researcher_desc: "深層検索クエリを作成し、グローバルWeb上のリソースから構造化されたリサーチ報告書を下書きします。", agent_slide_desc: "作成したメモやアウトラインから、PowerPointプレゼン用プロット、またはHTMLのスライドを一括生成します。", agent_monitor_desc: "ノートブックを常時モニタリング。新しいトレンドの予兆や興味深い相関関係を可視化します。", agent_diagram_desc: "アイデアをExcalidraw形式のフローチャートやマインドマップ、関連図に美しく自動レイアウトします。", agent_custom_desc: "独自の役割定義（プロンプト）、稼働スコープ、データアクセス制限をカスタマイズして動作させることができます。", brain_badge: "思考の拡散", brain_title: "リアルタイムなマインドマッピング。", brain_item1_title: "多重ウェーブ連想", brain_item1_desc: "「類似」「応用」「破壊」という異なる深度でAIがアイデアを分析し、最初の着想を多角的に突き詰めます。", brain_item2_title: "コラボレーション機能", brain_item2_desc: "リアルタイムでのポインター追跡、AIアバターとの同時ブレスト、円滑なノード拡大・自動整列システム。", brain_item3_title: "構造化エクスポート", brain_item3_desc: "ブレストキャンバス上に並んだ多数 Hideアイデア群を、構造化されたMarkdown形式へ1タップで変換します。", brain_node1_title: "破壊的アイデア", brain_node1_text: "モジュール式アーキテクチャ 2.0", brain_node2_title: "自然の相似比", brain_node2_text: "潮汐の周期モデル", tech_badge: "マルチ・プロバイダ対応", tech_title: "自分自身のAPIキーを連携。", tech_tier1_label: "メタ分類", tech_tier1_desc: "利用したいモデル、設定のすべてを個別に自由にバインドしてコントロールできます。", tech_tier2_label: "意味ベクトル化", tech_tier2_desc: "利用したいモデル、設定のすべてを個別に自由にバインドしてコントロールできます。", tech_tier3_label: "意味的RAG", tech_tier3_desc: "利用したいモデル、設定 ofすべてを個別に自由にバインドしてコントロールできます。", price_badge: "料金・プラン", price_title: "求める思考スケールに応じて選択。", price_desc: "個人での思考整理、創作活動からチーム、グローバル企業での知能共有まで対応するプラン設計。", price_monthly: "月払い", price_annual: "年払い (お得値)", price_popular: "人気プラン", price_free_name: "ベーシック", price_free_price: "無料", price_free_desc: "Mementoの見事な基礎機能をすぐにお試しいただけます。", price_pro_name: "プロ", price_pro_price: "¥1,480", price_pro_desc: "ライター、学習者、研究者、コンサルタントの方へ最適。", price_biz_name: "ビジネス", price_biz_price: "¥4,480", price_biz_desc: "複数のコラボレーター連携やマインドマップ、高度API利用が必要なチームへ。", price_ent_name: "エンタープライズ", price_ent_price: "お問い合わせ", price_ent_desc: "セキュアな組織知識データレイク、S/MIME、SSO、個別SLA管理。", price_period_month: "/月", price_period_annual: "/月 (年一括のご請求)", price_cta_start: "今すぐ開始", price_cta_pro: "プロへアップグレード", price_cta_biz: "ビジネス選択", price_cta_ent: "営業にお問い合わせ", price_free_features: ["最大100ノート", "3つのノートブック制限", "50回の初期AIクレジット", "セマンティック意味検索", "7日間の履歴自動バックアップ"], price_pro_features: ["作成メモ数無制限", "独自のAPIキー連携 (BYOK)", "200回のセマンティック意味検索", "AIエージェント (月12回起動)", "30日分の編集履歴ロールバック", "優先的な技術サポート"], price_biz_features: ["最大10人のコラボレーター連携", "13種のLLMモデル切替", "1000回の意味検索/月", "AIエージェント (月60回起動)", "ブレスト回数に制限なし", "完全なAPI接続アクセス"], price_ent_features: ["ビジネスプランの全機能", "AIエージェント起動無制限", "SAML/SSO シングルサインオン", "アクセス監査ログ & 専用SLA対応", "24時間年中無休の個別サポート", "オンボーディング技術教育支援"], byok_badge: "オープン構想", byok_title: "APIキー持ち込み（BYOK）", byok_desc: "OpenAI、Anthropic、Googleなどの既存APIキーをお持ちですか？Mementoに直接バインドすれば、従量課金のみで任意の極限モデルを完全に制限なしで無制限にご利用いただけます。", byok_col1_title: "ロックイン縛りゼロ", byok_col1_desc: "好みのプロバイダやエンジンへ一瞬でコンフィグを切り替えられます。", byok_col2_title: "中抜きマージン排除", byok_col2_desc: "プロバイダ公式APIの卸売価格そのままの最低価格で使用できます。", byok_config_title: "構成プロバイダ詳細", final_cta_title: "あなたの第二の有機的な脳を", final_cta_title_italic: "今すぐ起動させましょう。", final_cta_desc: "最先端デザインと人工知能を極限まで融合させたMemento。すでに数千人のアカデミアやデザイナーが思考のスケールを始めています。", final_cta_button: "Mementoを起動する", eco_badge: "Mementoエコシステム", eco_title_1: "ドキュメントローカル翻訳。", eco_title_2: "完璧な構造維持。", eco_desc: "グラフ、入れ子、アライメント、レイアウト、タイトル座標のすべてを完璧に保持したまま、言語領域を変換します。アイデアを瞬時にグローバルへ。", eco_button: "翻訳機を起動する", eco_original: "original.pdf", eco_translated: "translated.pdf", eco_status: "構造の一貫性を確認済 ✓", footer_desc: "インテリジェントに調律された、あなたの第二の脳。豊かな思考者に捧ぐ。", footer_col1_title: "製品", footer_col2_title: "公式コミュニティ", footer_col3_title: "規約・リーガル", workspace_title_editor: "エディター", workspace_title_graph: "知識グラフ", workspace_title_agents: "AI拡張機能", workspace_title_reviews: "間隔反復学習", workspace_title_history: "履歴復元", workspace_notes_available: "手稿・ノート一覧", workspace_new_doc: "+ メモ新規作成", workspace_local_reading: "ローカルDBを読み込み中...", workspace_graph_map_title: "インタラクティブ概念座標", workspace_graph_map_desc: "異なるメモ間の意味的類似度に基づいて、自動でリンク線が投影されます。", workspace_graph_connected: "6件の関連リンク", workspace_graph_status: "意味構造：最高ランク ✓", workspace_agents_title: "自律型エージェント(4)", workspace_active_prompt: "探査キーワード :", workspace_rag_active: "RAGセマンティクス機能中 :", workspace_consigne: "ユーザー指示要約 :", workspace_secure_chat: "暗号化：ローカル内対称鍵で安全に保管", workspace_processor: "システム：モデルキー持込対応", workspace_recall_title: "効率的な間隔反復フラッシュカード", workspace_recall_desc: "蓄積されたナレッジから自動テストを生成。定着を科学的にサポート。", workspace_show_answer: "解答を表示する", workspace_correct_answer: "正解の解説 :", workspace_study_memory: "SuperMemo (SM2) アルゴリズム有効", workspace_snapshot_title: "履歴バージョン管理", workspace_snapshot_desc: "すべての編集イベントが秒単位で自動保存されます。いつでも過去の状態へ復元可能。", workspace_restore: "適用する", workspace_state_saved: "手稿保護：ローカル常時保管中" }; interface LandingPageProps { onEnter: () => void; onLogin: () => void; onRegister: () => void; onSwitchVersion: (v: 'v1' | 'v2' | 'v3') => void; } export const LandingPage: React.FC = ({ onEnter, onLogin, onRegister, onSwitchVersion }) => { const [billingInterval, setBillingInterval] = useState<'monthly' | 'annual'>('monthly'); const [lang, setLang] = useState<'fr' | 'en' | 'ja'>('fr'); const [showI18nKeys, setShowI18nKeys] = useState(false); const [activeTab, setActiveTab] = useState<'editor' | 'graph' | 'agents' | 'reviews' | 'history'>('editor'); const [activeDemoIdx, setActiveDemoIdx] = useState(0); const [simulateState, setSimulateState] = useState<'searching' | 'writing' | 'idle' | 'complete'>('idle'); const [displayText, setDisplayText] = useState(''); const [aiSidebarTab, setAiSidebarTab] = useState<'explore' | 'discussion' | 'relations'>('explore'); const [customPrompt, setCustomPrompt] = useState(''); const [showFlashcardAnswer, setShowFlashcardAnswer] = useState(false); const [flashcardIdx, setFlashcardIdx] = useState(0); const [editorMode, setEditorMode] = useState<'wysiwyg' | 'markdown' | 'html'>('wysiwyg'); const [zoomedBlockId, setZoomedBlockId] = useState(null); const [dbViewMode, setDbViewMode] = useState<'table' | 'card'>('card'); const [newAuthorName, setNewAuthorName] = useState(""); const [newBookTitle, setNewBookTitle] = useState(""); const [dbAuthors, setDbAuthors] = useState([ { id: 'a1', name: "Jules Verne", works: ["Twenty Thousand Leagues Under The Sea"], count: 1 }, { id: 'a2', name: "Liu Cixin", works: ["The Three-Body Problem", "The Wandering Earth"], count: 2 } ]); const [dbBooks, setDbBooks] = useState([ { id: 'b1', title: "Twenty Thousand Leagues Under The Sea", author: "Jules Verne", cover: "https://images.unsplash.com/photo-1543002588-bfa74002ed7e?auto=format&fit=crop&q=80&w=200&h=300", tag: "Science fiction" }, { id: 'b2', title: "The Three-Body Problem", author: "Liu Cixin", cover: "https://images.unsplash.com/photo-1512820790803-83ca734da794?auto=format&fit=crop&q=80&w=200&h=300", tag: "Science fiction" }, { id: 'b3', title: "The Wandering Earth", author: "Liu Cixin", cover: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=200&h=300", tag: "Science fiction" } ]); const realNotes = [ { id: 'n1', title: "H2 Relation and Rollup", carnet: "Database & Books", date: "26 Oct 2024", tags: ["Relational", "Rollup", "Blocks"], content: `# H2 Relation and Rollup\n\nCe document démontre la puissance du modèle relationnel de Memento.\n\n## 1. Modèle Relationnel\nVous pouvez lier des auteurs à leurs œuvres pour comptabiliser dynamiquement les entrées grâce à notre système de Rollups sémantiques.`, stats: { words: 124, lines: 18, equations: 1, graphs: 4, images: 3 } }, { id: 'n2', title: "Block-Style Math & Formulas", carnet: "Mathematical & Geometrical", date: "24 Oct 2024", tags: ["LaTeX", "Gantt", "Flowcharts"], content: `# Block-Style Math & Formulas\n\nMemento supporte les équations complexes de type LaTeX et les diagrammes sémantiques directement intégrés sous forme de blocs.\n\n$$\\Phi = \\frac{1 + \\sqrt{5}}{2}$$\n\n$$\\Delta Carbon = E_{béton} - E_{CLT} = 410 \\text{ kg } CO_2/m^3$$`, stats: { words: 91, lines: 12, equations: 2, graphs: 4, images: 1 } }, { id: 'n3', title: "Large Document Virtualization", carnet: "Performance Model", date: "22 Oct 2024", tags: ["Virtualization", "Zoom-In"], content: `# Large Document Virtualization\n\nLe moteur de rendu WYSIWYG traite de longs documents (jusqu'à 1 000 000 de mots) sans aucune baisse de performance grâce au chargement différé des blocs de contenu.\n\n## Zoom-In de bloc\nIsoler et grossir un bloc spécifique pour vous concentrer sur la rédaction.`, stats: { words: 1542, lines: 80, equations: 0, graphs: 0, images: 0 } } ]; const simulatedFlashcards = [ { id: 'f1', question: lang === 'fr' ? "Quel rôle joue le Nombre d'Or (1.618) dans les structures d'architecture ?" : lang === 'ja' ? "建築構造において黄金比（1.618）はどのような役割を果たしますか？" : "What role does the Golden Ratio (1.618) play in architectural structures?", answer: lang === 'fr' ? "Il sert à définir des proportions optimales de fenêtrage et de colonnes, créant une harmonie visuelle naturelle pour le cortex occipital." : lang === 'ja' ? "サッシや柱の最適な比率を決定することで、後頭葉に自然な視覚的調和をもたらします。" : "It serves to define optimal proportions of windowing and columns, creating a natural visual harmony for the occipital cortex." }, { id: 'f2', question: lang === 'fr' ? "Pourquoi privilégier le bois CLT (lamellé-croisé) au béton armé ?" : lang === 'ja' ? "なぜ鉄筋コンクリートよりもCLT木材を優先するのですか？" : "Why prioritize CLT (cross-laminated timber) over reinforced concrete?", answer: lang === 'fr' ? "Pour son stockage actif de CO2 à long terme, sa légèreté combinée à sa résistance sismique et coupe-feu naturelle." : lang === 'ja' ? "長期的な炭素固定、軽量性と耐震性、そして優れた天然の防火性能を併せ持つためです。" : "For its active long-term CO2 sequestration, lightweight properties combined with superior seismic and natural fire resistance." } ]; const triggerSimulation = (index: number, overrideText?: string) => { setActiveDemoIdx(index); setSimulateState('searching'); setDisplayText(''); setShowFlashcardAnswer(false); if (index === 0) setAiSidebarTab('explore'); if (index === 1) setAiSidebarTab('relations'); if (index === 2) setAiSidebarTab('discussion'); const sourceText = overrideText || (index === -1 ? "" : realNotes[index].content); const length = sourceText.length; let curr = 0; setTimeout(() => { setSimulateState('writing'); const timer = setInterval(() => { curr += 18; if (curr >= length) { setDisplayText(sourceText); setSimulateState('complete'); clearInterval(timer); } else { setDisplayText(sourceText.substring(0, curr)); } }, 15); }, 800); }; const handleCustomSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!customPrompt.trim()) return; const summaryContent = `# Synthèse : ${customPrompt}\n\nRecherche sémantique connectée.\n\n$$\\Phi = \\lim_{n \\to \\infty} \\frac{F_{n+1}}{F_n}$$\n\n* Intégration d'éléments croisés complets.\n* Index de concordance optimale validé.`; triggerSimulation(-1, summaryContent); }; const handleAddDbEntry = (e: React.FormEvent) => { e.preventDefault(); if (!newAuthorName.trim() || !newBookTitle.trim()) return; const authorExists = dbAuthors.some(a => a.name.toLowerCase() === newAuthorName.toLowerCase()); if (!authorExists) { setDbAuthors(prev => [...prev, { id: 'a_' + Date.now(), name: newAuthorName, works: [newBookTitle], count: 1 }]); } else { setDbAuthors(prev => prev.map(a => { if (a.name.toLowerCase() === newAuthorName.toLowerCase()) { return { ...a, works: [...a.works, newBookTitle] }; } return a; })); } setDbBooks(prev => [...prev, { id: 'b_' + Date.now(), title: newBookTitle, author: newAuthorName, cover: "https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=200&h=300", tag: "Science fiction" }]); setNewAuthorName(""); setNewBookTitle(""); }; useEffect(() => { triggerSimulation(0); }, []); const dicts = { fr: FR, en: EN, ja: JA }; const currentDict = dicts[lang]; // Helper function to translate string keys with styled brackets mode support const t = (key: keyof LangDict, isPlain: boolean = false) => { if (showI18nKeys) { if (isPlain) return `{{${key}}}`; return ( {`{${key}}`} ); } const val = currentDict[key]; return typeof val === 'string' ? val : ''; }; const tArray = (key: 'price_free_features' | 'price_pro_features' | 'price_biz_features' | 'price_ent_features'): string[] => { if (showI18nKeys) { return Array(5).fill(`{${key}}`); } return currentDict[key]; }; return (
{/* Navigation */} {/* Hero Section */}
{/* Background Decorative Elements */}
{t('hero_badge')}

{t('hero_title_1')}
{t('hero_title_italic')}

{t('hero_desc')}

{t('hero_cta_features')}
{/* Integrated Dynamic Workspace Player - Savior of V1! */}
{/* Top Bar Indicators */}
MOMENTO-SANDBOX-LAYER
{t('workspace_notes_available')} : {activeDemoIdx === -1 ? `Custom` : `${activeDemoIdx + 1}/3`}
{/* Central Player Frame */}
{/* Left Active Controls Rail */}
{/* Main Tab Screen Area */}
{/* 1. EDITOR SCREEN */} {activeTab === 'editor' && ( {/* Notes selector drawer */}
{t('workspace_notes_available')}
{realNotes.map((note, idx) => ( ))}
{/* Note workspace page content */}
{/* Rich Editor Mode Switcher Panel */}
{lang === 'fr' ? "Rendu d'Édition" : lang === 'ja' ? "書き込み・表示形式" : "Editor Rendering Modality"} :
{[ { mode: 'wysiwyg', label: lang === 'fr' ? 'Block WYSIWYG (Préféré)' : lang === 'ja' ? 'WYSIWYGブロック' : 'Block WYSIWYG' }, { mode: 'markdown', label: 'Raw Markdown' }, { mode: 'html', label: 'HTML Map' } ].map((m) => ( ))}
{/* Breadcrumbs / Document Info */}
{activeDemoIdx === -1 ? "SYNTHÈSE" : realNotes[activeDemoIdx].carnet} {activeDemoIdx === -1 ? "ACTIF" : realNotes[activeDemoIdx].date}

{activeDemoIdx === -1 ? (lang === 'fr' ? "Synthèse de recherche" : lang === 'ja' ? "研究合成メモ" : "Research Synthesis") : realNotes[activeDemoIdx].title} {zoomedBlockId && ( Zoomed Focus )}

{(activeDemoIdx === -1 ? ["Custom"] : realNotes[activeDemoIdx].tags).map((tag, i) => ( {tag} ))}
{realNotes[activeDemoIdx].stats.words} {lang === 'fr' ? "mots" : lang === 'ja' ? "語" : "words"} · {realNotes[activeDemoIdx].stats.lines} {lang === 'fr' ? "blocs" : lang === 'ja' ? "ブロック" : "blocks"}
{simulateState === 'searching' && (

{t('workspace_local_reading')}

)} {(simulateState === 'writing' || simulateState === 'complete') && (
{/* A. WYSIWYG BLOCK MODE */} {editorMode === 'wysiwyg' && (
{/* Zoomed Block Mode Warning Indicator */} {zoomedBlockId && (
🔎 {lang === 'fr' ? "Sous-bloc isolé en édition zoomée" : lang === 'ja' ? "分離した1ブロックを全画面ズーム編集中" : "1 block isolated under deep zoom-in focus"}
)} {/* NOTE 1: H2 RELATION AND ROLLUP */} {activeDemoIdx === 0 && (
{(!zoomedBlockId || zoomedBlockId === 'b_desc') && (

{lang === 'fr' ? "Ce document démontre le lien sémantique dynamique entre différentes entités de bases de données grâce à un système de métadonnées et de rollups de type \"Count All\" (comptage de relations)." : lang === 'ja' ? "本資料では、スキーマ定義されたデータベース群が、関連づけ（Relation）と、何件あるかの集計（Rollup - Count All機能）によって有機的につながる様子を再現しています。" : "This document demonstrates the dynamic semantic connection between different database entities thanks to metadata structures and 'Count All' relational rollups."}

)} {(!zoomedBlockId || zoomedBlockId === 'b_database') && (
{/* Notion-style database inner switcher header */}
📚 {lang === 'fr' ? "Base d'Auteurs & Œuvres" : lang === 'ja' ? "著者・作品関係データベース" : "Authors & Publications Relation"}
{/* TABLE MODE VIEW */} {dbViewMode === 'table' ? (
{dbAuthors.map((auth) => { const authorBooks = dbBooks.filter(b => b.author.toLowerCase() === auth.name.toLowerCase()); const worksStr = authorBooks.map(b => b.title).join(', ') || 'No linked works'; return ( ); })}
🔑 Author / Auteur ↗ Works / Œuvres ⧉ Works count (Rollup)
{auth.name} {worksStr} {authorBooks.length}
) : ( /* CARD MODE VIEW */
{dbBooks.map((book) => (
{book.title}

{book.title}

{book.author} {book.tag}
))}
➕ Card Entry
)} {/* Dynamic simulation insertion form! */}
{lang === 'fr' ? "Ajouter un livre :" : lang === 'ja' ? "作品インライン登録 :" : "Link novel inline:"} setNewAuthorName(e.target.value)} placeholder={lang === 'fr' ? "Auteur (ex: Asimov)" : lang === 'ja' ? "著者 (例: アイザック・アシモフ)" : "Author Name"} className="bg-white text-[9px] border px-2 py-1 rounded text-ink font-mono focus:border-accent outline-none flex-1 min-w-[100px]" /> setNewBookTitle(e.target.value)} placeholder={lang === 'fr' ? "Titre (ex: Fondation)" : lang === 'ja' ? "作品名 (例: ファウンデーション)" : "Novel Title"} className="bg-white text-[9px] border px-2 py-1 rounded text-ink font-mono focus:border-accent outline-none flex-1 min-w-[110px]" />

{lang === 'fr' ? "In the Author database, the Works count is summarized and statistics are made on its Works, and the statistics method is Count all." : lang === 'ja' ? "In the Author database, the Works count is summarized and statistics are made on its Works, and the statistics method is Count all." : "In the Author database, the Works count is summarized and statistics are made on its Works, and the statistics method is Count all."}

)} {(!zoomedBlockId || zoomedBlockId === 'b_templates') && (

{lang === 'fr' ? "Gabarits de données" : lang === 'ja' ? "テンプレート構文" : "Template Syntax"}

{lang === 'fr' ? "Les gabarits peuvent accéder, calculer et résoudre des données croisées d'un même lot via des formules dynamiques :" : lang === 'ja' ? "テンプレートは、同一項目の関連データをアクセス・計算、独自にレンダリングする記法を導入可能です。" : "Templates can access, calculate and render the values of other fields in the same piece of data through the syntax introduced in Template snippet:"}

• {lang === 'fr' ? "Utilisez " : lang === 'ja' ? "使用法 " : "Use "}.action{`{ .field }`} {lang === 'fr' ? "pour accéder aux propriétés globales." : lang === 'ja' ? "でビュー情報表示。" : "to access view properties."}
• {lang === 'fr' ? "Utilisez " : lang === 'ja' ? "使用法 " : "Use "}.action{`{ index . "custom-xxx" }`} {lang === 'fr' ? "pour le ciblage de bloc sémantique." : lang === 'ja' ? "でカスタムメタデータ展開。" : "to access content block custom attributes."}
• {lang === 'fr' ? "Gabarit résolu de démonstration : " : lang === 'ja' ? "計算評価シミュレーション : " : "Evaluated bills mockup snippet: "} .action{`{ compute sum of Books }`} = {dbBooks.length} items
)}
)} {/* NOTE 2: BLOCK-STYLE MATH & FORMULAS */} {activeDemoIdx === 1 && (
{(!zoomedBlockId || zoomedBlockId === 'b2_mathdesc') && (

{lang === 'fr' ? "Memento intègre des équations mathématiques pures et des diagrammes sémantiques ou Gantt de manière entièrement nativisée sous forme de blocs WYSIWYG." : lang === 'ja' ? "Mementoは本格的なLaTeX数式および概念関係フローチャートをWYSIWYGブロックとして極めて滑らかに表示・調整可能です。" : "Memento integrates highly stylized Mathematical LaTeX formulas and semantic/Gantt flowcharts directly as interactive WYSIWYG blocks."}

)} {(!zoomedBlockId || zoomedBlockId === 'b2_equations') && (
📐 {lang === 'fr' ? "Module d'Équations Mathématiques" : lang === 'ja' ? "インラインLaTeXレンダラー" : "Mathematical Formulas Equation Block"}
LaTex code inputs:
{"$$\\Phi = \\frac{1 + \\sqrt{5}}{2}$$"}
{"$$\\Delta Carbon = E - H = 410$$"}
Live Math rendering:
Φ = 1.61803398... Rollup Equation Evaluated ✓
)} {(!zoomedBlockId || zoomedBlockId === 'b2_flowchart') && (
📊 {lang === 'fr' ? "Diagramme Temporel / Gantt de Projet" : lang === 'ja' ? "ガントチャート・タイムラインブロック" : "Flowchart & Project Gantt Block"}
{/* Mini vector flowchart */}
{[ { task: "Research & Relations", progress: "100%", width: "w-full", color: "bg-emerald-500", date: "Oct 1 - Oct 5" }, { task: "SuperMemo Sync Engine", progress: "80%", width: "w-4/5", color: "bg-accent", date: "Oct 6 - Oct 12" }, { task: "Multi-Million Word DB", progress: "40%", width: "w-2/5", color: "bg-amber-500", date: "Oct 13 - Dec 1" }, ].map((bar, i) => (
{bar.task}
{bar.date}
))}
)}
)} {/* NOTE 3: LARGE DOCUMENT VIRTUALIZATION */} {activeDemoIdx === 2 && (
{(!zoomedBlockId || zoomedBlockId === 'b3_intro') && (

{lang === 'fr' ? "Le noyau de Memento est conçu pour gérer d'immenses documents textuels (plus d'un million de mots) avec une latence quasi nulle en virtualisant les sous-structures." : lang === 'ja' ? "Mementoの超高速仮想ドキュメントレンダリングは、合計100万語を越える膨大な書籍や論文データベースでも、表示遅延なく高速に動作・ブロック分割制御可能です。" : "Its lightweight framework allows seamlessly displaying and editing files sizing up to 1,000,000 words without single-frame drops thanks to block virtualization."}

)} {(!zoomedBlockId || zoomedBlockId === 'b3_stat') && (
⚡
{lang === 'fr' ? "Statistiques de Virtualisation" : lang === 'ja' ? "メモリ仮想ブロック稼働状態" : "Million-Word Scale Buffer Monitor"} RAM overhead: 0.12 MB / Render: 12ms (SuperMemo SM2 active in background)
1,542,391 words
)} {(!zoomedBlockId || zoomedBlockId === 'b3_zoomin_demo') && (
🔎 {lang === 'fr' ? "Démonstration Interactive Zoom-In" : lang === 'ja' ? "ブロック・フォーカスズーム実演" : "Block Zoom-In Interactive Focus Demonstration"}

{lang === 'fr' ? "Survolez n'importe quel bloc ci-dessus ou cliquez sur la loupe 🔎 pour faire l'expérience du Zoom-In de bloc, permettant d'isoler un unique paragraphe pour une rédaction concentrée." : lang === 'ja' ? "上記の段落にホバーするか、虫眼鏡 🔎 をクリックして「ブロックのズームイン（Zoom-In Focus）」をテストできます。1つの項目のみに集中環境を作成します。" : "Hover over any paragraph block in this editor mockup or click the magnifying glass icon 🔎 to test 'Block zoom-in', creating an isolated and completely noise-free environment."}

)}
)}
)} {/* B. RAW MARKDOWN VIEW */} {editorMode === 'markdown' && (
Markdown
{activeDemoIdx === 0 && ( `# H2 Relation and Rollup\n\nCe document démontre la puissance du modèle relationnel de Memento.\n\n## 1. Modèle Relationnel\nLier des auteurs à leurs œuvres pour comptabiliser dynamiquement.\n\n[DATABASE id="authors-works" view="table"]\n\n## Template\nTemplates can access values via syntax: .action { .field }` )} {activeDemoIdx === 1 && ( `# Block-Style Math & Formulas\n\nMemento supporte LaTeX.\n\n$$ \\Phi = \\frac{1 + \\sqrt{5}}{2} $$\n\n$$ \\Delta Carbon = E_béton - E_CLT = 410 $$` )} {activeDemoIdx === 2 && ( `# Large Document Virtualization\n\nLe moteur supporte de longs documents.\n\n## Zoom-In de bloc\nIsoler un bloc spécifique pour se concentrer.` )} {activeDemoIdx === -1 && ( `# Synthèse : ${customPrompt}\n\nRecherche sémantique connectée.` )}
* {lang === 'fr' ? "Le Markdown nécessite de se souvenir de la syntaxe. Le WYSIWYG est nettement plus pertinent et fluide !" : lang === 'ja' ? "マークダウン記法の暗記は思考を遮ります。WYSIWYGのほうが直感的で生産的です。" : "Markdown blocks require manual parsing overhead, which is why Block WYSIWYG is much more convenient."}
)} {/* C. HTML DOM VIEW MAP */} {editorMode === 'html' && (
{``}
{`
`}
{`

${activeDemoIdx === -1 ? "Synthèse" : realNotes[activeDemoIdx].title}

`}
{`
`}
{`${activeDemoIdx === -1 ? "Custom" : realNotes[activeDemoIdx].tags[0]}`}
{`
`}
{`
`}
{`

... [text content] ...

`}
{activeDemoIdx === 0 && (
{`
...
`}
)}
{`
`}
{`
`}
* {lang === 'fr' ? "La vue HTML brute est illisible pour un redacteur. La vue d'arborescence structure par contre idéalement le document." : lang === 'ja' ? "HTMLコードは人間の執筆には不向きです。WYSIWYGがDOM構造をカプセル化します。" : "HTML raw outputs are messy, making WYSIWYG encapsulate DOM rendering perfectly."}
)}
)}
)} {/* 2. SPATIAL GRAPH SCREEN */} {activeTab === 'graph' && (
{t('workspace_graph_map_title')}

{t('workspace_graph_map_desc')}

{/* Blueprint grid layout */}
{/* Center node */}
MOMENTO
{/* Surrounding linked concepts */} {[ { name: lang === 'fr' ? "Nombre d'Or" : lang === 'ja' ? "黄金比率" : "Golden ratio", x: -95, y: -65, tag: lang === 'fr' ? "Architecture" : lang === 'ja' ? "建築幾何学" : "Architecture", theme: "text-amber-800 bg-amber-50/95" }, { name: lang === 'fr' ? "Diffraction lumineuse" : lang === 'ja' ? "光の回折" : "Light diffraction", x: 105, y: -72, tag: lang === 'fr' ? "Optique" : lang === 'ja' ? "光学" : "Optics", theme: "text-violet-850 bg-violet-50/95" }, { name: lang === 'fr' ? "Bois CLT Lamellé" : lang === 'ja' ? "CLT 木材" : "CLT Timber", x: -115, y: 70, tag: lang === 'fr' ? "Matériaux" : lang === 'ja' ? "エコ材料" : "Materials", theme: "text-emerald-800 bg-emerald-50/95" }, { name: lang === 'fr' ? "Transition Formelle" : lang === 'ja' ? "形式変換" : "Format Transition", x: 110, y: 60, tag: lang === 'fr' ? "Minimalisme" : lang === 'ja' ? "ミニマリズム" : "Minimalism", theme: "text-blue-800 bg-blue-50/95" }, { name: "Grid System", x: 0, y: -100, tag: lang === 'fr' ? "IA Métrique" : lang === 'ja' ? "AI評価指標" : "AI Metric", theme: "text-stone-800 bg-stone-50/95" }, { name: lang === 'fr' ? "Éco-Conception" : lang === 'ja' ? "エコ設計" : "Eco-design", x: 0, y: 100, tag: lang === 'fr' ? "Carbone" : lang === 'ja' ? "カーボン量" : "Carbon", theme: "text-rose-800 bg-rose-50/95" } ].map((node, idx) => (
{node.name} {node.tag}
))}
{t('workspace_graph_connected')} {t('workspace_graph_status')}
)} {/* 3. COGNITIVE AGENTS SCREEN */} {activeTab === 'agents' && ( {/* System models list */}
{t('workspace_agents_title')}
{[ { id: "scr", name: lang === 'fr' ? "Web Scraper" : lang === 'ja' ? "Webスクレイパー" : "Web Scraper", role: lang === 'fr' ? "Parse et simplifie les URLs" : lang === 'ja' ? "URLコンテンツの解析と要約" : "Parse and simplify URLs", tag: "SCR", color: "bg-amber-100 text-amber-900 border-amber-200" }, { id: "res", name: lang === 'fr' ? "Deep Researcher" : lang === 'ja' ? "ディープ・リサーチャー" : "Deep Researcher", role: lang === 'fr' ? "Recherche exhaustive internet" : lang === 'ja' ? "Web情報を徹底探索調査" : "Exhaustive web research", tag: "RES", color: "bg-teal-100 text-teal-900 border-teal-200" }, { id: "sli", name: lang === 'fr' ? "Slide Builder" : lang === 'ja' ? "スライドビルダー" : "Slide Builder", role: lang === 'fr' ? "Formate en deck PowerPoint" : lang === 'ja' ? "ワンタップでPPTに自動成形" : "Format into raw PPT decks", tag: "PPT", color: "bg-blue-100 text-blue-900 border-blue-200" }, { id: "mon", name: lang === 'fr' ? "Knowledge Monitor" : lang === 'ja' ? "ナレッジ・モニター" : "Knowledge Monitor", role: lang === 'fr' ? "Trouve les redondances" : lang === 'ja' ? "同一ノートの重複・接点検知" : "Detect nested redundancies", tag: "LNK", color: "bg-purple-100 text-purple-900 border-purple-200" } ].map((a) => (
{a.name} {a.tag}
{a.role}
))}
{/* Interactive prompt chat system */}
{([ { key: 'explore', label: lang === 'fr' ? 'Explore (RAG)' : lang === 'ja' ? '探索 (RAG)' : 'Explore (RAG)' }, { key: 'discussion', label: lang === 'fr' ? 'Discussion' : lang === 'ja' ? 'チャット対話' : 'Discussion' }, { key: 'relations', label: lang === 'fr' ? 'Rapports' : lang === 'ja' ? '関連文書' : 'Matches' } ] as const).map((tab) => ( ))}
{aiSidebarTab === 'explore' && ( {t('workspace_active_prompt')}
{t('workspace_rag_active')} "{activeDemoIdx === -1 ? customPrompt || "Custom Search" : realNotes[activeDemoIdx].title}"
{lang === 'fr' ? "Synthétiser un sujet personnalisé :" : lang === 'ja' ? "カスタムテーマを選択して要約 :" : "Synthesize custom topic:"}
setCustomPrompt(e.target.value)} placeholder={lang === 'fr' ? "Ex: Couleur dans l'architecture Bauhaus" : lang === 'ja' ? "例: バウハウスの色彩秩序理論" : "E.g., Bauhaus architectural color scale"} className="flex-1 bg-white border border-stone-200 rounded-lg px-2.5 py-1.5 text-[10px] outline-none font-mono focus:border-accent" />
)} {aiSidebarTab === 'discussion' && (
{t('workspace_consigne')} {lang === 'fr' ? "Structure minimaliste de la diffraction active." : lang === 'ja' ? "アクティブ回折のミニマル構造의設計案" : "Minimalist structure of active diffraction."}
Gemini local model {lang === 'fr' ? "Transparence induite par le verre feuilleté déclinable, limitant les structures." : lang === 'ja' ? "合わせガラスにより透明性を最大限に引き出し、支柱などの構造材を最小限に抑制します。" : "Transparency induced by laminated declinable glass, reducing supporting structures."}
)} {aiSidebarTab === 'relations' && ( {lang === 'fr' ? "Correspondances d'index :" : lang === 'ja' ? "インデックス整合率検出 :" : "Semantic index matches:"}
{lang === 'fr' ? "Grille d'Éco-Conception CLT" : lang === 'ja' ? "木造CLTグリッドモジュール" : "Sustainable CLT Space Grid"} 89% match ✓
)}
{t('workspace_secure_chat')} {t('workspace_processor')}
)} {/* 4. SPACED REPETITION STUDY CARD SCREEN */} {activeTab === 'reviews' && (
{t('workspace_recall_title')}

{t('workspace_recall_desc')}

{/* Interactive flipped card structure */}
{lang === 'fr' ? `Carte mémoire révision ` : lang === 'ja' ? `暗記カード ` : `Concept review `} {flashcardIdx + 1}/2

{simulatedFlashcards[flashcardIdx].question}

{showFlashcardAnswer ? ( {t('workspace_correct_answer')} {simulatedFlashcards[flashcardIdx].answer} ) : ( )} {showFlashcardAnswer && (
{[ { label: lang === 'fr' ? "Revoir" : lang === 'ja' ? "やり直し" : "Again", color: "bg-red-500/10 text-red-600 hover:bg-red-500/20" }, { label: lang === 'fr' ? "Ok" : lang === 'ja' ? "了解" : "Good", color: "bg-amber-500/10 text-amber-600 hover:bg-amber-500/20" }, { label: lang === 'fr' ? "Parfait" : lang === 'ja' ? "完璧" : "Easy", color: "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/20" } ].map((btn, idx) => ( ))}
)}
Spaced recall study active {t('workspace_study_memory')}
)} {/* 5. BACKUPS & TEMPORAL HISTORY SNAPSHOTS SCREEN */} {activeTab === 'history' && (
{t('workspace_snapshot_title')}

{t('workspace_snapshot_desc')}

{/* List timelines */}
{[ { time: lang === 'fr' ? "Aujourd'hui, 09:56" : lang === 'ja' ? "今日, 09:56" : "Today, 09:56", event: lang === 'fr' ? "Modification de l'Équation" : lang === 'ja' ? "数式マトリクスの編集" : "Equation structure modified", size: lang === 'fr' ? "182 mots" : lang === 'ja' ? "182語" : "182 words", active: true }, { time: lang === 'fr' ? "Aujourd'hui, 09:21" : lang === 'ja' ? "今日, 09:21" : "Today, 09:21", event: lang === 'fr' ? "Import de l'Agent Scraper" : lang === 'ja' ? "スクレイパー起動ログ" : "Scraper Agent Log Import", size: lang === 'fr' ? "124 mots" : lang === 'ja' ? "124語" : "124 words" }, { time: lang === 'fr' ? "Hier, 14:20" : lang === 'ja' ? "昨日, 14:20" : "Yesterday, 14:20", event: lang === 'fr' ? "Création initiale de la trame" : lang === 'ja' ? "初期枠組みの構築" : "Initial model setup", size: lang === 'fr' ? "86 mots" : lang === 'ja' ? "86語" : "86 words" } ].map((snap, i) => (
{snap.event} {snap.time} · {snap.size}
))}
{t('workspace_state_saved')} {lang === 'fr' ? "Secteurs locaux protégés pour de bon" : lang === 'ja' ? "ローカル保護領域：正常" : "Continuous sector write: OK"}
)}
{/* Console status footer */}
SECURE KERNEL
| {lang === 'fr' ? "Totalement chiffré" : lang === 'ja' ? "完全暗号化ローカル保管" : "AES-256 local encrypted"} | {lang === 'fr' ? "STOCKAGE PRIVÉ ACTIF" : lang === 'ja' ? "セキュア物理保存" : "ACTIVE EXCLUSIVE COLD STORAGE"}
{/* Features Grid */}
{t('features_badge')}

{t('features_title_1')}
{t('features_title_2')}

{t('features_subtitle')}
{[ { icon: , title: t('f1_title'), desc: t('f1_desc') }, { icon: , title: t('f2_title'), desc: t('f2_desc') }, { icon: , title: t('f3_title'), desc: t('f3_desc') } ].map((feature, i) => (
{feature.icon}

{feature.title}

{feature.desc}
))}
{/* Agent Showcase */}
{t('agents_badge')}

{t('agents_title')}

{t('agents_subtitle')}

{[ { type: "Scraper", icon: , desc: t('agent_scraper_desc') }, { type: "Researcher", icon: , desc: t('agent_researcher_desc') }, { type: "Slide Gen", icon: , desc: t('agent_slide_desc') }, { type: "Monitor", icon: , desc: t('agent_monitor_desc') }, { type: "Diagram Gen", icon: , desc: t('agent_diagram_desc') }, { type: "Custom", icon: , desc: t('agent_custom_desc') } ].map((agent, i) => (
{agent.icon}

{agent.type}

{agent.desc}
))}
{/* Brainstorm Section */}
{t('brain_badge')}

{t('brain_title')}

{[ { title: t('brain_item1_title'), desc: t('brain_item1_desc') }, { title: t('brain_item2_title'), desc: t('brain_item2_desc') }, { title: t('brain_item3_title'), desc: t('brain_item3_desc') } ].map((item, i) => (
{i+1}
{item.title}
{item.desc}
))}
M
{/* Floating nodes */}
{t('brain_node1_title')}
{t('brain_node1_text')}
{t('brain_node2_title')}
{t('brain_node2_text')}
{/* Tech Section */}
{t('tech_badge')}

{t('tech_title')}

{['OpenAI', 'Google', 'Anthropic', 'DeepSeek', 'Mistral', 'Meta', 'Ollama', 'Groq', 'X.AI', 'Custom'].map((brand, i) => (
{brand.slice(0,2).toUpperCase()}
{brand}
))}
{[ { label: t('tech_tier1_label'), desc: t('tech_tier1_desc'), color: 'bg-accent' }, { label: t('tech_tier2_label'), desc: t('tech_tier2_desc'), color: 'bg-ochre' }, { label: t('tech_tier3_label'), desc: t('tech_tier3_desc'), color: 'bg-ink' } ].map((tier, i) => (
{tier.label}
{tier.desc}
))}
{/* Pricing Section */}
{t('price_badge')}

{t('price_title')}

{t('price_desc')}

{/* Billing Toggle */}
(-20%)
{[ { name: t('price_free_name'), price: t('price_free_price'), desc: t('price_free_desc'), features: tArray('price_free_features'), cta: t('price_cta_start'), popular: false }, { name: t('price_pro_name'), price: lang === 'ja' ? '¥1,480' : planIsAnnual => planIsAnnual ? "7,90€" : "9,90€", // handle localized currencies seamlessly period: billingInterval === 'monthly' ? t('price_period_month') : t('price_period_annual'), desc: t('price_pro_desc'), features: tArray('price_pro_features'), cta: t('price_cta_pro'), popular: true }, { name: t('price_biz_name'), price: lang === 'ja' ? '¥4,480' : planIsAnnual => planIsAnnual ? "23,90€" : "29,90€", period: billingInterval === 'monthly' ? t('price_period_month') : t('price_period_annual'), desc: t('price_biz_desc'), features: tArray('price_biz_features'), cta: t('price_cta_biz'), popular: false }, { name: t('price_ent_name'), price: lang === 'ja' ? '要相談' : '49,90€', period: billingInterval === 'monthly' ? t('price_period_month') : t('price_period_annual'), desc: t('price_ent_desc'), features: tArray('price_ent_features'), cta: t('price_cta_ent'), popular: false } ].map((plan, i) => { const displayPrice = typeof plan.price === 'function' ? plan.price(billingInterval === 'annual') : plan.price; return (
{plan.popular && (
{t('price_popular')}
)}

{plan.name}

{displayPrice} {'period' in plan ? plan.period : ''}

{plan.desc}

{plan.features.map((feature, j) => (
{feature}
))}
); })}
{/* BYOK Section */}
{t('byok_badge')}

{t('byok_title')}

{t('byok_desc')}

{t('byok_col1_title')}

{t('byok_col1_desc')}

{t('byok_col2_title')}

{t('byok_col2_desc')}

{"{"}

"provider": "anthropic",

"model": "claude-3-opus",

"apiKey": "sk-ant-at03-..."

"useSystemKey": false

{"}"}

{t('byok_config_title')}
{[1,2,3].map(i =>
)}
{/* Ecosystem Section / Cross-promotion */}
{t('eco_badge')}

{t('eco_title_1')}
{t('eco_title_2')}

{t('eco_desc')}

{t('eco_original')}
{t('eco_translated')}
{/* Abstract document structure representation */}
{[1,2,3,4].map(i =>
)}
{t('eco_status')}
{/* Final CTA */}

{t('final_cta_title')}
{t('final_cta_title_italic')}

{t('final_cta_desc')}

{/* Footer */}
); };