soroushasadi/Pages/Index.cshtml

@page
@model SoroushAsadi.Pages.IndexModel
@{
    var fa = Model.IsFa;
    var locale = Model.Locale;
}

<!-- ─── HERO (editorial, centered) ───────────────────────────────────── -->
<section id="top" class="px-5 pt-28 pb-24 sm:px-8 sm:pt-32">
  <div class="mx-auto max-w-3xl text-center">
    <div class="reveal mb-7 flex justify-center">
      <span class="status"><span class="dot"></span>@(fa ? "پذیرای پروژه‌های جدید" : "Available for new projects")</span>
    </div>

    <h1 class="reveal @(fa ? "font-fa" : "")" style="font-size:clamp(2.6rem,7vw,4.75rem);transition-delay:.05s">
      @(fa ? "سروش اسعدی" : "Soroush Asadi")
    </h1>

    <p class="reveal mx-auto mt-6 max-w-2xl text-balance leading-snug text-zinc-800" style="font-size:clamp(1.2rem,2.4vw,1.6rem);transition-delay:.1s">
      @(fa ? "طراحی و استقرار " : "I build ")<span class="accent-text font-semibold">@(fa ? "هوش مصنوعی تولیدی" : "production-grade AI")</span>@(fa ? " برای سازمان‌ها، از راهبرد تا استقرار در تولید." : " for the enterprise, from strategy to live deployment.")
    </p>

    <p class="lede reveal mx-auto mt-4 text-[.98rem]" style="transition-delay:.15s">@(fa ? "مهندس هوش مصنوعی، مشاور و معمار راهکار." : "AI Engineer, Consultant, and Solution Architect.")</p>

    <div class="reveal mt-9 flex flex-wrap items-center justify-center gap-3" style="transition-delay:.2s">
      <a href="#contact" class="btn">
        @(fa ? "رزرو جلسه" : "Book a call")
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="@(fa ? "rotate-180" : "")" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
      </a>
      <a href="#portfolio" class="btn-ghost">@(fa ? "نمونه‌کارها" : "View work")</a>
    </div>

    <div class="reveal mt-8 flex items-center justify-center gap-2.5" style="transition-delay:.25s">
      <a class="social" href="https://www.linkedin.com/in/soroushdes/" target="_blank" rel="noopener" aria-label="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm6 0h3.8v1.64h.05c.53-1 1.83-2.06 3.76-2.06 4.02 0 4.76 2.65 4.76 6.1V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.07 1.4-2.07 2.85V21H9V9Z"/></svg></a>
      <a class="social" href="https://www.instagram.com/soroushasadicom/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"/></svg></a>
      <a class="social" href="mailto:code.soroush@gmail.com" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></a>
    </div>
  </div>
</section>

