/* global React, Icon */

const FJ_SLIDER_1 = "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider01.jpg";
const FJ_SLIDER_2 = "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider02.jpg";

const PROJECTS = [
  { tags: ["Nyt tag", "Monier"],          where: "Sønderborg", img: FJ_SLIDER_2 },
  { tags: ["Nye vinduer", "VELFAC"],      where: "Augustenborg", img: FJ_SLIDER_1 },
  { tags: ["Tilbygning"],                 where: "Gråsten", img: FJ_SLIDER_2 },
  { tags: ["Kvist", "VELUX ovenlys"],     where: "Nordborg", img: FJ_SLIDER_1 },
  { tags: ["Tagrenovering"],              where: "Broager", img: FJ_SLIDER_2 },
  { tags: ["Vinduer", "Energirenovering"],where: "Als", img: FJ_SLIDER_1 },
];

function Gallery() {
  const [filter, setFilter] = React.useState("Alle");
  const filters = ["Alle", "Nyt tag", "Nye vinduer", "Tilbygning"];
  const visible = filter === "Alle" ? PROJECTS : PROJECTS.filter(p => p.tags.some(t => t.includes(filter.split(" ")[1] || filter)));

  return (
    <section className="gallery section panel" id="work" data-screen-label="Gallery">
      <div className="container">
        <div className="gallery__head">
          <div>
            <span className="eyebrow">Vores arbejde</span>
            <h2 className="section-title">Projekter fra hele Sønderjylland.</h2>
          </div>
          <div className="gallery__filters">
            {filters.map(f => (
              <button key={f} className={"chip" + (filter === f ? " chip--on" : "")} onClick={() => setFilter(f)}>{f}</button>
            ))}
          </div>
        </div>
        <div className="gallery__grid">
          {visible.map((p, i) => (
            <a key={i} href="#" className="proj">
              <div className="proj__img"><img src={p.img} alt="" referrerPolicy="no-referrer"/></div>
              <div className="proj__meta">
                <div className="proj__tags">
                  {p.tags.map(t => <span key={t} className="proj__tag">{t}</span>)}
                </div>
                <div className="proj__where">
                  <Icon name="map-pin" size={14} stroke="#E5AC31" />
                  {p.where}
                </div>
              </div>
            </a>
          ))}
        </div>
        <div className="gallery__cta">
          <a href="#" className="btn-outline">
            Se alle kundereferencer
            <Icon name="arrow-right" size={16} stroke="#0B1118"/>
          </a>
        </div>
      </div>
      <style>{`
        .gallery__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
        .gallery__filters { display: flex; gap: 8px; flex-wrap: wrap; }
        .chip {
          font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
          padding: 9px 14px; border-radius: 999px;
          background: transparent; color: var(--paper-dim);
          border: 1px solid var(--surface-divider); cursor: pointer;
          transition: all 80ms var(--ease-snappy);
        }
        .chip:hover { color: var(--paper); border-color: var(--paper-faint); }
        .chip--on { background: var(--accent); color: #fff; border-color: var(--accent); }
        .gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .proj { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-ink); border: 1px solid var(--surface-divider); transition: transform var(--dur-fast) var(--ease-snappy), border-color var(--dur-fast); }
        .proj:hover { transform: translateY(-2px); border-color: var(--accent); }
        .proj__img { aspect-ratio: 4/3; overflow: hidden; background: #0B1118; }
        .proj__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-snappy); }
        .proj:hover .proj__img img { transform: scale(1.04); }
        .proj__meta { padding: 14px 16px; }
        .proj__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
        .proj__tag { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; background: rgba(229,172,49,0.12); color: var(--accent); }
        .proj__where { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; color: var(--paper-dim); }
        .gallery__cta { margin-top: 36px; text-align: center; }
        @media (max-width: 960px) { .gallery__grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 540px) { .gallery__grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Gallery });