canina/frontend/application/app/smart-advisor/page.tsx

import React from 'react';
import { Metadata } from 'next';
import SmartAdvisor from '../../components/SmartAdvisor';
import Link from 'next/link';
import { Sparkles, ChevronRight, ShieldCheck } from 'lucide-react';

export const metadata: Metadata = {
  title: 'مشاوره هوشمند دارویی و محاسبه دوز درمانی | کنینا آلمان',
  description: 'سیستم مشاوره هوشمند داروسازی کنینا برای تشخیص علائم سگ و گربه، پیشنهاد تخصصی مکمل‌های آلمانی و محاسبه دقیق دوز مصرفی بر اساس وزن، نژاد و سن پت.',
};

export default function SmartAdvisorPage() {
  return (
    <div className="min-h-screen bg-medical-gray-50 pt-8 pb-20 px-4 font-vazir" dir="rtl">
      <div className="max-w-7xl mx-auto space-y-8">
        {/* Header Breadcrumbs */}
        <div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400">
          <Link href="/" className="hover:text-canina-blue transition-colors">
            صفحه اصلی
          </Link>
          <ChevronRight className="w-3.5 h-3.5" />
          <span className="text-medical-gray-800">مشاوره هوشمند دارویی و محاسبه دوز</span>
        </div>

        {/* Page Hero Intro */}
        <div className="text-center max-w-3xl mx-auto space-y-4 py-4">
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-canina-blue/10 text-canina-blue text-xs font-black">
            <Sparkles className="w-4 h-4 text-canina-gold" />
            <span>سامانه هوشمند نسخه و دوز دارویی کنینا آلمان</span>
          </div>
          <h1 className="text-2xl sm:text-4xl font-black text-medical-gray-900 leading-tight font-lalezar">
            مشاوره تخصصی و راهنمای <span className="text-canina-blue">دوز مصرفی مکمل‌ها</span>
          </h1>
          <p className="text-sm sm:text-base text-medical-gray-600 font-medium leading-relaxed">
            مشخصات پت دلبندتان (نوع، سن، وزن و علائم) را وارد کنید تا بهترین پروتکل درمانی و پیشگیری متناسب با شرایط بالینی او توسط الگوریتم علمی کنینا تعیین شود.
          </p>
        </div>

        {/* Interactive Smart Advisor Component */}
        <div className="bg-white rounded-3xl sm:rounded-[2.5rem] border border-medical-gray-200 shadow-xl overflow-hidden p-4 sm:p-8">
          <SmartAdvisor />
        </div>
      </div>
    </div>
  );
}