saman-andish/app/page.tsx

"use client";

import {
  ArrowLeft,
  ArrowUpLeft,
  BriefcaseBusiness,
  Camera,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  CircleUserRound,
  FlaskConical,
  Gauge,
  Globe2,
  Link,
  Mail,
  MapPin,
  Menu,
  MessageCircle,
  Phone,
  Search,
  Settings,
  ShieldCheck,
  SlidersHorizontal,
  Sparkles,
  X,
} from "lucide-react";
import type { FormEvent } from "react";
import { useEffect, useMemo, useRef, useState } from "react";

const assetBase =
  "https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/SamanAndish_OcHaRXRqAo/assets/files";

const heroSlides = [
  {
    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: "تأمین تخصصی",
  },
];

const products = [
  {
    id: 1,
    title: "دستگاه کوادینگ ۶۰۰ میلی‌متر",
    en: "600mm Quadding Machine | QUA-21 | LESMO",
    category: "دستگاه تابنده",
    image:
      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/b597976c3ce6012f3a07e9f5c71a3c8c/conversions/WhatsApp-Image-2021-11-13-at-16.48.24-thumbnail.jpg",
    code: "LESMO / QUA-21",
  },
  {
    id: 2,
    title: "بریدر ۱۶ کریر",
    en: "16 Carriers Braider | 16N4 | SPIRKA",
    category: "دستگاه بافنده",
    image:
      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/24128c84241513596a1be1534a791c3b/conversions/IMG_20210911_125416-thumbnail.jpg",
    code: "SPIRKA / 16N4",
  },
  {
    id: 3,
    title: "خط کشش ۰.۵–۰.۱۵ میلی‌متر",
    en: "0.15–0.5 SQmm Drawing Line | TRB3 | SAMP",
    category: "دستگاه کشش",
    image:
      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/74e48c1a38cb4022d50c45dbd3be1f9a/conversions/WhatsApp-Image-2021-11-13-at-13.48.57-thumbnail.jpg",
    code: "SAMP / TRB3",
  },
  {
    id: 4,
    title: "پی‌آف ۶۰۰ میلی‌متر",
    en: "600mm Pay Off | TAP D-0800 | KDM",
    category: "دستگاه پی‌آف",
    image:
      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/86a2ebc1d9ebc0d693437b61502e03ce/conversions/Picture1-thumbnail.jpg",
    code: "KDM / TAP D-0800",
  },
];

