import Image from "next/image";
import { articles, contact, features, heroSlides, products, projectSteps, services, sourceBanners, testimonials } from "./data";
import { PageShell } from "./components";
import Countdown from "./Countdown";
import { getStaticImageSlotMap, staticSlotImages } from "./meshkee";

export default async function Home() {
  const staticSlots = await getStaticImageSlotMap("home");
  const sliderImages = staticSlotImages(staticSlots, "slider", heroSlides);
  const belowSliderBanners = staticSlotImages(staticSlots, "three-banner-below-slider", heroSlides.slice(1, 4)).slice(0, 3);
  const specialSaleBanner = staticSlotImages(staticSlots, "special-sale-banner", ["/assets/banner-2.jpg"])[0];
  const serverBanner = staticSlotImages(staticSlots, "server-banner", ["/assets/server-info-1.jpg"])[0];
  const aboutusBanner = staticSlotImages(staticSlots, "aboutus-banner", ["/assets/server-info-1.jpg"])[0];
  const threeBanners = staticSlotImages(staticSlots, "three-banner", sourceBanners).slice(0, 3);

  return (
    <PageShell>
      <h1 className="sr-only">آریا شبکه پیشرو، فروش تجهیزات سرور HP و شبکه</h1>
      <section className="hero-section">
        <div className="container">
          <div className="hero">
            <div className="hero-slider" aria-hidden="true">
              {sliderImages.map((slide, index) => {
                const content = <Image src={slide.url} alt={slide.alt || ""} fill priority={index === 0} sizes="(max-width: 900px) 92vw, 860px" />;
                return slide.href ? (
                  <a className={`slide-card slide-${index + 1}`} href={slide.href} key={`${slide.url}-${index}`} style={slotStyle(slide)}>
                    {content}
                  </a>
                ) : (
                  <div className={`slide-card slide-${index + 1}`} key={`${slide.url}-${index}`} style={slotStyle(slide)}>
                    {content}
                  </div>
                );
              })}
            </div>
          </div>
          <div className="banner-row">
            {belowSliderBanners.map((banner, index) => (
              <a className="promo-banner" href={banner.href || "tel:02177133934"} key={`${banner.url}-${index}`} style={slotStyle(banner)}>
                <Image src={banner.url} alt={banner.alt || `بنر فروش تجهیزات سرور ${index + 1}`} fill sizes="(max-width: 900px) 100vw, 33vw" />
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section" id="special-sale">
        <div className="container special-sale-frame">
          <div className="special-heading">
            <SectionTitle fa="فروش ویژه" en="SPECIAL SALE" align="right" />
            <Countdown />
          </div>
          <div className="product-grid special-grid">
            <a className="special-banner-card" href={specialSaleBanner.href || "tel:02177133934"} style={slotStyle(specialSaleBanner)}>
              <Image src={specialSaleBanner.url} alt={specialSaleBanner.alt || "فروش ویژه تجهیزات سرور"} fill sizes="(max-width: 900px) 100vw, 25vw" />
            </a>
            {products.map((product) => (
              <a className="product-card" href={product.link} key={product.title}>
                <div className="product-image">
                  <Image src={product.image} alt={product.title} fill sizes="(max-width: 800px) 50vw, 25vw" />
                </div>
                <span>{product.category}</span>
                <h3>{product.title}</h3>
                <strong>تماس با فروشگاه</strong>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section split-section">
        <div className="container split">
          <div>
            <SectionTitle fa="سرور (Server) چیست؟" en="SERVER" align="right" />
            <p>در ویکی پدیا نیز معنی سرور، سرویس دهنده ذکر شده است. به بیان ساده معنی سرور یا در پاسخ سوال server به چه معناست باید گفت، کامپیوتری همیشه روشن و قدرتمند است که کاربران در زمان‌های متفاوت، از آن انتظار پاسخ به درخواست‌ها را دارند.</p>
            <a className="secondary-btn" href="https://www.asphp.co/article-details/191">درباره سرور بیشتر بدانید</a>
          </div>
          <div className="image-pair">
            <Image src={serverBanner.url} alt={serverBanner.alt || "تجهیزات سرور"} width={Number(serverBanner.width) || 520} height={Number(serverBanner.height) || 390} style={slotStyle(serverBanner)} />
          </div>
        </div>
      </section>

      <section className="section muted">
        <div className="container">
          <SectionTitle fa="خدمات آریا شبکه پیشرو" en="SERVICES" />
          <div className="service-grid">
            {[...services].reverse().map((service) => (
              <article className="service-card" key={service.title}>
                <Image src={service.icon} alt="" width={64} height={64} />
                <h3>{service.title}</h3>
                <p>{service.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section about-band">
        <div className="container split">
          <div>
            <SectionTitle fa="آریا شبکه پیشرو" en="ARYA SHABAKE PISHRO" align="right" />
            <h3>شرکتی جوان خلاق، با انگیزه و دانش بنیان</h3>
            <p>انضباط، مشتری مداری، ارائه محصولات با کیفیت و تضمین شده می باشد. برای مشاوره و خرید در زمینه تجهیزات شبکه با مشاوران ما در آریا شبکه پیشرو تماس بگیرید.</p>
            <a className="primary-btn" href="tel:02177133934">تماس با ما</a>
          </div>
          <div className="image-pair">
            <Image src={aboutusBanner.url} alt={aboutusBanner.alt || "تجهیزات سرور آریا شبکه پیشرو"} width={Number(aboutusBanner.width) || 560} height={Number(aboutusBanner.height) || 420} style={slotStyle(aboutusBanner)} />
          </div>
        </div>
      </section>

      <section className="section feature-section" id="features">
        <div className="container feature-showcase">
          <div className="feature-copy">
            <SectionTitle fa="ویژگـــی مــــا" en="PROCESS" align="right" />
            <p>انضباط، مشتری مداری، ارائه محصولات با کیفیت و تضمین شده می باشد.</p>
          </div>
          <div className="feature-grid">
            {features.map((feature) => (
              <div className="feature" key={feature.body}>
                <Image src={feature.icon} alt="" width={58} height={58} />
                <p>{feature.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section source-banner-section" id="source-frame">
        <div className="container source-banner-grid">
          <a className="source-banner source-banner-large" href={threeBanners[0]?.href || sourceBanners[0].href} style={slotStyle(threeBanners[0])}>
            <Image src={threeBanners[0]?.url || sourceBanners[0].image} alt={threeBanners[0]?.alt || sourceBanners[0].alt} fill sizes="(max-width: 900px) 100vw, 50vw" />
          </a>
          <div className="source-banner-stack">
            {threeBanners.slice(1).map((banner, index) => (
              <a className="source-banner" href={banner.href || sourceBanners[index + 1]?.href || "#"} key={`${banner.url}-${index}`} style={slotStyle(banner)}>
                <Image src={banner.url} alt={banner.alt || sourceBanners[index + 1]?.alt || ""} fill sizes="(max-width: 900px) 100vw, 50vw" />
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section navy">
        <div className="container">
          <SectionTitle fa="طرح یک پروژه" en="PROJECT A DESIGN" light />
          <div className="steps">
            {projectSteps.map((step) => (
              <article key={step.number}>
                <strong>{step.number}</strong>
                <h3>{step.title}</h3>
                <p>{step.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section" id="articles">
        <div className="container">
          <SectionTitle fa="نظرات مشتریان" en="CUSTOMERS COMMENTS" />
          <div className="testimonial-grid">
            {testimonials.map((item) => (
              <article className="quote" key={item.name}>
                <h3>{item.title}</h3>
                <p>{item.body}</p>
                <strong>{item.name}</strong>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="cta">
        <div className="container cta-inner">
          <div className="cta-copy">
            <span>مشاوره خرید تجهیزات شبکه</span>
            <p>برای انتخاب سرور، رم، هارد و تجهیزات شبکه با مشاوران آریا شبکه پیشرو تماس بگیرید؛ بهترین راهکارها با مناسب ترین قیمت ها در اختیار شما قرار می گیرد.</p>
          </div>
          <a className="cta-phone" href="tel:02177133934" aria-label="تماس با کارشناسان آریا شبکه پیشرو">
            <span className="cta-phone-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24">
                <path d="M6.6 10.8c1.5 3 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.2.5 1.2 1.2v3.5c0 .7-.5 1.2-1.2 1.2C10.3 22 2 13.7 2 3.4 2 2.7 2.5 2.2 3.2 2.2h3.5c.7 0 1.2.5 1.2 1.2 0 1.4.2 2.7.6 4 .1.4 0 .9-.3 1.2l-1.6 2.2Z" />
              </svg>
            </span>
            <span>با کارشناسان ما تماس بگیرید</span>
            <strong>۰۲۱۷۷۱۳۳۹۳۴</strong>
          </a>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionTitle fa="مقــــالــات" en="ARTICLES" />
          <div className="article-carousel" aria-label="مقالات">
            {articles.map((article) => (
              <article className="article-card" key={article.title}>
                <div className="article-image">
                  <Image src={article.image} alt={article.title} fill sizes="(max-width: 700px) 78vw, 320px" />
                </div>
                <time>{article.date}</time>
                <h3>{article.title}</h3>
                <p>{article.abstract}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <a className="telegram-float" href={contact.telegram}>تلگرام</a>
    </PageShell>
  );
}

function SectionTitle({ fa, en, light = false, align = "center" }) {
  return (
    <div className={`section-title ${light ? "light" : ""} ${align === "right" ? "right" : ""}`}>
      <span>{en}</span>
      <h2>{fa}</h2>
    </div>
  );
}

function slotStyle(image) {
  return image?.aspectRatio ? { aspectRatio: image.aspectRatio } : undefined;
}