import Image from "next/image";
import Link from "next/link";
import { getBlogs, blogTitle, blogExcerpt, blogCover, blogDate, faDate, slugifyFa } from "@/lib/meshkee";
import Reveal from "@/components/Reveal";
import styles from "./page.module.css";

export const revalidate = 120;

const FEATURES = [
  {
    en: "Appointment",
    fa: "نوبت‌دهی",
    text: "برای گرفتن نوبت از متخصصین کلینیک با ما تماس بگیرید.",
    cta: { label: "درخواست نوبت", href: "/contact-us" },
    icon: "/assets/img/icons/1.png",
  },
  {
    en: "Emergency Case",
    fa: "موارد اورژانسی",
    text: "در صورت بروز موارد اورژانسی با کلینیک نگین تماس بگیرید.",
    cta: { label: "۰۲۵ - ۳۲۹۴۵۰۷۷", href: "tel:+982532945077" },
    icon: "/assets/img/icons/2.png",
  },
  {
    en: "Our Doctors",
    fa: "پزشکان ما",
    text: "ارائه خدمات توسط دندانپزشکان مجرب و متخصصان عضو هیئت علمی دانشکده دندانپزشکی.",
    cta: { label: "معرفی پزشکان", href: "/about-us" },
    icon: "/assets/img/icons/3.png",
  },
];

const SCHEDULE = [
  { day: "شنبه", doctors: ["دکتر شجری", "دکتر صانعی‌پور", "دکتر دیناروند"] },
  { day: "یکشنبه", doctors: ["دکتر صانعی‌پور", "دکتر دیناروند", "دکتر شجری"] },
  { day: "دوشنبه", doctors: ["دکتر کریمی", "دکتر حسینی مطلق", "دکتر صانعی‌پور"] },
  { day: "سه‌شنبه", doctors: ["دکتر شجری", "دکتر دیناروند", "دکتر رسولی"] },
  { day: "چهارشنبه", doctors: ["دکتر صبری", "دکتر صانعی‌پور", "دکتر دیناروند"] },
  { day: "پنجشنبه", doctors: ["دکتر صبری", "دکتر رسولی", "دکتر حسینی مطلق"] },
];

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

