import Image from "next/image";
import Link from "next/link";
import PageHero from "@/components/PageHero";
import styles from "./services.module.css";

export const metadata = {
  title: "خدمات کلینیک",
  description:
    "کلیه خدمات دندانپزشکی کلینیک نگین: پروتز، ارتودنسی، درمان ریشه، جراحی ایمپلنت، ترمیم و زیبایی، خدمات کودکان و مشاوره آنلاین.",
};

const SERVICES = [
  { en: "Prosthesis", fa: "پروتز", text: "روکش ثابت و متحرک، روکش ایمپلنت.", icon: "/assets/img/icons/1.png" },
  { en: "Specialized", fa: "خدمات تخصصی", text: "خدمات تخصصی کودکان شامل کشیدن، ترمیم، عصب‌کشی، روکش استیل و فضانگهدارنده.", icon: "/assets/img/icons/2.png" },
  { en: "Public", fa: "خدمات عمومی", text: "کشیدن، ترمیم (پر کردن)، جرم‌گیری، درمان ریشه (عصب‌کشی) و پروتز (ساخت روکش و دندان مصنوعی).", icon: "/assets/img/icons/3.png" },
  { en: "Root Canal", fa: "درمان ریشه", text: "عصب‌کشی تخصصی شامل ریشه‌های عفونی، ریشه‌های سخت و کانال‌های تنگ و باریک.", icon: "/assets/img/icons/4.png" },
  { en: "Orthodontic", fa: "ارتودنسی", text: "ردیف کردن دندان‌ها و ساخت پلاک مخصوص کودکان مبتلا به شکاف کام.", icon: "/assets/img/icons/5.png" },
  { en: "Prio", fa: "پریو", text: "جراحی‌های لثه، جراحی‌های نرم و سخت، جراحی ایمپلنت و درمان بیماری‌های لثه.", icon: "/assets/img/icons/6.png" },
  { en: "Composite Veneer", fa: "ترمیم تخصصی", text: "ترمیمی و زیبایی شامل ونیر، لمینیت، ترمیم دندان‌های آسیب‌دیده و سفید کردن دندان‌ها (بلیچینگ).", icon: "/assets/img/icons/7.png" },
  { en: "Kids Teeth", fa: "کودکان", text: "ارائه کلیه خدمات دندانپزشکی توسط متخصصین باتجربه کودکان.", icon: "/assets/img/icons/8.png" },
  { en: "Implant Surgery", fa: "جراحی ایمپلنت", text: "جراحی ایمپلنت دندان دیجیتال، جراحی با حداقل برش.", icon: "/assets/img/icons/9.png" },
];

export default function ServicesPage() {
  return (
    <>
      <PageHero
        en="Services"
        fa="خدمات"
        lead="با خدمات ارائه‌شده توسط کلینیک بیشتر آشنا شوید."
      />

      <section className="section">
        <div className="container">
          <div className="sec-head">
            <span className="sec-head__en">Our Services</span>
            <h2 className="sec-head__fa">خدمات ما در کلینیک</h2>
            <p className="sec-head__lead">
              ارائه کلیه خدمات دندانپزشکی توسط دندانپزشکان مجرب و متخصصان عضو هیئت
              علمی دانشکده دندانپزشکی، با بهره‌گیری از تجهیزات پیشرفته و به‌روز دنیا.
              پس با خیالی آسوده به ما مراجعه کنید…
            </p>
          </div>

          <div className="grid grid--3">
            {SERVICES.map((s) => (
              <article key={s.en} className="card">
                <div className="card__icon">
                  <Image src={s.icon} alt="" width={60} height={60} />
                </div>
                <span className="card__en">{s.en}</span>
                <h3 className="card__title">{s.fa}</h3>
                <p className="card__text">{s.text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--tint">
        <div className={`container ${styles.split}`}>
          <div className={styles.art}>
            <Image
              src="/assets/img/info3-2.jpg"
              alt="مشاوره دندانپزشکی از راه دور"
              width={720}
              height={540}
            />
          </div>
          <div>
            <span className="sec-head__en">Consultation</span>
            <h2>مشاوره</h2>
            <p>
              خدمت مشاوره از راه دور یا مشاوره آنلاین، از خدماتی است که سال‌های
              متمادی است در کشورهای مختلف در حال تجربه است. بسیاری از کشورها
              توانسته‌اند با این امکان، بخش زیادی از مراجعات غیرضروری به پزشک‌ها و
              کلینیک‌ها را حذف کنند.
            </p>
            <h3 style={{ marginTop: 28 }}>خدمات حضوری</h3>
            <p>
              کلینیک نگین با بهره‌گیری از متخصصین مجرب و محیطی آرام و مناسب برای
              بانوان و کودکان، آماده پاسخگویی و ارائه خدمت به مراجعین محترم می‌باشد.
              خدمات این کلینیک اعم از خدمات تخصصی و عمومی، ویژه بانوان و کودکان است.
            </p>
            <Link href="/contact-us" className="btn btn--cyan">
              درخواست نوبت
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}