"use client";

import { useLucideIcons } from "@/hooks/useLucideIcons";
import { HeroStrip } from "./HeroStrip";

const HERO_BADGES: ReadonlyArray<{ icon: string; label: string }> = [
  { icon: "moon-star", label: "برامج عمرة" },
  { icon: "compass", label: "رحلات دينية" },
  { icon: "sparkles", label: "فعاليات" },
  { icon: "map", label: "سياحة" },
  { icon: "users", label: "تنظيم للمجموعات" },
];

const VIDEO_SRC = "https://scth.scene7.com/is/content/scth/summer-26-video";

export function HeroVideo() {
  useLucideIcons();
  return (
    <section className="hero-video" data-screen-label="01 Hero Video">
      <video autoPlay muted loop playsInline preload="metadata">
        <source src={VIDEO_SRC} type="video/mp4" />
      </video>
      <div className="video-fallback" aria-hidden="true" />
      <div className="ovl ovl-dark" />
      <div className="ovl ovl-brand" />
      <div className="ovl ovl-grain" />
      <div className="ovl ovl-bottom" />

      <div className="hero-content">
        <span className="hero-eyebrow anim-up">
          <span className="pip" />
          <span className="en">
            backyard<span>.</span>
          </span>
          <span>Tours &amp; Events</span>
        </span>
        <h1 className="hero-title anim-up d1">
          رحلات وفعاليات
          <br />
          <span className="accent">بتجربة مختلفة</span>
        </h1>
        <p className="hero-sub anim-up d2">
          اكتشف معنا برامج العمرة، الرحلات الدينية، السياحة، والفعاليات المنظمة للأفراد والمجموعات داخل
          السعودية والخليج.
        </p>
        <div className="hero-ctas anim-up d3">
          <a href="#services" className="btn btn-primary btn-lg">
            استكشف خدماتنا <i data-lucide="arrow-left" />
          </a>
          <a href="/contact" className="btn btn-glass btn-lg">
            تواصل معنا
          </a>
        </div>
        <div className="hero-badges anim-up d4">
          {HERO_BADGES.map((badge) => (
            <span key={badge.icon} className="b">
              <i data-lucide={badge.icon} />
              {badge.label}
            </span>
          ))}
        </div>
      </div>

      <div className="hero-scroll">
        <span>SCROLL</span>
        <span className="line" />
      </div>

      <HeroStrip />
    </section>
  );
}