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">
    <p class="kicker reveal">@(fa ? "مهندس هوش مصنوعی، مشاور، معمار راهکار" : "AI Engineer, Consultant, Solution Architect")</p>

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

    <p class="lede reveal mx-auto mt-6 text-balance" style="font-size:clamp(1.05rem,2vw,1.3rem);transition-delay:.1s">
      @(fa
        ? "طراحی و استقرار سامانه‌های هوش مصنوعی در مقیاس سازمانی؛ از نخستین جلسه‌ی راهبرد تا استقرار در تولید."
        : "I design and ship production-grade AI systems for the enterprise, from the first strategy session to live deployment.")
    </p>

    <div class="reveal mt-9 flex flex-wrap items-center justify-center gap-3" style="transition-delay:.15s">
      <a href="#contact" class="btn">@(fa ? "رزرو جلسه" : "Book a call")</a>
      <a href="#portfolio" class="btn-ghost">@(fa ? "نمونه‌کارها" : "View work")</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"}),
        };
      }
      @foreach (var (id, title, desc, tags) in services)
      {
        <article class="reveal border-t border-zinc-200 pt-6">
          <span class="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>
      }
    </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 ? "گزیده‌ای از پروژه‌های واقعی در حوزه‌ی هوش مصنوعی، داده و موبایل." : "A selection of real engagements across AI, data, and mobile.")</p>
    </div>

    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
      @{
        var projects = fa ? new[]{
          ("atlas-rag","اطلس - پلتفرم RAG سازمانی","بانک ردیف‌اول","۲۰۲۵","دستیار دانش روی بیش از ۴ میلیون سند داخلی؛ بازیابی ترکیبی با pgvector و reranker.",new[]{"RAG","pgvector","Vertex AI"},new[]{("۴M+","سند نمایه‌شده"),("۳۸ms","تأخیر p95"),("۹۲٪","دقت پاسخ")}),
          ("sentinel-agents","Sentinel - اتوماسیون Ops عامل‌محور","SaaS scale-up","۲۰۲۵","پاسخ خودکار به حوادث با ترکیب n8n و LangGraph؛ عامل‌های قابل ممیزی که alert تریاژ می‌کنند.",new[]{"n8n","LangGraph","Agents"},new[]{("۷۰٪","کاهش MTTR"),("۲۴/۷","پوشش on-call"),("۱۵۰+","جریان خودکار")}),
          ("vertex-vision","Vertex Vision - استنتاج بینایی بلادرنگ","زنجیره خرده‌فروشی","۲۰۲۴","استنتاج بینایی بلادرنگ روی GKE با Triton و Vertex AI برای تحلیل قفسه و جریان مشتری.",new[]{"Vertex AI","GKE","Triton"},new[]{("۱.۲B","استنتاج ماهانه"),("۳۰۰+","فروشگاه"),("۶۰٪","کاهش هزینه")}),
          ("mirage-mobile","Mirage - مجموعه هوش مصنوعی on-device","محصول مصرفی","۲۰۲۴","اپلیکیشن Flutter با استنتاج کاملاً آفلاین با Gemini Nano و LiteRT.",new[]{"Flutter","Gemini Nano","LiteRT"},new[]{("۰","وابستگی شبکه"),("<80ms","پاسخ"),("۴.۸★","امتیاز کاربران")}),
          ("flux-stream","Flux - مش داده رویدادمحور","پلتفرم لجستیک","۲۰۲۳","ستون استریمینگ روی Kafka و NATS روی Kubernetes؛ ۴۰+ میکروسرویس با الگوهای پایداری.",new[]{"Kafka","NATS","Go"},new[]{("۴۰+","میکروسرویس"),("۲M/s","رویداد بر ثانیه"),("۹۹.۹٪","uptime")}),
          ("oracle-forecast","Oracle - موتور پیش‌بینی تقاضا","زنجیره تامین","۲۰۲۳","پایپ‌لاین پیش‌بینی سری زمانی روی BigQuery و dbt با بازآموزی خودکار.",new[]{"BigQuery","dbt","MLOps"},new[]{("۲۳٪","کاهش ضایعات"),("۸۹٪","دقت پیش‌بینی"),("روزانه","بازآموزی")}),
        } : new[]{
          ("atlas-rag","Atlas - Enterprise RAG Platform","Tier-1 bank","2025","A knowledge assistant over 4M+ internal documents. Hybrid retrieval with pgvector and a reranker, sub-40ms serving.",new[]{"RAG","pgvector","Vertex AI"},new[]{("4M+","docs indexed"),("38ms","p95 latency"),("92%","answer accuracy")}),
          ("sentinel-agents","Sentinel - Agentic Ops Automation","SaaS scale-up","2025","Autonomous incident response combining n8n and LangGraph. Auditable agents that triage alerts and self-heal.",new[]{"n8n","LangGraph","Agents"},new[]{("70%","MTTR cut"),("24/7","on-call cover"),("150+","automated flows")}),
          ("vertex-vision","Vertex Vision - Realtime Vision Inference","Retail chain","2024","Real-time vision inference on GKE with Triton and Vertex AI for shelf analytics and customer flow across 300+ stores.",new[]{"Vertex AI","GKE","Triton"},new[]{("1.2B","inferences / mo"),("300+","stores"),("60%","GPU cost cut")}),
          ("mirage-mobile","Mirage - On-device AI Suite","Consumer product","2024","A Flutter app with fully offline inference via Gemini Nano and LiteRT. Streaming response UX with zero network dependency.",new[]{"Flutter","Gemini Nano","LiteRT"},new[]{("0","network deps"),("<80ms","response"),("4.8★","user rating")}),
          ("flux-stream","Flux - Event-Driven Data Mesh","Logistics platform","2023","Streaming backbone on Kafka and NATS over Kubernetes. 40+ microservices with resilience and exactly-once delivery.",new[]{"Kafka","NATS","Go"},new[]{("40+","microservices"),("2M/s","events / sec"),("99.9%","uptime")}),
          ("oracle-forecast","Oracle - Demand Forecasting Engine","Supply chain","2023","Time-series forecasting pipeline on BigQuery and dbt with automated retraining, reducing inventory waste significantly.",new[]{"BigQuery","dbt","MLOps"},new[]{("23%","waste cut"),("89%","forecast accuracy"),("daily","retraining")}),
        };
      }
      @foreach (var (pid, ptitle, pclient, pyear, psummary, ptags, pmetrics) in projects)
      {
        var initial = char.ToUpperInvariant(pid[0]);
        <article class="card card-link reveal overflow-hidden">
          <div class="flex aspect-[16/9] items-center justify-center bg-zinc-100" aria-hidden="true">
            <span class="font-display text-5xl font-bold text-zinc-300">@initial</span>
          </div>
          <div class="p-5">
            <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.05rem] font-semibold @(fa ? "font-fa" : "")">@ptitle</h3>
            <p class="mt-1 text-[.8rem] text-zinc-500">@pclient · @pyear</p>
            <p class="mt-3 text-[.88rem] leading-relaxed text-zinc-600">@psummary</p>
            <div class="mt-4 grid grid-cols-3 gap-3 border-t border-zinc-200 pt-4">
              @foreach (var (mv, ml) in pmetrics)
              {
                <div>
                  <div class="font-display text-base font-bold text-zinc-900">@mv</div>
                  <div class="mt-0.5 text-[.68rem] leading-tight text-zinc-500">@ml</div>
                </div>
              }
            </div>
          </div>
        </article>
      }
    </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>
          </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>

<!-- ─── FOOTER ───────────────────────────────────────────────────────── -->
<footer class="border-t border-zinc-200 px-5 py-10 sm:px-8">
  <div class="mx-auto flex max-w-6xl flex-col items-center gap-3 text-center sm:flex-row sm:justify-between sm:text-start">
    <div class="flex items-center gap-2.5">
      <img src="/logo-mark.svg" alt="" width="22" height="22" />
      <span class="text-sm text-zinc-600">@(fa ? "مهندسی سامانه‌های هوش مصنوعی برای سازمان‌ها." : "AI systems engineering for the enterprise.")</span>
    </div>
    <p class="text-[.78rem] text-zinc-400">© 2026 Soroush Asadi. @(fa ? "تمام حقوق محفوظ است." : "All rights reserved.")</p>
  </div>
</footer>

@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>""",
  };
}