"use client";

import {
  ArrowLeft,
  ArrowUpLeft,
  BriefcaseBusiness,
  Camera,
  ChevronLeft,
  ChevronRight,
  CircleUserRound,
  FlaskConical,
  Gauge,
  Globe2,
  Link as LinkIcon,
  Mail,
  MapPin,
  Menu,
  MessageCircle,
  Phone,
  Search,
  Settings,
  ShieldCheck,
  SlidersHorizontal,
  Sparkles,
  X,
} from "lucide-react";
import NextLink from "next/link";
import type { FormEvent } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import {
  cssAspectRatio,
  fetchHomeStaticImageSlots,
  fetchLatestProducts,
  productPath,
  type Product,
  type StaticImageSlot,
} from "./lib/meshkee";
import HeaderNavigation from "./components/HeaderNavigation";

const assetBase = "/assets";

type HeroSlide = {
  image: string;
  eyebrow: string;
  title: string;
  text: string;
  linkUrl?: string;
  aspectRatio?: string;
};

const heroSlides: HeroSlide[] = [
  {
    image: `${assetBase}/i8SsUDDMLv.jpg`,
    eyebrow: "WIRE & CABLE MACHINERY",
    title: "تجربه‌ای مطمئن در تأمین ماشین‌آلات صنعتی",
    text: "راهکارهای تخصصی برای خطوط تولید سیم و کابل؛ از انتخاب و خرید تا نصب و راه‌اندازی.",
  },
  {
    image: `${assetBase}/s9zJRbKrhE.jpg`,
    eyebrow: "ENGINEERING THE FUTURE",
    title: "مهندسی دقیق، عملکرد ماندگار",
    text: "دسترسی به برندهای معتبر جهانی و مشاوره فنی متناسب با نیاز خط تولید شما.",
  },
  {
    image: `${assetBase}/ZLxH2tZ4dR.jpg`,
    eyebrow: "SAMAN ANDISH CO.",
    title: "یک مسیر کوتاه‌تر تا خط تولید بهتر",
    text: "ماشین‌آلات نو و کارکرده، مواد اولیه و خدمات مهندسی در یک مجموعه تخصصی.",
  },
];

const categories = [
  {
    title: "ماشین‌آلات",
    en: "MACHINERY",
    image: `${assetBase}/MDJVsqMgHe.jpg`,
    count: "+۱۲۰ دستگاه",
  },
  {
    title: "خدمات فنی و مهندسی",
    en: "TECHNICAL SERVICES",
    image: `${assetBase}/68atRerNly.jpg`,
    count: "از طراحی تا اجرا",
  },
  {
    title: "مواد اولیه",
    en: "RAW MATERIALS",
    image: `${assetBase}/yxEFuyUDrT.jpg`,
    count: "تأمین تخصصی",
  },
];

type DisplayProduct = {
  id: string;
  title: string;
  en: string;
  category: string;
  image: string;
  code: string;
  href: string;
};

const fallbackProducts: DisplayProduct[] = [
  {
    id: "fallback-1",
    title: "دستگاه کوادینگ ۶۰۰ میلی‌متر",
    en: "600mm Quadding Machine | QUA-21 | LESMO",
    category: "دستگاه تابنده",
    image: `${assetBase}/product-quadding.jpg`,
    code: "LESMO / QUA-21",
    href: "#products",
  },
  {
    id: "fallback-2",
    title: "بریدر ۱۶ کریر",
    en: "16 Carriers Braider | 16N4 | SPIRKA",
    category: "دستگاه بافنده",
    image: `${assetBase}/product-braider.jpg`,
    code: "SPIRKA / 16N4",
    href: "#products",
  },
  {
    id: "fallback-3",
    title: "خط کشش ۰.۵–۰.۱۵ میلی‌متر",
    en: "0.15–0.5 SQmm Drawing Line | TRB3 | SAMP",
    category: "دستگاه کشش",
    image: `${assetBase}/product-drawing-line.jpg`,
    code: "SAMP / TRB3",
    href: "#products",
  },
  {
    id: "fallback-4",
    title: "پی‌آف ۶۰۰ میلی‌متر",
    en: "600mm Pay Off | TAP D-0800 | KDM",
    category: "دستگاه پی‌آف",
    image: `${assetBase}/product-payoff.jpg`,
    code: "KDM / TAP D-0800",
    href: "#products",
  },
];

