import Link from "next/link";
import { ArrowLeft, Play } from "lucide-react";
import { features } from "@/data/site";

export function SectionHeading({
  eyebrow,
  englishTitle,
  title,
  description,
  align = "center",
}: {
  eyebrow: string;
  englishTitle?: string;
  title: string;
  description?: string;
  align?: "center" | "start";
}) {
  return (
    <div className={`section-heading ${align === "start" ? "align-start" : ""}`}>
      {eyebrow && <span className="eyebrow">{eyebrow}</span>}
      {englishTitle && <span className="english-title">{englishTitle}</span>}
      <h2>{title}</h2>
      {description && <p>{description}</p>}
    </div>
  );
}

export function Features({ compact = false }: { compact?: boolean }) {
  return (
    <section id="features" className={`features-section ${compact ? "compact" : ""}`}>
      <div className="container">
        {!compact && (
          <SectionHeading
            eyebrow=""
            englishTitle="WHY GLASSMOND"
            title="چرا گلسموند را انتخاب کنیم؟"
            description="کیفیت، ایمنی و طراحی هوشمند؛ سه اصل همیشگی ما در ساخت هر آینه"
          />
        )}
        {compact && <h2 className="sr-only">ویژگی‌های آینه هوشمند گلسموند</h2>}
        <div className="features-grid">
          {features.map((feature) => {
            const Icon = feature.icon;
            return (
              <article className="feature-card" key={feature.number}>
                <span className="feature-number">{feature.number}</span>
                <Icon className="feature-icon" />
                <h3>{feature.title}</h3>
                <p>{feature.description}</p>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

export function VideoBanner() {
  return (
    <section className="video-banner">
      <div className="container video-content">
        <button className="play-button" type="button" aria-label="پخش ویدیوی معرفی گلسموند">
          <Play />
        </button>
        <div>
          <p>آینه گلسموند، حاصل تلاشی سخت برای نتیجه‌ای ماندگار</p>
          <h2>آینه هوشمند گلسموند را بهتر بشناسید</h2>
        </div>
        <Link href="/about" className="outline-button">
          داستان ما
          <ArrowLeft />
        </Link>
      </div>
    </section>
  );
}

export function PageHero({
  englishTitle,
  title,
}: {
  englishTitle: string;
  title: string;
}) {
  return (
    <section className="page-hero">
      <div className="container">
        <span className="page-hero-label">{englishTitle}</span>
        <h1>{title}</h1>
        <div className="breadcrumbs">
          <Link href="/">صفحه اصلی</Link>
          <b>/</b>
          <span>{title}</span>
        </div>
      </div>
    </section>
  );
}