const news = [
  {
    title: "شرکت مهندسی، مشاوره و بازرگانی HService",
    date: "۰۸ خرداد ۱۴۰۲",
    image:
      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/2f19d9aa2413f3265b58d130ca4865ea/conversions/SATV---Weblog-Cover-thumbnail.jpg",
    tag: "همکاری تجاری",
  },
  {
    title: "نمایشگاه‌های تجاری پیشرو Wire و Tube",
    date: "۲۴ اردیبهشت ۱۴۰۲",
    image:
      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/2434bffa9a1ba2b3f857680a8fbb5b4f/conversions/SATV---Blog-Cover---Wire-&-Tube-2022-thumbnail.jpg",
    tag: "رویداد",
  },
  {
    title: "انرژی پاک و بازار گواهی انرژی تجدیدپذیر",
    date: "۱۲ اردیبهشت ۱۴۰۲",
    image:
      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/862690c612c4c41a2ddceb9bf7a5c848/conversions/SATV---Blog-Cover---Green-Energy-thumbnail.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 searchInput = useRef<HTMLInputElement>(null);

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

  const results = useMemo(() => {
    const normalized = query.trim().toLowerCase();
    if (!normalized) return products.slice(0, 3);
    return products.filter((product) =>
      [product.title, product.en, product.category, product.code]
        .join(" ")
        .toLowerCase()
        .includes(normalized),
    );
  }, [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>
          <nav className="desktop-nav" aria-label="ناوبری اصلی">
            <a className="active" href="#">
              صفحه اصلی
            </a>
            <a href="#products">
              محصولات
              <ChevronDown size={14} />
            </a>
            <a href="#services">خدمات</a>
            <a href="#news">اخبار</a>
            <a href="/about-us">درباره ما</a>
            <a href="/contact-us">تماس با ما</a>
          </nav>
          <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>
        {mobileOpen && (
          <nav className="mobile-nav">
            {[
              ["صفحه اصلی", "#"],
              ["محصولات", "#products"],
              ["خدمات", "#services"],
              ["اخبار", "#news"],
              ["درباره ما", "/about-us"],
              ["تماس با ما", "/contact-us"],
            ].map(([label, href]) => (
                <a key={label} href={href} onClick={() => setMobileOpen(false)}>
                  {label}
                  <ChevronLeft size={17} />
                </a>
              ))}
          </nav>
        )}
      </header>

      <section className="hero">
        {heroSlides.map((slide, index) => (
          <div
            className={`hero__slide ${index === activeSlide ? "is-active" : ""}`}
            key={slide.image}
            style={{ backgroundImage: `url("${slide.image}")` }}
          />
        ))}
        <div className="hero__overlay" />
        <div className="hero__pattern" />
        <div className="container hero__content">
          <div className="hero__copy">
            <p className="eyebrow">{heroSlides[activeSlide].eyebrow}</p>
            <h1>{heroSlides[activeSlide].title}</h1>
            <p className="hero__description">{heroSlides[activeSlide].text}</p>
            <div className="hero__buttons">
              <a className="button button--red" href="#products">
                مشاهده محصولات
                <ArrowLeft size={19} />
              </a>
              <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(
                (activeSlide - 1 + heroSlides.length) % heroSlides.length,
              )
            }
            aria-label="اسلاید قبلی"
          >
            <ChevronRight />
          </button>
          <div>
            {heroSlides.map((slide, index) => (
              <button
                className={index === activeSlide ? "active" : ""}
                key={slide.image}
                onClick={() => setActiveSlide(index)}
                aria-label={`اسلاید ${index + 1}`}
              />
            ))}
          </div>
          <button
            onClick={() => setActiveSlide((activeSlide + 1) % heroSlides.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) => (
                    <a href="#products" key={product.id}>
                      <img src={product.image} alt="" />
                      <div>
                        <strong>{product.title}</strong>
                        <small dir="ltr">{product.en}</small>
                      </div>
                      <span>{product.category}</span>
                      <ChevronLeft size={18} />
                    </a>
                  ))
                ) : (
                  <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">
            {categories.map((category, index) => (
              <a className="category-card" href="#" key={category.title}>
                <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="SPECIAL MACHINERY" title="ماشین‌آلات منتخب" />
            <a className="text-link" href="#">
              مشاهده همه محصولات
              <ArrowLeft size={18} />
            </a>
          </div>
          <div className="product-grid">
            {products.map((product) => (
              <article className="product-card" key={product.id}>
                <a className="product-card__image" href="#">
                  <img src={product.image} alt={product.title} />
                  <span>فروش ویژه</span>
                  <i>
                    <ArrowUpLeft />
                  </i>
                </a>
                <div className="product-card__body">
                  <small>{product.category}</small>
                  <h3>{product.title}</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">
            <img src={`${assetBase}/trEfzlNgmz.jpg`} alt="تجهیزات صنعتی سامان اندیش" />
            <div className="about__small-image">
              <img src={`${assetBase}/rhipZeVqzD.jpg`} alt="ماشین‌آلات صنعت کابل" />
            </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="لینکدین">
                <Link />
              </a>
              <a href="#" aria-label="تلگرام">
                <MessageCircle />
              </a>
            </div>
          </div>
          <div className="footer__links">
            <h3>دسترسی سریع</h3>
            <a href="#">صفحه اصلی</a>
            <a href="#products">ماشین‌آلات</a>
            <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>
  );
}