function toDisplayProduct(product: Product, index: number): DisplayProduct {
  const fallback = fallbackProducts[index % fallbackProducts.length];
  const brand =
    typeof product.brand === "string"
      ? product.brand
      : product.brand?.nameFa || product.brand?.name;

  return {
    id: product.id,
    title: product.nameFa || product.title,
    en: product.title,
    category:
      product.categoryNameFa || product.categoryName || "ماشین‌آلات صنعتی",
    image:
      product.thumbnailUrl ||
      product.thumbnail ||
      product.image ||
      fallback.image,
    code: brand || product.categoryName || "SAMAN ANDISH",
    href: productPath(product),
  };
}

const news = [
  {
    title: "شرکت مهندسی، مشاوره و بازرگانی HService",
    date: "۰۸ خرداد ۱۴۰۲",
    image: `${assetBase}/news-hservice.jpg`,
    tag: "همکاری تجاری",
  },
  {
    title: "نمایشگاه‌های تجاری پیشرو Wire و Tube",
    date: "۲۴ اردیبهشت ۱۴۰۲",
    image: `${assetBase}/news-wire-tube.jpg`,
    tag: "رویداد",
  },
  {
    title: "انرژی پاک و بازار گواهی انرژی تجدیدپذیر",
    date: "۱۲ اردیبهشت ۱۴۰۲",
    image: `${assetBase}/news-green-energy.jpg`,
    tag: "دانش فنی",
  },
];

const customerLogos = [
  "JkHpH80NQA.png",
  "StBGKS3FHm.png",
  "GAQiN0WIK5.png",
  "lRkE9W3Pi0.png",
  "mTdHxPHztj.png",
  "JcGMFJ8Tv5.png",
  "WIvmqxoUPv.png",
  "XhaGH9MU5o.png",
  "PypItIBoI0.png",
  "0Y6asKSTsI.png",
];

function SectionTitle({
  eyebrow,
  title,
  light = false,
}: {
  eyebrow: string;
  title: string;
  light?: boolean;
}) {
  return (
    <div className={`section-title ${light ? "section-title--light" : ""}`}>
      <span>{eyebrow}</span>
      <h2>{title}</h2>
      <i />
    </div>
  );
}