export default async function HomePage() {
  const { items: latestBlogs } = await getBlogs({ page: 1, pageSize: 3 });

  return (
    <>
      {/* ---------- hero ---------- */}
      <section className={styles.hero}>
        <div className={`container ${styles.heroInner}`}>
          <div className={styles.heroCopy}>
            <Reveal as="span" from="up" delay={0} className={`en-title ${styles.heroEn}`}>
              Negin Dental Clinic
            </Reveal>
            <Reveal as="h1" from="up" delay={110} className={styles.heroTitle}>
              کلینیک دندانپزشکی نگین
            </Reveal>
            <Reveal as="p" from="up" delay={220} className={styles.heroLead}>
              ارائه‌دهنده کلیات خدمات دندانپزشکی از جمله ایمپلنت، ارتودنسی شفاف
              (الاینر) و خدمات زیبایی، در محیطی آرام و مناسب برای بانوان و کودکان.
            </Reveal>
            <Reveal as="div" from="up" delay={330} className={styles.heroActions}>
              <Link href="/contact-us" className="btn">
                لیست نوبت‌دهی
              </Link>
              <Link href="/virtual-tour" className="btn btn--ghost">
                سفر به کلینیک
              </Link>
            </Reveal>
          </div>
          <Reveal as="div" from="scale" delay={200} className={styles.heroArt}>
            <Image
              src="/assets/img/slider-1.png"
              alt="خدمات دندانپزشکی کلینیک نگین"
              width={754}
              height={810}
              priority
            />
          </Reveal>
        </div>
      </section>

      {/* ---------- feature cards ---------- */}
      <section className={styles.features}>
        <h2 className="visually-hidden">دسترسی سریع</h2>
        <div className={`container grid grid--3`}>
          {FEATURES.map((f, i) => (
            <Reveal as="article" from="up" delay={i * 110} key={f.en} className="card">
              <div className="card__icon">
                <Image src={f.icon} alt="" width={60} height={60} />
              </div>
              <span className="card__en">{f.en}</span>
              <h3 className="card__title">{f.fa}</h3>
              <p className="card__text">{f.text}</p>
              <Link
                href={f.cta.href}
                className={styles.cardLink}
                dir={f.cta.href.startsWith("tel:") ? "ltr" : undefined}
              >
                {f.cta.label}
              </Link>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ---------- weekly schedule ---------- */}
      <section className="section section--tint">
        <div className="container">
          <Reveal as="div" from="up" className="sec-head">
            <span className="sec-head__en">Weekly Schedule</span>
            <h2 className="sec-head__fa">خدمات ما در کلینیک</h2>
            <p className="sec-head__lead">
              برای درمان‌های خاص، به جدول زمان‌بندی حضور متخصصین در کلینیک توجه کنید.
            </p>
          </Reveal>

          <Reveal as="div" from="up" delay={120} className={styles.tableWrap}>
            <table className={styles.schedule}>
              <thead>
                <tr>
                  {SCHEDULE.map((s) => (
                    <th key={s.day}>{s.day}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                <tr>
                  {SCHEDULE.map((s) => (
                    <td key={s.day}>
                      {s.doctors.map((d) => (
                        <span key={d}>{d}</span>
                      ))}
                    </td>
                  ))}
                </tr>
              </tbody>
            </table>
          </Reveal>
        </div>
      </section>

      {/* ---------- info: Negin Dental Clinic ---------- */}
      <section className="section">
        <div className={`container ${styles.split}`}>
          <Reveal as="div" from="right" className={styles.splitArt}>
            <Image src="/assets/img/info3-2.jpg" alt="کلینیک دندانپزشکی نگین" width={720} height={540} />
          </Reveal>
          <Reveal as="div" from="left" delay={120} className={styles.splitCopy}>
            <span className="sec-head__en">Negin Dental Clinic</span>
            <h2>دندانپزشکی نگین</h2>
            <p>
              این مرکز در تمام ایام هفته با همراهی پزشکان متعهد و مجرب، در زمینه
              تشخیص و درمان مشکلات و دردهای ناگهانی دندان در خدمت مادران و فرزندان
              می‌باشد. لذا برای درمان‌های خاص به جدول زمان‌بندی حضور متخصصین در
              کلینیک توجه کنید.
            </p>
            <Link href="/services" className="btn btn--cyan">
              مشاهده خدمات
            </Link>
          </Reveal>
        </div>
      </section>

      {/* ---------- info: About Negin Dental ---------- */}
      <section className="section section--grey">
        <div className={`container ${styles.split} ${styles.splitReverse}`}>
          <Reveal as="div" from="left" className={styles.splitArt}>
            <Image src="/assets/img/info3-3.jpg" alt="درباره کلینیک نگین" width={720} height={540} />
          </Reveal>
          <Reveal as="div" from="right" delay={120} className={styles.splitCopy}>
            <span className="sec-head__en">About Negin Dental</span>
            <h2>درباره کلینیک نگین</h2>
            <p>
              با شماره‌های کلینیک نگین تماس بگیرید و بدون حضور در کلینیک، نوبت خود
              را با دکتر مورد نظر هماهنگ کنید. کادر مجرب دندانپزشکی و استفاده از
              مواد با کیفیت، از مزیت‌های بارز کلینیک نگین است.
            </p>
            <Link href="/about-us" className="btn btn--ghost">
              درباره ما
            </Link>
          </Reveal>
        </div>
      </section>

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

          <div className="grid grid--3">
            {SERVICES.map((s, i) => (
              <Reveal as="article" from="up" delay={(i % 3) * 110} 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>
              </Reveal>
            ))}
          </div>

          <div className="text-center" style={{ marginTop: 44 }}>
            <Link href="/services" className="btn">
              لیست کامل خدمات
            </Link>
          </div>
        </div>
      </section>

      {/* ---------- latest blog posts ---------- */}
      {latestBlogs.length > 0 ? (
        <section className="section section--tint">
          <div className="container">
            <Reveal as="div" from="up" className="sec-head">
              <span className="sec-head__en">Blog</span>
              <h2 className="sec-head__fa">آخرین مقالات</h2>
            </Reveal>

            <div className="grid grid--3">
              {latestBlogs.map((blog, i) => {
                const title = blogTitle(blog);
                const cover = blogCover(blog);
                const href = `/blog/${blog.id}/${slugifyFa(title)}`;
                return (
                  <Reveal as="article" from="up" delay={i * 110} key={blog.id} className={styles.blogCard}>
                    <Link href={href} className={styles.blogCardArt}>
                      {cover ? (
                        <Image src={cover} alt={title} width={420} height={260} />
                      ) : (
                        <span className={styles.blogCardArtFallback} aria-hidden="true" />
                      )}
                    </Link>
                    <div className={styles.blogCardBody}>
                      {blogDate(blog) ? (
                        <span className={styles.blogCardDate}>{faDate(blogDate(blog))}</span>
                      ) : null}
                      <h3>
                        <Link href={href}>{title}</Link>
                      </h3>
                      {blogExcerpt(blog) ? <p>{blogExcerpt(blog)}</p> : null}
                    </div>
                  </Reveal>
                );
              })}
            </div>

            <div className="text-center" style={{ marginTop: 44 }}>
              <Link href="/blog" className="btn btn--ghost">
                همه مقالات
              </Link>
            </div>
          </div>
        </section>
      ) : null}

      {/* ---------- call CTA ---------- */}
      <section className={styles.cta}>
        <div className={`container ${styles.ctaInner}`}>
          <Reveal as="div" from="right">
            <span className="en-title" style={{ color: "var(--cyan-soft)" }}>
              Call Us
            </span>
            <h2 className={styles.ctaTitle}>با ما در ارتباط باشید</h2>
            <p className={styles.ctaText}>
              در صورت موارد اورژانسی و نوبت‌دهی با ما تماس بگیرید. همکاران مستقر در
              کلینیک، پرونده‌ای شامل اطلاعات شناسایی اولیه برای شما تشکیل می‌دهند و
              سپس شما را به بخش تشخیص بیماری‌های دهان و دندان هدایت می‌کنند.
            </p>
          </Reveal>
          <Reveal
            as="a"
            from="left"
            delay={150}
            dir="ltr"
            href="tel:+982532945077"
            className={styles.ctaPhone}
          >
            ۰۲۵ - ۳۲۹۴۵۰۷۷
          </Reveal>
        </div>
      </section>
    </>
  );
}