import type { Metadata } from "next";
import Image from "next/image";
import { Droplets, MousePointerClick, ShieldCheck, SunMedium } from "lucide-react";
import { Features, PageHero, SectionHeading, VideoBanner } from "@/components/sections";

export const metadata: Metadata = {
  title: "ویژگی‌ها",
  description:
    "ویژگی‌های آینه هوشمند گلسموند؛ فناوری ضد بخار، نور استاندارد، کنترل لمسی، ایمنی ۱۲ ولت و استاندارد IP64.",
  alternates: { canonical: "/features" },
  openGraph: {
    title: "ویژگی‌های آینه هوشمند گلسموند",
    description:
      "فناوری ضد بخار، نور استاندارد، کنترل لمسی و ایمنی ۱۲ ولت را بیشتر بشناسید.",
    url: "/features",
    images: ["/images/about/gallery-2.jpg"],
  },
};

const technologies = [
  {
    icon: Droplets,
    english: "ANTI-FOG",
    title: "فناوری ضد بخار",
    description:
      "گرمایش یکنواخت سطح آینه، دیدی شفاف و بدون بخار را در فضای مرطوب حمام حفظ می‌کند.",
  },
  {
    icon: SunMedium,
    english: "SMART LIGHT",
    title: "نورپردازی استاندارد",
    description:
      "نور یکدست و کاربردی برای اصلاح، آرایش و استفاده روزمره، بدون ایجاد سایه‌های مزاحم.",
  },
  {
    icon: MousePointerClick,
    english: "TOUCH CONTROL",
    title: "کنترل لمسی",
    description:
      "کلیدهای لمسی هوشمند با دسترسی سریع و ظاهری مینیمال، هماهنگ با طراحی یکپارچه آینه.",
  },
  {
    icon: ShieldCheck,
    english: "SAFE POWER",
    title: "ایمنی ۱۲ ولت",
    description:
      "استفاده از برق ۱۲ ولت و استاندارد IP64 برای کاهش مصرف انرژی و افزایش ایمنی در محیط مرطوب.",
  },
];

export default function FeaturesPage() {
  return (
    <>
      <PageHero englishTitle="FEATURES" title="ویژگی‌های آینه هوشمند گلسموند" />

      <section className="features-intro">
        <div className="container features-intro-grid">
          <div className="features-intro-image">
            <Image
              src="/images/about/gallery-2.jpg"
              alt="جزئیات آینه هوشمند گلسموند"
              fill
              sizes="(max-width: 860px) 100vw, 50vw"
              priority
            />
            <span>GLASSMOND</span>
          </div>

          <div className="features-intro-copy">
            <SectionHeading
              eyebrow=""
              englishTitle="SMART TECHNOLOGY"
              title="هوشمندی در تمام جزئیات"
              align="start"
            />
            <p>
              آینه‌های گلسموند با تمرکز بر ایمنی، دوام و تجربه استفاده روزمره
              طراحی شده‌اند. فناوری ضد بخار، نور استاندارد و کنترل لمسی در ساختاری
              یکپارچه قرار گرفته‌اند تا محصول در عین زیبایی، کاملا کاربردی باشد.
            </p>
            <div className="feature-specs">
              <div>
                <strong>IP64</strong>
                <span>مقاوم در برابر نفوذ آب و بخار</span>
              </div>
              <div>
                <strong>۱۲V</strong>
                <span>ایمن و کم‌مصرف</span>
              </div>
              <div>
                <strong>۱۰</strong>
                <span>سال خدمات پس از فروش</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Features />

      <section className="technology-section">
        <div className="container">
          <SectionHeading
            eyebrow=""
            englishTitle="CORE FEATURES"
            title="تکنولوژی برای آسایش بیشتر"
            description="هر قابلیت با هدف استفاده ساده‌تر، ایمن‌تر و ماندگارتر طراحی شده است."
          />
          <div className="technology-grid">
            {technologies.map((item, index) => {
              const Icon = item.icon;
              return (
                <article key={item.english}>
                  <span className="technology-number">{String(index + 1).padStart(2, "0")}</span>
                  <Icon />
                  <small>{item.english}</small>
                  <h3>{item.title}</h3>
                  <p>{item.description}</p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <VideoBanner />
    </>
  );
}