<!-- ─── SERVICES (text-block grid) ───────────────────────────────────── -->
<section id="services" class="px-5 py-24 sm:px-8 sm:py-28">
  <div class="mx-auto max-w-6xl">
    <div class="sec-head">
      <h2>@(fa ? "شش حوزه‌ی تخصص" : "Six areas of practice")</h2>
      <p class="lede">@(fa ? "از نخستین جلسه‌ی راهبرد تا استقرار تولید؛ یک شریک مهندسی برای کل چرخه‌ی عمر هوش مصنوعی." : "From the first strategy session to production rollout, one engineering partner for the full AI lifecycle.")</p>
    </div>

    <div class="grid grid-cols-1 gap-x-10 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
      @{
        var services = fa ? new[]{
          ("strategy","راهبرد و نقشه راه هوش مصنوعی","ارزیابی بلوغ سازمانی، شناسایی موارد کاربری با بیشترین بازده، و طراحی نقشه راه ۱۲ تا ۱۸ ماهه با KPIهای روشن.",new[]{"Discovery","ROI Mapping","Roadmap"}),
          ("automation","اتوماسیون هوش مصنوعی","ساخت عامل‌های خودکار و گردش‌کارهای n8n که فرایندهای دستی را به سامانه‌های قابل ممیزی تبدیل می‌کنند.",new[]{"n8n","Agents","Workflows"}),
          ("llm-rag","مهندسی LLM و RAG","طراحی pipeline‌های RAG با پایگاه‌های برداری، evaluation framework، و سرویس‌دهی با تأخیر زیر ۵۰ میلی‌ثانیه.",new[]{"RAG","Vector DB","Eval"}),
          ("architecture","معماری راهکار","طراحی سامانه‌های توزیع‌شده روی Kubernetes با میکروسرویس‌ها، event streaming، و الگوهای پایداری در مقیاس بالا.",new[]{"K8s","Microservices","Event-Driven"}),
          ("mobile","اپلیکیشن‌های موبایل هوش مصنوعی","برنامه‌های Flutter، Swift و Kotlin با on-device inference، استریم LLM و تجربه‌ی کاربری بومی.",new[]{"Flutter","Swift","Kotlin"}),
          ("google-stack","تخصص استک گوگل","استقرار روی Vertex AI، GKE و Gemini با بهینه‌سازی هزینه و الگوهای امنیتی سطح enterprise.",new[]{"Vertex AI","GKE","Gemini"}),
        } : new[]{
          ("strategy","AI Strategy and Roadmap","Maturity assessment, highest-ROI use-case discovery, and a 12 to 18 month roadmap with measurable KPIs.",new[]{"Discovery","ROI Mapping","Roadmap"}),
          ("automation","AI Automation","Autonomous agents and n8n workflows that turn manual processes into auditable, observable systems.",new[]{"n8n","Agents","Workflows"}),
          ("llm-rag","LLM and RAG Engineering","Production RAG pipelines with vector stores, evaluation frameworks, and sub-50ms serving.",new[]{"RAG","Vector DB","Eval"}),
          ("architecture","Solution Architecture","Distributed systems on Kubernetes: microservices, event streaming, and resilience patterns at scale.",new[]{"K8s","Microservices","Event-Driven"}),
          ("mobile","Mobile AI Apps","Flutter, Swift, and Kotlin apps with on-device inference, streaming LLM UX, and native polish.",new[]{"Flutter","Swift","Kotlin"}),
          ("google-stack","Google Stack Specialist","Vertex AI, GKE, and Gemini deployments with cost optimization and enterprise security patterns.",new[]{"Vertex AI","GKE","Gemini"}),
        };
      }
      @{ int si = 0; }
      @foreach (var (id, title, desc, tags) in services)
      {
        <article class="svc reveal border-t border-zinc-200 pt-6" style="transition-delay:@(si * 60)ms">
          <span class="svc-icon text-zinc-400" aria-hidden="true">@Html.Raw(ServiceIcon(id))</span>
          <h3 class="mt-5 text-lg font-semibold @(fa ? "font-fa" : "")">@title</h3>
          <p class="mt-2.5 text-[.95rem] leading-relaxed text-zinc-600">@desc</p>
          <div class="mt-4 flex flex-wrap gap-1.5">
            @foreach (var tag in tags) { <span class="chip">@tag</span> }
          </div>
        </article>
        si++;
      }
    </div>
  </div>
</section>

