import type { Metadata } from "next";
import {
  ArrowLeft,
  Award,
  CheckCircle2,
  Factory,
  Gauge,
  Globe2,
  Handshake,
  Target,
  Users,
} from "lucide-react";
import Link from "next/link";
import { InteriorFooter, InteriorHeader } from "../components/InteriorShell";

const assetBase = "/assets";

export const metadata: Metadata = {
  title: "درباره سامان اندیش | تجربه تخصصی صنعت سیم و کابل",
  description:
    "با تاریخچه، ارزش‌ها و توانمندی‌های سامان اندیش در تأمین ماشین‌آلات، مواد اولیه و خدمات مهندسی صنعت سیم و کابل، از ارزیابی تا راه‌اندازی آشنا شوید.",
  alternates: {
    canonical: "/about-us",
  },
  openGraph: {
    title: "درباره سامان اندیش | تجربه تخصصی صنعت سیم و کابل",
    description:
      "بیش از دو دهه تجربه در تأمین ماشین‌آلات و ارائه خدمات مهندسی برای خطوط تولید سیم و کابل.",
    url: "/about-us",
    type: "website",
    images: [
      {
        url: "/assets/trEfzlNgmz.jpg",
        alt: "ماشین‌آلات صنعت سیم و کابل سامان اندیش",
      },
    ],
  },
};

export default function AboutUsPage() {
  return (
    <main>
      <InteriorHeader active="about" />

      <section
        className="inner-hero"
        style={{ backgroundImage: `url("${assetBase}/s9zJRbKrhE.jpg")` }}
      >
        <div className="inner-hero__shade" />
        <div className="container inner-hero__content">
          <span>ABOUT SAMAN ANDISH</span>
          <h1>درباره سامان اندیش</h1>
          <p>
            بیش از دو دهه تجربه در پیوند فناوری جهانی با صنعت سیم و کابل ایران
          </p>
          <div>
            <Link href="/">صفحه اصلی</Link>
            <i>/</i>
            <strong>درباره ما</strong>
          </div>
        </div>
      </section>

      <section className="about-intro">
        <div className="container about-intro__grid">
          <div className="about-intro__visual">
            <img
              src={`${assetBase}/trEfzlNgmz.jpg`}
              alt="ماشین‌آلات صنعت سیم و کابل"
            />
            <div>
              <strong dir="ltr">25+</strong>
              <span>سال تجربه تخصصی</span>
            </div>
          </div>
          <div className="about-intro__copy">
            <span className="inner-eyebrow">WHO WE ARE</span>
            <h2>همراه صنعت، از انتخاب تا بهره‌برداری</h2>
            <p className="lead">
              سامان اندیش یک مجموعه مهندسی و بازرگانی تخصصی در حوزه ماشین‌آلات،
              مواد اولیه و خدمات فنی صنعت سیم و کابل است.
            </p>
            <p>
              ما با شناخت عمیق از فرآیندهای تولید و همکاری با سازندگان معتبر
              بین‌المللی، به کارخانه‌ها کمک می‌کنیم مناسب‌ترین راهکار را بر اساس
              ظرفیت تولید، بودجه و برنامه توسعه خود انتخاب کنند. همکاری ما با
              فروش دستگاه پایان نمی‌یابد؛ ارزیابی فنی، حمل، نصب، راه‌اندازی و
              پشتیبانی، بخش جدایی‌ناپذیر تعهد ماست.
            </p>
            <div className="about-checks">
              {[
                "ارزیابی فنی پیش از خرید",
                "شبکه تأمین بین‌المللی",
                "نصب و راه‌اندازی تخصصی",
                "پشتیبانی بلندمدت",
              ].map((item) => (
                <span key={item}>
                  <CheckCircle2 />
                  {item}
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="about-stats">
        <div className="container about-stats__grid">
          {[
            ["۲۵+", "سال تجربه"],
            ["۱۲۰+", "ماشین‌آلات تأمین‌شده"],
            ["۴۰+", "برند بین‌المللی"],
            ["۸۰+", "مشتری صنعتی"],
          ].map(([number, label]) => (
            <div key={label}>
              <strong>{number}</strong>
              <span>{label}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="mission">
        <div className="container">
          <div className="inner-section-title">
            <span>OUR PURPOSE</span>
            <h2>آنچه مسیر ما را می‌سازد</h2>
          </div>
          <div className="mission__grid">
            <article>
              <span>
                <Target />
              </span>
              <small>01</small>
              <h3>ماموریت ما</h3>
              <p>
                ارائه راهکارهای صنعتی قابل اتکا که بهره‌وری، کیفیت و پایداری
                خطوط تولید مشتریان را افزایش دهد.
              </p>
            </article>
            <article>
              <span>
                <Globe2 />
              </span>
              <small>02</small>
              <h3>چشم‌انداز ما</h3>
              <p>
                تبدیل شدن به مرجع نخست تأمین و مهندسی ماشین‌آلات سیم و کابل در
                بازار ایران و منطقه.
              </p>
            </article>
            <article>
              <span>
                <Handshake />
              </span>
              <small>03</small>
              <h3>تعهد ما</h3>
              <p>
                ساختن همکاری شفاف و بلندمدت؛ از نخستین مشاوره تا سال‌ها پس از
                بهره‌برداری تجهیزات.
              </p>
            </article>
          </div>
        </div>
      </section>

      <section className="why-us">
        <div className="container why-us__grid">
          <div className="why-us__copy">
            <span className="inner-eyebrow">WHY SAMAN ANDISH</span>
            <h2>تخصصی که به تصمیم بهتر تبدیل می‌شود</h2>
            <p>
              هر پروژه را با شناخت دقیق نیاز تولید آغاز می‌کنیم و با ترکیب دانش
              فنی، تجربه بازار و دسترسی به تأمین‌کنندگان جهانی، ریسک انتخاب و
              خرید را کاهش می‌دهیم.
            </p>
            <div>
              {[
                [Factory, "شناخت فرآیند تولید", "تحلیل دقیق نیاز هر خط"],
                [Gauge, "تمرکز بر بهره‌وری", "انتخاب اقتصادی و پایدار"],
                [Award, "کیفیت قابل ارزیابی", "بازرسی و مستندسازی فنی"],
                [Users, "تیم همراه", "پاسخ‌گویی در تمام مراحل"],
              ].map(([Icon, title, text]) => {
                const FeatureIcon = Icon as typeof Factory;
                return (
                  <article key={title as string}>
                    <FeatureIcon />
                    <span>
                      <strong>{title as string}</strong>
                      <small>{text as string}</small>
                    </span>
                  </article>
                );
              })}
            </div>
          </div>
          <div className="why-us__image">
            <img
              src={`${assetBase}/rhipZeVqzD.jpg`}
              alt="خدمات مهندسی سامان اندیش"
            />
            <div>
              <strong>راهکار مناسب،</strong>
              <span>برای خط تولید شما</span>
            </div>
          </div>
        </div>
      </section>

      <section className="inner-cta">
        <div className="container">
          <div>
            <span>شروع یک همکاری مطمئن</span>
            <h2>برای توسعه خط تولید خود با ما گفتگو کنید.</h2>
          </div>
          <Link className="button button--white" href="/contact-us">
            تماس با کارشناسان
            <ArrowLeft size={18} />
          </Link>
        </div>
      </section>

      <InteriorFooter />
    </main>
  );
}