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","راهبرد و نقشه‌ی راه هوش مصنوعی","با هم می‌بینیم سازمان کجای کار است، کدام ایده‌ها بیشترین ارزش را دارند، و نقشه‌ی راه ۱۲ تا ۱۸ ماهه با هدف‌های روشن می‌چینیم.",new[]{"Discovery","ROI Mapping","Roadmap"}),
          ("automation","اتوماسیون هوش مصنوعی","عامل‌های خودکار و گردش‌کارهای n8n که کارهای دستی را به سامانه‌هایی قابل‌ردیابی و قابل‌اتکا تبدیل می‌کنند.",new[]{"n8n","Agents","Workflows"}),
          ("llm-rag","مهندسی LLM و RAG","ساخت پایپ‌لاین‌های RAG با پایگاه‌های برداری، چارچوب ارزیابی، و پاسخ‌دهی با تأخیر زیر ۵۰ میلی‌ثانیه.",new[]{"RAG","Vector DB","Eval"}),
          ("architecture","معماری نرم‌افزار و سیستم","طراحی سیستم‌های توزیع‌شده روی Kubernetes؛ میکروسرویس، استریم رویداد، و الگوهایی که زیر بار سنگین هم پایدار می‌مانند.",new[]{"K8s","Microservices","Event-Driven"}),
          ("mobile","اپلیکیشن‌های موبایل هوش مصنوعی","اپ‌های Flutter، Swift و Kotlin با پردازش روی خود دستگاه، استریم LLM و تجربه‌ای روان و بومی.",new[]{"Flutter","Swift","Kotlin"}),
          ("google-stack","تخصص روی استک گوگل","راه‌اندازی روی Vertex AI، GKE و Gemini با کنترل هزینه و امنیت در سطح سازمانی.",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، با حواس‌جمعی روی هزینه."),
          ("موبایل بومی و چندسکویی","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 و request hedging برای سرویس‌دهی پایدار.",14),
          ("flutter-on-device-ai","Mobile","هوش مصنوعی روی دستگاه در Flutter","استفاده از Gemini Nano و LiteRT برای پردازش آفلاین در اپ‌های موبایل.",9),
          ("enterprise-ai-roadmap","Strategy","نقشه‌ی راه هوش مصنوعی سازمانی در ۹۰ روز","چارچوبی که برای مدیران فنی می‌چینم؛ از پیدا کردن بهترین ایده تا اولین اجرای واقعی.",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>""",
  };
}