<!-- ─── PIPELINE (horizontal stepper) ────────────────────────────────── -->
<section id="dataflow" class="px-5 py-24 sm:px-8 sm:py-28">
  <div class="mx-auto max-w-6xl">
    <div class="sec-head">
      <h2>@(fa ? "از سند خام تا پاسخ قابل اتکا" : "From raw document to a trustworthy answer")</h2>
      <p class="lede">@(fa ? "مسیری که هر پرسش در یک سامانه‌ی RAG تولیدی طی می‌کند. هر مرحله قابل اندازه‌گیری، قابل ممیزی و بهینه‌شده برای تأخیر." : "The path every query takes through a production RAG system. Each stage is measurable, auditable, and tuned for latency.")</p>
    </div>

    <ol class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
      @{
        var nodes = fa ? new[]{
          ("دریافت","نرمال‌سازی، قطعه‌بندی و پاک‌سازی اسناد منبع"),
          ("برداری‌سازی","تولید embedding و نمایه‌سازی در پایگاه برداری"),
          ("بازیابی","جستجوی ترکیبی معنایی و کلیدواژه‌ای"),
          ("بازرتبه‌بندی","مرتب‌سازی مجدد نامزدها با cross-encoder"),
          ("تولید","پاسخ مستند با ارجاع به منبع"),
        } : new[]{
          ("Ingest","Normalize, chunk, and clean source documents"),
          ("Embed","Generate embeddings and index in the vector store"),
          ("Retrieve","Hybrid semantic and keyword search"),
          ("Rerank","Re-order candidates with a cross-encoder"),
          ("Generate","Grounded answer with source citations"),
        };
        int stepN = 0;
      }
      @foreach (var (nlabel, ndesc) in nodes)
      {
        stepN++;
        <li class="reveal border-t border-zinc-200 pt-4" style="transition-delay:@((stepN-1) * 40)ms">
          <span class="font-display text-sm text-zinc-400">@stepN.ToString("D2")</span>
          <h3 class="mt-2 text-base font-semibold @(fa ? "font-fa" : "")">@nlabel</h3>
          <p class="mt-1.5 text-[.85rem] leading-relaxed text-zinc-600">@ndesc</p>
        </li>
      }
    </ol>
    <p class="mt-8 text-sm text-zinc-500">@(fa ? "تأخیر سرتاسری زیر ۵۰ میلی‌ثانیه؛ هر مرحله مشاهده‌پذیر." : "Sub-50ms end-to-end, every stage observable.")</p>
  </div>
</section>

<!-- ─── STACK (grouped tag clusters) ─────────────────────────────────── -->
<section id="stack" class="px-5 py-24 sm:px-8 sm:py-28">
  <div class="mx-auto max-w-6xl">
    <div class="sec-head">
      <h2>@(fa ? "ابزار روزمره" : "Daily tooling")</h2>
      <p class="lede">@(fa ? "هر چه می‌سازم بر این پایه‌ها استوار است؛ انتخاب‌شده برای دوام، نه چرخه‌های هیجان." : "Everything I ship sits on this foundation, chosen for longevity, not hype cycles.")</p>
    </div>

    <div class="grid grid-cols-1 gap-x-8 gap-y-9 sm:grid-cols-2 lg:grid-cols-4">
      @{
        var cats = fa ? new[]{
          ("زبان‌ها",       new[]{"Python","TypeScript","Go","Rust","SQL"}),
          ("موبایل",        new[]{"Flutter","Swift / SwiftUI","Kotlin","React Native"}),
          ("زیرساخت",      new[]{"Kubernetes","Terraform","Postgres","Redis","Kafka","NATS"}),
          ("هوش مصنوعی",   new[]{"Vertex AI","Gemini","OpenAI","Anthropic","LangGraph","Pinecone","pgvector"}),
        } : new[]{
          ("Languages",     new[]{"Python","TypeScript","Go","Rust","SQL"}),
          ("Mobile",        new[]{"Flutter","Swift / SwiftUI","Kotlin","React Native"}),
          ("Infrastructure",new[]{"Kubernetes","Terraform","Postgres","Redis","Kafka","NATS"}),
          ("AI / ML",       new[]{"Vertex AI","Gemini","OpenAI","Anthropic","LangGraph","Pinecone","pgvector"}),
        };
      }
      @foreach (var (catLabel, items) in cats)
      {
        <div class="reveal border-t border-zinc-200 pt-5">
          <h3 class="mb-4 text-sm font-semibold @(fa ? "font-fa" : "")">@catLabel</h3>
          <div class="flex flex-wrap gap-1.5">
            @foreach (var item in items) { <span class="chip">@item</span> }
          </div>
        </div>
      }
    </div>
  </div>
