"use client";

import {
  ArrowUpLeft,
  Camera,
  ChevronLeft,
  CircleUserRound,
  Link as LinkIcon,
  Mail,
  MapPin,
  Menu,
  MessageCircle,
  Phone,
  Search,
  Sparkles,
  X,
} from "lucide-react";
import Link from "next/link";
import { useState } from "react";

const assetBase = "/assets";

const navItems = [
  { label: "صفحه اصلی", href: "/" },
  { label: "محصولات", href: "/#products" },
  { label: "خدمات", href: "/#services" },
  { label: "اخبار", href: "/#news" },
  { label: "درباره ما", href: "/about-us", key: "about" },
  { label: "تماس با ما", href: "/contact-us", key: "contact" },
];

export function InteriorHeader({
  active,
}: {
  active?: "about" | "contact";
}) {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <>
      <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">
          <Link className="logo" href="/" aria-label="سامان اندیش">
            <img src={`${assetBase}/KN83Drb6oI.png`} alt="سامان اندیش" />
          </Link>
          <nav className="desktop-nav" aria-label="ناوبری اصلی">
            {navItems.map((item) => (
              <Link
                className={item.key === active ? "active" : ""}
                href={item.href}
                key={item.label}
              >
                {item.label}
              </Link>
            ))}
          </nav>
          <div className="header__actions">
            <Link className="icon-button" href="/#smart-search" aria-label="جستجو">
              <Search size={22} />
            </Link>
            <button className="icon-button user-button" aria-label="حساب کاربری">
              <CircleUserRound size={22} />
            </button>
            <Link className="header__cta" href="/contact-us">
              درخواست مشاوره
              <ArrowUpLeft size={17} />
            </Link>
            <button
              className="mobile-toggle"
              onClick={() => setMobileOpen((open) => !open)}
              aria-label="منو"
            >
              {mobileOpen ? <X /> : <Menu />}
            </button>
          </div>
        </div>
        {mobileOpen && (
          <nav className="mobile-nav">
            {navItems.map((item) => (
              <Link
                href={item.href}
                key={item.label}
                onClick={() => setMobileOpen(false)}
              >
                {item.label}
                <ChevronLeft size={17} />
              </Link>
            ))}
          </nav>
        )}
      </header>
    </>
  );
}

export function InteriorFooter() {
  return (
    <footer className="footer">
      <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="لینکدین">
              <LinkIcon />
            </a>
            <a href="#" aria-label="تلگرام">
              <MessageCircle />
            </a>
          </div>
        </div>
        <div className="footer__links">
          <h3>دسترسی سریع</h3>
          <Link href="/">صفحه اصلی</Link>
          <Link href="/#products">ماشین‌آلات</Link>
          <Link href="/about-us">درباره ما</Link>
          <Link href="/contact-us">تماس با ما</Link>
        </div>
        <div className="footer__links">
          <h3>خدمات ما</h3>
          <Link href="/#services">تأمین ماشین‌آلات</Link>
          <Link href="/#services">خدمات فنی و مهندسی</Link>
          <Link href="/#services">مواد اولیه</Link>
          <Link href="/contact-us">مشاوره خرید</Link>
        </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>
  );
}