import Header from "@/components/Header";
import Footer from "@/components/Footer";
import ProducerCard from "@/components/ProducerCard";
import { aboutBullets, featuredProducers } from "@/data/home";
import {
  activeFilterTags,
  breadcrumbs,
  businessFilters,
} from "@/data/pages";
import styles from "./businesses.module.css";

export const metadata = {
  title: "Businesses | IranBay",
};

export default function BusinessesPage() {
  const cards = [
    ...featuredProducers,
    ...featuredProducers,
    ...featuredProducers,
    ...featuredProducers,
  ].slice(0, 16);

  return (
    <div className={styles.page}>
      <Header />
      <main className={styles.shell}>
        <section className={styles.bannerWrap}>
          <div className={styles.banner}>
            <h1 className={styles.bannerTitle}>Let’s explore</h1>
            <nav className={styles.crumbs} aria-label="Breadcrumb">
              {breadcrumbs.map((crumb, index) => (
                <span key={crumb}>
                  {index > 0 ? (
                    <img
                      className={styles.crumbChevron}
                      src="/images/icons/chevron.svg"
                      alt=""
                    />
                  ) : null}
                  <span
                    className={
                      index === breadcrumbs.length - 1 ? styles.crumbActive : undefined
                    }
                  >
                    {crumb}
                  </span>
                </span>
              ))}
            </nav>
          </div>
        </section>

        <section className={styles.container}>
          <div className={styles.filtersBar}>
            <div className={styles.filtersLabel}>
              <img src="/images/icons/search.svg" alt="" width={22} height={22} />
              <div>
                <strong>Filters</strong>
                <span>A better focus</span>
              </div>
            </div>
            <div className={styles.filters}>
              {businessFilters.map((filter) => (
                <input
                  key={filter.label}
                  aria-label={filter.label}
                  defaultValue={filter.value}
                />
              ))}
              <button className={`filter-chip ${styles.filterBtn}`} type="button">
                Filter
                <img src="/images/icons/chevron.svg" alt="" />
              </button>
            </div>
          </div>

          <div className={styles.tags}>
            {activeFilterTags.map((tag) => (
              <span className={`filter-chip ${styles.tag}`} key={tag}>
                {tag}
                <button type="button" aria-label={`Remove ${tag}`}>
                  ×
                </button>
              </span>
            ))}
          </div>

          <div className={styles.grid}>
            {cards.map((producer, index) => (
              <ProducerCard
                key={`${producer.name}-${index}`}
                producer={producer}
              />
            ))}
          </div>

          <nav className={styles.pager} aria-label="Pagination">
            <a href="/businesses">First</a>
            <a href="/businesses">1</a>
            <span className={styles.pagerActive}>2</span>
            <a href="/businesses">3</a>
            <span>…</span>
            <a href="/businesses">15</a>
            <a href="/businesses">Last</a>
          </nav>
        </section>

        <section className={styles.featureSection}>
          <div className={styles.feature}>
            <div>
              <h2 className={styles.featureTitle}>Processed foods,</h2>
              <p className={styles.featureLead}>
                We are a gate to Iran&apos;s market place
              </p>
              <p className={styles.featureBody}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat.
              </p>
              <ul className={styles.featureList}>
                {aboutBullets.map((item, index) => (
                  <li key={`${item}-${index}`}>
                    <img src="/images/icons/bullet.svg" alt="" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
              <a className={`outline-btn ${styles.featureCta}`} href="/about">
                know more about us
              </a>
            </div>
            <div className={styles.featureVisual}>
              <img src="/images/hero/ice-cream.png" alt="Processed foods" />
            </div>
          </div>
        </section>

        <section className={styles.exportSection}>
          <div className={`tile-hover ${styles.exportCta}`}>
            <img
              className={styles.plane}
              src="/images/banners/plane.png"
              alt=""
            />
            <h2 className={styles.exportTitle}>
              let’s
              <br />
              export
            </h2>
            <a className={`outline-btn ${styles.beginBtn}`} href="/contact">
              begin
              <img src="/images/icons/chevron.svg" alt="" width={9} height={16} />
            </a>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}