export default function Home() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [activeSlide, setActiveSlide] = useState(0);
  const [query, setQuery] = useState("");
  const [searchOpen, setSearchOpen] = useState(false);
  const [staticImageSlots, setStaticImageSlots] = useState<StaticImageSlot[]>([]);
  const [displayProducts, setDisplayProducts] =
    useState<DisplayProduct[]>(fallbackProducts);
  const searchInput = useRef<HTMLInputElement>(null);

  const slotsByKey = useMemo(
    () => new Map(staticImageSlots.map((slot) => [slot.key, slot])),
    [staticImageSlots],
  );

  const activeHeroSlides = useMemo<HeroSlide[]>(() => {
    const slot = slotsByKey.get("slider");
    if (!slot?.images.length) return heroSlides;

    return slot.images.map((image, index) => {
      const fallback = heroSlides[index % heroSlides.length];
      return {
        image: image.url || fallback.image,
        eyebrow: image.titleEn || fallback.eyebrow,
        title: image.titleFa || fallback.title,
        text: image.subtext || fallback.text,
        linkUrl: image.linkUrl || undefined,
        aspectRatio: cssAspectRatio(slot.aspectRatio),
      };
    });
  }, [slotsByKey]);

  const activeCategories = useMemo(() => {
    const slot = slotsByKey.get("three-categories");
    return categories.map((fallback, index) => {
      const image = slot?.images[index];
      if (!image) {
        return {
          ...fallback,
          linkUrl: undefined,
          aspectRatio: undefined,
        };
      }

      return {
        ...fallback,
        image: image.url || fallback.image,
        title: image.titleFa || fallback.title,
        en: image.titleEn || fallback.en,
        count: image.subtext || fallback.count,
        linkUrl: image.linkUrl || undefined,
        aspectRatio: cssAspectRatio(slot?.aspectRatio),
      };
    });
  }, [slotsByKey]);

  const aboutImages = slotsByKey.get("about-us-images");
  const aboutMainImage = aboutImages?.images[0];
  const aboutSecondaryImage = aboutImages?.images[1];
  const activeHeroIndex = activeSlide % activeHeroSlides.length;
  const activeHero = activeHeroSlides[activeHeroIndex];

  useEffect(() => {
    const controller = new AbortController();

    fetchHomeStaticImageSlots(controller.signal)
      .then(setStaticImageSlots)
      .catch(() => {
        // Keep the local image fallbacks when the API is unavailable.
      });

    fetchLatestProducts(4, controller.signal)
      .then((items) => {
        if (items.length) setDisplayProducts(items.map(toDisplayProduct));
      })
      .catch(() => {
        // Keep the local product fallbacks when the API is unavailable.
      });

    return () => controller.abort();
  }, []);

  useEffect(() => {
    if (activeHeroSlides.length <= 1) return;

    const timer = window.setInterval(
      () =>
        setActiveSlide((current) => (current + 1) % activeHeroSlides.length),
      6500,
    );
    return () => window.clearInterval(timer);
  }, [activeHeroSlides.length]);

  const results = useMemo(() => {
    const normalized = query.trim().toLowerCase();
    if (!normalized) return displayProducts.slice(0, 3);
    return displayProducts.filter((product) =>
      [product.title, product.en, product.category, product.code]
        .join(" ")
        .toLowerCase()
        .includes(normalized),
    );
  }, [displayProducts, query]);

  const focusSearch = () => {
    document.getElementById("smart-search")?.scrollIntoView({
      behavior: "smooth",
      block: "center",
    });
    window.setTimeout(() => {
      searchInput.current?.focus();
      setSearchOpen(true);
    }, 500);
  };

  const submitSearch = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSearchOpen(true);
  };

  return (
    <main>
      <div className="topbar">
        <div className="container topbar__inner">
          <p>
            <Sparkles size={14} />
            شریک تخصصی صنعت سیم و کابل ایران
          </p>
          <div>
            <a href="mailto:info@samanandish.com">
              <Mail size={14} />
              info@samanandish.com
            </a>
            <span />
            <a href="tel:+982188530256" dir="ltr">
              <Phone size={14} />
              +98 21 8853 0256
            </a>
          </div>
        </div>
      </div>

      <header className="header">
        <div className="container header__inner">
          <a className="logo" href="#" aria-label="سامان اندیش">
            <img src={`${assetBase}/KN83Drb6oI.png`} alt="سامان اندیش" />
          </a>
          <HeaderNavigation
            active="home"
            mobileOpen={mobileOpen}
            onNavigate={() => setMobileOpen(false)}
          />
          <div className="header__actions">
            <button className="icon-button" onClick={focusSearch} aria-label="جستجو">
              <Search size={22} />
            </button>
            <button className="icon-button user-button" aria-label="حساب کاربری">
              <CircleUserRound size={22} />
            </button>
            <a className="header__cta" href="/contact-us">
              درخواست مشاوره
              <ArrowUpLeft size={17} />
            </a>
            <button
              className="mobile-toggle"
              onClick={() => setMobileOpen((open) => !open)}
              aria-label="منو"
            >
              {mobileOpen ? <X /> : <Menu />}
            </button>
          </div>
        </div>
      </header>

      <section className="hero">
        {activeHeroSlides.map((slide, index) => (
          <div
            className={`hero__slide ${index === activeHeroIndex ? "is-active" : ""}`}
            key={`${slide.image}-${index}`}
            style={{ aspectRatio: slide.aspectRatio }}
          >
            {slide.linkUrl ? (
              <a
                className="hero__slide-link"
                href={slide.linkUrl}
                aria-label={slide.title}
              >
                <img src={slide.image} alt={slide.title} />
              </a>
            ) : (
              <img src={slide.image} alt={slide.title} />
            )}
          </div>
        ))}
        <div className="hero__overlay" />
        <div className="hero__pattern" />
        <div className="container hero__content">
          <div className="hero__copy">
            <p className="eyebrow">{activeHero.eyebrow}</p>
            <h1>{activeHero.title}</h1>
            <p className="hero__description">{activeHero.text}</p>
            <div className="hero__buttons">
              <NextLink className="button button--red" href="/products">
                مشاهده محصولات
                <ArrowLeft size={19} />
              </NextLink>
              <a className="button button--glass" href="/about-us">
                درباره سامان اندیش
              </a>
            </div>
          </div>
          <div className="hero__stats" dir="ltr">
            <div>
              <strong>25+</strong>
              <span>YEARS EXPERIENCE</span>
            </div>
            <i />
            <div>
              <strong>120+</strong>
              <span>INDUSTRIAL MACHINES</span>
            </div>
          </div>
        </div>
        <div className="hero__controls">
          <button
            onClick={() =>
              setActiveSlide(
                (activeHeroIndex - 1 + activeHeroSlides.length) %
                  activeHeroSlides.length,
              )
            }
            aria-label="اسلاید قبلی"
          >
            <ChevronRight />
          </button>
          <div>
            {activeHeroSlides.map((slide, index) => (
              <button
                className={index === activeHeroIndex ? "active" : ""}
                key={`${slide.image}-${index}`}
                onClick={() => setActiveSlide(index)}
                aria-label={`اسلاید ${index + 1}`}
              />
            ))}
          </div>
          <button
            onClick={() =>
              setActiveSlide((activeHeroIndex + 1) % activeHeroSlides.length)
            }
            aria-label="اسلاید بعدی"
          >
            <ChevronLeft />
          </button>
        </div>
      </section>

      <section className="search-panel" id="smart-search">
        <div className="container">
          <div className="search-card">
            <div className="search-card__title">
              <span>
                <Search size={26} />
              </span>
              <div>
                <strong>دنبال چه دستگاهی هستید؟</strong>
                <small>نام، مدل، برند یا دسته‌بندی را وارد کنید</small>
              </div>
            </div>
            <form onSubmit={submitSearch}>
              <input
                ref={searchInput}
                type="search"
                value={query}
                onChange={(event) => {
                  setQuery(event.target.value);
                  setSearchOpen(true);
                }}
                onFocus={() => setSearchOpen(true)}
                placeholder="مثلاً اکسترودر، دستگاه کشش یا Maillefer..."
              />
              <button type="submit">
                جستجوی محصولات
                <Search size={18} />
              </button>
            </form>
            <div className="quick-search">
              <span>جستجوی سریع:</span>
              {["اکسترودر", "دستگاه کشش", "تیک‌آپ", "پی‌آف"].map((item) => (
                <button
                  key={item}
                  onClick={() => {
                    setQuery(item);
                    setSearchOpen(true);
                  }}
                >
                  {item}
                </button>
              ))}
            </div>
            {searchOpen && (
              <div className="search-results">
                <div className="search-results__head">
                  <span>{results.length} نتیجه پیشنهادی</span>
                  <button onClick={() => setSearchOpen(false)} aria-label="بستن">
                    <X size={17} />
                  </button>
                </div>
                {results.length ? (
                  results.map((product) => (
                    <NextLink href={product.href} key={product.id}>
                      <img src={product.image} alt={product.title} />
                      <div>
                        <strong>{product.title}</strong>
                        <small dir="ltr">{product.en}</small>
                      </div>
                      <span>{product.category}</span>
                      <ChevronLeft size={18} />
                    </NextLink>
                  ))
                ) : (
                  <div className="empty-result">
                    دستگاهی با این مشخصات پیدا نشد؛ برای راهنمایی با ما تماس بگیرید.
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="categories" id="services">
        <div className="container">
          <SectionTitle
            eyebrow="OUR EXPERTISE"
            title="سه مسیر، یک راهکار کامل صنعتی"
          />
          <div className="category-grid">
            {activeCategories.map((category, index) => (
              <a
                className="category-card"
                href={category.linkUrl || "#"}
                key={`${category.title}-${index}`}
                style={
                  category.aspectRatio
                    ? { aspectRatio: category.aspectRatio, height: "auto" }
                    : undefined
                }
              >
                <img src={category.image} alt={category.title} />
                <div className="category-card__shade" />
                <span className="category-card__number">0{index + 1}</span>
                <div className="category-card__content">
                  <small>{category.en}</small>
                  <h3>{category.title}</h3>
                  <p>{category.count}</p>
                </div>
                <i>
                  <ArrowUpLeft />
                </i>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="products section-gray" id="products">
        <div className="container">
          <div className="section-heading-row">
            <SectionTitle eyebrow="LATEST MACHINERY" title="جدیدترین ماشین‌آلات" />
            <NextLink className="text-link" href="/products">
              مشاهده همه محصولات
              <ArrowLeft size={18} />
            </NextLink>
          </div>
          <div className="product-grid">
            {displayProducts.map((product) => (
              <article className="product-card" key={product.id}>
                <NextLink className="product-card__image" href={product.href}>
                  <img src={product.image} alt={product.title} />
                  <span>جدیدترین</span>
                  <i>
                    <ArrowUpLeft />
                  </i>
                </NextLink>
                <div className="product-card__body">
                  <small>{product.category}</small>
                  <h3>
                    <NextLink href={product.href}>{product.title}</NextLink>
                  </h3>
                  <p dir="ltr">{product.en}</p>
                  <div>
                    <code>{product.code}</code>
                    <a href="tel:+982188530256">
                      استعلام قیمت
                      <Phone size={15} />
                    </a>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="about" id="about">
        <div className="container about__grid">
          <div className="about__visual">
            {aboutMainImage?.linkUrl ? (
              <a
                className="about__main-image"
                href={aboutMainImage.linkUrl}
                style={{
                  aspectRatio: cssAspectRatio(aboutImages?.aspectRatio),
                }}
              >
                <img
                  src={aboutMainImage.url}
                  alt={aboutMainImage.titleFa || "تجهیزات صنعتی سامان اندیش"}
                />
              </a>
            ) : (
              <img
                src={aboutMainImage?.url || `${assetBase}/trEfzlNgmz.jpg`}
                alt={aboutMainImage?.titleFa || "تجهیزات صنعتی سامان اندیش"}
                style={
                  aboutMainImage
                    ? {
                        aspectRatio: cssAspectRatio(aboutImages?.aspectRatio),
                        height: "auto",
                      }
                    : undefined
                }
              />
            )}
            <div
              className="about__small-image"
              style={
                aboutSecondaryImage
                  ? {
                      aspectRatio: cssAspectRatio(aboutImages?.aspectRatio),
                      height: "auto",
                    }
                  : undefined
              }
            >
              {aboutSecondaryImage?.linkUrl ? (
                <a href={aboutSecondaryImage.linkUrl}>
                  <img
                    src={aboutSecondaryImage.url}
                    alt={aboutSecondaryImage.titleFa || "ماشین‌آلات صنعت کابل"}
                  />
                </a>
              ) : (
                <img
                  src={
                    aboutSecondaryImage?.url || `${assetBase}/rhipZeVqzD.jpg`
                  }
                  alt={
                    aboutSecondaryImage?.titleFa || "ماشین‌آلات صنعت کابل"
                  }
                />
              )}
            </div>
            <div className="experience-badge">
              <strong>۲۵</strong>
              <span>سال تجربه تخصصی</span>
            </div>
          </div>
          <div className="about__content">
            <SectionTitle eyebrow="ABOUT SAMAN ANDISH" title="فراتر از تأمین‌کننده ماشین‌آلات" />
            <p className="about__lead">
              سامان اندیش، همراه فنی و تجاری تولیدکنندگان سیم و کابل در انتخاب
              هوشمندانه تجهیزات و توسعه خطوط تولید است.
            </p>
            <p>
              با تکیه بر تجربه اجرایی، شبکه بین‌المللی و شناخت دقیق فرآیندهای
              تولید، راهکاری متناسب با ظرفیت، بودجه و اهداف هر کارخانه ارائه
              می‌کنیم.
            </p>
            <div className="about__features">
              <div>
                <ShieldCheck />
                <span>
                  <strong>تضمین اصالت</strong>
                  ارزیابی فنی پیش از خرید
                </span>
              </div>
              <div>
                <Settings />
                <span>
                  <strong>پشتیبانی اجرایی</strong>
                  نصب، راه‌اندازی و آموزش
                </span>
              </div>
            </div>
            <a className="button button--navy" href="/about-us">
              بیشتر درباره ما
              <ArrowLeft size={18} />
            </a>
          </div>
        </div>
      </section>

      <section className="values">
        <div className="container values__grid">
          {[
            [Globe2, "رقابت در بازار جهانی", "GLOBAL COMPETITION"],
            [Gauge, "کیفیت استاندارد", "STANDARD QUALITY"],
            [BriefcaseBusiness, "مهندسی نوآورانه", "SMART ENGINEERING"],
            [FlaskConical, "تکنولوژی پیشرفته", "ADVANCED TECHNOLOGY"],
          ].map(([Icon, title, en], index) => {
            const ValueIcon = Icon as typeof Globe2;
            return (
              <div className="value-card" key={title as string}>
                <span>0{index + 1}</span>
                <ValueIcon />
                <h3>{title as string}</h3>
                <p>{en as string}</p>
              </div>
            );
          })}
        </div>
      </section>

      <section className="news" id="news">
        <div className="container">
          <div className="section-heading-row">
            <SectionTitle eyebrow="INSIGHTS & NEWS" title="دانش روز صنعت" />
            <a className="text-link" href="#">
              مشاهده همه اخبار
              <ArrowLeft size={18} />
            </a>
          </div>
          <div className="news-grid">
            {news.map((item, index) => (
              <article className={`news-card ${index === 0 ? "news-card--featured" : ""}`} key={item.title}>
                <a className="news-card__image" href="#">
                  <img src={item.image} alt={item.title} />
                </a>
                <div className="news-card__body">
                  <div>
                    <span>{item.tag}</span>
                    <time>{item.date}</time>
                  </div>
                  <h3>{item.title}</h3>
                  <p>
                    تازه‌ترین تحولات، فناوری‌ها و رویدادهای تخصصی صنعت سیم و
                    کابل را با تحلیل کارشناسان سامان اندیش دنبال کنید.
                  </p>
                  <a href="#">
                    ادامه مطلب
                    <ArrowLeft size={17} />
                  </a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="customers">
        <div className="container">
          <SectionTitle eyebrow="TRUSTED BY INDUSTRY" title="مشتریان ما" />
          <div className="logo-marquee">
            <div>
              {[...customerLogos, ...customerLogos].map((logo, index) => (
                <span key={`${logo}-${index}`}>
                  <img src={`${assetBase}/${logo}`} alt="نشان مشتری سامان اندیش" />
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="cta-strip">
        <div className="container cta-strip__inner">
          <div>
            <SlidersHorizontal />
            <span>
              <small>برای ارتقای خط تولید آماده‌اید؟</small>
              <strong>ماشین مناسب را با کمک متخصصان ما پیدا کنید.</strong>
            </span>
          </div>
          <a className="button button--white" href="/contact-us">
            شروع گفتگو
            <ArrowLeft size={18} />
          </a>
        </div>
      </section>

      <footer className="footer" id="contact">
        <div className="footer__pattern" />
        <div className="container footer__grid">
          <div className="footer__brand">
            <img src={`${assetBase}/4eEq8S7FxV.png`} alt="سامان اندیش" />
            <p>
              تأمین‌کننده تخصصی ماشین‌آلات و راهکارهای فنی صنعت سیم و کابل، با
              تمرکز بر کیفیت، بهره‌وری و همکاری بلندمدت.
            </p>
            <div>
              <a href="#" aria-label="اینستاگرام">
                <Camera />
              </a>
              <a href="#" aria-label="لینکدین">
                <LinkIcon />
              </a>
              <a href="#" aria-label="تلگرام">
                <MessageCircle />
              </a>
            </div>
          </div>
          <div className="footer__links">
            <h3>دسترسی سریع</h3>
            <a href="#">صفحه اصلی</a>
            <NextLink href="/products">ماشین‌آلات</NextLink>
            <a href="#news">اخبار و مقالات</a>
            <a href="/about-us">درباره ما</a>
            <a href="/contact-us">تماس با ما</a>
          </div>
          <div className="footer__links">
            <h3>خدمات ما</h3>
            <a href="#">تأمین ماشین‌آلات</a>
            <a href="#">خدمات فنی و مهندسی</a>
            <a href="#">مواد اولیه</a>
            <a href="/contact-us">مشاوره خرید</a>
          </div>
          <div className="footer__contact">
            <h3>با ما در ارتباط باشید</h3>
            <a href="tel:+982188530256">
              <span>
                <Phone />
              </span>
              <div>
                <small>شماره تماس</small>
                <strong dir="ltr">021 8853 0256</strong>
              </div>
            </a>
            <a href="mailto:info@samanandish.com">
              <span>
                <Mail />
              </span>
              <div>
                <small>ایمیل</small>
                <strong>info@samanandish.com</strong>
              </div>
            </a>
            <div className="address">
              <span>
                <MapPin />
              </span>
              <p>تهران، خیابان مطهری، خیابان ترکمنستان</p>
            </div>
          </div>
        </div>
        <div className="container footer__bottom">
          <p>© ۱۴۰۵ سامان اندیش — تمامی حقوق محفوظ است.</p>
          <span dir="ltr">ENGINEERED FOR INDUSTRY</span>
        </div>
      </footer>
    </main>
  );
}