// Zen Interiors — Projects index + Sectors pages
function ProjectsPage({ navigate, filterSector }) {
  const all = window.ZEN_PROJECTS;
  const [sector, setSector] = useState(filterSector || 'All');
  const [layout, setLayout] = useState('grid'); // grid | index
  const sectors = ['All', 'Penthouse', 'Apartment', 'Villa'];

  useEffect(() => {
    setSector(filterSector || 'All');
  }, [filterSector]);

  const visible = useMemo(() =>
    sector === 'All' ? all : all.filter(p => p.sector === sector),
  [all, sector]);

  return (
    <main className="fade-in" data-screen-label="Projects">

      {/* Header */}
      <section className="container" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="eyebrow">Index · Projects</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 144px)', margin: '20px 0 32px', lineHeight: 0.96, fontWeight: 300, letterSpacing: '-0.01em' }}>
          Calm rooms,
          <br />
          <span className="display-italic" style={{ color: 'var(--clay)' }}>seen in full.</span>
        </h1>
        <p style={{ color: 'var(--stone)', maxWidth: 640, fontSize: 17 }}>
          Penthouses, apartments and villas — across Dubai and beyond. Each project begins with a long brief and ends with the keys in your hand.
        </p>
      </section>

      {/* Filter bar */}
      <section className="container" style={{ paddingBottom: 48 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap', paddingTop: 22, paddingBottom: 22, borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
            <span className="eyebrow" style={{ marginRight: 18 }}>Filter</span>
            {sectors.map(s => (
              <button key={s} onClick={() => setSector(s)}
                style={{
                  background: sector === s ? 'var(--ink)' : 'transparent',
                  color: sector === s ? 'var(--paper)' : 'var(--ink)',
                  border: '1px solid ' + (sector === s ? 'var(--ink)' : 'var(--line-strong)'),
                  padding: '10px 18px',
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                  cursor: 'pointer',
                  transition: 'all 180ms ease',
                }}>
                {s} <span style={{ marginLeft: 6, color: sector === s ? 'var(--linen)' : 'var(--stone)' }}>
                  ({s === 'All' ? all.length : all.filter(p => p.sector === s).length})
                </span>
              </button>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <span className="eyebrow">View</span>
            <button onClick={() => setLayout('grid')}
              style={{
                background: 'transparent', border: 0, padding: 6,
                color: layout === 'grid' ? 'var(--ink)' : 'var(--stone-soft)',
                cursor: 'pointer',
              }} aria-label="Grid view">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="1" y="1" width="7" height="7" stroke="currentColor"/><rect x="10" y="1" width="7" height="7" stroke="currentColor"/><rect x="1" y="10" width="7" height="7" stroke="currentColor"/><rect x="10" y="10" width="7" height="7" stroke="currentColor"/></svg>
            </button>
            <button onClick={() => setLayout('index')}
              style={{
                background: 'transparent', border: 0, padding: 6,
                color: layout === 'index' ? 'var(--ink)' : 'var(--stone-soft)',
                cursor: 'pointer',
              }} aria-label="Index view">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><line x1="1" y1="3" x2="17" y2="3" stroke="currentColor"/><line x1="1" y1="9" x2="17" y2="9" stroke="currentColor"/><line x1="1" y1="15" x2="17" y2="15" stroke="currentColor"/></svg>
            </button>
          </div>
        </div>
      </section>

      {/* Content */}
      <section className="container" style={{ paddingBottom: 120 }}>
        {layout === 'grid' ? (
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
            gap: 'clamp(28px, 4vw, 56px)',
            rowGap: 80,
          }}>
            {visible.map(p => <ProjectCard key={p.slug} project={p} navigate={navigate} />)}
          </div>
        ) : (
          <ProjectsIndex projects={visible} navigate={navigate} />
        )}
      </section>
    </main>
  );
}

function ProjectsIndex({ projects, navigate }) {
  const [hoverSrc, setHoverSrc] = useState(null);
  const [pos, setPos] = useState({ x: 0, y: 0 });

  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      <div style={{ borderTop: '1px solid var(--line-strong)' }}>
        {projects.map((p, i) => (
          <a key={p.slug} href={`#/projects/${p.slug}`}
            onClick={(e) => { e.preventDefault(); navigate(`/projects/${p.slug}`); }}
            onMouseEnter={() => setHoverSrc(p.cover)}
            onMouseLeave={() => setHoverSrc(null)}
            style={{
              display: 'grid', gridTemplateColumns: '60px 2fr 1.2fr 1.2fr 60px',
              gap: 24, alignItems: 'baseline',
              padding: '36px 0',
              borderBottom: '1px solid var(--line)',
              transition: 'padding 220ms ease, background 220ms ease',
              cursor: 'pointer',
            }}>
            <div className="display" style={{ fontSize: 22, color: 'var(--stone)' }}>{String(i + 1).padStart(2, '0')}</div>
            <div>
              <div className="display" style={{ fontSize: 32, lineHeight: 1.1 }}>{p.name}</div>
            </div>
            <div className="eyebrow" style={{ color: 'var(--stone)' }}>{p.sector}</div>
            <div className="eyebrow" style={{ color: 'var(--stone)' }}>{p.location}</div>
            <div style={{ textAlign: 'right' }}><ArrowRight /></div>
          </a>
        ))}
      </div>
      {hoverSrc && (
        <div style={{
          position: 'fixed', left: pos.x + 24, top: pos.y - 140,
          width: 280, aspectRatio: '4/3', pointerEvents: 'none',
          zIndex: 30, transition: 'opacity 200ms ease',
        }}>
          <img src={hoverSrc} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
      )}
    </div>
  );
}

// SECTORS PAGE -------------------------------------------------------------
function SectorsPage({ navigate, slug }) {
  const all = window.ZEN_PROJECTS;
  const sectorMap = {
    penthouses: { name: 'Penthouses', filter: 'Penthouse', kicker: 'Top-floor residences. Skyline-facing plans, long horizons, evening-led lighting.', hero: 'media/project-volante-penthouse-01.webp' },
    apartments: { name: 'Apartments', filter: 'Apartment', kicker: 'Full-floor and half-floor city homes. Calm envelopes built around the view.', hero: 'media/project-tiara-aquamarine-residence.webp' },
    villas: { name: 'Villas', filter: 'Villa', kicker: 'Family homes — garden, beach or course-facing. Indoor-outdoor living, soft envelopes.', hero: 'media/project-wildflower-villa-01.webp' },
  };

  if (slug && sectorMap[slug]) {
    const s = sectorMap[slug];
    const projects = all.filter(p => p.sector === s.filter);
    return (
      <main className="fade-in" data-screen-label={`Sector / ${s.name}`}>
        <section style={{ position: 'relative', height: '70vh', minHeight: 480, overflow: 'hidden' }}>
          <img src={s.hero} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(28,26,22,0.1) 0%, rgba(28,26,22,0.6) 100%)' }} />
          <div className="container" style={{
            position: 'relative', zIndex: 2, height: '100%',
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
            paddingBottom: 64, color: 'var(--paper)',
          }}>
            <div className="eyebrow" style={{ color: 'rgba(250,247,242,0.85)' }}>Sector</div>
            <h1 className="display" style={{ fontSize: 'clamp(64px, 10vw, 144px)', margin: '14px 0 18px', lineHeight: 0.95, fontWeight: 300 }}>
              {s.name}<span className="display-italic" style={{ color: 'var(--linen)' }}>.</span>
            </h1>
            <p style={{ maxWidth: 560, fontSize: 17, color: 'rgba(250,247,242,0.86)' }}>{s.kicker}</p>
          </div>
        </section>

        <section className="container" style={{ paddingTop: 96, paddingBottom: 96 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 'clamp(28px, 4vw, 56px)', rowGap: 80 }}>
            {projects.map(p => <ProjectCard key={p.slug} project={p} navigate={navigate} />)}
          </div>
        </section>
      </main>
    );
  }

  // Sectors index
  return (
    <main className="fade-in" data-screen-label="Sectors">
      <section className="container" style={{ paddingTop: 80, paddingBottom: 56 }}>
        <div className="eyebrow">Sectors</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 144px)', margin: '20px 0 32px', lineHeight: 0.96, fontWeight: 300, letterSpacing: '-0.01em' }}>
          What we <span className="display-italic" style={{ color: 'var(--clay)' }}>design for.</span>
        </h1>
        <p style={{ color: 'var(--stone)', maxWidth: 640, fontSize: 17 }}>
          We work in three residential typologies. The plans differ; the studio's discipline doesn't.
        </p>
      </section>

      <section className="container" style={{ paddingBottom: 120 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(20px, 3vw, 40px)' }}>
          {['penthouses','apartments','villas'].map(key => {
            const s = sectorMap[key];
            const count = all.filter(p => p.sector === s.filter).length;
            return (
              <a key={key} href={`#/sectors/${key}`} onClick={(e) => { e.preventDefault(); navigate(`/sectors/${key}`); }}
                 style={{ cursor: 'pointer' }}>
                <div className="img-frame" style={{ aspectRatio: '3/4', marginBottom: 20 }}>
                  <img src={s.hero} alt={s.name} className="img-cover" />
                </div>
                <div className="eyebrow">{count} projects</div>
                <h3 className="display" style={{ fontSize: 36, margin: '10px 0 12px' }}>{s.name}</h3>
                <p style={{ color: 'var(--stone)', margin: 0 }}>{s.kicker}</p>
              </a>
            );
          })}
        </div>
      </section>
    </main>
  );
}

window.ProjectsPage = ProjectsPage;
window.SectorsPage = SectorsPage;