import Image from "next/image";
import Link from "next/link";
import type { CSSProperties } from "react";

import HeroSlider from "@/components/HeroSlider";
import Reveal from "@/components/Reveal";
import SectionHeading from "@/components/SectionHeading";
import { articles, serviceIcons, site, testimonials } from "@/data/site";
import { blogExcerpt, blogHref, blogImage, fetchBlogs } from "@/lib/blog";
import { formatFaDate } from "@/lib/format";
import { pageMetadata } from "@/lib/seo";

export const revalidate = 60;

export const metadata = pageMetadata({
  title: `${site.doctorName} | مطب پوست، مو و زیبایی در قم`,
  description: site.description,
  path: "/",
  image: "/images/banners/banner-1.jpg",
});

function StarIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
      <path d="M12 2.5l2.7 6.4 6.8.6-5.2 4.5 1.6 6.6L12 16.9 6.1 20.6l1.6-6.6L2.5 9.5l6.8-.6L12 2.5z" />
    </svg>
  );
}

export default async function HomePage() {
  const latest = await fetchBlogs({ page: 1, pageSize: 8 });
  const posts = latest.items.slice(0, 8);

  return (
    <>
      <Reveal className="reveal-solo" delay={40}>
        <HeroSlider />
      </Reveal>

      <Reveal className="home-intro reveal-solo">
        <div className="container">
          <h1>{site.fullName}</h1>
          <p>{site.description}</p>
        </div>
      </Reveal>

      <Reveal as="section" className="section" id="services" delay={80}>
        <div className="container">
          <div className="stagger-child" style={{ "--i": 0 } as CSSProperties}>
            <SectionHeading title="خدمــات تخصصــی مطــب" kicker="Specialized Services" />
          </div>
          <div className="service-icons">
            {serviceIcons.map((item, i) => (
              <Link
                key={item.src}
                href={item.href}
                className="service-icon stagger-child"
                style={{ "--i": i + 1 } as CSSProperties}
              >
                <Image src={item.src} alt={item.alt} width={150} height={150} />
              </Link>
            ))}
          </div>
        </div>
      </Reveal>

      <Reveal as="section" className="section-tight" id="articles">
        <div className="container">
          <div className="stagger-child" style={{ "--i": 0 } as CSSProperties}>
            <SectionHeading title="دربـاره سلامــت پوســت و مو بیشتــر بدانید" kicker="Article" />
          </div>
          {posts.length > 0 ? (
            <>
              <div className="articles-grid">
                {posts.map((post, i) => (
                  <Link
                    key={post.id}
                    href={blogHref(post)}
                    className="article-card article-card--link stagger-child"
                    style={{ "--i": i + 1 } as CSSProperties}
                  >
                    <Image src={blogImage(post)} alt={post.title} width={780} height={520} />
                    <div className="body">
                      <h3>{post.title}</h3>
                      <span className="kicker">
                        {formatFaDate(post.publishedAt || post.createdAt) || "Article"}
                      </span>
                      {blogExcerpt(post) ? <p>{blogExcerpt(post)}</p> : null}
                      <span className="more" aria-hidden>
                        ‹
                      </span>
                    </div>
                  </Link>
                ))}
              </div>
              <div className="section-cta stagger-child" style={{ "--i": posts.length + 1 } as CSSProperties}>
                <Link href="/blog" className="btn btn-dark">
                  مشاهده همه مقالات
                </Link>
              </div>
            </>
          ) : (
            <div className="articles-grid">
              {articles.map((article, i) => (
                <Link
                  key={article.title}
                  href="/blog"
                  className="article-card article-card--link stagger-child"
                  style={{ "--i": i + 1 } as CSSProperties}
                >
                  <Image src={article.src} alt={article.title} width={780} height={780} />
                  <div className="body">
                    <h3>{article.title}</h3>
                    <span className="kicker">{article.kicker}</span>
                    <p>{article.body}</p>
                    <span className="more" aria-hidden>
                      ‹
                    </span>
                  </div>
                </Link>
              ))}
            </div>
          )}
        </div>
      </Reveal>

      <Reveal as="section" className="section">
        <div className="container">
          <div className="stagger-child" style={{ "--i": 0 } as CSSProperties}>
            <SectionHeading title="خدمــات تخصصــی مطــب" kicker="Specialized Services" />
          </div>
          <div className="testimonials-grid">
            {testimonials.map((item, i) => (
              <div
                key={item.title}
                className="stagger-child"
                style={{ "--i": i + 1 } as CSSProperties}
              >
                <Image
                  className="testimonial-photo"
                  src={item.src}
                  alt={`نمونه کار ${item.title} در مطب دکتر اسدیان`}
                  width={101}
                  height={101}
                />
                <div className="testimonial-quote">
                  <p>{item.body}</p>
                  <div className="testimonial-meta">
                    <StarIcon />
                    <span>{item.title}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Reveal>

      <Reveal as="section" className="section-tight">
        <div className="container two-col">
          <div className="skin-copy stagger-child" style={{ "--i": 0 } as CSSProperties}>
            <SectionHeading title="ترمیــم پوســت" kicker="Skin Repair" />
            <p>
              زمانیکه پوست آسیب می‌بیند، از طریق ترمیم بافت آسیب دیده و جایگزین ساختن بافت از دست رفته با
              سلولهای جدید، پاسخ می‌دهد. طی روند ترمیم، بافت مرده یا آسیب دیده، ابتدا توسط بافت اسکار و به
              تدریج با سلولهای جدید سالم جایگزین می‌شود.
            </p>
            <Link href="/about" className="btn btn-dark">
              درباره ما
            </Link>
          </div>
          <div className="yoga-shadow stagger-child" style={{ "--i": 1 } as CSSProperties}>
            <Image
              src="/images/about/skin-repair.jpg"
              alt="ترمیم پوست در مطب دکتر محمد اسدیان"
              width={780}
              height={780}
            />
          </div>
        </div>
      </Reveal>

      <Reveal as="section" className="about-cta">
        <div className="container">
          <Image
            className="deco stagger-child"
            style={{ "--i": 0 } as CSSProperties}
            src="/images/about/deco.png"
            alt=""
            width={274}
            height={293}
          />
          <h2 className="stagger-child" style={{ "--i": 1 } as CSSProperties}>
            با مــراجعه به مطـب دکــتر محمد اســدیان از کلیـه
            <br />
            خدمــات زیبایی با قیمــتی مناســب بهره منــد شویـد.
          </h2>
          <span className="section-kicker stagger-child" style={{ "--i": 2 } as CSSProperties}>
            About Us
          </span>
          <p className="lead stagger-child" style={{ "--i": 3 } as CSSProperties}>
            نـخـستین گـام برای زیبایی پوست صورت ، آگاهی یافتن ازنوع پوست میباشد.
            <br />
            زیرا ازاین طریق شما قادر خواهید بودهر چه بهتر از پوستتان مراقبت و هـمـچنـیـن فـراورده های
            بـهـداشـتـی و آرایشی مناسب نوع پوست خود را انتخاب کنید.
            <br />
            <br />
            مطب دکتر محمد اسدیان ارائه دهنده انواع خدمات زیبایی و پوست و مو همگام با تکنوژوی روز دنیا.
          </p>
          <div className="cta-row stagger-child" style={{ "--i": 4 } as CSSProperties}>
            <Link href="/about" className="btn btn-dark">
              مشاهده اطلاعات بیشتر
            </Link>
            <Link href="/contact" className="btn btn-mint">
              با ما در تماس باشید
            </Link>
          </div>
        </div>
      </Reveal>
    </>
  );
}