</section>

<!-- ─── EXPERTISE (definition list) ──────────────────────────────────── -->
<section id="expertise" class="px-5 py-24 sm:px-8 sm:py-28">
  <div class="mx-auto max-w-4xl">
    <div class="sec-head">
      <h2>@(fa ? "آنچه در آن عمیق می‌شوم" : "What I go deep on")</h2>
      <p class="lede">@(fa ? "سامانه‌هایی که میلیون‌ها رویداد در روز را دوام می‌آورند. این‌ها حوزه‌هایی‌اند که برایشان بهینه می‌کنم." : "Systems that survive millions of events per day. These are the areas I optimize for.")</p>
    </div>

    <dl>
      @{
        var areas = fa ? new[]{
          ("مهندسی LLM و RAG","پایپ‌لاین‌های بازیابی، ارزیابی و تولید مستند در محیط تولید."),
          ("معماری ابری و Kubernetes","سرویس‌های توزیع‌شده، مقیاس خودکار و پایداری در مقیاس بالا."),
          ("سیستم‌های عامل‌محور و اتوماسیون","گردش‌کارهای خودکار قابل ممیزی با n8n و LangGraph."),
          ("استک گوگل کلود (Vertex / GKE)","Vertex AI، GKE و Gemini با انضباط هزینه."),
          ("موبایل بومی و cross-platform","Flutter، Swift و Kotlin با استنتاج روی دستگاه."),
        } : new[]{
          ("LLM and RAG engineering","Retrieval pipelines, evals, and grounded generation in production."),
          ("Cloud architecture and Kubernetes","Distributed services, autoscaling, and resilience at scale."),
          ("Agentic systems and automation","Auditable autonomous workflows with n8n and LangGraph."),
          ("Google Cloud stack (Vertex / GKE)","Vertex AI, GKE, and Gemini with real cost discipline."),
          ("Native and cross-platform mobile","Flutter, Swift, and Kotlin with on-device inference."),
        };
      }
      @foreach (var (alabel, adesc) in areas)
      {
        <div class="reveal grid grid-cols-1 gap-1 border-t border-zinc-200 py-5 sm:grid-cols-[1fr_1.5fr] sm:gap-8">
          <dt class="text-base font-semibold @(fa ? "font-fa" : "")">@alabel</dt>
          <dd class="text-[.95rem] leading-relaxed text-zinc-600">@adesc</dd>
        </div>
      }
    </dl>
  </div>
</section>

