import Image from "next/image";
import Link from "next/link";
import { contact, megaCategories, navItems } from "./data";
import HeaderTools from "./HeaderTools";

export function Header() {
  return (
    <header className="site-header">
      <div className="container header-box">
        <div className="topbar">
          <div className="topbar-inner">
            <HeaderTools />
            <div className="topbar-links">
              <span className="top-icon" aria-label="تماس">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.6 10.8c1.5 3 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.2.5 1.2 1.2v3.5c0 .7-.5 1.2-1.2 1.2C10.3 22 2 13.7 2 3.4 2 2.7 2.5 2.2 3.2 2.2h3.5c.7 0 1.2.5 1.2 1.2 0 1.4.2 2.7.6 4 .1.4 0 .9-.3 1.2l-1.6 2.2Z" /></svg>
              </span>
              <a href="tel:02177133934">02177133934</a>
              <span>|</span>
              <a href="tel:02177132293">02177132293</a>
              <a className="top-icon" href={contact.instagram} aria-label="Instagram">
                <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="5" /><circle cx="12" cy="12" r="3.5" /><circle cx="17" cy="7" r="1" /></svg>
              </a>
            </div>
          </div>
        </div>
        <div className="nav-row">
          <nav className="main-nav" aria-label="ناوبری اصلی">
            <details className="category-menu">
              <summary>
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
                دسته بندی ها
              </summary>
              <div className="mega-menu">
                <div className="mega-title">
                  <span>Categories</span>
                  <h3>خرید بر اساس دسته</h3>
                </div>
                <div className="mega-tabs">
                  {megaCategories.map((group) => <a href="#" key={group.tab}>{group.tab}</a>)}
                </div>
                <div className="mega-columns">
                  {megaCategories.map((group) => (
                    <div key={group.title}>
                      <h4>{group.title}</h4>
                      {group.items.map((item) => <a href="#" key={item}>{item}</a>)}
                    </div>
                  ))}
                </div>
              </div>
            </details>
            {navItems.map((item) => (
              <Link key={item.href} href={item.href}>{item.label}</Link>
            ))}
          </nav>
          <details className="search-pop">
            <summary aria-label="جستجو">
              <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m16.5 16.5 4 4" /></svg>
            </summary>
            <form className="header-search" role="search">
              <input placeholder="جستجوی سرور، رم، هارد یا CPU" aria-label="جستجو" />
            </form>
          </details>
          <Link href="/" className="brand" aria-label="آریا شبکه پیشرو">
            <Image src="/assets/logo.png" alt="آریا شبکه پیشرو" width={300} height={52} priority />
          </Link>
        </div>
      </div>
    </header>
  );
}

export function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-grid">
        <div>
          <Image src="/assets/logo.png" alt="شرکت آریا شبکه پیشرو" width={263} height={45} />
          <p>مارا در شبکه های اجتماعی دنبال کنید.</p>
          <div className="socials">
            <a href={contact.telegram}>Telegram</a>
            <a href={contact.instagram}>Instagram</a>
          </div>
        </div>
        <div>
          <h3>درباره ما</h3>
          <p>آریا شبکه پیشرو شرکتی دانش بنیان، جوان و خلاق است. فعالیت مان را از سال ۱۳۹۵ با سرمایه ای اندک ولی با انگیزه سرشار و فکر و نیروی جوان آغاز کردیم. مجموعه ما در زمینه تامین تجهیزات شبکه از دو کمپانی HP و CISCO فعالیت دارد.</p>
        </div>
        <div>
          <h3>تماس با ما</h3>
          {contact.phones.slice(2).map((phone) => <a key={phone} href={`tel:${phone}`}>{phone}</a>)}
          <p>{contact.address}</p>
        </div>
        <div>
          <h3>صفحات</h3>
          {navItems.map((item) => <Link key={item.href} href={item.href}>{item.label}</Link>)}
          <a href="https://www.asphp.co/product-details/6232">خرید سرور اچ پی G9 DL380</a>
        </div>
      </div>
    </footer>
  );
}

export function PageShell({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}