/* Collections + Craftsmanship + Projects */

function Collections({ onNav, onOpenCarpet }) {
  const [active, setActive] = useState('all');
  const [sort, setSort] = useState('curated');

  const list = useMemo(() => {
    let arr = active === 'all' ? window.ZULEYA.CARPETS : window.ZULEYA.CARPETS.filter(c => c.collection === active);
    arr = [...arr];
    if (sort === 'price-asc') arr.sort((a, b) => a.priceAed - b.priceAed);
    if (sort === 'price-desc') arr.sort((a, b) => b.priceAed - a.priceAed);
    if (sort === 'size') arr.sort((a, b) => parseFloat(a.size) * parseFloat(a.size.split('×')[1] || 1) - parseFloat(b.size) * parseFloat(b.size.split('×')[1] || 1));
    return arr;
  }, [active, sort]);

  const counts = useMemo(() => {
    const c = { all: window.ZULEYA.CARPETS.length };
    window.ZULEYA.CARPETS.forEach(x => { c[x.collection] = (c[x.collection] || 0) + 1; });
    return c;
  }, []);

  const activeMeta = window.ZULEYA.COLLECTIONS.find(c => c.id === active);

  return (
    <React.Fragment>
      <PageHeader
        eyebrow="The Collections"
        title={<span>Seven drawings, sixteen carpets, one loom.</span>}
        lead="Every Zuleya is a one-of-one. Each is signed by the artisan who finished it, shipped with a certificate of origin and the cartoon it was woven from."
      />

      <section className="section ivory" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="filter-row">
            {window.ZULEYA.COLLECTIONS.map(col => (
              <button key={col.id}
                      className={'filter-pill ' + (active === col.id ? 'active' : '')}
                      onClick={() => setActive(col.id)}>
                {col.name}<span className="count">{counts[col.id] || 0}</span>
              </button>
            ))}
          </div>

          {activeMeta && activeMeta.desc && (
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, paddingBottom: 28, borderBottom: '1px solid var(--line)', flexWrap: 'wrap', gap: 24 }}>
              <p className="lead" style={{ fontSize: 18, maxWidth: 560, margin: 0 }}>
                {activeMeta.desc}
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--muted)' }}>SORT</span>
                <select value={sort} onChange={(e) => setSort(e.target.value)}
                        style={{ background: 'transparent', border: '1px solid var(--line)', padding: '10px 14px', fontFamily: 'inherit', fontSize: 13, letterSpacing: '0.08em', cursor: 'pointer', borderRadius: 0 }}>
                  <option value="curated">Curated</option>
                  <option value="price-asc">Price · low to high</option>
                  <option value="price-desc">Price · high to low</option>
                  <option value="size">Size</option>
                </select>
              </div>
            </div>
          )}

          <div className="carpet-grid">
            {list.map(c => <CarpetCard key={c.id} c={c} onOpen={onOpenCarpet} />)}
          </div>

          {list.length === 0 && (
            <div style={{ textAlign: 'center', padding: '120px 0', color: 'var(--muted)' }}>
              No carpets here yet — try another collection.
            </div>
          )}
        </div>
      </section>

      <section className="section bone">
        <div className="container">
          <div className="split">
            <div>
              <Eyebrow>One-of-one</Eyebrow>
              <h2 className="h-section serif" style={{ marginTop: 24 }}>
                Every Zuleya carries the same paperwork as a museum piece.
              </h2>
            </div>
            <div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {[
                  { k: 'Signed', v: 'By the artisan who finished the carpet, in script on the reverse.' },
                  { k: 'Certificate of origin', v: 'Specifying loom number, weaver name, materials and weave date.' },
                  { k: 'Cartoon', v: 'The 1:1 drawing the carpet was woven from is shipped with the piece.' },
                  { k: 'Provenance booklet', v: 'A short letter from the loom, with photographs of the weavers and the wool.' },
                  { k: 'Lifetime care', v: 'Cleaning, repair and storage included for the life of the carpet.' }
                ].map(r => (
                  <li key={r.k} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', padding: '20px 0', borderBottom: '1px solid var(--line)', gap: 24, alignItems: 'baseline' }}>
                    <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--ink)', textTransform: 'uppercase' }}>{r.k}</span>
                    <span style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--muted)' }}>{r.v}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <CtaBand onNav={onNav} />
    </React.Fragment>
  );
}