<!-- ─── PORTFOLIO (card grid, typographic covers) ────────────────────── -->
<section id="portfolio" class="px-5 py-24 sm:px-8 sm:py-28">
  <div class="mx-auto max-w-6xl">
    <div class="sec-head">
      <h2>@(fa ? "نمونه‌کارهای منتخب" : "Selected work")</h2>
      <p class="lede">@(fa ? "محصولاتی که طراحی و ساخته‌ام. روی هر کارت بزنید تا نسخه‌ی زنده را ببینید." : "Products I have designed and built. Tap any card to open the live site.")</p>
    </div>

    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
      @{
        var projects = fa ? new[]{
          ("hamkadr","همکادر","hamkadr.ir","بازاری که کادر درمان را برای شیفت و استخدام به بیمارستان‌ها و کلینیک‌ها وصل می‌کند؛ با پروفایل، فیلتر، تقویم هفتگی و اپ موبایل.",new[]{"Marketplace","Healthcare","Mobile"}),
          ("meezi","میزی","meezi.ir","سامانه‌ی یکپارچه برای کافه و رستوران: سفارش با QR، صندوق فروش، انبار، کارکنان و تحلیل فروش، روی زیرساخت داخلی.",new[]{"SaaS","POS","Analytics"}),
          ("bargevasat","برگ وسط","bargevasat.ir","بازی آنلاین حکم به‌صورت بلادرنگ مقابل بازیکنان واقعی یا ربات‌های هوشمند؛ با لیگ، رتبه‌بندی، جایزه‌ی روزانه و همگام‌سازی چنددستگاهه.",new[]{"Realtime","Multiplayer","Game"}),
          ("flatrender","فلت‌رندر","flatrender.ir","استودیوی هوش مصنوعی که بیش از ۱۲۰۰ قالب را در چند دقیقه به ویدیو و تصویر آماده‌ی انتشار تبدیل می‌کند؛ بر پایه‌ی ثانیه‌ی رندر. در نسخه‌ی بتا.",new[]{"AI","Video","SaaS"}),
        } : new[]{
          ("hamkadr","Hamkadr","hamkadr.ir","A marketplace connecting healthcare staff with hospitals and clinics for shifts and hiring, with profiles, filters, weekly scheduling, and a mobile app.",new[]{"Marketplace","Healthcare","Mobile"}),
          ("meezi","Meezi","meezi.ir","An all-in-one SaaS for cafes and restaurants: QR ordering, POS, inventory, staff, and sales analytics, hosted in Iran.",new[]{"SaaS","POS","Analytics"}),
          ("bargevasat","Barge Vasat","bargevasat.ir","A real-time multiplayer Hokm card game against people or AI bots, with leagues, rankings, daily rewards, and cross-device play.",new[]{"Realtime","Multiplayer","Game"}),
          ("flatrender","Flatrender","flatrender.ir","An AI studio that turns 1,200+ templates into platform-ready videos and images in minutes, billed by render-seconds. In beta.",new[]{"AI","Video","SaaS"}),
        };
      }
      @foreach (var (pid, pname, pdomain, pdesc, ptags) in projects)
      {
        var initial = char.ToUpperInvariant(pid[0]);
        <a href="https://@pdomain" target="_blank" rel="noopener" class="group card card-link reveal block overflow-hidden">
          <div class="cover flex aspect-[16/9] items-center justify-center bg-zinc-100" aria-hidden="true">
            <span class="font-display text-6xl font-bold text-zinc-300">@initial</span>
          </div>
          <div class="p-6">
            <div class="mb-3 flex flex-wrap gap-1.5">
              @foreach (var tag in ptags) { <span class="chip">@tag</span> }
            </div>
            <h3 class="text-[1.15rem] font-semibold @(fa ? "font-fa" : "")">@pname</h3>
            <p class="mt-1 text-[.8rem] text-zinc-500" dir="ltr">@pdomain</p>
            <p class="mt-3 text-[.9rem] leading-relaxed text-zinc-600">@pdesc</p>
            <span class="arrow-link mt-4">
              @(fa ? "مشاهده‌ی سایت" : "Visit site")
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg>
            </span>
          </div>
        </a>
      }
    </div>
  </div>
</section>

