// ====== Pages ======
const { CATEGORIES: CATS, SITE, MAP_EMBED, PHONE_DISPLAY: PHONE, EMAIL: EMAIL_ADDR, ADDRESS_LINE1: ADDR1, ADDRESS_LINE2: ADDR2, WHATSAPP_URL: WA_URL } = window.KUKA_DATA;

function useImages() {
  return React.useContext(window.ImagesContext) || { map: {}, ready: false };
}

// -------- Home --------
function HomePage({ go, openLightbox }) {
  const { map } = useImages();

  // Latest uploaded photos across all categories (for the "recent work" strip).
  const recent = [];
  CATS.forEach(c => (map[c.id] || []).forEach((url, idx) => recent.push({ url, cat: c, idx })));
  const recentShown = recent.slice(-8).reverse();

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="hero-eyebrow">Punim me porosi · Burrel</div>
            <h1>Mobilje me porosi —<br/><em>cilësi dhe stil.</em></h1>
            <p className="hero-lead">
              Që nga viti 2008, projektojmë dhe ndërtojmë guzhina, dollape dhe mobilje për shtëpi në të gjithë Shqipërinë. Çdo punim është i dizajnuar sipas hapësirës dhe shijes suaj.
            </p>
            <div className="hero-actions">
              <button className="btn btn-primary" onClick={() => go('category', { categoryId: 'guzhina' })}>
                Shiko punimet tona <Icon.Arrow />
              </button>
              <button className="btn btn-ghost" onClick={() => go('contact')}>Kërko ofertë</button>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <span className="num">17+</span>
                <span className="lab">Vite eksperiencë</span>
              </div>
              <div className="hero-meta-item">
                <span className="num">800+</span>
                <span className="lab">Projekte të dorëzuara</span>
              </div>
              <div className="hero-meta-item">
                <span className="num">100%</span>
                <span className="lab">Punim me dorë</span>
              </div>
            </div>
          </div>
          <div className="hero-image">
            <Ph tone="walnut" id="site-hero" img={SITE.heroImg} label="Foto kryesore — Guzhinë e porositur, ambient banimi" />
            <div className="hero-badge">Punim 2026</div>
          </div>
        </div>
      </section>

      {/* CATEGORIES */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="section-eyebrow">Kategoritë tona</span>
              <h2 className="section-title">Çfarë <em>ndërtojmë</em> për shtëpinë tuaj.</h2>
            </div>
            <a className="section-link" onClick={() => go('category', { categoryId: 'guzhina' })}>
              Shiko të gjitha <Icon.Arrow size={14} />
            </a>
          </div>
          <div className="cat-grid">
            {CATS.map(c => {
              const cnt = (map[c.id] || []).length;
              return (
                <div key={c.id} className="cat-card" onClick={() => go('category', { categoryId: c.id })}>
                  <Ph tone={c.tone} id={c.id} img={c.img} label={c.name} />
                  <div className="cat-card-arrow"><Icon.Arrow size={14} /></div>
                  <div className="cat-card-overlay">
                    <div className="cat-card-info">
                      <div className="num">{c.num} / {c.sub}</div>
                      <h3>{c.name}</h3>
                      <div className="count">{cnt > 0 ? `${cnt} ${cnt === 1 ? 'punim' : 'punime'}` : 'Së shpejti'}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* RECENT WORKS — only shown once photos exist */}
      {recentShown.length > 0 && (
        <section className="section" style={{ background: 'var(--cream-100)' }}>
          <div className="container">
            <div className="section-head">
              <div>
                <span className="section-eyebrow">Të porsadorëzuara</span>
                <h2 className="section-title">Punimet <em>e fundit</em>.</h2>
              </div>
            </div>
            <div className="works-grid">
              {recentShown.map((item, k) => (
                <div key={k} className="work-card" onClick={() => openLightbox(map[item.cat.id], item.idx, item.cat.name)}>
                  <div className="work-card-img">
                    <img className="ph-img" src={item.url} alt={item.cat.name} loading="lazy" />
                    <div className="photo-card-zoom"><Icon.Zoom size={16} /></div>
                  </div>
                  <div className="work-card-cat">{item.cat.name}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}
    </main>
  );
}

// -------- Category --------
const PAGE_SIZE = 9;

function CategoryPage({ categoryId, go, openLightbox }) {
  const cat = CATS.find(c => c.id === categoryId) || CATS[0];
  const { map } = useImages();
  const photos = map[cat.id] || [];
  const [visible, setVisible] = React.useState(PAGE_SIZE);
  React.useEffect(() => { setVisible(PAGE_SIZE); }, [cat.id]);
  const shown = photos.slice(0, visible);

  return (
    <main>
      <div className="page-head">
        <div className="container">
          <div className="crumb">
            <a onClick={() => go('home')}>Kryefaqja</a> &nbsp;/&nbsp; Produktet &nbsp;/&nbsp; <span style={{ color: 'var(--walnut-900)' }}>{cat.name}</span>
          </div>
          <h1>{cat.name}</h1>
          <p>
            {photos.length > 0
              ? `${photos.length} ${photos.length === 1 ? 'punim' : 'punime'} të realizuara. Klikoni një foto për ta parë nga afër dhe na shkruani për një ofertë.`
              : 'Së shpejti do të shtojmë fotografitë e punimeve tona në këtë kategori. Na kontaktoni për të diskutuar projektin tuaj.'}
          </p>
          <div className="cat-tabs">
            {CATS.map(c => (
              <button key={c.id} className={`cat-tab ${c.id === cat.id ? 'active' : ''}`} onClick={() => go('category', { categoryId: c.id })}>
                {c.name}
              </button>
            ))}
          </div>
        </div>
      </div>

      <section className="section">
        <div className="container">
          {photos.length === 0 ? (
            <div className="cat-empty">
              <Icon.Sparkle size={22} />
              <h3>Ende pa foto në këtë kategori</h3>
              <p>Fotografitë do të shfaqen këtu sapo të ngarkohen. Ndërkohë, na shkruani për punime të ngjashme.</p>
              <a className="btn btn-whatsapp" href={WA_URL} target="_blank" rel="noopener">
                <Icon.WhatsApp size={16} /> Na shkruani në WhatsApp
              </a>
            </div>
          ) : (
            <React.Fragment>
              <div className="photo-grid">
                {shown.map((url, i) => (
                  <div key={url} className="photo-card" onClick={() => openLightbox(photos, i, cat.name)}>
                    <img src={url} alt={cat.name} loading="lazy" />
                    <div className="photo-card-zoom"><Icon.Zoom size={16} /></div>
                  </div>
                ))}
              </div>
              {visible < photos.length && (
                <div className="show-more-wrap">
                  <button className="btn btn-ghost" onClick={() => setVisible(v => v + PAGE_SIZE)}>
                    Shiko më shumë ({photos.length - visible})
                  </button>
                </div>
              )}
            </React.Fragment>
          )}
        </div>
      </section>
    </main>
  );
}

// -------- Contact --------
function ContactPage({ go }) {
  const [sent, setSent] = React.useState(false);
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <main>
      <div className="page-head">
        <div className="container">
          <div className="crumb"><a onClick={() => go('home')}>Kryefaqja</a> &nbsp;/&nbsp; <span style={{ color: 'var(--walnut-900)' }}>Kontakt</span></div>
          <h1>Le të <em>flasim</em>.</h1>
          <p>Na shkruani për një ofertë, një vizitë në punishte, ose thjesht për të diskutuar idenë tuaj. Përgjigjemi brenda 24 orësh.</p>
        </div>
      </div>

      <section>
        <div className="container">
          <div className="contact-grid">
            <form className="form-card" onSubmit={onSubmit}>
              <span className="section-eyebrow">Forma e kontaktit</span>
              <h2 className="section-title" style={{ fontSize: 38, marginBottom: 16 }}>Na tregoni për projektin tuaj.</h2>
              {sent && (
                <div className="form-success" role="status">
                  <strong>Faleminderit!</strong> Mesazhi juaj u regjistrua. Do t'ju kontaktojmë brenda 24 orësh. Për përgjigje të menjëhershme, na shkruani në WhatsApp.
                </div>
              )}
              <div className="form-row">
                <div className="field">
                  <label>Emri i plotë</label>
                  <input type="text" placeholder="Emri Mbiemri" />
                </div>
                <div className="field">
                  <label>Telefoni</label>
                  <input type="tel" placeholder="+355 ..." />
                </div>
              </div>
              <div className="field">
                <label>Email (opsional)</label>
                <input type="email" placeholder="email@example.com" />
              </div>
              <div className="field">
                <label>Kategoria</label>
                <input type="text" placeholder="P.sh. Guzhinë, Dollap, Dhomë gjumi…" />
              </div>
              <div className="field">
                <label>Mesazhi</label>
                <textarea placeholder="Përshkruani shkurt projektin: hapësira, stili që dëshironi, afati i preferuar…" />
              </div>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 8 }}>
                <button className="btn btn-primary" type="submit">Dërgo mesazhin <Icon.Arrow /></button>
                <a className="btn btn-whatsapp" href={WA_URL} target="_blank" rel="noopener">
                  <Icon.WhatsApp size={16} /> ose në WhatsApp
                </a>
              </div>
            </form>

            <aside className="contact-info-card">
              <h3>Kontakt direkt</h3>
              <div className="info-block">
                <div className="ttl">Adresa</div>
                <div className="val">{ADDR1}<br/>{ADDR2}</div>
              </div>
              <div className="info-block">
                <div className="ttl">Telefon</div>
                <div className="val"><a href={`tel:${PHONE.replace(/\s/g, '')}`}>{PHONE}</a></div>
              </div>
              <div className="info-block">
                <div className="ttl">Email</div>
                <div className="val"><a href={`mailto:${EMAIL_ADDR}`}>{EMAIL_ADDR}</a></div>
              </div>
              <div className="info-block">
                <div className="ttl">Orari</div>
                <div className="val">Hënë – Shtunë · 08:00 – 18:00<br/>E diel · Mbyllur</div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <div className="map-wide">
        {MAP_EMBED ? (
          <iframe title="Harta" src={MAP_EMBED} loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen></iframe>
        ) : (
          <div className="map-ph">
            <div className="map-pin">
              <span className="lab">Mobileri Kuka · Burrel</span>
              <span className="dot" />
              <span className="stem" />
            </div>
          </div>
        )}
      </div>
    </main>
  );
}

Object.assign(window, { HomePage, CategoryPage, ContactPage });