function Craftsmanship({ onNav }) {
  const [step, setStep] = useState(0);
  const steps = window.ZULEYA.PROCESS_STEPS;
  const images = [
    'media/media-05-1.webp',
    'media/media-06-2.webp',
    'media/media-07-3.webp',
    'media/media-08-4.webp',
    'media/media-09-5.webp'
  ];

  return (
    <React.Fragment>
      <PageHeader
        eyebrow="Craftsmanship"
        title={<span>From a herder’s fleece to a knot — five stages, fourteen months.</span>}
        lead="A single Zuleya carpet passes through more than thirty pairs of hands. Walk the loom from raw wool to the cut-off, one stage at a time."
      />

      <section className="section-sm ivory" style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'flex-start' }}
               className="craft-interactive">
            <div>
              {steps.map((s, i) => (
                <div key={s.num}
                     onClick={() => setStep(i)}
                     style={{
                       padding: '28px 0',
                       borderTop: '1px solid var(--line)',
                       borderBottom: i === steps.length - 1 ? '1px solid var(--line)' : 'none',
                       cursor: 'pointer',
                       opacity: i === step ? 1 : 0.45,
                       transition: 'opacity 220ms ease',
                       display: 'grid',
                       gridTemplateColumns: '64px 1fr',
                       gap: 16
                     }}>
                  <div className="serif" style={{ fontSize: 14, color: 'var(--gold)', letterSpacing: '0.1em', paddingTop: 4 }}>{s.num}</div>
                  <div>
                    <h3 className="serif" style={{ fontSize: 28, marginBottom: 8, fontWeight: 500 }}>{s.title}</h3>
                    {i === step && (
                      <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--muted)', margin: 0 }}>{s.body}</p>
                    )}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ position: 'sticky', top: 120 }}>
              <div style={{ aspectRatio: '4/5', overflow: 'hidden', background: 'var(--bone)' }}>
                <img src={images[step]} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'opacity 320ms ease' }} key={step} />
              </div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 16, letterSpacing: '0.14em' }}>
                FIG. {String(step + 1).padStart(2, '0')} · {steps[step].title.toUpperCase()}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section noir">
        <div className="container">
          <div className="split">
            <div>
              <Eyebrow dark>Materials</Eyebrow>
              <h2 className="h-section serif" style={{ color: 'var(--ivory)', marginTop: 24 }}>
                Wool, plant, water — and a generation of hands.
              </h2>
            </div>
            <div>
              {[
                { k: 'Wool', v: 'Long-staple highland fleece, bought direct from Afghan herders in Balkh and Samangan provinces. Hand-sorted, hand-washed.' },
                { k: 'Dye', v: 'Madder root for red, indigo for blue, pomegranate skin and walnut hull for yellows and browns, oak gall for black. No synthetic dyes, ever.' },
                { k: 'Foundation', v: 'Cotton warp and weft, sourced inside Afghanistan. The cotton is the only thing in the carpet that is not visible to you — it is the bones.' },
                { k: 'Knot', v: 'Persian / asymmetric, three to ten knots per centimetre depending on the drawing. A 3 × 2 m carpet is around 750,000 individual knots.' }
              ].map(r => (
                <div key={r.k} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', padding: '22px 0', borderBottom: '1px solid rgba(255,255,255,0.08)', gap: 24, alignItems: 'baseline' }}>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--gold-2)', textTransform: 'uppercase' }}>{r.k}</span>
                  <span style={{ fontSize: 15, lineHeight: 1.6, color: '#D9CFBF' }}>{r.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section bone">
        <div className="container">
          <Eyebrow>The numbers behind a single carpet</Eyebrow>
          <h2 className="h-section serif" style={{ marginTop: 24, marginBottom: 56, maxWidth: 720 }}>
            A medium-format Zuleya, in figures.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
            {[
              { n: '4.2 kg', l: 'Raw highland fleece' },
              { n: '~580 km', l: 'Of hand-spun single-ply yarn' },
              { n: '720,000', l: 'Persian knots, tied by hand' },
              { n: '9 months', l: 'At the loom, two artisans' }
            ].map((s, i) => (
              <div key={s.n} style={{ padding: '48px 28px', borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
                <div className="serif" style={{ fontSize: 48, color: 'var(--ink)', lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--muted)', marginTop: 16 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaBand onNav={onNav} />
    </React.Fragment>
  );
}

function Projects({ onNav }) {
  return (
    <React.Fragment>
      <PageHeader
        eyebrow="Selected projects · 2019 – 2024"
        title={<span>Resorts, palaces, royal suites. Carpets drawn for the room they were always going to live in.</span>}
        lead="A short selection from the last five years. Most projects we run are under non-disclosure; the studios below have allowed us to show photography and scope."
        dark
      />

      <section className="section noir" style={{ paddingTop: 40 }}>
        <div className="container">
          <div style={{ marginBottom: 0 }}>
            {window.ZULEYA.PROJECTS.map(p => (
              <div key={p.id} className="project-card" onClick={() => onNav('contact')}>
                <div className="pimg" style={{ backgroundImage: `url(${p.img})` }}></div>
                <div>
                  <div className="meta-row">
                    <span>{p.year}</span>
                    <span>{p.sqm}</span>
                    <span style={{ color: '#BFB29C' }}>{p.scope}</span>
                  </div>
                  <h3 className="serif" style={{ color: 'var(--ivory)' }}>{p.name}</h3>
                  <p>{p.blurb}</p>
                  <a className="btn-link light">Project notes →</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section ivory">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="testimonials">
            {window.ZULEYA.TESTIMONIALS.map((t, i) => (
              <figure key={i} style={{ margin: 0, padding: 40, border: '1px solid var(--line)', background: 'var(--ivory)' }}>
                <div className="serif" style={{ fontSize: 60, color: 'var(--gold)', lineHeight: 0.5, height: 30 }}>“</div>
                <blockquote className="serif" style={{ fontSize: 24, lineHeight: 1.4, margin: '12px 0 24px', fontStyle: 'italic', fontWeight: 400 }}>
                  {t.quote}
                </blockquote>
                <figcaption>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4, letterSpacing: '0.08em' }}>{t.role}</div>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      <CtaBand onNav={onNav} />
    </React.Fragment>
  );
}

Object.assign(window, { Collections, Craftsmanship, Projects });