<!-- ─── BLOG (editorial list) ────────────────────────────────────────── -->
<section id="blog" class="px-5 py-24 sm:px-8 sm:py-28">
  <div class="mx-auto max-w-4xl">
    <div class="sec-head">
      <h2>@(fa ? "یادداشت‌های مهندسی" : "Engineering notes")</h2>
      <p class="lede">@(fa ? "یافته‌ها از پروژه‌های واقعی. نه ترجمه‌ی مقاله، نه فهرست هیجان." : "Findings from real engagements. Not translated articles, not hype lists.")</p>
    </div>

    <div class="border-b border-zinc-200">
      @{
        var posts = fa ? new[]{
          ("rag-eval-framework","LLM","چارچوب ارزیابی RAG که در تولید دوام می‌آورد","چرا BLEU و ROUGE برای RAG کافی نیستند، و معیارهایی که در پروژه‌های واقعی تصمیم می‌سازند.",8),
          ("agentic-n8n-patterns","Automation","الگوهای عامل‌محور با n8n برای سازمان","چگونه n8n را با LangGraph ترکیب کنیم تا گردش‌کارهای قابل ممیزی بسازیم.",11),
          ("vertex-cost-control","Google Stack","کنترل هزینه روی Vertex AI در مقیاس بالا","سه ضدالگو که در ۸۰٪ پروژه‌های Vertex می‌بینم، و چگونه ۶۰٪ هزینه را کاهش دادیم.",6),
          ("k8s-llm-inference","Infra","استنتاج LLM روی Kubernetes با تأخیر زیر ۵۰ میلی‌ثانیه","الگوی استقرار با KEDA، GPU sharing، و request hedging برای سرویس‌دهی پایدار.",14),
          ("flutter-on-device-ai","Mobile","هوش مصنوعی on-device در Flutter","استفاده از Gemini Nano و LiteRT برای استنتاج آفلاین در اپلیکیشن‌های موبایل.",9),
          ("enterprise-ai-roadmap","Strategy","نقشه راه هوش مصنوعی سازمانی در ۹۰ روز","چارچوبی که برای CTOها می‌سازم؛ از کشف موارد کاربری تا اولین استقرار تولید.",7),
        } : new[]{
          ("rag-eval-framework","LLM","A RAG evaluation framework that holds up in production","Why BLEU and ROUGE fall short for RAG, and the metrics that actually drive decisions in real projects.",8),
          ("agentic-n8n-patterns","Automation","Agentic patterns with n8n for the enterprise","How to combine n8n with LangGraph to build auditable, debuggable autonomous workflows.",11),
          ("vertex-cost-control","Google Stack","Vertex AI cost control at scale","Three anti-patterns I see in 80% of Vertex projects, and how we cut 60% of monthly spend.",6),
          ("k8s-llm-inference","Infra","Sub-50ms LLM inference on Kubernetes","Deployment pattern with KEDA, GPU sharing, and request hedging for stable serving.",14),
          ("flutter-on-device-ai","Mobile","On-device AI in Flutter","Using Gemini Nano and LiteRT for offline inference inside mobile apps.",9),
          ("enterprise-ai-roadmap","Strategy","A 90-day enterprise AI roadmap","The framework I build for CTOs, from use-case discovery to first production deployment.",7),
        };
      }
      @foreach (var (slug, cat, btitle, excerpt, readTime) in posts)
      {
        <a href="/blog/@slug" class="group reveal grid grid-cols-1 gap-2 border-t border-zinc-200 py-6 sm:grid-cols-[8rem_1fr] sm:gap-8">
          <div class="flex items-baseline justify-between sm:flex-col sm:gap-1">
            <span class="kicker">@cat</span>
            <span class="text-[.78rem] text-zinc-400">@readTime @(fa ? "دقیقه" : "min")</span>
          </div>
          <div>
            <h3 class="text-[1.1rem] font-semibold transition-colors group-hover:text-accent @(fa ? "font-fa" : "")">@btitle</h3>
            <p class="mt-1.5 text-[.9rem] leading-relaxed text-zinc-600">@excerpt</p>
            <span class="arrow-link mt-3">
              @(fa ? "خواندن" : "Read")
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="@(fa ? "rotate-180" : "")" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
            </span>
          </div>
        </a>
      }
    </div>
  </div>
</section>

<!-- ─── CONTACT ──────────────────────────────────────────────────────── -->
<section id="contact" class="px-5 py-24 sm:px-8 sm:py-28">
  <div class="mx-auto max-w-2xl">
    <div class="sec-head">
      <h2>@(fa ? "رزرو یک جلسه‌ی ۳۰ دقیقه‌ای" : "Book a 30-minute call")</h2>
      <p class="lede">@(fa ? "بدون هزینه، بدون تعهد. مورد کاربری، محدودیت‌ها و گام بعدی را با هم مشخص می‌کنیم." : "No cost, no commitment. We map the use case, the constraints, and the next step together.")</p>
    </div>

    <form id="contact-form" class="card space-y-5 p-6 sm:p-8"
          data-success-msg="@(fa ? "پیام ارسال شد. معمولاً ظرف ۲۴ ساعت کاری پاسخ می‌دهم." : "Sent. Typical reply within 24 working hours.")"
          data-error-msg="@(fa ? "خطایی رخ داد. لطفاً دوباره امتحان کنید." : "Something went wrong. Please try again.")">
      <input type="hidden" name="locale" value="@locale" />

      <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <div>
          <label class="flabel" for="name">@(fa ? "نام" : "Name")</label>
          <input id="name" name="name" type="text" required placeholder="@(fa ? "نام و نام خانوادگی" : "Full name")" class="field" />
        </div>
        <div>
          <label class="flabel" for="company">@(fa ? "سازمان" : "Company")</label>
          <input id="company" name="company" type="text" placeholder="@(fa ? "نام سازمان" : "Organization")" class="field" />
        </div>
      </div>

      <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <div>
          <label class="flabel" for="service">@(fa ? "خدمت" : "Service")</label>
          <select id="service" name="service" required class="field">
            <option value="" disabled selected>@(fa ? "انتخاب کنید" : "Select…")</option>
            @if (fa)
            {
              <option value="strategy">راهبرد و نقشه راه</option>
              <option value="automation">اتوماسیون هوش مصنوعی</option>
              <option value="llm-rag">مهندسی LLM و RAG</option>
              <option value="architecture">معماری راهکار</option>
              <option value="mobile">موبایل</option>
              <option value="google-stack">استک گوگل</option>
            }
            else
            {
              <option value="strategy">AI Strategy and Roadmap</option>
              <option value="automation">AI Automation</option>
              <option value="llm-rag">LLM and RAG Engineering</option>
              <option value="architecture">Solution Architecture</option>
              <option value="mobile">Mobile AI Apps</option>
              <option value="google-stack">Google Stack</option>
            }
          </select>
        </div>
        <div>
          <label class="flabel" for="budget">@(fa ? "بودجه (تقریبی)" : "Budget (rough)")</label>
          <select id="budget" name="budget" required class="field">
            <option value="" disabled selected>@(fa ? "انتخاب کنید" : "Select…")</option>
            <option>Under $10k</option>
            <option>$10k - $50k</option>
            <option>$50k - $200k</option>
            <option>$200k+</option>
          </select>
        </div>
      </div>

      <div>
        <label class="flabel" for="message">@(fa ? "پیام" : "Message")</label>
        <textarea id="message" name="message" required rows="4" placeholder="@(fa ? "هدف، بازه زمانی، موانع فعلی…" : "Goal, timeline, current blockers…")" class="field resize-none"></textarea>
      </div>

      <button type="submit" class="btn w-full">@(fa ? "ارسال درخواست" : "Send request")</button>
      <p id="contact-status" class="mt-1 text-sm text-zinc-500">@(fa ? "معمولاً ظرف ۲۴ ساعت کاری پاسخ می‌دهم." : "Typical reply within 24 working hours.")</p>
    </form>
  </div>
</section>

@functions {
  static string ServiceIcon(string id) => id switch {
    "strategy"     => """<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M9 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4"/><polyline points="9,9 4,9"/><polyline points="9,12 4,12"/><polyline points="9,15 4,15"/><rect x="9" y="2" width="6" height="6"/><path d="M15 8h4a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-4"/></svg>""",
    "automation"   => """<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12"/></svg>""",
    "llm-rag"      => """<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>""",
    "architecture" => """<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><rect x="2" y="3" width="6" height="6"/><rect x="16" y="3" width="6" height="6"/><rect x="9" y="15" width="6" height="6"/><path d="M5 9v3h14V9M12 12v3"/></svg>""",
    "mobile"       => """<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg>""",
    "google-stack" => """<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><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>""",
    _              => """<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/></svg>""",
  };
}